shared-ritm 1.3.38 → 1.3.40

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

@@ -0,0 +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: '',
+      }
+    },
+  }),
+}

package/src/common/app-input-search/InputSearch.stories.ts

@@ -0,0 +1,149 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AppInputSearch from '@/common/app-input-search/AppInputSearch.vue'
+
+const meta: Meta<typeof AppInputSearch> = {
+  title: 'Components/AppInputSearch',
+  component: AppInputSearch,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: {
+      control: 'text',
+      table: { category: 'Используется' },
+    },
+    label: {
+      control: 'text',
+      description: 'Подсказка (placeholder) внутри поля.',
+      table: { category: 'Используется' },
+    },
+    type: {
+      control: 'select',
+      options: ['text', 'password', 'number', 'email', 'search', 'tel'],
+      description: 'Тип HTML-инпута.',
+      table: { category: 'Используется' },
+    },
+
+    borderRadius: {
+      control: 'text',
+      description: 'Скругление углов (например, "14px").',
+      table: { category: 'Используется' },
+    },
+    searchIcon: {
+      control: 'boolean',
+      description: 'Показывать иконку лупы слева.',
+      table: { category: 'Используется' },
+    },
+
+    disable: {
+      control: 'boolean',
+      description: 'Отключает поле ввода.',
+      table: { disable: true },
+    },
+    readonly: {
+      control: 'boolean',
+      description: 'Делает поле доступным только для чтения.',
+      table: { category: 'Используется' },
+    },
+    field: {
+      control: 'boolean',
+      description: 'Делает поле доступным только для чтения.',
+      table: { category: 'Используется' },
+    },
+    error: {
+      control: 'boolean',
+      description: 'Принудительно показывает состояние ошибки.',
+      table: { disable: true },
+    },
+    loading: {
+      control: 'boolean',
+      description: 'Показывает индикатор загрузки.',
+      table: { disable: true },
+    },
+
+    dense: {
+      control: 'boolean',
+      description: 'Уменьшает внутренние отступы (по умолчанию true).',
+      table: { disable: true },
+    },
+    debounce: {
+      control: 'number',
+      description: 'Задержка перед эмитом значения (мс).',
+      table: { disable: true },
+    },
+    mask: {
+      control: 'text',
+      description: 'Маска ввода (например, "(###) ###-####").',
+      table: { disable: true },
+    },
+
+    datePicker: { table: { disable: true } },
+    timePicker: { table: { disable: true } },
+    dateLocale: { table: { disable: true } },
+    withIcon: { table: { disable: true } },
+    iconName: { table: { disable: true } },
+    iconColor: { table: { disable: true } },
+    withButton: { table: { disable: true } },
+    buttonIcon: { table: { disable: true } },
+    buttonTooltip: { table: { disable: true } },
+    clearTooltip: { table: { disable: true } },
+    withArrow: { table: { disable: true } },
+    required: { table: { disable: true } },
+    height: { table: { disable: true } },
+    clearable: { table: { disable: true } },
+  },
+  args: {
+    modelValue: '',
+    label: 'Поиск...',
+    type: 'text',
+    borderRadius: '14px',
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof AppInputSearch>
+
+export const Default: Story = {}
+
+export const InputTypes: Story = {
+  render: () => ({
+    components: { AppInputSearch },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 16px;">
+        <AppInputSearch v-model="textValue" label="Текст" type="text" />
+        <AppInputSearch v-model="passwordValue" label="Пароль" type="password" />
+        <AppInputSearch v-model="emailValue" label="Email" type="email" />
+        <AppInputSearch v-model="telValue" label="Телефон" type="tel" />
+        <AppInputSearch v-model="numberValue" label="Число" type="number" />
+      </div>
+    `,
+    data() {
+      return {
+        textValue: '',
+        passwordValue: '',
+        emailValue: '',
+        telValue: '',
+        numberValue: 0,
+      }
+    },
+  }),
+}
+
+export const Styles: Story = {
+  render: () => ({
+    components: { AppInputSearch },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 16px;">
+        <AppInputSearch v-model="readonlyValue" label="Только для чтения" :readonly="true" />
+        <AppInputSearch v-model="val2" label="radius 8px" border-radius="8px" />
+        <AppInputSearch v-model="val3" label="Без иконки поиска" :search-icon="false" />
+      </div>
+    `,
+    data() {
+      return {
+        readonlyValue: '',
+        val2: '',
+        val3: '',
+      }
+    },
+  }),
+}