blessing-ui 0.1.0 → 0.3.0

package/dist/components/BlessSteps.vue_vue_type_script_setup_true_lang.js

@@ -10,7 +10,8 @@ var m = ["aria-label"], h = ["aria-current"], g = { "aria-hidden": "true" }, _ =
 		steps: {},
 		orientation: { default: "horizontal" },
 		clickable: { type: [Boolean, String] },
-		label: { default: "Progress" }
+		label: { default: "Progress" },
+		goLabel: {}
 	}, {
 		modelValue: { default: 0 },
 		modelModifiers: {}
@@ -32,7 +33,7 @@ var m = ["aria-label"], h = ["aria-current"], g = { "aria-hidden": "true" }, _ =
 		}, [(c(), t(u(S(o, a.clickable, b.value) ? "button" : "div"), {
 			type: S(o, a.clickable, b.value) ? "button" : void 0,
 			class: "bless-steps__marker",
-			"aria-label": S(o, a.clickable, b.value) ? `Go to step ${o + 1}: ${e.label}` : void 0,
+			"aria-label": S(o, a.clickable, b.value) ? (a.goLabel ?? ((e, t) => `Go to step ${e}: ${t}`))(o + 1, e.label) : void 0,
 			onClick: (e) => S(o, a.clickable, b.value) && (x("select", o), b.value = o)
 		}, {
 			default: p(() => [i("span", g, d(o < b.value ? "✓" : o + 1), 1)]),

package/dist/components/BlessSwipeDeck.css

@@ -0,0 +1 @@
+.bless-deck{font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);color:var(--bless-color-text);position:relative}.bless-deck__stage{min-height:240px;display:grid;position:relative}.bless-deck__stage:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:4px}.bless-deck__card{padding:var(--bless-space-8) var(--bless-space-4) var(--bless-space-4);background:var(--bless-color-bg);border:var(--bless-border-width) solid var(--bless-color-border);box-shadow:var(--bless-shadow-plate);translate:0 calc(var(--bless-deck-depth,0) * 8px);scale:calc(1 - var(--bless-deck-depth,0) * .04);transition:transform var(--bless-duration-slow) var(--bless-ease-out), translate var(--bless-duration-slow) var(--bless-ease-out), scale var(--bless-duration-slow) var(--bless-ease-out), opacity var(--bless-duration-slow) var(--bless-ease-out);-webkit-user-select:none;user-select:none;grid-area:1/1;position:relative}.bless-deck__card--top{z-index:3;cursor:grab;touch-action:none}.bless-deck__card:nth-child(2){z-index:2}.bless-deck__card:nth-child(3){z-index:1}.bless-deck-leave-active{z-index:4;pointer-events:none}.bless-deck-leave-to{opacity:0;translate:calc(var(--bless-deck-x) * 140%) calc(var(--bless-deck-y) * 140%)}.bless-deck-enter-from{opacity:0}.bless-deck__stamp{top:var(--bless-space-3);padding:0 var(--bless-space-2);text-transform:uppercase;pointer-events:none;opacity:0;border:2px solid;font-weight:700;position:absolute}.bless-deck__stamp--accept{inset-inline-start:var(--bless-space-3)}.bless-deck__stamp--reject{inset-inline-end:var(--bless-space-3)}.bless-deck__stamp--skip{inset-inline-start:50%;translate:-50%}.bless-deck__empty{color:var(--bless-color-text-muted);grid-area:1/1;place-items:center;display:grid}.bless-deck__controls{justify-content:center;gap:var(--bless-space-2);margin-top:var(--bless-space-4);flex-wrap:wrap;display:flex}.bless-deck__live{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){.bless-deck__card{transition:none}}

package/dist/components/BlessSwipeDeck.js

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

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

@@ -0,0 +1,46 @@
+export type BlessSwipeDecision = "accept" | "reject" | "skip";
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<({
+        rowKey?: (item: T) => string | number;
+        label?: string;
+        /** show the buttons under the deck */
+        controls?: boolean;
+        /** how far (px) a drag must travel to count */
+        threshold?: number;
+        labels?: Partial<Record<BlessSwipeDecision | "undo" | "empty", string>>;
+    } & {
+        /** the cards still to decide, top of the deck first */
+        modelValue?: T[];
+    }) & {
+        "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
+        onDecide?: ((item: T, decision: BlessSwipeDecision) => any) | undefined;
+        onUndo?: ((item: T) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import('vue').ShallowUnwrapRef<{
+        accept: () => void;
+        reject: () => void;
+        skip: () => void;
+        undo: () => void;
+    }>) => void;
+    attrs: any;
+    slots: {
+        card?: (props: {
+            item: T;
+            index: number;
+        }) => any;
+    } & {
+        empty?: (props: {}) => any;
+    };
+    emit: (((evt: "decide", item: T, decision: BlessSwipeDecision) => void) & ((evt: "undo", item: T) => void)) & ((event: "update:modelValue", value: T[]) => void);
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/BlessSwipeDeck.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,200 @@
+import e from "./BlessButton.js";
+import { Fragment as t, TransitionGroup as n, computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, mergeModels as u, normalizeClass as d, normalizeStyle as f, openBlock as p, ref as m, renderList as h, renderSlot as g, toDisplayString as _, useModel as v, withCtx as y } from "vue";
+//#region src/components/BlessSwipeDeck.vue?vue&type=script&setup=true&lang.ts
+var b = ["aria-label"], x = [
+	"aria-hidden",
+	"inert",
+	"onPointerdown",
+	"onPointermove",
+	"onPointerup",
+	"onPointercancel"
+], S = {
+	key: 0,
+	class: "bless-deck__empty"
+}, C = {
+	key: 0,
+	class: "bless-deck__controls"
+}, w = {
+	class: "bless-deck__live",
+	"aria-live": "polite"
+}, T = /*@__PURE__*/ l({
+	name: "BlessSwipeDeck",
+	__name: "BlessSwipeDeck",
+	props: /*@__PURE__*/ u({
+		rowKey: {},
+		label: { default: "Cards" },
+		controls: {
+			type: Boolean,
+			default: !0
+		},
+		threshold: { default: 100 },
+		labels: {}
+	}, {
+		modelValue: { default: () => [] },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ u(["decide", "undo"], ["update:modelValue"]),
+	setup(l, { expose: u, emit: T }) {
+		let E = l, D = v(l, "modelValue"), O = T, k = r(() => ({
+			accept: "Accept",
+			reject: "Reject",
+			skip: "Skip",
+			undo: "Undo",
+			empty: "No cards left",
+			...E.labels
+		})), A = [], j = m(0), M = m(""), N = {
+			accept: [1, 0],
+			reject: [-1, 0],
+			skip: [0, -1]
+		}, P = m([0, 0]);
+		function F(e) {
+			let [t, ...n] = D.value;
+			t !== void 0 && (P.value = N[e], A.push({
+				item: t,
+				decision: e
+			}), j.value = A.length, D.value = n, O("decide", t, e), M.value = `${k.value[e]}. ${n.length} left.`);
+		}
+		function I() {
+			let e = A.pop();
+			e && (j.value = A.length, P.value = [0, 0], D.value = [e.item, ...D.value], O("undo", e.item), M.value = `${k.value.undo}. ${D.value.length} left.`);
+		}
+		u({
+			accept: () => F("accept"),
+			reject: () => F("reject"),
+			skip: () => F("skip"),
+			undo: I
+		});
+		let L = m(null);
+		function R(e) {
+			e.button || (e.currentTarget.setPointerCapture?.(e.pointerId), L.value = {
+				x: 0,
+				y: 0,
+				sx: e.clientX,
+				sy: e.clientY
+			});
+		}
+		function z(e) {
+			let t = L.value;
+			t && (t.x = e.clientX - t.sx, t.y = e.clientY - t.sy);
+		}
+		function B() {
+			let e = L.value;
+			if (!e) return;
+			let t = E.threshold, n = Math.abs(e.x), r = Math.abs(e.y), i = n >= r && n > t ? e.x > 0 ? "accept" : "reject" : r > n && e.y < -t ? "skip" : null;
+			i && F(i), L.value = null;
+		}
+		let V = r(() => {
+			let e = L.value;
+			if (!e) return {
+				accept: 0,
+				reject: 0,
+				skip: 0
+			};
+			let t = (e) => Math.min(1, Math.max(0, e / E.threshold));
+			return {
+				accept: t(e.x),
+				reject: t(-e.x),
+				skip: t(-e.y)
+			};
+		}), H = r(() => {
+			let e = L.value;
+			return e ? {
+				transform: `translate(${e.x}px, ${e.y}px) rotate(${e.x / 24}deg)`,
+				transition: "none"
+			} : void 0;
+		});
+		function U(e) {
+			let t = {
+				ArrowRight: "accept",
+				ArrowLeft: "reject",
+				ArrowUp: "skip"
+			};
+			t[e.key] ? (e.preventDefault(), F(t[e.key])) : (e.key === "Backspace" || (e.ctrlKey || e.metaKey) && e.key === "z") && (e.preventDefault(), I());
+		}
+		let W = r(() => D.value.slice(0, 3));
+		return (r, u) => (p(), a("div", {
+			class: "bless-deck",
+			style: f({
+				"--bless-deck-x": P.value[0],
+				"--bless-deck-y": P.value[1]
+			})
+		}, [
+			o("div", {
+				class: "bless-deck__stage",
+				tabindex: "0",
+				role: "group",
+				"aria-roledescription": "deck of cards",
+				"aria-label": `${l.label}, ${D.value.length} left. Right arrow ${k.value.accept}, left arrow ${k.value.reject}, up arrow ${k.value.skip}, Backspace ${k.value.undo}.`,
+				onKeydown: U
+			}, [c(n, { name: "bless-deck" }, {
+				default: y(() => [(p(!0), a(t, null, h(W.value, (e, n) => (p(), a("div", {
+					key: l.rowKey ? l.rowKey(e) : D.value.length - n,
+					class: d(["bless-deck__card", { "bless-deck__card--top": n === 0 }]),
+					style: f(n === 0 ? H.value : { "--bless-deck-depth": n }),
+					"aria-hidden": n > 0 || void 0,
+					inert: n > 0 || void 0,
+					onPointerdown: (e) => n === 0 && R(e),
+					onPointermove: (e) => n === 0 && z(e),
+					onPointerup: (e) => n === 0 && B(),
+					onPointercancel: (e) => n === 0 && (L.value = null)
+				}, [g(r.$slots, "card", {
+					item: e,
+					index: n
+				}, () => [s(_(e), 1)]), n === 0 ? (p(), a(t, { key: 0 }, [
+					o("span", {
+						class: "bless-deck__stamp bless-deck__stamp--accept",
+						"aria-hidden": "true",
+						style: f({ opacity: V.value.accept })
+					}, _(k.value.accept), 5),
+					o("span", {
+						class: "bless-deck__stamp bless-deck__stamp--reject",
+						"aria-hidden": "true",
+						style: f({ opacity: V.value.reject })
+					}, _(k.value.reject), 5),
+					o("span", {
+						class: "bless-deck__stamp bless-deck__stamp--skip",
+						"aria-hidden": "true",
+						style: f({ opacity: V.value.skip })
+					}, _(k.value.skip), 5)
+				], 64)) : i("", !0)], 46, x))), 128))]),
+				_: 3
+			}), D.value.length ? i("", !0) : (p(), a("div", S, [g(r.$slots, "empty", {}, () => [s(_(k.value.empty), 1)])]))], 40, b),
+			l.controls ? (p(), a("div", C, [
+				c(e, {
+					variant: "outline",
+					disabled: !j.value,
+					onClick: I
+				}, {
+					default: y(() => [s(_(k.value.undo), 1)]),
+					_: 1
+				}, 8, ["disabled"]),
+				c(e, {
+					variant: "outline",
+					disabled: !D.value.length,
+					onClick: u[0] ||= (e) => F("reject")
+				}, {
+					default: y(() => [s(_(k.value.reject), 1)]),
+					_: 1
+				}, 8, ["disabled"]),
+				c(e, {
+					variant: "outline",
+					disabled: !D.value.length,
+					onClick: u[1] ||= (e) => F("skip")
+				}, {
+					default: y(() => [s(_(k.value.skip), 1)]),
+					_: 1
+				}, 8, ["disabled"]),
+				c(e, {
+					disabled: !D.value.length,
+					onClick: u[2] ||= (e) => F("accept")
+				}, {
+					default: y(() => [s(_(k.value.accept), 1)]),
+					_: 1
+				}, 8, ["disabled"])
+			])) : i("", !0),
+			o("span", w, _(M.value), 1)
+		], 4));
+	}
+});
+//#endregion
+export { T as default };

package/dist/components/BlessTimer.css

@@ -0,0 +1 @@
+.bless-timer{align-items:center;gap:var(--bless-space-2);font-family:var(--bless-font-sans);color:var(--bless-color-text);flex-direction:column;display:inline-flex;position:relative}.bless-timer__clock{font-size:calc(var(--bless-text-xl) * 1.6);font-variant-numeric:tabular-nums;font-weight:600;line-height:1}.bless-timer__phase{font-size:var(--bless-text-sm);color:var(--bless-color-text-muted)}.bless-timer--done .bless-timer__clock{color:var(--bless-color-danger-text)}.bless-timer__controls{gap:var(--bless-space-2);display:inline-flex}.bless-timer__live{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}

package/dist/components/BlessTimer.js

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

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

@@ -0,0 +1,74 @@
+export interface BlessTimerPhase {
+    label: string;
+    seconds: number;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<{
+    /** `countdown` from `duration`, `stopwatch` up from 0, `interval` through `phases` */
+    mode?: "countdown" | "stopwatch" | "interval";
+    /** seconds, for a countdown */
+    duration?: number;
+    /** for `interval`: e.g. `[{ label: "Work", seconds: 25 }, { label: "Rest", seconds: 5 }]` */
+    phases?: BlessTimerPhase[];
+    /** how many times the phases repeat */
+    rounds?: number;
+    autostart?: boolean;
+    /** show Start / Pause / Reset */
+    controls?: boolean;
+    label?: string;
+    /** button text and the wording said when a phase changes or the time is up */
+    labels?: Partial<{
+        start: string;
+        resume: string;
+        pause: string;
+        reset: string;
+        finished: string;
+        round: (round: number, rounds: number) => string;
+    }>;
+} & {
+    running?: boolean;
+}, {
+    start: () => void;
+    pause: () => void;
+    reset: () => void;
+    toggle: () => boolean;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:running": (value: boolean) => any;
+    finish: () => any;
+    phase: (phase: BlessTimerPhase, index: number, round: number) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    /** `countdown` from `duration`, `stopwatch` up from 0, `interval` through `phases` */
+    mode?: "countdown" | "stopwatch" | "interval";
+    /** seconds, for a countdown */
+    duration?: number;
+    /** for `interval`: e.g. `[{ label: "Work", seconds: 25 }, { label: "Rest", seconds: 5 }]` */
+    phases?: BlessTimerPhase[];
+    /** how many times the phases repeat */
+    rounds?: number;
+    autostart?: boolean;
+    /** show Start / Pause / Reset */
+    controls?: boolean;
+    label?: string;
+    /** button text and the wording said when a phase changes or the time is up */
+    labels?: Partial<{
+        start: string;
+        resume: string;
+        pause: string;
+        reset: string;
+        finished: string;
+        round: (round: number, rounds: number) => string;
+    }>;
+} & {
+    running?: boolean;
+}> & Readonly<{
+    "onUpdate:running"?: ((value: boolean) => any) | undefined;
+    onFinish?: (() => any) | undefined;
+    onPhase?: ((phase: BlessTimerPhase, index: number, round: number) => any) | undefined;
+}>, {
+    label: string;
+    mode: "countdown" | "stopwatch" | "interval";
+    duration: number;
+    rounds: number;
+    controls: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/BlessTimer.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,139 @@
+import e from "./BlessButton.js";
+import { computed as t, createBlock 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, onBeforeUnmount as d, openBlock as f, ref as p, toDisplayString as m, useModel as h, watch as g, withCtx as _ } from "vue";
+//#region src/components/BlessTimer.vue?vue&type=script&setup=true&lang.ts
+var v = ["aria-label"], y = {
+	key: 0,
+	class: "bless-timer__phase"
+}, b = { class: "bless-timer__clock" }, x = {
+	key: 1,
+	class: "bless-timer__controls"
+}, S = {
+	class: "bless-timer__live",
+	"aria-live": "polite"
+}, C = /*@__PURE__*/ c({
+	name: "BlessTimer",
+	__name: "BlessTimer",
+	props: /*@__PURE__*/ l({
+		mode: { default: "countdown" },
+		duration: { default: 60 },
+		phases: {},
+		rounds: { default: 1 },
+		autostart: { type: Boolean },
+		controls: {
+			type: Boolean,
+			default: !0
+		},
+		label: { default: "Timer" },
+		labels: {}
+	}, {
+		running: {
+			type: Boolean,
+			default: !1
+		},
+		runningModifiers: {}
+	}),
+	emits: /*@__PURE__*/ l(["finish", "phase"], ["update:running"]),
+	setup(c, { expose: l, emit: C }) {
+		let w = c, T = t(() => ({
+			start: "Start",
+			resume: "Resume",
+			pause: "Pause",
+			reset: "Reset",
+			finished: "Finished",
+			round: (e, t) => `round ${e} of ${t}`,
+			...w.labels
+		})), E = h(c, "running"), D = C, O = p(0), k = p(!1), A = p(""), j = 0, M = 0, N, P = t(() => w.mode === "interval" ? w.phases ?? [] : [{
+			label: "",
+			seconds: w.duration
+		}]), F = t(() => w.mode === "interval" ? w.rounds : 1), I = t(() => P.value.reduce((e, t) => e + t.seconds, 0) * 1e3), L = t(() => I.value * F.value), R = t(() => {
+			if (w.mode === "stopwatch") return {
+				i: 0,
+				round: 1,
+				left: O.value
+			};
+			let e = Math.min(O.value, L.value), t = I.value ? e >= L.value ? I.value : e % I.value : 0, n = Math.min(F.value, Math.floor(e / (I.value || 1)) + 1), r = 0;
+			for (let i = 0; i < P.value.length; i++) {
+				let a = P.value[i].seconds * 1e3;
+				if (t < r + a || i === P.value.length - 1) return {
+					i,
+					round: e >= L.value ? F.value : n,
+					left: Math.max(0, r + a - t)
+				};
+				r += a;
+			}
+			return {
+				i: 0,
+				round: 1,
+				left: 0
+			};
+		}), z = (e) => String(e).padStart(2, "0"), B = (e, t) => {
+			let n = t ? Math.floor(e / 1e3) : Math.ceil(e / 1e3), r = Math.floor(n / 3600), i = Math.floor(n % 3600 / 60);
+			return `${r ? `${r}:${z(i)}` : z(i)}:${z(n % 60)}`;
+		}, V = t(() => B(R.value.left, w.mode === "stopwatch")), H = t(() => w.mode === "interval" ? P.value[R.value.i] : void 0), U = t(() => H.value ? `${H.value.label} · ${T.value.round(R.value.round, F.value)}` : "");
+		function W() {
+			O.value = j + (performance.now() - M), w.mode !== "stopwatch" && O.value >= L.value && (O.value = L.value, G(), k.value = !0, E.value = !1, A.value = T.value.finished, D("finish"));
+		}
+		function G() {
+			clearInterval(N), N = void 0;
+		}
+		function K() {
+			N || w.mode !== "stopwatch" && !L.value || (k.value && Y(), j = O.value, M = performance.now(), N = setInterval(W, 100));
+		}
+		function q() {
+			E.value = !0;
+		}
+		function J() {
+			E.value = !1;
+		}
+		function Y() {
+			G(), O.value = 0, j = 0, k.value = !1, A.value = "", E.value && K();
+		}
+		return g(E, (e) => {
+			e ? K() : N && (W(), G());
+		}, { immediate: !1 }), w.autostart && (E.value = !0), g(() => [
+			w.mode,
+			w.duration,
+			w.phases,
+			w.rounds
+		], () => Y()), g(() => `${R.value.i}:${R.value.round}`, (e, t) => {
+			let n = P.value[R.value.i];
+			t !== void 0 && n && w.mode === "interval" && E.value && (A.value = `${n.label}, ${T.value.round(R.value.round, F.value)}`, D("phase", n, R.value.i, R.value.round));
+		}), d(G), l({
+			start: q,
+			pause: J,
+			reset: Y,
+			toggle: () => E.value = !E.value
+		}), (t, l) => (f(), i("div", {
+			class: u(["bless-timer", { "bless-timer--done": k.value }]),
+			role: "timer",
+			"aria-label": c.label
+		}, [
+			U.value ? (f(), i("span", y, m(U.value), 1)) : r("", !0),
+			a("span", b, m(V.value), 1),
+			c.controls ? (f(), i("span", x, [E.value ? (f(), n(e, {
+				key: 1,
+				variant: "outline",
+				onClick: J
+			}, {
+				default: _(() => [o(m(T.value.pause), 1)]),
+				_: 1
+			})) : (f(), n(e, {
+				key: 0,
+				onClick: q
+			}, {
+				default: _(() => [o(m(O.value && !k.value ? T.value.resume : T.value.start), 1)]),
+				_: 1
+			})), s(e, {
+				variant: "ghost",
+				disabled: !O.value,
+				onClick: Y
+			}, {
+				default: _(() => [o(m(T.value.reset), 1)]),
+				_: 1
+			}, 8, ["disabled"])])) : r("", !0),
+			a("span", S, m(A.value), 1)
+		], 10, v));
+	}
+});
+//#endregion
+export { C as default };

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

@@ -13,6 +13,7 @@ type __VLS_Props = {
         prev: string;
         done: string;
         skip: string;
+        step: (number: number) => string;
     }>;
     /** dim the page and cut a hole around the target */
     spotlight?: boolean;

package/dist/components/BlessTour.vue_vue_type_script_setup_true_lang.js

@@ -1,12 +1,12 @@
 import e from "./BlessButton.js";
 import { scrollBehavior as t } from "../composables/useMedia.js";
 import { useFloating as n } from "../composables/useFloating.js";
-import { Fragment as r, Teleport as i, computed as a, createBlock 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 g, openBlock as _, ref as v, toDisplayString as y, unref as b, useModel as x, watch as S, withCtx as C, withKeys as w, withModifiers as T } from "vue";
+import { Fragment as r, Teleport as i, computed as a, createBlock 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 g, onMounted as _, openBlock as v, ref as y, toDisplayString as b, unref as x, useModel as S, watch as C, withCtx as w, withKeys as T, withModifiers as E } from "vue";
 //#region src/components/BlessTour.vue?vue&type=script&setup=true&lang.ts
-var E = ["aria-label"], D = { class: "bless-tour__count" }, O = {
+var D = ["aria-label"], O = { class: "bless-tour__count" }, k = {
 	key: 0,
 	class: "bless-tour__title"
-}, k = { class: "bless-tour__text" }, A = { class: "bless-tour__actions" }, j = /*@__PURE__*/ f({
+}, A = { class: "bless-tour__text" }, j = { class: "bless-tour__actions" }, M = /*@__PURE__*/ f({
 	name: "BlessTour",
 	__name: "BlessTour",
 	props: /*@__PURE__*/ p({
@@ -27,34 +27,37 @@ var E = ["aria-label"], D = { class: "bless-tour__count" }, O = {
 	}),
 	emits: /*@__PURE__*/ p(["finish", "skip"], ["update:open", "update:step"]),
 	setup(f, { emit: p }) {
-		let j = f, M = x(f, "open"), N = x(f, "step"), P = p, F = a(() => ({
+		let M = f, N = S(f, "open"), P = S(f, "step"), F = p, I = a(() => ({
 			next: "Next",
 			prev: "Back",
 			done: "Done",
 			skip: "Skip",
-			...j.labels
-		})), I = a(() => j.steps[N.value]), L = a(() => N.value >= j.steps.length - 1), R = v(null), z = v(), B = v(null), { x: V, y: H, side: U, update: W } = n(R, z, M, () => ({
-			placement: I.value?.placement ?? "bottom",
+			step: (e) => `Step ${e}`,
+			...M.labels
+		})), L = a(() => M.steps[P.value]), R = a(() => P.value >= M.steps.length - 1), z = y(null), B = y(), V = y(null), { x: H, y: U, side: W, update: G } = n(z, B, N, () => ({
+			placement: L.value?.placement ?? "bottom",
 			offset: 12
 		}));
-		function G() {
-			let e = I.value?.target ? document.querySelector(I.value.target) : null;
-			R.value = e, B.value = e?.getBoundingClientRect() ?? null, e?.scrollIntoView?.({
+		function K() {
+			let e = L.value?.target ? document.querySelector(L.value.target) : null;
+			z.value = e, V.value = e?.getBoundingClientRect() ?? null, e?.scrollIntoView?.({
 				block: "center",
 				behavior: t()
 			}), m(() => {
-				W(), B.value = e?.getBoundingClientRect() ?? null, z.value?.focus();
+				G(), V.value = e?.getBoundingClientRect() ?? null, B.value?.focus();
 			});
 		}
-		let K = null;
-		S(M, (e) => {
-			e ? K = document.activeElement : m(() => K?.focus?.());
-		}), S([M, N], ([e]) => e && G(), { immediate: !0 });
-		function q(e) {
-			M.value = !1, P(e ? "finish" : "skip");
+		let q = null;
+		C(N, (e) => {
+			e ? q = document.activeElement : m(() => q?.focus?.());
+		}), C([N, P], ([e]) => e && K(), { immediate: !0 });
+		function J(e) {
+			N.value = !1, F(e ? "finish" : "skip");
 		}
-		let J = a(() => {
-			let e = B.value;
+		let Y = y(!1);
+		_(() => Y.value = !0);
+		let X = a(() => {
+			let e = V.value;
 			return e ? {
 				top: `${e.top - 6}px`,
 				left: `${e.left - 6}px`,
@@ -62,57 +65,60 @@ var E = ["aria-label"], D = { class: "bless-tour__count" }, O = {
 				height: `${e.height + 12}px`
 			} : void 0;
 		});
-		return (t, n) => (_(), o(i, { to: "body" }, [M.value && I.value ? (_(), c(r, { key: 0 }, [f.spotlight ? (_(), c("div", {
+		return (t, n) => Y.value ? (v(), o(i, {
 			key: 0,
-			class: h(["bless-tour__spot", { "bless-tour__spot--none": !J.value }]),
-			style: g(J.value),
+			to: "body"
+		}, [N.value && L.value ? (v(), c(r, { key: 0 }, [f.spotlight ? (v(), c("div", {
+			key: 0,
+			class: h(["bless-tour__spot", { "bless-tour__spot--none": !X.value }]),
+			style: g(X.value),
 			"aria-hidden": "true"
 		}, null, 6)) : s("", !0), l("div", {
 			ref_key: "panel",
-			ref: z,
-			class: h(["bless-tour", [`bless-tour--${b(U)}`, { "bless-tour--centred": !R.value }]]),
+			ref: B,
+			class: h(["bless-tour", [`bless-tour--${x(W)}`, { "bless-tour--centred": !z.value }]]),
 			role: "dialog",
 			"aria-modal": "false",
-			"aria-label": I.value.title ?? `Step ${N.value + 1}`,
+			"aria-label": L.value.title ?? I.value.step(P.value + 1),
 			tabindex: "-1",
-			style: g(R.value ? {
-				left: `${b(V)}px`,
-				top: `${b(H)}px`
+			style: g(z.value ? {
+				left: `${x(H)}px`,
+				top: `${x(U)}px`
 			} : void 0),
-			onKeydown: n[3] ||= w(T((e) => q(!1), ["prevent"]), ["esc"])
+			onKeydown: n[3] ||= T(E((e) => J(!1), ["prevent"]), ["esc"])
 		}, [
-			l("span", D, y(N.value + 1) + " / " + y(f.steps.length), 1),
-			I.value.title ? (_(), c("strong", O, y(I.value.title), 1)) : s("", !0),
-			l("p", k, y(I.value.text), 1),
-			l("div", A, [
+			l("span", O, b(P.value + 1) + " / " + b(f.steps.length), 1),
+			L.value.title ? (v(), c("strong", k, b(L.value.title), 1)) : s("", !0),
+			l("p", A, b(L.value.text), 1),
+			l("div", j, [
 				d(e, {
 					size: "sm",
 					variant: "ghost",
-					onClick: n[0] ||= (e) => q(!1)
+					onClick: n[0] ||= (e) => J(!1)
 				}, {
-					default: C(() => [u(y(F.value.skip), 1)]),
+					default: w(() => [u(b(I.value.skip), 1)]),
 					_: 1
 				}),
 				n[4] ||= l("span", { style: { flex: "1" } }, null, -1),
 				d(e, {
 					size: "sm",
 					variant: "outline",
-					disabled: N.value === 0,
-					onClick: n[1] ||= (e) => N.value--
+					disabled: P.value === 0,
+					onClick: n[1] ||= (e) => P.value--
 				}, {
-					default: C(() => [u(y(F.value.prev), 1)]),
+					default: w(() => [u(b(I.value.prev), 1)]),
 					_: 1
 				}, 8, ["disabled"]),
 				d(e, {
 					size: "sm",
-					onClick: n[2] ||= (e) => L.value ? q(!0) : N.value++
+					onClick: n[2] ||= (e) => R.value ? J(!0) : P.value++
 				}, {
-					default: C(() => [u(y(L.value ? F.value.done : F.value.next), 1)]),
+					default: w(() => [u(b(R.value ? I.value.done : I.value.next), 1)]),
 					_: 1
 				})
 			])
-		], 46, E)], 64)) : s("", !0)]));
+		], 46, D)], 64)) : s("", !0)])) : s("", !0);
 	}
 });
 //#endregion
-export { j as default };
+export { M as default };