morya-ui 0.2.9 → 0.3.1

package/dist/tiered-menu/index.js

@@ -1,49 +1,51 @@
-import { r as e } from "../useComponentAttrs-BTYEe61P.js";
-import { t } from "../Icon-B6IBrJ5S.js";
-import { n, t as r } from "../overlay-oR-5MDuE.js";
-import { t as i } from "../overlayPlacement-Cd20JTD_.js";
-import { t as a } from "../Scrollbar-BYnCO8fv.js";
-import { t as o } from "../lastPointer-CRxcUqdd.js";
-import { t as s } from "../FlyoutSubmenu-B_bkgKag.js";
-import { c } from "../config-BdK5ccNT.js";
+import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
+import { t } from "../Icon-od9Ob-Ay.js";
+import { t as n } from "../useMotionTransition-Bxnnb_9u.js";
+import { n as ee, t as te } from "../overlay-oR-5MDuE.js";
+import { t as r } from "../overlayPlacement-Cd20JTD_.js";
+import { t as i } from "../useFloatingViewportSync-DZdJ7W8n.js";
+import { t as a } from "../Scrollbar-DTeJ8P5b.js";
+import { t as ne } from "../lastPointer-CRxcUqdd.js";
+import { t as o } from "../FlyoutSubmenu-BrUPmJa1.js";
+import { c as re } from "../config-CapALqt3.js";
 import "./style.js";
-import { Fragment as l, Teleport as u, Transition as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createVNode as _, defineComponent as v, mergeProps as y, nextTick as b, onBeforeUnmount as x, openBlock as S, ref as C, renderList as w, toDisplayString as T, unref as E, useAttrs as D, watch as O, withCtx as k } from "vue";
+import { Fragment as s, Teleport as c, Transition as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createVNode as h, defineComponent as g, mergeProps as _, nextTick as v, onBeforeUnmount as y, openBlock as b, ref as x, renderList as S, toDisplayString as C, unref as w, useAttrs as ie, watch as T, withCtx as E } from "vue";
 //#region src/components/TieredMenu/TieredMenu.vue?vue&type=script&setup=true&lang.ts
-var A = ["onMouseenter"], j = {
+var ae = ["onMouseenter"], oe = {
 	key: 0,
 	class: "m-tieredmenu__separator",
 	role: "separator"
-}, M = [
+}, se = [
 	"disabled",
 	"aria-haspopup",
 	"aria-expanded",
 	"onClick"
-], ee = {
+], ce = {
 	key: 0,
 	class: "m-tieredmenu__caret",
 	"aria-hidden": "true"
-}, te = {
+}, le = {
 	key: 0,
 	class: "m-tieredmenu__separator",
 	role: "separator"
-}, ne = ["disabled", "onClick"], re = ["onMouseenter"], ie = {
+}, D = ["disabled", "onClick"], O = ["onMouseenter"], k = {
 	key: 0,
 	class: "m-tieredmenu__separator",
 	role: "separator"
-}, ae = [
+}, A = [
 	"disabled",
 	"aria-haspopup",
 	"aria-expanded",
 	"onClick"
-], N = {
+], j = {
 	key: 0,
 	class: "m-tieredmenu__caret",
 	"aria-hidden": "true"
-}, P = {
+}, M = {
 	key: 0,
 	class: "m-tieredmenu__separator",
 	role: "separator"
-}, F = ["disabled", "onClick"], I = /* @__PURE__ */ v({
+}, N = ["disabled", "onClick"], P = /* @__PURE__ */ g({
 	inheritAttrs: !1,
 	__name: "TieredMenu",
 	props: {
@@ -62,13 +64,22 @@ var A = ["onMouseenter"], j = {
 			type: Boolean,
 			default: !0
 		},
-		appendTo: {}
+		appendTo: {},
+		transition: {
+			type: [String, Boolean],
+			default: void 0
+		}
 	},
 	emits: ["update:modelValue"],
-	setup(v, { emit: I }) {
-		let L = v, R = I, z = D(), { rootAttrs: B } = e(z, () => L.pt), V = c(), H = C(null), U = C(null), W = C(null), G = C({}), K = f(() => n(L.popup ? L : { teleport: !1 }, V.value.appendTo)), q = f(() => L.popup && r(L, V.value.appendTo));
-		function oe() {
-			let { x: e, y: t } = o();
+	setup(g, { emit: P }) {
+		let F = g, I = P, L = ie(), { rootAttrs: R } = e(L, () => F.pt), z = re(), { transitionName: B, transitionCss: V } = n({
+			role: "popup",
+			local: () => F.transition,
+			componentName: "TieredMenu",
+			fallback: "scale-fade"
+		}), H = x(null), U = x(null), W = x(null), G = x({}), K = u(() => ee(F.popup ? F : { teleport: !1 }, z.value.appendTo)), q = u(() => F.popup && te(F, z.value.appendTo));
+		function ue() {
+			let { x: e, y: t } = ne();
 			return {
 				left: e,
 				top: t,
@@ -79,18 +90,18 @@ var A = ["onMouseenter"], j = {
 			};
 		}
 		function J() {
-			!L.popup || !L.modelValue || !q.value || (G.value = i(oe(), L.placement, { minWidth: "12rem" }));
+			!F.popup || !F.modelValue || !q.value || (G.value = r(ue(), F.placement, { minWidth: "12rem" }));
+		}
+		function de() {
+			F.modelValue && J();
 		}
-		function Y() {
-			L.modelValue && J();
+		function Y(e) {
+			e.disabled || e.separator || e.items?.length || (e.command?.(), U.value = null, F.popup && I("update:modelValue", !1));
 		}
 		function X(e) {
-			e.disabled || e.separator || e.items?.length || (e.command?.(), U.value = null, L.popup && R("update:modelValue", !1));
+			e.disabled || e.separator || (e.command?.(), U.value = null, F.popup && I("update:modelValue", !1));
 		}
 		function Z(e) {
-			e.disabled || e.separator || (e.command?.(), U.value = null, L.popup && R("update:modelValue", !1));
-		}
-		function se(e) {
 			if (!(e?.currentTarget instanceof HTMLElement)) return null;
 			let t = e.currentTarget;
 			return t.classList.contains("m-tieredmenu__item") ? t : t.querySelector(".m-tieredmenu__item");
@@ -100,42 +111,45 @@ var A = ["onMouseenter"], j = {
 				U.value = null, W.value = null;
 				return;
 			}
-			U.value = e, W.value = se(n);
+			U.value = e, W.value = Z(n);
 		}
 		function $(e) {
 			let t = e.target;
-			H.value?.contains(t) || document.querySelector(".m-tieredmenu__submenu--teleported")?.contains(t) || (U.value = null, W.value = null, L.popup && L.modelValue && R("update:modelValue", !1));
+			H.value?.contains(t) || document.querySelector(".m-tieredmenu__submenu--teleported")?.contains(t) || (U.value = null, W.value = null, F.popup && F.modelValue && I("update:modelValue", !1));
 		}
-		return O(() => !!(!L.popup || L.modelValue), (e) => {
+		return T(() => !!(!F.popup || F.modelValue), (e) => {
 			e ? document.addEventListener("click", $) : document.removeEventListener("click", $);
-		}, { immediate: !0 }), O(() => L.modelValue, (e) => {
-			L.popup && (e ? (b(J), q.value && (window.addEventListener("resize", Y), window.addEventListener("scroll", Y, !0))) : (window.removeEventListener("resize", Y), window.removeEventListener("scroll", Y, !0)));
-		}, { immediate: !0 }), x(() => {
-			document.removeEventListener("click", $), window.removeEventListener("resize", Y), window.removeEventListener("scroll", Y, !0);
-		}), (e, n) => v.popup ? (S(), p(u, {
+		}, { immediate: !0 }), T(() => F.modelValue, (e) => {
+			F.popup && e && v(J);
+		}, { immediate: !0 }), i(() => !!(F.popup && F.modelValue && q.value), de), y(() => {
+			document.removeEventListener("click", $);
+		}), (e, n) => g.popup ? (b(), d(c, {
 			key: 1,
 			to: K.value.to,
 			disabled: K.value.disabled
-		}, [_(d, { name: "m-scale-fade" }, {
-			default: k(() => [v.modelValue ? (S(), h("div", y({
+		}, [h(l, {
+			name: w(B),
+			css: w(V)
+		}, {
+			default: E(() => [g.modelValue ? (b(), p("div", _({
 				key: 0,
 				ref_key: "root",
 				ref: H
-			}, E(B), {
+			}, w(R), {
 				class: ["m-tieredmenu m-tieredmenu--popup", { "m-tieredmenu--teleported": q.value }],
 				style: q.value ? G.value : void 0,
 				role: "menu"
-			}), [_(a, {
+			}), [h(a, {
 				class: "m-tieredmenu__scroll",
 				"fit-content": "",
 				"wrap-class": "m-tieredmenu__scroll-wrap",
 				"view-class": "m-tieredmenu__scroll-view"
 			}, {
-				default: k(() => [(S(!0), h(l, null, w(v.model, (e, n) => (S(), h("div", {
+				default: E(() => [(b(!0), p(s, null, S(g.model, (e, n) => (b(), p("div", {
 					key: `${e.label ?? "sep"}-${n}`,
 					class: "m-tieredmenu__row",
 					onMouseenter: (t) => Q(n, e, t)
-				}, [e.separator ? (S(), h("div", ie)) : (S(), h("button", {
+				}, [e.separator ? (b(), p("div", k)) : (b(), p("button", {
 					key: 1,
 					type: "button",
 					class: "m-tieredmenu__item",
@@ -143,54 +157,54 @@ var A = ["onMouseenter"], j = {
 					disabled: e.disabled,
 					"aria-haspopup": e.items?.length ? "menu" : void 0,
 					"aria-expanded": e.items?.length ? U.value === n : void 0,
-					onClick: (t) => e.items?.length ? Q(n, e, t) : X(e)
-				}, [g("span", null, T(e.label), 1), e.items?.length ? (S(), h("span", N, [_(t, {
+					onClick: (t) => e.items?.length ? Q(n, e, t) : Y(e)
+				}, [m("span", null, C(e.label), 1), e.items?.length ? (b(), p("span", j, [h(t, {
 					name: "chevron-right",
 					size: "sm"
-				})])) : m("", !0)], 8, ae)), _(s, {
+				})])) : f("", !0)], 8, A)), h(o, {
 					open: U.value === n && !!e.items?.length,
 					anchor: U.value === n ? W.value : null,
 					"panel-class": "m-tieredmenu__submenu"
 				}, {
-					default: k(() => [_(a, {
+					default: E(() => [h(a, {
 						class: "m-tieredmenu__submenu-scroll",
 						"fit-content": "",
 						"wrap-class": "m-tieredmenu__submenu-wrap-inner",
 						"view-class": "m-tieredmenu__submenu-view"
 					}, {
-						default: k(() => [(S(!0), h(l, null, w(e.items, (e, t) => (S(), h(l, { key: `${e.label ?? "sep"}-${t}` }, [e.separator ? (S(), h("div", P)) : (S(), h("button", {
+						default: E(() => [(b(!0), p(s, null, S(e.items, (e, t) => (b(), p(s, { key: `${e.label ?? "sep"}-${t}` }, [e.separator ? (b(), p("div", M)) : (b(), p("button", {
 							key: 1,
 							type: "button",
 							class: "m-tieredmenu__item",
 							role: "menuitem",
 							disabled: e.disabled,
-							onClick: (t) => Z(e)
-						}, T(e.label), 9, F))], 64))), 128))]),
+							onClick: (t) => X(e)
+						}, C(e.label), 9, N))], 64))), 128))]),
 						_: 2
 					}, 1024)]),
 					_: 2
-				}, 1032, ["open", "anchor"])], 40, re))), 128))]),
+				}, 1032, ["open", "anchor"])], 40, O))), 128))]),
 				_: 1
-			})], 16)) : m("", !0)]),
+			})], 16)) : f("", !0)]),
 			_: 1
-		})], 8, ["to", "disabled"])) : (S(), h("div", y({
+		}, 8, ["name", "css"])], 8, ["to", "disabled"])) : (b(), p("div", _({
 			key: 0,
 			ref_key: "root",
 			ref: H
-		}, E(B), {
+		}, w(R), {
 			class: "m-tieredmenu",
 			role: "menu"
-		}), [_(a, {
+		}), [h(a, {
 			class: "m-tieredmenu__scroll",
 			"fit-content": "",
 			"wrap-class": "m-tieredmenu__scroll-wrap",
 			"view-class": "m-tieredmenu__scroll-view"
 		}, {
-			default: k(() => [(S(!0), h(l, null, w(v.model, (e, n) => (S(), h("div", {
+			default: E(() => [(b(!0), p(s, null, S(g.model, (e, n) => (b(), p("div", {
 				key: `${e.label ?? "sep"}-${n}`,
 				class: "m-tieredmenu__row",
 				onMouseenter: (t) => Q(n, e, t)
-			}, [e.separator ? (S(), h("div", j)) : (S(), h("button", {
+			}, [e.separator ? (b(), p("div", oe)) : (b(), p("button", {
 				key: 1,
 				type: "button",
 				class: "m-tieredmenu__item",
@@ -198,36 +212,36 @@ var A = ["onMouseenter"], j = {
 				disabled: e.disabled,
 				"aria-haspopup": e.items?.length ? "menu" : void 0,
 				"aria-expanded": e.items?.length ? U.value === n : void 0,
-				onClick: (t) => e.items?.length ? Q(n, e, t) : X(e)
-			}, [g("span", null, T(e.label), 1), e.items?.length ? (S(), h("span", ee, [_(t, {
+				onClick: (t) => e.items?.length ? Q(n, e, t) : Y(e)
+			}, [m("span", null, C(e.label), 1), e.items?.length ? (b(), p("span", ce, [h(t, {
 				name: "chevron-right",
 				size: "sm"
-			})])) : m("", !0)], 8, M)), _(s, {
+			})])) : f("", !0)], 8, se)), h(o, {
 				open: U.value === n && !!e.items?.length,
 				anchor: U.value === n ? W.value : null,
 				"panel-class": "m-tieredmenu__submenu"
 			}, {
-				default: k(() => [_(a, {
+				default: E(() => [h(a, {
 					class: "m-tieredmenu__submenu-scroll",
 					"fit-content": "",
 					"wrap-class": "m-tieredmenu__submenu-wrap-inner",
 					"view-class": "m-tieredmenu__submenu-view"
 				}, {
-					default: k(() => [(S(!0), h(l, null, w(e.items, (e, t) => (S(), h(l, { key: `${e.label ?? "sep"}-${t}` }, [e.separator ? (S(), h("div", te)) : (S(), h("button", {
+					default: E(() => [(b(!0), p(s, null, S(e.items, (e, t) => (b(), p(s, { key: `${e.label ?? "sep"}-${t}` }, [e.separator ? (b(), p("div", le)) : (b(), p("button", {
 						key: 1,
 						type: "button",
 						class: "m-tieredmenu__item",
 						role: "menuitem",
 						disabled: e.disabled,
-						onClick: (t) => Z(e)
-					}, T(e.label), 9, ne))], 64))), 128))]),
+						onClick: (t) => X(e)
+					}, C(e.label), 9, D))], 64))), 128))]),
 					_: 2
 				}, 1024)]),
 				_: 2
-			}, 1032, ["open", "anchor"])], 40, A))), 128))]),
+			}, 1032, ["open", "anchor"])], 40, ae))), 128))]),
 			_: 1
 		})], 16));
 	}
 });
 //#endregion
-export { I as MTieredMenu };
+export { P as MTieredMenu };