shared-ritm 1.3.92 → 1.3.94

package/src/common/app-input/Input.stories.ts

@@ -1,160 +1,160 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import AppInput from '@/common/app-input/AppInput.vue'
-
-const meta: Meta<typeof AppInput> = {
-  title: 'Components/AppInput',
-  component: AppInput,
-  tags: ['autodocs'],
-  argTypes: {
-    modelValue: {
-      control: 'text',
-      table: { category: 'Используется' },
-    },
-    placeholder: {
-      control: 'text',
-      description: 'Текст-подсказка внутри поля.',
-      table: { category: 'Используется' },
-    },
-    type: {
-      control: 'select',
-      options: ['text', 'password', 'number', 'email', 'search', 'tel', 'date', 'url'],
-      description: 'Тип HTML-инпута.',
-      table: { category: 'Используется' },
-    },
-
-    width: {
-      control: 'text',
-      description: 'Ширина поля (CSS-значение, например "300px", "100%").',
-      table: { disable: true },
-    },
-    height: {
-      control: 'text',
-      description: 'Высота поля (например, "48px").',
-      table: { category: 'Используется' },
-    },
-    borderRadius: {
-      control: 'text',
-      description: 'Скругление углов (например, "8px").',
-      table: { disable: true },
-    },
-    borderWidth: {
-      control: 'text',
-      description: 'Толщина границы (например, "1px").',
-      table: { disable: true },
-    },
-
-    disabled: {
-      control: 'boolean',
-      description: 'Отключает поле ввода.',
-      table: { category: 'Используется' },
-    },
-    readonly: {
-      control: 'boolean',
-      description: 'Делает поле доступным только для чтения.',
-      table: { category: 'Используется' },
-    },
-    field: {
-      control: 'boolean',
-      description: 'Делает поле доступным только для чтения.',
-      table: { category: 'Используется' },
-    },
-    required: {
-      control: 'boolean',
-      description: 'Добавляет визуальный признак обязательного поля (стиль --required).',
-      table: { disable: true },
-    },
-
-    withArrow: {
-      control: 'boolean',
-      description: 'Для type="number": показывать ли стрелки вверх/вниз.',
-      table: { disable: true },
-    },
-    mask: { control: 'text', table: { disable: true } },
-    debounce: { control: 'number', table: { disable: true } },
-    datePicker: { table: { disable: true } },
-    timePicker: { table: { disable: true } },
-    withIcon: { table: { disable: true } },
-    withButton: { table: { disable: true } },
-    rules: { description: 'Правила для валидации.', table: { category: 'Используется' } },
-    borderColor: { table: { disable: true } },
-    name: { table: { disable: true } },
-    label: { table: { disable: true } },
-    hint: { table: { disable: true } },
-  },
-  args: {
-    modelValue: '',
-    placeholder: 'Введите значение...',
-    type: 'text',
-    height: '48px',
-  },
-}
-
-export default meta
-
-type Story = StoryObj<typeof AppInput>
-
-export const Default: Story = {}
-
-export const InputTypes: Story = {
-  render: () => ({
-    components: { AppInput },
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 16px;">
-        <AppInput v-model="textValue" placeholder="Текст" type="text" />
-        <AppInput v-model="passwordValue" placeholder="Пароль" type="password" />
-        <AppInput v-model="emailValue" placeholder="Email" type="email" />
-        <AppInput v-model="telValue" placeholder="Телефон" type="tel" />
-        <AppInput v-model="numValue" placeholder="Число" type="number"/>
-      </div>
-    `,
-    data() {
-      return {
-        textValue: '',
-        passwordValue: '',
-        emailValue: '',
-        telValue: '',
-        numValue: 0,
-      }
-    },
-  }),
-}
-
-export const States: Story = {
-  render: () => ({
-    components: { AppInput },
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 16px;">
-        <AppInput v-model="activeValue" placeholder="Активное" />
-        <AppInput v-model="disabledValue" :disabled="true" />
-        <AppInput v-model="readonlyValue" :readonly="true" />
-      </div>
-    `,
-    data() {
-      return {
-        activeValue: '',
-        disabledValue: 'недоступно',
-        readonlyValue: 'только чтение',
-      }
-    },
-  }),
-}
-
-export const Sizes: Story = {
-  render: () => ({
-    components: { AppInput },
-    template: `
-      <div style="display: flex; gap: 16px; flex-wrap: wrap; align-items: end;">
-        <AppInput v-model="val1" placeholder="40px" height="40px" width="180px" />
-        <AppInput v-model="val2" placeholder="48px" height="48px" width="200px" />
-        <AppInput v-model="val3" placeholder="60px" height="60px" width="220px" border-radius="12px" />
-      </div>
-    `,
-    data() {
-      return {
-        val1: '',
-        val2: '',
-        val3: '',
-      }
-    },
-  }),
-}
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AppInput from '@/common/app-input/AppInput.vue'
+
+const meta: Meta<typeof AppInput> = {
+  title: 'Components/AppInput',
+  component: AppInput,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: {
+      control: 'text',
+      table: { category: 'Используется' },
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Текст-подсказка внутри поля.',
+      table: { category: 'Используется' },
+    },
+    type: {
+      control: 'select',
+      options: ['text', 'password', 'number', 'email', 'search', 'tel', 'date', 'url'],
+      description: 'Тип HTML-инпута.',
+      table: { category: 'Используется' },
+    },
+
+    width: {
+      control: 'text',
+      description: 'Ширина поля (CSS-значение, например "300px", "100%").',
+      table: { disable: true },
+    },
+    height: {
+      control: 'text',
+      description: 'Высота поля (например, "48px").',
+      table: { category: 'Используется' },
+    },
+    borderRadius: {
+      control: 'text',
+      description: 'Скругление углов (например, "8px").',
+      table: { disable: true },
+    },
+    borderWidth: {
+      control: 'text',
+      description: 'Толщина границы (например, "1px").',
+      table: { disable: true },
+    },
+
+    disabled: {
+      control: 'boolean',
+      description: 'Отключает поле ввода.',
+      table: { category: 'Используется' },
+    },
+    readonly: {
+      control: 'boolean',
+      description: 'Делает поле доступным только для чтения.',
+      table: { category: 'Используется' },
+    },
+    field: {
+      control: 'boolean',
+      description: 'Делает поле доступным только для чтения.',
+      table: { category: 'Используется' },
+    },
+    required: {
+      control: 'boolean',
+      description: 'Добавляет визуальный признак обязательного поля (стиль --required).',
+      table: { disable: true },
+    },
+
+    withArrow: {
+      control: 'boolean',
+      description: 'Для type="number": показывать ли стрелки вверх/вниз.',
+      table: { disable: true },
+    },
+    mask: { control: 'text', table: { disable: true } },
+    debounce: { control: 'number', table: { disable: true } },
+    datePicker: { table: { disable: true } },
+    timePicker: { table: { disable: true } },
+    withIcon: { table: { disable: true } },
+    withButton: { table: { disable: true } },
+    rules: { description: 'Правила для валидации.', table: { category: 'Используется' } },
+    borderColor: { table: { disable: true } },
+    name: { table: { disable: true } },
+    label: { table: { disable: true } },
+    hint: { table: { disable: true } },
+  },
+  args: {
+    modelValue: '',
+    placeholder: 'Введите значение...',
+    type: 'text',
+    height: '48px',
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof AppInput>
+
+export const Default: Story = {}
+
+export const InputTypes: Story = {
+  render: () => ({
+    components: { AppInput },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 16px;">
+        <AppInput v-model="textValue" placeholder="Текст" type="text" />
+        <AppInput v-model="passwordValue" placeholder="Пароль" type="password" />
+        <AppInput v-model="emailValue" placeholder="Email" type="email" />
+        <AppInput v-model="telValue" placeholder="Телефон" type="tel" />
+        <AppInput v-model="numValue" placeholder="Число" type="number"/>
+      </div>
+    `,
+    data() {
+      return {
+        textValue: '',
+        passwordValue: '',
+        emailValue: '',
+        telValue: '',
+        numValue: 0,
+      }
+    },
+  }),
+}
+
+export const States: Story = {
+  render: () => ({
+    components: { AppInput },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 16px;">
+        <AppInput v-model="activeValue" placeholder="Активное" />
+        <AppInput v-model="disabledValue" :disabled="true" />
+        <AppInput v-model="readonlyValue" :readonly="true" />
+      </div>
+    `,
+    data() {
+      return {
+        activeValue: '',
+        disabledValue: 'недоступно',
+        readonlyValue: 'только чтение',
+      }
+    },
+  }),
+}
+
+export const Sizes: Story = {
+  render: () => ({
+    components: { AppInput },
+    template: `
+      <div style="display: flex; gap: 16px; flex-wrap: wrap; align-items: end;">
+        <AppInput v-model="val1" placeholder="40px" height="40px" width="180px" />
+        <AppInput v-model="val2" placeholder="48px" height="48px" width="200px" />
+        <AppInput v-model="val3" placeholder="60px" height="60px" width="220px" border-radius="12px" />
+      </div>
+    `,
+    data() {
+      return {
+        val1: '',
+        val2: '',
+        val3: '',
+      }
+    },
+  }),
+}