blessing-ui 0.1.0 → 0.3.0

package/dist/components/BlessCropper.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,220 @@
+import e from "./BlessButton.js";
+import { initialBox as t, moveBox as n, resizeBox as r, scaleBox as i } from "../composables/cropBox.js";
+import { Fragment as a, computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, mergeModels as p, nextTick as ee, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as g, openBlock as _, ref as v, renderList as te, toDisplayString as y, unref as b, useId as x, useModel as ne, watch as S, withCtx as C } from "vue";
+//#region src/components/BlessCropper.vue?vue&type=script&setup=true&lang.ts
+var w = { class: "bless-cropper" }, T = {
+	key: 0,
+	class: "bless-cropper__error",
+	role: "alert"
+}, E = ["aria-busy"], re = ["aria-label", "aria-describedby"], ie = ["onPointerdown"], D = {
+	key: 2,
+	class: "bless-cropper__foot"
+}, ae = ["id"], O = {
+	key: 0,
+	class: "bless-cropper__controls"
+}, oe = {
+	class: "bless-cropper__live",
+	"aria-live": "polite"
+}, k = /*@__PURE__*/ f({
+	name: "BlessCropper",
+	__name: "BlessCropper",
+	props: /*@__PURE__*/ p({
+		src: {},
+		aspect: {},
+		crossorigin: { default: "anonymous" },
+		controls: {
+			type: Boolean,
+			default: !0
+		},
+		label: { default: "Crop area" },
+		labels: {}
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ p(["ready", "error"], ["update:modelValue"]),
+	setup(f, { expose: p, emit: k }) {
+		let A = f, j = o(() => ({
+			size: (e, t, n, r) => `${e} by ${t} pixels, from ${n}, ${r}`,
+			hint: "arrows move, + − resize",
+			rotateLeft: "Rotate left",
+			rotateRight: "Rotate right",
+			loadError: "The image could not be loaded.",
+			...A.labels
+		})), M = ne(f, "modelValue"), N = k, P = x(), F = v(), I = v(), L = v(null), R = v(!1), z = v(0), B = v({
+			l: 0,
+			t: 0,
+			r: 1,
+			b: 1
+		}), V = v(""), H = o(() => {
+			let e = L.value;
+			return e ? z.value % 180 ? {
+				w: e.naturalHeight,
+				h: e.naturalWidth
+			} : {
+				w: e.naturalWidth,
+				h: e.naturalHeight
+			} : {
+				w: 0,
+				h: 0
+			};
+		}), U = o(() => A.aspect && H.value.w ? A.aspect * H.value.h / H.value.w : 0), W = o(() => {
+			let { w: e, h: t } = H.value;
+			if (!e) return null;
+			let n = B.value;
+			return {
+				x: Math.round(n.l * e),
+				y: Math.round(n.t * t),
+				width: Math.round((n.r - n.l) * e),
+				height: Math.round((n.b - n.t) * t),
+				rotation: z.value
+			};
+		});
+		S(W, (e) => e && (M.value = e));
+		function G(e, t) {
+			let n = L.value, r = e.getContext("2d");
+			n && r && (e.width = Math.max(1, Math.round(H.value.w * t)), e.height = Math.max(1, Math.round(H.value.h * t)), r.translate(e.width / 2, e.height / 2), r.rotate(z.value * Math.PI / 180), r.drawImage(n, -n.naturalWidth * t / 2, -n.naturalHeight * t / 2, n.naturalWidth * t, n.naturalHeight * t));
+		}
+		let K = () => B.value = t(U.value);
+		S(() => [L.value, z.value], () => ee(() => I.value && G(I.value, Math.min(1, 1024 / Math.max(H.value.w, H.value.h))))), S(() => [
+			L.value,
+			z.value,
+			A.aspect
+		], K);
+		let q;
+		S(() => [A.src, A.crossorigin], ([e, t]) => {
+			L.value = null, R.value = !1;
+			let n = new Image();
+			q = n, n.crossOrigin = t, n.onload = () => {
+				q === n && (L.value = n, N("ready"));
+			}, n.onerror = () => {
+				q === n && (R.value = !0, N("error"));
+			}, n.src = e;
+		}, { immediate: !0 }), g(() => q = void 0);
+		let J = (e) => z.value = (z.value + e + 360) % 360, Y = null, X = (e) => {
+			let t = F.value.getBoundingClientRect();
+			return {
+				x: (e.clientX - t.left) / t.width,
+				y: (e.clientY - t.top) / t.height
+			};
+		};
+		function Z(e, t) {
+			t.button || (t.currentTarget.setPointerCapture?.(t.pointerId), t.stopPropagation(), Y = {
+				h: e,
+				box: B.value,
+				...X(t)
+			});
+		}
+		function Q(e) {
+			if (!Y) return;
+			let t = X(e);
+			B.value = Y.h ? r(Y.box, Y.h, t.x, t.y, U.value) : n(Y.box, t.x - Y.x, t.y - Y.y);
+		}
+		let $ = () => Y = null;
+		function se(e) {
+			let t = e.shiftKey ? .1 : .01, r = {
+				ArrowLeft: [-t, 0],
+				ArrowRight: [t, 0],
+				ArrowUp: [0, -t],
+				ArrowDown: [0, t]
+			};
+			if (r[e.key]) B.value = n(B.value, ...r[e.key]);
+			else if (e.key === "+" || e.key === "=") B.value = i(B.value, t * 2);
+			else if (e.key === "-" || e.key === "_") B.value = i(B.value, -t * 2);
+			else return;
+			e.preventDefault();
+			let a = W.value;
+			V.value = j.value.size(a.width, a.height, a.x, a.y);
+		}
+		let ce = o(() => U.value ? [
+			"nw",
+			"ne",
+			"se",
+			"sw"
+		] : [
+			"nw",
+			"n",
+			"ne",
+			"e",
+			"se",
+			"s",
+			"sw",
+			"w"
+		]), le = o(() => ({
+			left: `${B.value.l * 100}%`,
+			top: `${B.value.t * 100}%`,
+			width: `${(B.value.r - B.value.l) * 100}%`,
+			height: `${(B.value.b - B.value.t) * 100}%`
+		}));
+		function ue(e = {}) {
+			let t = W.value;
+			if (!t || !L.value) return Promise.resolve(null);
+			let n = document.createElement("canvas");
+			G(n, 1);
+			let r = e.maxWidth && t.width > e.maxWidth ? e.maxWidth / t.width : 1, i = document.createElement("canvas");
+			return i.width = Math.max(1, Math.round(t.width * r)), i.height = Math.max(1, Math.round(t.height * r)), i.getContext("2d")?.drawImage(n, t.x, t.y, t.width, t.height, 0, 0, i.width, i.height), new Promise((t) => i.toBlob(t, e.type ?? "image/png", e.quality));
+		}
+		return p({
+			toBlob: ue,
+			rotate: J,
+			reset: K
+		}), (t, n) => (_(), c("div", w, [
+			R.value ? (_(), c("p", T, y(j.value.loadError), 1)) : (_(), c("div", {
+				key: 1,
+				ref_key: "stage",
+				ref: F,
+				class: "bless-cropper__stage",
+				"aria-busy": !L.value
+			}, [l("canvas", {
+				ref_key: "canvas",
+				ref: I,
+				class: "bless-cropper__canvas",
+				"aria-hidden": "true"
+			}, null, 512), L.value ? (_(), c("div", {
+				key: 0,
+				class: "bless-cropper__frame",
+				tabindex: "0",
+				role: "group",
+				"aria-label": f.label,
+				"aria-describedby": `${b(P)}-hint`,
+				style: h(le.value),
+				onPointerdown: n[0] ||= (e) => Z(null, e),
+				onPointermove: Q,
+				onPointerup: $,
+				onPointercancel: $,
+				onKeydown: se
+			}, [(_(!0), c(a, null, te(ce.value, (e) => (_(), c("span", {
+				key: e,
+				class: m(["bless-cropper__handle", `bless-cropper__handle--${e}`]),
+				"aria-hidden": "true",
+				onPointerdown: (t) => Z(e, t),
+				onPointermove: Q,
+				onPointerup: $,
+				onPointercancel: $
+			}, null, 42, ie))), 128))], 44, re)) : s("", !0)], 8, E)),
+			L.value ? (_(), c("div", D, [l("span", {
+				id: `${b(P)}-hint`,
+				class: "bless-cropper__readout"
+			}, y(W.value?.width) + " × " + y(W.value?.height) + " px · " + y(j.value.hint), 9, ae), f.controls ? (_(), c("span", O, [d(e, {
+				size: "sm",
+				variant: "ghost",
+				"aria-label": j.value.rotateLeft,
+				onClick: n[1] ||= (e) => J(-90)
+			}, {
+				default: C(() => [...n[3] ||= [u("↺", -1)]]),
+				_: 1
+			}, 8, ["aria-label"]), d(e, {
+				size: "sm",
+				variant: "ghost",
+				"aria-label": j.value.rotateRight,
+				onClick: n[2] ||= (e) => J(90)
+			}, {
+				default: C(() => [...n[4] ||= [u("↻", -1)]]),
+				_: 1
+			}, 8, ["aria-label"])])) : s("", !0)])) : s("", !0),
+			l("span", oe, y(V.value), 1)
+		]));
+	}
+});
+//#endregion
+export { k as default };

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

@@ -12,6 +12,12 @@ declare const __VLS_export: <T extends Record<string, unknown>>(__VLS_props: Non
         searchPlaceholder?: string;
         /** accessible name of the search box */
         searchLabel?: string;
+        /** names of the select-page checkbox and the page-size select */
+        labels?: Partial<{
+            selectPage: string;
+            rowsPerPage: string;
+            selectRow: (name: string) => string;
+        }>;
         emptyText?: string;
         caption?: string;
         /** rows are one server page; sort / query / page are yours to fetch with (see `state` event) */

package/dist/components/BlessDataTable.vue_vue_type_script_setup_true_lang.js

@@ -5,19 +5,19 @@ import r from "./BlessSelect.js";
 import i from "./BlessPagination.js";
 import ee from "./BlessDropdownMenu.js";
 import { useDataTable as a } from "../composables/useDataTable.js";
-import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, normalizeClass as h, normalizeStyle as g, onMounted as _, openBlock as v, ref as y, renderList as b, renderSlot as x, resolveDynamicComponent as S, toDisplayString as C, toRef as w, unref as T, watch as E, withCtx as D, withModifiers as O } from "vue";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, normalizeClass as h, normalizeStyle as g, onMounted as _, openBlock as v, ref as y, renderList as b, renderSlot as x, resolveDynamicComponent as S, toDisplayString as C, toRef as w, unref as T, watch as E, withCtx as D, withModifiers as te } from "vue";
 //#region src/components/BlessDataTable.vue?vue&type=script&setup=true&lang.ts
-var k = { class: "bless-datatable__toolbar" }, A = { class: "bless-datatable__scroll" }, j = ["aria-busy"], M = {
+var O = { class: "bless-datatable__toolbar" }, k = { class: "bless-datatable__scroll" }, A = ["aria-busy"], j = {
 	key: 0,
 	class: "bless-table__caption"
-}, N = { class: "bless-table__head" }, P = {
+}, M = { class: "bless-table__head" }, N = {
 	key: 0,
 	scope: "col",
 	class: "bless-table__th bless-datatable__check"
-}, F = ["aria-sort"], I = ["onClick"], L = {
+}, P = ["aria-sort"], F = ["onClick"], I = {
 	class: "bless-datatable__sort-icon",
 	"aria-hidden": "true"
-}, R = { key: 0 }, z = ["colspan"], B = ["aria-selected", "onClick"], V = { class: "bless-datatable__foot" }, H = { class: "bless-datatable__pager" }, U = /*@__PURE__*/ m({
+}, L = { key: 0 }, R = ["colspan"], z = ["aria-selected", "onClick"], B = { class: "bless-datatable__foot" }, V = { class: "bless-datatable__pager" }, H = /*@__PURE__*/ m({
 	name: "BlessDataTable",
 	__name: "BlessDataTable",
 	props: {
@@ -35,6 +35,7 @@ var k = { class: "bless-datatable__toolbar" }, A = { class: "bless-datatable__sc
 		searchKeys: {},
 		searchPlaceholder: { default: "Search…" },
 		searchLabel: { default: "Search rows" },
+		labels: {},
 		emptyText: { default: "No rows." },
 		caption: {},
 		server: { type: Boolean },
@@ -46,16 +47,21 @@ var k = { class: "bless-datatable__toolbar" }, A = { class: "bless-datatable__sc
 		"rowClick",
 		"state"
 	],
-	setup(m, { expose: U, emit: W }) {
-		let G = m, K = W, q = s(() => G.rows), J = s(() => [.../* @__PURE__ */ new Set([G.pageSize, ...G.pageSizes])].sort((e, t) => e - t).map((e) => ({
+	setup(m, { expose: H, emit: U }) {
+		let W = m, G = s(() => ({
+			selectPage: "Select page",
+			rowsPerPage: "Rows per page",
+			selectRow: (e) => `Select ${e}`,
+			...W.labels
+		})), K = U, q = s(() => W.rows), J = s(() => [.../* @__PURE__ */ new Set([W.pageSize, ...W.pageSizes])].sort((e, t) => e - t).map((e) => ({
 			value: e,
 			label: `${e} / page`
 		}))), Y = a(q, {
-			rowKey: G.rowKey,
-			pageSize: G.pageSize,
-			searchKeys: G.searchKeys,
-			server: G.server,
-			total: w(() => G.total ?? 0)
+			rowKey: W.rowKey,
+			pageSize: W.pageSize,
+			searchKeys: W.searchKeys,
+			server: W.server,
+			total: w(() => W.total ?? 0)
 		}), { state: X } = Y, Z = () => ({
 			sortKey: X.sortKey,
 			sortDir: X.sortDir,
@@ -69,26 +75,26 @@ var k = { class: "bless-datatable__toolbar" }, A = { class: "bless-datatable__sc
 			X.query,
 			X.page,
 			X.pageSize
-		], () => G.server && K("state", Z())), _(() => G.server && K("state", Z()));
-		let Q = s(() => G.columns.filter((e) => !X.hidden.has(e.key))), te = s(() => [{
+		], () => W.server && K("state", Z())), _(() => W.server && K("state", Z()));
+		let Q = s(() => W.columns.filter((e) => !X.hidden.has(e.key))), ne = s(() => [{
 			type: "label",
 			label: "Columns"
-		}, ...G.columns.filter((e) => e.hideable !== !1).map((e) => ({
+		}, ...W.columns.filter((e) => e.hideable !== !1).map((e) => ({
 			type: "checkbox",
 			label: e.label,
 			value: e.key
-		}))]), ne = s(() => Object.fromEntries(G.columns.map((e) => [e.key, !X.hidden.has(e.key)]))), re = y(), $ = s(() => G.columns.find((e) => e.header)?.key), ie = (e, t) => $.value ? String(e[$.value]) : `row ${(X.page - 1) * X.pageSize + t + 1}`;
-		function ae(e) {
+		}))]), re = s(() => Object.fromEntries(W.columns.map((e) => [e.key, !X.hidden.has(e.key)]))), ie = y(), $ = s(() => W.columns.find((e) => e.header)?.key), ae = (e, t) => $.value ? String(e[$.value]) : `row ${(X.page - 1) * X.pageSize + t + 1}`;
+		function oe(e) {
 			Y.toggle(e), K("update:selected", Y.selectedRows.value);
 		}
-		function oe() {
+		function se() {
 			Y.togglePage(), K("update:selected", Y.selectedRows.value);
 		}
-		return U({
+		return H({
 			state: X,
 			selectedRows: Y.selectedRows
 		}), (a, s) => (v(), u("div", { class: h(["bless-datatable", { "bless-datatable--loading": m.loading }]) }, [
-			d("div", k, [
+			d("div", O, [
 				m.searchable ? (v(), c(t, {
 					key: 0,
 					modelValue: T(X).query,
@@ -108,8 +114,8 @@ var k = { class: "bless-datatable__toolbar" }, A = { class: "bless-datatable__sc
 					selected: T(Y).selectedRows.value
 				}),
 				p(ee, {
-					items: te.value,
-					checked: ne.value,
+					items: ne.value,
+					checked: re.value,
 					placement: "bottom-end",
 					class: "bless-datatable__cols",
 					onSelect: s[2] ||= (e) => e.type === "checkbox" && T(Y).toggleColumn(e.value)
@@ -121,19 +127,23 @@ var k = { class: "bless-datatable__toolbar" }, A = { class: "bless-datatable__sc
 					_: 1
 				}, 8, ["items", "checked"])
 			]),
-			d("div", A, [d("table", {
+			d("div", k, [d("table", {
 				class: "bless-table bless-datatable__table",
 				"aria-busy": m.loading || void 0
 			}, [
-				m.caption ? (v(), u("caption", M, C(m.caption), 1)) : l("", !0),
-				d("thead", N, [d("tr", null, [m.selectable ? (v(), u("th", P, [p(n, {
+				m.caption ? (v(), u("caption", j, C(m.caption), 1)) : l("", !0),
+				d("thead", M, [d("tr", null, [m.selectable ? (v(), u("th", N, [p(n, {
 					ref_key: "selectAllRef",
-					ref: re,
+					ref: ie,
 					"model-value": T(Y).allPageSelected.value,
 					indeterminate: !T(Y).allPageSelected.value && T(Y).somePageSelected.value,
-					"aria-label": "Select page",
-					"onUpdate:modelValue": oe
-				}, null, 8, ["model-value", "indeterminate"])])) : l("", !0), (v(!0), u(o, null, b(Q.value, (e) => (v(), u("th", {
+					"aria-label": G.value.selectPage,
+					"onUpdate:modelValue": se
+				}, null, 8, [
+					"model-value",
+					"indeterminate",
+					"aria-label"
+				])])) : l("", !0), (v(!0), u(o, null, b(Q.value, (e) => (v(), u("th", {
 					key: e.key,
 					scope: "col",
 					class: h(["bless-table__th", [e.align && `bless-table__cell--${e.align}`, { "bless-datatable__th--sortable": e.sortable }]]),
@@ -144,11 +154,11 @@ var k = { class: "bless-datatable__toolbar" }, A = { class: "bless-datatable__sc
 					type: "button",
 					class: "bless-datatable__sort",
 					onClick: (t) => T(Y).sortBy(e.key)
-				}, [f(C(e.label) + " ", 1), d("span", L, C(T(X).sortKey === e.key ? T(X).sortDir === "asc" ? "↑" : "↓" : "↕"), 1)], 8, I)) : (v(), u(o, { key: 1 }, [f(C(e.label), 1)], 64))], 14, F))), 128))])]),
-				d("tbody", null, [T(Y).pageRows.value.length ? l("", !0) : (v(), u("tr", R, [d("td", {
+				}, [f(C(e.label) + " ", 1), d("span", I, C(T(X).sortKey === e.key ? T(X).sortDir === "asc" ? "↑" : "↓" : "↕"), 1)], 8, F)) : (v(), u(o, { key: 1 }, [f(C(e.label), 1)], 64))], 14, P))), 128))])]),
+				d("tbody", null, [T(Y).pageRows.value.length ? l("", !0) : (v(), u("tr", L, [d("td", {
 					colspan: Q.value.length + +!!m.selectable,
 					class: "bless-table__cell bless-datatable__empty"
-				}, C(m.emptyText), 9, z)])), (v(!0), u(o, null, b(T(Y).pageRows.value, (e, t) => (v(), u("tr", {
+				}, C(m.emptyText), 9, R)])), (v(!0), u(o, null, b(T(Y).pageRows.value, (e, t) => (v(), u("tr", {
 					key: String(T(Y).keyOf(e)),
 					class: h(["bless-table__row bless-datatable__row", { "bless-datatable__row--selected": T(X).selected.has(T(Y).keyOf(e)) }]),
 					"aria-selected": m.selectable ? T(X).selected.has(T(Y).keyOf(e)) : void 0,
@@ -156,11 +166,11 @@ var k = { class: "bless-datatable__toolbar" }, A = { class: "bless-datatable__sc
 				}, [m.selectable ? (v(), u("td", {
 					key: 0,
 					class: "bless-table__cell bless-datatable__check",
-					onClick: s[3] ||= O(() => {}, ["stop"])
+					onClick: s[3] ||= te(() => {}, ["stop"])
 				}, [p(n, {
 					"model-value": T(X).selected.has(T(Y).keyOf(e)),
-					"aria-label": `Select ${ie(e, t)}`,
-					"onUpdate:modelValue": (t) => ae(e)
+					"aria-label": G.value.selectRow(ae(e, t)),
+					"onUpdate:modelValue": (t) => oe(e)
 				}, null, 8, [
 					"model-value",
 					"aria-label",
@@ -181,25 +191,29 @@ var k = { class: "bless-datatable__toolbar" }, A = { class: "bless-datatable__sc
 					"scope",
 					"class",
 					"data-label"
-				]))), 128))], 10, B))), 128))])
-			], 8, j)]),
-			d("div", V, [p(e, {
+				]))), 128))], 10, z))), 128))])
+			], 8, A)]),
+			d("div", B, [p(e, {
 				size: "xs",
 				muted: "",
 				role: "status"
 			}, {
 				default: D(() => [m.selectable && T(X).selected.size ? (v(), u(o, { key: 0 }, [f(C(T(X).selected.size) + " selected · ", 1)], 64)) : l("", !0), f(" " + C(T(Y).sorted.value.length) + " rows ", 1)]),
 				_: 1
-			}), d("div", H, [p(r, {
+			}), d("div", V, [p(r, {
 				"model-value": T(X).pageSize,
 				size: "sm",
-				"aria-label": "Rows per page",
+				"aria-label": G.value.rowsPerPage,
 				options: J.value,
 				class: "bless-datatable__size",
 				"onUpdate:modelValue": s[4] ||= (e) => {
 					T(X).pageSize = Number(e), T(X).page = 1;
 				}
-			}, null, 8, ["model-value", "options"]), p(i, {
+			}, null, 8, [
+				"model-value",
+				"aria-label",
+				"options"
+			]), p(i, {
 				modelValue: T(X).page,
 				"onUpdate:modelValue": s[5] ||= (e) => T(X).page = e,
 				total: T(Y).pageCount.value,
@@ -209,4 +223,4 @@ var k = { class: "bless-datatable__toolbar" }, A = { class: "bless-datatable__sc
 	}
 });
 //#endregion
-export { U as default };
+export { H as default };

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

@@ -8,6 +8,13 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         label?: string;
         /** hide the list/grid switch */
         switchable?: boolean;
+        /** names of the layout switch and its two buttons */
+        labels?: Partial<{
+            layout: string;
+            list: string;
+            grid: string;
+            empty: string;
+        }>;
     } & {
         layout?: "list" | "grid";
     }) & {

package/dist/components/BlessDataView.vue_vue_type_script_setup_true_lang.js

@@ -1,15 +1,15 @@
 import e from "./BlessToggle.js";
 import t from "./BlessToggleGroup.js";
 import n from "./BlessPagination.js";
-import { Fragment as r, computed as i, createBlock 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, ref as g, renderList as _, renderSlot as v, useModel as y, watch as b, withCtx as x } from "vue";
+import { Fragment as r, computed as i, createBlock 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, ref as g, renderList as _, renderSlot as v, toDisplayString as y, useModel as b, watch as x, withCtx as S } from "vue";
 //#region src/components/BlessDataView.vue?vue&type=script&setup=true&lang.ts
-var S = {
+var C = {
 	key: 0,
 	class: "bless-dataview__bar"
-}, C = { class: "bless-dataview__header" }, w = ["aria-label"], T = {
+}, w = { class: "bless-dataview__header" }, T = ["aria-label"], E = {
 	key: 2,
 	class: "bless-dataview__empty"
-}, E = /*@__PURE__*/ d({
+}, D = /*@__PURE__*/ d({
 	name: "BlessDataView",
 	__name: "BlessDataView",
 	props: /*@__PURE__*/ f({
@@ -21,66 +21,73 @@ var S = {
 		switchable: {
 			type: Boolean,
 			default: !0
-		}
+		},
+		labels: {}
 	}, {
 		layout: { default: "list" },
 		layoutModifiers: {}
 	}),
 	emits: ["update:layout"],
 	setup(d) {
-		let f = d, E = y(d, "layout"), D = g(1), O = i(() => f.pageSize ? Math.max(1, Math.ceil(f.items.length / f.pageSize)) : 1);
-		b(O, (e) => D.value > e && (D.value = e));
-		let k = i(() => f.pageSize ? f.items.slice((D.value - 1) * f.pageSize, D.value * f.pageSize) : f.items);
+		let f = d, D = i(() => ({
+			layout: "Layout",
+			list: "List",
+			grid: "Grid",
+			empty: "No items",
+			...f.labels
+		})), O = b(d, "layout"), k = g(1), A = i(() => f.pageSize ? Math.max(1, Math.ceil(f.items.length / f.pageSize)) : 1);
+		x(A, (e) => k.value > e && (k.value = e));
+		let j = i(() => f.pageSize ? f.items.slice((k.value - 1) * f.pageSize, k.value * f.pageSize) : f.items);
 		return (i, f) => (h(), s("div", {
-			class: p(["bless-dataview", `bless-dataview--${E.value}`]),
+			class: p(["bless-dataview", `bless-dataview--${O.value}`]),
 			style: m({ "--_col": d.columns })
 		}, [
-			i.$slots.header || d.switchable ? (h(), s("div", S, [c("div", C, [v(i.$slots, "header", { layout: E.value })]), d.switchable ? (h(), a(t, {
+			i.$slots.header || d.switchable ? (h(), s("div", C, [c("div", w, [v(i.$slots, "header", { layout: O.value })]), d.switchable ? (h(), a(t, {
 				key: 0,
-				"model-value": E.value,
-				label: "Layout",
-				"onUpdate:modelValue": f[0] ||= (e) => E.value = e ?? "list"
+				"model-value": O.value,
+				label: D.value.layout,
+				"onUpdate:modelValue": f[0] ||= (e) => O.value = e ?? "list"
 			}, {
-				default: x(() => [u(e, {
+				default: S(() => [u(e, {
 					value: "list",
 					size: "sm",
-					label: "List"
+					label: D.value.list
 				}, {
-					default: x(() => [...f[2] ||= [l("☰", -1)]]),
+					default: S(() => [...f[2] ||= [l("☰", -1)]]),
 					_: 1
-				}), u(e, {
+				}, 8, ["label"]), u(e, {
 					value: "grid",
 					size: "sm",
-					label: "Grid"
+					label: D.value.grid
 				}, {
-					default: x(() => [...f[3] ||= [l("▦", -1)]]),
+					default: S(() => [...f[3] ||= [l("▦", -1)]]),
 					_: 1
-				})]),
+				}, 8, ["label"])]),
 				_: 1
-			}, 8, ["model-value"])) : o("", !0)])) : o("", !0),
-			k.value.length ? (h(), s("div", {
+			}, 8, ["model-value", "label"])) : o("", !0)])) : o("", !0),
+			j.value.length ? (h(), s("div", {
 				key: 1,
 				class: "bless-dataview__items",
 				role: "list",
 				"aria-label": d.label
-			}, [(h(!0), s(r, null, _(k.value, (e, t) => (h(), s("div", {
+			}, [(h(!0), s(r, null, _(j.value, (e, t) => (h(), s("div", {
 				key: d.rowKey ? d.rowKey(e, t) : t,
 				class: "bless-dataview__item",
 				role: "listitem"
 			}, [v(i.$slots, "default", {
 				item: e,
-				index: (D.value - 1) * d.pageSize + t,
-				layout: E.value
-			})]))), 128))], 8, w)) : (h(), s("div", T, [v(i.$slots, "empty", {}, () => [f[4] ||= l("No items", -1)])])),
-			O.value > 1 ? (h(), a(n, {
+				index: (k.value - 1) * d.pageSize + t,
+				layout: O.value
+			})]))), 128))], 8, T)) : (h(), s("div", E, [v(i.$slots, "empty", {}, () => [l(y(D.value.empty), 1)])])),
+			A.value > 1 ? (h(), a(n, {
 				key: 3,
-				modelValue: D.value,
-				"onUpdate:modelValue": f[1] ||= (e) => D.value = e,
-				total: O.value,
+				modelValue: k.value,
+				"onUpdate:modelValue": f[1] ||= (e) => k.value = e,
+				total: A.value,
 				class: "bless-dataview__pager"
 			}, null, 8, ["modelValue", "total"])) : o("", !0)
 		], 6));
 	}
 });
 //#endregion
-export { E as default };
+export { D as default };

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

@@ -10,6 +10,8 @@ type __VLS_Props = {
     /** prefer native <input type=date> on coarse pointers (touch) */
     nativeOnTouch?: boolean;
     size?: "sm" | "md" | "lg";
+    /** accessible name of the clear button */
+    clearLabel?: string;
 };
 type __VLS_ModelProps = {
     modelValue?: string | [string, string] | undefined;
@@ -24,6 +26,7 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {},
     placeholder: string;
     locale: string;
     nativeOnTouch: boolean;
+    clearLabel: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;