vft 0.0.362 → 0.0.363

package/es/components/menu/sub-menu.vue2.js

@@ -1,23 +1,19 @@
-import { defineComponent as Z, getCurrentInstance as le, computed as l, inject as D, ref as C, reactive as ue, watch as ae, provide as se, onMounted as re, onBeforeUnmount as ie, useSlots as ce, h as s, Fragment as pe, withDirectives as de, vShow as me } from "vue";
-import { singleAttrToObj as g, renderTNode as ve, isMobile as fe } from "@vft/utils";
-import { VftTooltip as Me } from "../tooltip/index.js";
-import { VftIcon as L } from "../icon/index.js";
-import { VftCollapseTransition as be } from "../collapse-transition/index.js";
-import { useTimeoutFn as H } from "@vueuse/core";
-import { throwError as U } from "../../utils/error.js";
-import "../config-provider/hooks/use-global-config.js";
-import "lodash-es";
-import { useNamespace as w } from "../../hooks/use-namespace/index.js";
-import "../../hooks/use-model-toggle/index.js";
-import "@popperjs/core";
-import "../../hooks/use-z-index/index.js";
-import he from "./use-menu.js";
-import { useMenuCssVar as Te } from "./use-menu-css-var.js";
-const Ce = Z({
+import { defineComponent, getCurrentInstance, computed, inject, ref, reactive, watch, provide, onMounted, onBeforeUnmount, useSlots, h, Fragment, withDirectives, vShow } from "vue";
+import { singleAttrToObj, renderTNode, isMobile } from "@vft/utils";
+import { VftTooltip } from "../tooltip/index.js";
+import { VftIcon } from "../icon/index.js";
+import { VftCollapseTransition } from "../collapse-transition/index.js";
+import { useTimeoutFn } from "@vueuse/core";
+import useMenu from "./use-menu.js";
+import { useMenuCssVar } from "./use-menu-css-var.js";
+import { useNamespace } from "../../hooks/use-namespace/index.js";
+import { throwError } from "../../utils/error.js";
+const __default__ = defineComponent({
   name: "vft-sub-menu",
-  inheritAttrs: !1
-}), Oe = /* @__PURE__ */ Z({
-  ...Ce,
+  inheritAttrs: false
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
   props: {
     index: {},
     showTimeout: {
@@ -43,7 +39,7 @@ const Ce = Z({
     icon: {},
     showArrow: {
       type: Boolean,
-      default: !0
+      default: true
     },
     toolTipCfg: {},
     teleported: {
@@ -52,177 +48,262 @@ const Ce = Z({
     }
   },
   emits: ["mouseenter", "mouseleave"],
-  setup(o, {
-    expose: q,
-    emit: G
+  setup(__props, {
+    expose: __expose,
+    emit: __emit
   }) {
-    const y = w("sub-menu"), I = G, d = le(), {
-      indexPath: f,
-      parentMenu: k
-    } = he(d, l(() => o.index)), i = w("menu"), u = w("sub-menu"), e = D("rootMenu");
-    e || U(y.b(), "can not inject root menu");
-    const r = D(`subMenu:${k.value.uid}`);
-    r || U(y.b(), "can not inject sub menu");
-    const S = C({});
-    let M;
-    const z = C(!1), J = C(), E = C(null), A = l(() => p.value === "horizontal" && b.value ? "bottom-start" : "right-start"), b = l(() => r.level === 0), x = l(() => o.teleported === void 0 ? b.value : o.teleported), K = l(() => e.props.collapse ? `${i.namespace.value}-zoom-in-left` : `${i.namespace.value}-zoom-in-top`), Q = l(() => p.value === "horizontal" && b.value ? ["bottom-start", "bottom-end", "top-start", "top-end", "right-start", "left-start"] : ["right-start", "left-start", "bottom-start", "bottom-end", "top-start", "top-end"]), c = l(() => e.openedMenus.includes(o.index)), m = l(() => {
-      let t = !1;
-      return Object.values(S.value).forEach((a) => {
-        a.active && (t = !0);
-      }), o.index === e.activeIndex && (t = !0), t;
-    }), B = l(() => e.props.backgroundColor || ""), P = l(() => e.props.activeTextColor || ""), F = l(() => e.props.textColor || ""), p = l(() => e.props.mode), W = l(() => e.props.persistent), h = ue({
-      index: o.index,
-      indexPath: f,
-      active: m
-    }), j = Te(e.props, r.level + 1), $ = l(() => p.value !== "horizontal" ? {
-      color: F.value
-    } : {
-      borderBottomColor: m.value ? e.props.activeTextColor ? P.value : "" : "transparent",
-      color: m.value ? P.value : F.value
-    }), X = () => E.value?.popperRef?.popperInstanceRef?.destroy(), Y = (t) => {
-      t || X();
-    }, O = (t) => {
-      const a = {
-        e: t,
-        index: o.index,
-        indexPath: f.value,
-        active: m.value
+    const ns = useNamespace("sub-menu");
+    const emit = __emit;
+    const instance = getCurrentInstance();
+    const {
+      indexPath,
+      parentMenu
+    } = useMenu(instance, computed(() => __props.index));
+    const nsMenu = useNamespace("menu");
+    const nsSubMenu = useNamespace("sub-menu");
+    const rootMenu = inject("rootMenu");
+    if (!rootMenu) throwError(ns.b(), "can not inject root menu");
+    const subMenu = inject(`subMenu:${parentMenu.value.uid}`);
+    if (!subMenu) throwError(ns.b(), "can not inject sub menu");
+    const subMenus = ref({});
+    let timeout;
+    const mouseInChild = ref(false);
+    const verticalTitleRef = ref();
+    const vPopper = ref(null);
+    const currentPlacement = computed(() => mode.value === "horizontal" && isFirstLevel.value ? "bottom-start" : "right-start");
+    const isFirstLevel = computed(() => {
+      return subMenu.level === 0;
+    });
+    const appendToBody = computed(() => __props.teleported === void 0 ? isFirstLevel.value : __props.teleported);
+    const menuTransitionName = computed(() => rootMenu.props.collapse ? `${nsMenu.namespace.value}-zoom-in-left` : `${nsMenu.namespace.value}-zoom-in-top`);
+    const fallbackPlacements = computed(() => mode.value === "horizontal" && isFirstLevel.value ? ["bottom-start", "bottom-end", "top-start", "top-end", "right-start", "left-start"] : ["right-start", "left-start", "bottom-start", "bottom-end", "top-start", "top-end"]);
+    const opened = computed(() => rootMenu.openedMenus.includes(__props.index));
+    const active = computed(() => {
+      let isActive = false;
+      Object.values(subMenus.value).forEach((subItem) => {
+        if (subItem.active) {
+          isActive = true;
+        }
+      });
+      if (__props.index === rootMenu.activeIndex) {
+        isActive = true;
+      }
+      return isActive;
+    });
+    const backgroundColor = computed(() => rootMenu.props.backgroundColor || "");
+    const activeTextColor = computed(() => rootMenu.props.activeTextColor || "");
+    const textColor = computed(() => rootMenu.props.textColor || "");
+    const mode = computed(() => rootMenu.props.mode);
+    const persistent = computed(() => rootMenu.props.persistent);
+    const item = reactive({
+      index: __props.index,
+      indexPath,
+      active
+    });
+    const ulStyle = useMenuCssVar(rootMenu.props, subMenu.level + 1);
+    const titleStyle = computed(() => {
+      if (mode.value !== "horizontal") {
+        return {
+          color: textColor.value
+        };
+      }
+      return {
+        borderBottomColor: active.value ? rootMenu.props.activeTextColor ? activeTextColor.value : "" : "transparent",
+        color: active.value ? activeTextColor.value : textColor.value
       };
-      if (e.props.menuTrigger === "hover" && e.props.mode === "horizontal" && !fe() || e.props.collapse && e.props.mode === "vertical" || o.disabled) {
-        e.handleSubMenuClick({
-          ...a,
-          isFirstLevel: !0
+    });
+    const doDestroy = () => vPopper.value?.popperRef?.popperInstanceRef?.destroy();
+    const handleCollapseToggle = (value) => {
+      if (!value) {
+        doDestroy();
+      }
+    };
+    const handleClick = (e) => {
+      const data = {
+        e,
+        index: __props.index,
+        indexPath: indexPath.value,
+        active: active.value
+      };
+      if (rootMenu.props.menuTrigger === "hover" && rootMenu.props.mode === "horizontal" && !isMobile() || rootMenu.props.collapse && rootMenu.props.mode === "vertical" || __props.disabled) {
+        rootMenu.handleSubMenuClick({
+          ...data,
+          isFirstLevel: true
         });
         return;
       }
-      e.handleSubMenuClick(a);
-    }, v = (t, a = o.showTimeout) => {
-      t.type !== "focus" && (e.props.menuTrigger === "click" && e.props.mode === "horizontal" || !e.props.collapse && e.props.mode === "vertical" || o.disabled || (r.mouseInChild.value = !0, M?.(), {
-        stop: M
-      } = H(() => {
-        e.openMenu(o.index, f.value);
-      }, a), x.value && k.value.vnode.el?.dispatchEvent(new MouseEvent("mouseenter")), I("mouseenter", t)));
-    }, _ = () => {
-      e.inSubMenuMouseEnterTimer && clearTimeout(e.inSubMenuMouseEnterTimer), e.inSubMenuMouseleaveTimer && clearTimeout(e.inSubMenuMouseleaveTimer), e.inSubMenuMouseEnterTimer = setTimeout(() => {
-        e.inSubMenu = !0;
-      }, o.showTimeout + 10);
-    }, ee = () => {
-      e.inSubMenuMouseEnterTimer && clearTimeout(e.inSubMenuMouseEnterTimer), e.inSubMenuMouseleaveTimer && clearTimeout(e.inSubMenuMouseleaveTimer), e.inSubMenuMouseleaveTimer = setTimeout(() => {
-        e.inSubMenu = !1;
-      }, o.hideTimeout - 10);
-    }, T = (t, a = !1) => {
-      e.props.menuTrigger === "click" && e.props.mode === "horizontal" || !e.props.collapse && e.props.mode === "vertical" || (M?.(), r.mouseInChild.value = !1, {
-        stop: M
-      } = H(() => {
-        !z.value && e.closeMenu(o.index, f.value);
-      }, o.hideTimeout), x.value && a && d.parent?.type.name === "vft-sub-menu" && r.handleMouseleave?.(t, !0), I("mouseleave", t));
+      rootMenu.handleSubMenuClick(data);
+    };
+    const handleMouseenter = (event, _showTimeout = __props.showTimeout) => {
+      if (event.type === "focus") {
+        return;
+      }
+      if (rootMenu.props.menuTrigger === "click" && rootMenu.props.mode === "horizontal" || !rootMenu.props.collapse && rootMenu.props.mode === "vertical" || __props.disabled) {
+        return;
+      }
+      subMenu.mouseInChild.value = true;
+      timeout?.();
+      ({
+        stop: timeout
+      } = useTimeoutFn(() => {
+        rootMenu.openMenu(__props.index, indexPath.value);
+      }, _showTimeout));
+      if (appendToBody.value) {
+        parentMenu.value.vnode.el?.dispatchEvent(new MouseEvent("mouseenter"));
+      }
+      emit("mouseenter", event);
+    };
+    const handleSubMenuMouseenter = () => {
+      rootMenu.inSubMenuMouseEnterTimer && clearTimeout(rootMenu.inSubMenuMouseEnterTimer);
+      rootMenu.inSubMenuMouseleaveTimer && clearTimeout(rootMenu.inSubMenuMouseleaveTimer);
+      rootMenu.inSubMenuMouseEnterTimer = setTimeout(() => {
+        rootMenu.inSubMenu = true;
+      }, __props.showTimeout + 10);
     };
-    ae(() => e.props.collapse, (t) => Y(!!t));
+    const handleSubMenuMouseleave = () => {
+      rootMenu.inSubMenuMouseEnterTimer && clearTimeout(rootMenu.inSubMenuMouseEnterTimer);
+      rootMenu.inSubMenuMouseleaveTimer && clearTimeout(rootMenu.inSubMenuMouseleaveTimer);
+      rootMenu.inSubMenuMouseleaveTimer = setTimeout(() => {
+        rootMenu.inSubMenu = false;
+      }, __props.hideTimeout - 10);
+    };
+    const handleMouseleave = (event, deepDispatch = false) => {
+      if (rootMenu.props.menuTrigger === "click" && rootMenu.props.mode === "horizontal" || !rootMenu.props.collapse && rootMenu.props.mode === "vertical") {
+        return;
+      }
+      timeout?.();
+      subMenu.mouseInChild.value = false;
+      ({
+        stop: timeout
+      } = useTimeoutFn(() => {
+        !mouseInChild.value && rootMenu.closeMenu(__props.index, indexPath.value);
+      }, __props.hideTimeout));
+      if (appendToBody.value && deepDispatch) {
+        if (instance.parent?.type.name === "vft-sub-menu") {
+          subMenu.handleMouseleave?.(event, true);
+        }
+      }
+      emit("mouseleave", event);
+    };
+    watch(() => rootMenu.props.collapse, (value) => handleCollapseToggle(Boolean(value)));
     {
-      const t = (n) => {
-        S.value[n.index] = n;
-      }, a = (n) => {
-        delete S.value[n.index];
+      const addSubMenu = (item2) => {
+        subMenus.value[item2.index] = item2;
       };
-      se(`subMenu:${d.uid}`, {
-        addSubMenu: t,
-        removeSubMenu: a,
-        handleMouseleave: T,
-        mouseInChild: z,
-        level: r.level + 1
+      const removeSubMenu = (item2) => {
+        delete subMenus.value[item2.index];
+      };
+      provide(`subMenu:${instance.uid}`, {
+        addSubMenu,
+        removeSubMenu,
+        handleMouseleave,
+        mouseInChild,
+        level: subMenu.level + 1
       });
     }
-    q({
-      opened: c
-    }), re(() => {
-      e.addSubMenu(h), r.addSubMenu(h);
-    }), ie(() => {
-      r.removeSubMenu(h), e.removeSubMenu(h);
+    __expose({
+      opened
+    });
+    onMounted(() => {
+      rootMenu.addSubMenu(item);
+      subMenu.addSubMenu(item);
+    });
+    onBeforeUnmount(() => {
+      subMenu.removeSubMenu(item);
+      rootMenu.removeSubMenu(item);
+    });
+    const slots = useSlots();
+    const _icon = computed(() => singleAttrToObj(__props.icon, "icon"));
+    const _expandIcon = computed(() => singleAttrToObj(__props.expandIcon, "icon"));
+    const _collapseIcon = computed(() => singleAttrToObj(__props.collapseIcon, "icon"));
+    const subMenuIcon = computed(() => {
+      return mode.value === "horizontal" && isFirstLevel.value || mode.value === "vertical" && !rootMenu.props.collapse ? {
+        icon: "icon-arrow-down",
+        size: 20,
+        ..._expandIcon.value
+      } : {
+        icon: "icon-arrow-right",
+        size: 18,
+        ..._collapseIcon.value
+      };
     });
-    const V = ce(), N = l(() => g(o.icon, "icon")), oe = l(() => g(o.expandIcon, "icon")), te = l(() => g(o.collapseIcon, "icon")), ne = l(() => p.value === "horizontal" && b.value || p.value === "vertical" && !e.props.collapse ? {
-      icon: "icon-arrow-down",
-      size: 20,
-      ...oe.value
-    } : {
-      icon: "icon-arrow-right",
-      size: 18,
-      ...te.value
-    }), R = l(() => ve(d, "title"));
+    const titleCon = computed(() => renderTNode(instance, "title"));
     return () => {
-      const t = [N.value?.icon ? s(L, {
-        ...N.value
-      }) : null, s("span", {
-        class: [u.e("text"), u.is("arrow", o.showArrow)],
-        title: d.props.title
-      }, R.value), o.showArrow ? s(L, {
-        class: u.e("icon-arrow"),
-        ...ne.value,
+      const titleTag = [_icon.value?.icon ? h(VftIcon, {
+        ..._icon.value
+      }) : null, h("span", {
+        class: [nsSubMenu.e("text"), nsSubMenu.is("arrow", __props.showArrow)],
+        title: instance.props.title
+      }, titleCon.value), __props.showArrow ? h(VftIcon, {
+        class: nsSubMenu.e("icon-arrow"),
+        ...subMenuIcon.value,
         style: {
-          transform: c.value ? "rotateZ(180deg)" : "none"
+          transform: opened.value ? "rotateZ(180deg)" : "none"
         }
-      }) : !1], a = e.isMenuPopup ? s(Me, {
-        ref: E,
-        visible: c.value,
+      }) : false];
+      const child = rootMenu.isMenuPopup ? h(VftTooltip, {
+        ref: vPopper,
+        visible: opened.value,
         effect: "light",
-        pure: !0,
-        offset: o.popperOffset,
-        showArrow: !1,
-        persistent: W.value,
-        popperClass: o.popperClass,
-        placement: A.value,
-        teleported: x.value,
-        fallbackPlacements: Q.value,
-        transition: K.value,
-        gpuAcceleration: !1,
-        ...o.toolTipCfg
+        pure: true,
+        offset: __props.popperOffset,
+        showArrow: false,
+        persistent: persistent.value,
+        popperClass: __props.popperClass,
+        placement: currentPlacement.value,
+        teleported: appendToBody.value,
+        fallbackPlacements: fallbackPlacements.value,
+        transition: menuTransitionName.value,
+        gpuAcceleration: false,
+        ...__props.toolTipCfg
       }, {
-        content: () => s("div", {
-          class: [i.m(p.value), i.m("popup-container"), o.popperClass],
-          onMouseenter: (n) => v(n, 100),
-          onMouseleave: (n) => T(n, !0),
-          onFocus: (n) => v(n, 100)
-        }, [s("ul", {
-          class: [i.b(), i.m("popup"), i.m(`popup-${A.value}`)],
-          style: j.value
-        }, [V.default?.()])]),
-        default: () => s("div", {
-          class: u.e("title"),
-          style: [$.value, {
-            backgroundColor: B.value
+        content: () => h("div", {
+          class: [nsMenu.m(mode.value), nsMenu.m("popup-container"), __props.popperClass],
+          onMouseenter: (evt) => handleMouseenter(evt, 100),
+          onMouseleave: (evt) => handleMouseleave(evt, true),
+          onFocus: (evt) => handleMouseenter(evt, 100)
+        }, [h("ul", {
+          class: [nsMenu.b(), nsMenu.m("popup"), nsMenu.m(`popup-${currentPlacement.value}`)],
+          style: ulStyle.value
+        }, [slots.default?.()])]),
+        default: () => h("div", {
+          class: nsSubMenu.e("title"),
+          style: [titleStyle.value, {
+            backgroundColor: backgroundColor.value
           }],
-          onMouseenter: (n) => v(n),
-          onMouseleave: (n) => T(n, !0),
-          onClick: (n) => O(n)
-        }, t)
+          onMouseenter: (e) => handleMouseenter(e),
+          onMouseleave: (e) => handleMouseleave(e, true),
+          onClick: (e) => handleClick(e)
+        }, titleTag)
       }) : (
         // 以下是无需 tooltip 渲染的组件，通常是侧边栏没有折叠的时候
-        s(pe, {}, [R.value ? s("div", {
-          class: u.e("title"),
-          style: [$.value, {
-            backgroundColor: B.value
+        h(Fragment, {}, [titleCon.value ? h("div", {
+          class: nsSubMenu.e("title"),
+          style: [titleStyle.value, {
+            backgroundColor: backgroundColor.value
           }],
-          ref: J,
-          onClick: O
-        }, t) : null, s(be, {}, {
-          default: () => de(s("ul", {
+          ref: verticalTitleRef,
+          onClick: handleClick
+        }, titleTag) : null, h(VftCollapseTransition, {}, {
+          default: () => withDirectives(h("ul", {
             role: "menu",
-            class: [i.b(), i.m("inline")],
-            style: j.value
-          }, [V.default?.()]), [[me, c.value]])
+            class: [nsMenu.b(), nsMenu.m("inline")],
+            style: ulStyle.value
+          }, [slots.default?.()]), [[vShow, opened.value]])
         })])
       );
-      return s("li", {
-        class: [u.b(), u.is("active", m.value), u.e(String(r.level)), u.is("in-popup", r.level !== 0), u.is("opened", c.value), u.is("arrow", !0), u.is("disabled", o.disabled)],
+      return h("li", {
+        class: [nsSubMenu.b(), nsSubMenu.is("active", active.value), nsSubMenu.e(String(subMenu.level)), nsSubMenu.is("in-popup", subMenu.level !== 0), nsSubMenu.is("opened", opened.value), nsSubMenu.is("arrow", true), nsSubMenu.is("disabled", __props.disabled)],
         role: "menuitem",
-        ariaHaspopup: !0,
-        ariaExpanded: c.value,
-        onMouseenter: [_, (n) => v(n)],
-        onMouseleave: [ee, (n) => T(n, !0)],
-        onFocus: v
-      }, [a]);
+        ariaHaspopup: true,
+        ariaExpanded: opened.value,
+        onMouseenter: [handleSubMenuMouseenter, (e) => handleMouseenter(e)],
+        onMouseleave: [handleSubMenuMouseleave, (e) => handleMouseleave(e, true)],
+        onFocus: handleMouseenter
+      }, [child]);
     };
   }
 });
 export {
-  Oe as default
+  _sfc_main as default
 };

package/es/components/menu/use-menu-css-var.js

@@ -1,18 +1,13 @@
-import { computed as t } from "vue";
-import "@vueuse/core";
-import "@vft/utils";
-import "../config-provider/hooks/use-global-config.js";
-import "lodash-es";
-import { useNamespace as m } from "../../hooks/use-namespace/index.js";
-import "../../hooks/use-model-toggle/index.js";
-import "@popperjs/core";
-import "../../hooks/use-z-index/index.js";
-const V = (p, r) => {
-  const o = m("menu");
-  return t(() => o.cssVarBlock({
-    level: `${r}`
-  }));
+import { computed } from "vue";
+import { useNamespace } from "../../hooks/use-namespace/index.js";
+const useMenuCssVar = (props, level) => {
+  const ns = useNamespace("menu");
+  return computed(() => {
+    return ns.cssVarBlock({
+      level: `${level}`
+    });
+  });
 };
 export {
-  V as useMenuCssVar
+  useMenuCssVar
 };

package/es/components/menu/use-menu.js

@@ -1,22 +1,28 @@
-import { computed as r } from "vue";
-function i(t, p) {
-  const u = r(() => {
-    let e = t.parent;
-    const n = [p.value];
-    for (; e.type.name !== "vft-menu"; )
-      e.props.index && n.unshift(e.props.index), e = e.parent;
-    return n;
+import { computed } from "vue";
+function useMenu(instance, currentIndex) {
+  const indexPath = computed(() => {
+    let parent = instance.parent;
+    const path = [currentIndex.value];
+    while (parent.type.name !== "vft-menu") {
+      if (parent.props.index) {
+        path.unshift(parent.props.index);
+      }
+      parent = parent.parent;
+    }
+    return path;
+  });
+  const parentMenu = computed(() => {
+    let parent = instance.parent;
+    while (parent && !["vft-menu", "vft-sub-menu"].includes(parent.type.name)) {
+      parent = parent.parent;
+    }
+    return parent;
   });
   return {
-    parentMenu: r(() => {
-      let e = t.parent;
-      for (; e && !["vft-menu", "vft-sub-menu"].includes(e.type.name); )
-        e = e.parent;
-      return e;
-    }),
-    indexPath: u
+    parentMenu,
+    indexPath
   };
 }
 export {
-  i as default
+  useMenu as default
 };

package/es/components/menu/utils/menu-bar.js

@@ -1,15 +1,18 @@
-import i from "./menu-item.js";
-class s {
-  constructor(o, e) {
-    this.domNode = o, this.init(e);
+import MenuItem from "./menu-item.js";
+class Menu {
+  constructor(domNode, namespace) {
+    this.domNode = domNode;
+    this.init(namespace);
   }
-  init(o) {
-    const e = this.domNode.childNodes;
-    Array.from(e).forEach((t) => {
-      t.nodeType === 1 && new i(t, o);
+  init(namespace) {
+    const menuChildren = this.domNode.childNodes;
+    Array.from(menuChildren).forEach((child) => {
+      if (child.nodeType === 1) {
+        new MenuItem(child, namespace);
+      }
     });
   }
 }
 export {
-  s as default
+  Menu as default
 };

package/es/components/menu/utils/menu-item.js

@@ -1,42 +1,54 @@
-import { triggerEvent as u } from "@vft/utils";
-import { EVENT_CODE as s } from "@vft/constants";
-import r from "./submenu.js";
-class m {
-  constructor(e, t) {
-    this.domNode = e, this.submenu = null, this.init(t);
+import { triggerEvent } from "@vft/utils";
+import { EVENT_CODE } from "@vft/constants";
+import SubMenu from "./submenu.js";
+class MenuItem {
+  constructor(domNode, namespace) {
+    this.domNode = domNode;
+    this.submenu = null;
+    this.init(namespace);
   }
   submenu = null;
-  init(e) {
+  init(namespace) {
     this.domNode.setAttribute("tabindex", "0");
-    const t = this.domNode.querySelector(`.${e}-menu`);
-    t && (this.submenu = new r(this, t)), this.addListeners();
+    const menuChild = this.domNode.querySelector(`.${namespace}-menu`);
+    if (menuChild) {
+      this.submenu = new SubMenu(this, menuChild);
+    }
+    this.addListeners();
   }
   addListeners() {
-    this.domNode.addEventListener("keydown", (e) => {
-      let t = !1;
-      switch (e.code) {
-        case s.down: {
-          u(e.currentTarget, "mouseenter"), this.submenu && this.submenu.gotoSubIndex(0), t = !0;
+    this.domNode.addEventListener("keydown", (event) => {
+      let prevDef = false;
+      switch (event.code) {
+        case EVENT_CODE.down: {
+          triggerEvent(event.currentTarget, "mouseenter");
+          this.submenu && this.submenu.gotoSubIndex(0);
+          prevDef = true;
           break;
         }
-        case s.up: {
-          u(e.currentTarget, "mouseenter"), this.submenu && this.submenu.gotoSubIndex(this.submenu.subMenuItems.length - 1), t = !0;
+        case EVENT_CODE.up: {
+          triggerEvent(event.currentTarget, "mouseenter");
+          this.submenu && this.submenu.gotoSubIndex(this.submenu.subMenuItems.length - 1);
+          prevDef = true;
           break;
         }
-        case s.tab: {
-          u(e.currentTarget, "mouseleave");
+        case EVENT_CODE.tab: {
+          triggerEvent(event.currentTarget, "mouseleave");
           break;
         }
-        case s.enter:
-        case s.space: {
-          t = !0, e.currentTarget.click();
+        case EVENT_CODE.enter:
+        case EVENT_CODE.space: {
+          prevDef = true;
+          event.currentTarget.click();
           break;
         }
       }
-      t && e.preventDefault();
+      if (prevDef) {
+        event.preventDefault();
+      }
     });
   }
 }
 export {
-  m as default
+  MenuItem as default
 };