Merge pull request #6 from profcomff/VuSearch

VuSearch ui-kit element

Author: BatuevIO

.storybook/main.ts

@@ -8,6 +8,7 @@ const config: StorybookConfig = {
 		'@storybook/addon-onboarding',
 		'@storybook/addon-a11y',
 		'@storybook/addon-vitest',
+		'storybook-addon-pseudo-states',
 	],
 	framework: {
 		name: '@storybook/vue3-vite',

.storybook/preview.ts

@@ -1,3 +1,4 @@
+import 'vuetify/styles';
 import { vuetify } from '@/vuetify';
 import { type Preview, setup } from '@storybook/vue3-vite';
 import { withVuetifyTheme } from './withVuetifyTheme.decorator';

README.md

@@ -64,8 +64,17 @@ pnpm sb
 2. Создай в этой папке файл `Vu{НазваниеКомпонента}.vue` и в нем описываем шаблон компонента.
 3. Стилизуй компонент с помощью классов vuetify.
 4. Опиши модели и пропы, которые может принимать компонент. С помощью /\*\* \*/ опиши пропы и модели (так автоматически генерируется документация).
-5. В этой же папке создай `Vu{НазваниеКомпонента}.stories.ts`.
-6. В этом файле опиши meta, а потом истории -- различные состояния и опции компонента. Подробнее смотри в туториале Storybook или в уже написанных компонентах.
+5. Чтобы отразить псевдо-состяния (hover, active и т.д.), напиши в истории:
+    ```ts
+    parameters: {
+    	pseudo: {
+    		hover: true,
+    	}
+    }
+    ```
+    или посмотри [доку](https://storybook.js.org/addons/storybook-addon-pseudo-states) аддона.
+6. В этой же папке создай `Vu{НазваниеКомпонента}.stories.ts`.
+7. В этом файле опиши meta, а потом истории -- различные состояния и опции компонента. Подробнее смотри в туториале Storybook или в уже написанных компонентах.
 
 ### Пулл-реквест
 

package.json

@@ -60,6 +60,7 @@
     "prettier": "^3.5.2",
     "sass": "^1.93.2",
     "sass-loader": "^16.0.6",
+    "storybook-addon-pseudo-states": "^10.0.3",
     "stylelint": "^16.15.0",
     "stylelint-config-recommended": "^15.0.0",
     "stylelint-config-recommended-vue": "^1.6.0",

pnpm-lock.yaml

@@ -0,0 +1,57 @@
+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: {
+		'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 const Default: Story = {
+	args: {
+		modelValue: '',
+	},
+};
+
+export const WithValue: Story = {
+	args: {
+		modelValue: 'Поисковый запрос',
+	},
+};
+
+export const Hovered: Story = {
+	parameters: {
+		pseudo: {
+			hover: true,
+		},
+	},
+};
+
+export const Active: Story = {
+	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

@@ -16,4 +16,10 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+	parameters: {
+		pseudo: {
+			active: true,
+		},
+	},
+};

src/components/button/VuButton.stories.ts

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