Merge pull request #3 from profcomff/checkBox

Создание VuCheckbox

Author: BatuevIO

README.md

@@ -82,6 +82,12 @@ pnpm sb
 pnpm dev
 ```
 
+Для локального запуска Storybook необходимо выполнить команду 
+```
+pnpm sb
+```
+
+
 ## Инструкции
 
 ### Получение кода на свой компьютер

package.json

@@ -19,9 +19,11 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.1.16",
     "pinia": "^3.0.1",
     "query-string": "^9.1.1",
     "storybook": "^9.1.13",
+    "tailwindcss": "^4.1.16",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },
@@ -53,6 +55,7 @@
     "knip": "^5.45.0",
     "openapi-typescript": "^7.6.1",
     "playwright": "^1.56.1",
+    "postcss-html": "^1.8.0",
     "postcss-preset-env": "^10.1.5",
     "prettier": "^3.5.2",
     "sass": "^1.93.2",

pnpm-lock.yaml

@@ -7,6 +7,7 @@ const meta = {
 	component: VuButton,
 	tags: ['autodocs'],
 	args: {
+		text: 'Привет',
 		onClick: fn(),
 	},
 } satisfies Meta<typeof VuButton>;

src/components/button/VuButton.stories.ts

@@ -1,4 +1,12 @@
 <script setup lang="ts">
+// Определяем пропсы компонента
+interface Props {
+	text?: string;
+}
+
+// Объявляем пропсы
+defineProps<Props>();
+
 defineEmits<{
 	click: [];
 }>();

src/components/button/VuButton.vue

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

src/components/checkBox/VuCheckbox.stories.ts

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+    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)
+    })
+</script>
+
+<template>
+	<v-checkbox 
+        density="compact"
+        :label="label" 
+        v-model="value"
+        :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'
 createApp(App).use(pinia).use(vuetify).mount('#app');

src/main.ts

@@ -0,0 +1 @@
+@import "tailwindcss";

style.css

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