morya-ui 0.1.1 → 0.2.2

package/dist/mega-menu/index.js

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