morya-ui 0.3.8 → 0.4.0

package/dist/tour/index.js

@@ -0,0 +1,214 @@
+import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
+import { n as t } from "../overlay-oR-5MDuE.js";
+import { t as ee } from "../overlayPlacement-qwEJPVS4.js";
+import { t as n } from "../Icon-od9Ob-Ay.js";
+import { t as r } from "../Button-TaJ0LKtP.js";
+import { c as te } from "../config-COgrsSV2.js";
+import { n as ne } from "../locale-Dnk0UIie.js";
+import "./style.js";
+import { 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, mergeProps as p, nextTick as m, normalizeClass as h, normalizeStyle as g, onBeforeUnmount as re, openBlock as _, ref as v, toDisplayString as y, unref as b, useAttrs as x, watch as S, withCtx as C } from "vue";
+//#region src/components/Tour/Tour.vue?vue&type=script&setup=true&lang.ts
+var w = ["aria-label"], T = {
+	key: 0,
+	class: "m-tour__cover"
+}, E = { class: "m-tour__header" }, D = {
+	key: 0,
+	class: "m-tour__title"
+}, O = {
+	key: 1,
+	class: "m-tour__description"
+}, k = { class: "m-tour__footer" }, ie = { class: "m-tour__indicators" }, ae = { class: "m-tour__actions" }, A = /* @__PURE__ */ f({
+	inheritAttrs: !1,
+	__name: "Tour",
+	props: {
+		pt: {},
+		steps: { default: () => [] },
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		},
+		current: { default: 0 },
+		placement: { default: "bottom" },
+		mask: {
+			type: Boolean,
+			default: !0
+		},
+		gap: { default: 4 },
+		type: { default: "default" },
+		zIndex: {},
+		teleport: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: [
+		"update:open",
+		"update:modelValue",
+		"update:current",
+		"close",
+		"finish",
+		"change"
+	],
+	setup(f, { emit: A }) {
+		let j = f, M = A, oe = x(), { rootAttrs: se } = e(oe, () => j.pt), N = ne(), P = te(), F = v(null), I = v({}), L = v({}), R = a({
+			get: () => j.open ?? j.modelValue ?? !1,
+			set: (e) => {
+				M("update:open", e), M("update:modelValue", e);
+			}
+		}), z = a({
+			get: () => j.current ?? 0,
+			set: (e) => {
+				M("update:current", e), M("change", e);
+			}
+		}), B = a(() => j.steps?.length ?? 0), V = a(() => j.steps?.[z.value]), H = a(() => V.value?.type ?? j.type ?? "default"), U = a(() => t(j, P.value.appendTo)), W = a(() => j.zIndex ?? P.value.zIndex ?? 1e3), G = a(() => ({
+			prev: N.value.tourPrev,
+			next: N.value.tourNext,
+			finish: N.value.tourFinish
+		}));
+		function K(e) {
+			R.value = e, e || M("close");
+		}
+		function ce() {
+			let e = V.value?.target?.();
+			return e ? e.getBoundingClientRect() : null;
+		}
+		function le() {
+			let e = ce();
+			if (e) {
+				let t = Math.max(0, j.gap ?? 4);
+				I.value = {
+					top: `${e.top - t}px`,
+					left: `${e.left - t}px`,
+					width: `${e.width + t * 2}px`,
+					height: `${e.height + t * 2}px`
+				};
+				let n = V.value?.placement ?? j.placement;
+				L.value = ee(e, n, {
+					gap: 12,
+					zIndex: W.value + 1
+				});
+			} else I.value = {
+				top: "50%",
+				left: "50%",
+				width: "0px",
+				height: "0px",
+				transform: "translate(-50%, -50%)"
+			}, L.value = {
+				position: "fixed",
+				top: "50%",
+				left: "50%",
+				transform: "translate(-50%, -50%)",
+				zIndex: String(W.value + 1)
+			};
+		}
+		let q = 0;
+		function J() {
+			cancelAnimationFrame(q), q = requestAnimationFrame(() => {
+				m(le);
+			});
+		}
+		function Y() {
+			R.value && J();
+		}
+		function X(e) {
+			if (R.value) {
+				if (e.key === "Escape") {
+					e.preventDefault(), K(!1);
+					return;
+				}
+				if (e.key === "ArrowRight") {
+					e.preventDefault(), Q();
+					return;
+				}
+				e.key === "ArrowLeft" && z.value > 0 && (e.preventDefault(), Z());
+			}
+		}
+		S(R, (e) => {
+			e ? (J(), window.addEventListener("scroll", Y, !0), window.addEventListener("resize", Y), document.addEventListener("keydown", X)) : (window.removeEventListener("scroll", Y, !0), window.removeEventListener("resize", Y), document.removeEventListener("keydown", X));
+		}, { immediate: !0 }), S(z, () => {
+			R.value && J();
+		}), re(() => {
+			window.removeEventListener("scroll", Y, !0), window.removeEventListener("resize", Y), document.removeEventListener("keydown", X), cancelAnimationFrame(q);
+		});
+		function Z() {
+			let e = V.value?.prevButtonProps;
+			if (e?.onClick) {
+				e.onClick(new MouseEvent("click"));
+				return;
+			}
+			z.value > 0 && --z.value;
+		}
+		function Q() {
+			let e = V.value?.nextButtonProps;
+			if (e?.onClick) {
+				e.onClick(new MouseEvent("click"));
+				return;
+			}
+			if (z.value < B.value - 1) {
+				z.value += 1;
+				return;
+			}
+			K(!1), M("finish");
+		}
+		let $ = a(() => z.value >= B.value - 1);
+		return (e, t) => R.value ? (_(), o(i, {
+			key: 0,
+			to: U.value.to,
+			disabled: U.value.disabled
+		}, [l("div", p(b(se), {
+			class: "m-tour",
+			style: { zIndex: W.value },
+			role: "dialog",
+			"aria-modal": "true"
+		}), [f.mask ? (_(), c("div", {
+			key: 0,
+			class: "m-tour__mask",
+			"aria-hidden": "true",
+			onClick: t[0] ||= (e) => K(!1)
+		}, [l("div", {
+			class: "m-tour__spotlight",
+			style: g(I.value)
+		}, null, 4)])) : s("", !0), l("div", {
+			ref_key: "panelRef",
+			ref: F,
+			class: h(["m-tour__panel", [`m-tour__panel--${H.value}`]]),
+			style: g(L.value)
+		}, [
+			l("button", {
+				type: "button",
+				class: "m-tour__close",
+				"aria-label": b(N).close,
+				onClick: t[1] ||= (e) => K(!1)
+			}, [d(n, {
+				name: "close",
+				size: "sm"
+			})], 8, w),
+			typeof V.value?.cover == "string" ? (_(), c("div", T, y(V.value.cover), 1)) : s("", !0),
+			l("div", E, [V.value?.title ? (_(), c("div", D, y(V.value.title), 1)) : s("", !0)]),
+			V.value?.description ? (_(), c("div", O, y(V.value.description), 1)) : s("", !0),
+			l("div", k, [l("span", ie, y(z.value + 1) + " / " + y(B.value), 1), l("div", ae, [z.value > 0 ? (_(), o(r, {
+				key: 0,
+				size: "small",
+				severity: "secondary",
+				variant: "text",
+				onClick: Z
+			}, {
+				default: C(() => [u(y(V.value?.prevButtonProps?.children ?? G.value.prev), 1)]),
+				_: 1
+			})) : s("", !0), d(r, {
+				size: "small",
+				severity: H.value === "primary" ? "primary" : "secondary",
+				onClick: Q
+			}, {
+				default: C(() => [u(y($.value ? V.value?.nextButtonProps?.children ?? G.value.finish : V.value?.nextButtonProps?.children ?? G.value.next), 1)]),
+				_: 1
+			}, 8, ["severity"])])])
+		], 6)], 16)], 8, ["to", "disabled"])) : s("", !0);
+	}
+});
+//#endregion
+export { A as MTour };