shared-ritm 1.3.38 → 1.3.40

package/src/common/app-dialogs/AppConfirmDialog.vue

@@ -1,109 +1,109 @@
-<template>
-  <q-dialog ref="dialogRef" persistent transition-show="slide-up" transition-hide="slide-down" :class="$style.dialog">
-    <q-card :class="$style.modal">
-      <q-card-section :class="$style['modal__content']">
-        <div :class="$style['modal__content__header']">
-          <safety-icon v-if="type === 'edit'" />
-          <remove-icon v-if="type === 'delete'" />
-        </div>
-        <p>{{ content }}</p>
-      </q-card-section>
-      <q-card-section :class="$style.footer">
-        <app-button
-          data-test="confirm-button"
-          :class="$style['footer__btn--ok']"
-          label="Подтвердить"
-          @click="onDialogOK"
-        />
-        <app-button
-          data-test="close-button"
-          :class="$style['footer__btn--cancel']"
-          label="Отменить"
-          @click="onDialogHide"
-        />
-      </q-card-section>
-    </q-card>
-  </q-dialog>
-</template>
-
-<script setup lang="ts">
-import { useDialogPluginComponent } from 'quasar'
-import AppButton from '@/common/app-button/AppButton.vue'
-import SafetyIcon from '@/icons/dialogs/SafetyIcon.vue'
-import RemoveIcon from '@/icons/dialogs/RemoveIcon.vue'
-
-const { onDialogHide, onDialogOK, dialogRef } = useDialogPluginComponent()
-
-interface Props {
-  content: string
-  type: 'delete' | 'edit'
-}
-
-const props = defineProps<Props>()
-</script>
-
-<style lang="scss" module>
-.modal {
-  font-family: NunitoSansFont, sans-serif;
-  display: flex;
-  flex-direction: column;
-  width: 400px;
-  border-radius: 8px !important;
-  justify-content: space-between;
-  &__content {
-    margin: 0 auto;
-    padding: 0;
-    flex-grow: 1;
-    &__header {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-direction: column;
-      gap: 16px;
-      padding-top: 18px;
-      h4 {
-        font-size: 24px;
-        font-weight: 600;
-      }
-    }
-  }
-  p {
-    margin: 0;
-    font-size: 16px;
-    text-align: center;
-    padding: 18px;
-  }
-}
-
-.footer {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  justify-content: center;
-  border-radius: 0px 0px 2px 2px;
-  background: #f4f9fd;
-  padding: 18px 12px;
-  &__btn--ok,
-  &__btn--cancel {
-    background-color: #3f8cff;
-    border-radius: 4px;
-    color: white;
-    font-size: 16px;
-    font-weight: bold;
-    width: 165px;
-    height: 48px;
-    cursor: pointer;
-    span {
-      color: white;
-    }
-  }
-  &__btn--cancel {
-    background-color: white;
-    border: 1px solid #3f8cff;
-    span {
-      color: #3f8cff;
-    }
-  }
-}
-</style>
+<template>
+  <q-dialog ref="dialogRef" persistent transition-show="slide-up" transition-hide="slide-down" :class="$style.dialog">
+    <q-card :class="$style.modal">
+      <q-card-section :class="$style['modal__content']">
+        <div :class="$style['modal__content__header']">
+          <safety-icon v-if="type === 'edit'" />
+          <remove-icon v-if="type === 'delete'" />
+        </div>
+        <p>{{ content }}</p>
+      </q-card-section>
+      <q-card-section :class="$style.footer">
+        <app-button
+          data-test="confirm-button"
+          :class="$style['footer__btn--ok']"
+          label="Подтвердить"
+          @click="onDialogOK"
+        />
+        <app-button
+          data-test="close-button"
+          :class="$style['footer__btn--cancel']"
+          label="Отменить"
+          @click="onDialogHide"
+        />
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { useDialogPluginComponent } from 'quasar'
+import AppButton from '@/common/app-button/AppButton.vue'
+import SafetyIcon from '@/icons/dialogs/SafetyIcon.vue'
+import RemoveIcon from '@/icons/dialogs/RemoveIcon.vue'
+
+const { onDialogHide, onDialogOK, dialogRef } = useDialogPluginComponent()
+
+interface Props {
+  content: string
+  type: 'delete' | 'edit'
+}
+
+const props = defineProps<Props>()
+</script>
+
+<style lang="scss" module>
+.modal {
+  font-family: NunitoSansFont, sans-serif;
+  display: flex;
+  flex-direction: column;
+  width: 400px;
+  border-radius: 8px !important;
+  justify-content: space-between;
+  &__content {
+    margin: 0 auto;
+    padding: 0;
+    flex-grow: 1;
+    &__header {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      gap: 16px;
+      padding-top: 18px;
+      h4 {
+        font-size: 24px;
+        font-weight: 600;
+      }
+    }
+  }
+  p {
+    margin: 0;
+    font-size: 16px;
+    text-align: center;
+    padding: 18px;
+  }
+}
+
+.footer {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0px 0px 2px 2px;
+  background: #f4f9fd;
+  padding: 18px 12px;
+  &__btn--ok,
+  &__btn--cancel {
+    background-color: #3f8cff;
+    border-radius: 4px;
+    color: white;
+    font-size: 16px;
+    font-weight: bold;
+    width: 165px;
+    height: 48px;
+    cursor: pointer;
+    span {
+      color: white;
+    }
+  }
+  &__btn--cancel {
+    background-color: white;
+    border: 1px solid #3f8cff;
+    span {
+      color: #3f8cff;
+    }
+  }
+}
+</style>

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

@@ -0,0 +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:
+      'Это очень важное предупреждение с длинным текстом, чтобы проверить, как оно переносится и выглядит в диалоге.',
+  },
+}

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

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

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

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