merge and some fixes

Author: BatuevIO

src/components/Search/VuSeacrh.vue

@@ -1,57 +1,57 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { fn } from 'storybook/test'
-import VuSearch from './VuSearch.vue'
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { fn } from 'storybook/test';
+import VuSearch from './VuSearch.vue';
 
 const meta = {
-    title: 'Viribus Unitis/Search',
-    component: VuSearch,
-    tags: ['autodocs'],
-    args: {
-        onClickFilter: fn(),
-        'onUpdate:modelValue': fn(),
-        placeholder: 'Поиск преподавателя',
-    },
-    argTypes: {
-        modelValue: {
-            control: 'text',
-            description: 'Значение v-model',
-        },
-        placeholder: {
-            control: 'text',
-            description: 'Текст плейсхолдера',
-        },
-    },
-} satisfies Meta<typeof VuSearch>
+	title: 'Viribus Unitis/Search',
+	component: VuSearch,
+	tags: ['autodocs'],
+	args: {
+		'onClick:filter': fn(),
+		'onUpdate:modelValue': fn(),
+		placeholder: 'Поиск преподавателя',
+	},
+	argTypes: {
+		modelValue: {
+			control: 'text',
+			description: 'Значение v-model',
+		},
+		placeholder: {
+			control: 'text',
+			description: 'Текст плейсхолдера',
+		},
+	},
+} satisfies Meta<typeof VuSearch>;
 
-export default meta
-type Story = StoryObj<typeof meta>
+export default meta;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    args: {
-        modelValue: '',
-    },
-}
+	args: {
+		modelValue: '',
+	},
+};
 
 export const WithValue: Story = {
-    args: {
-        modelValue: 'Поисковый запрос',
-    },
-}
+	args: {
+		modelValue: 'Поисковый запрос',
+	},
+};
 
 export const Hovered: Story = {
-    parameters: {
-        pseudo: {
-            hover: true,
-        },
-    },
-}
+	parameters: {
+		pseudo: {
+			hover: true,
+		},
+	},
+};
 
 export const Active: Story = {
-    args: {
-        modelValue: 'Печатаем...',
-    },
-    play: ({ canvasElement }) => {
-        const field = canvasElement.querySelector('.v-field')
-        field?.classList.add('v-field--focused')
-    },
-}
+	args: {
+		modelValue: 'Печатаем...',
+	},
+	play: ({ canvasElement }) => {
+		const field = canvasElement.querySelector('.v-field');
+		field?.classList.add('v-field--focused');
+	},
+};

src/components/Search/VuSearch.stories.ts

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const modelValue = defineModel<string>();
+
+defineEmits<{
+	(e: 'update:modelValue', value: string): void;
+	(e: 'click:filter'): void;
+}>();
+
+defineProps<{
+	placeholder?: string;
+}>();
+</script>
+
+<template>
+	<v-text-field
+		v-model="modelValue"
+		class="text-body-1"
+		:placeholder="placeholder"
+		hide-details="auto"
+		density="compact"
+		variant="outlined"
+		prepend-inner-icon="mdi-magnify"
+		append-inner-icon="mdi-filter-variant"
+		@click:append-inner="$emit('click:filter')"
+	/>
+</template>

src/components/Search/VuSearch.vue

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/vue3-vite';
 import VuCheckbox from './VuCheckbox.vue';
 
 const meta = {
-	title: 'checkBox/VuCheckbox',
+	title: 'Viribus Unitis/VuCheckbox',
 	component: VuCheckbox,
 } satisfies Meta<typeof VuCheckbox>;
 
@@ -14,20 +14,20 @@ export const Default: Story = {
 	args: {
 		disabled: false,
 		modelValue: false,
-        label: "Оценок нет"
+		label: 'Оценок нет',
 	},
 };
 export const Active: Story = {
 	args: {
 		disabled: false,
 		modelValue: true,
-        label: "Оценок нет"
+		label: 'Оценок нет',
 	},
 };
 export const Disabled: Story = {
 	args: {
 		disabled: true,
 		modelValue: true,
-        label: "Оценок нет"
+		label: 'Оценок нет',
 	},
 };

src/components/checkBox/VuCheckbox.stories.ts

@@ -1,25 +1,23 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+defineProps({
+	modelValue: {
+		type: Boolean,
+		default: false,
+	},
+	label: String,
+	disabled: Boolean,
+});
 
-    interface Props {
-        disabled: boolean;
-        modelValue: boolean;
-        label: string;
-    }
-    const props = defineProps<Props>();
-    const emit = defineEmits(['update:modelValue'])
-
-    const value = computed({
-        get: () => props.modelValue,
-        set: (value) => emit('update:modelValue', value)
-    })
+defineEmits(['update:modelValue']);
 </script>
 
 <template>
-	<v-checkbox 
-        density="compact"
-        :label="label" 
-        v-model="value"
-        :disabled="disabled"> 
-    </v-checkbox>
+	<v-checkbox
+		density="compact"
+		:label="label"
+		:model-value="modelValue"
+		@update:model-value="$emit('update:modelValue', $event)"
+		:disabled="disabled"
+	>
+	</v-checkbox>
 </template>

src/components/checkBox/VuCheckbox.vue

@@ -2,5 +2,5 @@ import { createApp } from 'vue';
 import App from '@/App.vue';
 import { pinia } from '@/pinia';
 import { vuetify } from './vuetify';
-import '../style.css'
+import '../style.css';
 createApp(App).use(pinia).use(vuetify).mount('#app');

src/main.ts

@@ -15,7 +15,6 @@ export default defineConfig({
 				transformAssetUrls,
 			},
 		}),
-		tailwindcss(),
 		vuetify({
 			autoImport: true,
 			styles: {