morya-ui 0.2.2 → 0.2.4

package/dist/context-menu/index.js

@@ -1,74 +1,108 @@
 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 "../icon-xUOyawgJ.js";
-import { t as a } from "../key-CaQYVkjh.js";
-import { c as o } from "../config-CI8_WBbE.js";
+import { t as i } from "../Scrollbar-DoNZvgX2.js";
+import { t as a } from "../icon-xUOyawgJ.js";
+import { t as o } from "../key-CaQYVkjh.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 d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createVNode as h, defineComponent as g, mergeModels as _, mergeProps as v, nextTick as y, normalizeClass as b, normalizeStyle as x, onBeforeUnmount as S, openBlock as C, ref as w, renderList as T, renderSlot as E, toDisplayString as D, unref as O, useAttrs as k, useModel as A, watch as j, withCtx as M, withModifiers as N } 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, mergeModels as y, mergeProps as b, nextTick as x, normalizeClass as S, normalizeStyle as C, onBeforeUnmount as w, openBlock as T, ref as E, renderList as D, renderSlot as O, toDisplayString as k, unref as A, useAttrs as j, useModel as M, watch as N, withCtx as P, withModifiers as F } from "vue";
 //#region src/components/ContextMenu/ContextMenuNodes.vue?vue&type=script&setup=true&lang.ts
-var P = {
+var I = {
 	key: 0,
 	class: "m-contextmenu__separator",
 	role: "separator"
-}, F = ["onMouseenter"], I = ["disabled"], L = {
+}, L = ["onMouseenter"], R = ["disabled"], z = {
 	key: 0,
 	class: "m-contextmenu__icon",
 	"aria-hidden": "true"
-}, R = { class: "m-contextmenu__label" }, z = {
+}, B = { class: "m-contextmenu__label" }, V = {
 	key: 1,
 	class: "m-contextmenu__shortcut"
-}, B = {
+}, H = {
 	class: "m-contextmenu__caret",
 	"aria-hidden": "true"
-}, V = {
-	key: 0,
-	class: "m-contextmenu__submenu",
-	role: "menu"
-}, H = ["disabled", "onClick"], U = {
+}, U = ["disabled", "onClick"], W = {
 	key: 0,
 	class: "m-contextmenu__icon",
 	"aria-hidden": "true"
-}, W = { class: "m-contextmenu__label" }, G = {
+}, G = { class: "m-contextmenu__label" }, K = {
 	key: 1,
 	class: "m-contextmenu__shortcut"
-}, K = /* @__PURE__ */ g({
+}, q = /* @__PURE__ */ v({
 	__name: "ContextMenuNodes",
 	props: { items: {} },
 	emits: ["activate"],
 	setup(e, { emit: n }) {
-		let r = w(null);
-		function o(e, t) {
-			return a(e, t, "cm");
+		let r = E(null), c = E(null), u;
+		function d() {
+			u && clearTimeout(u), u = void 0;
+		}
+		function f() {
+			d(), u = setTimeout(() => {
+				r.value = null, c.value = null;
+			}, 150);
+		}
+		function p(e, t) {
+			return o(e, t, "cm");
+		}
+		function v(e) {
+			return a(e.icon);
+		}
+		function y(e, t) {
+			d(), r.value = e;
+			let n = t.currentTarget;
+			c.value = n?.querySelector(".m-contextmenu__item--parent") ?? n;
 		}
-		function c(e) {
-			return i(e.icon);
+		function b() {
+			d();
 		}
-		return (n, i) => (C(!0), p(s, null, T(e.items, (e, a) => (C(), p(s, { key: o(e, a) }, [e.separator ? (C(), p("div", P)) : e.items?.length ? (C(), p("div", {
+		function x() {
+			f();
+		}
+		return (n, a) => (T(!0), h(l, null, D(e.items, (e, o) => (T(), h(l, { key: p(e, o) }, [e.separator ? (T(), h("div", I)) : e.items?.length ? (T(), h("div", {
 			key: 1,
 			class: "m-contextmenu__submenu-wrap",
-			onMouseenter: (e) => r.value = a,
-			onMouseleave: i[1] ||= (e) => r.value = null
-		}, [m("button", {
+			onMouseenter: (e) => y(o, e),
+			onMouseleave: a[1] ||= (e) => f()
+		}, [g("button", {
 			type: "button",
 			class: "m-contextmenu__item m-contextmenu__item--parent",
 			role: "menuitem",
 			disabled: e.disabled
 		}, [
-			c(e) ? (C(), p("span", L, [h(t, {
-				name: c(e),
+			v(e) ? (T(), h("span", z, [_(t, {
+				name: v(e),
 				size: "sm"
-			}, null, 8, ["name"])])) : f("", !0),
-			m("span", R, D(e.label), 1),
-			e.shortcut ? (C(), p("span", z, D(e.shortcut), 1)) : f("", !0),
-			m("span", B, [h(t, {
+			}, null, 8, ["name"])])) : m("", !0),
+			g("span", B, k(e.label), 1),
+			e.shortcut ? (T(), h("span", V, k(e.shortcut), 1)) : m("", !0),
+			g("span", H, [_(t, {
 				name: "chevron-right",
 				size: "sm"
 			})])
-		], 8, I), r.value === a ? (C(), p("div", V, [h(K, {
-			items: e.items,
-			onActivate: i[0] ||= (e) => n.$emit("activate", e)
-		}, null, 8, ["items"])])) : f("", !0)], 40, F)) : (C(), p("button", {
+		], 8, R), _(s, {
+			open: r.value === o,
+			anchor: r.value === o ? c.value : null,
+			"panel-class": "m-contextmenu__submenu",
+			onEnter: b,
+			onLeave: x
+		}, {
+			default: P(() => [_(i, {
+				class: "m-contextmenu__submenu-scroll",
+				"fit-content": "",
+				"wrap-class": "m-contextmenu__submenu-wrap-inner",
+				"view-class": "m-contextmenu__submenu-view"
+			}, {
+				default: P(() => [_(q, {
+					items: e.items,
+					onActivate: a[0] ||= (e) => n.$emit("activate", e)
+				}, null, 8, ["items"])]),
+				_: 2
+			}, 1024)]),
+			_: 2
+		}, 1032, ["open", "anchor"])], 40, L)) : (T(), h("button", {
 			key: 2,
 			type: "button",
 			class: "m-contextmenu__item",
@@ -76,18 +110,18 @@ var P = {
 			disabled: e.disabled,
 			onClick: (t) => n.$emit("activate", e)
 		}, [
-			c(e) ? (C(), p("span", U, [h(t, {
-				name: c(e),
+			v(e) ? (T(), h("span", W, [_(t, {
+				name: v(e),
 				size: "sm"
-			}, null, 8, ["name"])])) : f("", !0),
-			m("span", W, D(e.label), 1),
-			e.shortcut ? (C(), p("span", G, D(e.shortcut), 1)) : f("", !0)
-		], 8, H))], 64))), 128));
+			}, null, 8, ["name"])])) : m("", !0),
+			g("span", G, k(e.label), 1),
+			e.shortcut ? (T(), h("span", K, k(e.shortcut), 1)) : m("", !0)
+		], 8, U))], 64))), 128));
 	}
-}), q = /* @__PURE__ */ g({
+}), J = /* @__PURE__ */ v({
 	inheritAttrs: !1,
 	__name: "ContextMenu",
-	props: /*@__PURE__*/ _({
+	props: /*@__PURE__*/ y({
 		pt: {},
 		model: {},
 		teleport: {
@@ -105,24 +139,24 @@ var P = {
 		positionModifiers: {}
 	}),
 	emits: ["update:modelValue", "update:position"],
-	setup(t, { expose: i }) {
-		let a = t, g = A(t, "modelValue"), _ = A(t, "position"), T = k(), { rootAttrs: D } = e(T, () => a.pt), P = o(), F = w(null), I = w({
+	setup(t, { expose: a }) {
+		let o = t, s = M(t, "modelValue"), v = M(t, "position"), y = j(), { rootAttrs: D } = e(y, () => o.pt), k = c(), I = E(null), L = E({
 			x: 0,
 			y: 0
-		}), L = u(() => n(a, P.value.appendTo)), R = u(() => r(a, P.value.appendTo)), z = u(() => {
-			let e = _.value ?? I.value;
+		}), R = f(() => n(o, k.value.appendTo)), z = f(() => r(o, k.value.appendTo)), B = f(() => {
+			let e = v.value ?? L.value;
 			return {
 				left: `${e.x}px`,
 				top: `${e.y}px`
 			};
 		});
-		function B(e) {
-			a.model.length && H(e);
+		function V(e) {
+			o.model.length && U(e);
 		}
-		function V() {
-			g.value = !1;
+		function H() {
+			s.value = !1;
 		}
-		function H(e) {
+		function U(e) {
 			let t = "clientX" in e ? {
 				x: e.clientX,
 				y: e.clientY
@@ -130,60 +164,68 @@ var P = {
 				x: e.x,
 				y: e.y
 			};
-			"preventDefault" in e && e.preventDefault(), "stopPropagation" in e && e.stopPropagation(), I.value = t, _.value = t, g.value = !0;
-		}
-		function U(e) {
-			e.disabled || e.separator || (e.command?.(), V());
+			"preventDefault" in e && e.preventDefault(), "stopPropagation" in e && e.stopPropagation(), L.value = t, v.value = t, s.value = !0;
 		}
 		function W(e) {
-			g.value && F.value && !F.value.contains(e.target) && V();
+			e.disabled || e.separator || (e.command?.(), H());
 		}
 		function G(e) {
-			e.key === "Escape" && V();
+			s.value && I.value && !I.value.contains(e.target) && H();
+		}
+		function K(e) {
+			e.key === "Escape" && H();
 		}
-		let q = 0;
-		function J() {
-			document.removeEventListener("click", W), document.removeEventListener("keydown", G), document.removeEventListener("contextmenu", W);
+		let J = 0;
+		function Y() {
+			document.removeEventListener("click", G), document.removeEventListener("keydown", K), document.removeEventListener("contextmenu", G);
 		}
-		return j(g, (e) => {
-			if (J(), !e) return;
-			document.addEventListener("click", W), document.addEventListener("keydown", G);
-			let t = ++q;
-			y(() => {
-				t === q && g.value && document.addEventListener("contextmenu", W);
+		return N(s, (e) => {
+			if (Y(), !e) return;
+			document.addEventListener("click", G), document.addEventListener("keydown", K);
+			let t = ++J;
+			x(() => {
+				t === J && s.value && document.addEventListener("contextmenu", G);
 			});
-		}, { immediate: !0 }), S(() => {
-			J();
-		}), i({
-			show: H,
-			hide: V
-		}), (e, n) => (C(), p(s, null, [m("div", v(O(D), {
+		}, { immediate: !0 }), w(() => {
+			Y();
+		}), a({
+			show: U,
+			hide: H
+		}), (e, n) => (T(), h(l, null, [g("div", b(A(D), {
 			class: "m-contextmenu-anchor",
-			onContextmenu: B
-		}), [E(e.$slots, "default")], 16), (C(), d(c, {
-			to: L.value.to,
-			disabled: L.value.disabled
-		}, [h(l, { name: "m-scale-fade" }, {
-			default: M(() => [g.value ? (C(), p("div", {
+			onContextmenu: V
+		}), [O(e.$slots, "default")], 16), (T(), p(u, {
+			to: R.value.to,
+			disabled: R.value.disabled
+		}, [_(d, { name: "m-scale-fade" }, {
+			default: P(() => [s.value ? (T(), h("div", {
 				key: 0,
 				ref_key: "root",
-				ref: F,
-				class: b(["m-contextmenu", { "m-contextmenu--teleported": R.value }]),
+				ref: I,
+				class: S(["m-contextmenu", { "m-contextmenu--teleported": z.value }]),
 				role: "menu",
-				style: x(z.value),
-				onClick: n[0] ||= N(() => {}, ["stop"])
-			}, [h(K, {
-				items: t.model,
-				onActivate: U
-			}, null, 8, ["items"])], 6)) : f("", !0)]),
+				style: C(B.value),
+				onClick: n[0] ||= F(() => {}, ["stop"])
+			}, [_(i, {
+				class: "m-contextmenu__scroll",
+				"fit-content": "",
+				"wrap-class": "m-contextmenu__scroll-wrap",
+				"view-class": "m-contextmenu__scroll-view"
+			}, {
+				default: P(() => [_(q, {
+					items: t.model,
+					onActivate: W
+				}, null, 8, ["items"])]),
+				_: 1
+			})], 6)) : m("", !0)]),
 			_: 1
 		})], 8, ["to", "disabled"]))], 64));
 	}
 });
 //#endregion
 //#region src/components/ContextMenu/useContextMenu.ts
-function J() {
-	let e = w(!1), t = w({
+function Y() {
+	let e = E(!1), t = E({
 		x: 0,
 		y: 0
 	});
@@ -209,4 +251,4 @@ function J() {
 	};
 }
 //#endregion
-export { q as MContextMenu, J as useContextMenu };
+export { J as MContextMenu, Y as useContextMenu };