morya-ui 0.2.8 → 0.3.0

package/dist/mega-menu/index.js

@@ -1,30 +1,32 @@
-import { r as e } from "../useComponentAttrs-BTYEe61P.js";
-import { t } from "../Icon-DfpIfo2L.js";
-import { n, t as r } from "../overlay-oR-5MDuE.js";
-import { t as ee } from "../overlayPlacement-Cd20JTD_.js";
-import { t as i } from "../useMenuKeyboard-BedmYE4W.js";
-import { t as te } from "../icon-xUOyawgJ.js";
-import { c as a } from "../config-BdK5ccNT.js";
-import { n as o } from "../locale-B36KH7c3.js";
+import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
+import { t } from "../Icon-lcN1rS87.js";
+import { t as n } from "../useMotionTransition-Bxnnb_9u.js";
+import { n as r, t as ee } from "../overlay-oR-5MDuE.js";
+import { t as te } from "../overlayPlacement-Cd20JTD_.js";
+import { t as i } from "../useFloatingViewportSync-DZdJ7W8n.js";
+import { t as a } from "../useMenuKeyboard-BedmYE4W.js";
+import { t as ne } from "../icon-DWXkh-RM.js";
+import { c as re } from "../config-CapALqt3.js";
+import { n as ie } from "../locale-Bzm2nbEp.js";
 import "./style.js";
-import { Fragment as s, Teleport as ne, Transition as re, computed as c, createBlock as ie, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeProps as ae, nextTick as h, normalizeClass as g, normalizeStyle as oe, onBeforeUnmount as se, onMounted as ce, openBlock as _, ref as v, renderList as y, toDisplayString as b, unref as x, useAttrs as S, watch as C, withCtx as le, withModifiers as w } from "vue";
+import { Fragment as o, Teleport as s, Transition as ae, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as oe, createTextVNode as se, createVNode as f, defineComponent as p, mergeProps as ce, nextTick as m, normalizeClass as h, normalizeStyle as g, onBeforeUnmount as _, onMounted as le, openBlock as v, ref as y, renderList as b, toDisplayString as x, unref as S, useAttrs as C, watch as w, withCtx as ue, withModifiers as T } from "vue";
 //#region src/components/MegaMenu/MegaMenu.vue?vue&type=script&setup=true&lang.ts
-var ue = ["aria-label"], de = [
+var de = ["aria-label"], fe = [
 	"disabled",
 	"tabindex",
 	"aria-expanded",
 	"aria-haspopup",
 	"onClick",
 	"onFocus"
-], fe = {
+], pe = {
 	key: 0,
 	class: "m-megamenu__icon",
 	"aria-hidden": "true"
-}, pe = [
+}, me = [
 	"disabled",
 	"tabindex",
 	"onClick"
-], T = /* @__PURE__ */ m({
+], E = /* @__PURE__ */ p({
 	inheritAttrs: !1,
 	__name: "MegaMenu",
 	props: {
@@ -35,184 +37,194 @@ var ue = ["aria-label"], de = [
 			type: Boolean,
 			default: !0
 		},
-		appendTo: {}
+		appendTo: {},
+		transition: {
+			type: [String, Boolean],
+			default: void 0
+		}
 	},
 	emits: ["update:selectedKey", "select"],
-	setup(m, { emit: T }) {
-		let E = m, D = T, me = S(), { rootAttrs: O } = e(me, () => E.pt), k = a(), he = o(), A = v(null), j = v(null), M = v([]), N = v({}), P = c(() => n(E, k.value.appendTo)), F = c(() => r(E, k.value.appendTo));
-		function I(e, t) {
-			M.value[t] = e instanceof HTMLElement ? e : null;
-		}
-		function L() {
-			if (!F.value || A.value == null) return;
-			let e = M.value[A.value];
+	setup(p, { emit: E }) {
+		let D = p, O = E, he = C(), { rootAttrs: ge } = e(he, () => D.pt), k = re(), { transitionName: _e, transitionCss: A } = n({
+			role: "popup",
+			local: () => D.transition,
+			componentName: "MegaMenu",
+			fallback: "scale-fade"
+		}), j = ie(), M = y(null), N = y(null), P = y([]), F = y({}), I = c(() => r(D, k.value.appendTo)), L = c(() => ee(D, k.value.appendTo));
+		function ve(e, t) {
+			P.value[t] = e instanceof HTMLElement ? e : null;
+		}
+		function R() {
+			if (!L.value || M.value == null) return;
+			let e = P.value[M.value];
 			if (!e) return;
 			let t = e.getBoundingClientRect();
-			N.value = ee(t, "bottom-start", { gap: 4 });
-		}
-		function R(e) {
-			return e.key ?? e.label;
+			F.value = te(t, "bottom-start", { gap: 4 });
 		}
 		function z(e) {
-			return !!(E.selectedKey && R(e) === E.selectedKey);
+			return e.key ?? e.label;
 		}
 		function B(e) {
-			return te(e.icon);
+			return !!(D.selectedKey && z(e) === D.selectedKey);
 		}
 		function V(e) {
-			e.disabled || (e.command?.(), D("update:selectedKey", R(e)), D("select", e));
+			return ne(e.icon);
+		}
+		function H(e) {
+			e.disabled || (e.command?.(), O("update:selectedKey", z(e)), O("select", e));
 		}
-		function H(e, t) {
+		function U(e, t) {
 			if (!t.disabled) {
-				if (W.setActive(e), !t.items?.length) {
-					V(t), J();
+				if (G.setActive(e), !t.items?.length) {
+					H(t), Y();
 					return;
 				}
-				A.value = A.value === e ? null : e, A.value != null && h(() => L());
+				M.value = M.value === e ? null : e, M.value != null && m(() => R());
 			}
 		}
-		let U = c(() => A.value == null ? [] : (E.model[A.value]?.items ?? []).flat()), W = i({
-			itemCount: () => E.model.length,
-			isItemDisabled: (e) => !!E.model[e]?.disabled,
+		let W = c(() => M.value == null ? [] : (D.model[M.value]?.items ?? []).flat()), G = a({
+			itemCount: () => D.model.length,
+			isItemDisabled: (e) => !!D.model[e]?.disabled,
 			orientation: "horizontal",
 			initialActiveIndex: 0,
 			onActivate: (e) => {
-				let t = E.model[e];
-				t && H(e, t);
+				let t = D.model[e];
+				t && U(e, t);
 			}
-		}), G = i({
-			itemCount: () => U.value.length,
-			isItemDisabled: (e) => !!U.value[e]?.disabled,
-			enabled: () => A.value != null,
+		}), K = a({
+			itemCount: () => W.value.length,
+			isItemDisabled: (e) => !!W.value[e]?.disabled,
+			enabled: () => M.value != null,
 			onActivate: (e) => {
-				let t = U.value[e];
-				t && Z(t);
+				let t = W.value[e];
+				t && Q(t);
 			}
 		});
-		function K(e) {
-			M.value[e]?.focus({ preventScroll: !0 });
+		function q(e) {
+			P.value[e]?.focus({ preventScroll: !0 });
 		}
-		function ge() {
-			return j.value?.querySelector(".m-megamenu__panel") || document.querySelector(".m-megamenu__panel--teleported");
+		function ye() {
+			return N.value?.querySelector(".m-megamenu__panel") || document.querySelector(".m-megamenu__panel--teleported");
 		}
-		function q() {
-			let e = G.activeIndex.value;
-			e < 0 || ge()?.querySelectorAll(".m-megamenu__link")[e]?.focus({ preventScroll: !0 });
+		function J() {
+			let e = K.activeIndex.value;
+			e < 0 || ye()?.querySelectorAll(".m-megamenu__link")[e]?.focus({ preventScroll: !0 });
 		}
-		function _e(e, t) {
-			let n = A.value == null ? [] : E.model[A.value]?.items ?? [], r = t;
+		function be(e, t) {
+			let n = M.value == null ? [] : D.model[M.value]?.items ?? [], r = t;
 			for (let t = 0; t < e; t++) r += n[t]?.length ?? 0;
-			return G.tabindexFor(r);
+			return K.tabindexFor(r);
 		}
-		function J(e = !1) {
-			let t = A.value;
-			A.value = null, G.reset(), e && t != null && K(t);
+		function Y(e = !1) {
+			let t = M.value;
+			M.value = null, K.reset(), e && t != null && q(t);
 		}
-		function Y(e, t = !1) {
-			A.value = e, W.setActive(e), h(() => {
-				L(), t && (G.moveFirst(), q());
+		function X(e, t = !1) {
+			M.value = e, G.setActive(e), m(() => {
+				R(), t && (K.moveFirst(), J());
 			});
 		}
-		function X(e) {
-			W.move(e);
-			let t = W.activeIndex.value, n = E.model[t];
-			A.value != null && (n?.items?.length ? Y(t, !0) : J()), K(t);
+		function Z(e) {
+			G.move(e);
+			let t = G.activeIndex.value, n = D.model[t];
+			M.value != null && (n?.items?.length ? X(t, !0) : Y()), q(t);
 		}
-		function ve(e) {
+		function xe(e) {
 			if (e.key === "Escape") {
-				A.value != null && (e.preventDefault(), J(!0));
+				M.value != null && (e.preventDefault(), Y(!0));
 				return;
 			}
 			if (e.key === "ArrowDown" || e.key === "ArrowUp") {
 				e.preventDefault();
-				let t = W.activeIndex.value, n = E.model[t];
-				n?.items?.length && !n.disabled && Y(t, !0);
+				let t = G.activeIndex.value, n = D.model[t];
+				n?.items?.length && !n.disabled && X(t, !0);
 				return;
 			}
 			if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
-				e.preventDefault(), X(e.key === "ArrowRight" ? 1 : -1);
+				e.preventDefault(), Z(e.key === "ArrowRight" ? 1 : -1);
 				return;
 			}
-			W.onKeydown(e);
+			G.onKeydown(e);
 		}
-		function ye(e) {
+		function Se(e) {
 			if (e.stopPropagation(), e.key === "Escape") {
-				e.preventDefault(), J(!0);
+				e.preventDefault(), Y(!0);
 				return;
 			}
 			if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
-				e.preventDefault(), X(e.key === "ArrowRight" ? 1 : -1);
+				e.preventDefault(), Z(e.key === "ArrowRight" ? 1 : -1);
 				return;
 			}
-			G.onKeydown(e);
+			K.onKeydown(e);
 		}
-		function Z(e) {
-			e.disabled || (V(e), J(!0));
+		function Q(e) {
+			e.disabled || (H(e), Y(!0));
 		}
-		C(W.activeIndex, (e) => {
-			e >= 0 && A.value == null && K(e);
-		}), C(G.activeIndex, () => {
-			A.value != null && q();
+		w(G.activeIndex, (e) => {
+			e >= 0 && M.value == null && q(e);
+		}), w(K.activeIndex, () => {
+			M.value != null && J();
 		});
-		function Q(e) {
+		function $(e) {
 			let t = e.target;
-			j.value?.contains(t) || document.querySelector(".m-megamenu__panel--teleported")?.contains(t) || J();
+			N.value?.contains(t) || document.querySelector(".m-megamenu__panel--teleported")?.contains(t) || Y();
 		}
-		function $() {
-			A.value != null && L();
+		function Ce() {
+			M.value != null && R();
 		}
-		return C(A, (e) => {
-			e != null && F.value ? (window.addEventListener("resize", $), window.addEventListener("scroll", $, !0)) : (window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0));
-		}), ce(() => document.addEventListener("click", Q)), se(() => {
-			document.removeEventListener("click", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0);
-		}), (e, n) => (_(), u("nav", ae(x(O), {
+		return i(() => M.value != null && L.value, Ce), le(() => document.addEventListener("click", $)), _(() => {
+			document.removeEventListener("click", $);
+		}), (e, n) => (v(), d("nav", ce(S(ge), {
 			ref_key: "root",
-			ref: j,
+			ref: N,
 			class: "m-megamenu",
-			"aria-label": x(he).megaMenu,
-			onKeydown: ve
-		}), [(_(!0), u(s, null, y(m.model, (e, n) => (_(), u("div", {
+			"aria-label": S(j).megaMenu,
+			onKeydown: xe
+		}), [(v(!0), d(o, null, b(p.model, (e, n) => (v(), d("div", {
 			key: `${e.label}-${n}`,
-			class: g(["m-megamenu__item", { "m-megamenu__item--open": A.value === n }])
-		}, [d("button", {
+			class: h(["m-megamenu__item", { "m-megamenu__item--open": M.value === n }])
+		}, [oe("button", {
 			ref_for: !0,
-			ref: (e) => I(e, n),
+			ref: (e) => ve(e, n),
 			type: "button",
-			class: g(["m-megamenu__trigger", { "m-megamenu__trigger--selected": z(e) }]),
+			class: h(["m-megamenu__trigger", { "m-megamenu__trigger--selected": B(e) }]),
 			disabled: e.disabled,
-			tabindex: x(W).tabindexFor(n),
-			"aria-expanded": e.items?.length ? A.value === n : void 0,
+			tabindex: S(G).tabindexFor(n),
+			"aria-expanded": e.items?.length ? M.value === n : void 0,
 			"aria-haspopup": e.items?.length ? "menu" : void 0,
-			onClick: w((t) => H(n, e), ["stop"]),
-			onFocus: (e) => x(W).setActive(n)
-		}, [B(e) ? (_(), u("span", fe, [p(t, {
-			name: B(e),
+			onClick: T((t) => U(n, e), ["stop"]),
+			onFocus: (e) => S(G).setActive(n)
+		}, [V(e) ? (v(), d("span", pe, [f(t, {
+			name: V(e),
 			size: "sm"
-		}, null, 8, ["name"])])) : l("", !0), f(" " + b(e.label), 1)], 42, de), (_(), ie(ne, {
-			to: P.value.to,
-			disabled: P.value.disabled
-		}, [p(re, { name: "m-scale-fade" }, {
-			default: le(() => [e.items?.length && A.value === n ? (_(), u("div", {
+		}, null, 8, ["name"])])) : u("", !0), se(" " + x(e.label), 1)], 42, fe), (v(), l(s, {
+			to: I.value.to,
+			disabled: I.value.disabled
+		}, [f(ae, {
+			name: S(_e),
+			css: S(A)
+		}, {
+			default: ue(() => [e.items?.length && M.value === n ? (v(), d("div", {
 				key: 0,
-				class: g(["m-megamenu__panel", { "m-megamenu__panel--teleported": F.value }]),
-				style: oe(F.value ? N.value : void 0),
+				class: h(["m-megamenu__panel", { "m-megamenu__panel--teleported": L.value }]),
+				style: g(L.value ? F.value : void 0),
 				role: "menu",
-				onKeydown: ye
-			}, [(_(!0), u(s, null, y(e.items, (e, t) => (_(), u("div", {
+				onKeydown: Se
+			}, [(v(!0), d(o, null, b(e.items, (e, t) => (v(), d("div", {
 				key: t,
 				class: "m-megamenu__column"
-			}, [(_(!0), u(s, null, y(e, (e, n) => (_(), u("button", {
+			}, [(v(!0), d(o, null, b(e, (e, n) => (v(), d("button", {
 				key: `${e.label}-${n}`,
 				type: "button",
-				class: g(["m-megamenu__link", { "m-megamenu__link--selected": z(e) }]),
+				class: h(["m-megamenu__link", { "m-megamenu__link--selected": B(e) }]),
 				role: "menuitem",
 				disabled: e.disabled,
-				tabindex: _e(t, n),
-				onClick: w((t) => Z(e), ["stop"])
-			}, b(e.label), 11, pe))), 128))]))), 128))], 38)) : l("", !0)]),
+				tabindex: be(t, n),
+				onClick: T((t) => Q(e), ["stop"])
+			}, x(e.label), 11, me))), 128))]))), 128))], 38)) : u("", !0)]),
 			_: 2
-		}, 1024)], 8, ["to", "disabled"]))], 2))), 128))], 16, ue));
+		}, 1032, ["name", "css"])], 8, ["to", "disabled"]))], 2))), 128))], 16, de));
 	}
 });
 //#endregion
-export { T as MMegaMenu };
+export { E as MMegaMenu };