blessing-ui 0.2.0 → 0.3.0

package/dist/components/BlessCropper.vue_vue_type_script_setup_true_lang.js

@@ -1,21 +1,21 @@
 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 m, normalizeClass as h, normalizeStyle as ee, onBeforeUnmount as g, openBlock as _, ref as v, renderList as y, toDisplayString as b, unref as x, useId as S, useModel as C, watch as w, withCtx as T } from "vue";
+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 te = { class: "bless-cropper" }, ne = {
+var w = { class: "bless-cropper" }, T = {
 	key: 0,
 	class: "bless-cropper__error",
 	role: "alert"
-}, re = ["aria-busy"], E = ["aria-label", "aria-describedby"], D = ["onPointerdown"], O = {
+}, E = ["aria-busy"], re = ["aria-label", "aria-describedby"], ie = ["onPointerdown"], D = {
 	key: 2,
 	class: "bless-cropper__foot"
-}, k = ["id"], ie = {
+}, ae = ["id"], O = {
 	key: 0,
 	class: "bless-cropper__controls"
-}, ae = {
+}, oe = {
 	class: "bless-cropper__live",
 	"aria-live": "polite"
-}, A = /*@__PURE__*/ f({
+}, k = /*@__PURE__*/ f({
 	name: "BlessCropper",
 	__name: "BlessCropper",
 	props: /*@__PURE__*/ p({
@@ -26,14 +26,22 @@ var te = { class: "bless-cropper" }, ne = {
 			type: Boolean,
 			default: !0
 		},
-		label: { default: "Crop area" }
+		label: { default: "Crop area" },
+		labels: {}
 	}, {
 		modelValue: { default: null },
 		modelModifiers: {}
 	}),
 	emits: /*@__PURE__*/ p(["ready", "error"], ["update:modelValue"]),
-	setup(f, { expose: p, emit: A }) {
-		let j = f, M = C(f, "modelValue"), N = A, P = S(), F = v(), I = v(), L = v(null), R = v(!1), z = v(0), B = v({
+	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,
@@ -50,7 +58,7 @@ var te = { class: "bless-cropper" }, ne = {
 				w: 0,
 				h: 0
 			};
-		}), U = o(() => j.aspect && H.value.w ? j.aspect * H.value.h / H.value.w : 0), W = o(() => {
+		}), 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;
@@ -62,19 +70,19 @@ var te = { class: "bless-cropper" }, ne = {
 				rotation: z.value
 			};
 		});
-		w(W, (e) => e && (M.value = e));
+		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);
-		w(() => [L.value, z.value], () => m(() => I.value && G(I.value, Math.min(1, 1024 / Math.max(H.value.w, H.value.h))))), w(() => [
+		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,
-			j.aspect
+			A.aspect
 		], K);
 		let q;
-		w(() => [j.src, j.crossorigin], ([e, t]) => {
+		S(() => [A.src, A.crossorigin], ([e, t]) => {
 			L.value = null, R.value = !1;
 			let n = new Image();
 			q = n, n.crossOrigin = t, n.onload = () => {
@@ -103,7 +111,7 @@ var te = { class: "bless-cropper" }, ne = {
 			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 oe(e) {
+		function se(e) {
 			let t = e.shiftKey ? .1 : .01, r = {
 				ArrowLeft: [-t, 0],
 				ArrowRight: [t, 0],
@@ -116,9 +124,9 @@ var te = { class: "bless-cropper" }, ne = {
 			else return;
 			e.preventDefault();
 			let a = W.value;
-			V.value = `${a.width} by ${a.height} pixels, from ${a.x}, ${a.y}`;
+			V.value = j.value.size(a.width, a.height, a.x, a.y);
 		}
-		let se = o(() => U.value ? [
+		let ce = o(() => U.value ? [
 			"nw",
 			"ne",
 			"se",
@@ -132,13 +140,13 @@ var te = { class: "bless-cropper" }, ne = {
 			"s",
 			"sw",
 			"w"
-		]), ce = o(() => ({
+		]), 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 le(e = {}) {
+		function ue(e = {}) {
 			let t = W.value;
 			if (!t || !L.value) return Promise.resolve(null);
 			let n = document.createElement("canvas");
@@ -147,11 +155,11 @@ var te = { class: "bless-cropper" }, ne = {
 			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: le,
+			toBlob: ue,
 			rotate: J,
 			reset: K
-		}), (t, n) => (_(), c("div", te, [
-			R.value ? (_(), c("p", ne, "The image could not be loaded.")) : (_(), c("div", {
+		}), (t, n) => (_(), c("div", w, [
+			R.value ? (_(), c("p", T, y(j.value.loadError), 1)) : (_(), c("div", {
 				key: 1,
 				ref_key: "stage",
 				ref: F,
@@ -168,45 +176,45 @@ var te = { class: "bless-cropper" }, ne = {
 				tabindex: "0",
 				role: "group",
 				"aria-label": f.label,
-				"aria-describedby": `${x(P)}-hint`,
-				style: ee(ce.value),
+				"aria-describedby": `${b(P)}-hint`,
+				style: h(le.value),
 				onPointerdown: n[0] ||= (e) => Z(null, e),
 				onPointermove: Q,
 				onPointerup: $,
 				onPointercancel: $,
-				onKeydown: oe
-			}, [(_(!0), c(a, null, y(se.value, (e) => (_(), c("span", {
+				onKeydown: se
+			}, [(_(!0), c(a, null, te(ce.value, (e) => (_(), c("span", {
 				key: e,
-				class: h(["bless-cropper__handle", `bless-cropper__handle--${e}`]),
+				class: m(["bless-cropper__handle", `bless-cropper__handle--${e}`]),
 				"aria-hidden": "true",
 				onPointerdown: (t) => Z(e, t),
 				onPointermove: Q,
 				onPointerup: $,
 				onPointercancel: $
-			}, null, 42, D))), 128))], 44, E)) : s("", !0)], 8, re)),
-			L.value ? (_(), c("div", O, [l("span", {
-				id: `${x(P)}-hint`,
+			}, 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"
-			}, b(W.value?.width) + " × " + b(W.value?.height) + " px · arrows move, + − resize", 9, k), f.controls ? (_(), c("span", ie, [d(e, {
+			}, 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": "Rotate left",
+				"aria-label": j.value.rotateLeft,
 				onClick: n[1] ||= (e) => J(-90)
 			}, {
-				default: T(() => [...n[3] ||= [u("↺", -1)]]),
+				default: C(() => [...n[3] ||= [u("↺", -1)]]),
 				_: 1
-			}), d(e, {
+			}, 8, ["aria-label"]), d(e, {
 				size: "sm",
 				variant: "ghost",
-				"aria-label": "Rotate right",
+				"aria-label": j.value.rotateRight,
 				onClick: n[2] ||= (e) => J(90)
 			}, {
-				default: T(() => [...n[4] ||= [u("↻", -1)]]),
+				default: C(() => [...n[4] ||= [u("↻", -1)]]),
 				_: 1
-			})])) : s("", !0)])) : s("", !0),
-			l("span", ae, b(V.value), 1)
+			}, 8, ["aria-label"])])) : s("", !0)])) : s("", !0),
+			l("span", oe, y(V.value), 1)
 		]));
 	}
 });
 //#endregion
-export { A as default };
+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;