npm - vectis-ui - Versions diffs - 0.1.0 → 0.8.0 - Mend

vectis-ui 0.1.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (475) hide show

package/dist/components/VCalendar/VCalendarMonth.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VCalendarMonth.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"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 /\nimport { computed, nextTick, ref, useId, watch } from 'vue'\n\nimport { formatDisplay as formatDate } from '../../utils/date'\nimport { isRtl as isElementRtl } from '../../utils/direction'\nimport { clamp } from '../../utils/number'\nimport { formatDisplay as formatTimeDisplay, type HourFormat } from '../../utils/time'\n\nimport { useMessages } from '../../i18n/state'\n\nimport VCalendarEvent from './VCalendarEvent.vue'\nimport { calendarIntent } from './keyboard'\nimport { EDGE_BAND, useEdgeStep } from './edgeStep'\nimport {\n DRAG_THRESHOLD,\n eventsByDay,\n inlineEdgeAt,\n isAllDayEvent,\n moveEventToDay,\n pointToMonthCell,\n pointWithin,\n timesOf,\n type MonthCell,\n} from './layout'\nimport type { CalendarEvent, CalendarEventId, CalendarEventTimes } 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 hourFormat: HourFormat\n today: string \| null\n /* How many events a day shows before it starts counting the rest. /\n eventLimit: number\n /* Whether events can be moved from one day to another. /\n editable: 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. /\n 'cell-activate': [iso: string]\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: {\n event: E\n layout: 'block' \| 'chip'\n timeText: string\n continuesBefore: boolean\n continuesAfter: boolean\n }): unknown\n}>()\n\nconst m = useMessages()\nconst uid = useId()\n\nconst cellId = (iso: string) => `${uid}-m-${iso}`\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) => formatDate(cell.iso, props.locale, { weekday: 'short' })),\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 the drag re-renders the whole grid on every `pointermove` through `gesture.preview`.\n * The map 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 week of props.weeks) {\n for (const cell of week) {\n map.set(cell.iso, {\n number: formatDate(cell.iso, props.locale, { day: 'numeric' }),\n long: formatDate(cell.iso, props.locale, {\n weekday: 'long',\n day: 'numeric',\n month: 'long',\n }),\n })\n }\n }\n return map\n})\n\nconst dayNumber = (iso: string) =>\n dayLabels.value.get(iso)?.number ?? formatDate(iso, props.locale, { day: 'numeric' })\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 formatDate(iso, props.locale, { weekday: 'long', day: 'numeric', month: 'long' })\n\n/ ------------------------------------------------------------------- the gesture /\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 {\n id: CalendarEventId\n /* Where the event was when the gesture began — every frame is computed from THIS. /\n origin: CalendarEventTimes\n /* What the chip shows right now. The model is not touched until the gesture ends. /\n preview: CalendarEventTimes\n pointerId: number \| null\n originX: number\n originY: number\n /* Which square the pointer took hold in, so a long bar does not jump under it. /\n grabIndex: number\n /\n Where the pointer last was — needed because turning the month moves the squares under a\n * hand that is holding still, and the chip has to be worked out again against the new ones.\n /\n lastX: number\n lastY: number\n moved: boolean\n /\n Whether the pointer is off the month altogether — over the toolbar, or over the page beside\n * it. Letting go here abandons the gesture and writes nothing.\n \n A KEYBOARD grab can never set it: `onPointermove` is the only writer, and it returns on the\n * id mismatch before reaching that line — a grab's `pointerId` is null.\n /\n outside: boolean\n}\n\nconst gesture = ref<Gesture \| null>(null)\nconst grabbing = computed(() => gesture.value !== null && gesture.value.pointerId === null)\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\n/\n The id the faded echo of a dragged chip carries.\n \n It must DIFFER from the event's own, or the two would collide in the map the day grouping\n * keys by id. The original is recovered from it and handed to the card as `ghostOf`, because\n * the colour of an event is derived from its id — under a fresh one the echo would come out\n * a different colour from the chip it belongs to.\n /\nconst GHOST_PREFIX = '__vectis-calendar-ghost__'\nconst ghostIdOf = (id: CalendarEventId) => `${GHOST_PREFIX}${id}`\nconst originalIdOf = (id: CalendarEventId) => String(id).slice(GHOST_PREFIX.length)\nconst isGhostId = (id: CalendarEventId) => String(id).startsWith(GHOST_PREFIX)\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 /\nconst drawnEvents = computed<E[]>(() => {\n const state = gesture.value\n if (!state) return props.events\n\n const moving = props.events.map((item) =>\n item.id === state.id ? ({ ...item, ...state.preview } as E) : item,\n )\n\n /\n * The faded echo of where the chip started, so the reader can see what they are moving it\n * FROM. Added only once the drag has travelled, or a click would flash a second chip in\n * the same day.\n \n Nothing has to be held out of a layout here, unlike the time grid: a month cell simply\n * stacks its chips, so the echo takes its own line in the day it came from and disturbs\n * nothing.\n /\n const original = state.moved ? props.events.find((item) => item.id === state.id) : undefined\n if (!original) return moving\n\n return [...moving, { ...original, ...state.origin, id: ghostIdOf(state.id) } as E]\n})\n\n/* Every day's events, worked out once rather than once per chip. /\nconst byDay = computed(() =>\n eventsByDay(\n drawnEvents.value,\n props.weeks.flatMap((week) => week.map((cell) => cell.iso)),\n ),\n)\n\nconst eventsById = computed(() => new Map(drawnEvents.value.map((item) => [item.id, item])))\n\nconst shownOf = (iso: string) => (byDay.value.get(iso) ?? []).slice(0, props.eventLimit)\nconst hiddenOf = (iso: string) =>\n Math.max(0, (byDay.value.get(iso) ?? []).length - props.eventLimit)\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 /\nfunction timeTextOf(event: E): string {\n if (isAllDayEvent(event)) return ''\n return formatTimeDisplay(event.startTime, props.locale, props.hourFormat)\n}\n\n/* The flattened list of days, which is what the arrows travel along. /\nconst flat = computed(() => props.weeks.flat().map((cell) => cell.iso))\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 void nextTick(() => document.getElementById(cellId(iso))?.focus())\n}\n\nconst tabbable = computed(() =>\n flat.value.includes(focused.value) ? focused.value : (flat.value[0] ?? null),\n)\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 // 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 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 = props.weeks[0]?.length ?? 1\n\n if (intent.kind === 'moveFocus') {\n /\n * The same table serves both views, so its two axes are read differently here: a\n * sideways step is one day, and a vertical one is a whole week rather than an hour.\n * That is the only place the month reinterprets it, and it is why the table returns a\n * direction rather than a date.\n /\n const delta = intent.days !== 0 ? intent.days : Math.sign(intent.minutes) columns\n const next = flat.value[clamp(index + delta, 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', iso)\n }\n}\n\n/* ------------------------------------------------------- the gesture, by pointer /\n\nconst isRtl = () => isElementRtl(gridEl.value)\n\n/* The grid as the pure geometry wants it: plain numbers, no element. /\nfunction geometryOf(rect: DOMRect) {\n const rtl = isRtl()\n return {\n top: rect.top,\n height: rect.height,\n inlineStart: rtl ? rect.right : rect.left,\n inlineSize: rect.width,\n columns: props.weeks[0]?.length ?? 1,\n rows: props.weeks.length \|\| 1,\n }\n}\n\n/* Which of the flattened squares a point falls on. /\nfunction indexAt(x: number, y: number): number \| null {\n const rect = gridEl.value?.getBoundingClientRect()\n if (!rect) return null\n const cell = pointToMonthCell({ x, y }, geometryOf(rect), isRtl())\n const columns = props.weeks[0]?.length ?? 1\n return cell.rowIndex columns + cell.columnIndex\n}\n\nconst edge = useEdgeStep(\n (direction) => emit('step', direction),\n () => props.edgeStepDelay,\n)\n\n/** Which edge is counting down, in words, for the stylesheet to light up. /\nconst edgeCue = computed(() =>\n edge.pending.value === -1 ? 'start' : edge.pending.value === 1 ? 'end' : undefined,\n)\n\n/\n * Turning the month swaps every square out from under a live drag, and the chip's day is then\n * a different one — it would vanish until the next pointer move, which never comes if the hand\n * is holding still against the edge. Re-applying the last position once the new month is\n * rendered is what carries the chip across the boundary.\n /\nwatch(\n () => props.weeks,\n () => {\n const state = gesture.value\n if (state?.moved) applyPoint(state)\n },\n { flush: 'post' },\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 if (!card) return\n const item = eventsById.value.get(cardIdOf(card))\n const index = indexAt(event.clientX, event.clientY)\n if (!item \|\| index === null) return\n\n gesture.value = {\n id: item.id,\n origin: timesOf(item),\n preview: timesOf(item),\n pointerId: event.pointerId,\n originX: event.clientX,\n originY: event.clientY,\n grabIndex: index,\n lastX: event.clientX,\n lastY: event.clientY,\n moved: false,\n outside: false,\n }\n\n /\n * @fallback — captured on the GRID rather than on the chip, because a chip is redrawn on\n * another day the moment the drag starts and a captured element that moves takes the\n * pointer with it. Wrapped because a pointer event fired by a TEST refers to no real\n * pointer and the call then throws; failing to capture only means the drag stops at the\n * edge, which no test is checking.\n /\n try {\n gridEl.value?.setPointerCapture(event.pointerId)\n } catch {\n / a synthetic pointer: nothing to capture /\n }\n}\n\n/* The event a chip stands for, read back off the attribute the card publishes. /\nfunction cardIdOf(card: HTMLElement): CalendarEventId {\n const raw = card.dataset.eventId ?? ''\n // An id may be a number and an attribute is always text; the map is keyed by the original.\n return eventsById.value.has(raw) ? raw : Number(raw)\n}\n\nfunction onPointermove(event: PointerEvent) {\n const state = gesture.value\n if (!state \|\| state.pointerId !== event.pointerId) return\n\n state.lastX = event.clientX\n state.lastY = event.clientY\n\n if (\n !state.moved &&\n Math.abs(event.clientX - state.originX) < DRAG_THRESHOLD &&\n Math.abs(event.clientY - state.originY) < DRAG_THRESHOLD\n ) {\n return\n }\n\n state.moved = true\n state.outside = isPointerOutside(state)\n applyPoint(state)\n\n const rect = gridEl.value?.getBoundingClientRect()\n if (rect) edge.watchEdge(inlineEdgeAt(state.lastX, geometryOf(rect), EDGE_BAND, isRtl()))\n}\n\n/\n Whether the pointer has left the month's own box.\n \n Measured against the ROOT and not against `gridEl`, whose rect leaves out the row of weekday\n * names above it — the month's own version of the all-day band the time grid has to include, and\n * the same mistake to make. The rect goes in raw, never through `geometryOf`: containment has no\n * reading direction, where `inlineStart` is the right edge in a right-to-left page.\n \n Neither `applyPoint` nor the edge watch is gated on the result — see the twin of this function\n * in VCalendarTimeGrid.vue, which carries the reasoning for both.\n /\nfunction isPointerOutside(state: Gesture): boolean {\n const rect = rootEl.value?.getBoundingClientRect()\n return rect ? !pointWithin({ x: state.lastX, y: state.lastY }, rect) : false\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) {\n const index = indexAt(state.lastX, state.lastY)\n if (index === null) return\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) state.preview = moveEventToDay(state.origin, target)\n}\n\nlet justDragged = false\n\n/\n Closes the books on whatever gesture came before, at the start of a new press — without which\n * the flag can be left standing and swallow a deliberate click on some chip, long after the drag\n * that raised it. The month cannot reach that on its own, having no gesture that runs without\n * `editable`; it is kept in step with the time grid, whose twin of this function carries the\n * reasoning, so the two cannot answer a press differently.\n /\nfunction endLastGesture() {\n justDragged = false\n}\n\nfunction onPointerup(event: PointerEvent) {\n const state = gesture.value\n if (!state \|\| state.pointerId !== event.pointerId) return\n gesture.value = null\n justDragged = state.moved\n edge.cancel()\n\n // Let go off the month altogether: nothing is written and the chip goes back where it was.\n // `justDragged` above still matters, and the two revert paths must stay apart — the twin of\n // this branch in VCalendarTimeGrid.vue carries the reasoning for both.\n if (state.outside) return\n\n if (!state.moved) return\n emit('event-drop', state.id, state.preview, 'move')\n}\n\nfunction onPointercancel() {\n // The gesture was taken away. Nothing is written: the chip goes back to where the model\n // still says it is.\n gesture.value = null\n edge.cancel()\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 (justDragged) {\n justDragged = false\n return\n }\n emit('event-activate', item)\n}\n\n/ ------------------------------------------------------ the gesture, by keyboard /\n\nfunction announceMoved(title: string, times: CalendarEventTimes) {\n emit('announce', m.value.calendar.movedTo(title, longDay(times.start)))\n}\n\nfunction refocusCard(id: CalendarEventId) {\n void nextTick(() => {\n /\n * Walked rather than selected, for the reason spelled out at the twin of this function in\n * VCalendarTimeGrid.vue: a consumer's id may need escaping, and `CSS.escape` is unavailable\n * in jsdom — where the throw lands inside a `nextTick`, so it surfaces as an unhandled\n * rejection rather than as a failing test.\n /\n const cards = gridEl.value?.querySelectorAll<HTMLElement>('.v-calendar-event')\n Array.from(cards ?? [])\n .find((card) => card.dataset.eventId === String(id))\n ?.focus()\n })\n}\n\n/\n A chip answers a different table from the grid it sits in — that is what a grab mode IS.\n * Without it the month would offer a gesture the pointer alone could reach, which is the\n * WCAG 2.1.1 failure the time grid already avoids.\n /\nfunction onCardKeydown(event: KeyboardEvent, card: HTMLElement) {\n const item = eventsById.value.get(cardIdOf(card))\n if (!item) return\n\n const held = grabbing.value && gesture.value?.id === item.id\n const intent = calendarIntent(event.key, event.shiftKey, held ? 'grabbed' : 'event', 1, isRtl())\n if (!intent) return\n\n if (!held) {\n if (intent.kind !== 'activate' \|\| !props.editable) return\n // Enter is also how a button is pressed: without this the same keystroke would take hold\n // of the event and open it at once.\n event.preventDefault()\n gesture.value = {\n id: item.id,\n origin: timesOf(item),\n preview: timesOf(item),\n pointerId: null,\n originX: 0,\n originY: 0,\n grabIndex: 0,\n // There is no pointer to remember; the arrows work off the preview, not off a position.\n lastX: 0,\n lastY: 0,\n moved: false,\n outside: false,\n }\n emit('announce', m.value.calendar.grabbed)\n return\n }\n\n const state = gesture.value!\n event.preventDefault()\n\n // A month has no hours to stretch, so Shift with an arrow is simply not a gesture here.\n if (intent.kind === 'grabMove') {\n const days = flat.value\n const columns = props.weeks[0]?.length ?? 1\n // The same reinterpretation the cell arrows make: sideways is a day, vertical is a week.\n const delta = intent.days !== 0 ? intent.days : Math.sign(intent.minutes) columns\n const from = days.indexOf(state.preview.start)\n const target = days[clamp(from + delta, 0, days.length - 1)]\n if (!target) return\n state.preview = moveEventToDay(state.preview, target)\n state.moved = true\n announceMoved(item.title, state.preview)\n refocusCard(state.id)\n return\n }\n\n if (intent.kind === 'activate') {\n gesture.value = null\n if (state.moved) emit('event-drop', state.id, state.preview, 'move')\n emit('announce', m.value.calendar.dropped)\n refocusCard(state.id)\n return\n }\n\n if (intent.kind === 'cancel') {\n gesture.value = null\n emit('announce', m.value.calendar.reverted)\n refocusCard(state.id)\n }\n}\n\nfunction focus() {\n if (tabbable.value) document.getElementById(cellId(tabbable.value))?.focus()\n}\n\ndefineExpose({ focus, scrollToMinutes: () => {} })\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 v-for=\"name in weekdayNames\" :key=\"name\" class=\"v-calendar-month-weekday\">\n {{ name }}\n </span>\n </div>\n\n <div\n ref=\"gridEl\"\n class=\"v-calendar-month-grid\"\n role=\"grid\"\n :aria-label=\"label\"\n :data-gesture=\"gesture ? '' : undefined\"\n :data-edge=\"edgeCue\"\n @keydown=\"onKeydown\"\n @pointerdown=\"onGridPointerdown\"\n @pointermove=\"onPointermove\"\n @pointerup=\"onPointerup\"\n @pointercancel=\"onPointercancel\"\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-month-cell\"\n :data-iso=\"cell.iso\"\n :data-adjacent=\"cell.adjacent ?? undefined\"\n :data-today=\"cell.iso === today ? '' : undefined\"\n :tabindex=\"tabbable === cell.iso ? 0 : -1\"\n :aria-label=\"longDay(cell.iso)\"\n >\n <button\n type=\"button\"\n class=\"v-calendar-month-day\"\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=\"item in shownOf(cell.iso)\"\n :key=\"item.id\"\n class=\"v-calendar-month-chip\"\n :event=\"item\"\n layout=\"chip\"\n :time-text=\"timeTextOf(item)\"\n :dragging=\"gesture?.id === item.id && gesture.pointerId !== null\"\n :rejected=\"gesture?.id === item.id && gesture.outside\"\n :grabbed=\"grabbing && gesture?.id === item.id\"\n :hint-id=\"editable && !isGhostId(item.id) ? hintId : undefined\"\n :ghost-of=\"isGhostId(item.id) ? originalIdOf(item.id) : undefined\"\n @click=\"onCardClick(item)\"\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=\"hiddenOf(cell.iso) > 0\"\n type=\"button\"\n class=\"v-calendar-month-more\"\n tabindex=\"-1\"\n @click=\"emit('day-activate', cell.iso)\"\n >\n {{ m.calendar.moreEvents(hiddenOf(cell.iso)) }}\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 overflow: auto;\n block-size: 100%;\n min-block-size: 0;\n font-family: var(--vectis-text-family);\n color: var(--vectis-color-text);\n }\n\n /* A drag currently held off the month. Best-effort only, and never the signal — the twin rule\n in VCalendarTimeGrid.vue carries the reasoning. /\n .v-calendar-month[data-outside] {\n cursor: not-allowed;\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 .v-calendar-month-head {\n position: sticky;\n inset-block-start: 0;\n z-index: 1;\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 color: var(--vectis-color-text-muted);\n font-size: var(--vectis-text-overline-size);\n font-weight: var(--vectis-text-overline-weight);\n letter-spacing: var(--vectis-text-overline-tracking);\n text-align: center;\n text-transform: uppercase;\n }\n\n / The strip that lights up while a drag rests against an edge, counting down to turn the\n month. Its width is `--vectis-control-size-calendar-edge`, whose twin is `EDGE_BAND` in\n `edgeStep.ts` — the JavaScript deciding where that countdown actually starts. /\n .v-calendar-month-grid[data-edge]::after {\n content: '';\n position: absolute;\n inset-block: 0;\n inline-size: var(--vectis-control-size-calendar-edge);\n background: var(--vectis-color-accent-surface);\n z-index: 1;\n pointer-events: none;\n }\n\n .v-calendar-month-grid[data-edge='start']::after {\n inset-inline-start: 0;\n }\n\n .v-calendar-month-grid[data-edge='end']::after {\n inset-inline-end: 0;\n }\n\n .v-calendar-month-grid {\n / The strip above 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 border-block-start: 1px solid var(--vectis-color-border);\n border-inline-start: 1px solid var(--vectis-color-border);\n cursor: pointer;\n }\n\n .v-calendar-month-cell:first-child {\n border-inline-start: none;\n }\n\n .v-calendar-month-cell:focus-visible {\n outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n / Inwards: the month scrolls, and an outward ring on a cell at the edge would be cropped. /\n outline-offset: calc(-1 var(--vectis-focus-ring-width));\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 / A button carries a border from the browser, which around a round day number reads as a\n stray ring. It goes together with the background, and neither is optional. /\n border: none;\n border-radius: var(--vectis-radius-pill);\n background: none;\n color: inherit;\n font-family: inherit;\n font-size: var(--vectis-text-body-md-size);\n cursor: pointer;\n transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n }\n\n .v-calendar-month-day:hover {\n background: var(--vectis-color-surface-muted);\n }\n\n .v-calendar-month-day:focus-visible {\n outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n outline-offset: var(--vectis-focus-ring-offset);\n }\n\n / Semibold here marks a state — which day is today — and is not a type role. /\n .v-calendar-month-cell[data-today] .v-calendar-month-day {\n background: var(--vectis-color-accent);\n color: var(--vectis-color-text-on-accent);\n font-weight: var(--vectis-font-weight-semibold);\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 border: none;\n background: none;\n color: var(--vectis-color-text-muted);\n font-family: inherit;\n font-size: var(--vectis-text-caption-size);\n text-align: start;\n cursor: pointer;\n }\n\n .v-calendar-month-more:hover {\n color: var(--vectis-color-text);\n text-decoration: underline;\n }\n\n .v-calendar-month-more:focus-visible {\n outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n outline-offset: var(--vectis-focus-ring-offset);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .v-calendar-month-day {\n transition: none;\n }\n }\n}\n</style>\n"],"mappings":"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"}
1	+ {"version":3,"file":"VCalendarMonth.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmEA,IAAM,IAAQ,GAER,IAAO,GAcP,IAAU,GAAmB,GAAC,SAA6B,GAM3D,IAAI,EAAY,GAChB,KAAM,GAAM,GAEZ,KAAU,MAAgB,GAAG,GAAI,KAAK,KAGtC,IAAO,QAAe,EAAM,MAAM,KAAK,CAAC,CAAC,KAAK,MAAS,EAAK,GAAG,CAAC,GAChE,IAAc,QAAe,EAAM,MAAM,EAAE,EAAE,UAAU,CAAC,GAGxD,IAAe,SAClB,EAAM,MAAM,MAAM,CAAC,EAAA,CAAG,KAAK,MAC1B,EAAkB,EAAK,KAAK,EAAM,QAAQ,EAAE,SAAS,QAAQ,CAAC,CAChE,CACF,GAUM,IAAY,QAAe;GAC/B,IAAM,oBAAM,IAAI,IAA8C;GAC9D,KAAK,IAAM,KAAO,EAAK,OACrB,EAAI,IAAI,GAAK;IACX,QAAQ,EAAkB,GAAK,EAAM,QAAQ,EAAE,KAAK,UAAU,CAAC;IAC/D,MAAM,EAAkB,GAAK,EAAM,QAAQ;KACzC,SAAS;KACT,KAAK;KACL,OAAO;IACT,CAAC;GACH,CAAC;GAEH,OAAO;EACT,CAAC,GAEK,MAAa,MAAgB,EAAU,MAAM,IAAI,CAAG,CAAC,EAAE,UAAU,IAOjE,KAAW,MACf,EAAU,MAAM,IAAI,CAAG,CAAC,EAAE,QAC1B,EAAkB,GAAK,EAAM,QAAQ;GAAE,SAAS;GAAQ,KAAK;GAAW,OAAO;EAAO,CAAC,GAanF,IAAS,EAAwB,IAAI,GAErC,IAAS,EAAwB,IAAI,GAErC,EACJ,YACA,iBACA,aACA,UACA,WACA,mBACA,gBACA,kBACA,gBACA,oBACA,mBACA,mBACA,cACA,cACA,kBACE,GAA+B;GACjC,cAAc,EAAM;GACpB,UAAU,MAAsB,EAAW,MAAM,IAAI,CAAE;GAGvD;GAGA,WAAW;GACX,WAAW;GACX,eAAe,EAAY;GAC3B,gBAAgB,EAAM;GACtB,cAAc,EAAM;GAGpB,mBAAmB;GACnB,qBAAqB,EAAM;GAC3B,cAAc,EAAM;GACpB;GACA,SAAS,MAAU,EAAK,cAAc,EAAM,IAAI,EAAM,SAAS,MAAM;GACrE,OAAO,MACL,EAAM,WACF;IACE,IAAI,EAAK;IACT,QAAQ,EAAQ,CAAI;IACpB,WAAW;IACX,SAAS;IACT,SAAS;IAET,WAAW;GACb,IACA;GACN;GACA,OAAO,MAAU,EAAK,QAAQ,CAAK;GACnC,WAAW,MAAY,EAAK,YAAY,CAAO;EACjD,CAAC,GAWK,IAAc,QAAqB,EAAQ,QAAQ,GAAY,EAAM,MAAM,IAAI,EAAM,MAAO,GAG5F,KAAQ,QAAe,EAAY,EAAY,OAAO,EAAK,KAAK,CAAC,GAEjE,IAAa,QACX,IAAI,IAAwB,EAAY,MAAM,KAAK,MAAS,CAAC,EAAK,IAAI,CAAI,CAAC,CAAC,CACpF,GAUM,KAAa,QAAe;GAChC,IAAM,EAAE,WAAQ,cAAW,GACrB,oBAAQ,IAAI,IAAoB;GACtC,QAAQ,MAAqB;IAC3B,IAAI,EAAc,CAAK,GAAG,OAAO;IACjC,IAAI,IAAO,EAAM,IAAI,EAAM,SAAS;IAKpC,OAJI,MAAS,KAAA,MACX,IAAO,EAAkB,EAAM,WAAW,GAAQ,CAAM,GACxD,EAAM,IAAI,EAAM,WAAW,CAAI,IAE1B;GACT;EACF,CAAC,GAiBK,KAAY,QAAe;GAC/B,IAAM,oBAAM,IAAI,IAA+C,GACzD,IAAS,GAAW,OACpB,IAAQ,EAAM;GACpB,KAAK,IAAM,CAAC,GAAK,MAAQ,GAAM,OAAO;IACpC,IAAM,IAAQ,EAAI,SAAS,IAAQ,EAAI,MAAM,GAAG,CAAK,IAAI;IACzD,EAAI,IAAI,GAAK;KACX,OAAO,EAAM,KAAK,OAAW;MAAE;MAAO,UAAU,EAAO,CAAK;KAAE,EAAE;KAChE,QAAQ,KAAK,IAAI,GAAG,EAAI,SAAS,CAAK;IACxC,CAAC;GACH;GACA,OAAO;EACT,CAAC,GAGK,KAA+C,OAAO,OAAO;GAAE,OAAO,CAAC;GAAG,QAAQ;EAAE,CAAC,GACrF,KAAe,MAAgB,GAAU,MAAM,IAAI,CAAG,KAAK;EAEjE,SAAS,EAAY,GAAa;GAIhC,AAHA,EAAQ,QAAQ,GAGhB,EAAU,EAAO,CAAG,GAAG,EAAI;EAC7B;EAEA,IAAM,IAAW,QACf,EAAK,MAAM,SAAS,EAAQ,KAAK,IAAI,EAAQ,QAAS,EAAK,MAAM,MAAM,IACzE,GAOM,KAAW,GAAc,MAC7B,MAAS,IAAW,KAAK,KAAK,CAAO,IAAI,EAAY,QAAxC;EAEf,SAAS,GAAU,GAAsB;GACvC,IAAM,IAAS,EAAM,QAIf,IAAO,GAAQ,QAAqB,mBAAmB;GAC7D,IAAI,GAAM;IACR,GAAc,GAAO,CAAI;IACzB;GACF;GAEA,IAAM,IAAO,GAAQ,QAAqB,wBAAwB;GAClE,IAAI,CAAC,GAAM;GAEX,IAAM,IAAS,GAAe,EAAM,KAAK,EAAM,UAAU,QAAQ,GAAG,EAAM,CAAC;GAC3E,IAAI,CAAC,GAAQ;GAEb,IAAM,IAAM,EAAK,QAAQ,KACnB,IAAQ,EAAK,MAAM,QAAQ,CAAG,GAC9B,IAAU,EAAY;GAE5B,IAAI,EAAO,SAAS,aAAa;IAC/B,IAAM,IACJ,EAAK,MAAM,EAAM,IAAQ,EAAQ,EAAO,MAAM,EAAO,OAAO,GAAG,GAAG,EAAK,MAAM,SAAS,CAAC;IACzF,IAAI,CAAC,GAAM;IAEX,AADA,EAAM,eAAe,GACrB,EAAY,CAAI;IAChB;GACF;GAEA,IAAI,EAAO,SAAS,WAAW;IAC7B,IAAM,IAAM,KAAK,MAAM,IAAQ,CAAO,GAChC,IAAO,EAAO,SAAS,UAAU,IAAM,IAAU,IAAM,IAAU,IAAU,GAC3E,IAAO,EAAK,MAAM,EAAM,GAAM,GAAG,EAAK,MAAM,SAAS,CAAC;IAC5D,IAAI,CAAC,GAAM;IAEX,AADA,EAAM,eAAe,GACrB,EAAY,CAAI;IAChB;GACF;GAEA,IAAI,EAAO,SAAS,UAAU;IAE5B,AADA,EAAM,eAAe,GACrB,EAAK,QAAQ,EAAO,KAAK;IACzB;GACF;GAEA,AAAI,EAAO,SAAS,eAClB,EAAM,eAAe,GACrB,EAAK,iBAAiB;IAAE,MAAM;IAAK,SAAS;GAAK,CAAC;EAEtD;EAGA,SAAS,EAAQ,GAAW,GAAW,GAAe,GAAsB;GAC1E,IAAM,IAAO,EACX;IAAE;IAAG;GAAE,GACP;IAAE,GAAG,GAAe,GAAM,EAAY,OAAO,CAAG;IAAG,MAAM,EAAM,MAAM,UAAU;GAAE,GACjF,CACF;GACA,OAAO,EAAK,WAAW,EAAY,QAAQ,EAAK;EAClD;EAEA,SAAS,GAAkB,GAAqB;GAE9C,IADA,EAAe,GACX,EAAQ,SAAS,CAAC,EAAM,YAAY,EAAM,WAAW,GAAG;GAE5D,IAAM,IAAQ,EAAM,QAA+B,QAAqB,mBAAmB,GACrF,IAAO,IAAO,EAAW,MAAM,IAAI,GAAS,CAAI,CAAC,IAAI,KAAA,GACrD,IAAO,EAAO,OAAO,sBAAsB;GACjD,IAAI,CAAC,KAAQ,CAAC,GAAM;GACpB,IAAM,IAAM,EAAM;GAElB,GACE;IACE,IAAI,EAAK;IACT,QAAQ,EAAQ,CAAI;IACpB,WAAW,EAAM;IACjB,SAAS,EAAM;IACf,SAAS,EAAM;IACf,WAAW,EAAQ,EAAM,SAAS,EAAM,SAAS,GAAM,CAAG;GAC5D,GACA,CACF;EACF;EAQA,SAAS,GAAW,GAAgB,GAAe;GACjD,IAAM,IAAQ,EAAQ,EAAM,OAAO,EAAM,OAAO,GAAM,EAAM,GAAG,GACzD,IAAO;GACb,IAAI,GAAM,UAAU,KAAS,EAAK,UAAU,EAAM,SAAS,EAAK,UAAU,GAAO;GACjF,IAAc;IAAE;IAAO,OAAO,EAAM;IAAO;GAAM;GAQjD,IAAM,IAAO,EAAK,OACZ,IAAO,EAAK,QAAQ,EAAM,OAAO,KAAK,GACtC,IACJ,EACE,GAAO,MAAS,KAAK,EAAM,YAAY,KAAQ,IAAQ,EAAM,WAAW,GAAG,EAAK,SAAS,CAAC;GAE9F,IAAI,CAAC,GAAQ;GAKb,IAAM,IAAO,EAAe,EAAM,QAAQ,CAAM;GAChD,AAAK,GAAU,EAAM,SAAS,CAAI,MAAG,EAAM,UAAU;EACvD;EAQA,IAAI,IAA8E;EAGlF,SAAS,GAAW,GAAgB,GAAgB,GAAkB;GAEpE,IAAI,EAAK,SAAS,YAAY,OAAO;GACrC,IAAM,IAAO,EAAK,OAEZ,IAAS,EAAK,EADP,EAAK,QAAQ,EAAM,QAAQ,KACd,IAAO,EAAQ,EAAK,MAAM,EAAK,OAAO,GAAG,GAAG,EAAK,SAAS,CAAC;GAIrF,OAHK,KACL,EAAM,UAAU,EAAe,EAAM,SAAS,CAAM,GACpD,EAAK,YAAY,EAAE,MAAM,SAAS,QAAQ,EAAK,OAAO,EAAQ,EAAM,QAAQ,KAAK,CAAC,CAAC,GAC5E,MAHa;EAItB;EAEA,SAAS,GAAY,GAAS;GAGxB,EAAY,KAChB,EAAK,kBAAkB,CAAI;EAC7B;EAUA,SAAS,GAAY,GAAmB;GACtC,IAAM,IAAS,EAAM;GACrB,IAAI,GAAQ,QAAQ,2BAA2B,GAAG;GAClD,IAAM,IAAO,GAAQ,QAAqB,wBAAwB;GAC9D,CAAC,KAAQ,EAAY,KACzB,EAAK,iBAAiB;IAAE,MAAM,EAAK,QAAQ;IAAM,SAAS;GAAK,CAAC;EAClE;SAIA,EAAa;GAEX,aAAa;IACX,AAAI,EAAS,SAAO,EAAU,EAAO,EAAS,KAAK,CAAC;GACtD;GAEA,uBAAuB,CAAC;EAC1B,CAAC,mBAIC,EAsFM,OAAA;YArFA;GAAJ,KAAI;GACJ,OAAM;GACL,gBAAc,EAAA,CAAA,CAAO,EAAE,UAAO,KAAQ,KAAA;GACtC,OAAK,EAAA,EAAA,sBAA0B,OAAO,EAAA,MAAa,MAAM,EAAA,CAAA;MAE1D,EAQM,OARN,IAQM,EAAA,EAAA,EAAA,GAPJ,EAMO,GAAA,MAAA,EALU,EAAA,QAAR,YADT,EAMO,QAAA;GAJJ,KAAK;GACN,OAAM;OAEH,CAAI,GAAA,CAAA,cAIX,EAqEM,OAAA;YApEA;GAAJ,KAAI;GACJ,OAAM;GACN,MAAK;GACJ,cAAY,EAAA;GACZ,aAAW,EAAA,EAAA;GACF;GACT,eAAa;GACb,eAAW,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;GACb,aAAS,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;GACX,iBAAa,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;GACf,gBAAY,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;GACd,SAAO;cAER,EAsDM,GAAA,MAAA,EArDkB,EAAA,QAAd,GAAM,YADhB,EAsDM,OAAA;GApDH,KAAK,EAAI,EAAA,EAAK,OAAO;GACtB,MAAK;GACL,OAAM;cAEN,EA+CM,GAAA,MAAA,EA9CW,IAAR,YADT,EA+CM,OAAA;GA7CH,IAAI,EAAO,EAAK,GAAG;GACnB,KAAK,EAAK;GACX,MAAK;GACL,OAAM;GACL,YAAU,EAAK;GACf,iBAAe,EAAK,YAAY,KAAA;GAChC,UAAU,EAAA,UAAa,EAAK,MAAG,IAAA;GAC/B,cAAY,EAAQ,EAAK,GAAG;;GAE7B,EASS,UAAA;IARP,MAAK;IACL,OAAK,GAAA,CAAC,0CAAwC,EAAA,oBAChB,EAAK,QAAQ,EAAA,MAAK,CAAA,CAAA;IAChD,UAAS;IACR,cAAY,EAAA,CAAA,CAAC,CAAC,SAAS,QAAQ,EAAQ,EAAK,GAAG,CAAA;IAC/C,UAAK,MAAE,EAAI,gBAAiB,EAAK,GAAG;QAElC,GAAU,EAAK,GAAG,CAAA,GAAA,IAAA,EAAA;WAGvB,EAciB,GAAA,MAAA,EAbA,EAAY,EAAK,GAAG,CAAA,CAAE,QAA9B,YADT,GAciB,GAdjB,EAciB;IAZd,KAAK,EAAK,MAAM;IACjB,OAAM;IACL,OAAO,EAAK;IACb,QAAO;IACN,UAAU,EAAA;IACV,aAAW,EAAK;uBACT,EAAA,EAAA,CAAS,CAAC,EAAK,MAAM,EAAE,GAAA,EAC9B,UAAK,MAAE,GAAY,EAAK,KAAK,EAAA,CAAA,GAAA,GAAA,EAAA,GAAA,EAAA,GAAA,CAEdA,EAAAA,OAAO,QAAA;UAAQ;YAAS,MAAS,CAC/C,EAAwC,EAAA,QAAA,SAAxC,EAAwC,EAAA,SAAA,GAAA,GAAb,CAAS,CAAA,CAAA,CAAA;;;;;;;;GAKhC,EAAY,EAAK,GAAG,CAAA,CAAE,SAAM,KAAA,EAAA,GADpC,EAQS,UAAA;;IANP,MAAK;IACL,OAAM;IACN,UAAS;IACR,UAAK,MAAE,EAAI,gBAAiB,EAAK,GAAG;QAElC,EAAA,CAAA,CAAC,CAAC,SAAS,WAAW,EAAY,EAAK,GAAG,CAAA,CAAE,MAAM,CAAA,GAAA,GAAA,EAAA,KAAA,GAAA,IAAA,EAAA"}

package/dist/components/VCalendar/VCalendarTimeGrid.css CHANGED Viewed

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-calendar-grid{--calendar-hour:var(--vectis-control-size-calendar-hour);--calendar-gutter:var(--vectis-control-size-calendar-gutter);--calendar-hour-lift:calc(var(--vectis-text-caption-size) * var(--vectis-text-caption-leading) / 2);block-size:100%;min-block-size:0;font-family:var(--vectis-text-family);color:var(--vectis-color-text);position:relative;overflow:auto}.v-calendar-grid[data-outside]{cursor:not-allowed}.v-calendar-head,.v-calendar-canvas{grid-template-columns:var(--calendar-gutter) repeat(var(--calendar-columns), minmax(var(--vectis-control-size-calendar-day-min), 1fr));min-inline-size:min-content;display:grid}.v-calendar-head{z-index:4;background:var(--vectis-color-surface);border-block-end:1px solid var(--vectis-color-border);position:sticky;inset-block-start:0}.v-calendar-head-gutter{border-inline-end:1px solid var(--vectis-color-border)}.v-calendar-head-day{align-items:center;gap:var(--vectis-space-1);padding-block:var(--vectis-space-2);padding-inline:var(--vectis-space-1);flex-direction:column;display:flex}.v-calendar-head-weekday{color:var(--vectis-color-text-muted);font-size:var(--vectis-text-overline-size);font-weight:var(--vectis-text-overline-weight);letter-spacing:var(--vectis-text-overline-tracking);text-transform:uppercase}.v-calendar-head-number{inline-size:var(--vectis-control-height-sm);block-size:var(--vectis-control-height-sm);border-radius:var(--vectis-radius-pill);font-size:var(--vectis-text-body-lg-size);justify-content:center;align-items:center;display:flex}.v-calendar-head-day[data-today] .v-calendar-head-number{background:var(--vectis-color-accent);color:var(--vectis-color-text-on-accent);font-weight:var(--vectis-font-weight-semibold)}.v-calendar-allday-label{border-block-start:1px solid var(--vectis-color-border);border-inline-end:1px solid var(--vectis-color-border);color:var(--vectis-color-text-muted);font-size:var(--vectis-text-caption-size);line-height:var(--vectis-text-caption-leading);justify-content:end;align-items:start;padding-block-start:var(--vectis-space-1);padding-inline-end:var(--vectis-space-2);display:flex}.v-calendar-allday{grid-column:2/-1;grid-template-columns:repeat(var(--calendar-columns), minmax(var(--vectis-control-size-calendar-day-min), 1fr));grid-template-rows:repeat(var(--calendar-lanes), var(--vectis-control-size-calendar-allday-lane));max-block-size:var(--vectis-control-size-calendar-allday-max);padding-block:var(--vectis-space-1);border-block-start:1px solid var(--vectis-color-border);gap:1px;display:grid;overflow-y:auto}.v-calendar-bar{grid-column:calc(var(--event-day) + 1) / span var(--event-span);grid-row:calc(var(--event-lane) + 1);min-inline-size:0}.v-calendar-hours{grid-auto-rows:var(--calendar-hour);border-inline-end:1px solid var(--vectis-color-border);display:grid}.v-calendar-hour{color:var(--vectis-color-text-muted);font-size:var(--vectis-text-caption-size);line-height:var(--vectis-text-caption-leading);text-align:end;align-self:start;margin-block-start:calc(-1 * var(--calendar-hour-lift));padding-inline-end:var(--vectis-space-2);position:relative}.v-calendar-hour:before{content:"";inline-size:var(--vectis-control-size-calendar-tick);border-block-start:1px solid var(--vectis-color-border);position:absolute;inset-block-start:var(--calendar-hour-lift);inset-inline-end:0}.v-calendar-hour:first-child{visibility:hidden}.v-calendar-row:first-child .v-calendar-cell{border-block-start:none}.v-calendar-columns{grid-column:2/-1;grid-template-columns:repeat(var(--calendar-columns), minmax(var(--vectis-control-size-calendar-day-min), 1fr));grid-auto-rows:var(--calendar-hour);display:grid;position:relative}.v-calendar-columns[data-edge]:after{content:"";inline-size:var(--vectis-control-size-calendar-edge);background:var(--vectis-color-accent-surface);z-index:2;pointer-events:none;position:absolute;inset-block:0}.v-calendar-columns[data-edge=start]:after{inset-inline-start:0}.v-calendar-columns[data-edge=end]:after{inset-inline-end:0}.v-calendar-row{display:contents}.v-calendar-cell{border-block-start:1px solid var(--vectis-color-border);border-inline-start:1px solid var(--vectis-color-border);cursor:pointer}.v-calendar-cell:first-child{border-inline-start:none}.v-calendar-cell:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:calc(-1 * var(--vectis-focus-ring-width))}.v-calendar-cell[data-today]{background:var(--vectis-color-accent-surface)}.v-calendar-block{block-size:calc((var(--event-end) - var(--event-start)) * 100%);inline-size:calc(var(--event-span) / var(--event-columns) / var(--calendar-columns) * 100% - 2px);z-index:1;position:absolute;inset-block-start:calc(var(--event-start) * 100%);inset-inline-start:calc((var(--event-day) + var(--event-column) / var(--event-columns)) / var(--calendar-columns) * 100%)}.v-calendar-now{inline-size:calc(100% / var(--calendar-columns));border-block-start:1px solid var(--vectis-color-danger);z-index:2;pointer-events:none;position:absolute;inset-block-start:calc(var(--calendar-now) * 100%);inset-inline-start:calc(var(--event-day) / var(--calendar-columns) * 100%)}.v-calendar-now:before{content:"";inline-size:var(--vectis-control-size-calendar-now-dot);block-size:var(--vectis-control-size-calendar-now-dot);border-radius:var(--vectis-radius-pill);background:var(--vectis-color-danger);margin-block-start:calc(var(--vectis-control-size-calendar-now-dot) / -2);margin-inline-start:calc(var(--vectis-control-size-calendar-now-dot) / -2);position:absolute;inset-inline-start:0}}
+@layer vectis.components{.v-calendar-time-grid{--calendar-hour:var(--vectis-control-size-calendar-hour);--calendar-gutter:var(--vectis-control-size-calendar-gutter);--calendar-tracks:repeat(var(--calendar-columns), minmax(var(--vectis-control-size-calendar-day-min), 1fr));--calendar-hour-lift:calc(var(--vectis-text-caption-size) * var(--vectis-text-caption-leading) / 2);position:relative}.v-calendar-time-grid[data-gesture=resize]:not([data-outside]),.v-calendar-time-grid[data-gesture=resize]:not([data-outside]) *{cursor:ns-resize}.v-calendar-time-grid[data-gesture=create]:not([data-outside]),.v-calendar-time-grid[data-gesture=create]:not([data-outside]) *{cursor:move}.v-calendar-head,.v-calendar-canvas{grid-template-columns:var(--calendar-gutter) var(--calendar-tracks);min-inline-size:min-content;display:grid}.v-calendar-head{z-index:4;background:var(--vectis-color-surface);border-block-end:1px solid var(--vectis-color-border);position:sticky;inset-block-start:0}.v-calendar-head-gutter{border-inline-end:1px solid var(--vectis-color-border)}.v-calendar-head-day{align-items:center;gap:var(--vectis-space-1);padding-block:var(--vectis-space-2);padding-inline:var(--vectis-space-1);flex-direction:column;display:flex}.v-calendar-head-number{inline-size:var(--vectis-control-height-sm);block-size:var(--vectis-control-height-sm);border-radius:var(--vectis-radius-pill);font-size:var(--vectis-text-body-lg-size);justify-content:center;align-items:center;display:flex}.v-calendar-allday-label{border-block-start:1px solid var(--vectis-color-border);border-inline-end:1px solid var(--vectis-color-border);color:var(--vectis-color-text-muted);font-size:var(--vectis-text-caption-size);line-height:var(--vectis-text-caption-leading);justify-content:end;align-items:start;padding-block-start:var(--vectis-space-1);padding-inline-end:var(--vectis-space-2);display:flex}.v-calendar-allday{grid-column:2/-1;grid-template-columns:var(--calendar-tracks);grid-template-rows:repeat(var(--calendar-lanes), var(--vectis-control-size-calendar-allday-lane));max-block-size:var(--vectis-control-size-calendar-allday-max);padding-block:var(--vectis-space-1);border-block-start:1px solid var(--vectis-color-border);gap:1px;display:grid;overflow-y:auto}.v-calendar-bar{grid-column:calc(var(--calendar-day-index) + 1) / span var(--calendar-bar-span);grid-row:calc(var(--calendar-bar-lane) + 1);min-inline-size:0}.v-calendar-hours{grid-auto-rows:var(--calendar-hour);border-inline-end:1px solid var(--vectis-color-border);display:grid}.v-calendar-hour{color:var(--vectis-color-text-muted);font-size:var(--vectis-text-caption-size);line-height:var(--vectis-text-caption-leading);text-align:end;align-self:start;margin-block-start:calc(-1 * var(--calendar-hour-lift));padding-inline-end:var(--vectis-space-2);position:relative}.v-calendar-hour:before{content:"";inline-size:var(--vectis-control-size-calendar-tick);border-block-start:1px solid var(--vectis-color-border);position:absolute;inset-block-start:var(--calendar-hour-lift);inset-inline-end:0}.v-calendar-hour:first-child{visibility:hidden}.v-calendar-row:first-child .v-calendar-cell{border-block-start:none}.v-calendar-columns{grid-column:2/-1;grid-template-columns:var(--calendar-tracks);grid-auto-rows:var(--calendar-hour);display:grid;position:relative}.v-calendar-row{display:contents}.v-calendar-cell[data-today]{background:var(--vectis-color-accent-surface)}.v-calendar-block{block-size:calc((var(--calendar-block-end-fraction) - var(--calendar-block-start-fraction)) * 100%);inline-size:calc(var(--calendar-block-span) / var(--calendar-block-columns) / var(--calendar-columns) * 100% - 2px);z-index:1;position:absolute;inset-block-start:calc(var(--calendar-block-start-fraction) * 100%);inset-inline-start:calc((var(--calendar-day-index) + var(--calendar-block-column) / var(--calendar-block-columns)) / var(--calendar-columns) * 100%)}.v-calendar-now{inline-size:calc(100% / var(--calendar-columns));border-block-start:1px solid var(--vectis-color-danger);z-index:2;pointer-events:none;position:absolute;inset-block-start:calc(var(--calendar-now-fraction) * 100%);inset-inline-start:calc(var(--calendar-day-index) / var(--calendar-columns) * 100%)}.v-calendar-now:before{content:"";inline-size:var(--vectis-control-size-calendar-now-dot);block-size:var(--vectis-control-size-calendar-now-dot);border-radius:var(--vectis-radius-pill);background:var(--vectis-color-danger);margin-block-start:calc(var(--vectis-control-size-calendar-now-dot) / -2);margin-inline-start:calc(var(--vectis-control-size-calendar-now-dot) / -2);position:absolute;inset-inline-start:0}}

package/dist/components/VCalendar/VCalendarTimeGrid.d.ts CHANGED Viewed

@@ -1,18 +1,17 @@
-import { HourFormat } from '../../utils/time.js';
 import { TimeWindow } from './layout.js';
-import { CalendarEvent, CalendarEventId, CalendarEventTimes } from './types.js';
+import { ActivatedCell, CalendarEvent, CalendarEventId, CalendarEventSlotProps, CalendarEventTimes, CalendarFormat } from './types.js';
 /** Where the keyboard focus is in the grid, as a day and a moment in it. */
 export interface FocusedCell {
     iso: string;
     minutes: number;
 }
-export interface TimeGridProps<T> {
+export interface CalendarTimeGridProps<T> {
     days: string[];
     events: T[];
-    window: TimeWindow;
+    timeWindow: TimeWindow;
     slotDuration: number;
     locale: string;
-    hourFormat: HourFormat;
+    format: CalendarFormat;
     /** Today's date, or nothing on the server, where it cannot be known. */
     today: string | null;
     /**
@@ -23,7 +22,9 @@ export interface TimeGridProps<T> {
     now: number | null;
     /** Whether events can be moved and stretched. */
     editable: boolean;
-    /** Whether an empty part of the grid makes an event when it is taken up. */
+    /** Whether the whole calendar is frozen, which also takes its cards out of the tab order. */
+    disabled: boolean;
+    /** Whether an empty stretch of a day can be drawn out, and reported as a new event's times. */
     creatable: boolean;
     /** The node telling a reader how a card can be moved, shared by every card. */
     hintId: string;
@@ -35,44 +36,38 @@ export interface TimeGridProps<T> {
     label: string;
 }
 declare const __VLS_export: <E extends CalendarEvent>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import('vue').PublicProps & __VLS_PrettifyLocal<(TimeGridProps<E> & {
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<(CalendarTimeGridProps<E> & {
         /** Which cell holds the tab stop. The calendar owns it, so the toolbar can move it too. */
         focused: FocusedCell;
     }) & {
         onAnnounce?: ((message: string) => any) | undefined;
         onStep?: ((delta: 1 | -1) => any) | undefined;
-        "onCell-activate"?: ((iso: string, minutes: number) => any) | undefined;
+        "onCell-activate"?: ((cell: ActivatedCell) => any) | undefined;
         "onEvent-activate"?: ((event: E) => any) | undefined;
-        "onEvent-drop"?: ((id: CalendarEventId, times: CalendarEventTimes, kind: "move" | "resize") => any) | undefined;
+        "onEvent-drop"?: ((id: CalendarEventId, times: CalendarEventTimes, kind: "resize" | "move") => any) | undefined;
         "onUpdate:focused"?: ((value: FocusedCell) => any) | undefined;
         "onSlot-create"?: ((times: CalendarEventTimes) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import('vue').ShallowUnwrapRef<{
+        /** Brings the focus onto the cell the grid is currently pointing at. */
         focus: () => void;
+        /** Scrolls the grid so a given moment of the day sits at the top of the visible area. */
         scrollToMinutes: (minutes: number) => void;
     }>) => void;
     attrs: any;
     slots: {
-        event?(props: {
-            event: E;
-            layout: "block" | "chip";
-            timeText: string;
-            continuesBefore: boolean;
-            continuesAfter: boolean;
-            dragging: boolean;
-            grabbed: boolean;
-        }): unknown;
+        event?(props: CalendarEventSlotProps<E>): unknown;
         'day-header'?(props: {
             iso: string;
             weekday: string;
-            day: string;
+            dayText: string;
             today: boolean;
         }): unknown;
         'all-day-label'?(): unknown;
     };
-    emit: (((evt: "announce", message: string) => void) & ((evt: "step", delta: 1 | -1) => void) & ((evt: "cell-activate", iso: string, minutes: number) => void) & ((evt: "event-activate", event: E) => void) & ((evt: "event-drop", id: CalendarEventId, times: CalendarEventTimes, kind: "move" | "resize") => void) & ((evt: "slot-create", times: CalendarEventTimes) => void)) & ((event: "update:focused", value: FocusedCell) => void);
+    emit: (((evt: "announce", message: string) => void) & ((evt: "step", delta: 1 | -1) => void) & ((evt: "cell-activate", cell: ActivatedCell) => void) & ((evt: "event-activate", event: E) => void) & ((evt: "event-drop", id: CalendarEventId, times: CalendarEventTimes, kind: "resize" | "move") => void) & ((evt: "slot-create", times: CalendarEventTimes) => void)) & ((event: "update:focused", value: FocusedCell) => void);
 }>) => import('vue').VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };