ele-admin-plus 1.0.2 → 1.1.0

package/lib/ele-menus/index.js

@@ -1,172 +1,62 @@
 "use strict";
 const vue = require("vue");
-const vueRouter = require("vue-router");
 const elementPlus = require("element-plus");
+const receiver = require("../ele-config-provider/receiver");
 const core = require("../utils/core");
 const icons = require("../icons");
+const util = require("./util");
 const props = require("./props");
 const index = vue.defineComponent({
   name: "EleMenus",
   props: props.menusProps,
   emits: elementPlus.menuEmits,
   setup(props$1, { slots, emit, expose }) {
+    const { authenticated } = receiver.useLicense();
     const menuRef = vue.ref(null);
-    const getLinkNode = (path) => {
-      if (!path) {
-        return;
-      }
-      if (core.isExternalLink(path)) {
-        return vue.h("a", {
-          href: path,
-          target: "_blank",
-          class: "ele-menu-link",
-          onClick: (e) => e.stopPropagation()
-        });
-      }
-      return vue.h(vueRouter.RouterLink, { to: path, class: "ele-menu-link" });
-    };
-    const getNodes = (icons2, titles, badge, link) => {
-      const nodes = [];
-      if (icons2) {
-        icons2.forEach((t) => {
-          nodes.push(t);
-        });
-      }
-      if (titles) {
-        titles.forEach((t) => {
-          nodes.push(t);
-        });
-      }
-      if (badge) {
-        nodes.push(badge);
-      }
-      if (link) {
-        nodes.push(link);
+    const ellipsisRef = vue.ref(null);
+    const sliceIndex = vue.ref(-1);
+    const isHorizontal = vue.computed(() => props$1.mode === "horizontal");
+    const { observe, unobserve } = 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;
+        }
       }
-      return nodes;
-    };
-    const renderItems = (items, sIcon, sTitle, tipDisabled, theme, popTheme, colorful, popupColorful, firstPopClass, first) => {
-      const nodes = [];
-      if (!items) {
-        return nodes;
+    });
+    vue.onMounted(() => {
+      var _a;
+      if (props$1.ellipsis && isHorizontal.value && ((_a = menuRef.value) == null ? void 0 : _a.$el)) {
+        observe();
       }
-      items.forEach((item) => {
+    });
+    vue.watch(
+      [
+        () => props$1.ellipsis,
+        isHorizontal,
+        () => {
+          var _a;
+          return (_a = menuRef.value) == null ? void 0 : _a.$el;
+        },
+        () => props$1.items
+      ],
+      () => {
         var _a;
-        const iNodes = sIcon ? sIcon({ item, icon: item.icon }) ?? [] : [];
-        if (!iNodes.length && item.icon) {
-          iNodes.push(
-            vue.h(elementPlus.ElIcon, item.iconProps ?? {}, () => {
-              return vue.h(item.icon, { style: item.iconStyle });
-            })
-          );
+        if (props$1.ellipsis && isHorizontal.value && ((_a = menuRef.value) == null ? void 0 : _a.$el)) {
+          observe();
+        } else {
+          unobserve();
+          sliceIndex.value = -1;
         }
-        const tNodes = sTitle ? sTitle({ item, title: item.title }) ?? [] : [];
-        if (!tNodes.length && item.title) {
-          tNodes.push(vue.h("span", item.title));
-        }
-        const bNode = item.badge != null ? vue.h(elementPlus.ElBadge, item.badge) : null;
-        if (!((_a = item.children) == null ? void 0 : _a.length)) {
-          const linkNode = getLinkNode(item.path);
-          const key = item.key || item.index || item.path;
-          nodes.push(
-            vue.h(
-              elementPlus.ElMenuItem,
-              {
-                key: key + "-" + tipDisabled,
-                index: item.index,
-                route: item.route,
-                disabled: item.disabled
-              },
-              {
-                default: () => {
-                  if (!first || tipDisabled) {
-                    return getNodes(iNodes, tNodes, bNode, linkNode);
-                  }
-                  return getNodes(iNodes, void 0, bNode, linkNode);
-                },
-                title: first && !tipDisabled ? () => tNodes : void 0
-              }
-            )
-          );
-          return;
-        }
-        if (item.group === true) {
-          nodes.push(
-            vue.h(
-              elementPlus.ElMenuItemGroup,
-              { key: item.key || item.index },
-              {
-                default: () => {
-                  return renderItems(
-                    item.children,
-                    sIcon,
-                    sTitle,
-                    tipDisabled,
-                    theme,
-                    popTheme,
-                    colorful,
-                    popupColorful,
-                    firstPopClass,
-                    first
-                  );
-                },
-                title: () => getNodes(iNodes, tNodes, bNode)
-              }
-            )
-          );
-          return;
-        }
-        const popperClass = ["ele-menu"];
-        if (popTheme === "dark" || popTheme === "auto" && theme === "dark") {
-          popperClass.push("ele-menu-dark");
-        }
-        if (popupColorful === true || popupColorful === "auto" && colorful) {
-          popperClass.push("ele-menu-colorful");
-        }
-        if (first && firstPopClass) {
-          popperClass.push(firstPopClass);
-        }
-        if (item.popperClass) {
-          popperClass.push(item.popperClass);
-        }
-        nodes.push(
-          vue.h(
-            elementPlus.ElSubMenu,
-            {
-              key: item.key || item.index,
-              index: item.index,
-              popperClass: popperClass.join(" "),
-              showTimeout: item.showTimeout,
-              hideTimeout: item.hideTimeout,
-              disabled: item.disabled,
-              teleported: item.teleported ?? !!first,
-              popperOffset: item.popperOffset,
-              expandCloseIcon: item.expandCloseIcon ?? icons.ArrowDown,
-              expandOpenIcon: item.expandOpenIcon ?? icons.ArrowDown,
-              collapseCloseIcon: item.collapseCloseIcon ?? icons.ArrowRight,
-              collapseOpenIcon: item.collapseOpenIcon ?? icons.ArrowRight
-            },
-            {
-              default: () => {
-                return renderItems(
-                  item.children,
-                  sIcon,
-                  sTitle,
-                  tipDisabled,
-                  theme,
-                  popTheme,
-                  colorful,
-                  popupColorful,
-                  firstPopClass
-                );
-              },
-              title: () => getNodes(iNodes, tNodes, bNode)
-            }
-          )
-        );
-      });
-      return nodes;
-    };
+      }
+    );
     const exposeValue = {
       menuRef,
       open: (index2) => {
@@ -187,10 +77,11 @@ const index = vue.defineComponent({
         {
           ...core.pick(props$1, props.menuPropKeys),
           ref: menuRef,
+          ellipsis: false,
           class: [
-            "ele-menu",
-            { "ele-menu-dark": props$1.theme === "dark" },
-            { "ele-menu-colorful": props$1.colorful === true }
+            { "ele-menu": authenticated.value },
+            { "ele-menu-dark": authenticated.value && props$1.theme === "dark" },
+            { "ele-menu-colorful": authenticated.value && props$1.colorful }
           ],
           onOpen: (index2, indexPath) => {
             emit("open", index2, indexPath);
@@ -203,8 +94,13 @@ const index = vue.defineComponent({
           }
         },
         () => {
-          return renderItems(
+          const { items, moreItems } = util.getMenuItems(
             props$1.items,
+            sliceIndex.value,
+            isHorizontal.value
+          );
+          const nodes = util.renderItems(
+            items,
             slots.icon,
             slots.title,
             props$1.tooltipDisabled,
@@ -215,6 +111,56 @@ const index = vue.defineComponent({
             props$1.firstPopperClass,
             true
           );
+          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
+            );
+            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,
+                      props$1.tooltipDisabled,
+                      props$1.theme,
+                      props$1.popupTheme,
+                      props$1.colorful,
+                      props$1.popupColorful,
+                      props$1.firstPopperClass
+                    );
+                  },
+                  title: () => {
+                    return vue.h(elementPlus.ElIcon, ellipsisProps.iconProps || {}, () => {
+                      return vue.h(
+                        ellipsisProps.icon ?? icons.EllipsisOutlined,
+                        { style: ellipsisProps.iconStyle }
+                      );
+                    });
+                  }
+                }
+              )
+            );
+          }
+          return nodes;
         }
       );
     };

package/lib/ele-menus/props.d.ts

@@ -1,6 +1,6 @@
 import type { PropType, ExtractPropTypes } from 'vue';
 import { menuProps } from 'element-plus';
-import type { MenuItem, MenuTheme, PopupMenuTheme, PopupColorful } from './types';
+import type { MenuItem, MenuTheme, PopupMenuTheme, PopupColorful, EllipsisProps } from './types';
 /**
  * 属性
  */
@@ -21,6 +21,7 @@ export declare const menusProps: {
     };
     firstPopperClass: StringConstructor;
     tooltipDisabled: BooleanConstructor;
+    ellipsisProps: PropType<EllipsisProps>;
     mode: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "horizontal" | "vertical", unknown, "vertical", boolean>;
     defaultActive: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
     defaultOpeneds: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | ((new (...args: any[]) => string[]) | (() => string[]))[], unknown, unknown, () => [], boolean>;

package/lib/ele-menus/props.js

@@ -25,7 +25,9 @@ const menusProps = {
   // 一级子菜单类名
   firstPopperClass: String,
   // 禁用 tooltip
-  tooltipDisabled: Boolean
+  tooltipDisabled: Boolean,
+  // 省略菜单的属性
+  ellipsisProps: Object
 };
 const menuPropKeys = Object.keys(elementPlus.menuProps);
 exports.menuPropKeys = menuPropKeys;

package/lib/ele-menus/style/css-var.scss

@@ -1,9 +1,8 @@
-@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
 
 @mixin set-menus-var($var) {
   .ele-menu {
     @include set-ele-var('menu', $var);
-    @include set-ele-var('menu-item', $var);
   }
 
   .ele-menu.el-menu--horizontal {
@@ -30,15 +29,15 @@
     @include set-ele-var('menu-dark', $var);
   }
 
-  .ele-menu,
+  .ele-menu > .el-menu--popup-container > .el-menu--popup,
   .ele-admin-sidebar,
   .ele-admin-sidebox {
-    @include set-ele-var('menu-scrollbar', $var);
+    @include set-ele-var('menu-thumb', $var);
   }
 
-  .ele-menu.ele-menu-dark,
+  .ele-menu.ele-menu-dark > .el-menu--popup-container > .el-menu--popup,
   .ele-admin-dark-sidebar .ele-admin-sidebar,
   .ele-admin-dark-sidebar .ele-admin-sidebox {
-    @include set-ele-var('menu-dark-scrollbar', $var);
+    @include set-ele-var('menu-dark-thumb', $var);
   }
 }