blessing-ui 0.1.0 → 0.3.0

package/dist/components/BlessCoachmark.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,74 @@
+import e from "./BlessButton.js";
+import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, mergeModels as l, normalizeClass as u, onMounted as d, openBlock as f, ref as p, renderSlot as m, toDisplayString as h, useId as g, useModel as _, withCtx as v, withKeys as y, withModifiers as b } from "vue";
+//#region src/components/BlessCoachmark.vue?vue&type=script&setup=true&lang.ts
+var x = ["aria-label", "aria-expanded"], S = /*@__PURE__*/ c({
+	name: "BlessCoachmark",
+	__name: "BlessCoachmark",
+	props: /*@__PURE__*/ l({
+		text: {},
+		id: {},
+		placement: { default: "top-end" },
+		dismissOnUse: {
+			type: Boolean,
+			default: !0
+		},
+		labels: {}
+	}, {
+		dismissed: {
+			type: Boolean,
+			default: !1
+		},
+		dismissedModifiers: {}
+	}),
+	emits: /*@__PURE__*/ l(["dismiss"], ["update:dismissed"]),
+	setup(c, { emit: l }) {
+		let S = c, C = _(c, "dismissed"), w = l, T = n(() => ({
+			dot: (e) => `New: ${e}`,
+			ok: "Got it",
+			...S.labels
+		})), E = n(() => S.id ? `bless-coachmark:${S.id}` : null), D = p(!1), O = p(!1), k = `${g()}-bubble`;
+		d(() => {
+			try {
+				E.value && localStorage.getItem(E.value) && (C.value = !0);
+			} catch {}
+			O.value = !0;
+		});
+		function A() {
+			if (!C.value) {
+				C.value = !0, D.value = !1;
+				try {
+					E.value && localStorage.setItem(E.value, "1");
+				} catch {}
+				w("dismiss");
+			}
+		}
+		let j = (e) => {
+			S.dismissOnUse && !e.target.closest?.(".bless-coachmark__dot, .bless-coachmark__bubble") && A();
+		};
+		return (n, l) => (f(), i("span", {
+			class: "bless-coachmark",
+			onClickCapture: j,
+			onKeydown: l[1] ||= y((e) => D.value = !1, ["esc"])
+		}, [m(n.$slots, "default"), O.value && !C.value ? (f(), i(t, { key: 0 }, [a("button", {
+			type: "button",
+			class: u(["bless-coachmark__dot", `bless-coachmark__dot--${c.placement}`]),
+			"aria-label": T.value.dot(S.text),
+			"aria-expanded": D.value,
+			"aria-controls": k,
+			onClick: l[0] ||= b((e) => D.value = !D.value, ["stop"])
+		}, null, 10, x), D.value ? (f(), i("span", {
+			key: 0,
+			id: k,
+			class: u(["bless-coachmark__bubble", `bless-coachmark__bubble--${c.placement}`]),
+			role: "status"
+		}, [o(h(S.text) + " ", 1), s(e, {
+			size: "sm",
+			onClick: A
+		}, {
+			default: v(() => [o(h(T.value.ok), 1)]),
+			_: 1
+		})], 2)) : r("", !0)], 64)) : r("", !0)], 32));
+	}
+});
+//#endregion
+export { S as default };

package/dist/components/BlessCodeBlock.css

@@ -0,0 +1 @@
+.bless-code{border:var(--bless-border-width) solid var(--bless-color-border);background:var(--bless-color-bg);min-width:0;max-width:100%;color:var(--bless-color-text);font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);margin:0;position:relative}.bless-code__head{align-items:center;gap:var(--bless-space-2);padding:0 var(--bless-space-2) 0 var(--bless-space-3);background:var(--bless-color-surface);border-bottom:var(--bless-border-width) solid var(--bless-color-border);min-height:36px;display:flex}.bless-code__spacer{flex:1}.bless-code__tabs{align-self:stretch;gap:var(--bless-space-1);margin-inline-start:calc(var(--bless-space-3) * -1);display:flex}.bless-code__tab{padding:0 var(--bless-space-3);color:var(--bless-color-text-muted);font:inherit;cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000}.bless-code__tab[aria-selected=true]{color:var(--bless-color-text);border-bottom-color:var(--bless-color-accent)}.bless-code__tab:focus-visible,.bless-code__copy:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:-2px}.bless-code__name{font-weight:600}.bless-code__lang{color:var(--bless-color-text-muted);font-size:var(--bless-text-xs);text-transform:uppercase}.bless-code__copy{padding:var(--bless-space-1) var(--bless-space-2);border:var(--bless-border-width) solid var(--bless-color-border);background:var(--bless-color-bg);color:inherit;font:inherit;font-size:var(--bless-text-xs);cursor:pointer}.bless-code__scroll{overflow:auto}.bless-code__scroll:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:-2px}.bless-code__pre{padding:var(--bless-space-3) 0;font-family:var(--bless-font-mono,ui-monospace, monospace);font-size:var(--bless-text-sm);tab-size:2;margin:0;line-height:1.6}.bless-code__pre--wrap{white-space:pre-wrap;overflow-wrap:anywhere}.bless-code__line{padding:0 var(--bless-space-3);display:block}.bless-code__line--hl{background:color-mix(in srgb, var(--bless-color-text) 8%, var(--bless-color-bg));box-shadow:inset 3px 0 0 var(--bless-color-text)}.bless-code__no{min-width:3ch;text-align:end;color:var(--bless-color-text-muted);-webkit-user-select:none;user-select:none;margin-inline-end:var(--bless-space-3);display:inline-block}.bless-code__live{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}

package/dist/components/BlessCodeBlock.js

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

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

@@ -0,0 +1,72 @@
+export interface BlessCodeFile {
+    name: string;
+    code: string;
+    lang?: string;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
+    code?: string;
+    lang?: string;
+    filename?: string;
+    /** several files as tabs; wins over `code` */
+    files?: BlessCodeFile[];
+    /** lines to mark, e.g. `"2,4-6"` or `[2, 4, 5, 6]` (1-based) */
+    lines?: string | number[];
+    lineNumbers?: boolean;
+    copy?: boolean;
+    /** wrap long lines instead of scrolling sideways */
+    wrap?: boolean;
+    label?: string;
+    labels?: Partial<{
+        copy: string;
+        copied: string;
+        copiedLive: string;
+    }>;
+} & {
+    active?: number;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    copy: (code: string) => any;
+    "update:active": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    code?: string;
+    lang?: string;
+    filename?: string;
+    /** several files as tabs; wins over `code` */
+    files?: BlessCodeFile[];
+    /** lines to mark, e.g. `"2,4-6"` or `[2, 4, 5, 6]` (1-based) */
+    lines?: string | number[];
+    lineNumbers?: boolean;
+    copy?: boolean;
+    /** wrap long lines instead of scrolling sideways */
+    wrap?: boolean;
+    label?: string;
+    labels?: Partial<{
+        copy: string;
+        copied: string;
+        copiedLive: string;
+    }>;
+} & {
+    active?: number;
+}> & Readonly<{
+    onCopy?: ((code: string) => any) | undefined;
+    "onUpdate:active"?: ((value: number) => any) | undefined;
+}>, {
+    label: string;
+    copy: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
+    code?: (props: {
+        code: string;
+        lang: string | undefined;
+        lines: {
+            n: number;
+            text: string;
+            hl: boolean;
+        }[];
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/BlessCodeBlock.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,140 @@
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, mergeModels as s, nextTick as c, normalizeClass as l, onBeforeUnmount as u, openBlock as d, ref as f, renderList as p, renderSlot as m, toDisplayString as h, unref as g, useId as _, useModel as v } from "vue";
+//#region src/components/BlessCodeBlock.vue?vue&type=script&setup=true&lang.ts
+var y = { class: "bless-code" }, b = {
+	key: 0,
+	class: "bless-code__head"
+}, x = ["aria-label"], S = [
+	"id",
+	"aria-selected",
+	"aria-controls",
+	"tabindex",
+	"onClick"
+], C = {
+	key: 1,
+	class: "bless-code__name"
+}, w = {
+	key: 2,
+	class: "bless-code__lang"
+}, T = [
+	"id",
+	"role",
+	"aria-labelledby",
+	"aria-label"
+], E = {
+	key: 0,
+	class: "bless-code__no",
+	"aria-hidden": "true"
+}, D = {
+	class: "bless-code__live",
+	"aria-live": "polite"
+}, O = /*@__PURE__*/ o({
+	name: "BlessCodeBlock",
+	__name: "BlessCodeBlock",
+	props: /*@__PURE__*/ s({
+		code: {},
+		lang: {},
+		filename: {},
+		files: {},
+		lines: {},
+		lineNumbers: { type: Boolean },
+		copy: {
+			type: Boolean,
+			default: !0
+		},
+		wrap: { type: Boolean },
+		label: { default: "Code" },
+		labels: {}
+	}, {
+		active: { default: 0 },
+		activeModifiers: {}
+	}),
+	emits: /*@__PURE__*/ s(["copy"], ["update:active"]),
+	setup(o, { emit: s }) {
+		let O = o, k = t(() => ({
+			copy: "Copy",
+			copied: "Copied",
+			copiedLive: "Copied to clipboard",
+			...O.labels
+		})), A = v(o, "active"), j = s, M = _(), N = t(() => (O.files?.length ? O.files[Math.min(A.value, O.files.length - 1)] : void 0) ?? {
+			name: O.filename ?? "",
+			code: O.code ?? "",
+			lang: O.lang
+		}), P = t(() => N.value.lang ?? O.lang), F = t(() => {
+			let e = /* @__PURE__ */ new Set();
+			if (Array.isArray(O.lines)) O.lines.forEach((t) => e.add(t));
+			else for (let t of (O.lines ?? "").split(",")) {
+				let [n, r] = t.split("-").map((e) => parseInt(e, 10));
+				if (n) for (let t = n; t <= (r ?? n); t++) e.add(t);
+			}
+			return e;
+		}), I = t(() => N.value.code.replace(/\n$/, "").split("\n").map((e, t) => ({
+			n: t + 1,
+			text: e,
+			hl: F.value.has(t + 1)
+		}))), L = f();
+		function R(e) {
+			let t = O.files?.length ?? 0, n = e.key === "ArrowRight" ? A.value + 1 : e.key === "ArrowLeft" ? A.value - 1 : e.key === "Home" ? 0 : e.key === "End" ? t - 1 : null;
+			n != null && (e.preventDefault(), A.value = (n + t) % t, c(() => L.value?.querySelectorAll("[role=\"tab\"]")[A.value]?.focus()));
+		}
+		let z = f(!1), B;
+		async function V() {
+			let e = N.value.code;
+			try {
+				await navigator.clipboard.writeText(e);
+			} catch {
+				let t = document.createElement("textarea");
+				t.value = e, t.style.position = "fixed", t.style.opacity = "0", document.body.append(t), t.select(), document.execCommand("copy"), t.remove();
+			}
+			j("copy", e), z.value = !0, clearTimeout(B), B = setTimeout(() => z.value = !1, 2e3);
+		}
+		return u(() => clearTimeout(B)), (t, s) => (d(), r("figure", y, [
+			o.files?.length || o.filename || P.value || o.copy ? (d(), r("figcaption", b, [
+				o.files?.length ? (d(), r("div", {
+					key: 0,
+					ref_key: "tabs",
+					ref: L,
+					class: "bless-code__tabs",
+					role: "tablist",
+					"aria-label": o.label
+				}, [(d(!0), r(e, null, p(o.files, (e, t) => (d(), r("button", {
+					id: `${g(M)}-t${t}`,
+					key: e.name,
+					type: "button",
+					role: "tab",
+					class: "bless-code__tab",
+					"aria-selected": t === A.value,
+					"aria-controls": `${g(M)}-p`,
+					tabindex: t === A.value ? 0 : -1,
+					onClick: (e) => A.value = t,
+					onKeydown: R
+				}, h(e.name), 41, S))), 128))], 8, x)) : o.filename ? (d(), r("span", C, h(o.filename), 1)) : n("", !0),
+				s[0] ||= i("span", { class: "bless-code__spacer" }, null, -1),
+				P.value ? (d(), r("span", w, h(P.value), 1)) : n("", !0),
+				o.copy ? (d(), r("button", {
+					key: 3,
+					type: "button",
+					class: "bless-code__copy",
+					onClick: V
+				}, h(z.value ? k.value.copied : k.value.copy), 1)) : n("", !0)
+			])) : n("", !0),
+			i("div", {
+				id: `${g(M)}-p`,
+				class: "bless-code__scroll",
+				tabindex: "0",
+				role: o.files?.length ? "tabpanel" : "region",
+				"aria-labelledby": o.files?.length ? `${g(M)}-t${A.value}` : void 0,
+				"aria-label": o.files?.length ? void 0 : N.value.name || o.label
+			}, [m(t.$slots, "code", {
+				code: N.value.code,
+				lang: P.value,
+				lines: I.value
+			}, () => [i("pre", { class: l(["bless-code__pre", { "bless-code__pre--wrap": o.wrap }]) }, [i("code", null, [(d(!0), r(e, null, p(I.value, (e) => (d(), r("span", {
+				key: e.n,
+				class: l(["bless-code__line", { "bless-code__line--hl": e.hl }])
+			}, [o.lineNumbers ? (d(), r("span", E, h(e.n), 1)) : n("", !0), a(h(e.text) + "\n", 1)], 2))), 128))])], 2)])], 8, T),
+			i("span", D, h(z.value ? k.value.copiedLive : ""), 1)
+		]));
+	}
+});
+//#endregion
+export { O as default };

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

@@ -13,6 +13,8 @@ declare const __VLS_export: <T extends string | number>(__VLS_props: NonNullable
         size?: "sm" | "md" | "lg";
         /** accessible name when there is no <label for> */
         label?: string;
+        /** name of a chip's remove button, from the option's label */
+        removeLabel?: (name: string) => string;
     } & {
         modelValue?: T | T[] | undefined;
     }) & {

package/dist/components/BlessCombobox.vue_vue_type_script_setup_true_lang.js

@@ -38,7 +38,8 @@ var O = ["aria-label", "onClick"], ee = [
 		invalid: { type: Boolean },
 		emptyText: { default: "No results." },
 		size: { default: "md" },
-		label: {}
+		label: {},
+		removeLabel: {}
 	}, {
 		modelValue: {},
 		modelModifiers: {}
@@ -105,7 +106,7 @@ var O = ["aria-label", "onClick"], ee = [
 				default: T(() => [u(b(q(t)) + " ", 1), l("button", {
 					type: "button",
 					class: "bless-combobox__chip-x",
-					"aria-label": `Remove ${q(t)}`,
+					"aria-label": (d.removeLabel ?? ((e) => `Remove ${e}`))(q(t)),
 					tabindex: "-1",
 					onClick: D((e) => $(t), ["stop"])
 				}, " × ", 8, O)]),

package/dist/components/BlessCommand.css

@@ -1 +1 @@
-.bless-command .bless-modal__body{padding:0}.bless-command .bless-modal__close{display:none}.bless-command .bless-modal__panel{--_w:560px}.bless-command--inline{border:var(--bless-border-width) solid var(--bless-color-border);background:var(--bless-color-bg)}.bless-command__box{border-radius:var(--bless-radius);font-family:var(--bless-font-sans);color:var(--bless-color-text);flex-direction:column;display:flex}.bless-command__search{border-radius:var(--bless-radius-plate);align-items:center;gap:var(--bless-space-3);padding:var(--bless-space-3) var(--bless-space-4);border-bottom:var(--bless-border-width) solid var(--bless-color-border);display:flex}.bless-command__icon{font-size:var(--bless-text-lg);color:var(--bless-color-text-muted);transform:skewX(var(--bless-skew-counter)) rotate(-45deg)}.bless-command__input{min-width:0;font:inherit;font-size:var(--bless-text-md);color:inherit;background:0 0;border:0;outline:0;flex:1}.bless-command__input::placeholder{color:var(--bless-color-text-muted)}.bless-command__list{max-height:320px;padding:var(--bless-space-2) 0;scrollbar-width:thin;overflow-y:auto}.bless-command__empty:empty{display:none}.bless-command__empty{padding:var(--bless-space-6);text-align:center;font-size:var(--bless-text-sm);color:var(--bless-color-text-muted);margin:0}.bless-command__group{padding:var(--bless-space-2) var(--bless-space-4) var(--bless-space-1);font-size:var(--bless-text-2xs);font-weight:var(--bless-font-weight-bold);letter-spacing:var(--bless-tracking-wider);text-transform:uppercase;color:var(--bless-color-text-muted)}.bless-command__item{align-items:center;gap:var(--bless-space-3);padding:var(--bless-space-2) var(--bless-space-4);font-size:var(--bless-text-sm);cursor:pointer;display:flex}.bless-command__item--active{background:var(--bless-color-surface)}.bless-command__item[aria-disabled=true]{opacity:.4;cursor:not-allowed}.bless-command__mark{text-align:center;flex:none;width:1.2em}.bless-command__label{flex:1}.bless-command__footer{gap:var(--bless-space-4);padding:var(--bless-space-2) var(--bless-space-4);border-top:var(--bless-border-width) solid var(--bless-color-border);font-size:var(--bless-text-xs);color:var(--bless-color-text-muted);display:flex}.bless-command__search{transform:skewX(var(--bless-skew))}.bless-command__search>:not(.bless-skew,.bless-chip,.bless-badge){transform:skewX(var(--bless-skew-counter))}
+.bless-command .bless-modal__body{padding:0}.bless-command .bless-modal__close{display:none}.bless-command .bless-modal__panel{--_w:560px}.bless-command--inline{border:var(--bless-border-width) solid var(--bless-color-border);background:var(--bless-color-bg)}.bless-command__box{border-radius:var(--bless-radius);font-family:var(--bless-font-sans);color:var(--bless-color-text);flex-direction:column;display:flex}.bless-command__search{border-radius:var(--bless-radius-plate);align-items:center;gap:var(--bless-space-3);padding:var(--bless-space-3) var(--bless-space-4);border-bottom:var(--bless-border-width) solid var(--bless-color-border);display:flex}.bless-command__icon{font-size:var(--bless-text-lg);color:var(--bless-color-text-muted);transform:skewX(var(--bless-skew-counter)) rotate(-45deg)}.bless-command__input{min-width:0;font:inherit;font-size:var(--bless-text-md);color:inherit;background:0 0;border:0;outline:0;flex:1}.bless-command__input::placeholder{color:var(--bless-color-text-muted)}.bless-command__list{max-height:320px;padding:var(--bless-space-2) 0;scrollbar-width:thin;overflow-y:auto}.bless-command__empty:empty{display:none}.bless-command__empty{padding:var(--bless-space-6);text-align:center;font-size:var(--bless-text-sm);color:var(--bless-color-text-muted);margin:0}.bless-command__scope{padding:0 var(--bless-space-2);background:var(--bless-color-accent);color:var(--bless-color-on-accent);font:inherit;font-size:var(--bless-text-xs);cursor:pointer;border:0;flex:none}.bless-command__scope:focus-visible{outline:2px solid var(--bless-color-text);outline-offset:2px}.bless-command__hint{padding:var(--bless-space-1) var(--bless-space-3);color:var(--bless-color-text-muted);font-size:var(--bless-text-xs);margin:0}.bless-command__group{padding:var(--bless-space-2) var(--bless-space-4) var(--bless-space-1);font-size:var(--bless-text-2xs);font-weight:var(--bless-font-weight-bold);letter-spacing:var(--bless-tracking-wider);text-transform:uppercase;color:var(--bless-color-text-muted)}.bless-command__item{align-items:center;gap:var(--bless-space-3);padding:var(--bless-space-2) var(--bless-space-4);font-size:var(--bless-text-sm);cursor:pointer;display:flex}.bless-command__item--active{background:var(--bless-color-surface)}.bless-command__item[aria-disabled=true]{opacity:.4;cursor:not-allowed}.bless-command__mark{text-align:center;flex:none;width:1.2em}.bless-command__label{flex:1}.bless-command__footer{gap:var(--bless-space-4);padding:var(--bless-space-2) var(--bless-space-4);border-top:var(--bless-border-width) solid var(--bless-color-border);font-size:var(--bless-text-xs);color:var(--bless-color-text-muted);display:flex}.bless-command__search{transform:skewX(var(--bless-skew))}.bless-command__search>:not(.bless-skew,.bless-chip,.bless-badge){transform:skewX(var(--bless-skew-counter))}

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

@@ -1,3 +1,11 @@
+export interface BlessCommandScope {
+    /** the character that starts it when typed first: `@`, `#`, `>` */
+    key: string;
+    /** the `group` of the items it searches */
+    group: string;
+    /** what it is called in the chip and the hint; defaults to the group */
+    label?: string;
+}
 export interface BlessCommandItem {
     label: string;
     value: string;
@@ -18,9 +26,24 @@ type __VLS_Props = {
     /** render inline instead of inside a modal */
     inline?: boolean;
     filter?: (item: BlessCommandItem, query: string) => boolean;
+    /** prefixes that narrow the search to one group: `[{ key: "@", group: "People" }]` */
+    scopes?: BlessCommandScope[];
+    /** put the items chosen before at the top while the search is empty */
+    recent?: boolean;
+    recentLimit?: number;
+    /** keep the history in localStorage under this key (read after mount) */
+    persist?: string;
+    labels?: Partial<{
+        recent: string;
+        scope: (label: string) => string;
+        clearScope: string;
+        scopeHint: (parts: string[]) => string;
+    }>;
 };
 type __VLS_ModelProps = {
     "open"?: boolean;
+    /** values of the items chosen so far, most recent first */
+    "history"?: string[];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare var __VLS_14: {
@@ -34,14 +57,17 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     select: (item: BlessCommandItem) => any;
     "update:open": (value: boolean) => any;
+    "update:history": (value: string[]) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((item: BlessCommandItem) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:history"?: ((value: string[]) => any) | undefined;
 }>, {
     label: string;
     placeholder: string;
     emptyText: string;
     hotkey: boolean;
+    recentLimit: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;