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

src/components/Input/VuInput.stories.ts

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

src/components/Input/VuInput.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { PropType } from 'vue';
+
+type VariantType = "outlined"
+type Rule = (value: string) => string | boolean;
+
+defineProps({
+  message: {
+    type: String,
+    default: ""
+  },
+  variant: {
+    type: String as PropType<VariantType>,
+    default: "outlined"
+  },
+  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="primary"
+    :variant="variant"
+    :placeholder="placeholder"
+    :autofocus="autofocus"
+    :rules="rules"
+  >
+  </v-text-field>
+</template>