adata-ui 2.1.41-beta.21 → 2.1.41-beta.22

package/components/elements/calendar-v2/ADatePickerV2.vue

@@ -0,0 +1,508 @@
+<script lang="ts" setup>
+import type { CalendarBaseProps, CalendarModelValue, DateRange } from './types'
+import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
+import { onClickOutside } from '@vueuse/core'
+import ACalendarV2 from './ACalendarV2.vue'
+import { formatDate, isSameDay, parseDisplayDate } from './date-utils'
+
+defineOptions({ name: 'ADatePickerV2', inheritAttrs: false })
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  placeholder: '',
+  required: false,
+  disabled: false,
+  clearable: true,
+  error: undefined,
+  variant: 'default',
+
+  mode: 'single',
+  precision: 'day',
+  locale: undefined,
+  min: null,
+  max: null,
+  disabledDates: undefined,
+  firstDayOfWeek: 1,
+  months: 1,
+  presets: undefined,
+  weekNumbers: false,
+  showTime: false,
+  minuteStep: 5,
+  size: 'md',
+  highlightWeekends: false,
+
+  closeOnSelect: true,
+  dropdownStrategy: 'absolute',
+  separator: ' — ',
+  displayFormat: undefined,
+})
+
+const emit = defineEmits<{
+  (e: 'change', value: CalendarModelValue): void
+  (e: 'open'): void
+  (e: 'close'): void
+  (e: 'clear'): void
+}>()
+
+/* Пропсы сетки наследуются из CalendarBaseProps и прокидываются в
+   <a-calendar-v2> как есть; здесь — только то, что относится к полю и поповеру. */
+interface Props extends CalendarBaseProps {
+  label?: string
+  placeholder?: string
+  required?: boolean
+  disabled?: boolean
+  /** Крестик в поле (когда поле редактируемое) либо «Очистить» в подвале. */
+  clearable?: boolean
+  error?: string | string[]
+  variant?: 'default' | 'gray' | 'blue' | 'canvas'
+
+  /** Закрывать поповер, когда выбор завершён. */
+  closeOnSelect?: boolean
+  /** fixed нужен, когда поле лежит внутри контейнера с overflow или transform. */
+  dropdownStrategy?: 'absolute' | 'fixed'
+  /** Разделитель концов периода в поле. */
+  separator?: string
+  /** Формат отображения. По умолчанию — числовая дата локали. */
+  displayFormat?: Intl.DateTimeFormatOptions
+}
+
+const model = defineModel<CalendarModelValue>({ default: null })
+
+const { t, locale: appLocale } = useI18n()
+
+/* inheritAttrs: false — class/style должны попасть на корень пикера,
+   а не на внутренний инпут (иначе ломается позиционирование поповера). */
+const attrs = useAttrs()
+const rootAttrs = computed(() => ({
+  class: attrs.class as string | undefined,
+  style: attrs.style as string | undefined,
+}))
+
+const resolvedLocale = computed(() => props.locale ?? String(appLocale.value ?? 'ru'))
+
+const dialogId = `date-picker-v2-${useId()}`
+
+/* Вводить руками имеет смысл только одну дату: период и набор набираются
+   кликами, а разбор «01.01.2026 — 31.01.2026» из поля даёт больше
+   неоднозначностей, чем пользы. */
+const isTypeable = computed(() => props.mode === 'single' && !props.showTime && props.precision === 'day')
+
+/* ------------------------------------------------------------- поповер */
+
+interface InputExposed {
+  focus: () => void
+  inputRef: HTMLInputElement | null
+}
+
+const isOpen = ref(false)
+const rootRef = ref<HTMLElement | null>(null)
+const floatingRef = ref<HTMLElement | null>(null)
+const inputComponent = ref<InputExposed | null>(null)
+const calendarRef = ref<InstanceType<typeof ACalendarV2> | null>(null)
+
+/* Якорь — сама рамка поля, а не корень: под полем может быть текст ошибки,
+   и поповер не должен отъезжать вниз вместе с ним. */
+const anchorRef = computed<HTMLElement | null>(() =>
+  inputComponent.value?.inputRef?.closest<HTMLElement>('.input-v2__field') ?? rootRef.value)
+
+const { x, y, strategy, placement: resolvedPlacement } = useFloating(anchorRef, floatingRef, {
+  placement: 'bottom-start',
+  strategy: computed(() => props.dropdownStrategy),
+  /* autoUpdate живёт ровно пока смонтирован поповер — следит за скроллом,
+     ресайзом и сдвигом якоря без ручных watch/cleanup. */
+  whileElementsMounted: autoUpdate,
+  middleware: [offset(6), flip({ fallbackPlacements: ['top-start'] }), shift({ padding: 8 })],
+})
+
+/* Анимация раскрывается из угла, которым поповер прилегает к полю. */
+const transformOrigin = computed(() => {
+  const [side, align] = resolvedPlacement.value.split('-')
+  return `${side === 'top' ? 'bottom' : 'top'} ${align === 'end' ? 'right' : 'left'}`
+})
+
+watch(isOpen, (open) => {
+  if (open) emit('open')
+  else emit('close')
+})
+
+onClickOutside(rootRef, () => {
+  if (isOpen.value) close()
+}, { ignore: [floatingRef] })
+
+/* ------------------------------------------------------------ отображение */
+
+const dateFormat = computed<Intl.DateTimeFormatOptions>(() => {
+  if (props.displayFormat) return props.displayFormat
+  if (props.precision === 'year') return { year: 'numeric' }
+  if (props.precision === 'month') return { month: 'long', year: 'numeric' }
+  if (props.showTime) return { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }
+  return { day: '2-digit', month: '2-digit', year: 'numeric' }
+})
+
+function display(date: Date | null): string {
+  return formatDate(date, resolvedLocale.value, dateFormat.value)
+}
+
+const displayValue = computed<string>(() => {
+  const value = model.value
+  if (!value) return ''
+
+  if (value instanceof Date) return display(value)
+
+  if (Array.isArray(value)) return value.map(display).join(', ')
+
+  const { start, end } = value as DateRange
+  if (!start && !end) return ''
+  /* Выбран только первый конец периода — показываем, что ждём второй. */
+  if (start && !end) return `${display(start)}${props.separator}…`
+  if (start && end && isSameDay(start, end)) return display(start)
+  return `${display(start)}${props.separator}${display(end)}`
+})
+
+/* Черновик нужен только для ручного ввода: пока строка неполная, модель не
+   трогаем, иначе поле «дёргается» на каждой цифре. */
+const draft = ref('')
+
+const fieldValue = computed({
+  get: () => (isTypeable.value && draft.value !== '' ? draft.value : displayValue.value),
+  set: (value: string) => {
+    if (!isTypeable.value) return
+    draft.value = value
+
+    if (value === '') {
+      updateValue(null)
+      return
+    }
+
+    const parsed = parseDisplayDate(value)
+    if (parsed) updateValue(parsed)
+  },
+})
+
+watch(model, () => {
+  draft.value = ''
+})
+
+/* ---------------------------------------------------------------- подвал */
+
+/* В этих режимах у выбора нет естественного конца — закрыть поповер иначе
+   можно только кликом мимо, поэтому даём кнопку «Готово». */
+const needsDone = computed(() => props.showTime || props.mode === 'multiple' || !props.closeOnSelect)
+
+/* Крестик в поле AInputV2 показывает только у редактируемого инпута; в
+   readonly-режимах (период, месяц, год, время) очистить можно лишь из подвала. */
+const showClearInFooter = computed(() => props.clearable && !isTypeable.value)
+
+const showFooter = computed(() => needsDone.value || showClearInFooter.value)
+
+/* ---------------------------------------------------------------- события */
+
+function updateValue(value: CalendarModelValue) {
+  model.value = value
+  emit('change', value)
+}
+
+function open() {
+  if (props.disabled || isOpen.value) return
+  isOpen.value = true
+}
+
+function close() {
+  isOpen.value = false
+}
+
+function toggle() {
+  if (isOpen.value) close()
+  else open()
+}
+
+/* Возврат фокуса в поле после закрытия не должен снова открывать поповер —
+   open-on-focus гасим на время программного focus(). Событие focus
+   синхронное, поэтому флага на один вызов достаточно. */
+let skipFocusOpen = false
+
+function focusInput() {
+  skipFocusOpen = true
+  inputComponent.value?.focus()
+  skipFocusOpen = false
+}
+
+/* Чем пользователь работает с поповером сейчас. После выбора мышью фокус в
+   поле не возвращаем: на телефоне это подняло бы клавиатуру поверх формы. */
+let interaction: 'pointer' | 'keyboard' = 'pointer'
+
+function closeAndRestoreFocus() {
+  close()
+  if (interaction === 'keyboard') focusInput()
+}
+
+/* Фокус от указателя не открывает поповер сам — этим занимается click,
+   иначе нажатие на readonly-поле открывало бы его в focus и тут же
+   закрывало в click. Флаг снимается после click текущего нажатия. */
+let pointerDown = false
+
+function onPointerDown() {
+  pointerDown = true
+}
+
+function onPointerUp() {
+  setTimeout(() => {
+    pointerDown = false
+  }, 0)
+}
+
+function onFocus() {
+  if (skipFocusOpen || pointerDown) return
+  interaction = 'keyboard'
+  open()
+}
+
+function onFieldClick() {
+  if (props.disabled) return
+  interaction = 'pointer'
+  /* Редактируемое поле: клик ставит курсор и не должен закрывать поповер. */
+  if (isTypeable.value) open()
+  else toggle()
+}
+
+function onToggleClick() {
+  interaction = 'pointer'
+  toggle()
+  if (isOpen.value && isTypeable.value) focusInput()
+}
+
+function onFocusOut(event: FocusEvent) {
+  const next = event.relatedTarget as Node | null
+  /* relatedTarget пуст при клике по нефокусируемому месту — это дело
+     onClickOutside, а не наше. */
+  if (!next) return
+  if (rootRef.value?.contains(next) || floatingRef.value?.contains(next)) return
+  close()
+}
+
+function onComplete() {
+  if (props.closeOnSelect) closeAndRestoreFocus()
+}
+
+function onClear() {
+  draft.value = ''
+  updateValue(props.mode === 'range' ? { start: null, end: null } : props.mode === 'multiple' ? [] : null)
+  emit('clear')
+}
+
+function onInputKeydown(event: KeyboardEvent) {
+  interaction = 'keyboard'
+
+  if (event.key === 'Escape') {
+    if (!isOpen.value) return
+    event.stopPropagation()
+    close()
+    return
+  }
+
+  if (event.key === 'ArrowDown') {
+    event.preventDefault()
+    if (isOpen.value) calendarRef.value?.focus()
+    else open()
+    return
+  }
+
+  if (event.key === 'Enter') {
+    if (!isOpen.value) {
+      event.preventDefault()
+      open()
+    }
+    else if (isTypeable.value) {
+      /* Дата набрана руками — Enter подтверждает и убирает поповер. */
+      close()
+    }
+  }
+}
+
+function onDropdownKeydown(event: KeyboardEvent) {
+  interaction = 'keyboard'
+
+  if (event.key === 'Escape') {
+    event.stopPropagation()
+    closeAndRestoreFocus()
+  }
+}
+
+defineExpose({ open, close, toggle, focus: focusInput })
+</script>
+
+<template>
+  <div
+    ref="rootRef"
+    class="date-picker-v2 relative w-full"
+    :class="rootAttrs.class"
+    :style="rootAttrs.style"
+    @pointerdown="onPointerDown"
+    @pointerup="onPointerUp"
+    @pointercancel="onPointerUp"
+    @click="onFieldClick"
+    @focusout="onFocusOut"
+  >
+    <a-input-v2
+      ref="inputComponent"
+      v-model="fieldValue"
+      :label="label"
+      :placeholder="placeholder"
+      :required="required"
+      :disabled="disabled"
+      :readonly="!isTypeable"
+      :clearable="clearable"
+      :error="error"
+      :size="size"
+      :variant="variant"
+      :mask="isTypeable ? '##.##.####' : undefined"
+      inputmode="numeric"
+      autocomplete="off"
+      aria-haspopup="dialog"
+      :aria-expanded="isOpen"
+      :aria-controls="isOpen ? dialogId : undefined"
+      @focus="onFocus"
+      @keydown="onInputKeydown"
+      @clear="onClear"
+    >
+      <!-- Иконка — настоящая кнопка: открыть/закрыть, не трогая курсор в поле.
+           mousedown гасим, чтобы AInputV2 не перевёл фокус в инпут раньше клика.
+           Без hover-состояния: выглядит как обычная иконка поля, а не как ещё один контрол. -->
+      <template #endButton="{ iconOffsetClass }">
+        <button
+          type="button"
+          tabindex="-1"
+          class="flex shrink-0 items-center justify-center text-icon-disabled disabled:pointer-events-none"
+          :class="iconOffsetClass"
+          :disabled="disabled"
+          :aria-label="t('calendar.open')"
+          @mousedown.prevent.stop
+          @click.stop="onToggleClick"
+        >
+          <a-icon-calendar class="size-4" />
+        </button>
+      </template>
+    </a-input-v2>
+
+    <teleport to="body">
+      <transition
+        enter-active-class="date-picker-v2__enter-active"
+        enter-from-class="date-picker-v2__enter-from"
+        enter-to-class="date-picker-v2__enter-to"
+        leave-active-class="date-picker-v2__leave-active"
+        leave-from-class="date-picker-v2__leave-from"
+        leave-to-class="date-picker-v2__leave-to"
+      >
+        <div
+          v-if="isOpen"
+          :id="dialogId"
+          ref="floatingRef"
+          role="dialog"
+          :aria-label="label || undefined"
+          class="date-picker-v2__dropdown z-10001 shadow-lg shadow-surface-dark/10 dark:shadow-surface-dark/30"
+          :style="{
+            position: strategy,
+            left: x != null ? `${x}px` : '',
+            top: y != null ? `${y}px` : '',
+            transformOrigin,
+          }"
+          @keydown="onDropdownKeydown"
+          @pointerdown="interaction = 'pointer'"
+          @focusout="onFocusOut"
+        >
+          <a-calendar-v2
+            ref="calendarRef"
+            v-model="model"
+            :mode="mode"
+            :precision="precision"
+            :locale="locale"
+            :min="min"
+            :max="max"
+            :disabled-dates="disabledDates"
+            :first-day-of-week="firstDayOfWeek"
+            :months="months"
+            :presets="presets"
+            :week-numbers="weekNumbers"
+            :show-time="showTime"
+            :minute-step="minuteStep"
+            :show-footer="showFooter"
+            :size="size"
+            :highlight-weekends="highlightWeekends"
+            @change="emit('change', $event)"
+            @complete="onComplete"
+            @clear="emit('clear')"
+          >
+            <template v-if="$slots.day" #day="slotProps">
+              <slot name="day" v-bind="slotProps" />
+            </template>
+            <template v-if="$slots.footer || showFooter" #footer="{ clear }">
+              <slot
+                name="footer"
+                :close="close"
+                :clear="clear"
+              >
+                <button
+                  v-if="showClearInFooter"
+                  type="button"
+                  class="rounded-md px-2 py-1 text-body-md text-quaternary outline-hidden transition-colors hover:bg-action-secondary-hover hover:text-primary focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--border-color-focus)"
+                  @click="clear"
+                >
+                  {{ t('calendar.clear') }}
+                </button>
+                <button
+                  v-if="needsDone"
+                  type="button"
+                  class="ml-auto rounded-md px-3 py-1 text-body-md-medium text-brand outline-hidden transition-colors hover:bg-brand-subtle focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--border-color-focus)"
+                  @click="closeAndRestoreFocus"
+                >
+                  {{ t('calendar.done') }}
+                </button>
+              </slot>
+            </template>
+          </a-calendar-v2>
+        </div>
+      </transition>
+    </teleport>
+  </div>
+</template>
+
+<style>
+/* Не scoped: поповер телепортирован в body. Кривые и тайминги — как у
+   ADropdownV2/ATooltipV2, чтобы все выпадашки ДС двигались одинаково. */
+.date-picker-v2__enter-active {
+  transition:
+    opacity 200ms ease,
+    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.date-picker-v2__leave-active {
+  pointer-events: none;
+  transition:
+    opacity 140ms ease,
+    transform 160ms cubic-bezier(0.4, 0, 1, 1);
+}
+
+.date-picker-v2__enter-from,
+.date-picker-v2__leave-to {
+  opacity: 0;
+  transform: translateY(-8px) scale(0.96);
+}
+
+.date-picker-v2__enter-to,
+.date-picker-v2__leave-from {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .date-picker-v2__enter-active,
+  .date-picker-v2__leave-active {
+    transition: opacity 120ms ease;
+  }
+
+  .date-picker-v2__enter-from,
+  .date-picker-v2__leave-to {
+    transform: none;
+  }
+}
+</style>

package/components/elements/calendar-v2/README.md

@@ -0,0 +1,127 @@
+# Календарь v2
+
+Два компонента поверх одной сетки, без сторонних date-библиотек: даты — нативный
+`Date`, названия месяцев и дней недели — `Intl.DateTimeFormat` (локаль берётся из
+i18n приложения, можно переопределить пропом `locale`).
+
+| Компонент | Что это | Когда брать |
+| --- | --- | --- |
+| `<a-calendar-v2>` | Сама сетка: дни / месяцы / годы, период, набор дат, пресеты, время. Рендерится инлайн, там где стоит. | Календарь как часть страницы или своей выпадашки; дашборды, фильтры с постоянно видимым календарём. |
+| `<a-date-picker-v2>` | Поле `<a-input-v2>` + поповер с `<a-calendar-v2>` внутри. Позиционирование — `@floating-ui/vue` (`flip`/`shift`/`autoUpdate`), поповер телепортирован в `body`. | Дата в форме. Это то, что нужно в 95 % случаев. |
+
+Старый `<a-calendar>` (`components/elements/calendar/ACalendar.vue`) — обёртка над
+`v-calendar` из модуля `@samk-dev/nuxt-vcalendar` с его собственным поповером на
+Popper. В новом коде не использовать.
+
+## Быстрый старт
+
+```vue
+<a-date-picker-v2 v-model="date" label="Дата выдачи" :max="new Date()" required />
+
+<a-date-picker-v2
+  v-model="period"
+  mode="range"
+  :months="2"
+  :presets="getRangePresets()"
+  label="Период"
+/>
+
+<a-date-picker-v2 v-model="month" precision="month" label="Месяц отчёта" />
+
+<a-calendar-v2 v-model="date" highlight-weekends />
+```
+
+```ts
+import type { CalendarModelValue, DateRange } from '#adata-ui/components/elements/calendar-v2/types'
+import { toISODate } from '#adata-ui/components/elements/calendar-v2/date-utils'
+import { getRangePresets } from '#adata-ui/components/elements/calendar-v2/presets'
+```
+
+## Значение (`v-model`)
+
+Тип зависит от `mode`:
+
+| `mode` | Тип модели | Пустое значение |
+| --- | --- | --- |
+| `single` (по умолчанию) | `Date \| null` | `null` |
+| `range` | `{ start: Date \| null, end: Date \| null }` | `{ start: null, end: null }` |
+| `multiple` | `Date[]` | `[]` |
+
+Даты — локальная полночь (`00:00` в зоне пользователя). В API отдавать через
+`toISODate(date)` → `'ГГГГ-ММ-ДД'`, а не `toISOString()`: последний сдвигает
+дату на сутки для зон восточнее Гринвича.
+
+В `range` после первого клика модель получает `{ start, end: null }` — форма
+должна считать такое значение незавершённым.
+
+## Пропсы
+
+Общие для обоих компонентов — интерфейс `CalendarBaseProps` в `types.ts`
+(`mode`, `precision`, `min`/`max`, `disabledDates`, `firstDayOfWeek`, `months`,
+`presets`, `weekNumbers`, `showTime`/`minuteStep`, `size`, `highlightWeekends`,
+`locale`). Новый проп сетки добавляется туда один раз и появляется у обоих;
+в шаблоне пикера его нужно пробросить в `<a-calendar-v2>`.
+
+Только у пикера: всё про поле (`label`, `placeholder`, `required`, `disabled`,
+`clearable`, `error`, `variant`), `closeOnSelect`, `dropdownStrategy`
+(`fixed`, если поле внутри контейнера с `overflow`/`transform`), `separator`,
+`displayFormat`.
+
+Только у календаря: `showFooter` — подвал с «Очистить».
+
+## Поведение пикера
+
+- **Ручной ввод** доступен только для `single` + `precision="day"` без времени:
+  маска `дд.мм.гггг`, модель обновляется, когда набрана существующая дата,
+  календарь при этом перематывается к ней. В остальных режимах поле readonly.
+- **Открытие**: клик по полю или иконке, фокус с клавиатуры (Tab), `ArrowDown`,
+  `Enter`. Фокус от клика поповер сам не открывает — это делает click, иначе
+  readonly-поле открывалось бы и сразу закрывалось.
+- **Закрытие**: завершённый выбор (если `closeOnSelect`), `Escape`, клик мимо,
+  уход фокуса за пределы поля и поповера (Tab), «Готово» в подвале.
+  Фокус возвращается в поле только если работали с клавиатуры — после выбора
+  мышью на телефоне это подняло бы клавиатуру.
+- **Подвал**: «Очистить» показывается, когда крестика в поле нет (readonly-режимы);
+  «Готово» — когда у выбора нет естественного конца (`showTime`, `multiple`,
+  `closeOnSelect=false`). Свой подвал — слот `footer` с `{ close, clear }`.
+- **Анимация**: раскрытие из угла, которым поповер прилегает к полю
+  (`transformOrigin` по фактическому placement от floating-ui); внутри — сдвиг
+  при перелистывании и zoom при подъёме/спуске между днями, месяцами и годами.
+  `prefers-reduced-motion` — только opacity.
+
+## Клавиатура в сетке
+
+| Клавиши | Действие |
+| --- | --- |
+| `←` `→` `↑` `↓` | По дням (±1, ±7); по месяцам/годам (±1, ±3), за краем — соседняя страница |
+| `Home` / `End` | Начало / конец недели |
+| `PageUp` / `PageDown` | ±месяц, с `Shift` — ±год |
+| `Enter` / `Space` | Выбрать |
+| Заголовок (`Enter`) | На уровень выше: дни → месяцы → годы |
+| `Escape` | Закрыть поповер |
+
+Tab-стопов внутри сетки один (roving tabindex): выбранная дата, иначе сегодня.
+
+## Слоты
+
+- `day="{ day: CalendarDayCell }"` — своя ячейка дня (метки событий, цены).
+- `footer="{ close, clear }"` (пикер) / `footer="{ clear }"` (календарь).
+
+## Стили
+
+Только семантические токены ДС: `bg-main`/`border-default` у коробки,
+`bg-action-primary` + `text-action-primary-fg` у выбранного, `bg-brand-subtle` +
+`text-brand` у периода и активного пресета, `hover:bg-action-secondary-hover`,
+рамка «сегодня» — `ring-(--border-color-brand)`, фокус —
+`outline-(--border-color-focus)`. Коробка панелей держится по размеру панели дней
+(самой крупной): её меряет `ResizeObserver` (`daysPanelSize`), поэтому при
+переходе к месяцам и годам выпадашка не прыгает и с двумя месяцами, и с номерами
+недель; до первого замера работает расчёт из `CELL_PX` для одного месяца.
+
+## Файлы
+
+- `ACalendarV2.vue` — сетка.
+- `ADatePickerV2.vue` — поле + поповер.
+- `types.ts` — типы модели, ячеек, `CalendarBaseProps`.
+- `date-utils.ts` — чистые date-хелперы (без Vue, покрываются тестами).
+- `presets.ts` — `getRangePresets()`: сегодня, вчера, 7/30 дней, месяц, прошлый месяц, год.