shared-ritm 1.3.89 → 1.3.90

package/src/common/app-dialogs/Confirm.stories.ts

@@ -1,93 +1,93 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import AppDialog from '@/common/app-dialogs/AppConfirmDialog.vue'
-import AppButton from '@/common/app-button/AppButton.vue'
-import { useQuasar } from 'quasar'
-
-const meta: Meta<typeof AppDialog> = {
-  title: 'Components/AppDialog',
-  component: AppDialog,
-  tags: ['autodocs'],
-  argTypes: {
-    content: {
-      control: 'text',
-      description: 'Текстовое содержимое диалога',
-    },
-    type: {
-      control: 'radio',
-      options: ['edit', 'delete'],
-      description: 'Тип диалога — определяет иконку',
-    },
-  },
-  args: {
-    content: 'Вы уверены, что хотите продолжить?',
-    type: 'edit',
-  },
-  decorators: [
-    story => ({
-      components: { story: story() },
-      template: '<story />',
-    }),
-  ],
-}
-
-export default meta
-
-type Story = StoryObj<typeof AppDialog>
-
-const DialogWrapper = (args: any) => ({
-  components: { AppDialog, AppButton },
-  setup() {
-    const $q = useQuasar()
-    const open = () => {
-      $q.dialog({
-        component: AppDialog,
-        componentProps: args,
-      })
-        .onOk(() => {
-          $q.notify({
-            message: 'Принято',
-            color: 'green',
-            position: 'top-right',
-          })
-        })
-        .onCancel(() => {
-          $q.notify({
-            message: 'Отклонено',
-            color: 'red',
-            position: 'top-right',
-          })
-        })
-    }
-    return { open }
-  },
-  template: `
-    <div>
-      <app-button label="Open dialog" @click="open" style="margin-bottom: 20px;" />
-    </div>
-  `,
-})
-
-export const Edit: Story = {
-  render: DialogWrapper,
-  args: {
-    type: 'edit',
-    content: 'Вы хотите изменить данные?',
-  },
-}
-
-export const Delete: Story = {
-  render: DialogWrapper,
-  args: {
-    type: 'delete',
-    content: 'Вы уверены, что хотите удалить?',
-  },
-}
-
-export const CustomMessage: Story = {
-  render: DialogWrapper,
-  args: {
-    type: 'edit',
-    content:
-      'Это очень важное предупреждение с длинным текстом, чтобы проверить, как оно переносится и выглядит в диалоге.',
-  },
-}
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AppDialog from '@/common/app-dialogs/AppConfirmDialog.vue'
+import AppButton from '@/common/app-button/AppButton.vue'
+import { useQuasar } from 'quasar'
+
+const meta: Meta<typeof AppDialog> = {
+  title: 'Components/AppDialog',
+  component: AppDialog,
+  tags: ['autodocs'],
+  argTypes: {
+    content: {
+      control: 'text',
+      description: 'Текстовое содержимое диалога',
+    },
+    type: {
+      control: 'radio',
+      options: ['edit', 'delete'],
+      description: 'Тип диалога — определяет иконку',
+    },
+  },
+  args: {
+    content: 'Вы уверены, что хотите продолжить?',
+    type: 'edit',
+  },
+  decorators: [
+    story => ({
+      components: { story: story() },
+      template: '<story />',
+    }),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<typeof AppDialog>
+
+const DialogWrapper = (args: any) => ({
+  components: { AppDialog, AppButton },
+  setup() {
+    const $q = useQuasar()
+    const open = () => {
+      $q.dialog({
+        component: AppDialog,
+        componentProps: args,
+      })
+        .onOk(() => {
+          $q.notify({
+            message: 'Принято',
+            color: 'green',
+            position: 'top-right',
+          })
+        })
+        .onCancel(() => {
+          $q.notify({
+            message: 'Отклонено',
+            color: 'red',
+            position: 'top-right',
+          })
+        })
+    }
+    return { open }
+  },
+  template: `
+    <div>
+      <app-button label="Open dialog" @click="open" style="margin-bottom: 20px;" />
+    </div>
+  `,
+})
+
+export const Edit: Story = {
+  render: DialogWrapper,
+  args: {
+    type: 'edit',
+    content: 'Вы хотите изменить данные?',
+  },
+}
+
+export const Delete: Story = {
+  render: DialogWrapper,
+  args: {
+    type: 'delete',
+    content: 'Вы уверены, что хотите удалить?',
+  },
+}
+
+export const CustomMessage: Story = {
+  render: DialogWrapper,
+  args: {
+    type: 'edit',
+    content:
+      'Это очень важное предупреждение с длинным текстом, чтобы проверить, как оно переносится и выглядит в диалоге.',
+  },
+}

package/src/common/app-dropdown/Dropdown.stories.ts

@@ -1,94 +1,94 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import AppDropdown from '@/common/app-dropdown/AppDropdown.vue'
-import AppButton from '@/common/app-button/AppButton.vue'
-import { quasarColorOpts } from '@/configs/storybook'
-
-const meta: Meta<typeof AppDropdown> = {
-  title: 'Components/AppDropdown',
-  component: AppDropdown,
-  tags: ['autodocs'],
-  argTypes: {
-    label: {
-      control: 'text',
-      description: 'Текст на кнопке. Можно переопределить через слот `label`.',
-    },
-    color: {
-      control: 'select',
-      options: quasarColorOpts,
-      description: 'Цвет фона кнопки. Используйте имена из палитры Quasar.',
-    },
-    width: {
-      control: 'text',
-      description: 'Ширина выпадающего контента.',
-    },
-    height: {
-      control: 'text',
-      description: 'Минимальная ширина выпадающего контента. Используется как `minWidth`.',
-    },
-    modelValue: {
-      control: 'boolean',
-      description: 'Состояние открыт/закрыт.',
-    },
-  },
-  args: {
-    label: 'Меню',
-    color: 'primary',
-    width: 200,
-    height: 200,
-    modelValue: false,
-  },
-}
-
-export default meta
-
-type Story = StoryObj<typeof AppDropdown>
-
-export const Default: Story = { args: { label: 'Меню' } }
-
-export const WithSlots: Story = {
-  render: () => ({
-    components: { AppDropdown, AppButton },
-    template: `
-      <div>
-        <AppDropdown color="primary">
-          <template #label>
-            <span style="display: flex; align-items: center; gap: 6px;">
-              Меню
-            </span>
-          </template>
-          <template #content>
-            <div style="padding: 12px; background: #f5f5f5; border-radius: 4px;">
-              <p>Контент</p>
-              <AppButton color="primary" label="Кнопка внутри"/>
-            </div>
-          </template>
-        </AppDropdown>
-      </div>
-    `,
-  }),
-}
-
-export const ContentSize: Story = {
-  render: () => ({
-    components: { AppDropdown },
-    template: `
-        <div style="display: flex; gap: 16px; flex-wrap: wrap;">
-          <AppDropdown label="200×200" width="200px" height="200px">
-            <template #content>
-              <div style="padding: 12px;">Стандартный размер</div>
-            </template>
-          </AppDropdown>
-          <AppDropdown label="300×150" width="300px" height="150px">
-            <template #content>
-              <div style="padding: 12px;">Широкий и низкий</div>
-            </template>
-          </AppDropdown>
-          <AppDropdown label="150×300" width="150px" height="300px">
-            <template #content>
-              <div style="padding: 12px;">Узкий и высокий</div>
-            </template>
-          </AppDropdown>
-        </div>
-    `,
-  }),
-}
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AppDropdown from '@/common/app-dropdown/AppDropdown.vue'
+import AppButton from '@/common/app-button/AppButton.vue'
+import { quasarColorOpts } from '@/configs/storybook'
+
+const meta: Meta<typeof AppDropdown> = {
+  title: 'Components/AppDropdown',
+  component: AppDropdown,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Текст на кнопке. Можно переопределить через слот `label`.',
+    },
+    color: {
+      control: 'select',
+      options: quasarColorOpts,
+      description: 'Цвет фона кнопки. Используйте имена из палитры Quasar.',
+    },
+    width: {
+      control: 'text',
+      description: 'Ширина выпадающего контента.',
+    },
+    height: {
+      control: 'text',
+      description: 'Минимальная ширина выпадающего контента. Используется как `minWidth`.',
+    },
+    modelValue: {
+      control: 'boolean',
+      description: 'Состояние открыт/закрыт.',
+    },
+  },
+  args: {
+    label: 'Меню',
+    color: 'primary',
+    width: 200,
+    height: 200,
+    modelValue: false,
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof AppDropdown>
+
+export const Default: Story = { args: { label: 'Меню' } }
+
+export const WithSlots: Story = {
+  render: () => ({
+    components: { AppDropdown, AppButton },
+    template: `
+      <div>
+        <AppDropdown color="primary">
+          <template #label>
+            <span style="display: flex; align-items: center; gap: 6px;">
+              Меню
+            </span>
+          </template>
+          <template #content>
+            <div style="padding: 12px; background: #f5f5f5; border-radius: 4px;">
+              <p>Контент</p>
+              <AppButton color="primary" label="Кнопка внутри"/>
+            </div>
+          </template>
+        </AppDropdown>
+      </div>
+    `,
+  }),
+}
+
+export const ContentSize: Story = {
+  render: () => ({
+    components: { AppDropdown },
+    template: `
+        <div style="display: flex; gap: 16px; flex-wrap: wrap;">
+          <AppDropdown label="200×200" width="200px" height="200px">
+            <template #content>
+              <div style="padding: 12px;">Стандартный размер</div>
+            </template>
+          </AppDropdown>
+          <AppDropdown label="300×150" width="300px" height="150px">
+            <template #content>
+              <div style="padding: 12px;">Широкий и низкий</div>
+            </template>
+          </AppDropdown>
+          <AppDropdown label="150×300" width="150px" height="300px">
+            <template #content>
+              <div style="padding: 12px;">Узкий и высокий</div>
+            </template>
+          </AppDropdown>
+        </div>
+    `,
+  }),
+}

package/src/common/app-file/File.stories.ts

@@ -1,104 +1,104 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import AppFile from '@/common/app-file/AppFile.vue'
-import { ref } from 'vue'
-import AppButton from '@/common/app-button/AppButton.vue'
-
-const meta: Meta<typeof AppFile> = {
-  title: 'Components/AppFile',
-  component: AppFile,
-  tags: ['autodocs'],
-  argTypes: {
-    modelValue: { control: false },
-    label: { control: 'text' },
-    accept: { control: 'text' },
-    multiple: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-  },
-  args: {
-    label: 'Загрузите файл',
-    accept: '',
-    multiple: false,
-    disabled: false,
-  },
-}
-
-export default meta
-type Story = StoryObj<typeof AppFile>
-
-const FileInputWrapper = (args: any) => ({
-  components: { AppFile, AppButton },
-  setup() {
-    const fileInputRef = ref<InstanceType<typeof AppFile> | null>(null)
-    const model = ref<File | File[] | null>(null)
-
-    const openFilePicker = () => {
-      fileInputRef.value?.pickFiles?.()
-    }
-
-    return { args, model, fileInputRef, openFilePicker }
-  },
-  template: `
-    <div style="width: 400px;">
-      <app-file
-        ref="fileInputRef"
-        v-model="model"
-        v-bind="args"
-      >
-        <template #drag-drop="{ isFileHover }">
-          <div
-            :style="{
-              border: isFileHover ? '2px dashed #3f8cff' : '2px dashed #ccc',
-              borderRadius: '8px',
-              padding: '24px',
-              textAlign: 'center',
-              backgroundColor: isFileHover ? '#f0f8ff' : '#fafafa',
-              cursor: 'pointer',
-              transition: 'all 0.2s',
-              minHeight: '100px',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              fontSize: '14px',
-              color: '#555',
-            }"
-          >
-            Перетащите файл сюда
-          </div>
-        </template>
-      </app-file>
-
-      <app-button
-        label="Выбрать файл"
-        @click="openFilePicker"
-        style="margin-top: 12px;"
-        :disabled="args.disabled"
-      />
-
-      <div style="margin-top: 16px; padding: 12px; background: #f9f9f9; border-radius: 4px;">
-        <strong>Выбрано:</strong>
-        <pre style="font-size: 12px; margin-top: 8px;">{{
-          model
-            ? Array.isArray(model)
-              ? model.map(f => f.name).join(', ')
-              : model.name
-            : '—'
-        }}</pre>
-      </div>
-    </div>
-  `,
-})
-
-export const SingleFile: Story = {
-  render: FileInputWrapper,
-  args: { multiple: false },
-}
-
-export const MultipleFiles: Story = {
-  render: FileInputWrapper,
-  args: { multiple: true, accept: 'image/*' },
-}
-
-export const Disabled: Story = {
-  render: FileInputWrapper,
-  args: { disabled: true },
-}
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AppFile from '@/common/app-file/AppFile.vue'
+import { ref } from 'vue'
+import AppButton from '@/common/app-button/AppButton.vue'
+
+const meta: Meta<typeof AppFile> = {
+  title: 'Components/AppFile',
+  component: AppFile,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: { control: false },
+    label: { control: 'text' },
+    accept: { control: 'text' },
+    multiple: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+  args: {
+    label: 'Загрузите файл',
+    accept: '',
+    multiple: false,
+    disabled: false,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof AppFile>
+
+const FileInputWrapper = (args: any) => ({
+  components: { AppFile, AppButton },
+  setup() {
+    const fileInputRef = ref<InstanceType<typeof AppFile> | null>(null)
+    const model = ref<File | File[] | null>(null)
+
+    const openFilePicker = () => {
+      fileInputRef.value?.pickFiles?.()
+    }
+
+    return { args, model, fileInputRef, openFilePicker }
+  },
+  template: `
+    <div style="width: 400px;">
+      <app-file
+        ref="fileInputRef"
+        v-model="model"
+        v-bind="args"
+      >
+        <template #drag-drop="{ isFileHover }">
+          <div
+            :style="{
+              border: isFileHover ? '2px dashed #3f8cff' : '2px dashed #ccc',
+              borderRadius: '8px',
+              padding: '24px',
+              textAlign: 'center',
+              backgroundColor: isFileHover ? '#f0f8ff' : '#fafafa',
+              cursor: 'pointer',
+              transition: 'all 0.2s',
+              minHeight: '100px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: '14px',
+              color: '#555',
+            }"
+          >
+            Перетащите файл сюда
+          </div>
+        </template>
+      </app-file>
+
+      <app-button
+        label="Выбрать файл"
+        @click="openFilePicker"
+        style="margin-top: 12px;"
+        :disabled="args.disabled"
+      />
+
+      <div style="margin-top: 16px; padding: 12px; background: #f9f9f9; border-radius: 4px;">
+        <strong>Выбрано:</strong>
+        <pre style="font-size: 12px; margin-top: 8px;">{{
+          model
+            ? Array.isArray(model)
+              ? model.map(f => f.name).join(', ')
+              : model.name
+            : '—'
+        }}</pre>
+      </div>
+    </div>
+  `,
+})
+
+export const SingleFile: Story = {
+  render: FileInputWrapper,
+  args: { multiple: false },
+}
+
+export const MultipleFiles: Story = {
+  render: FileInputWrapper,
+  args: { multiple: true, accept: 'image/*' },
+}
+
+export const Disabled: Story = {
+  render: FileInputWrapper,
+  args: { disabled: true },
+}