etc

src/components/Alert.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 const props = defineProps<{
-	type?: string,
+	color?: 'primary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
 	value?: string
 }>()
 </script>
 
 <template>
-	<div class="ui-alert" :class="props.type">
-		<span v-if="props.value">{{props.value}}</span>
+	<div class="ui-alert" :class="props.color">
+		{{ props.value }}
 		<slot v-if="$slots.default" name="default" />
 	</div>
 </template>

src/components/Btn.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import UiIcon from './Icon.vue'
 
 // Props.
@@ -9,19 +8,12 @@ const props = defineProps<{
 	color?: string
 	icon?: any
 }>()
-
-// Etc.
-const cssClass = computed(() => {
-	let res = ''
-	if (props.color) res = props.color
-	return res
-})
 </script>
 
 <template>
-	<button class="ui-btn" :class="cssClass" :type="props.type">
+	<button class="ui-btn" :class="props.color" :type="props.type">
 		<ui-icon v-if="props.icon" :name="props.icon" />
 		<div v-if="props.label" class="label">{{ props.label }}</div>
-		<slot name="default" />
+		<slot v-if="$slots.default" name="default" />
 	</button>
 </template>

src/components/Field.vue

@@ -79,7 +79,7 @@ const inputHandler = (val: any) => {
 			@input="inputHandler"
 			class="input"
 		>
-			<slot />
+			<!-- <slot v-if="$slots.default" name="default" /> -->
 		</select>
 		<div v-if="props.error" class="message">{{ props.error }}</div>
 	</div>

src/components/FieldSelect.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { PropType } from 'vue'
 import { computed } from 'vue'
 import UiField from './Field.vue'
 
@@ -17,7 +16,7 @@ const displayValue = computed({
 </script>
 
 <template>
-	<ui-field tag="select" class="ui-field-select" v-model="displayValue">
+	<ui-field tag="select" class="ui-field-select">
 		<option v-for="opt in props.options" :value="opt.value">
 			{{opt.text}}
 		</option>

src/components/FieldSelectGender.vue

@@ -15,5 +15,6 @@ const options: any[] = [
 </script>
 
 <template>
+	<p>Select gender</p>
 	<ui-field-select :options="options" class="ui-field-select-gender" />
 </template>

src/components/Form.vue

@@ -7,7 +7,7 @@ import UiBtn from './Btn.vue'
 
 // Props.
 const props = defineProps<{
-	modelValue: BaseFormModel<any>
+	modelValue?: BaseFormModel<any>
 	title?: string
 	noTitle?: boolean
 	messages?: TNotificationItem[]

src/components/index.ts

@@ -1,14 +1,14 @@
+export { default as UiBtn } from './Btn.vue'
+export { default as UiAlert } from './Alert.vue'
 export { default as UiField } from './Field.vue'
 export { default as UiFieldText } from './FieldText.vue'
+export { default as UiFieldTextArea } from './FieldTextArea.vue'
 export { default as UiFieldPassword } from './FieldPassword.vue'
 export { default as UiFieldNumber } from './FieldNumber.vue'
 export { default as UiFieldPhone } from './FieldPhone.vue'
 export { default as UiFieldDate } from './FieldDate.vue'
-export { default as UiFieldTextArea } from './FieldTextArea.vue'
 export { default as UiFieldCheckbox } from './FieldCheckbox.vue'
 export { default as UiFieldSelect } from './FieldSelect.vue'
 export { default as UiFieldSelectGender } from './FieldSelectGender.vue'
-export { default as UiBtn } from './Btn.vue'
-export { default as UiAlert } from './Alert.vue'
 export { default as UiIcon } from './Icon.vue'
 export { default as UiForm } from './Form.vue'