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

package/lib/ele-file-list/components/file-table.cjs

@@ -35,20 +35,19 @@ const _sfc_main = vue.defineComponent({
     order: String,
     /** 自定义列配置 */
     columns: Array,
-    /** 右键菜单 */
-    contextMenus: [Array, Function],
-    /** 右键菜单属性 */
-    contextMenuProps: Object
+    /** 文件右键菜单是否打开 */
+    ctxMenuDropdownVisible: Boolean,
+    /** 当前打开的右键菜单对应的文件数据 */
+    contextMenuFileItem: Object
   },
   emits: {
     checkAllChange: () => true,
     itemClick: (_item) => true,
     itemCheckChange: (_item) => true,
-    itemContextMenu: (_option) => true,
+    itemContextOpen: (_option) => true,
     sortChange: (_sort) => true
   },
   setup(props, { emit }) {
-    const itemRefs = vue.ref([]);
     const tableCols = vue.computed(() => {
       if (props.columns) {
         return props.columns;
@@ -75,12 +74,6 @@ const _sfc_main = vue.defineComponent({
       ];
       return cols;
     });
-    const getContextMenus = (item) => {
-      if (typeof props.contextMenus === "function") {
-        return props.contextMenus(item);
-      }
-      return props.contextMenus;
-    };
     const handleCheckAllChange = () => {
       emit("checkAllChange");
     };
@@ -99,27 +92,15 @@ const _sfc_main = vue.defineComponent({
         emit("sortChange", sort);
       }
     };
-    const handleItemContextMenu = (option) => {
-      emit("itemContextMenu", option);
-    };
-    const handleItemContextOpen = (ref2) => {
-      if (itemRefs.value) {
-        itemRefs.value.forEach((r) => {
-          if ((r == null ? void 0 : r.dropdownRef) && r.dropdownRef !== ref2) {
-            r.dropdownRef.handleClose();
-          }
-        });
-      }
+    const handleItemContextOpen = (option) => {
+      emit("itemContextOpen", option);
     };
     return {
-      itemRefs,
       tableCols,
-      getContextMenus,
       handleCheckAllChange,
       handleItemClick,
       handleItemCheckChange,
       handleSortChange,
-      handleItemContextMenu,
       handleItemContextOpen
     };
   }
@@ -161,7 +142,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               }, null, 2)) : vue.createCommentVNode("", true)
             ])) : vue.createCommentVNode("", true),
             vue.createElementVNode("div", {
-              class: "ele-file-list-item-name",
+              class: vue.normalizeClass(["ele-file-list-item-name", { "is-sortable": _ctx.sortable }]),
               onClick: _cache[1] || (_cache[1] = ($event) => _ctx.handleSortChange("name"))
             }, [
               vue.createElementVNode("span", null, vue.toDisplayString(_ctx.nameText), 1),
@@ -171,12 +152,15 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 order: _ctx.order,
                 name: "name"
               }, null, 8, ["sort", "order"])) : vue.createCommentVNode("", true)
-            ]),
+            ], 2),
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.tableCols, (col) => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 key: col.prop,
                 style: vue.normalizeStyle(col.headerStyle || col.style),
-                class: "ele-file-list-item-cell",
+                class: vue.normalizeClass([
+                  "ele-file-list-item-cell",
+                  { "is-sortable": col.sortable }
+                ]),
                 onClick: ($event) => _ctx.handleSortChange(col.prop, col)
               }, [
                 vue.createElementVNode("span", null, [
@@ -195,7 +179,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                   order: _ctx.order,
                   name: col.prop
                 }, null, 8, ["sort", "order", "name"])) : vue.createCommentVNode("", true)
-              ], 12, _hoisted_5);
+              ], 14, _hoisted_5);
             }), 128))
           ])
         ])
@@ -204,19 +188,15 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data, (item) => {
           return vue.openBlock(), vue.createBlock(_component_FileTableItem, {
             key: item.key,
-            ref_for: true,
-            ref: "itemRefs",
             item,
             selectionType: _ctx.selectionType,
             selections: _ctx.selections,
             current: _ctx.current,
             icons: _ctx.icons,
             columns: _ctx.tableCols,
-            contextMenus: _ctx.getContextMenus(item),
-            contextMenuProps: _ctx.contextMenuProps,
+            ctxMenuDropdownVisible: _ctx.ctxMenuDropdownVisible && _ctx.contextMenuFileItem === item,
             onClick: _ctx.handleItemClick,
             onCheckChange: _ctx.handleItemCheckChange,
-            onContextMenu: _ctx.handleItemContextMenu,
             onContextOpen: _ctx.handleItemContextOpen
           }, vue.createSlots({ _: 2 }, [
             vue.renderList(Object.keys(_ctx.$slots), (name) => {
@@ -227,7 +207,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 ])
               };
             })
-          ]), 1032, ["item", "selectionType", "selections", "current", "icons", "columns", "contextMenus", "contextMenuProps", "onClick", "onCheckChange", "onContextMenu", "onContextOpen"]);
+          ]), 1032, ["item", "selectionType", "selections", "current", "icons", "columns", "ctxMenuDropdownVisible", "onClick", "onCheckChange", "onContextOpen"]);
         }), 128))
       ])
     ]),

package/lib/ele-file-list/components/file-table.d.ts

@@ -1,7 +1,5 @@
-import { PropType, Ref } from 'vue';
-import { EleDropdownProps, EleDropdownInstance } from '../../ele-app/plus';
-import { TableItemInstance } from '../props';
-import { IconItem, FileItem, ColumnItem, ItemContextMenuOption, SelectionType, ContextMenus } from '../types';
+import { PropType } from 'vue';
+import { IconItem, FileItem, ColumnItem, SelectionType, ContextOpenOption } from '../types';
 
 declare const _default: import('vue').DefineComponent<{
     /** 文件数据 */
@@ -32,25 +30,22 @@ declare const _default: import('vue').DefineComponent<{
     order: StringConstructor;
     /** 自定义列配置 */
     columns: PropType<ColumnItem[]>;
-    /** 右键菜单 */
-    contextMenus: PropType<ContextMenus>;
-    /** 右键菜单属性 */
-    contextMenuProps: PropType<EleDropdownProps>;
+    /** 文件右键菜单是否打开 */
+    ctxMenuDropdownVisible: BooleanConstructor;
+    /** 当前打开的右键菜单对应的文件数据 */
+    contextMenuFileItem: PropType<FileItem | null>;
 }, {
-    itemRefs: Ref<TableItemInstance[]>;
     tableCols: import('vue').ComputedRef<ColumnItem[]>;
-    getContextMenus: (item: FileItem) => import('../../ele-dropdown/types').DropdownItem[] | undefined;
     handleCheckAllChange: () => void;
     handleItemClick: (item: FileItem) => void;
     handleItemCheckChange: (item: FileItem) => void;
     handleSortChange: (sort: string, col?: ColumnItem) => void;
-    handleItemContextMenu: (option: ItemContextMenuOption) => void;
-    handleItemContextOpen: (ref: EleDropdownInstance) => void;
+    handleItemContextOpen: (option: ContextOpenOption) => void;
 }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     checkAllChange: () => true;
     itemClick: (_item: FileItem) => true;
     itemCheckChange: (_item: FileItem) => true;
-    itemContextMenu: (_option: ItemContextMenuOption) => true;
+    itemContextOpen: (_option: ContextOpenOption) => true;
     sortChange: (_sort: string) => true;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     /** 文件数据 */
@@ -81,19 +76,20 @@ declare const _default: import('vue').DefineComponent<{
     order: StringConstructor;
     /** 自定义列配置 */
     columns: PropType<ColumnItem[]>;
-    /** 右键菜单 */
-    contextMenus: PropType<ContextMenus>;
-    /** 右键菜单属性 */
-    contextMenuProps: PropType<EleDropdownProps>;
+    /** 文件右键菜单是否打开 */
+    ctxMenuDropdownVisible: BooleanConstructor;
+    /** 当前打开的右键菜单对应的文件数据 */
+    contextMenuFileItem: PropType<FileItem | null>;
 }>> & {
     onItemClick?: ((_item: FileItem) => any) | undefined;
     onSortChange?: ((_sort: string) => any) | undefined;
     onCheckAllChange?: (() => any) | undefined;
     onItemCheckChange?: ((_item: FileItem) => any) | undefined;
-    onItemContextMenu?: ((_option: ItemContextMenuOption) => any) | undefined;
+    onItemContextOpen?: ((_option: ContextOpenOption) => any) | undefined;
 }, {
     sortable: boolean;
-    isIndeterminate: boolean;
+    ctxMenuDropdownVisible: boolean;
     isCheckAll: boolean;
+    isIndeterminate: boolean;
 }, {}>;
 export default _default;

package/lib/ele-file-list/index.cjs

@@ -2,24 +2,30 @@
 const vue = require("vue");
 const core = require("../utils/core");
 const receiver = require("../ele-config-provider/receiver");
+const EleDropdown = require("../ele-dropdown/index");
 const FileGrid = require("./components/file-grid");
 const FileTable = require("./components/file-table");
 const props = require("./props");
 const GRID_ITEM_SEL = ".ele-file-list-body>.ele-file-list-item";
 const _sfc_main = vue.defineComponent({
   name: "EleFileList",
-  components: { FileGrid, FileTable },
+  components: { EleDropdown, FileGrid, FileTable },
   props: props.fileListProps,
   emits: props.fileListEmits,
   setup(props2, { emit }) {
     const { lang } = receiver.useLocale("fileList", props2);
-    const selectorStyle = vue.ref({
+    const selectorStyle = vue.reactive({
       top: "0px",
       left: "0px",
       width: "0px",
       height: "0px",
       display: "none"
     });
+    const ctxMenuDropdownRef = vue.ref(null);
+    const ctxMenuDropdownItems = vue.shallowRef([]);
+    const ctxMenuDropdownVirtualRef = vue.ref();
+    const ctxMenuDropdownVisible = vue.ref(false);
+    const contextMenuFileItem = vue.ref(null);
     const isCheckAll = vue.computed(() => {
       return !!(props2.data && props2.data.length && props2.selections && props2.selections.length && !props2.data.some(
         (d) => {
@@ -98,6 +104,62 @@ const _sfc_main = vue.defineComponent({
     const handleItemContextMenu = (option) => {
       emit("itemContextMenu", option);
     };
+    const handleItemCtxMenuClick = (key) => {
+      if (contextMenuFileItem.value != null) {
+        emit("itemContextMenu", { key, item: contextMenuFileItem.value });
+      }
+    };
+    const handleItemCtxMenuVisible = (visible) => {
+      ctxMenuDropdownVisible.value = visible;
+      if (visible && ctxMenuDropdownRef.value != null && contextMenuFileItem.value != null) {
+        emit(
+          "itemContextOpen",
+          ctxMenuDropdownRef.value,
+          contextMenuFileItem.value
+        );
+      }
+    };
+    const getContextMenus = (item) => {
+      if (typeof props2.contextMenus === "function") {
+        return props2.contextMenus(item);
+      }
+      return props2.contextMenus;
+    };
+    const hideAllDropdown = () => {
+      if (ctxMenuDropdownRef.value) {
+        ctxMenuDropdownRef.value.handleClose();
+      }
+    };
+    const showItemContextMenu = (item, triggerEl) => {
+      if (contextMenuFileItem.value != null && contextMenuFileItem.value === item) {
+        return;
+      }
+      hideAllDropdown();
+      vue.nextTick(() => {
+        contextMenuFileItem.value = item;
+        ctxMenuDropdownItems.value = getContextMenus(item) || [];
+        ctxMenuDropdownVirtualRef.value = triggerEl;
+        if (ctxMenuDropdownItems.value.length) {
+          vue.nextTick(() => {
+            ctxMenuDropdownRef.value && ctxMenuDropdownRef.value.handleOpen();
+          });
+        }
+      });
+    };
+    const handleItemContextOpen = (option) => {
+      if (props2.contextMenus == null) {
+        return;
+      }
+      option.e.preventDefault();
+      option.e.stopPropagation();
+      if (ctxMenuDropdownVirtualRef.value !== option.triggerEl) {
+        showItemContextMenu(option.item, option.triggerEl);
+        return;
+      }
+      if (ctxMenuDropdownItems.value.length && ctxMenuDropdownRef.value) {
+        ctxMenuDropdownRef.value.handleOpen();
+      }
+    };
     const handleMousedown = (event) => {
       if (!props2.boxChoose || props2.selectionType !== "checkbox") {
         return;
@@ -120,13 +182,11 @@ const _sfc_main = vue.defineComponent({
           Math.abs(moveY - downY),
           target.clientHeight - top
         );
-        selectorStyle.value = {
-          left: left + "px",
-          top: top + "px",
-          width: width + "px",
-          height: height + "px",
-          display: "block"
-        };
+        selectorStyle.left = left + "px";
+        selectorStyle.top = top + "px";
+        selectorStyle.width = width + "px";
+        selectorStyle.height = height + "px";
+        selectorStyle.display = "block";
         if (width < 6 || height < 6) {
           items.forEach((item) => {
             item.classList.remove("is-active");
@@ -148,7 +208,7 @@ const _sfc_main = vue.defineComponent({
         });
       }, 60);
       const mouseupFn = (e) => {
-        selectorStyle.value = { ...selectorStyle.value, display: "none" };
+        selectorStyle.display = "none";
         const moveX = Math.max(e.clientX, position.left);
         const moveY = Math.max(e.clientY, position.top);
         const left = Math.min(moveX, downX) - position.left;
@@ -181,9 +241,26 @@ const _sfc_main = vue.defineComponent({
       document.addEventListener("mousemove", mousemoveFn);
       document.addEventListener("mouseup", mouseupFn);
     };
+    vue.watch(
+      [() => props2.grid, () => props2.data],
+      () => {
+        hideAllDropdown();
+        ctxMenuDropdownVirtualRef.value = null;
+        contextMenuFileItem.value = null;
+      },
+      { deep: true }
+    );
+    vue.onBeforeUnmount(() => {
+      contextMenuFileItem.value = null;
+    });
     return {
       lang,
       selectorStyle,
+      ctxMenuDropdownRef,
+      ctxMenuDropdownItems,
+      ctxMenuDropdownVirtualRef,
+      ctxMenuDropdownVisible,
+      contextMenuFileItem,
       isCheckAll,
       isIndeterminate,
       handleCheckAllChange,
@@ -191,6 +268,9 @@ const _sfc_main = vue.defineComponent({
       handleItemClick,
       handleSortChange,
       handleItemContextMenu,
+      handleItemCtxMenuClick,
+      handleItemCtxMenuVisible,
+      handleItemContextOpen,
       handleMousedown
     };
   }
@@ -205,6 +285,7 @@ const _export_sfc = (sfc, props2) => {
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_FileGrid = vue.resolveComponent("FileGrid");
   const _component_FileTable = vue.resolveComponent("FileTable");
+  const _component_EleDropdown = vue.resolveComponent("EleDropdown");
   return vue.openBlock(), vue.createElementBlock("div", {
     class: "ele-file-list-group",
     onMousedown: _cache[0] || (_cache[0] = (...args) => _ctx.handleMousedown && _ctx.handleMousedown(...args))
@@ -220,12 +301,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       isIndeterminate: _ctx.isIndeterminate,
       checkAllText: _ctx.lang.selectAll,
       selectedText: _ctx.lang.selectTips,
-      contextMenus: _ctx.contextMenus,
-      contextMenuProps: _ctx.contextMenuProps,
+      ctxMenuDropdownVisible: _ctx.ctxMenuDropdownVisible,
+      contextMenuFileItem: _ctx.contextMenuFileItem,
       onCheckAllChange: _ctx.handleCheckAllChange,
       onItemClick: _ctx.handleItemClick,
       onItemCheckChange: _ctx.handleItemCheckChange,
-      onItemContextMenu: _ctx.handleItemContextMenu
+      onItemContextOpen: _ctx.handleItemContextOpen
     }, vue.createSlots({ _: 2 }, [
       vue.renderList(Object.keys(_ctx.$slots), (name) => {
         return {
@@ -235,7 +316,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         };
       })
-    ]), 1032, ["data", "icons", "selectionType", "selections", "current", "isCheckAll", "isIndeterminate", "checkAllText", "selectedText", "contextMenus", "contextMenuProps", "onCheckAllChange", "onItemClick", "onItemCheckChange", "onItemContextMenu"])) : (vue.openBlock(), vue.createBlock(_component_FileTable, {
+    ]), 1032, ["data", "icons", "selectionType", "selections", "current", "isCheckAll", "isIndeterminate", "checkAllText", "selectedText", "ctxMenuDropdownVisible", "contextMenuFileItem", "onCheckAllChange", "onItemClick", "onItemCheckChange", "onItemContextOpen"])) : (vue.openBlock(), vue.createBlock(_component_FileTable, {
       key: 1,
       data: _ctx.data,
       icons: _ctx.icons,
@@ -251,12 +332,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       sort: _ctx.sort,
       order: _ctx.order,
       columns: _ctx.columns,
-      contextMenus: _ctx.contextMenus,
-      contextMenuProps: _ctx.contextMenuProps,
+      ctxMenuDropdownVisible: _ctx.ctxMenuDropdownVisible,
+      contextMenuFileItem: _ctx.contextMenuFileItem,
       onCheckAllChange: _ctx.handleCheckAllChange,
       onItemClick: _ctx.handleItemClick,
       onItemCheckChange: _ctx.handleItemCheckChange,
-      onItemContextMenu: _ctx.handleItemContextMenu,
+      onItemContextOpen: _ctx.handleItemContextOpen,
       onSortChange: _ctx.handleSortChange
     }, vue.createSlots({ _: 2 }, [
       vue.renderList(Object.keys(_ctx.$slots), (name) => {
@@ -267,11 +348,28 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         };
       })
-    ]), 1032, ["data", "icons", "selectionType", "selections", "current", "isCheckAll", "isIndeterminate", "nameText", "sizeText", "timeText", "sortable", "sort", "order", "columns", "contextMenus", "contextMenuProps", "onCheckAllChange", "onItemClick", "onItemCheckChange", "onItemContextMenu", "onSortChange"])),
+    ]), 1032, ["data", "icons", "selectionType", "selections", "current", "isCheckAll", "isIndeterminate", "nameText", "sizeText", "timeText", "sortable", "sort", "order", "columns", "ctxMenuDropdownVisible", "contextMenuFileItem", "onCheckAllChange", "onItemClick", "onItemCheckChange", "onItemContextOpen", "onSortChange"])),
     vue.createElementVNode("div", {
       class: "ele-file-list-selector",
       style: vue.normalizeStyle(_ctx.selectorStyle)
-    }, null, 4)
+    }, null, 4),
+    _ctx.contextMenus ? (vue.openBlock(), vue.createBlock(_component_EleDropdown, vue.mergeProps({
+      key: 2,
+      persistent: false,
+      placement: "bottom-start",
+      popperClass: "ele-file-list-item-context"
+    }, _ctx.contextMenuProps || {}, {
+      ref: "ctxMenuDropdownRef",
+      componentType: "pro",
+      preventContextmenu: true,
+      trigger: "click",
+      virtualTriggering: true,
+      virtualRef: _ctx.ctxMenuDropdownVirtualRef,
+      disabled: !_ctx.ctxMenuDropdownItems.length,
+      items: _ctx.ctxMenuDropdownItems,
+      onCommand: _ctx.handleItemCtxMenuClick,
+      onVisibleChange: _ctx.handleItemCtxMenuVisible
+    }), null, 16, ["virtualRef", "disabled", "items", "onCommand", "onVisibleChange"])) : vue.createCommentVNode("", true)
   ], 32);
 }
 const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

package/lib/ele-file-list/index.d.ts

@@ -1,5 +1,6 @@
-import { Ref } from 'vue';
-import { FileItem, SortValue, ItemContextMenuOption, FileListLocale } from './types';
+import { EleDropdownInstance } from '../ele-app/plus';
+import { DropdownItem } from '../ele-dropdown/types';
+import { FileItem, SortValue, ItemContextMenuOption, ContextOpenOption, FileListLocale } from './types';
 
 declare const _default: import('vue').DefineComponent<{
     data: {
@@ -20,10 +21,7 @@ declare const _default: import('vue').DefineComponent<{
         type: import('vue').PropType<import('./types').IconItem[]>;
         default: () => import('./types').IconItem[];
     };
-    smallIcons: {
-        type: import('vue').PropType<import('./types').IconItem[]>;
-        default: () => import('./types').IconItem[];
-    };
+    smallIcons: import('vue').PropType<import('./types').IconItem[]>;
     columns: import('vue').PropType<import('./types').ColumnItem[]>;
     boxChoose: BooleanConstructor;
     contextMenus: import('vue').PropType<import('./types').ContextMenus>;
@@ -31,7 +29,29 @@ declare const _default: import('vue').DefineComponent<{
     locale: import('vue').PropType<Partial<FileListLocale>>;
 }, {
     lang: import('vue').ComputedRef<FileListLocale>;
-    selectorStyle: Ref<Partial<import('vue').CSSProperties>>;
+    selectorStyle: {
+        top: string;
+        left: string;
+        width: string;
+        height: string;
+        display: string;
+    };
+    ctxMenuDropdownRef: import('vue').Ref<EleDropdownInstance>;
+    ctxMenuDropdownItems: import('vue').ShallowRef<DropdownItem[]>;
+    ctxMenuDropdownVirtualRef: import('vue').Ref<any>;
+    ctxMenuDropdownVisible: import('vue').Ref<any>;
+    contextMenuFileItem: import('vue').Ref<{
+        [x: string]: unknown;
+        [x: number]: unknown;
+        [x: symbol]: unknown;
+        key: string | number;
+        name: string;
+        url?: string | undefined;
+        thumbnail?: string | undefined;
+        isDirectory?: boolean | undefined;
+        length?: string | undefined;
+        updateTime?: string | undefined;
+    } | null | undefined>;
     isCheckAll: import('vue').ComputedRef<boolean>;
     isIndeterminate: import('vue').ComputedRef<boolean>;
     handleCheckAllChange: () => void;
@@ -39,6 +59,9 @@ declare const _default: import('vue').DefineComponent<{
     handleItemClick: (item: FileItem) => void;
     handleSortChange: (name: string) => void;
     handleItemContextMenu: (option: ItemContextMenuOption) => void;
+    handleItemCtxMenuClick: (key: string) => void;
+    handleItemCtxMenuVisible: (visible: boolean) => void;
+    handleItemContextOpen: (option: ContextOpenOption) => void;
     handleMousedown: (event: MouseEvent) => void;
 }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     itemClick: (_item: FileItem) => boolean;
@@ -46,6 +69,7 @@ declare const _default: import('vue').DefineComponent<{
     'update:selections': (_selection?: FileItem[]) => boolean;
     'update:current': (_current?: FileItem | null) => boolean;
     itemContextMenu: (_option: ItemContextMenuOption) => boolean;
+    itemContextOpen: (_dropdownRef: EleDropdownInstance, _item: FileItem) => boolean;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     data: {
         type: import('vue').PropType<FileItem[]>;
@@ -65,10 +89,7 @@ declare const _default: import('vue').DefineComponent<{
         type: import('vue').PropType<import('./types').IconItem[]>;
         default: () => import('./types').IconItem[];
     };
-    smallIcons: {
-        type: import('vue').PropType<import('./types').IconItem[]>;
-        default: () => import('./types').IconItem[];
-    };
+    smallIcons: import('vue').PropType<import('./types').IconItem[]>;
     columns: import('vue').PropType<import('./types').ColumnItem[]>;
     boxChoose: BooleanConstructor;
     contextMenus: import('vue').PropType<import('./types').ContextMenus>;
@@ -79,12 +100,12 @@ declare const _default: import('vue').DefineComponent<{
     onSortChange?: ((_sorter: SortValue) => any) | undefined;
     "onUpdate:selections"?: ((_selection?: FileItem[] | undefined) => any) | undefined;
     "onUpdate:current"?: ((_current?: FileItem | null | undefined) => any) | undefined;
+    onItemContextOpen?: ((_dropdownRef: EleDropdownInstance, _item: FileItem) => any) | undefined;
     onItemContextMenu?: ((_option: ItemContextMenuOption) => any) | undefined;
 }, {
     grid: boolean;
     sortable: boolean;
     icons: import('./types').IconItem[];
-    smallIcons: import('./types').IconItem[];
     boxChoose: boolean;
 }, {}>;
 export default _default;

package/lib/ele-file-list/props.cjs

@@ -32,12 +32,7 @@ const fileListProps = {
     }
   },
   /** 表格模式后缀对应图标 */
-  smallIcons: {
-    type: Array,
-    default: () => {
-      return icons.smallIcons;
-    }
-  },
+  smallIcons: Array,
   /** 表格模式自定义列配置 */
   columns: Array,
   /** 多选时是否支持鼠标框选 */
@@ -59,7 +54,9 @@ const fileListEmits = {
   /** 更新单选选中数据 */
   "update:current": (_current) => true,
   /** item 右键菜单项点击事件 */
-  itemContextMenu: (_option) => true
+  itemContextMenu: (_option) => true,
+  /** item 右键菜单打开事件 */
+  itemContextOpen: (_dropdownRef, _item) => true
 };
 exports.fileListEmits = fileListEmits;
 exports.fileListProps = fileListProps;

package/lib/ele-file-list/props.d.ts

@@ -1,5 +1,5 @@
 import { PropType, ExtractPropTypes } from 'vue';
-import { EleDropdownProps } from '../ele-app/plus';
+import { EleDropdownProps, EleDropdownInstance } from '../ele-app/plus';
 import { default as FileGridItem } from './components/file-grid-item';
 import { default as FileTableItem } from './components/file-table-item';
 import { IconItem, FileItem, SortValue, ItemContextMenuOption, ColumnItem, SelectionType, ContextMenus, FileListLocale } from './types';
@@ -36,10 +36,7 @@ export declare const fileListProps: {
         default: () => IconItem[];
     };
     /** 表格模式后缀对应图标 */
-    smallIcons: {
-        type: PropType<IconItem[]>;
-        default: () => IconItem[];
-    };
+    smallIcons: PropType<IconItem[]>;
     /** 表格模式自定义列配置 */
     columns: PropType<ColumnItem[]>;
     /** 多选时是否支持鼠标框选 */
@@ -66,6 +63,8 @@ export declare const fileListEmits: {
     'update:current': (_current?: FileItem | null) => boolean;
     /** item 右键菜单项点击事件 */
     itemContextMenu: (_option: ItemContextMenuOption) => boolean;
+    /** item 右键菜单打开事件 */
+    itemContextOpen: (_dropdownRef: EleDropdownInstance, _item: FileItem) => boolean;
 };
 /**
  * 网格 item 实例

package/lib/ele-file-list/style/index.scss

@@ -131,10 +131,12 @@
   .ele-file-list-body {
     padding-top: eleVar('file', 'item-space');
     padding-left: eleVar('file', 'item-space');
+    box-sizing: border-box;
   }
 
   /*  item */
   .ele-file-list-item {
+    flex-shrink: 0;
     width: eleVar('file', 'item-width');
     margin-right: eleVar('file', 'item-space');
     margin-bottom: eleVar('file', 'item-space');
@@ -171,7 +173,7 @@
         width: eleVar('file', 'image-size');
         height: eleVar('file', 'image-size');
         border-radius: eleVar('file', 'image-radius');
-        object-fit: cover;
+        object-fit: contain;
       }
     }
 
@@ -332,7 +334,7 @@
 
       & > .ele-file-list-item-image {
         border-radius: eleVar('file', 'td-image-radius');
-        object-fit: cover;
+        object-fit: contain;
       }
     }
 
@@ -393,10 +395,13 @@
     .ele-file-list-item-name,
     .ele-file-list-item-cell {
       transition: color $transition-base;
-      cursor: pointer;
 
-      &:hover {
-        color: elVar('color-primary');
+      &.is-sortable {
+        cursor: pointer;
+
+        &:hover {
+          color: elVar('color-primary');
+        }
       }
     }
   }

package/lib/ele-file-list/types.d.ts

@@ -23,7 +23,7 @@ export type IconItemType = 'file' | 'dir';
  */
 export interface FileItem extends Record<string | number | symbol, unknown> {
   /** 唯一标识 */
-  key: string;
+  key: string | number;
   /** 文件名称 */
   name: string;
   /** 文件访问地址 */
@@ -93,6 +93,18 @@ export type ContextMenusFunc = (item: FileItem) => DropdownItem[];
  */
 export type ContextMenus = DropdownItem[] | ContextMenusFunc;
 
+/**
+ * 右键菜单打开参数
+ */
+export interface ContextOpenOption {
+  /** 数据 */
+  item: FileItem;
+  /** 触发节点 */
+  triggerEl: HTMLElement;
+  /** 事件对象 */
+  e: MouseEvent;
+}
+
 /**
  * 国际化
  */