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">
+	<div class="ui-alert" :class="props.color">
-		<span v-if="props.value">{{props.value}}</span>
+		{{ 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'

src/css/common.sass

@@ -2,8 +2,7 @@ body
   @apply text-dark
   *
     @apply text-base
-  .title
+
-    @apply mb-4
 h1
   @apply text-xl md:text-2xl font-bold
 h2
@@ -13,9 +12,17 @@ body
 h4
   @apply text-sm md:text-base font-bold
 
+p
+  &:not(:last-child)
+    @apply mb-4
+
+.title
+  @apply mb-4
+
 .ui
   &-btn,
   &-field .input
+    @apply outline-none
     @apply h-[38px] text-base
 
   &-btn
@@ -45,6 +52,11 @@ body
       .input
         @apply min-h-[80px]
 
+  &-alert
+    @apply border p-2
+    &:not(:last-child)
+      @apply mb-2
+
   &-icon
     @apply block w-[24px]
 

src/css/theme.sass

@@ -1,30 +1,45 @@
 .ui
+  &-btn
+    @apply outline-none
+    &:hover:not(:active)
+      @apply bg-opacity-80
+
+  &-btn,
+  &-alert
+    @apply bg-white
+    &.primary
+      @apply bg-primary border-primary text-white
+    &.accent
+      @apply bg-accent border-accent text-white
+    &.info
+      @apply bg-info border-info text-white
+    &.success
+      @apply bg-success border-success text-white
+    &.warning
+      @apply bg-warning border-warning text-white
+    &.error
+      @apply bg-error border-error text-white
+    &.dark
+      @apply bg-dark border-dark text-white
+    &.light
+      @apply bg-light
+    &:disabled
+      @apply text-white bg-light border-light
+
   &-field
-    &.disabled
-      .input
-        @apply bg-light/10 text-dark/60
     &.error
       .label,
       .input,
       .message
         @apply text-error border-error
-  &-btn
+    &.disabled
-    &.primary
+      .input
-      @apply bg-primary text-white
+        @apply bg-light/10 text-dark/60
-    &.accent
+  &-field .input
-      @apply bg-accent text-white
+    @apply bg-white dark:bg-white/10
-    &.dark
+
-      @apply bg-dark text-white
-    &.light
-      @apply bg-light text-white
-    &.error
-      @apply bg-error text-white
-    &.success
-      @apply bg-success text-white
-    &:disabled
-      @apply text-white bg-light border-light
   &-btn,
+  &-alert,
   &-field .input
       @apply rounded
-  &-field .input
+
-    @apply bg-white

tailwind.config.ts

@@ -6,11 +6,15 @@ const config: Config = {
 		extend: {
 			colors: {
 				primary: '#3c87a4',
-				accent: '#f00000',
+				accent: '#ab6dfd',
+
 				dark: '#363636',
-				light: '#cdcdcd',
+				light: '#f1f1f1',
-				error: '#f00000',
+
-				success: '#07b859'
+				info: '#2196f3',
+				warning: '#ff9800',
+				success: '#2dd633',
+				error: '#f00000'
 			},
 			container: {
 				center: true,