big update

src/components/FieldSelect.vue

@@ -1,27 +1,59 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import UiField from './Field.vue'
+<script lang="ts">
+import type { TUiFiledWrapperProps } from './FieldWrapper.vue'
 
-const props = defineProps<{
-	modelValue?: string | string[] | number | number[],
+export type TUiFieldSelectProps = TUiFiledWrapperProps & {
+	modelValue?: string | string[] | number | number[]
+	options?: { text: string; value: string | number }[]
 	multiple?: boolean
-	options: { text: string, value: any }[]
-}>()
+}
 
-const emit = defineEmits<{ (e: 'update:modelValue', v?: any): void }>()
+export type TUiFieldSelectEmits = {
+	(e: 'input', v: Event): void
+	(e: 'update:model-value', v?: string | string[] | number | number[]): void
+	(e: 'update:error', v?: string): void
+}
+</script>
 
-const displayValue = computed({
-	get: () => props.modelValue,
-	set: (val) => emit('update:modelValue', val)
-})
+<script setup lang="ts">
+import UiFieldWrapper from './FieldWrapper.vue'
+
+// Props.
+const props = defineProps<TUiFieldSelectProps>()
+
+// Emits.
+const emit = defineEmits<TUiFieldSelectEmits>()
+
+// Handlers.
+const inputHandler = (val: Event) => {
+	emit('input', val)
+	emit('update:error')
+
+	if (val.target instanceof HTMLSelectElement) {
+		emit('update:model-value', val.target.value)
+	} else {
+		emit('update:model-value')
+	}
+}
 </script>
 
 <template>
-	<ui-field
-		tag="select"
+	<ui-field-wrapper
+		:label="props.label"
+		:error="props.error"
+		:disabled="props.disabled"
+		:readonly="props.readonly"
+		:description="props.description"
 		class="ui-field-select"
-		:options="props.options"
-		:multiple="props.multiple"
-		v-model="displayValue"
-	/>
+	>
+		<select
+			:value="props.modelValue"
+			:multiple="props.multiple"
+			:disabled="props.disabled || props.readonly"
+			@input="inputHandler"
+		>
+			<option v-for="item in props.options" :value="item.value">
+				{{ item.text }}
+			</option>
+		</select>
+	</ui-field-wrapper>
 </template>