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

package/es/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/es/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/es/ele-edit-tag/index.js

@@ -2,6 +2,7 @@ import { defineComponent, ref, onDeactivated, onActivated, nextTick, resolveComp
 import { ElTag, ElInput, ElIcon } from "element-plus";
 import EleTooltip from "../ele-tooltip/index";
 import { PlusOutlined, LoadingOutlined } from "../icons";
+import { useFormValidate } from "../ele-basic-select/util";
 import { editTagProps, editTagEmits } from "./props";
 const _sfc_main = defineComponent({
   name: "EleEditTag",
@@ -16,6 +17,7 @@ const _sfc_main = defineComponent({
   props: editTagProps,
   emits: editTagEmits,
   setup(props, { emit }) {
+    const { validateChange } = useFormValidate();
     const inputTagRef = ref(null);
     const inputRef = ref(null);
     const isEdit = ref(false);
@@ -24,6 +26,11 @@ const _sfc_main = defineComponent({
     const loading = ref(false);
     const tooltipVisible = ref(false);
     const isDeactivated = ref(false);
+    const updateModelValue = (modelValue) => {
+      emit("update:modelValue", modelValue);
+      validateChange();
+      emit("change", modelValue);
+    };
     const addTag = (value) => {
       tooltipVisible.value = false;
       isEdit.value = false;
@@ -33,7 +40,7 @@ const _sfc_main = defineComponent({
       if (value) {
         const temp = props.modelValue ? [...props.modelValue] : [];
         temp.push(value);
-        emit("update:modelValue", temp);
+        updateModelValue(temp);
       }
     };
     const removeTag = (index2) => {
@@ -42,7 +49,7 @@ const _sfc_main = defineComponent({
       }
       const temp = [...props.modelValue];
       temp.splice(index2, 1);
-      emit("update:modelValue", temp);
+      updateModelValue(temp);
     };
     const updateInputValue = (value) => {
       inputValue.value = value;
@@ -221,6 +228,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: normalizeStyle(_ctx.inputStyle),
           onChange: _ctx.handleInputChange,
           onBlur: _ctx.handleInputBlur,

package/es/ele-edit-tag/props.d.ts

@@ -1,4 +1,7 @@
 import { PropType, ExtractPropTypes } from 'vue';
+import { StyleValue } from '../ele-app/types';
+import { ElTagProps } from '../ele-app/el';
+import { EleTooltipProps } from '../ele-app/plus';
 import { Validator, BeforeRemove } from './types';
 
 /**
@@ -8,33 +11,33 @@ export declare const editTagProps: {
     /** 标签数据 */
     modelValue: PropType<string[]>;
     /** 类型 */
-    type: PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "success" | "warning" | "info" | "primary" | "danger", unknown> | undefined>;
+    type: PropType<ElTagProps["type"]>;
     /** 是否有边框描边 */
     hit: BooleanConstructor;
     /** 颜色 */
     color: StringConstructor;
     /** 尺寸 */
-    size: PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", unknown> | undefined>;
+    size: PropType<ElTagProps["size"]>;
     /** 主题 */
-    effect: PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "light" | "dark" | "plain", unknown> | undefined>;
+    effect: PropType<ElTagProps["effect"]>;
     /** 是否为圆形 */
     round: BooleanConstructor;
     /** 提示文本 */
     placeholder: StringConstructor;
     /** 输入框样式 */
-    inputStyle: PropType<Partial<import('vue').CSSProperties>>;
+    inputStyle: PropType<StyleValue>;
     /** 输入框外层标签样式 */
-    inputTagStyle: PropType<Partial<import('vue').CSSProperties>>;
+    inputTagStyle: PropType<StyleValue>;
     /** 添加按钮样式 */
-    buttonStyle: PropType<Partial<import('vue').CSSProperties>>;
+    buttonStyle: PropType<StyleValue>;
     /** 标签样式 */
-    itemStyle: PropType<Partial<import('vue').CSSProperties>>;
+    itemStyle: PropType<StyleValue>;
     /** 添加校验方法 */
     validator: PropType<Validator>;
     /** 移除校验方法 */
     beforeRemove: PropType<BeforeRemove>;
     /** 提示属性 */
-    tooltipProps: PropType<Partial<import('../ele-tooltip/props').TooltipProps>>;
+    tooltipProps: PropType<EleTooltipProps>;
     /** 是否只读 */
     readonly: BooleanConstructor;
     /** 是否禁用 */
@@ -47,4 +50,6 @@ export type EditTagProps = ExtractPropTypes<typeof editTagProps>;
 export declare const editTagEmits: {
     /** 更新数据 */
     'update:modelValue': (_value?: string[]) => boolean;
+    /** 数据改变事件 */
+    change: (_value?: string[]) => boolean;
 };

package/es/ele-edit-tag/props.js

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

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

@@ -1,3 +1,4 @@
+import { StyleValue } from '../ele-app/types';
 import { EleTextProps, EleTextInstance } from '../ele-app/plus';
 import { EllipsisTooltip } from './types';
 
@@ -21,8 +22,8 @@ declare const _default: import('vue').DefineComponent<{
     strong: BooleanConstructor;
     italic: BooleanConstructor;
     icon: import('vue').PropType<import('../ele-text/types').TextIcon>;
-    iconProps: import('vue').PropType<import('../ele-app/el').ElIconProps>; /** 文本组件 */
-    iconStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    iconProps: import('vue').PropType<import('../ele-app/el').ElIconProps>;
+    iconStyle: import('vue').PropType<StyleValue>;
 }, {
     textRef: import('vue').Ref<EleTextInstance>;
     virtualRef: import('vue').Ref<HTMLElement | undefined>;
@@ -51,8 +52,8 @@ declare const _default: import('vue').DefineComponent<{
     strong: BooleanConstructor;
     italic: BooleanConstructor;
     icon: import('vue').PropType<import('../ele-text/types').TextIcon>;
-    iconProps: import('vue').PropType<import('../ele-app/el').ElIconProps>; /** 文本组件 */
-    iconStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    iconProps: import('vue').PropType<import('../ele-app/el').ElIconProps>;
+    iconStyle: import('vue').PropType<StyleValue>;
 }>>, {
     tag: string;
     underline: boolean;

package/es/ele-ellipsis/props.d.ts

@@ -28,6 +28,6 @@ export declare const ellipsisProps: {
     italic: BooleanConstructor;
     icon: PropType<import('../ele-text/types').TextIcon>;
     iconProps: PropType<import('../ele-app/el').ElIconProps>;
-    iconStyle: PropType<Partial<import('vue').CSSProperties>>;
+    iconStyle: PropType<import('../ele-app/types').StyleValue>;
 };
 export type EllipsisProps = ExtractPropTypes<typeof ellipsisProps>;

package/es/ele-file-list/components/file-grid-item.d.ts

@@ -1,7 +1,5 @@
 import { PropType } from 'vue';
-import { EleDropdownProps, EleDropdownInstance } from '../../ele-app/plus';
-import { DropdownItem } from '../../ele-dropdown/types';
-import { IconItem, FileItem, ItemContextMenuOption, SelectionType } from '../types';
+import { IconItem, FileItem, SelectionType, ContextOpenOption } from '../types';
 
 declare const _default: import('vue').DefineComponent<{
     /** 数据 */
@@ -17,26 +15,20 @@ declare const _default: import('vue').DefineComponent<{
     current: PropType<FileItem>;
     /** 后缀对应的图标 */
     icons: PropType<IconItem[]>;
-    /** 右键菜单 */
-    contextMenus: PropType<DropdownItem[]>;
-    /** 右键菜单属性 */
-    contextMenuProps: PropType<EleDropdownProps>;
+    /** 右键下拉菜单是否显示 */
+    ctxMenuDropdownVisible: BooleanConstructor;
 }, {
-    dropdownRef: import('vue').Ref<EleDropdownInstance>;
-    dropdownVisible: import('vue').Ref<boolean>;
+    dropdownTriggerRef: import('vue').Ref<HTMLElement | null>;
     selectable: import('vue').ComputedRef<boolean>;
     selected: import('vue').ComputedRef<boolean>;
     icon: import('vue').ComputedRef<string | undefined>;
     handleClick: () => void;
     handleCheckChange: () => void;
     handleContextmenu: (e: MouseEvent) => void;
-    handleItemContextMenu: (command: string) => void;
-    handleContextVisibleChange: (visible: boolean) => void;
 }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     click: (_item: FileItem) => true;
     checkChange: (_item: FileItem) => true;
-    contextMenu: (_option: ItemContextMenuOption) => true;
-    contextOpen: (_ref: EleDropdownInstance) => true;
+    contextOpen: (_option: ContextOpenOption) => true;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     /** 数据 */
     item: {
@@ -51,14 +43,13 @@ declare const _default: import('vue').DefineComponent<{
     current: PropType<FileItem>;
     /** 后缀对应的图标 */
     icons: PropType<IconItem[]>;
-    /** 右键菜单 */
-    contextMenus: PropType<DropdownItem[]>;
-    /** 右键菜单属性 */
-    contextMenuProps: PropType<EleDropdownProps>;
+    /** 右键下拉菜单是否显示 */
+    ctxMenuDropdownVisible: BooleanConstructor;
 }>> & {
     onClick?: ((_item: FileItem) => any) | undefined;
-    onContextMenu?: ((_option: ItemContextMenuOption) => any) | undefined;
-    onContextOpen?: ((_ref: EleDropdownInstance) => any) | undefined;
     onCheckChange?: ((_item: FileItem) => any) | undefined;
-}, {}, {}>;
+    onContextOpen?: ((_option: ContextOpenOption) => any) | undefined;
+}, {
+    ctxMenuDropdownVisible: boolean;
+}, {}>;
 export default _default;

package/es/ele-file-list/components/file-grid-item.js

@@ -1,8 +1,6 @@
-import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, withModifiers, createElementVNode, renderSlot, toDisplayString, createCommentVNode, createBlock, mergeProps, createSlots, withCtx } from "vue";
-import EleDropdown from "../../ele-dropdown/index";
+import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, withModifiers, createElementVNode, renderSlot, toDisplayString, createCommentVNode } from "vue";
 const _sfc_main = defineComponent({
   name: "FileGridItem",
-  components: { EleDropdown },
   props: {
     /** 数据 */
     item: {
@@ -17,20 +15,16 @@ const _sfc_main = defineComponent({
     current: Object,
     /** 后缀对应的图标 */
     icons: Array,
-    /** 右键菜单 */
-    contextMenus: Array,
-    /** 右键菜单属性 */
-    contextMenuProps: Object
+    /** 右键下拉菜单是否显示 */
+    ctxMenuDropdownVisible: Boolean
   },
   emits: {
     click: (_item) => true,
     checkChange: (_item) => true,
-    contextMenu: (_option) => true,
-    contextOpen: (_ref) => true
+    contextOpen: (_option) => true
   },
   setup(props, { emit }) {
-    const dropdownRef = ref(null);
-    const dropdownVisible = ref(false);
+    const dropdownTriggerRef = ref(null);
     const selectable = computed(() => {
       return props.selectionType === "checkbox" || props.selectionType === "radio";
     });
@@ -74,32 +68,22 @@ const _sfc_main = defineComponent({
       emit("checkChange", props.item);
     };
     const handleContextmenu = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (dropdownRef.value) {
-        dropdownRef.value.handleOpen();
-      }
-    };
-    const handleItemContextMenu = (command) => {
-      emit("contextMenu", { key: command, item: props.item });
-    };
-    const handleContextVisibleChange = (visible) => {
-      dropdownVisible.value = visible;
-      if (visible) {
-        emit("contextOpen", dropdownRef.value);
+      if (dropdownTriggerRef.value != null) {
+        emit("contextOpen", {
+          item: props.item,
+          triggerEl: dropdownTriggerRef.value,
+          e
+        });
       }
     };
     return {
-      dropdownRef,
-      dropdownVisible,
+      dropdownTriggerRef,
       selectable,
       selected,
       icon,
       handleClick,
       handleCheckChange,
-      handleContextmenu,
-      handleItemContextMenu,
-      handleContextVisibleChange
+      handleContextmenu
     };
   }
 });
@@ -118,12 +102,11 @@ const _hoisted_5 = [
   _hoisted_4
 ];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_EleDropdown = resolveComponent("EleDropdown");
   return openBlock(), createElementBlock("div", {
     class: normalizeClass([
       "ele-file-list-item",
       { "is-checked": _ctx.selected },
-      { "is-active": _ctx.dropdownVisible }
+      { "is-active": _ctx.ctxMenuDropdownVisible }
     ]),
     onClick: _cache[3] || (_cache[3] = withModifiers((...args) => _ctx.handleClick && _ctx.handleClick(...args), ["stop"]))
   }, [
@@ -154,34 +137,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       class: "ele-file-list-item-checkbox",
       onClick: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.handleCheckChange && _ctx.handleCheckChange(...args), ["stop"]))
     }, _hoisted_5)) : createCommentVNode("", true),
-    _ctx.contextMenus || _ctx.$slots.contextMenu ? (openBlock(), createBlock(_component_EleDropdown, mergeProps({
-      key: 1,
-      placement: "bottom-start",
-      popperClass: "ele-file-list-item-context"
-    }, _ctx.contextMenuProps || {}, {
-      ref: "dropdownRef",
-      trigger: "click",
+    createElementVNode("div", {
+      ref: "dropdownTriggerRef",
       class: "ele-file-list-item-dropdown",
-      items: _ctx.contextMenus,
-      onCommand: _ctx.handleItemContextMenu,
-      onVisibleChange: _ctx.handleContextVisibleChange
-    }), createSlots({
-      default: withCtx(() => [
-        createElementVNode("div", {
-          onClick: _cache[2] || (_cache[2] = withModifiers(() => {
-          }, ["stop"]))
-        })
-      ]),
-      _: 2
-    }, [
-      _ctx.$slots.contextMenu ? {
-        name: "dropdownMenu",
-        fn: withCtx(() => [
-          renderSlot(_ctx.$slots, "contextMenu", { item: _ctx.item })
-        ]),
-        key: "0"
-      } : void 0
-    ]), 1040, ["items", "onCommand", "onVisibleChange"])) : createCommentVNode("", true)
+      onClick: _cache[2] || (_cache[2] = withModifiers(() => {
+      }, ["stop"]))
+    }, null, 512)
   ], 2);
 }
 const fileGridItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);