ele-admin-plus 1.2.1-beta.3 → 1.2.1-beta.5

package/lib/ele-menus/index.cjs

@@ -1,20 +1,25 @@
 "use strict";
 const vue = require("vue");
 const elementPlus = require("element-plus");
-const EleTooltip = require("../ele-tooltip/index");
-const core = require("../utils/core");
 const icons = require("../icons");
+const core = require("../utils/core");
+const EleTooltip = require("../ele-tooltip/index");
+const MenuItems = require("./components/menu-items");
 const util = require("./util");
 const props = require("./props");
-const index = vue.defineComponent({
+const _sfc_main = vue.defineComponent({
   name: "EleMenus",
+  components: { ElMenu: elementPlus.ElMenu, ElSubMenu: elementPlus.ElSubMenu, ElIcon: elementPlus.ElIcon, EleTooltip, MenuItems },
   props: props.menusProps,
   emits: props.menusEmits,
-  setup(props$1, { slots, emit, expose }) {
-    const isWebkit = navigator.userAgent.includes("WebKit");
+  setup(props$1, { emit }) {
+    var _a, _b;
+    const isWebkit = (_b = (_a = navigator == null ? void 0 : navigator.userAgent) == null ? void 0 : _a.includes) == null ? void 0 : _b.call(_a, "WebKit");
     const menuRef = vue.ref(null);
     const ellipsisRef = vue.ref(null);
     const sliceIndex = vue.ref(-1);
+    const menuItems = vue.shallowRef([]);
+    const moreMenuItems = vue.shallowRef([]);
     const tooltipVirtualRef = vue.ref();
     const tooltipContent = vue.ref("");
     const tooltipVisible = vue.ref(false);
@@ -23,54 +28,26 @@ const index = vue.defineComponent({
     const collapseTooltipDisabled = vue.computed(
       () => isCompact.value ? !props$1.collapse : props$1.tooltipDisabled
     );
-    const { observe, unobserve, computedEllipsis } = util.useMenuEllipsis({
-      getMenuEl: () => {
-        var _a;
-        return (_a = menuRef.value) == null ? void 0 : _a.$el;
-      },
-      getMoreEl: () => {
-        var _a;
-        return (_a = ellipsisRef.value) == null ? void 0 : _a.$el;
-      },
-      onEllipsis: (index2) => {
-        if (sliceIndex.value !== index2) {
-          sliceIndex.value = index2;
-        }
-      }
-    });
-    vue.onMounted(() => {
-      var _a;
-      if (props$1.ellipsis && isHorizontal.value && ((_a = menuRef.value) == null ? void 0 : _a.$el)) {
-        computedEllipsis();
-        observe();
+    const menuProps = vue.computed(() => core.pick(props$1, props.menuPropKeys));
+    const open = (index2) => {
+      if (menuRef.value) {
+        menuRef.value.open(index2);
       }
-    });
-    vue.watch(
-      [
-        () => props$1.ellipsis,
-        isHorizontal,
-        () => {
-          var _a;
-          return (_a = menuRef.value) == null ? void 0 : _a.$el;
-        },
-        () => props$1.items
-      ],
-      () => {
-        var _a;
-        if (props$1.ellipsis && isHorizontal.value && ((_a = menuRef.value) == null ? void 0 : _a.$el)) {
-          observe();
-        } else {
-          unobserve();
-          sliceIndex.value = -1;
-        }
+    };
+    const close = (index2) => {
+      if (menuRef.value) {
+        menuRef.value.open(index2);
       }
-    );
+    };
+    const hideTooltip = () => {
+      tooltipVisible.value = false;
+    };
     const triggerTooltip = (e) => {
-      var _a;
+      var _a2;
       if (props$1.textEllipsisTooltip) {
-        const itemEl = (_a = e.currentTarget) == null ? void 0 : _a.parentNode;
+        const itemEl = (_a2 = e.currentTarget) == null ? void 0 : _a2.parentNode;
         if (itemEl) {
-          const titleEl = itemEl.querySelector(`.${util.titleClass}`);
+          const titleEl = itemEl.querySelector(".ele-menu-title");
           const text = titleEl == null ? void 0 : titleEl.innerText;
           if (text && core.contentIsEllipsis(titleEl, "horizontal")) {
             tooltipVirtualRef.value = itemEl;
@@ -82,32 +59,14 @@ const index = vue.defineComponent({
       }
       hideTooltip();
     };
-    const hideTooltip = () => {
-      tooltipVisible.value = false;
+    const handleOpen = (index2, indexPath) => {
+      emit("open", index2, indexPath);
     };
-    const open = (index2) => {
-      if (menuRef.value) {
-        menuRef.value.open(index2);
-      }
+    const handleClose = (index2, indexPath) => {
+      emit("close", index2, indexPath);
     };
-    const close = (index2) => {
-      if (menuRef.value) {
-        menuRef.value.open(index2);
-      }
-    };
-    const scrollToActive = () => {
-      var _a;
-      const menuEl = (_a = menuRef.value) == null ? void 0 : _a.$el;
-      if (menuEl) {
-        const el = menuEl.querySelector(".el-menu-item.is-active") || menuEl.querySelector(".el-sub-menu.is-active");
-        if (el) {
-          if (typeof el["scrollIntoViewIfNeeded"] === "function") {
-            el.scrollIntoViewIfNeeded(true);
-          } else {
-            el.scrollIntoView({ behavior: "smooth", block: "center" });
-          }
-        }
-      }
+    const handleSelect = (index2, indexPath, item, routerResult) => {
+      emit("select", index2, indexPath, item, routerResult);
     };
     const handleItemClick = (item, e) => {
       emit("itemClick", item, e);
@@ -128,146 +87,257 @@ const index = vue.defineComponent({
       hideTooltip();
       emit("parentMouseleave", item, e);
     };
-    const exposeValue = { menuRef, scrollToActive, open, close };
-    expose(exposeValue);
-    return () => {
-      return vue.h(
-        elementPlus.ElMenu,
-        {
-          ...core.pick(props$1, props.menuPropKeys),
-          ref: menuRef,
-          ellipsis: false,
-          mode: isCompact.value ? "vertical" : props$1.mode,
-          collapse: isCompact.value ? true : props$1.collapse,
-          class: [
-            "ele-menu",
-            { "ele-menu-dark": props$1.theme === "dark" },
-            { "is-night": props$1.theme === "dark" },
-            { "ele-menu-colorful": props$1.colorful },
-            { "is-colorful": props$1.colorful },
-            { "is-compact": isCompact.value },
-            { "is-compact-collapse": isCompact.value && props$1.collapse }
-          ],
-          onOpen: (index2, indexPath) => {
-            emit("open", index2, indexPath);
-          },
-          onClose: (index2, indexPath) => {
-            emit("close", index2, indexPath);
-          },
-          onSelect: (index2, indexPath, item, routerResult) => {
-            emit("select", index2, indexPath, item, routerResult);
+    const scrollToActive = () => {
+      var _a2;
+      const menuEl = (_a2 = menuRef.value) == null ? void 0 : _a2.$el;
+      if (menuEl) {
+        const el = menuEl.querySelector(".el-menu-item.is-active") || menuEl.querySelector(".el-sub-menu.is-active");
+        if (el) {
+          if (typeof el["scrollIntoViewIfNeeded"] === "function") {
+            el.scrollIntoViewIfNeeded(true);
+          } else {
+            el.scrollIntoView({ behavior: "smooth", block: "center" });
           }
-        },
+        }
+      }
+    };
+    const { observe, unobserve, computedEllipsis } = util.useMenuEllipsis({
+      getMenuEl: () => {
+        var _a2;
+        return (_a2 = menuRef.value) == null ? void 0 : _a2.$el;
+      },
+      getMoreEl: () => {
+        var _a2;
+        return (_a2 = ellipsisRef.value) == null ? void 0 : _a2.$el;
+      },
+      onEllipsis: (index2) => {
+        if (sliceIndex.value !== index2) {
+          sliceIndex.value = index2;
+        }
+      }
+    });
+    vue.onMounted(() => {
+      var _a2;
+      if (props$1.ellipsis && isHorizontal.value && ((_a2 = menuRef.value) == null ? void 0 : _a2.$el)) {
+        computedEllipsis();
+        observe();
+      }
+    });
+    vue.watch(
+      [
+        () => props$1.ellipsis,
+        isHorizontal,
         () => {
-          const { items, moreItems } = util.getMenuItems(
-            props$1.items,
-            sliceIndex.value,
-            isHorizontal.value
-          );
-          const nodes = util.renderItems(
-            items,
-            slots.icon,
-            slots.title,
-            collapseTooltipDisabled.value,
-            props$1.theme,
-            props$1.popupTheme,
-            props$1.colorful,
-            props$1.popupColorful,
-            props$1.firstPopperClass,
-            true,
-            handleItemClick,
-            handleItemMouseenter,
-            handleItemMouseleave,
-            isWebkit,
-            handleParentMouseenter,
-            handleParentMouseleave
-          );
-          if (moreItems) {
-            const ellipsisProps = props$1.ellipsisProps || {};
-            const popperClass = util.getPopperClass(
-              ellipsisProps.popperClass,
-              props$1.theme,
-              props$1.popupTheme,
-              props$1.colorful,
-              props$1.popupColorful,
-              props$1.firstPopperClass,
-              true,
-              isWebkit
-            );
-            nodes.push(
-              vue.h(
-                elementPlus.ElSubMenu,
-                {
-                  teleported: true,
-                  class: util.ellipsisClass,
-                  key: "sub-menu-more",
-                  ...ellipsisProps,
-                  index: "sub-menu-more",
-                  ref: ellipsisRef,
-                  popperClass
-                },
-                {
-                  default: () => {
-                    return util.renderItems(
-                      moreItems,
-                      slots.icon,
-                      slots.title,
-                      collapseTooltipDisabled.value,
-                      props$1.theme,
-                      props$1.popupTheme,
-                      props$1.colorful,
-                      props$1.popupColorful,
-                      props$1.firstPopperClass,
-                      false,
-                      handleItemClick,
-                      handleItemMouseenter,
-                      handleItemMouseleave,
-                      isWebkit,
-                      handleParentMouseenter,
-                      handleParentMouseleave
-                    );
-                  },
-                  title: () => {
-                    return vue.h(elementPlus.ElIcon, ellipsisProps.iconProps || {}, () => {
-                      return vue.h(
-                        ellipsisProps.icon ?? icons.EllipsisOutlined,
-                        { style: ellipsisProps.iconStyle }
-                      );
-                    });
-                  }
-                }
-              )
-            );
-          }
-          if (props$1.textEllipsisTooltip) {
-            nodes.push(
-              vue.h(EleTooltip, {
-                trigger: "click",
-                placement: "right",
-                fallbackPlacements: [
-                  "top-end",
-                  "top",
-                  "top-start",
-                  "bottom-end",
-                  "bottom",
-                  "bottom-start",
-                  "left"
-                ],
-                persistent: false,
-                enterable: false,
-                triggerKeys: [],
-                ...props$1.textEllipsisTooltip === true ? {} : props$1.textEllipsisTooltip,
-                virtualTriggering: true,
-                virtualRef: tooltipVirtualRef.value,
-                content: tooltipContent.value,
-                visible: tooltipVisible.value
-              })
-            );
-          }
-          return nodes;
+          var _a2;
+          return (_a2 = menuRef.value) == null ? void 0 : _a2.$el;
+        },
+        () => props$1.items
+      ],
+      () => {
+        var _a2;
+        if (props$1.ellipsis && isHorizontal.value && ((_a2 = menuRef.value) == null ? void 0 : _a2.$el)) {
+          observe();
+          return;
         }
-      );
+        unobserve();
+        sliceIndex.value = -1;
+      }
+    );
+    vue.watch(
+      [() => props$1.items, sliceIndex, isHorizontal],
+      () => {
+        const { items, moreItems } = util.getMenuItems(
+          props$1.items,
+          sliceIndex.value,
+          isHorizontal.value
+        );
+        menuItems.value = items;
+        moreMenuItems.value = moreItems;
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    );
+    return {
+      EllipsisOutlined: icons.EllipsisOutlined,
+      getPopperClass: util.getPopperClass,
+      isWebkit,
+      menuRef,
+      ellipsisRef,
+      menuItems,
+      moreMenuItems,
+      tooltipVirtualRef,
+      tooltipContent,
+      tooltipVisible,
+      isCompact,
+      collapseTooltipDisabled,
+      menuProps,
+      open,
+      close,
+      handleOpen,
+      handleClose,
+      handleSelect,
+      handleItemClick,
+      handleItemMouseenter,
+      handleItemMouseleave,
+      handleParentMouseenter,
+      handleParentMouseleave,
+      scrollToActive
     };
   }
 });
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_MenuItems = vue.resolveComponent("MenuItems");
+  const _component_ElIcon = vue.resolveComponent("ElIcon");
+  const _component_ElSubMenu = vue.resolveComponent("ElSubMenu");
+  const _component_EleTooltip = vue.resolveComponent("EleTooltip");
+  const _component_ElMenu = vue.resolveComponent("ElMenu");
+  return vue.openBlock(), vue.createBlock(_component_ElMenu, vue.mergeProps(_ctx.menuProps, {
+    ref: "menuRef",
+    ellipsis: false,
+    mode: _ctx.isCompact ? "vertical" : _ctx.mode,
+    collapse: _ctx.isCompact ? true : _ctx.collapse,
+    class: [
+      "ele-menu",
+      { "ele-menu-dark": _ctx.theme === "dark" },
+      { "is-night": _ctx.theme === "dark" },
+      { "ele-menu-colorful": _ctx.colorful },
+      { "is-colorful": _ctx.colorful },
+      { "is-compact": _ctx.isCompact },
+      { "is-compact-collapse": _ctx.isCompact && _ctx.collapse }
+    ],
+    onOpen: _ctx.handleOpen,
+    onClose: _ctx.handleClose,
+    onSelect: _ctx.handleSelect
+  }), {
+    default: vue.withCtx(() => {
+      var _a;
+      return [
+        _ctx.menuItems && _ctx.menuItems.length ? (vue.openBlock(), vue.createBlock(_component_MenuItems, {
+          key: 0,
+          items: _ctx.menuItems,
+          first: true,
+          tipDisabled: _ctx.collapseTooltipDisabled,
+          parentIsGroup: false,
+          theme: _ctx.theme,
+          popTheme: _ctx.popupTheme,
+          colorful: _ctx.colorful,
+          popupColorful: _ctx.popupColorful,
+          firstPopClass: _ctx.firstPopperClass,
+          webkit: _ctx.isWebkit,
+          onItemClick: _ctx.handleItemClick,
+          onItemMouseenter: _ctx.handleItemMouseenter,
+          onItemMouseleave: _ctx.handleItemMouseleave,
+          onParentMouseenter: _ctx.handleParentMouseenter,
+          onParentMouseleave: _ctx.handleParentMouseleave
+        }, vue.createSlots({ _: 2 }, [
+          vue.renderList(Object.keys(_ctx.$slots), (name) => {
+            return {
+              name,
+              fn: vue.withCtx((slotProps) => [
+                vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+              ])
+            };
+          })
+        ]), 1032, ["items", "tipDisabled", "theme", "popTheme", "colorful", "popupColorful", "firstPopClass", "webkit", "onItemClick", "onItemMouseenter", "onItemMouseleave", "onParentMouseenter", "onParentMouseleave"])) : vue.createCommentVNode("", true),
+        _ctx.moreMenuItems && _ctx.moreMenuItems.length ? (vue.openBlock(), vue.createBlock(_component_ElSubMenu, vue.mergeProps({
+          key: "sub-menu-more",
+          teleported: true
+        }, _ctx.ellipsisProps || {}, {
+          ref: "ellipsisRef",
+          index: "sub-menu-more",
+          popperClass: _ctx.getPopperClass(
+            (_a = _ctx.ellipsisProps) == null ? void 0 : _a.popperClass,
+            _ctx.theme,
+            _ctx.popupTheme,
+            _ctx.colorful,
+            _ctx.popupColorful,
+            _ctx.firstPopperClass,
+            true,
+            _ctx.isWebkit
+          ),
+          class: "ele-sub-menu-ellipsis"
+        }), {
+          title: vue.withCtx(() => {
+            var _a2;
+            return [
+              vue.createVNode(_component_ElIcon, vue.normalizeProps(vue.guardReactiveProps(((_a2 = _ctx.ellipsisProps) == null ? void 0 : _a2.iconProps) || {})), {
+                default: vue.withCtx(() => {
+                  var _a3, _b;
+                  return [
+                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(((_a3 = _ctx.ellipsisProps) == null ? void 0 : _a3.icon) ?? _ctx.EllipsisOutlined), {
+                      style: vue.normalizeStyle((_b = _ctx.ellipsisProps) == null ? void 0 : _b.iconStyle)
+                    }, null, 8, ["style"]))
+                  ];
+                }),
+                _: 1
+              }, 16)
+            ];
+          }),
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_MenuItems, {
+              items: _ctx.moreMenuItems,
+              first: false,
+              tipDisabled: _ctx.collapseTooltipDisabled,
+              parentIsGroup: false,
+              theme: _ctx.theme,
+              popTheme: _ctx.popupTheme,
+              colorful: _ctx.colorful,
+              popupColorful: _ctx.popupColorful,
+              firstPopClass: _ctx.firstPopperClass,
+              webkit: _ctx.isWebkit,
+              onItemClick: _ctx.handleItemClick,
+              onItemMouseenter: _ctx.handleItemMouseenter,
+              onItemMouseleave: _ctx.handleItemMouseleave,
+              onParentMouseenter: _ctx.handleParentMouseenter,
+              onParentMouseleave: _ctx.handleParentMouseleave
+            }, vue.createSlots({ _: 2 }, [
+              vue.renderList(Object.keys(_ctx.$slots), (name) => {
+                return {
+                  name,
+                  fn: vue.withCtx((slotProps) => [
+                    vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                  ])
+                };
+              })
+            ]), 1032, ["items", "tipDisabled", "theme", "popTheme", "colorful", "popupColorful", "firstPopClass", "webkit", "onItemClick", "onItemMouseenter", "onItemMouseleave", "onParentMouseenter", "onParentMouseleave"])
+          ]),
+          _: 3
+        }, 16, ["popperClass"])) : vue.createCommentVNode("", true),
+        _ctx.textEllipsisTooltip ? (vue.openBlock(), vue.createBlock(_component_EleTooltip, vue.mergeProps({
+          key: 2,
+          trigger: "click",
+          placement: "right",
+          fallbackPlacements: [
+            "top-end",
+            "top",
+            "top-start",
+            "bottom-end",
+            "bottom",
+            "bottom-start",
+            "left"
+          ],
+          persistent: false,
+          enterable: false,
+          triggerKeys: []
+        }, _ctx.textEllipsisTooltip === true ? {} : _ctx.textEllipsisTooltip, {
+          virtualTriggering: true,
+          virtualRef: _ctx.tooltipVirtualRef,
+          content: _ctx.tooltipContent,
+          visible: _ctx.tooltipVisible
+        }), null, 16, ["virtualRef", "content", "visible"])) : vue.createCommentVNode("", true)
+      ];
+    }),
+    _: 3
+  }, 16, ["mode", "collapse", "class", "onOpen", "onClose", "onSelect"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 module.exports = index;