morya-ui 0.2.7 → 0.2.8

package/dist/loading/index.js

@@ -0,0 +1,467 @@
+import { r as e } from "../useComponentAttrs-BTYEe61P.js";
+import { i as t } from "../types-DGuu4Eg4.js";
+import { n } from "../overlay-oR-5MDuE.js";
+import { i as r } from "../content-h8POj44-.js";
+import { t as i } from "../overlayHost-78CGtMgR.js";
+import { c as a, i as o } from "../config-BdK5ccNT.js";
+import { n as s } from "../locale-B36KH7c3.js";
+import "./style.js";
+import { Fragment as c, Teleport as l, Transition as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createStaticVNode as g, createVNode as _, defineComponent as v, h as y, mergeProps as b, normalizeClass as x, normalizeStyle as S, onBeforeUnmount as C, openBlock as w, reactive as T, ref as ee, render as E, renderList as D, renderSlot as O, toDisplayString as k, unref as A, useAttrs as te, useSlots as ne, watch as j, withCtx as M } from "vue";
+//#region src/components/Loading/types.ts
+var N = [
+	"circular",
+	"aurora",
+	"bounce",
+	"wave",
+	"pulse",
+	"stardust"
+], P = new Set(N);
+function F(e) {
+	return typeof e == "string" && P.has(e);
+}
+function I(e) {
+	return F(e) ? e : "circular";
+}
+//#endregion
+//#region src/components/Loading/LoadingIndicator.vue?vue&type=script&setup=true&lang.ts
+var L = ["aria-label"], R = {
+	class: "m-loading-indicator__graphic",
+	"aria-hidden": "true"
+}, z = {
+	key: 0,
+	class: "m-loading-aurora"
+}, B = {
+	key: 1,
+	class: "m-loading-bounce"
+}, V = {
+	key: 2,
+	class: "m-loading-wave"
+}, re = {
+	key: 3,
+	class: "m-loading-pulse"
+}, ie = {
+	key: 4,
+	class: "m-loading-stardust"
+}, ae = {
+	key: 5,
+	class: "m-loading-circular"
+}, oe = {
+	key: 0,
+	class: "m-loading-indicator__tip"
+}, H = /* @__PURE__ */ v({
+	name: "MLoadingIndicator",
+	__name: "LoadingIndicator",
+	props: {
+		effect: {},
+		text: {},
+		ariaLabel: {},
+		size: {}
+	},
+	setup(e) {
+		let n = e, r = s(), i = o("Loading"), a = d(() => I(n.effect ?? i.value.effect)), l = d(() => n.size ?? i.value.size), u = d(() => {
+			let e = t(l.value);
+			return {
+				"m-loading-indicator--small": e === "small",
+				"m-loading-indicator--large": e === "large"
+			};
+		}), f = d(() => n.ariaLabel ?? (n.text ? void 0 : r.value.loading));
+		return (t, n) => (w(), m("div", {
+			class: x(["m-loading-indicator", u.value]),
+			role: "status",
+			"aria-live": "polite",
+			"aria-label": f.value
+		}, [h("div", R, [a.value === "aurora" ? (w(), m("div", z, [...n[0] ||= [h("div", { class: "m-loading-aurora__ring" }, null, -1), h("div", { class: "m-loading-aurora__glow" }, null, -1)]])) : a.value === "bounce" ? (w(), m("div", B, [...n[1] ||= [
+			h("span", { class: "m-loading-bounce__ball" }, null, -1),
+			h("span", { class: "m-loading-bounce__ball" }, null, -1),
+			h("span", { class: "m-loading-bounce__ball" }, null, -1)
+		]])) : a.value === "wave" ? (w(), m("div", V, [...n[2] ||= [g("<span class=\"m-loading-wave__bar\"></span><span class=\"m-loading-wave__bar\"></span><span class=\"m-loading-wave__bar\"></span><span class=\"m-loading-wave__bar\"></span><span class=\"m-loading-wave__bar\"></span>", 5)]])) : a.value === "pulse" ? (w(), m("div", re, [...n[3] ||= [
+			h("span", { class: "m-loading-pulse__ring" }, null, -1),
+			h("span", { class: "m-loading-pulse__ring" }, null, -1),
+			h("span", { class: "m-loading-pulse__ring" }, null, -1),
+			h("span", { class: "m-loading-pulse__ring" }, null, -1)
+		]])) : a.value === "stardust" ? (w(), m("div", ie, [(w(), m(c, null, D(8, (e) => h("span", {
+			key: e,
+			class: "m-loading-stardust__dot",
+			style: S({ "--i": String(e - 1) })
+		}, null, 4)), 64))])) : (w(), m("div", ae, [...n[4] ||= [h("svg", {
+			class: "m-loading-circular__svg",
+			viewBox: "0 0 50 50"
+		}, [h("circle", {
+			class: "m-loading-circular__path",
+			cx: "25",
+			cy: "25",
+			r: "20",
+			fill: "none"
+		})], -1)]]))]), e.text ? (w(), m("p", oe, k(e.text), 1)) : p("", !0)], 10, L));
+	}
+}), U = /* @__PURE__ */ new Set(), W = null, G = 0, K = "";
+function q() {
+	typeof document > "u" || (G === 0 && (K = document.body.style.overflow), G += 1, document.body.style.overflow = "hidden");
+}
+function J() {
+	typeof document > "u" || (G = Math.max(0, G - 1), G === 0 && (document.body.style.overflow = K));
+}
+function se(e) {
+	if (typeof document > "u") throw Error("[MLoading] service is only available in the browser");
+	if (!e || e === document.body) return document.body;
+	if (typeof e == "string") {
+		let t = document.querySelector(e);
+		if (!(t instanceof HTMLElement)) throw TypeError(`[MLoading] target not found: ${e}`);
+		return t;
+	}
+	return e;
+}
+function ce(e) {
+	let t = 0;
+	return () => {
+		t ||= requestAnimationFrame(() => {
+			t = 0, e();
+		});
+	};
+}
+function Y(e) {
+	let t = T({
+		visible: !e.delay,
+		text: e.text ?? "",
+		effect: e.effect,
+		background: e.background,
+		customClass: e.customClass,
+		size: e.size,
+		fullscreen: !!e.fullscreen,
+		body: !!e.body && !e.fullscreen,
+		spinner: e.spinner,
+		top: 0,
+		left: 0,
+		width: 0,
+		height: 0
+	});
+	t.fullscreen && W && W.destroy();
+	let n = document.createElement("div");
+	(t.fullscreen || t.body ? document.body : e.target).appendChild(n);
+	let a = !1;
+	if (!t.fullscreen && !t.body) {
+		let t = getComputedStyle(e.target).position;
+		(!t || t === "static") && (e.target.classList.add("m-loading-parent--relative"), a = !0);
+	}
+	e.target.setAttribute("aria-busy", "true");
+	let o = !1;
+	function s(e) {
+		if (e && !o) {
+			q(), o = !0;
+			return;
+		}
+		!e && o && (J(), o = !1);
+	}
+	t.visible && s(!!e.lock);
+	function c() {
+		if (!t.body) return;
+		let n = e.target.getBoundingClientRect();
+		t.top = n.top, t.left = n.left, t.width = n.width, t.height = n.height;
+	}
+	let l = ce(c), d = null;
+	t.body && (c(), window.addEventListener("scroll", l, !0), window.addEventListener("resize", l), typeof ResizeObserver < "u" && (d = new ResizeObserver(l), d.observe(e.target)));
+	let f = null;
+	e.delay && e.delay > 0 && (f = setTimeout(() => {
+		f = null, t.visible = !0, s(!!e.lock);
+	}, e.delay));
+	let p = null, m = !1, h = !1, g = null;
+	function _() {
+		h || (h = !0, m = !0, f !== null && (clearTimeout(f), f = null), p !== null && (clearTimeout(p), p = null), s(!1), t.body && (window.removeEventListener("scroll", l, !0), window.removeEventListener("resize", l), d?.disconnect(), d = null), a && e.target.classList.remove("m-loading-parent--relative"), e.target.getAttribute("aria-busy") === "true" && e.target.removeAttribute("aria-busy"), E(null, n), n.remove(), g && (U.delete(g), W === g && (W = null)));
+	}
+	let b = v({
+		name: "MLoadingMask",
+		setup() {
+			return () => y(u, {
+				name: "m-loading",
+				appear: !0,
+				duration: {
+					enter: 180,
+					leave: 130
+				},
+				onAfterLeave: () => _()
+			}, { default: () => {
+				if (!t.visible) return null;
+				let e = [
+					"m-loading-mask",
+					t.fullscreen ? "m-loading-mask--fullscreen" : void 0,
+					t.body ? "m-loading-mask--body" : void 0,
+					t.customClass || void 0
+				].filter((e) => !!e), n = {};
+				t.background && (n.background = t.background), t.body && (n.top = `${t.top}px`, n.left = `${t.left}px`, n.width = `${t.width}px`, n.height = `${t.height}px`);
+				let i = t.spinner ? r(t.spinner) : y(H, {
+					effect: t.effect,
+					size: t.size,
+					text: t.text || void 0
+				});
+				return y("div", {
+					class: e,
+					style: n
+				}, [i]);
+			} });
+		}
+	});
+	g = {
+		fullscreen: t.fullscreen,
+		destroy: _,
+		close() {
+			if (!m) {
+				if (m = !0, f !== null) {
+					clearTimeout(f), f = null, _();
+					return;
+				}
+				if (!t.visible) {
+					_();
+					return;
+				}
+				t.visible = !1, p = setTimeout(_, 200);
+			}
+		}
+	}, U.add(g), t.fullscreen && (W = g);
+	let x = y(b);
+	return x.appContext = e.appContext ?? i(), E(x, n), {
+		close: () => g.close(),
+		destroy: () => _(),
+		setText(e) {
+			h || (t.text = e);
+		},
+		update(e) {
+			h || (e.text !== void 0 && (t.text = e.text), e.effect !== void 0 && (t.effect = e.effect), e.background !== void 0 && (t.background = e.background), e.customClass !== void 0 && (t.customClass = e.customClass), e.size !== void 0 && (t.size = e.size), e.spinner !== void 0 && (t.spinner = e.spinner), e.lock !== void 0 && t.visible && s(e.lock));
+		}
+	};
+}
+function le() {
+	return {
+		close() {},
+		setText() {},
+		destroy() {}
+	};
+}
+function ue(e = {}) {
+	if (typeof document > "u") return le();
+	let t = e.fullscreen ?? (e.target == null && !e.body), n = Y({
+		target: t ? document.body : se(e.target ?? document.body),
+		fullscreen: t,
+		body: !!e.body && !t,
+		lock: e.lock,
+		text: e.text,
+		effect: e.effect,
+		background: e.background,
+		customClass: e.customClass,
+		size: e.size,
+		delay: e.delay,
+		spinner: e.spinner
+	});
+	return {
+		close: () => n.close(),
+		setText: (e) => n.setText(e),
+		destroy: () => n.destroy()
+	};
+}
+var X = { service: ue }, de = ["aria-busy"], fe = ["inert"], pe = /* @__PURE__ */ v({
+	name: "MLoading",
+	inheritAttrs: !1,
+	__name: "Loading",
+	props: {
+		pt: {},
+		loading: {
+			type: Boolean,
+			default: !0
+		},
+		effect: {},
+		text: {},
+		ariaLabel: {},
+		size: {},
+		background: {},
+		customClass: {},
+		fullscreen: {
+			type: Boolean,
+			default: !1
+		},
+		lock: {
+			type: Boolean,
+			default: !1
+		},
+		delay: { default: 0 }
+	},
+	setup(t) {
+		let r = t, i = te(), s = ne(), { rootAttrs: g } = e(i, () => r.pt), v = o("Loading"), y = a(), T = d(() => !!s.default), E = d(() => T.value || r.fullscreen), D = d(() => I(r.effect ?? v.value.effect)), k = d(() => r.size ?? v.value.size), N = d(() => r.delay ?? v.value.delay ?? 0), P = d(() => r.background ? { background: r.background } : void 0), F = d(() => n(r.fullscreen ? {
+			teleport: !0,
+			appendTo: "body"
+		} : { teleport: !1 }, y.value.appendTo)), L = ee(r.loading && N.value <= 0), R = null;
+		function z() {
+			R !== null && (clearTimeout(R), R = null);
+		}
+		j(() => [
+			r.loading,
+			N.value,
+			E.value
+		], ([e, t]) => {
+			if (z(), !e || !E.value) {
+				L.value = !1;
+				return;
+			}
+			if (!t) {
+				L.value = !0;
+				return;
+			}
+			L.value = !1, R = setTimeout(() => {
+				L.value = !0, R = null;
+			}, t);
+		}, { immediate: !0 });
+		let B = d(() => r.lock && L.value && E.value), V = !1;
+		return j(B, (e) => {
+			if (e && !V) {
+				q(), V = !0;
+				return;
+			}
+			!e && V && (J(), V = !1);
+		}, { immediate: !0 }), C(() => {
+			z(), V &&= (J(), !1);
+		}), (e, n) => E.value ? (w(), m(c, { key: 0 }, [T.value ? (w(), m("div", b({ key: 0 }, A(g), {
+			class: ["m-loading", { "m-loading--active": L.value }],
+			"aria-busy": L.value || void 0
+		}), [h("div", {
+			class: "m-loading__content",
+			inert: L.value || void 0
+		}, [O(e.$slots, "default")], 8, fe), (w(), f(l, {
+			to: F.value.to,
+			disabled: F.value.disabled
+		}, [_(u, { name: "m-loading" }, {
+			default: M(() => [L.value ? (w(), m("div", {
+				key: 0,
+				class: x(["m-loading-mask", [{ "m-loading-mask--fullscreen": t.fullscreen }, t.customClass]]),
+				style: S(P.value)
+			}, [O(e.$slots, "indicator", {}, () => [_(H, {
+				effect: D.value,
+				size: k.value,
+				text: t.text,
+				"aria-label": t.ariaLabel
+			}, null, 8, [
+				"effect",
+				"size",
+				"text",
+				"aria-label"
+			])])], 6)) : p("", !0)]),
+			_: 3
+		})], 8, ["to", "disabled"]))], 16, de)) : (w(), f(l, {
+			key: 1,
+			to: F.value.to,
+			disabled: F.value.disabled
+		}, [_(u, { name: "m-loading" }, {
+			default: M(() => [L.value ? (w(), m("div", b({ key: 0 }, A(g), {
+				class: ["m-loading-mask m-loading-mask--fullscreen", t.customClass],
+				style: P.value,
+				role: "presentation",
+				"aria-busy": "true"
+			}), [O(e.$slots, "indicator", {}, () => [_(H, {
+				effect: D.value,
+				size: k.value,
+				text: t.text,
+				"aria-label": t.ariaLabel
+			}, null, 8, [
+				"effect",
+				"size",
+				"text",
+				"aria-label"
+			])])], 16)) : p("", !0)]),
+			_: 3
+		})], 8, ["to", "disabled"]))], 64)) : (w(), f(H, b({ key: 1 }, A(g), {
+			effect: D.value,
+			size: k.value,
+			text: t.text,
+			"aria-label": t.ariaLabel
+		}), null, 16, [
+			"effect",
+			"size",
+			"text",
+			"aria-label"
+		]));
+	}
+}), Z = /* @__PURE__ */ new WeakMap();
+function Q(e, ...t) {
+	for (let n of t) {
+		let t = e.getAttribute(n);
+		if (t != null) return t;
+	}
+}
+function me(e) {
+	return F(e) ? e : void 0;
+}
+function he(e, t) {
+	let n = t.value, r = n && typeof n == "object" ? n : void 0, i = typeof n == "boolean" ? n : r ? r.loading !== !1 : !!n, a = !!(t.modifiers.fullscreen || r?.fullscreen), o = !!(t.modifiers.body || r?.body) && !a, s = me(r?.effect ?? Q(e, "m-loading-effect")), c = r?.size, l = Q(e, "m-loading-delay"), u = r?.delay ?? (l == null ? void 0 : Number(l));
+	return {
+		visible: i,
+		text: r?.text ?? Q(e, "m-loading-text"),
+		effect: s,
+		background: r?.background ?? Q(e, "m-loading-background"),
+		customClass: r?.customClass ?? Q(e, "m-loading-custom-class"),
+		size: typeof c == "string" ? c : void 0,
+		fullscreen: a,
+		lock: !!(t.modifiers.lock || r?.lock),
+		body: o,
+		delay: Number.isFinite(u) ? u : void 0,
+		spinner: r?.spinner,
+		mode: `${a}:${o}`
+	};
+}
+function $(e, t) {
+	let n = he(e, t), r = Z.get(e);
+	if (!n.visible) {
+		if (!r) return;
+		Z.delete(e), r.instance.close();
+		return;
+	}
+	if (r && r.mode === n.mode) {
+		r.instance.update(n);
+		return;
+	}
+	r?.instance.destroy(), Z.set(e, {
+		mode: n.mode,
+		instance: Y({
+			target: e,
+			text: n.text,
+			effect: n.effect,
+			background: n.background,
+			customClass: n.customClass,
+			size: n.size,
+			fullscreen: n.fullscreen,
+			lock: n.lock,
+			body: n.body,
+			delay: n.delay,
+			spinner: n.spinner,
+			appContext: t.instance?.$.appContext
+		})
+	});
+}
+var ge = {
+	mounted: $,
+	updated: $,
+	unmounted(e) {
+		let t = Z.get(e);
+		t && (Z.delete(e), t.instance.destroy());
+	}
+};
+//#endregion
+//#region src/components/Loading/useLoading.ts
+function _e(e = {}) {
+	let t = null;
+	function n() {
+		t?.close(), t = null;
+	}
+	return C(() => {
+		t?.destroy(), t = null;
+	}), {
+		open(r = {}) {
+			return n(), t = X.service({
+				...e,
+				...r
+			}), t;
+		},
+		close: n,
+		setText(e) {
+			t?.setText(e);
+		}
+	};
+}
+//#endregion
+export { N as LOADING_EFFECTS, pe as MLoading, F as isLoadingEffect, X as loading, I as normalizeLoadingEffect, _e as useLoading, ge as vLoading };