vft 0.0.11 → 0.0.14

package/es/packages/components/menu/menu-item.vue2.mjs

@@ -0,0 +1,117 @@
+import { defineComponent as S, getCurrentInstance as M, inject as V, computed as r, reactive as Y, onMounted as D, onBeforeUnmount as F, openBlock as o, createElementBlock as c, Fragment as d, createBlock as s, unref as t, createCommentVNode as u, createElementVNode as f, normalizeClass as $, withCtx as j, renderSlot as v, normalizeProps as O, mergeProps as q, createVNode as G } from "vue";
+import { singleAttrToObj as H, renderTNode as J, VNode as K } from "@vft/utils";
+import "@vue/shared";
+import { throwError as P } from "../../utils/error.mjs";
+import { useNamespace as k } from "../../hooks/use-namespace/index.mjs";
+import "@popperjs/core";
+import "lodash";
+import "../../hooks/use-z-index/index.mjs";
+import "@vueuse/core";
+import L from "./use-menu.mjs";
+import { VftDivider as E } from "../divider/index.mjs";
+import { VftIcon as Q } from "../icon/index.mjs";
+import "../avatar/index.mjs";
+import "../empty/index.mjs";
+import "../result/index.mjs";
+import "../exception/index.mjs";
+import "../tabs/index.mjs";
+import "../popper/index.mjs";
+import "../collapse-transition/index.mjs";
+import { VftTooltip as R } from "../tooltip/index.mjs";
+import "../popover/index.mjs";
+import "./index.mjs";
+import "@vft/use";
+import "../multiple-tabs/index.mjs";
+const W = ["title"], b = (
+  /* hoist-static*/
+  k("menu-item")
+), X = S({
+  name: b.b()
+}), Ue = /* @__PURE__ */ S({
+  ...X,
+  props: {
+    index: null,
+    route: null,
+    disabled: { type: Boolean },
+    icon: null,
+    title: null,
+    isAloneUse: { type: Boolean },
+    divider: { type: Boolean },
+    className: null,
+    reverse: { type: Boolean }
+  },
+  emits: ["click"],
+  setup(e, { emit: T }) {
+    const y = M(), w = k("menu"), a = k("menu-item"), n = e.isAloneUse ? null : V("rootMenu");
+    !n && !e.isAloneUse && P(b.b(), "can not inject root menu");
+    const { parentMenu: p, indexPath: g } = L(
+      y,
+      r(() => e.index)
+    ), i = e.isAloneUse ? null : V(`subMenu:${p.value.uid}`);
+    !i && !e.isAloneUse && P(b.b(), "can not inject sub menu");
+    const h = r(() => e.index === (n == null ? void 0 : n.activeIndex)), l = Y({
+      index: e.index,
+      indexPath: g,
+      active: h
+    }), z = () => {
+      e.disabled || (n == null || n.handleMenuItemClick({
+        index: e.index,
+        indexPath: g.value,
+        route: e.route
+      }), T("click", l));
+    }, x = r(() => H(e.icon, "icon")), A = r(() => J(y, "title"));
+    return D(() => {
+      e.isAloneUse || (i == null || i.addSubMenu(l), n == null || n.addMenuItem(l));
+    }), F(() => {
+      e.isAloneUse || (i == null || i.removeSubMenu(l), n == null || n.removeMenuItem(l));
+    }), (m, Z) => {
+      var U, B, C, N, I;
+      return o(), c(d, null, [
+        e.reverse && e.divider ? (o(), s(t(E), {
+          key: 0,
+          marginY: "0"
+        })) : u("", !0),
+        f("li", {
+          class: $([e.className, t(a).b(), t(a).is("active", e.isAloneUse ? !1 : t(h)), t(a).is("disabled", e.disabled)]),
+          role: "menuitem",
+          tabindex: "-1",
+          onClick: z
+        }, [
+          ((B = (U = t(p)) == null ? void 0 : U.type) == null ? void 0 : B.name) === "vft-menu" && ((C = t(n)) != null && C.props.collapse) && m.$slots.title ? (o(), s(t(R), {
+            key: 0,
+            placement: "right",
+            "fallback-placements": ["left"],
+            persistent: ""
+          }, {
+            content: j(() => [
+              v(m.$slots, "title")
+            ]),
+            default: j(() => [
+              f("div", {
+                class: $(t(w).be("tooltip", "trigger"))
+              }, [
+                v(m.$slots, "default")
+              ], 2)
+            ]),
+            _: 3
+          })) : (o(), c(d, { key: 1 }, [
+            (N = m.$slots) != null && N.default ? v(m.$slots, "default", { key: 0 }) : (o(), c(d, { key: 1 }, [
+              (I = t(x)) != null && I.icon ? (o(), s(t(Q), O(q({ key: 0 }, t(x))), null, 16)) : u("", !0),
+              f("span", { title: t(A) }, [
+                G(t(K), { content: t(A) }, null, 8, ["content"])
+              ], 8, W)
+            ], 64))
+          ], 64))
+        ], 2),
+        !e.reverse && e.divider ? (o(), s(t(E), {
+          key: 1,
+          marginY: "0"
+        })) : u("", !0)
+      ], 64);
+    };
+  }
+});
+export {
+  Ue as default
+};
+//# sourceMappingURL=menu-item.vue2.mjs.map

package/es/packages/components/menu/menu-item.vue2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.vue2.mjs","sources":["../../../../../../packages/components/menu/menu-item.vue"],"sourcesContent":["<script lang=\"ts\">\nconst ns = /* hoist-static*/ useNamespace('menu-item')\n\nimport { defineComponent as DO_defineComponent } from 'vue';\nexport default /*#__PURE__*/ DO_defineComponent({\n  name: ns.b()\n});</script>\n<script lang=\"ts\" setup>\nimport { renderTNode, singleAttrToObj, VNode } from '@vft/utils';\nimport { computed, getCurrentInstance, inject, onBeforeUnmount, onMounted, reactive } from 'vue';\nimport { throwError } from '@vft-ui/utils';\nimport { useNamespace } from '@vft-ui/hooks';\nimport { type RouteLocationRaw } from 'vue-router';\nimport useMenu from './use-menu';\nimport { VftIcon as Icon, type IconProps, VftTooltip as Tooltip, VftDivider } from '@vft-ui/components';\n\nimport type { MenuItemRegistered, MenuProvider, SubMenuProvider } from './types';\n\ninterface Props {\n  /** 唯一标志 */\n  index?: string;\n  /** Vue Router 路径对象 */\n  route?: RouteLocationRaw;\n  /** 是否禁用 */\n  disabled?: boolean;\n  icon?: IconProps;\n  title?: string;\n  isAloneUse?: boolean;\n  divider?: boolean;\n  className?: string\n  reverse?: boolean\n}\n\ndefineProps({\n  \"index\": null,\n  \"route\": null,\n  \"disabled\": { type: Boolean,  },\n  \"icon\": null,\n  \"title\": null,\n  \"isAloneUse\": { type: Boolean,  },\n  \"divider\": { type: Boolean,  },\n  \"className\": null,\n  \"reverse\": { type: Boolean,  }\n})\n\n\n\nconst emit = defineEmits(['click']);\n\n;\n\nconst instance = getCurrentInstance()!;\n\nconst nsMenu = useNamespace('menu');\n\nconst nsMenuItem = useNamespace('menu-item');\n\n// 获取来自 menu.vue 中注入的数据\nconst rootMenu = !__props.isAloneUse ? inject<MenuProvider>('rootMenu') : null;\nif (!rootMenu && !__props.isAloneUse) throwError(ns.b(), 'can not inject root menu');\n\n// indexPath：当前 menu-item 对应的 index 和 vft-sub-menu 的 index，parentMenu 为 vft-sub-menu 组件\nconst { parentMenu, indexPath } = useMenu(\n  instance,\n  computed(() => __props.index!)\n);\n\n// 注入来自 sub-menu 中的 provide 数据\nconst subMenu = !__props.isAloneUse ? inject<SubMenuProvider>(`subMenu:${parentMenu.value.uid}`) : null;\nif (!subMenu && !__props.isAloneUse) throwError(ns.b(), 'can not inject sub menu');\n\n// 当前是否为 active\nconst active = computed(() => __props.index === rootMenu?.activeIndex);\n\nconst item: MenuItemRegistered = reactive({\n  index: __props.index!,\n  indexPath,\n  active\n});\n\n// 点击具体菜单项\nconst handleClick = () => {\n  if (!__props.disabled) {\n    rootMenu?.handleMenuItemClick({\n      index: __props.index!,\n      indexPath: indexPath.value,\n      route: __props.route\n    });\n    emit('click', item);\n  }\n};\n\nconst _icon = computed(() => {\n  return singleAttrToObj(__props.icon, 'icon') as IconProps;\n});\n\nconst title = computed(() => {\n  return renderTNode(instance, 'title');\n});\n\nonMounted(() => {\n  if (!__props.isAloneUse) {\n    // 触发 sub-menu,vue 中的 addSubMenu\n    subMenu?.addSubMenu(item);\n    // 触发 menu.vue 中的 addMenuItem 更新 items\n    rootMenu?.addMenuItem(item);\n  }\n});\n\nonBeforeUnmount(() => {\n  if (!__props.isAloneUse) {\n    subMenu?.removeSubMenu(item);\n    rootMenu?.removeMenuItem(item);\n  }\n});\n</script>\n\n<template>\n  <vft-divider v-if=\"reverse && divider\" marginY=\"0\" />\n  <li :class=\"[className, nsMenuItem.b(), nsMenuItem.is('active', isAloneUse ? false : active), nsMenuItem.is('disabled', disabled)]\" role=\"menuitem\" tabindex=\"-1\" @click=\"handleClick\">\n    <tooltip\n      v-if=\"parentMenu?.type?.name === 'vft-menu' && rootMenu?.props.collapse && $slots.title\"\n      placement=\"right\" :fallback-placements=\"['left']\" persistent>\n      <template #content>\n        <slot name=\"title\" />\n      </template>\n      <div :class=\"nsMenu.be('tooltip', 'trigger')\">\n        <slot />\n      </div>\n    </tooltip>\n    <template v-else>\n      <slot v-if=\"$slots?.default\"/>\n      <template v-else>\n        <Icon v-if=\"_icon?.icon\" v-bind=\"_icon\" />\n        <span :title=\"title\"><v-node :content=\"title\" /></span>\n      </template>\n    </template>\n  </li>\n  <vft-divider v-if=\"!reverse && divider\" marginY=\"0\" />\n</template>\n"],"names":["ns","useNamespace","__default__","DO_defineComponent","instance","getCurrentInstance","nsMenu","nsMenuItem","rootMenu","__props","inject","throwError","parentMenu","indexPath","useMenu","computed","subMenu","active","item","reactive","handleClick","emit","_icon","singleAttrToObj","title","renderTNode","onMounted","onBeforeUnmount"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;qBACMA;AAAA;AAAA,EAAuBC,EAAa,WAAW;AAAA,GAGrDC,IAA6BC,EAAmB;AAAA,EAC9C,MAAMH,EAAG,EAAE;AACb,CAAC;;;;;;;;;;;;;;;AA6CD,UAAMI,IAAWC,KAEXC,IAASL,EAAa,MAAM,GAE5BM,IAAaN,EAAa,WAAW,GAGrCO,IAAYC,EAAQ,aAAgD,OAAnCC,EAAqB,UAAU;AAClE,IAAA,CAACF,KAAY,CAACC,EAAQ,cAAuBE,EAAAX,EAAG,EAAE,GAAG,0BAA0B;AAG7E,UAAA,EAAE,YAAAY,GAAY,WAAAC,EAAA,IAAcC;AAAA,MAChCV;AAAA,MACAW,EAAS,MAAMN,EAAQ,KAAM;AAAA,IAAA,GAIzBO,IAAWP,EAAQ,aAA0E,OAA7DC,EAAwB,WAAWE,EAAW,MAAM,KAAK;AAC3F,IAAA,CAACI,KAAW,CAACP,EAAQ,cAAuBE,EAAAX,EAAG,EAAE,GAAG,yBAAyB;AAGjF,UAAMiB,IAASF,EAAS,MAAMN,EAAQ,WAAUD,KAAA,gBAAAA,EAAU,YAAW,GAE/DU,IAA2BC,EAAS;AAAA,MACxC,OAAOV,EAAQ;AAAA,MACf,WAAAI;AAAA,MACA,QAAAI;AAAA,IAAA,CACD,GAGKG,IAAc,MAAM;AACpB,MAACX,EAAQ,aACXD,KAAA,QAAAA,EAAU,oBAAoB;AAAA,QAC5B,OAAOC,EAAQ;AAAA,QACf,WAAWI,EAAU;AAAA,QACrB,OAAOJ,EAAQ;AAAA,MAAA,IAEjBY,EAAK,SAASH,CAAI;AAAA,IACpB,GAGII,IAAQP,EAAS,MACdQ,EAAgBd,EAAQ,MAAM,MAAM,CAC5C,GAEKe,IAAQT,EAAS,MACdU,EAAYrB,GAAU,OAAO,CACrC;AAED,WAAAsB,EAAU,MAAM;AACV,MAACjB,EAAQ,eAEXO,KAAA,QAAAA,EAAS,WAAWE,IAEpBV,KAAA,QAAAA,EAAU,YAAYU;AAAA,IACxB,CACD,GAEDS,EAAgB,MAAM;AAChB,MAAClB,EAAQ,eACXO,KAAA,QAAAA,EAAS,cAAcE,IACvBV,KAAA,QAAAA,EAAU,eAAeU;AAAA,IAC3B,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/es/packages/components/menu/menu.vue.mjs

@@ -0,0 +1,5 @@
+import f from "./menu.vue2.mjs";
+export {
+  f as default
+};
+//# sourceMappingURL=menu.vue.mjs.map

package/es/packages/components/menu/menu.vue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.vue.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/es/packages/components/menu/menu.vue2.mjs

@@ -0,0 +1,207 @@
+import { defineComponent as B, useSlots as J, getCurrentInstance as K, ref as d, computed as Q, watch as O, watchEffect as U, provide as A, reactive as X, onMounted as Y, h as I, nextTick as Z } from "vue";
+import { useResizeObserver as _ } from "@vueuse/core";
+import "@vue/shared";
+import { flattedChildren as ee } from "../../utils/vue/vnode.mjs";
+import "@vft/utils";
+import { useNamespace as N } from "../../hooks/use-namespace/index.mjs";
+import "@popperjs/core";
+import "lodash";
+import "../../hooks/use-z-index/index.mjs";
+import te from "./utils/menu-bar.mjs";
+import le from "./menu-collapse-transition.vue.mjs";
+import ne from "./sub-menu.vue2.mjs";
+import { useMenuCssVar as oe } from "./use-menu-css-var.mjs";
+import { VftIcon as ue } from "../icon/index.mjs";
+const M = (
+  /* hoist-static*/
+  N("menu")
+), ae = B({
+  name: M.b()
+}), Ie = /* @__PURE__ */ B({
+  ...ae,
+  props: {
+    mode: { default: "vertical" },
+    defaultActive: { default: "" },
+    defaultOpeneds: { default: [] },
+    uniqueOpened: { type: Boolean },
+    router: { type: Boolean },
+    menuTrigger: { default: "hover" },
+    collapse: { type: Boolean },
+    backgroundColor: null,
+    textColor: null,
+    activeTextColor: null,
+    collapseTransition: { type: Boolean, default: !0 },
+    ellipsis: { type: Boolean, default: !0 }
+  },
+  emits: [
+    "close",
+    "open",
+    "select"
+  ],
+  setup(l, { expose: W, emit: b }) {
+    const y = J(), v = K(), T = v.appContext.config.globalProperties.$router, s = d(), z = N("sub-menu"), f = d(-1), o = d(
+      l.defaultOpeneds && !l.collapse ? l.defaultOpeneds.slice(0) : []
+    ), u = d(l.defaultActive), c = d({}), h = d({}), E = Q(() => l.mode === "horizontal" || l.mode === "vertical" && l.collapse), V = () => {
+      const e = u.value && c.value[u.value];
+      if (!e || l.mode === "horizontal" || l.collapse)
+        return;
+      e.indexPath.forEach((n) => {
+        const a = h.value[n];
+        a && g(n, a.indexPath);
+      });
+    }, g = (e, t) => {
+      o.value.includes(e) || (l.uniqueOpened && (o.value = o.value.filter((n) => t.includes(n))), o.value.push(e), b("open", e, t));
+    }, S = (e, t) => {
+      const n = o.value.indexOf(e);
+      n !== -1 && o.value.splice(n, 1), b("close", e, t);
+    }, $ = ({ index: e, indexPath: t }) => {
+      o.value.includes(e) ? S(e, t) : g(e, t);
+    }, q = (e) => {
+      (l.mode === "horizontal" || l.collapse) && (o.value = []);
+      const { index: t, indexPath: n } = e;
+      if (!(t === void 0 || n === void 0))
+        if (l.router && T) {
+          const a = e.route || t, m = T.push(a).then((i) => (i || (u.value = t), i));
+          b("select", e, m);
+        } else
+          u.value = t, b("select", e);
+    }, D = (e) => {
+      const t = c.value, n = t[e] || u.value && t[u.value] || t[l.defaultActive];
+      n ? u.value = n.index : u.value = e;
+    }, L = () => {
+      var r;
+      if (!s.value)
+        return -1;
+      const e = Array.from(((r = s.value) == null ? void 0 : r.childNodes) ?? []).filter(
+        (C) => C.nodeName !== "#text" || C.nodeValue
+      ), t = 64, n = Number.parseInt(getComputedStyle(s.value).paddingLeft, 10), a = Number.parseInt(getComputedStyle(s.value).paddingRight, 10), m = s.value.clientWidth - n - a;
+      let i = 0, p = 0;
+      return e.forEach((C, H) => {
+        i += C.offsetWidth || 0, i <= m - t && (p = H + 1);
+      }), p === e.length ? -1 : p;
+    }, F = (e, t = 33.34) => {
+      let n;
+      return () => {
+        n && clearTimeout(n), n = setTimeout(() => {
+          e();
+        }, t);
+      };
+    };
+    let k = !0;
+    const P = () => {
+      const e = () => {
+        f.value = -1, Z(() => {
+          f.value = L();
+        });
+      };
+      k ? e() : F(e)(), k = !1;
+    };
+    O(
+      () => l.defaultActive,
+      (e) => {
+        c.value[e] || (u.value = ""), D(e);
+      }
+    ), O(
+      () => l.collapse,
+      (e) => {
+        e && (o.value = []);
+      }
+    ), O(c.value, V);
+    let x;
+    U(() => {
+      l.mode === "horizontal" && l.ellipsis ? x = _(s, P).stop : x == null || x();
+    });
+    const R = (e) => {
+      h.value[e.index] = e;
+    }, w = (e) => {
+      delete h.value[e.index];
+    }, j = (e) => {
+      c.value[e.index] = e;
+    }, G = (e) => {
+      delete c.value[e.index];
+    };
+    return A(
+      "rootMenu",
+      X({
+        props: v.props,
+        openedMenus: o,
+        items: c,
+        subMenus: h,
+        activeIndex: u,
+        isMenuPopup: E,
+        addMenuItem: j,
+        removeMenuItem: G,
+        addSubMenu: R,
+        removeSubMenu: w,
+        openMenu: g,
+        closeMenu: S,
+        handleMenuItemClick: q,
+        handleSubMenuClick: $
+      })
+    ), A(`subMenu:${v.uid}`, {
+      addSubMenu: R,
+      removeSubMenu: w,
+      mouseInChild: d(!1),
+      // 表示当前是第一级的 sub-menu
+      level: 0
+    }), Y(() => {
+      l.mode === "horizontal" && new te(v.vnode.el, M.namespace.value);
+    }), W({
+      open: (e) => {
+        const { indexPath: t } = h.value[e];
+        t.forEach((n) => g(n, t));
+      },
+      close: S,
+      handleResize: P
+    }), () => {
+      var m;
+      let e = ((m = y.default) == null ? void 0 : m.call(y)) ?? [];
+      const t = [];
+      if (l.mode === "horizontal" && s.value) {
+        const i = ee(e), p = f.value === -1 ? i : i.slice(
+          0,
+          f.value
+        ), r = f.value === -1 ? [] : i.slice(f.value);
+        r != null && r.length && l.ellipsis && (e = p, t.push(
+          I(
+            ne,
+            {
+              index: "sub-menu-more",
+              class: z.e("hide-arrow")
+            },
+            {
+              title: () => I(
+                ue,
+                {
+                  icon: "vi-item",
+                  class: z.e("icon-more")
+                }
+              ),
+              default: () => r
+            }
+          )
+        ));
+      }
+      const n = oe(v.props, 0), a = I(
+        "ul",
+        {
+          key: String(l.collapse),
+          role: "menubar",
+          ref: s,
+          style: n.value,
+          class: {
+            [M.b()]: !0,
+            [M.m(l.mode)]: !0,
+            [M.m("collapse")]: l.collapse
+          }
+        },
+        [...e, ...t]
+      );
+      return l.collapseTransition && l.mode === "vertical" ? I(le, () => a) : a;
+    };
+  }
+});
+export {
+  Ie as default
+};
+//# sourceMappingURL=menu.vue2.mjs.map

package/es/packages/components/menu/menu.vue2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.vue2.mjs","sources":["../../../../../../packages/components/menu/menu.vue"],"sourcesContent":["<script lang=\"ts\">\nconst ns = /* hoist-static*/ useNamespace('menu')\n\nimport { defineComponent as DO_defineComponent } from 'vue';\nexport default /*#__PURE__*/ DO_defineComponent({\n  name: ns.b()\n});</script>\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  getCurrentInstance,\n  h,\n  nextTick,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  watch,\n  watchEffect,\n  useSlots\n} from 'vue';\nimport { useResizeObserver } from '@vueuse/core';\nimport { flattedChildren } from '../../utils';\nimport { useNamespace } from '@vft-ui/hooks';\nimport Menubar from './utils/menu-bar';\nimport MenuCollapseTransition from './menu-collapse-transition.vue';\nimport SubMenu from './sub-menu.vue';\nimport { useMenuCssVar } from './use-menu-css-var';\nimport type { MenuProvider, SubMenuProvider } from './types';\nimport type { Router } from 'vue-router';\nimport type { VNode, VNodeArrayChildren } from 'vue';\nimport type { UseResizeObserverReturn } from '@vueuse/core';\nimport Icon from '@vft-ui/components/icon';\n\ninterface MenuProps {\n  /** 菜单展示模式 */\n  mode?: 'horizontal' | 'vertical';\n  /** 页面加载时默认激活菜单的 index（menu-item 的index） */\n  defaultActive?: string;\n  /** 默认打开的 sub-menu 的 index 的数组 */\n  defaultOpeneds?: string[];\n  /** 是否只保持一个子菜单的展开 */\n  uniqueOpened?: boolean;\n  /** 是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项 */\n  router?: boolean;\n  /** 子菜单打开的触发方式，只在 mode 为 horizontal 时有效 */\n  menuTrigger?: 'hover' | 'click';\n  collapse?: boolean;\n  /** 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用) */\n  backgroundColor?: string;\n  textColor?: string;\n  activeTextColor?: string;\n  /** 是否开启折叠动画 */\n  collapseTransition?: boolean;\n  /** 是否省略多余的子项（仅在横向模式生效） */\n  ellipsis?: boolean;\n}\n\ndefineProps({\n  \"mode\": { default: 'vertical' },\n  \"defaultActive\": { default: '' },\n  \"defaultOpeneds\": { default: [] },\n  \"uniqueOpened\": { type: Boolean,  },\n  \"router\": { type: Boolean,  },\n  \"menuTrigger\": { default: 'hover' },\n  \"collapse\": { type: Boolean,  },\n  \"backgroundColor\": null,\n  \"textColor\": null,\n  \"activeTextColor\": null,\n  \"collapseTransition\": { type: Boolean, default: true },\n  \"ellipsis\": { type: Boolean, default: true }\n})\n\nconst emit = defineEmits([\n  'close',\n  'open',\n  'select'\n]);\n\n\n\n;\n\nconst slots = useSlots();\n\nconst instance = getCurrentInstance()!;\n\n// get router instance\nconst _router = instance.appContext.config.globalProperties.$router as Router;\n\nconst menu = ref<HTMLUListElement>();\n\nconst nsSubMenu = useNamespace('sub-menu');\n\n// data\nconst sliceIndex = ref(-1);\n\n// 展开的菜单项数组 defaultOpeneds 配置的对应 sub-menu 中的数组，并且菜单不能是收缩状态\nconst openedMenus = ref<MenuProvider['openedMenus']>(\n  __props.defaultOpeneds && !__props.collapse ? __props.defaultOpeneds.slice(0) : []\n);\n\n// 页面加载时默认激活菜单的 index，最终提供给 menu-item 去使用\nconst activeIndex = ref<MenuProvider['activeIndex']>(__props.defaultActive);\n\n/**\n * 主要是存储 menu-item 中的菜单项\n * 格式如下\n * ```\n * {\n *  1-1:{index: '1-1', indexPath: ['mio', '1-1'], active: false},\n *  1-2:{index: '1-2', indexPath: ['mio', '1-2'], active: false}\n * }\n * ```\n */\nconst items = ref<MenuProvider['items']>({});\n\n/**\n * 主要是存储 sub-menu 中的菜单项\n * 格式如下\n * ```\n * {\n *  mio:{index: 'mio', indexPath: ['mio'], active: false},\n *  test:{index: 'test', indexPath: ['test'], active: false}\n * }\n * ```\n */\nconst subMenus = ref<MenuProvider['subMenus']>({});\n\n/**\n * @description 是否需要 tooltip 1.水平模式的菜单需要 2.竖直类型的菜单在收缩时需要\n * @author wfd\n * @date 2022/11/8 13:22\n * @example\n * @type {ComputedRef<MenuProvider[\"isMenuPopup\"]>}\n */\nconst isMenuPopup = computed<MenuProvider['isMenuPopup']>(() => {\n  return __props.mode === 'horizontal' || (__props.mode === 'vertical' && __props.collapse) as MenuProvider['isMenuPopup'];\n});\n\n// 当配置了 defaultActive 时菜单的展开设置\nconst initMenu = () =>  {\n  // 如果设置了 activeIndex 且当前的 activeIndex 项在 items 中存在\n  // 获取当前激活菜单的 item {index: '1-1', indexPath: ['mio', '1-1'], active: false}\n  const activeItem = activeIndex.value && items.value[activeIndex.value];\n  // 只在竖直模式，且非折叠模式，且子菜单配置为激活时触发\n  if (!activeItem || __props.mode === 'horizontal' || __props.collapse) return;\n  // ['mio', '1-1']\n  const indexPath = activeItem.indexPath;\n\n  // 展开该菜单项的路径上所有子菜单\n  indexPath.forEach((index) => {\n    // {index: 'mio', indexPath: ['mio'], active: false}\n    const subMenu = subMenus.value[index];\n    subMenu && openMenu(index, subMenu.indexPath);\n  });\n};\n\n/**\n * @description 展开子菜单\n * @author wfd\n * @date 2022/11/8 16:44\n * @example\n * @param {string} index\n * @param {string[]} indexPath\n */\nconst openMenu: MenuProvider['openMenu'] = (index: string, indexPath: string[]) => {\n  // 如果当前点击的 index 在 openedMenus 中，则不向下执行操作\n  if (openedMenus.value.includes(index)) return;\n  // 将不在该菜单路径下的其余菜单收起\n  if (__props.uniqueOpened) {\n    openedMenus.value = openedMenus.value.filter((index: string) => indexPath.includes(index));\n  }\n  // 将点击的 index 加入到 openedMenus 中\n  openedMenus.value.push(index);\n  emit('open', index, indexPath);\n};\n\n/**\n * @description 关闭当前点击的 sub-menu 对应的 index，主要是从 openedMenus 移除该项\n * @author wfd\n * @date 2022/11/8 16:43\n * @example\n * @param {string} index\n * @param {string[]} indexPath\n */\nconst closeMenu: MenuProvider['closeMenu'] = (index, indexPath) => {\n  const i = openedMenus.value.indexOf(index);\n  if (i !== -1) {\n    openedMenus.value.splice(i, 1);\n  }\n  emit('close', index, indexPath);\n};\n\n// sub-menu 点击事件，主要是展开收缩菜单，通过控制 openedMenus 的值\nconst handleSubMenuClick: MenuProvider['handleSubMenuClick'] = ({ index, indexPath }) => {\n  // 判断当前点击的 sub-menu 菜单是否已经在 openedMenus 中\n  const isOpened = openedMenus.value.includes(index);\n\n  // 如果已经在 openedMenus 中，代表当前菜单已经展开（展开则调用 close 关闭），否则未打开（则调用 open 给展开）\n  if (isOpened) {\n    closeMenu(index, indexPath);\n  } else {\n    openMenu(index, indexPath);\n  }\n};\n\n/**\n * @description 子项点击跳转事件，如果 menu.vue 配置了 route 为 true，则执行路由跳转，否则触发\n * emit('select') 只返回数据\n * @author wfd\n * @date 2022/11/8 18:30\n * @example\n * @param {MenuItemClicked} menuItem\n */\nconst handleMenuItemClick: MenuProvider['handleMenuItemClick'] = (menuItem) => {\n\n  if (__props.mode === 'horizontal' || __props.collapse) {\n    openedMenus.value = [];\n  }\n  const { index, indexPath } = menuItem;\n  if (index === undefined || indexPath === undefined) return;\n\n  if (__props.router && _router) {\n    // 路由跳转的路径如果 menu-item 配置了则，采用 menu-item 的，否则采用 index 为 router 路径\n    const route = menuItem.route || index;\n    const routerResult = _router.push(route).then((res) => {\n      if (!res) activeIndex.value = index;\n      return res;\n    });\n    emit('select', menuItem, routerResult);\n  } else {\n    activeIndex.value = index;\n\n    emit('select', menuItem);\n  }\n};\n\n/**\n * 更新 activeIndex\n * @param {string} val\n */\nconst updateActiveIndex = (val: string) => {\n  const itemsInData = items.value;\n  // 首先从最新的 val 中去 items 取数据，如果没有取到再去 items 对应的 activeIndex 去取\n  const item = itemsInData[val] || (activeIndex.value && itemsInData[activeIndex.value]) || itemsInData[__props.defaultActive];\n\n  // 更新 activeIndex\n  if (item) {\n    activeIndex.value = item.index;\n  } else {\n    activeIndex.value = val;\n  }\n};\n\nconst calcSliceIndex = () => {\n  if (!menu.value) return -1;\n  const items = Array.from(menu.value?.childNodes ?? []).filter(\n    (item) => item.nodeName !== '#text' || item.nodeValue) as HTMLElement[];\n  const moreItemWidth = 64;\n  const paddingLeft = Number.parseInt(getComputedStyle(menu.value!).paddingLeft, 10);\n  const paddingRight = Number.parseInt(getComputedStyle(menu.value!).paddingRight, 10);\n  const menuWidth = menu.value!.clientWidth - paddingLeft - paddingRight;\n  let calcWidth = 0;\n  let sliceIndex = 0;\n  items.forEach((item, index) => {\n    calcWidth += item.offsetWidth || 0;\n    if (calcWidth <= menuWidth - moreItemWidth) {\n      sliceIndex = index + 1;\n    }\n  });\n  return sliceIndex === items.length ? -1 : sliceIndex;\n};\n\n// 常见的计算机监视器FPS为60Hz，这意味着每秒重画60次。计算公式：1000ms60≈ 16.67ms，为了避免“调整大小”时重复触发的特定机会，将等待设置为16.67 2=33.34\nconst debounce = (fn: () => void, wait = 33.34) => {\n  let timmer: ReturnType<typeof setTimeout> | null;\n  return () => {\n    timmer && clearTimeout(timmer);\n    timmer = setTimeout(() => {\n      fn();\n    }, wait);\n  };\n};\n\nlet isFirstTimeRender = true;\nconst handleResize = () => {\n  const callback = () => {\n    sliceIndex.value = -1;\n    nextTick(() => {\n      sliceIndex.value = calcSliceIndex();\n    });\n  };\n  // 第一次调整大小时直接执行回调以避免抖动\n  isFirstTimeRender ? callback() : debounce(callback)();\n  isFirstTimeRender = false;\n};\n\n// defaultActive 变化时触发时更新 activeIndex\nwatch(\n  () => __props.defaultActive,\n  (currentActive) => {\n    // 如果最新的 defaultActive 在 items 中不存在则 activeIndex 更新为空\n    if (!items.value[currentActive]) {\n      activeIndex.value = '';\n    }\n    updateActiveIndex(currentActive);\n  }\n);\n\nwatch(\n  () => __props.collapse,\n  (value) => {\n    if (value) openedMenus.value = [];\n  }\n);\n\n// 监控 items 的变化(在 menu-item.vue 中的 onMounted 中执行产生变化)，然后执行 initMenu\nwatch(items.value, initMenu);\n\nlet resizeStopper: UseResizeObserverReturn['stop'];\nwatchEffect(() => {\n  if (__props.mode === 'horizontal' && __props.ellipsis) resizeStopper = useResizeObserver(menu, handleResize).stop;\n  else resizeStopper?.();\n});\n\n// 提供给 sub-menu.vue 使用，将每一个 sub-menu 的数据存储在 subMenus 中\nconst addSubMenu: MenuProvider['addSubMenu'] = (item) => {\n  subMenus.value[item.index] = item;\n};\n\nconst removeSubMenu: MenuProvider['removeSubMenu'] = (item) => {\n  delete subMenus.value[item.index];\n};\n\n/**\n * 此函数在 menu-item 中触发，items.value 默认为空对象\n * 最后添加后的 items 格式如下\n * ```\n * {\n *  1-1:{index: '1-1', indexPath: ['mio', '1-1'], active: false},\n *  1-2:{index: '1-2', indexPath: ['mio', '1-2'], active: false}\n * }\n * ```\n * @param {MenuItemRegistered} item\n */\nconst addMenuItem: MenuProvider['addMenuItem'] = (item) => {\n  items.value[item.index] = item;\n};\n\nconst removeMenuItem: MenuProvider['removeMenuItem'] = (item) => {\n  delete items.value[item.index];\n};\n\n/**\n * 提供以下方法与属性给 sub-menu.vue 使用\n */\nprovide<MenuProvider>(\n  'rootMenu',\n  reactive({\n    props: instance.props,\n    openedMenus,\n    items,\n    subMenus,\n    activeIndex,\n    isMenuPopup,\n\n    addMenuItem,\n    removeMenuItem,\n    addSubMenu,\n    removeSubMenu,\n    openMenu,\n    closeMenu,\n    handleMenuItemClick,\n    handleSubMenuClick\n  })\n);\n\nprovide<SubMenuProvider>(`subMenu:${instance.uid}`, {\n  addSubMenu,\n  removeSubMenu,\n  mouseInChild: ref(false),\n  // 表示当前是第一级的 sub-menu\n  level: 0\n});\n\nonMounted(() => {\n  if (__props.mode === 'horizontal') {\n    new Menubar(instance.vnode.el!, ns.namespace.value);\n  }\n});\n\n// 触发展开菜单事件\nconst open = (index: string) => {\n  const { indexPath } = subMenus.value[index];\n  indexPath.forEach((i) => openMenu(i, indexPath));\n};\n\ndefineExpose({\n  open,\n  close: closeMenu,\n  handleResize\n});\n\ndefineRender(() => {\n  let slot: VNodeArrayChildren = slots.default?.() ?? [];\n  const vShowMore: VNode[] = [];\n\n  // 水平默认下执行\n  if (__props.mode === 'horizontal' && menu.value) {\n    const originalSlot = flattedChildren(slot) as VNodeArrayChildren;\n    const slotDefault = sliceIndex.value === -1 ? originalSlot : originalSlot.slice(0,\n      sliceIndex.value);\n\n    const slotMore = sliceIndex.value === -1 ? [] : originalSlot.slice(sliceIndex.value);\n\n    if (slotMore?.length && __props.ellipsis) {\n      slot = slotDefault;\n      vShowMore.push(\n        h(\n          SubMenu,\n          {\n            index: 'sub-menu-more',\n            class: nsSubMenu.e('hide-arrow')\n          },\n          {\n            title: () => h(\n              Icon,\n              {\n                icon: 'vi-item',\n                class: nsSubMenu.e('icon-more')\n              }\n            ),\n            default: () => slotMore\n          }\n        )\n      );\n    }\n  }\n\n  const ulStyle = useMenuCssVar(instance.props, 0);\n\n  const vMenu = h(\n    'ul',\n    {\n      key: String(__props.collapse),\n      role: 'menubar',\n      ref: menu,\n      style: ulStyle.value,\n      class: {\n        [ns.b()]: true,\n        [ns.m(__props.mode)]: true,\n        [ns.m('collapse')]: __props.collapse\n      }\n    },\n    [...slot, ...vShowMore]\n  );\n\n  if (__props.collapseTransition && __props.mode === 'vertical') {\n    return h(MenuCollapseTransition, () => vMenu);\n  }\n\n  return vMenu;\n});\n</script>\n"],"names":["ns","useNamespace","__default__","DO_defineComponent","slots","useSlots","instance","getCurrentInstance","_router","menu","ref","nsSubMenu","sliceIndex","openedMenus","__props","activeIndex","items","subMenus","isMenuPopup","computed","initMenu","activeItem","index","subMenu","openMenu","indexPath","emit","closeMenu","i","handleSubMenuClick","handleMenuItemClick","menuItem","route","routerResult","res","updateActiveIndex","val","itemsInData","item","calcSliceIndex","_a","moreItemWidth","paddingLeft","paddingRight","menuWidth","calcWidth","debounce","fn","wait","timmer","isFirstTimeRender","handleResize","callback","nextTick","watch","currentActive","value","resizeStopper","watchEffect","useResizeObserver","addSubMenu","removeSubMenu","addMenuItem","removeMenuItem","provide","reactive","onMounted","Menubar","expose","slot","vShowMore","originalSlot","flattedChildren","slotDefault","slotMore","h","SubMenu","Icon","ulStyle","useMenuCssVar","vMenu","MenuCollapseTransition"],"mappings":"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"}

package/es/packages/components/menu/style/css.mjs

@@ -0,0 +1,3 @@
+import "vft/theme-style/base.css";
+import "vft/theme-style/vft-menu.css";
+//# sourceMappingURL=css.mjs.map

package/es/packages/components/menu/style/css.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/es/packages/components/menu/style/index.mjs

@@ -0,0 +1,3 @@
+import "../../../theme-style/src/base.scss.mjs";
+import "../../../theme-style/src/menu.scss.mjs";
+//# sourceMappingURL=index.mjs.map

package/es/packages/components/menu/style/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/es/packages/components/menu/sub-menu.vue.mjs

@@ -0,0 +1,5 @@
+import f from "./sub-menu.vue2.mjs";
+export {
+  f as default
+};
+//# sourceMappingURL=sub-menu.vue.mjs.map

package/es/packages/components/menu/sub-menu.vue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sub-menu.vue.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/es/packages/components/menu/sub-menu.vue2.mjs

@@ -0,0 +1,234 @@
+import { defineComponent as Z, getCurrentInstance as Y, computed as n, inject as D, ref as x, reactive as _, watch as ee, provide as oe, onMounted as te, onBeforeUnmount as ne, useSlots as le, h as r, Fragment as ae, withDirectives as re, vShow as ue } from "vue";
+import "../divider/index.mjs";
+import { VftIcon as H } from "../icon/index.mjs";
+import "../avatar/index.mjs";
+import "../empty/index.mjs";
+import "../result/index.mjs";
+import "../exception/index.mjs";
+import "../tabs/index.mjs";
+import "../popper/index.mjs";
+import { VftCollapseTransition as se } from "../collapse-transition/index.mjs";
+import { VftTooltip as ie } from "../tooltip/index.mjs";
+import "../popover/index.mjs";
+import "./index.mjs";
+import { singleAttrToObj as ce, renderTNode as pe } from "@vft/utils";
+import "@vft/use";
+import "../multiple-tabs/index.mjs";
+import { useNamespace as I } from "../../hooks/use-namespace/index.mjs";
+import "@popperjs/core";
+import "lodash";
+import "../../hooks/use-z-index/index.mjs";
+import { useTimeoutFn as L } from "@vueuse/core";
+import "@vue/shared";
+import { throwError as U } from "../../utils/error.mjs";
+import de from "./use-menu.mjs";
+import { useMenuCssVar as ve } from "./use-menu-css-var.mjs";
+const S = (
+  /* hoist-static*/
+  I("sub-menu")
+), me = Z({
+  name: S.b()
+}), De = /* @__PURE__ */ Z({
+  ...me,
+  props: {
+    index: null,
+    showTimeout: {
+      default: 300
+    },
+    hideTimeout: {
+      default: 300
+    },
+    popperClass: null,
+    disabled: {
+      type: Boolean
+    },
+    popperAppendToBody: {
+      type: Boolean,
+      default: void 0
+    },
+    popperOffset: {
+      default: 6
+    },
+    expandIcon: {
+      default: {}
+    },
+    collapseIcon: {
+      default: {}
+    },
+    title: null,
+    icon: null,
+    showArrow: {
+      type: Boolean,
+      default: !0
+    },
+    toolTipCfg: null
+  },
+  setup(o, {
+    expose: q
+  }) {
+    const m = Y(), {
+      indexPath: h,
+      parentMenu: z
+    } = de(m, n(() => o.index)), s = I("menu"), i = I("sub-menu"), e = D("rootMenu");
+    e || U(S.b(), "can not inject root menu");
+    const u = D(`subMenu:${z.value.uid}`);
+    u || U(S.b(), "can not inject sub menu");
+    const T = x({});
+    let c;
+    const B = x(!1), G = x(), A = x(null), P = n(() => d.value === "horizontal" && M.value ? "bottom-start" : "right-start"), M = n(() => u.level === 0), w = n(() => o.popperAppendToBody === void 0 ? M.value : Boolean(o.popperAppendToBody)), J = n(() => e.props.collapse ? `${s.namespace.value}-zoom-in-left` : `${s.namespace.value}-zoom-in-top`), K = n(() => d.value === "horizontal" && M.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"]), p = n(() => e.openedMenus.includes(o.index)), f = n(() => {
+      let t = !1;
+      return Object.values(T.value).forEach((a) => {
+        a.active && (t = !0);
+      }), o.index === e.activeIndex && (t = !0), t;
+    }), j = n(() => e.props.backgroundColor || ""), E = n(() => e.props.activeTextColor || ""), F = n(() => e.props.textColor || ""), d = n(() => e.props.mode), C = _({
+      index: o.index,
+      indexPath: h,
+      active: f
+    }), $ = n(() => d.value !== "horizontal" ? {
+      color: F.value
+    } : {
+      borderBottomColor: f.value ? e.props.activeTextColor ? E.value : "" : "transparent",
+      color: f.value ? E.value : F.value
+    }), Q = () => {
+      var t, a, l;
+      return (l = (a = (t = A.value) == null ? void 0 : t.popperRef) == null ? void 0 : a.popperInstanceRef) == null ? void 0 : l.destroy();
+    }, W = (t) => {
+      t || Q();
+    }, O = () => {
+      e.props.menuTrigger === "hover" && e.props.mode === "horizontal" || e.props.collapse && e.props.mode === "vertical" || o.disabled || e.handleSubMenuClick({
+        index: o.index,
+        indexPath: h.value,
+        active: f.value
+      });
+    }, g = (t, a = o.showTimeout) => {
+      var l;
+      t.type !== "focus" && (e.props.menuTrigger === "click" && e.props.mode === "horizontal" || !e.props.collapse && e.props.mode === "vertical" || o.disabled || (u.mouseInChild.value = !0, c == null || c(), {
+        stop: c
+      } = L(() => {
+        e.openMenu(o.index, h.value);
+      }, a), w.value && ((l = z.value.vnode.el) == null || l.dispatchEvent(new MouseEvent("mouseenter")))));
+    }, y = (t = !1) => {
+      var a, l;
+      e.props.menuTrigger === "click" && e.props.mode === "horizontal" || !e.props.collapse && e.props.mode === "vertical" || (c == null || c(), u.mouseInChild.value = !1, {
+        stop: c
+      } = L(() => !B.value && e.closeMenu(o.index, h.value), o.hideTimeout), w.value && t && ((a = m.parent) == null ? void 0 : a.type.name) === "vft-sub-menu" && ((l = u.handleMouseleave) == null || l.call(u, !0)));
+    };
+    ee(() => e.props.collapse, (t) => W(Boolean(t)));
+    {
+      const t = (l) => {
+        T.value[l.index] = l;
+      }, a = (l) => {
+        delete T.value[l.index];
+      };
+      oe(`subMenu:${m.uid}`, {
+        addSubMenu: t,
+        removeSubMenu: a,
+        handleMouseleave: y,
+        mouseInChild: B,
+        level: u.level + 1
+      });
+    }
+    q({
+      opened: p
+    }), te(() => {
+      e.addSubMenu(C), u.addSubMenu(C);
+    }), ne(() => {
+      u.removeSubMenu(C), e.removeSubMenu(C);
+    });
+    const v = le(), X = n(() => d.value === "horizontal" && M.value || d.value === "vertical" && !e.props.collapse ? {
+      icon: "vi-arrow-down",
+      size: 20,
+      ...o.expandIcon
+    } : {
+      icon: "vi-arrow-right",
+      size: 18,
+      ...o.collapseIcon
+    }), V = n(() => ce(o.icon, "icon")), N = n(() => pe(m, "title"));
+    return () => {
+      var R;
+      const t = [(R = V.value) != null && R.icon ? r(H, {
+        ...V.value
+      }) : null, r("span", {
+        class: o.showArrow ? i.e("text") : "",
+        title: m.props.title
+      }, N.value), o.showArrow ? r(H, {
+        class: i.e("icon-arrow"),
+        ...X.value,
+        style: {
+          transform: p.value ? "rotateZ(180deg)" : "none"
+        }
+      }) : !1], a = ve(e.props, u.level + 1), l = e.isMenuPopup ? r(ie, {
+        ref: A,
+        visible: p.value,
+        effect: "light",
+        pure: !0,
+        offset: o.popperOffset,
+        showArrow: !1,
+        persistent: !0,
+        popperClass: o.popperClass,
+        placement: P.value,
+        teleported: w.value,
+        fallbackPlacements: K.value,
+        transition: J.value,
+        gpuAcceleration: !1,
+        ...o.toolTipCfg
+      }, {
+        content: () => {
+          var b;
+          return r("div", {
+            class: [s.m(d.value), s.m("popup-container"), o.popperClass],
+            onMouseenter: (k) => g(k, 100),
+            onMouseleave: () => y(!0),
+            onFocus: (k) => g(k, 100)
+          }, [r("ul", {
+            class: [s.b(), s.m("popup"), s.m(`popup-${P.value}`)],
+            style: a.value
+          }, [(b = v.default) == null ? void 0 : b.call(v)])]);
+        },
+        default: () => r("div", {
+          class: i.e("title"),
+          style: [$.value, {
+            backgroundColor: j.value
+          }],
+          onClick: O
+        }, t)
+      }) : (
+        /**
+         *  Fragment 碎片化节点，可以让 dom 没有根节点
+         *
+         *  以下是无需 tooltip 渲染的组件，通常是侧边栏没有折叠的时候
+         */
+        r(ae, {}, [N.value ? r("div", {
+          class: i.e("title"),
+          style: [$.value, {
+            backgroundColor: j.value
+          }],
+          ref: G,
+          onClick: O
+        }, t) : null, r(se, {}, {
+          default: () => {
+            var b;
+            return re(r("ul", {
+              role: "menu",
+              class: [s.b(), s.m("inline")],
+              style: a.value
+            }, [(b = v.default) == null ? void 0 : b.call(v)]), [[ue, p.value]]);
+          }
+        })])
+      );
+      return r("li", {
+        class: [i.b(), i.is("active", f.value), i.is("opened", p.value), i.is("disabled", o.disabled)],
+        role: "menuitem",
+        ariaHaspopup: !0,
+        ariaExpanded: p.value,
+        onMouseenter: g,
+        onMouseleave: () => y(!0),
+        onFocus: g
+      }, [l]);
+    };
+  }
+});
+export {
+  De as default
+};
+//# sourceMappingURL=sub-menu.vue2.mjs.map