shared-ritm 1.3.67 → 1.3.69

package/src/common/app-datepicker/Datepicker.stories.ts

@@ -1,145 +1,145 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import AppDatepicker from './AppDatepicker.vue'
-
-const meta: Meta<typeof AppDatepicker> = {
-  title: 'Components/AppDatepicker',
-  component: AppDatepicker,
-  tags: ['autodocs'],
-  argTypes: {
-    label: {
-      control: 'text',
-      description: 'Подпись над полем.',
-    },
-    modelValue: {
-      control: 'text',
-      description: 'Выбранная дата в формате DD.MM.YYYY (или с временем).',
-    },
-    required: {
-      control: 'boolean',
-      description: 'Показывает звёздочку и включает валидацию при закрытии календаря.',
-    },
-    rules: {
-      table: { disable: true },
-      description: 'Массив функций валидации.',
-    },
-
-    time: {
-      control: 'boolean',
-      description: 'Включить выбор времени (в дополнение к дате).',
-    },
-    noPastDates: {
-      control: 'boolean',
-      description: 'Запретить выбор дат в прошлом (относительно сегодня).',
-    },
-    disableRuleDates: {
-      control: 'object',
-      description: 'Минимальная дата (строка "YYYY-MM-DD") или диапазон [min, max].',
-    },
-
-    disabled: {
-      control: 'boolean',
-      description: 'Отключает поле и календарь.',
-    },
-
-    timeFormat: {
-      control: 'text',
-      description: 'Формат отображения времени (например, "HH:mm" или "HH:mm:ss").',
-    },
-  },
-  args: {
-    label: 'Дата события',
-    modelValue: '',
-    required: false,
-    time: false,
-    noPastDates: false,
-    disableRuleDates: undefined,
-    disabled: false,
-    timeFormat: 'HH:mm',
-  },
-}
-
-export default meta
-
-type Story = StoryObj<typeof AppDatepicker>
-
-export const Default: Story = {}
-
-export const DateTimeModes: Story = {
-  render: () => ({
-    components: { AppDatepicker },
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 20px;">
-          <AppDatepicker v-model="dateOnly" label="Дата" />
-          <AppDatepicker v-model="dateTime" label="Дата и время" :time="true" />
-      </div>
-    `,
-    data() {
-      return {
-        dateOnly: '15.12.2025',
-        dateTime: '15.12.2025 14:30',
-      }
-    },
-  }),
-}
-
-export const DateRestrictions: Story = {
-  render: () => ({
-    components: { AppDatepicker },
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 20px;">
-          <AppDatepicker v-model="date1" label="С сегодняшнего дня" :no-past-dates="true" />
-          <AppDatepicker
-            v-model="date2"
-            label="Только 2026"
-            :disable-rule-dates="['2026-01-01', '2026-12-31']"
-          />
-          <AppDatepicker v-model="date3" label="С июня 2025" disable-rule-dates="2025-05-31" />
-      </div>
-    `,
-    data() {
-      return {
-        date1: '',
-        date2: '',
-        date3: '',
-      }
-    },
-  }),
-}
-
-export const States: Story = {
-  render: () => ({
-    components: { AppDatepicker },
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 20px;">
-          <AppDatepicker v-model="normal" label="Активное поле" />
-          <AppDatepicker v-model="disabledVal" label="Отключено" :disabled="true" />
-          <AppDatepicker v-model="empty" label="Обязательное" required />
-      </div>
-    `,
-    data() {
-      return {
-        normal: '10.11.2025',
-        disabledVal: '20.11.2025',
-        empty: '',
-      }
-    },
-  }),
-}
-
-export const TimeFormat: Story = {
-  render: () => ({
-    components: { AppDatepicker },
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 20px;">
-          <AppDatepicker v-model="time1" label="Стандартный формат" :time="true" />
-          <AppDatepicker v-model="time2" label="С секундами" :time="true" time-format="HH:mm:ss" />
-      </div>
-    `,
-    data() {
-      return {
-        time1: '25.11.2025 09:45',
-        time2: '25.11.2025 16:30:22',
-      }
-    },
-  }),
-}
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AppDatepicker from './AppDatepicker.vue'
+
+const meta: Meta<typeof AppDatepicker> = {
+  title: 'Components/AppDatepicker',
+  component: AppDatepicker,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Подпись над полем.',
+    },
+    modelValue: {
+      control: 'text',
+      description: 'Выбранная дата в формате DD.MM.YYYY (или с временем).',
+    },
+    required: {
+      control: 'boolean',
+      description: 'Показывает звёздочку и включает валидацию при закрытии календаря.',
+    },
+    rules: {
+      table: { disable: true },
+      description: 'Массив функций валидации.',
+    },
+
+    time: {
+      control: 'boolean',
+      description: 'Включить выбор времени (в дополнение к дате).',
+    },
+    noPastDates: {
+      control: 'boolean',
+      description: 'Запретить выбор дат в прошлом (относительно сегодня).',
+    },
+    disableRuleDates: {
+      control: 'object',
+      description: 'Минимальная дата (строка "YYYY-MM-DD") или диапазон [min, max].',
+    },
+
+    disabled: {
+      control: 'boolean',
+      description: 'Отключает поле и календарь.',
+    },
+
+    timeFormat: {
+      control: 'text',
+      description: 'Формат отображения времени (например, "HH:mm" или "HH:mm:ss").',
+    },
+  },
+  args: {
+    label: 'Дата события',
+    modelValue: '',
+    required: false,
+    time: false,
+    noPastDates: false,
+    disableRuleDates: undefined,
+    disabled: false,
+    timeFormat: 'HH:mm',
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof AppDatepicker>
+
+export const Default: Story = {}
+
+export const DateTimeModes: Story = {
+  render: () => ({
+    components: { AppDatepicker },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 20px;">
+          <AppDatepicker v-model="dateOnly" label="Дата" />
+          <AppDatepicker v-model="dateTime" label="Дата и время" :time="true" />
+      </div>
+    `,
+    data() {
+      return {
+        dateOnly: '15.12.2025',
+        dateTime: '15.12.2025 14:30',
+      }
+    },
+  }),
+}
+
+export const DateRestrictions: Story = {
+  render: () => ({
+    components: { AppDatepicker },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 20px;">
+          <AppDatepicker v-model="date1" label="С сегодняшнего дня" :no-past-dates="true" />
+          <AppDatepicker
+            v-model="date2"
+            label="Только 2026"
+            :disable-rule-dates="['2026-01-01', '2026-12-31']"
+          />
+          <AppDatepicker v-model="date3" label="С июня 2025" disable-rule-dates="2025-05-31" />
+      </div>
+    `,
+    data() {
+      return {
+        date1: '',
+        date2: '',
+        date3: '',
+      }
+    },
+  }),
+}
+
+export const States: Story = {
+  render: () => ({
+    components: { AppDatepicker },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 20px;">
+          <AppDatepicker v-model="normal" label="Активное поле" />
+          <AppDatepicker v-model="disabledVal" label="Отключено" :disabled="true" />
+          <AppDatepicker v-model="empty" label="Обязательное" required />
+      </div>
+    `,
+    data() {
+      return {
+        normal: '10.11.2025',
+        disabledVal: '20.11.2025',
+        empty: '',
+      }
+    },
+  }),
+}
+
+export const TimeFormat: Story = {
+  render: () => ({
+    components: { AppDatepicker },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 20px;">
+          <AppDatepicker v-model="time1" label="Стандартный формат" :time="true" />
+          <AppDatepicker v-model="time2" label="С секундами" :time="true" time-format="HH:mm:ss" />
+      </div>
+    `,
+    data() {
+      return {
+        time1: '25.11.2025 09:45',
+        time2: '25.11.2025 16:30:22',
+      }
+    },
+  }),
+}

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>