blessing-ui 0.2.0 → 0.3.0

package/dist/components/BlessOrderList.vue_vue_type_script_setup_true_lang.js

@@ -1,114 +1,120 @@
-import { Fragment as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, defineComponent as a, mergeModels as o, normalizeClass as s, openBlock as c, ref as l, renderList as u, renderSlot as d, toDisplayString as f, useId as p, useModel as m, withModifiers as h } from "vue";
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, mergeModels as s, normalizeClass as c, openBlock as l, ref as u, renderList as d, renderSlot as f, toDisplayString as p, useId as m, useModel as h, withModifiers as g } from "vue";
 //#region src/components/BlessOrderList.vue?vue&type=script&setup=true&lang.ts
-var g = ["aria-label"], _ = [
+var _ = ["aria-label"], v = [
 	"onDragstart",
 	"onDragover",
 	"onDragleave",
 	"onDrop",
 	"onKeydown"
-], v = { class: "bless-order__body" }, y = {
+], y = { class: "bless-order__body" }, b = {
 	key: 0,
 	class: "bless-order__btns"
-}, b = [
+}, x = [
 	"aria-label",
 	"disabled",
 	"onClick"
-], x = [
+], S = [
 	"aria-label",
 	"disabled",
 	"onClick"
-], S = {
+], C = {
 	class: "bless-order__live",
 	"aria-live": "polite"
-}, C = /*@__PURE__*/ a({
+}, w = /*@__PURE__*/ o({
 	name: "BlessOrderList",
 	__name: "BlessOrderList",
-	props: /*@__PURE__*/ o({
+	props: /*@__PURE__*/ s({
 		rowKey: {},
 		label: { default: "Reorder" },
 		buttons: {
 			type: Boolean,
 			default: !0
-		}
+		},
+		labels: {}
 	}, {
 		modelValue: { default: () => [] },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ o(["move"], ["update:modelValue"]),
-	setup(a, { emit: o }) {
-		let C = a, w = m(a, "modelValue"), T = o, E = l(null), D = l(null), O = l("");
-		function k(e, t) {
-			if (e === t || t < 0 || t >= w.value.length) return;
-			let n = w.value.slice(), [r] = n.splice(e, 1);
-			n.splice(t, 0, r), w.value = n, T("move", e, t), O.value = `Moved to position ${t + 1} of ${n.length}`;
+	emits: /*@__PURE__*/ s(["move"], ["update:modelValue"]),
+	setup(o, { emit: s }) {
+		let w = o, T = t(() => ({
+			up: (e) => `Move item ${e} up`,
+			down: (e) => `Move item ${e} down`,
+			moved: (e, t) => `Moved to position ${e} of ${t}`,
+			...w.labels
+		})), E = h(o, "modelValue"), D = s, O = u(null), k = u(null), A = u("");
+		function j(e, t) {
+			if (e === t || t < 0 || t >= E.value.length) return;
+			let n = E.value.slice(), [r] = n.splice(e, 1);
+			n.splice(t, 0, r), E.value = n, D("move", e, t), A.value = T.value.moved(t + 1, n.length);
 		}
-		function A(e) {
-			E.value != null && k(E.value, e), E.value = D.value = null;
+		function M(e) {
+			O.value != null && j(O.value, e), O.value = k.value = null;
 		}
-		function j(e, t) {
-			t.altKey && (t.key === "ArrowUp" && (t.preventDefault(), k(e, e - 1), P(e - 1)), t.key === "ArrowDown" && (t.preventDefault(), k(e, e + 1), P(e + 1)));
+		function N(e, t) {
+			t.altKey && (t.key === "ArrowUp" && (t.preventDefault(), j(e, e - 1), I(e - 1)), t.key === "ArrowDown" && (t.preventDefault(), j(e, e + 1), I(e + 1)));
 		}
-		let M = l(), N = `${p()}-hint`, P = (e) => requestAnimationFrame(() => M.value?.querySelectorAll(".bless-order__item")[e]?.focus());
-		function F(e, t) {
-			k(e, e + t), requestAnimationFrame(() => {
-				let n = M.value?.querySelectorAll(".bless-order__item")[e + t], r = n?.querySelector(t < 0 ? ".bless-order__up" : ".bless-order__down");
+		let P = u(), F = `${m()}-hint`, I = (e) => requestAnimationFrame(() => P.value?.querySelectorAll(".bless-order__item")[e]?.focus());
+		function L(e, t) {
+			j(e, e + t), requestAnimationFrame(() => {
+				let n = P.value?.querySelectorAll(".bless-order__item")[e + t], r = n?.querySelector(t < 0 ? ".bless-order__up" : ".bless-order__down");
 				(r && !r.disabled ? r : n)?.focus();
 			});
 		}
-		return (o, l) => (c(), n("div", {
+		return (t, s) => (l(), r("div", {
 			ref_key: "root",
-			ref: M,
+			ref: P,
 			class: "bless-order"
 		}, [
-			r("ul", {
+			i("ul", {
 				class: "bless-order__list",
 				role: "list",
-				"aria-label": a.label
-			}, [(c(!0), n(e, null, u(w.value, (e, u) => (c(), n("li", {
-				key: a.rowKey ? a.rowKey(e, u) : u,
-				class: s(["bless-order__item", {
-					"bless-order__item--drag": E.value === u,
-					"bless-order__item--over": D.value === u
+				"aria-label": o.label
+			}, [(l(!0), r(e, null, d(E.value, (e, u) => (l(), r("li", {
+				key: o.rowKey ? o.rowKey(e, u) : u,
+				class: c(["bless-order__item", {
+					"bless-order__item--drag": O.value === u,
+					"bless-order__item--over": k.value === u
 				}]),
 				draggable: "true",
 				tabindex: "0",
-				"aria-describedby": N,
-				onDragstart: (e) => E.value = u,
-				onDragover: h((e) => D.value = u, ["prevent"]),
-				onDragleave: (e) => D.value === u && (D.value = null),
-				onDrop: h((e) => A(u), ["prevent"]),
-				onDragend: l[0] ||= (e) => E.value = D.value = null,
-				onKeydown: (e) => j(u, e)
+				"aria-describedby": F,
+				onDragstart: (e) => O.value = u,
+				onDragover: g((e) => k.value = u, ["prevent"]),
+				onDragleave: (e) => k.value === u && (k.value = null),
+				onDrop: g((e) => M(u), ["prevent"]),
+				onDragend: s[0] ||= (e) => O.value = k.value = null,
+				onKeydown: (e) => N(u, e)
 			}, [
-				l[1] ||= r("span", {
+				s[1] ||= i("span", {
 					class: "bless-order__grip",
 					"aria-hidden": "true"
 				}, "⋮⋮", -1),
-				r("span", v, [d(o.$slots, "default", {
+				i("span", y, [f(t.$slots, "default", {
 					item: e,
 					index: u
-				}, () => [i(f(e), 1)])]),
-				C.buttons ? (c(), n("span", y, [r("button", {
+				}, () => [a(p(e), 1)])]),
+				w.buttons ? (l(), r("span", b, [i("button", {
 					type: "button",
 					class: "bless-order__up",
-					"aria-label": `Move item ${u + 1} up`,
+					"aria-label": T.value.up(u + 1),
 					disabled: u === 0,
-					onClick: (e) => F(u, -1)
-				}, " ↑ ", 8, b), r("button", {
+					onClick: (e) => L(u, -1)
+				}, " ↑ ", 8, x), i("button", {
 					type: "button",
 					class: "bless-order__down",
-					"aria-label": `Move item ${u + 1} down`,
-					disabled: u === w.value.length - 1,
-					onClick: (e) => F(u, 1)
-				}, " ↓ ", 8, x)])) : t("", !0)
-			], 42, _))), 128))], 8, g),
-			r("span", {
-				id: N,
+					"aria-label": T.value.down(u + 1),
+					disabled: u === E.value.length - 1,
+					onClick: (e) => L(u, 1)
+				}, " ↓ ", 8, S)])) : n("", !0)
+			], 42, v))), 128))], 8, _),
+			i("span", {
+				id: F,
 				hidden: ""
 			}, "Alt plus arrow keys move it."),
-			r("span", S, f(O.value), 1)
+			i("span", C, p(A.value), 1)
 		], 512));
 	}
 });
 //#endregion
-export { C as default };
+export { w as default };

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

@@ -5,6 +5,8 @@ type __VLS_Props = {
     label?: string;
     prevLabel?: string;
     nextLabel?: string;
+    /** name of a page link, from its number */
+    pageLabel?: (page: number) => string;
     /** render <a href> using this fn instead of buttons */
     href?: (page: number) => string;
 };

package/dist/components/BlessPagination.vue_vue_type_script_setup_true_lang.js

@@ -18,6 +18,7 @@ var v = ["aria-label"], y = {
 		label: { default: "Pagination" },
 		prevLabel: { default: "Previous" },
 		nextLabel: { default: "Next" },
+		pageLabel: {},
 		href: {}
 	}, {
 		modelValue: { default: 1 },
@@ -63,7 +64,7 @@ var v = ["aria-label"], y = {
 				class: ["bless-pagination__btn", { "bless-pagination__btn--current": t === S.value }],
 				color: t === S.value ? "accent" : "none",
 				"aria-current": t === S.value ? "page" : void 0,
-				"aria-label": `Page ${t}`,
+				"aria-label": (l.pageLabel ?? ((e) => `Page ${e}`))(t),
 				onClick: (e) => !l.href && w(t)
 			}), {
 				default: _(() => [s(m(t), 1)]),

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

@@ -4,6 +4,11 @@ declare const __VLS_export: <T extends string | number>(__VLS_props: NonNullable
         sourceLabel?: string;
         targetLabel?: string;
         rows?: number;
+        labels?: Partial<{
+            moveSelected: (to: string) => string;
+            moveAll: (to: string) => string;
+            moved: (count: number, to: string) => string;
+        }>;
     } & {
         source?: BlessOption<T>[];
         target?: BlessOption<T>[];

package/dist/components/BlessPickList.vue_vue_type_script_setup_true_lang.js

@@ -1,17 +1,18 @@
 import e from "./BlessButton.js";
 import t from "./BlessListbox.js";
-import { createElementBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, mergeModels as o, nextTick as s, openBlock as c, ref as l, toDisplayString as u, useModel as d, withCtx as f } from "vue";
+import { computed as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, mergeModels as s, nextTick as c, openBlock as l, ref as u, toDisplayString as d, useModel as f, withCtx as p } from "vue";
 //#region src/components/BlessPickList.vue?vue&type=script&setup=true&lang.ts
-var p = { class: "bless-picklist__col" }, m = { class: "bless-picklist__title" }, h = { class: "bless-picklist__btns" }, g = { class: "bless-picklist__col" }, _ = { class: "bless-picklist__title" }, v = {
+var m = { class: "bless-picklist__col" }, h = { class: "bless-picklist__title" }, g = { class: "bless-picklist__btns" }, _ = { class: "bless-picklist__col" }, v = { class: "bless-picklist__title" }, y = {
 	class: "bless-picklist__live",
 	"aria-live": "polite"
-}, y = /*@__PURE__*/ a({
+}, b = /*@__PURE__*/ o({
 	name: "BlessPickList",
 	__name: "BlessPickList",
-	props: /*@__PURE__*/ o({
+	props: /*@__PURE__*/ s({
 		sourceLabel: { default: "Available" },
 		targetLabel: { default: "Selected" },
-		rows: { default: 6 }
+		rows: { default: 6 },
+		labels: {}
 	}, {
 		source: { default: () => [] },
 		sourceModifiers: {},
@@ -19,102 +20,107 @@ var p = { class: "bless-picklist__col" }, m = { class: "bless-picklist__title" }
 		targetModifiers: {}
 	}),
 	emits: ["update:source", "update:target"],
-	setup(a) {
-		let o = a, y = d(a, "source"), b = d(a, "target"), x = l([]), S = l([]), C = l(), w = l("");
-		function T(e, t) {
-			let [n, r] = e === "source" ? [y, b] : [b, y], i = n.value.filter((e) => t.includes(e.value));
-			n.value = n.value.filter((e) => !t.includes(e.value)), r.value = [...r.value, ...i], x.value = [], S.value = [];
-			let a = e === "source" ? o.targetLabel : o.sourceLabel;
-			w.value = `Moved ${i.length} to ${a}`, s(() => C.value?.querySelectorAll("[role=listbox]")[+(e === "source")]?.focus());
+	setup(o) {
+		let s = o, b = n(() => ({
+			moveSelected: (e) => `Move selected to ${e}`,
+			moveAll: (e) => `Move all to ${e}`,
+			moved: (e, t) => `Moved ${e} to ${t}`,
+			...s.labels
+		})), x = f(o, "source"), S = f(o, "target"), C = u([]), w = u([]), T = u(), E = u("");
+		function D(e, t) {
+			let [n, r] = e === "source" ? [x, S] : [S, x], i = n.value.filter((e) => t.includes(e.value));
+			n.value = n.value.filter((e) => !t.includes(e.value)), r.value = [...r.value, ...i], C.value = [], w.value = [];
+			let a = e === "source" ? s.targetLabel : s.sourceLabel;
+			E.value = b.value.moved(i.length, a), c(() => T.value?.querySelectorAll("[role=listbox]")[+(e === "source")]?.focus());
 		}
-		return (o, s) => (c(), n("div", {
+		return (n, s) => (l(), r("div", {
 			ref_key: "root",
-			ref: C,
+			ref: T,
 			class: "bless-picklist"
 		}, [
-			r("div", p, [r("span", m, u(a.sourceLabel) + " · " + u(y.value.length), 1), i(t, {
-				modelValue: x.value,
-				"onUpdate:modelValue": s[0] ||= (e) => x.value = e,
-				options: y.value,
+			i("div", m, [i("span", h, d(o.sourceLabel) + " · " + d(x.value.length), 1), a(t, {
+				modelValue: C.value,
+				"onUpdate:modelValue": s[0] ||= (e) => C.value = e,
+				options: x.value,
 				multiple: "",
-				rows: a.rows,
-				label: a.sourceLabel
+				rows: o.rows,
+				label: o.sourceLabel
 			}, null, 8, [
 				"modelValue",
 				"options",
 				"rows",
 				"label"
 			])]),
-			r("div", h, [
-				i(e, {
+			i("div", g, [
+				a(e, {
 					size: "sm",
 					variant: "outline",
-					disabled: !x.value.length,
-					"aria-label": `Move selected to ${a.targetLabel}`,
-					onClick: s[1] ||= (e) => T("source", x.value)
+					disabled: !C.value.length,
+					"aria-label": b.value.moveSelected(o.targetLabel),
+					onClick: s[1] ||= (e) => D("source", C.value)
 				}, {
-					default: f(() => [...s[6] ||= [r("span", {
+					default: p(() => [...s[6] ||= [i("span", {
 						class: "bless-picklist__arrow",
 						"aria-hidden": "true"
 					}, "›", -1)]]),
 					_: 1
 				}, 8, ["disabled", "aria-label"]),
-				i(e, {
+				a(e, {
 					size: "sm",
 					variant: "outline",
-					disabled: !y.value.length,
-					"aria-label": `Move all to ${a.targetLabel}`,
-					onClick: s[2] ||= (e) => T("source", y.value.map((e) => e.value))
+					disabled: !x.value.length,
+					"aria-label": b.value.moveAll(o.targetLabel),
+					onClick: s[2] ||= (e) => D("source", x.value.map((e) => e.value))
 				}, {
-					default: f(() => [...s[7] ||= [r("span", {
+					default: p(() => [...s[7] ||= [i("span", {
 						class: "bless-picklist__arrow",
 						"aria-hidden": "true"
 					}, "»", -1)]]),
 					_: 1
 				}, 8, ["disabled", "aria-label"]),
-				i(e, {
+				a(e, {
 					size: "sm",
 					variant: "outline",
-					disabled: !S.value.length,
-					"aria-label": `Move selected to ${a.sourceLabel}`,
-					onClick: s[3] ||= (e) => T("target", S.value)
+					disabled: !w.value.length,
+					"aria-label": b.value.moveSelected(o.sourceLabel),
+					onClick: s[3] ||= (e) => D("target", w.value)
 				}, {
-					default: f(() => [...s[8] ||= [r("span", {
+					default: p(() => [...s[8] ||= [i("span", {
 						class: "bless-picklist__arrow",
 						"aria-hidden": "true"
 					}, "‹", -1)]]),
 					_: 1
 				}, 8, ["disabled", "aria-label"]),
-				i(e, {
+				a(e, {
 					size: "sm",
 					variant: "outline",
-					disabled: !b.value.length,
-					"aria-label": `Move all to ${a.sourceLabel}`,
-					onClick: s[4] ||= (e) => T("target", b.value.map((e) => e.value))
+					disabled: !S.value.length,
+					"aria-label": b.value.moveAll(o.sourceLabel),
+					onClick: s[4] ||= (e) => D("target", S.value.map((e) => e.value))
 				}, {
-					default: f(() => [...s[9] ||= [r("span", {
+					default: p(() => [...s[9] ||= [i("span", {
 						class: "bless-picklist__arrow",
 						"aria-hidden": "true"
 					}, "«", -1)]]),
 					_: 1
 				}, 8, ["disabled", "aria-label"])
 			]),
-			r("div", g, [r("span", _, u(a.targetLabel) + " · " + u(b.value.length), 1), i(t, {
-				modelValue: S.value,
-				"onUpdate:modelValue": s[5] ||= (e) => S.value = e,
-				options: b.value,
+			i("div", _, [i("span", v, d(o.targetLabel) + " · " + d(S.value.length), 1), a(t, {
+				modelValue: w.value,
+				"onUpdate:modelValue": s[5] ||= (e) => w.value = e,
+				options: S.value,
 				multiple: "",
-				rows: a.rows,
-				label: a.targetLabel
+				rows: o.rows,
+				label: o.targetLabel
 			}, null, 8, [
 				"modelValue",
 				"options",
 				"rows",
 				"label"
 			])]),
-			r("span", v, u(w.value), 1)
+			i("span", y, d(E.value), 1)
 		], 512));
 	}
 });
 //#endregion
-export { y as default };
+export { b as default };

package/dist/components/BlessRangeCalendar.css

@@ -0,0 +1 @@
+.bless-range{gap:var(--bless-space-2);width:max-content;max-width:100%;font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);color:var(--bless-color-text);display:grid;position:relative}.bless-range__bar,.bless-range__foot{justify-content:space-between;align-items:center;gap:var(--bless-space-2);display:flex}.bless-range__title{text-transform:capitalize}.bless-range__grid{-webkit-user-select:none;user-select:none;gap:2px;display:grid}.bless-range__row{grid-template-columns:repeat(7,40px);gap:2px;display:grid}.bless-range__head{padding:var(--bless-space-1) 0;color:var(--bless-color-text-muted);font-size:var(--bless-text-xs);text-align:center}.bless-range__day{background:var(--bless-color-bg);border:var(--bless-border-width) solid var(--bless-color-border);height:40px;color:inherit;font:inherit;cursor:pointer;touch-action:none;padding:0}.bless-range__day[aria-disabled=true]{opacity:.4;cursor:not-allowed}.bless-range__day--today{font-weight:var(--bless-font-weight-bold,700);text-decoration:underline}.bless-range__day--on{background:var(--bless-color-accent);border-color:var(--bless-color-accent);color:var(--bless-color-on-accent)}.bless-range__day--set{border-color:var(--bless-color-accent);background:color-mix(in srgb, var(--bless-color-accent) 25%, var(--bless-color-bg));color:var(--bless-color-text)}.bless-range__day--clear{border-style:dashed;border-color:var(--bless-color-danger);background:var(--bless-color-bg);color:var(--bless-color-text)}.bless-range__day:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px;z-index:1}.bless-range__live{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}

package/dist/components/BlessRangeCalendar.js

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

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;
+    };
+};