@imengyu/vue3-context-menu
Version:
A context menu component for Vue3
1,578 lines • 60.5 kB
JavaScript
import { defineComponent as oe, toRefs as fe, ref as S, computed as Se, reactive as Ke, onMounted as Ce, nextTick as ce, onBeforeUnmount as We, openBlock as C, createElementBlock as T, normalizeClass as ae, normalizeStyle as ke, createElementVNode as j, renderSlot as D, unref as s, createCommentVNode as V, inject as N, provide as G, mergeProps as we, createBlock as z, createVNode as de, toDisplayString as Pe, resolveComponent as tt, watch as Te, Teleport as nt, Transition as ht, withCtx as be, withDirectives as vt, Fragment as $e, renderList as Ae, createSlots as ot, vShow as mt, useSlots as lt, h as Ie, normalizeProps as pt, guardReactiveProps as gt, render as Ye } from "vue";
let ie = null;
function bt() {
return ie !== null;
}
function yt(e) {
ie && st(), ie = e;
}
function Ve(e) {
e === ie && (ie = null);
}
function st() {
ie && (ie.closeMenu(), ie = null);
}
const J = {
defaultDirection: "br",
defaultMinWidth: 100,
defaultMaxWidth: 600,
defaultZindex: 100,
defaultZoom: 1,
defaultAdjustPadding: {
x: 0,
y: 10
},
defaultSubMenuOpenDelay: 200
};
function Q(e, n) {
let u = e.offsetTop;
return e.offsetParent != null && e.offsetParent != n && (u -= e.offsetParent.scrollTop, u += Q(e.offsetParent, n)), u;
}
function U(e, n) {
let u = e.offsetLeft;
return e.offsetParent != null && e.offsetParent != n && (u -= e.offsetParent.scrollLeft, u += U(e.offsetParent, n)), u;
}
function Ct(e, n, u, l) {
return {
x: U(e, l) + n,
y: Q(e, l) + u
};
}
const Be = "mx-menu-default-container", Mt = "mx-menu-container-";
let xt = 0;
function ut(e) {
const { getContainer: n, zIndex: u } = e;
if (n) {
const m = typeof n == "function" ? n() : n;
if (m) {
let t = m.getAttribute("id");
return t || (t = Mt + xt++, m.setAttribute("id", t)), {
eleId: t,
container: m,
isNew: !1
};
}
}
let l = document.getElementById(Be);
return l || (l = document.createElement("div"), l.setAttribute("id", Be), l.setAttribute("class", "mx-menu-ghost-host fullscreen"), document.body.appendChild(l)), l.style.zIndex = (u == null ? void 0 : u.toString()) || J.defaultZindex.toString(), {
eleId: Be,
container: l,
isNew: !0
};
}
function kt(e) {
let n = 0;
for (let u = 0; u < e.length; u++) {
const l = e.charCodeAt(u);
n = (n << 5) - n + l, n |= 0;
}
return n;
}
function Ue(e) {
return typeof e == "number" ? `${e}px` : e;
}
const ne = oe({
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(e) {
const { vnode: n, data: u } = fe(e);
return () => typeof n.value == "function" ? n.value(u.value) : n.value;
}
});
function St(e, n) {
const u = { ...e };
return delete u[n], u;
}
var wt = Object.defineProperty, It = (e, n, u) => n in e ? wt(e, n, { enumerable: !0, configurable: !0, writable: !0, value: u }) : e[n] = u, Xe = (e, n, u) => It(e, typeof n != "symbol" ? n + "" : n, u);
class Ze {
constructor(n, u) {
Xe(this, "x", 0), Xe(this, "y", 0), this.x = n || 0, this.y = u || 0;
}
set(n, u) {
this.x = n, this.y = u;
}
substract(n) {
this.x -= n.x, this.y -= n.y;
}
}
function Ge(e) {
const { onDown: n, onMove: u, onUp: l } = e, m = new Ze(), t = new Ze();
let I;
function d(g) {
g.stopPropagation(), t.set(g.x, g.y), t.substract(m), u(m, t, g, I);
}
function p(g) {
l(g, I), m.set(0, 0), document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", p);
}
return (g, M) => n(g, M) ? (I = M, m.set(g.x, g.y), document.addEventListener("mousemove", d), document.addEventListener("mouseup", p), g.stopPropagation(), !0) : !1;
}
function Wt(e, n) {
let u = 0;
return {
start() {
u > 0 && clearInterval(u), u = setInterval(() => {
u = 0, n();
}, e);
},
stop() {
u > 0 && (clearInterval(u), u = 0);
}
};
}
const ge = [], Je = Wt(100, () => {
for (const e of ge)
e();
});
function Ot(e, n, u, l) {
let m = 0, t = 0;
function I() {
e.value && (n && m !== e.value.offsetWidth && n(e.value.offsetWidth), u && t !== e.value.offsetHeight && u(e.value.offsetHeight), l && (m !== e.value.offsetWidth || t !== e.value.offsetHeight) && l(e.value.offsetWidth, e.value.offsetHeight), m = e.value.offsetWidth, t = e.value.offsetHeight);
}
return {
startResizeChecker() {
Je.start(), ge.push(I);
},
stopResizeChecker() {
const d = ge.indexOf(I);
d >= 0 && ge.splice(d, 1), ge.length === 0 && Je.stop();
}
};
}
const Qe = 140, Rt = 70, _t = /* @__PURE__ */ oe({
__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
},
height: {
type: Number,
default: void 0
},
width: {
type: Number,
default: void 0
},
/**
*
*/
maxHeight: {
type: Number,
default: void 0
},
maxWidth: {
type: Number,
default: void 0
},
/**
* CSS class of inner container
*/
containerClass: {
type: String,
default: ""
},
/**
* Container style
*/
containerStyle: {
type: null
}
},
emits: ["scroll", "resized"],
setup(e, { expose: n, emit: u }) {
const l = e, m = u, t = S(), I = S(), d = S(), p = S(), g = S(), M = S(), W = S(!1), A = Se(() => l.scroll === "horizontal" || l.scroll === "both"), $ = Se(() => l.scroll === "vertical" || l.scroll === "both"), b = Ke({
show: !1,
size: 0,
sizeRaw: 0,
pos: 0
}), h = Ke({
show: !1,
size: 0,
sizeRaw: 0,
pos: 0
});
let y = 0, f = 0, i = 0, x = 0, k = null;
const O = { attributes: !0, childList: !0 };
function R() {
if (t.value) {
if (b.show) {
const r = t.value.offsetWidth / t.value.scrollWidth;
b.sizeRaw = r * t.value.offsetWidth, b.size = r * 100, b.pos = t.value.scrollLeft / (t.value.scrollWidth - t.value.offsetWidth) * (100 - b.size), r >= 1 && (b.show = !1);
}
if (h.show) {
const r = t.value.offsetHeight / t.value.scrollHeight;
h.sizeRaw = r * t.value.offsetHeight, h.size = r * 100, h.pos = t.value.scrollTop / (t.value.scrollHeight - t.value.offsetHeight) * (100 - h.size), r >= 1 && (h.show = !1);
}
m("scroll", t.value.scrollLeft, t.value.scrollTop);
}
}
function c(r = !1) {
if (!t.value)
return;
let o = A.value, v = $.value;
const H = o && (y !== t.value.scrollWidth || i !== t.value.offsetWidth), a = $ && (f !== t.value.scrollHeight || x !== t.value.offsetHeight);
if (!r && !H && !a)
return;
const ee = window.getComputedStyle(t.value);
(ee.overflow === "hidden" || ee.overflowX === "hidden") && (o = !1), (ee.overflow === "hidden" || ee.overflowY === "hidden") && (v = !1), b.show = o, h.show = v, R(), i = t.value.offsetWidth, x = t.value.offsetHeight, y = t.value.scrollWidth, f = t.value.scrollHeight, m("resized", y, f);
}
function B(r) {
var o;
l.scroll == "horizontal" && (r.deltaMode == 0 && ((o = t.value) == null || o.scrollTo({
left: t.value.scrollLeft + (r.deltaY > 0 ? Qe : -140),
behavior: "smooth"
})), r.preventDefault(), r.stopPropagation());
}
function P(r) {
var o;
r.deltaMode == 0 && ((o = t.value) == null || o.scrollTo({
left: t.value.scrollLeft + (r.deltaY > 0 ? Qe : -140),
behavior: "smooth"
}), r.preventDefault(), r.stopPropagation());
}
function L(r) {
var o;
r.deltaMode == 0 && ((o = t.value) == null || o.scrollTo({
top: t.value.scrollTop + (r.deltaY > 0 ? Rt : -70),
behavior: "smooth"
}), r.preventDefault(), r.stopPropagation());
}
let K = 0, le = 0, F = 0, w = 0;
const E = Ge({
onDown(r) {
return !d.value || !g.value ? !1 : (K = r.offsetX, le = r.x - r.offsetX - g.value.offsetLeft, r.preventDefault(), W.value = !0, !0);
},
onMove(r, o, v) {
t.value && d.value && (se(v.x - K - le), v.preventDefault(), v.stopPropagation());
},
onUp() {
W.value = !1;
}
}), Y = Ge({
onDown(r) {
return !p.value || !M.value ? !1 : (F = r.offsetY, w = r.y - r.offsetY - M.value.offsetTop, r.preventDefault(), W.value = !0, !0);
},
onMove(r, o, v) {
t.value && p.value && (q(v.y - F - w), v.preventDefault(), v.stopPropagation());
},
onUp() {
W.value = !1;
}
});
function Z(r) {
t.value && (t.value.scrollLeft = r / 100 * (t.value.scrollWidth - t.value.offsetWidth));
}
function X(r) {
t.value && (t.value.scrollLeft = r / 100 * (t.value.scrollHeight - t.value.offsetHeight));
}
function se(r) {
t.value && (t.value.scrollLeft = r / (t.value.offsetWidth - b.sizeRaw) * (t.value.scrollWidth - t.value.offsetWidth));
}
function q(r) {
t.value && (t.value.scrollTop = r / (t.value.offsetHeight - h.sizeRaw) * (t.value.scrollHeight - t.value.offsetHeight));
}
function re(r) {
l.scrollBarBackgroundClickable && se(r.offsetX - b.sizeRaw / 2);
}
function _(r) {
l.scrollBarBackgroundClickable && q(r.offsetY - h.sizeRaw / 2);
}
const {
startResizeChecker: he,
stopResizeChecker: De
} = Ot(
t,
() => c(),
() => c()
);
return Ce(() => {
ce(() => {
setTimeout(() => c(!0), 200), c(!0), he(), k = new MutationObserver(() => c()), k.observe(t.value, O);
});
}), We(() => {
De(), k && (k.disconnect(), k = null);
}), n({
refreshScrollState() {
c(!0);
},
getScrollContainer() {
return t.value;
},
scrollTo(r, o) {
var v;
(v = t.value) == null || v.scrollTo(r, o);
},
scrollToTop() {
var r;
(r = t.value) == null || r.scrollTo(0, 0);
},
scrollToBottom() {
var r;
(r = t.value) == null || r.scrollTo(t.value.scrollWidth, t.value.scrollHeight);
}
}), (r, o) => (C(), T("div", {
ref_key: "scrollrect",
ref: I,
class: ae([
"vue-scroll-rect",
e.scrollBarAlwaysShow ? "always-show-scrollbar" : "",
e.scrollBarBackgroundClickable ? "background-clickable" : "",
W.value ? "dragging" : ""
]),
style: ke({
width: e.width ? `${e.width}px` : void 0,
height: e.height ? `${e.height}px` : void 0
}),
onWheel: B
}, [
j("div", {
ref_key: "container",
ref: t,
class: ae(["scroll-content", e.scroll, e.containerClass]),
style: ke({
maxWidth: e.maxWidth ? `${e.maxWidth}px` : void 0,
maxHeight: e.maxHeight ? `${e.maxHeight}px` : void 0,
...e.containerStyle
}),
onScroll: R
}, [
D(r.$slots, "default")
], 38),
b.show ? D(r.$slots, "scrollBarX", {
key: 0,
scrollBarValue: b,
onScroll: Z
}, () => [
j("div", {
ref_key: "scrollBarRefX",
ref: d,
class: "scrollbar horizontal",
onClick: re,
onWheel: P
}, [
j("div", {
class: "thumb",
ref_key: "scrollBarThumbRefX",
ref: g,
style: ke({ left: `${b.pos}%`, width: `${b.size}%` }),
onMousedown: o[0] || (o[0] = //@ts-ignore
(...v) => s(E) && s(E)(...v)),
onWheel: P
}, null, 36)
], 544)
]) : V("", !0),
h.show ? D(r.$slots, "scrollBarY", {
key: 1,
scrollBarValue: h,
onScroll: X
}, () => [
h.show ? (C(), T("div", {
key: 0,
ref_key: "scrollBarRefY",
ref: p,
class: "scrollbar vertical",
onClick: _,
onWheel: L
}, [
j("div", {
class: "thumb",
ref_key: "scrollBarThumbRefY",
ref: M,
style: ke({ top: `${h.pos}%`, height: `${h.size}%` }),
onMousedown: o[1] || (o[1] = //@ts-ignore
(...v) => s(Y) && s(Y)(...v)),
onWheel: L
}, null, 36)
], 544)) : V("", !0)
]) : V("", !0)
], 38));
}
}), Oe = (e, n) => {
const u = e.__vccOpts || e;
for (const [l, m] of n)
u[l] = m;
return u;
}, Ht = {}, Bt = {
class: "mx-checked-mark",
"aria-hidden": "true",
viewBox: "0 0 1024 1024"
}, Pt = /* @__PURE__ */ j("path", { d: "M129.3,428.6L52,512l345,372.5l575-620.8l-69.5-75L400.4,718.2L129.3,428.6z" }, null, -1), $t = [
Pt
];
function Tt(e, n) {
return C(), T("svg", Bt, $t);
}
const At = /* @__PURE__ */ Oe(Ht, [["render", Tt]]), Lt = {}, Ft = {
class: "mx-right-arrow",
"aria-hidden": "true",
viewBox: "0 0 1024 1024"
}, Dt = /* @__PURE__ */ j("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), Et = [
Dt
];
function zt(e, n) {
return C(), T("svg", Ft, Et);
}
const jt = /* @__PURE__ */ Oe(Lt, [["render", zt]]), Nt = { class: "mx-item-row" }, Kt = ["xlink:href"], Yt = {
key: 1,
class: "label"
}, Vt = { class: "mx-item-row" }, Ut = { class: "mx-shortcut" }, Le = /* @__PURE__ */ oe({
__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(e, { expose: n, emit: u }) {
const l = e, m = u, {
clickHandler: t,
clickClose: I,
clickableWhenHasChildren: d,
disabled: p,
hidden: g,
label: M,
icon: W,
iconFontClass: A,
showRightArrow: $,
shortcut: b,
hasChildren: h
} = fe(l), y = S(!1), f = S(!1), i = S(), x = N("globalOptions"), k = N("globalHasSlot"), O = N("globalRenderSlot"), R = N("globalCloseMenu"), c = N("menuContext"), B = Se(() => typeof M.value == "string" ? M.value : typeof M.value == "function" ? kt(M.value.toString()) : "MenuItem[unknow]");
G("MenuItemName", B);
const P = {
getSubMenuInstance: () => {
},
showSubMenu: () => y.value ? (c.markActiveMenuItem(P, !0), !0) : h.value ? (K(), !0) : !1,
hideSubMenu: () => {
c.closeOtherSubMenu();
},
isDisabledOrHidden: () => p.value || g.value,
getElement: () => i.value,
focus: () => f.value = !0,
blur: () => f.value = !1,
click: L
};
G("menuItemInstance", P), Ce(() => {
c.isMenuItemDataCollectedFlag() ? ce(() => {
let w = 0;
const E = c.getElement();
if (E) {
let Y = 0;
for (let Z = 0; Z < E.children.length; Z++) {
const X = E.children[Z];
if (X.getAttribute("data-type") === "ContextMenuItem") {
if (X === i.value) {
w = Y;
break;
}
Y++;
}
}
}
c.addChildMenuItem(P, w);
}) : c.addChildMenuItem(P);
}), We(() => {
c.removeChildMenuItem(P);
});
function L(w) {
if (!p.value) {
if (w) {
const E = w.target;
if (E.classList.contains("mx-context-no-clickable") || x.value.ignoreClickClassName && E.classList.contains(x.value.ignoreClickClassName))
return;
if (x.value.clickCloseClassName && E.classList.contains(x.value.clickCloseClassName)) {
w.stopPropagation(), R(l.rawMenuItem);
return;
}
}
h.value ? d.value ? (typeof t.value == "function" && t.value(w), m("click", w)) : y.value || K() : (typeof t.value == "function" && t.value(w), m("click", w), I.value && R(l.rawMenuItem));
}
}
function K(w) {
f.value = !1, p.value || (c.markActiveMenuItem(P), h.value ? (w || c.markThisOpenedByKeyBoard(), c.openSubMenuWithDelay(() => {
c.addOpenedSubMenu(le), y.value = !0, ce(() => m("subMenuOpen", P));
}, i.value)) : (c.cancelPendingOpen(), c.closeOtherSubMenu()));
}
function le() {
f.value = !1, y.value = !1, m("subMenuClose", P);
}
function F() {
return {
disabled: p.value,
label: M.value,
icon: W.value,
iconFontClass: A.value,
showRightArrow: $.value,
clickClose: I.value,
clickableWhenHasChildren: d.value,
shortcut: b.value,
theme: x.value.theme,
isOpen: y,
hasChildren: h,
onClick: L,
onMouseEnter: K,
closeMenu: R
};
}
return n(P), (w, E) => {
var Y;
return s(g) ? V("", !0) : (C(), T("div", we({
key: 0,
class: "mx-context-menu-item-wrapper",
ref_key: "menuItemRef",
ref: i,
"data-type": "ContextMenuItem"
}, {
...w.$attrs,
...((Y = e.rawMenuItem) == null ? void 0 : Y.attrs) || {}
}), [
s(k)("itemRender") ? (C(), z(s(ne), {
key: 0,
vnode: () => s(O)("itemRender", F())
}, null, 8, ["vnode"])) : e.customRender ? (C(), z(s(ne), {
key: 1,
vnode: e.customRender,
data: F()
}, null, 8, ["vnode", "data"])) : (C(), T("div", {
key: 2,
class: ae([
"mx-context-menu-item",
s(p) ? "disabled" : "",
f.value ? "keyboard-focus" : "",
e.customClass ? " " + e.customClass : "",
y.value ? "open" : ""
]),
onClick: L,
onMouseenter: K
}, [
D(w.$slots, "default", {}, () => [
j("div", Nt, [
j("div", {
class: ae([
"mx-icon-placeholder",
e.preserveIconWidth ? "preserve-width" : ""
])
}, [
D(w.$slots, "icon", {}, () => [
s(k)("itemIconRender") ? (C(), z(s(ne), {
key: 0,
vnode: () => s(O)("itemIconRender", F())
}, null, 8, ["vnode"])) : typeof e.svgIcon == "string" && e.svgIcon ? (C(), T("svg", we({
key: 1,
class: "icon svg"
}, e.svgProps), [
j("use", { "xlink:href": e.svgIcon }, null, 8, Kt)
], 16)) : typeof s(W) != "string" ? (C(), z(s(ne), {
key: 2,
vnode: s(W),
data: s(W)
}, null, 8, ["vnode", "data"])) : typeof s(W) == "string" && s(W) !== "" ? (C(), T("i", {
key: 3,
class: ae(s(W) + " icon " + s(A) + " " + s(x).iconFontClass)
}, null, 2)) : V("", !0)
]),
e.checked ? D(w.$slots, "check", { key: 0 }, () => [
s(k)("itemCheckRender") ? (C(), z(s(ne), {
key: 0,
vnode: () => s(O)("itemCheckRender", F())
}, null, 8, ["vnode"])) : V("", !0),
de(At)
]) : V("", !0)
], 2),
D(w.$slots, "label", {}, () => [
s(k)("itemLabelRender") ? (C(), z(s(ne), {
key: 0,
vnode: () => s(O)("itemLabelRender", F())
}, null, 8, ["vnode"])) : typeof s(M) == "string" ? (C(), T("span", Yt, Pe(s(M)), 1)) : (C(), z(s(ne), {
key: 2,
vnode: s(M),
data: s(M)
}, null, 8, ["vnode", "data"]))
])
]),
j("div", Vt, [
s(b) || w.$slots.shortcut ? D(w.$slots, "shortcut", { key: 0 }, () => [
s(k)("itemShortcutRender") ? (C(), z(s(ne), {
key: 0,
vnode: () => s(O)("itemShortcutRender", F())
}, null, 8, ["vnode"])) : V("", !0),
j("span", Ut, Pe(s(b)), 1)
]) : V("", !0),
s($) ? D(w.$slots, "rightArrow", { key: 1 }, () => [
s(k)("itemRightArrowRender") ? (C(), z(s(ne), {
key: 0,
vnode: () => s(O)("itemRightArrowRender", F())
}, null, 8, ["vnode"])) : V("", !0),
de(jt)
]) : V("", !0)
])
])
], 34)),
D(w.$slots, "submenu", {
context: P,
show: y.value
})
], 16));
};
}
}), Xt = oe({
name: "ContextMenuSperator",
components: {
VNodeRender: ne
},
setup() {
const e = N("globalHasSlot"), n = N("globalRenderSlot");
return {
globalHasSlot: e,
globalRenderSlot: n
};
}
}), Zt = {
key: 1,
class: "mx-context-menu-item-sperator mx-context-no-clickable"
};
function Gt(e, n, u, l, m, t) {
const I = tt("VNodeRender");
return e.globalHasSlot("separatorRender") ? (C(), z(I, {
key: 0,
vnode: () => e.globalRenderSlot("separatorRender", {})
}, null, 8, ["vnode"])) : (C(), T("div", Zt));
}
const ye = /* @__PURE__ */ Oe(Xt, [["render", Gt]]), Fe = /* @__PURE__ */ oe({
__name: "ContextSubMenu",
props: {
/**
* Items from options
*/
items: {
type: Object,
default: null
},
/**
* Show
*/
show: {
type: Boolean,
default: !1
},
/**
* Should the menu be destroyed when it is closed?
*/
destroyOnClose: {
type: Boolean,
default: !0
},
/**
* Max height for this submenu
*/
maxHeight: {
type: Number,
default: 0
},
/**
* 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
}
},
emits: ["closeAnimFinished"],
setup(e, { expose: n, emit: u }) {
const l = e, m = u, t = S(!1), I = N("globalGetMenuHostId", ""), d = N("menuContext"), p = N("globalOptions");
N("globalHasSlot"), N("globalRenderSlot");
const g = S("UnknowOrRoot"), M = N("MenuItemName", g), { zIndex: W, getParentWidth: A, getParentHeight: $, getZoom: b } = d, { adjustPosition: h } = fe(l), y = S(), f = S(), i = S(), x = [], k = N("globalSetCurrentSubMenu"), O = [];
let R = null, c = 0, B = 0;
function P() {
R && R.blur();
}
function L(o, v) {
if (o) {
for (let H = v !== void 0 ? v : 0; H < O.length; H++)
if (!O[H].isDisabledOrHidden()) {
K(H);
break;
}
} else
for (let H = v !== void 0 ? v : O.length - 1; H >= 0; H--)
if (!O[H].isDisabledOrHidden()) {
K(H);
break;
}
}
function K(o) {
if (R && P(), o !== void 0 && (R = O[Math.max(0, Math.min(o, O.length - 1))]), !R)
return;
R.focus();
const v = R.getElement();
v && v.scrollIntoView({
behavior: "auto",
block: "nearest",
inline: "nearest"
});
}
function le() {
k(F);
}
const F = {
el: i,
name: M,
isTopLevel: () => d.getParentContext() === null,
closeSelfAndActiveParent: () => {
const o = Y.getParentContext();
if (o) {
o.closeOtherSubMenu();
const v = o.getSubMenuInstanceContext();
if (v)
return v.focusCurrentItem(), !0;
}
return !1;
},
closeCurrentSubMenu: () => {
var o;
return (o = Y.getParentContext()) == null ? void 0 : o.closeOtherSubMenu();
},
moveCurrentItemFirst: () => L(!0),
moveCurrentItemLast: () => L(!1),
moveCurrentItemDown: () => L(!0, R ? O.indexOf(R) + 1 : 0),
moveCurrentItemUp: () => L(!1, R ? O.indexOf(R) - 1 : 0),
focusCurrentItem: () => K(),
openCurrentItemSubMenu: () => R ? R == null ? void 0 : R.showSubMenu() : !1,
triggerCurrentItemClick: (o) => R == null ? void 0 : R.click(o)
};
let w = !1, E = !1;
const Y = {
zIndex: W + 1,
container: d.container,
adjustPadding: p.value.adjustPadding || J.defaultAdjustPadding,
getParentWidth: () => {
var o;
return ((o = i.value) == null ? void 0 : o.offsetWidth) || 0;
},
getParentHeight: () => {
var o;
return ((o = i.value) == null ? void 0 : o.offsetHeight) || 0;
},
getPositon: () => [_.value.x, _.value.y],
getZoom: () => p.value.zoom || J.defaultZoom,
addOpenedSubMenu(o) {
x.push(o);
},
closeOtherSubMenu() {
x.forEach((o) => o()), x.splice(0, x.length), k(F);
},
checkCloseOtherSubMenuTimeOut() {
return c ? (clearTimeout(c), c = 0, !0) : !1;
},
closeOtherSubMenuWithTimeOut() {
c = setTimeout(() => {
c = 0, this.closeOtherSubMenu();
}, 200);
},
openSubMenuWithDelay(o, v) {
B && (clearTimeout(B), B = 0);
const H = p.value.subMenuOpenDelay ?? J.defaultSubMenuOpenDelay, a = x.length > 0;
H === 0 || !a ? (this.closeOtherSubMenu(), o()) : B = setTimeout(() => {
B = 0, v.matches(":hover") && (this.closeOtherSubMenu(), o());
}, H);
},
cancelPendingOpen() {
B && (clearTimeout(B), B = 0);
},
addChildMenuItem: (o, v) => {
v === void 0 ? O.push(o) : O.splice(v, 0, o);
},
removeChildMenuItem: (o) => {
O.splice(O.indexOf(o), 1), o.getSubMenuInstance = () => {
};
},
markActiveMenuItem: (o, v = !1) => {
P(), R = o, v && K();
},
markThisOpenedByKeyBoard: () => {
w = !0;
},
isOpenedByKeyBoardFlag: () => w ? (w = !1, !0) : !1,
isMenuItemDataCollectedFlag: () => E,
getElement: () => i.value || null,
getParentContext: () => d,
getSubMenuInstanceContext: () => F
};
G("menuContext", Y);
const Z = {
getChildItem: (o) => O[o],
getMenuDimensions: () => f.value ? {
width: f.value.offsetWidth,
height: f.value.offsetHeight
} : { width: 0, height: 0 },
getSubmenuRoot: () => f.value,
getMenu: () => i.value,
getScrollValue: () => {
var o, v;
return ((v = (o = y.value) == null ? void 0 : o.getScrollContainer()) == null ? void 0 : v.scrollTop) || 0;
},
setScrollValue: (o) => {
var v;
return (v = y.value) == null ? void 0 : v.scrollTo(0, o);
},
getScrollHeight: () => se.value,
adjustPosition: () => {
he();
},
getMaxHeight: () => q.value,
getPosition: () => _.value,
setPosition: (o, v) => {
_.value.x = o, _.value.y = v;
}
}, X = N("menuItemInstance", void 0);
X && (X.getSubMenuInstance = () => Z);
const se = S(0), q = S(0), re = S(!1), _ = S({ x: 0, y: 0 });
function he() {
ce(() => {
var H;
const o = i.value, v = f.value;
if (o && v && y.value) {
const { container: a } = d, ee = (A == null ? void 0 : A()) ?? 0, ue = ($ == null ? void 0 : $()) ?? 0, te = getComputedStyle(v), Me = parseFloat(te.paddingLeft), xe = parseFloat(te.paddingTop), Re = ue > 0 ? xe : 0, it = document.documentElement.scrollHeight / b(), rt = document.documentElement.scrollWidth / b(), ct = Math.min(rt, a.offsetWidth), Ee = Math.min(it, a.offsetHeight);
let _e = U(o, a), He = Q(o, a);
if (l.direction.includes("l") ? _.value.x -= o.offsetWidth + Me : l.direction.includes("r") ? _.value.x += ee + Me : (_.value.x += ee / 2, _.value.x -= (o.offsetWidth + Me) / 2), l.direction.includes("t")) {
const ve = (H = l.parentMenuItemContext) == null ? void 0 : H.getElement();
ve && (_.value.y += ve.offsetHeight), _.value.y -= (o.offsetHeight + xe) / b();
} else
l.direction.includes("b") ? _.value.y -= xe / b() : _.value.y -= o.offsetHeight / 2 / b();
ce(() => {
var je, Ne;
_e = U(o, a), He = Q(o, a);
const ve = ((Ne = (je = y.value) == null ? void 0 : je.getScrollContainer()) == null ? void 0 : Ne.scrollHeight) || 0, dt = l.maxHeight;
se.value = l.maxHeight ? Math.min(ve, l.maxHeight) : ve;
const ft = _e + o.offsetWidth - ct, ze = He + se.value + Re * 2 - Ee;
if (re.value = ze > 0, h.value && ft > 0) {
const me = ee + o.offsetWidth - Me, pe = _e;
me > pe ? _.value.x -= pe : _.value.x -= me;
}
if (re.value) {
if (h.value) {
const me = ze, pe = He;
me > pe ? _.value.y -= pe - Re : _.value.y -= me - Re;
}
q.value = Ee - (_.value.y + xe);
} else
q.value = dt || 0;
});
}
});
}
function De() {
}
function r() {
var v;
const o = (v = l.parentMenuItemContext) == null ? void 0 : v.getElement();
if (o) {
const H = U(o, d.container), a = Q(o, d.container);
_.value.x = H, _.value.y = a;
} else {
const [H, a] = d.getPositon();
_.value.x = H, _.value.y = a;
}
ce(() => {
var H;
k(F), (H = i.value) == null || H.focus({ preventScroll: !0 }), d.isOpenedByKeyBoardFlag() && ce(() => L(!0)), E = !0;
}), he();
}
return Te(() => l.show, (o) => {
o ? r() : void 0;
}), Ce(() => {
t.value = !0, l.show ? r() : he();
}), We(() => {
t.value = !1, X && (X.getSubMenuInstance = () => {
});
}), n(Z), (o, v) => {
const H = tt("ContextSubMenu", !0);
return t.value ? (C(), z(nt, {
key: 0,
to: `#${s(I)}`
}, [
de(ht, we({ appear: "" }, s(p).menuTransitionProps || {
duration: 10
}, {
onAfterLeave: v[0] || (v[0] = (a) => m("closeAnimFinished"))
}), {
default: be(() => [
!e.destroyOnClose || e.show ? vt((C(), T("div", we({
key: 0,
ref_key: "submenuRoot",
ref: f
}, o.$attrs, {
class: [
"mx-context-menu",
s(p).customClass ? s(p).customClass : "",
s(p).theme ?? ""
],
style: {
maxWidth: e.maxWidth ? s(Ue)(e.maxWidth) : `${s(J).defaultMaxWidth}px`,
minWidth: e.minWidth ? s(Ue)(e.minWidth) : `${s(J).defaultMinWidth}px`,
zIndex: s(W),
left: `${_.value.x}px`,
top: `${_.value.y}px`
},
"data-type": "ContextSubMenu",
onClick: le
}), [
de(s(_t), {
ref_key: "scrollRectRef",
ref: y,
scroll: "vertical",
maxHeight: q.value,
containerClass: "mx-context-menu-scroll"
}, {
default: be(() => [
j("div", {
class: ae(["mx-context-menu-items"]),
ref_key: "menu",
ref: i
}, [
D(o.$slots, "default", {}, () => [
(C(!0), T($e, null, Ae(e.items, (a, ee) => (C(), T($e, { key: ee }, [
a.hidden !== !0 && a.divided === "up" ? (C(), z(ye, { key: 0 })) : V("", !0),
a.hidden !== !0 && a.divided === "self" ? (C(), z(ye, { key: 1 })) : (C(), z(Le, {
key: 2,
clickHandler: a.onClick ? (ue) => a.onClick(ue) : void 0,
disabled: typeof a.disabled == "object" ? a.disabled.value : a.disabled,
hidden: typeof a.hidden == "object" ? a.hidden.value : a.hidden,
icon: a.icon,
iconFontClass: a.iconFontClass,
svgIcon: a.svgIcon,
svgProps: a.svgProps,
label: a.label,
customRender: a.customRender,
customClass: a.customClass,
checked: typeof a.checked == "object" ? a.checked.value : a.checked,
shortcut: a.shortcut,
clickClose: a.clickClose,
clickableWhenHasChildren: a.clickableWhenHasChildren,
preserveIconWidth: a.preserveIconWidth !== void 0 ? a.preserveIconWidth : s(p).preserveIconWidth,
showRightArrow: a.children && a.children.length > 0,
hasChildren: a.children && a.children.length > 0,
rawMenuItem: a,
onSubMenuOpen: (ue) => {
var te;
return (te = a.onSubMenuOpen) == null ? void 0 : te.call(a, ue);
},
onSubMenuClose: (ue) => {
var te;
return (te = a.onSubMenuClose) == null ? void 0 : te.call(a, ue);
}
}, ot({ _: 2 }, [
a.children && a.children.length > 0 ? {
name: "submenu",
fn: be(({ context: ue, show: te }) => [
de(H, {
show: te,
destroyOnClose: e.destroyOnClose,
parentMenuItemContext: ue,
items: a.children,
maxWidth: a.maxWidth,
minWidth: a.minWidth,
maxHeight: a.maxHeight,
adjustPosition: a.adjustSubMenuPosition !== void 0 ? a.adjustSubMenuPosition : s(p).adjustPosition,
direction: a.direction !== void 0 ? a.direction : s(p).direction
}, null, 8, ["show", "destroyOnClose", "parentMenuItemContext", "items", "maxWidth", "minWidth", "maxHeight", "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"])),
a.hidden !== !0 && (a.divided === "down" || a.divided === !0) ? (C(), z(ye, { key: 3 })) : V("", !0)
], 64))), 128))
])
], 512)
]),
_: 3
}, 8, ["maxHeight"])
], 16)), [
[mt, e.show]
]) : V("", !0)
]),
_: 3
}, 16)
], 8, ["to"])) : V("", !0);
};
}
});
const at = /* @__PURE__ */ oe({
__name: "ContextSubMenuWrapper",
props: {
/**
* Menu options
*/
options: {
type: Object,
default: null
},
/**
* Show menu?
*/
show: {
type: null,
default: null
},
/**
* Should the menu be destroyed when it is closed?
*/
destroyOnClose: {
type: Boolean,
default: !0
},
/**
* 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(e, { expose: n, emit: u }) {
const l = e, m = u, t = lt(), I = S(), {
options: d,
show: p,
destroyOnClose: g,
container: M
} = fe(l);
Ce(() => {
p.value && $();
}), We(() => {
f();
}), Te(p, (c) => {
c ? $() : (Ve(W), f());
});
const W = {
closeMenu: b,
isClosed: h,
getMenuRef: () => I.value,
getMenuDimensions: () => {
var c;
return ((c = I.value) == null ? void 0 : c.getMenuDimensions()) ?? { width: 0, height: 0 };
}
};
let A = !1;
function $() {
y(), yt(W);
}
function b(c) {
A = !0, m("close", c), d.value.menuTransitionProps || m("closeAnimFinished"), Ve(W);
}
function h() {
return A;
}
function y() {
setTimeout(() => {
document.addEventListener("click", O, !0), document.addEventListener("contextmenu", O, !0), document.addEventListener("scroll", k, !0), !l.isFullScreenContainer && M.value && M.value.addEventListener("scroll", k, !0), d.value.keyboardControl !== !1 && document.addEventListener("keydown", x, !0);
}, 50);
}
function f() {
document.removeEventListener("contextmenu", O, !0), document.removeEventListener("click", O, !0), document.removeEventListener("scroll", k, !0), !l.isFullScreenContainer && M.value && M.value.removeEventListener("scroll", k, !0), d.value.keyboardControl !== !1 && document.removeEventListener("keydown", x, !0);
}
const i = S();
G("globalSetCurrentSubMenu", (c) => i.value = c), G("globalGetMenuHostId", M.value.id);
function x(c) {
var P, L, K, le, F, w, E, Y, Z, X, se, q, re;
let B = !0;
switch (c.key) {
case "Escape": {
((P = i.value) == null ? void 0 : P.isTopLevel()) === !1 ? (L = i.value) == null || L.closeCurrentSubMenu() : b();
break;
}
case "ArrowDown":
(K = i.value) == null || K.moveCurrentItemDown();
break;
case "ArrowUp":
(le = i.value) == null || le.moveCurrentItemUp();
break;
case "Home":
(F = i.value) == null || F.moveCurrentItemFirst();
break;
case "End":
(w = i.value) == null || w.moveCurrentItemLast();
break;
case "ArrowLeft": {
(E = i.value) != null && E.closeSelfAndActiveParent() || (Z = (Y = d.value).onKeyFocusMoveLeft) == null || Z.call(Y);
break;
}
case "ArrowRight":
(X = i.value) != null && X.openCurrentItemSubMenu() || (q = (se = d.value).onKeyFocusMoveRight) == null || q.call(se);
break;
case "Enter":
(re = i.value) == null || re.triggerCurrentItemClick(c);
break;
default:
B = !1;
break;
}
B && i.value && (c.stopPropagation(), c.preventDefault());
}
function k(c) {
d.value.closeWhenScroll !== !1 && R(c.target, null);
}
function O(c) {
R(c.target, c);
}
function R(c, B) {
var P, L;
for (; c; ) {
if (c.classList && c.classList.contains("mx-context-menu"))
return;
c = c.parentNode;
}
B ? d.value.clickCloseOnOutside !== !1 ? (f(), b()) : (L = (P = d.value).onClickOnOutside) == null || L.call(P, B) : (f(), b());
}
return G("globalOptions", d), G("globalCloseMenu", b), G("globalIsFullScreenContainer", l.isFullScreenContainer), G("globalHasSlot", (c) => t[c] !== void 0), G("globalRenderSlot", (c, B) => D(t, c, { ...B }, () => [Ie("span", "Render slot failed")], !1)), G("menuContext", {
zIndex: d.value.zIndex || J.defaultZindex,
container: M.value,
adjustPadding: { x: 0, y: 0 },
getZoom: () => d.value.zoom || J.defaultZoom,
getParentWidth: () => 0,
getParentHeight: () => 0,
getPositon: () => [d.value.x, d.value.y],
closeOtherSubMenuWithTimeOut: () => {
},
checkCloseOtherSubMenuTimeOut: () => !1,
openSubMenuWithDelay: (c) => c(),
cancelPendingOpen: () => {
},
addOpenedSubMenu: () => {
},
closeOtherSubMenu: () => {
},
getParentContext: () => null,
getSubMenuInstanceContext: () => null,
getElement: () => null,
addChildMenuItem: () => {
},
removeChildMenuItem: () => {
},
markActiveMenuItem: () => {
},
markThisOpenedByKeyBoard: () => {
},
isOpenedByKeyBoardFlag: () => !1,
isMenuItemDataCollectedFlag: () => !1
}), n(W), (c, B) => (C(), z(Fe, {
ref_key: "submenuInstance",
ref: I,
show: s(p),
destroyOnClose: s(g),
items: s(d).items,
adjustPosition: s(d).adjustPosition,
maxWidth: s(d).maxWidth || s(J).defaultMaxWidth,
minWidth: s(d).minWidth || s(J).defaultMinWidth,
maxHeight: s(d).maxHeight,
direction: s(d).direction || s(J).defaultDirection,
onCloseAnimFinished: B[0] || (B[0] = (P) => m("closeAnimFinished"))
}, {
default: be(() => [
D(c.$slots, "default")
]),
_: 3
}, 8, ["show", "destroyOnClose", "items", "adjustPosition", "maxWidth", "minWidth", "maxHeight", "direction"]));
}
});
const Jt = /* @__PURE__ */ oe({
__name: "ContextMenu",
props: {
/**
* Menu options
*/
options: {
type: Object,
default: null
},
/**
* Show menu?
*/
show: {
type: Boolean,
default: !1
},
/**
* Should the menu be destroyed when it is closed?
*/
destroyOnClose: {
type: Boolean,
default: !0
}
},
emits: ["update:show", "close"],
setup(e, { expose: n, emit: u }) {
const l = u, m = e, { options: t, show: I, destroyOnClose: d } = fe(m), { isNew: p, container: g, eleId: M } = ut(t.value), W = S(null), A = lt();
function $(b) {
var h, y;
l("update:show", !1), l("close"), (y = (h = t.value).onClose) == null || y.call(h, b);
}
return n({
closeMenu: () => l("update:show", !1),
isClosed: () => !I.value,
getMenuRef: () => {
var b;
return (b = W.value) == null ? void 0 : b.getMenuRef();
},
getMenuDimensions: () => {
var b;
return ((b = W.value) == null ? void 0 : b.getMenuDimensions()) ?? { width: 0, height: 0 };
}
}), (b, h) => (C(), z(nt, {
to: `#${s(M)}`
}, [
de(at, {
ref_key: "menuRef",
ref: W,
options: s(t),
show: s(I),
destroyOnClose: s(d),
container: s(g),
isFullScreenContainer: !s(p),
onClose: $
}, ot({ _: 2 }, [
Ae(s(A), (y, f) => ({
name: f,
fn: be((i) => [
D(b.$slots, f, pt(gt(i)))
])
}))
]), 1032, ["options", "show", "destroyOnClose", "container", "isFullScreenContainer"])
], 8, ["to"]));
}
}), Qt = oe({
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 height of submenu
*/
maxHeight: {
type: [String, Number],
default: 0
},
/**
* Max width of submenu
*/
maxWidth: {
type: [String, Number],
default: 0
},
/**
* Min width of submenu
*/
minWidth: {
type: [String, Number],
default: 0
}
},
setup(e, n) {
const u = N("globalOptions"), { adjustSubMenuPosition: l, maxWidth: m, minWidth: t, maxHeight: I } = fe(e), d = typeof l.value < "u" ? l.value : u.value.adjust