From 6179e53af7533e4cbc427997c3dee82b6393adae Mon Sep 17 00:00:00 2001
From: AntoXa PRO <info@antoxa.pro>
Date: Wed, 26 Jul 2023 14:07:17 +0300
Subject: [PATCH] etc

---
 src/components/Alert.vue             |  6 +--
 src/components/Btn.vue               | 12 +-----
 src/components/Field.vue             |  2 +-
 src/components/FieldSelect.vue       |  3 +-
 src/components/FieldSelectGender.vue |  1 +
 src/components/Form.vue              |  2 +-
 src/components/index.ts              |  6 +--
 src/css/common.sass                  | 32 +++++++++++-----
 src/css/theme.sass                   | 55 ++++++++++++++++++----------
 tailwind.config.ts                   | 12 ++++--
 10 files changed, 77 insertions(+), 54 deletions(-)

diff --git a/src/components/Alert.vue b/src/components/Alert.vue
index a748f3f..bfe1082 100644
--- a/src/components/Alert.vue
+++ b/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>
diff --git a/src/components/Btn.vue b/src/components/Btn.vue
index f92f85b..ee75a99 100644
--- a/src/components/Btn.vue
+++ b/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>
diff --git a/src/components/Field.vue b/src/components/Field.vue
index 82cf9c0..7f6d326 100644
--- a/src/components/Field.vue
+++ b/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>
diff --git a/src/components/FieldSelect.vue b/src/components/FieldSelect.vue
index 3ad7ca4..31248c9 100644
--- a/src/components/FieldSelect.vue
+++ b/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>
diff --git a/src/components/FieldSelectGender.vue b/src/components/FieldSelectGender.vue
index f47b4db..d06f095 100644
--- a/src/components/FieldSelectGender.vue
+++ b/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>
diff --git a/src/components/Form.vue b/src/components/Form.vue
index 52c8412..09ed378 100644
--- a/src/components/Form.vue
+++ b/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[]
diff --git a/src/components/index.ts b/src/components/index.ts
index c902a27..da20440 100644
--- a/src/components/index.ts
+++ b/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'
diff --git a/src/css/common.sass b/src/css/common.sass
index 9586cd5..feb9614 100644
--- a/src/css/common.sass
+++ b/src/css/common.sass
@@ -2,21 +2,28 @@ body
   @apply text-dark
   *
     @apply text-base
-  .title
+
+h1
+  @apply text-xl md:text-2xl font-bold
+h2
+  @apply text-lg md:text-xl font-bold
+h3
+  @apply text-base md:text-lg font-bold
+h4
+  @apply text-sm md:text-base font-bold
+
+p
+  &:not(:last-child)
     @apply mb-4
-  h1
-    @apply text-xl md:text-2xl font-bold
-  h2
-    @apply text-lg md:text-xl font-bold
-  h3
-    @apply text-base md:text-lg font-bold
-  h4
-    @apply text-sm md:text-base font-bold
+
+.title
+  @apply mb-4
 
 .ui
   &-btn,
   &-field .input
-      @apply h-[38px] text-base
+    @apply outline-none
+    @apply h-[38px] text-base
 
   &-btn
     @apply px-4 border
@@ -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]
 
diff --git a/src/css/theme.sass b/src/css/theme.sass
index bdf0cdb..16d29a5 100644
--- a/src/css/theme.sass
+++ b/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
-    &.primary
-      @apply bg-primary text-white
-    &.accent
-      @apply bg-accent text-white
-    &.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
+    &.disabled
+      .input
+        @apply bg-light/10 text-dark/60
+  &-field .input
+    @apply bg-white dark:bg-white/10
+
   &-btn,
+  &-alert,
   &-field .input
       @apply rounded
-  &-field .input
-    @apply bg-white
+
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 5219988..838f149 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -6,11 +6,15 @@ const config: Config = {
 		extend: {
 			colors: {
 				primary: '#3c87a4',
-				accent: '#f00000',
+				accent: '#ab6dfd',
+
 				dark: '#363636',
-				light: '#cdcdcd',
-				error: '#f00000',
-				success: '#07b859'
+				light: '#f1f1f1',
+
+				info: '#2196f3',
+				warning: '#ff9800',
+				success: '#2dd633',
+				error: '#f00000'
 			},
 			container: {
 				center: true,