blessing-ui 0.1.0 → 0.3.0

package/dist/components/BlessRangeCalendar.vue.d.ts

@@ -0,0 +1,51 @@
+import { DayBlock } from '../composables/dayBlocks';
+type __VLS_Props = {
+    /** 0 = Sunday, 1 = Monday */
+    weekStart?: 0 | 1;
+    locale?: string;
+    min?: string;
+    max?: string;
+    disabledDates?: (iso: string) => boolean;
+    /** month shown first (YYYY-MM); defaults to the first chosen day, else this month */
+    month?: string;
+    label?: string;
+    labels?: Partial<{
+        prev: string;
+        next: string;
+        clear: string;
+        summary: (days: number, blocks: number) => string;
+        selected: (day: string) => string;
+        cleared: (day: string) => string;
+        hint: string;
+    }>;
+};
+type __VLS_ModelProps = {
+    /** every chosen day, as sorted `YYYY-MM-DD` */
+    modelValue?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_17: {
+    blocks: DayBlock[];
+};
+type __VLS_Slots = {} & {
+    summary?: (props: typeof __VLS_17) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (blocks: DayBlock[]) => any;
+    "update:modelValue": (value: string[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((blocks: DayBlock[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {
+    label: string;
+    weekStart: 0 | 1;
+    locale: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/BlessRangeCalendar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,217 @@
+import e from "./BlessButton.js";
+import { addDays as t, addMonths as n, fromISO as r, isoToday as i, toISO as a } from "../composables/date.js";
+import { applyRange as o, blocks as s, rangeBetween as c } from "../composables/dayBlocks.js";
+import { Fragment as l, computed as u, createCommentVNode as ee, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, mergeModels as g, nextTick as te, normalizeClass as ne, onMounted as _, openBlock as v, ref as y, renderList as b, renderSlot as x, toDisplayString as S, unref as C, useId as re, useModel as ie, withCtx as w } from "vue";
+//#region src/components/BlessRangeCalendar.vue?vue&type=script&setup=true&lang.ts
+var T = ["aria-label"], ae = { class: "bless-range__bar" }, oe = {
+	class: "bless-range__title",
+	"aria-live": "polite"
+}, se = ["aria-label"], ce = {
+	class: "bless-range__row",
+	role: "row"
+}, le = {
+	key: 0,
+	class: "bless-range__gap",
+	role: "gridcell",
+	"aria-hidden": "true"
+}, ue = [
+	"id",
+	"data-day",
+	"aria-selected",
+	"aria-disabled",
+	"aria-label",
+	"aria-current",
+	"tabindex",
+	"onPointerdown",
+	"onKeydown",
+	"onFocus"
+], E = { class: "bless-range__foot" }, D = { class: "bless-range__summary" }, O = {
+	class: "bless-range__live",
+	"aria-live": "polite"
+}, k = /*@__PURE__*/ h({
+	name: "BlessRangeCalendar",
+	__name: "BlessRangeCalendar",
+	props: /*@__PURE__*/ g({
+		weekStart: { default: 1 },
+		locale: { default: "en" },
+		min: {},
+		max: {},
+		disabledDates: {},
+		month: {},
+		label: { default: "Days" },
+		labels: {}
+	}, {
+		modelValue: { default: () => [] },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ g(["change"], ["update:modelValue"]),
+	setup(h, { emit: g }) {
+		let k = h, A = ie(h, "modelValue"), j = g, M = u(() => ({
+			prev: "Previous month",
+			next: "Next month",
+			clear: "Clear all",
+			summary: (e, t) => e ? `${e} day${e === 1 ? "" : "s"} in ${t} block${t === 1 ? "" : "s"}` : "No days chosen",
+			selected: (e) => `${e} chosen`,
+			cleared: (e) => `${e} cleared`,
+			hint: "Arrow keys move, Space toggles a day, hold Shift and press arrows to paint, Page Up and Down change month.",
+			...k.labels
+		})), N = re(), P = `${N}-hint`, F = y(k.month ? r(`${k.month}-01`) : A.value[0] ? r(`${A.value[0].slice(0, 7)}-01`) : null), I = y(""), L = y("");
+		_(() => {
+			I.value = i(), F.value ??= r(`${I.value.slice(0, 7)}-01`), L.value = R(F.value);
+		});
+		let R = (e) => a(new Date(e.getFullYear(), e.getMonth(), 1)), z = u(() => new Intl.DateTimeFormat(k.locale, {
+			month: "long",
+			year: "numeric"
+		})), B = u(() => new Intl.DateTimeFormat(k.locale, {
+			weekday: "long",
+			day: "numeric",
+			month: "long",
+			year: "numeric"
+		})), V = u(() => new Intl.DateTimeFormat(k.locale, { weekday: "short" })), H = u(() => Array.from({ length: 7 }, (e, n) => V.value.format(t(new Date(2023, 0, 1 + k.weekStart + n), 0)))), U = (e) => k.min != null && e < k.min || k.max != null && e > k.max || !!k.disabledDates?.(e), W = u(() => new Set(A.value)), G = u(() => {
+			let e = F.value;
+			if (!e) return [];
+			let t = (new Date(e.getFullYear(), e.getMonth(), 1).getDay() - k.weekStart + 7) % 7, n = new Date(e.getFullYear(), e.getMonth() + 1, 0).getDate(), r = [...Array(t).fill(null), ...Array.from({ length: n }, (t, n) => a(new Date(e.getFullYear(), e.getMonth(), n + 1)))];
+			for (; r.length % 7;) r.push(null);
+			return Array.from({ length: r.length / 7 }, (e, t) => r.slice(t * 7, t * 7 + 7));
+		}), K = y(null), q = u(() => K.value ? new Set(c(K.value.from, K.value.to)) : null), J = y("");
+		function Y(e, t) {
+			let n = o(A.value, e, t, (e) => !U(e));
+			n.join() !== A.value.join() && (A.value = n, j("change", s(n)));
+		}
+		let de = (e, t) => document.elementFromPoint(e, t)?.closest("[data-day]")?.dataset.day;
+		function fe(e, t) {
+			t.button || U(e) || (t.currentTarget.setPointerCapture?.(t.pointerId), L.value = e, K.value = {
+				from: e,
+				to: e,
+				mode: W.value.has(e) ? "clear" : "set"
+			});
+		}
+		function pe(e) {
+			let t = K.value, n = t && de(e.clientX, e.clientY);
+			t && n && (K.value = {
+				...t,
+				to: n
+			});
+		}
+		function me() {
+			let e = K.value;
+			K.value = null, e && (Y(c(e.from, e.to), e.mode), J.value = (e.mode === "set" ? M.value.selected : M.value.cleared)(e.from === e.to ? B.value.format(r(e.from)) : `${e.from} – ${e.to}`));
+		}
+		let X = null, he = (e) => te(() => document.getElementById(`${N}-${e}`)?.focus());
+		function Z(e) {
+			let t = r(e);
+			(!F.value || t.getMonth() !== F.value.getMonth() || t.getFullYear() !== F.value.getFullYear()) && (F.value = new Date(t.getFullYear(), t.getMonth(), 1)), L.value = e, he(e);
+		}
+		function ge(e, i) {
+			let o = {
+				ArrowLeft: -1,
+				ArrowRight: 1,
+				ArrowUp: -7,
+				ArrowDown: 7
+			}[i.key];
+			if (o) {
+				i.preventDefault();
+				let n = a(t(r(e), o));
+				i.shiftKey ? (X ??= W.value.has(e) ? "clear" : "set", Y([e, n], X)) : X = null, Z(n);
+			} else if (i.key === " " || i.key === "Enter") {
+				if (i.preventDefault(), U(e)) return;
+				let t = W.value.has(e) ? "clear" : "set";
+				Y([e], t), J.value = (t === "set" ? M.value.selected : M.value.cleared)(B.value.format(r(e)));
+			} else if (i.key === "PageDown" || i.key === "PageUp") {
+				i.preventDefault();
+				let t = n(r(e), i.key === "PageDown" ? 1 : -1), o = new Date(t.getFullYear(), t.getMonth() + 1, 0).getDate();
+				Z(a(new Date(t.getFullYear(), t.getMonth(), Math.min(r(e).getDate(), o))));
+			} else if (i.key === "Home" || i.key === "End") {
+				i.preventDefault();
+				let n = (r(e).getDay() - k.weekStart + 7) % 7;
+				Z(a(t(r(e), i.key === "Home" ? -n : 6 - n)));
+			}
+		}
+		let _e = (e) => e.key === "Shift" && (X = null), Q = (e) => {
+			F.value && (F.value = n(F.value, e), L.value = R(F.value));
+		}, $ = u(() => s(A.value)), ve = u(() => M.value.summary(A.value.length, $.value.length)), ye = u(() => G.value.flat().includes(L.value) ? L.value : R(F.value ?? /* @__PURE__ */ new Date()));
+		return (t, n) => (v(), d("div", {
+			class: "bless-range",
+			role: "group",
+			"aria-label": h.label
+		}, [
+			f("div", ae, [
+				m(e, {
+					size: "sm",
+					variant: "ghost",
+					"aria-label": M.value.prev,
+					onClick: n[0] ||= (e) => Q(-1)
+				}, {
+					default: w(() => [...n[4] ||= [p("‹", -1)]]),
+					_: 1
+				}, 8, ["aria-label"]),
+				f("strong", oe, S(F.value ? z.value.format(F.value) : ""), 1),
+				m(e, {
+					size: "sm",
+					variant: "ghost",
+					"aria-label": M.value.next,
+					onClick: n[1] ||= (e) => Q(1)
+				}, {
+					default: w(() => [...n[5] ||= [p("›", -1)]]),
+					_: 1
+				}, 8, ["aria-label"])
+			]),
+			F.value ? (v(), d("div", {
+				key: 0,
+				class: "bless-range__grid",
+				role: "grid",
+				"aria-label": `${h.label}, ${z.value.format(F.value)}`,
+				"aria-describedby": P,
+				"aria-multiselectable": "true",
+				onKeyup: _e
+			}, [f("div", ce, [(v(!0), d(l, null, b(H.value, (e) => (v(), d("span", {
+				key: e,
+				class: "bless-range__head",
+				role: "columnheader"
+			}, S(e), 1))), 128))]), (v(!0), d(l, null, b(G.value, (e, t) => (v(), d("div", {
+				key: t,
+				class: "bless-range__row",
+				role: "row"
+			}, [(v(!0), d(l, null, b(e, (e, t) => (v(), d(l, { key: t }, [e ? (v(), d("button", {
+				key: 1,
+				id: `${C(N)}-${e}`,
+				type: "button",
+				role: "gridcell",
+				class: ne(["bless-range__day", {
+					"bless-range__day--on": W.value.has(e),
+					"bless-range__day--set": K.value?.mode === "set" && q.value?.has(e),
+					"bless-range__day--clear": K.value?.mode === "clear" && q.value?.has(e),
+					"bless-range__day--today": e === I.value
+				}]),
+				"data-day": e,
+				"aria-selected": W.value.has(e),
+				"aria-disabled": U(e) || void 0,
+				"aria-label": B.value.format(C(r)(e)),
+				"aria-current": e === I.value ? "date" : void 0,
+				tabindex: ye.value === e ? 0 : -1,
+				onPointerdown: (t) => fe(e, t),
+				onPointermove: pe,
+				onPointerup: me,
+				onPointercancel: n[2] ||= (e) => K.value = null,
+				onKeydown: (t) => ge(e, t),
+				onFocus: (t) => L.value = e
+			}, S(Number(e.slice(8))), 43, ue)) : (v(), d("span", le))], 64))), 128))]))), 128))], 40, se)) : ee("", !0),
+			f("div", E, [f("span", D, [x(t.$slots, "summary", { blocks: $.value }, () => [p(S(ve.value), 1)])]), m(e, {
+				size: "sm",
+				variant: "outline",
+				disabled: !A.value.length,
+				onClick: n[3] ||= (e) => (A.value = [], j("change", []))
+			}, {
+				default: w(() => [p(S(M.value.clear), 1)]),
+				_: 1
+			}, 8, ["disabled"])]),
+			f("span", {
+				id: P,
+				hidden: ""
+			}, S(M.value.hint), 1),
+			f("span", O, S(J.value), 1)
+		], 8, T));
+	}
+});
+//#endregion
+export { k as default };

package/dist/components/BlessScheduler.css

@@ -0,0 +1 @@
+.bless-sched{gap:var(--bless-space-2);font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);color:var(--bless-color-text);display:grid;position:relative}.bless-sched__bar{align-items:center;gap:var(--bless-space-2);flex-wrap:wrap;display:flex}.bless-sched__title{margin-inline-start:var(--bless-space-2)}.bless-sched__add{margin-inline-start:auto}.bless-sched__scroll{border:var(--bless-border-width) solid var(--bless-color-border);max-height:560px;overflow:auto}.bless-sched__head,.bless-sched__body{grid-template-columns:56px 1fr;min-width:560px;display:grid}.bless-sched__head{z-index:3;background:var(--bless-color-bg);border-bottom:var(--bless-border-width) solid var(--bless-color-border);grid-template-columns:56px repeat(var(--_n), minmax(0, 1fr));position:sticky;top:0}.bless-sched__day{padding:var(--bless-space-1) var(--bless-space-2);text-align:center;font-weight:var(--bless-font-weight-bold,700)}.bless-sched__day--today{color:var(--bless-color-accent-text)}.bless-sched__gutter{border-inline-end:var(--bless-border-width) solid var(--bless-color-border);color:var(--bless-color-text-muted);font-size:var(--bless-text-xs);position:relative}.bless-sched__hour{position:absolute;inset-inline-end:var(--bless-space-2);translate:0 -50%}.bless-sched__cols{grid-template-columns:repeat(var(--_n), minmax(0, 1fr));background-image:repeating-linear-gradient(to bottom, var(--bless-color-border) 0 1px, transparent 1px var(--_h));outline:none;display:grid;position:relative}.bless-sched__col{border-inline-start:var(--bless-border-width) solid var(--bless-color-border);touch-action:pan-y;cursor:crosshair;position:relative}.bless-sched__event{box-sizing:border-box;padding:2px var(--bless-space-2);background:color-mix(in srgb, var(--bless-color-accent) 20%, var(--bless-color-bg));border:var(--bless-border-width) solid var(--bless-color-accent);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;border-inline-start-width:4px;flex-direction:column;display:flex;position:absolute;overflow:hidden}.bless-sched__event--sel{outline:2px solid var(--bless-color-text);outline-offset:1px;z-index:2}.bless-sched__event:focus-visible{outline:3px solid var(--bless-color-text);outline-offset:1px;z-index:2}.bless-sched__event--draft{pointer-events:none;border-style:dashed;left:1px;right:1px}.bless-sched__etitle{text-overflow:ellipsis;white-space:nowrap;font-weight:var(--bless-font-weight-bold,700);overflow:hidden}.bless-sched__etime{font-size:var(--bless-text-xs)}.bless-sched__foot{inset-inline:0;cursor:ns-resize;height:8px;position:absolute;bottom:0}.bless-sched__edit{align-items:center;gap:var(--bless-space-3);flex-wrap:wrap;display:flex}.bless-sched__field{align-items:center;gap:var(--bless-space-2);display:flex}.bless-sched__input{min-height:32px;padding:var(--bless-space-1) var(--bless-space-2);background:var(--bless-color-bg);border:var(--bless-border-width) solid var(--bless-color-border);color:inherit;font:inherit}.bless-sched__input:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:1px}.bless-sched__live{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}

package/dist/components/BlessScheduler.js

@@ -0,0 +1,6 @@
+import "./BlessScheduler.css";
+import e from "./BlessScheduler.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/BlessScheduler.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/BlessScheduler.vue.d.ts

@@ -0,0 +1,95 @@
+import { ScheduleEvent } from '../composables/schedule';
+export type { ScheduleEvent as BlessScheduleEvent } from '../composables/schedule';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<{
+    view?: "day" | "week";
+    /** 0 = Sunday, 1 = Monday */
+    weekStart?: 0 | 1;
+    /** first and last hour shown (0–24) */
+    dayStart?: number;
+    dayEnd?: number;
+    /** minutes events snap to */
+    snap?: number;
+    /** px per hour */
+    hourHeight?: number;
+    locale?: string;
+    editable?: boolean;
+    label?: string;
+    labels?: Partial<{
+        prev: string;
+        next: string;
+        today: string;
+        add: string;
+        remove: string;
+        title: string;
+        newEvent: string;
+        eventName: (title: string, day: string, from: string, to: string) => string;
+        moved: (title: string, day: string, from: string, to: string) => string;
+        added: (title: string) => string;
+        removed: (title: string) => string;
+        hint: string;
+    }>;
+} & {
+    modelValue?: ScheduleEvent[];
+    /** any day in the period shown */
+    date?: string | null;
+    selected?: string | null;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (event: ScheduleEvent) => any;
+    "update:modelValue": (value: ScheduleEvent[]) => any;
+    create: (event: ScheduleEvent) => any;
+    remove: (event: ScheduleEvent) => any;
+    "update:selected": (value: string | null) => any;
+    "update:date": (value: string | null) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    view?: "day" | "week";
+    /** 0 = Sunday, 1 = Monday */
+    weekStart?: 0 | 1;
+    /** first and last hour shown (0–24) */
+    dayStart?: number;
+    dayEnd?: number;
+    /** minutes events snap to */
+    snap?: number;
+    /** px per hour */
+    hourHeight?: number;
+    locale?: string;
+    editable?: boolean;
+    label?: string;
+    labels?: Partial<{
+        prev: string;
+        next: string;
+        today: string;
+        add: string;
+        remove: string;
+        title: string;
+        newEvent: string;
+        eventName: (title: string, day: string, from: string, to: string) => string;
+        moved: (title: string, day: string, from: string, to: string) => string;
+        added: (title: string) => string;
+        removed: (title: string) => string;
+        hint: string;
+    }>;
+} & {
+    modelValue?: ScheduleEvent[];
+    /** any day in the period shown */
+    date?: string | null;
+    selected?: string | null;
+}> & Readonly<{
+    onChange?: ((event: ScheduleEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: ScheduleEvent[]) => any) | undefined;
+    onCreate?: ((event: ScheduleEvent) => any) | undefined;
+    onRemove?: ((event: ScheduleEvent) => any) | undefined;
+    "onUpdate:selected"?: ((value: string | null) => any) | undefined;
+    "onUpdate:date"?: ((value: string | null) => any) | undefined;
+}>, {
+    label: string;
+    view: "day" | "week";
+    weekStart: 0 | 1;
+    locale: string;
+    editable: boolean;
+    snap: number;
+    dayStart: number;
+    dayEnd: number;
+    hourHeight: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;