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

package/lib/ele-dropdown/props.cjs

@@ -1,28 +1,75 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const elementPlus = require("element-plus");
+const core = require("../utils/core");
+const props = require("../ele-popover/props");
+const normalizePopoverProps = core.omit(props.popoverProps, [
+  "title",
+  "effect",
+  "content",
+  "width",
+  "placement",
+  "disabled",
+  "popperOptions",
+  "popperClass",
+  "showAfter",
+  "hideAfter",
+  "autoClose",
+  "tabindex",
+  "teleported",
+  "bodyClass",
+  "bodyStyle",
+  "titleStyle",
+  "contentStyle"
+]);
+const normalizeDropdownProps = core.omit(elementPlus.dropdownProps, [
+  "onCommand",
+  "onClick",
+  "onVisibleChange",
+  "onVisible-change"
+]);
 const dropdownProps = {
-  ...elementPlus.dropdownProps,
+  ...normalizePopoverProps,
+  size: String,
+  ...normalizeDropdownProps,
+  /** 下拉框渐变动画 */
+  transition: {
+    type: String,
+    default: "el-zoom-in-top"
+  },
   /** 下拉菜单数据 */
   items: Array,
   /** 选中的菜单 */
-  modelValue: String,
+  modelValue: [String, Number, Object],
   /** 自定义下拉菜单样式 */
   menuStyle: Object,
   /** 自定义图标属性 */
-  iconProps: Object
+  iconProps: Object,
+  /** 下拉菜单使用的组件类型 */
+  componentType: String,
+  /** 是否阻止下拉菜单的右键事件 */
+  preventContextmenu: Boolean,
+  /** 内容按钮属性 */
+  splitButtonProps: Object,
+  /** 箭头按钮属性 */
+  caretButtonProps: Object
 };
 const dropdownEmits = {
-  /** SplitButton 点击事件 */
-  click: () => true,
+  ...props.popoverEmits,
+  /** 内容按钮点击事件 */
+  click: (_e) => true,
   /** 菜单项点击事件 */
   command: (_command) => true,
-  /** 下拉框出现/隐藏事件 */
+  /** 下拉框显示状态改变事件 */
   visibleChange: (_visible) => true,
   /** 更新选中值 */
   "update:modelValue": (_value) => true,
   /** 选中改变的事件 */
   change: (_active) => true
 };
+const elDropdownPropKeys = Object.keys(
+  normalizeDropdownProps
+);
 exports.dropdownEmits = dropdownEmits;
 exports.dropdownProps = dropdownProps;
+exports.elDropdownPropKeys = elDropdownPropKeys;

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

@@ -1,68 +1,163 @@
 import { PropType, ExtractPropTypes } from 'vue';
-import { ElIconProps } from '../ele-app/el';
+import { StyleValue } from '../ele-app/types';
+import { ElIconProps, ElButtonProps } from '../ele-app/el';
 import { DropdownItem } from './types';
 
+declare const normalizeDropdownProps: import('../ele-app/types').Mutable<Omit<{
+    readonly trigger: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => import('element-plus/es/utils/typescript').Arrayable<import('element-plus').TooltipTriggerType> & {}) | (() => import('element-plus/es/utils/typescript').Arrayable<import('element-plus').TooltipTriggerType>) | ((new (...args: any[]) => import('element-plus/es/utils/typescript').Arrayable<import('element-plus').TooltipTriggerType> & {}) | (() => import('element-plus/es/utils/typescript').Arrayable<import('element-plus').TooltipTriggerType>))[], unknown, unknown, "hover", boolean>;
+    readonly effect: {
+        readonly default: "light";
+        readonly type: import('vue').PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        readonly __epPropKey: true;
+    };
+    readonly type: {
+        readonly type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "" | "text" | "default" | "success" | "warning" | "info" | "primary" | "danger", unknown> & {}) | (() => import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "" | "text" | "default" | "success" | "warning" | "info" | "primary" | "danger", unknown>) | ((new (...args: any[]) => import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "" | "text" | "default" | "success" | "warning" | "info" | "primary" | "danger", unknown> & {}) | (() => import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "" | "text" | "default" | "success" | "warning" | "info" | "primary" | "danger", unknown>))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly placement: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => import('element-plus').Placement & {}) | (() => import('element-plus').Placement) | ((new (...args: any[]) => import('element-plus').Placement & {}) | (() => import('element-plus').Placement))[], unknown, unknown, "bottom", boolean>;
+    readonly popperOptions: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => Partial<import('element-plus').Options>) | (() => Partial<import('element-plus').Options>) | ((new (...args: any[]) => Partial<import('element-plus').Options>) | (() => Partial<import('element-plus').Options>))[], unknown, unknown, () => {}, boolean>;
+    readonly id: StringConstructor;
+    readonly size: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+    readonly splitButton: BooleanConstructor;
+    readonly hideOnClick: import('element-plus/es/utils/index').EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    readonly loop: import('element-plus/es/utils/index').EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    readonly showTimeout: import('element-plus/es/utils/index').EpPropFinalized<NumberConstructor, unknown, unknown, 150, boolean>;
+    readonly hideTimeout: import('element-plus/es/utils/index').EpPropFinalized<NumberConstructor, unknown, unknown, 150, boolean>;
+    readonly tabindex: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => (string | number) & {}) | (() => string | number) | ((new (...args: any[]) => (string | number) & {}) | (() => string | number))[], unknown, unknown, 0, boolean>;
+    readonly maxHeight: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => (string | number) & {}) | (() => string | number) | ((new (...args: any[]) => (string | number) & {}) | (() => string | number))[], unknown, unknown, "", boolean>;
+    readonly popperClass: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+    readonly disabled: BooleanConstructor;
+    readonly role: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, unknown, unknown, "menu", boolean>;
+    readonly buttonProps: {
+        readonly type: import('vue').PropType<import('element-plus').ButtonProps>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly teleported: import('element-plus/es/utils/index').EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+}, "size" | "trigger">>;
 /**
  * 属性
  */
 export declare const dropdownProps: {
+    /** 下拉框渐变动画 */
+    transition: {
+        type: StringConstructor;
+        default: string;
+    };
     /** 下拉菜单数据 */
     items: PropType<DropdownItem[]>;
     /** 选中的菜单 */
-    modelValue: PropType<import('element-plus/es/utils/index').EpPropMergeType<readonly [ObjectConstructor, StringConstructor, NumberConstructor], unknown, unknown> | undefined>;
+    modelValue: PropType<DropdownItem["command"]>;
     /** 自定义下拉菜单样式 */
-    menuStyle: PropType<Partial<import('vue').CSSProperties>>;
+    menuStyle: PropType<StyleValue>;
     /** 自定义图标属性 */
     iconProps: PropType<ElIconProps>;
-    trigger: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => "focus" | "hover" | "click" | "contextmenu" | import('element-plus').TooltipTriggerType[]) | (() => import('element-plus/es/utils/typescript').Arrayable<import('element-plus').TooltipTriggerType>) | ((new (...args: any[]) => "focus" | "hover" | "click" | "contextmenu" | import('element-plus').TooltipTriggerType[]) | (() => import('element-plus/es/utils/typescript').Arrayable<import('element-plus').TooltipTriggerType>))[], unknown, unknown, "hover", boolean>;
-    effect: {
-        readonly default: "light";
-        readonly type: PropType<string>;
+    /** 下拉菜单使用的组件类型 */
+    componentType: PropType<"pro">;
+    /** 是否阻止下拉菜单的右键事件 */
+    preventContextmenu: BooleanConstructor;
+    /** 内容按钮属性 */
+    splitButtonProps: PropType<ElButtonProps>;
+    /** 箭头按钮属性 */
+    caretButtonProps: PropType<ElButtonProps>;
+    type: {
+        readonly type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "" | "text" | "default" | "success" | "warning" | "info" | "primary" | "danger", unknown> & {}) | (() => import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "" | "text" | "default" | "success" | "warning" | "info" | "primary" | "danger", unknown>) | ((new (...args: any[]) => import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "" | "text" | "default" | "success" | "warning" | "info" | "primary" | "danger", unknown> & {}) | (() => import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "" | "text" | "default" | "success" | "warning" | "info" | "primary" | "danger", unknown>))[], unknown, unknown>>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
-        readonly __epPropKey: true;
+        __epPropKey: true;
     };
-    type: {
-        readonly type: PropType<import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => "" | "success" | "warning" | "info" | "default" | "primary" | "danger" | "text") | (() => import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "default" | "primary" | "danger" | "text", unknown>) | ((new (...args: any[]) => "" | "success" | "warning" | "info" | "default" | "primary" | "danger" | "text") | (() => import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "default" | "primary" | "danger" | "text", unknown>))[], unknown, unknown>>;
+    effect: {
+        readonly default: "light";
+        readonly type: import('vue').PropType<string>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
-        __epPropKey: true;
+        readonly __epPropKey: true;
     };
-    placement: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "auto" | "auto-start" | "auto-end" | "right" | "left" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import('element-plus').Placement) | ((new (...args: any[]) => "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "auto" | "auto-start" | "auto-end" | "right" | "left" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import('element-plus').Placement))[], unknown, unknown, "bottom", boolean>;
+    placement: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => import('element-plus').Placement & {}) | (() => import('element-plus').Placement) | ((new (...args: any[]) => import('element-plus').Placement & {}) | (() => import('element-plus').Placement))[], unknown, unknown, "bottom", boolean>;
+    popperClass: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+    teleported: import('element-plus/es/utils/index').EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    disabled: BooleanConstructor;
     popperOptions: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => Partial<import('element-plus').Options>) | (() => Partial<import('element-plus').Options>) | ((new (...args: any[]) => Partial<import('element-plus').Options>) | (() => Partial<import('element-plus').Options>))[], unknown, unknown, () => {}, boolean>;
     id: StringConstructor;
-    size: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
     splitButton: BooleanConstructor;
     hideOnClick: import('element-plus/es/utils/index').EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
     loop: import('element-plus/es/utils/index').EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
     showTimeout: import('element-plus/es/utils/index').EpPropFinalized<NumberConstructor, unknown, unknown, 150, boolean>;
     hideTimeout: import('element-plus/es/utils/index').EpPropFinalized<NumberConstructor, unknown, unknown, 150, boolean>;
-    tabindex: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => string | number) | (() => string | number) | ((new (...args: any[]) => string | number) | (() => string | number))[], unknown, unknown, 0, boolean>;
-    maxHeight: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => string | number) | (() => string | number) | ((new (...args: any[]) => string | number) | (() => string | number))[], unknown, unknown, "", boolean>;
-    popperClass: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
-    disabled: import('element-plus/es/utils/index').EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    tabindex: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => (string | number) & {}) | (() => string | number) | ((new (...args: any[]) => (string | number) & {}) | (() => string | number))[], unknown, unknown, 0, boolean>;
+    maxHeight: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => (string | number) & {}) | (() => string | number) | ((new (...args: any[]) => (string | number) & {}) | (() => string | number))[], unknown, unknown, "", boolean>;
     role: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, unknown, unknown, "menu", boolean>;
     buttonProps: {
-        readonly type: PropType<import('element-plus').ButtonProps>;
+        readonly type: import('vue').PropType<import('element-plus').ButtonProps>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    teleported: import('element-plus/es/utils/index').EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    size: PropType<ElButtonProps["size"]>;
+    ariaLabel: StringConstructor;
+    offset: import('element-plus/es/utils/index').EpPropFinalized<NumberConstructor, unknown, unknown, undefined, boolean>;
+    bg: StringConstructor;
+    persistent: import('element-plus/es/utils/index').EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    appendTo: {
+        readonly type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => (string | HTMLElement) & {}) | (() => string | HTMLElement) | ((new (...args: any[]) => (string | HTMLElement) & {}) | (() => string | HTMLElement))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    zIndex: NumberConstructor;
+    visible: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => (boolean | null) & {}) | (() => boolean | null) | ((new (...args: any[]) => (boolean | null) & {}) | (() => boolean | null))[], unknown, unknown, null, boolean>;
+    trigger: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => import('element-plus/es/utils/typescript').Arrayable<import('element-plus').TooltipTriggerType> & {}) | (() => import('element-plus/es/utils/typescript').Arrayable<import('element-plus').TooltipTriggerType>) | ((new (...args: any[]) => import('element-plus/es/utils/typescript').Arrayable<import('element-plus').TooltipTriggerType> & {}) | (() => import('element-plus/es/utils/typescript').Arrayable<import('element-plus').TooltipTriggerType>))[], unknown, unknown, "hover", boolean>;
+    triggerKeys: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | ((new (...args: any[]) => string[]) | (() => string[]))[], unknown, unknown, () => string[], boolean>;
+    popperStyle: PropType<StyleValue>;
+    enterable: {
+        readonly default: true;
+        readonly type: PropType<import('element-plus/es/utils/index').EpPropMergeType<BooleanConstructor, unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        readonly __epPropKey: true;
+    };
+    showArrow: import('element-plus/es/utils/index').EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    arrowOffset: import('element-plus/es/utils/index').EpPropFinalized<NumberConstructor, unknown, unknown, 5, boolean>;
+    virtualRef: {
+        readonly type: import('vue').PropType<import('element-plus').Measurable>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    virtualTriggering: BooleanConstructor;
+    className: StringConstructor;
+    gpuAcceleration: import('element-plus/es/utils/index').EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    arrowBg: StringConstructor;
 };
 export type DropdownProps = ExtractPropTypes<typeof dropdownProps>;
 /**
  * 事件
  */
 export declare const dropdownEmits: {
-    /** SplitButton 点击事件 */
-    click: () => boolean;
+    /** 内容按钮点击事件 */
+    click: (_e: MouseEvent) => boolean;
     /** 菜单项点击事件 */
-    command: (_command: DropdownItem['command']) => boolean;
-    /** 下拉框出现/隐藏事件 */
+    command: (_command: DropdownItem["command"]) => boolean;
+    /** 下拉框显示状态改变事件 */
     visibleChange: (_visible: boolean) => boolean;
     /** 更新选中值 */
-    'update:modelValue': (_value: DropdownItem['command']) => boolean;
+    'update:modelValue': (_value: DropdownItem["command"]) => boolean;
     /** 选中改变的事件 */
-    change: (_active: DropdownItem['command']) => boolean;
+    change: (_active: DropdownItem["command"]) => boolean;
+    'update:visible': (value: boolean) => boolean;
+    'before-enter': () => boolean;
+    'before-leave': () => boolean;
+    'after-enter': () => boolean;
+    'after-leave': () => boolean;
 };
+/**
+ * 属性名
+ */
+export type ElDropdownPropKeys = Array<keyof typeof normalizeDropdownProps>;
+export declare const elDropdownPropKeys: ElDropdownPropKeys;
+export {};

package/lib/ele-dropdown/style/index.cjs

@@ -3,5 +3,8 @@ require("element-plus/es/components/dropdown/style/index");
 require("element-plus/es/components/dropdown-menu/style/index");
 require("element-plus/es/components/dropdown-item/style/index");
 require("element-plus/es/components/icon/style/index");
-require("../../ele-popover/style/index");
+require("element-plus/es/components/scrollbar/style/index");
+require("element-plus/es/components/button-group/style/index");
+require("element-plus/es/components/button/style/index");
+require("../../ele-tooltip/style/index");
 require("./index.scss");

package/lib/ele-dropdown/style/index.scss

@@ -4,22 +4,151 @@
 
 @include set-dropdown-var($ele);
 
-.el-dropdown.ele-dropdown-trigger {
-  color: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-
 .ele-dropdown-trigger > .el-tooltip__trigger {
   outline: none;
 }
 
 .ele-dropdown {
+  &.ele-popper.ele-popover {
+    min-width: auto;
+    width: max-content;
+  }
+
   & > .el-scrollbar {
     background: inherit;
     border-radius: inherit;
   }
+}
+
+.ele-dropdown-menu {
+  padding: eleVar('dropdown', 'padding');
+  box-sizing: border-box;
+}
+
+.ele-dropdown-menu-item {
+  display: flex;
+  align-items: center;
+  height: eleVar('dropdown', 'item-height');
+  line-height: eleVar('dropdown', 'item-height');
+  color: eleVar('dropdown', 'item-color');
+  font-size: eleVar('dropdown', 'item-font-size');
+  padding: eleVar('dropdown', 'item-padding');
+  border-radius: eleVar('dropdown', 'item-radius');
+  transition: (color $transition-base, background-color $transition-base);
+  box-sizing: border-box;
+  cursor: pointer;
+
+  & + .ele-dropdown-menu-item {
+    margin-top: eleVar('dropdown', 'item-margin');
+  }
+
+  & > .el-icon {
+    font-size: eleVar('dropdown', 'icon-size');
+    margin: eleVar('dropdown', 'icon-margin');
+  }
+
+  &:hover,
+  &:focus {
+    color: eleVar('dropdown', 'item-hover-color');
+    background: eleVar('dropdown', 'item-hover-bg');
+  }
+
+  &.is-active {
+    color: eleVar('dropdown', 'item-active-color');
+    background: eleVar('dropdown', 'item-active-bg');
+    font-weight: eleVar('dropdown', 'item-active-font-weight');
+
+    &:hover,
+    &:focus {
+      background: eleVar('dropdown', 'item-active-hover-bg');
+    }
+  }
+
+  &.is-danger {
+    color: eleVar('dropdown', 'item-danger-color');
+
+    &.is-active {
+      background: eleVar('dropdown', 'item-danger-bg');
+
+      &:hover,
+      &:focus {
+        background: eleVar('dropdown', 'item-danger-hover-bg');
+      }
+    }
+  }
+
+  &.is-disabled {
+    color: eleVar('dropdown', 'item-disabled-color');
+    background: none;
+    cursor: not-allowed;
+
+    &.is-active,
+    &.is-active:hover,
+    &.is-active:focus {
+      background: eleVar('dropdown', 'item-disabled-bg');
+    }
+  }
+}
+
+.ele-dropdown-menu-divider {
+  border-top: eleVar('dropdown', 'divider');
+  margin: eleVar('dropdown', 'divider-margin');
+}
+
+.ele-dropdown-caret-button {
+  width: 32px;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+/* 小尺寸 */
+.ele-dropdown-menu.is-small {
+  padding: eleVar('dropdown', 'sm-padding');
+
+  .ele-dropdown-menu-item {
+    height: eleVar('dropdown', 'sm-item-height');
+    line-height: eleVar('dropdown', 'sm-item-height');
+    font-size: eleVar('dropdown', 'sm-item-font-size');
+    padding: eleVar('dropdown', 'sm-item-padding');
+
+    & > .el-icon {
+      font-size: eleVar('dropdown', 'sm-icon-size');
+    }
+  }
+
+  .ele-dropdown-menu-divider {
+    margin: eleVar('dropdown', 'sm-divider-margin');
+  }
+}
+
+/* 大尺寸 */
+.ele-dropdown-menu.is-large {
+  padding: eleVar('dropdown', 'lg-padding');
+
+  .ele-dropdown-menu-item {
+    height: eleVar('dropdown', 'lg-item-height');
+    line-height: eleVar('dropdown', 'lg-item-height');
+    font-size: eleVar('dropdown', 'lg-item-font-size');
+    padding: eleVar('dropdown', 'lg-item-padding');
+
+    & > .el-icon {
+      font-size: eleVar('dropdown', 'lg-icon-size');
+    }
+  }
 
+  .ele-dropdown-menu-divider {
+    margin: eleVar('dropdown', 'lg-divider-margin');
+  }
+}
+
+/* ElDropdown */
+.ele-dropdown-trigger.el-dropdown {
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.ele-dropdown {
   .el-dropdown-menu {
     background: none;
     border-radius: 0;
@@ -67,10 +196,33 @@
 
       &.is-active {
         background: eleVar('dropdown', 'item-danger-bg');
+
+        &:hover,
+        &:focus {
+          background: eleVar('dropdown', 'item-danger-hover-bg');
+        }
+      }
+    }
+
+    &.is-disabled {
+      color: eleVar('dropdown', 'item-disabled-color');
+      background: none;
+      cursor: not-allowed;
+
+      &.is-active,
+      &.is-active:hover,
+      &.is-active:focus {
+        background: eleVar('dropdown', 'item-disabled-bg');
+        font-weight: eleVar('dropdown', 'item-active-font-weight');
       }
     }
   }
 
+  .el-dropdown-menu__item--divided {
+    border-top: eleVar('dropdown', 'divider');
+    margin: eleVar('dropdown', 'divider-margin');
+  }
+
   .el-dropdown-menu--small {
     padding: eleVar('dropdown', 'sm-padding');
 
@@ -79,6 +231,14 @@
       line-height: eleVar('dropdown', 'sm-item-height');
       font-size: eleVar('dropdown', 'sm-item-font-size');
       padding: eleVar('dropdown', 'sm-item-padding');
+
+      & > .el-icon {
+        font-size: eleVar('dropdown', 'sm-icon-size');
+      }
+    }
+
+    .el-dropdown-menu__item--divided {
+      margin: eleVar('dropdown', 'sm-divider-margin');
     }
   }
 
@@ -90,6 +250,14 @@
       line-height: eleVar('dropdown', 'lg-item-height');
       font-size: eleVar('dropdown', 'lg-item-font-size');
       padding: eleVar('dropdown', 'lg-item-padding');
+
+      & > .el-icon {
+        font-size: eleVar('dropdown', 'lg-icon-size');
+      }
+    }
+
+    .el-dropdown-menu__item--divided {
+      margin: eleVar('dropdown', 'lg-divider-margin');
     }
   }
 }

package/lib/ele-edit-tag/index.cjs

@@ -3,6 +3,7 @@ const vue = require("vue");
 const elementPlus = require("element-plus");
 const EleTooltip = require("../ele-tooltip/index");
 const icons = require("../icons");
+const util = require("../ele-basic-select/util");
 const props = require("./props");
 const _sfc_main = vue.defineComponent({
   name: "EleEditTag",
@@ -17,6 +18,7 @@ const _sfc_main = vue.defineComponent({
   props: props.editTagProps,
   emits: props.editTagEmits,
   setup(props2, { emit }) {
+    const { validateChange } = util.useFormValidate();
     const inputTagRef = vue.ref(null);
     const inputRef = vue.ref(null);
     const isEdit = vue.ref(false);
@@ -25,6 +27,11 @@ const _sfc_main = vue.defineComponent({
     const loading = vue.ref(false);
     const tooltipVisible = vue.ref(false);
     const isDeactivated = vue.ref(false);
+    const updateModelValue = (modelValue) => {
+      emit("update:modelValue", modelValue);
+      validateChange();
+      emit("change", modelValue);
+    };
     const addTag = (value) => {
       tooltipVisible.value = false;
       isEdit.value = false;
@@ -34,7 +41,7 @@ const _sfc_main = vue.defineComponent({
       if (value) {
         const temp = props2.modelValue ? [...props2.modelValue] : [];
         temp.push(value);
-        emit("update:modelValue", temp);
+        updateModelValue(temp);
       }
     };
     const removeTag = (index2) => {
@@ -43,7 +50,7 @@ const _sfc_main = vue.defineComponent({
       }
       const temp = [...props2.modelValue];
       temp.splice(index2, 1);
-      emit("update:modelValue", temp);
+      updateModelValue(temp);
     };
     const updateInputValue = (value) => {
       inputValue.value = value;
@@ -222,6 +229,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           disabled: _ctx.loading,
           modelValue: _ctx.inputValue,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.inputValue = $event),
+          validateEvent: false,
           style: vue.normalizeStyle(_ctx.inputStyle),
           onChange: _ctx.handleInputChange,
           onBlur: _ctx.handleInputBlur,

package/lib/ele-edit-tag/index.d.ts

@@ -2,21 +2,21 @@ import { ElTagInstance, ElInputInstance } from '../ele-app/el';
 
 declare const _default: import('vue').DefineComponent<{
     modelValue: import('vue').PropType<string[]>;
-    type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "success" | "warning" | "info" | "primary" | "danger", unknown> | undefined>;
+    type: import('vue').PropType<import('../ele-app/el').ElTagProps["type"]>;
     hit: BooleanConstructor;
     color: StringConstructor;
-    size: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", unknown> | undefined>;
-    effect: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "light" | "dark" | "plain", unknown> | undefined>;
+    size: import('vue').PropType<import('../ele-app/el').ElTagProps["size"]>;
+    effect: import('vue').PropType<import('../ele-app/el').ElTagProps["effect"]>;
     round: BooleanConstructor;
     placeholder: StringConstructor;
-    inputStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    inputTagStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    buttonStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    itemStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    inputStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    inputTagStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    buttonStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    itemStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
     validator: import('vue').PropType<import('./types').Validator>;
     beforeRemove: import('vue').PropType<import('./types').BeforeRemove>;
-    tooltipProps: import('vue').PropType<Partial<import('../ele-tooltip/props').TooltipProps>>;
-    readonly: BooleanConstructor; /** 页面是否失活 */
+    tooltipProps: import('vue').PropType<import('../ele-app/plus').EleTooltipProps>;
+    readonly: BooleanConstructor;
     disabled: BooleanConstructor;
 }, {
     inputTagRef: import('vue').Ref<ElTagInstance>;
@@ -33,31 +33,33 @@ declare const _default: import('vue').DefineComponent<{
     handleInputBlur: () => void;
     handleInputFocus: () => void;
 }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    'update:modelValue': (_value?: string[] | undefined) => boolean;
+    'update:modelValue': (_value?: string[]) => boolean;
+    change: (_value?: string[]) => boolean;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     modelValue: import('vue').PropType<string[]>;
-    type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "success" | "warning" | "info" | "primary" | "danger", unknown> | undefined>;
+    type: import('vue').PropType<import('../ele-app/el').ElTagProps["type"]>;
     hit: BooleanConstructor;
     color: StringConstructor;
-    size: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", unknown> | undefined>;
-    effect: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "light" | "dark" | "plain", unknown> | undefined>;
+    size: import('vue').PropType<import('../ele-app/el').ElTagProps["size"]>;
+    effect: import('vue').PropType<import('../ele-app/el').ElTagProps["effect"]>;
     round: BooleanConstructor;
     placeholder: StringConstructor;
-    inputStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    inputTagStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    buttonStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    itemStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    inputStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    inputTagStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    buttonStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    itemStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
     validator: import('vue').PropType<import('./types').Validator>;
     beforeRemove: import('vue').PropType<import('./types').BeforeRemove>;
-    tooltipProps: import('vue').PropType<Partial<import('../ele-tooltip/props').TooltipProps>>;
-    readonly: BooleanConstructor; /** 页面是否失活 */
+    tooltipProps: import('vue').PropType<import('../ele-app/plus').EleTooltipProps>;
+    readonly: BooleanConstructor;
     disabled: BooleanConstructor;
 }>> & {
     "onUpdate:modelValue"?: ((_value?: string[] | undefined) => any) | undefined;
+    onChange?: ((_value?: string[] | undefined) => any) | undefined;
 }, {
     disabled: boolean;
-    readonly: boolean;
     round: boolean;
+    readonly: boolean;
     hit: boolean;
 }, {}>;
 export default _default;

package/lib/ele-edit-tag/props.cjs

@@ -38,7 +38,9 @@ const editTagProps = {
 };
 const editTagEmits = {
   /** 更新数据 */
-  "update:modelValue": (_value) => true
+  "update:modelValue": (_value) => true,
+  /** 数据改变事件 */
+  change: (_value) => true
 };
 exports.editTagEmits = editTagEmits;
 exports.editTagProps = editTagProps;