shared-ritm 1.3.130 → 1.3.132

package/src/common/app-date-picker/DatePicker.stories.ts

@@ -1,66 +1,66 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import DatePicker from '@/common/app-date-picker/AppDatePicker.vue'
-
-const meta: Meta<typeof DatePicker> = {
-  title: 'Components/DatePicker',
-  component: DatePicker,
-  tags: ['autodocs'],
-  argTypes: {
-    label: {
-      control: 'text',
-    },
-    modelValue: {
-      control: 'text',
-      description: 'Выбранная дата в формате YYYY-MM-DD.',
-    },
-    disabled: {
-      control: 'boolean',
-    },
-    disableRuleDates: {
-      control: 'text',
-      description: 'Минимальная дата в формате YYYY-MM-DD. Если не указана — ограничение "не раньше сегодня".',
-    },
-  },
-  args: {
-    label: 'Дата начала',
-    modelValue: '',
-    disabled: false,
-    disableRuleDates: '',
-  },
-}
-
-export default meta
-
-type Story = StoryObj<typeof DatePicker>
-
-export const Default: Story = {}
-
-export const States: Story = {
-  render: () => ({
-    components: { DatePicker },
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 20px;">
-        <div>
-          <DatePicker v-model="date1" label="Не ранее сегодня" />
-        </div>
-        <div>
-          <DatePicker v-model="date2" label="С 01.01.2026" disable-rule-dates="2026-01-01" />
-        </div>
-        <div>
-          <DatePicker v-model="disabledDate" label="Отключён" :disabled="true" />
-        </div>
-        <div>
-          <DatePicker v-model="selectedDate" label="С датой" />
-        </div>
-      </div>
-    `,
-    data() {
-      return {
-        date1: '',
-        date2: '',
-        disabledDate: '',
-        selectedDate: '2025-12-25',
-      }
-    },
-  }),
-}
+import type { Meta, StoryObj } from '@storybook/vue3'
+import DatePicker from '@/common/app-date-picker/AppDatePicker.vue'
+
+const meta: Meta<typeof DatePicker> = {
+  title: 'Components/DatePicker',
+  component: DatePicker,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+    },
+    modelValue: {
+      control: 'text',
+      description: 'Выбранная дата в формате YYYY-MM-DD.',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    disableRuleDates: {
+      control: 'text',
+      description: 'Минимальная дата в формате YYYY-MM-DD. Если не указана — ограничение "не раньше сегодня".',
+    },
+  },
+  args: {
+    label: 'Дата начала',
+    modelValue: '',
+    disabled: false,
+    disableRuleDates: '',
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof DatePicker>
+
+export const Default: Story = {}
+
+export const States: Story = {
+  render: () => ({
+    components: { DatePicker },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 20px;">
+        <div>
+          <DatePicker v-model="date1" label="Не ранее сегодня" />
+        </div>
+        <div>
+          <DatePicker v-model="date2" label="С 01.01.2026" disable-rule-dates="2026-01-01" />
+        </div>
+        <div>
+          <DatePicker v-model="disabledDate" label="Отключён" :disabled="true" />
+        </div>
+        <div>
+          <DatePicker v-model="selectedDate" label="С датой" />
+        </div>
+      </div>
+    `,
+    data() {
+      return {
+        date1: '',
+        date2: '',
+        disabledDate: '',
+        selectedDate: '2025-12-25',
+      }
+    },
+  }),
+}

package/src/common/app-datepicker/AppDatepicker.vue

@@ -1,221 +1,221 @@
-<template>
-  <div class="datepicker">
-    <app-input-new
-      v-model="model"
-      readonly
-      input-class="cursor-pointer"
-      :label="label"
-      :required="required"
-      :rules="rules"
-      :error="isError || error"
-      :disable="disabled"
-      :hide-bottom-space="hideBottomSpace"
-      placeholder="Выберите дату"
-    >
-      <q-popup-proxy v-if="!disabled" class="datepicker__wrapper" @update:model-value="updateError">
-        <q-date
-          :model-value="model"
-          :mask="time ? `DD.MM.YYYY ${timeFormat}` : 'DD.MM.YYYY'"
-          :options="disablePastDates"
-          @update:model-value="updateDate"
-        />
-        <q-time
-          v-if="time"
-          v-model="model"
-          :mask="`DD.MM.YYYY ${timeFormat}`"
-          format24h
-          :hour-options="hourOptions()"
-          :minute-options="minuteOptions()"
-        />
-      </q-popup-proxy>
-      <template #append>
-        <q-icon name="event" class="cursor-pointer"></q-icon>
-      </template>
-    </app-input-new>
-  </div>
-</template>
-
-<script setup lang="ts">
-import AppInputNew from '@/common/app-input-new/AppInputNew.vue'
-import { ref, withDefaults, defineEmits, defineProps, defineModel } from 'vue'
-import { date } from 'quasar'
-
-interface Props {
-  label?: string
-  modelValue?: string
-  rules?: ((val?: string | number | null) => boolean | string)[]
-  disableRuleDates?: string | string[]
-  time?: boolean
-  noPastDates?: boolean
-  disabled?: boolean
-  required?: boolean
-  timeFormat?: string
-  hideBottomSpace?: boolean
-  isError?: boolean
-}
-const props = withDefaults(defineProps<Props>(), {
-  label: '',
-  timeFormat: 'HH:mm',
-  rules: () => [],
-  disableRuleDates: undefined,
-  modelValue: undefined,
-})
-
-defineEmits(['update:modelValue'])
-
-const model = defineModel<string | null | undefined>()
-
-const error = ref(false)
-
-const updateError = (state: boolean) => {
-  if (props.required && !error.value && !model.value && !state) {
-    error.value = true
-  }
-}
-
-const updateDate = (value: string) => {
-  error.value = false
-
-  if (!props.noPastDates) {
-    model.value = value
-    return
-  }
-
-  const today = new Date()
-  const todayStr = today.toLocaleDateString('ru-RU').slice(0, 10)
-  const selectedDate = getSelectedDate(value)
-
-  if (selectedDate !== todayStr) {
-    model.value = value
-    return
-  }
-
-  const selectedHour = getSelectedHour(value)
-  const selectedMinutes = getSelectedMinutes(value)
-  const currentHour = today.getHours()
-  const currentMinutes = today.getMinutes()
-
-  if (
-    (selectedHour || selectedHour === 0) &&
-    (selectedMinutes || selectedMinutes === 0) &&
-    (selectedHour < currentHour || (selectedHour === currentHour && selectedMinutes < currentMinutes))
-  ) {
-    today.setHours(currentHour, currentMinutes, 0)
-    model.value = date.formatDate(today, `DD.MM.YYYY ${props.timeFormat}`)
-  } else {
-    model.value = value
-  }
-}
-
-const disablePastDates = (date: string) => {
-  if (!props.noPastDates && !props.disableRuleDates) return true
-
-  const [year, month, day] = date.split('/')
-  const currentDate = new Date(Number(year), Number(month) - 1, Number(day))
-  currentDate.setHours(0, 0, 0, 0)
-
-  if (props.disableRuleDates) {
-    if (Array.isArray(props.disableRuleDates)) {
-      const firstDate = props.disableRuleDates[0] ? new Date(props.disableRuleDates[0]) : null
-      firstDate?.setHours(0, 0, 0, 0)
-      const lastDate = props.disableRuleDates[1] ? new Date(props.disableRuleDates[1]) : null
-      lastDate?.setHours(0, 0, 0, 0)
-
-      return (!firstDate || currentDate >= firstDate) && (!lastDate || currentDate <= lastDate)
-    } else {
-      const firstDate = new Date(props.disableRuleDates)
-      return currentDate >= firstDate
-    }
-  }
-
-  const today = new Date()
-  const todayDate = new Date(today.getFullYear(), today.getMonth(), today.getDate())
-
-  return currentDate >= todayDate
-}
-
-function getSelectedDate(value = model.value) {
-  if (!value) return null
-
-  return value.toString().substring(0, 10)
-}
-
-function getSelectedHour(value = model.value) {
-  if (!value) return null
-
-  const timePart = value.toString().split(' ')[1]
-  return timePart ? Number(timePart.split(':')[0]) : null
-}
-
-function getSelectedMinutes(value = model.value) {
-  if (!value) return null
-
-  const timePart = value.toString().split(' ')[1]
-  return timePart ? Number(timePart.split(':')[1]) : null
-}
-
-function hourOptions(): number[] {
-  const today = new Date()
-  const selectedDate = getSelectedDate()
-  const todayStr = today.toLocaleDateString('ru-RU').slice(0, 10)
-
-  if (selectedDate !== todayStr) {
-    return Array.from({ length: 24 }, (_, i) => i)
-  }
-
-  const currentHour = today.getHours()
-  return Array.from({ length: 24 - currentHour }, (_, i) => currentHour + i)
-}
-
-function minuteOptions(): number[] {
-  const today = new Date()
-  const selectedDate = getSelectedDate()
-  const todayStr = today.toLocaleDateString('ru-RU').slice(0, 10)
-  const selectedHour = getSelectedHour()
-
-  if (selectedDate !== todayStr) {
-    return Array.from({ length: 60 }, (_, i) => i)
-  }
-
-  if (selectedHour === today.getHours()) {
-    const currentMinutes = today.getMinutes()
-    return Array.from({ length: 60 - currentMinutes }, (_, i) => currentMinutes + i)
-  }
-
-  return Array.from({ length: 60 }, (_, i) => i)
-}
-</script>
-
-<style scoped lang="scss">
-.datepicker {
-  :deep(input),
-  :deep(.q-field--readonly.q-field--float .q-field__native) {
-    cursor: pointer;
-  }
-
-  &__label {
-    font-size: 14px;
-    font-weight: 700;
-    color: #7d8592;
-
-    .required {
-      color: #f65160;
-      font-weight: bold;
-    }
-  }
-}
-</style>
-
-<style lang="scss">
-.datepicker {
-  &__wrapper {
-    display: flex;
-
-    .q-time,
-    .q-date {
-      box-shadow: none;
-      border-radius: 0;
-    }
-  }
-}
-</style>
+<template>
+  <div class="datepicker">
+    <app-input-new
+      v-model="model"
+      readonly
+      input-class="cursor-pointer"
+      :label="label"
+      :required="required"
+      :rules="rules"
+      :error="isError || error"
+      :disable="disabled"
+      :hide-bottom-space="hideBottomSpace"
+      placeholder="Выберите дату"
+    >
+      <q-popup-proxy v-if="!disabled" class="datepicker__wrapper" @update:model-value="updateError">
+        <q-date
+          :model-value="model"
+          :mask="time ? `DD.MM.YYYY ${timeFormat}` : 'DD.MM.YYYY'"
+          :options="disablePastDates"
+          @update:model-value="updateDate"
+        />
+        <q-time
+          v-if="time"
+          v-model="model"
+          :mask="`DD.MM.YYYY ${timeFormat}`"
+          format24h
+          :hour-options="hourOptions()"
+          :minute-options="minuteOptions()"
+        />
+      </q-popup-proxy>
+      <template #append>
+        <q-icon name="event" class="cursor-pointer"></q-icon>
+      </template>
+    </app-input-new>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AppInputNew from '@/common/app-input-new/AppInputNew.vue'
+import { ref, withDefaults, defineEmits, defineProps, defineModel } from 'vue'
+import { date } from 'quasar'
+
+interface Props {
+  label?: string
+  modelValue?: string
+  rules?: ((val?: string | number | null) => boolean | string)[]
+  disableRuleDates?: string | string[]
+  time?: boolean
+  noPastDates?: boolean
+  disabled?: boolean
+  required?: boolean
+  timeFormat?: string
+  hideBottomSpace?: boolean
+  isError?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  timeFormat: 'HH:mm',
+  rules: () => [],
+  disableRuleDates: undefined,
+  modelValue: undefined,
+})
+
+defineEmits(['update:modelValue'])
+
+const model = defineModel<string | null | undefined>()
+
+const error = ref(false)
+
+const updateError = (state: boolean) => {
+  if (props.required && !error.value && !model.value && !state) {
+    error.value = true
+  }
+}
+
+const updateDate = (value: string) => {
+  error.value = false
+
+  if (!props.noPastDates) {
+    model.value = value
+    return
+  }
+
+  const today = new Date()
+  const todayStr = today.toLocaleDateString('ru-RU').slice(0, 10)
+  const selectedDate = getSelectedDate(value)
+
+  if (selectedDate !== todayStr) {
+    model.value = value
+    return
+  }
+
+  const selectedHour = getSelectedHour(value)
+  const selectedMinutes = getSelectedMinutes(value)
+  const currentHour = today.getHours()
+  const currentMinutes = today.getMinutes()
+
+  if (
+    (selectedHour || selectedHour === 0) &&
+    (selectedMinutes || selectedMinutes === 0) &&
+    (selectedHour < currentHour || (selectedHour === currentHour && selectedMinutes < currentMinutes))
+  ) {
+    today.setHours(currentHour, currentMinutes, 0)
+    model.value = date.formatDate(today, `DD.MM.YYYY ${props.timeFormat}`)
+  } else {
+    model.value = value
+  }
+}
+
+const disablePastDates = (date: string) => {
+  if (!props.noPastDates && !props.disableRuleDates) return true
+
+  const [year, month, day] = date.split('/')
+  const currentDate = new Date(Number(year), Number(month) - 1, Number(day))
+  currentDate.setHours(0, 0, 0, 0)
+
+  if (props.disableRuleDates) {
+    if (Array.isArray(props.disableRuleDates)) {
+      const firstDate = props.disableRuleDates[0] ? new Date(props.disableRuleDates[0]) : null
+      firstDate?.setHours(0, 0, 0, 0)
+      const lastDate = props.disableRuleDates[1] ? new Date(props.disableRuleDates[1]) : null
+      lastDate?.setHours(0, 0, 0, 0)
+
+      return (!firstDate || currentDate >= firstDate) && (!lastDate || currentDate <= lastDate)
+    } else {
+      const firstDate = new Date(props.disableRuleDates)
+      return currentDate >= firstDate
+    }
+  }
+
+  const today = new Date()
+  const todayDate = new Date(today.getFullYear(), today.getMonth(), today.getDate())
+
+  return currentDate >= todayDate
+}
+
+function getSelectedDate(value = model.value) {
+  if (!value) return null
+
+  return value.toString().substring(0, 10)
+}
+
+function getSelectedHour(value = model.value) {
+  if (!value) return null
+
+  const timePart = value.toString().split(' ')[1]
+  return timePart ? Number(timePart.split(':')[0]) : null
+}
+
+function getSelectedMinutes(value = model.value) {
+  if (!value) return null
+
+  const timePart = value.toString().split(' ')[1]
+  return timePart ? Number(timePart.split(':')[1]) : null
+}
+
+function hourOptions(): number[] {
+  const today = new Date()
+  const selectedDate = getSelectedDate()
+  const todayStr = today.toLocaleDateString('ru-RU').slice(0, 10)
+
+  if (selectedDate !== todayStr) {
+    return Array.from({ length: 24 }, (_, i) => i)
+  }
+
+  const currentHour = today.getHours()
+  return Array.from({ length: 24 - currentHour }, (_, i) => currentHour + i)
+}
+
+function minuteOptions(): number[] {
+  const today = new Date()
+  const selectedDate = getSelectedDate()
+  const todayStr = today.toLocaleDateString('ru-RU').slice(0, 10)
+  const selectedHour = getSelectedHour()
+
+  if (selectedDate !== todayStr) {
+    return Array.from({ length: 60 }, (_, i) => i)
+  }
+
+  if (selectedHour === today.getHours()) {
+    const currentMinutes = today.getMinutes()
+    return Array.from({ length: 60 - currentMinutes }, (_, i) => currentMinutes + i)
+  }
+
+  return Array.from({ length: 60 }, (_, i) => i)
+}
+</script>
+
+<style scoped lang="scss">
+.datepicker {
+  :deep(input),
+  :deep(.q-field--readonly.q-field--float .q-field__native) {
+    cursor: pointer;
+  }
+
+  &__label {
+    font-size: 14px;
+    font-weight: 700;
+    color: #7d8592;
+
+    .required {
+      color: #f65160;
+      font-weight: bold;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.datepicker {
+  &__wrapper {
+    display: flex;
+
+    .q-time,
+    .q-date {
+      box-shadow: none;
+      border-radius: 0;
+    }
+  }
+}
+</style>