vue-code-layout
Version:
A editor layout for Vue
1,578 lines • 231 kB
JavaScript
var mn = Object.defineProperty;
var bn = (n, o, e) => o in n ? mn(n, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[o] = e;
var X = (n, o, e) => (bn(n, typeof o != "symbol" ? o + "" : o, e), e);
import { markRaw as Mt, defineComponent as se, toRefs as we, inject as oe, ref as T, h as ue, provide as ye, onMounted as Pe, nextTick as ge, onBeforeUnmount as _e, unref as a, createCommentVNode as q, openBlock as P, createElementBlock as H, createBlock as J, normalizeClass as ae, renderSlot as I, createElementVNode as O, mergeProps as lt, createVNode as te, toDisplayString as De, Transition as Qt, normalizeProps as me, withCtx as K, resolveComponent as dt, Teleport as ft, normalizeStyle as Se, Fragment as Ae, renderList as Oe, createSlots as en, watch as re, reactive as We, useSlots as wt, guardReactiveProps as be, render as At, computed as Ue, createTextVNode as Qe, withModifiers as Sn, withDirectives as He, vShow as Ee, getCurrentInstance as tn } from "vue";
class Cn {
constructor() {
X(this, "_lateNotifyCallbacks", Mt(/* @__PURE__ */ new Map()));
X(this, "_lateNotifyItems", Mt([]));
}
listenLateAction(o, e) {
this._lateNotifyCallbacks.set(o, e), this.applyLateActions(o);
}
unlistenLateAction(o) {
this._lateNotifyCallbacks.delete(o);
}
unlistenAllLateAction() {
this._lateNotifyCallbacks.clear();
}
applyLateActions(o) {
const e = this._lateNotifyCallbacks.get(o);
if (e)
for (let i = this._lateNotifyItems.length - 1; i >= 0; i--) {
const l = this._lateNotifyItems[i];
if (l.name === o) {
try {
l.resolve(e(...l.args));
} catch (t) {
l.reject(t);
}
this._lateNotifyItems.splice(i, 1);
}
}
}
pushLateAction(o, ...e) {
const i = this._lateNotifyCallbacks.get(o);
if (i)
try {
return Promise.resolve(i(...e));
} catch (l) {
return Promise.reject(l);
}
else
return new Promise((l, t) => {
const f = { name: o, args: e, resolve: l, reject: t };
this._lateNotifyItems.push(f);
});
}
}
let je = null;
function wn() {
return je !== null;
}
function zn(n) {
je && nn(), je = n;
}
function _t(n) {
n === je && (je = null);
}
function nn() {
je && (je.closeMenu(), je = null);
}
const Be = {
defaultDirection: "br",
defaultMinWidth: 100,
defaultMaxWidth: 600,
defaultZindex: 100,
defaultZoom: 1,
defaultAdjustPadding: {
x: 0,
y: 10
}
};
function Fe(n, o) {
let e = n.offsetTop;
return n.offsetParent != null && n.offsetParent != o && (e -= n.offsetParent.scrollTop, e += Fe(n.offsetParent, o)), e;
}
function Ve(n, o) {
let e = n.offsetLeft;
return n.offsetParent != null && n.offsetParent != o && (e -= n.offsetParent.scrollLeft, e += Ve(n.offsetParent, o)), e;
}
function kn(n, o, e, i) {
return {
x: Ve(n, i) + o,
y: Fe(n, i) + e
};
}
const gt = "mx-menu-default-container", Pn = "mx-menu-container-";
let xn = 0;
function on(n) {
const { getContainer: o, zIndex: e } = n;
if (o) {
const l = typeof o == "function" ? o() : o;
if (l) {
let t = l.getAttribute("id");
return t || (t = Pn + xn++, l.setAttribute("id", t)), {
eleId: t,
container: l,
isNew: !1
};
}
}
let i = document.getElementById(gt);
return i || (i = document.createElement("div"), i.setAttribute("id", gt), i.setAttribute("class", "mx-menu-ghost-host fullscreen"), document.body.appendChild(i)), i.style.zIndex = (e == null ? void 0 : e.toString()) || Be.defaultZindex.toString(), {
eleId: gt,
container: i,
isNew: !0
};
}
function Gt(n) {
return typeof n == "number" ? `${n}px` : n;
}
const Te = se({
props: {
/**
* Can be VNode or (data: unknown) => VNode
*/
vnode: {
type: null
},
/**
* If vnode is a callback, this data will be passed to the callback first parameter.
* @default null
*/
data: {
type: null,
default: null
}
},
setup(n) {
const { vnode: o, data: e } = we(n);
return () => typeof o.value == "function" ? o.value(e.value) : o.value;
}
});
function Bn(n, o) {
const e = { ...n };
return delete e[o], e;
}
var Dn = Object.defineProperty, $n = (n, o, e) => o in n ? Dn(n, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[o] = e, Rt = (n, o, e) => $n(n, typeof o != "symbol" ? o + "" : o, e);
class Tt {
constructor(o, e) {
Rt(this, "x", 0), Rt(this, "y", 0), this.x = o || 0, this.y = e || 0;
}
set(o, e) {
this.x = o, this.y = e;
}
substract(o) {
this.x -= o.x, this.y -= o.y;
}
}
function Wt(n) {
const { onDown: o, onMove: e, onUp: i } = n, l = new Tt(), t = new Tt();
let f;
function r(p) {
p.stopPropagation(), t.set(p.x, p.y), t.substract(l), e(l, t, p, f);
}
function x(p) {
i(p, f), l.set(0, 0), document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", x);
}
return (p, w) => o(p, w) ? (f = w, l.set(p.x, p.y), document.addEventListener("mousemove", r), document.addEventListener("mouseup", x), p.stopPropagation(), !0) : !1;
}
function Ln(n, o) {
let e = 0;
return {
start() {
e > 0 && clearInterval(e), e = setInterval(() => {
e = 0, o();
}, n);
},
stop() {
e > 0 && (clearInterval(e), e = 0);
}
};
}
const Xe = [], It = Ln(100, () => {
for (const n of Xe)
n();
});
function Mn(n, o, e, i) {
let l = 0, t = 0;
function f() {
n.value && (o && l !== n.value.offsetWidth && o(n.value.offsetWidth), e && t !== n.value.offsetHeight && e(n.value.offsetHeight), l = n.value.offsetWidth, t = n.value.offsetHeight);
}
return {
startResizeChecker() {
It.start(), Xe.push(f);
},
stopResizeChecker() {
const r = Xe.indexOf(f);
r >= 0 && Xe.splice(r, 1), Xe.length === 0 && It.stop();
}
};
}
const Ot = 140, An = 70, _n = /* @__PURE__ */ se({
__name: "ScrollRect",
props: {
/**
* Scroll direction
*
* * both : Scroll in both directions
* * vertical : Scroll only in vertical direction
* * horizontal : Scroll only in horizontal direction
* * none : Disable scroll
*
* @default both
*/
scroll: {
type: String,
default: "both"
},
/**
* Show scroll bar always, otherwise show scroll bar when mouse over
* @default false
*/
scrollBarAlwaysShow: {
type: Boolean,
default: !1
},
/**
* Is able to click scroll bar background to set scroll position? (When `scrollBarAlwaysShow` is true)
* @default true
*/
scrollBarBackgroundClickable: {
type: Boolean,
default: !1
},
/**
* CSS class of inner container
*/
containerClass: {
type: String,
default: ""
}
},
emits: ["scroll"],
setup(n, { expose: o, emit: e }) {
const i = n, l = e, t = T(), f = T(), r = T(), x = T(), p = T(), w = T(), _ = T(!1), z = We({
show: !1,
size: 0,
sizeRaw: 0,
pos: 0
}), g = We({
show: !1,
size: 0,
sizeRaw: 0,
pos: 0
});
let c = 0, b = 0, G = 0, M = 0, $ = null;
const D = { attributes: !0, childList: !0 };
function v() {
if (t.value) {
if (z.show) {
const s = t.value.offsetWidth / t.value.scrollWidth;
z.sizeRaw = s * t.value.offsetWidth, z.size = s * 100, z.pos = t.value.scrollLeft / (t.value.scrollWidth - t.value.offsetWidth) * (100 - z.size), s >= 1 && (z.show = !1);
}
if (g.show) {
const s = t.value.offsetHeight / t.value.scrollHeight;
g.sizeRaw = s * t.value.offsetHeight, g.size = s * 100, g.pos = t.value.scrollTop / (t.value.scrollHeight - t.value.offsetHeight) * (100 - g.size), s >= 1 && (g.show = !1);
}
l("scroll", t.value.scrollLeft, t.value.scrollTop);
}
}
function S(s = !1) {
if (!t.value)
return;
let k = i.scroll === "horizontal" || i.scroll === "both", L = i.scroll === "vertical" || i.scroll === "both";
const V = k && (c !== t.value.scrollWidth || G !== t.value.offsetWidth), E = L && (b !== t.value.scrollHeight || M !== t.value.offsetHeight);
if (!s && !V && !E)
return;
const U = window.getComputedStyle(t.value);
(U.overflow === "hidden" || U.overflowX === "hidden") && (k = !1), (U.overflow === "hidden" || U.overflowY === "hidden") && (L = !1), z.show = k, g.show = L, v(), G = t.value.offsetWidth, M = t.value.offsetHeight, c = t.value.scrollWidth, b = t.value.scrollHeight;
}
function y(s) {
var k;
i.scroll == "horizontal" && (s.deltaMode == 0 && ((k = t.value) == null || k.scrollTo({
left: t.value.scrollLeft + (s.deltaY > 0 ? Ot : -140),
behavior: "smooth"
})), s.preventDefault(), s.stopPropagation());
}
function A(s) {
var k;
s.deltaMode == 0 && ((k = t.value) == null || k.scrollTo({
left: t.value.scrollLeft + (s.deltaY > 0 ? Ot : -140),
behavior: "smooth"
}), s.preventDefault(), s.stopPropagation());
}
function B(s) {
var k;
s.deltaMode == 0 && ((k = t.value) == null || k.scrollTo({
top: t.value.scrollTop + (s.deltaY > 0 ? An : -70),
behavior: "smooth"
}), s.preventDefault(), s.stopPropagation());
}
let C = 0, W = 0, N = 0, R = 0;
const j = Wt({
onDown(s) {
return !r.value || !p.value ? !1 : (C = s.offsetX, W = s.x - s.offsetX - p.value.offsetLeft, s.preventDefault(), _.value = !0, !0);
},
onMove(s, k, L) {
t.value && r.value && (ce(L.x - C - W), L.preventDefault(), L.stopPropagation());
},
onUp() {
_.value = !1;
}
}), F = Wt({
onDown(s) {
return !x.value || !w.value ? !1 : (N = s.offsetY, R = s.y - s.offsetY - w.value.offsetTop, s.preventDefault(), _.value = !0, !0);
},
onMove(s, k, L) {
t.value && x.value && (ve(L.y - N - R), L.preventDefault(), L.stopPropagation());
},
onUp() {
_.value = !1;
}
});
function Q(s) {
t.value && (t.value.scrollLeft = s / 100 * (t.value.scrollWidth - t.value.offsetWidth));
}
function Y(s) {
t.value && (t.value.scrollLeft = s / 100 * (t.value.scrollHeight - t.value.offsetHeight));
}
function ce(s) {
t.value && (t.value.scrollLeft = s / (t.value.offsetWidth - z.sizeRaw) * (t.value.scrollWidth - t.value.offsetWidth));
}
function ve(s) {
t.value && (t.value.scrollTop = s / (t.value.offsetHeight - g.sizeRaw) * (t.value.scrollHeight - t.value.offsetHeight));
}
function u(s) {
i.scrollBarBackgroundClickable && ce(s.offsetX - z.sizeRaw / 2);
}
function m(s) {
i.scrollBarBackgroundClickable && ve(s.offsetY - g.sizeRaw / 2);
}
const {
startResizeChecker: h,
stopResizeChecker: d
} = Mn(
t,
() => S(),
() => S()
);
return Pe(() => {
ge(() => {
setTimeout(() => S(!0), 200), S(!0), h(), $ = new MutationObserver(() => S()), $.observe(t.value, D);
});
}), _e(() => {
d(), $ && ($.disconnect(), $ = null);
}), o({
refreshScrollState() {
S(!0);
},
getScrollContainer() {
return t.value;
},
scrollTo(s, k) {
var L;
(L = t.value) == null || L.scrollTo(s, k);
},
scrollToTop() {
var s;
(s = t.value) == null || s.scrollTo(0, 0);
},
scrollToBottom() {
var s;
(s = t.value) == null || s.scrollTo(t.value.scrollWidth, t.value.scrollHeight);
}
}), (s, k) => (P(), H("div", {
ref_key: "scrollrect",
ref: f,
class: ae([
"vue-scroll-rect",
n.scrollBarAlwaysShow ? "always-show-scrollbar" : "",
n.scrollBarBackgroundClickable ? "background-clickable" : "",
_.value ? "dragging" : ""
]),
onWheel: y
}, [
O("div", {
ref_key: "container",
ref: t,
class: ae(["scroll-content", n.scroll, n.containerClass]),
onScroll: v
}, [
I(s.$slots, "default")
], 34),
z.show ? I(s.$slots, "scrollBarX", {
key: 0,
scrollBarValue: z,
onScroll: Q
}, () => [
O("div", {
ref_key: "scrollBarRefX",
ref: r,
class: "scrollbar horizontal",
onClick: u,
onWheel: A
}, [
O("div", {
class: "thumb",
ref_key: "scrollBarThumbRefX",
ref: p,
style: Se({ left: `${z.pos}%`, width: `${z.size}%` }),
onMousedown: k[0] || (k[0] = //@ts-ignore
(...L) => a(j) && a(j)(...L)),
onWheel: A
}, null, 36)
], 544)
]) : q("", !0),
g.show ? I(s.$slots, "scrollBarY", {
key: 1,
scrollBarValue: g,
onScroll: Y
}, () => [
g.show ? (P(), H("div", {
key: 0,
ref_key: "scrollBarRefY",
ref: x,
class: "scrollbar vertical",
onClick: m,
onWheel: B
}, [
O("div", {
class: "thumb",
ref_key: "scrollBarThumbRefY",
ref: w,
style: Se({ top: `${g.pos}%`, height: `${g.size}%` }),
onMousedown: k[1] || (k[1] = //@ts-ignore
(...L) => a(F) && a(F)(...L)),
onWheel: B
}, null, 36)
], 544)) : q("", !0)
]) : q("", !0)
], 34));
}
}), vt = (n, o) => {
const e = n.__vccOpts || n;
for (const [i, l] of o)
e[i] = l;
return e;
}, Gn = {}, Rn = {
class: "mx-checked-mark",
"aria-hidden": "true",
viewBox: "0 0 1024 1024"
}, Tn = /* @__PURE__ */ O("path", { d: "M129.3,428.6L52,512l345,372.5l575-620.8l-69.5-75L400.4,718.2L129.3,428.6z" }, null, -1), Wn = [
Tn
];
function In(n, o) {
return P(), H("svg", Rn, Wn);
}
const On = /* @__PURE__ */ vt(Gn, [["render", In]]), Hn = {}, En = {
class: "mx-right-arrow",
"aria-hidden": "true",
viewBox: "0 0 1024 1024"
}, Nn = /* @__PURE__ */ O("path", { d: "M307.018 49.445c11.517 0 23.032 4.394 31.819 13.18L756.404 480.18c8.439 8.438 13.181 19.885 13.181 31.82s-4.741 23.38-13.181 31.82L338.838 961.376c-17.574 17.573-46.065 17.573-63.64-0.001-17.573-17.573-17.573-46.065 0.001-63.64L660.944 512 275.198 126.265c-17.574-17.573-17.574-46.066-0.001-63.64C283.985 53.839 295.501 49.445 307.018 49.445z" }, null, -1), jn = [
Nn
];
function Fn(n, o) {
return P(), H("svg", En, jn);
}
const Vn = /* @__PURE__ */ vt(Hn, [["render", Fn]]), Un = { class: "mx-item-row" }, qn = ["xlink:href"], Yn = {
key: 1,
class: "label"
}, Xn = { class: "mx-item-row" }, Kn = { class: "mx-shortcut" }, zt = /* @__PURE__ */ se({
__name: "ContextMenuItem",
props: {
/**
* Is this menu disabled?
*/
disabled: {
type: Boolean,
default: !1
},
/**
* Is this menu hidden?
*/
hidden: {
type: Boolean,
default: !1
},
customRender: {
type: Function,
default: null
},
/**
* Custom css class for submenu
*/
customClass: {
type: String,
default: ""
},
clickHandler: {
type: Function,
default: null
},
/**
* Menu label
*/
label: {
type: [String, Object, Function],
default: ""
},
/**
* Menu icon (for icon class)
*/
icon: {
type: [String, Object, Function],
default: ""
},
/**
* Custom icon library font class name.
*
* Only for css font icon, If you use the svg icon, you do not need to use this.
*/
iconFontClass: {
type: String,
default: "iconfont"
},
/**
* Is this menu item checked?
*
* The check mark are displayed on the left side of the icon, so it is not recommended to display the icon at the same time.
*/
checked: {
type: Boolean,
default: !1
},
/**
* Shortcut key text display on the right.
*
* The shortcut keys here are only for display. You need to handle the key events by yourself.
*/
shortcut: {
type: String,
default: ""
},
/**
* Display icons use svg symbol (`<use xlink:href="#icon-symbol-name">`) ， only valid when icon attribute is empty.
*/
svgIcon: {
type: String,
default: ""
},
/**
* The user-defined attribute of the svg tag, which is valid when using `svgIcon`.
*/
svgProps: {
type: Object,
default: null
},
/**
* Should a fixed-width icon area be reserved for menu items without icon. (this item)
*
* Default is true .
*
* The width of icon area can be override with css var `--mx-menu-placeholder-width`.
*/
preserveIconWidth: {
type: Boolean,
default: !0
},
/**
* Show right arrow on this menu?
*/
showRightArrow: {
type: Boolean,
default: !1
},
hasChildren: {
type: Boolean,
default: !1
},
/**
* Should close menu when Click this menu item ?
*/
clickClose: {
type: Boolean,
default: !0
},
/**
* When there are subitems in this item, is it allowed to trigger its own click event? Default is false
*/
clickableWhenHasChildren: {
type: Boolean,
default: !1
},
rawMenuItem: {
type: Object,
default: void 0
}
},
emits: [
"click",
"subMenuOpen",
"subMenuClose"
],
setup(n, { expose: o, emit: e }) {
const i = n, l = e, {
clickHandler: t,
clickClose: f,
clickableWhenHasChildren: r,
disabled: x,
hidden: p,
label: w,
icon: _,
iconFontClass: z,
showRightArrow: g,
shortcut: c,
hasChildren: b
} = we(i), G = T(!1), M = T(!1), $ = T(), D = oe("globalOptions"), v = oe("globalHasSlot"), S = oe("globalRenderSlot"), y = oe("globalCloseMenu"), A = oe("menuContext"), B = {
getSubMenuInstance: () => {
},
showSubMenu: () => G.value ? (A.markActiveMenuItem(B, !0), !0) : b.value ? (W(), !0) : !1,
hideSubMenu: () => {
A.closeOtherSubMenu();
},
isDisabledOrHidden: () => x.value || p.value,
getElement: () => $.value,
focus: () => M.value = !0,
blur: () => M.value = !1,
click: C
};
ye("menuItemInstance", B), Pe(() => {
A.isMenuItemDataCollectedFlag() ? ge(() => {
let j = 0;
const F = A.getElement();
if (F) {
let Q = 0;
for (let Y = 0; Y < F.children.length; Y++) {
const ce = F.children[Y];
if (ce.getAttribute("data-type") === "ContextMenuItem") {
if (ce === $.value) {
j = Q;
break;
}
Q++;
}
}
}
A.addChildMenuItem(B, j);
}) : A.addChildMenuItem(B);
}), _e(() => {
A.removeChildMenuItem(B);
});
function C(j) {
if (!x.value) {
if (j) {
const F = j.target;
if (F.classList.contains("mx-context-no-clickable") || D.value.ignoreClickClassName && F.classList.contains(D.value.ignoreClickClassName))
return;
if (D.value.clickCloseClassName && F.classList.contains(D.value.clickCloseClassName)) {
j.stopPropagation(), y(i.rawMenuItem);
return;
}
}
b.value ? r.value ? (typeof t.value == "function" && t.value(j), l("click", j)) : G.value || W() : (typeof t.value == "function" && t.value(j), l("click", j), f.value && y(i.rawMenuItem));
}
}
function W(j) {
M.value = !1, A.checkCloseOtherSubMenuTimeOut() || A.closeOtherSubMenu(), x.value || (A.markActiveMenuItem(B), b.value && (j || A.markThisOpenedByKeyBoard(), A.addOpenedSubMenu(N), G.value = !0, ge(() => l("subMenuOpen", B))));
}
function N() {
M.value = !1, G.value = !1, l("subMenuClose", B);
}
function R() {
return {
disabled: x.value,
label: w.value,
icon: _.value,
iconFontClass: z.value,
showRightArrow: g.value,
clickClose: f.value,
clickableWhenHasChildren: r.value,
shortcut: c.value,
theme: D.value.theme,
isOpen: G,
hasChildren: b,
onClick: C,
onMouseEnter: W,
closeMenu: y
};
}
return o(B), (j, F) => a(p) ? q("", !0) : (P(), H("div", {
key: 0,
class: "mx-context-menu-item-wrapper",
ref_key: "menuItemRef",
ref: $,
"data-type": "ContextMenuItem"
}, [
a(v)("itemRender") ? (P(), J(a(Te), {
key: 0,
vnode: () => a(S)("itemRender", R())
}, null, 8, ["vnode"])) : n.customRender ? (P(), J(a(Te), {
key: 1,
vnode: n.customRender,
data: R()
}, null, 8, ["vnode", "data"])) : (P(), H("div", {
key: 2,
class: ae([
"mx-context-menu-item",
a(x) ? "disabled" : "",
M.value ? "keyboard-focus" : "",
n.customClass ? " " + n.customClass : "",
G.value ? "open" : ""
]),
onClick: C,
onMouseenter: W
}, [
I(j.$slots, "default", {}, () => [
O("div", Un, [
O("div", {
class: ae([
"mx-icon-placeholder",
n.preserveIconWidth ? "preserve-width" : ""
])
}, [
I(j.$slots, "icon", {}, () => [
a(v)("itemIconRender") ? (P(), J(a(Te), {
key: 0,
vnode: () => a(S)("itemIconRender", R())
}, null, 8, ["vnode"])) : typeof n.svgIcon == "string" && n.svgIcon ? (P(), H("svg", lt({
key: 1,
class: "icon svg"
}, n.svgProps), [
O("use", { "xlink:href": n.svgIcon }, null, 8, qn)
], 16)) : typeof a(_) != "string" ? (P(), J(a(Te), {
key: 2,
vnode: a(_),
data: a(_)
}, null, 8, ["vnode", "data"])) : typeof a(_) == "string" && a(_) !== "" ? (P(), H("i", {
key: 3,
class: ae(a(_) + " icon " + a(z) + " " + a(D).iconFontClass)
}, null, 2)) : q("", !0)
]),
n.checked ? I(j.$slots, "check", { key: 0 }, () => [
a(v)("itemCheckRender") ? (P(), J(a(Te), {
key: 0,
vnode: () => a(S)("itemCheckRender", R())
}, null, 8, ["vnode"])) : q("", !0),
te(On)
]) : q("", !0)
], 2),
I(j.$slots, "label", {}, () => [
a(v)("itemLabelRender") ? (P(), J(a(Te), {
key: 0,
vnode: () => a(S)("itemLabelRender", R())
}, null, 8, ["vnode"])) : typeof a(w) == "string" ? (P(), H("span", Yn, De(a(w)), 1)) : (P(), J(a(Te), {
key: 2,
vnode: a(w),
data: a(w)
}, null, 8, ["vnode", "data"]))
])
]),
O("div", Xn, [
a(c) || j.$slots.shortcut ? I(j.$slots, "shortcut", { key: 0 }, () => [
a(v)("itemShortcutRender") ? (P(), J(a(Te), {
key: 0,
vnode: () => a(S)("itemShortcutRender", R())
}, null, 8, ["vnode"])) : q("", !0),
O("span", Kn, De(a(c)), 1)
]) : q("", !0),
a(g) ? I(j.$slots, "rightArrow", { key: 1 }, () => [
a(v)("itemRightArrowRender") ? (P(), J(a(Te), {
key: 0,
vnode: () => a(S)("itemRightArrowRender", R())
}, null, 8, ["vnode"])) : q("", !0),
te(Vn)
]) : q("", !0)
])
])
], 34)),
a(D).menuTransitionProps ? (P(), J(Qt, me(lt({ key: 3 }, a(D).menuTransitionProps)), {
default: K(() => [
G.value ? I(j.$slots, "submenu", {
key: 0,
context: B
}) : q("", !0)
]),
_: 3
}, 16)) : G.value ? I(j.$slots, "submenu", {
key: 4,
context: B
}) : q("", !0)
], 512));
}
}), Jn = se({
name: "ContextMenuSperator",
components: {
VNodeRender: Te
},
setup() {
const n = oe("globalHasSlot"), o = oe("globalRenderSlot");
return {
globalHasSlot: n,
globalRenderSlot: o
};
}
}), Zn = {
key: 1,
class: "mx-context-menu-item-sperator mx-context-no-clickable"
};
function Qn(n, o, e, i, l, t) {
const f = dt("VNodeRender");
return n.globalHasSlot("separatorRender") ? (P(), J(f, {
key: 0,
vnode: () => n.globalRenderSlot("separatorRender", {})
}, null, 8, ["vnode"])) : (P(), H("div", Zn));
}
const et = /* @__PURE__ */ vt(Jn, [["render", Qn]]), rt = /* @__PURE__ */ se({
__name: "ContextSubMenu",
props: {
/**
* Items from options
*/
items: {
type: Object,
default: null
},
/**
* Max width for this submenu
*/
maxWidth: {
type: [String, Number],
default: 0
},
/**
* Min width for this submenu
*/
minWidth: {
type: [String, Number],
default: 0
},
/**
* Specifies should submenu adjust it position
* when the menu exceeds the screen. The default is true
*/
adjustPosition: {
type: Boolean,
default: !0
},
/**
* Menu direction
*/
direction: {
type: String,
default: "br"
},
parentMenuItemContext: {
type: Object,
default: null
}
},
setup(n, { expose: o }) {
const e = n, i = T(!1), l = oe("globalGetMenuHostId", ""), t = oe("menuContext"), f = oe("globalOptions");
oe("globalHasSlot"), oe("globalRenderSlot");
const { zIndex: r, getParentWidth: x, getParentHeight: p, getZoom: w } = t, { adjustPosition: _ } = we(e), z = T(), g = T(), c = T(), b = [], G = oe("globalSetCurrentSubMenu"), M = [];
let $ = null, D = 0;
function v() {
$ && $.blur();
}
function S(u, m) {
if (u) {
for (let h = m !== void 0 ? m : 0; h < M.length; h++)
if (!M[h].isDisabledOrHidden()) {
y(h);
break;
}
} else
for (let h = m !== void 0 ? m : M.length - 1; h >= 0; h--)
if (!M[h].isDisabledOrHidden()) {
y(h);
break;
}
}
function y(u) {
var m;
if ($ && v(), u !== void 0 && ($ = M[Math.max(0, Math.min(u, M.length - 1))]), !!$ && ($.focus(), Q.value)) {
const h = $.getElement();
h && ((m = z.value) == null || m.scrollTo(0, Math.min(Math.max(-F.value, -h.offsetTop - h.offsetHeight + ce.value), 0)));
}
}
function A() {
G(B);
}
const B = {
isTopLevel: () => t.getParentContext() === null,
closeSelfAndActiveParent: () => {
const u = N.getParentContext();
if (u) {
u.closeOtherSubMenu();
const m = u.getSubMenuInstanceContext();
if (m)
return m.focusCurrentItem(), !0;
}
return !1;
},
closeCurrentSubMenu: () => {
var u;
return (u = N.getParentContext()) == null ? void 0 : u.closeOtherSubMenu();
},
moveCurrentItemFirst: () => S(!0),
moveCurrentItemLast: () => S(!1),
moveCurrentItemDown: () => S(!0, $ ? M.indexOf($) + 1 : 0),
moveCurrentItemUp: () => S(!1, $ ? M.indexOf($) - 1 : 0),
focusCurrentItem: () => y(),
openCurrentItemSubMenu: () => $ ? $ == null ? void 0 : $.showSubMenu() : !1,
triggerCurrentItemClick: (u) => $ == null ? void 0 : $.click(u)
};
let C = !1, W = !1;
const N = {
zIndex: r + 1,
container: t.container,
adjustPadding: f.value.adjustPadding || Be.defaultAdjustPadding,
getParentWidth: () => {
var u;
return ((u = c.value) == null ? void 0 : u.offsetWidth) || 0;
},
getParentHeight: () => {
var u;
return ((u = c.value) == null ? void 0 : u.offsetHeight) || 0;
},
getPositon: () => [Y.value.x, Y.value.y],
getZoom: () => f.value.zoom || Be.defaultZoom,
addOpenedSubMenu(u) {
b.push(u);
},
closeOtherSubMenu() {
b.forEach((u) => u()), b.splice(0, b.length), G(B);
},
checkCloseOtherSubMenuTimeOut() {
return D ? (clearTimeout(D), D = 0, !0) : !1;
},
closeOtherSubMenuWithTimeOut() {
D = setTimeout(() => {
D = 0, this.closeOtherSubMenu();
}, 200);
},
addChildMenuItem: (u, m) => {
m === void 0 ? M.push(u) : M.splice(m, 0, u);
},
removeChildMenuItem: (u) => {
M.splice(M.indexOf(u), 1), u.getSubMenuInstance = () => {
};
},
markActiveMenuItem: (u, m = !1) => {
v(), $ = u, m && y();
},
markThisOpenedByKeyBoard: () => {
C = !0;
},
isOpenedByKeyBoardFlag: () => C ? (C = !1, !0) : !1,
isMenuItemDataCollectedFlag: () => W,
getElement: () => c.value || null,
getParentContext: () => t,
getSubMenuInstanceContext: () => B
};
ye("menuContext", N);
const R = {
getChildItem: (u) => M[u],
getMenuDimensions: () => g.value ? {
width: g.value.offsetWidth,
height: g.value.offsetHeight
} : { width: 0, height: 0 },
getSubmenuRoot: () => g.value,
getMenu: () => c.value,
getScrollValue: () => {
var u, m;
return ((m = (u = z.value) == null ? void 0 : u.getScrollContainer()) == null ? void 0 : m.scrollTop) || 0;
},
setScrollValue: (u) => {
var m;
return (m = z.value) == null ? void 0 : m.scrollTo(0, u);
},
getScrollHeight: () => F.value,
adjustPosition: () => {
ve();
},
getMaxHeight: () => ce.value,
getPosition: () => Y.value,
setPosition: (u, m) => {
Y.value.x = u, Y.value.y = m;
}
}, j = oe("menuItemInstance", void 0);
j && (j.getSubMenuInstance = () => R);
const F = T(0), Q = T(!1), Y = T({ x: 0, y: 0 }), ce = T(0);
function ve() {
ge(() => {
var u, m;
const h = c.value;
if (h && z.value) {
const { container: d } = t, s = (x == null ? void 0 : x()) ?? 0, k = (p == null ? void 0 : p()) ?? 0, L = typeof t.adjustPadding == "number" ? t.adjustPadding : ((u = t.adjustPadding) == null ? void 0 : u.x) ?? 0, V = typeof t.adjustPadding == "number" ? t.adjustPadding : ((m = t.adjustPadding) == null ? void 0 : m.y) ?? 0, E = k > 0 ? V : 0, U = document.documentElement.scrollHeight / w(), ne = document.documentElement.scrollWidth / w(), le = Math.min(ne, d.offsetWidth), Z = Math.min(U, d.offsetHeight);
let ee = Ve(h, d), ie = Fe(h, d);
e.direction.includes("l") ? Y.value.x -= h.offsetWidth + L : e.direction.includes("r") ? Y.value.x += s + L : (Y.value.x += s / 2, Y.value.x -= (h.offsetWidth + L) / 2), e.direction.includes("t") ? Y.value.y -= (h.offsetHeight + V * 2) / w() : e.direction.includes("b") ? Y.value.y -= V / w() : Y.value.y -= (h.offsetHeight + V) / 2 / w(), _.value && ge(() => {
var fe, pe;
ee = Ve(h, d), ie = Fe(h, d), F.value = ((pe = (fe = z.value) == null ? void 0 : fe.getScrollContainer()) == null ? void 0 : pe.scrollHeight) || 0;
const ze = ee + h.offsetWidth - le, xe = ie + F.value + E * 2 - Z;
if (Q.value = xe > 0, ze > 0) {
const $e = s + h.offsetWidth - L, he = ee;
$e > he ? Y.value.x -= he : Y.value.x -= $e;
}
if (Q.value) {
const $e = xe, he = ie;
$e > he ? Y.value.y -= he - E : Y.value.y -= $e - E, ce.value = Z - E * 2;
} else
ce.value = 0;
});
}
h == null || h.focus({
preventScroll: !0
}), t.isOpenedByKeyBoardFlag() && S(!0), W = !0;
});
}
return Pe(() => {
var u;
i.value = !0;
const m = (u = e.parentMenuItemContext) == null ? void 0 : u.getElement();
if (m) {
const h = Ve(m, t.container), d = Fe(m, t.container);
Y.value.x = h, Y.value.y = d;
} else {
const [h, d] = t.getPositon();
Y.value.x = h, Y.value.y = d;
}
G(B), ve();
}), _e(() => {
i.value = !1, j && (j.getSubMenuInstance = () => {
});
}), o(R), (u, m) => {
const h = dt("ContextSubMenu", !0);
return i.value ? (P(), J(ft, {
key: 0,
to: `#${a(l)}`
}, [
O("div", lt({
ref_key: "submenuRoot",
ref: g
}, u.$attrs, {
class: [
"mx-context-menu",
a(f).customClass ? a(f).customClass : "",
a(f).theme ?? ""
],
style: {
maxWidth: n.maxWidth ? a(Gt)(n.maxWidth) : `${a(Be).defaultMaxWidth}px`,
minWidth: n.minWidth ? a(Gt)(n.minWidth) : `${a(Be).defaultMinWidth}px`,
maxHeight: Q.value && ce.value > 0 ? `${ce.value}px` : void 0,
zIndex: a(r),
left: `${Y.value.x}px`,
top: `${Y.value.y}px`
},
"data-type": "ContextSubMenu",
onClick: A
}), [
te(a(_n), {
ref_key: "scrollRectRef",
ref: z,
scroll: Q.value ? "vertical" : "none",
style: Se({
width: "auto",
height: `${Q.value ? ce.value : F.value}px`
})
}, {
default: K(() => [
O("div", {
class: ae(["mx-context-menu-items"]),
ref_key: "menu",
ref: c
}, [
I(u.$slots, "default", {}, () => [
(P(!0), H(Ae, null, Oe(n.items, (d, s) => (P(), H(Ae, { key: s }, [
d.hidden !== !0 && d.divided === "up" ? (P(), J(et, { key: 0 })) : q("", !0),
d.hidden !== !0 && d.divided === "self" ? (P(), J(et, { key: 1 })) : (P(), J(zt, {
key: 2,
clickHandler: d.onClick ? (k) => d.onClick(k) : void 0,
disabled: typeof d.disabled == "object" ? d.disabled.value : d.disabled,
hidden: typeof d.hidden == "object" ? d.hidden.value : d.hidden,
icon: d.icon,
iconFontClass: d.iconFontClass,
svgIcon: d.svgIcon,
svgProps: d.svgProps,
label: d.label,
customRender: d.customRender,
customClass: d.customClass,
checked: typeof d.checked == "object" ? d.checked.value : d.checked,
shortcut: d.shortcut,
clickClose: d.clickClose,
clickableWhenHasChildren: d.clickableWhenHasChildren,
preserveIconWidth: d.preserveIconWidth !== void 0 ? d.preserveIconWidth : a(f).preserveIconWidth,
showRightArrow: d.children && d.children.length > 0,
hasChildren: d.children && d.children.length > 0,
rawMenuItem: d,
onSubMenuOpen: (k) => {
var L;
return (L = d.onSubMenuOpen) == null ? void 0 : L.call(d, k);
},
onSubMenuClose: (k) => {
var L;
return (L = d.onSubMenuClose) == null ? void 0 : L.call(d, k);
}
}, en({ _: 2 }, [
d.children && d.children.length > 0 ? {
name: "submenu",
fn: K(({ context: k }) => [
te(h, {
parentMenuItemContext: k,
items: d.children,
maxWidth: d.maxWidth,
minWidth: d.minWidth,
adjustPosition: d.adjustSubMenuPosition !== void 0 ? d.adjustSubMenuPosition : a(f).adjustPosition,
direction: d.direction !== void 0 ? d.direction : a(f).direction
}, null, 8, ["parentMenuItemContext", "items", "maxWidth", "minWidth", "adjustPosition", "direction"])
]),
key: "0"
} : void 0
]), 1032, ["clickHandler", "disabled", "hidden", "icon", "iconFontClass", "svgIcon", "svgProps", "label", "customRender", "customClass", "checked", "shortcut", "clickClose", "clickableWhenHasChildren", "preserveIconWidth", "showRightArrow", "hasChildren", "rawMenuItem", "onSubMenuOpen", "onSubMenuClose"])),
d.hidden !== !0 && (d.divided === "down" || d.divided === !0) ? (P(), J(et, { key: 3 })) : q("", !0)
], 64))), 128))
])
], 512)
]),
_: 3
}, 8, ["scroll", "style"])
], 16)
], 8, ["to"])) : q("", !0);
};
}
}), an = /* @__PURE__ */ se({
__name: "ContextSubMenuWrapper",
props: {
/**
* Menu options
*/
options: {
type: Object,
default: null
},
/**
* Show menu?
*/
show: {
type: Boolean,
default: null
},
/**
* Current container, For calculation only
*/
container: {
type: Object,
default: null
},
/**
* Make sure is user set the custom container.
*/
isFullScreenContainer: {
type: Boolean,
default: !0
}
},
emits: ["close", "closeAnimFinished"],
setup(n, { expose: o, emit: e }) {
const i = n, l = e, t = wt(), f = T(), {
options: r,
show: x,
container: p
} = we(i);
Pe(() => {
x.value && z();
}), _e(() => {
G();
}), re(x, (y) => {
y ? z() : (_t(w), G());
});
const w = {
closeMenu: g,
isClosed: c,
getMenuRef: () => f.value,
getMenuDimensions: () => {
var y;
return ((y = f.value) == null ? void 0 : y.getMenuDimensions()) ?? { width: 0, height: 0 };
}
};
let _ = !1;
function z() {
b(), zn(w);
}
function g(y) {
_ = !0, l("close", y), r.value.menuTransitionProps || l("closeAnimFinished"), _t(w);
}
function c() {
return _;
}
function b() {
setTimeout(() => {
document.addEventListener("click", v, !0), document.addEventListener("contextmenu", v, !0), document.addEventListener("scroll", D, !0), !i.isFullScreenContainer && p.value && p.value.addEventListener("scroll", D, !0), r.value.keyboardControl !== !1 && document.addEventListener("keydown", $, !0);
}, 50);
}
function G() {
document.removeEventListener("contextmenu", v, !0), document.removeEventListener("click", v, !0), document.removeEventListener("scroll", D, !0), !i.isFullScreenContainer && p.value && p.value.removeEventListener("scroll", D, !0), r.value.keyboardControl !== !1 && document.removeEventListener("keydown", $, !0);
}
const M = T();
ye("globalSetCurrentSubMenu", (y) => M.value = y), ye("globalGetMenuHostId", p.value.id);
function $(y) {
var A, B, C, W, N, R, j, F, Q, Y, ce, ve, u;
let m = !0;
switch (y.key) {
case "Escape": {
((A = M.value) == null ? void 0 : A.isTopLevel()) === !1 ? (B = M.value) == null || B.closeCurrentSubMenu() : g();
break;
}
case "ArrowDown":
(C = M.value) == null || C.moveCurrentItemDown();
break;
case "ArrowUp":
(W = M.value) == null || W.moveCurrentItemUp();
break;
case "Home":
(N = M.value) == null || N.moveCurrentItemFirst();
break;
case "End":
(R = M.value) == null || R.moveCurrentItemLast();
break;
case "ArrowLeft": {
(j = M.value) != null && j.closeSelfAndActiveParent() || (Q = (F = r.value).onKeyFocusMoveLeft) == null || Q.call(F);
break;
}
case "ArrowRight":
(Y = M.value) != null && Y.openCurrentItemSubMenu() || (ve = (ce = r.value).onKeyFocusMoveRight) == null || ve.call(ce);
break;
case "Enter":
(u = M.value) == null || u.triggerCurrentItemClick(y);
break;
default:
m = !1;
break;
}
m && M.value && (y.stopPropagation(), y.preventDefault());
}
function D(y) {
r.value.closeWhenScroll !== !1 && S(y.target, null);
}
function v(y) {
S(y.target, y);
}
function S(y, A) {
for (var B, C; y; ) {
if (y.classList && y.classList.contains("mx-context-menu"))
return;
y = y.parentNode;
}
A ? r.value.clickCloseOnOutside !== !1 ? (G(), g()) : (C = (B = r.value).onClickOnOutside) == null || C.call(B, A) : (G(), g());
}
return ye("globalOptions", r), ye("globalCloseMenu", g), ye("globalIsFullScreenContainer", i.isFullScreenContainer), ye("globalHasSlot", (y) => t[y] !== void 0), ye("globalRenderSlot", (y, A) => I(t, y, { ...A }, () => [ue("span", "Render slot failed")], !1)), ye("menuContext", {
zIndex: r.value.zIndex || Be.defaultZindex,
container: p.value,
adjustPadding: { x: 0, y: 0 },
getZoom: () => r.value.zoom || Be.defaultZoom,
getParentWidth: () => 0,
getParentHeight: () => 0,
getPositon: () => [r.value.x, r.value.y],
closeOtherSubMenuWithTimeOut: () => {
},
checkCloseOtherSubMenuTimeOut: () => !1,
addOpenedSubMenu: () => {
},
closeOtherSubMenu: () => {
},
getParentContext: () => null,
getSubMenuInstanceContext: () => null,
getElement: () => null,
addChildMenuItem: () => {
},
removeChildMenuItem: () => {
},
markActiveMenuItem: () => {
},
markThisOpenedByKeyBoard: () => {
},
isOpenedByKeyBoardFlag: () => !1,
isMenuItemDataCollectedFlag: () => !1
}), o(w), (y, A) => a(r).menuTransitionProps ? (P(), J(Qt, lt({
key: 0,
appear: ""
}, a(r).menuTransitionProps, {
onAfterLeave: A[0] || (A[0] = (B) => l("closeAnimFinished"))
}), {
default: K(() => [
a(x) ? (P(), J(rt, {
key: 0,
ref_key: "submenuInstance",
ref: f,
items: a(r).items,
adjustPosition: a(r).adjustPosition,
maxWidth: a(r).maxWidth || a(Be).defaultMaxWidth,
minWidth: a(r).minWidth || a(Be).defaultMinWidth,
direction: a(r).direction || a(Be).defaultDirection
}, {
default: K(() => [
I(y.$slots, "default")
]),
_: 3
}, 8, ["items", "adjustPosition", "maxWidth", "minWidth", "direction"])) : q("", !0)
]),
_: 3
}, 16)) : a(x) ? (P(), J(rt, {
key: 1,
ref_key: "submenuInstance",
ref: f,
items: a(r).items,
adjustPosition: a(r).adjustPosition,
maxWidth: a(r).maxWidth || a(Be).defaultMaxWidth,
minWidth: a(r).minWidth || a(Be).defaultMinWidth,
direction: a(r).direction || a(Be).defaultDirection
}, {
default: K(() => [
I(y.$slots, "default")
]),
_: 3
}, 8, ["items", "adjustPosition", "maxWidth", "minWidth", "direction"])) : q("", !0);
}
}), eo = /* @__PURE__ */ se({
__name: "ContextMenu",
props: {
/**
* Menu options
*/
options: {
type: Object,
default: null
},
/**
* Show menu?
*/
show: {
type: Boolean,
default: !1
}
},
emits: ["update:show", "close"],
setup(n, { expose: o, emit: e }) {
const i = e, l = n, { options: t, show: f } = we(l), { isNew: r, container: x, eleId: p } = on(t.value), w = T(null), _ = wt();
function z(g) {
var c, b;
i("update:show", !1), i("close"), (b = (c = t.value).onClose) == null || b.call(c, g);
}
return o({
closeMenu: () => i("update:show", !1),
isClosed: () => !f.value,
getMenuRef: () => {
var g;
return (g = w.value) == null ? void 0 : g.getMenuRef();
},
getMenuDimensions: () => {
var g;
return ((g = w.value) == null ? void 0 : g.getMenuDimensions()) ?? { width: 0, height: 0 };
}
}), (g, c) => (P(), J(ft, {
to: `#${a(p)}`
}, [
te(an, {
ref_key: "menuRef",
ref: w,
options: a(t),
show: a(f),
container: a(x),
isFullScreenContainer: !a(r),
onClose: z
}, en({ _: 2 }, [
Oe(a(_), (b, G) => ({
name: G,
fn: K((M) => [
I(g.$slots, G, me(be(M)))
])
}))
]), 1032, ["options", "show", "container", "isFullScreenContainer"])
], 8, ["to"]));
}
}), to = se({
name: "ContextMenuGroup",
props: {
/**
* Is this menu disabled?
*/
disabled: {
type: Boolean,
default: !1
},
/**
* Is this menu hidden?
*/
hidden: {
type: Boolean,
default: !1
},
/**
* Is this menu disabled?
*/
clickHandler: {
type: Function,
default: null
},
/**
* Menu label
*/
label: {
type: String,
default: ""
},
/**
* Menu icon (for icon class)
*/
icon: {
type: String,
default: ""
},
/**
* Custom icon library font class name.
*
* Only for css font icon, If you use the svg icon, you do not need to use this.
*/
iconFontClass: {
type: String,
default: "iconfont"
},
/**
* Is this menu item checked?
*
* The check mark are displayed on the left side of the icon, so it is not recommended to display the icon at the same time.
*/
checked: {
type: Boolean,
default: !1
},
/**
* Shortcut key text display on the right.
*
* The shortcut keys here are only for display. You need to handle the key events by yourself.
*/
shortcut: {
type: String,
default: ""
},
/**
* Display icons use svg symbol (`<use xlink:href="#icon-symbol-name">`) ， only valid when icon attribute is empty.
*/
svgIcon: {
type: String,
default: ""
},
/**
* The user-defined attribute of the svg tag, which is valid when using `svgIcon`.
*/
svgProps: {
type: Object,
default: null
},
/**
* Should a fixed-width icon area be reserved for menu items without icon. (this item)
*
* Default is true .
*
* The width of icon area can be override with css var `--mx-menu-placeholder-width`.
*/
preserveIconWidth: {
type: Boolean,
default: !0
},
/**
* Show right arrow on this menu?
*/
showRightArrow: {
type: Boolean,
default: !1
},
/**
* Should close menu when Click this menu item ?
*/
clickClose: {
type: Boolean,
default: !0
},
/**
* By default, the submenu will automatically adjust its position to prevent it overflow the container.
*
* If you allow menu overflow containers, you can set this to false.
*
* Default is inherit from `MenuOptions.adjustPosition` .
*/
adjustSubMenuPosition: {
type: Boolean,
default: void 0
},
/**
* Max width of submenu
*/
maxWidth: {
type: [String, Number],
default: 0
},
/**
* Min width of submenu
*/
minWidth: {
type: [String, Number],
default: 0
}
},
setup(n, o) {
const e = oe("globalOptions"), { adjustSubMenuPosition: i, maxWidth: l, minWidth: t } = we(n), f = typeof i.value < "u" ? i.value : e.value.adjustPosition, r = T(), x = T();
return o.expose({
getSubMenuRef: () => r.value,
getMenuItemRef: () => x.value
}), () => ue(zt, {
...n,
ref: x,
showRightArrow: !0,
maxWidth: void 0,
minWidth: void 0,
adjustSubMenuPosition: void 0,
hasChildren: typeof o.slots.default !== void 0
}, o.slots.default ? {
//Create SubMenu
submenu: (p) => ue(rt, {
ref: r,
maxWidth: l.value,
minWidth: t.value,
adjustPosition: f,
parentMenuItemContext: p.context
}, {
default: o.slots.default
}),
//Add other slots
...Bn(o.slots, "default")
} : o.slots);
}
});
function no(n, o, e, i) {
const l = T(!0), t = ue(an, {
options: n,
show: l.value,
container: o,
isFullScreenContainer: !e,
onCloseAnimFinished: () => {
At(null, o);
},
onClose: (f) => {
var r;
(r = n.onClose) == null || r.call(n, f), l.value = !1;
}
}, i);
return At(t, o), t.component;
}
function Ht(n, o) {
const e = on(n);
return no(n, e.container, e.isNew, o).exposed;
}
const st = {
/**
* For Vue install
* @param app
*/
install(n) {
n.config.globalProperties.$contextmenu = Ht, n.component("ContextMenu", eo), n.component("ContextMenuItem", zt), n.component("ContextMenuGroup", to), n.component("ContextMenuSperator", et), n.component("ContextMenuSeparator", et), n.component("ContextSubMenu", rt);
},
/**
* Show a ContextMenu in page, same as `this.$contextmenu`
*
* For example:
*
* ```ts
* onContextMenu(e : MouseEvent) {
* //prevent the browser's default menu
* e.preventDefault();
* //show your menu
* ContextMenu.showContextMenu({
* x: e.x,
* y: e.y,
* items: [
* {
* label: "A menu item",
* o