morya-ui 0.2.8 → 0.3.0

package/dist/context-menu/index.js

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