blessing-ui 0.1.0

package/dist/components/BlessPickList.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,120 @@
+import e from "./BlessButton.js";
+import t from "./BlessListbox.js";
+import { createElementBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, mergeModels as o, nextTick as s, openBlock as c, ref as l, toDisplayString as u, useModel as d, withCtx as f } from "vue";
+//#region src/components/BlessPickList.vue?vue&type=script&setup=true&lang.ts
+var p = { class: "bless-picklist__col" }, m = { class: "bless-picklist__title" }, h = { class: "bless-picklist__btns" }, g = { class: "bless-picklist__col" }, _ = { class: "bless-picklist__title" }, v = {
+	class: "bless-picklist__live",
+	"aria-live": "polite"
+}, y = /*@__PURE__*/ a({
+	name: "BlessPickList",
+	__name: "BlessPickList",
+	props: /*@__PURE__*/ o({
+		sourceLabel: { default: "Available" },
+		targetLabel: { default: "Selected" },
+		rows: { default: 6 }
+	}, {
+		source: { default: () => [] },
+		sourceModifiers: {},
+		target: { default: () => [] },
+		targetModifiers: {}
+	}),
+	emits: ["update:source", "update:target"],
+	setup(a) {
+		let o = a, y = d(a, "source"), b = d(a, "target"), x = l([]), S = l([]), C = l(), w = l("");
+		function T(e, t) {
+			let [n, r] = e === "source" ? [y, b] : [b, y], i = n.value.filter((e) => t.includes(e.value));
+			n.value = n.value.filter((e) => !t.includes(e.value)), r.value = [...r.value, ...i], x.value = [], S.value = [];
+			let a = e === "source" ? o.targetLabel : o.sourceLabel;
+			w.value = `Moved ${i.length} to ${a}`, s(() => C.value?.querySelectorAll("[role=listbox]")[+(e === "source")]?.focus());
+		}
+		return (o, s) => (c(), n("div", {
+			ref_key: "root",
+			ref: C,
+			class: "bless-picklist"
+		}, [
+			r("div", p, [r("span", m, u(a.sourceLabel) + " · " + u(y.value.length), 1), i(t, {
+				modelValue: x.value,
+				"onUpdate:modelValue": s[0] ||= (e) => x.value = e,
+				options: y.value,
+				multiple: "",
+				rows: a.rows,
+				label: a.sourceLabel
+			}, null, 8, [
+				"modelValue",
+				"options",
+				"rows",
+				"label"
+			])]),
+			r("div", h, [
+				i(e, {
+					size: "sm",
+					variant: "outline",
+					disabled: !x.value.length,
+					"aria-label": `Move selected to ${a.targetLabel}`,
+					onClick: s[1] ||= (e) => T("source", x.value)
+				}, {
+					default: f(() => [...s[6] ||= [r("span", {
+						class: "bless-picklist__arrow",
+						"aria-hidden": "true"
+					}, "›", -1)]]),
+					_: 1
+				}, 8, ["disabled", "aria-label"]),
+				i(e, {
+					size: "sm",
+					variant: "outline",
+					disabled: !y.value.length,
+					"aria-label": `Move all to ${a.targetLabel}`,
+					onClick: s[2] ||= (e) => T("source", y.value.map((e) => e.value))
+				}, {
+					default: f(() => [...s[7] ||= [r("span", {
+						class: "bless-picklist__arrow",
+						"aria-hidden": "true"
+					}, "»", -1)]]),
+					_: 1
+				}, 8, ["disabled", "aria-label"]),
+				i(e, {
+					size: "sm",
+					variant: "outline",
+					disabled: !S.value.length,
+					"aria-label": `Move selected to ${a.sourceLabel}`,
+					onClick: s[3] ||= (e) => T("target", S.value)
+				}, {
+					default: f(() => [...s[8] ||= [r("span", {
+						class: "bless-picklist__arrow",
+						"aria-hidden": "true"
+					}, "‹", -1)]]),
+					_: 1
+				}, 8, ["disabled", "aria-label"]),
+				i(e, {
+					size: "sm",
+					variant: "outline",
+					disabled: !b.value.length,
+					"aria-label": `Move all to ${a.sourceLabel}`,
+					onClick: s[4] ||= (e) => T("target", b.value.map((e) => e.value))
+				}, {
+					default: f(() => [...s[9] ||= [r("span", {
+						class: "bless-picklist__arrow",
+						"aria-hidden": "true"
+					}, "«", -1)]]),
+					_: 1
+				}, 8, ["disabled", "aria-label"])
+			]),
+			r("div", g, [r("span", _, u(a.targetLabel) + " · " + u(b.value.length), 1), i(t, {
+				modelValue: S.value,
+				"onUpdate:modelValue": s[5] ||= (e) => S.value = e,
+				options: b.value,
+				multiple: "",
+				rows: a.rows,
+				label: a.targetLabel
+			}, null, 8, [
+				"modelValue",
+				"options",
+				"rows",
+				"label"
+			])]),
+			r("span", v, u(w.value), 1)
+		], 512));
+	}
+});
+//#endregion
+export { y as default };

package/dist/components/BlessPopover.css

@@ -0,0 +1 @@
+.bless-popover__anchor{display:inline-flex}.bless-popover{border-radius:var(--bless-radius);inset:unset;padding:var(--bless-space-4);border:var(--bless-border-width) solid var(--bless-color-border);background:var(--bless-color-bg);color:var(--bless-color-text);box-shadow:var(--bless-shadow-plate);font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);line-height:var(--bless-leading-normal);max-width:min(320px,100vw - 16px);margin:0;position:fixed;overflow:visible}.bless-popover:popover-open{animation:bless-pop-in var(--bless-duration-base) var(--bless-ease-out)}.bless-popover__title{margin-bottom:var(--bless-space-2);font-size:var(--bless-text-xs);font-weight:var(--bless-font-weight-bold);letter-spacing:var(--bless-tracking-wider);text-transform:uppercase;display:block}.bless-popover:before{content:"";background:var(--bless-color-accent);transform:skewX(var(--bless-skew));position:absolute}.bless-popover--bottom:before{width:32px;height:3px;top:-1px;left:12px}.bless-popover--top:before{width:32px;height:3px;bottom:-1px;left:12px}.bless-popover--right:before{width:3px;height:32px;top:12px;left:-1px;transform:none}.bless-popover--left:before{width:3px;height:32px;top:12px;right:-1px;transform:none}@keyframes bless-pop-in{0%{opacity:0}}@media (prefers-reduced-motion:reduce){.bless-popover:popover-open{animation:none}}.bless-popover--arrow.bless-popover--bottom:before,.bless-popover--arrow.bless-popover--top:before{left:calc(var(--_ax) - 16px)}.bless-popover--arrow.bless-popover--left:before,.bless-popover--arrow.bless-popover--right:before{top:calc(var(--_ay) - 16px)}

package/dist/components/BlessPopover.js

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

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

@@ -0,0 +1,46 @@
+import { Placement } from '../composables/useFloating';
+type __VLS_Props = {
+    placement?: Placement;
+    offset?: number;
+    /** trigger interaction */
+    trigger?: "click" | "hover" | "manual";
+    openDelay?: number;
+    closeDelay?: number;
+    /** no light dismiss: only Esc or your own control closes it */
+    modal?: boolean;
+    title?: string;
+    /** the accent edge slides along to point at the trigger */
+    arrow?: boolean;
+};
+type __VLS_ModelProps = {
+    "open"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {
+    open: boolean;
+}, __VLS_3: {
+    close: () => boolean;
+};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    placement: Placement;
+    trigger: "click" | "hover" | "manual";
+    openDelay: number;
+    closeDelay: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/BlessPopover.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,84 @@
+import { useFloating as e } from "../composables/useFloating.js";
+import { Fragment as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, mergeModels as o, mergeProps as s, nextTick as c, onMounted as l, openBlock as u, ref as d, renderSlot as f, toDisplayString as p, unref as m, useId as h, useModel as g, watch as _, withKeys as v } from "vue";
+//#region src/components/BlessPopover.vue?vue&type=script&setup=true&lang.ts
+var y = [
+	"id",
+	"popover",
+	"aria-label"
+], b = {
+	key: 0,
+	class: "bless-popover__title"
+}, x = /*@__PURE__*/ a({
+	name: "BlessPopover",
+	__name: "BlessPopover",
+	props: /*@__PURE__*/ o({
+		placement: { default: "bottom" },
+		offset: {},
+		trigger: { default: "click" },
+		openDelay: { default: 300 },
+		closeDelay: { default: 200 },
+		modal: { type: Boolean },
+		title: {},
+		arrow: { type: Boolean }
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: ["update:open"],
+	setup(a) {
+		let o = a, x = g(a, "open"), S = h(), C = d(), w = d(), { x: T, y: E, side: D, arrowX: O, arrowY: k } = e(C, w, x, () => ({
+			placement: o.placement,
+			offset: o.arrow ? Math.max(o.offset ?? 8, 10) : o.offset,
+			arrow: o.arrow ? 6 : 0
+		}));
+		function A(e) {
+			let t = w.value;
+			t && typeof t.showPopover == "function" && (e && !t.matches(":popover-open") ? t.showPopover() : !e && t.matches(":popover-open") && t.hidePopover());
+		}
+		_(x, (e) => c(() => A(e)), { immediate: !0 });
+		let j, M = (e, t) => {
+			clearTimeout(j), j = setTimeout(() => x.value = e, t);
+		}, N = {
+			onMouseenter: () => o.trigger === "hover" && M(!0, o.openDelay),
+			onMouseleave: () => o.trigger === "hover" && M(!1, o.closeDelay),
+			onFocusin: () => o.trigger === "hover" && M(!0, 0),
+			onFocusout: () => o.trigger === "hover" && M(!1, o.closeDelay)
+		};
+		function P() {
+			let e = C.value?.firstElementChild;
+			o.trigger === "click" && e?.matches("button, a[href], [role=button]") && (e.setAttribute("aria-haspopup", "dialog"), e.setAttribute("aria-controls", S), e.setAttribute("aria-expanded", String(x.value)));
+		}
+		l(P), _(x, () => c(P));
+		function F(e) {
+			let t = e.newState === "open";
+			!t && w.value?.contains(document.activeElement) && (C.value?.firstElementChild)?.focus?.(), x.value = t;
+		}
+		return (e, o) => (u(), r(t, null, [i("span", s({
+			ref_key: "anchor",
+			ref: C,
+			class: "bless-popover__anchor"
+		}, N, { onClick: o[0] ||= (e) => a.trigger === "click" && (x.value = !x.value) }), [f(e.$slots, "trigger", { open: x.value })], 16), i("div", s({
+			ref_key: "panel",
+			ref: w,
+			id: m(S),
+			popover: a.modal ? "manual" : "auto",
+			class: ["bless-popover", [`bless-popover--${m(D)}`, { "bless-popover--arrow": a.arrow }]],
+			style: {
+				left: `${m(T)}px`,
+				top: `${m(E)}px`,
+				"--_ax": `${m(O)}px`,
+				"--_ay": `${m(k)}px`
+			},
+			role: "dialog",
+			"aria-label": a.title
+		}, N, {
+			onToggle: F,
+			onKeydown: o[1] ||= v((e) => a.modal && (e.preventDefault(), x.value = !1), ["esc"])
+		}), [a.title ? (u(), r("strong", b, p(a.title), 1)) : n("", !0), f(e.$slots, "default", { close: () => x.value = !1 })], 16, y)], 64));
+	}
+});
+//#endregion
+export { x as default };

package/dist/components/BlessProgress.css

@@ -0,0 +1 @@
+.bless-progress{--_c:var(--bless-color-accent);--_h:6px;font-family:var(--bless-font-sans);color:var(--bless-color-text);display:block}.bless-progress--text{--_c:var(--bless-color-text)}.bless-progress--danger{--_c:var(--bless-color-danger)}.bless-progress--success{--_c:var(--bless-color-success)}.bless-progress--warning{--_c:var(--bless-color-warning)}.bless-progress--sm{--_h:3px}.bless-progress--lg{--_h:12px}.bless-progress__head{margin-bottom:var(--bless-space-2);justify-content:space-between;display:flex}.bless-progress__label{font-size:var(--bless-text-sm);font-weight:var(--bless-font-weight-bold);letter-spacing:var(--bless-tracking-wide);text-transform:uppercase}.bless-progress__value{font-size:var(--bless-text-sm);font-weight:var(--bless-font-weight-bold);font-variant-numeric:tabular-nums;color:var(--bless-color-text);margin-inline-start:auto}.bless-progress__track{border-radius:var(--bless-radius);height:var(--_h);background:var(--bless-color-surface);transform:skewX(var(--bless-skew));position:relative;overflow:hidden}.bless-progress__fill{background:var(--_c);min-width:0;height:100%;transition:width var(--bless-duration-slow) var(--bless-ease-out)}.bless-progress--indeterminate .bless-progress__fill{width:40%;animation:bless-progress-slide 1.2s var(--bless-ease-in-out) infinite}.bless-progress--done .bless-progress__track{overflow:visible}.bless-progress--done .bless-progress__fill{min-width:calc(100% + var(--bless-space-6));transform:skewX(var(--bless-lean));transform-origin:0 100%;transition:width var(--bless-duration-slow) var(--bless-ease-out), min-width var(--bless-duration-slow) var(--bless-ease-out), transform var(--bless-duration-slow) var(--bless-ease-out)}@keyframes bless-progress-slide{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media (prefers-reduced-motion:reduce){.bless-progress--indeterminate .bless-progress__fill{opacity:.4;width:100%;animation:none}}

package/dist/components/BlessProgress.js

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

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

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    /** omit for indeterminate */
+    value?: number;
+    max?: number;
+    label?: string;
+    showValue?: boolean;
+    color?: "accent" | "text" | "danger" | "success" | "warning";
+    size?: "sm" | "md" | "lg";
+    /** text for showValue; default is the percentage */
+    format?: (value: number, max: number) => string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    color: "accent" | "text" | "danger" | "success" | "warning";
+    size: "sm" | "md" | "lg";
+    max: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessProgress.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,53 @@
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, normalizeStyle as o, openBlock as s, toDisplayString as c } from "vue";
+//#region src/components/BlessProgress.vue?vue&type=script&setup=true&lang.ts
+var l = {
+	key: 0,
+	class: "bless-progress__head"
+}, u = {
+	key: 0,
+	class: "bless-progress__label"
+}, d = {
+	key: 1,
+	class: "bless-progress__value"
+}, f = [
+	"aria-label",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-valuetext"
+], p = /*@__PURE__*/ i({
+	name: "BlessProgress",
+	__name: "BlessProgress",
+	props: {
+		value: {},
+		max: { default: 100 },
+		label: {},
+		showValue: { type: Boolean },
+		color: { default: "accent" },
+		size: { default: "md" },
+		format: {}
+	},
+	setup(i) {
+		let p = i, m = e(() => p.value === void 0 ? void 0 : Math.min(100, Math.max(0, p.value / p.max * 100)));
+		return (e, p) => (s(), n("div", { class: a(["bless-progress", [
+			`bless-progress--${i.color}`,
+			`bless-progress--${i.size}`,
+			{
+				"bless-progress--indeterminate": m.value === void 0,
+				"bless-progress--done": m.value !== void 0 && m.value >= 100
+			}
+		]]) }, [i.label || i.showValue ? (s(), n("div", l, [i.label ? (s(), n("span", u, c(i.label), 1)) : t("", !0), i.showValue && m.value !== void 0 ? (s(), n("span", d, c(i.format ? i.format(i.value, i.max) : `${Math.round(m.value)}%`), 1)) : t("", !0)])) : t("", !0), r("div", {
+			class: "bless-progress__track",
+			role: "progressbar",
+			"aria-label": i.label ?? "Progress",
+			"aria-valuemin": 0,
+			"aria-valuemax": i.max,
+			"aria-valuenow": i.value,
+			"aria-valuetext": i.format && i.value !== void 0 ? i.format(i.value, i.max) : void 0
+		}, [r("div", {
+			class: "bless-progress__fill",
+			style: o(m.value === void 0 ? void 0 : { width: `${m.value}%` })
+		}, null, 4)], 8, f)], 2));
+	}
+});
+//#endregion
+export { p as default };

package/dist/components/BlessPullToRefresh.css

@@ -0,0 +1 @@
+.bless-ptr__sr{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.bless-ptr{touch-action:pan-x pan-down;position:relative;overflow:hidden}.bless-ptr__indicator{border-radius:var(--bless-radius-petal);top:0;height:var(--_p);color:var(--bless-color-text-muted);place-items:center;display:grid;position:absolute;inset-inline:0;overflow:hidden}.bless-ptr__arrow{transition:transform var(--bless-duration-base) var(--bless-ease-out);display:inline-block}.bless-ptr__indicator--ready{color:var(--bless-color-accent-text)}.bless-ptr__indicator--ready .bless-ptr__arrow{transform:rotate(180deg)}.bless-ptr__content{transform:translateY(var(--_p));transition:transform var(--bless-duration-base) var(--bless-ease-out)}

package/dist/components/BlessPullToRefresh.js

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

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

@@ -0,0 +1,38 @@
+type __VLS_Props = {
+    /** px of pull that triggers a refresh */
+    threshold?: number;
+    /** max visual travel */
+    max?: number;
+    disabled?: boolean;
+    /** scroll container to check; default = the wrapper itself, falling back to window */
+    scrollTarget?: HTMLElement | null;
+    /** announced while refreshing */
+    refreshingLabel?: string;
+};
+declare var __VLS_1: {
+    ready: boolean;
+    busy: boolean;
+    pull: number;
+}, __VLS_8: {};
+type __VLS_Slots = {} & {
+    indicator?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    refresh: (done: () => void) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRefresh?: ((done: () => void) => any) | undefined;
+}>, {
+    max: number;
+    threshold: number;
+    refreshingLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/BlessPullToRefresh.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,55 @@
+import e from "./BlessSpinner.js";
+import { usePan as t } from "../composables/useGesture.js";
+import { computed as n, createBlock as r, createElementBlock as i, createElementVNode as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, openBlock as l, ref as u, renderSlot as d, toDisplayString as f } from "vue";
+//#region src/components/BlessPullToRefresh.vue?vue&type=script&setup=true&lang.ts
+var p = { class: "bless-ptr__sr" }, m = {
+	key: 1,
+	class: "bless-ptr__arrow",
+	"aria-hidden": "true"
+}, h = { class: "bless-ptr__content" }, g = /*@__PURE__*/ o({
+	name: "BlessPullToRefresh",
+	__name: "BlessPullToRefresh",
+	props: {
+		threshold: { default: 64 },
+		max: { default: 96 },
+		disabled: { type: Boolean },
+		scrollTarget: {},
+		refreshingLabel: { default: "Refreshing" }
+	},
+	emits: ["refresh"],
+	setup(o, { emit: g }) {
+		let _ = o, v = g, y = u(), b = u(0), x = u(!1), S = !1, C = () => {
+			let e = _.scrollTarget ?? y.value;
+			return (e && e.scrollHeight > e.clientHeight ? e.scrollTop : window.scrollY) <= 0;
+		};
+		t(y, (e) => {
+			if (!(_.disabled || x.value)) {
+				if (e.phase === "start") S = C();
+				else if (e.phase === "move") {
+					if (!S || e.dy <= 0) return void (b.value = 0);
+					b.value = Math.min(_.max, e.dy * .5), b.value > 8 && e.event.preventDefault();
+				} else S && b.value >= _.threshold ? (x.value = !0, b.value = _.threshold * .75, v("refresh", () => (x.value = !1, b.value = 0))) : b.value = 0, S = !1;
+			}
+		});
+		let w = n(() => b.value >= _.threshold);
+		return (t, n) => (l(), i("div", {
+			ref_key: "root",
+			ref: y,
+			class: s(["bless-ptr", { "bless-ptr--busy": x.value }]),
+			style: c({ "--_p": `${b.value}px` })
+		}, [a("div", {
+			class: s(["bless-ptr__indicator", { "bless-ptr__indicator--ready": w.value }]),
+			role: "status"
+		}, [a("span", p, f(x.value ? o.refreshingLabel : ""), 1), d(t.$slots, "indicator", {
+			ready: w.value,
+			busy: x.value,
+			pull: b.value
+		}, () => [x.value ? (l(), r(e, {
+			key: 0,
+			size: "sm",
+			label: ""
+		})) : (l(), i("span", m, "↓"))])], 2), a("div", h, [d(t.$slots, "default")])], 6));
+	}
+});
+//#endregion
+export { g as default };

package/dist/components/BlessQrCode.css

@@ -0,0 +1 @@
+.bless-qr{color:var(--bless-color-text);line-height:0;display:inline-block}.bless-qr__svg{display:block}.bless-qr--frame{border-radius:var(--bless-radius);isolation:isolate;position:relative}.bless-qr--frame:before{content:"";background:var(--bless-color-text);transform:translate(8px, 8px) skewX(var(--bless-skew));z-index:-1;position:absolute;inset:0}.bless-qr--frame .bless-qr__svg{position:relative}

package/dist/components/BlessQrCode.js

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

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

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    /** boolean module grid, e.g. `encode(text).data` from uqr */
+    matrix: boolean[][];
+    /** what the code encodes — used for the accessible label */
+    value?: string;
+    size?: number;
+    /** quiet zone in modules */
+    border?: number;
+    /** module colour — dark on light scans best, so this ignores the theme by default */
+    color?: string;
+    background?: string;
+    /** skewed ink plate behind the tile */
+    frame?: boolean;
+    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<{}>, {
+    color: string;
+    size: number;
+    background: string;
+    frame: boolean;
+    border: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessQrCode.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,51 @@
+import { computed as e, createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeClass as i, normalizeStyle as a, openBlock as o } from "vue";
+//#region src/components/BlessQrCode.vue?vue&type=script&setup=true&lang.ts
+var s = [
+	"viewBox",
+	"width",
+	"height",
+	"aria-label"
+], c = ["fill"], l = ["d", "fill"], u = /*@__PURE__*/ r({
+	name: "BlessQrCode",
+	__name: "BlessQrCode",
+	props: {
+		matrix: {},
+		value: {},
+		size: { default: 160 },
+		border: { default: 2 },
+		color: { default: "#1a1b1d" },
+		background: { default: "#fff" },
+		frame: {
+			type: Boolean,
+			default: !1
+		},
+		label: {}
+	},
+	setup(r) {
+		let u = r, d = e(() => u.matrix.length), f = e(() => {
+			let e = "";
+			return u.matrix.forEach((t, n) => t.forEach((t, r) => t && (e += `M${r + u.border} ${n + u.border}h1v1h-1z`))), e;
+		}), p = e(() => d.value + u.border * 2);
+		return (e, u) => (o(), t("span", {
+			class: i(["bless-qr", { "bless-qr--frame": r.frame }]),
+			style: a({ "--_s": `${r.size}px` })
+		}, [(o(), t("svg", {
+			class: "bless-qr__svg",
+			viewBox: `0 0 ${p.value} ${p.value}`,
+			width: r.size,
+			height: r.size,
+			"shape-rendering": "crispEdges",
+			role: "img",
+			"aria-label": r.label ?? (r.value ? `QR code: ${r.value}` : "QR code")
+		}, [n("rect", {
+			width: "100%",
+			height: "100%",
+			fill: r.background
+		}, null, 8, c), n("path", {
+			d: f.value,
+			fill: r.color
+		}, null, 8, l)], 8, s))], 6));
+	}
+});
+//#endregion
+export { u as default };

package/dist/components/BlessQuestionnaire.css

@@ -0,0 +1 @@
+.bless-questionnaire__item:focus{outline:none}.bless-questionnaire{gap:var(--bless-space-4);font-family:var(--bless-font-sans);color:var(--bless-color-text);flex-direction:column;display:flex}.bless-questionnaire__item{border-radius:var(--bless-radius);gap:var(--bless-space-3);border:0;flex-direction:column;min-width:0;margin:0;padding:0;display:flex}.bless-questionnaire__title{font-size:var(--bless-text-lg);font-weight:var(--bless-font-weight-light);line-height:var(--bless-leading-tight);padding:0}.bless-questionnaire__desc{font-size:var(--bless-text-sm);color:var(--bless-color-text-muted);margin:0}.bless-questionnaire__choices{gap:var(--bless-space-2);flex-direction:column;display:flex}.bless-questionnaire__key{min-width:1.4em;font-family:inherit;font-size:var(--bless-text-2xs);text-align:center;color:var(--bless-color-text-muted);background:var(--bless-color-surface);transform:skewX(var(--bless-skew));margin-inline-end:var(--bless-space-2);display:inline-block}.bless-questionnaire__error{font-size:var(--bless-text-xs);font-weight:var(--bless-font-weight-bold);color:var(--bless-color-danger-text);margin:0}.bless-questionnaire__actions{align-items:center;gap:var(--bless-space-2);display:flex}.bless-questionnaire__spacer{flex:1}

package/dist/components/BlessQuestionnaire.js

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

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

@@ -0,0 +1,33 @@
+import { BlessAnswers, BlessQuestion } from './questionnaire';
+type __VLS_Props = {
+    questions: BlessQuestion[];
+    /** 1-based shortcut keys for choices */
+    shortcuts?: boolean;
+    labels?: Partial<{
+        next: string;
+        previous: string;
+        skip: string;
+        submit: string;
+        required: string;
+    }>;
+};
+type __VLS_ModelProps = {
+    modelValue?: BlessAnswers;
+    "step"?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    submit: (answers: BlessAnswers) => any;
+    "update:modelValue": (value: BlessAnswers) => any;
+    skip: (question: BlessQuestion) => any;
+    "update:step": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSubmit?: ((answers: BlessAnswers) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: BlessAnswers) => any) | undefined;
+    onSkip?: ((question: BlessQuestion) => any) | undefined;
+    "onUpdate:step"?: ((value: number) => any) | undefined;
+}>, {
+    shortcuts: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;