shared-ritm 1.3.91 → 1.3.92

package/src/common/app-input-new/InputNew.stories.ts

@@ -1,240 +1,240 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import AppInputNew from '@/common/app-input-new/AppInputNew.vue'
-
-const meta: Meta<typeof AppInputNew> = {
-  title: 'Components/AppInputNew',
-  component: AppInputNew,
-  tags: ['autodocs'],
-  argTypes: {
-    label: {
-      control: 'text',
-      description: 'Подпись над полем ввода.',
-      table: { category: '🔤 Текст' },
-    },
-    placeholder: {
-      control: 'text',
-      description: 'Текст-подсказка внутри поля.',
-      table: { category: '🔤 Текст' },
-    },
-    required: {
-      control: 'boolean',
-      description: 'Показывает звёздочку (*) рядом с лейблом.',
-      table: { category: '🔤 Текст' },
-    },
-
-    modelValue: {
-      control: 'text',
-    },
-    type: {
-      control: 'select',
-      options: ['text', 'password', 'number', 'email', 'tel'],
-      description: 'Тип HTML-инпута.',
-    },
-
-    disable: {
-      control: 'boolean',
-      table: { category: '⚡ Состояния' },
-    },
-    readonly: {
-      control: 'boolean',
-      table: { category: '⚡ Состояния' },
-    },
-    error: {
-      control: 'boolean',
-      table: { category: '⚡ Состояния' },
-    },
-    loading: {
-      control: 'boolean',
-      table: { category: '⚡ Состояния' },
-    },
-
-    clearable: {
-      control: 'boolean',
-      description: 'Показывает иконку крестика для очистки поля.',
-      table: { category: '⚙️ Поведение' },
-    },
-    copyable: {
-      control: 'boolean',
-      description: 'Показывает иконку копирования содержимого в буфер обмена.',
-      table: { category: '⚙️ Поведение' },
-    },
-    uuid: {
-      control: 'boolean',
-      description: 'Показывает кнопку "UUID", генерирующую уникальный идентификатор.',
-      table: { category: '⚙️ Поведение' },
-    },
-    debounce: {
-      control: 'number',
-      description: 'Задержка в миллисекундах перед эмитом значения.',
-      table: { category: '⚙️ Поведение' },
-    },
-    autocomplete: {
-      control: 'text',
-      description: 'Значение атрибута autocomplete (например, "off", "email").',
-      table: { category: '⚙️ Поведение' },
-    },
-
-    rules: {
-      control: false,
-      description: 'Массив функций валидации.',
-    },
-
-    inputClass: {
-      control: 'text',
-      description: 'Дополнительные CSS-классы для q-input.',
-    },
-  },
-  args: {
-    label: 'Имя',
-    placeholder: 'Введите имя...',
-    modelValue: '',
-    type: 'text',
-    required: false,
-    disable: false,
-    readonly: false,
-    error: false,
-    loading: false,
-    clearable: true,
-    copyable: false,
-    uuid: false,
-    debounce: 0,
-    autocomplete: 'off',
-  },
-}
-
-export default meta
-
-type Story = StoryObj<typeof AppInputNew>
-
-export const Default: Story = {}
-
-export const InputTypes: Story = {
-  render: () => ({
-    components: { AppInputNew },
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 20px;">
-        <AppInputNew v-model="textValue" label="Текст" placeholder="Обычное текстовое поле" />
-        <AppInputNew v-model="passwordValue" label="Пароль" type="password" placeholder="••••••••" />
-        <AppInputNew v-model="emailValue" label="Email" type="email" placeholder="user@example.com" />
-        <AppInputNew v-model="telValue" label="Телефон" type="tel" placeholder="+7 (999) 000-00-00" />
-        <AppInputNew v-model="numberValue" label="Число" type="number" placeholder="Только цифры" />
-      </div>
-    `,
-    data() {
-      return {
-        textValue: '',
-        passwordValue: '',
-        emailValue: '',
-        telValue: '',
-        numberValue: null as number | null,
-      }
-    },
-  }),
-}
-
-export const Features: Story = {
-  render: () => ({
-    components: { AppInputNew },
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 20px;">
-        <AppInputNew
-          v-model="clearableValue"
-          label="С очисткой"
-          placeholder="Напишите что-нибудь"
-          :clearable="true"
-        />
-        <AppInputNew
-          v-model="copyableValue"
-          label="С копированием"
-          placeholder="Скопируйте меня"
-          :copyable="true"
-        />
-        <AppInputNew
-          v-model="uuidValue"
-          label="С генерацией UUID"
-          placeholder="Нажмите UUID"
-          :uuid="true"
-        />
-      </div>
-    `,
-    data() {
-      return {
-        clearableValue: 'Текст для очистки',
-        copyableValue: 'secret-token-123',
-        uuidValue: '',
-      }
-    },
-  }),
-}
-
-export const States: Story = {
-  render: () => ({
-    components: { AppInputNew },
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 20px;">
-        <AppInputNew v-model="activeValue" label="Обычное" placeholder="Активное поле" />
-        <AppInputNew v-model="disabledValue" label="Отключено" placeholder="Недоступно" :disable="true" />
-        <AppInputNew v-model="readonlyValue" label="Только для чтения" placeholder="Нельзя редактировать" :readonly="true" />
-        <AppInputNew v-model="errorValue" label="С ошибкой" placeholder="Ошибка валидации" :error="true" />
-        <AppInputNew v-model="loadingValue" label="Загрузка" placeholder="Загружается..." :loading="true" />
-      </div>
-    `,
-    data() {
-      return {
-        activeValue: '',
-        disabledValue: 'недоступно',
-        readonlyValue: 'только чтение',
-        errorValue: 'ошибка!',
-        loadingValue: 'загрузка...',
-      }
-    },
-  }),
-}
-
-export const WithLabel: Story = {
-  render: () => ({
-    components: { AppInputNew },
-    template: `
-      <AppInputNew v-model="requiredValue" label="Обязательное поле" :required="true" placeholder="Это поле обязательно" />
-    `,
-    data() {
-      return {
-        requiredValue: '',
-      }
-    },
-  }),
-}
-
-export const Password: Story = {
-  render: () => ({
-    components: { AppInputNew },
-    template: `
-      <AppInputNew v-model="password" label="Пароль" type="password" />
-    `,
-    data() {
-      return {
-        password: '',
-      }
-    },
-  }),
-}
-
-export const WithAppendSlot: Story = {
-  render: () => ({
-    components: { AppInputNew },
-    template: `
-      <AppInputNew v-model="slotValue" label="С кастомным append">
-        <template #append>
-          <span style="background: #eef4ff; padding: 0 8px; border-radius: 4px; font-size: 14px; color: #3f8cff;">
-            RUB
-          </span>
-        </template>
-      </AppInputNew>
-    `,
-    data() {
-      return {
-        slotValue: '',
-      }
-    },
-  }),
-}
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AppInputNew from '@/common/app-input-new/AppInputNew.vue'
+
+const meta: Meta<typeof AppInputNew> = {
+  title: 'Components/AppInputNew',
+  component: AppInputNew,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Подпись над полем ввода.',
+      table: { category: '🔤 Текст' },
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Текст-подсказка внутри поля.',
+      table: { category: '🔤 Текст' },
+    },
+    required: {
+      control: 'boolean',
+      description: 'Показывает звёздочку (*) рядом с лейблом.',
+      table: { category: '🔤 Текст' },
+    },
+
+    modelValue: {
+      control: 'text',
+    },
+    type: {
+      control: 'select',
+      options: ['text', 'password', 'number', 'email', 'tel'],
+      description: 'Тип HTML-инпута.',
+    },
+
+    disable: {
+      control: 'boolean',
+      table: { category: '⚡ Состояния' },
+    },
+    readonly: {
+      control: 'boolean',
+      table: { category: '⚡ Состояния' },
+    },
+    error: {
+      control: 'boolean',
+      table: { category: '⚡ Состояния' },
+    },
+    loading: {
+      control: 'boolean',
+      table: { category: '⚡ Состояния' },
+    },
+
+    clearable: {
+      control: 'boolean',
+      description: 'Показывает иконку крестика для очистки поля.',
+      table: { category: '⚙️ Поведение' },
+    },
+    copyable: {
+      control: 'boolean',
+      description: 'Показывает иконку копирования содержимого в буфер обмена.',
+      table: { category: '⚙️ Поведение' },
+    },
+    uuid: {
+      control: 'boolean',
+      description: 'Показывает кнопку "UUID", генерирующую уникальный идентификатор.',
+      table: { category: '⚙️ Поведение' },
+    },
+    debounce: {
+      control: 'number',
+      description: 'Задержка в миллисекундах перед эмитом значения.',
+      table: { category: '⚙️ Поведение' },
+    },
+    autocomplete: {
+      control: 'text',
+      description: 'Значение атрибута autocomplete (например, "off", "email").',
+      table: { category: '⚙️ Поведение' },
+    },
+
+    rules: {
+      control: false,
+      description: 'Массив функций валидации.',
+    },
+
+    inputClass: {
+      control: 'text',
+      description: 'Дополнительные CSS-классы для q-input.',
+    },
+  },
+  args: {
+    label: 'Имя',
+    placeholder: 'Введите имя...',
+    modelValue: '',
+    type: 'text',
+    required: false,
+    disable: false,
+    readonly: false,
+    error: false,
+    loading: false,
+    clearable: true,
+    copyable: false,
+    uuid: false,
+    debounce: 0,
+    autocomplete: 'off',
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof AppInputNew>
+
+export const Default: Story = {}
+
+export const InputTypes: Story = {
+  render: () => ({
+    components: { AppInputNew },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 20px;">
+        <AppInputNew v-model="textValue" label="Текст" placeholder="Обычное текстовое поле" />
+        <AppInputNew v-model="passwordValue" label="Пароль" type="password" placeholder="••••••••" />
+        <AppInputNew v-model="emailValue" label="Email" type="email" placeholder="user@example.com" />
+        <AppInputNew v-model="telValue" label="Телефон" type="tel" placeholder="+7 (999) 000-00-00" />
+        <AppInputNew v-model="numberValue" label="Число" type="number" placeholder="Только цифры" />
+      </div>
+    `,
+    data() {
+      return {
+        textValue: '',
+        passwordValue: '',
+        emailValue: '',
+        telValue: '',
+        numberValue: null as number | null,
+      }
+    },
+  }),
+}
+
+export const Features: Story = {
+  render: () => ({
+    components: { AppInputNew },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 20px;">
+        <AppInputNew
+          v-model="clearableValue"
+          label="С очисткой"
+          placeholder="Напишите что-нибудь"
+          :clearable="true"
+        />
+        <AppInputNew
+          v-model="copyableValue"
+          label="С копированием"
+          placeholder="Скопируйте меня"
+          :copyable="true"
+        />
+        <AppInputNew
+          v-model="uuidValue"
+          label="С генерацией UUID"
+          placeholder="Нажмите UUID"
+          :uuid="true"
+        />
+      </div>
+    `,
+    data() {
+      return {
+        clearableValue: 'Текст для очистки',
+        copyableValue: 'secret-token-123',
+        uuidValue: '',
+      }
+    },
+  }),
+}
+
+export const States: Story = {
+  render: () => ({
+    components: { AppInputNew },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 20px;">
+        <AppInputNew v-model="activeValue" label="Обычное" placeholder="Активное поле" />
+        <AppInputNew v-model="disabledValue" label="Отключено" placeholder="Недоступно" :disable="true" />
+        <AppInputNew v-model="readonlyValue" label="Только для чтения" placeholder="Нельзя редактировать" :readonly="true" />
+        <AppInputNew v-model="errorValue" label="С ошибкой" placeholder="Ошибка валидации" :error="true" />
+        <AppInputNew v-model="loadingValue" label="Загрузка" placeholder="Загружается..." :loading="true" />
+      </div>
+    `,
+    data() {
+      return {
+        activeValue: '',
+        disabledValue: 'недоступно',
+        readonlyValue: 'только чтение',
+        errorValue: 'ошибка!',
+        loadingValue: 'загрузка...',
+      }
+    },
+  }),
+}
+
+export const WithLabel: Story = {
+  render: () => ({
+    components: { AppInputNew },
+    template: `
+      <AppInputNew v-model="requiredValue" label="Обязательное поле" :required="true" placeholder="Это поле обязательно" />
+    `,
+    data() {
+      return {
+        requiredValue: '',
+      }
+    },
+  }),
+}
+
+export const Password: Story = {
+  render: () => ({
+    components: { AppInputNew },
+    template: `
+      <AppInputNew v-model="password" label="Пароль" type="password" />
+    `,
+    data() {
+      return {
+        password: '',
+      }
+    },
+  }),
+}
+
+export const WithAppendSlot: Story = {
+  render: () => ({
+    components: { AppInputNew },
+    template: `
+      <AppInputNew v-model="slotValue" label="С кастомным append">
+        <template #append>
+          <span style="background: #eef4ff; padding: 0 8px; border-radius: 4px; font-size: 14px; color: #3f8cff;">
+            RUB
+          </span>
+        </template>
+      </AppInputNew>
+    `,
+    data() {
+      return {
+        slotValue: '',
+      }
+    },
+  }),
+}