From f58a5106eb4d174a992e21b982c6bcf9a5a75883 Mon Sep 17 00:00:00 2001
From: AntoXa PRO <info@antoxa.pro>
Date: Thu, 24 Aug 2023 12:42:14 +0300
Subject: [PATCH] speed fix

---
 package.json                   |  2 +-
 src/colors.ts                  |  2 +-
 src/components/Form.vue        |  6 +++---
 src/components/ToggleTheme.vue | 16 ++++++++++++----
 tailwind.config.ts             |  1 +
 5 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 5005022..d6cc6db 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "axp-ui",
 	"descriiption": "My helper ui lib",
-	"version": "1.6.2",
+	"version": "1.6.3",
 	"homepage": "https://antoxahub.ru/antoxa/axp-ui",
 	"repository": {
 		"type": "git",
diff --git a/src/colors.ts b/src/colors.ts
index 6cbdcfd..2741865 100644
--- a/src/colors.ts
+++ b/src/colors.ts
@@ -11,4 +11,4 @@ export enum ColorEnum {
 
 export type TColor = keyof typeof ColorEnum
 
-export const colors = Object.keys(ColorEnum)
+export const colors = <TColor[]>Object.keys(ColorEnum)
diff --git a/src/components/Form.vue b/src/components/Form.vue
index dac1df4..7a19ce4 100644
--- a/src/components/Form.vue
+++ b/src/components/Form.vue
@@ -51,7 +51,7 @@ const title = computed(() => {
 const load = ref(false)
 watch(load, val => emit('update:load', val))
 
-const messages: Ref<TNotificationItem[]> = ref(props.messages || [])
+const messages = ref<TNotificationItem[]>(props.messages || [])
 watch(
 	() => props.messages,
 	val => (messages.value = val || [])
@@ -101,7 +101,7 @@ const submitHandler = async () => {
 
 // Etc.
 const getColorMessage = (item: TNotificationItem) => {
-	return colors.includes(item.code) ? item.code : 'error'
+	return colors.find(e => e === item.code) ?? 'error'
 }
 </script>
 
@@ -114,7 +114,7 @@ const getColorMessage = (item: TNotificationItem) => {
 			<ui-alert
 				v-for="item in messages"
 				:value="item.text"
-				:color="colors.includes(item.code) ? item.code : 'error'"
+				:color="getColorMessage(item)"
 			/>
 		</div>
 		<div class="ui-form-body">
diff --git a/src/components/ToggleTheme.vue b/src/components/ToggleTheme.vue
index dd11b72..dda415e 100644
--- a/src/components/ToggleTheme.vue
+++ b/src/components/ToggleTheme.vue
@@ -1,21 +1,29 @@
+<script lang="ts">
+export type TTheme = 'light' | 'dark'
+</script>
+
 <script setup lang="ts">
 import UiIcon from './Icon.vue'
 
 // Props.
 const props = defineProps<{
-	dark?: boolean
+	modelValue?: TTheme
 }>()
 
 // Emits.
-const emit = defineEmits<{ (e: 'update:dark', v: boolean): void }>()
+const emit = defineEmits<{ (e: 'update:modelValue', v: TTheme): void }>()
+
+// Handlers.
+const clickHandler = ({}: PointerEvent) =>
+	emit('update:modelValue', props.modelValue === 'dark' ? 'light' : 'dark')
 </script>
 
 <template>
 	<div class="ui-toggle-theme">
 		<ui-icon
-			:name="props.dark ? 'moon' : 'sun'"
-			@click="emit('update:dark', !props.dark)"
 			title="Переключить тему"
+			:name="props.modelValue === 'dark' ? 'moon' : 'sun'"
+			@click="clickHandler"
 		/>
 	</div>
 </template>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 838f149..e2a469a 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -2,6 +2,7 @@ import type { Config } from 'tailwindcss'
 
 const config: Config = {
 	content: ['./src/components/**/*.vue'],
+	darkMode: 'class',
 	theme: {
 		extend: {
 			colors: {