vectis-ui 0.8.1 → 0.9.1

package/dist/components/VCalendar/VCalendarMonth.js.map

@@ -1 +1 @@
-{"version":3,"file":"VCalendarMonth.js","names":[],"sources":["../../../src/components/VCalendar/VCalendarMonth.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"E extends CalendarEvent\">\n// @a11y @keyboard @core\n/**\n * The month view: the weeks stacked one under another, each day a square holding as many of\n * its events as will fit.\n *\n * It is internal to VCalendar and has no story of its own — its documentation lives with\n * the component that renders it. Like the time grid it computes nothing about dates: it is\n * handed the weeks already cut and filtered, and turns them into boxes.\n *\n * A day here is not a column of hours but a SUMMARY, so the events are drawn as chips in\n * the order the day would be read out — the all-day ones first, then the rest by when they\n * start — and a day with more than it can show says how many are left rather than silently\n * dropping them.\n *\n * The drag and the keyboard grab are `gesture.ts`'s. What stays here is what a square means:\n * the point under the pointer turned into a day, and a vertical step read as a whole week.\n */\nimport { computed, ref, useId } from 'vue'\n\nimport { formatDateDisplay } from '../../utils/date'\nimport { clamp } from '../../utils/number'\nimport { formatTimeDisplay } from '../../utils/time'\n\nimport { useMessages } from '../../i18n/state'\n\nimport VCalendarEvent from './VCalendarEvent.vue'\nimport { gridGeometryOf, useCalendarGesture, type GestureBase, type GrabStep } from './gesture'\nimport { calendarIntent } from './keyboard'\nimport {\n  eventsByDay,\n  isAllDayEvent,\n  moveEventToDay,\n  pointToMonthCell,\n  sameTimes,\n  timesOf,\n  type MonthCell,\n} from './layout'\nimport type {\n  ActivatedCell,\n  CalendarEvent,\n  CalendarEventId,\n  CalendarEventSlotProps,\n  CalendarEventTimes,\n  CalendarFormat,\n} from './types'\n\nexport interface CalendarMonthProps<T> {\n  /** The weeks, already padded to a fixed height and filtered to the visible weekdays. */\n  weeks: MonthCell[][]\n  events: T[]\n  locale: string\n  format: CalendarFormat\n  today: string | null\n  /** How many events a day shows before it starts counting the rest. */\n  monthEventLimit: number\n  /** Whether events can be moved from one day to another. */\n  editable: boolean\n  /** Whether the whole calendar is frozen, which also takes its cards out of the tab order. */\n  disabled: boolean\n  /** The node telling a reader how a chip can be moved, shared by every one of them. */\n  hintId: string\n  /** How long a drag rests against an edge before the month turns. Zero turns paging off. */\n  edgeStepDelay: number\n  label: string\n}\n\nconst props = defineProps<CalendarMonthProps<E>>()\n\nconst emit = defineEmits<{\n  /** A day was asked to be opened on its own. */\n  'day-activate': [iso: string]\n  /** An empty part of a day was activated. A month has no hours, so the time is left to the calendar. */\n  'cell-activate': [cell: ActivatedCell]\n  'event-activate': [event: E]\n  /** An event was dropped on another day. A month has no hours, so it is only ever a move. */\n  'event-drop': [id: CalendarEventId, times: CalendarEventTimes, kind: 'move']\n  /** Something happened that a reader who cannot see the grid needs told. */\n  announce: [message: string]\n  step: [delta: -1 | 1]\n}>()\n\n/** Which day holds the tab stop. Only the date matters here; the hour is the grid's affair. */\nconst focused = defineModel<string>('focused', { required: true })\n\ndefineSlots<{\n  event?(props: CalendarEventSlotProps<E>): unknown\n}>()\n\nconst m = useMessages()\nconst uid = useId()\n\nconst cellId = (iso: string) => `${uid}-m-${iso}`\n\n/** The flattened list of days: what the arrows travel along, and what the events are filed by. */\nconst flat = computed(() => props.weeks.flat().map((cell) => cell.iso))\nconst columnCount = computed(() => props.weeks[0]?.length ?? 1)\n\n/** The column headings, taken from the first week so they always match the columns drawn. */\nconst weekdayNames = computed(() =>\n  (props.weeks[0] ?? []).map((cell) =>\n    formatDateDisplay(cell.iso, props.locale, { weekday: 'short' }),\n  ),\n)\n\n/*\n * The two labels every square carries, worked out once per cell rather than once per USE.\n *\n * `longDay` is asked for twice in the template — the square's own `aria-label`, then the\n * name of the button that opens the day — so the 42 cells cost 126 `Intl` formats a render,\n * and a drag re-renders the whole grid each time it carries a chip onto another day. The map\n * depends on the weeks and the locale alone, so it survives every frame of a drag.\n */\nconst dayLabels = computed(() => {\n  const map = new Map<string, { number: string; long: string }>()\n  for (const iso of flat.value) {\n    map.set(iso, {\n      number: formatDateDisplay(iso, props.locale, { day: 'numeric' }),\n      long: formatDateDisplay(iso, props.locale, {\n        weekday: 'long',\n        day: 'numeric',\n        month: 'long',\n      }),\n    })\n  }\n  return map\n})\n\nconst dayNumber = (iso: string) => dayLabels.value.get(iso)?.number ?? ''\n\n/*\n * A day outside the grid can reach this — the announcement after a move names the day the\n * event landed on, which may be the next month — so it falls back to formatting rather than\n * assuming the map holds it.\n */\nconst longDay = (iso: string) =>\n  dayLabels.value.get(iso)?.long ??\n  formatDateDisplay(iso, props.locale, { weekday: 'long', day: 'numeric', month: 'long' })\n\n/**\n * A chip being carried from one day to another, by pointer or by keyboard.\n *\n * A month has no hours, so there is one kind and no resize: only which day an event starts\n * on moves, and its length in days and its times come along untouched.\n */\ninterface Gesture extends GestureBase {\n  /** Which square the pointer took hold in, so a long bar does not jump under it. */\n  grabIndex: number\n}\n\nconst gridEl = ref<HTMLElement | null>(null)\n/** The view's own box, which a drag is measured against to know whether it has left it. */\nconst rootEl = ref<HTMLElement | null>(null)\n\nconst {\n  gesture,\n  withPreview,\n  edgeCue,\n  isRtl,\n  start,\n  endLastGesture,\n  consumeDrag,\n  onPointermove,\n  onPointerup,\n  onPointercancel,\n  onPointerleave,\n  onCardKeydown,\n  focusCell,\n  idOfCard,\n  cardState,\n} = useCalendarGesture<E, Gesture>({\n  events: () => props.events,\n  eventOf: (id): E | undefined => eventsById.value.get(id),\n  // Measured against the ROOT and not against `gridEl`, whose rect leaves out the row of\n  // weekday names above it.\n  rootEl,\n  // Captured on the GRID rather than on the chip, because a chip is redrawn on another day the\n  // moment the drag starts and a captured element that moves takes the pointer with it.\n  captureEl: gridEl,\n  measureEl: gridEl,\n  columns: () => columnCount.value,\n  editable: () => props.editable,\n  hintId: () => props.hintId,\n  // The step is irrelevant to a month, which has no hours: 1 keeps the table honest without\n  // asking the calendar for a number this view never uses.\n  slotMinutes: () => 1,\n  edgeStepDelay: () => props.edgeStepDelay,\n  layout: () => props.weeks,\n  applyPoint,\n  onDrop: (state) => emit('event-drop', state.id, state.preview, 'move'),\n  grab: (item) =>\n    props.editable\n      ? {\n          id: item.id,\n          origin: timesOf(item),\n          pointerId: null,\n          originX: 0,\n          originY: 0,\n          // There is no pointer to remember; the arrows work off the preview, not a position.\n          grabIndex: 0,\n        }\n      : null,\n  onGrabStep,\n  step: (delta) => emit('step', delta),\n  announce: (message) => emit('announce', message),\n})\n\n/**\n * The events as the month should currently DRAW them — the model, with the one being carried\n * put wherever it now is. Running the preview through the same grouping as everything else is\n * what makes the day it leaves and the day it arrives at both redraw with no special case.\n *\n * Nothing has to be held out of a layout for the echo, unlike the time grid: a month cell\n * simply stacks its chips, so the echo takes its own line in the day it came from and disturbs\n * nothing.\n */\nconst drawnEvents = computed<E[]>(() => (gesture.value ? withPreview(props.events) : props.events))\n\n/** Every day's events, worked out once rather than once per chip. */\nconst byDay = computed(() => eventsByDay(drawnEvents.value, flat.value))\n\nconst eventsById = computed(\n  () => new Map<CalendarEventId, E>(drawnEvents.value.map((item) => [item.id, item])),\n)\n\n/**\n * A chip says when it happens only when that is not obvious: an all-day event has no time\n * to give, and the day it sits in already says which day it is.\n *\n * Memoized by start time inside the computed, so a change of locale or hour format throws the\n * cache away whole — the twin in VCalendarTimeGrid.vue carries the trap that makes reading\n * the computed, and not a cache beside it, the only correct shape.\n */\nconst timeTextOf = computed(() => {\n  const { locale, format } = props\n  const cache = new Map<string, string>()\n  return (event: E): string => {\n    if (isAllDayEvent(event)) return ''\n    let text = cache.get(event.startTime)\n    if (text === undefined) {\n      text = formatTimeDisplay(event.startTime, locale, format)\n      cache.set(event.startTime, text)\n    }\n    return text\n  }\n})\n\n/** One chip as the template draws it, its time already written out. */\ninterface Chip {\n  event: E\n  timeText: string\n}\n\n/**\n * What each square draws, and how many it had to leave out — one Map, built in a single pass.\n *\n * It is the `dayLabels` treatment. Written as template functions these returned a NEW array\n * per square per render, and since one of them is the source of a `v-for`, Vue rediffed all\n * 42 lists each time; each chip also formatted its own time. The map is rebuilt with `byDay`,\n * which a drag changes only when it carries its chip onto another day (`applyPoint` writes\n * nothing otherwise), and survives every other render.\n */\nconst dayEvents = computed(() => {\n  const map = new Map<string, { shown: Chip[]; hidden: number }>()\n  const textOf = timeTextOf.value\n  const limit = props.monthEventLimit\n  for (const [iso, all] of byDay.value) {\n    const shown = all.length > limit ? all.slice(0, limit) : all\n    map.set(iso, {\n      shown: shown.map((event) => ({ event, timeText: textOf(event) })),\n      hidden: Math.max(0, all.length - limit),\n    })\n  }\n  return map\n})\n\n/** A square with nothing on it, shared rather than allocated per empty cell. */\nconst NO_EVENTS: { shown: Chip[]; hidden: number } = Object.freeze({ shown: [], hidden: 0 })\nconst dayEventsOf = (iso: string) => dayEvents.value.get(iso) ?? NO_EVENTS\n\nfunction moveFocusTo(iso: string) {\n  focused.value = iso\n  // @a11y — the model decides which cell is tabbable, so the focus can only follow once the\n  // render that applied it has run.\n  focusCell(cellId(iso), true)\n}\n\nconst tabbable = computed(() =>\n  flat.value.includes(focused.value) ? focused.value : (flat.value[0] ?? null),\n)\n\n/**\n * The same table serves both views, so its two axes are read differently here: a sideways step\n * is one day, and a vertical one is a whole week rather than an hour. That is the only place the\n * month reinterprets it, and it is why the table returns a direction rather than a date.\n */\nconst dayStep = (days: number, minutes: number) =>\n  days !== 0 ? days : Math.sign(minutes) * columnCount.value\n\nfunction onKeydown(event: KeyboardEvent) {\n  const target = event.target as HTMLElement | null\n\n  // A chip answers its own table, delegated here on the same element as the pointer so the\n  // two input paths cannot drift apart.\n  const card = target?.closest<HTMLElement>('.v-calendar-event')\n  if (card) {\n    onCardKeydown(event, card)\n    return\n  }\n\n  const cell = target?.closest<HTMLElement>('.v-calendar-month-cell')\n  if (!cell) return\n\n  const intent = calendarIntent(event.key, event.shiftKey, 'cell', 1, isRtl())\n  if (!intent) return\n\n  const iso = cell.dataset.iso!\n  const index = flat.value.indexOf(iso)\n  const columns = columnCount.value\n\n  if (intent.kind === 'moveFocus') {\n    const next =\n      flat.value[clamp(index + dayStep(intent.days, intent.minutes), 0, flat.value.length - 1)]\n    if (!next) return\n    event.preventDefault()\n    moveFocusTo(next)\n    return\n  }\n\n  if (intent.kind === 'rowEdge') {\n    const row = Math.floor(index / columns)\n    const edge = intent.edge === 'start' ? row * columns : row * columns + columns - 1\n    const next = flat.value[clamp(edge, 0, flat.value.length - 1)]\n    if (!next) return\n    event.preventDefault()\n    moveFocusTo(next)\n    return\n  }\n\n  if (intent.kind === 'period') {\n    event.preventDefault()\n    emit('step', intent.delta)\n    return\n  }\n\n  if (intent.kind === 'activate') {\n    event.preventDefault()\n    emit('cell-activate', { date: iso, minutes: null })\n  }\n}\n\n/** Which of the flattened squares a point falls on. */\nfunction indexAt(x: number, y: number, rect: DOMRect, rtl: boolean): number {\n  const cell = pointToMonthCell(\n    { x, y },\n    { ...gridGeometryOf(rect, columnCount.value, rtl), rows: props.weeks.length || 1 },\n    rtl,\n  )\n  return cell.rowIndex * columnCount.value + cell.columnIndex\n}\n\nfunction onGridPointerdown(event: PointerEvent) {\n  endLastGesture()\n  if (gesture.value || !props.editable || event.button !== 0) return\n\n  const card = (event.target as HTMLElement | null)?.closest<HTMLElement>('.v-calendar-event')\n  const item = card ? eventsById.value.get(idOfCard(card)) : undefined\n  const rect = gridEl.value?.getBoundingClientRect()\n  if (!item || !rect) return\n  const rtl = isRtl()\n\n  start(\n    {\n      id: item.id,\n      origin: timesOf(item),\n      pointerId: event.pointerId,\n      originX: event.clientX,\n      originY: event.clientY,\n      grabIndex: indexAt(event.clientX, event.clientY, rect, rtl),\n    },\n    rtl,\n  )\n}\n\n/**\n * Works out which day the chip now belongs to, from wherever the pointer last was.\n *\n * Separate from the handler because the month turning calls it too: the squares change under\n * a hand that has not moved, and the chip has to be placed against the new ones.\n */\nfunction applyPoint(state: Gesture, rect: DOMRect) {\n  const index = indexAt(state.lastX, state.lastY, rect, state.rtl)\n  const last = lastApplied\n  if (last?.state === state && last.weeks === props.weeks && last.index === index) return\n  lastApplied = { state, weeks: props.weeks, index }\n\n  /*\n   * The target is the event's START shifted by however many squares the pointer has crossed,\n   * not the square it is over — so a bar grabbed by its third day keeps its third day under\n   * the finger. The days come out of the flattened grid, which is already filtered to the\n   * weekdays on show, so a hidden weekend is not counted.\n   */\n  const days = flat.value\n  const from = days.indexOf(state.origin.start)\n  const target =\n    days[\n      clamp((from === -1 ? state.grabIndex : from) + index - state.grabIndex, 0, days.length - 1)\n    ]\n  if (!target) return\n  /*\n   * TRAP — written only when the day changes. The gesture is a deep ref, so an equal but new\n   * preview would still re-bucket and re-sort every event and re-render all 42 squares.\n   */\n  const next = moveEventToDay(state.origin, target)\n  if (!sameTimes(state.preview, next)) state.preview = next\n}\n\n/**\n * The square `applyPoint` last placed the chip from, so the many `pointermove`s that fire\n * inside one square return before any date arithmetic. The weeks belong to what the index\n * MEANS: the month turning under a still pointer reads as a new square at the same index.\n * A plain variable, since nothing renders it; the gesture's identity says a new press began.\n */\nlet lastApplied: { state: Gesture; weeks: MonthCell[][]; index: number } | null = null\n\n/** One arrow press on a chip held by the keyboard: a day sideways, a week vertically. */\nfunction onGrabStep(state: Gesture, step: GrabStep, item: E): boolean {\n  // A month has no hours to stretch, so Shift with an arrow is simply not a gesture here.\n  if (step.kind !== 'grabMove') return false\n  const days = flat.value\n  const from = days.indexOf(state.preview.start)\n  const target = days[clamp(from + dayStep(step.days, step.minutes), 0, days.length - 1)]\n  if (!target) return false\n  state.preview = moveEventToDay(state.preview, target)\n  emit('announce', m.value.calendar.movedTo(item.title, longDay(state.preview.start)))\n  return true\n}\n\nfunction onCardClick(item: E) {\n  // `pointerup` fires before `click`, so letting go at the end of a drag would ALSO open the\n  // event — the consumer's editor over every chip the reader had just moved.\n  if (consumeDrag()) return\n  emit('event-activate', item)\n}\n\n/**\n * A click on the empty part of a day: the pointer's side of the Enter that activates a cell,\n * so a square drawn with a pointer cursor answers a click as it answers the key.\n *\n * The chips and the two buttons a square holds answer their own clicks, so a click that came\n * from one of them is theirs alone. And a click ending a drag is swallowed like the one a chip\n * would have received: the drop has already said what the gesture meant.\n */\nfunction onGridClick(event: MouseEvent) {\n  const target = event.target as HTMLElement | null\n  if (target?.closest('.v-calendar-event, button')) return\n  const cell = target?.closest<HTMLElement>('.v-calendar-month-cell')\n  if (!cell || consumeDrag()) return\n  emit('cell-activate', { date: cell.dataset.iso!, minutes: null })\n}\n\n// The same two members VCalendarTimeGrid exposes, so VCalendar drives either view without\n// asking which is on screen. A month has no hours, hence the empty `scrollToMinutes`.\ndefineExpose({\n  /** Brings the focus onto the day the grid is currently pointing at. */\n  focus: () => {\n    if (tabbable.value) focusCell(cellId(tabbable.value))\n  },\n  /** Nothing to scroll to in a month view. */\n  scrollToMinutes: () => {},\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-calendar-month\"\n    :data-outside=\"gesture?.outside ? '' : undefined\"\n    :style=\"{ '--calendar-columns': String(weekdayNames.length) }\"\n  >\n    <div class=\"v-calendar-month-head\" aria-hidden=\"true\">\n      <span\n        v-for=\"name in weekdayNames\"\n        :key=\"name\"\n        class=\"v-calendar-weekday v-calendar-month-weekday\"\n      >\n        {{ name }}\n      </span>\n    </div>\n\n    <div\n      ref=\"gridEl\"\n      class=\"v-calendar-month-grid v-calendar-edge-cue\"\n      role=\"grid\"\n      :aria-label=\"label\"\n      :data-edge=\"edgeCue\"\n      @keydown=\"onKeydown\"\n      @pointerdown=\"onGridPointerdown\"\n      @pointermove=\"onPointermove\"\n      @pointerup=\"onPointerup\"\n      @pointercancel=\"onPointercancel\"\n      @pointerleave=\"onPointerleave\"\n      @click=\"onGridClick\"\n    >\n      <div\n        v-for=\"(week, row) in weeks\"\n        :key=\"week[0]?.iso ?? row\"\n        role=\"row\"\n        class=\"v-calendar-month-week\"\n      >\n        <div\n          v-for=\"cell in week\"\n          :id=\"cellId(cell.iso)\"\n          :key=\"cell.iso\"\n          role=\"gridcell\"\n          class=\"v-calendar-cell v-calendar-month-cell\"\n          :data-iso=\"cell.iso\"\n          :data-adjacent=\"cell.adjacent ?? undefined\"\n          :tabindex=\"tabbable === cell.iso ? 0 : -1\"\n          :aria-label=\"longDay(cell.iso)\"\n        >\n          <button\n            type=\"button\"\n            class=\"v-calendar-button v-calendar-month-day\"\n            :class=\"{ 'v-calendar-today': cell.iso === today }\"\n            tabindex=\"-1\"\n            :aria-label=\"m.calendar.openDay(longDay(cell.iso))\"\n            @click=\"emit('day-activate', cell.iso)\"\n          >\n            {{ dayNumber(cell.iso) }}\n          </button>\n\n          <VCalendarEvent\n            v-for=\"chip in dayEventsOf(cell.iso).shown\"\n            :key=\"chip.event.id\"\n            class=\"v-calendar-month-chip\"\n            :event=\"chip.event\"\n            layout=\"chip\"\n            :disabled=\"disabled\"\n            :time-text=\"chip.timeText\"\n            v-bind=\"cardState(chip.event.id)\"\n            @click=\"onCardClick(chip.event)\"\n          >\n            <template v-if=\"$slots.event\" #default=\"slotProps\">\n              <slot name=\"event\" v-bind=\"slotProps\" />\n            </template>\n          </VCalendarEvent>\n\n          <button\n            v-if=\"dayEventsOf(cell.iso).hidden > 0\"\n            type=\"button\"\n            class=\"v-calendar-button v-calendar-month-more\"\n            tabindex=\"-1\"\n            @click=\"emit('day-activate', cell.iso)\"\n          >\n            {{ m.calendar.moreEvents(dayEventsOf(cell.iso).hidden) }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-calendar-month {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .v-calendar-month-head,\n  .v-calendar-month-week {\n    display: grid;\n    grid-template-columns: repeat(var(--calendar-columns), minmax(0, 1fr));\n  }\n\n  /* 4, the time grid's header layer: a dragged chip (3) and the edge strip (2) pass under the\n     sticky names as the month scrolls, rather than over them. */\n  .v-calendar-month-head {\n    position: sticky;\n    inset-block-start: 0;\n    z-index: 4;\n    background: var(--vectis-color-surface);\n    border-block-end: 1px solid var(--vectis-color-border);\n  }\n\n  .v-calendar-month-weekday {\n    padding-block: var(--vectis-space-2);\n    text-align: center;\n  }\n\n  .v-calendar-month-grid {\n    /* The edge strip is placed against this box. */\n    position: relative;\n    display: flex;\n    /* The rows share what height there is, so a month fills the box it was given instead of\n       leaving a band of nothing under the last week. The floor keeps a day readable when\n       that box is short. */\n    flex: 1;\n    flex-direction: column;\n    min-block-size: 0;\n  }\n\n  .v-calendar-month-week {\n    flex: 1;\n    min-block-size: var(--vectis-control-size-calendar-month-cell);\n  }\n\n  .v-calendar-month-cell {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    overflow: hidden;\n    padding: var(--vectis-space-1);\n  }\n\n  /* The days of the neighbouring months are kept — the grid is a fixed six rows, so the\n     page never jumps — but pushed back, since they are context rather than content. */\n  .v-calendar-month-cell[data-adjacent] {\n    background: var(--vectis-color-surface-sunken);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-calendar-month-day {\n    align-self: center;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex: none;\n    inline-size: var(--vectis-control-height-sm);\n    block-size: var(--vectis-control-height-sm);\n    border-radius: var(--vectis-radius-pill);\n    color: inherit;\n    font-size: var(--vectis-text-body-md-size);\n  }\n\n  /* Disjoint from today rather than less specific: the two live in different sheets, where a\n     tie would be settled by whichever one the consumer's bundler emitted last. */\n  .v-calendar-month-day:hover:not(.v-calendar-today) {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  /*\n   * A day in the month view is a summary, so a chip is capped at one lane however long the\n   * event really is — an all-day bar and a two-hour meeting look the same here, and several\n   * have to fit under the date.\n   *\n   * The height is SET AS A PROPERTY rather than as `block-size`. The chip rule in\n   * VCalendarEvent's own sheet is (0,2,0) against this (0,1,0), so declaring the size\n   * directly would lose — and matching its specificity would only hand the decision to\n   * whichever sheet the consumer's bundler emitted last, which is the failure the library's\n   * one-sheet-per-component rule exists to prevent.\n   */\n  .v-calendar-month-chip {\n    --calendar-chip-height: var(--vectis-control-size-calendar-allday-lane);\n\n    flex: none;\n  }\n\n  .v-calendar-month-more {\n    flex: none;\n    padding-inline: var(--vectis-space-1);\n    color: var(--vectis-color-text-muted);\n    font-size: var(--vectis-text-caption-size);\n    text-align: start;\n  }\n\n  .v-calendar-month-more:hover {\n    color: var(--vectis-color-text);\n    text-decoration: underline;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VCalendarMonth.js","names":[],"sources":["../../../src/components/VCalendar/VCalendarMonth.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"E extends CalendarEvent\">\n// @a11y @keyboard @core\n/**\n * The month view: the weeks stacked one under another, each day a square holding as many of\n * its events as will fit.\n *\n * It is internal to VCalendar and has no story of its own — its documentation lives with\n * the component that renders it. Like the time grid it computes nothing about dates: it is\n * handed the weeks already cut and filtered, and turns them into boxes.\n *\n * A day here is not a column of hours but a SUMMARY, so the events are drawn as chips in\n * the order the day would be read out — the all-day ones first, then the rest by when they\n * start — and a day with more than it can show says how many are left rather than silently\n * dropping them.\n *\n * The drag and the keyboard grab are `gesture.ts`'s. What stays here is what a square means:\n * the point under the pointer turned into a day, and a vertical step read as a whole week.\n */\nimport { computed, ref, useId } from 'vue'\n\nimport { formatDateDisplay } from '../../utils/date'\nimport { clamp } from '../../utils/number'\nimport { formatTimeDisplay } from '../../utils/time'\n\nimport { useMessages } from '../../i18n/state'\n\nimport VCalendarEvent from './VCalendarEvent.vue'\nimport { gridGeometryOf, useCalendarGesture, type GestureBase, type GrabStep } from './gesture'\nimport { calendarIntent } from './keyboard'\nimport {\n  eventsByDay,\n  isAllDayEvent,\n  moveEventToDay,\n  pointToMonthCell,\n  sameTimes,\n  timesOf,\n  type MonthCell,\n} from './layout'\nimport type {\n  ActivatedCell,\n  CalendarEvent,\n  CalendarEventId,\n  CalendarEventSlotProps,\n  CalendarEventTimes,\n  CalendarFormat,\n} from './types'\n\nexport interface CalendarMonthProps<T> {\n  /** The weeks, already padded to a fixed height and filtered to the visible weekdays. */\n  weeks: MonthCell[][]\n  events: T[]\n  locale: string\n  format: CalendarFormat\n  today: string | null\n  /** How many events a day shows before it starts counting the rest. */\n  monthEventLimit: number\n  /** Whether events can be moved from one day to another. */\n  editable: boolean\n  /** Whether the whole calendar is frozen, which also takes its cards out of the tab order. */\n  disabled: boolean\n  /** The node telling a reader how a chip can be moved, shared by every one of them. */\n  hintId: string\n  /** How long a drag rests against an edge before the month turns. Zero turns paging off. */\n  edgeStepDelay: number\n  label: string\n}\n\nconst props = defineProps<CalendarMonthProps<E>>()\n\nconst emit = defineEmits<{\n  /** A day was asked to be opened on its own. */\n  'day-activate': [iso: string]\n  /** An empty part of a day was activated. A month has no hours, so the time is left to the calendar. */\n  'cell-activate': [cell: ActivatedCell]\n  'event-activate': [event: E]\n  /** An event was dropped on another day. A month has no hours, so it is only ever a move. */\n  'event-drop': [id: CalendarEventId, times: CalendarEventTimes, kind: 'move']\n  /** Something happened that a reader who cannot see the grid needs told. */\n  announce: [message: string]\n  step: [delta: -1 | 1]\n}>()\n\n/** Which day holds the tab stop. Only the date matters here; the hour is the grid's affair. */\nconst focused = defineModel<string>('focused', { required: true })\n\ndefineSlots<{\n  event?(props: CalendarEventSlotProps<E>): unknown\n}>()\n\nconst m = useMessages()\nconst uid = useId()\n\nconst cellId = (iso: string) => `${uid}-m-${iso}`\n\n/** The flattened list of days: what the arrows travel along, and what the events are filed by. */\nconst flat = computed(() => props.weeks.flat().map((cell) => cell.iso))\nconst columnCount = computed(() => props.weeks[0]?.length ?? 1)\n\n/** The column headings, taken from the first week so they always match the columns drawn. */\nconst weekdayNames = computed(() =>\n  (props.weeks[0] ?? []).map((cell) =>\n    formatDateDisplay(cell.iso, props.locale, { weekday: 'short' }),\n  ),\n)\n\n/*\n * The two labels every square carries, worked out once per cell rather than once per USE.\n *\n * `longDay` is asked for twice in the template — the square's own `aria-label`, then the\n * name of the button that opens the day — so the 42 cells cost 126 `Intl` formats a render,\n * and a drag re-renders the whole grid each time it carries a chip onto another day. The map\n * depends on the weeks and the locale alone, so it survives every frame of a drag.\n */\nconst dayLabels = computed(() => {\n  const map = new Map<string, { number: string; long: string }>()\n  for (const iso of flat.value) {\n    map.set(iso, {\n      number: formatDateDisplay(iso, props.locale, { day: 'numeric' }),\n      long: formatDateDisplay(iso, props.locale, {\n        weekday: 'long',\n        day: 'numeric',\n        month: 'long',\n      }),\n    })\n  }\n  return map\n})\n\nconst dayNumber = (iso: string) => dayLabels.value.get(iso)?.number ?? ''\n\n/*\n * A day outside the grid can reach this — the announcement after a move names the day the\n * event landed on, which may be the next month — so it falls back to formatting rather than\n * assuming the map holds it.\n */\nconst longDay = (iso: string) =>\n  dayLabels.value.get(iso)?.long ??\n  formatDateDisplay(iso, props.locale, { weekday: 'long', day: 'numeric', month: 'long' })\n\n/**\n * A chip being carried from one day to another, by pointer or by keyboard.\n *\n * A month has no hours, so there is one kind and no resize: only which day an event starts\n * on moves, and its length in days and its times come along untouched.\n */\ninterface Gesture extends GestureBase {\n  /** Which square the pointer took hold in, so a long bar does not jump under it. */\n  grabIndex: number\n}\n\nconst gridEl = ref<HTMLElement | null>(null)\n/** The view's own box, which a drag is measured against to know whether it has left it. */\nconst rootEl = ref<HTMLElement | null>(null)\n\nconst {\n  gesture,\n  withPreview,\n  edgeCue,\n  isRtl,\n  start,\n  endLastGesture,\n  consumeDrag,\n  onPointermove,\n  onPointerup,\n  onPointercancel,\n  onPointerleave,\n  onFocusout,\n  onCardKeydown,\n  focusCell,\n  idOfCard,\n  cardState,\n} = useCalendarGesture<E, Gesture>({\n  events: () => props.events,\n  // The finished gesture and the weeks it was measured against are not kept past it.\n  onRelease: () => {\n    lastApplied = null\n  },\n  eventOf: (id): E | undefined => eventsById.value.get(id),\n  // Measured against the ROOT and not against `gridEl`, whose rect leaves out the row of\n  // weekday names above it.\n  rootEl,\n  // Captured on the GRID rather than on the chip, because a chip is redrawn on another day the\n  // moment the drag starts and a captured element that moves takes the pointer with it.\n  captureEl: gridEl,\n  measureEl: gridEl,\n  columns: () => columnCount.value,\n  editable: () => props.editable,\n  hintId: () => props.hintId,\n  // The step is irrelevant to a month, which has no hours: 1 keeps the table honest without\n  // asking the calendar for a number this view never uses.\n  slotMinutes: () => 1,\n  edgeStepDelay: () => props.edgeStepDelay,\n  layout: () => props.weeks,\n  applyPoint,\n  onDrop: (state) => emit('event-drop', state.id, state.preview, 'move'),\n  grab: (item) =>\n    props.editable\n      ? {\n          id: item.id,\n          origin: timesOf(item),\n          pointerId: null,\n          originX: 0,\n          originY: 0,\n          // There is no pointer to remember; the arrows work off the preview, not a position.\n          grabIndex: 0,\n        }\n      : null,\n  onGrabStep,\n  step: (delta) => emit('step', delta),\n  announce: (message) => emit('announce', message),\n})\n\n/**\n * The events as the month should currently DRAW them — the model, with the one being carried\n * put wherever it now is. Running the preview through the same grouping as everything else is\n * what makes the day it leaves and the day it arrives at both redraw with no special case.\n *\n * Nothing has to be held out of a layout for the echo, unlike the time grid: a month cell\n * simply stacks its chips, so the echo takes its own line in the day it came from and disturbs\n * nothing.\n */\nconst drawnEvents = computed<E[]>(() => (gesture.value ? withPreview(props.events) : props.events))\n\n/** Every day's events, worked out once rather than once per chip. */\nconst byDay = computed(() => eventsByDay(drawnEvents.value, flat.value))\n\nconst eventsById = computed(\n  () => new Map<CalendarEventId, E>(drawnEvents.value.map((item) => [item.id, item])),\n)\n\n/**\n * A chip says when it happens only when that is not obvious: an all-day event has no time\n * to give, and the day it sits in already says which day it is.\n *\n * Memoized by start time inside the computed, so a change of locale or hour format throws the\n * cache away whole — the twin in VCalendarTimeGrid.vue carries the trap that makes reading\n * the computed, and not a cache beside it, the only correct shape.\n */\nconst timeTextOf = computed(() => {\n  const { locale, format } = props\n  const cache = new Map<string, string>()\n  return (event: E): string => {\n    if (isAllDayEvent(event)) return ''\n    let text = cache.get(event.startTime)\n    if (text === undefined) {\n      text = formatTimeDisplay(event.startTime, locale, format)\n      cache.set(event.startTime, text)\n    }\n    return text\n  }\n})\n\n/** One chip as the template draws it, its time already written out. */\ninterface Chip {\n  event: E\n  timeText: string\n}\n\n/**\n * What each square draws, and how many it had to leave out — one Map, built in a single pass.\n *\n * It is the `dayLabels` treatment. Written as template functions these returned a NEW array\n * per square per render, and since one of them is the source of a `v-for`, Vue rediffed all\n * 42 lists each time; each chip also formatted its own time. The map is rebuilt with `byDay`,\n * which a drag changes only when it carries its chip onto another day (`applyPoint` writes\n * nothing otherwise), and survives every other render.\n */\nconst dayEvents = computed(() => {\n  const map = new Map<string, { shown: Chip[]; hidden: number }>()\n  const textOf = timeTextOf.value\n  // Below zero, a limit would count hidden events on every empty square.\n  const limit = Math.max(0, props.monthEventLimit)\n  for (const [iso, all] of byDay.value) {\n    const shown = all.length > limit ? all.slice(0, limit) : all\n    map.set(iso, {\n      shown: shown.map((event) => ({ event, timeText: textOf(event) })),\n      hidden: Math.max(0, all.length - limit),\n    })\n  }\n  return map\n})\n\n/** A square with nothing on it, shared rather than allocated per empty cell. */\nconst NO_EVENTS: { shown: Chip[]; hidden: number } = Object.freeze({ shown: [], hidden: 0 })\nconst dayEventsOf = (iso: string) => dayEvents.value.get(iso) ?? NO_EVENTS\n\nfunction moveFocusTo(iso: string) {\n  focused.value = iso\n  // @a11y — the model decides which cell is tabbable, so the focus can only follow once the\n  // render that applied it has run.\n  focusCell(cellId(iso), true)\n}\n\nconst tabbable = computed(() =>\n  flat.value.includes(focused.value) ? focused.value : (flat.value[0] ?? null),\n)\n\n/**\n * The same table serves both views, so its two axes are read differently here: a sideways step\n * is one day, and a vertical one is a whole week rather than an hour. That is the only place the\n * month reinterprets it, and it is why the table returns a direction rather than a date.\n */\nconst dayStep = (days: number, minutes: number) =>\n  days !== 0 ? days : Math.sign(minutes) * columnCount.value\n\nfunction onKeydown(event: KeyboardEvent) {\n  const target = event.target as HTMLElement | null\n\n  // A chip answers its own table, delegated here on the same element as the pointer so the\n  // two input paths cannot drift apart.\n  const card = target?.closest<HTMLElement>('.v-calendar-event')\n  if (card) {\n    onCardKeydown(event, card)\n    return\n  }\n\n  const cell = target?.closest<HTMLElement>('.v-calendar-month-cell')\n  if (!cell) return\n\n  const intent = calendarIntent(event, 'cell', 1, isRtl())\n  if (!intent) return\n\n  const iso = cell.dataset.iso!\n  const index = flat.value.indexOf(iso)\n  const columns = columnCount.value\n\n  if (intent.kind === 'moveFocus') {\n    const next =\n      flat.value[clamp(index + dayStep(intent.days, intent.minutes), 0, flat.value.length - 1)]\n    if (!next) return\n    event.preventDefault()\n    moveFocusTo(next)\n    return\n  }\n\n  if (intent.kind === 'rowEdge') {\n    const row = Math.floor(index / columns)\n    const edge = intent.edge === 'start' ? row * columns : row * columns + columns - 1\n    const next = flat.value[clamp(edge, 0, flat.value.length - 1)]\n    if (!next) return\n    event.preventDefault()\n    moveFocusTo(next)\n    return\n  }\n\n  if (intent.kind === 'period') {\n    event.preventDefault()\n    emit('step', intent.delta)\n    return\n  }\n\n  if (intent.kind === 'openDay') {\n    event.preventDefault()\n    emit('day-activate', iso)\n    return\n  }\n\n  if (intent.kind === 'activate') {\n    event.preventDefault()\n    emit('cell-activate', { date: iso, minutes: null })\n  }\n}\n\n/** Which of the flattened squares a point falls on. */\nfunction indexAt(x: number, y: number, rect: DOMRect, rtl: boolean): number {\n  const cell = pointToMonthCell(\n    { x, y },\n    { ...gridGeometryOf(rect, columnCount.value, rtl), rows: props.weeks.length || 1 },\n    rtl,\n  )\n  return cell.rowIndex * columnCount.value + cell.columnIndex\n}\n\nfunction onGridPointerdown(event: PointerEvent) {\n  endLastGesture()\n  if (gesture.value || !props.editable || event.button !== 0) return\n\n  const card = (event.target as HTMLElement | null)?.closest<HTMLElement>('.v-calendar-event')\n  const item = card ? eventsById.value.get(idOfCard(card)) : undefined\n  const rect = gridEl.value?.getBoundingClientRect()\n  if (!item || !rect) return\n  const rtl = isRtl()\n\n  start(\n    {\n      id: item.id,\n      origin: timesOf(item),\n      pointerId: event.pointerId,\n      originX: event.clientX,\n      originY: event.clientY,\n      grabIndex: indexAt(event.clientX, event.clientY, rect, rtl),\n    },\n    rtl,\n  )\n}\n\n/**\n * Works out which day the chip now belongs to, from wherever the pointer last was.\n *\n * Separate from the handler because the month turning calls it too: the squares change under\n * a hand that has not moved, and the chip has to be placed against the new ones.\n */\nfunction applyPoint(state: Gesture, rect: DOMRect) {\n  const index = indexAt(state.lastX, state.lastY, rect, state.rtl)\n  const last = lastApplied\n  if (last?.state === state && last.weeks === props.weeks && last.index === index) return\n  lastApplied = { state, weeks: props.weeks, index }\n\n  /*\n   * The target is the event's START shifted by however many squares the pointer has crossed,\n   * not the square it is over — so a bar grabbed by its third day keeps its third day under\n   * the finger. The days come out of the flattened grid, which is already filtered to the\n   * weekdays on show, so a hidden weekend is not counted.\n   */\n  const days = flat.value\n  const from = days.indexOf(state.origin.start)\n  const target =\n    days[\n      clamp((from === -1 ? state.grabIndex : from) + index - state.grabIndex, 0, days.length - 1)\n    ]\n  if (!target) return\n  /*\n   * TRAP — written only when the day changes. The gesture is a deep ref, so an equal but new\n   * preview would still re-bucket and re-sort every event and re-render all 42 squares.\n   */\n  const next = moveEventToDay(state.origin, target)\n  if (!sameTimes(state.preview, next)) state.preview = next\n}\n\n/**\n * The square `applyPoint` last placed the chip from, so the many `pointermove`s that fire\n * inside one square return before any date arithmetic. The weeks belong to what the index\n * MEANS: the month turning under a still pointer reads as a new square at the same index.\n * A plain variable, since nothing renders it; the gesture's identity says a new press began.\n */\nlet lastApplied: { state: Gesture; weeks: MonthCell[][]; index: number } | null = null\n\n/** One arrow press on a chip held by the keyboard: a day sideways, a week vertically. */\nfunction onGrabStep(state: Gesture, step: GrabStep, item: E): boolean {\n  // A month has no hours to stretch, so Shift with an arrow is simply not a gesture here.\n  if (step.kind !== 'grabMove') return false\n  const days = flat.value\n  const from = days.indexOf(state.preview.start)\n  const target = days[clamp(from + dayStep(step.days, step.minutes), 0, days.length - 1)]\n  // Held against the grid's edge, the press goes nowhere: nothing to announce or to drop.\n  if (!target || target === state.preview.start) return false\n  state.preview = moveEventToDay(state.preview, target)\n  emit('announce', m.value.calendar.movedTo(item.title, longDay(state.preview.start)))\n  return true\n}\n\nfunction onCardClick(item: E) {\n  // `pointerup` fires before `click`, so letting go at the end of a drag would ALSO open the\n  // event — the consumer's editor over every chip the reader had just moved.\n  if (consumeDrag()) return\n  emit('event-activate', item)\n}\n\n/**\n * A click on the empty part of a day: the pointer's side of the Enter that activates a cell,\n * so a square drawn with a pointer cursor answers a click as it answers the key.\n *\n * The chips and the two buttons a square holds answer their own clicks, so a click that came\n * from one of them is theirs alone. And a click ending a drag is swallowed like the one a chip\n * would have received: the drop has already said what the gesture meant.\n */\nfunction onGridClick(event: MouseEvent) {\n  const target = event.target as HTMLElement | null\n  if (target?.closest('.v-calendar-event, button')) return\n  const cell = target?.closest<HTMLElement>('.v-calendar-month-cell')\n  if (!cell || consumeDrag()) return\n  emit('cell-activate', { date: cell.dataset.iso!, minutes: null })\n}\n\n// The same two members VCalendarTimeGrid exposes, so VCalendar drives either view without\n// asking which is on screen. A month has no hours, hence the empty `scrollToMinutes`.\ndefineExpose({\n  /** Brings the focus onto the day the grid is currently pointing at. */\n  focus: (options?: FocusOptions) => {\n    if (tabbable.value) focusCell(cellId(tabbable.value), false, options)\n  },\n  /** Nothing to scroll to in a month view. */\n  scrollToMinutes: () => {},\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-calendar-month\"\n    :data-outside=\"gesture?.outside ? '' : undefined\"\n    :style=\"{ '--calendar-columns': String(weekdayNames.length) }\"\n    @focusout=\"onFocusout\"\n  >\n    <div class=\"v-calendar-month-head\" aria-hidden=\"true\">\n      <span\n        v-for=\"(name, index) in weekdayNames\"\n        :key=\"index\"\n        class=\"v-calendar-weekday v-calendar-month-weekday\"\n      >\n        {{ name }}\n      </span>\n    </div>\n\n    <div\n      ref=\"gridEl\"\n      class=\"v-calendar-month-grid v-calendar-edge-cue\"\n      role=\"grid\"\n      :aria-label=\"label\"\n      :data-edge=\"edgeCue\"\n      @keydown=\"onKeydown\"\n      @pointerdown=\"onGridPointerdown\"\n      @pointermove=\"onPointermove\"\n      @pointerup=\"onPointerup\"\n      @pointercancel=\"onPointercancel\"\n      @pointerleave=\"onPointerleave\"\n      @click=\"onGridClick\"\n    >\n      <div\n        v-for=\"(week, row) in weeks\"\n        :key=\"week[0]?.iso ?? row\"\n        role=\"row\"\n        class=\"v-calendar-month-week\"\n      >\n        <div\n          v-for=\"cell in week\"\n          :id=\"cellId(cell.iso)\"\n          :key=\"cell.iso\"\n          role=\"gridcell\"\n          class=\"v-calendar-cell v-calendar-month-cell\"\n          :data-iso=\"cell.iso\"\n          :data-adjacent=\"cell.adjacent ?? undefined\"\n          :tabindex=\"tabbable === cell.iso ? 0 : -1\"\n          :aria-label=\"longDay(cell.iso)\"\n          aria-keyshortcuts=\"Shift+Enter\"\n        >\n          <button\n            type=\"button\"\n            class=\"v-calendar-button v-calendar-month-day\"\n            :class=\"{ 'v-calendar-today': cell.iso === today }\"\n            tabindex=\"-1\"\n            :aria-label=\"m.calendar.openDay(longDay(cell.iso))\"\n            @click=\"emit('day-activate', cell.iso)\"\n          >\n            {{ dayNumber(cell.iso) }}\n          </button>\n\n          <VCalendarEvent\n            v-for=\"chip in dayEventsOf(cell.iso).shown\"\n            :key=\"chip.event.id\"\n            class=\"v-calendar-month-chip\"\n            :event=\"chip.event\"\n            layout=\"chip\"\n            :disabled=\"disabled\"\n            :time-text=\"chip.timeText\"\n            v-bind=\"cardState(chip.event.id)\"\n            @click=\"onCardClick(chip.event)\"\n          >\n            <template v-if=\"$slots.event\" #default=\"slotProps\">\n              <slot name=\"event\" v-bind=\"slotProps\" />\n            </template>\n          </VCalendarEvent>\n\n          <button\n            v-if=\"dayEventsOf(cell.iso).hidden > 0\"\n            type=\"button\"\n            class=\"v-calendar-button v-calendar-month-more\"\n            tabindex=\"-1\"\n            @click=\"emit('day-activate', cell.iso)\"\n          >\n            {{ m.calendar.moreEvents(dayEventsOf(cell.iso).hidden) }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-calendar-month {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .v-calendar-month-head,\n  .v-calendar-month-week {\n    display: grid;\n    grid-template-columns: repeat(var(--calendar-columns), minmax(0, 1fr));\n  }\n\n  /* 4, the time grid's header layer: a dragged chip (3) and the edge strip (2) pass under the\n     sticky names as the month scrolls, rather than over them. */\n  .v-calendar-month-head {\n    position: sticky;\n    inset-block-start: 0;\n    z-index: 4;\n    background: var(--vectis-color-surface);\n    border-block-end: 1px solid var(--vectis-color-border);\n  }\n\n  .v-calendar-month-weekday {\n    padding-block: var(--vectis-space-2);\n    text-align: center;\n  }\n\n  .v-calendar-month-grid {\n    /* The edge strip is placed against this box. */\n    position: relative;\n    display: flex;\n    /* The rows share what height there is, so a month fills the box it was given instead of\n       leaving a band of nothing under the last week. The floor keeps a day readable when\n       that box is short. */\n    flex: 1;\n    flex-direction: column;\n    min-block-size: 0;\n  }\n\n  .v-calendar-month-week {\n    flex: 1;\n    min-block-size: var(--vectis-control-size-calendar-month-cell);\n  }\n\n  .v-calendar-month-cell {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-control-size-calendar-gap);\n    overflow: hidden;\n    padding: var(--vectis-space-1);\n  }\n\n  /* The days of the neighbouring months are kept — the grid is a fixed six rows, so the\n     page never jumps — but pushed back, since they are context rather than content. */\n  .v-calendar-month-cell[data-adjacent] {\n    background: var(--vectis-color-surface-sunken);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-calendar-month-day {\n    align-self: center;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex: none;\n    inline-size: var(--vectis-control-height-sm);\n    block-size: var(--vectis-control-height-sm);\n    border-radius: var(--vectis-radius-pill);\n    color: inherit;\n    font-size: var(--vectis-text-body-md-size);\n  }\n\n  /* Disjoint from today rather than less specific: the two live in different sheets, where a\n     tie would be settled by whichever one the consumer's bundler emitted last. */\n  .v-calendar-month-day:hover:not(.v-calendar-today) {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  /*\n   * A day in the month view is a summary, so a chip is capped at one lane however long the\n   * event really is — an all-day bar and a two-hour meeting look the same here, and several\n   * have to fit under the date.\n   *\n   * The height is SET AS A PROPERTY rather than as `block-size`. The chip rule in\n   * VCalendarEvent's own sheet is (0,2,0) against this (0,1,0), so declaring the size\n   * directly would lose — and matching its specificity would only hand the decision to\n   * whichever sheet the consumer's bundler emitted last, which is the failure the library's\n   * one-sheet-per-component rule exists to prevent.\n   */\n  .v-calendar-month-chip {\n    --calendar-chip-height: var(--vectis-control-size-calendar-allday-lane);\n\n    flex: none;\n  }\n\n  .v-calendar-month-more {\n    flex: none;\n    padding-inline: var(--vectis-space-1);\n    color: var(--vectis-color-text-muted);\n    font-size: var(--vectis-text-caption-size);\n    text-align: start;\n  }\n\n  .v-calendar-month-more:hover {\n    color: var(--vectis-color-text);\n    text-decoration: underline;\n  }\n\n  /* The neighbouring months' days are told apart by a tint forced colors removes: grey text\n     keeps them apart. */\n  @media (forced-colors: active) {\n    .v-calendar-month-cell[data-adjacent] {\n      forced-color-adjust: none;\n      background: Canvas;\n      color: GrayText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VCalendar/VCalendarMonth.vue_vue_type_script_setup_true_lang.js

@@ -6,18 +6,18 @@ import i from "./VCalendarEvent.js";
 import { eventsByDay as a, isAllDayEvent as o, moveEventToDay as s, pointToMonthCell as c, sameTimes as ee, timesOf as l } from "./layout.js";
 import { calendarIntent as te } from "./keyboard.js";
 import { gridGeometryOf as ne, useCalendarGesture as re } from "./gesture.js";
-import { Fragment as u, computed as d, createBlock as ie, createCommentVNode as ae, createElementBlock as f, createElementVNode as p, createSlots as oe, defineComponent as m, mergeModels as h, mergeProps as g, normalizeClass as se, normalizeStyle as _, openBlock as v, ref as y, renderList as b, renderSlot as x, toDisplayString as S, unref as C, useId as ce, useModel as le, withCtx as ue } from "vue";
+import { Fragment as u, computed as d, createBlock as ie, createCommentVNode as ae, createElementBlock as f, createElementVNode as p, createSlots as oe, defineComponent as m, mergeModels as h, mergeProps as g, normalizeClass as se, normalizeStyle as _, openBlock as v, ref as y, renderList as b, renderSlot as ce, toDisplayString as x, unref as S, useId as le, useModel as ue, withCtx as de } from "vue";
 //#region src/components/VCalendar/VCalendarMonth.vue?vue&type=script&setup=true&lang.ts
-var de = ["data-outside"], fe = {
+var fe = ["data-outside"], pe = {
 	class: "v-calendar-month-head",
 	"aria-hidden": "true"
-}, pe = ["aria-label", "data-edge"], me = [
+}, me = ["aria-label", "data-edge"], he = [
 	"id",
 	"data-iso",
 	"data-adjacent",
 	"tabindex",
 	"aria-label"
-], he = ["aria-label", "onClick"], ge = ["onClick"], w = /*@__PURE__*/ m({
+], ge = ["aria-label", "onClick"], _e = ["onClick"], C = /*@__PURE__*/ m({
 	__name: "VCalendarMonth",
 	props: /*@__PURE__*/ h({
 		weeks: {},
@@ -43,37 +43,40 @@ var de = ["data-outside"], fe = {
 		"announce",
 		"step"
 	], ["update:focused"]),
-	setup(m, { expose: h, emit: w }) {
-		let T = m, E = w, D = le(m, "focused"), O = e(), _e = ce(), k = (e) => `${_e}-m-${e}`, A = d(() => T.weeks.flat().map((e) => e.iso)), j = d(() => T.weeks[0]?.length ?? 1), M = d(() => (T.weeks[0] ?? []).map((e) => n(e.iso, T.locale, { weekday: "short" }))), N = d(() => {
+	setup(m, { expose: h, emit: C }) {
+		let w = m, T = C, E = ue(m, "focused"), D = e(), ve = le(), O = (e) => `${ve}-m-${e}`, k = d(() => w.weeks.flat().map((e) => e.iso)), A = d(() => w.weeks[0]?.length ?? 1), j = d(() => (w.weeks[0] ?? []).map((e) => n(e.iso, w.locale, { weekday: "short" }))), M = d(() => {
 			let e = /* @__PURE__ */ new Map();
-			for (let t of A.value) e.set(t, {
-				number: n(t, T.locale, { day: "numeric" }),
-				long: n(t, T.locale, {
+			for (let t of k.value) e.set(t, {
+				number: n(t, w.locale, { day: "numeric" }),
+				long: n(t, w.locale, {
 					weekday: "long",
 					day: "numeric",
 					month: "long"
 				})
 			});
 			return e;
-		}), ve = (e) => N.value.get(e)?.number ?? "", P = (e) => N.value.get(e)?.long ?? n(e, T.locale, {
+		}), ye = (e) => M.value.get(e)?.number ?? "", N = (e) => M.value.get(e)?.long ?? n(e, w.locale, {
 			weekday: "long",
 			day: "numeric",
 			month: "long"
-		}), F = y(null), I = y(null), { gesture: L, withPreview: ye, edgeCue: be, isRtl: R, start: xe, endLastGesture: z, consumeDrag: B, onPointermove: V, onPointerup: H, onPointercancel: U, onPointerleave: W, onCardKeydown: Se, focusCell: G, idOfCard: Ce, cardState: we } = re({
-			events: () => T.events,
+		}), P = y(null), F = y(null), { gesture: I, withPreview: be, edgeCue: xe, isRtl: L, start: Se, endLastGesture: Ce, consumeDrag: R, onPointermove: z, onPointerup: B, onPointercancel: V, onPointerleave: H, onFocusout: U, onCardKeydown: W, focusCell: G, idOfCard: we, cardState: Te } = re({
+			events: () => w.events,
+			onRelease: () => {
+				$ = null;
+			},
 			eventOf: (e) => q.value.get(e),
-			rootEl: I,
-			captureEl: F,
-			measureEl: F,
-			columns: () => j.value,
-			editable: () => T.editable,
-			hintId: () => T.hintId,
+			rootEl: F,
+			captureEl: P,
+			measureEl: P,
+			columns: () => A.value,
+			editable: () => w.editable,
+			hintId: () => w.hintId,
 			slotMinutes: () => 1,
-			edgeStepDelay: () => T.edgeStepDelay,
-			layout: () => T.weeks,
-			applyPoint: je,
-			onDrop: (e) => E("event-drop", e.id, e.preview, "move"),
-			grab: (e) => T.editable ? {
+			edgeStepDelay: () => w.edgeStepDelay,
+			layout: () => w.weeks,
+			applyPoint: Me,
+			onDrop: (e) => T("event-drop", e.id, e.preview, "move"),
+			grab: (e) => w.editable ? {
 				id: e.id,
 				origin: l(e),
 				pointerId: null,
@@ -81,19 +84,19 @@ var de = ["data-outside"], fe = {
 				originY: 0,
 				grabIndex: 0
 			} : null,
-			onGrabStep: Me,
-			step: (e) => E("step", e),
-			announce: (e) => E("announce", e)
-		}), K = d(() => L.value ? ye(T.events) : T.events), Te = d(() => a(K.value, A.value)), q = d(() => new Map(K.value.map((e) => [e.id, e]))), Ee = d(() => {
-			let { locale: e, format: t } = T, n = /* @__PURE__ */ new Map();
+			onGrabStep: Ne,
+			step: (e) => T("step", e),
+			announce: (e) => T("announce", e)
+		}), K = d(() => I.value ? be(w.events) : w.events), Ee = d(() => a(K.value, k.value)), q = d(() => new Map(K.value.map((e) => [e.id, e]))), De = d(() => {
+			let { locale: e, format: t } = w, n = /* @__PURE__ */ new Map();
 			return (i) => {
 				if (o(i)) return "";
 				let a = n.get(i.startTime);
 				return a === void 0 && (a = r(i.startTime, e, t), n.set(i.startTime, a)), a;
 			};
-		}), De = d(() => {
-			let e = /* @__PURE__ */ new Map(), t = Ee.value, n = T.monthEventLimit;
-			for (let [r, i] of Te.value) {
+		}), Oe = d(() => {
+			let e = /* @__PURE__ */ new Map(), t = De.value, n = Math.max(0, w.monthEventLimit);
+			for (let [r, i] of Ee.value) {
 				let a = i.length > n ? i.slice(0, n) : i;
 				e.set(r, {
 					shown: a.map((e) => ({
@@ -104,42 +107,46 @@ var de = ["data-outside"], fe = {
 				});
 			}
 			return e;
-		}), Oe = Object.freeze({
+		}), ke = Object.freeze({
 			shown: [],
 			hidden: 0
-		}), J = (e) => De.value.get(e) ?? Oe;
+		}), J = (e) => Oe.value.get(e) ?? ke;
 		function Y(e) {
-			D.value = e, G(k(e), !0);
+			E.value = e, G(O(e), !0);
 		}
-		let X = d(() => A.value.includes(D.value) ? D.value : A.value[0] ?? null), Z = (e, t) => e === 0 ? Math.sign(t) * j.value : e;
-		function ke(e) {
+		let X = d(() => k.value.includes(E.value) ? E.value : k.value[0] ?? null), Z = (e, t) => e === 0 ? Math.sign(t) * A.value : e;
+		function Ae(e) {
 			let n = e.target, r = n?.closest(".v-calendar-event");
 			if (r) {
-				Se(e, r);
+				W(e, r);
 				return;
 			}
 			let i = n?.closest(".v-calendar-month-cell");
 			if (!i) return;
-			let a = te(e.key, e.shiftKey, "cell", 1, R());
+			let a = te(e, "cell", 1, L());
 			if (!a) return;
-			let o = i.dataset.iso, s = A.value.indexOf(o), c = j.value;
+			let o = i.dataset.iso, s = k.value.indexOf(o), c = A.value;
 			if (a.kind === "moveFocus") {
-				let n = A.value[t(s + Z(a.days, a.minutes), 0, A.value.length - 1)];
+				let n = k.value[t(s + Z(a.days, a.minutes), 0, k.value.length - 1)];
 				if (!n) return;
 				e.preventDefault(), Y(n);
 				return;
 			}
 			if (a.kind === "rowEdge") {
-				let n = Math.floor(s / c), r = a.edge === "start" ? n * c : n * c + c - 1, i = A.value[t(r, 0, A.value.length - 1)];
+				let n = Math.floor(s / c), r = a.edge === "start" ? n * c : n * c + c - 1, i = k.value[t(r, 0, k.value.length - 1)];
 				if (!i) return;
 				e.preventDefault(), Y(i);
 				return;
 			}
 			if (a.kind === "period") {
-				e.preventDefault(), E("step", a.delta);
+				e.preventDefault(), T("step", a.delta);
 				return;
 			}
-			a.kind === "activate" && (e.preventDefault(), E("cell-activate", {
+			if (a.kind === "openDay") {
+				e.preventDefault(), T("day-activate", o);
+				return;
+			}
+			a.kind === "activate" && (e.preventDefault(), T("cell-activate", {
 				date: o,
 				minutes: null
 			}));
@@ -149,17 +156,17 @@ var de = ["data-outside"], fe = {
 				x: e,
 				y: t
 			}, {
-				...ne(n, j.value, r),
-				rows: T.weeks.length || 1
+				...ne(n, A.value, r),
+				rows: w.weeks.length || 1
 			}, r);
-			return i.rowIndex * j.value + i.columnIndex;
+			return i.rowIndex * A.value + i.columnIndex;
 		}
-		function Ae(e) {
-			if (z(), L.value || !T.editable || e.button !== 0) return;
-			let t = e.target?.closest(".v-calendar-event"), n = t ? q.value.get(Ce(t)) : void 0, r = F.value?.getBoundingClientRect();
+		function je(e) {
+			if (Ce(), I.value || !w.editable || e.button !== 0) return;
+			let t = e.target?.closest(".v-calendar-event"), n = t ? q.value.get(we(t)) : void 0, r = P.value?.getBoundingClientRect();
 			if (!n || !r) return;
-			let i = R();
-			xe({
+			let i = L();
+			Se({
 				id: n.id,
 				origin: l(n),
 				pointerId: e.pointerId,
@@ -168,86 +175,88 @@ var de = ["data-outside"], fe = {
 				grabIndex: Q(e.clientX, e.clientY, r, i)
 			}, i);
 		}
-		function je(e, n) {
+		function Me(e, n) {
 			let r = Q(e.lastX, e.lastY, n, e.rtl), i = $;
-			if (i?.state === e && i.weeks === T.weeks && i.index === r) return;
+			if (i?.state === e && i.weeks === w.weeks && i.index === r) return;
 			$ = {
 				state: e,
-				weeks: T.weeks,
+				weeks: w.weeks,
 				index: r
 			};
-			let a = A.value, o = a.indexOf(e.origin.start), c = a[t((o === -1 ? e.grabIndex : o) + r - e.grabIndex, 0, a.length - 1)];
+			let a = k.value, o = a.indexOf(e.origin.start), c = a[t((o === -1 ? e.grabIndex : o) + r - e.grabIndex, 0, a.length - 1)];
 			if (!c) return;
 			let l = s(e.origin, c);
 			ee(e.preview, l) || (e.preview = l);
 		}
 		let $ = null;
-		function Me(e, n, r) {
+		function Ne(e, n, r) {
 			if (n.kind !== "grabMove") return !1;
-			let i = A.value, a = i[t(i.indexOf(e.preview.start) + Z(n.days, n.minutes), 0, i.length - 1)];
-			return a ? (e.preview = s(e.preview, a), E("announce", O.value.calendar.movedTo(r.title, P(e.preview.start))), !0) : !1;
-		}
-		function Ne(e) {
-			B() || E("event-activate", e);
+			let i = k.value, a = i[t(i.indexOf(e.preview.start) + Z(n.days, n.minutes), 0, i.length - 1)];
+			return !a || a === e.preview.start ? !1 : (e.preview = s(e.preview, a), T("announce", D.value.calendar.movedTo(r.title, N(e.preview.start))), !0);
 		}
 		function Pe(e) {
+			R() || T("event-activate", e);
+		}
+		function Fe(e) {
 			let t = e.target;
 			if (t?.closest(".v-calendar-event, button")) return;
 			let n = t?.closest(".v-calendar-month-cell");
-			!n || B() || E("cell-activate", {
+			!n || R() || T("cell-activate", {
 				date: n.dataset.iso,
 				minutes: null
 			});
 		}
 		return h({
-			focus: () => {
-				X.value && G(k(X.value));
+			focus: (e) => {
+				X.value && G(O(X.value), !1, e);
 			},
 			scrollToMinutes: () => {}
 		}), (e, t) => (v(), f("div", {
 			ref_key: "rootEl",
-			ref: I,
+			ref: F,
 			class: "v-calendar-month",
-			"data-outside": C(L)?.outside ? "" : void 0,
-			style: _({ "--calendar-columns": String(M.value.length) })
-		}, [p("div", fe, [(v(!0), f(u, null, b(M.value, (e) => (v(), f("span", {
-			key: e,
+			"data-outside": S(I)?.outside ? "" : void 0,
+			style: _({ "--calendar-columns": String(j.value.length) }),
+			onFocusout: t[4] ||= (...e) => S(U) && S(U)(...e)
+		}, [p("div", pe, [(v(!0), f(u, null, b(j.value, (e, t) => (v(), f("span", {
+			key: t,
 			class: "v-calendar-weekday v-calendar-month-weekday"
-		}, S(e), 1))), 128))]), p("div", {
+		}, x(e), 1))), 128))]), p("div", {
 			ref_key: "gridEl",
-			ref: F,
+			ref: P,
 			class: "v-calendar-month-grid v-calendar-edge-cue",
 			role: "grid",
 			"aria-label": m.label,
-			"data-edge": C(be),
-			onKeydown: ke,
-			onPointerdown: Ae,
-			onPointermove: t[0] ||= (...e) => C(V) && C(V)(...e),
-			onPointerup: t[1] ||= (...e) => C(H) && C(H)(...e),
-			onPointercancel: t[2] ||= (...e) => C(U) && C(U)(...e),
-			onPointerleave: t[3] ||= (...e) => C(W) && C(W)(...e),
-			onClick: Pe
+			"data-edge": S(xe),
+			onKeydown: Ae,
+			onPointerdown: je,
+			onPointermove: t[0] ||= (...e) => S(z) && S(z)(...e),
+			onPointerup: t[1] ||= (...e) => S(B) && S(B)(...e),
+			onPointercancel: t[2] ||= (...e) => S(V) && S(V)(...e),
+			onPointerleave: t[3] ||= (...e) => S(H) && S(H)(...e),
+			onClick: Fe
 		}, [(v(!0), f(u, null, b(m.weeks, (t, n) => (v(), f("div", {
 			key: t[0]?.iso ?? n,
 			role: "row",
 			class: "v-calendar-month-week"
 		}, [(v(!0), f(u, null, b(t, (t) => (v(), f("div", {
-			id: k(t.iso),
+			id: O(t.iso),
 			key: t.iso,
 			role: "gridcell",
 			class: "v-calendar-cell v-calendar-month-cell",
 			"data-iso": t.iso,
 			"data-adjacent": t.adjacent ?? void 0,
 			tabindex: X.value === t.iso ? 0 : -1,
-			"aria-label": P(t.iso)
+			"aria-label": N(t.iso),
+			"aria-keyshortcuts": "Shift+Enter"
 		}, [
 			p("button", {
 				type: "button",
 				class: se(["v-calendar-button v-calendar-month-day", { "v-calendar-today": t.iso === m.today }]),
 				tabindex: "-1",
-				"aria-label": C(O).calendar.openDay(P(t.iso)),
-				onClick: (e) => E("day-activate", t.iso)
-			}, S(ve(t.iso)), 11, he),
+				"aria-label": S(D).calendar.openDay(N(t.iso)),
+				onClick: (e) => T("day-activate", t.iso)
+			}, x(ye(t.iso)), 11, ge),
 			(v(!0), f(u, null, b(J(t.iso).shown, (t) => (v(), ie(i, g({
 				key: t.event.id,
 				class: "v-calendar-month-chip",
@@ -255,9 +264,9 @@ var de = ["data-outside"], fe = {
 				layout: "chip",
 				disabled: m.disabled,
 				"time-text": t.timeText
-			}, { ref_for: !0 }, C(we)(t.event.id), { onClick: (e) => Ne(t.event) }), oe({ _: 2 }, [e.$slots.event ? {
+			}, { ref_for: !0 }, S(Te)(t.event.id), { onClick: (e) => Pe(t.event) }), oe({ _: 2 }, [e.$slots.event ? {
 				name: "default",
-				fn: ue((t) => [x(e.$slots, "event", g({ ref_for: !0 }, t))]),
+				fn: de((t) => [ce(e.$slots, "event", g({ ref_for: !0 }, t))]),
 				key: "0"
 			} : void 0]), 1040, [
 				"event",
@@ -270,12 +279,12 @@ var de = ["data-outside"], fe = {
 				type: "button",
 				class: "v-calendar-button v-calendar-month-more",
 				tabindex: "-1",
-				onClick: (e) => E("day-activate", t.iso)
-			}, S(C(O).calendar.moreEvents(J(t.iso).hidden)), 9, ge)) : ae("", !0)
-		], 8, me))), 128))]))), 128))], 40, pe)], 12, de));
+				onClick: (e) => T("day-activate", t.iso)
+			}, x(S(D).calendar.moreEvents(J(t.iso).hidden)), 9, _e)) : ae("", !0)
+		], 8, he))), 128))]))), 128))], 40, me)], 44, fe));
 	}
 });
 //#endregion
-export { w as default };
+export { C as default };
 
 //# sourceMappingURL=VCalendarMonth.vue_vue_type_script_setup_true_lang.js.map