vft 0.0.375 → 0.0.376

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

@@ -1,23 +1,22 @@
-import { defineComponent, useSlots, getCurrentInstance, ref, computed, watch, watchEffect, provide, reactive, onMounted, h, nextTick } from "vue";
-import { isNullOrUndefined, isMobile } from "@vft/utils";
-import { VftIcon } from "../icon/index.js";
-import { useResizeObserver } from "@vueuse/core";
+import { defineComponent as A, useSlots as X, getCurrentInstance as Y, ref as a, computed as Z, watch as I, watchEffect as _, provide as N, reactive as ee, onMounted as te, h as g, nextTick as ne } from "vue";
+import { isNullOrUndefined as R, isMobile as le } from "@vft/utils";
+import { VftIcon as oe } from "../icon/index.js";
+import { useResizeObserver as ue } from "@vueuse/core";
 import "../config-provider/hooks/use-global-config.js";
 import "lodash-es";
-import { flattedChildren } from "../../utils/vue/vnode.js";
-import { useNamespace } from "../../hooks/use-namespace/index.js";
+import { flattedChildren as se } from "../../utils/vue/vnode.js";
+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 MenuCollapseTransition from "./menu-collapse-transition.vue.js";
-import _sfc_main$1 from "./sub-menu.vue2.js";
-import { useMenuCssVar } from "./use-menu-css-var.js";
-import Menu from "./utils/menu-bar.js";
-const __default__ = defineComponent({
+import ae from "./menu-collapse-transition.vue.js";
+import ie from "./sub-menu.vue2.js";
+import { useMenuCssVar as ce } from "./use-menu-css-var.js";
+import re from "./utils/menu-bar.js";
+const de = A({
   name: "vft-menu"
-});
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
+}), ke = /* @__PURE__ */ A({
+  ...de,
   props: {
     mode: { default: "vertical" },
     defaultActive: { default: "" },
@@ -26,282 +25,188 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     router: { type: Boolean },
     menuTrigger: { default: "hover" },
     collapse: { type: Boolean },
-    collapseTransition: { type: Boolean, default: true },
-    ellipsis: { type: Boolean, default: true },
+    collapseTransition: { type: Boolean, default: !0 },
+    ellipsis: { type: Boolean, default: !0 },
     horizontalMenuProps: {},
-    persistent: { type: Boolean, default: true }
+    persistent: { type: Boolean, default: !0 }
   },
   emits: ["update:collapse", "sub-menu-click", "select", "close", "open"],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const emit = __emit;
-    const ns = useNamespace("menu");
-    const slots = useSlots();
-    const instance = getCurrentInstance();
-    const _router = instance.appContext.config.globalProperties.$router;
-    const menu = ref();
-    const nsSubMenu = useNamespace("sub-menu");
-    const sliceIndex = ref(-1);
-    const openedMenus = ref(
-      __props.defaultOpeneds && !__props.collapse ? __props.defaultOpeneds.slice(0) : []
-    );
-    const activeIndex = ref(__props.defaultActive);
-    const items = ref({});
-    const subMenus = ref({});
-    const isMenuPopup = computed(() => {
-      return __props.mode === "horizontal" || __props.mode === "vertical" && __props.collapse;
-    });
-    const initMenu = () => {
-      const activeItem = activeIndex.value && items.value[activeIndex.value];
-      if (!activeItem || __props.mode === "horizontal" || __props.collapse) return;
-      const indexPath = activeItem.indexPath;
-      indexPath.forEach((index) => {
-        const subMenu = subMenus.value[index];
-        subMenu && openMenu(index, subMenu.indexPath);
+  setup(n, { expose: E, emit: W }) {
+    const v = W, M = w("menu"), V = X(), p = Y(), y = p.appContext.config.globalProperties.$router, i = a(), z = w("sub-menu"), m = a(-1), u = a(
+      n.defaultOpeneds && !n.collapse ? n.defaultOpeneds.slice(0) : []
+    ), s = a(n.defaultActive), r = a({}), h = a({}), $ = Z(() => n.mode === "horizontal" || n.mode === "vertical" && n.collapse), q = () => {
+      const e = s.value && r.value[s.value];
+      if (!e || n.mode === "horizontal" || n.collapse) return;
+      e.indexPath.forEach((l) => {
+        const o = h.value[l];
+        o && b(l, o.indexPath);
       });
-    };
-    const openMenu = (index, indexPath, e) => {
-      if (openedMenus.value.includes(index)) return;
-      if (__props.uniqueOpened) {
-        openedMenus.value = openedMenus.value.filter(
-          (index2) => indexPath.includes(index2)
-        );
-      }
-      openedMenus.value.push(index);
-      emit("open", { index, indexPath, e });
-    };
-    const closeMenu = (index, indexPath, e) => {
-      const i = openedMenus.value.indexOf(index);
-      if (i !== -1) {
-        openedMenus.value.splice(i, 1);
-      }
-      emit("close", { index, indexPath, e });
-    };
-    const handleSubMenuClick = ({
+    }, b = (e, t, l) => {
+      u.value.includes(e) || (n.uniqueOpened && (u.value = u.value.filter(
+        (o) => t.includes(o)
+      )), u.value.push(e), v("open", { index: e, indexPath: t, e: l }));
+    }, x = (e, t, l) => {
+      const o = u.value.indexOf(e);
+      o !== -1 && u.value.splice(o, 1), v("close", { index: e, indexPath: t, e: l });
+    }, D = ({
       e,
-      index,
-      indexPath,
-      isFirstLevel = false
+      index: t,
+      indexPath: l,
+      isFirstLevel: o = !1
     }) => {
-      if (!isFirstLevel) {
-        const isOpened = openedMenus.value.includes(index);
-        if (isOpened) {
-          closeMenu(index, indexPath, e);
-        } else {
-          openMenu(index, indexPath, e);
-        }
-      }
-      emit("sub-menu-click", { e, index, indexPath });
-    };
-    const handleMenuItemClick = (menuItem) => {
-      if (__props.mode === "horizontal" || __props.collapse) {
-        openedMenus.value = [];
-      }
-      const { index, indexPath } = menuItem;
-      if (isNullOrUndefined(index) || isNullOrUndefined(indexPath)) return;
-      if (__props.router && _router) {
-        const route = menuItem.route || index;
-        const routerResult = _router.push(route).then((res) => {
-          if (!res) activeIndex.value = index;
-          return res;
-        });
-        emit("select", menuItem, routerResult);
-      } else {
-        activeIndex.value = index;
-        emit("select", menuItem);
-      }
-      if (isMobile()) {
-        setTimeout(() => {
-          openedMenus.value = [];
+      o || (u.value.includes(t) ? x(t, l, e) : b(t, l, e)), v("sub-menu-click", { e, index: t, indexPath: l });
+    }, L = (e) => {
+      (n.mode === "horizontal" || n.collapse) && (u.value = []);
+      const { index: t, indexPath: l } = e;
+      if (!(R(t) || R(l))) {
+        if (n.router && y) {
+          const o = e.route || t, c = y.push(o).then((d) => (d || (s.value = t), d));
+          v("select", e, c);
+        } else
+          s.value = t, v("select", e);
+        le() && setTimeout(() => {
+          u.value = [];
         }, 100);
       }
-    };
-    const updateActiveIndex = (val) => {
-      const itemsInData = items.value;
-      const item = itemsInData[val] || activeIndex.value && itemsInData[activeIndex.value] || itemsInData[__props.defaultActive];
-      if (item) {
-        activeIndex.value = item.index;
-      } else {
-        activeIndex.value = val;
-      }
-    };
-    const calcSliceIndex = () => {
-      if (!menu.value) return -1;
-      const items2 = Array.from(menu.value?.childNodes ?? []).filter(
-        (item) => item.nodeName !== "#text" || item.nodeValue
-      );
-      const moreItemWidth = 64;
-      const paddingLeft = Number.parseInt(
-        getComputedStyle(menu.value).paddingLeft,
+    }, F = (e) => {
+      const t = r.value, l = t[e] || s.value && t[s.value] || t[n.defaultActive];
+      l ? s.value = l.index : s.value = e;
+    }, U = () => {
+      if (!i.value) return -1;
+      const e = Array.from(i.value?.childNodes ?? []).filter(
+        (S) => S.nodeName !== "#text" || S.nodeValue
+      ), t = 64, l = Number.parseInt(
+        getComputedStyle(i.value).paddingLeft,
         10
-      );
-      const paddingRight = Number.parseInt(
-        getComputedStyle(menu.value).paddingRight,
+      ), o = Number.parseInt(
+        getComputedStyle(i.value).paddingRight,
         10
-      );
-      const menuWidth = menu.value.clientWidth - paddingLeft - paddingRight;
-      let calcWidth = 0;
-      let sliceIndex2 = 0;
-      items2.forEach((item, index) => {
-        calcWidth += item.offsetWidth || 0;
-        if (calcWidth <= menuWidth - moreItemWidth) {
-          sliceIndex2 = index + 1;
-        }
-      });
-      return sliceIndex2 === items2.length ? -1 : sliceIndex2;
-    };
-    const debounce = (fn, wait = 33.34) => {
-      let timmer;
+      ), c = i.value.clientWidth - l - o;
+      let d = 0, f = 0;
+      return e.forEach((S, Q) => {
+        d += S.offsetWidth || 0, d <= c - t && (f = Q + 1);
+      }), f === e.length ? -1 : f;
+    }, j = (e, t = 33.34) => {
+      let l;
       return () => {
-        timmer && clearTimeout(timmer);
-        timmer = setTimeout(() => {
-          fn();
-        }, wait);
+        l && clearTimeout(l), l = setTimeout(() => {
+          e();
+        }, t);
       };
     };
-    let isFirstTimeRender = true;
-    const handleResize = () => {
-      const callback = () => {
-        sliceIndex.value = -1;
-        nextTick(() => {
-          sliceIndex.value = calcSliceIndex();
+    let C = !0;
+    const T = () => {
+      const e = () => {
+        m.value = -1, ne(() => {
+          m.value = U();
         });
       };
-      isFirstTimeRender ? callback() : debounce(callback)();
-      isFirstTimeRender = false;
+      C ? e() : j(e)(), C = !1;
     };
-    watch(
-      () => __props.defaultActive,
-      (currentActive) => {
-        if (!items.value[currentActive]) {
-          activeIndex.value = "";
-        }
-        updateActiveIndex(currentActive);
+    I(
+      () => n.defaultActive,
+      (e) => {
+        r.value[e] || (s.value = ""), F(e);
       }
-    );
-    watch(
-      () => __props.collapse,
-      (value) => {
-        if (value) openedMenus.value = [];
+    ), I(
+      () => n.collapse,
+      (e) => {
+        e && (u.value = []);
       }
-    );
-    watch(items.value, initMenu);
-    let resizeStopper;
-    watchEffect(() => {
-      if (__props.mode === "horizontal" && __props.ellipsis)
-        resizeStopper = useResizeObserver(menu, handleResize).stop;
-      else resizeStopper?.();
+    ), I(r.value, q);
+    let O;
+    _(() => {
+      n.mode === "horizontal" && n.ellipsis ? O = ue(i, T).stop : O?.();
     });
-    const addSubMenu = (item) => {
-      subMenus.value[item.index] = item;
-    };
-    const removeSubMenu = (item) => {
-      delete subMenus.value[item.index];
-    };
-    const addMenuItem = (item) => {
-      items.value[item.index] = item;
-    };
-    const removeMenuItem = (item) => {
-      delete items.value[item.index];
-    };
-    const inSubMenu = ref(false);
-    const inSubMenuMouseEnterTimer = ref();
-    const inSubMenuMouseleaveTimer = ref();
-    provide(
+    const k = (e) => {
+      h.value[e.index] = e;
+    }, P = (e) => {
+      delete h.value[e.index];
+    }, G = (e) => {
+      r.value[e.index] = e;
+    }, H = (e) => {
+      delete r.value[e.index];
+    }, B = a(!1), J = a(), K = a();
+    return N(
       "rootMenu",
-      reactive({
-        props: instance.props,
-        openedMenus,
-        items,
-        subMenus,
-        activeIndex,
-        isMenuPopup,
-        inSubMenu,
-        inSubMenuMouseEnterTimer,
-        inSubMenuMouseleaveTimer,
-        addMenuItem,
-        removeMenuItem,
-        addSubMenu,
-        removeSubMenu,
-        openMenu,
-        closeMenu,
-        handleMenuItemClick,
-        handleSubMenuClick
+      ee({
+        props: p.props,
+        openedMenus: u,
+        items: r,
+        subMenus: h,
+        activeIndex: s,
+        isMenuPopup: $,
+        inSubMenu: B,
+        inSubMenuMouseEnterTimer: J,
+        inSubMenuMouseleaveTimer: K,
+        addMenuItem: G,
+        removeMenuItem: H,
+        addSubMenu: k,
+        removeSubMenu: P,
+        openMenu: b,
+        closeMenu: x,
+        handleMenuItemClick: L,
+        handleSubMenuClick: D
       })
-    );
-    provide(`subMenu:${instance.uid}`, {
-      addSubMenu,
-      removeSubMenu,
-      mouseInChild: ref(false),
+    ), N(`subMenu:${p.uid}`, {
+      addSubMenu: k,
+      removeSubMenu: P,
+      mouseInChild: a(!1),
       // 表示当前是第一级的 sub-menu
       level: 0
-    });
-    onMounted(() => {
-      if (__props.mode === "horizontal") {
-        new Menu(instance.vnode.el, ns.namespace.value);
+    }), te(() => {
+      n.mode === "horizontal" && new re(p.vnode.el, M.namespace.value);
+    }), E({
+      open: (e) => {
+        const { indexPath: t } = h.value[e];
+        t.forEach((l) => b(l, t));
+      },
+      close: x,
+      handleResize: T,
+      menu: i,
+      inSubMenu: B
+    }), () => {
+      let e = V.default?.() ?? [];
+      const t = [];
+      if (n.mode === "horizontal" && i.value) {
+        const c = se(e), d = m.value === -1 ? c : c.slice(0, m.value), f = m.value === -1 ? [] : c.slice(m.value);
+        f?.length && n.ellipsis && (e = d, t.push(
+          g(
+            ie,
+            {
+              index: "sub-menu-more",
+              class: z.e("hide-arrow"),
+              ...n.horizontalMenuProps
+            },
+            {
+              title: () => g(oe, {
+                icon: "icon-menu-line",
+                class: z.e("icon-more")
+              }),
+              default: () => f
+            }
+          )
+        ));
       }
-    });
-    const openSubMenu = (index) => {
-      const { indexPath } = subMenus.value[index];
-      indexPath.forEach((i) => openMenu(i, indexPath));
-    };
-    __expose({
-      open: openSubMenu,
-      close: closeMenu,
-      handleResize,
-      menu,
-      inSubMenu
-    });
-    return () => {
-      let slot = slots.default?.() ?? [];
-      const vShowMore = [];
-      if (__props.mode === "horizontal" && menu.value) {
-        const originalSlot = flattedChildren(slot);
-        const slotDefault = sliceIndex.value === -1 ? originalSlot : originalSlot.slice(0, sliceIndex.value);
-        const slotMore = sliceIndex.value === -1 ? [] : originalSlot.slice(sliceIndex.value);
-        if (slotMore?.length && __props.ellipsis) {
-          slot = slotDefault;
-          vShowMore.push(
-            h(
-              _sfc_main$1,
-              {
-                index: "sub-menu-more",
-                class: nsSubMenu.e("hide-arrow"),
-                ...__props.horizontalMenuProps
-              },
-              {
-                title: () => h(VftIcon, {
-                  icon: "icon-menu-line",
-                  class: nsSubMenu.e("icon-more")
-                }),
-                default: () => slotMore
-              }
-            )
-          );
-        }
-      }
-      const ulStyle = useMenuCssVar(instance.props, 0);
-      const vMenu = h(
+      const l = ce(p.props, 0), o = g(
         "ul",
         {
-          key: String(__props.collapse),
+          key: String(n.collapse),
           role: "menubar",
-          ref: menu,
-          style: ulStyle.value,
+          ref: i,
+          style: l.value,
           class: {
-            [ns.b()]: true,
-            [ns.m(__props.mode)]: true,
-            [ns.m("collapse")]: __props.collapse
+            [M.b()]: !0,
+            [M.m(n.mode)]: !0,
+            [M.m("collapse")]: n.collapse
           }
         },
-        [...slot, ...vShowMore]
+        [...e, ...t]
       );
-      if (__props.collapseTransition && __props.mode === "vertical") {
-        return h(MenuCollapseTransition, () => vMenu);
-      }
-      return vMenu;
+      return n.collapseTransition && n.mode === "vertical" ? g(ae, () => o) : o;
     };
   }
 });
 export {
-  _sfc_main as default
+  ke as default
 };

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

@@ -1,4 +1,4 @@
-import _sfc_main from "./sub-menu.vue2.js";
+import f from "./sub-menu.vue2.js";
 export {
-  _sfc_main as default
+  f as default
 };