ele-admin-plus 1.0.2 → 1.1.0

package/es/ele-map-picker/style/index.scss

@@ -1,4 +1,8 @@
 @use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-map-var($ele);
 
 .ele-map-picker > .el-dialog__body > div.ele-modal-body {
   padding: 0;
@@ -9,11 +13,11 @@
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  padding: 8px 14px;
+  padding: eleVar('map', 'header-padding');
 
   .ele-map-view-search {
     flex: 1;
-    padding-right: 16px;
+    padding-right: 14px;
     box-sizing: border-box;
 
     .el-autocomplete,
@@ -24,16 +28,16 @@
   }
 
   .ele-map-view-btn-ok {
-    padding-left: 10px;
-    padding-right: 10px;
+    padding-left: 9px;
+    padding-right: 11px;
   }
 }
 
 /* 地图 */
 .ele-map-view-body {
   display: flex;
-  border-bottom-left-radius: elVar('border-radius', 'small');
-  border-bottom-right-radius: elVar('border-radius', 'small');
+  border-bottom-left-radius: eleVar('modal', 'radius');
+  border-bottom-right-radius: eleVar('modal', 'radius');
   overflow: hidden;
 
   .ele-map-view-main {
@@ -62,7 +66,8 @@
   // 右侧
   .ele-map-view-side {
     width: 300px;
-    border-top: 1px solid elVar('border-color', 'extra-light');
+    flex-shrink: 0;
+    border-top: 1px solid elVar('border-color', 'light');
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
@@ -70,14 +75,13 @@
 
   // 提示信息
   .ele-map-view-extra {
-    padding: 4px 12px;
-    box-sizing: border-box;
-    background: elVar('bg-color');
     flex-shrink: 0;
+    padding: 6px 12px;
+    box-sizing: border-box;
   }
 
   .ele-map-view-message {
-    padding: 2px 8px;
+    padding: 4px 8px;
     box-sizing: border-box;
     color: elVar('color-error');
     font-size: elVar('font-size', 'small');
@@ -98,15 +102,15 @@
   // poi列表
   .ele-map-view-list {
     flex: 1;
+    box-sizing: border-box;
     overflow: auto;
     overflow: overlay;
-    box-sizing: border-box;
   }
 
   .ele-map-view-item {
     padding: 8px 30px 8px 46px;
-    border-bottom: 1px solid elVar('border-color', 'extra-light');
-    transition: background-color 0.2s;
+    border-bottom: 1px solid elVar('border-color', 'light');
+    transition: background-color $ele-transition;
     box-sizing: border-box;
     position: relative;
     cursor: pointer;
@@ -138,10 +142,10 @@
   .ele-map-view-item-radio {
     position: absolute;
     top: 50%;
-    right: 10px;
+    right: 12px;
     transform: translateY(-50%);
     color: elVar('color-primary');
-    font-size: elVar('font-size', 'medium');
+    font-size: 16px;
     display: none;
   }
 
@@ -183,6 +187,12 @@
   }
 }
 
+.ele-map-suggest-text {
+  color: elVar('text-color', 'secondary');
+  font-size: elVar('font-size', 'small');
+  margin-left: 6px;
+}
+
 /* 小屏幕适应 */
 @media screen and (max-width: 768px) {
   .ele-map-picker.is-responsive {

package/es/ele-menus/index.d.ts

@@ -1,24 +1,24 @@
 import type { NavigationFailure } from 'vue-router';
 import type { MenuItemClicked } from 'element-plus';
 import type { ElMenuInstance } from '../ele-app/types';
-import type { MenuItem, MenuTheme, PopupMenuTheme, PopupColorful } from './types';
 declare const _default: import("vue").DefineComponent<{
     items: {
-        type: import("vue").PropType<MenuItem[]>;
+        type: import("vue").PropType<import("./types").MenuItem[]>;
         required: boolean;
     };
-    theme: import("vue").PropType<MenuTheme>;
+    theme: import("vue").PropType<import("./types").MenuTheme>;
     popupTheme: {
-        type: import("vue").PropType<PopupMenuTheme>;
+        type: import("vue").PropType<import("./types").PopupMenuTheme>;
         default: string;
     };
     colorful: BooleanConstructor;
     popupColorful: {
-        type: import("vue").PropType<PopupColorful>;
+        type: import("vue").PropType<import("./types").PopupColorful>;
         default: string;
     };
     firstPopperClass: StringConstructor;
     tooltipDisabled: BooleanConstructor;
+    ellipsisProps: import("vue").PropType<import("./types").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>;
@@ -42,21 +42,22 @@ declare const _default: import("vue").DefineComponent<{
     select: (index: string, indexPath: string[], item: MenuItemClicked, routerResult?: Promise<void | NavigationFailure> | undefined) => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
-        type: import("vue").PropType<MenuItem[]>;
+        type: import("vue").PropType<import("./types").MenuItem[]>;
         required: boolean;
     };
-    theme: import("vue").PropType<MenuTheme>;
+    theme: import("vue").PropType<import("./types").MenuTheme>;
     popupTheme: {
-        type: import("vue").PropType<PopupMenuTheme>;
+        type: import("vue").PropType<import("./types").PopupMenuTheme>;
         default: string;
     };
     colorful: BooleanConstructor;
     popupColorful: {
-        type: import("vue").PropType<PopupColorful>;
+        type: import("vue").PropType<import("./types").PopupColorful>;
         default: string;
     };
     firstPopperClass: StringConstructor;
     tooltipDisabled: BooleanConstructor;
+    ellipsisProps: import("vue").PropType<import("./types").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>;
@@ -71,14 +72,10 @@ declare const _default: import("vue").DefineComponent<{
     ellipsis: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
     popperEffect: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "light" | "dark", unknown, "dark", boolean>;
 }>> & {
-    onClose?: ((index: string, indexPath: string[]) => any) | undefined;
-    onOpen?: ((index: string, indexPath: string[]) => any) | undefined;
     onSelect?: ((index: string, indexPath: string[], item: MenuItemClicked, routerResult?: Promise<void | NavigationFailure> | undefined) => any) | undefined;
+    onOpen?: ((index: string, indexPath: string[]) => any) | undefined;
+    onClose?: ((index: string, indexPath: string[]) => any) | undefined;
 }, {
-    popupTheme: PopupMenuTheme;
-    colorful: boolean;
-    popupColorful: PopupColorful;
-    tooltipDisabled: boolean;
     mode: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "horizontal" | "vertical", unknown>;
     defaultActive: string;
     defaultOpeneds: string[];
@@ -89,5 +86,9 @@ declare const _default: import("vue").DefineComponent<{
     collapseTransition: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     ellipsis: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     popperEffect: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "light" | "dark", unknown>;
+    popupTheme: import("./types").PopupMenuTheme;
+    colorful: boolean;
+    popupColorful: import("./types").PopupColorful;
+    tooltipDisabled: boolean;
 }, {}>;
 export default _default;

package/es/ele-menus/index.js

@@ -1,171 +1,61 @@
-import { defineComponent, ref, h } from "vue";
-import { RouterLink } from "vue-router";
-import { menuEmits, ElMenu, ElIcon, ElBadge, ElMenuItem, ElMenuItemGroup, ElSubMenu } from "element-plus";
-import { pick, isExternalLink } from "../utils/core";
-import { ArrowDown, ArrowRight } from "../icons";
+import { defineComponent, ref, computed, onMounted, watch, h } from "vue";
+import { menuEmits, ElMenu, ElSubMenu, ElIcon } from "element-plus";
+import { useLicense } from "../ele-config-provider/receiver";
+import { pick } from "../utils/core";
+import { EllipsisOutlined } from "../icons";
+import { useMenuEllipsis, getMenuItems, renderItems, getPopperClass, ellipsisClass } from "./util";
 import { menusProps, menuPropKeys } from "./props";
 const index = defineComponent({
   name: "EleMenus",
   props: menusProps,
   emits: menuEmits,
   setup(props, { slots, emit, expose }) {
+    const { authenticated } = useLicense();
     const menuRef = ref(null);
-    const getLinkNode = (path) => {
-      if (!path) {
-        return;
-      }
-      if (isExternalLink(path)) {
-        return h("a", {
-          href: path,
-          target: "_blank",
-          class: "ele-menu-link",
-          onClick: (e) => e.stopPropagation()
-        });
-      }
-      return h(RouterLink, { to: path, class: "ele-menu-link" });
-    };
-    const getNodes = (icons, titles, badge, link) => {
-      const nodes = [];
-      if (icons) {
-        icons.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 = ref(null);
+    const sliceIndex = ref(-1);
+    const isHorizontal = computed(() => props.mode === "horizontal");
+    const { observe, unobserve } = 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;
+    });
+    onMounted(() => {
+      var _a;
+      if (props.ellipsis && isHorizontal.value && ((_a = menuRef.value) == null ? void 0 : _a.$el)) {
+        observe();
       }
-      items.forEach((item) => {
+    });
+    watch(
+      [
+        () => props.ellipsis,
+        isHorizontal,
+        () => {
+          var _a;
+          return (_a = menuRef.value) == null ? void 0 : _a.$el;
+        },
+        () => props.items
+      ],
+      () => {
         var _a;
-        const iNodes = sIcon ? sIcon({ item, icon: item.icon }) ?? [] : [];
-        if (!iNodes.length && item.icon) {
-          iNodes.push(
-            h(ElIcon, item.iconProps ?? {}, () => {
-              return h(item.icon, { style: item.iconStyle });
-            })
-          );
+        if (props.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(h("span", item.title));
-        }
-        const bNode = item.badge != null ? h(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(
-            h(
-              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(
-            h(
-              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(
-          h(
-            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 ?? ArrowDown,
-              expandOpenIcon: item.expandOpenIcon ?? ArrowDown,
-              collapseCloseIcon: item.collapseCloseIcon ?? ArrowRight,
-              collapseOpenIcon: item.collapseOpenIcon ?? 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) => {
@@ -186,10 +76,11 @@ const index = defineComponent({
         {
           ...pick(props, menuPropKeys),
           ref: menuRef,
+          ellipsis: false,
           class: [
-            "ele-menu",
-            { "ele-menu-dark": props.theme === "dark" },
-            { "ele-menu-colorful": props.colorful === true }
+            { "ele-menu": authenticated.value },
+            { "ele-menu-dark": authenticated.value && props.theme === "dark" },
+            { "ele-menu-colorful": authenticated.value && props.colorful }
           ],
           onOpen: (index2, indexPath) => {
             emit("open", index2, indexPath);
@@ -202,8 +93,13 @@ const index = defineComponent({
           }
         },
         () => {
-          return renderItems(
+          const { items, moreItems } = getMenuItems(
             props.items,
+            sliceIndex.value,
+            isHorizontal.value
+          );
+          const nodes = renderItems(
+            items,
             slots.icon,
             slots.title,
             props.tooltipDisabled,
@@ -214,6 +110,56 @@ const index = defineComponent({
             props.firstPopperClass,
             true
           );
+          if (moreItems) {
+            const ellipsisProps = props.ellipsisProps || {};
+            const popperClass = getPopperClass(
+              ellipsisProps.popperClass,
+              props.theme,
+              props.popupTheme,
+              props.colorful,
+              props.popupColorful,
+              props.firstPopperClass,
+              true
+            );
+            nodes.push(
+              h(
+                ElSubMenu,
+                {
+                  teleported: true,
+                  class: ellipsisClass,
+                  key: "sub-menu-more",
+                  ...ellipsisProps,
+                  index: "sub-menu-more",
+                  ref: ellipsisRef,
+                  popperClass
+                },
+                {
+                  default: () => {
+                    return renderItems(
+                      moreItems,
+                      slots.icon,
+                      slots.title,
+                      props.tooltipDisabled,
+                      props.theme,
+                      props.popupTheme,
+                      props.colorful,
+                      props.popupColorful,
+                      props.firstPopperClass
+                    );
+                  },
+                  title: () => {
+                    return h(ElIcon, ellipsisProps.iconProps || {}, () => {
+                      return h(
+                        ellipsisProps.icon ?? EllipsisOutlined,
+                        { style: ellipsisProps.iconStyle }
+                      );
+                    });
+                  }
+                }
+              )
+            );
+          }
+          return nodes;
         }
       );
     };

package/es/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/es/ele-menus/props.js

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

package/es/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);
   }
 }