vectis-ui 0.1.0 → 0.8.0

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

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