vectis-ui 0.1.0

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

@@ -0,0 +1,374 @@
+import { useLocale as e, useMessages as t } from "../../i18n/state.js";
+import n from "../VIcon/VIcon.js";
+import r from "../VTypography/VTypography.js";
+import i from "../VButton/VButton.js";
+import a from "../VIconButton/VIconButton.js";
+import { chevron_left as ee } from "../VIcon/icons/chevron_left.js";
+import { chevron_right as te } from "../VIcon/icons/chevron_right.js";
+import { useAriaLabel as ne } from "../../composables/useAriaLabel.js";
+import { useRootAttrs as re } from "../../composables/useRootAttrs.js";
+import { useTimer as ie } from "../../composables/useTimer.js";
+import ae from "../VMenu/VMenu.js";
+import oe from "../VMenu/VMenuItem.js";
+import { arrow_drop_down as se } from "../VIcon/icons/arrow_drop_down.js";
+import { firstDayOfWeekFor as ce, formatDisplay as o, formatDisplayRange as le } from "../../utils/date.js";
+import { hourCycleFor as ue, minutesOf as s } from "../../utils/time.js";
+import { monthWeeks as de, monthsOfYear as fe, normalizeWeekdays as pe, stepAnchor as me, timeOf as he, timesOf as ge, todayISO as c, visibleDays as _e, visibleRange as ve, windowOf as ye } from "./layout.js";
+import be from "./VCalendarMonth.js";
+import xe from "./VCalendarTimeGrid.js";
+import Se from "./VCalendarYear.js";
+import { Fragment as Ce, computed as l, createBlock as u, createCommentVNode as we, createElementBlock as d, createElementVNode as f, createSlots as p, createTextVNode as m, createVNode as h, defineComponent as g, guardReactiveProps as _, mergeModels as v, mergeProps as y, normalizeClass as Te, normalizeProps as b, normalizeStyle as Ee, onMounted as De, openBlock as x, ref as S, renderList as Oe, renderSlot as C, toDisplayString as w, unref as T, useId as ke, useModel as E, withCtx as D } from "vue";
+//#region src/components/VCalendar/VCalendar.vue?vue&type=script&setup=true&lang.ts
+var Ae = ["aria-label", "aria-roledescription"], je = { class: "v-calendar-toolbar" }, Me = { class: "v-calendar-nav" }, Ne = { class: "v-calendar-actions" }, Pe = {
+	class: "v-visually-hidden",
+	role: "status",
+	"aria-live": "polite"
+}, O = /*@__PURE__*/ g({
+	inheritAttrs: !1,
+	__name: "VCalendar",
+	props: /*@__PURE__*/ v({
+		views: { default: () => [
+			"day",
+			"4days",
+			"week"
+		] },
+		customDays: { default: 4 },
+		weekdays: { default: void 0 },
+		locale: { default: void 0 },
+		hourFormat: { default: void 0 },
+		dayStart: { default: 0 },
+		dayEnd: { default: 24 },
+		slotDuration: { default: 15 },
+		scrollTime: { default: "08:00" },
+		showCurrentTime: {
+			type: Boolean,
+			default: !0
+		},
+		monthEventLimit: { default: 3 },
+		editable: {
+			type: Boolean,
+			default: !0
+		},
+		creatable: {
+			type: Boolean,
+			default: !0
+		},
+		edgeStepDelay: { default: 800 },
+		autoScroll: {
+			type: Boolean,
+			default: !0
+		},
+		label: { default: void 0 }
+	}, {
+		view: { default: "week" },
+		viewModifiers: {},
+		date: { default: () => c() },
+		dateModifiers: {},
+		events: { default: () => [] },
+		eventsModifiers: {}
+	}),
+	emits: /*@__PURE__*/ v([
+		"event-activate",
+		"slot-activate",
+		"event-move",
+		"event-resize",
+		"event-create"
+	], [
+		"update:view",
+		"update:date",
+		"update:events"
+	]),
+	setup(g, { expose: v, emit: O }) {
+		let k = g, A = E(g, "view"), j = E(g, "date"), M = E(g, "events"), N = O, P = t(), Fe = e(), { rootClass: Ie, rootStyle: Le, forwardedAttrs: Re } = re(), F = l(() => k.locale ?? Fe.value), I = l(() => k.hourFormat ?? ue(F.value)), L = l(() => pe(k.weekdays, ce(F.value))), R = l(() => ye(k.dayStart, k.dayEnd)), ze = l(() => _e(j.value, A.value, L.value, k.customDays)), Be = l(() => A.value !== "month" && A.value !== "year"), Ve = l(() => A.value === "month" ? de(j.value, L.value) : []), He = l(() => A.value === "year" ? fe(j.value) : []), z = S(null), B = S(null), Ue = ie();
+		function V() {
+			let e = /* @__PURE__ */ new Date();
+			B.value = e.getHours() * 60 + e.getMinutes(), Ue.start(V, Math.max(1e3, (60 - e.getSeconds()) * 1e3));
+		}
+		De(() => {
+			z.value = c(), k.showCurrentTime && V();
+			let e = s(k.scrollTime);
+			e !== null && H.value?.scrollToMinutes(e);
+		});
+		let H = S(null), U = S({
+			iso: j.value,
+			minutes: R.value.start
+		}), W = S(j.value), G = l(() => ve(j.value, A.value, L.value, k.customDays)), K = l(() => {
+			let e = F.value;
+			return A.value === "year" ? o(G.value.start, e, { year: "numeric" }) : A.value === "month" ? o(G.value.start, e, {
+				month: "long",
+				year: "numeric"
+			}) : A.value === "day" ? o(G.value.start, e, {
+				weekday: "long",
+				day: "numeric",
+				month: "long",
+				year: "numeric"
+			}) : le(G.value.start, G.value.end, e, {
+				day: "numeric",
+				month: "long",
+				year: "numeric"
+			});
+		}), q = (e) => {
+			let t = P.value.calendar;
+			return e === "day" ? t.viewDay : e === "4days" ? t.view4Days : e === "week" ? t.viewWeek : e === "month" ? t.viewMonth : e === "year" ? t.viewYear : t.viewCustom(k.customDays);
+		}, J = l(() => {
+			let e = P.value.calendar;
+			return A.value === "day" ? {
+				previous: e.previousDay,
+				next: e.nextDay
+			} : A.value === "week" ? {
+				previous: e.previousWeek,
+				next: e.nextWeek
+			} : A.value === "month" ? {
+				previous: e.previousMonth,
+				next: e.nextMonth
+			} : A.value === "year" ? {
+				previous: e.previousYear,
+				next: e.nextYear
+			} : {
+				previous: e.previousPeriod,
+				next: e.nextPeriod
+			};
+		}), We = ne(() => k.label ?? P.value.calendar.label);
+		function Y(e) {
+			j.value = me(j.value, A.value, e, L.value, k.customDays);
+		}
+		function X() {
+			j.value = c();
+		}
+		function Ge(e) {
+			A.value = e;
+		}
+		function Ke(e, t) {
+			N("slot-activate", {
+				date: e,
+				time: he(t)
+			});
+		}
+		function qe(e, t) {
+			j.value = e, k.views.includes(t) && (A.value = t);
+		}
+		let Je = S(""), Ye = ke(), Z = `${Ye}-hint`;
+		function Xe(e) {
+			Je.value = e;
+		}
+		function Q(e, t, n) {
+			let r = M.value.find((t) => t.id === e);
+			if (!r) return;
+			let i = ge(r), a = {
+				...r,
+				...t
+			};
+			M.value = M.value.map((t) => t.id === e ? a : t), N(n === "resize" ? "event-resize" : "event-move", a, i);
+		}
+		let $ = 0;
+		function Ze(e) {
+			N("slot-activate", {
+				date: e.start,
+				time: e.startTime
+			}), $++;
+			let t = {
+				id: `${Ye}-${$}`,
+				title: P.value.calendar.newEvent($),
+				...e
+			};
+			M.value = [...M.value, t], N("event-create", t);
+		}
+		return v({
+			focus: () => H.value?.focus(),
+			today: X,
+			previous: () => Y(-1),
+			next: () => Y(1),
+			scrollTo: (e) => {
+				let t = s(e);
+				t !== null && H.value?.scrollToMinutes(t);
+			}
+		}), (e, t) => (x(), d("div", {
+			class: Te(["v-calendar", T(Ie)]),
+			style: Ee(T(Le))
+		}, [f("section", y(T(Re), {
+			class: "v-calendar-region",
+			"aria-label": T(We),
+			"aria-roledescription": T(P).calendar.roleDescription
+		}), [
+			f("div", je, [
+				f("div", Me, [h(a, {
+					icon: T(ee),
+					label: J.value.previous,
+					size: "sm",
+					onClick: t[0] ||= (e) => Y(-1)
+				}, null, 8, ["icon", "label"]), h(a, {
+					icon: T(te),
+					label: J.value.next,
+					size: "sm",
+					onClick: t[1] ||= (e) => Y(1)
+				}, null, 8, ["icon", "label"])]),
+				h(i, {
+					variant: "outline",
+					tone: "neutral",
+					size: "sm",
+					onClick: X
+				}, {
+					default: D(() => [m(w(T(P).calendar.today), 1)]),
+					_: 1
+				}),
+				h(r, {
+					variant: "heading-4",
+					as: "h2",
+					class: "v-calendar-title"
+				}, {
+					default: D(() => [m(w(K.value), 1)]),
+					_: 1
+				}),
+				f("div", Ne, [C(e.$slots, "actions"), g.views.length > 1 ? (x(), u(ae, {
+					key: 0,
+					size: "sm",
+					placement: "bottom-end",
+					"match-trigger": ""
+				}, {
+					trigger: D(({ triggerProps: e }) => [h(i, y({
+						variant: "outline",
+						tone: "neutral",
+						size: "sm"
+					}, e, { "aria-label": `${T(P).calendar.view}: ${q(A.value)}` }), {
+						default: D(() => [m(w(q(A.value)) + " ", 1), h(n, { name: T(se) }, null, 8, ["name"])]),
+						_: 1
+					}, 16, ["aria-label"])]),
+					default: D(() => [(x(!0), d(Ce, null, Oe(g.views, (e) => (x(), u(oe, {
+						key: e,
+						label: q(e),
+						selected: e === A.value,
+						onSelect: (t) => Ge(e)
+					}, null, 8, [
+						"label",
+						"selected",
+						"onSelect"
+					]))), 128))]),
+					_: 1
+				})) : we("", !0)])
+			]),
+			Be.value ? (x(), u(xe, {
+				key: 0,
+				ref_key: "gridRef",
+				ref: H,
+				focused: U.value,
+				"onUpdate:focused": t[2] ||= (e) => U.value = e,
+				class: "v-calendar-view",
+				days: ze.value,
+				events: M.value,
+				window: R.value,
+				"slot-duration": g.slotDuration,
+				locale: F.value,
+				"hour-format": I.value,
+				today: z.value,
+				now: g.showCurrentTime ? B.value : null,
+				editable: g.editable,
+				creatable: g.creatable,
+				"hint-id": Z,
+				"edge-step-delay": g.edgeStepDelay,
+				"auto-scroll": g.autoScroll,
+				label: K.value,
+				onCellActivate: Ke,
+				onEventActivate: t[3] ||= (e) => N("event-activate", e),
+				onEventDrop: Q,
+				onSlotCreate: Ze,
+				onAnnounce: Xe,
+				onStep: Y
+			}, p({ _: 2 }, [
+				e.$slots.event ? {
+					name: "event",
+					fn: D((t) => [C(e.$slots, "event", b(_(t)))]),
+					key: "0"
+				} : void 0,
+				e.$slots["day-header"] ? {
+					name: "day-header",
+					fn: D((t) => [C(e.$slots, "day-header", b(_(t)))]),
+					key: "1"
+				} : void 0,
+				e.$slots["all-day-label"] ? {
+					name: "all-day-label",
+					fn: D(() => [C(e.$slots, "all-day-label")]),
+					key: "2"
+				} : void 0
+			]), 1032, [
+				"focused",
+				"days",
+				"events",
+				"window",
+				"slot-duration",
+				"locale",
+				"hour-format",
+				"today",
+				"now",
+				"editable",
+				"creatable",
+				"edge-step-delay",
+				"auto-scroll",
+				"label"
+			])) : A.value === "month" ? (x(), u(be, {
+				key: 1,
+				ref_key: "gridRef",
+				ref: H,
+				focused: W.value,
+				"onUpdate:focused": t[4] ||= (e) => W.value = e,
+				class: "v-calendar-view",
+				weeks: Ve.value,
+				events: M.value,
+				locale: F.value,
+				"hour-format": I.value,
+				today: z.value,
+				"event-limit": g.monthEventLimit,
+				editable: g.editable,
+				"hint-id": Z,
+				"edge-step-delay": g.edgeStepDelay,
+				label: K.value,
+				onDayActivate: t[5] ||= (e) => qe(e, "day"),
+				onCellActivate: t[6] ||= (e) => Ke(e, R.value.start),
+				onEventActivate: t[7] ||= (e) => N("event-activate", e),
+				onEventDrop: Q,
+				onAnnounce: Xe,
+				onStep: Y
+			}, p({ _: 2 }, [e.$slots.event ? {
+				name: "event",
+				fn: D((t) => [C(e.$slots, "event", b(_(t)))]),
+				key: "0"
+			} : void 0]), 1032, [
+				"focused",
+				"weeks",
+				"events",
+				"locale",
+				"hour-format",
+				"today",
+				"event-limit",
+				"editable",
+				"edge-step-delay",
+				"label"
+			])) : (x(), u(Se, {
+				key: 2,
+				class: "v-calendar-view",
+				months: He.value,
+				events: M.value,
+				locale: F.value,
+				weekdays: L.value,
+				today: z.value,
+				label: K.value,
+				onMonthActivate: t[8] ||= (e) => qe(e, "month")
+			}, null, 8, [
+				"months",
+				"events",
+				"locale",
+				"weekdays",
+				"today",
+				"label"
+			])),
+			f("div", Pe, w(Je.value), 1),
+			f("span", {
+				id: Z,
+				class: "v-visually-hidden"
+			}, w(T(P).calendar.eventHint), 1)
+		], 16, Ae)], 6));
+	}
+});
+//#endregion
+export { O as default };
+
+//# sourceMappingURL=VCalendar.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VCalendar.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VCalendar/VCalendar.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"E extends CalendarEvent\">\n// @a11y @ssr @core\n/**\n * An agenda: the days laid out side by side with the hours running down them, and the\n * events drawn where they fall.\n *\n * It is a place to READ and REARRANGE a schedule, not to write one. Opening an event for\n * editing, and adding one by any route other than pointing at an empty slot, stay with the\n * consumer — the component tells them what was asked for and leaves the form to them.\n *\n * Everything is handled in local time as ISO `YYYY-MM-DD` dates and 24-hour `HH:mm` times\n * (see `utils/date` and `utils/time`), which is what keeps the server and the browser in\n * agreement. An event may name a time zone, and that name is shown beside its times as an\n * annotation; it is never applied. Converting would mean the card moved depending on where\n * the page was rendered, which is the one thing a calendar must not do.\n *\n * The JavaScript here is what the platform gives no way to avoid. There is no accessible\n * time grid to build on and no way to express \"these three meetings overlap, so share the\n * width between them\" in CSS, so the ARIA grid pattern and the overlap layout are written\n * out by hand. Every geometric and calendrical decision lives in `layout.ts`, pure, because\n * the test environment lays nothing out and that is the only place any of it can be checked.\n */\nimport { computed, onMounted, ref, useId } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { arrow_drop_down as arrowDropDownIcon } from '../VIcon/icons/arrow_drop_down'\nimport { chevron_left as chevronLeftIcon } from '../VIcon/icons/chevron_left'\nimport { chevron_right as chevronRightIcon } from '../VIcon/icons/chevron_right'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport VMenu from '../VMenu/VMenu.vue'\nimport VMenuItem from '../VMenu/VMenuItem.vue'\nimport VTypography from '../VTypography/VTypography.vue'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useTimer } from '../../composables/useTimer'\nimport {\n  firstDayOfWeekFor,\n  formatDisplay as formatDate,\n  formatDisplayRange,\n} from '../../utils/date'\nimport { hourCycleFor, minutesOf, type HourFormat } from '../../utils/time'\n\nimport { useLocale, useMessages } from '../../i18n/state'\n\nimport VCalendarMonth from './VCalendarMonth.vue'\nimport VCalendarTimeGrid, { type FocusedCell } from './VCalendarTimeGrid.vue'\nimport VCalendarYear from './VCalendarYear.vue'\nimport { EDGE_STEP_DELAY } from './edgeStep'\nimport {\n  monthWeeks,\n  monthsOfYear,\n  normalizeWeekdays,\n  stepAnchor,\n  timeOf,\n  timesOf,\n  todayISO,\n  visibleDays,\n  visibleRange,\n  windowOf,\n} from './layout'\nimport type { CalendarEvent, CalendarEventId, CalendarEventTimes, CalendarView } from './types'\n\nexport interface CalendarProps {\n  /**\n   * Which views the menu offers, in the order it lists them. Narrowing it is how a\n   * calendar that only ever shows weeks stops offering anything else.\n   */\n  views?: CalendarView[]\n  /** How many days the custom view shows, and how far Previous and Next step in it. */\n  customDays?: number\n  /**\n   * Which weekdays are on show, as numbers from 0 for Sunday. `[1,2,3,4,5]` hides the\n   * weekend everywhere. The ORDER matters as well: the first entry is the day a week\n   * starts on, which is why there is no separate first-day setting. Left out, the seven\n   * days in the order the locale puts them.\n   */\n  weekdays?: number[]\n  /** The language the days, months and times are written in. Falls back to the global one. */\n  locale?: string\n  /** Whether times are shown on a twelve or twenty-four hour clock. Follows the locale. */\n  hourFormat?: HourFormat\n  /** The hour the grid starts at, from 0. */\n  dayStart?: number\n  /** The hour it ends at, up to 24. */\n  dayEnd?: number\n  /**\n   * The step everything snaps to, in minutes: how far a nudge moves an event, and how long\n   * a newly created one is.\n   */\n  slotDuration?: number\n  /** Where the grid is scrolled to when it first appears, so the working day is in view. */\n  scrollTime?: string\n  /**\n   * Draws a line across today's column at the time it is now, with a dot on its leading\n   * edge. It ticks once a minute while the calendar is on screen.\n   */\n  showCurrentTime?: boolean\n  /** How many events a day of the month view shows before it starts counting the rest. */\n  monthEventLimit?: number\n  /**\n   * Lets events be moved and stretched — by dragging them, and with the keyboard. Turning it\n   * off leaves them readable and clickable, and nothing else.\n   */\n  editable?: boolean\n  /**\n   * Makes an event when an empty part of a day is taken up: a click makes one `slotDuration`\n   * long, a drag makes one as long as it was drawn. `slot-activate` still fires either way,\n   * so a consumer who wants their own form can turn this off and keep the signal.\n   */\n  creatable?: boolean\n  /**\n   * How long a dragged event has to rest against the side of the calendar before the view\n   * turns to the previous or next period, in milliseconds. `0` turns that off.\n   *\n   * The wait is the point of it: paging the instant the pointer touched the edge would make\n   * the last day of a week impossible to aim at.\n   */\n  edgeStepDelay?: number\n  /** Whether dragging near the top or bottom of a time grid scrolls it. */\n  autoScroll?: boolean\n  /** What the calendar is called, for anyone who cannot see it. */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<CalendarProps>(), {\n  views: () => ['day', '4days', 'week'],\n  customDays: 4,\n  weekdays: undefined,\n  locale: undefined,\n  hourFormat: undefined,\n  dayStart: 0,\n  dayEnd: 24,\n  slotDuration: 15,\n  scrollTime: '08:00',\n  showCurrentTime: true,\n  monthEventLimit: 3,\n  editable: true,\n  creatable: true,\n  edgeStepDelay: EDGE_STEP_DELAY,\n  autoScroll: true,\n  label: undefined,\n})\n\n/*\n * The wrapper-root pattern: the consumer's class and style stay on the outer box, and\n * everything else — their `id`, their `aria-*` — goes on the region, which is the part\n * that carries the role and is therefore the part they mean.\n */\ndefineOptions({ inheritAttrs: false })\n\nconst view = defineModel<CalendarView>('view', { default: 'week' })\n\n/*\n * @ssr — the anchor is read from the clock at setup, so the server and the client can in\n * principle disagree across a midnight boundary. That is the trade VDatePicker already\n * makes for the month it opens on, and it is a safer one here: what the anchor decides is\n * a whole WEEK or month, which is the same on both sides for all but a few seconds a day.\n * Today's date, which marks a single column, is a different matter and is read below in\n * `onMounted` where the server cannot see it at all.\n */\nconst date = defineModel<string>('date', { default: () => todayISO() })\nconst events = defineModel<E[]>('events', { default: () => [] })\n\nconst emit = defineEmits<{\n  /** A card was clicked or activated — the cue to open an editor of your own. */\n  'event-activate': [event: E]\n  /** An empty part of the grid was activated, at this day and this time. */\n  'slot-activate': [slot: { date: string; time: string }]\n  /**\n   * An event was dragged or nudged somewhere else. It carries the event as it now stands and\n   * where it came from, so undoing it needs no copy of your own.\n   */\n  'event-move': [event: E, previous: CalendarEventTimes]\n  /** An event's end was dragged or nudged, in the same two parts. */\n  'event-resize': [event: E, previous: CalendarEventTimes]\n  /**\n   * An event was made by taking up an empty part of a day. It has already been added to\n   * `events`; this is the cue to give it a real name, or to save it.\n   */\n  'event-create': [event: CalendarEvent]\n}>()\n\ndefineSlots<{\n  /** Extra controls in the toolbar, between the range and the view menu. */\n  actions?(): unknown\n  /** The content of one event's card, replacing the title and times. */\n  event?(props: {\n    event: E\n    layout: 'block' | 'chip'\n    timeText: string\n    continuesBefore: boolean\n    continuesAfter: boolean\n  }): unknown\n  /** The head of one day column, replacing the weekday and the number. */\n  'day-header'?(props: { iso: string; weekday: string; day: string; today: boolean }): unknown\n  /** The label beside the band of all-day events. */\n  'all-day-label'?(): unknown\n}>()\n\nconst m = useMessages()\nconst vectisLocale = useLocale()\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\n/*\n * The prop wins, and the design system's global locale is what it falls back to. Every read\n * goes through this one derivation, so the two sources can never be consulted in a\n * different order somewhere else.\n */\nconst resolvedLocale = computed(() => props.locale ?? vectisLocale.value)\nconst resolvedHourFormat = computed(() => props.hourFormat ?? hourCycleFor(resolvedLocale.value))\nconst resolvedWeekdays = computed(() =>\n  normalizeWeekdays(props.weekdays, firstDayOfWeekFor(resolvedLocale.value)),\n)\n\nconst window = computed(() => windowOf(props.dayStart, props.dayEnd))\n\nconst days = computed(() =>\n  visibleDays(date.value, view.value, resolvedWeekdays.value, props.customDays),\n)\n\n/** Which view is a time grid, and which is a summary. Several things below turn on this. */\nconst isTimeGrid = computed(() => view.value !== 'month' && view.value !== 'year')\n\nconst weeks = computed(() =>\n  view.value === 'month' ? monthWeeks(date.value, resolvedWeekdays.value) : [],\n)\n\nconst months = computed(() => (view.value === 'year' ? monthsOfYear(date.value) : []))\n\n// @ssr — today and the time it is now can only be known on the client: the server has no\n// way to tell either where the reader is, and rendering a guess would make the two markups\n// differ. Both stay null until then, and every rule that draws them is written to expect it.\nconst today = ref<string | null>(null)\nconst now = ref<number | null>(null)\n\nconst clock = useTimer()\n\n/**\n * Re-reads the clock, then arms itself for the top of the next minute — so the line moves\n * when the minute does rather than drifting by however long the interval was.\n *\n * TRAP — the floor on the delay is not a nicety. `useTimer` runs a delay of zero or less\n * SYNCHRONOUSLY, by design, so a tick that ever computed one would call itself straight back\n * and go on doing so until the stack gave out. A second is well below the resolution\n * anything here needs and comfortably above the point where that could happen.\n */\nfunction tick() {\n  const at = new Date()\n  now.value = at.getHours() * 60 + at.getMinutes()\n  clock.start(tick, Math.max(1000, (60 - at.getSeconds()) * 1000))\n}\n\nonMounted(() => {\n  today.value = todayISO()\n  if (props.showCurrentTime) tick()\n  const at = minutesOf(props.scrollTime)\n  if (at !== null) gridRef.value?.scrollToMinutes(at)\n})\n\n/**\n * The grid, named by what it exposes rather than by `InstanceType<typeof …>`.\n *\n * TRAP — the usual form does not work here and the error it gives says nothing useful about\n * why. A generic `<script setup>` compiles to a FUNCTION, not to a class, so it has no\n * construct signature for `InstanceType` to read: the message complains that the component\n * \"provides no match for the signature `new (...args: any)`\", pointing at the template.\n * Writing the contract out is also the more honest of the two, since these two methods are\n * the whole of what this component asks of that one.\n */\nconst gridRef = ref<{ focus(): void; scrollToMinutes(minutes: number): void } | null>(null)\n\n/*\n * Which cell holds the tab stop, kept as two refs because the two kinds of view mean\n * different things by it: a time grid needs a day AND an hour, a month only a day. One ref\n * carrying an hour the month ignores would leave that hour to go stale, and the grid would\n * then reopen on whatever the month happened to leave behind.\n */\nconst focused = ref<FocusedCell>({ iso: date.value, minutes: window.value.start })\nconst focusedDay = ref(date.value)\n\nconst range = computed(() =>\n  visibleRange(date.value, view.value, resolvedWeekdays.value, props.customDays),\n)\n\n/**\n * What the toolbar says the calendar is showing. Each view names itself at the coarsest\n * granularity that still identifies it: a single day says its weekday, a year says nothing\n * but the number.\n */\nconst rangeText = computed(() => {\n  const locale = resolvedLocale.value\n  if (view.value === 'year') return formatDate(range.value.start, locale, { year: 'numeric' })\n  if (view.value === 'month') {\n    return formatDate(range.value.start, locale, { month: 'long', year: 'numeric' })\n  }\n  if (view.value === 'day') {\n    return formatDate(range.value.start, locale, {\n      weekday: 'long',\n      day: 'numeric',\n      month: 'long',\n      year: 'numeric',\n    })\n  }\n  return formatDisplayRange(range.value.start, range.value.end, locale, {\n    day: 'numeric',\n    month: 'long',\n    year: 'numeric',\n  })\n})\n\nconst viewLabel = (value: CalendarView) => {\n  const words = m.value.calendar\n  if (value === 'day') return words.viewDay\n  if (value === '4days') return words.view4Days\n  if (value === 'week') return words.viewWeek\n  if (value === 'month') return words.viewMonth\n  if (value === 'year') return words.viewYear\n  return words.viewCustom(props.customDays)\n}\n\n/**\n * What the two navigation buttons are called. They name the step rather than saying\n * \"previous\" alone, because the step is what changes from one view to the next and a bare\n * \"previous\" leaves a reader to guess whether it is a day or a year they are about to lose.\n */\nconst stepLabels = computed(() => {\n  const words = m.value.calendar\n  if (view.value === 'day') return { previous: words.previousDay, next: words.nextDay }\n  if (view.value === 'week') return { previous: words.previousWeek, next: words.nextWeek }\n  if (view.value === 'month') return { previous: words.previousMonth, next: words.nextMonth }\n  if (view.value === 'year') return { previous: words.previousYear, next: words.nextYear }\n  return { previous: words.previousPeriod, next: words.nextPeriod }\n})\n\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.calendar.label)\n\nfunction step(delta: -1 | 1) {\n  date.value = stepAnchor(date.value, view.value, delta, resolvedWeekdays.value, props.customDays)\n}\n\nfunction today_() {\n  date.value = todayISO()\n}\n\nfunction setView(value: CalendarView) {\n  view.value = value\n}\n\nfunction onCellActivate(iso: string, minutes: number) {\n  emit('slot-activate', { date: iso, time: timeOf(minutes) })\n}\n\n/**\n * Going from a summary to the thing it summarises: opening a day from the month view, or a\n * month from the year view.\n *\n * The view only changes if the calendar was offering that one in the first place. A consumer\n * who narrowed `views` to a week and a year has said what their calendar is for, and jumping\n * it into a day view they deliberately left out would be the component overruling them —\n * so the date moves and the view stays, which is still a step towards what was asked for.\n */\nfunction openIn(iso: string, target: CalendarView) {\n  date.value = iso\n  if (props.views.includes(target)) view.value = target\n}\n\n/**\n * What a reader who cannot see the grid is told: the range after every step of a move, and\n * whether the move was taken or given up.\n *\n * The node is rendered from the FIRST paint and left empty, never inserted along with its\n * first message — a live region that appears at the same moment as its text is not announced\n * at all, which is the trap VDataTable's selection count already documents.\n */\nconst announcement = ref('')\nconst uid = useId()\nconst hintId = `${uid}-hint`\n\nfunction announce(message: string) {\n  announcement.value = message\n}\n\n/**\n * Writes one event's new times into the model and says what happened.\n *\n * The array is replaced rather than edited in place: a new reference is what wakes a\n * consumer's own watchers, and it is the design system's rule for every v-model holding a\n * list. This runs ONCE, when a gesture ends — never per frame of a drag, which would fill an\n * undo stack with sixty entries a second and send each one back as a render fighting the\n * finger.\n */\nfunction onEventDrop(id: CalendarEventId, times: CalendarEventTimes, kind: 'move' | 'resize') {\n  const current = events.value.find((item) => item.id === id)\n  if (!current) return\n\n  const previous = timesOf(current)\n  const next = { ...current, ...times }\n  events.value = events.value.map((item) => (item.id === id ? next : item))\n  // Written out rather than picking the name with a conditional: the emit signatures are an\n  // overload set, and TypeScript resolves one only against a literal.\n  if (kind === 'resize') emit('event-resize', next, previous)\n  else emit('event-move', next, previous)\n}\n\n/**\n * How many events this calendar has minted, which is what numbers their default names.\n *\n * It counts from one per calendar rather than from the length of the list, so removing an\n * event does not make the next one reuse its name.\n */\nlet created = 0\n\nfunction onSlotCreate(times: CalendarEventTimes) {\n  // The grid only ever asks for this when it was told it could create, so there is no second\n  // guard here: `creatable` is decided once, where the press is read.\n  emit('slot-activate', { date: times.start, time: times.startTime })\n\n  created++\n  const draft: CalendarEvent = {\n    // Vue's own id makes it unique to this calendar, so two on one page cannot collide, and\n    // it is stable across the server and the client.\n    id: `${uid}-${created}`,\n    title: m.value.calendar.newEvent(created),\n    ...times,\n  }\n\n  /*\n   * A consumer whose own event type adds REQUIRED fields gets a draft without them — there\n   * is nothing here that could invent a room number or an attendee list. That is what\n   * `event-create` is for: it fires with the event as made, and replacing that entry with a\n   * complete one is the intended answer. Documented in the `.mdx`.\n   */\n  events.value = [...events.value, draft as E]\n  emit('event-create', draft)\n}\n\ndefineExpose({\n  /** Brings the focus into the grid, onto the cell it is currently showing. */\n  focus: () => gridRef.value?.focus(),\n  /** Goes back to the current day, exactly as the Today button does. */\n  today: today_,\n  previous: () => step(-1),\n  next: () => step(1),\n  /** Scrolls the grid so a given `HH:mm` sits at the top of the visible area. */\n  scrollTo: (time: string) => {\n    const at = minutesOf(time)\n    if (at !== null) gridRef.value?.scrollToMinutes(at)\n  },\n})\n</script>\n\n<template>\n  <div class=\"v-calendar\" :class=\"rootClass\" :style=\"rootStyle\">\n    <section\n      v-bind=\"forwardedAttrs\"\n      class=\"v-calendar-region\"\n      :aria-label=\"ariaLabel\"\n      :aria-roledescription=\"m.calendar.roleDescription\"\n    >\n      <div class=\"v-calendar-toolbar\">\n        <div class=\"v-calendar-nav\">\n          <VIconButton\n            :icon=\"chevronLeftIcon\"\n            :label=\"stepLabels.previous\"\n            size=\"sm\"\n            @click=\"step(-1)\"\n          />\n          <VIconButton\n            :icon=\"chevronRightIcon\"\n            :label=\"stepLabels.next\"\n            size=\"sm\"\n            @click=\"step(1)\"\n          />\n        </div>\n\n        <VButton variant=\"outline\" tone=\"neutral\" size=\"sm\" @click=\"today_\">\n          {{ m.calendar.today }}\n        </VButton>\n\n        <VTypography variant=\"heading-4\" as=\"h2\" class=\"v-calendar-title\">\n          {{ rangeText }}\n        </VTypography>\n\n        <div class=\"v-calendar-actions\">\n          <slot name=\"actions\" />\n\n          <VMenu v-if=\"views.length > 1\" size=\"sm\" placement=\"bottom-end\" match-trigger>\n            <template #trigger=\"{ triggerProps }\">\n              <VButton\n                variant=\"outline\"\n                tone=\"neutral\"\n                size=\"sm\"\n                v-bind=\"triggerProps\"\n                :aria-label=\"`${m.calendar.view}: ${viewLabel(view)}`\"\n              >\n                {{ viewLabel(view) }}\n                <VIcon :name=\"arrowDropDownIcon\" />\n              </VButton>\n            </template>\n            <VMenuItem\n              v-for=\"value in views\"\n              :key=\"value\"\n              :label=\"viewLabel(value)\"\n              :selected=\"value === view\"\n              @select=\"setView(value)\"\n            />\n          </VMenu>\n        </div>\n      </div>\n\n      <VCalendarTimeGrid\n        v-if=\"isTimeGrid\"\n        ref=\"gridRef\"\n        v-model:focused=\"focused\"\n        class=\"v-calendar-view\"\n        :days=\"days\"\n        :events=\"events\"\n        :window=\"window\"\n        :slot-duration=\"slotDuration\"\n        :locale=\"resolvedLocale\"\n        :hour-format=\"resolvedHourFormat\"\n        :today=\"today\"\n        :now=\"showCurrentTime ? now : null\"\n        :editable=\"editable\"\n        :creatable=\"creatable\"\n        :hint-id=\"hintId\"\n        :edge-step-delay=\"edgeStepDelay\"\n        :auto-scroll=\"autoScroll\"\n        :label=\"rangeText\"\n        @cell-activate=\"onCellActivate\"\n        @event-activate=\"emit('event-activate', $event)\"\n        @event-drop=\"onEventDrop\"\n        @slot-create=\"onSlotCreate\"\n        @announce=\"announce\"\n        @step=\"step\"\n      >\n        <template v-if=\"$slots.event\" #event=\"slotProps\">\n          <slot name=\"event\" v-bind=\"slotProps\" />\n        </template>\n        <template v-if=\"$slots['day-header']\" #day-header=\"slotProps\">\n          <slot name=\"day-header\" v-bind=\"slotProps\" />\n        </template>\n        <template v-if=\"$slots['all-day-label']\" #all-day-label>\n          <slot name=\"all-day-label\" />\n        </template>\n      </VCalendarTimeGrid>\n\n      <VCalendarMonth\n        v-else-if=\"view === 'month'\"\n        ref=\"gridRef\"\n        v-model:focused=\"focusedDay\"\n        class=\"v-calendar-view\"\n        :weeks=\"weeks\"\n        :events=\"events\"\n        :locale=\"resolvedLocale\"\n        :hour-format=\"resolvedHourFormat\"\n        :today=\"today\"\n        :event-limit=\"monthEventLimit\"\n        :editable=\"editable\"\n        :hint-id=\"hintId\"\n        :edge-step-delay=\"edgeStepDelay\"\n        :label=\"rangeText\"\n        @day-activate=\"openIn($event, 'day')\"\n        @cell-activate=\"onCellActivate($event, window.start)\"\n        @event-activate=\"emit('event-activate', $event)\"\n        @event-drop=\"onEventDrop\"\n        @announce=\"announce\"\n        @step=\"step\"\n      >\n        <template v-if=\"$slots.event\" #event=\"slotProps\">\n          <slot name=\"event\" v-bind=\"slotProps\" />\n        </template>\n      </VCalendarMonth>\n\n      <VCalendarYear\n        v-else\n        class=\"v-calendar-view\"\n        :months=\"months\"\n        :events=\"events\"\n        :locale=\"resolvedLocale\"\n        :weekdays=\"resolvedWeekdays\"\n        :today=\"today\"\n        :label=\"rangeText\"\n        @month-activate=\"openIn($event, 'month')\"\n      />\n\n      <!--\n        Both of these are rendered from the first paint and never conditionally.\n\n        The live region has to EXIST before it has anything to say: one inserted along with\n        its first message is not announced at all. And the hint is what every card points at\n        with `aria-describedby`, so one node serves the whole calendar rather than repeating\n        the same sentence on each of a hundred events.\n      -->\n      <div class=\"v-visually-hidden\" role=\"status\" aria-live=\"polite\">{{ announcement }}</div>\n      <span :id=\"hintId\" class=\"v-visually-hidden\">{{ m.calendar.eventHint }}</span>\n    </section>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-calendar {\n    display: flex;\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  /*\n   * The height is settled in CSS rather than measured, the VDataTable idiom: the region is\n   * a flex column at full height, the toolbar refuses to grow and the grid takes what is\n   * left. `min-block-size: 0` on the grid is what lets it shrink below its content and\n   * therefore scroll — without it the automatic minimum of a flex item would hold it at its\n   * full 24-hour height and the whole page would scroll instead.\n   *\n   * All of it is a no-op when the parent's height is auto, where the percentage falls back\n   * to auto and the calendar is simply as tall as its content. That is what makes an opt-in\n   * prop unnecessary.\n   */\n  .v-calendar-region {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-inline-size: 0;\n    min-block-size: 0;\n  }\n\n  .v-calendar-toolbar {\n    display: flex;\n    flex: none;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--vectis-space-2);\n    padding-block-end: var(--vectis-space-3);\n  }\n\n  .v-calendar-nav {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n  }\n\n  .v-calendar-title {\n    /* It may be long — a full weekday and month in the day view — so it is the part that\n       gives way first, and the controls keep their size. */\n    min-inline-size: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .v-calendar-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-2);\n    /* The two siblings are pushed apart from here rather than by a `justify-content` on the\n       toolbar, which would space every control equally instead of grouping them. */\n    margin-inline-start: auto;\n  }\n\n  .v-calendar-view {\n    flex: 1;\n    min-block-size: 0;\n    border: 1px solid var(--vectis-color-border);\n    border-radius: var(--vectis-radius-surface);\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VCalendar/VCalendarEvent.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-calendar-event{--calendar-event-face:var(--vectis-color-event-surface);--calendar-event-edge:var(--vectis-color-event-border);--calendar-event-ink:var(--vectis-color-event-text);border:1px solid var(--calendar-event-edge);border-inline-start:3px solid var(--calendar-event-edge);border-radius:var(--vectis-radius-interactive);background:var(--calendar-event-face);color:var(--calendar-event-ink);font-family:var(--vectis-text-family);text-align:start;cursor:pointer;transition:box-shadow var(--vectis-duration-fast) var(--vectis-ease-default), filter var(--vectis-duration-fast) var(--vectis-ease-default);display:flex;position:relative;overflow:hidden;container-type:size}.v-calendar-event[data-custom]{--calendar-event-edge:var(--calendar-event-color);--calendar-event-face:color-mix(in oklab, var(--calendar-event-color) 14%, var(--vectis-color-surface));--calendar-event-ink:var(--vectis-color-text)}.v-calendar-event-body{min-block-size:0;min-inline-size:0;padding:var(--vectis-space-1) var(--vectis-space-2);flex-direction:column;flex:1;gap:1px;display:flex;overflow:hidden}@container (height<=3rem){.v-calendar-event[data-layout=block] .v-calendar-event-body{align-items:center;gap:var(--vectis-space-1);flex-direction:row;padding-block:0}.v-calendar-event[data-layout=block] .v-calendar-event-title{flex:1;min-inline-size:0}.v-calendar-event[data-layout=block] .v-calendar-event-time{flex:none}.v-calendar-event[data-layout=block] .v-calendar-event-description{display:none}}@container (height<=1.5rem){.v-calendar-event[data-layout=block] .v-calendar-event-title,.v-calendar-event[data-layout=block] .v-calendar-event-time{line-height:1}.v-calendar-event[data-layout=block] .v-calendar-event-handle{block-size:calc(var(--vectis-control-size-calendar-handle) / 2)}}.v-calendar-event:hover{filter:brightness(.97)}.v-calendar-event[data-dragging]{opacity:.75;box-shadow:var(--vectis-shadow-md);pointer-events:none;z-index:3}.v-calendar-event[data-rejected]{--calendar-event-face:var(--vectis-color-danger-surface);--calendar-event-edge:var(--vectis-color-danger-border);--calendar-event-ink:var(--vectis-color-danger-text);box-shadow:none;border-style:dotted}.v-calendar-event[data-ghost]{opacity:.4;z-index:0;border-style:dashed}.v-calendar-event[data-grabbed]{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset);box-shadow:var(--vectis-shadow-md);z-index:3}.v-calendar-event-handle{block-size:var(--vectis-control-size-calendar-handle);touch-action:none;cursor:ns-resize;position:absolute;inset-block-end:0;inset-inline:0}.v-calendar-event-handle:after{content:"";inline-size:var(--vectis-space-4);border-radius:var(--vectis-radius-pill);background:var(--calendar-event-ink);opacity:0;block-size:2px;transition:opacity var(--vectis-duration-fast) var(--vectis-ease-default);position:absolute;inset-block-end:2px;inset-inline-start:50%;translate:-50%}.v-calendar-event:hover .v-calendar-event-handle:after,.v-calendar-event[data-dragging] .v-calendar-event-handle:after{opacity:.6}.v-calendar-event: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-event[data-continues-before]{border-block-start-style:dashed;border-start-start-radius:0;border-start-end-radius:0}.v-calendar-event[data-continues-after]{border-block-end-style:dashed;border-end-end-radius:0;border-end-start-radius:0}.v-calendar-event[data-layout=chip]{block-size:var(--calendar-chip-height,100%)}.v-calendar-event[data-layout=chip] .v-calendar-event-body{align-items:center;gap:var(--vectis-space-1);flex-direction:row;padding-block:0}.v-calendar-event-title{font-size:var(--vectis-text-body-sm-size);font-weight:var(--vectis-font-weight-medium);line-height:var(--vectis-text-body-sm-leading);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.v-calendar-event-time{font-size:var(--vectis-text-caption-size);line-height:var(--vectis-text-caption-leading);text-overflow:ellipsis;white-space:nowrap;opacity:.85;overflow:hidden}.v-calendar-event-description{min-block-size:0;color:inherit;text-overflow:ellipsis;opacity:.85;overflow:hidden}@media (prefers-reduced-motion:reduce){.v-calendar-event,.v-calendar-event-handle:after{transition:none}}}

package/dist/components/VCalendar/VCalendarEvent.d.ts

@@ -0,0 +1,71 @@
+import { CalendarEvent, CalendarEventId } from './types.js';
+export interface CalendarEventProps<T> {
+    /** The event this card stands for. */
+    event: T;
+    /**
+     * Which shape to take: a block, which fills the box the calendar gives it and can show a
+     * second line, or a chip, which is one line high and sits in a row of others.
+     */
+    layout?: 'block' | 'chip';
+    /** The event's times, already written out for the reader by the calendar. */
+    timeText?: string;
+    /** Whether the event carries on past the start or the end of what is on show. */
+    continuesBefore?: boolean;
+    continuesAfter?: boolean;
+    /** Shows the strip along the bottom edge that the event's end is dragged by. */
+    resizable?: boolean;
+    /** Whether the card is being dragged with a pointer right now. */
+    dragging?: boolean;
+    /**
+     * Whether letting go now would write nothing: the pointer has left the calendar, and the event
+     * is about to return to where the faded echo shows it started.
+     *
+     * It is separate from `dragging` rather than folded into it because a refused card is ALSO
+     * being dragged — the two are orthogonal, and the stylesheet reads both. Named for what the
+     * card knows, which is that its drop will not be taken; a card knows nothing of a view it
+     * might be outside of.
+     */
+    rejected?: boolean;
+    /** Whether the card has been taken hold of with the keyboard. */
+    grabbed?: boolean;
+    /** How the card says it can be moved, read from a node the calendar shares between them. */
+    hintId?: string;
+    /**
+     * Marks this card as the faded echo left behind where a dragged event STARTED, and names
+     * the event it echoes.
+     *
+     * It carries the original id rather than a bare boolean because the colour is derived from
+     * an id: a ghost has to be given a distinct one so the layout can tell the two apart, and
+     * without this the echo would come out a different colour from the card it belongs to.
+     */
+    ghostOf?: CalendarEventId;
+}
+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<CalendarEventProps<E>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        /** The whole content of the card, replacing the title and the times. */
+        default?(props: {
+            event: E;
+            layout: "block" | "chip";
+            timeText: string;
+            continuesBefore: boolean;
+            continuesAfter: boolean;
+            dragging: boolean;
+            grabbed: boolean;
+        }): unknown;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/VCalendar/VCalendarEvent.js

@@ -0,0 +1,9 @@
+import './VCalendarEvent.css';
+import e from "./VCalendarEvent.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                               */
+//#region src/components/VCalendar/VCalendarEvent.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=VCalendarEvent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VCalendarEvent.js","names":[],"sources":["../../../src/components/VCalendar/VCalendarEvent.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"E extends CalendarEvent\">\n// @a11y @core\n/**\n * One event, as it is drawn on the calendar.\n *\n * It is internal to VCalendar and has no story of its own: its documentation lives with\n * the component that renders it (the `VMenuPanel` and `VComboboxOption` precedent). It\n * exists because the same card is drawn from three places in two shapes — a block in a day\n * column, a chip in the all-day band or a month cell — and writing it three times would\n * triplicate the accessible name, the colour table and the slot.\n *\n * It is a real `<button>`, which is what makes an event reachable and activatable with no\n * JavaScript of its own. The only script here derives the colour; everything else — where\n * the card goes, and what happens when it is dragged — belongs to the calendar, which is\n * the thing that knows about the grid.\n */\nimport { computed } from 'vue'\n\nimport VTypography from '../VTypography/VTypography.vue'\n\nimport { useMessages } from '../../i18n/state'\n\nimport { hueOf } from './color'\nimport type { CalendarEvent, CalendarEventId } from './types'\n\nexport interface CalendarEventProps<T> {\n  /** The event this card stands for. */\n  event: T\n  /**\n   * Which shape to take: a block, which fills the box the calendar gives it and can show a\n   * second line, or a chip, which is one line high and sits in a row of others.\n   */\n  layout?: 'block' | 'chip'\n  /** The event's times, already written out for the reader by the calendar. */\n  timeText?: string\n  /** Whether the event carries on past the start or the end of what is on show. */\n  continuesBefore?: boolean\n  continuesAfter?: boolean\n  /** Shows the strip along the bottom edge that the event's end is dragged by. */\n  resizable?: boolean\n  /** Whether the card is being dragged with a pointer right now. */\n  dragging?: boolean\n  /**\n   * Whether letting go now would write nothing: the pointer has left the calendar, and the event\n   * is about to return to where the faded echo shows it started.\n   *\n   * It is separate from `dragging` rather than folded into it because a refused card is ALSO\n   * being dragged — the two are orthogonal, and the stylesheet reads both. Named for what the\n   * card knows, which is that its drop will not be taken; a card knows nothing of a view it\n   * might be outside of.\n   */\n  rejected?: boolean\n  /** Whether the card has been taken hold of with the keyboard. */\n  grabbed?: boolean\n  /** How the card says it can be moved, read from a node the calendar shares between them. */\n  hintId?: string\n  /**\n   * Marks this card as the faded echo left behind where a dragged event STARTED, and names\n   * the event it echoes.\n   *\n   * It carries the original id rather than a bare boolean because the colour is derived from\n   * an id: a ghost has to be given a distinct one so the layout can tell the two apart, and\n   * without this the echo would come out a different colour from the card it belongs to.\n   */\n  ghostOf?: CalendarEventId\n}\n\nconst props = withDefaults(defineProps<CalendarEventProps<E>>(), {\n  layout: 'block',\n  timeText: '',\n  continuesBefore: false,\n  continuesAfter: false,\n  resizable: false,\n  dragging: false,\n  rejected: false,\n  grabbed: false,\n  hintId: undefined,\n  ghostOf: undefined,\n})\n\ndefineSlots<{\n  /** The whole content of the card, replacing the title and the times. */\n  default?(props: {\n    event: E\n    layout: 'block' | 'chip'\n    timeText: string\n    continuesBefore: boolean\n    continuesAfter: boolean\n    dragging: boolean\n    grabbed: boolean\n  }): unknown\n}>()\n\nconst m = useMessages()\n\n/*\n * A colour given by the consumer is used as it stands; otherwise a hue is derived from the\n * event's id and the token layer supplies the lightness and the chroma that go with it.\n * The two are kept apart by an attribute rather than by a fallback chain, because the\n * custom case needs a DIFFERENT recipe and not merely a different value — see the\n * stylesheet below.\n */\nconst hue = computed(() => hueOf(props.ghostOf ?? props.event.id))\n\nconst style = computed(() =>\n  props.event.color\n    ? { '--calendar-event-color': props.event.color }\n    : { '--vectis-calendar-event-hue': String(hue.value) },\n)\n\n/**\n * What a screen reader hears: the title, then when it happens. The visible card may hide\n * the times when it is too short to hold them, so the name has to carry them itself —\n * \"Standup\" alone would leave a reader unable to tell two days of it apart.\n */\nconst accessibleName = computed(() =>\n  props.timeText ? `${props.event.title}, ${props.timeText}` : props.event.title,\n)\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    class=\"v-calendar-event\"\n    :data-event-id=\"String(event.id)\"\n    :data-layout=\"layout\"\n    :data-custom=\"event.color ? '' : undefined\"\n    :data-continues-before=\"continuesBefore ? '' : undefined\"\n    :data-continues-after=\"continuesAfter ? '' : undefined\"\n    :data-dragging=\"dragging ? '' : undefined\"\n    :data-rejected=\"rejected ? '' : undefined\"\n    :data-grabbed=\"grabbed ? '' : undefined\"\n    :data-ghost=\"ghostOf !== undefined ? '' : undefined\"\n    :style=\"style\"\n    :aria-label=\"accessibleName\"\n    :aria-roledescription=\"m.calendar.eventRoleDescription\"\n    :aria-describedby=\"hintId\"\n    :inert=\"ghostOf !== undefined ? true : undefined\"\n  >\n    <!--\n      The content sits in a box of its own because the CARD is the container the stylesheet\n      queries, and an element cannot be styled by its own container query. The layout that\n      has to change when a card gets short — a column of two lines becoming one row — must\n      therefore live on a descendant. It is also why the padding belongs here rather than on\n      the button: a card cannot zero its own.\n    -->\n    <span class=\"v-calendar-event-body\">\n      <slot\n        :event=\"event\"\n        :layout=\"layout\"\n        :time-text=\"timeText\"\n        :continues-before=\"continuesBefore\"\n        :continues-after=\"continuesAfter\"\n        :dragging=\"dragging\"\n        :grabbed=\"grabbed\"\n      >\n        <span class=\"v-calendar-event-title\">{{ event.title }}</span>\n        <span v-if=\"layout === 'block' && timeText\" class=\"v-calendar-event-time\">\n          {{ timeText }}\n        </span>\n        <VTypography\n          v-if=\"layout === 'block' && event.description\"\n          as=\"span\"\n          variant=\"caption\"\n          class=\"v-calendar-event-description\"\n        >\n          {{ event.description }}\n        </VTypography>\n      </slot>\n    </span>\n\n    <!--\n      The strip the event's end is dragged by.\n\n      It is a `span` and NOT a control, which is what keeps it out of the accessibility tree\n      and away from `nested-interactive`: a button inside a button is invalid HTML and a\n      blocking accessibility failure at once. It is a pointer affordance and nothing else,\n      and its keyboard equivalent lives on the card itself as Shift with the arrow keys —\n      which is why hiding it costs a reader nothing.\n    -->\n    <span\n      v-if=\"resizable && layout === 'block'\"\n      class=\"v-calendar-event-handle\"\n      data-calendar-handle\n      aria-hidden=\"true\"\n    />\n  </button>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-calendar-event {\n    /*\n     * The three colours of a card, named by what they paint rather than by where they come\n     * from — which is what lets the custom block below swap the SOURCE of all three without\n     * touching a single rule that consumes them.\n     */\n    --calendar-event-face: var(--vectis-color-event-surface);\n    --calendar-event-edge: var(--vectis-color-event-border);\n    --calendar-event-ink: var(--vectis-color-event-text);\n\n    /* The handle is placed against this box, so the card has to establish one. */\n    position: relative;\n    display: flex;\n    overflow: hidden;\n    /*\n     * The card is what the body below is measured against.\n     *\n     * `size` and not `inline-size`, which is what the library's other four containers use:\n     * the question being asked here is about HEIGHT, since that is what a short event runs\n     * out of. It is safe because a card's two dimensions are both set outright by\n     * `.v-calendar-block` — size containment therefore removes an influence nothing was\n     * exercising. Asking in minutes instead would have meant calibrating against\n     * `--vectis-control-size-calendar-hour`, and being silently wrong for anyone who\n     * overrode it.\n     */\n    container-type: size;\n    border: 1px solid var(--calendar-event-edge);\n    /* The leading edge is what carries the colour at a glance, so it is drawn thicker. It\n       is a border and not a background stripe: under Windows forced-colors a background is\n       forced to Canvas and vanishes, where a border keeps a colour of its own. */\n    border-inline-start: 3px solid var(--calendar-event-edge);\n    border-radius: var(--vectis-radius-interactive);\n    background: var(--calendar-event-face);\n    color: var(--calendar-event-ink);\n    font-family: var(--vectis-text-family);\n    text-align: start;\n    cursor: pointer;\n    transition:\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default),\n      filter var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /*\n   * A colour the consumer chose is an arbitrary value, so the card is built so that NOTHING\n   * is ever written on top of it: it paints the edge, and the face is a faint wash of it\n   * over the page's own surface — which also makes it follow the theme with no second\n   * setting. The text stays the page's text colour, whose contrast against that surface is\n   * already guaranteed. This is the deliberate difference from VChip, where a fully\n   * coloured chip leaves the check to whoever chose the colour.\n   */\n  .v-calendar-event[data-custom] {\n    --calendar-event-edge: var(--calendar-event-color);\n    --calendar-event-face: color-mix(\n      in oklab,\n      var(--calendar-event-color) 14%,\n      var(--vectis-color-surface)\n    );\n    --calendar-event-ink: var(--vectis-color-text);\n  }\n\n  .v-calendar-event-body {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 1px;\n    /* Without this a flex item refuses to shrink past its content, and a card too short for\n       its own text would push its title out of the clip instead of cropping it. */\n    min-block-size: 0;\n    min-inline-size: 0;\n    overflow: hidden;\n    padding: var(--vectis-space-1) var(--vectis-space-2);\n  }\n\n  /*\n   * A card too short for two lines puts them on ONE: the title first and ellipsized, the\n   * time after it, and the description dropped — which is the only way a quarter of an hour\n   * shows anything at all. Three rem is where a title line, a time line, the gap and the\n   * padding stop fitting; below it there is room for exactly one line.\n   *\n   * The threshold is a literal because a container query takes no custom properties — the\n   * same constraint VPagination's steps are written under.\n   */\n  @container (max-height: 3rem) {\n    .v-calendar-event[data-layout='block'] .v-calendar-event-body {\n      flex-direction: row;\n      align-items: center;\n      gap: var(--vectis-space-1);\n      padding-block: 0;\n    }\n\n    .v-calendar-event[data-layout='block'] .v-calendar-event-title {\n      flex: 1;\n      min-inline-size: 0;\n    }\n\n    .v-calendar-event[data-layout='block'] .v-calendar-event-time {\n      flex: none;\n    }\n\n    /* There is no room for a third thing, and the title is what identifies the event. */\n    .v-calendar-event[data-layout='block'] .v-calendar-event-description {\n      display: none;\n    }\n  }\n\n  /*\n   * The shortest card there is: one slot, which at the default hour height is sixteen pixels,\n   * leaving fourteen once the border is taken. A line of the title at its normal leading is\n   * eighteen — so the leading is what gives, down to the glyphs themselves. Nothing smaller\n   * is available: twelve pixels is already the smallest type role the library has.\n   *\n   * This tier exists because a card may no longer grow past its own length: it is the price\n   * of a quarter of an hour that stays inside its slot, and it is paid in leading rather than\n   * in a card that covers the next one.\n   */\n  @container (max-height: 1.5rem) {\n    .v-calendar-event[data-layout='block'] .v-calendar-event-title,\n    .v-calendar-event[data-layout='block'] .v-calendar-event-time {\n      line-height: 1;\n    }\n\n    /* Half the strip, or half of a sixteen-pixel card would resize rather than move it. */\n    .v-calendar-event[data-layout='block'] .v-calendar-event-handle {\n      block-size: calc(var(--vectis-control-size-calendar-handle) / 2);\n    }\n  }\n\n  .v-calendar-event:hover {\n    filter: brightness(0.97);\n  }\n\n  /*\n   * A card being moved is lifted off the grid and made slightly transparent, so the hours\n   * underneath stay readable while it travels — a solid card would hide the very rules the\n   * reader is aiming at. `pointer-events: none` matters as much: the pointer is captured by\n   * the grid, and a card under the cursor would otherwise take the hover of every cell it\n   * passed over.\n   */\n  .v-calendar-event[data-dragging] {\n    opacity: 0.75;\n    box-shadow: var(--vectis-shadow-md);\n    pointer-events: none;\n    z-index: 3;\n  }\n\n  /*\n   * A card whose drop will not be taken: the pointer has left the calendar, and letting go here\n   * puts the event back where the echo shows it started.\n   *\n   * THREE channels, because one is never enough. The colour is the danger role, reached through\n   * the same three local variables `[data-custom]` swaps — which is also what repaints a card the\n   * consumer coloured, that rule sitting higher up this sheet. The LIFT is taken away, so a card\n   * that will not land visibly stops being carried: the one cue that costs no colour at all. And\n   * the border goes DOTTED, the only one of the three surviving Windows forced-colors, where the\n   * face is forced to Canvas and every card would otherwise look identical — dotted rather than\n   * dashed because dashed is already the echo's language, and a refused drop must not read as a\n   * memory of one.\n   *\n   * `opacity: 0.75` is deliberately left in place: it is what keeps the hours under the card\n   * readable, and the reader is still aiming with it.\n   *\n   * TRAP — this rule must stay BELOW `[data-dragging]`. Both are (0,2,0) and a refused card is\n   * always also a dragged one, so the later rule is the whole of the arbitration. That is\n   * legitimate here and only here: these two live in the SAME sheet, where the internal order is\n   * ours to decide — between two component sheets it would be the consumer's bundler deciding.\n   */\n  .v-calendar-event[data-rejected] {\n    --calendar-event-face: var(--vectis-color-danger-surface);\n    --calendar-event-edge: var(--vectis-color-danger-border);\n    --calendar-event-ink: var(--vectis-color-danger-text);\n\n    border-style: dotted;\n    box-shadow: none;\n  }\n\n  /*\n   * The echo left where a dragged event started, so the reader can see what they are moving\n   * it FROM — without it a long drag ends with no idea what has just been given up.\n   *\n   * Faded rather than outlined, and dashed rather than solid, so that it reads as a memory\n   * and not as a second event: at a glance the only card that looks real is the one under the\n   * pointer. It sits UNDER everything (`z-index: 0`), since it is the one thing on the grid\n   * that nothing should ever be hidden behind.\n   *\n   * `inert` in the template is what keeps it out of the accessibility tree and out of reach\n   * of the pointer, in one attribute — a duplicate announced a second time would be noise,\n   * and a focusable copy inside a hidden subtree is an axe violation of its own.\n   */\n  .v-calendar-event[data-ghost] {\n    opacity: 0.4;\n    border-style: dashed;\n    z-index: 0;\n  }\n\n  /* Held by the keyboard: the same lift, but marked with the focus ring's own colour, since\n     there is no pointer to show where it is going. */\n  .v-calendar-event[data-grabbed] {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n    box-shadow: var(--vectis-shadow-md);\n    z-index: 3;\n  }\n\n  .v-calendar-event-handle {\n    position: absolute;\n    inset-block-end: 0;\n    inset-inline: 0;\n    block-size: var(--vectis-control-size-calendar-handle);\n    /* Dragging here IS how the end is set, so it must do nothing else: no scrolling under a\n       finger, and no selecting the text it sits over. */\n    touch-action: none;\n    cursor: ns-resize;\n  }\n\n  /* The grip appears on hover and while the card is being resized, never permanently: a\n     short card is mostly handle, and a line across every event all the time reads as a\n     border nobody asked for. */\n  .v-calendar-event-handle::after {\n    content: '';\n    position: absolute;\n    inset-block-end: 2px;\n    inset-inline-start: 50%;\n    inline-size: var(--vectis-space-4);\n    block-size: 2px;\n    translate: -50% 0;\n    border-radius: var(--vectis-radius-pill);\n    background: var(--calendar-event-ink);\n    opacity: 0;\n    transition: opacity var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-calendar-event:hover .v-calendar-event-handle::after,\n  .v-calendar-event[data-dragging] .v-calendar-event-handle::after {\n    opacity: 0.6;\n  }\n\n  .v-calendar-event:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  /* An event running past what is on show loses the corner on that side, so the card reads\n     as cut off rather than as merely small. */\n  .v-calendar-event[data-continues-before] {\n    border-start-start-radius: 0;\n    border-start-end-radius: 0;\n    border-block-start-style: dashed;\n  }\n\n  .v-calendar-event[data-continues-after] {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n    border-block-end-style: dashed;\n  }\n\n  /*\n   * A chip fills the box it was put in — a lane of the all-day band, whose grid row is\n   * already the right height — unless the consumer of this class names a height instead.\n   *\n   * TRAP — that indirection is not a nicety, it is the only correct shape. This selector is\n   * (0,2,0) and `.v-calendar-month-chip`, which needs a different height, is (0,1,0) in\n   * ANOTHER SHEET: matching specificity would hand the winner to whichever order the\n   * consumer's bundler happens to emit, and beating it would need a three-class compound.\n   * Routing through a property this rule already reads is the library's documented way out,\n   * the one `.v-table-title` takes on `--typography-color`.\n   */\n  .v-calendar-event[data-layout='chip'] {\n    block-size: var(--calendar-chip-height, 100%);\n  }\n\n  .v-calendar-event[data-layout='chip'] .v-calendar-event-body {\n    flex-direction: row;\n    align-items: center;\n    gap: var(--vectis-space-1);\n    padding-block: 0;\n  }\n\n  .v-calendar-event-title {\n    overflow: hidden;\n    font-size: var(--vectis-text-body-sm-size);\n    font-weight: var(--vectis-font-weight-medium);\n    line-height: var(--vectis-text-body-sm-leading);\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .v-calendar-event-time {\n    overflow: hidden;\n    font-size: var(--vectis-text-caption-size);\n    line-height: var(--vectis-text-caption-leading);\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    /* The times are secondary to the title, but the card's colour is already doing the\n       quiet work — a muted token here would fight it, so the same ink at less weight. */\n    opacity: 0.85;\n  }\n\n  .v-calendar-event-description {\n    overflow: hidden;\n    /* The card's height is the event's length, so a description shows only where there is\n       genuinely room for it: it takes whatever is left and disappears when that is nothing. */\n    min-block-size: 0;\n    color: inherit;\n    text-overflow: ellipsis;\n    opacity: 0.85;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-calendar-event,\n    .v-calendar-event-handle::after {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}