96 lines
2.2 KiB
Vue
96 lines
2.2 KiB
Vue
<template>
|
|
<div :class="['form-group', { 'has-error': error }]">
|
|
<label v-if="label" :class="{ required: required }">{{ label }}</label>
|
|
<select
|
|
:value="modelValue"
|
|
@input="input"
|
|
@blur="handleBlur"
|
|
@keydown="handleBlur">
|
|
<option
|
|
v-for="(value, key) in options"
|
|
:key="key"
|
|
:value="key"
|
|
:selected="modelValue == value">
|
|
{{ value }}
|
|
</option>
|
|
</select>
|
|
<div class="form-group-error">{{ error }}</div>
|
|
<div v-if="slots.default" class="form-group-info">
|
|
<slot></slot>
|
|
</div>
|
|
<div v-if="help" class="form-group-help">
|
|
<font-awesome-icon v-if="helpIcon" :icon="helpIcon" />
|
|
{{ help }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useSlots, onMounted, computed, watch } from "vue";
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
options: {
|
|
type: Object,
|
|
default() {
|
|
return {};
|
|
},
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
required: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: "text",
|
|
},
|
|
error: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
help: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
helpIcon: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
});
|
|
|
|
const emits = defineEmits(["update:modelValue", "blur"]);
|
|
const slots = useSlots();
|
|
|
|
const input = (event) => {
|
|
emits("update:modelValue", event.target.value);
|
|
};
|
|
|
|
const handleBlur = (event) => {
|
|
if (event.keyCode == undefined || event.keyCode == 9) {
|
|
emits("blur", event);
|
|
}
|
|
};
|
|
|
|
const initialOptions = computed(() => {
|
|
return props.options;
|
|
});
|
|
|
|
watch(initialOptions, () => {
|
|
if (
|
|
props.modelValue.length > 0 &&
|
|
props.modelValue in Object.keys(props.options) == true
|
|
) {
|
|
emits("update:modelValue", props.modelValue);
|
|
} else if (Object.keys(props.options).length > 0) {
|
|
emits("update:modelValue", Object.keys(props.options)[0]);
|
|
}
|
|
});
|
|
</script>
|