shared-ritm 1.3.91 → 1.3.92

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

@@ -1,323 +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,
-      }
-    },
-  }),
-}
+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,
+      }
+    },
+  }),
+}