vectis-ui 0.1.0

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

@@ -0,0 +1,106 @@
+import { useMessages as e } from "../../i18n/state.js";
+import t from "../VTypography/VTypography.js";
+import { hueOf as n } from "./color.js";
+import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, normalizeStyle as u, openBlock as d, renderSlot as f, toDisplayString as p, unref as m, withCtx as h } from "vue";
+//#region src/components/VCalendar/VCalendarEvent.vue?vue&type=script&setup=true&lang.ts
+var g = [
+	"data-event-id",
+	"data-layout",
+	"data-custom",
+	"data-continues-before",
+	"data-continues-after",
+	"data-dragging",
+	"data-rejected",
+	"data-grabbed",
+	"data-ghost",
+	"aria-label",
+	"aria-roledescription",
+	"aria-describedby",
+	"inert"
+], _ = { class: "v-calendar-event-body" }, v = { class: "v-calendar-event-title" }, y = {
+	key: 0,
+	class: "v-calendar-event-time"
+}, b = {
+	key: 0,
+	class: "v-calendar-event-handle",
+	"data-calendar-handle": "",
+	"aria-hidden": "true"
+}, x = /*@__PURE__*/ l({
+	__name: "VCalendarEvent",
+	props: {
+		event: {},
+		layout: { default: "block" },
+		timeText: { default: "" },
+		continuesBefore: {
+			type: Boolean,
+			default: !1
+		},
+		continuesAfter: {
+			type: Boolean,
+			default: !1
+		},
+		resizable: {
+			type: Boolean,
+			default: !1
+		},
+		dragging: {
+			type: Boolean,
+			default: !1
+		},
+		rejected: {
+			type: Boolean,
+			default: !1
+		},
+		grabbed: {
+			type: Boolean,
+			default: !1
+		},
+		hintId: { default: void 0 },
+		ghostOf: { default: void 0 }
+	},
+	setup(l) {
+		let x = l, S = e(), C = r(() => n(x.ghostOf ?? x.event.id)), w = r(() => x.event.color ? { "--calendar-event-color": x.event.color } : { "--vectis-calendar-event-hue": String(C.value) }), T = r(() => x.timeText ? `${x.event.title}, ${x.timeText}` : x.event.title);
+		return (e, n) => (d(), o("button", {
+			type: "button",
+			class: "v-calendar-event",
+			"data-event-id": String(l.event.id),
+			"data-layout": l.layout,
+			"data-custom": l.event.color ? "" : void 0,
+			"data-continues-before": l.continuesBefore ? "" : void 0,
+			"data-continues-after": l.continuesAfter ? "" : void 0,
+			"data-dragging": l.dragging ? "" : void 0,
+			"data-rejected": l.rejected ? "" : void 0,
+			"data-grabbed": l.grabbed ? "" : void 0,
+			"data-ghost": l.ghostOf === void 0 ? void 0 : "",
+			style: u(w.value),
+			"aria-label": T.value,
+			"aria-roledescription": m(S).calendar.eventRoleDescription,
+			"aria-describedby": l.hintId,
+			inert: l.ghostOf !== void 0 || void 0
+		}, [s("span", _, [f(e.$slots, "default", {
+			event: l.event,
+			layout: l.layout,
+			timeText: l.timeText,
+			continuesBefore: l.continuesBefore,
+			continuesAfter: l.continuesAfter,
+			dragging: l.dragging,
+			grabbed: l.grabbed
+		}, () => [
+			s("span", v, p(l.event.title), 1),
+			l.layout === "block" && l.timeText ? (d(), o("span", y, p(l.timeText), 1)) : a("", !0),
+			l.layout === "block" && l.event.description ? (d(), i(t, {
+				key: 1,
+				as: "span",
+				variant: "caption",
+				class: "v-calendar-event-description"
+			}, {
+				default: h(() => [c(p(l.event.description), 1)]),
+				_: 1
+			})) : a("", !0)
+		])]), l.resizable && l.layout === "block" ? (d(), o("span", b)) : a("", !0)], 12, g));
+	}
+});
+//#endregion
+export { x as default };
+
+//# sourceMappingURL=VCalendarEvent.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VCalendarEvent.vue_vue_type_script_setup_true_lang.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmEA,IAAM,IAAQ,GA0BR,IAAI,EAAY,GAShB,IAAM,QAAe,EAAM,EAAM,WAAW,EAAM,MAAM,EAAE,CAAC,GAE3D,IAAQ,QACZ,EAAM,MAAM,QACR,EAAE,0BAA0B,EAAM,MAAM,MAAM,IAC9C,EAAE,+BAA+B,OAAO,EAAI,KAAK,EAAE,CACzD,GAOM,IAAiB,QACrB,EAAM,WAAW,GAAG,EAAM,MAAM,MAAM,IAAI,EAAM,aAAa,EAAM,MAAM,KAC3E;yBAIE,EAiES,UAAA;GAhEP,MAAK;GACL,OAAM;GACL,iBAAe,OAAO,EAAA,MAAM,EAAE;GAC9B,eAAa,EAAA;GACb,eAAa,EAAA,MAAM,QAAK,KAAQ,KAAA;GAChC,yBAAuB,EAAA,kBAAe,KAAQ,KAAA;GAC9C,wBAAsB,EAAA,iBAAc,KAAQ,KAAA;GAC5C,iBAAe,EAAA,WAAQ,KAAQ,KAAA;GAC/B,iBAAe,EAAA,WAAQ,KAAQ,KAAA;GAC/B,gBAAc,EAAA,UAAO,KAAQ,KAAA;GAC7B,cAAY,EAAA,YAAY,KAAA,IAAiB,KAAA,IAAR;GACjC,OAAK,EAAE,EAAA,KAAK;GACZ,cAAY,EAAA;GACZ,wBAAsB,EAAA,CAAA,CAAC,CAAC,SAAS;GACjC,oBAAkB,EAAA;GAClB,OAAO,EAAA,YAAY,KAAA,KAAmB,KAAA;MASvC,EAuBO,QAvBP,GAuBO,CAtBL,EAqBO,EAAA,QAAA,WAAA;GApBJ,OAAO,EAAA;GACP,QAAQ,EAAA;GACR,UAAW,EAAA;GACX,iBAAkB,EAAA;GAClB,gBAAiB,EAAA;GACjB,UAAU,EAAA;GACV,SAAS,EAAA;WAcL;GAZL,EAA6D,QAA7D,GAA6D,EAArB,EAAA,MAAM,KAAK,GAAA,CAAA;GACvC,EAAA,WAAM,WAAgB,EAAA,YAAA,EAAA,GAAlC,EAEO,QAFP,GAEO,EADF,EAAA,QAAQ,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;GAGL,EAAA,WAAM,WAAgB,EAAA,MAAM,eAAA,EAAA,GADpC,EAOc,GAAA;;IALZ,IAAG;IACH,SAAQ;IACR,OAAM;;qBAEiB,CAAA,EAAA,EAApB,EAAA,MAAM,WAAW,GAAA,CAAA,CAAA,CAAA;;;QAelB,EAAA,aAAa,EAAA,WAAM,WAAA,EAAA,GAD3B,EAKE,QALF,CAKE,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,IAAA,CAAA"}

package/dist/components/VCalendar/VCalendarMonth.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-calendar-month{block-size:100%;min-block-size:0;font-family:var(--vectis-text-family);color:var(--vectis-color-text);flex-direction:column;display:flex;overflow:auto}.v-calendar-month[data-outside]{cursor:not-allowed}.v-calendar-month-head,.v-calendar-month-week{grid-template-columns:repeat(var(--calendar-columns), minmax(0, 1fr));display:grid}.v-calendar-month-head{z-index:1;background:var(--vectis-color-surface);border-block-end:1px solid var(--vectis-color-border);position:sticky;inset-block-start:0}.v-calendar-month-weekday{padding-block:var(--vectis-space-2);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-align:center;text-transform:uppercase}.v-calendar-month-grid[data-edge]:after{content:"";inline-size:var(--vectis-control-size-calendar-edge);background:var(--vectis-color-accent-surface);z-index:1;pointer-events:none;position:absolute;inset-block:0}.v-calendar-month-grid[data-edge=start]:after{inset-inline-start:0}.v-calendar-month-grid[data-edge=end]:after{inset-inline-end:0}.v-calendar-month-grid{flex-direction:column;flex:1;min-block-size:0;display:flex;position:relative}.v-calendar-month-week{min-block-size:var(--vectis-control-size-calendar-month-cell);flex:1}.v-calendar-month-cell{padding:var(--vectis-space-1);border-block-start:1px solid var(--vectis-color-border);border-inline-start:1px solid var(--vectis-color-border);cursor:pointer;flex-direction:column;gap:2px;display:flex;overflow:hidden}.v-calendar-month-cell:first-child{border-inline-start:none}.v-calendar-month-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-month-cell[data-adjacent]{background:var(--vectis-color-surface-sunken);color:var(--vectis-color-text-subtle)}.v-calendar-month-day{inline-size:var(--vectis-control-height-sm);block-size:var(--vectis-control-height-sm);border-radius:var(--vectis-radius-pill);color:inherit;font-family:inherit;font-size:var(--vectis-text-body-md-size);cursor:pointer;transition:background-color var(--vectis-duration-fast) var(--vectis-ease-default);background:0 0;border:none;flex:none;justify-content:center;align-self:center;align-items:center;display:flex}.v-calendar-month-day:hover{background:var(--vectis-color-surface-muted)}.v-calendar-month-day:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-calendar-month-cell[data-today] .v-calendar-month-day{background:var(--vectis-color-accent);color:var(--vectis-color-text-on-accent);font-weight:var(--vectis-font-weight-semibold)}.v-calendar-month-chip{--calendar-chip-height:var(--vectis-control-size-calendar-allday-lane);flex:none}.v-calendar-month-more{padding-inline:var(--vectis-space-1);color:var(--vectis-color-text-muted);font-family:inherit;font-size:var(--vectis-text-caption-size);text-align:start;cursor:pointer;background:0 0;border:none;flex:none}.v-calendar-month-more:hover{color:var(--vectis-color-text);text-decoration:underline}.v-calendar-month-more:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}@media (prefers-reduced-motion:reduce){.v-calendar-month-day{transition:none}}}

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

@@ -0,0 +1,60 @@
+import { HourFormat } from '../../utils/time.js';
+import { MonthCell } from './layout.js';
+import { CalendarEvent, CalendarEventId, CalendarEventTimes } from './types.js';
+export interface CalendarMonthProps<T> {
+    /** The weeks, already padded to a fixed height and filtered to the visible weekdays. */
+    weeks: MonthCell[][];
+    events: T[];
+    locale: string;
+    hourFormat: HourFormat;
+    today: string | null;
+    /** How many events a day shows before it starts counting the rest. */
+    eventLimit: number;
+    /** Whether events can be moved from one day to another. */
+    editable: boolean;
+    /** The node telling a reader how a chip can be moved, shared by every one of them. */
+    hintId: string;
+    /** How long a drag rests against an edge before the month turns. Zero turns paging off. */
+    edgeStepDelay: number;
+    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<(CalendarMonthProps<E> & {
+        /** Which day holds the tab stop. Only the date matters here; the hour is the grid's affair. */
+        focused: string;
+    }) & {
+        onAnnounce?: ((message: string) => any) | undefined;
+        onStep?: ((delta: 1 | -1) => any) | undefined;
+        "onDay-activate"?: ((iso: string) => any) | undefined;
+        "onCell-activate"?: ((iso: string) => any) | undefined;
+        "onEvent-activate"?: ((event: E) => any) | undefined;
+        "onEvent-drop"?: ((id: CalendarEventId, times: CalendarEventTimes, kind: "move") => any) | undefined;
+        "onUpdate:focused"?: ((value: string) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import('vue').ShallowUnwrapRef<{
+        focus: () => void;
+        scrollToMinutes: () => void;
+    }>) => void;
+    attrs: any;
+    slots: {
+        event?(props: {
+            event: E;
+            layout: "block" | "chip";
+            timeText: string;
+            continuesBefore: boolean;
+            continuesAfter: boolean;
+        }): unknown;
+    };
+    emit: (((evt: "announce", message: string) => void) & ((evt: "step", delta: 1 | -1) => void) & ((evt: "day-activate", iso: string) => void) & ((evt: "cell-activate", iso: string) => void) & ((evt: "event-activate", event: E) => void) & ((evt: "event-drop", id: CalendarEventId, times: CalendarEventTimes, kind: "move") => void)) & ((event: "update:focused", value: string) => void);
+}>) => 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/VCalendarMonth.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"VCalendarMonth.js","names":[],"sources":["../../../src/components/VCalendar/VCalendarMonth.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"E extends CalendarEvent\">\n// @a11y @keyboard @core\n/**\n * The month view: the weeks stacked one under another, each day a square holding as many of\n * its events as will fit.\n *\n * It is internal to VCalendar and has no story of its own — its documentation lives with\n * the component that renders it. Like the time grid it computes nothing about dates: it is\n * handed the weeks already cut and filtered, and turns them into boxes.\n *\n * A day here is not a column of hours but a SUMMARY, so the events are drawn as chips in\n * the order the day would be read out — the all-day ones first, then the rest by when they\n * start — and a day with more than it can show says how many are left rather than silently\n * dropping them.\n */\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":""}

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

@@ -0,0 +1,342 @@
+import { useMessages as e } from "../../i18n/state.js";
+import { isRtl as t } from "../../utils/direction.js";
+import { clamp as n } from "../../utils/number.js";
+import { formatDisplay as r } from "../../utils/date.js";
+import { formatDisplay as i } from "../../utils/time.js";
+import a from "./VCalendarEvent.js";
+import { calendarIntent as o } from "./keyboard.js";
+import { useEdgeStep as s } from "./edgeStep.js";
+import { eventsByDay as c, inlineEdgeAt as l, isAllDayEvent as ee, moveEventToDay as u, pointToMonthCell as te, pointWithin as ne, timesOf as d } from "./layout.js";
+import { Fragment as f, computed as p, createBlock as re, createCommentVNode as ie, createElementBlock as m, createElementVNode as h, createSlots as ae, defineComponent as g, mergeModels as _, mergeProps as oe, nextTick as v, normalizeStyle as se, openBlock as y, ref as b, renderList as x, renderSlot as ce, toDisplayString as S, unref as C, useId as le, useModel as ue, watch as de, withCtx as fe } from "vue";
+//#region src/components/VCalendar/VCalendarMonth.vue?vue&type=script&setup=true&lang.ts
+var pe = ["data-outside"], me = {
+	class: "v-calendar-month-head",
+	"aria-hidden": "true"
+}, he = [
+	"aria-label",
+	"data-gesture",
+	"data-edge"
+], ge = [
+	"id",
+	"data-iso",
+	"data-adjacent",
+	"data-today",
+	"tabindex",
+	"aria-label"
+], _e = ["aria-label", "onClick"], ve = ["onClick"], w = "__vectis-calendar-ghost__", T = /*@__PURE__*/ g({
+	__name: "VCalendarMonth",
+	props: /*@__PURE__*/ _({
+		weeks: {},
+		events: {},
+		locale: {},
+		hourFormat: {},
+		today: {},
+		eventLimit: {},
+		editable: { type: Boolean },
+		hintId: {},
+		edgeStepDelay: {},
+		label: {}
+	}, {
+		focused: { required: !0 },
+		focusedModifiers: {}
+	}),
+	emits: /*@__PURE__*/ _([
+		"day-activate",
+		"cell-activate",
+		"event-activate",
+		"event-drop",
+		"announce",
+		"step"
+	], ["update:focused"]),
+	setup(g, { expose: _, emit: T }) {
+		let E = g, D = T, O = ue(g, "focused"), k = e(), ye = le(), A = (e) => `${ye}-m-${e}`, j = p(() => (E.weeks[0] ?? []).map((e) => r(e.iso, E.locale, { weekday: "short" }))), M = p(() => {
+			let e = /* @__PURE__ */ new Map();
+			for (let t of E.weeks) for (let n of t) e.set(n.iso, {
+				number: r(n.iso, E.locale, { day: "numeric" }),
+				long: r(n.iso, E.locale, {
+					weekday: "long",
+					day: "numeric",
+					month: "long"
+				})
+			});
+			return e;
+		}), be = (e) => M.value.get(e)?.number ?? r(e, E.locale, { day: "numeric" }), N = (e) => M.value.get(e)?.long ?? r(e, E.locale, {
+			weekday: "long",
+			day: "numeric",
+			month: "long"
+		}), P = b(null), F = p(() => P.value !== null && P.value.pointerId === null), I = b(null), L = b(null), xe = (e) => `${w}${e}`, Se = (e) => String(e).slice(25), R = (e) => String(e).startsWith(w), z = p(() => {
+			let e = P.value;
+			if (!e) return E.events;
+			let t = E.events.map((t) => t.id === e.id ? {
+				...t,
+				...e.preview
+			} : t), n = e.moved ? E.events.find((t) => t.id === e.id) : void 0;
+			return n ? [...t, {
+				...n,
+				...e.origin,
+				id: xe(e.id)
+			}] : t;
+		}), B = p(() => c(z.value, E.weeks.flatMap((e) => e.map((e) => e.iso)))), V = p(() => new Map(z.value.map((e) => [e.id, e]))), Ce = (e) => (B.value.get(e) ?? []).slice(0, E.eventLimit), H = (e) => Math.max(0, (B.value.get(e) ?? []).length - E.eventLimit);
+		function we(e) {
+			return ee(e) ? "" : i(e.startTime, E.locale, E.hourFormat);
+		}
+		let U = p(() => E.weeks.flat().map((e) => e.iso));
+		function W(e) {
+			O.value = e, v(() => document.getElementById(A(e))?.focus());
+		}
+		let G = p(() => U.value.includes(O.value) ? O.value : U.value[0] ?? null);
+		function Te(e) {
+			let t = e.target, r = t?.closest(".v-calendar-event");
+			if (r) {
+				Fe(e, r);
+				return;
+			}
+			let i = t?.closest(".v-calendar-month-cell");
+			if (!i) return;
+			let a = o(e.key, e.shiftKey, "cell", 1, K());
+			if (!a) return;
+			let s = i.dataset.iso, c = U.value.indexOf(s), l = E.weeks[0]?.length ?? 1;
+			if (a.kind === "moveFocus") {
+				let t = a.days === 0 ? Math.sign(a.minutes) * l : a.days, r = U.value[n(c + t, 0, U.value.length - 1)];
+				if (!r) return;
+				e.preventDefault(), W(r);
+				return;
+			}
+			if (a.kind === "rowEdge") {
+				let t = Math.floor(c / l), r = a.edge === "start" ? t * l : t * l + l - 1, i = U.value[n(r, 0, U.value.length - 1)];
+				if (!i) return;
+				e.preventDefault(), W(i);
+				return;
+			}
+			if (a.kind === "period") {
+				e.preventDefault(), D("step", a.delta);
+				return;
+			}
+			a.kind === "activate" && (e.preventDefault(), D("cell-activate", s));
+		}
+		let K = () => t(I.value);
+		function q(e) {
+			let t = K();
+			return {
+				top: e.top,
+				height: e.height,
+				inlineStart: t ? e.right : e.left,
+				inlineSize: e.width,
+				columns: E.weeks[0]?.length ?? 1,
+				rows: E.weeks.length || 1
+			};
+		}
+		function J(e, t) {
+			let n = I.value?.getBoundingClientRect();
+			if (!n) return null;
+			let r = te({
+				x: e,
+				y: t
+			}, q(n), K()), i = E.weeks[0]?.length ?? 1;
+			return r.rowIndex * i + r.columnIndex;
+		}
+		let Y = s((e) => D("step", e), () => E.edgeStepDelay), Ee = p(() => Y.pending.value === -1 ? "start" : Y.pending.value === 1 ? "end" : void 0);
+		de(() => E.weeks, () => {
+			let e = P.value;
+			e?.moved && Z(e);
+		}, { flush: "post" });
+		function De(e) {
+			if (Ae(), P.value || !E.editable || e.button !== 0) return;
+			let t = e.target?.closest(".v-calendar-event");
+			if (!t) return;
+			let n = V.value.get(X(t)), r = J(e.clientX, e.clientY);
+			if (!(!n || r === null)) {
+				P.value = {
+					id: n.id,
+					origin: d(n),
+					preview: d(n),
+					pointerId: e.pointerId,
+					originX: e.clientX,
+					originY: e.clientY,
+					grabIndex: r,
+					lastX: e.clientX,
+					lastY: e.clientY,
+					moved: !1,
+					outside: !1
+				};
+				try {
+					I.value?.setPointerCapture(e.pointerId);
+				} catch {}
+			}
+		}
+		function X(e) {
+			let t = e.dataset.eventId ?? "";
+			return V.value.has(t) ? t : Number(t);
+		}
+		function Oe(e) {
+			let t = P.value;
+			if (!t || t.pointerId !== e.pointerId || (t.lastX = e.clientX, t.lastY = e.clientY, !t.moved && Math.abs(e.clientX - t.originX) < 3 && Math.abs(e.clientY - t.originY) < 3)) return;
+			t.moved = !0, t.outside = ke(t), Z(t);
+			let n = I.value?.getBoundingClientRect();
+			n && Y.watchEdge(l(t.lastX, q(n), 48, K()));
+		}
+		function ke(e) {
+			let t = L.value?.getBoundingClientRect();
+			return t ? !ne({
+				x: e.lastX,
+				y: e.lastY
+			}, t) : !1;
+		}
+		function Z(e) {
+			let t = J(e.lastX, e.lastY);
+			if (t === null) return;
+			let r = U.value, i = r.indexOf(e.origin.start), a = r[n((i === -1 ? e.grabIndex : i) + t - e.grabIndex, 0, r.length - 1)];
+			a && (e.preview = u(e.origin, a));
+		}
+		let Q = !1;
+		function Ae() {
+			Q = !1;
+		}
+		function je(e) {
+			let t = P.value;
+			!t || t.pointerId !== e.pointerId || (P.value = null, Q = t.moved, Y.cancel(), !t.outside && t.moved && D("event-drop", t.id, t.preview, "move"));
+		}
+		function Me() {
+			P.value = null, Y.cancel();
+		}
+		function Ne(e) {
+			if (Q) {
+				Q = !1;
+				return;
+			}
+			D("event-activate", e);
+		}
+		function Pe(e, t) {
+			D("announce", k.value.calendar.movedTo(e, N(t.start)));
+		}
+		function $(e) {
+			v(() => {
+				let t = I.value?.querySelectorAll(".v-calendar-event");
+				Array.from(t ?? []).find((t) => t.dataset.eventId === String(e))?.focus();
+			});
+		}
+		function Fe(e, t) {
+			let r = V.value.get(X(t));
+			if (!r) return;
+			let i = F.value && P.value?.id === r.id, a = o(e.key, e.shiftKey, i ? "grabbed" : "event", 1, K());
+			if (!a) return;
+			if (!i) {
+				if (a.kind !== "activate" || !E.editable) return;
+				e.preventDefault(), P.value = {
+					id: r.id,
+					origin: d(r),
+					preview: d(r),
+					pointerId: null,
+					originX: 0,
+					originY: 0,
+					grabIndex: 0,
+					lastX: 0,
+					lastY: 0,
+					moved: !1,
+					outside: !1
+				}, D("announce", k.value.calendar.grabbed);
+				return;
+			}
+			let s = P.value;
+			if (e.preventDefault(), a.kind === "grabMove") {
+				let e = U.value, t = E.weeks[0]?.length ?? 1, i = a.days === 0 ? Math.sign(a.minutes) * t : a.days, o = e[n(e.indexOf(s.preview.start) + i, 0, e.length - 1)];
+				if (!o) return;
+				s.preview = u(s.preview, o), s.moved = !0, Pe(r.title, s.preview), $(s.id);
+				return;
+			}
+			if (a.kind === "activate") {
+				P.value = null, s.moved && D("event-drop", s.id, s.preview, "move"), D("announce", k.value.calendar.dropped), $(s.id);
+				return;
+			}
+			a.kind === "cancel" && (P.value = null, D("announce", k.value.calendar.reverted), $(s.id));
+		}
+		function Ie() {
+			G.value && document.getElementById(A(G.value))?.focus();
+		}
+		return _({
+			focus: Ie,
+			scrollToMinutes: () => {}
+		}), (e, t) => (y(), m("div", {
+			ref_key: "rootEl",
+			ref: L,
+			class: "v-calendar-month",
+			"data-outside": P.value?.outside ? "" : void 0,
+			style: se({ "--calendar-columns": String(j.value.length) })
+		}, [h("div", me, [(y(!0), m(f, null, x(j.value, (e) => (y(), m("span", {
+			key: e,
+			class: "v-calendar-month-weekday"
+		}, S(e), 1))), 128))]), h("div", {
+			ref_key: "gridEl",
+			ref: I,
+			class: "v-calendar-month-grid",
+			role: "grid",
+			"aria-label": g.label,
+			"data-gesture": P.value ? "" : void 0,
+			"data-edge": Ee.value,
+			onKeydown: Te,
+			onPointerdown: De,
+			onPointermove: Oe,
+			onPointerup: je,
+			onPointercancel: Me
+		}, [(y(!0), m(f, null, x(g.weeks, (t, n) => (y(), m("div", {
+			key: t[0]?.iso ?? n,
+			role: "row",
+			class: "v-calendar-month-week"
+		}, [(y(!0), m(f, null, x(t, (t) => (y(), m("div", {
+			id: A(t.iso),
+			key: t.iso,
+			role: "gridcell",
+			class: "v-calendar-month-cell",
+			"data-iso": t.iso,
+			"data-adjacent": t.adjacent ?? void 0,
+			"data-today": t.iso === g.today ? "" : void 0,
+			tabindex: G.value === t.iso ? 0 : -1,
+			"aria-label": N(t.iso)
+		}, [
+			h("button", {
+				type: "button",
+				class: "v-calendar-month-day",
+				tabindex: "-1",
+				"aria-label": C(k).calendar.openDay(N(t.iso)),
+				onClick: (e) => D("day-activate", t.iso)
+			}, S(be(t.iso)), 9, _e),
+			(y(!0), m(f, null, x(Ce(t.iso), (t) => (y(), re(a, {
+				key: t.id,
+				class: "v-calendar-month-chip",
+				event: t,
+				layout: "chip",
+				"time-text": we(t),
+				dragging: P.value?.id === t.id && P.value.pointerId !== null,
+				rejected: P.value?.id === t.id && P.value.outside,
+				grabbed: F.value && P.value?.id === t.id,
+				"hint-id": g.editable && !R(t.id) ? g.hintId : void 0,
+				"ghost-of": R(t.id) ? Se(t.id) : void 0,
+				onClick: (e) => Ne(t)
+			}, ae({ _: 2 }, [e.$slots.event ? {
+				name: "default",
+				fn: fe((t) => [ce(e.$slots, "event", oe({ ref_for: !0 }, t))]),
+				key: "0"
+			} : void 0]), 1032, [
+				"event",
+				"time-text",
+				"dragging",
+				"rejected",
+				"grabbed",
+				"hint-id",
+				"ghost-of",
+				"onClick"
+			]))), 128)),
+			H(t.iso) > 0 ? (y(), m("button", {
+				key: 0,
+				type: "button",
+				class: "v-calendar-month-more",
+				tabindex: "-1",
+				onClick: (e) => D("day-activate", t.iso)
+			}, S(C(k).calendar.moreEvents(H(t.iso))), 9, ve)) : ie("", !0)
+		], 8, ge))), 128))]))), 128))], 40, he)], 12, pe));
+	}
+});
+//#endregion
+export { T as default };
+
+//# sourceMappingURL=VCalendarMonth.vue_vue_type_script_setup_true_lang.js.map