morya-ui 0.2.2 → 0.2.4

package/dist/tiered-menu/index.js

@@ -2,54 +2,48 @@ 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 i } from "../overlayPlacement-Cd20JTD_.js";
-import { t as a } from "../lastPointer-CRxcUqdd.js";
-import { c as o } from "../config-CI8_WBbE.js";
+import { t as a } from "../Scrollbar-DoNZvgX2.js";
+import { t as o } from "../lastPointer-CRxcUqdd.js";
+import { t as s } from "../FlyoutSubmenu-BC_cl17_.js";
+import { c } from "../config-CI8_WBbE.js";
 import "./style.js";
-import { Fragment as s, Teleport as c, Transition as l, computed as u, createBlock as ee, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createVNode as m, defineComponent as h, mergeProps as g, nextTick as _, onBeforeUnmount as v, openBlock as y, ref as b, renderList as x, toDisplayString as S, unref as C, useAttrs as w, watch as T, withCtx as E } from "vue";
+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";
 //#region src/components/TieredMenu/TieredMenu.vue?vue&type=script&setup=true&lang.ts
-var D = ["onMouseenter"], O = {
+var A = ["onMouseenter"], j = {
 	key: 0,
 	class: "m-tieredmenu__separator",
 	role: "separator"
-}, te = [
+}, M = [
 	"disabled",
 	"aria-haspopup",
 	"aria-expanded",
 	"onClick"
-], ne = {
+], ee = {
 	key: 0,
 	class: "m-tieredmenu__caret",
 	"aria-hidden": "true"
-}, re = {
-	key: 2,
-	class: "m-tieredmenu__submenu",
-	role: "menu"
-}, ie = {
+}, te = {
 	key: 0,
 	class: "m-tieredmenu__separator",
 	role: "separator"
-}, ae = ["disabled", "onClick"], k = ["onMouseenter"], A = {
+}, ne = ["disabled", "onClick"], re = ["onMouseenter"], ie = {
 	key: 0,
 	class: "m-tieredmenu__separator",
 	role: "separator"
-}, j = [
+}, ae = [
 	"disabled",
 	"aria-haspopup",
 	"aria-expanded",
 	"onClick"
-], M = {
+], N = {
 	key: 0,
 	class: "m-tieredmenu__caret",
 	"aria-hidden": "true"
-}, N = {
-	key: 2,
-	class: "m-tieredmenu__submenu",
-	role: "menu"
 }, P = {
 	key: 0,
 	class: "m-tieredmenu__separator",
 	role: "separator"
-}, F = ["disabled", "onClick"], I = /* @__PURE__ */ h({
+}, F = ["disabled", "onClick"], I = /* @__PURE__ */ v({
 	inheritAttrs: !1,
 	__name: "TieredMenu",
 	props: {
@@ -71,10 +65,10 @@ var D = ["onMouseenter"], O = {
 		appendTo: {}
 	},
 	emits: ["update:modelValue"],
-	setup(h, { emit: I }) {
-		let L = h, R = w(), { rootAttrs: z } = e(R, () => L.pt), B = I, V = o(), H = b(null), U = b(null), W = b({}), G = u(() => n(L.popup ? L : { teleport: !1 }, V.value.appendTo)), K = u(() => L.popup && r(L, V.value.appendTo));
-		function q() {
-			let { x: e, y: t } = a();
+	setup(v, { emit: I }) {
+		let L = v, R = D(), { rootAttrs: z } = e(R, () => L.pt), B = I, 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();
 			return {
 				left: e,
 				top: t,
@@ -85,7 +79,7 @@ var D = ["onMouseenter"], O = {
 			};
 		}
 		function J() {
-			!L.popup || !L.modelValue || !K.value || (W.value = i(q(), L.placement, { minWidth: "12rem" }));
+			!L.popup || !L.modelValue || !q.value || (G.value = i(oe(), L.placement, { minWidth: "12rem" }));
 		}
 		function Y() {
 			L.modelValue && J();
@@ -96,40 +90,107 @@ var D = ["onMouseenter"], O = {
 		function Z(e) {
 			e.disabled || e.separator || (e.command?.(), U.value = null, L.popup && B("update:modelValue", !1));
 		}
-		function Q(e, t) {
+		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");
+		}
+		function Q(e, t, n) {
 			if (t.disabled || !t.items?.length) {
-				U.value = null;
+				U.value = null, W.value = null;
 				return;
 			}
-			U.value = e;
+			U.value = e, W.value = se(n);
 		}
 		function $(e) {
-			H.value && !H.value.contains(e.target) && (U.value = null, L.popup && L.modelValue && B("update:modelValue", !1));
+			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 && B("update:modelValue", !1));
 		}
-		return T(() => !!(!L.popup || L.modelValue), (e) => {
+		return O(() => !!(!L.popup || L.modelValue), (e) => {
 			e ? document.addEventListener("click", $) : document.removeEventListener("click", $);
-		}, { immediate: !0 }), T(() => L.modelValue, (e) => {
-			L.popup && (e ? (_(J), K.value && (window.addEventListener("resize", Y), window.addEventListener("scroll", Y, !0))) : (window.removeEventListener("resize", Y), window.removeEventListener("scroll", Y, !0)));
-		}, { immediate: !0 }), v(() => {
+		}, { 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) => h.popup ? (y(), ee(c, {
+		}), (e, n) => v.popup ? (S(), p(u, {
 			key: 1,
-			to: G.value.to,
-			disabled: G.value.disabled
-		}, [m(l, { name: "m-scale-fade" }, {
-			default: E(() => [h.modelValue ? (y(), f("div", g({
+			to: K.value.to,
+			disabled: K.value.disabled
+		}, [_(d, { name: "m-scale-fade" }, {
+			default: k(() => [v.modelValue ? (S(), h("div", y({
 				key: 0,
 				ref_key: "root",
 				ref: H
-			}, C(z), {
-				class: ["m-tieredmenu m-tieredmenu--popup", { "m-tieredmenu--teleported": K.value }],
-				style: K.value ? W.value : void 0,
+			}, E(z), {
+				class: ["m-tieredmenu m-tieredmenu--popup", { "m-tieredmenu--teleported": q.value }],
+				style: q.value ? G.value : void 0,
 				role: "menu"
-			}), [(y(!0), f(s, null, x(h.model, (e, n) => (y(), f("div", {
+			}), [_(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", {
+					key: `${e.label ?? "sep"}-${n}`,
+					class: "m-tieredmenu__row",
+					onMouseenter: (t) => Q(n, e, t)
+				}, [e.separator ? (S(), h("div", ie)) : (S(), h("button", {
+					key: 1,
+					type: "button",
+					class: "m-tieredmenu__item",
+					role: "menuitem",
+					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, {
+					name: "chevron-right",
+					size: "sm"
+				})])) : m("", !0)], 8, ae)), _(s, {
+					open: U.value === n && !!e.items?.length,
+					anchor: U.value === n ? W.value : null,
+					"panel-class": "m-tieredmenu__submenu"
+				}, {
+					default: k(() => [_(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", {
+							key: 1,
+							type: "button",
+							class: "m-tieredmenu__item",
+							role: "menuitem",
+							disabled: e.disabled,
+							onClick: (t) => Z(e)
+						}, T(e.label), 9, F))], 64))), 128))]),
+						_: 2
+					}, 1024)]),
+					_: 2
+				}, 1032, ["open", "anchor"])], 40, re))), 128))]),
+				_: 1
+			})], 16)) : m("", !0)]),
+			_: 1
+		})], 8, ["to", "disabled"])) : (S(), h("div", y({
+			key: 0,
+			ref_key: "root",
+			ref: H
+		}, E(z), {
+			class: "m-tieredmenu",
+			role: "menu"
+		}), [_(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", {
 				key: `${e.label ?? "sep"}-${n}`,
 				class: "m-tieredmenu__row",
-				onMouseenter: (t) => Q(n, e)
-			}, [e.separator ? (y(), f("div", A)) : (y(), f("button", {
+				onMouseenter: (t) => Q(n, e, t)
+			}, [e.separator ? (S(), h("div", j)) : (S(), h("button", {
 				key: 1,
 				type: "button",
 				class: "m-tieredmenu__item",
@@ -137,50 +198,35 @@ var D = ["onMouseenter"], O = {
 				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) : X(e)
-			}, [p("span", null, S(e.label), 1), e.items?.length ? (y(), f("span", M, [m(t, {
+				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, {
 				name: "chevron-right",
 				size: "sm"
-			})])) : d("", !0)], 8, j)), e.items?.length && U.value === n ? (y(), f("div", N, [(y(!0), f(s, null, x(e.items, (e, t) => (y(), f(s, { key: `${e.label ?? "sep"}-${t}` }, [e.separator ? (y(), f("div", P)) : (y(), f("button", {
-				key: 1,
-				type: "button",
-				class: "m-tieredmenu__item",
-				role: "menuitem",
-				disabled: e.disabled,
-				onClick: (t) => Z(e)
-			}, S(e.label), 9, F))], 64))), 128))])) : d("", !0)], 40, k))), 128))], 16)) : d("", !0)]),
+			})])) : m("", !0)], 8, M)), _(s, {
+				open: U.value === n && !!e.items?.length,
+				anchor: U.value === n ? W.value : null,
+				"panel-class": "m-tieredmenu__submenu"
+			}, {
+				default: k(() => [_(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", {
+						key: 1,
+						type: "button",
+						class: "m-tieredmenu__item",
+						role: "menuitem",
+						disabled: e.disabled,
+						onClick: (t) => Z(e)
+					}, T(e.label), 9, ne))], 64))), 128))]),
+					_: 2
+				}, 1024)]),
+				_: 2
+			}, 1032, ["open", "anchor"])], 40, A))), 128))]),
 			_: 1
-		})], 8, ["to", "disabled"])) : (y(), f("div", g({
-			key: 0,
-			ref_key: "root",
-			ref: H
-		}, C(z), {
-			class: "m-tieredmenu",
-			role: "menu"
-		}), [(y(!0), f(s, null, x(h.model, (e, n) => (y(), f("div", {
-			key: `${e.label ?? "sep"}-${n}`,
-			class: "m-tieredmenu__row",
-			onMouseenter: (t) => Q(n, e)
-		}, [e.separator ? (y(), f("div", O)) : (y(), f("button", {
-			key: 1,
-			type: "button",
-			class: "m-tieredmenu__item",
-			role: "menuitem",
-			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) : X(e)
-		}, [p("span", null, S(e.label), 1), e.items?.length ? (y(), f("span", ne, [m(t, {
-			name: "chevron-right",
-			size: "sm"
-		})])) : d("", !0)], 8, te)), e.items?.length && U.value === n ? (y(), f("div", re, [(y(!0), f(s, null, x(e.items, (e, t) => (y(), f(s, { key: `${e.label ?? "sep"}-${t}` }, [e.separator ? (y(), f("div", ie)) : (y(), f("button", {
-			key: 1,
-			type: "button",
-			class: "m-tieredmenu__item",
-			role: "menuitem",
-			disabled: e.disabled,
-			onClick: (t) => Z(e)
-		}, S(e.label), 9, ae))], 64))), 128))])) : d("", !0)], 40, D))), 128))], 16));
+		})], 16));
 	}
 });
 //#endregion