blessing-ui 0.1.0 → 0.3.0

package/dist/components/BlessDatePicker.vue_vue_type_script_setup_true_lang.js

@@ -20,7 +20,7 @@ var D = {
 	"aria-expanded",
 	"aria-invalid",
 	"aria-describedby"
-], A = ["aria-label", "onKeydown"], j = /*@__PURE__*/ d({
+], A = ["aria-label"], j = ["aria-label", "onKeydown"], M = /*@__PURE__*/ d({
 	name: "BlessDatePicker",
 	__name: "BlessDatePicker",
 	props: /*@__PURE__*/ f({
@@ -36,89 +36,90 @@ var D = {
 			type: Boolean,
 			default: !0
 		},
-		size: { default: "md" }
+		size: { default: "md" },
+		clearLabel: { default: "Clear date" }
 	}, {
 		modelValue: {},
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
 	setup(d) {
-		let f = d, j = x(d, "modelValue"), M = e(f)(), N = t(), P = v(!1), F = v(), I = v(), { x: L, y: R } = n(F, I, P, {
+		let f = d, M = x(d, "modelValue"), N = e(f)(), P = t(), F = v(!1), I = v(), L = v(), { x: R, y: z } = n(I, L, F, {
 			placement: "bottom-start",
 			offset: 4
-		}), z = v(!1);
-		g(() => z.value = matchMedia("(pointer: coarse)").matches);
-		let B = o(() => f.nativeOnTouch && !f.range && z.value), V = o(() => new Intl.DateTimeFormat(f.locale, { dateStyle: "medium" })), H = o(() => {
-			if (!j.value) return "";
-			let e = V.value;
-			return Array.isArray(j.value) ? `${e.format(r(j.value[0]))} – ${e.format(r(j.value[1]))}` : e.format(r(j.value));
+		}), B = v(!1);
+		g(() => B.value = matchMedia("(pointer: coarse)").matches);
+		let V = o(() => f.nativeOnTouch && !f.range && B.value), H = o(() => new Intl.DateTimeFormat(f.locale, { dateStyle: "medium" })), U = o(() => {
+			if (!M.value) return "";
+			let e = H.value;
+			return Array.isArray(M.value) ? `${e.format(r(M.value[0]))} – ${e.format(r(M.value[1]))}` : e.format(r(M.value));
 		});
-		function U() {
-			P.value = !1, F.value?.focus();
+		function W() {
+			F.value = !1, I.value?.focus();
 		}
-		C(P, (e) => p(() => {
-			let t = I.value;
+		C(F, (e) => p(() => {
+			let t = L.value;
 			t && typeof t.showPopover == "function" && (e && !t.matches(":popover-open") ? t.showPopover() : !e && t.matches(":popover-open") && t.hidePopover(), e && p(() => t.querySelector("[tabindex=\"0\"]")?.focus()));
-		})), C(j, (e) => {
-			P.value && (!f.range || Array.isArray(e)) && U();
+		})), C(M, (e) => {
+			F.value && (!f.range || Array.isArray(e)) && W();
 		});
-		function W() {
-			j.value = void 0, F.value?.focus();
+		function G() {
+			M.value = void 0, I.value?.focus();
 		}
 		return (e, t) => (_(), c("div", { class: m(["bless-datepicker", [`bless-datepicker--${d.size}`, {
-			"bless-datepicker--invalid": d.invalid || b(N).invalid.value,
+			"bless-datepicker--invalid": d.invalid || b(P).invalid.value,
 			"bless-datepicker--disabled": d.disabled
-		}]]) }, [B.value ? (_(), c("span", D, [w(l("input", {
-			id: b(M),
-			"onUpdate:modelValue": t[0] ||= (e) => j.value = e,
+		}]]) }, [V.value ? (_(), c("span", D, [w(l("input", {
+			id: b(N),
+			"onUpdate:modelValue": t[0] ||= (e) => M.value = e,
 			type: "date",
 			min: d.min,
 			max: d.max,
 			disabled: d.disabled,
 			class: "bless-datepicker__native",
-			"aria-invalid": d.invalid || b(N).invalid.value || void 0,
-			"aria-describedby": b(N).describedby.value
-		}, null, 8, O), [[S, j.value]])])) : (_(), c(a, { key: 1 }, [
+			"aria-invalid": d.invalid || b(P).invalid.value || void 0,
+			"aria-describedby": b(P).describedby.value
+		}, null, 8, O), [[S, M.value]])])) : (_(), c(a, { key: 1 }, [
 			l("button", {
 				ref_key: "anchor",
-				ref: F,
-				id: b(M),
+				ref: I,
+				id: b(N),
 				type: "button",
 				class: "bless-datepicker__trigger",
 				disabled: d.disabled,
 				"aria-haspopup": "dialog",
-				"aria-expanded": P.value,
-				"aria-invalid": d.invalid || b(N).invalid.value || void 0,
-				"aria-describedby": b(N).describedby.value,
-				onClick: t[1] ||= (e) => P.value = !P.value,
-				onKeydown: t[2] ||= T((e) => P.value &&= (e.preventDefault(), !1), ["esc"])
+				"aria-expanded": F.value,
+				"aria-invalid": d.invalid || b(P).invalid.value || void 0,
+				"aria-describedby": b(P).describedby.value,
+				onClick: t[1] ||= (e) => F.value = !F.value,
+				onKeydown: t[2] ||= T((e) => F.value &&= (e.preventDefault(), !1), ["esc"])
 			}, [t[5] ||= l("span", {
 				class: "bless-datepicker__icon",
 				"aria-hidden": "true"
-			}, "▦", -1), l("span", { class: m(["bless-datepicker__text", { "bless-datepicker__text--placeholder": !H.value }]) }, y(H.value || d.placeholder), 3)], 40, k),
-			H.value && !d.disabled ? (_(), c("button", {
+			}, "▦", -1), l("span", { class: m(["bless-datepicker__text", { "bless-datepicker__text--placeholder": !U.value }]) }, y(U.value || d.placeholder), 3)], 40, k),
+			U.value && !d.disabled ? (_(), c("button", {
 				key: 0,
 				type: "button",
 				class: "bless-datepicker__clear",
-				"aria-label": "Clear date",
-				onClick: W
-			}, " × ")) : s("", !0),
+				"aria-label": d.clearLabel,
+				onClick: G
+			}, " × ", 8, A)) : s("", !0),
 			l("div", {
 				ref_key: "panel",
-				ref: I,
+				ref: L,
 				popover: "auto",
 				class: "bless-datepicker__panel",
 				style: h({
-					left: `${b(L)}px`,
-					top: `${b(R)}px`
+					left: `${b(R)}px`,
+					top: `${b(z)}px`
 				}),
 				role: "dialog",
 				"aria-label": d.placeholder,
-				onToggle: t[4] ||= (e) => P.value = e.newState === "open",
-				onKeydown: T(E(U, ["stop", "prevent"]), ["esc"])
+				onToggle: t[4] ||= (e) => F.value = e.newState === "open",
+				onKeydown: T(E(W, ["stop", "prevent"]), ["esc"])
 			}, [u(i, {
-				modelValue: j.value,
-				"onUpdate:modelValue": t[3] ||= (e) => j.value = e,
+				modelValue: M.value,
+				"onUpdate:modelValue": t[3] ||= (e) => M.value = e,
 				range: d.range,
 				min: d.min,
 				max: d.max,
@@ -129,9 +130,9 @@ var D = {
 				"min",
 				"max",
 				"locale"
-			])], 44, A)
+			])], 44, j)
 		], 64))], 2));
 	}
 });
 //#endregion
-export { j as default };
+export { M as default };

package/dist/components/BlessDiff.css

@@ -0,0 +1 @@
+.bless-diff{min-width:0;max-width:100%;font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);color:var(--bless-color-text);border:var(--bless-border-width) solid var(--bless-color-border);margin:0}.bless-diff__head{justify-content:space-between;gap:var(--bless-space-3);padding:var(--bless-space-2) var(--bless-space-3);background:var(--bless-color-surface);border-bottom:var(--bless-border-width) solid var(--bless-color-border);display:flex}.bless-diff__count{gap:var(--bless-space-2);font-variant-numeric:tabular-nums;display:inline-flex}.bless-diff__plus{color:var(--bless-color-text);font-weight:600}.bless-diff__minus{color:var(--bless-color-danger-text);font-weight:600}.bless-diff__sr{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.bless-diff__scroll{overflow:auto}.bless-diff__scroll:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:-2px}.bless-diff__table{border-collapse:collapse;width:100%;font-family:var(--bless-font-mono,ui-monospace, monospace);font-size:var(--bless-text-sm)}.bless-diff .bless-diff__cols th{padding:var(--bless-space-1) var(--bless-space-3);text-align:start;font-family:var(--bless-font-sans);color:var(--bless-color-text-muted);font-weight:600}.bless-diff .bless-diff__table :is(td,th){padding:0 var(--bless-space-2);vertical-align:top;background:0 0;border:0}.bless-diff .bless-diff__table tr{background:0 0}.bless-diff__no{text-align:end;width:1%;min-width:3ch;color:var(--bless-color-text-muted);-webkit-user-select:none;user-select:none}.bless-diff__sign{-webkit-user-select:none;user-select:none;width:1%;font-weight:700}.bless-diff__text{white-space:pre}.bless-diff .bless-diff__row--add>td,.bless-diff .bless-diff__table td.bless-diff__cell--add{background:color-mix(in srgb, var(--bless-color-success) 24%, var(--bless-color-bg))}.bless-diff .bless-diff__row--del>td,.bless-diff .bless-diff__table td.bless-diff__cell--del{background:color-mix(in srgb, var(--bless-color-danger) 18%, var(--bless-color-bg))}.bless-diff .bless-diff__row--add>.bless-diff__no,.bless-diff .bless-diff__row--del>.bless-diff__no,.bless-diff .bless-diff__table td.bless-diff__cell--add+.bless-diff__no{color:var(--bless-color-text)}.bless-diff .bless-diff__table td.bless-diff__cell--empty{background:var(--bless-color-surface)}.bless-diff--split .bless-diff__text{border-inline-start:var(--bless-border-width) solid var(--bless-color-border);width:50%}.bless-diff .bless-diff__table .bless-diff__fold td{padding:var(--bless-space-1) var(--bless-space-3);background:var(--bless-color-surface);border-block:var(--bless-border-width) solid var(--bless-color-border)}.bless-diff__fold button{color:var(--bless-color-text-muted);font:inherit;font-family:var(--bless-font-sans);cursor:pointer;background:0 0;border:0;text-decoration:underline}.bless-diff__fold button:focus-visible{outline:2px solid var(--bless-color-accent)}

package/dist/components/BlessDiff.js

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

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

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    /** the old text */
+    a: string;
+    /** the new text */
+    b: string;
+    mode?: "inline" | "split";
+    /** unchanged lines kept around each change; the rest fold away. Leave out to show everything */
+    context?: number;
+    lineNumbers?: boolean;
+    labelA?: string;
+    labelB?: string;
+    label?: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
+    mode: "inline" | "split";
+    lineNumbers: boolean;
+    labelA: string;
+    labelB: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessDiff.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,148 @@
+import { diffLines as e } from "../composables/diffLines.js";
+import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, ref as l, renderList as u, toDisplayString as d } from "vue";
+//#region src/components/BlessDiff.vue?vue&type=script&setup=true&lang.ts
+var f = { class: "bless-diff__head" }, p = { class: "bless-diff__title" }, m = { class: "bless-diff__count" }, h = { class: "bless-diff__plus" }, g = { class: "bless-diff__minus" }, _ = { class: "bless-diff__sr" }, v = ["aria-label"], y = { class: "bless-diff__table" }, b = {
+	key: 0,
+	class: "bless-diff__cols"
+}, x = {
+	key: 0,
+	"aria-hidden": "true"
+}, S = { scope: "col" }, C = {
+	key: 1,
+	"aria-hidden": "true"
+}, w = { scope: "col" }, T = {
+	key: 0,
+	class: "bless-diff__fold"
+}, E = ["colspan"], D = ["onClick"], O = {
+	key: 0,
+	class: "bless-diff__no",
+	"aria-hidden": "true"
+}, k = {
+	key: 1,
+	class: "bless-diff__no",
+	"aria-hidden": "true"
+}, A = ["aria-label"], j = { class: "bless-diff__text" }, M = {
+	key: 2,
+	class: "bless-diff__row"
+}, N = {
+	key: 0,
+	class: "bless-diff__no",
+	"aria-hidden": "true"
+}, P = ["aria-label"], F = /*@__PURE__*/ o({
+	name: "BlessDiff",
+	__name: "BlessDiff",
+	props: {
+		a: {},
+		b: {},
+		mode: { default: "inline" },
+		context: {},
+		lineNumbers: {
+			type: Boolean,
+			default: !0
+		},
+		labelA: { default: "Before" },
+		labelB: { default: "After" },
+		label: { default: "Changes" }
+	},
+	setup(o) {
+		let F = o, I = n(() => e(F.a, F.b)), L = n(() => I.value.filter((e) => e.type === "add").length), R = n(() => I.value.filter((e) => e.type === "del").length), z = l(/* @__PURE__ */ new Set()), B = n(() => {
+			let e = F.context;
+			if (e == null) return I.value.map((e) => ({
+				row: e,
+				hide: !1,
+				id: -1
+			}));
+			let t = I.value.map((e) => ({
+				row: e,
+				hide: !1,
+				id: -1
+			})), n = 0, r = 0;
+			for (; n < t.length;) {
+				if (t[n].row.type !== "same") {
+					n++;
+					continue;
+				}
+				let i = n;
+				for (; i < t.length && t[i].row.type === "same";) i++;
+				let a = n === 0 ? n : n + e, o = i === t.length ? i : i - e;
+				if (o - a > 1 && !z.value.has(r)) for (let e = a; e < o; e++) t[e].hide = !0, t[e].id = r;
+				r++, n = i;
+			}
+			return t;
+		}), V = n(() => {
+			let e = [], t = /* @__PURE__ */ new Set(), n = {
+				del: [],
+				add: []
+			}, r = () => {
+				if (F.mode === "inline") for (let t of [...n.del, ...n.add]) e.push({
+					kind: "row",
+					row: t
+				});
+				else {
+					let t = Math.max(n.del.length, n.add.length);
+					for (let r = 0; r < t; r++) e.push({
+						kind: "pair",
+						left: n.del[r],
+						right: n.add[r]
+					});
+				}
+				n.del = [], n.add = [];
+			};
+			for (let { row: i, hide: a, id: o } of B.value) a ? (r(), t.has(o) || (t.add(o), e.push({
+				kind: "fold",
+				id: o,
+				count: B.value.filter((e) => e.id === o && e.hide).length
+			}))) : i.type === "del" ? n.del.push(i) : i.type === "add" ? n.add.push(i) : (r(), e.push(F.mode === "inline" ? {
+				kind: "row",
+				row: i
+			} : {
+				kind: "pair",
+				left: i,
+				right: i
+			}));
+			return r(), e;
+		}), H = {
+			same: "",
+			add: "+",
+			del: "−"
+		}, U = {
+			same: "",
+			add: "added",
+			del: "removed"
+		}, W = (e) => z.value = new Set(z.value).add(e), G = n(() => (F.mode, 4));
+		return (e, n) => (c(), i("figure", { class: s(["bless-diff", `bless-diff--${o.mode}`]) }, [a("figcaption", f, [a("span", p, d(o.label), 1), a("span", m, [
+			a("span", h, "+" + d(L.value), 1),
+			a("span", g, "−" + d(R.value), 1),
+			a("span", _, d(L.value) + " lines added, " + d(R.value) + " removed", 1)
+		])]), a("div", {
+			class: "bless-diff__scroll",
+			tabindex: "0",
+			role: "region",
+			"aria-label": o.label
+		}, [a("table", y, [o.mode === "split" ? (c(), i("thead", b, [a("tr", null, [
+			o.lineNumbers ? (c(), i("th", x)) : r("", !0),
+			a("th", S, d(o.labelA), 1),
+			o.lineNumbers ? (c(), i("th", C)) : r("", !0),
+			a("th", w, d(o.labelB), 1)
+		])])) : r("", !0), a("tbody", null, [(c(!0), i(t, null, u(V.value, (e, n) => (c(), i(t, { key: n }, [e.kind === "fold" ? (c(), i("tr", T, [a("td", { colspan: G.value }, [a("button", {
+			type: "button",
+			onClick: (t) => W(e.id)
+		}, d(e.count) + " unchanged " + d(e.count === 1 ? "line" : "lines"), 9, D)], 8, E)])) : e.kind === "row" ? (c(), i("tr", {
+			key: 1,
+			class: s(`bless-diff__row bless-diff__row--${e.row.type}`)
+		}, [
+			o.lineNumbers ? (c(), i("td", O, d(e.row.a), 1)) : r("", !0),
+			o.lineNumbers ? (c(), i("td", k, d(e.row.b), 1)) : r("", !0),
+			a("td", {
+				class: "bless-diff__sign",
+				"aria-label": U[e.row.type] || void 0
+			}, d(H[e.row.type]), 9, A),
+			a("td", j, d(e.row.text), 1)
+		], 2)) : (c(), i("tr", M, [(c(!0), i(t, null, u([e.left, e.right], (e, n) => (c(), i(t, { key: n }, [o.lineNumbers ? (c(), i("td", N, d(n ? e?.b : e?.a), 1)) : r("", !0), a("td", {
+			class: s(["bless-diff__text", e && e.type !== "same" ? `bless-diff__cell--${e.type}` : e ? "" : "bless-diff__cell--empty"]),
+			"aria-label": e && e.type !== "same" ? `${U[e.type]}: ${e.text}` : void 0
+		}, d(e?.text), 11, P)], 64))), 128))]))], 64))), 128))])])], 8, v)], 2));
+	}
+});
+//#endregion
+export { F as default };

package/dist/components/BlessDock.css

@@ -0,0 +1 @@
+.bless-dock{align-items:flex-end;gap:var(--bless-space-2);padding:var(--bless-space-2);background:var(--bless-color-surface);border:var(--bless-border-width) solid var(--bless-color-border);font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);color:var(--bless-color-text);display:inline-flex}.bless-dock--left,.bless-dock--right{flex-direction:column}.bless-dock--left{align-items:flex-start}.bless-dock--right{align-items:flex-end}.bless-dock__item{width:var(--_size);height:var(--_size);color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;place-items:center;padding:0;text-decoration:none;display:grid;position:relative}.bless-dock__item:disabled,.bless-dock__item[aria-disabled=true]{opacity:.45;cursor:not-allowed}.bless-dock__item:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-dock__icon{background:var(--bless-color-bg);border:var(--bless-border-width) solid var(--bless-color-border);width:100%;height:100%;font-size:calc(var(--_size) * .5);transform:scale(var(--_s,1));transform-origin:50% 100%;transition:transform var(--bless-duration-fast) var(--bless-ease-out);place-items:center;display:grid}.bless-dock--left .bless-dock__icon{transform-origin:0}.bless-dock--right .bless-dock__icon{transform-origin:100%}.bless-dock__item:hover .bless-dock__icon{border-color:var(--bless-color-accent)}.bless-dock__badge{top:-4px;background:var(--bless-color-badge);min-width:16px;color:var(--bless-color-on-accent);font-size:var(--bless-text-2xs);text-align:center;padding:0 4px;line-height:16px;position:absolute;inset-inline-end:-4px}.bless-dock__tip{inset-inline-start:50%;bottom:calc(100% + 6px + (var(--_s,1) - 1) * var(--_size));padding:2px var(--bless-space-2);background:var(--bless-color-text);color:var(--bless-color-bg);font-size:var(--bless-text-xs);white-space:nowrap;opacity:0;pointer-events:none;position:absolute;translate:-50%}.bless-dock--left .bless-dock__tip,.bless-dock--right .bless-dock__tip{top:50%;bottom:auto;translate:0 -50%}.bless-dock--left .bless-dock__tip{inset-inline-start:calc(100% + 6px + (var(--_s,1) - 1) * var(--_size))}.bless-dock--right .bless-dock__tip{inset-inline-start:auto;inset-inline-end:calc(100% + 6px + (var(--_s,1) - 1) * var(--_size))}.bless-dock__item:hover .bless-dock__tip,.bless-dock__item:focus-visible .bless-dock__tip{opacity:1}@media (prefers-reduced-motion:reduce){.bless-dock__icon{transition:none}}

package/dist/components/BlessDock.js

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

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

@@ -0,0 +1,55 @@
+export interface BlessDockItem {
+    id: string;
+    label: string;
+    /** a character, emoji or short text drawn big; use the `#item` slot for an image or icon */
+    icon?: string;
+    href?: string;
+    badge?: string | number;
+    disabled?: boolean;
+}
+/** Scale for an item whose centre is `distance` px from the pointer: `max` at 0, 1 beyond `radius`. */
+export declare function magnify(distance: number, radius: number, max: number): number;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
+    items: BlessDockItem[];
+    /** the screen edge it sits on: sets the direction it lays out, grows and is navigated in */
+    position?: "bottom" | "left" | "right";
+    /** px, the resting size of an icon */
+    size?: number;
+    /** how much the icon under the pointer grows; 1 turns the effect off */
+    magnification?: number;
+    /** px of reach either side of the pointer */
+    radius?: number;
+    label?: string;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (item: BlessDockItem) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    items: BlessDockItem[];
+    /** the screen edge it sits on: sets the direction it lays out, grows and is navigated in */
+    position?: "bottom" | "left" | "right";
+    /** px, the resting size of an icon */
+    size?: number;
+    /** how much the icon under the pointer grows; 1 turns the effect off */
+    magnification?: number;
+    /** px of reach either side of the pointer */
+    radius?: number;
+    label?: string;
+}> & Readonly<{
+    onSelect?: ((item: BlessDockItem) => any) | undefined;
+}>, {
+    label: string;
+    size: number;
+    position: "bottom" | "left" | "right";
+    radius: number;
+    magnification: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
+    item?: (props: {
+        item: BlessDockItem;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/BlessDock.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,100 @@
+import { reducedMotion as e } from "../composables/useMedia.js";
+import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, openBlock as d, ref as f, renderList as p, renderSlot as m, resolveDynamicComponent as h, toDisplayString as g, withCtx as _ } from "vue";
+//#region src/components/BlessDock.vue?vue&type=script&setup=true&lang.ts
+var v = ["aria-label", "aria-orientation"], y = {
+	class: "bless-dock__icon",
+	"aria-hidden": "true"
+}, b = {
+	key: 0,
+	class: "bless-dock__badge",
+	"aria-hidden": "true"
+}, x = {
+	class: "bless-dock__tip",
+	"aria-hidden": "true"
+};
+function S(e, t, n) {
+	let r = Math.abs(e);
+	return r >= t ? 1 : 1 + (n - 1) * (.5 + .5 * Math.cos(Math.PI * r / t));
+}
+var C = /*@__PURE__*/ c({
+	name: "BlessDock",
+	__name: "BlessDock",
+	props: {
+		items: {},
+		position: { default: "bottom" },
+		size: { default: 44 },
+		magnification: { default: 1.6 },
+		radius: { default: 110 },
+		label: { default: "Dock" }
+	},
+	emits: ["select"],
+	setup(c, { emit: C }) {
+		let w = c, T = C, E = n(() => w.position !== "bottom"), D = f(), O = f([]), k = f(0), A = (e) => O.value[e] ?? 1, j = () => w.magnification > 1 && !e(), M = () => Array.from(D.value?.querySelectorAll(".bless-dock__item") ?? [], (e) => {
+			let t = e.getBoundingClientRect();
+			return E.value ? t.top + t.height / 2 : t.left + t.width / 2;
+		});
+		function N(e) {
+			O.value = M().map((t) => S(t - e, w.radius, w.magnification));
+		}
+		let P = () => O.value = [];
+		function F(e) {
+			e.pointerType !== "touch" && j() && N(E.value ? e.clientY : e.clientX);
+		}
+		function I(e) {
+			let t = e.target, n = Array.from(D.value?.querySelectorAll(".bless-dock__item") ?? []).indexOf(t);
+			if (!(n < 0) && (k.value = n, j() && t.matches(":focus-visible"))) {
+				let e = t.getBoundingClientRect();
+				N(E.value ? e.top + e.height / 2 : e.left + e.width / 2);
+			}
+		}
+		function L(e) {
+			let t = Array.from(D.value?.querySelectorAll(".bless-dock__item:not(:disabled)") ?? []), n = t.indexOf(document.activeElement);
+			if (n < 0) return;
+			let [r, i] = E.value ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"], a = getComputedStyle(D.value).direction === "rtl" && !E.value ? -1 : 1, o = e.key === i ? n + a : e.key === r ? n - a : e.key === "Home" ? 0 : e.key === "End" ? t.length - 1 : null;
+			o !== null && (e.preventDefault(), t[(o + t.length) % t.length].focus());
+		}
+		return (e, n) => (d(), a("div", {
+			ref_key: "root",
+			ref: D,
+			class: l(["bless-dock", `bless-dock--${c.position}`]),
+			role: "toolbar",
+			"aria-label": c.label,
+			"aria-orientation": E.value ? "vertical" : "horizontal",
+			style: u({ "--_size": `${c.size}px` }),
+			onPointermove: F,
+			onPointerleave: P,
+			onFocusin: I,
+			onFocusout: P,
+			onKeydown: L
+		}, [(d(!0), a(t, null, p(c.items, (t, n) => (d(), r(h(t.href ? "a" : "button"), {
+			key: t.id,
+			class: "bless-dock__item",
+			href: t.href,
+			type: t.href ? void 0 : "button",
+			disabled: t.href ? void 0 : t.disabled,
+			"aria-disabled": t.href && t.disabled ? !0 : void 0,
+			"aria-label": t.label,
+			tabindex: k.value === n ? 0 : -1,
+			style: u({ "--_s": A(n) }),
+			onClick: (e) => !t.disabled && T("select", t)
+		}, {
+			default: _(() => [
+				o("span", y, [m(e.$slots, "item", { item: t }, () => [s(g(t.icon), 1)])]),
+				t.badge == null ? i("", !0) : (d(), a("span", b, g(t.badge), 1)),
+				o("span", x, g(t.label), 1)
+			]),
+			_: 2
+		}, 1032, [
+			"href",
+			"type",
+			"disabled",
+			"aria-disabled",
+			"aria-label",
+			"tabindex",
+			"style",
+			"onClick"
+		]))), 128))], 46, v));
+	}
+});
+//#endregion
+export { C as default, S as magnify };

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

@@ -19,6 +19,8 @@ type __VLS_Props = {
     editor: Editor | null | undefined;
     tools?: BlessEditorTool[];
     label?: string;
+    /** rename tools by key: `{ bold: "Tebal", h1: "Judul 1" }` */
+    labels?: Partial<Record<Exclude<BlessEditorTool, "|">, string>>;
     disabled?: boolean;
     /** min height of the writing area */
     minHeight?: string;

package/dist/components/BlessEditor.vue_vue_type_script_setup_true_lang.js

@@ -38,94 +38,95 @@ var m = ["aria-label"], h = {
 			"redo"
 		] },
 		label: { default: "Formatting" },
+		labels: {},
 		disabled: { type: Boolean },
 		minHeight: { default: "160px" }
 	},
 	setup(a) {
 		let b = l();
 		e(b);
-		let x = (e) => e.chain().focus(), S = {
+		let x = a, S = (e) => x.labels?.[e] ?? w[e].title, C = (e) => e.chain().focus(), w = {
 			bold: {
 				title: "Bold",
 				icon: "B",
-				run: (e) => x(e).toggleBold().run(),
+				run: (e) => C(e).toggleBold().run(),
 				active: (e) => e.isActive("bold")
 			},
 			italic: {
 				title: "Italic",
 				icon: "I",
-				run: (e) => x(e).toggleItalic().run(),
+				run: (e) => C(e).toggleItalic().run(),
 				active: (e) => e.isActive("italic")
 			},
 			strike: {
 				title: "Strikethrough",
 				icon: "S",
-				run: (e) => x(e).toggleStrike().run(),
+				run: (e) => C(e).toggleStrike().run(),
 				active: (e) => e.isActive("strike")
 			},
 			code: {
 				title: "Inline code",
 				icon: "‹›",
-				run: (e) => x(e).toggleCode().run(),
+				run: (e) => C(e).toggleCode().run(),
 				active: (e) => e.isActive("code")
 			},
 			h1: {
 				title: "Heading 1",
 				icon: "H1",
-				run: (e) => x(e).toggleHeading({ level: 1 }).run(),
+				run: (e) => C(e).toggleHeading({ level: 1 }).run(),
 				active: (e) => e.isActive("heading", { level: 1 })
 			},
 			h2: {
 				title: "Heading 2",
 				icon: "H2",
-				run: (e) => x(e).toggleHeading({ level: 2 }).run(),
+				run: (e) => C(e).toggleHeading({ level: 2 }).run(),
 				active: (e) => e.isActive("heading", { level: 2 })
 			},
 			h3: {
 				title: "Heading 3",
 				icon: "H3",
-				run: (e) => x(e).toggleHeading({ level: 3 }).run(),
+				run: (e) => C(e).toggleHeading({ level: 3 }).run(),
 				active: (e) => e.isActive("heading", { level: 3 })
 			},
 			bulletList: {
 				title: "Bullet list",
 				icon: "•",
-				run: (e) => x(e).toggleBulletList().run(),
+				run: (e) => C(e).toggleBulletList().run(),
 				active: (e) => e.isActive("bulletList")
 			},
 			orderedList: {
 				title: "Numbered list",
 				icon: "1.",
-				run: (e) => x(e).toggleOrderedList().run(),
+				run: (e) => C(e).toggleOrderedList().run(),
 				active: (e) => e.isActive("orderedList")
 			},
 			blockquote: {
 				title: "Quote",
 				icon: "❝",
-				run: (e) => x(e).toggleBlockquote().run(),
+				run: (e) => C(e).toggleBlockquote().run(),
 				active: (e) => e.isActive("blockquote")
 			},
 			codeBlock: {
 				title: "Code block",
 				icon: "{ }",
-				run: (e) => x(e).toggleCodeBlock().run(),
+				run: (e) => C(e).toggleCodeBlock().run(),
 				active: (e) => e.isActive("codeBlock")
 			},
 			hr: {
 				title: "Rule",
 				icon: "―",
-				run: (e) => x(e).setHorizontalRule().run()
+				run: (e) => C(e).setHorizontalRule().run()
 			},
 			undo: {
 				title: "Undo",
 				icon: "↶",
-				run: (e) => x(e).undo().run(),
+				run: (e) => C(e).undo().run(),
 				can: (e) => e.can().undo()
 			},
 			redo: {
 				title: "Redo",
 				icon: "↷",
-				run: (e) => x(e).redo().run(),
+				run: (e) => C(e).redo().run(),
 				can: (e) => e.can().redo()
 			}
 		};
@@ -142,14 +143,14 @@ var m = ["aria-label"], h = {
 			}, [d(e.$slots, "toolbar", { editor: a.editor }, () => [(c(!0), r(t, null, u(a.tools, (e, n) => (c(), r(t, { key: n }, [e === "|" ? (c(), r("span", h)) : (c(), r("button", {
 				key: 1,
 				type: "button",
-				class: o(["bless-editor__tool", { "bless-editor__tool--on": a.editor && S[e].active?.(a.editor) }]),
-				title: S[e].title,
-				"aria-label": S[e].title,
-				"aria-pressed": S[e].active ? !!(a.editor && S[e].active(a.editor)) : void 0,
-				disabled: a.disabled || !a.editor || (S[e].can ? !S[e].can(a.editor) : !1),
+				class: o(["bless-editor__tool", { "bless-editor__tool--on": a.editor && w[e].active?.(a.editor) }]),
+				title: S(e),
+				"aria-label": S(e),
+				"aria-pressed": w[e].active ? !!(a.editor && w[e].active(a.editor)) : void 0,
+				disabled: a.disabled || !a.editor || (w[e].can ? !w[e].can(a.editor) : !1),
 				onMousedown: l[0] ||= p(() => {}, ["prevent"]),
-				onClick: (t) => a.editor && S[e].run(a.editor)
-			}, [i("span", _, f(S[e].icon), 1)], 42, g))], 64))), 128))])], 8, m),
+				onClick: (t) => a.editor && w[e].run(a.editor)
+			}, [i("span", _, f(w[e].icon), 1)], 42, g))], 64))), 128))])], 8, m),
 			i("div", v, [d(e.$slots, "default")]),
 			e.$slots.footer ? (c(), r("div", y, [d(e.$slots, "footer", { editor: a.editor })])) : n("", !0)
 		], 6));

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

@@ -9,6 +9,8 @@ type __VLS_Props = {
     hint?: string;
     /** show the chosen files under the zone */
     list?: boolean;
+    /** name of a file's remove button */
+    removeLabel?: (name: string) => string;
 };
 type __VLS_ModelProps = {
     modelValue?: File[];