@vunk/graph 0.0.1

package/components/context-menu/index.mjs

@@ -0,0 +1,1797 @@
+import { defineComponent, toRefs, inject, ref, h, computed, provide, onMounted, nextTick, onBeforeUnmount, createCommentVNode, createElementBlock, unref, openBlock, createBlock, renderSlot, normalizeClass, createElementVNode, mergeProps, createVNode, toDisplayString, watch, resolveComponent, Teleport, Transition, withCtx, Fragment, renderList, createSlots, reactive, normalizeStyle, useSlots, normalizeProps, guardReactiveProps, render } from 'vue';
+
+let le = null;
+function mt() {
+  return le !== null;
+}
+function pt(e) {
+  le && lt(), le = e;
+}
+function Ye(e) {
+  e === le && (le = null);
+}
+function lt() {
+  le && (le.closeMenu(), le = null);
+}
+const ee = {
+  defaultDirection: "br",
+  defaultMinWidth: 100,
+  defaultMaxWidth: 600,
+  defaultZindex: 100,
+  defaultZoom: 1,
+  defaultAdjustPadding: {
+    x: 0,
+    y: 10
+  }
+};
+function se(e, o) {
+  let s = e.offsetTop;
+  return e.offsetParent != null && e.offsetParent != o && (s -= e.offsetParent.scrollTop, s += se(e.offsetParent, o)), s;
+}
+function ue(e, o) {
+  let s = e.offsetLeft;
+  return e.offsetParent != null && e.offsetParent != o && (s -= e.offsetParent.scrollLeft, s += ue(e.offsetParent, o)), s;
+}
+function gt(e, o, s, u) {
+  return {
+    x: ue(e, u) + o,
+    y: se(e, u) + s
+  };
+}
+const He = "mx-menu-default-container", bt = "mx-menu-container-";
+let Ct = 0;
+function st(e) {
+  const { getContainer: o, zIndex: s } = e;
+  if (o) {
+    const v = typeof o == "function" ? o() : o;
+    if (v) {
+      let n = v.getAttribute("id");
+      return n || (n = bt + Ct++, v.setAttribute("id", n)), {
+        eleId: n,
+        container: v,
+        isNew: false
+      };
+    }
+  }
+  let u = document.getElementById(He);
+  return u || (u = document.createElement("div"), u.setAttribute("id", He), u.setAttribute("class", "mx-menu-ghost-host fullscreen"), document.body.appendChild(u)), u.style.zIndex = (s == null ? void 0 : s.toString()) || ee.defaultZindex.toString(), {
+    eleId: He,
+    container: u,
+    isNew: true
+  };
+}
+function yt(e) {
+  let o = 0;
+  for (let s = 0; s < e.length; s++) {
+    const u = e.charCodeAt(s);
+    o = (o << 5) - o + u, o |= 0;
+  }
+  return o;
+}
+function Ve(e) {
+  return typeof e == "number" ? `${e}px` : e;
+}
+const q = defineComponent({
+  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: o, data: s } = toRefs(e);
+    return () => typeof o.value == "function" ? o.value(s.value) : o.value;
+  }
+});
+function xt(e, o) {
+  const s = { ...e };
+  return delete s[o], s;
+}
+var Mt = Object.defineProperty, kt = (e, o, s) => o in e ? Mt(e, o, { enumerable: true, configurable: true, writable: true, value: s }) : e[o] = s, Ue = (e, o, s) => kt(e, typeof o != "symbol" ? o + "" : o, s);
+class Xe {
+  constructor(o, s) {
+    Ue(this, "x", 0), Ue(this, "y", 0), this.x = o || 0, this.y = s || 0;
+  }
+  set(o, s) {
+    this.x = o, this.y = s;
+  }
+  substract(o) {
+    this.x -= o.x, this.y -= o.y;
+  }
+}
+function Ze(e) {
+  const { onDown: o, onMove: s, onUp: u } = e, v = new Xe(), n = new Xe();
+  let _;
+  function d(h) {
+    h.stopPropagation(), n.set(h.x, h.y), n.substract(v), s(v, n, h, _);
+  }
+  function p(h) {
+    u(h, _), v.set(0, 0), document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", p);
+  }
+  return (h, x) => o(h, x) ? (_ = x, v.set(h.x, h.y), document.addEventListener("mousemove", d), document.addEventListener("mouseup", p), h.stopPropagation(), true) : false;
+}
+function St(e, o) {
+  let s = 0;
+  return {
+    start() {
+      s > 0 && clearInterval(s), s = setInterval(() => {
+        s = 0, o();
+      }, e);
+    },
+    stop() {
+      s > 0 && (clearInterval(s), s = 0);
+    }
+  };
+}
+const me = [], Ge = St(100, () => {
+  for (const e of me)
+    e();
+});
+function wt(e, o, s, u) {
+  let v = 0, n = 0;
+  function _() {
+    e.value && (o && v !== e.value.offsetWidth && o(e.value.offsetWidth), s && n !== e.value.offsetHeight && s(e.value.offsetHeight), v = e.value.offsetWidth, n = e.value.offsetHeight);
+  }
+  return {
+    startResizeChecker() {
+      Ge.start(), me.push(_);
+    },
+    stopResizeChecker() {
+      const d = me.indexOf(_);
+      d >= 0 && me.splice(d, 1), me.length === 0 && Ge.stop();
+    }
+  };
+}
+const Je = 140, It = 70, Wt = /* @__PURE__ */ defineComponent({
+  __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: false
+    },
+    /**
+     * Is able to click scroll bar background to set scroll position? (When `scrollBarAlwaysShow` is true)
+     * @default true
+     */
+    scrollBarBackgroundClickable: {
+      type: Boolean,
+      default: false
+    },
+    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: o, emit: s }) {
+    const u = e, v = s, n = ref(), _ = ref(), d = ref(), p = ref(), h = ref(), x = ref(), B = ref(false), L = computed(() => u.scroll === "horizontal" || u.scroll === "both"), S = computed(() => u.scroll === "vertical" || u.scroll === "both"), M = reactive({
+      show: false,
+      size: 0,
+      sizeRaw: 0,
+      pos: 0
+    }), k = reactive({
+      show: false,
+      size: 0,
+      sizeRaw: 0,
+      pos: 0
+    });
+    let H = 0, r = 0, f = 0, C = 0, y = null;
+    const I = { attributes: true, childList: true };
+    function i() {
+      if (n.value) {
+        if (M.show) {
+          const t = n.value.offsetWidth / n.value.scrollWidth;
+          M.sizeRaw = t * n.value.offsetWidth, M.size = t * 100, M.pos = n.value.scrollLeft / (n.value.scrollWidth - n.value.offsetWidth) * (100 - M.size), t >= 1 && (M.show = false);
+        }
+        if (k.show) {
+          const t = n.value.offsetHeight / n.value.scrollHeight;
+          k.sizeRaw = t * n.value.offsetHeight, k.size = t * 100, k.pos = n.value.scrollTop / (n.value.scrollHeight - n.value.offsetHeight) * (100 - k.size), t >= 1 && (k.show = false);
+        }
+        v("scroll", n.value.scrollLeft, n.value.scrollTop);
+      }
+    }
+    function g(t = false) {
+      if (!n.value)
+        return;
+      let c = L.value, m = S.value;
+      const a = c && (H !== n.value.scrollWidth || f !== n.value.offsetWidth), ae = S && (r !== n.value.scrollHeight || C !== n.value.offsetHeight);
+      if (!t && !a && !ae)
+        return;
+      const N = window.getComputedStyle(n.value);
+      (N.overflow === "hidden" || N.overflowX === "hidden") && (c = false), (N.overflow === "hidden" || N.overflowY === "hidden") && (m = false), M.show = c, k.show = m, i(), f = n.value.offsetWidth, C = n.value.offsetHeight, H = n.value.scrollWidth, r = n.value.scrollHeight, v("resized", H, r);
+    }
+    function K(t) {
+      var c;
+      u.scroll == "horizontal" && (t.deltaMode == 0 && ((c = n.value) == null || c.scrollTo({
+        left: n.value.scrollLeft + (t.deltaY > 0 ? Je : -140),
+        behavior: "smooth"
+      })), t.preventDefault(), t.stopPropagation());
+    }
+    function O(t) {
+      var c;
+      t.deltaMode == 0 && ((c = n.value) == null || c.scrollTo({
+        left: n.value.scrollLeft + (t.deltaY > 0 ? Je : -140),
+        behavior: "smooth"
+      }), t.preventDefault(), t.stopPropagation());
+    }
+    function D(t) {
+      var c;
+      t.deltaMode == 0 && ((c = n.value) == null || c.scrollTo({
+        top: n.value.scrollTop + (t.deltaY > 0 ? It : -70),
+        behavior: "smooth"
+      }), t.preventDefault(), t.stopPropagation());
+    }
+    let V = 0, U = 0, A = 0, w = 0;
+    const $ = Ze({
+      onDown(t) {
+        return !d.value || !h.value ? false : (V = t.offsetX, U = t.x - t.offsetX - h.value.offsetLeft, t.preventDefault(), B.value = true, true);
+      },
+      onMove(t, c, m) {
+        n.value && d.value && (J(m.x - V - U), m.preventDefault(), m.stopPropagation());
+      },
+      onUp() {
+        B.value = false;
+      }
+    }), X = Ze({
+      onDown(t) {
+        return !p.value || !x.value ? false : (A = t.offsetY, w = t.y - t.offsetY - x.value.offsetTop, t.preventDefault(), B.value = true, true);
+      },
+      onMove(t, c, m) {
+        n.value && p.value && (ne(m.y - A - w), m.preventDefault(), m.stopPropagation());
+      },
+      onUp() {
+        B.value = false;
+      }
+    });
+    function Y(t) {
+      n.value && (n.value.scrollLeft = t / 100 * (n.value.scrollWidth - n.value.offsetWidth));
+    }
+    function Z(t) {
+      n.value && (n.value.scrollLeft = t / 100 * (n.value.scrollHeight - n.value.offsetHeight));
+    }
+    function J(t) {
+      n.value && (n.value.scrollLeft = t / (n.value.offsetWidth - M.sizeRaw) * (n.value.scrollWidth - n.value.offsetWidth));
+    }
+    function ne(t) {
+      n.value && (n.value.scrollTop = t / (n.value.offsetHeight - k.sizeRaw) * (n.value.scrollHeight - n.value.offsetHeight));
+    }
+    function R(t) {
+      u.scrollBarBackgroundClickable && J(t.offsetX - M.sizeRaw / 2);
+    }
+    function de(t) {
+      u.scrollBarBackgroundClickable && ne(t.offsetY - k.sizeRaw / 2);
+    }
+    const {
+      startResizeChecker: Te,
+      stopResizeChecker: Ce
+    } = wt(
+      n,
+      () => g(),
+      () => g()
+    );
+    return onMounted(() => {
+      nextTick(() => {
+        setTimeout(() => g(true), 200), g(true), Te(), y = new MutationObserver(() => g()), y.observe(n.value, I);
+      });
+    }), onBeforeUnmount(() => {
+      Ce(), y && (y.disconnect(), y = null);
+    }), o({
+      refreshScrollState() {
+        g(true);
+      },
+      getScrollContainer() {
+        return n.value;
+      },
+      scrollTo(t, c) {
+        var m;
+        (m = n.value) == null || m.scrollTo(t, c);
+      },
+      scrollToTop() {
+        var t;
+        (t = n.value) == null || t.scrollTo(0, 0);
+      },
+      scrollToBottom() {
+        var t;
+        (t = n.value) == null || t.scrollTo(n.value.scrollWidth, n.value.scrollHeight);
+      }
+    }), (t, c) => (openBlock(), createElementBlock("div", {
+      ref_key: "scrollrect",
+      ref: _,
+      class: normalizeClass([
+        "vue-scroll-rect",
+        e.scrollBarAlwaysShow ? "always-show-scrollbar" : "",
+        e.scrollBarBackgroundClickable ? "background-clickable" : "",
+        B.value ? "dragging" : ""
+      ]),
+      style: normalizeStyle({
+        width: e.width ? `${e.width}px` : void 0,
+        height: e.height ? `${e.height}px` : void 0
+      }),
+      onWheel: K
+    }, [
+      createElementVNode("div", {
+        ref_key: "container",
+        ref: n,
+        class: normalizeClass(["scroll-content", e.scroll, e.containerClass]),
+        style: normalizeStyle({
+          maxWidth: e.maxWidth ? `${e.maxWidth}px` : void 0,
+          maxHeight: e.maxHeight ? `${e.maxHeight}px` : void 0,
+          ...e.containerStyle
+        }),
+        onScroll: i
+      }, [
+        renderSlot(t.$slots, "default")
+      ], 38),
+      M.show ? renderSlot(t.$slots, "scrollBarX", {
+        key: 0,
+        scrollBarValue: M,
+        onScroll: Y
+      }, () => [
+        createElementVNode("div", {
+          ref_key: "scrollBarRefX",
+          ref: d,
+          class: "scrollbar horizontal",
+          onClick: R,
+          onWheel: O
+        }, [
+          createElementVNode("div", {
+            class: "thumb",
+            ref_key: "scrollBarThumbRefX",
+            ref: h,
+            style: normalizeStyle({ left: `${M.pos}%`, width: `${M.size}%` }),
+            onMousedown: c[0] || (c[0] = //@ts-ignore
+            (...m) => unref($) && unref($)(...m)),
+            onWheel: O
+          }, null, 36)
+        ], 544)
+      ]) : createCommentVNode("", true),
+      k.show ? renderSlot(t.$slots, "scrollBarY", {
+        key: 1,
+        scrollBarValue: k,
+        onScroll: Z
+      }, () => [
+        k.show ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          ref_key: "scrollBarRefY",
+          ref: p,
+          class: "scrollbar vertical",
+          onClick: de,
+          onWheel: D
+        }, [
+          createElementVNode("div", {
+            class: "thumb",
+            ref_key: "scrollBarThumbRefY",
+            ref: x,
+            style: normalizeStyle({ top: `${k.pos}%`, height: `${k.size}%` }),
+            onMousedown: c[1] || (c[1] = //@ts-ignore
+            (...m) => unref(X) && unref(X)(...m)),
+            onWheel: D
+          }, null, 36)
+        ], 544)) : createCommentVNode("", true)
+      ]) : createCommentVNode("", true)
+    ], 38));
+  }
+}), we = (e, o) => {
+  const s = e.__vccOpts || e;
+  for (const [u, v] of o)
+    s[u] = v;
+  return s;
+}, _t = {}, Ht = {
+  class: "mx-checked-mark",
+  "aria-hidden": "true",
+  viewBox: "0 0 1024 1024"
+}, Rt = /* @__PURE__ */ createElementVNode("path", { d: "M129.3,428.6L52,512l345,372.5l575-620.8l-69.5-75L400.4,718.2L129.3,428.6z" }, null, -1), Ot = [
+  Rt
+];
+function Bt(e, o) {
+  return openBlock(), createElementBlock("svg", Ht, Ot);
+}
+const Pt = /* @__PURE__ */ we(_t, [["render", Bt]]), $t = {}, At = {
+  class: "mx-right-arrow",
+  "aria-hidden": "true",
+  viewBox: "0 0 1024 1024"
+}, Ft = /* @__PURE__ */ createElementVNode("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), Lt = [
+  Ft
+];
+function Tt(e, o) {
+  return openBlock(), createElementBlock("svg", At, Lt);
+}
+const Et = /* @__PURE__ */ we($t, [["render", Tt]]), zt = { class: "mx-item-row" }, jt = ["xlink:href"], Dt = {
+  key: 1,
+  class: "label"
+}, Nt = { class: "mx-item-row" }, Kt = { class: "mx-shortcut" }, Fe = /* @__PURE__ */ defineComponent({
+  __name: "ContextMenuItem",
+  props: {
+    /**
+     * Is this menu disabled? 
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Is this menu hidden? 
+     */
+    hidden: {
+      type: Boolean,
+      default: false
+    },
+    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: false
+    },
+    /**
+     * 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: true
+    },
+    /**
+     * Show right arrow on this menu?
+     */
+    showRightArrow: {
+      type: Boolean,
+      default: false
+    },
+    hasChildren: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Should close menu when Click this menu item ?
+     */
+    clickClose: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * When there are subitems in this item, is it allowed to trigger its own click event? Default is false
+     */
+    clickableWhenHasChildren: {
+      type: Boolean,
+      default: false
+    },
+    rawMenuItem: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: [
+    "click",
+    "subMenuOpen",
+    "subMenuClose"
+  ],
+  setup(e, { expose: o, emit: s }) {
+    const u = e, v = s, {
+      clickHandler: n,
+      clickClose: _,
+      clickableWhenHasChildren: d,
+      disabled: p,
+      hidden: h,
+      label: x,
+      icon: B,
+      iconFontClass: L,
+      showRightArrow: S,
+      shortcut: M,
+      hasChildren: k
+    } = toRefs(u), H = ref(false), r = ref(false), f = ref(), C = inject("globalOptions"), y = inject("globalHasSlot"), I = inject("globalRenderSlot"), i = inject("globalCloseMenu"), g = inject("menuContext"), K = computed(() => typeof x.value == "string" ? x.value : typeof x.value == "function" ? yt(x.value.toString()) : "MenuItem[unknow]");
+    provide("MenuItemName", K);
+    const O = {
+      getSubMenuInstance: () => {
+      },
+      showSubMenu: () => H.value ? (g.markActiveMenuItem(O, true), true) : k.value ? (V(), true) : false,
+      hideSubMenu: () => {
+        g.closeOtherSubMenu();
+      },
+      isDisabledOrHidden: () => p.value || h.value,
+      getElement: () => f.value,
+      focus: () => r.value = true,
+      blur: () => r.value = false,
+      click: D
+    };
+    provide("menuItemInstance", O), onMounted(() => {
+      g.isMenuItemDataCollectedFlag() ? nextTick(() => {
+        let w = 0;
+        const $ = g.getElement();
+        if ($) {
+          let X = 0;
+          for (let Y = 0; Y < $.children.length; Y++) {
+            const Z = $.children[Y];
+            if (Z.getAttribute("data-type") === "ContextMenuItem") {
+              if (Z === f.value) {
+                w = X;
+                break;
+              }
+              X++;
+            }
+          }
+        }
+        g.addChildMenuItem(O, w);
+      }) : g.addChildMenuItem(O);
+    }), onBeforeUnmount(() => {
+      g.removeChildMenuItem(O);
+    });
+    function D(w) {
+      if (!p.value) {
+        if (w) {
+          const $ = w.target;
+          if ($.classList.contains("mx-context-no-clickable") || C.value.ignoreClickClassName && $.classList.contains(C.value.ignoreClickClassName))
+            return;
+          if (C.value.clickCloseClassName && $.classList.contains(C.value.clickCloseClassName)) {
+            w.stopPropagation(), i(u.rawMenuItem);
+            return;
+          }
+        }
+        k.value ? d.value ? (typeof n.value == "function" && n.value(w), v("click", w)) : H.value || V() : (typeof n.value == "function" && n.value(w), v("click", w), _.value && i(u.rawMenuItem));
+      }
+    }
+    function V(w) {
+      r.value = false, g.checkCloseOtherSubMenuTimeOut() || g.closeOtherSubMenu(), p.value || (g.markActiveMenuItem(O), k.value && (w || g.markThisOpenedByKeyBoard(), g.addOpenedSubMenu(U), H.value = true, nextTick(() => v("subMenuOpen", O))));
+    }
+    function U() {
+      r.value = false, H.value = false, v("subMenuClose", O);
+    }
+    function A() {
+      return {
+        disabled: p.value,
+        label: x.value,
+        icon: B.value,
+        iconFontClass: L.value,
+        showRightArrow: S.value,
+        clickClose: _.value,
+        clickableWhenHasChildren: d.value,
+        shortcut: M.value,
+        theme: C.value.theme,
+        isOpen: H,
+        hasChildren: k,
+        onClick: D,
+        onMouseEnter: V,
+        closeMenu: i
+      };
+    }
+    return o(O), (w, $) => unref(h) ? createCommentVNode("", true) : (openBlock(), createElementBlock("div", {
+      key: 0,
+      class: "mx-context-menu-item-wrapper",
+      ref_key: "menuItemRef",
+      ref: f,
+      "data-type": "ContextMenuItem"
+    }, [
+      unref(y)("itemRender") ? (openBlock(), createBlock(unref(q), {
+        key: 0,
+        vnode: () => unref(I)("itemRender", A())
+      }, null, 8, ["vnode"])) : e.customRender ? (openBlock(), createBlock(unref(q), {
+        key: 1,
+        vnode: e.customRender,
+        data: A()
+      }, null, 8, ["vnode", "data"])) : (openBlock(), createElementBlock("div", {
+        key: 2,
+        class: normalizeClass([
+          "mx-context-menu-item",
+          unref(p) ? "disabled" : "",
+          r.value ? "keyboard-focus" : "",
+          e.customClass ? " " + e.customClass : "",
+          H.value ? "open" : ""
+        ]),
+        onClick: D,
+        onMouseenter: V
+      }, [
+        renderSlot(w.$slots, "default", {}, () => [
+          createElementVNode("div", zt, [
+            createElementVNode("div", {
+              class: normalizeClass([
+                "mx-icon-placeholder",
+                e.preserveIconWidth ? "preserve-width" : ""
+              ])
+            }, [
+              renderSlot(w.$slots, "icon", {}, () => [
+                unref(y)("itemIconRender") ? (openBlock(), createBlock(unref(q), {
+                  key: 0,
+                  vnode: () => unref(I)("itemIconRender", A())
+                }, null, 8, ["vnode"])) : typeof e.svgIcon == "string" && e.svgIcon ? (openBlock(), createElementBlock("svg", mergeProps({
+                  key: 1,
+                  class: "icon svg"
+                }, e.svgProps), [
+                  createElementVNode("use", { "xlink:href": e.svgIcon }, null, 8, jt)
+                ], 16)) : typeof unref(B) != "string" ? (openBlock(), createBlock(unref(q), {
+                  key: 2,
+                  vnode: unref(B),
+                  data: unref(B)
+                }, null, 8, ["vnode", "data"])) : typeof unref(B) == "string" && unref(B) !== "" ? (openBlock(), createElementBlock("i", {
+                  key: 3,
+                  class: normalizeClass(unref(B) + " icon " + unref(L) + " " + unref(C).iconFontClass)
+                }, null, 2)) : createCommentVNode("", true)
+              ]),
+              e.checked ? renderSlot(w.$slots, "check", { key: 0 }, () => [
+                unref(y)("itemCheckRender") ? (openBlock(), createBlock(unref(q), {
+                  key: 0,
+                  vnode: () => unref(I)("itemCheckRender", A())
+                }, null, 8, ["vnode"])) : createCommentVNode("", true),
+                createVNode(Pt)
+              ]) : createCommentVNode("", true)
+            ], 2),
+            renderSlot(w.$slots, "label", {}, () => [
+              unref(y)("itemLabelRender") ? (openBlock(), createBlock(unref(q), {
+                key: 0,
+                vnode: () => unref(I)("itemLabelRender", A())
+              }, null, 8, ["vnode"])) : typeof unref(x) == "string" ? (openBlock(), createElementBlock("span", Dt, toDisplayString(unref(x)), 1)) : (openBlock(), createBlock(unref(q), {
+                key: 2,
+                vnode: unref(x),
+                data: unref(x)
+              }, null, 8, ["vnode", "data"]))
+            ])
+          ]),
+          createElementVNode("div", Nt, [
+            unref(M) || w.$slots.shortcut ? renderSlot(w.$slots, "shortcut", { key: 0 }, () => [
+              unref(y)("itemShortcutRender") ? (openBlock(), createBlock(unref(q), {
+                key: 0,
+                vnode: () => unref(I)("itemShortcutRender", A())
+              }, null, 8, ["vnode"])) : createCommentVNode("", true),
+              createElementVNode("span", Kt, toDisplayString(unref(M)), 1)
+            ]) : createCommentVNode("", true),
+            unref(S) ? renderSlot(w.$slots, "rightArrow", { key: 1 }, () => [
+              unref(y)("itemRightArrowRender") ? (openBlock(), createBlock(unref(q), {
+                key: 0,
+                vnode: () => unref(I)("itemRightArrowRender", A())
+              }, null, 8, ["vnode"])) : createCommentVNode("", true),
+              createVNode(Et)
+            ]) : createCommentVNode("", true)
+          ])
+        ])
+      ], 34)),
+      renderSlot(w.$slots, "submenu", {
+        context: O,
+        show: H.value
+      })
+    ], 512));
+  }
+}), Yt = defineComponent({
+  name: "ContextMenuSperator",
+  components: {
+    VNodeRender: q
+  },
+  setup() {
+    const e = inject("globalHasSlot"), o = inject("globalRenderSlot");
+    return {
+      globalHasSlot: e,
+      globalRenderSlot: o
+    };
+  }
+}), Vt = {
+  key: 1,
+  class: "mx-context-menu-item-sperator mx-context-no-clickable"
+};
+function Ut(e, o, s, u, v, n) {
+  const _ = resolveComponent("VNodeRender");
+  return e.globalHasSlot("separatorRender") ? (openBlock(), createBlock(_, {
+    key: 0,
+    vnode: () => e.globalRenderSlot("separatorRender", {})
+  }, null, 8, ["vnode"])) : (openBlock(), createElementBlock("div", Vt));
+}
+const ge = /* @__PURE__ */ we(Yt, [["render", Ut]]), Le = /* @__PURE__ */ defineComponent({
+  __name: "ContextSubMenu",
+  props: {
+    /**
+     * Items from options
+     */
+    items: {
+      type: Object,
+      default: null
+    },
+    /**
+     * Show
+     */
+    show: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 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: true
+    },
+    /**
+     * Menu direction
+     */
+    direction: {
+      type: String,
+      default: "br"
+    },
+    parentMenuItemContext: {
+      type: Object,
+      default: null
+    }
+  },
+  emits: ["closeAnimFinished"],
+  setup(e, { expose: o, emit: s }) {
+    const u = e, v = s, n = ref(false), _ = inject("globalGetMenuHostId", ""), d = inject("menuContext"), p = inject("globalOptions");
+    inject("globalHasSlot"), inject("globalRenderSlot");
+    const h = ref("UnknowOrRoot"), x = inject("MenuItemName", h), { zIndex: B, getParentWidth: L, getParentHeight: S, getZoom: M } = d, { adjustPosition: k } = toRefs(u), H = ref(), r = ref(), f = ref(), C = [], y = inject("globalSetCurrentSubMenu"), I = [];
+    let i = null, g = 0;
+    function K() {
+      i && i.blur();
+    }
+    function O(t, c) {
+      if (t) {
+        for (let m = c !== void 0 ? c : 0; m < I.length; m++)
+          if (!I[m].isDisabledOrHidden()) {
+            D(m);
+            break;
+          }
+      } else
+        for (let m = c !== void 0 ? c : I.length - 1; m >= 0; m--)
+          if (!I[m].isDisabledOrHidden()) {
+            D(m);
+            break;
+          }
+    }
+    function D(t) {
+      if (i && K(), t !== void 0 && (i = I[Math.max(0, Math.min(t, I.length - 1))]), !i)
+        return;
+      i.focus();
+      const c = i.getElement();
+      c && c.scrollIntoView({
+        behavior: "auto",
+        block: "nearest",
+        inline: "nearest"
+      });
+    }
+    function V() {
+      y(U);
+    }
+    const U = {
+      el: f,
+      name: x,
+      isTopLevel: () => d.getParentContext() === null,
+      closeSelfAndActiveParent: () => {
+        const t = $.getParentContext();
+        if (t) {
+          t.closeOtherSubMenu();
+          const c = t.getSubMenuInstanceContext();
+          if (c)
+            return c.focusCurrentItem(), true;
+        }
+        return false;
+      },
+      closeCurrentSubMenu: () => {
+        var t;
+        return (t = $.getParentContext()) == null ? void 0 : t.closeOtherSubMenu();
+      },
+      moveCurrentItemFirst: () => O(true),
+      moveCurrentItemLast: () => O(false),
+      moveCurrentItemDown: () => O(true, i ? I.indexOf(i) + 1 : 0),
+      moveCurrentItemUp: () => O(false, i ? I.indexOf(i) - 1 : 0),
+      focusCurrentItem: () => D(),
+      openCurrentItemSubMenu: () => i ? i == null ? void 0 : i.showSubMenu() : false,
+      triggerCurrentItemClick: (t) => i == null ? void 0 : i.click(t)
+    };
+    let A = false, w = false;
+    const $ = {
+      zIndex: B + 1,
+      container: d.container,
+      adjustPadding: p.value.adjustPadding || ee.defaultAdjustPadding,
+      getParentWidth: () => {
+        var t;
+        return ((t = f.value) == null ? void 0 : t.offsetWidth) || 0;
+      },
+      getParentHeight: () => {
+        var t;
+        return ((t = f.value) == null ? void 0 : t.offsetHeight) || 0;
+      },
+      getPositon: () => [R.value.x, R.value.y],
+      getZoom: () => p.value.zoom || ee.defaultZoom,
+      addOpenedSubMenu(t) {
+        C.push(t);
+      },
+      closeOtherSubMenu() {
+        C.forEach((t) => t()), C.splice(0, C.length), y(U);
+      },
+      checkCloseOtherSubMenuTimeOut() {
+        return g ? (clearTimeout(g), g = 0, true) : false;
+      },
+      closeOtherSubMenuWithTimeOut() {
+        g = setTimeout(() => {
+          g = 0, this.closeOtherSubMenu();
+        }, 200);
+      },
+      addChildMenuItem: (t, c) => {
+        c === void 0 ? I.push(t) : I.splice(c, 0, t);
+      },
+      removeChildMenuItem: (t) => {
+        I.splice(I.indexOf(t), 1), t.getSubMenuInstance = () => {
+        };
+      },
+      markActiveMenuItem: (t, c = false) => {
+        K(), i = t, c && D();
+      },
+      markThisOpenedByKeyBoard: () => {
+        A = true;
+      },
+      isOpenedByKeyBoardFlag: () => A ? (A = false, true) : false,
+      isMenuItemDataCollectedFlag: () => w,
+      getElement: () => f.value || null,
+      getParentContext: () => d,
+      getSubMenuInstanceContext: () => U
+    };
+    provide("menuContext", $);
+    const X = {
+      getChildItem: (t) => I[t],
+      getMenuDimensions: () => r.value ? {
+        width: r.value.offsetWidth,
+        height: r.value.offsetHeight
+      } : { width: 0, height: 0 },
+      getSubmenuRoot: () => r.value,
+      getMenu: () => f.value,
+      getScrollValue: () => {
+        var t, c;
+        return ((c = (t = H.value) == null ? void 0 : t.getScrollContainer()) == null ? void 0 : c.scrollTop) || 0;
+      },
+      setScrollValue: (t) => {
+        var c;
+        return (c = H.value) == null ? void 0 : c.scrollTo(0, t);
+      },
+      getScrollHeight: () => Z.value,
+      adjustPosition: () => {
+        de();
+      },
+      getMaxHeight: () => J.value,
+      getPosition: () => R.value,
+      setPosition: (t, c) => {
+        R.value.x = t, R.value.y = c;
+      }
+    }, Y = inject("menuItemInstance", void 0);
+    Y && (Y.getSubMenuInstance = () => X);
+    const Z = ref(0), J = ref(0), ne = ref(false), R = ref({ x: 0, y: 0 });
+    function de() {
+      nextTick(() => {
+        var m;
+        const t = f.value, c = r.value;
+        if (t && c && H.value) {
+          const { container: a } = d, ae = (L == null ? void 0 : L()) ?? 0, N = (S == null ? void 0 : S()) ?? 0, Q = getComputedStyle(c), ye = parseFloat(Q.paddingLeft), xe = parseFloat(Q.paddingTop), Ie = N > 0 ? xe : 0, at = document.documentElement.scrollHeight / M(), it = document.documentElement.scrollWidth / M(), rt = Math.min(it, a.offsetWidth), Ee = Math.min(at, a.offsetHeight);
+          let We = ue(t, a), _e = se(t, a);
+          if (u.direction.includes("l") ? R.value.x -= t.offsetWidth + ye : u.direction.includes("r") ? R.value.x += ae + ye : (R.value.x += ae / 2, R.value.x -= (t.offsetWidth + ye) / 2), u.direction.includes("t")) {
+            const fe = (m = u.parentMenuItemContext) == null ? void 0 : m.getElement();
+            fe && (R.value.y += fe.offsetHeight), R.value.y -= (t.offsetHeight + xe) / M();
+          } else
+            u.direction.includes("b") ? R.value.y -= xe / M() : R.value.y -= t.offsetHeight / 2 / M();
+          nextTick(() => {
+            var je, De;
+            We = ue(t, a), _e = se(t, a);
+            const fe = ((De = (je = H.value) == null ? void 0 : je.getScrollContainer()) == null ? void 0 : De.scrollHeight) || 0, ct = u.maxHeight;
+            Z.value = u.maxHeight ? Math.min(fe, u.maxHeight) : fe;
+            const dt = We + t.offsetWidth - rt, ze = _e + Z.value + Ie * 2 - Ee;
+            if (ne.value = ze > 0, k.value && dt > 0) {
+              const ve = ae + t.offsetWidth - ye, he = We;
+              ve > he ? R.value.x -= he : R.value.x -= ve;
+            }
+            if (ne.value) {
+              if (k.value) {
+                const ve = ze, he = _e;
+                ve > he ? R.value.y -= he - Ie : R.value.y -= ve - Ie;
+              }
+              J.value = Ee - (R.value.y + xe);
+            } else
+              J.value = ct || 0;
+          });
+        }
+      });
+    }
+    function Ce() {
+      var c;
+      const t = (c = u.parentMenuItemContext) == null ? void 0 : c.getElement();
+      if (t) {
+        const m = ue(t, d.container), a = se(t, d.container);
+        R.value.x = m, R.value.y = a;
+      } else {
+        const [m, a] = d.getPositon();
+        R.value.x = m, R.value.y = a;
+      }
+      nextTick(() => {
+        var m;
+        y(U), (m = f.value) == null || m.focus({ preventScroll: true }), d.isOpenedByKeyBoardFlag() && nextTick(() => O(true)), w = true;
+      }), de();
+    }
+    return watch(() => u.show, (t) => {
+      t ? Ce() : void 0;
+    }), onMounted(() => {
+      n.value = true, u.show ? Ce() : de();
+    }), onBeforeUnmount(() => {
+      n.value = false, Y && (Y.getSubMenuInstance = () => {
+      });
+    }), o(X), (t, c) => {
+      const m = resolveComponent("ContextSubMenu", true);
+      return n.value ? (openBlock(), createBlock(Teleport, {
+        key: 0,
+        to: `#${unref(_)}`
+      }, [
+        createVNode(Transition, mergeProps({ appear: "" }, unref(p).menuTransitionProps || {
+          duration: 10
+        }, {
+          onAfterLeave: c[0] || (c[0] = (a) => v("closeAnimFinished"))
+        }), {
+          default: withCtx(() => [
+            e.show ? (openBlock(), createElementBlock("div", mergeProps({
+              key: 0,
+              ref_key: "submenuRoot",
+              ref: r
+            }, t.$attrs, {
+              class: [
+                "mx-context-menu",
+                unref(p).customClass ? unref(p).customClass : "",
+                unref(p).theme ?? ""
+              ],
+              style: {
+                maxWidth: e.maxWidth ? unref(Ve)(e.maxWidth) : `${unref(ee).defaultMaxWidth}px`,
+                minWidth: e.minWidth ? unref(Ve)(e.minWidth) : `${unref(ee).defaultMinWidth}px`,
+                zIndex: unref(B),
+                left: `${R.value.x}px`,
+                top: `${R.value.y}px`
+              },
+              "data-type": "ContextSubMenu",
+              onClick: V
+            }), [
+              createVNode(unref(Wt), {
+                ref_key: "scrollRectRef",
+                ref: H,
+                scroll: "vertical",
+                maxHeight: J.value,
+                containerClass: "mx-context-menu-scroll"
+              }, {
+                default: withCtx(() => [
+                  createElementVNode("div", {
+                    class: normalizeClass(["mx-context-menu-items"]),
+                    ref_key: "menu",
+                    ref: f
+                  }, [
+                    renderSlot(t.$slots, "default", {}, () => [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(e.items, (a, ae) => (openBlock(), createElementBlock(Fragment, { key: ae }, [
+                        a.hidden !== true && a.divided === "up" ? (openBlock(), createBlock(ge, { key: 0 })) : createCommentVNode("", true),
+                        a.hidden !== true && a.divided === "self" ? (openBlock(), createBlock(ge, { key: 1 })) : (openBlock(), createBlock(Fe, {
+                          key: 2,
+                          clickHandler: a.onClick ? (N) => a.onClick(N) : 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 : unref(p).preserveIconWidth,
+                          showRightArrow: a.children && a.children.length > 0,
+                          hasChildren: a.children && a.children.length > 0,
+                          rawMenuItem: a,
+                          onSubMenuOpen: (N) => {
+                            var Q;
+                            return (Q = a.onSubMenuOpen) == null ? void 0 : Q.call(a, N);
+                          },
+                          onSubMenuClose: (N) => {
+                            var Q;
+                            return (Q = a.onSubMenuClose) == null ? void 0 : Q.call(a, N);
+                          }
+                        }, createSlots({ _: 2 }, [
+                          a.children && a.children.length > 0 ? {
+                            name: "submenu",
+                            fn: withCtx(({ context: N, show: Q }) => [
+                              createVNode(m, {
+                                show: Q,
+                                parentMenuItemContext: N,
+                                items: a.children,
+                                maxWidth: a.maxWidth,
+                                minWidth: a.minWidth,
+                                maxHeight: a.maxHeight,
+                                adjustPosition: a.adjustSubMenuPosition !== void 0 ? a.adjustSubMenuPosition : unref(p).adjustPosition,
+                                direction: a.direction !== void 0 ? a.direction : unref(p).direction
+                              }, null, 8, ["show", "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 !== true && (a.divided === "down" || a.divided === true) ? (openBlock(), createBlock(ge, { key: 3 })) : createCommentVNode("", true)
+                      ], 64))), 128))
+                    ])
+                  ], 512)
+                ]),
+                _: 3
+              }, 8, ["maxHeight"])
+            ], 16)) : createCommentVNode("", true)
+          ]),
+          _: 3
+        }, 16)
+      ], 8, ["to"])) : createCommentVNode("", true);
+    };
+  }
+});
+const ut = /* @__PURE__ */ defineComponent({
+  __name: "ContextSubMenuWrapper",
+  props: {
+    /**
+     * Menu options
+     */
+    options: {
+      type: Object,
+      default: null
+    },
+    /**
+     * Show menu?
+     */
+    show: {
+      type: null,
+      default: null
+    },
+    /**
+     * Current container, For calculation only
+     */
+    container: {
+      type: Object,
+      default: null
+    },
+    /**
+     * Make sure is user set the custom container.
+     */
+    isFullScreenContainer: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ["close", "closeAnimFinished"],
+  setup(e, { expose: o, emit: s }) {
+    const u = e, v = s, n = useSlots(), _ = ref(), {
+      options: d,
+      show: p,
+      container: h$1
+    } = toRefs(u);
+    onMounted(() => {
+      p.value && L();
+    }), onBeforeUnmount(() => {
+      H();
+    }), watch(p, (i) => {
+      i ? L() : (Ye(x), H());
+    });
+    const x = {
+      closeMenu: S,
+      isClosed: M,
+      getMenuRef: () => _.value,
+      getMenuDimensions: () => {
+        var i;
+        return ((i = _.value) == null ? void 0 : i.getMenuDimensions()) ?? { width: 0, height: 0 };
+      }
+    };
+    let B = false;
+    function L() {
+      k(), pt(x);
+    }
+    function S(i) {
+      B = true, v("close", i), d.value.menuTransitionProps || v("closeAnimFinished"), Ye(x);
+    }
+    function M() {
+      return B;
+    }
+    function k() {
+      setTimeout(() => {
+        document.addEventListener("click", y, true), document.addEventListener("contextmenu", y, true), document.addEventListener("scroll", C, true), !u.isFullScreenContainer && h$1.value && h$1.value.addEventListener("scroll", C, true), d.value.keyboardControl !== false && document.addEventListener("keydown", f, true);
+      }, 50);
+    }
+    function H() {
+      document.removeEventListener("contextmenu", y, true), document.removeEventListener("click", y, true), document.removeEventListener("scroll", C, true), !u.isFullScreenContainer && h$1.value && h$1.value.removeEventListener("scroll", C, true), d.value.keyboardControl !== false && document.removeEventListener("keydown", f, true);
+    }
+    const r = ref();
+    provide("globalSetCurrentSubMenu", (i) => r.value = i), provide("globalGetMenuHostId", h$1.value.id);
+    function f(i) {
+      var K, O, D, V, U, A, w, $, X, Y, Z, J, ne;
+      let g = true;
+      switch (i.key) {
+        case "Escape": {
+          ((K = r.value) == null ? void 0 : K.isTopLevel()) === false ? (O = r.value) == null || O.closeCurrentSubMenu() : S();
+          break;
+        }
+        case "ArrowDown":
+          (D = r.value) == null || D.moveCurrentItemDown();
+          break;
+        case "ArrowUp":
+          (V = r.value) == null || V.moveCurrentItemUp();
+          break;
+        case "Home":
+          (U = r.value) == null || U.moveCurrentItemFirst();
+          break;
+        case "End":
+          (A = r.value) == null || A.moveCurrentItemLast();
+          break;
+        case "ArrowLeft": {
+          (w = r.value) != null && w.closeSelfAndActiveParent() || (X = ($ = d.value).onKeyFocusMoveLeft) == null || X.call($);
+          break;
+        }
+        case "ArrowRight":
+          (Y = r.value) != null && Y.openCurrentItemSubMenu() || (J = (Z = d.value).onKeyFocusMoveRight) == null || J.call(Z);
+          break;
+        case "Enter":
+          (ne = r.value) == null || ne.triggerCurrentItemClick(i);
+          break;
+        default:
+          g = false;
+          break;
+      }
+      g && r.value && (i.stopPropagation(), i.preventDefault());
+    }
+    function C(i) {
+      d.value.closeWhenScroll !== false && I(i.target, null);
+    }
+    function y(i) {
+      I(i.target, i);
+    }
+    function I(i, g) {
+      var K, O;
+      for (; i; ) {
+        if (i.classList && i.classList.contains("mx-context-menu"))
+          return;
+        i = i.parentNode;
+      }
+      g ? d.value.clickCloseOnOutside !== false ? (H(), S()) : (O = (K = d.value).onClickOnOutside) == null || O.call(K, g) : (H(), S());
+    }
+    return provide("globalOptions", d), provide("globalCloseMenu", S), provide("globalIsFullScreenContainer", u.isFullScreenContainer), provide("globalHasSlot", (i) => n[i] !== void 0), provide("globalRenderSlot", (i, g) => renderSlot(n, i, { ...g }, () => [h("span", "Render slot failed")], false)), provide("menuContext", {
+      zIndex: d.value.zIndex || ee.defaultZindex,
+      container: h$1.value,
+      adjustPadding: { x: 0, y: 0 },
+      getZoom: () => d.value.zoom || ee.defaultZoom,
+      getParentWidth: () => 0,
+      getParentHeight: () => 0,
+      getPositon: () => [d.value.x, d.value.y],
+      closeOtherSubMenuWithTimeOut: () => {
+      },
+      checkCloseOtherSubMenuTimeOut: () => false,
+      addOpenedSubMenu: () => {
+      },
+      closeOtherSubMenu: () => {
+      },
+      getParentContext: () => null,
+      getSubMenuInstanceContext: () => null,
+      getElement: () => null,
+      addChildMenuItem: () => {
+      },
+      removeChildMenuItem: () => {
+      },
+      markActiveMenuItem: () => {
+      },
+      markThisOpenedByKeyBoard: () => {
+      },
+      isOpenedByKeyBoardFlag: () => false,
+      isMenuItemDataCollectedFlag: () => false
+    }), o(x), (i, g) => (openBlock(), createBlock(Le, {
+      ref_key: "submenuInstance",
+      ref: _,
+      show: unref(p),
+      items: unref(d).items,
+      adjustPosition: unref(d).adjustPosition,
+      maxWidth: unref(d).maxWidth || unref(ee).defaultMaxWidth,
+      minWidth: unref(d).minWidth || unref(ee).defaultMinWidth,
+      maxHeight: unref(d).maxHeight,
+      direction: unref(d).direction || unref(ee).defaultDirection,
+      onCloseAnimFinished: g[0] || (g[0] = (K) => v("closeAnimFinished"))
+    }, {
+      default: withCtx(() => [
+        renderSlot(i.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["show", "items", "adjustPosition", "maxWidth", "minWidth", "maxHeight", "direction"]));
+  }
+});
+const Xt = /* @__PURE__ */ defineComponent({
+  __name: "ContextMenu",
+  props: {
+    /**
+     * Menu options
+     */
+    options: {
+      type: Object,
+      default: null
+    },
+    /**
+     * Show menu?
+     */
+    show: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:show", "close"],
+  setup(e, { expose: o, emit: s }) {
+    const u = s, v = e, { options: n, show: _ } = toRefs(v), { isNew: d, container: p, eleId: h } = st(n.value), x = ref(null), B = useSlots();
+    function L(S) {
+      var M, k;
+      u("update:show", false), u("close"), (k = (M = n.value).onClose) == null || k.call(M, S);
+    }
+    return o({
+      closeMenu: () => u("update:show", false),
+      isClosed: () => !_.value,
+      getMenuRef: () => {
+        var S;
+        return (S = x.value) == null ? void 0 : S.getMenuRef();
+      },
+      getMenuDimensions: () => {
+        var S;
+        return ((S = x.value) == null ? void 0 : S.getMenuDimensions()) ?? { width: 0, height: 0 };
+      }
+    }), (S, M) => (openBlock(), createBlock(Teleport, {
+      to: `#${unref(h)}`
+    }, [
+      createVNode(ut, {
+        ref_key: "menuRef",
+        ref: x,
+        options: unref(n),
+        show: unref(_),
+        container: unref(p),
+        isFullScreenContainer: !unref(d),
+        onClose: L
+      }, createSlots({ _: 2 }, [
+        renderList(unref(B), (k, H) => ({
+          name: H,
+          fn: withCtx((r) => [
+            renderSlot(S.$slots, H, normalizeProps(guardReactiveProps(r)))
+          ])
+        }))
+      ]), 1032, ["options", "show", "container", "isFullScreenContainer"])
+    ], 8, ["to"]));
+  }
+}), Zt = defineComponent({
+  name: "ContextMenuGroup",
+  props: {
+    /**
+    * Is this menu disabled? 
+    */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+    * Is this menu hidden? 
+    */
+    hidden: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 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: false
+    },
+    /**
+     * 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: true
+    },
+    /**
+     * Show right arrow on this menu?
+     */
+    showRightArrow: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Should close menu when Click this menu item ?
+     */
+    clickClose: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * 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, o) {
+    const s = inject("globalOptions"), { adjustSubMenuPosition: u, maxWidth: v, minWidth: n, maxHeight: _ } = toRefs(e), d = typeof u.value < "u" ? u.value : s.value.adjustPosition, p = ref(), h$1 = ref();
+    return o.expose({
+      getSubMenuRef: () => p.value,
+      getMenuItemRef: () => h$1.value
+    }), () => h(Fe, {
+      ...e,
+      ref: h$1,
+      showRightArrow: true,
+      maxWidth: void 0,
+      minWidth: void 0,
+      maxHeight: void 0,
+      adjustSubMenuPosition: void 0,
+      hasChildren: typeof o.slots.default !== void 0
+    }, o.slots.default ? {
+      //Create SubMenu
+      submenu: (x) => h(Le, {
+        ref: p,
+        show: x.show,
+        maxWidth: v.value,
+        minWidth: n.value,
+        maxHeight: _.value,
+        adjustPosition: d,
+        parentMenuItemContext: x.context
+      }, {
+        default: o.slots.default
+      }),
+      //Add other slots
+      ...xt(o.slots, "default")
+    } : o.slots);
+  }
+});
+function Gt(e, o, s, u) {
+  const v = ref(true), n = h(ut, {
+    options: e,
+    show: v,
+    container: o,
+    isFullScreenContainer: !s,
+    onCloseAnimFinished: () => {
+      render(null, o);
+    },
+    onClose: (_) => {
+      var d;
+      (d = e.onClose) == null || d.call(e, _), v.value = false;
+    }
+  }, u);
+  return render(n, o), n.component;
+}
+function Qe(e, o) {
+  const s = st(e);
+  return Gt(e, s.container, s.isNew, o).exposed;
+}
+const qe = {
+  /**
+   * For Vue install
+   * @param app 
+   */
+  install(e) {
+    e.config.globalProperties.$contextmenu = Qe, e.component("ContextMenu", Xt), e.component("ContextMenuItem", Fe), e.component("ContextMenuGroup", Zt), e.component("ContextMenuSperator", ge), e.component("ContextMenuSeparator", ge), e.component("ContextSubMenu", Le);
+  },
+  /**
+   * 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", 
+   *         onClick: () => {
+   *           alert("You click a menu item");
+   *         }
+   *       },
+   *       { 
+   *         label: "A submenu", 
+   *         children: [
+   *           { label: "Item1" },
+   *           { label: "Item2" },
+   *           { label: "Item3" },
+   *         ]
+   *       },
+   *     ]
+   *   }); 
+   * }
+   * ```
+   * 
+   * You can pass customSlots to custom rendering this menu.
+   * 
+   * For example, custom rendering #itemRender and #separatorRender:
+   * ```ts
+   *   ContextMenu.showContextMenu({
+   *     ...
+   *   } as MenuOptions, {
+   *     //Use slot in function mode
+   *     itemRender: ({ disabled, label, icon, showRightArrow, onClick, onMouseEnter }) => [  h('div', { 
+   *       class: 'my-menu-item'+(disabled?' disabled':''),
+   *       onMouseenter: onMouseEnter,
+   *       onClick: onClick,
+   *     }, [
+   *       icon ? h('img', { src: icon }) : h('div', { class: 'icon-place-holder' }),
+   *       h('span', label),
+   *       showRightArrow ? h('span', { class: 'right-arraw' }, '>>') : h('div'),
+   *     ]) ],
+   *     separatorRender: () => [ h('div', { class: 'my-menu-sperator' }) ]
+   *   })
+   * ```
+   * 
+   * @param options The options of ContextMenu
+   * @param customSlots You can provide some custom slots to customize the rendering style of the menu. These slots are the same as the slots of component ContextMenu.
+   * @returns Menu instance 
+   */
+  showContextMenu(e, o) {
+    return Qe(e, o);
+  },
+  /**
+   * Get if there is a menu open now.
+   */
+  isAnyContextMenuOpen() {
+    return mt();
+  },
+  /**
+   * Close the currently open menu
+   */
+  closeContextMenu: lt,
+  //Tools
+  transformMenuPosition: gt
+}, Jt = {}, Qt = {
+  class: "mx-menu-bar-icon-menu",
+  viewBox: "0 0 1024 1024",
+  version: "1.1",
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "200",
+  height: "200"
+}, qt = /* @__PURE__ */ createElementVNode("path", { d: "M133.310936 296.552327l757.206115 0c19.781623 0 35.950949-16.169326 35.950949-35.950949 0-19.781623-15.997312-35.950949-35.950949-35.950949L133.310936 224.650428c-19.781623 0-35.950949 16.169326-35.950949 35.950949C97.359987 280.383 113.529313 296.552327 133.310936 296.552327z" }, null, -1), en = /* @__PURE__ */ createElementVNode("path", { d: "M890.51705 476.135058 133.310936 476.135058c-19.781623 0-35.950949 16.169326-35.950949 35.950949 0 19.781623 16.169326 35.950949 35.950949 35.950949l757.206115 0c19.781623 0 35.950949-16.169326 35.950949-35.950949C926.467999 492.304384 910.298673 476.135058 890.51705 476.135058z" }, null, -1), tn = /* @__PURE__ */ createElementVNode("path", { d: "M890.51705 727.447673 133.310936 727.447673c-19.781623 0-35.950949 15.997312-35.950949 35.950949s16.169326 35.950949 35.950949 35.950949l757.206115 0c19.781623 0 35.950949-15.997312 35.950949-35.950949S910.298673 727.447673 890.51705 727.447673z" }, null, -1), nn = [
+  qt,
+  en,
+  tn
+];
+function on(e, o) {
+  return openBlock(), createElementBlock("svg", Qt, nn);
+}
+const ln = /* @__PURE__ */ we(Jt, [["render", on]]), sn = ["onClick", "onMouseenter"], an = /* @__PURE__ */ defineComponent({
+  __name: "MenuBar",
+  props: {
+    /**
+     * Menu options
+     */
+    options: {
+      type: Object,
+      default: null
+    }
+  },
+  setup(e) {
+    const o = e, s = ref(), u = ref(false), v = ref([]), n = ref(null);
+    function _() {
+      u.value = true;
+    }
+    function d() {
+      u.value = false;
+    }
+    onMounted(() => {
+      v.value = o.options.items || [];
+    }), watch(() => o.options, () => {
+      v.value = o.options.items || [];
+    });
+    let p = null, h = -1;
+    function x() {
+      h < v.value.length - 1 ? h++ : h = 0, S(h, v.value[h]);
+    }
+    function B() {
+      h > 0 ? h-- : h = v.value.length - 1, S(h, v.value[h]);
+    }
+    function L(r) {
+      const f = o.options.barPopDirection ?? "bl";
+      let C = 0, y = 0;
+      return f.startsWith("b") ? y = se(r) + r.offsetHeight : f.startsWith("t") ? y = se(r) : y = se(r) + r.offsetHeight / 2, f.endsWith("l") ? C = ue(r) : f.startsWith("r") ? C = ue(r) + r.offsetWidth : C = ue(r) + r.offsetWidth / 2, { x: C, y: y + 5 };
+    }
+    function S(r, f) {
+      var y;
+      if (h = r, !f.children)
+        return;
+      p && (p.closeMenu(), p = null, u.value = true), n.value = f;
+      const C = (y = s.value) == null ? void 0 : y.children[r];
+      if (C) {
+        const { x: I, y: i } = L(C);
+        p = qe.showContextMenu({
+          ...o.options,
+          items: f.children,
+          x: I,
+          y: i,
+          onKeyFocusMoveLeft() {
+            B();
+          },
+          onKeyFocusMoveRight() {
+            x();
+          },
+          onClose() {
+            n.value == f && (u.value = false, n.value = null), typeof f.onSubMenuClose == "function" && f.onSubMenuClose(void 0);
+          }
+        }), p && typeof f.onSubMenuOpen == "function" && f.onSubMenuOpen(void 0);
+      }
+    }
+    function M() {
+      h = 0;
+      const r = s.value;
+      if (r) {
+        const { x: f, y: C } = L(r);
+        p = qe.showContextMenu({
+          ...o.options,
+          x: f,
+          y: C
+        });
+      }
+    }
+    function k(r, f) {
+      f ? (u.value = true, S(r, f), f.onClick && (f.clickableWhenHasChildren === true && f.children && f.children.length > 0 || !f.children || f.children.length === 0) && f.onClick()) : M();
+    }
+    function H(r, f) {
+      u.value && S(r, f);
+    }
+    return (r, f) => (openBlock(), createElementBlock("div", {
+      class: normalizeClass([
+        "mx-menu-bar",
+        e.options.theme ?? "",
+        e.options.mini ? "mini" : ""
+      ]),
+      onFocus: _,
+      onBlur: d
+    }, [
+      renderSlot(r.$slots, "prefix"),
+      e.options.mini ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        ref_key: "menuBarContent",
+        ref: s,
+        class: "mx-menu-bar-content"
+      }, [
+        createElementVNode("div", {
+          class: "mx-menu-bar-item",
+          onClick: f[0] || (f[0] = (C) => k(0, null))
+        }, [
+          createVNode(ln)
+        ])
+      ], 512)) : (openBlock(), createElementBlock("div", {
+        key: 1,
+        ref_key: "menuBarContent",
+        ref: s,
+        class: "mx-menu-bar-content"
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(v.value, (C, y) => (openBlock(), createElementBlock("div", {
+          key: y,
+          class: normalizeClass([
+            "mx-menu-bar-item",
+            C == n.value ? "active" : ""
+          ]),
+          onClick: (I) => k(y, C),
+          onMouseenter: (I) => H(y, C)
+        }, toDisplayString(C.label), 43, sn))), 128))
+      ], 512)),
+      renderSlot(r.$slots, "suffix")
+    ], 34));
+  }
+});
+
+export { Xt as ContextMenu, Zt as ContextMenuGroup, Fe as ContextMenuItem, ge as ContextMenuSeparator, an as MenuBar };