big change

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "axp-ui",
 	"descriiption": "My helper ui lib",
-	"version": "1.5.18",
+	"version": "1.6.0",
 	"homepage": "https://antoxahub.ru/antoxa/axp-ui",
 	"repository": {
 		"type": "git",

src/components/Dialog.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import UiIcon from './Icon.vue'
+
+const props = defineProps({
+	open: { type: Boolean, default: false },
+	close: { type: Boolean, default: false },
+	title: { type: String }
+})
+
+const emit = defineEmits(['update:open'])
+
+const dialogState = ref(props.open)
+
+const closeDialog = () => {
+	dialogState.value = false
+	emit('update:open', false)
+}
+
+const clickWrapperHandler = (e: MouseEvent) => {
+	if (e.target instanceof Element) {
+		if (e.target.classList.contains('ui-dialog')) closeDialog()
+	}
+}
+
+watch(
+	() => props.open,
+	val => (dialogState.value = val)
+)
+</script>
+
+<template>
+	<dialog class="ui-dialog" :open="dialogState" @click="clickWrapperHandler">
+		<div class="ui-dialog-window">
+			<div class="ui-dialog-window-header" v-if="props.title">
+				<h4>{{ title }}</h4>
+				<ui-icon name="close" @click="closeDialog" />
+			</div>
+			<div v-if="$slots.default" class="ui-dialog-window-content">
+				<slot name="default" />
+			</div>
+		</div>
+	</dialog>
+</template>

src/components/Field.vue

@@ -10,6 +10,7 @@ const props = defineProps<{
 	tag?: 'input' | 'textarea' | 'select'
 	checked?: boolean
 	options?: { text: string, value: any }[]
+	multiple?: boolean
 }>()
 
 // Emits.
@@ -57,6 +58,7 @@ const inputHandler = (val: any) => {
 		<div v-if="props.label" class="label">{{ props.label }}</div>
 		<input
 			v-if="!tag || tag === 'input'"	
+			class="input"
 			:type="props.type"
 			:value="props.modelValue"
 			:readonly="props.readonly"
@@ -64,25 +66,25 @@ const inputHandler = (val: any) => {
 			:checked="checked"
 			:placeholder="props.placeholder"
 			@input="inputHandler"
-			class="input"
 		/>
 		<textarea
 			v-if="tag === 'textarea'"
+			class="input"
 			:value="props.modelValue"
 			:readonly="props.readonly"
 			:disabled="props.disabled"
 			:placeholder="props.placeholder"
 			@input="inputHandler"
-			class="input"
 		/>
 		<select
 			v-if="tag === 'select'"
+			class="input"
 			:value="props.modelValue"
 			:readonly="props.readonly"
 			:disabled="props.disabled"
 			:placeholder="props.placeholder"
+			:multiple="props.multiple"
 			@input="inputHandler"
-			class="input"
 		>
 			<option v-for="item in props.options" :value="item.value">
 				{{ item.text }}

src/components/FieldSelect.vue

@@ -3,7 +3,8 @@ import { computed } from 'vue'
 import UiField from './Field.vue'
 
 const props = defineProps<{
-	modelValue?: string | number,
+	modelValue?: string | string[] | number | number[],
+	multiple?: boolean
 	options: { text: string, value: any }[]
 }>()
 
@@ -20,6 +21,7 @@ const displayValue = computed({
 		tag="select"
 		class="ui-field-select"
 		:options="props.options"
+		:multiple="props.multiple"
 		v-model="displayValue"
 	/>
 </template>

src/components/Form.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import type { TNotificationItem, BaseFormModel } from 'axp-ts'
+
 import { ref, computed, watch } from 'vue'
+import { colors } from '../colors'
 
 import UiBtn from './Btn.vue'
+import UiAlert from './Alert.vue'
 
 // Props.
 const props = defineProps<{
@@ -49,7 +52,10 @@ const load = ref(false)
 watch(load, val => emit('update:load', val))
 
 const messages: Ref<TNotificationItem[]> = ref(props.messages || [])
-watch(() => props.messages, (val) => messages.value = val || [])
+watch(
+	() => props.messages,
+	val => (messages.value = val || [])
+)
 
 // Handlers.
 const submitHandler = async () => {
@@ -92,6 +98,11 @@ const submitHandler = async () => {
 		emit('submit')
 	}
 }
+
+// Etc.
+const getColorMessage = (item: TNotificationItem) => {
+	return colors.includes(item.code) ? item.code : 'error'
+}
 </script>
 
 <template>
@@ -100,9 +111,11 @@ const submitHandler = async () => {
 			<h3 class="ui-form-title">{{ title }}</h3>
 		</div>
 		<div v-if="messages.length" class="ui-form-messages">
-			<div v-for="message in messages" :class="'text-' + message.code">
-				{{ message.text }}
-			</div>
+			<ui-alert
+				v-for="item in messages"
+				:value="item.text"
+				:color="colors.includes(item.code) ? item.code : 'error'"
+			/>
 		</div>
 		<div class="ui-form-body">
 			<component

src/components/PickerDays.vue

@@ -30,11 +30,11 @@ const inputHandler = (index: number) => {
 </script>
 
 <template>
-	<div class="ui-picker-days">
+	<div class="ui-picker ui-picker-days">
 		<div v-if="props.label" class="label mb-2">
 			<span>{{props.label}}:</span>
 		</div>
-		<div class="flex items-center">
+		<div class="ui-picker-content flex items-center">
 			<ui-field-checkbox
 				v-for="(item, index) in days"
 				class="mr-4"

src/components/index.ts

@@ -16,3 +16,4 @@ export { default as UiIconVisibility } from './IconVisibility.vue'
 export { default as UiForm } from './Form.vue'
 export { default as UiCard } from './Card.vue'
 export { default as UiTable } from './Table.vue'
+export { default as UiDialog } from './Dialog.vue'

src/css/common.sass

@@ -110,3 +110,26 @@ p
           @apply border-t
         td
           @apply p-2
+  &-dialog
+    @apply bg-dark/30
+    @apply flex flex-col justify-center items-center
+    @apply z-50
+    position: fixed
+    width: 100%
+    height: 100%
+    top: 0
+    left: 0
+    &:not([open])
+      @apply hidden
+    &-window
+      @apply bg-white text-dark
+      &-header
+        @apply flex items-center justify-between py-2 px-3
+        > .title
+          @apply text-lg font-normal
+        .ui-icon
+          @apply w-[30px] h-[30px] p-0 border-0
+          &:hover
+            @apply text-dark
+      &-content
+        @apply p-3