создание VuInput компонента

src/components/Input/VuInput.stories.ts

@@ -0,0 +1,30 @@
+import { Meta, StoryObj } from '@storybook/vue3-vite';
+import VuInput from './VuInput.vue';
+
+const meta = {
+	title: 'Viribus Unitis/VuInput',
+	component: VuInput,
+} satisfies Meta<typeof VuInput>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	args: {
+		message: 'Номер группы',    
+	},
+};
+export const Hover: Story = {
+	args: {
+		message: 'Номер группы', 
+         rules: [(value: string) => !!value || 'Обязательное поле']  
+	},
+};
+export const Active: Story = {
+	args: {
+		message: 'Номер группы',
+        placeholder:"Введите номер группы",
+        autofocus: true
+	},
+};

src/components/Input/VuInput.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { PropType } from 'vue';
+
+type VariantType = "outlined" | "filled" | "underlined" | "plain" | "solo" | "solo-inverted" | "solo-filled"
+type Rule = (value: any) => string | boolean;
+
+defineProps({
+	message: {
+		type: String,
+		default: ""
+	},
+	color: {
+		type: String,
+		default: "#000000"
+	},
+	variant: {
+		type: String as PropType<VariantType>,
+		default: ""
+	},
+	placeholder: {
+		type: String,
+		default: ""
+	},
+	autofocus: {
+		type: Boolean,
+		default: false
+	},
+	rules: {
+		type: Array as PropType<Rule[]>,
+		default: () => []
+	}
+});
+
+defineEmits(['update:modelValue']);
+</script>
+
+<template>
+	<v-text-field
+		max-width="348px"
+		type="input"
+		:label="message"
+		:color="color"
+		:variant="variant || undefined"
+		:placeholder="placeholder"
+		:autofocus="autofocus"
+		:rules="rules"
+	>
+	</v-text-field>
+</template>