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

package/lib/ele-menus/components/menu-items.cjs

@@ -0,0 +1,268 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const icons = require("../../icons");
+const core = require("../../utils/core");
+const ItemTitle = require("./item-title");
+const util = require("../util");
+const _sfc_main = vue.defineComponent({
+  name: "MenuItems",
+  components: { ElMenuItem: elementPlus.ElMenuItem, ElSubMenu: elementPlus.ElSubMenu, ElMenuItemGroup: elementPlus.ElMenuItemGroup, ItemTitle },
+  props: {
+    /** 菜单数据 */
+    items: Array,
+    /** 是否是第一级菜单 */
+    first: Boolean,
+    /** 是否禁用折叠的 tooltip */
+    tipDisabled: Boolean,
+    /** 父级是否是分组菜单 */
+    parentIsGroup: Boolean,
+    /** 主题 */
+    theme: String,
+    /** 气泡菜单主题 */
+    popTheme: String,
+    /** 是否彩色图标 */
+    colorful: Boolean,
+    /** 气泡菜单是否彩色图标 */
+    popupColorful: [Boolean, String],
+    /** 第一级气泡菜单类名 */
+    firstPopClass: String,
+    /** 是否是 webkit 内核 */
+    webkit: Boolean
+  },
+  emits: {
+    itemClick: (_item, _e) => true,
+    itemMouseenter: (_item, _e) => true,
+    itemMouseleave: (_item, _e) => true,
+    parentMouseenter: (_item, _e) => true,
+    parentMouseleave: (_item, _e) => true
+  },
+  setup(_props, { emit }) {
+    const handleMenuItemClick = () => {
+    };
+    const handleItemClick = (item, e) => {
+      emit("itemClick", item, e);
+    };
+    const handleItemMouseenter = (item, e) => {
+      emit("itemMouseenter", item, e);
+    };
+    const handleItemMouseleave = (item, e) => {
+      emit("itemMouseleave", item, e);
+    };
+    const handleParentMouseenter = (item, e) => {
+      emit("parentMouseenter", item, e);
+    };
+    const handleParentMouseleave = (item, e) => {
+      emit("parentMouseleave", item, e);
+    };
+    return {
+      pick: core.pick,
+      ArrowDown: icons.ArrowDown,
+      ArrowRight: icons.ArrowRight,
+      getPopperClass: util.getPopperClass,
+      handleMenuItemClick,
+      handleItemClick,
+      handleItemMouseenter,
+      handleItemMouseleave,
+      handleParentMouseenter,
+      handleParentMouseleave
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = {
+  key: 0,
+  class: "ele-menu-title"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ItemTitle = vue.resolveComponent("ItemTitle");
+  const _component_ElMenuItem = vue.resolveComponent("ElMenuItem");
+  const _component_MenuItems = vue.resolveComponent("MenuItems", true);
+  const _component_ElMenuItemGroup = vue.resolveComponent("ElMenuItemGroup");
+  const _component_ElSubMenu = vue.resolveComponent("ElSubMenu");
+  return vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item) => {
+    return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+      !item.children || !item.children.length ? (vue.openBlock(), vue.createBlock(_component_ElMenuItem, vue.mergeProps({
+        key: 0,
+        ref_for: true
+      }, _ctx.pick(item, ["route", "disabled", "class", "style"]), {
+        key: (item.key || item.index || item.path) + "-" + _ctx.tipDisabled,
+        index: item.index || item.path,
+        class: [{ "ele-menu-overflow": item.overflow }],
+        onClick: _ctx.handleMenuItemClick
+      }), vue.createSlots({
+        default: vue.withCtx(() => [
+          vue.createVNode(_component_ItemTitle, {
+            item,
+            showTitle: !(_ctx.first && !_ctx.tipDisabled),
+            showLink: true,
+            onItemClick: _ctx.handleItemClick,
+            onItemMouseenter: _ctx.handleItemMouseenter,
+            onItemMouseleave: _ctx.handleItemMouseleave
+          }, vue.createSlots({ _: 2 }, [
+            vue.renderList(Object.keys(_ctx.$slots), (name) => {
+              return {
+                name,
+                fn: vue.withCtx((slotProps) => [
+                  vue.renderSlot(_ctx.$slots, name, vue.mergeProps({ ref_for: true }, slotProps || {}))
+                ])
+              };
+            })
+          ]), 1032, ["item", "showTitle", "onItemClick", "onItemMouseenter", "onItemMouseleave"])
+        ]),
+        _: 2
+      }, [
+        _ctx.first && !_ctx.tipDisabled ? {
+          name: "title",
+          fn: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "title", {
+              item,
+              title: item.title
+            }, () => [
+              item.title ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, vue.toDisplayString(item.title), 1)) : vue.createCommentVNode("", true)
+            ])
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1040, ["index", "class", "onClick"])) : item.group === true && !_ctx.parentIsGroup ? (vue.openBlock(), vue.createBlock(_component_ElMenuItemGroup, {
+        key: (item.key || item.index || item.path) + "-group",
+        class: vue.normalizeClass(item.class),
+        style: vue.normalizeStyle(item.style)
+      }, {
+        title: vue.withCtx(() => [
+          vue.createVNode(_component_ItemTitle, {
+            item,
+            onItemMouseenter: _ctx.handleParentMouseenter,
+            onItemMouseleave: _ctx.handleParentMouseleave
+          }, vue.createSlots({ _: 2 }, [
+            vue.renderList(Object.keys(_ctx.$slots), (name) => {
+              return {
+                name,
+                fn: vue.withCtx((slotProps) => [
+                  vue.renderSlot(_ctx.$slots, name, vue.mergeProps({ ref_for: true }, slotProps || {}))
+                ])
+              };
+            })
+          ]), 1032, ["item", "onItemMouseenter", "onItemMouseleave"])
+        ]),
+        default: vue.withCtx(() => [
+          vue.createVNode(_component_MenuItems, {
+            items: item.children,
+            first: _ctx.first,
+            tipDisabled: _ctx.tipDisabled,
+            parentIsGroup: true,
+            theme: _ctx.theme,
+            popTheme: _ctx.popTheme,
+            colorful: _ctx.colorful,
+            popupColorful: _ctx.popupColorful,
+            firstPopClass: _ctx.firstPopClass,
+            webkit: _ctx.webkit,
+            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.mergeProps({ ref_for: true }, slotProps || {}))
+                ])
+              };
+            })
+          ]), 1032, ["items", "first", "tipDisabled", "theme", "popTheme", "colorful", "popupColorful", "firstPopClass", "webkit", "onItemClick", "onItemMouseenter", "onItemMouseleave", "onParentMouseenter", "onParentMouseleave"])
+        ]),
+        _: 2
+      }, 1032, ["class", "style"])) : (vue.openBlock(), vue.createBlock(_component_ElSubMenu, vue.mergeProps(
+        {
+          key: 2,
+          ref_for: true
+        },
+        _ctx.pick(item, [
+          "showTimeout",
+          "hideTimeout",
+          "disabled",
+          "popperOffset",
+          "class",
+          "style"
+        ]),
+        {
+          key: (item.key || item.index || item.path) + "-sub",
+          index: item.index || item.path || "",
+          popperClass: _ctx.getPopperClass(
+            item.popperClass,
+            _ctx.theme,
+            _ctx.popTheme,
+            _ctx.colorful,
+            _ctx.popupColorful,
+            _ctx.firstPopClass,
+            _ctx.first,
+            _ctx.webkit
+          ),
+          teleported: item.teleported ?? !!_ctx.first,
+          expandCloseIcon: item.expandCloseIcon ?? _ctx.ArrowDown,
+          expandOpenIcon: item.expandOpenIcon ?? _ctx.ArrowDown,
+          collapseCloseIcon: item.collapseCloseIcon ?? _ctx.ArrowRight,
+          collapseOpenIcon: item.collapseOpenIcon ?? _ctx.ArrowRight,
+          class: [{ "ele-menu-overflow": item.overflow }]
+        }
+      ), {
+        title: vue.withCtx(() => [
+          vue.createVNode(_component_ItemTitle, {
+            item,
+            onItemMouseenter: _ctx.handleParentMouseenter,
+            onItemMouseleave: _ctx.handleParentMouseleave
+          }, vue.createSlots({ _: 2 }, [
+            vue.renderList(Object.keys(_ctx.$slots), (name) => {
+              return {
+                name,
+                fn: vue.withCtx((slotProps) => [
+                  vue.renderSlot(_ctx.$slots, name, vue.mergeProps({ ref_for: true }, slotProps || {}))
+                ])
+              };
+            })
+          ]), 1032, ["item", "onItemMouseenter", "onItemMouseleave"])
+        ]),
+        default: vue.withCtx(() => [
+          !(item.children.length === 1 && item.children[0] == null) ? (vue.openBlock(), vue.createBlock(_component_MenuItems, {
+            key: 0,
+            items: item.children,
+            first: false,
+            tipDisabled: _ctx.tipDisabled,
+            parentIsGroup: false,
+            theme: _ctx.theme,
+            popTheme: _ctx.popTheme,
+            colorful: _ctx.colorful,
+            popupColorful: _ctx.popupColorful,
+            firstPopClass: _ctx.firstPopClass,
+            webkit: _ctx.webkit,
+            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.mergeProps({ ref_for: true }, slotProps || {}))
+                ])
+              };
+            })
+          ]), 1032, ["items", "tipDisabled", "theme", "popTheme", "colorful", "popupColorful", "firstPopClass", "webkit", "onItemClick", "onItemMouseenter", "onItemMouseleave", "onParentMouseenter", "onParentMouseleave"])) : vue.createCommentVNode("", true)
+        ]),
+        _: 2
+      }, 1040, ["index", "popperClass", "teleported", "expandCloseIcon", "expandOpenIcon", "collapseCloseIcon", "collapseOpenIcon", "class"]))
+    ], 64);
+  }), 256);
+}
+const menuItems = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = menuItems;

package/lib/ele-menus/components/menu-items.d.ts

@@ -0,0 +1,78 @@
+import { PropType } from 'vue';
+import { pick } from '../../utils/core';
+import { getPopperClass } from '../util';
+import { MenuItem, MenuTheme, PopupMenuTheme, PopupColorful, MenuItemEvent } from '../types';
+
+declare const _default: import('vue').DefineComponent<{
+    /** 菜单数据 */
+    items: PropType<MenuItem[]>;
+    /** 是否是第一级菜单 */
+    first: BooleanConstructor;
+    /** 是否禁用折叠的 tooltip */
+    tipDisabled: BooleanConstructor;
+    /** 父级是否是分组菜单 */
+    parentIsGroup: BooleanConstructor;
+    /** 主题 */
+    theme: PropType<MenuTheme>;
+    /** 气泡菜单主题 */
+    popTheme: PropType<PopupMenuTheme>;
+    /** 是否彩色图标 */
+    colorful: BooleanConstructor;
+    /** 气泡菜单是否彩色图标 */
+    popupColorful: PropType<PopupColorful>;
+    /** 第一级气泡菜单类名 */
+    firstPopClass: StringConstructor;
+    /** 是否是 webkit 内核 */
+    webkit: BooleanConstructor;
+}, {
+    pick: typeof pick;
+    ArrowDown: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
+    ArrowRight: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
+    getPopperClass: typeof getPopperClass;
+    handleMenuItemClick: () => void;
+    handleItemClick: MenuItemEvent;
+    handleItemMouseenter: MenuItemEvent;
+    handleItemMouseleave: MenuItemEvent;
+    handleParentMouseenter: MenuItemEvent;
+    handleParentMouseleave: MenuItemEvent;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    itemClick: (_item: MenuItem, _e: MouseEvent) => true;
+    itemMouseenter: (_item: MenuItem, _e: MouseEvent) => true;
+    itemMouseleave: (_item: MenuItem, _e: MouseEvent) => true;
+    parentMouseenter: (_item: MenuItem, _e: MouseEvent) => true;
+    parentMouseleave: (_item: MenuItem, _e: MouseEvent) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** 菜单数据 */
+    items: PropType<MenuItem[]>;
+    /** 是否是第一级菜单 */
+    first: BooleanConstructor;
+    /** 是否禁用折叠的 tooltip */
+    tipDisabled: BooleanConstructor;
+    /** 父级是否是分组菜单 */
+    parentIsGroup: BooleanConstructor;
+    /** 主题 */
+    theme: PropType<MenuTheme>;
+    /** 气泡菜单主题 */
+    popTheme: PropType<PopupMenuTheme>;
+    /** 是否彩色图标 */
+    colorful: BooleanConstructor;
+    /** 气泡菜单是否彩色图标 */
+    popupColorful: PropType<PopupColorful>;
+    /** 第一级气泡菜单类名 */
+    firstPopClass: StringConstructor;
+    /** 是否是 webkit 内核 */
+    webkit: BooleanConstructor;
+}>> & {
+    onItemClick?: ((_item: MenuItem, _e: MouseEvent) => any) | undefined;
+    onItemMouseenter?: ((_item: MenuItem, _e: MouseEvent) => any) | undefined;
+    onItemMouseleave?: ((_item: MenuItem, _e: MouseEvent) => any) | undefined;
+    onParentMouseenter?: ((_item: MenuItem, _e: MouseEvent) => any) | undefined;
+    onParentMouseleave?: ((_item: MenuItem, _e: MouseEvent) => any) | undefined;
+}, {
+    first: boolean;
+    colorful: boolean;
+    tipDisabled: boolean;
+    parentIsGroup: boolean;
+    webkit: boolean;
+}, {}>;
+export default _default;