speed fix

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",

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)

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">

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>

tailwind.config.ts

@@ -2,6 +2,7 @@ import type { Config } from 'tailwindcss'
 
 const config: Config = {
 	content: ['./src/components/**/*.vue'],
+	darkMode: 'class',
 	theme: {
 		extend: {
 			colors: {