shared-ritm 1.3.38 → 1.3.39

package/src/common/app-table/components/ModalSelect.stories.ts

@@ -0,0 +1,323 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import ModalSelect from './ModalSelect.vue'
+import { ref } from 'vue'
+
+const SAMPLE_OPTIONS = [
+  { value: 1, label: 'Проект Альфа' },
+  { value: 2, label: 'Ремонт №42' },
+  { value: 3, label: 'Инструмент XYZ' },
+  { value: 4, label: 'Объект "Центр"' },
+  { value: 5, label: 'Статус: Готов' },
+]
+
+const meta: Meta<typeof ModalSelect> = {
+  title: 'Components/ModalSelect',
+  component: ModalSelect,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: {
+      control: false,
+      description: 'Выбранное значение (или массив). Используется с v-model.',
+      table: { category: '🔤 Значение' },
+    },
+    options: {
+      control: false,
+      description: 'Массив опций. Каждая — объект с полями, указанными в optionLabel/optionValue.',
+    },
+    label: {
+      control: 'text',
+      description: 'Подпись над селектом.',
+      table: { category: '🔤 Текст' },
+    },
+    placeholder: {
+      control: 'text',
+      table: { category: '🔤 Текст' },
+    },
+    emptyText: {
+      control: 'text',
+      description: 'Текст, отображаемый, если опции не найдены.',
+      table: { category: '🔤 Текст' },
+    },
+
+    multiple: {
+      control: 'boolean',
+      description: 'Разрешить множественный выбор.',
+      table: { category: '⚙️ Поведение' },
+    },
+    hideSearch: {
+      control: 'boolean',
+      description: 'Скрыть поле поиска.',
+      table: { category: '⚙️ Поведение' },
+    },
+    allowCreate: {
+      control: 'boolean',
+      description: 'Разрешить создание новых опций из поиска.',
+      table: { category: '⚙️ Поведение' },
+    },
+    showChip: {
+      control: 'boolean',
+      description: 'Показывать выбранные значения как чипы (даже в single-режиме).',
+      table: { category: '⚙️ Поведение' },
+    },
+    simple: {
+      control: 'boolean',
+      description: 'Обычный: без chips, но с выбранным значением.',
+      table: { category: '⚙️ Поведение' },
+    },
+
+    loading: {
+      control: 'boolean',
+      description: 'Показывает индикатор загрузки в меню.',
+      table: { category: '⚡ Состояния' },
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Отключает селект.',
+      table: { category: '⚡ Состояния' },
+    },
+    isShowRequired: {
+      control: 'boolean',
+      description: 'Показывать звёздочку у лейбла, если есть правила валидации.',
+    },
+
+    chipColor: {
+      control: 'color',
+      description: 'Фон чипов при multiple-выборе (HEX/RGB).',
+      table: { category: '🎨 Стили' },
+    },
+    borderColor: {
+      control: 'color',
+      description: 'Цвет границы (HEX/RGB).',
+      table: { category: '🎨 Стили' },
+    },
+    borderRadius: {
+      control: 'text',
+      description: 'Скругление углов (например, "8px").',
+      table: { category: '🎨 Стили' },
+    },
+    height: {
+      control: 'text',
+      description: 'Высота поля (например, "50px").',
+      table: { category: '🎨 Стили' },
+    },
+    menuWidth: {
+      control: 'text',
+      description: 'Ширина выпадающего меню (например, "300px").',
+      table: { category: '🎨 Стили' },
+    },
+
+    optionLabel: {
+      control: 'text',
+      description: 'Ключ объекта опции для отображения (по умолчанию "label").',
+      table: { category: '📦 Опции' },
+    },
+    optionValue: {
+      control: 'text',
+      description: 'Ключ объекта опции для значения (по умолчанию "value").',
+      table: { category: '📦 Опции' },
+    },
+    popupContentStyle: {
+      control: 'text',
+      description: 'Дополнительные стили для выпадающего меню.',
+      table: { category: '🎨 Стили' },
+    },
+    rules: {
+      table: { disable: true },
+      description: 'Массив функций валидации.',
+    },
+    hideBottomSpace: {
+      table: { disable: true },
+    },
+    dataTest: {
+      table: { disable: true },
+    },
+    isSearch: {
+      table: { disable: true },
+    },
+  },
+  args: {
+    label: 'Выберите элемент',
+    placeholder: 'Начните ввод...',
+    emptyText: 'Ничего не найдено',
+    options: SAMPLE_OPTIONS,
+    multiple: false,
+    hideSearch: false,
+    allowCreate: false,
+    showChip: false,
+    simple: false,
+    loading: false,
+    isDisabled: false,
+    isShowRequired: false,
+    chipColor: '#e9eff9',
+    borderRadius: '8px',
+    optionLabel: 'label',
+    optionValue: 'value',
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof ModalSelect>
+
+export const Default: Story = {}
+
+export const Modes: Story = {
+  render: () => ({
+    components: { ModalSelect },
+    template: `
+      <div>
+        <ModalSelect
+          v-model="simpleValue"
+          :options="options"
+          label="Обычный"
+          :simple="true"
+        />
+        <ModalSelect
+          v-model="chipValue"
+          :options="options"
+          label="Обычный chip"
+          :show-chip="true"
+        />
+        <ModalSelect
+          v-model="multiValue"
+          :options="options"
+          label="Множественный chip"
+          :show-chip="true"
+          multiple
+        />
+      </div>
+    `,
+    data() {
+      return {
+        options: SAMPLE_OPTIONS,
+        singleValue: 2,
+        multiValue: [1, 3],
+        chipValue: 4,
+        simpleValue: 5,
+      }
+    },
+  }),
+}
+
+export const SearchAndCreate: Story = {
+  render: () => ({
+    components: { ModalSelect },
+    template: `
+      <div>
+        <ModalSelect
+          v-model="searchValue"
+          :options="options"
+          label="С поиском"
+          placeholder="Начните ввод..."
+        />
+        <ModalSelect
+          v-model="createValue"
+          :options="localOptions"
+          label="Создание новых"
+          placeholder="Введите новое значение"
+          allow-create
+          @create="handleCreate"
+        />
+      </div>
+    `,
+    setup() {
+      const options = SAMPLE_OPTIONS
+      const localOptions = ref([...options])
+      const searchValue = ref(null)
+      const createValue = ref(null)
+
+      const handleCreate = (newOption: any) => {
+        localOptions.value.push(newOption)
+        createValue.value = newOption.value
+      }
+
+      return {
+        options,
+        localOptions,
+        searchValue,
+        createValue,
+        handleCreate,
+      }
+    },
+  }),
+}
+
+export const States: Story = {
+  render: () => ({
+    components: { ModalSelect },
+    template: `
+      <div>
+        <ModalSelect
+          v-model="disabledValue"
+          :options="options"
+          label="Отключено"
+          :is-disabled="true"
+        />
+        <ModalSelect
+          v-model="loadingValue"
+          :options="options"
+          label="Загрузка"
+          :loading="true"
+        />
+        <ModalSelect
+          v-model="requiredValue"
+          :options="options"
+          label="Обязательное"
+          :is-show-required="true"
+          simple
+          :rules="[v => !!v || 'Обязательно']"
+        />
+      </div>
+    `,
+    data() {
+      return {
+        options: SAMPLE_OPTIONS,
+        normalValue: 1,
+        disabledValue: 2,
+        loadingValue: 3,
+        requiredValue: null,
+      }
+    },
+  }),
+}
+
+export const WithSlots: Story = {
+  render: () => ({
+    components: { ModalSelect },
+    template: `
+      <ModalSelect
+        v-model="slotValue"
+        :options="options"
+        label="С кастомными опциями"
+        simple
+      >
+        <template #option="{ opt }">
+          <q-item>
+            <q-item-section avatar>
+              <q-icon name="folder" color="primary" />
+            </q-item-section>
+            <q-item-section>
+              <div style="font-weight: 600;">{{ opt.label }}</div>
+              <div style="font-size: 12px; color: #777;">ID: {{ opt.value }}</div>
+            </q-item-section>
+          </q-item>
+        </template>
+        <template #selected="{ opt }">
+          <q-chip
+            removable
+            text-color="secondary"
+            @remove="slotValue = null"
+          >
+            📁 {{ opt.label }}
+          </q-chip>
+        </template>
+      </ModalSelect>
+    `,
+    data() {
+      return {
+        options: SAMPLE_OPTIONS,
+        slotValue: 2,
+      }
+    },
+  }),
+}