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

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

@@ -4,112 +4,170 @@ const VueDraggable = require("vuedraggable");
 const elementPlus = require("element-plus");
 const core = require("../utils/core");
 const receiver = require("../ele-config-provider/receiver");
+const EleImageViewer = require("../ele-image-viewer/index");
 const icons = require("../icons");
 const ListItem = require("./components/list-item");
 const props = require("./props");
+const ownSlots = ["default", "icon"];
 const _sfc_main = vue.defineComponent({
   name: "EleUploadList",
   components: {
     VueDraggable,
     ElUpload: elementPlus.ElUpload,
-    ElImage: elementPlus.ElImage,
     ElIcon: elementPlus.ElIcon,
     PlusOutlined: icons.PlusOutlined,
+    EleImageViewer,
     ListItem
   },
   props: props.uploadListProps,
   emits: props.uploadListEmits,
   setup(props2, { emit }) {
     const { lang } = receiver.useLocale("upload", props2);
-    const previewRef = vue.ref(null);
-    const previewOption = vue.reactive({
-      /** 是否打开 */
-      visible: false,
-      /** 当前图片地址 */
-      current: "",
-      /** 当前为第几个图片 */
-      currentIndex: 0,
-      /** 图片列表 */
-      images: []
-    });
+    const previewVisible = vue.ref(false);
+    const previewImages = vue.ref([]);
+    const previewCurrentIndex = vue.ref(0);
+    const imageObjectUrls = vue.ref([]);
+    const uploadInputRef = vue.ref(null);
+    let editItem = null;
     const uploadEnable = vue.computed(() => {
       return !props2.readonly && !(typeof props2.limit === "number" && props2.limit > 0 && props2.modelValue != null && props2.modelValue.length >= props2.limit);
     });
-    const draggableProps = vue.computed(() => {
-      const defaultProps = {
-        itemKey: "key",
-        animation: 300,
-        setData: () => void 0,
-        modelValue: props2.modelValue,
-        draggable: ".ele-draggable",
-        class: ["ele-upload-list", { "is-disabled": props2.disabled }]
+    const buildItem = (file) => {
+      return {
+        key: "ele" + core.uuid(16, 10) + String(Date.now()),
+        name: file.name,
+        status: void 0,
+        progress: 0,
+        file
       };
-      if (typeof props2.sortable === "boolean" || props2.sortable == null) {
-        return defaultProps;
+    };
+    const getItemImageUrl = (item, file) => {
+      if (item && item.url) {
+        return item.url;
       }
-      return Object.assign(defaultProps, props2.sortable);
-    });
+      const itemFile = item == null ? void 0 : item.file;
+      if (itemFile != null && itemFile.type.startsWith("image")) {
+        const t = imageObjectUrls.value.find((d) => d.file === itemFile);
+        if (t != null) {
+          return t.url;
+        }
+        const url = URL.createObjectURL(itemFile);
+        imageObjectUrls.value.push({ file: itemFile, url });
+        return url;
+      }
+    };
+    const previewItem = (item) => {
+      if (props2.modelValue != null) {
+        const data = [];
+        props2.modelValue.forEach((d) => {
+          const url = getItemImageUrl(d);
+          if (url) {
+            data.push({ item: d, url });
+          }
+        });
+        const index2 = data.findIndex((t) => t.item.key === item.key);
+        if (index2 !== -1) {
+          const urls = data.map((d) => d.url);
+          openImagePreview(urls, index2);
+        }
+      }
+    };
+    const openImagePreview = (urls, index2) => {
+      previewImages.value = urls;
+      previewCurrentIndex.value = index2;
+      previewVisible.value = true;
+    };
     const updateModelValue = (value) => {
       emit("update:modelValue", value);
     };
     const handleUpload = (file) => {
-      if (!uploadEnable.value || props2.disabled) {
-        return false;
-      }
-      const item = {
-        key: core.uuid(),
-        name: file.name,
-        status: void 0,
-        progress: 0,
-        file
-      };
-      if (file.type.startsWith("image")) {
-        item.url = URL.createObjectURL(file);
+      if (uploadEnable.value && !props2.disabled) {
+        const item = buildItem(file);
+        emit("upload", item);
       }
-      emit("upload", item);
       return false;
     };
+    const handleItemClick = (item) => {
+      if (props2.preview) {
+        previewItem(item);
+      }
+      emit("itemClick", item);
+    };
     const handleItemRemove = (item) => {
       emit("remove", item);
     };
-    const handleItemClick = (item) => {
-      if (props2.preview && item.url && props2.modelValue != null) {
-        const temp = props2.modelValue.filter((d) => !!d.url);
-        const i = temp.findIndex((t) => t.key === item.key);
-        if (i !== -1) {
-          previewOption.images = temp.map((d) => d.url);
-          previewOption.current = item.url;
-          previewOption.currentIndex = i;
-          previewOption.visible = true;
-          vue.nextTick(() => {
-            var _a;
-            const el = (_a = previewRef.value) == null ? void 0 : _a.$el;
-            if (el) {
-              const imgEl = el.querySelector("img");
-              imgEl && imgEl.click();
-            }
-          });
-        }
+    const handleItemEdit = (item) => {
+      if (props2.beforeItemEdit && props2.beforeItemEdit(item) === false) {
+        return;
+      }
+      const $input = uploadInputRef.value;
+      if ($input != null) {
+        editItem = item;
+        $input.value = "";
+        $input && $input.click();
       }
-      emit("itemClick", item);
+    };
+    const handleItemPreview = (item) => {
+      previewItem(item);
+      emit("preview", item);
     };
     const handleItemRetry = (item) => {
       emit("retry", item);
     };
-    vue.onDeactivated(() => {
-      previewOption.visible = false;
+    const handleInputChange = (e) => {
+      var _a;
+      const file = (_a = e.target.files) == null ? void 0 : _a[0];
+      if (file != null && editItem != null) {
+        const result = { item: editItem, newItem: buildItem(file) };
+        editItem = null;
+        emit("editUpload", result);
+      }
+    };
+    const handleUploadClick = (e) => {
+      if (props2.beforeUploadClick && props2.beforeUploadClick(e) === false) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    };
+    vue.watch(
+      () => props2.modelValue,
+      () => {
+        if (props2.modelValue != null) {
+          props2.modelValue.forEach((item) => {
+            getItemImageUrl(item);
+          });
+        }
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    );
+    vue.onBeforeUnmount(() => {
+      imageObjectUrls.value.forEach((item) => {
+        URL.revokeObjectURL(item.url);
+      });
+      imageObjectUrls.value = [];
     });
     return {
+      ownSlots,
       lang,
-      previewRef,
-      previewOption,
+      previewVisible,
+      previewImages,
+      previewCurrentIndex,
+      imageObjectUrls,
+      uploadInputRef,
       uploadEnable,
-      draggableProps,
       updateModelValue,
       handleUpload,
-      handleItemRemove,
       handleItemClick,
-      handleItemRetry
+      handleItemRemove,
+      handleItemEdit,
+      handleItemPreview,
+      handleItemRetry,
+      handleInputChange,
+      handleUploadClick,
+      openImagePreview
     };
   }
 });
@@ -120,32 +178,50 @@ const _export_sfc = (sfc, props2) => {
   }
   return target;
 };
-const _hoisted_1 = { style: { "display": "none" } };
+const _hoisted_1 = ["accept"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ListItem = vue.resolveComponent("ListItem");
   const _component_PlusOutlined = vue.resolveComponent("PlusOutlined");
   const _component_ElIcon = vue.resolveComponent("ElIcon");
   const _component_ElUpload = vue.resolveComponent("ElUpload");
-  const _component_ElImage = vue.resolveComponent("ElImage");
+  const _component_EleImageViewer = vue.resolveComponent("EleImageViewer");
   const _component_VueDraggable = vue.resolveComponent("VueDraggable");
-  return vue.openBlock(), vue.createBlock(_component_VueDraggable, vue.mergeProps(_ctx.draggableProps, { "onUpdate:modelValue": _ctx.updateModelValue }), {
+  return vue.openBlock(), vue.createBlock(_component_VueDraggable, vue.mergeProps({
+    itemKey: "key",
+    animation: 300,
+    setData: () => void 0,
+    handle: ".ele-upload-handle",
+    class: [
+      "ele-upload-list",
+      { "is-file-list": _ctx.listType === "file" },
+      { "is-disabled": _ctx.disabled }
+    ]
+  }, !_ctx.sortable || _ctx.sortable === true ? {} : _ctx.sortable, {
+    modelValue: _ctx.modelValue || [],
+    "onUpdate:modelValue": _ctx.updateModelValue
+  }), {
     item: vue.withCtx(({ element }) => [
       vue.createVNode(_component_ListItem, {
         item: element,
         readonly: _ctx.readonly,
         disabled: _ctx.disabled,
-        progressProps: _ctx.progressProps,
+        sortable: _ctx.sortable && !_ctx.readonly && !_ctx.disabled && _ctx.limit !== 1,
         imageProps: _ctx.imageProps,
+        progressProps: _ctx.progressProps,
+        imageObjectUrls: _ctx.imageObjectUrls,
+        tools: _ctx.tools,
+        listType: _ctx.listType,
         locale: _ctx.lang,
         style: vue.normalizeStyle(_ctx.itemStyle),
-        class: vue.normalizeClass({
-          "ele-draggable": _ctx.sortable && !_ctx.readonly && !_ctx.disabled && _ctx.limit !== 1
-        }),
         onItemClick: _ctx.handleItemClick,
         onRemove: _ctx.handleItemRemove,
+        onEdit: _ctx.handleItemEdit,
+        onPreview: _ctx.handleItemPreview,
         onRetry: _ctx.handleItemRetry
       }, vue.createSlots({ _: 2 }, [
-        vue.renderList(Object.keys(_ctx.$slots), (name) => {
+        vue.renderList(Object.keys(_ctx.$slots).filter(
+          (k) => !_ctx.ownSlots.includes(k)
+        ), (name) => {
           return {
             name,
             fn: vue.withCtx((slotProps) => [
@@ -153,12 +229,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             ])
           };
         })
-      ]), 1032, ["item", "readonly", "disabled", "progressProps", "imageProps", "locale", "style", "class", "onItemClick", "onRemove", "onRetry"])
+      ]), 1032, ["item", "readonly", "disabled", "sortable", "imageProps", "progressProps", "imageObjectUrls", "tools", "listType", "locale", "style", "onItemClick", "onRemove", "onEdit", "onPreview", "onRetry"])
     ]),
     footer: vue.withCtx(() => [
-      _ctx.uploadEnable ? (vue.openBlock(), vue.createElementBlock("div", {
+      _ctx.uploadEnable && _ctx.buttonStyle !== false ? (vue.openBlock(), vue.createElementBlock("div", {
         key: 0,
-        style: vue.normalizeStyle(_ctx.buttonStyle),
+        style: vue.normalizeStyle(typeof _ctx.buttonStyle === "boolean" ? void 0 : _ctx.buttonStyle),
         class: "ele-upload-item ele-upload-button"
       }, [
         vue.createVNode(_component_ElUpload, {
@@ -167,37 +243,44 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           accept: _ctx.accept,
           multiple: _ctx.multiple,
           disabled: _ctx.disabled,
-          showUploadList: false,
+          showFileList: false,
           beforeUpload: _ctx.handleUpload
         }, {
           default: vue.withCtx(() => [
-            vue.renderSlot(_ctx.$slots, "icon", {}, () => [
-              vue.createVNode(_component_ElIcon, { class: "ele-upload-icon" }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(_component_PlusOutlined)
-                ]),
-                _: 1
-              })
+            vue.createElementVNode("div", {
+              class: "ele-upload-button-inner",
+              onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleUploadClick && _ctx.handleUploadClick(...args))
+            }, [
+              vue.renderSlot(_ctx.$slots, "icon", {}, () => [
+                vue.createVNode(_component_ElIcon, { class: "ele-upload-icon" }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(_component_PlusOutlined)
+                  ]),
+                  _: 1
+                })
+              ])
             ])
           ]),
           _: 3
         }, 8, ["drag", "accept", "multiple", "disabled", "beforeUpload"])
       ], 4)) : vue.createCommentVNode("", true),
-      vue.createElementVNode("div", _hoisted_1, [
-        _ctx.previewOption.visible ? (vue.openBlock(), vue.createBlock(_component_ElImage, vue.mergeProps({
-          key: 0,
-          hideOnClickModal: true,
-          previewTeleported: true
-        }, _ctx.previewProps || {}, {
-          ref: "previewRef",
-          src: _ctx.previewOption.current,
-          previewSrcList: _ctx.previewOption.images,
-          initialIndex: _ctx.previewOption.currentIndex
-        }), null, 16, ["src", "previewSrcList", "initialIndex"])) : vue.createCommentVNode("", true)
-      ])
+      _ctx.tools ? (vue.openBlock(), vue.createElementBlock("input", {
+        key: 1,
+        ref: "uploadInputRef",
+        type: "file",
+        accept: _ctx.accept,
+        class: "ele-upload-input",
+        onChange: _cache[1] || (_cache[1] = (...args) => _ctx.handleInputChange && _ctx.handleInputChange(...args))
+      }, null, 40, _hoisted_1)) : vue.createCommentVNode("", true),
+      vue.createVNode(_component_EleImageViewer, vue.mergeProps({ infinite: false }, _ctx.previewProps || {}, {
+        modelValue: _ctx.previewVisible,
+        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.previewVisible = $event),
+        urlList: _ctx.previewImages,
+        initialIndex: _ctx.previewCurrentIndex
+      }), null, 16, ["modelValue", "urlList", "initialIndex"])
     ]),
     _: 3
-  }, 16, ["onUpdate:modelValue"]);
+  }, 16, ["class", "modelValue", "onUpdate:modelValue"]);
 }
 const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 module.exports = index;

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

@@ -1,11 +1,7 @@
-import { ElImageInstance } from '../ele-app/el';
 import { UploadItem, UploadLocale } from './types';
 
 declare const _default: import('vue').DefineComponent<{
-    modelValue: {
-        type: import('vue').PropType<UploadItem[]>;
-        required: boolean;
-    };
+    modelValue: import('vue').PropType<UploadItem[]>;
     readonly: BooleanConstructor;
     disabled: BooleanConstructor;
     preview: {
@@ -19,44 +15,65 @@ declare const _default: import('vue').DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-    itemStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    buttonStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    itemStyle: import('vue').PropType<import('../ele-app/types').StyleValue | false>;
+    buttonStyle: {
+        type: import('vue').PropType<import('../ele-app/types').StyleValue | false>;
+        default: null;
+    };
     sortable: {
-        type: import('vue').PropType<boolean | Record<string | number | symbol, any>>;
+        type: import('vue').PropType<boolean | Record<keyof any, any>>;
         default: boolean;
     };
     imageProps: import('vue').PropType<import('../ele-app/el').ElImageProps>;
     progressProps: import('vue').PropType<import('../ele-app/el').ElProgressProps>;
-    previewProps: import('vue').PropType<import('../ele-app/el').ElImageProps>;
-    /** 当前图片地址 */
+    previewProps: import('vue').PropType<import('../ele-app/plus').EleImageViewerProps>;
+    tools: BooleanConstructor;
+    listType: import('vue').PropType<import('./types').ListType>;
+    beforeUploadClick: import('vue').PropType<import('./types').BeforeUploadClick>;
+    beforeItemEdit: import('vue').PropType<import('./types').BeforeItemEdit>;
     locale: import('vue').PropType<Partial<UploadLocale>>;
 }, {
+    ownSlots: string[];
     lang: import('vue').ComputedRef<UploadLocale>;
-    previewRef: import('vue').Ref<ElImageInstance>;
-    previewOption: {
-        visible: boolean;
-        current?: string | undefined;
-        currentIndex: number;
-        images: string[];
-    };
+    previewVisible: import('vue').Ref<boolean>;
+    previewImages: import('vue').Ref<string[]>;
+    previewCurrentIndex: import('vue').Ref<number>;
+    imageObjectUrls: import('vue').Ref<{
+        file: {
+            readonly lastModified: number;
+            readonly name: string;
+            readonly webkitRelativePath: string;
+            readonly size: number;
+            readonly type: string;
+            arrayBuffer: () => Promise<ArrayBuffer>;
+            slice: (start?: number, end?: number, contentType?: string) => Blob;
+            stream: () => ReadableStream<Uint8Array>;
+            text: () => Promise<string>;
+        };
+        url: string;
+    }[]>;
+    uploadInputRef: import('vue').Ref<HTMLInputElement | null>;
     uploadEnable: import('vue').ComputedRef<boolean>;
-    draggableProps: import('vue').ComputedRef<Record<string | number | symbol, any>>;
     updateModelValue: (value: UploadItem[]) => void;
     handleUpload: (file: File) => boolean;
-    handleItemRemove: (item: UploadItem) => void;
     handleItemClick: (item: UploadItem) => void;
+    handleItemRemove: (item: UploadItem) => void;
+    handleItemEdit: (item: UploadItem) => void;
+    handleItemPreview: (item: UploadItem) => void;
     handleItemRetry: (item: UploadItem) => void;
+    handleInputChange: (e: Event) => void;
+    handleUploadClick: (e: MouseEvent) => void;
+    openImagePreview: (urls: string[], index: number) => void;
 }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     'update:modelValue': (_value: UploadItem[]) => boolean;
     itemClick: (_item: UploadItem) => boolean;
     upload: (_item: UploadItem) => boolean;
     remove: (_item: UploadItem) => boolean;
     retry: (_item: UploadItem) => boolean;
+    editUpload: (_result: import('./types').EditUploadResult) => boolean;
+    preview: (_item: UploadItem) => boolean;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    modelValue: {
-        type: import('vue').PropType<UploadItem[]>;
-        required: boolean;
-    };
+    modelValue: import('vue').PropType<UploadItem[]>;
     readonly: BooleanConstructor;
     disabled: BooleanConstructor;
     preview: {
@@ -70,30 +87,40 @@ declare const _default: import('vue').DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-    itemStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    buttonStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    itemStyle: import('vue').PropType<import('../ele-app/types').StyleValue | false>;
+    buttonStyle: {
+        type: import('vue').PropType<import('../ele-app/types').StyleValue | false>;
+        default: null;
+    };
     sortable: {
-        type: import('vue').PropType<boolean | Record<string | number | symbol, any>>;
+        type: import('vue').PropType<boolean | Record<keyof any, any>>;
         default: boolean;
     };
     imageProps: import('vue').PropType<import('../ele-app/el').ElImageProps>;
     progressProps: import('vue').PropType<import('../ele-app/el').ElProgressProps>;
-    previewProps: import('vue').PropType<import('../ele-app/el').ElImageProps>;
-    /** 当前图片地址 */
+    previewProps: import('vue').PropType<import('../ele-app/plus').EleImageViewerProps>;
+    tools: BooleanConstructor;
+    listType: import('vue').PropType<import('./types').ListType>;
+    beforeUploadClick: import('vue').PropType<import('./types').BeforeUploadClick>;
+    beforeItemEdit: import('vue').PropType<import('./types').BeforeItemEdit>;
     locale: import('vue').PropType<Partial<UploadLocale>>;
 }>> & {
     "onUpdate:modelValue"?: ((_value: UploadItem[]) => any) | undefined;
     onItemClick?: ((_item: UploadItem) => any) | undefined;
     onRemove?: ((_item: UploadItem) => any) | undefined;
+    onPreview?: ((_item: UploadItem) => any) | undefined;
     onRetry?: ((_item: UploadItem) => any) | undefined;
     onUpload?: ((_item: UploadItem) => any) | undefined;
+    onEditUpload?: ((_result: import('./types').EditUploadResult) => any) | undefined;
 }, {
+    drag: boolean;
     disabled: boolean;
     readonly: boolean;
+    sortable: boolean | Record<string | number | symbol, any>;
     multiple: boolean;
     preview: boolean;
-    sortable: boolean | Record<string | number | symbol, any>;
-    drag: boolean;
     accept: string;
+    tools: boolean;
+    buttonStyle: false | Partial<import('vue').CSSProperties>;
 }, {}>;
 export default _default;

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

@@ -2,10 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uploadListProps = {
   /** 已上传列表 */
-  modelValue: {
-    type: Array,
-    required: true
-  },
+  modelValue: Array,
   /** 是否只读 */
   readonly: Boolean,
   /** 是否禁用 */
@@ -27,9 +24,12 @@ const uploadListProps = {
     default: "image/png,image/jpeg"
   },
   /** 自定义条目样式 */
-  itemStyle: Object,
+  itemStyle: [Object, Boolean],
   /** 自定义上传按钮样式 */
-  buttonStyle: Object,
+  buttonStyle: {
+    type: [Object, Boolean],
+    default: null
+  },
   /** 是否开启拖拽排序 */
   sortable: {
     type: [Boolean, Object],
@@ -39,8 +39,16 @@ const uploadListProps = {
   imageProps: Object,
   /** 自定义进度条属性 */
   progressProps: Object,
-  /** 自定义图片预览 */
+  /** 自定义图片预览属性 */
   previewProps: Object,
+  /** 是否开启底部预览和修改的操作按钮 */
+  tools: Boolean,
+  /** 列表显示样式 */
+  listType: String,
+  /** 上传按钮点击前的钩子 */
+  beforeUploadClick: Function,
+  /** 修改按钮点击前的钩子 */
+  beforeItemEdit: Function,
   /** 国际化 */
   locale: Object
 };
@@ -54,7 +62,11 @@ const uploadListEmits = {
   /** item 移除事件 */
   remove: (_item) => true,
   /** item 上传失败重试事件 */
-  retry: (_item) => true
+  retry: (_item) => true,
+  /** item 修改上传事件 */
+  editUpload: (_result) => true,
+  /** item 预览事件 */
+  preview: (_item) => true
 };
 exports.uploadListEmits = uploadListEmits;
 exports.uploadListProps = uploadListProps;

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

@@ -1,16 +1,15 @@
 import { PropType, ExtractPropTypes } from 'vue';
+import { StyleValue } from '../ele-app/types';
 import { ElProgressProps, ElImageProps } from '../ele-app/el';
-import { UploadItem, UploadLocale } from './types';
+import { EleImageViewerProps } from '../ele-app/plus';
+import { UploadItem, UploadLocale, EditUploadResult, ListType, BeforeUploadClick, BeforeItemEdit } from './types';
 
 /**
  * 属性
  */
 export declare const uploadListProps: {
     /** 已上传列表 */
-    modelValue: {
-        type: PropType<UploadItem[]>;
-        required: boolean;
-    };
+    modelValue: PropType<UploadItem[]>;
     /** 是否只读 */
     readonly: BooleanConstructor;
     /** 是否禁用 */
@@ -32,20 +31,31 @@ export declare const uploadListProps: {
         default: string;
     };
     /** 自定义条目样式 */
-    itemStyle: PropType<Partial<import('vue').CSSProperties>>;
+    itemStyle: PropType<StyleValue | false>;
     /** 自定义上传按钮样式 */
-    buttonStyle: PropType<Partial<import('vue').CSSProperties>>;
+    buttonStyle: {
+        type: PropType<StyleValue | false>;
+        default: null;
+    };
     /** 是否开启拖拽排序 */
     sortable: {
-        type: PropType<boolean | Record<string | number | symbol, any>>;
+        type: PropType<boolean | Record<keyof any, any>>;
         default: boolean;
     };
     /** 自定义图片属性 */
     imageProps: PropType<ElImageProps>;
     /** 自定义进度条属性 */
     progressProps: PropType<ElProgressProps>;
-    /** 自定义图片预览 */
-    previewProps: PropType<ElImageProps>;
+    /** 自定义图片预览属性 */
+    previewProps: PropType<EleImageViewerProps>;
+    /** 是否开启底部预览和修改的操作按钮 */
+    tools: BooleanConstructor;
+    /** 列表显示样式 */
+    listType: PropType<ListType>;
+    /** 上传按钮点击前的钩子 */
+    beforeUploadClick: PropType<BeforeUploadClick>;
+    /** 修改按钮点击前的钩子 */
+    beforeItemEdit: PropType<BeforeItemEdit>;
     /** 国际化 */
     locale: PropType<Partial<UploadLocale>>;
 };
@@ -64,4 +74,8 @@ export declare const uploadListEmits: {
     remove: (_item: UploadItem) => boolean;
     /** item 上传失败重试事件 */
     retry: (_item: UploadItem) => boolean;
+    /** item 修改上传事件 */
+    editUpload: (_result: EditUploadResult) => boolean;
+    /** item 预览事件 */
+    preview: (_item: UploadItem) => boolean;
 };

package/lib/ele-upload-list/style/css-var.scss

@@ -0,0 +1,8 @@
+@use '../../style/util.scss' as *;
+
+/* 文件上传主题变量 */
+@mixin set-upload-list-var($var) {
+  .ele-upload-list {
+    @include set-ele-var('upload-list', $var);
+  }
+}

package/lib/ele-upload-list/style/index.cjs

@@ -3,5 +3,5 @@ require("element-plus/es/components/image/style/index");
 require("element-plus/es/components/upload/style/index");
 require("element-plus/es/components/progress/style/index");
 require("element-plus/es/components/icon/style/index");
-require("../../ele-tooltip/style/index");
+require("../../ele-image-viewer/style/index");
 require("./index.scss");