morya-ui 0.1.1 → 0.2.2

package/dist/context-menu/index.js

@@ -1,122 +1,128 @@
-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 "../icon-xUOyawgJ.js";
-import { t as i } from "../key-CaQYVkjh.js";
-import { c as a } from "../config-CI8_WBbE.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 i } from "../icon-xUOyawgJ.js";
+import { t as a } from "../key-CaQYVkjh.js";
+import { c as o } from "../config-CI8_WBbE.js";
 import "./style.js";
-import { Fragment as o, Teleport as s, Transition as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createVNode as m, defineComponent as h, normalizeClass as g, normalizeStyle as _, onBeforeUnmount as v, openBlock as y, ref as b, renderList as x, renderSlot as S, toDisplayString as C, watch as w, withCtx as T, withModifiers as E } 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, 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";
 //#region src/components/ContextMenu/ContextMenuNodes.vue?vue&type=script&setup=true&lang.ts
-var D = {
+var P = {
 	key: 0,
 	class: "m-contextmenu__separator",
 	role: "separator"
-}, O = ["onMouseenter"], k = ["disabled"], A = {
+}, F = ["onMouseenter"], I = ["disabled"], L = {
 	key: 0,
 	class: "m-contextmenu__icon",
 	"aria-hidden": "true"
-}, j = { class: "m-contextmenu__label" }, M = {
+}, R = { class: "m-contextmenu__label" }, z = {
 	key: 1,
 	class: "m-contextmenu__shortcut"
-}, N = {
+}, B = {
 	class: "m-contextmenu__caret",
 	"aria-hidden": "true"
-}, P = {
+}, V = {
 	key: 0,
 	class: "m-contextmenu__submenu",
 	role: "menu"
-}, F = ["disabled", "onClick"], I = {
+}, H = ["disabled", "onClick"], U = {
 	key: 0,
 	class: "m-contextmenu__icon",
 	"aria-hidden": "true"
-}, L = { class: "m-contextmenu__label" }, R = {
+}, W = { class: "m-contextmenu__label" }, G = {
 	key: 1,
 	class: "m-contextmenu__shortcut"
-}, z = /* @__PURE__ */ h({
+}, K = /* @__PURE__ */ g({
 	__name: "ContextMenuNodes",
 	props: { items: {} },
 	emits: ["activate"],
-	setup(t, { emit: n }) {
-		let a = b(null);
-		function s(e, t) {
-			return i(e, t, "cm");
+	setup(e, { emit: n }) {
+		let r = w(null);
+		function o(e, t) {
+			return a(e, t, "cm");
 		}
 		function c(e) {
-			return r(e.icon);
+			return i(e.icon);
 		}
-		return (n, r) => (y(!0), f(o, null, x(t.items, (t, i) => (y(), f(o, { key: s(t, i) }, [t.separator ? (y(), f("div", D)) : t.items?.length ? (y(), f("div", {
+		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", {
 			key: 1,
 			class: "m-contextmenu__submenu-wrap",
-			onMouseenter: (e) => a.value = i,
-			onMouseleave: r[1] ||= (e) => a.value = null
-		}, [p("button", {
+			onMouseenter: (e) => r.value = a,
+			onMouseleave: i[1] ||= (e) => r.value = null
+		}, [m("button", {
 			type: "button",
-			class: "m-contextmenu__item wk-contextmenu__item--parent",
+			class: "m-contextmenu__item m-contextmenu__item--parent",
 			role: "menuitem",
-			disabled: t.disabled
+			disabled: e.disabled
 		}, [
-			c(t) ? (y(), f("span", A, [m(e, {
-				name: c(t),
+			c(e) ? (C(), p("span", L, [h(t, {
+				name: c(e),
 				size: "sm"
-			}, null, 8, ["name"])])) : d("", !0),
-			p("span", j, C(t.label), 1),
-			t.shortcut ? (y(), f("span", M, C(t.shortcut), 1)) : d("", !0),
-			p("span", N, [m(e, {
+			}, 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, {
 				name: "chevron-right",
 				size: "sm"
 			})])
-		], 8, k), a.value === i ? (y(), f("div", P, [m(z, {
-			items: t.items,
-			onActivate: r[0] ||= (e) => n.$emit("activate", e)
-		}, null, 8, ["items"])])) : d("", !0)], 40, O)) : (y(), f("button", {
+		], 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", {
 			key: 2,
 			type: "button",
 			class: "m-contextmenu__item",
 			role: "menuitem",
-			disabled: t.disabled,
-			onClick: (e) => n.$emit("activate", t)
+			disabled: e.disabled,
+			onClick: (t) => n.$emit("activate", e)
 		}, [
-			c(t) ? (y(), f("span", I, [m(e, {
-				name: c(t),
+			c(e) ? (C(), p("span", U, [h(t, {
+				name: c(e),
 				size: "sm"
-			}, null, 8, ["name"])])) : d("", !0),
-			p("span", L, C(t.label), 1),
-			t.shortcut ? (y(), f("span", R, C(t.shortcut), 1)) : d("", !0)
-		], 8, F))], 64))), 128));
+			}, 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));
 	}
-}), B = /* @__PURE__ */ h({
+}), q = /* @__PURE__ */ g({
+	inheritAttrs: !1,
 	__name: "ContextMenu",
-	props: {
+	props: /*@__PURE__*/ _({
+		pt: {},
 		model: {},
-		modelValue: {
-			type: Boolean,
-			default: !1
-		},
-		position: {},
 		teleport: {
 			type: Boolean,
 			default: !0
 		},
 		appendTo: {}
-	},
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {},
+		position: {},
+		positionModifiers: {}
+	}),
 	emits: ["update:modelValue", "update:position"],
-	setup(e, { expose: r, emit: i }) {
-		let h = e, x = i, C = a(), D = b(null), O = b({
+	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({
 			x: 0,
 			y: 0
-		}), k = l(() => t(h, C.value.appendTo)), A = l(() => n(h, C.value.appendTo)), j = l(() => {
-			let e = h.position ?? O.value;
+		}), L = u(() => n(a, P.value.appendTo)), R = u(() => r(a, P.value.appendTo)), z = u(() => {
+			let e = _.value ?? I.value;
 			return {
 				left: `${e.x}px`,
 				top: `${e.y}px`
 			};
 		});
-		function M(e) {
-			h.model.length && P(e);
+		function B(e) {
+			a.model.length && H(e);
 		}
-		function N() {
-			x("update:modelValue", !1);
+		function V() {
+			g.value = !1;
 		}
-		function P(e) {
+		function H(e) {
 			let t = "clientX" in e ? {
 				x: e.clientX,
 				y: e.clientY
@@ -124,56 +130,65 @@ var D = {
 				x: e.x,
 				y: e.y
 			};
-			"preventDefault" in e && e.preventDefault(), O.value = t, x("update:position", t), x("update:modelValue", !0);
+			"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());
 		}
-		function F(e) {
-			e.disabled || e.separator || (e.command?.(), N());
+		function W(e) {
+			g.value && F.value && !F.value.contains(e.target) && V();
 		}
-		function I(e) {
-			h.modelValue && D.value && !D.value.contains(e.target) && N();
+		function G(e) {
+			e.key === "Escape" && V();
 		}
-		function L(e) {
-			e.key === "Escape" && N();
+		let q = 0;
+		function J() {
+			document.removeEventListener("click", W), document.removeEventListener("keydown", G), document.removeEventListener("contextmenu", W);
 		}
-		return w(() => h.modelValue, (e) => {
-			e ? (document.addEventListener("click", I), document.addEventListener("keydown", L), document.addEventListener("contextmenu", I)) : (document.removeEventListener("click", I), document.removeEventListener("keydown", L), document.removeEventListener("contextmenu", I));
-		}, { immediate: !0 }), v(() => {
-			document.removeEventListener("click", I), document.removeEventListener("keydown", L), document.removeEventListener("contextmenu", I);
-		}), r({
-			show: P,
-			hide: N
-		}), (t, n) => (y(), f(o, null, [p("div", {
+		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);
+			});
+		}, { immediate: !0 }), S(() => {
+			J();
+		}), i({
+			show: H,
+			hide: V
+		}), (e, n) => (C(), p(s, null, [m("div", v(O(D), {
 			class: "m-contextmenu-anchor",
-			onContextmenu: M
-		}, [S(t.$slots, "default")], 32), (y(), u(s, {
-			to: k.value.to,
-			disabled: k.value.disabled
-		}, [m(c, { name: "m-scale-fade" }, {
-			default: T(() => [e.modelValue ? (y(), f("div", {
+			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", {
 				key: 0,
 				ref_key: "root",
-				ref: D,
-				class: g(["m-contextmenu", { "m-contextmenu--teleported": A.value }]),
+				ref: F,
+				class: b(["m-contextmenu", { "m-contextmenu--teleported": R.value }]),
 				role: "menu",
-				style: _(j.value),
-				onClick: n[0] ||= E(() => {}, ["stop"])
-			}, [m(z, {
-				items: e.model,
-				onActivate: F
-			}, null, 8, ["items"])], 6)) : d("", !0)]),
+				style: x(z.value),
+				onClick: n[0] ||= N(() => {}, ["stop"])
+			}, [h(K, {
+				items: t.model,
+				onActivate: U
+			}, null, 8, ["items"])], 6)) : f("", !0)]),
 			_: 1
 		})], 8, ["to", "disabled"]))], 64));
 	}
 });
 //#endregion
 //#region src/components/ContextMenu/useContextMenu.ts
-function V() {
-	let e = b(!1), t = b({
+function J() {
+	let e = w(!1), t = w({
 		x: 0,
 		y: 0
 	});
 	function n(n) {
-		"preventDefault" in n && n.preventDefault();
+		"preventDefault" in n && n.preventDefault(), "stopPropagation" in n && n.stopPropagation();
 		let r = "clientX" in n ? {
 			x: n.clientX,
 			y: n.clientY
@@ -194,4 +209,4 @@ function V() {
 	};
 }
 //#endregion
-export { B as MContextMenu, V as useContextMenu };
+export { q as MContextMenu, J as useContextMenu };