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

package/es/ele-upload-list/components/list-item.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue';
 import { ElProgressProps, ElImageProps } from '../../ele-app/el';
-import { UploadItem, UploadLocale } from '../types';
+import { UploadItem, UploadLocale, ImageObjectUrl, ListType } from '../types';
 
 declare const _default: import('vue').DefineComponent<{
     /** 数据 */
@@ -12,22 +12,36 @@ declare const _default: import('vue').DefineComponent<{
     readonly: BooleanConstructor;
     /** 是否禁用 */
     disabled: BooleanConstructor;
-    /** 自定义条目样式 */
+    /** 是否可拖拽排序 */
+    sortable: BooleanConstructor;
+    /** 图片属性 */
     imageProps: PropType<ElImageProps>;
     /** 进度条属性 */
     progressProps: PropType<ElProgressProps>;
+    /** 预读图片文件 */
+    imageObjectUrls: PropType<ImageObjectUrl[]>;
+    /** 是否开启底部预览和修改的操作按钮 */
+    tools: BooleanConstructor;
+    /** 列表样式 */
+    listType: PropType<ListType>;
     /** 国际化 */
     locale: {
         type: PropType<Partial<UploadLocale>>;
         required: true;
     };
 }, {
-    handleRemove: () => void;
+    imageUrl: import('vue').ComputedRef<string | undefined>;
+    uploadProgress: import('vue').ComputedRef<number>;
     handleItemClick: () => void;
+    handleRemove: () => void;
+    handleEdit: () => void;
+    handlePreview: () => void;
     handleRetry: () => void;
 }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     itemClick: (_item: UploadItem) => true;
     remove: (_item: UploadItem) => true;
+    edit: (_item: UploadItem) => true;
+    preview: (_item: UploadItem) => true;
     retry: (_item: UploadItem) => true;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     /** 数据 */
@@ -39,21 +53,33 @@ declare const _default: import('vue').DefineComponent<{
     readonly: BooleanConstructor;
     /** 是否禁用 */
     disabled: BooleanConstructor;
-    /** 自定义条目样式 */
+    /** 是否可拖拽排序 */
+    sortable: BooleanConstructor;
+    /** 图片属性 */
     imageProps: PropType<ElImageProps>;
     /** 进度条属性 */
     progressProps: PropType<ElProgressProps>;
+    /** 预读图片文件 */
+    imageObjectUrls: PropType<ImageObjectUrl[]>;
+    /** 是否开启底部预览和修改的操作按钮 */
+    tools: BooleanConstructor;
+    /** 列表样式 */
+    listType: PropType<ListType>;
     /** 国际化 */
     locale: {
         type: PropType<Partial<UploadLocale>>;
         required: true;
     };
 }>> & {
+    onEdit?: ((_item: UploadItem) => any) | undefined;
     onRetry?: ((_item: UploadItem) => any) | undefined;
-    onItemClick?: ((_item: UploadItem) => any) | undefined;
     onRemove?: ((_item: UploadItem) => any) | undefined;
+    onPreview?: ((_item: UploadItem) => any) | undefined;
+    onItemClick?: ((_item: UploadItem) => any) | undefined;
 }, {
     disabled: boolean;
     readonly: boolean;
+    sortable: boolean;
+    tools: boolean;
 }, {}>;
 export default _default;

package/es/ele-upload-list/components/list-item.js

@@ -1,17 +1,17 @@
-import { defineComponent, resolveComponent, openBlock, createElementBlock, renderSlot, createBlock, mergeProps, createVNode, withCtx, withModifiers, createCommentVNode, createElementVNode, toDisplayString } from "vue";
+import { defineComponent, computed, resolveComponent, openBlock, createElementBlock, renderSlot, createVNode, withCtx, createElementVNode, toDisplayString, createBlock, mergeProps, withModifiers, createCommentVNode } from "vue";
 import { ElImage, ElProgress, ElIcon } from "element-plus";
-import { CloseOutlined, SyncOutlined, FileOutlined } from "../../icons";
-import EleTooltip from "../../ele-tooltip/index";
+import { CloseOutlined, EyeOutlined, EditOutlined, SyncOutlined, FileOutlined } from "../../icons";
 const _sfc_main = defineComponent({
   name: "ListItem",
   components: {
     CloseOutlined,
+    EyeOutlined,
+    EditOutlined,
     SyncOutlined,
     FileOutlined,
     ElImage,
     ElProgress,
-    ElIcon,
-    EleTooltip
+    ElIcon
   },
   props: {
     /** 数据 */
@@ -23,10 +23,18 @@ const _sfc_main = defineComponent({
     readonly: Boolean,
     /** 是否禁用 */
     disabled: Boolean,
-    /** 自定义条目样式 */
+    /** 是否可拖拽排序 */
+    sortable: Boolean,
+    /** 图片属性 */
     imageProps: Object,
     /** 进度条属性 */
     progressProps: Object,
+    /** 预读图片文件 */
+    imageObjectUrls: Array,
+    /** 是否开启底部预览和修改的操作按钮 */
+    tools: Boolean,
+    /** 列表样式 */
+    listType: String,
     /** 国际化 */
     locale: {
       type: Object,
@@ -36,19 +44,52 @@ const _sfc_main = defineComponent({
   emits: {
     itemClick: (_item) => true,
     remove: (_item) => true,
+    edit: (_item) => true,
+    preview: (_item) => true,
     retry: (_item) => true
   },
   setup(props, { emit }) {
+    const imageUrl = computed(() => {
+      var _a;
+      if (props.item.url) {
+        return props.item.url;
+      }
+      if (!props.item.file || !props.imageObjectUrls) {
+        return;
+      }
+      return (_a = props.imageObjectUrls.find((d) => d.file === props.item.file)) == null ? void 0 : _a.url;
+    });
+    const uploadProgress = computed(() => {
+      const progress = props.item.progress;
+      if (!progress || progress < 0) {
+        return 0;
+      }
+      return progress > 100 ? 100 : progress;
+    });
+    const handleItemClick = () => {
+      emit("itemClick", props.item);
+    };
     const handleRemove = () => {
       emit("remove", props.item);
     };
-    const handleItemClick = () => {
-      emit("itemClick", props.item);
+    const handleEdit = () => {
+      emit("edit", props.item);
+    };
+    const handlePreview = () => {
+      emit("preview", props.item);
     };
     const handleRetry = () => {
       emit("retry", props.item);
     };
-    return { handleRemove, handleItemClick, handleRetry };
+    return {
+      imageUrl,
+      uploadProgress,
+      handleItemClick,
+      handleRemove,
+      handleEdit,
+      handlePreview,
+      handleRetry
+    };
   }
 });
 const _export_sfc = (sfc, props) => {
@@ -60,91 +101,130 @@ const _export_sfc = (sfc, props) => {
 };
 const _hoisted_1 = ["title"];
 const _hoisted_2 = {
-  key: 1,
+  key: 0,
   class: "ele-upload-thumbnail"
 };
-const _hoisted_3 = {
-  key: 1,
+const _hoisted_3 = { class: "ele-upload-thumbnail-text" };
+const _hoisted_4 = {
+  key: 0,
   class: "ele-upload-progress"
 };
-const _hoisted_4 = { class: "ele-upload-text" };
-const _hoisted_5 = {
-  key: 0,
+const _hoisted_5 = { class: "ele-upload-text" };
+const _hoisted_6 = ["title"];
+const _hoisted_7 = { class: "ele-upload-tool-text" };
+const _hoisted_8 = {
+  key: 1,
   class: "ele-upload-tools"
 };
+const _hoisted_9 = ["title"];
+const _hoisted_10 = { class: "ele-upload-tool-text" };
+const _hoisted_11 = ["title"];
+const _hoisted_12 = { class: "ele-upload-tool-text" };
+const _hoisted_13 = ["title"];
+const _hoisted_14 = {
+  key: 3,
+  class: "ele-upload-handle"
+};
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_ElImage = resolveComponent("ElImage");
   const _component_FileOutlined = resolveComponent("FileOutlined");
   const _component_ElIcon = resolveComponent("ElIcon");
-  const _component_CloseOutlined = resolveComponent("CloseOutlined");
+  const _component_ElImage = resolveComponent("ElImage");
   const _component_ElProgress = resolveComponent("ElProgress");
   const _component_SyncOutlined = resolveComponent("SyncOutlined");
-  const _component_EleTooltip = resolveComponent("EleTooltip");
+  const _component_EyeOutlined = resolveComponent("EyeOutlined");
+  const _component_EditOutlined = resolveComponent("EditOutlined");
+  const _component_CloseOutlined = resolveComponent("CloseOutlined");
   return openBlock(), createElementBlock("div", {
     title: _ctx.item.name,
     class: "ele-upload-item",
-    onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleItemClick && _ctx.handleItemClick(...args))
+    onClick: _cache[4] || (_cache[4] = (...args) => _ctx.handleItemClick && _ctx.handleItemClick(...args))
   }, [
-    renderSlot(_ctx.$slots, "thumbnail", { item: _ctx.item }, () => [
-      _ctx.item.url ? (openBlock(), createBlock(_component_ElImage, mergeProps({
-        key: 0,
-        fit: "cover"
-      }, _ctx.imageProps || {}, {
-        src: _ctx.item.url
-      }), null, 16, ["src"])) : (openBlock(), createElementBlock("div", _hoisted_2, [
-        createVNode(_component_ElIcon, null, {
+    renderSlot(_ctx.$slots, "thumbnail", {
+      item: _ctx.item,
+      imageUrl: _ctx.imageUrl
+    }, () => [
+      _ctx.listType === "file" || !_ctx.imageUrl ? (openBlock(), createElementBlock("div", _hoisted_2, [
+        createVNode(_component_ElIcon, { class: "ele-upload-thumbnail-icon" }, {
           default: withCtx(() => [
             createVNode(_component_FileOutlined)
           ]),
           _: 1
-        })
-      ]))
+        }),
+        createElementVNode("div", _hoisted_3, toDisplayString(_ctx.item.name || _ctx.item.url), 1)
+      ])) : (openBlock(), createBlock(_component_ElImage, mergeProps({
+        key: 1,
+        fit: "contain",
+        class: "ele-upload-image"
+      }, _ctx.imageProps || {}, { src: _ctx.imageUrl }), null, 16, ["src"]))
     ]),
+    _ctx.item.status === "uploading" || _ctx.item.status === "exception" ? (openBlock(), createElementBlock("div", _hoisted_4, [
+      renderSlot(_ctx.$slots, "progress", { item: _ctx.item }, () => [
+        createElementVNode("div", _hoisted_5, toDisplayString(_ctx.item.status == "exception" ? _ctx.locale.exception : _ctx.locale.uploading), 1),
+        createVNode(_component_ElProgress, mergeProps({
+          showText: false,
+          strokeWidth: _ctx.listType === "file" ? 2 : void 0,
+          status: _ctx.item.status === "exception" ? "exception" : void 0,
+          class: "ele-upload-progress-bar"
+        }, _ctx.progressProps || {}, { percentage: _ctx.uploadProgress }), null, 16, ["strokeWidth", "status", "percentage"]),
+        !_ctx.disabled && _ctx.item.status === "exception" ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          title: _ctx.locale.retry,
+          class: "ele-upload-tool ele-upload-retry",
+          onClick: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.handleRetry && _ctx.handleRetry(...args), ["stop"]))
+        }, [
+          createVNode(_component_ElIcon, { class: "ele-upload-tool-icon" }, {
+            default: withCtx(() => [
+              createVNode(_component_SyncOutlined)
+            ]),
+            _: 1
+          }),
+          createElementVNode("div", _hoisted_7, toDisplayString(_ctx.locale.retry), 1)
+        ], 8, _hoisted_6)) : createCommentVNode("", true)
+      ])
+    ])) : _ctx.tools && !_ctx.readonly && !_ctx.disabled && !_ctx.item.readonly ? (openBlock(), createElementBlock("div", _hoisted_8, [
+      createElementVNode("div", {
+        title: _ctx.locale.preview,
+        class: "ele-upload-tool",
+        onClick: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.handlePreview && _ctx.handlePreview(...args), ["stop"]))
+      }, [
+        createVNode(_component_ElIcon, { class: "ele-upload-tool-icon" }, {
+          default: withCtx(() => [
+            createVNode(_component_EyeOutlined)
+          ]),
+          _: 1
+        }),
+        createElementVNode("div", _hoisted_10, toDisplayString(_ctx.locale.preview), 1)
+      ], 8, _hoisted_9),
+      createElementVNode("div", {
+        title: _ctx.locale.edit,
+        class: "ele-upload-tool",
+        onClick: _cache[2] || (_cache[2] = withModifiers((...args) => _ctx.handleEdit && _ctx.handleEdit(...args), ["stop"]))
+      }, [
+        createVNode(_component_ElIcon, { class: "ele-upload-tool-icon" }, {
+          default: withCtx(() => [
+            createVNode(_component_EditOutlined)
+          ]),
+          _: 1
+        }),
+        createElementVNode("div", _hoisted_12, toDisplayString(_ctx.locale.edit), 1)
+      ], 8, _hoisted_11)
+    ])) : createCommentVNode("", true),
     !_ctx.readonly && !_ctx.disabled && !_ctx.item.readonly ? (openBlock(), createElementBlock("div", {
-      key: 0,
-      class: "ele-upload-remove",
-      onClick: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.handleRemove && _ctx.handleRemove(...args), ["stop"]))
+      key: 2,
+      title: _ctx.locale.remove,
+      class: "ele-upload-tool ele-upload-remove",
+      onClick: _cache[3] || (_cache[3] = withModifiers((...args) => _ctx.handleRemove && _ctx.handleRemove(...args), ["stop"]))
     }, [
       renderSlot(_ctx.$slots, "remove", { item: _ctx.item }, () => [
-        createVNode(_component_ElIcon, null, {
+        createVNode(_component_ElIcon, { class: "ele-upload-tool-icon" }, {
           default: withCtx(() => [
-            createVNode(_component_CloseOutlined, { style: { "transform": "scale(0.92)", "transform-origin": "top right" } })
+            createVNode(_component_CloseOutlined)
           ]),
           _: 1
         })
       ])
-    ])) : createCommentVNode("", true),
-    _ctx.item.status === "uploading" || _ctx.item.status === "exception" ? (openBlock(), createElementBlock("div", _hoisted_3, [
-      renderSlot(_ctx.$slots, "progress", { item: _ctx.item }, () => [
-        createElementVNode("div", _hoisted_4, toDisplayString(_ctx.item.status == "exception" ? _ctx.locale.exception : _ctx.locale.uploading), 1),
-        createVNode(_component_ElProgress, mergeProps({ showText: false }, _ctx.progressProps || {}, {
-          percentage: _ctx.item.progress,
-          status: _ctx.item.status === "exception" ? "exception" : void 0
-        }), null, 16, ["percentage", "status"]),
-        !_ctx.disabled ? (openBlock(), createElementBlock("div", _hoisted_5, [
-          _ctx.item.status === "exception" ? (openBlock(), createElementBlock("div", {
-            key: 0,
-            class: "ele-upload-retry",
-            onClick: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.handleRetry && _ctx.handleRetry(...args), ["stop"]))
-          }, [
-            createVNode(_component_EleTooltip, {
-              content: _ctx.locale.retry,
-              placement: "top"
-            }, {
-              default: withCtx(() => [
-                createVNode(_component_ElIcon, null, {
-                  default: withCtx(() => [
-                    createVNode(_component_SyncOutlined)
-                  ]),
-                  _: 1
-                })
-              ]),
-              _: 1
-            }, 8, ["content"])
-          ])) : createCommentVNode("", true)
-        ])) : createCommentVNode("", true)
-      ])
-    ])) : createCommentVNode("", true)
+    ], 8, _hoisted_13)) : createCommentVNode("", true),
+    _ctx.sortable ? (openBlock(), createElementBlock("div", _hoisted_14)) : createCommentVNode("", true)
   ], 8, _hoisted_1);
 }
 const listItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

package/es/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;