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

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

@@ -0,0 +1,1150 @@
+<script lang="ts" setup>
+import type {
+  CalendarBaseProps,
+  CalendarDayCell,
+  CalendarModelValue,
+  CalendarPanel,
+  CalendarPreset,
+  CalendarSize,
+  CalendarUnitCell,
+  DateRange,
+} from './types'
+import { useResizeObserver } from '@vueuse/core'
+import {
+  addDays,
+  addMonths,
+  addYears,
+  buildMonthMatrix,
+  clampDate,
+  compareDays,
+  daysInMonth,
+  endOfMonth,
+  endOfYear,
+  formatDate,
+  getISOWeek,
+  getMonthNames,
+  getWeekdayNames,
+  isDateDisabled,
+  isSameDay,
+  isSameMonth,
+  isWithinDays,
+  normalizeRange,
+  startOfDay,
+  startOfMonth,
+  startOfYear,
+  startOfYearPage,
+  toDate,
+} from './date-utils'
+
+defineOptions({ name: 'ACalendarV2' })
+
+const props = withDefaults(defineProps<Props>(), {
+  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,
+  showFooter: false,
+})
+
+const emit = defineEmits<{
+  (e: 'change', value: CalendarModelValue): void
+  (e: 'panelChange', value: Date): void
+  /** Пользователь завершил выбор: клик по дате в single, второй клик в range. */
+  (e: 'complete', value: CalendarModelValue): void
+  (e: 'clear'): void
+}>()
+
+interface Props extends CalendarBaseProps {
+  /** Подвал с «Очистить». Слот footer показывается и без этого флага. */
+  showFooter?: boolean
+}
+
+const model = defineModel<CalendarModelValue>({ default: null })
+
+const { t, te, locale: appLocale } = useI18n()
+
+const YEAR_PAGE_SIZE = 12
+/** Сетки месяцев и годов — по три в ряд; от этого зависит шаг стрелок ↑/↓. */
+const UNIT_COLUMNS = 3
+
+const resolvedLocale = computed(() => props.locale ?? String(appLocale.value ?? 'ru'))
+const minDate = computed(() => toDate(props.min))
+const maxDate = computed(() => toDate(props.max))
+const isRange = computed(() => props.mode === 'range')
+const isMultiple = computed(() => props.mode === 'multiple')
+const monthCount = computed(() => Math.max(1, Math.min(props.months, 2)))
+
+/* ---------------------------------------------------------------- значение */
+
+/** Выбранные даты плоским списком — на нём строится подсветка ячеек. */
+const selectedDates = computed<Date[]>(() => {
+  const value = model.value
+  if (!value) return []
+  if (Array.isArray(value)) return value.filter(Boolean)
+  if (value instanceof Date) return [value]
+  return [value.start, value.end].filter(Boolean) as Date[]
+})
+
+const selectedRange = computed<DateRange>(() => {
+  const value = model.value
+  if (value && !Array.isArray(value) && !(value instanceof Date)) return value
+  return { start: null, end: null }
+})
+
+/* Первый клик периода: пока он есть, сетка подсвечивает «резинку» до курсора. */
+const rangeAnchor = ref<Date | null>(null)
+const hoverDate = ref<Date | null>(null)
+
+/** Период, который надо подсветить: либо выбранный, либо тянущийся за курсором. */
+const previewRange = computed<DateRange>(() => {
+  if (rangeAnchor.value) {
+    return normalizeRange({ start: rangeAnchor.value, end: hoverDate.value ?? rangeAnchor.value })
+  }
+  return normalizeRange(selectedRange.value)
+})
+
+/* ------------------------------------------------------------- навигация */
+
+function initialFocusDate(): Date {
+  const first = selectedDates.value[0]
+  return startOfDay(first ? new Date(first) : clampDate(new Date(), minDate.value, maxDate.value))
+}
+
+const panelDate = ref<Date>(startOfMonth(initialFocusDate()))
+
+const basePanel = computed<CalendarPanel>(() => {
+  if (props.precision === 'year') return 'years'
+  if (props.precision === 'month') return 'months'
+  return 'days'
+})
+
+const panel = ref<CalendarPanel>(basePanel.value)
+const yearPageStart = ref(startOfYearPage(panelDate.value.getFullYear(), YEAR_PAGE_SIZE))
+
+/* Клавиатурный фокус — отдельно от выбора: roving tabindex по сетке.
+   Стартует с выбранной даты либо с сегодня, чтобы Tab сразу попадал в нужное место. */
+const focusedDate = ref<Date>(initialFocusDate())
+/** Текущая (keyed) панель — старая, уходящая в анимации, сюда уже не попадает. */
+const panelRef = ref<HTMLElement | null>(null)
+/** Контейнер сетки дней — по нему меряется коробка панелей (см. panelBoxStyle). */
+const daysGridRef = ref<HTMLElement | null>(null)
+const daysPanelSize = ref<{ width: number, height: number } | null>(null)
+
+/* Панель дней — самая крупная из трёх; пока она в DOM, запоминаем её размер,
+   а когда уходит (месяцы/годы), коробка держится по этому замеру. */
+useResizeObserver(daysGridRef, (entries) => {
+  const target = entries[0]?.target as HTMLElement | undefined
+  if (!target) return
+  daysPanelSize.value = { width: target.offsetWidth, height: target.offsetHeight }
+})
+
+/**
+ * Анимация смены панели. Перелистывание — сдвиг в сторону движения,
+ * подъём к месяцам/годам — «отдаление», спуск к дням — «приближение».
+ * Каждая мутация навигации выставляет motion сама (см. setPanel*), последняя
+ * в тике выигрывает — так спуск «год → месяц → дни» даёт один zoom-in.
+ */
+type PanelMotion = 'slide-left' | 'slide-right' | 'zoom-in' | 'zoom-out'
+const motion = ref<PanelMotion>('zoom-in')
+
+const PANEL_DEPTH: Record<CalendarPanel, number> = { days: 0, months: 1, years: 2 }
+
+function setPanel(next: CalendarPanel) {
+  if (next === panel.value) return
+  motion.value = PANEL_DEPTH[next] > PANEL_DEPTH[panel.value] ? 'zoom-out' : 'zoom-in'
+  panel.value = next
+}
+
+function setPanelDate(date: Date) {
+  const next = startOfMonth(date)
+  if (isSameMonth(next, panelDate.value)) return
+  motion.value = next > panelDate.value ? 'slide-left' : 'slide-right'
+  panelDate.value = next
+}
+
+function setYearPage(start: number) {
+  if (start === yearPageStart.value) return
+  motion.value = start > yearPageStart.value ? 'slide-left' : 'slide-right'
+  yearPageStart.value = start
+}
+
+/** Ключ анимируемой панели: меняется ровно тогда, когда должна проиграться анимация. */
+const panelKey = computed(() => {
+  if (panel.value === 'years') return `years:${yearPageStart.value}`
+  if (panel.value === 'months') return `months:${panelDate.value.getFullYear()}`
+  return `days:${panelDate.value.getFullYear()}-${panelDate.value.getMonth()}`
+})
+
+watch(basePanel, setPanel)
+
+/* ------------------------------------------------------------------ сетка */
+
+const weekdayNames = computed(() => getWeekdayNames(resolvedLocale.value, props.firstDayOfWeek))
+const monthNames = computed(() => getMonthNames(resolvedLocale.value))
+const shortMonthNames = computed(() => getMonthNames(resolvedLocale.value, 'short'))
+
+const visibleMonths = computed(() =>
+  Array.from({ length: monthCount.value }, (_, index) => addMonths(panelDate.value, index)))
+
+/* Перелистывание стрелками не должно терять клавиатурный фокус за кадром:
+   иначе в новом месяце ни одна ячейка не tabbable и Tab пролетает сетку. */
+watch(panelDate, (value) => {
+  emit('panelChange', value)
+
+  if (visibleMonths.value.some(month => isSameMonth(focusedDate.value, month))) return
+
+  const day = Math.min(focusedDate.value.getDate(), daysInMonth(value.getFullYear(), value.getMonth()))
+  focusedDate.value = clampDate(new Date(value.getFullYear(), value.getMonth(), day), minDate.value, maxDate.value)
+})
+
+/* Внешняя смена значения (пресет, v-model снаружи) перематывает панель.
+   Клик по дате, которая и так видна, панель не двигает — иначе при двух
+   месяцах выбор во втором из них перепрыгивал бы вид. */
+watch(model, () => {
+  const first = selectedDates.value[0]
+  if (!first) return
+  if (visibleMonths.value.some(month => isSameMonth(first, month))) return
+
+  setPanelDate(first)
+  yearPageStart.value = startOfYearPage(first.getFullYear(), YEAR_PAGE_SIZE)
+  focusedDate.value = startOfDay(first)
+})
+
+function dayDisabled(date: Date): boolean {
+  return isDateDisabled(date, {
+    min: minDate.value,
+    max: maxDate.value,
+    disabledDates: props.disabledDates,
+  })
+}
+
+function buildDayCell(date: Date, month: Date): CalendarDayCell {
+  const range = previewRange.value
+  const isRangeMode = isRange.value
+  const isStart = isRangeMode && isSameDay(date, range.start)
+  const isEnd = isRangeMode && isSameDay(date, range.end)
+
+  return {
+    date,
+    key: `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`,
+    label: date.getDate(),
+    isOutside: !isSameMonth(date, month),
+    isToday: isSameDay(date, new Date()),
+    isSelected: isRangeMode
+      ? isStart || isEnd
+      : selectedDates.value.some(item => isSameDay(item, date)),
+    isRangeStart: isStart,
+    isRangeEnd: isEnd,
+    isInRange: isRangeMode && !isStart && !isEnd && isWithinDays(date, range.start, range.end),
+    isDisabled: dayDisabled(date),
+    isWeekend: props.highlightWeekends && (date.getDay() === 0 || date.getDay() === 6),
+    isFocused: isSameDay(date, focusedDate.value),
+  }
+}
+
+const monthGrids = computed(() => visibleMonths.value.map((month) => {
+  const weeks = buildMonthMatrix(month.getFullYear(), month.getMonth(), props.firstDayOfWeek)
+  return {
+    month,
+    caption: `${monthNames.value[month.getMonth()]} ${month.getFullYear()}`,
+    weeks: weeks.map(week => ({
+      key: week[0].toISOString(),
+      weekNumber: getISOWeek(week[0]),
+      days: week.map(date => buildDayCell(date, month)),
+    })),
+  }
+}))
+
+const monthCells = computed<CalendarUnitCell[]>(() => monthNames.value.map((label, month) => {
+  const date = new Date(panelDate.value.getFullYear(), month, 1)
+  const disabled = (minDate.value && compareDays(endOfMonth(date), minDate.value) < 0)
+    || (maxDate.value && compareDays(date, maxDate.value) > 0)
+
+  return {
+    value: month,
+    label,
+    isSelected: selectedDates.value.some(item => isSameMonth(item, date)),
+    isCurrent: isSameMonth(date, new Date()),
+    isDisabled: Boolean(disabled),
+    isInRange: props.precision === 'month'
+      && isWithinDays(date, previewRange.value.start, previewRange.value.end),
+  }
+}))
+
+const yearCells = computed<CalendarUnitCell[]>(() =>
+  Array.from({ length: YEAR_PAGE_SIZE }, (_, index) => {
+    const year = yearPageStart.value + index
+    const date = new Date(year, 0, 1)
+    const disabled = (minDate.value && compareDays(endOfYear(date), minDate.value) < 0)
+      || (maxDate.value && compareDays(date, maxDate.value) > 0)
+
+    return {
+      value: year,
+      label: String(year),
+      isSelected: selectedDates.value.some(item => item.getFullYear() === year),
+      isCurrent: year === new Date().getFullYear(),
+      isDisabled: Boolean(disabled),
+      isInRange: props.precision === 'year'
+        && isWithinDays(date, previewRange.value.start, previewRange.value.end),
+    }
+  }))
+
+/** Индекс единственной tabbable-ячейки сетки месяцев/годов: выбранная → текущая → первая доступная. */
+function unitTabStop(cells: CalendarUnitCell[]): number {
+  const selected = cells.findIndex(cell => cell.isSelected && !cell.isDisabled)
+  if (selected >= 0) return selected
+  const current = cells.findIndex(cell => cell.isCurrent && !cell.isDisabled)
+  if (current >= 0) return current
+  return Math.max(0, cells.findIndex(cell => !cell.isDisabled))
+}
+
+const monthTabStop = computed(() => unitTabStop(monthCells.value))
+const yearTabStop = computed(() => unitTabStop(yearCells.value))
+
+const headerLabel = computed(() => {
+  if (panel.value === 'years') {
+    return `${yearPageStart.value} — ${yearPageStart.value + YEAR_PAGE_SIZE - 1}`
+  }
+  if (panel.value === 'months') return String(panelDate.value.getFullYear())
+  return monthGrids.value[0]?.caption ?? ''
+})
+
+/**
+ * Самые широкие варианты заголовка: «<месяц> <год>» для панели дней и диапазон
+ * для панели годов. Нужны как распорки — иначе ширина выпадашки прыгает и при
+ * перелистывании месяцев («май» против «сентября»), и при смене панели.
+ * Ширину меряет браузер, так что локаль значения не имеет.
+ */
+const headerWidthProbes = computed(() => [
+  ...monthNames.value.map(name => `${name} 0000`),
+  `0000 — 0000`,
+])
+
+/* ------------------------------------------------------------ перелистывание */
+
+function shiftPanel(direction: 1 | -1) {
+  if (panel.value === 'years') {
+    setYearPage(yearPageStart.value + direction * YEAR_PAGE_SIZE)
+    return
+  }
+  if (panel.value === 'months') {
+    setPanelDate(addYears(panelDate.value, direction))
+    return
+  }
+  setPanelDate(addMonths(panelDate.value, direction))
+}
+
+function shiftPanelYear(direction: 1 | -1) {
+  if (panel.value === 'years') {
+    setYearPage(yearPageStart.value + direction * YEAR_PAGE_SIZE)
+    return
+  }
+  setPanelDate(addYears(panelDate.value, direction))
+}
+
+/** Заголовок ведёт на уровень выше: дни → месяцы → годы. */
+function drillUp() {
+  if (panel.value === 'days') {
+    setPanel('months')
+  }
+  else if (panel.value === 'months') {
+    setYearPage(startOfYearPage(panelDate.value.getFullYear(), YEAR_PAGE_SIZE))
+    setPanel('years')
+  }
+  focusPanel()
+}
+
+/* ------------------------------------------------------------------ выбор */
+
+/** Переносит время уже выбранного значения на новую дату. */
+function withTimeOf(date: Date, source: Date | null): Date {
+  const next = startOfDay(date)
+  if (props.showTime && source) {
+    next.setHours(source.getHours(), source.getMinutes(), 0, 0)
+  }
+  return next
+}
+
+function commit(value: CalendarModelValue, complete: boolean) {
+  model.value = value
+  emit('change', value)
+  if (complete) emit('complete', value)
+}
+
+function selectDay(cell: CalendarDayCell) {
+  if (cell.isDisabled) return
+
+  focusedDate.value = new Date(cell.date)
+
+  if (isMultiple.value) {
+    const current = Array.isArray(model.value) ? model.value : []
+    const exists = current.some(item => isSameDay(item, cell.date))
+    const next = exists
+      ? current.filter(item => !isSameDay(item, cell.date))
+      : [...current, withTimeOf(cell.date, null)].sort((a, b) => compareDays(a, b))
+    commit(next, false)
+    return
+  }
+
+  if (isRange.value) {
+    /* Первый клик ставит якорь, второй закрывает период. Клик по уже готовому
+       периоду начинает новый — иначе непонятно, какой из концов двигать. */
+    if (!rangeAnchor.value) {
+      rangeAnchor.value = withTimeOf(cell.date, selectedRange.value.start)
+      commit({ start: rangeAnchor.value, end: null }, false)
+      return
+    }
+
+    const range = normalizeRange({
+      start: rangeAnchor.value,
+      end: withTimeOf(cell.date, selectedRange.value.end),
+    })
+    rangeAnchor.value = null
+    hoverDate.value = null
+    commit(range, true)
+    return
+  }
+
+  commit(withTimeOf(cell.date, model.value instanceof Date ? model.value : null), true)
+}
+
+function selectMonth(cell: CalendarUnitCell) {
+  if (cell.isDisabled) return
+
+  setPanelDate(new Date(panelDate.value.getFullYear(), cell.value, 1))
+
+  /* Точность «месяц» — выбор закончен; иначе просто спускаемся к дням. */
+  if (props.precision === 'month') {
+    selectDay(buildDayCell(startOfMonth(panelDate.value), panelDate.value))
+    return
+  }
+
+  setPanel('days')
+  focusedDate.value = clampDate(startOfMonth(panelDate.value), minDate.value, maxDate.value)
+  focusPanel()
+}
+
+function selectYear(cell: CalendarUnitCell) {
+  if (cell.isDisabled) return
+
+  setPanelDate(new Date(cell.value, panelDate.value.getMonth(), 1))
+
+  if (props.precision === 'year') {
+    selectDay(buildDayCell(startOfYear(panelDate.value), panelDate.value))
+    return
+  }
+
+  setPanel('months')
+  focusPanel()
+}
+
+function onDayHover(cell: CalendarDayCell) {
+  if (!isRange.value || cell.isDisabled) return
+  hoverDate.value = cell.date
+}
+
+function onGridLeave() {
+  hoverDate.value = null
+}
+
+/* -------------------------------------------------------------- клавиатура */
+
+/**
+ * Переводит фокус на tabbable-ячейку текущей панели (после перерисовки).
+ *  preventScroll обязателен: поповер может торчать за край окна, и focus()
+ *  без него прокручивал бы страницу при каждой смене панели.
+ */
+function focusPanel() {
+  nextTick(() => {
+    panelRef.value?.querySelector<HTMLElement>('[tabindex="0"]')?.focus({ preventScroll: true })
+  })
+}
+
+function moveFocus(days: number) {
+  const next = clampDate(addDays(focusedDate.value, days), minDate.value, maxDate.value)
+  focusedDate.value = next
+
+  if (!visibleMonths.value.some(month => isSameMonth(next, month))) {
+    setPanelDate(next)
+  }
+
+  focusPanel()
+}
+
+function onDaysKeydown(event: KeyboardEvent) {
+  const step: Record<string, number> = {
+    ArrowLeft: -1,
+    ArrowRight: 1,
+    ArrowUp: -7,
+    ArrowDown: 7,
+  }
+
+  if (event.key in step) {
+    event.preventDefault()
+    moveFocus(step[event.key])
+    return
+  }
+
+  if (event.key === 'Home' || event.key === 'End') {
+    event.preventDefault()
+    const offset = (focusedDate.value.getDay() - props.firstDayOfWeek + 7) % 7
+    moveFocus(event.key === 'Home' ? -offset : 6 - offset)
+    return
+  }
+
+  if (event.key === 'PageUp' || event.key === 'PageDown') {
+    event.preventDefault()
+    const direction = event.key === 'PageUp' ? -1 : 1
+    const next = event.shiftKey
+      ? addYears(focusedDate.value, direction)
+      : addMonths(focusedDate.value, direction)
+    focusedDate.value = clampDate(next, minDate.value, maxDate.value)
+    setPanelDate(focusedDate.value)
+    focusPanel()
+    return
+  }
+
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    const month = visibleMonths.value.find(item => isSameMonth(item, focusedDate.value)) ?? panelDate.value
+    selectDay(buildDayCell(focusedDate.value, month))
+  }
+}
+
+/* Стрелки по сетке месяцев/годов. За краем сетки — соседняя страница
+   (следующий год / следующая дюжина лет), фокус переносится на ту же позицию
+   с другого края. Enter/Space срабатывают как обычный клик по кнопке. */
+function onUnitKeydown(event: KeyboardEvent) {
+  const step: Record<string, number> = {
+    ArrowLeft: -1,
+    ArrowRight: 1,
+    ArrowUp: -UNIT_COLUMNS,
+    ArrowDown: UNIT_COLUMNS,
+  }
+  if (!(event.key in step)) return
+
+  event.preventDefault()
+
+  const buttons = unitButtons()
+  const index = Math.max(0, buttons.indexOf(document.activeElement as HTMLButtonElement))
+  const next = index + step[event.key]
+
+  if (next < 0 || next >= buttons.length) {
+    shiftPanel(next < 0 ? -1 : 1)
+    const wrapped = (next + buttons.length) % buttons.length
+    nextTick(() => unitButtons()[wrapped]?.focus({ preventScroll: true }))
+    return
+  }
+
+  buttons[next]?.focus({ preventScroll: true })
+}
+
+function unitButtons(): HTMLButtonElement[] {
+  return Array.from(panelRef.value?.querySelectorAll<HTMLButtonElement>('[data-calendar-unit]') ?? [])
+}
+
+/* ----------------------------------------------------------------- время */
+
+const showTimeControls = computed(() => props.showTime && !isMultiple.value)
+
+const hourOptions = Array.from({ length: 24 }, (_, hour) => String(hour).padStart(2, '0'))
+const minuteOptions = computed(() => {
+  const step = Math.max(1, Math.min(props.minuteStep, 60))
+  return Array.from({ length: Math.ceil(60 / step) }, (_, index) => String(index * step).padStart(2, '0'))
+})
+
+/** Контролы времени для single — один, для range — по одному на каждый конец. */
+const timeTargets = computed<{ key: 'value' | 'start' | 'end', label: string, date: Date | null }[]>(() => {
+  if (!showTimeControls.value) return []
+
+  if (isRange.value) {
+    return [
+      { key: 'start', label: t('calendar.from'), date: selectedRange.value.start },
+      { key: 'end', label: t('calendar.to'), date: selectedRange.value.end },
+    ]
+  }
+
+  return [{ key: 'value', label: t('calendar.time'), date: model.value instanceof Date ? model.value : null }]
+})
+
+function setTime(target: 'value' | 'start' | 'end', unit: 'hours' | 'minutes', raw: string) {
+  const amount = Number(raw)
+
+  if (target === 'value') {
+    if (!(model.value instanceof Date)) return
+    const next = new Date(model.value)
+    if (unit === 'hours') next.setHours(amount)
+    else next.setMinutes(amount)
+    commit(next, false)
+    return
+  }
+
+  const range = selectedRange.value
+  const source = range[target]
+  if (!source) return
+
+  const next = new Date(source)
+  if (unit === 'hours') next.setHours(amount)
+  else next.setMinutes(amount)
+
+  commit({ ...range, [target]: next }, false)
+}
+
+/* ------------------------------------------------------------- действия */
+
+function applyPreset(preset: CalendarPreset) {
+  rangeAnchor.value = null
+  hoverDate.value = null
+  commit(preset.value(), true)
+}
+
+function isPresetActive(preset: CalendarPreset): boolean {
+  const value = preset.value()
+  if (value instanceof Date) return isSameDay(value, selectedDates.value[0] ?? null)
+  if (Array.isArray(value)) return false
+
+  const range = selectedRange.value
+  return isSameDay(value.start, range.start) && isSameDay(value.end, range.end)
+}
+
+function clear() {
+  rangeAnchor.value = null
+  hoverDate.value = null
+  const empty: CalendarModelValue = isRange.value
+    ? { start: null, end: null }
+    : isMultiple.value ? [] : null
+  commit(empty, false)
+  emit('clear')
+}
+
+function localize(label: string) {
+  return te(label) ? t(label) : label
+}
+
+/* ------------------------------------------------------------------ стили */
+
+/* Видимый фокус только с клавиатуры. outline, а не ring: ring занят рамкой
+   «сегодня», а на выбранной (залитой brand) ячейке ring того же цвета не виден. */
+const FOCUS_RING = 'outline-hidden focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--border-color-focus)'
+
+const NAV_BUTTON_CLASS = `flex size-8 shrink-0 items-center justify-center rounded-md text-icon-default transition hover:bg-action-secondary-hover hover:text-icon-strong ${FOCUS_RING}`
+
+const FOOTER_BUTTON_CLASS = `rounded-md px-2 py-1 text-body-md transition-colors hover:bg-action-secondary-hover ${FOCUS_RING}`
+
+const TIME_SELECT_CLASS = `rounded-md border border-default bg-canvas px-2 py-1 text-body-md text-primary disabled:text-disabled ${FOCUS_RING}`
+
+const CELL_SIZE: Record<CalendarSize, string> = {
+  sm: 'size-8 text-body-sm',
+  md: 'size-9 text-body-md',
+}
+
+/** Сторона ячейки дня в px — должна совпадать с size-* из CELL_SIZE. */
+const CELL_PX: Record<CalendarSize, number> = {
+  sm: 32,
+  md: 36,
+}
+
+/**
+ * Панели дней, месяцев и годов имеют разную натуральную величину, из-за чего
+ * выпадашка прыгала при переключении (289×375 → 218×279 → 199×279).
+ * Держим коробку по самой крупной — панели дней. Её размер берём из живого
+ * замера (daysPanelSize): так учитываются два месяца, подписи месяцев, колонка
+ * номеров недель и size. До первого замера (SSR, первый кадр) — расчёт для
+ * одного месяца: 7 колонок в ширину и 7 рядов в высоту (строка дней недели +
+ * всегда 6 недель из buildMonthMatrix).
+ */
+const panelBoxStyle = computed(() => {
+  const measured = daysPanelSize.value
+  if (measured) return { minWidth: `${measured.width}px`, minHeight: `${measured.height}px` }
+
+  if (monthCount.value > 1 || props.weekNumbers) return undefined
+
+  const side = `${CELL_PX[props.size] * 7}px`
+  return { minWidth: side, minHeight: side }
+})
+
+function dayClass(cell: CalendarDayCell): string[] {
+  const classes = [
+    'relative flex items-center justify-center transition-colors duration-100',
+    CELL_SIZE[props.size],
+    FOCUS_RING,
+  ]
+
+  if (cell.isDisabled) {
+    classes.push('cursor-not-allowed text-icon-disabled')
+  }
+  else if (cell.isSelected) {
+    classes.push('bg-action-primary font-semibold text-action-primary-fg')
+  }
+  else if (cell.isInRange) {
+    classes.push('bg-brand-subtle text-brand')
+  }
+  else if (cell.isOutside) {
+    classes.push('text-disabled hover:bg-action-secondary-hover')
+  }
+  else if (cell.isWeekend) {
+    classes.push('text-quaternary hover:bg-action-secondary-hover')
+  }
+  else {
+    classes.push('text-primary hover:bg-action-secondary-hover')
+  }
+
+  /* Внутри периода скругляются только его концы — середина сливается в полосу. */
+  if (cell.isInRange) classes.push('rounded-none')
+  else if (cell.isRangeStart && previewRange.value.end) classes.push('rounded-md rounded-r-none')
+  else if (cell.isRangeEnd && previewRange.value.start) classes.push('rounded-md rounded-l-none')
+  else classes.push('rounded-md')
+
+  if (cell.isToday && !cell.isSelected) {
+    classes.push('ring-1 ring-(--border-color-brand) ring-inset')
+  }
+
+  return classes
+}
+
+/* Ячейка месяца/года занимает весь слот сетки 3×4, растянутой на коробку панели
+   дней — так три панели одинаково заполняют пространство и переход между ними
+   не читается как «прыжок» контента. Подсветка при этом на внутренней
+   «таблетке» (unitLabelClass), а не на всём слоте. */
+function unitClass(cell: CalendarUnitCell): string[] {
+  const classes = ['group flex items-center justify-center rounded-md', FOCUS_RING]
+  if (cell.isDisabled) classes.push('cursor-not-allowed')
+  return classes
+}
+
+function unitLabelClass(cell: CalendarUnitCell): string[] {
+  const classes = ['flex h-9 min-w-16 items-center justify-center rounded-md px-3 text-body-md capitalize transition-colors duration-100']
+
+  if (cell.isDisabled) classes.push('text-icon-disabled')
+  else if (cell.isSelected) classes.push('bg-action-primary font-semibold text-action-primary-fg')
+  else if (cell.isInRange) classes.push('bg-brand-subtle text-brand')
+  else classes.push('text-primary group-hover:bg-action-secondary-hover')
+
+  if (cell.isCurrent && !cell.isSelected) classes.push('ring-1 ring-(--border-color-brand) ring-inset')
+
+  return classes
+}
+
+defineExpose({
+  /** Перемотать панель на произвольный месяц — например, из родительской формы. */
+  goToDate(date: Date) {
+    setPanelDate(date)
+    focusedDate.value = startOfDay(date)
+  },
+  /** Перевести клавиатурный фокус в сетку (пикер делает это по ArrowDown из поля). */
+  focus: focusPanel,
+  clear,
+})
+</script>
+
+<template>
+  <div class="calendar-v2 flex flex-col overflow-hidden rounded-lg border border-default bg-main sm:flex-row">
+    <!-- Быстрый выбор -->
+    <div
+      v-if="presets?.length"
+      class="flex shrink-0 gap-1 overflow-x-auto border-default p-2 max-sm:border-b sm:w-40 sm:flex-col sm:overflow-y-auto sm:border-r"
+    >
+      <button
+        v-for="preset in presets"
+        :key="preset.key"
+        type="button"
+        class="shrink-0 rounded-md px-3 py-1.5 text-start text-body-md whitespace-nowrap transition-colors duration-100"
+        :class="[
+          FOCUS_RING,
+          isPresetActive(preset)
+            ? 'bg-brand-subtle font-medium text-brand'
+            : 'text-secondary hover:bg-action-secondary-hover hover:text-primary',
+        ]"
+        :aria-pressed="isPresetActive(preset)"
+        @click="applyPreset(preset)"
+      >
+        {{ localize(preset.label) }}
+      </button>
+    </div>
+
+    <div class="flex min-w-0 flex-col gap-3 p-3">
+      <!-- Шапка: перелистывание и подъём на уровень выше -->
+      <div class="flex items-center gap-1">
+        <button
+          type="button"
+          :class="NAV_BUTTON_CLASS"
+          :aria-label="t('calendar.prevYear')"
+          @click="shiftPanelYear(-1)"
+        >
+          <a-icon-double-chevron-right class="size-4 rotate-180" />
+        </button>
+        <!-- На панели годов помесячные стрелки не нужны, но убирать их из потока
+             нельзя: шапка сузится и выпадашка снова начнёт прыгать по ширине.
+             Поэтому прячем визуально и отключаем — место остаётся. -->
+        <button
+          type="button"
+          :class="[NAV_BUTTON_CLASS, { 'pointer-events-none opacity-0': panel === 'years' }]"
+          :disabled="panel === 'years'"
+          :aria-label="t('calendar.prevMonth')"
+          @click="shiftPanel(-1)"
+        >
+          <a-icon-chevron-left class="size-4" />
+        </button>
+
+        <!-- Заголовок — кнопка «на уровень выше»: дни → месяцы → годы.
+             Шеврон нужен, чтобы это было видно: без него кликабельность
+             заголовка не читается. -->
+        <button
+          type="button"
+          class="flex min-w-0 flex-1 items-center justify-center gap-1 rounded-md px-2 py-1.5 text-body-md-strong text-primary capitalize transition-colors hover:bg-action-secondary-hover disabled:hover:bg-transparent"
+          :class="FOCUS_RING"
+          :disabled="panel === 'years'"
+          aria-live="polite"
+          @click="drillUp"
+        >
+          <span class="calendar-v2__stack grid min-w-0">
+            <transition name="calendar-v2-fade">
+              <span :key="headerLabel" class="truncate">{{ headerLabel }}</span>
+            </transition>
+            <!-- Распорки не видны и не занимают высоту, но держат ширину ячейки. -->
+            <span
+              v-for="probe in headerWidthProbes"
+              :key="probe"
+              aria-hidden="true"
+              class="invisible h-0 overflow-hidden whitespace-pre"
+            >{{ probe }}</span>
+          </span>
+          <a-icon-chevron-down
+            class="size-4 shrink-0 text-icon-default transition-opacity"
+            :class="{ 'opacity-0': panel === 'years' }"
+          />
+        </button>
+
+        <button
+          type="button"
+          :class="[NAV_BUTTON_CLASS, { 'pointer-events-none opacity-0': panel === 'years' }]"
+          :disabled="panel === 'years'"
+          :aria-label="t('calendar.nextMonth')"
+          @click="shiftPanel(1)"
+        >
+          <a-icon-chevron-right class="size-4" />
+        </button>
+        <button
+          type="button"
+          :class="NAV_BUTTON_CLASS"
+          :aria-label="t('calendar.nextYear')"
+          @click="shiftPanelYear(1)"
+        >
+          <a-icon-double-chevron-right class="size-4" />
+        </button>
+      </div>
+
+      <!-- Панели дней/месяцев/годов в общей коробке (см. panelBoxStyle).
+           grid + одна ячейка (calendar-v2__stack): уходящая и входящая панели
+           лежат друг на друге, пока идёт анимация, и не раздвигают раскладку. -->
+      <div class="calendar-v2__stack grid" :style="panelBoxStyle">
+        <transition :name="`calendar-v2-${motion}`">
+          <div
+            :key="panelKey"
+            ref="panelRef"
+            class="flex flex-col justify-center"
+          >
+            <!-- Сетка дней -->
+            <div
+              v-if="panel === 'days'"
+              ref="daysGridRef"
+              class="flex flex-col gap-4 self-center sm:flex-row"
+              @keydown="onDaysKeydown"
+              @mouseleave="onGridLeave"
+            >
+              <div
+                v-for="grid in monthGrids"
+                :key="grid.caption"
+                class="flex flex-col gap-1"
+              >
+                <div
+                  v-if="monthCount > 1"
+                  class="pb-1 text-center text-body-md-medium text-secondary capitalize"
+                >
+                  {{ grid.caption }}
+                </div>
+
+                <div
+                  role="grid"
+                  :aria-label="grid.caption"
+                  class="flex flex-col"
+                >
+                  <div role="row" class="flex">
+                    <div
+                      v-if="weekNumbers"
+                      class="flex items-center justify-center text-body-sm text-disabled"
+                      :class="CELL_SIZE[size]"
+                    >
+                      #
+                    </div>
+                    <div
+                      v-for="weekday in weekdayNames"
+                      :key="weekday"
+                      role="columnheader"
+                      class="flex items-center justify-center text-body-sm text-quaternary capitalize"
+                      :class="CELL_SIZE[size]"
+                    >
+                      {{ weekday }}
+                    </div>
+                  </div>
+
+                  <div
+                    v-for="week in grid.weeks"
+                    :key="week.key"
+                    role="row"
+                    class="flex"
+                  >
+                    <div
+                      v-if="weekNumbers"
+                      class="flex items-center justify-center text-body-sm text-disabled"
+                      :class="CELL_SIZE[size]"
+                    >
+                      {{ week.weekNumber }}
+                    </div>
+
+                    <button
+                      v-for="day in week.days"
+                      :key="day.key"
+                      type="button"
+                      role="gridcell"
+                      :class="dayClass(day)"
+                      :disabled="day.isDisabled"
+                      :tabindex="day.isFocused ? 0 : -1"
+                      :aria-selected="day.isSelected"
+                      :aria-current="day.isToday ? 'date' : undefined"
+                      :aria-label="formatDate(day.date, resolvedLocale, { dateStyle: 'long' })"
+                      @click="selectDay(day)"
+                      @mouseenter="onDayHover(day)"
+                      @focus="focusedDate = day.date"
+                    >
+                      <slot name="day" :day="day">
+                        {{ day.label }}
+                      </slot>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Сетка месяцев -->
+            <div
+              v-else-if="panel === 'months'"
+              role="grid"
+              :aria-label="headerLabel"
+              class="grid flex-1 grid-cols-3 grid-rows-4 gap-1"
+              @keydown="onUnitKeydown"
+            >
+              <button
+                v-for="(cell, index) in monthCells"
+                :key="cell.value"
+                type="button"
+                role="gridcell"
+                data-calendar-unit
+                :class="unitClass(cell)"
+                :disabled="cell.isDisabled"
+                :tabindex="index === monthTabStop ? 0 : -1"
+                :aria-selected="cell.isSelected"
+                :aria-label="`${cell.label} ${panelDate.getFullYear()}`"
+                @click="selectMonth(cell)"
+              >
+                <span :class="unitLabelClass(cell)">{{ shortMonthNames[cell.value] }}</span>
+              </button>
+            </div>
+
+            <!-- Сетка лет -->
+            <div
+              v-else
+              role="grid"
+              :aria-label="headerLabel"
+              class="grid flex-1 grid-cols-3 grid-rows-4 gap-1"
+              @keydown="onUnitKeydown"
+            >
+              <button
+                v-for="(cell, index) in yearCells"
+                :key="cell.value"
+                type="button"
+                role="gridcell"
+                data-calendar-unit
+                :class="unitClass(cell)"
+                :disabled="cell.isDisabled"
+                :tabindex="index === yearTabStop ? 0 : -1"
+                :aria-selected="cell.isSelected"
+                @click="selectYear(cell)"
+              >
+                <span :class="unitLabelClass(cell)">{{ cell.label }}</span>
+              </button>
+            </div>
+          </div>
+        </transition>
+      </div>
+
+      <!-- Время -->
+      <div
+        v-if="showTimeControls"
+        class="flex flex-wrap items-center gap-3 border-t border-default pt-3"
+      >
+        <div
+          v-for="target in timeTargets"
+          :key="target.key"
+          class="flex items-center gap-2"
+        >
+          <span class="text-body-sm text-quaternary">{{ target.label }}</span>
+          <div class="flex items-center gap-1">
+            <select
+              :class="TIME_SELECT_CLASS"
+              :disabled="!target.date"
+              :value="target.date ? String(target.date.getHours()).padStart(2, '0') : ''"
+              :aria-label="t('calendar.hours')"
+              @change="setTime(target.key, 'hours', ($event.target as HTMLSelectElement).value)"
+            >
+              <option
+                v-for="hour in hourOptions"
+                :key="hour"
+                :value="hour"
+              >
+                {{ hour }}
+              </option>
+            </select>
+            <span class="text-quaternary">:</span>
+            <select
+              :class="TIME_SELECT_CLASS"
+              :disabled="!target.date"
+              :value="target.date ? String(target.date.getMinutes()).padStart(2, '0') : ''"
+              :aria-label="t('calendar.minutes')"
+              @change="setTime(target.key, 'minutes', ($event.target as HTMLSelectElement).value)"
+            >
+              <option
+                v-for="minute in minuteOptions"
+                :key="minute"
+                :value="minute"
+              >
+                {{ minute }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <!-- Подвал. Слот получает clear — чтобы обёртки (пикер) могли собрать
+           свой набор кнопок, не дублируя логику очистки. -->
+      <div
+        v-if="showFooter || $slots.footer"
+        class="flex items-center justify-end gap-2 border-t border-default pt-3"
+      >
+        <slot name="footer" :clear="clear">
+          <button
+            type="button"
+            class="text-quaternary hover:text-primary"
+            :class="[FOOTER_BUTTON_CLASS]"
+            @click="clear"
+          >
+            {{ t('calendar.clear') }}
+          </button>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Все дети стека — в одной grid-ячейке. Правило структурное, поэтому живёт
+   здесь, а не в утилитах col-start-1/row-start-1: если консьюмер собирает
+   Tailwind, не сканируя этот слой (например, импортирует CSS кита из другой
+   версии в node_modules), утилиты не сгенерируются, панели встанут друг под
+   другом и коробка начнёт прыгать по высоте на каждой смене панели. */
+.calendar-v2__stack > * {
+  grid-area: 1 / 1;
+}
+
+/* Смена панели: вход мягкий и чуть длиннее, уход быстрый. Уходящая панель
+   не должна ловить клики, пока растворяется. */
+.calendar-v2-slide-left-enter-active,
+.calendar-v2-slide-right-enter-active,
+.calendar-v2-zoom-in-enter-active,
+.calendar-v2-zoom-out-enter-active {
+  transition:
+    opacity 180ms ease,
+    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.calendar-v2-slide-left-leave-active,
+.calendar-v2-slide-right-leave-active,
+.calendar-v2-zoom-in-leave-active,
+.calendar-v2-zoom-out-leave-active {
+  pointer-events: none;
+  transition:
+    opacity 120ms ease,
+    transform 140ms cubic-bezier(0.4, 0, 1, 1);
+}
+
+/* Вперёд: новое въезжает справа, старое уезжает влево. Назад — зеркально. */
+.calendar-v2-slide-left-enter-from,
+.calendar-v2-slide-right-leave-to {
+  opacity: 0;
+  transform: translateX(12px);
+}
+
+.calendar-v2-slide-left-leave-to,
+.calendar-v2-slide-right-enter-from {
+  opacity: 0;
+  transform: translateX(-12px);
+}
+
+/* Спуск к дням — «приближение», подъём к месяцам/годам — «отдаление». */
+.calendar-v2-zoom-in-enter-from,
+.calendar-v2-zoom-out-leave-to {
+  opacity: 0;
+  transform: scale(0.94);
+}
+
+.calendar-v2-zoom-in-leave-to,
+.calendar-v2-zoom-out-enter-from {
+  opacity: 0;
+  transform: scale(1.04);
+}
+
+/* Кроссфейд заголовка шапки: старая и новая подписи лежат в одной grid-ячейке. */
+.calendar-v2-fade-enter-active,
+.calendar-v2-fade-leave-active {
+  transition: opacity 160ms ease;
+}
+
+.calendar-v2-fade-enter-from,
+.calendar-v2-fade-leave-to {
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .calendar-v2-slide-left-enter-active,
+  .calendar-v2-slide-right-enter-active,
+  .calendar-v2-zoom-in-enter-active,
+  .calendar-v2-zoom-out-enter-active,
+  .calendar-v2-slide-left-leave-active,
+  .calendar-v2-slide-right-leave-active,
+  .calendar-v2-zoom-in-leave-active,
+  .calendar-v2-zoom-out-leave-active {
+    transition: opacity 120ms ease;
+  }
+
+  .calendar-v2-slide-left-enter-from,
+  .calendar-v2-slide-right-enter-from,
+  .calendar-v2-zoom-in-enter-from,
+  .calendar-v2-zoom-out-enter-from,
+  .calendar-v2-slide-left-leave-to,
+  .calendar-v2-slide-right-leave-to,
+  .calendar-v2-zoom-in-leave-to,
+  .calendar-v2-zoom-out-leave-to {
+    transform: none;
+  }
+}
+</style>