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

package/es/ele-app/style/overwrite/date-picker/index.scss

@@ -244,7 +244,7 @@
   .el-month-table td {
     width: auto;
 
-    .cell {
+    .el-date-table-cell__text {
       color: eleVar('datepicker', 'color');
       width: eleVar('datepicker', 'year-width');
       height: eleVar('datepicker', 'year-height');
@@ -261,18 +261,18 @@
       transform: none;
     }
 
-    &.today .cell {
+    &.today .el-date-table-cell__text {
       color: eleVar('datepicker', 'today-color');
       font-weight: eleVar('datepicker', 'today-weight');
       border: eleVar('datepicker', 'today-border');
     }
 
-    .cell:hover {
+    .el-date-table-cell__text:hover {
       color: eleVar('datepicker', 'hover-color');
       background: eleVar('datepicker', 'hover-bg');
     }
 
-    &.current:not(.disabled) .cell {
+    &.current:not(.disabled) .el-date-table-cell__text {
       color: eleVar('datepicker', 'active-color');
       background: eleVar('datepicker', 'active-bg');
     }
@@ -295,7 +295,7 @@
         background: eleVar('datepicker', 'disabled-bg');
       }
 
-      .cell {
+      .el-date-table-cell__text {
         color: eleVar('datepicker', 'disabled-color');
         background: none;
       }
@@ -319,7 +319,7 @@
         background: eleVar('datepicker', 'disabled-bg');
       }
 
-      .cell {
+      .el-date-table-cell__text {
         color: eleVar('datepicker', 'disabled-color');
         background: none;
       }
@@ -444,7 +444,8 @@
   }
 
   // 月范围
-  .el-month-table td {
+  .el-month-table td,
+  .el-year-table td {
     &.start-date > div {
       border-top-left-radius: eleVar('datepicker', 'year-radius');
       border-bottom-left-radius: eleVar('datepicker', 'year-radius');
@@ -465,18 +466,19 @@
       }
     }
 
-    &.in-range .cell:hover {
+    &.in-range .el-date-table-cell__text:hover {
       background: none;
     }
 
-    &.in-range.start-date:not(.disabled) .cell,
-    &.in-range.end-date:not(.disabled) .cell {
+    &.in-range.start-date:not(.disabled) .el-date-table-cell__text,
+    &.in-range.end-date:not(.disabled) .el-date-table-cell__text {
       color: eleVar('datepicker', 'active-color');
       background: eleVar('datepicker', 'active-bg');
     }
   }
 
-  .el-month-table {
+  .el-month-table,
+  .el-year-table {
     border-collapse: separate;
     border-spacing: 0;
   }

package/es/ele-cropper/components/cropper-tools.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, shallowRef, watch, resolveComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, withCtx, createVNode, normalizeClass, createTextVNode, toDisplayString, createCommentVNode, mergeProps } from "vue";
+import { defineComponent, ref, shallowRef, watch, markRaw, resolveComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, withCtx, createVNode, normalizeClass, createTextVNode, toDisplayString, createCommentVNode, mergeProps } from "vue";
 import { ElButtonGroup, ElButton, ElUpload } from "element-plus";
 import { ZoomInOutlined, ZoomOutOutlined, ArrowLeftOutlined, ArrowRightOutlined, ArrowUpOutlined, ArrowDownOutlined, UndoOutlined, ReloadOutlined, SwapOutlined, SortOutlined, SyncOutlined, UploadOutlined, CheckOutlined } from "../../icons";
 import { useTimer } from "../../utils/hook";
@@ -116,7 +116,7 @@ const _sfc_main = defineComponent({
             return {
               key: i + "-" + j + name,
               name,
-              icon: TOOL_ICONS[name],
+              icon: markRaw(TOOL_ICONS[name]),
               className: `ele-cropper-${name}`
             };
           });

package/es/ele-data-table/components/table-columns.js

@@ -1,10 +1,11 @@
-import { defineComponent, resolveComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, mergeProps, withCtx, createElementVNode, renderSlot, createTextVNode, toDisplayString, createSlots, createCommentVNode } from "vue";
+import { defineComponent, resolveComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, mergeProps, withCtx, createElementVNode, renderSlot, createTextVNode, toDisplayString, createSlots, createCommentVNode, createVNode, resolveDynamicComponent } from "vue";
 import { ElTableColumn } from "element-plus";
+import { FilterFilled } from "../../icons";
 import { omit } from "../../utils/core";
 import { getCellClass, getFilterPopperClass, getTooltipProps } from "../util";
 const _sfc_main = defineComponent({
   name: "TableColumns",
-  components: { ElTableColumn },
+  components: { ElTableColumn, FilterFilled },
   props: {
     /** 列配置 */
     columns: Array,
@@ -34,6 +35,7 @@ const _export_sfc = (sfc, props) => {
 const _hoisted_1 = ["title"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_TableColumns = resolveComponent("TableColumns", true);
+  const _component_FilterFilled = resolveComponent("FilterFilled");
   const _component_ElTableColumn = resolveComponent("ElTableColumn");
   return openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, (col) => {
     return openBlock(), createBlock(_component_ElTableColumn, mergeProps(
@@ -104,6 +106,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           })
         ]), 1032, ["columns", "pageIndex", "slotNormalize", "globalTooltip"])) : createCommentVNode("", true)
       ]),
+      "filter-icon": withCtx((slotProps) => [
+        !col.filterIcon ? (openBlock(), createBlock(_component_FilterFilled, { key: 0 })) : typeof col.filterIcon === "string" ? renderSlot(_ctx.$slots, col.filterIcon, mergeProps({
+          key: 1,
+          ref_for: true
+        }, slotProps || {}), () => [
+          createVNode(_component_FilterFilled)
+        ]) : (openBlock(), createBlock(resolveDynamicComponent(col.filterIcon), { key: 2 }))
+      ]),
       _: 2
     }, 1040, ["index", "className", "columnKey", "filterClassName", "showOverflowTooltip"]);
   }), 128);

package/es/ele-data-table/index.d.ts

@@ -129,6 +129,128 @@ declare const _default: import('vue').DefineComponent<{
         uid?: string | undefined;
         slot?: string | undefined;
         headerSlot?: string | undefined;
+        filterIcon?: string | import('vue').FunctionalComponent<any, {}, any, {}> | {
+            new (...args: any[]): any;
+            __isFragment?: never;
+            __isTeleport?: never;
+            __isSuspense?: never;
+        } | {
+            [x: string]: any;
+            setup?: ((this: void, props: import('@vue/shared').LooseRequired<any>, ctx: {
+                attrs: {
+                    [x: string]: unknown;
+                };
+                slots: Readonly<{
+                    [name: string]: import('vue').Slot<any> | undefined;
+                }>;
+                emit: ((event: unknown, ...args: any[]) => void) | ((event: string, ...args: any[]) => void);
+                expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed) => void;
+            }) => any) | undefined;
+            name?: string | undefined;
+            template?: (string | object) | undefined;
+            render?: Function | undefined;
+            components?: Record<string, import('vue').Component> | undefined;
+            directives?: Record<string, import('vue').Directive> | undefined;
+            inheritAttrs?: boolean | undefined;
+            emits?: any;
+            slots?: {} | undefined;
+            expose?: string[] | undefined;
+            serverPrefetch?: (() => void | Promise<any>) | undefined;
+            compilerOptions?: {
+                isCustomElement?: ((tag: string) => boolean) | undefined;
+                whitespace?: ("preserve" | "condense") | undefined;
+                comments?: boolean | undefined;
+                delimiters?: [string, string] | undefined;
+            } | undefined;
+            call?: ((this: unknown, ...args: unknown[]) => never) | undefined;
+            __isFragment?: never | undefined;
+            __isTeleport?: never | undefined;
+            __isSuspense?: never | undefined;
+            __defaults?: any;
+            compatConfig?: {
+                GLOBAL_MOUNT?: boolean | "suppress-warning" | undefined;
+                GLOBAL_MOUNT_CONTAINER?: boolean | "suppress-warning" | undefined;
+                GLOBAL_EXTEND?: boolean | "suppress-warning" | undefined;
+                GLOBAL_PROTOTYPE?: boolean | "suppress-warning" | undefined;
+                GLOBAL_SET?: boolean | "suppress-warning" | undefined;
+                GLOBAL_DELETE?: boolean | "suppress-warning" | undefined;
+                GLOBAL_OBSERVABLE?: boolean | "suppress-warning" | undefined;
+                GLOBAL_PRIVATE_UTIL?: boolean | "suppress-warning" | undefined;
+                CONFIG_SILENT?: boolean | "suppress-warning" | undefined;
+                CONFIG_DEVTOOLS?: boolean | "suppress-warning" | undefined;
+                CONFIG_KEY_CODES?: boolean | "suppress-warning" | undefined;
+                CONFIG_PRODUCTION_TIP?: boolean | "suppress-warning" | undefined;
+                CONFIG_IGNORED_ELEMENTS?: boolean | "suppress-warning" | undefined;
+                CONFIG_WHITESPACE?: boolean | "suppress-warning" | undefined;
+                CONFIG_OPTION_MERGE_STRATS?: boolean | "suppress-warning" | undefined;
+                INSTANCE_SET?: boolean | "suppress-warning" | undefined;
+                INSTANCE_DELETE?: boolean | "suppress-warning" | undefined;
+                INSTANCE_DESTROY?: boolean | "suppress-warning" | undefined;
+                INSTANCE_EVENT_EMITTER?: boolean | "suppress-warning" | undefined;
+                INSTANCE_EVENT_HOOKS?: boolean | "suppress-warning" | undefined;
+                INSTANCE_CHILDREN?: boolean | "suppress-warning" | undefined;
+                INSTANCE_LISTENERS?: boolean | "suppress-warning" | undefined;
+                INSTANCE_SCOPED_SLOTS?: boolean | "suppress-warning" | undefined;
+                INSTANCE_ATTRS_CLASS_STYLE?: boolean | "suppress-warning" | undefined;
+                OPTIONS_DATA_FN?: boolean | "suppress-warning" | undefined;
+                OPTIONS_DATA_MERGE?: boolean | "suppress-warning" | undefined;
+                OPTIONS_BEFORE_DESTROY?: boolean | "suppress-warning" | undefined;
+                OPTIONS_DESTROYED?: boolean | "suppress-warning" | undefined;
+                WATCH_ARRAY?: boolean | "suppress-warning" | undefined;
+                PROPS_DEFAULT_THIS?: boolean | "suppress-warning" | undefined;
+                V_ON_KEYCODE_MODIFIER?: boolean | "suppress-warning" | undefined;
+                CUSTOM_DIR?: boolean | "suppress-warning" | undefined;
+                ATTR_FALSE_VALUE?: boolean | "suppress-warning" | undefined;
+                ATTR_ENUMERATED_COERCION?: boolean | "suppress-warning" | undefined;
+                TRANSITION_CLASSES?: boolean | "suppress-warning" | undefined;
+                TRANSITION_GROUP_ROOT?: boolean | "suppress-warning" | undefined;
+                COMPONENT_ASYNC?: boolean | "suppress-warning" | undefined;
+                COMPONENT_FUNCTIONAL?: boolean | "suppress-warning" | undefined;
+                COMPONENT_V_MODEL?: boolean | "suppress-warning" | undefined;
+                RENDER_FUNCTION?: boolean | "suppress-warning" | undefined;
+                FILTERS?: boolean | "suppress-warning" | undefined;
+                PRIVATE_APIS?: boolean | "suppress-warning" | undefined;
+                MODE?: (2 | 3 | ((comp: import('vue').Component | null) => 2 | 3)) | undefined;
+            } | undefined;
+            data?: ((this: any, vm: any) => any) | undefined;
+            computed?: import('vue').ComputedOptions | undefined;
+            methods?: import('vue').MethodOptions | undefined;
+            watch?: {
+                [x: string]: (string | import('vue').WatchCallback<any, any> | ({
+                    handler: import('vue').WatchCallback | string;
+                } & import('vue').WatchOptions<boolean>)) | (string | import('vue').WatchCallback<any, any> | ({
+                    handler: import('vue').WatchCallback | string;
+                } & import('vue').WatchOptions<boolean>))[];
+            } | undefined;
+            provide?: import('vue').ComponentProvideOptions | undefined;
+            inject?: {} | string[] | undefined;
+            filters?: Record<string, Function> | undefined;
+            mixins?: any[] | undefined;
+            extends?: any;
+            beforeCreate?: (() => void) | undefined;
+            created?: (() => void) | undefined;
+            beforeMount?: (() => void) | undefined;
+            mounted?: (() => void) | undefined;
+            beforeUpdate?: (() => void) | undefined;
+            updated?: (() => void) | undefined;
+            activated?: (() => void) | undefined;
+            deactivated?: (() => void) | undefined;
+            beforeDestroy?: (() => void) | undefined;
+            beforeUnmount?: (() => void) | undefined;
+            destroyed?: (() => void) | undefined;
+            unmounted?: (() => void) | undefined;
+            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | undefined;
+            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | undefined;
+            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | undefined;
+            delimiters?: [string, string] | undefined;
+            __differentiator?: string | number | symbol | undefined;
+            __isBuiltIn?: boolean | undefined;
+            __file?: string | undefined;
+            __name?: string | undefined;
+            beforeRouteEnter?: (import('vue-router').TypesConfig extends Record<"beforeRouteEnter", infer T> ? T : import('vue-router').NavigationGuardWithThis<undefined>) | undefined;
+            beforeRouteUpdate?: (import('vue-router').TypesConfig extends Record<"beforeRouteUpdate", infer T> ? T : import('vue-router').NavigationGuard) | undefined;
+            beforeRouteLeave?: (import('vue-router').TypesConfig extends Record<"beforeRouteLeave", infer T> ? T : import('vue-router').NavigationGuard) | undefined;
+        } | undefined;
         hideInTable?: boolean | undefined;
         hideInSetting?: boolean | undefined;
         hideInExport?: boolean | undefined;

package/es/ele-data-table/style/index.scss

@@ -189,10 +189,6 @@
       color: eleVar('table', 'icon-color');
       font-size: eleVar('table', 'filter-size');
       transition: (color $transition-base, font-size $transition-base);
-
-      & > svg > path {
-        #{'d'}: path($icon-filter-path);
-      }
     }
 
     &:hover {

package/es/ele-data-table/types.d.ts

@@ -6,6 +6,7 @@ import type {
   ElEmptyProps
 } from '../ele-app/el';
 import type { EleTooltipProps } from '../ele-app/plus';
+import type { UserComponent } from '../ele-app/types';
 
 /**
  * 数据唯一键
@@ -36,6 +37,8 @@ export interface Column extends Omit<TableColumn, 'filterPlacement'> {
   slot?: string;
   /** 表头插槽名称 */
   headerSlot?: string;
+  /** 自定义筛选图标 */
+  filterIcon?: UserComponent;
   /** 是否隐藏 */
   hideInTable?: boolean;
   /** 是否不显示在列配置中 */

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

@@ -66,6 +66,7 @@ declare const _default: import('vue').DefineComponent<{
     drawerRef: import('vue').Ref<ElDrawerInstance>;
     drawerClass: import('vue').ComputedRef<string>;
     teleportTo: import('vue').ComputedRef<string | Element>;
+    teleportDisabled: import('vue').ComputedRef<boolean>;
     handleClose: () => void;
     updateModelValue: (value: boolean) => void;
     handleDrawerOpen: () => void;

package/es/ele-drawer/index.js

@@ -34,10 +34,15 @@ const _sfc_main = defineComponent({
       return getModalContainer(
         props.inner,
         false,
-        void 0,
+        props.appendTo,
         layoutState.modalsEl
       );
     });
+    const teleportDisabled = computed(() => {
+      const appendTo = props.appendTo || "body";
+      const disabled = appendTo === "body" ? !props.appendToBody : false;
+      return props.inner ? false : disabled;
+    });
     const handleClose = () => {
       if (drawerRef.value && drawerRef.value.handleClose) {
         drawerRef.value.handleClose();
@@ -74,6 +79,7 @@ const _sfc_main = defineComponent({
       drawerRef,
       drawerClass,
       teleportTo,
+      teleportDisabled,
       handleClose,
       updateModelValue,
       handleDrawerOpen,
@@ -100,7 +106,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ElDrawer = resolveComponent("ElDrawer");
   return openBlock(), createBlock(Teleport, {
     to: _ctx.teleportTo,
-    disabled: _ctx.inner ? false : !_ctx.appendToBody
+    disabled: _ctx.teleportDisabled
   }, [
     createVNode(_component_ElDrawer, mergeProps(_ctx.$attrs, {
       ref: "drawerRef",

package/es/ele-dropdown/components/dropdown-menu-item.d.ts

@@ -0,0 +1,39 @@
+import { PropType } from 'vue';
+import { ElIconProps } from '../../ele-app/el';
+import { DropdownItem } from '../types';
+
+declare const _default: import('vue').DefineComponent<{
+    /** 菜单项数据 */
+    item: {
+        type: PropType<DropdownItem>;
+        required: true;
+    };
+    /** 选中的菜单 */
+    selected: PropType<DropdownItem["command"]>;
+    /** 自定义图标属性 */
+    iconProps: PropType<ElIconProps>;
+}, {
+    itemRef: import('vue').Ref<HTMLDivElement | null>;
+    subMenuRef: import('vue').Ref<HTMLDivElement | null>;
+    placement: import('vue').Ref<"rightEnd" | "leftStart" | "leftEnd" | undefined>;
+    handleItemClick: () => void;
+    handleItemMouseenter: () => void;
+    handleWrapperContext: (e: MouseEvent) => void;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    itemClick: (_item: DropdownItem) => true;
+    wrapperContext: (_e: MouseEvent) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** 菜单项数据 */
+    item: {
+        type: PropType<DropdownItem>;
+        required: true;
+    };
+    /** 选中的菜单 */
+    selected: PropType<DropdownItem["command"]>;
+    /** 自定义图标属性 */
+    iconProps: PropType<ElIconProps>;
+}>> & {
+    onItemClick?: ((_item: DropdownItem) => any) | undefined;
+    onWrapperContext?: ((_e: MouseEvent) => any) | undefined;
+}, {}, {}>;
+export default _default;

package/es/ele-dropdown/components/dropdown-menu-item.js

@@ -0,0 +1,132 @@
+import { defineComponent, ref, resolveComponent, openBlock, createElementBlock, Fragment, createCommentVNode, createElementVNode, normalizeClass, withModifiers, renderSlot, createBlock, normalizeProps, mergeProps, withCtx, resolveDynamicComponent, normalizeStyle, toDisplayString, createVNode } from "vue";
+import { ElIcon } from "element-plus";
+import { ArrowRight } from "../../icons";
+const _sfc_main = defineComponent({
+  name: "DropdownMenuItem",
+  components: { ElIcon, ArrowRight },
+  props: {
+    /** 菜单项数据 */
+    item: {
+      type: Object,
+      required: true
+    },
+    /** 选中的菜单 */
+    selected: [String, Number, Object],
+    /** 自定义图标属性 */
+    iconProps: Object
+  },
+  emits: {
+    itemClick: (_item) => true,
+    wrapperContext: (_e) => true
+  },
+  setup(props, { emit }) {
+    const itemRef = ref(null);
+    const subMenuRef = ref(null);
+    const placement = ref();
+    const handleItemClick = () => {
+      if (props.item.disabled) {
+        return;
+      }
+      emit("itemClick", props.item);
+    };
+    const handleItemMouseenter = () => {
+      const subMenuEl = subMenuRef.value;
+      if (!subMenuEl || !itemRef.value) {
+        return;
+      }
+      const rect = itemRef.value.getBoundingClientRect();
+      const rightOver = rect.right + subMenuEl.offsetWidth > window.innerWidth;
+      const bottomOver = rect.top + subMenuEl.offsetHeight > window.innerHeight;
+      if (rightOver && bottomOver) {
+        placement.value = "leftEnd";
+      } else if (rightOver) {
+        placement.value = "leftStart";
+      } else if (bottomOver) {
+        placement.value = "rightEnd";
+      } else {
+        placement.value = void 0;
+      }
+    };
+    const handleWrapperContext = (e) => {
+      emit("wrapperContext", e);
+    };
+    return {
+      itemRef,
+      subMenuRef,
+      placement,
+      handleItemClick,
+      handleItemMouseenter,
+      handleWrapperContext
+    };
+  }
+});
+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-dropdown-menu-divider"
+};
+const _hoisted_2 = { key: 1 };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElIcon = resolveComponent("ElIcon");
+  const _component_ArrowRight = resolveComponent("ArrowRight");
+  return openBlock(), createElementBlock(Fragment, null, [
+    _ctx.item.divided ? (openBlock(), createElementBlock("div", _hoisted_1)) : createCommentVNode("", true),
+    createElementVNode("div", {
+      ref: "itemRef",
+      class: normalizeClass([
+        "ele-dropdown-menu-item",
+        { "is-disabled": !!_ctx.item.disabled },
+        { "is-active": _ctx.selected === _ctx.item.command },
+        { "is-danger": !!_ctx.item.danger }
+      ]),
+      onClick: _cache[2] || (_cache[2] = withModifiers((...args) => _ctx.handleItemClick && _ctx.handleItemClick(...args), ["stop"])),
+      onMouseenter: _cache[3] || (_cache[3] = (...args) => _ctx.handleItemMouseenter && _ctx.handleItemMouseenter(...args))
+    }, [
+      _ctx.item.slot && _ctx.item.slot !== "default" && _ctx.item.slot !== "subMenus" && _ctx.$slots[_ctx.item.slot] ? renderSlot(_ctx.$slots, _ctx.item.slot, {
+        key: 0,
+        item: _ctx.item
+      }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+        _ctx.item.icon ? (openBlock(), createBlock(_component_ElIcon, normalizeProps(mergeProps({ key: 0 }, { ..._ctx.iconProps || {}, ..._ctx.item.iconProps || {} })), {
+          default: withCtx(() => [
+            (openBlock(), createBlock(resolveDynamicComponent(_ctx.item.icon), {
+              style: normalizeStyle(_ctx.item.iconStyle)
+            }, null, 8, ["style"]))
+          ]),
+          _: 1
+        }, 16)) : createCommentVNode("", true),
+        _ctx.item.title ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(_ctx.item.title), 1)) : createCommentVNode("", true)
+      ], 64)),
+      _ctx.item.children && _ctx.item.children.length ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+        createVNode(_component_ElIcon, { class: "ele-dropdown-menu-item-arrow" }, {
+          default: withCtx(() => [
+            createVNode(_component_ArrowRight)
+          ]),
+          _: 1
+        }),
+        createElementVNode("div", {
+          ref: "subMenuRef",
+          class: normalizeClass(["ele-dropdown-wrapper is-sub-menu", [
+            { "is-right-end": _ctx.placement === "rightEnd" },
+            { "is-left-start": _ctx.placement === "leftStart" },
+            { "is-left-end": _ctx.placement === "leftEnd" }
+          ]]),
+          onContextmenu: _cache[0] || (_cache[0] = (...args) => _ctx.handleWrapperContext && _ctx.handleWrapperContext(...args)),
+          onClick: _cache[1] || (_cache[1] = withModifiers(() => {
+          }, ["stop"]))
+        }, [
+          renderSlot(_ctx.$slots, "subMenus")
+        ], 34)
+      ], 64)) : createCommentVNode("", true)
+    ], 34)
+  ], 64);
+}
+const dropdownMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  dropdownMenuItem as default
+};

package/es/ele-dropdown/components/dropdown-menus.d.ts

@@ -0,0 +1,44 @@
+import { PropType } from 'vue';
+import { ElIconProps, ElButtonProps } from '../../ele-app/el';
+import { StyleValue } from '../../ele-app/types';
+import { DropdownItem } from '../types';
+
+declare const _default: import('vue').DefineComponent<{
+    /** 下拉菜单数据 */
+    items: {
+        type: PropType<DropdownItem[]>;
+        required: true;
+    };
+    /** 选中的菜单 */
+    selected: PropType<DropdownItem["command"]>;
+    /** 自定义下拉菜单样式 */
+    menuStyle: PropType<StyleValue>;
+    /** 自定义图标属性 */
+    iconProps: PropType<ElIconProps>;
+    /** 尺寸 */
+    size: PropType<ElButtonProps["size"]>;
+}, {
+    handleItemClick: (item: DropdownItem) => void;
+    handleWrapperContext: (e: MouseEvent) => void;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    itemClick: (_item: DropdownItem) => true;
+    wrapperContext: (_e: MouseEvent) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** 下拉菜单数据 */
+    items: {
+        type: PropType<DropdownItem[]>;
+        required: true;
+    };
+    /** 选中的菜单 */
+    selected: PropType<DropdownItem["command"]>;
+    /** 自定义下拉菜单样式 */
+    menuStyle: PropType<StyleValue>;
+    /** 自定义图标属性 */
+    iconProps: PropType<ElIconProps>;
+    /** 尺寸 */
+    size: PropType<ElButtonProps["size"]>;
+}>> & {
+    onItemClick?: ((_item: DropdownItem) => any) | undefined;
+    onWrapperContext?: ((_e: MouseEvent) => any) | undefined;
+}, {}, {}>;
+export default _default;

package/es/ele-dropdown/components/dropdown-menus.js

@@ -0,0 +1,111 @@
+import { defineComponent, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, Fragment, renderList, createBlock, createSlots, withCtx, renderSlot, mergeProps, createVNode } from "vue";
+import DropdownMenuItem from "./dropdown-menu-item";
+const _sfc_main = defineComponent({
+  name: "DropdownMenus",
+  components: { DropdownMenuItem },
+  props: {
+    /** 下拉菜单数据 */
+    items: {
+      type: Array,
+      required: true
+    },
+    /** 选中的菜单 */
+    selected: [String, Number, Object],
+    /** 自定义下拉菜单样式 */
+    menuStyle: Object,
+    /** 自定义图标属性 */
+    iconProps: Object,
+    /** 尺寸 */
+    size: String
+  },
+  emits: {
+    itemClick: (_item) => true,
+    wrapperContext: (_e) => true
+  },
+  setup(_props, { emit }) {
+    const handleItemClick = (item) => {
+      if (item.disabled) {
+        return;
+      }
+      emit("itemClick", item);
+    };
+    const handleWrapperContext = (e) => {
+      emit("wrapperContext", e);
+    };
+    return {
+      handleItemClick,
+      handleWrapperContext
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_DropdownMenus = resolveComponent("DropdownMenus", true);
+  const _component_DropdownMenuItem = resolveComponent("DropdownMenuItem");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass([
+      "ele-dropdown-menu",
+      { "is-small": _ctx.size === "small" },
+      { "is-large": _ctx.size === "large" }
+    ]),
+    style: normalizeStyle(_ctx.menuStyle)
+  }, [
+    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item) => {
+      return openBlock(), createBlock(_component_DropdownMenuItem, {
+        key: item.key == null ? JSON.stringify(item.command) : item.key,
+        item,
+        selected: _ctx.selected,
+        iconProps: _ctx.iconProps,
+        onItemClick: _ctx.handleItemClick,
+        onWrapperContext: _ctx.handleWrapperContext
+      }, createSlots({ _: 2 }, [
+        renderList(Object.keys(_ctx.$slots).filter(
+          (k) => "default" !== k && "subMenus" !== k
+        ), (name) => {
+          return {
+            name,
+            fn: withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, name, mergeProps({ ref_for: true }, slotProps || {}))
+            ])
+          };
+        }),
+        item.children && item.children.length ? {
+          name: "subMenus",
+          fn: withCtx(() => [
+            createVNode(_component_DropdownMenus, {
+              items: item.children,
+              selected: _ctx.selected,
+              menuStyle: _ctx.menuStyle,
+              iconProps: _ctx.iconProps,
+              size: _ctx.size,
+              onItemClick: _ctx.handleItemClick,
+              onWrapperContext: _ctx.handleWrapperContext
+            }, createSlots({ _: 2 }, [
+              renderList(Object.keys(_ctx.$slots).filter(
+                (k) => "default" !== k && "subMenus" !== k
+              ), (name) => {
+                return {
+                  name,
+                  fn: withCtx((slotProps) => [
+                    renderSlot(_ctx.$slots, name, mergeProps({ ref_for: true }, slotProps || {}))
+                  ])
+                };
+              })
+            ]), 1032, ["items", "selected", "menuStyle", "iconProps", "size", "onItemClick", "onWrapperContext"])
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["item", "selected", "iconProps", "onItemClick", "onWrapperContext"]);
+    }), 128))
+  ], 6);
+}
+const dropdownMenus = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  dropdownMenus as default
+};