blessing-ui 0.2.0 → 0.3.0

package/dist/components/BlessInfiniteCanvas.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,232 @@
+import e from "./BlessButton.js";
+import { clampZoom as t, fitRect as n, toWorld as r, zoomAt as i } from "../composables/canvasView.js";
+import { computed as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeModels as f, normalizeClass as p, normalizeStyle as m, openBlock as h, provide as g, ref as _, renderSlot as v, toDisplayString as y, useId as b, useModel as x, withCtx as S, withModifiers as C } from "vue";
+//#region src/components/BlessInfiniteCanvas.vue?vue&type=script&setup=true&lang.ts
+var w = ["aria-label"], T = {
+	class: "bless-canvas__live",
+	"aria-live": "polite"
+}, E = Symbol("blessCanvas"), D = /*@__PURE__*/ d({
+	name: "BlessInfiniteCanvas",
+	__name: "BlessInfiniteCanvas",
+	props: /*@__PURE__*/ f({
+		minZoom: { default: .25 },
+		maxZoom: { default: 4 },
+		grid: {
+			type: Boolean,
+			default: !0
+		},
+		controls: {
+			type: Boolean,
+			default: !0
+		},
+		wheelZoom: { type: Boolean },
+		label: { default: "Canvas" },
+		labels: {}
+	}, {
+		view: { default: () => ({
+			x: 0,
+			y: 0,
+			zoom: 1
+		}) },
+		viewModifiers: {}
+	}),
+	emits: ["update:view"],
+	setup(d, { expose: f }) {
+		let D = d, O = x(d, "view"), k = a(() => ({
+			zoomIn: "Zoom in",
+			zoomOut: "Zoom out",
+			reset: "Reset view",
+			zoom: (e) => `Zoom ${e}%`,
+			hint: "Arrow keys pan, plus and minus zoom, 0 resets.",
+			...D.labels
+		})), A = _(), j = _(""), M = `${b()}-hint`, N = a(() => Math.round(O.value.zoom * 100)), P = (e, t) => {
+			let n = A.value?.getBoundingClientRect();
+			return {
+				x: e - (n?.left ?? 0),
+				y: t - (n?.top ?? 0)
+			};
+		}, F = (e, t) => {
+			let n = P(e, t);
+			return r(O.value, n.x, n.y);
+		};
+		g(E, {
+			view: O,
+			toWorld: F
+		});
+		function I(e, t = !1) {
+			O.value = e, t && (j.value = k.value.zoom(Math.round(e.zoom * 100)));
+		}
+		function L(e, t) {
+			let n = A.value?.getBoundingClientRect(), r = t ?? {
+				x: (n?.width ?? 0) / 2,
+				y: (n?.height ?? 0) / 2
+			};
+			I(i(O.value, e, r.x, r.y, D.minZoom, D.maxZoom), !0);
+		}
+		let R = () => I({
+			x: 0,
+			y: 0,
+			zoom: 1
+		}, !0);
+		function z(e, t = 32) {
+			let r = A.value?.getBoundingClientRect();
+			r && I(n(e, r.width, r.height, D.minZoom, D.maxZoom, t), !0);
+		}
+		function B(e, t) {
+			let n = A.value?.getBoundingClientRect();
+			n && I({
+				zoom: O.value.zoom,
+				x: n.width / 2 - e * O.value.zoom,
+				y: n.height / 2 - t * O.value.zoom
+			});
+		}
+		f({
+			zoomBy: L,
+			reset: R,
+			fit: z,
+			centerOn: B,
+			toWorld: F
+		});
+		let V = /* @__PURE__ */ new Map(), H = 0, U = _(!1);
+		function W(e) {
+			(e.target === A.value || e.target.closest?.("[data-canvas-bg]") || e.button === 1) && (e.button > 1 || (A.value?.setPointerCapture?.(e.pointerId), V.set(e.pointerId, {
+				x: e.clientX,
+				y: e.clientY
+			}), H = V.size === 2 ? G() : 0, U.value = !0, e.button === 1 && e.preventDefault()));
+		}
+		let G = () => {
+			let [e, t] = [...V.values()];
+			return Math.hypot(e.x - t.x, e.y - t.y);
+		};
+		function K(e) {
+			let t = V.get(e.pointerId);
+			if (!t) return;
+			let n = {
+				x: e.clientX,
+				y: e.clientY
+			};
+			if (V.set(e.pointerId, n), V.size === 2) {
+				let e = G(), [r, a] = [...V.values()], o = P((r.x + a.x) / 2, (r.y + a.y) / 2), s = H ? i(O.value, e / H, o.x, o.y, D.minZoom, D.maxZoom) : O.value;
+				H = e, I({
+					...s,
+					x: s.x + (n.x - t.x) / 2,
+					y: s.y + (n.y - t.y) / 2
+				});
+			} else I({
+				...O.value,
+				x: O.value.x + n.x - t.x,
+				y: O.value.y + n.y - t.y
+			});
+		}
+		function q(e) {
+			V.delete(e.pointerId), H = 0, V.size || (U.value = !1);
+		}
+		function J(e) {
+			e.preventDefault(), e.ctrlKey || e.metaKey || D.wheelZoom ? L(Math.exp(-e.deltaY * (e.ctrlKey ? .01 : .0015)), P(e.clientX, e.clientY)) : I({
+				...O.value,
+				x: O.value.x - e.deltaX,
+				y: O.value.y - e.deltaY
+			});
+		}
+		function Y(e) {
+			if (e.target !== A.value) return;
+			let t = e.shiftKey ? 160 : 40, n = e.key;
+			if (n === "ArrowLeft") I({
+				...O.value,
+				x: O.value.x + t
+			});
+			else if (n === "ArrowRight") I({
+				...O.value,
+				x: O.value.x - t
+			});
+			else if (n === "ArrowUp") I({
+				...O.value,
+				y: O.value.y + t
+			});
+			else if (n === "ArrowDown") I({
+				...O.value,
+				y: O.value.y - t
+			});
+			else if (n === "+" || n === "=") L(1.25);
+			else if (n === "-" || n === "_") L(.8);
+			else if (n === "0" || n === "Home") R();
+			else return;
+			e.preventDefault();
+		}
+		let X = a(() => ({ transform: `translate(${O.value.x}px, ${O.value.y}px) scale(${t(O.value.zoom, D.minZoom, D.maxZoom)})` })), Z = a(() => {
+			let e = 24 * O.value.zoom;
+			return {
+				backgroundSize: `${e}px ${e}px`,
+				backgroundPosition: `${O.value.x}px ${O.value.y}px`
+			};
+		});
+		return (t, n) => (h(), s("div", {
+			ref_key: "root",
+			ref: A,
+			class: p(["bless-canvas", {
+				"bless-canvas--grid": d.grid,
+				"bless-canvas--pan": U.value
+			}]),
+			style: m(d.grid ? Z.value : void 0),
+			role: "group",
+			"aria-roledescription": "canvas",
+			"aria-label": d.label,
+			"aria-describedby": M,
+			tabindex: "0",
+			onPointerdown: W,
+			onPointermove: K,
+			onPointerup: q,
+			onPointercancel: q,
+			onWheel: J,
+			onKeydown: Y
+		}, [
+			c("div", {
+				class: "bless-canvas__layer",
+				style: m(X.value)
+			}, [v(t.$slots, "default", {
+				view: O.value,
+				zoom: O.value.zoom
+			})], 4),
+			d.controls ? (h(), s("div", {
+				key: 0,
+				class: "bless-canvas__controls",
+				onPointerdown: n[2] ||= C(() => {}, ["stop"])
+			}, [
+				u(e, {
+					size: "sm",
+					variant: "outline",
+					"aria-label": k.value.zoomOut,
+					onClick: n[0] ||= (e) => L(.8)
+				}, {
+					default: S(() => [...n[3] ||= [l("−", -1)]]),
+					_: 1
+				}, 8, ["aria-label"]),
+				u(e, {
+					size: "sm",
+					variant: "outline",
+					"aria-label": k.value.reset,
+					onClick: R
+				}, {
+					default: S(() => [l(y(N.value) + "%", 1)]),
+					_: 1
+				}, 8, ["aria-label"]),
+				u(e, {
+					size: "sm",
+					variant: "outline",
+					"aria-label": k.value.zoomIn,
+					onClick: n[1] ||= (e) => L(1.25)
+				}, {
+					default: S(() => [...n[4] ||= [l("+", -1)]]),
+					_: 1
+				}, 8, ["aria-label"])
+			], 32)) : o("", !0),
+			c("span", {
+				id: M,
+				hidden: ""
+			}, y(k.value.hint), 1),
+			c("span", T, y(j.value), 1)
+		], 46, w));
+	}
+});
+//#endregion
+export { E as blessCanvasKey, D as default };

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

@@ -16,6 +16,11 @@ type __VLS_Props = {
     disabled?: boolean;
     invalid?: boolean;
     label?: string;
+    /** names of the − and + buttons */
+    labels?: Partial<{
+        decrease: string;
+        increase: string;
+    }>;
 };
 type __VLS_ModelProps = {
     modelValue?: number | null;

package/dist/components/BlessInputNumber.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import { joinIds as e, useFieldId as t, useFieldState as n } from "../composables/useFieldId.js";
 import { computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, mergeModels as c, mergeProps as l, normalizeClass as u, openBlock as d, ref as f, toDisplayString as p, unref as m, useModel as h } from "vue";
 //#region src/components/BlessInputNumber.vue?vue&type=script&setup=true&lang.ts
-var g = ["disabled"], _ = {
+var g = ["aria-label", "disabled"], _ = {
 	key: 1,
 	class: "bless-number__affix"
 }, v = [
@@ -18,7 +18,7 @@ var g = ["disabled"], _ = {
 ], y = ["name", "value"], b = {
 	key: 3,
 	class: "bless-number__affix"
-}, x = ["disabled"], S = /*@__PURE__*/ s({
+}, x = ["aria-label", "disabled"], S = /*@__PURE__*/ s({
 	name: "BlessInputNumber",
 	inheritAttrs: !1,
 	__name: "BlessInputNumber",
@@ -39,91 +39,96 @@ var g = ["disabled"], _ = {
 		size: { default: "md" },
 		disabled: { type: Boolean },
 		invalid: { type: Boolean },
-		label: {}
+		label: {},
+		labels: {}
 	}, {
 		modelValue: { default: null },
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
 	setup(s) {
-		let c = s, S = h(s, "modelValue"), C = t(c), w = n(), T = f(!1), E = r(() => new Intl.NumberFormat(c.locale, c.format)), D = r(() => new Intl.NumberFormat(c.locale).formatToParts(1.1).find((e) => e.type === "decimal")?.value ?? "."), O = r(() => S.value == null ? "" : T.value || !c.format ? String(S.value).replace(".", D.value) : E.value.format(S.value)), k = r(() => S.value == null ? void 0 : [
+		let c = s, S = r(() => ({
+			decrease: "Decrease",
+			increase: "Increase",
+			...c.labels
+		})), C = h(s, "modelValue"), w = t(c), T = n(), E = f(!1), D = r(() => new Intl.NumberFormat(c.locale, c.format)), O = r(() => new Intl.NumberFormat(c.locale).formatToParts(1.1).find((e) => e.type === "decimal")?.value ?? "."), k = r(() => C.value == null ? "" : E.value || !c.format ? String(C.value).replace(".", O.value) : D.value.format(C.value)), A = r(() => C.value == null ? void 0 : [
 			c.prefix,
-			c.format ? E.value.format(S.value) : S.value,
+			c.format ? D.value.format(C.value) : C.value,
 			c.suffix
-		].filter((e) => e != null && e !== "").join(" ")), A = r(() => (String(c.step).split(".")[1] ?? "").length);
-		function j(e) {
-			let t = c.min ?? 0, n = Number((t + Math.round((e - t) / c.step) * c.step).toFixed(A.value));
+		].filter((e) => e != null && e !== "").join(" ")), j = r(() => (String(c.step).split(".")[1] ?? "").length);
+		function M(e) {
+			let t = c.min ?? 0, n = Number((t + Math.round((e - t) / c.step) * c.step).toFixed(j.value));
 			return Math.min(c.max ?? Infinity, Math.max(c.min ?? -Infinity, n));
 		}
-		function M(e) {
+		function N(e) {
 			let t = e.target.value;
-			D.value !== "." && (t = t.replaceAll(".", "").replace(D.value, ".")), t = t.replace(/[^\d.-]/g, ""), S.value = t === "" || t === "-" ? null : Number(t);
+			O.value !== "." && (t = t.replaceAll(".", "").replace(O.value, ".")), t = t.replace(/[^\d.-]/g, ""), C.value = t === "" || t === "-" ? null : Number(t);
 		}
-		function N() {
-			T.value = !1, S.value != null && (S.value = j(S.value));
+		function P() {
+			E.value = !1, C.value != null && (C.value = M(C.value));
 		}
-		let P = (e) => S.value = j((S.value ?? c.min ?? 0) + e * c.step);
-		function F(e) {
+		let F = (e) => C.value = M((C.value ?? c.min ?? 0) + e * c.step);
+		function I(e) {
 			let t = {
 				ArrowUp: 1,
 				ArrowDown: -1,
 				PageUp: 10,
 				PageDown: -10
 			}[e.key], n = e.key === "Home" ? c.min : e.key === "End" ? c.max : void 0;
-			if (t) P(t);
-			else if (n != null) S.value = n;
+			if (t) F(t);
+			else if (n != null) C.value = n;
 			else return;
 			e.preventDefault();
 		}
 		return (t, n) => (d(), a("div", { class: u(["bless-number bless-lean--field", [`bless-number--${s.size}`, {
 			"bless-number--disabled": s.disabled,
-			"bless-number--invalid": s.invalid || m(w).invalid.value
+			"bless-number--invalid": s.invalid || m(T).invalid.value
 		}]]) }, [
 			s.buttons ? (d(), a("button", {
 				key: 0,
 				type: "button",
 				class: "bless-number__btn",
-				"aria-label": "Decrease",
-				disabled: s.disabled || s.min != null && (S.value ?? 0) <= s.min,
+				"aria-label": S.value.decrease,
+				disabled: s.disabled || s.min != null && (C.value ?? 0) <= s.min,
 				tabindex: "-1",
-				onClick: n[0] ||= (e) => P(-1)
+				onClick: n[0] ||= (e) => F(-1)
 			}, " − ", 8, g)) : i("", !0),
 			s.prefix ? (d(), a("span", _, p(s.prefix), 1)) : i("", !0),
 			o("input", l(t.$attrs, {
-				id: m(C)(),
+				id: m(w)(),
 				type: "text",
 				inputmode: "decimal",
 				class: "bless-number__control",
-				value: O.value,
+				value: k.value,
 				disabled: s.disabled,
 				"aria-label": s.label,
-				"aria-invalid": s.invalid || m(w).invalid.value || void 0,
-				"aria-describedby": m(e)(m(w).describedby.value, t.$attrs["aria-describedby"]),
+				"aria-invalid": s.invalid || m(T).invalid.value || void 0,
+				"aria-describedby": m(e)(m(T).describedby.value, t.$attrs["aria-describedby"]),
 				role: "spinbutton",
-				"aria-valuenow": S.value ?? void 0,
-				"aria-valuetext": k.value,
+				"aria-valuenow": C.value ?? void 0,
+				"aria-valuetext": A.value,
 				"aria-valuemin": s.min,
 				"aria-valuemax": s.max,
-				onFocus: n[1] ||= (e) => T.value = !0,
-				onBlur: N,
-				onInput: M,
-				onKeydown: F
+				onFocus: n[1] ||= (e) => E.value = !0,
+				onBlur: P,
+				onInput: N,
+				onKeydown: I
 			}), null, 16, v),
 			s.name ? (d(), a("input", {
 				key: 2,
 				type: "hidden",
 				name: s.name,
-				value: S.value ?? ""
+				value: C.value ?? ""
 			}, null, 8, y)) : i("", !0),
 			s.suffix ? (d(), a("span", b, p(s.suffix), 1)) : i("", !0),
 			s.buttons ? (d(), a("button", {
 				key: 4,
 				type: "button",
 				class: "bless-number__btn",
-				"aria-label": "Increase",
-				disabled: s.disabled || s.max != null && (S.value ?? 0) >= s.max,
+				"aria-label": S.value.increase,
+				disabled: s.disabled || s.max != null && (C.value ?? 0) >= s.max,
 				tabindex: "-1",
-				onClick: n[2] ||= (e) => P(1)
+				onClick: n[2] ||= (e) => F(1)
 			}, " + ", 8, x)) : i("", !0)
 		], 2));
 	}

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

@@ -11,6 +11,18 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
     props: import('vue').PublicProps & __VLS_PrettifyLocal<({
         rowKey?: (item: T) => string | number;
         label?: string;
+        /** screen-reader wording; each message that carries names or numbers is a function of them */
+        labels?: Partial<{
+            card: (index: number, column: string) => string;
+            moved: (column: string, position: number, total: number) => string;
+            position: (column: string, position: number, total: number) => string;
+            dropped: (column: string, position: number) => string;
+            full: (column: string) => string;
+            grabbed: string;
+            cancelled: string;
+            hint: string;
+            roleDescription: string;
+        }>;
     } & {
         modelValue?: BlessKanbanColumn<T>[];
     }) & {