ele-admin-plus 1.0.0-beta.1

package/lib/ele-menus/index.js

@@ -0,0 +1,232 @@
+"use strict";
+const vue = require("vue");
+const vueRouter = require("vue-router");
+const elementPlus = require("element-plus");
+const core = require("../utils/core");
+const icons = require("../icons");
+const props = require("./props");
+const index = vue.defineComponent({
+  name: "EleMenus",
+  props: props.menusProps,
+  emits: elementPlus.menuEmits,
+  setup(props2, { slots, emit, expose }) {
+    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);
+      }
+      return nodes;
+    };
+    const renderItems = (items, sIcon, sTitle, tipDisabled, theme, popTheme, colorful, popupColorful, firstPopClass, first) => {
+      const nodes = [];
+      if (!items) {
+        return nodes;
+      }
+      items.forEach((item) => {
+        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 });
+            })
+          );
+        }
+        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) => {
+        if (menuRef.value) {
+          menuRef.value.open(index2);
+        }
+      },
+      close: (index2) => {
+        if (menuRef.value) {
+          menuRef.value.open(index2);
+        }
+      }
+    };
+    expose(exposeValue);
+    return () => {
+      return vue.h(
+        elementPlus.ElMenu,
+        {
+          ref: menuRef,
+          class: [
+            "ele-menu",
+            { "ele-menu-dark": props2.theme === "dark" },
+            { "ele-menu-colorful": props2.colorful === true }
+          ],
+          mode: props2.mode,
+          collapse: props2.collapse,
+          ellipsis: props2.ellipsis,
+          defaultActive: props2.defaultActive,
+          defaultOpeneds: props2.defaultOpeneds,
+          uniqueOpened: props2.uniqueOpened,
+          menuTrigger: props2.menuTrigger,
+          router: props2.router,
+          collapseTransition: props2.collapseTransition,
+          popperEffect: props2.popperEffect,
+          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);
+          }
+        },
+        () => {
+          return renderItems(
+            props2.items,
+            slots.icon,
+            slots.title,
+            props2.tooltipDisabled,
+            props2.theme,
+            props2.popupTheme,
+            props2.colorful,
+            props2.popupColorful,
+            props2.firstPopperClass,
+            true
+          );
+        }
+      );
+    };
+  }
+});
+module.exports = index;

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

@@ -0,0 +1,37 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { MenuItem, MenuTheme, PopupMenuTheme, PopupColorful } from './types';
+/**
+ * 属性
+ */
+export declare const menusProps: {
+    items: {
+        type: PropType<MenuItem[]>;
+        required: boolean;
+    };
+    theme: PropType<MenuTheme>;
+    popupTheme: {
+        type: PropType<PopupMenuTheme>;
+        default: string;
+    };
+    colorful: BooleanConstructor;
+    popupColorful: {
+        type: PropType<PopupColorful>;
+        default: string;
+    };
+    firstPopperClass: StringConstructor;
+    tooltipDisabled: BooleanConstructor;
+    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>;
+    uniqueOpened: BooleanConstructor;
+    router: BooleanConstructor;
+    menuTrigger: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "hover" | "click", unknown, "hover", boolean>;
+    collapse: BooleanConstructor;
+    backgroundColor: StringConstructor;
+    textColor: StringConstructor;
+    activeTextColor: StringConstructor;
+    collapseTransition: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    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>;
+};
+export type MenusProps = ExtractPropTypes<typeof menusProps>;

package/lib/ele-menus/props.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const elementPlus = require("element-plus");
+const menusProps = {
+  ...elementPlus.menuProps,
+  // 菜单数据
+  items: {
+    type: Array,
+    required: true
+  },
+  // 主题
+  theme: String,
+  // 弹出菜单主题
+  popupTheme: {
+    type: String,
+    default: "auto"
+  },
+  // 彩色菜单图标
+  colorful: Boolean,
+  // 弹出菜单是否彩色图标
+  popupColorful: {
+    type: [Boolean, String],
+    default: "auto"
+  },
+  // 一级子菜单类名
+  firstPopperClass: String,
+  // 禁用 tooltip
+  tooltipDisabled: Boolean
+};
+exports.menusProps = menusProps;

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

@@ -0,0 +1,44 @@
+@use '../../style/themes/default.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 {
+    @include set-ele-var('menu-horizontal', $var);
+  }
+
+  .ele-menu > .el-menu--popup {
+    @include set-ele-var('menu-popup', $var);
+  }
+
+  .ele-menu .el-menu-item-group__title {
+    @include set-ele-var('menu-group', $var);
+  }
+
+  .ele-menu.ele-menu-colorful {
+    @include set-ele-var('menu-colorful', $var);
+  }
+
+  .ele-menu.ele-menu-dark,
+  .ele-admin-header.is-dark,
+  .ele-admin-header.is-primary,
+  .ele-admin-dark-sidebar .ele-admin-sidebar,
+  .ele-admin-dark-sidebar .ele-admin-sidebox {
+    @include set-ele-var('menu-dark', $var);
+  }
+
+  .ele-menu,
+  .ele-admin-sidebar,
+  .ele-admin-sidebox {
+    @include set-ele-var('menu-scrollbar', $var);
+  }
+
+  .ele-menu.ele-menu-dark,
+  .ele-admin-dark-sidebar .ele-admin-sidebar,
+  .ele-admin-dark-sidebar .ele-admin-sidebox {
+    @include set-ele-var('menu-dark-scrollbar', $var);
+  }
+}

package/lib/ele-menus/style/index.js

@@ -0,0 +1,7 @@
+"use strict";
+require("element-plus/es/components/menu/style/index");
+require("element-plus/es/components/menu-item/style/index");
+require("element-plus/es/components/menu-item-group/style/index");
+require("element-plus/es/components/sub-menu/style/index");
+require("element-plus/es/components/icon/style/index");
+require("./index.scss");