@uzum-tech/ui 2.3.1 → 2.3.2

package/dist/index.js

@@ -15760,7 +15760,7 @@
     }
   });
 
-  var ResizeSmallIcon = vue.defineComponent({
+  vue.defineComponent({
     name: "ResizeSmall",
     render() {
       return /* @__PURE__ */ vue.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20" }, /* @__PURE__ */ vue.h("g", { fill: "none" }, /* @__PURE__ */ vue.h(
@@ -46766,6 +46766,283 @@
     }
   });
 
+  function isImageFileType(type) {
+    return type.includes("image/");
+  }
+  function getExtname(url = "") {
+    const temp = url.split("/");
+    const filename = temp[temp.length - 1];
+    const filenameWithoutSuffix = filename.split(/#|\?/)[0];
+    return (/\.[^./\\]*$/.exec(filenameWithoutSuffix) || [""])[0];
+  }
+  const imageExtensionRegex = /(webp|svg|png|gif|jpg|jpeg|jfif|bmp|dpg|ico)$/i;
+  function capitalizeFirstLetter(str) {
+    if (!str) return str;
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  }
+  const isImageFile = file => {
+    if (file.type) {
+      return isImageFileType(file.type);
+    }
+    const fileNameExtension = getExtname(file.name || "");
+    if (imageExtensionRegex.test(fileNameExtension)) {
+      return true;
+    }
+    const url = file.thumbnailUrl || file.url || "";
+    const urlExtension = getExtname(url);
+    if (/^data:image\//.test(url) || imageExtensionRegex.test(urlExtension)) {
+      return true;
+    }
+    return false;
+  };
+  async function createImageDataUrl(file) {
+    return await new Promise(resolve => {
+      if (!file.type || !isImageFileType(file.type)) {
+        resolve("");
+        return;
+      }
+      resolve(window.URL.createObjectURL(file));
+    });
+  }
+  const environmentSupportFile = isBrowser$1 && window.FileReader && window.File;
+  function isFileSystemDirectoryEntry(item) {
+    return item.isDirectory;
+  }
+  function isFileSystemFileEntry(item) {
+    return item.isFile;
+  }
+  async function getFilesFromEntries(entries, directory) {
+    const fileAndEntries = [];
+    let _resolve;
+    let requestCallbackCount = 0;
+    function lock() {
+      requestCallbackCount++;
+    }
+    function unlock() {
+      requestCallbackCount--;
+      if (!requestCallbackCount) {
+        _resolve(fileAndEntries);
+      }
+    }
+    function _getFilesFromEntries(entries2) {
+      entries2.forEach(entry => {
+        if (!entry) return;
+        lock();
+        if (directory && isFileSystemDirectoryEntry(entry)) {
+          const directoryReader = entry.createReader();
+          lock();
+          directoryReader.readEntries(entries3 => {
+            _getFilesFromEntries(entries3);
+            unlock();
+          }, () => {
+            unlock();
+          });
+        } else if (isFileSystemFileEntry(entry)) {
+          lock();
+          entry.file(file => {
+            fileAndEntries.push({
+              file,
+              entry,
+              source: "dnd"
+            });
+            unlock();
+          }, () => {
+            unlock();
+          });
+        }
+        unlock();
+      });
+    }
+    await new Promise(resolve => {
+      _resolve = resolve;
+      _getFilesFromEntries(entries);
+    });
+    return fileAndEntries;
+  }
+  function getFilePreviewSrc(file) {
+    return file.url || file.thumbnailUrl || null;
+  }
+  function isFileSizeExceeded(file, maxSize) {
+    if (maxSize === void 0 || !file) return false;
+    return file.size > maxSize;
+  }
+  function createSettledFileInfo(fileInfo) {
+    const {
+      id,
+      name,
+      percentage,
+      status,
+      url,
+      file,
+      thumbnailUrl,
+      type,
+      fullPath,
+      batchId
+    } = fileInfo;
+    return {
+      id,
+      name,
+      percentage: percentage ?? null,
+      status,
+      url: url ?? null,
+      file: file ?? null,
+      thumbnailUrl: thumbnailUrl ?? null,
+      type: type ?? null,
+      fullPath: fullPath ?? null,
+      batchId: batchId ?? null
+    };
+  }
+  function matchType(name, mimeType, accept) {
+    name = name.toLowerCase();
+    mimeType = mimeType.toLocaleLowerCase();
+    accept = accept.toLocaleLowerCase();
+    const acceptAtoms = accept.split(",").map(acceptAtom => acceptAtom.trim()).filter(Boolean);
+    return acceptAtoms.some(acceptAtom => {
+      if (acceptAtom.startsWith(".")) {
+        if (name.endsWith(acceptAtom)) return true;
+      } else if (acceptAtom.includes("/")) {
+        const [type, subtype] = mimeType.split("/");
+        const [acceptType, acceptSubtype] = acceptAtom.split("/");
+        if (acceptType === "*" || type && acceptType && acceptType === type) {
+          if (acceptSubtype === "*" || subtype && acceptSubtype && acceptSubtype === subtype) {
+            return true;
+          }
+        }
+      } else {
+        return true;
+      }
+      return false;
+    });
+  }
+  function download(url, name) {
+    if (!url) return;
+    const a = document.createElement("a");
+    a.href = url;
+    if (name !== void 0) {
+      a.download = name;
+    }
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  }
+
+  const uploadInjectionKey = createInjectionKey("u-upload");
+  const uploadProps = {
+    ...useTheme.props,
+    name: {
+      type: String,
+      default: "file"
+    },
+    accept: String,
+    action: String,
+    customRequest: Function,
+    directory: Boolean,
+    directoryDnd: {
+      type: Boolean,
+      default: void 0
+    },
+    method: {
+      type: String,
+      default: "POST"
+    },
+    multiple: Boolean,
+    showFileList: {
+      type: Boolean,
+      default: true
+    },
+    data: [Object, Function],
+    headers: [Object, Function],
+    withCredentials: Boolean,
+    responseType: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: void 0
+    },
+    vertical: {
+      type: Boolean,
+      default: false
+    },
+    icon: Object,
+    onChange: Function,
+    onRemove: Function,
+    onFinish: Function,
+    onError: Function,
+    onRetry: Function,
+    onBeforeUpload: Function,
+    isErrorState: Function,
+    onDownload: Function,
+    defaultUpload: {
+      type: Boolean,
+      default: true
+    },
+    fileList: Array,
+    "onUpdate:fileList": [Function, Array],
+    onUpdateFileList: [Function, Array],
+    fileListClass: String,
+    fileListStyle: [String, Object],
+    defaultFileList: {
+      type: Array,
+      default: () => []
+    },
+    showCancelButton: {
+      type: Boolean,
+      default: true
+    },
+    showRemoveButton: {
+      type: Boolean,
+      default: true
+    },
+    showDownloadButton: Boolean,
+    showRetryButton: {
+      type: Boolean,
+      default: true
+    },
+    customDownload: Function,
+    showPreviewButton: {
+      type: Boolean,
+      default: true
+    },
+    listType: {
+      type: String,
+      default: "text"
+    },
+    onPreview: Function,
+    shouldUseThumbnailUrl: {
+      type: Function,
+      default: file => {
+        if (!environmentSupportFile) return false;
+        return isImageFile(file);
+      }
+    },
+    createThumbnailUrl: Function,
+    abstract: Boolean,
+    max: Number,
+    maxSize: Number,
+    showTrigger: {
+      type: Boolean,
+      default: true
+    },
+    imageGroupProps: Object,
+    inputProps: Object,
+    triggerClass: String,
+    triggerStyle: [String, Object],
+    renderIcon: Function,
+    label: String,
+    size: {
+      type: String,
+      default: "medium"
+    },
+    title: String,
+    subtitle: String,
+    noIcon: {
+      type: Boolean,
+      default: false
+    }
+  };
+
   function self$13(vars) {
     const {
       fontWeight,
@@ -46896,8 +47173,6 @@
     style: rtlStyle$i
   };
 
-  const uploadInjectionKey = createInjectionKey("u-upload");
-
   var style$1a = c$1([cB("upload", "width: var(--u-upload-width)", [cM("dragger-inside", [cB("upload-trigger", `
         display: block;
       `)]), cM("drag-over", [cB("upload-dragger", `
@@ -50576,20 +50851,6 @@
     self: self$g
   };
 
-  const prevIcon = /* @__PURE__ */ vue.h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ vue.h(
-    "path",
-    {
-      d: "M6 5C5.75454 5 5.55039 5.17688 5.50806 5.41012L5.5 5.5V14.5C5.5 14.7761 5.72386 15 6 15C6.24546 15 6.44961 14.8231 6.49194 14.5899L6.5 14.5V5.5C6.5 5.22386 6.27614 5 6 5ZM13.8536 5.14645C13.68 4.97288 13.4106 4.9536 13.2157 5.08859L13.1464 5.14645L8.64645 9.64645C8.47288 9.82001 8.4536 10.0894 8.58859 10.2843L8.64645 10.3536L13.1464 14.8536C13.3417 15.0488 13.6583 15.0488 13.8536 14.8536C14.0271 14.68 14.0464 14.4106 13.9114 14.2157L13.8536 14.1464L9.70711 10L13.8536 5.85355C14.0488 5.65829 14.0488 5.34171 13.8536 5.14645Z",
-      fill: "currentColor"
-    }
-  ));
-  const nextIcon = /* @__PURE__ */ vue.h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ vue.h(
-    "path",
-    {
-      d: "M13.5 5C13.7455 5 13.9496 5.17688 13.9919 5.41012L14 5.5V14.5C14 14.7761 13.7761 15 13.5 15C13.2545 15 13.0504 14.8231 13.0081 14.5899L13 14.5V5.5C13 5.22386 13.2239 5 13.5 5ZM5.64645 5.14645C5.82001 4.97288 6.08944 4.9536 6.28431 5.08859L6.35355 5.14645L10.8536 9.64645C11.0271 9.82001 11.0464 10.0894 10.9114 10.2843L10.8536 10.3536L6.35355 14.8536C6.15829 15.0488 5.84171 15.0488 5.64645 14.8536C5.47288 14.68 5.4536 14.4106 5.58859 14.2157L5.64645 14.1464L9.79289 10L5.64645 5.85355C5.45118 5.65829 5.45118 5.34171 5.64645 5.14645Z",
-      fill: "currentColor"
-    }
-  ));
   const closeIcon = /* @__PURE__ */ vue.h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ vue.h(
     "path",
     {
@@ -50597,22 +50858,6 @@
       fill: "currentColor"
     }
   ));
-  const downloadIcon = /* @__PURE__ */ vue.h(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "32",
-      height: "32",
-      viewBox: "0 0 1024 1024"
-    },
-    /* @__PURE__ */ vue.h(
-      "path",
-      {
-        fill: "currentColor",
-        d: "M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
-      }
-    )
-  );
 
   const imagePreviewSharedProps = {
     ...useTheme.props,
@@ -51062,7 +51307,8 @@
             toolbarIconColor,
             toolbarBorderRadius,
             toolbarBoxShadow,
-            toolbarColor
+            toolbarColor,
+            overlayColor
           }
         } = themeRef.value;
         return {
@@ -51070,7 +51316,8 @@
           "--u-toolbar-icon-color": toolbarIconColor,
           "--u-toolbar-color": toolbarColor,
           "--u-toolbar-border-radius": toolbarBorderRadius,
-          "--u-toolbar-box-shadow": toolbarBoxShadow
+          "--u-toolbar-box-shadow": toolbarBoxShadow,
+          "--u-overlay-color": overlayColor
         };
       });
       const { inlineThemeDisabled } = useConfig();
@@ -51119,14 +51366,6 @@
     },
     render() {
       const { clsPrefix, renderToolbar, withTooltip } = this;
-      const prevNode = withTooltip(
-        /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix, onClick: this.handleSwitchPrev }, { default: () => prevIcon }),
-        "tipPrevious"
-      );
-      const nextNode = withTooltip(
-        /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix, onClick: this.handleSwitchNext }, { default: () => nextIcon }),
-        "tipNext"
-      );
       const rotateCounterclockwiseNode = withTooltip(
         /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix, onClick: this.rotateCounterclockwise }, {
           default: () => /* @__PURE__ */ vue.h(RotateCounterclockwiseIcon, null)
@@ -51139,22 +51378,10 @@
         }),
         "tipClockwise"
       );
-      const originalSizeNode = withTooltip(
-        /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix, onClick: this.resizeToOrignalImageSize }, {
-          default: () => {
-            return /* @__PURE__ */ vue.h(ResizeSmallIcon, null);
-          }
-        }),
-        "tipOriginalSize"
-      );
       const zoomOutNode = withTooltip(
         /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix, onClick: this.zoomOut }, { default: () => /* @__PURE__ */ vue.h(ZoomOutIcon, null) }),
         "tipZoomOut"
       );
-      const downloadNode = withTooltip(
-        /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix, onClick: this.handleDownloadClick }, { default: () => downloadIcon }),
-        "tipDownload"
-      );
       const closeNode = withTooltip(
         /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix, onClick: () => this.close() }, { default: () => closeIcon }),
         "tipClose"
@@ -51196,17 +51423,13 @@
                     return null;
                   return /* @__PURE__ */ vue.h("div", { class: `${clsPrefix}-image-preview-toolbar` }, renderToolbar ? renderToolbar({
                     nodes: {
-                      prev: prevNode,
-                      next: nextNode,
                       rotateCounterclockwise: rotateCounterclockwiseNode,
                       rotateClockwise: rotateClockwiseNode,
-                      resizeToOriginalSize: originalSizeNode,
                       zoomOut: zoomOutNode,
                       zoomIn: zoomInNode,
-                      download: downloadNode,
                       close: closeNode
                     }
-                  }) : /* @__PURE__ */ vue.h(vue.Fragment, null, this.onPrev ? /* @__PURE__ */ vue.h(vue.Fragment, null, prevNode, nextNode) : null, rotateCounterclockwiseNode, rotateClockwiseNode, originalSizeNode, zoomOutNode, zoomInNode, downloadNode, closeNode));
+                  }) : /* @__PURE__ */ vue.h(vue.Fragment, null, rotateCounterclockwiseNode, rotateClockwiseNode, zoomOutNode, zoomInNode, closeNode));
                 }
               }) : null,
               /* @__PURE__ */ vue.h(
@@ -51861,7 +52084,7 @@
     }
   });
 
-  function useUploadActionsRender(opts) {
+  function useUploadActionsRender(options) {
     const {
       clsPrefix,
       listType,
@@ -51881,7 +52104,7 @@
       handleRetryClick,
       handleDownloadClick,
       capitalizeFirstLetter
-    } = opts;
+    } = options;
     const getExt = (name) => {
       const i = name.lastIndexOf(".");
       return i === -1 || i === name.length - 1 ? "" : name.slice(i + 1);
@@ -52008,159 +52231,6 @@
     return { icon, actionsNode };
   }
 
-  function isImageFileType(type) {
-    return type.includes("image/");
-  }
-  function getExtname(url = "") {
-    const temp = url.split("/");
-    const filename = temp[temp.length - 1];
-    const filenameWithoutSuffix = filename.split(/#|\?/)[0];
-    return (/\.[^./\\]*$/.exec(filenameWithoutSuffix) || [""])[0];
-  }
-  const imageExtensionRegex = /(webp|svg|png|gif|jpg|jpeg|jfif|bmp|dpg|ico)$/i;
-  function capitalizeFirstLetter(str) {
-    if (!str) return str;
-    return str.charAt(0).toUpperCase() + str.slice(1);
-  }
-  const isImageFile = file => {
-    if (file.type) {
-      return isImageFileType(file.type);
-    }
-    const fileNameExtension = getExtname(file.name || "");
-    if (imageExtensionRegex.test(fileNameExtension)) {
-      return true;
-    }
-    const url = file.thumbnailUrl || file.url || "";
-    const urlExtension = getExtname(url);
-    if (/^data:image\//.test(url) || imageExtensionRegex.test(urlExtension)) {
-      return true;
-    }
-    return false;
-  };
-  async function createImageDataUrl(file) {
-    return await new Promise(resolve => {
-      if (!file.type || !isImageFileType(file.type)) {
-        resolve("");
-        return;
-      }
-      resolve(window.URL.createObjectURL(file));
-    });
-  }
-  const environmentSupportFile = isBrowser$1 && window.FileReader && window.File;
-  function isFileSystemDirectoryEntry(item) {
-    return item.isDirectory;
-  }
-  function isFileSystemFileEntry(item) {
-    return item.isFile;
-  }
-  async function getFilesFromEntries(entries, directory) {
-    const fileAndEntries = [];
-    let _resolve;
-    let requestCallbackCount = 0;
-    function lock() {
-      requestCallbackCount++;
-    }
-    function unlock() {
-      requestCallbackCount--;
-      if (!requestCallbackCount) {
-        _resolve(fileAndEntries);
-      }
-    }
-    function _getFilesFromEntries(entries2) {
-      entries2.forEach(entry => {
-        if (!entry) return;
-        lock();
-        if (directory && isFileSystemDirectoryEntry(entry)) {
-          const directoryReader = entry.createReader();
-          lock();
-          directoryReader.readEntries(entries3 => {
-            _getFilesFromEntries(entries3);
-            unlock();
-          }, () => {
-            unlock();
-          });
-        } else if (isFileSystemFileEntry(entry)) {
-          lock();
-          entry.file(file => {
-            fileAndEntries.push({
-              file,
-              entry,
-              source: "dnd"
-            });
-            unlock();
-          }, () => {
-            unlock();
-          });
-        }
-        unlock();
-      });
-    }
-    await new Promise(resolve => {
-      _resolve = resolve;
-      _getFilesFromEntries(entries);
-    });
-    return fileAndEntries;
-  }
-  function createSettledFileInfo(fileInfo) {
-    const {
-      id,
-      name,
-      percentage,
-      status,
-      url,
-      file,
-      thumbnailUrl,
-      type,
-      fullPath,
-      batchId
-    } = fileInfo;
-    return {
-      id,
-      name,
-      percentage: percentage ?? null,
-      status,
-      url: url ?? null,
-      file: file ?? null,
-      thumbnailUrl: thumbnailUrl ?? null,
-      type: type ?? null,
-      fullPath: fullPath ?? null,
-      batchId: batchId ?? null
-    };
-  }
-  function matchType(name, mimeType, accept) {
-    name = name.toLowerCase();
-    mimeType = mimeType.toLocaleLowerCase();
-    accept = accept.toLocaleLowerCase();
-    const acceptAtoms = accept.split(",").map(acceptAtom => acceptAtom.trim()).filter(Boolean);
-    return acceptAtoms.some(acceptAtom => {
-      if (acceptAtom.startsWith(".")) {
-        if (name.endsWith(acceptAtom)) return true;
-      } else if (acceptAtom.includes("/")) {
-        const [type, subtype] = mimeType.split("/");
-        const [acceptType, acceptSubtype] = acceptAtom.split("/");
-        if (acceptType === "*" || type && acceptType && acceptType === type) {
-          if (acceptSubtype === "*" || subtype && acceptSubtype && acceptSubtype === subtype) {
-            return true;
-          }
-        }
-      } else {
-        return true;
-      }
-      return false;
-    });
-  }
-  function download(url, name) {
-    if (!url) return;
-    const a = document.createElement("a");
-    a.href = url;
-    if (name !== void 0) {
-      a.download = name;
-    }
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-  }
-
   const buttonThemeOverrides = {
     paddingMedium: "0 3px",
     heightMedium: "24px",
@@ -52238,7 +52308,12 @@
           file: { status },
           listType
         } = props;
-        return ["finished"].includes(status) && mergedThumbnailUrlRef.value && listType === "image-card";
+        if (!["finished"].includes(status))
+          return false;
+        if (listType === "preview-list") {
+          return UUpload.isFilePreviewable(props.file);
+        }
+        return !!mergedThumbnailUrlRef.value && listType === "image-card";
       });
       async function handleRetryClick() {
         const onRetry = UUpload.onRetryRef.value;
@@ -52317,6 +52392,8 @@
         } = UUpload;
         if (onPreview) {
           onPreview(props.file);
+        } else if (props.listType === "preview-list") {
+          UUpload.openFilePreview(props.file);
         } else if (props.listType === "image-card") {
           const { value } = imageRef;
           if (!value)
@@ -52403,7 +52480,8 @@
                 `${clsPrefix}-upload-file`,
                 `${clsPrefix}-upload-file--${this.progressStatus}-status`,
                 file.url && file.status !== "error" && imageCardTypes.includes(listType) && `${clsPrefix}-upload-file--with-url`,
-                `${clsPrefix}-upload-file--${listType === "image" || listType === "image-card" ? "image-card" : "text"}-type`
+                `${clsPrefix}-upload-file--${listType === "image" || listType === "image-card" ? "image-card" : "text"}-type`,
+                listType === "preview-list" && `${clsPrefix}-upload-file--preview-list-type`
               ]
             },
             /* @__PURE__ */ vue.h(
@@ -52571,11 +52649,17 @@
         themeClassRef,
         maxReachedRef,
         showTriggerRef,
-        imageGroupPropsRef
+        imageGroupPropsRef,
+        previewSrcListRef,
+        previewShowRef,
+        previewCurrentRef
       } = UUpload;
       const isImageCardTypeRef = vue.computed(
         () => listTypeRef.value === "image-card" || listTypeRef.value === "image"
       );
+      const isPreviewListTypeRef = vue.computed(
+        () => listTypeRef.value === "preview-list"
+      );
       const renderFileList = () => mergedFileListRef.value.map((file) => /* @__PURE__ */ vue.h(
         UUploadFile,
         {
@@ -52589,6 +52673,21 @@
       const renderUploadFileList = () => isImageCardTypeRef.value ? /* @__PURE__ */ vue.h(_UImageGroup, { ...imageGroupPropsRef.value }, { default: renderFileList }) : /* @__PURE__ */ vue.h(FadeInExpandTransition, { group: true }, {
         default: renderFileList
       });
+      const renderPreview = () => /* @__PURE__ */ vue.h(
+        _UImageGroup,
+        {
+          ...imageGroupPropsRef.value,
+          srcList: previewSrcListRef.value,
+          show: previewShowRef.value,
+          current: previewCurrentRef.value,
+          onUpdateShow: (show) => {
+            previewShowRef.value = show;
+          },
+          onUpdateCurrent: (current) => {
+            previewCurrentRef.value = current;
+          }
+        }
+      );
       return () => {
         const { value: mergedClsPrefix } = mergedClsPrefixRef;
         const { value: abstract } = abstractRef;
@@ -52607,6 +52706,7 @@
             ]
           },
           renderUploadFileList(),
+          isPreviewListTypeRef.value && renderPreview(),
           showTriggerRef.value && !maxReachedRef.value && isImageCardTypeRef.value && /* @__PURE__ */ vue.h(_UUploadTrigger, null, slots)
         );
       };
@@ -52872,119 +52972,6 @@
     };
   }
 
-  const uploadProps = {
-    ...useTheme.props,
-    name: {
-      type: String,
-      default: "file"
-    },
-    accept: String,
-    action: String,
-    customRequest: Function,
-    directory: Boolean,
-    directoryDnd: { type: Boolean, default: void 0 },
-    method: {
-      type: String,
-      default: "POST"
-    },
-    multiple: Boolean,
-    showFileList: {
-      type: Boolean,
-      default: true
-    },
-    data: [Object, Function],
-    headers: [Object, Function],
-    withCredentials: Boolean,
-    responseType: {
-      type: String,
-      default: ""
-    },
-    disabled: {
-      type: Boolean,
-      default: void 0
-    },
-    vertical: {
-      type: Boolean,
-      default: false
-    },
-    icon: Object,
-    onChange: Function,
-    onRemove: Function,
-    onFinish: Function,
-    onError: Function,
-    onRetry: Function,
-    onBeforeUpload: Function,
-    isErrorState: Function,
-    /** currently not used */
-    onDownload: Function,
-    defaultUpload: {
-      type: Boolean,
-      default: true
-    },
-    fileList: Array,
-    "onUpdate:fileList": [Function, Array],
-    onUpdateFileList: [Function, Array],
-    fileListClass: String,
-    fileListStyle: [String, Object],
-    defaultFileList: {
-      type: Array,
-      default: () => []
-    },
-    showCancelButton: {
-      type: Boolean,
-      default: true
-    },
-    showRemoveButton: {
-      type: Boolean,
-      default: true
-    },
-    showDownloadButton: Boolean,
-    showRetryButton: {
-      type: Boolean,
-      default: true
-    },
-    customDownload: Function,
-    showPreviewButton: {
-      type: Boolean,
-      default: true
-    },
-    listType: {
-      type: String,
-      default: "text"
-    },
-    onPreview: Function,
-    shouldUseThumbnailUrl: {
-      type: Function,
-      default: (file) => {
-        if (!environmentSupportFile)
-          return false;
-        return isImageFile(file);
-      }
-    },
-    createThumbnailUrl: Function,
-    abstract: Boolean,
-    max: Number,
-    showTrigger: {
-      type: Boolean,
-      default: true
-    },
-    imageGroupProps: Object,
-    inputProps: Object,
-    triggerClass: String,
-    triggerStyle: [String, Object],
-    renderIcon: Function,
-    label: String,
-    size: {
-      type: String,
-      default: "medium"
-    },
-    title: String,
-    subtitle: String,
-    noIcon: {
-      type: Boolean,
-      default: false
-    }
-  };
   var _UUpload = vue.defineComponent({
     name: "Upload",
     props: uploadProps,
@@ -53034,15 +53021,15 @@
       function openFileDialog() {
         inputElRef.value?.click();
       }
-      function handleFileInputChange(e) {
-        const target = e.target;
+      function handleFileInputChange(event) {
+        const target = event.target;
         handleFileAddition(
           target.files ? Array.from(target.files).map((file) => ({
             file,
             entry: null,
             source: "input"
           })) : null,
-          e
+          event
         );
         target.value = "";
       }
@@ -53062,12 +53049,12 @@
         uploadKeyIndexRef.value += 1;
         return key;
       }
-      function handleFileAddition(fileAndEntries, e) {
+      function handleFileAddition(fileAndEntries, event) {
         if (!fileAndEntries || fileAndEntries.length === 0)
           return;
         const { onBeforeUpload } = props;
         fileAndEntries = mergedMultipleRef.value ? fileAndEntries : [fileAndEntries[0]];
-        const { max, accept } = props;
+        const { max, accept, maxSize } = props;
         fileAndEntries = fileAndEntries.filter(({ file, source }) => {
           if (source === "dnd" && accept?.trim()) {
             return matchType(file.name, file.type, accept);
@@ -53096,6 +53083,10 @@
               thumbnailUrl: null,
               fullPath: entry?.fullPath ?? `/${file.webkitRelativePath || file.name}`
             };
+            if (isFileSizeExceeded(file, maxSize)) {
+              fileInfo.status = "error";
+              return fileInfo;
+            }
             if (!onBeforeUpload || await onBeforeUpload({
               file: fileInfo,
               fileList: mergedFileListRef.value
@@ -53108,7 +53099,7 @@
           let nextTickChain = Promise.resolve();
           fileInfos.forEach((fileInfo) => {
             nextTickChain = nextTickChain.then(vue.nextTick).then(() => {
-              fileInfo && doChange(fileInfo, e, {
+              fileInfo && doChange(fileInfo, event, {
                 append: true
               });
             });
@@ -53135,6 +53126,15 @@
         filesToUpload.forEach((file) => {
           const { status } = file;
           if (status === "pending" || status === "error" && shouldReupload) {
+            if (isFileSizeExceeded(file.file, props.maxSize)) {
+              if (status === "pending") {
+                const fileAfterChange = Object.assign({}, file, {
+                  status: "error"
+                });
+                doChange(fileAfterChange);
+              }
+              return;
+            }
             if (props.customRequest) {
               customSubmitImpl({
                 inst: {
@@ -53215,6 +53215,26 @@
         }
         return "";
       }
+      function isFilePreviewable(file) {
+        return props.shouldUseThumbnailUrl(file) && getFilePreviewSrc(file) !== null;
+      }
+      const previewFileListRef = vue.computed(
+        () => mergedFileListRef.value.filter(isFilePreviewable)
+      );
+      const previewSrcListRef = vue.computed(
+        () => previewFileListRef.value.map((file) => getFilePreviewSrc(file))
+      );
+      const previewShowRef = vue.ref(false);
+      const previewCurrentRef = vue.ref(0);
+      function openFilePreview(file) {
+        const index = previewFileListRef.value.findIndex(
+          ({ id }) => id === file.id
+        );
+        if (index < 0)
+          return;
+        previewCurrentRef.value = index;
+        previewShowRef.value = true;
+      }
       const cssVarsRef = vue.computed(() => {
         const { value: size } = formItem.mergedSizeRef;
         const {
@@ -53334,7 +53354,12 @@
         imageGroupPropsRef: vue.toRef(props, "imageGroupProps"),
         mergedDirectoryDndRef: vue.computed(() => {
           return props.directoryDnd ?? props.directory;
-        })
+        }),
+        previewSrcListRef,
+        previewShowRef,
+        previewCurrentRef,
+        isFilePreviewable,
+        openFilePreview
       });
       const exposedMethods = {
         clear: () => {
@@ -54837,6 +54862,12 @@
         );
         return url ?? null;
       };
+      const getAttachmentUrl = (attachment) => {
+        if (!attachment.url || attachment.url === "#")
+          return null;
+        return attachment.url;
+      };
+      const isAttachmentPreviewable = (file) => Boolean(file.thumbnailUrl);
       const handleAttachmentDownload = async (file) => {
         if (props.onAttachmentDownload) {
           const attachment = normalizedAttachmentsRef.value.find(
@@ -54877,7 +54908,7 @@
             name: attachment.name,
             status: attachment.status || MessageBubbleAttachmentStatus.FINISHED,
             percentage: attachment.percentage ?? null,
-            url: attachment.url ?? null,
+            url: getAttachmentUrl(attachment),
             thumbnailUrl: getThumbnailUrl(attachment),
             type: attachment.type ?? null,
             file: null,
@@ -54888,6 +54919,8 @@
           _UUpload,
           {
             abstract: true,
+            listType: "preview-list",
+            shouldUseThumbnailUrl: isAttachmentPreviewable,
             fileList,
             fileListStyle: withPadding ? {
               display: "flex",
@@ -117097,7 +117130,7 @@ ${icon.label}`.toLowerCase()
     });
   }
 
-  var version = "2.3.1";
+  var version = "2.3.2";
 
   function create({
     componentPrefix = "U",