@uzum-tech/ui 2.3.1 → 2.3.2

package/dist/index.mjs

@@ -15756,7 +15756,7 @@ var RemoveIcon = defineComponent({
   }
 });
 
-var ResizeSmallIcon = defineComponent({
+defineComponent({
   name: "ResizeSmall",
   render() {
     return /* @__PURE__ */ h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20" }, /* @__PURE__ */ h("g", { fill: "none" }, /* @__PURE__ */ h(
@@ -46762,6 +46762,283 @@ var _UUl = defineComponent({
   }
 });
 
+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,
@@ -46892,8 +47169,6 @@ const uploadRtl = {
   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", `
@@ -50572,20 +50847,6 @@ const imageDark = {
   self: self$g
 };
 
-const prevIcon = /* @__PURE__ */ h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ 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__ */ h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ 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__ */ h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ h(
   "path",
   {
@@ -50593,22 +50854,6 @@ const closeIcon = /* @__PURE__ */ h("svg", { viewBox: "0 0 20 20", fill: "none",
     fill: "currentColor"
   }
 ));
-const downloadIcon = /* @__PURE__ */ h(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "32",
-    height: "32",
-    viewBox: "0 0 1024 1024"
-  },
-  /* @__PURE__ */ 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,
@@ -51058,7 +51303,8 @@ var _UImagePreview = defineComponent({
           toolbarIconColor,
           toolbarBorderRadius,
           toolbarBoxShadow,
-          toolbarColor
+          toolbarColor,
+          overlayColor
         }
       } = themeRef.value;
       return {
@@ -51066,7 +51312,8 @@ var _UImagePreview = defineComponent({
         "--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();
@@ -51115,14 +51362,6 @@ var _UImagePreview = defineComponent({
   },
   render() {
     const { clsPrefix, renderToolbar, withTooltip } = this;
-    const prevNode = withTooltip(
-      /* @__PURE__ */ h(UBaseIcon, { clsPrefix, onClick: this.handleSwitchPrev }, { default: () => prevIcon }),
-      "tipPrevious"
-    );
-    const nextNode = withTooltip(
-      /* @__PURE__ */ h(UBaseIcon, { clsPrefix, onClick: this.handleSwitchNext }, { default: () => nextIcon }),
-      "tipNext"
-    );
     const rotateCounterclockwiseNode = withTooltip(
       /* @__PURE__ */ h(UBaseIcon, { clsPrefix, onClick: this.rotateCounterclockwise }, {
         default: () => /* @__PURE__ */ h(RotateCounterclockwiseIcon, null)
@@ -51135,22 +51374,10 @@ var _UImagePreview = defineComponent({
       }),
       "tipClockwise"
     );
-    const originalSizeNode = withTooltip(
-      /* @__PURE__ */ h(UBaseIcon, { clsPrefix, onClick: this.resizeToOrignalImageSize }, {
-        default: () => {
-          return /* @__PURE__ */ h(ResizeSmallIcon, null);
-        }
-      }),
-      "tipOriginalSize"
-    );
     const zoomOutNode = withTooltip(
       /* @__PURE__ */ h(UBaseIcon, { clsPrefix, onClick: this.zoomOut }, { default: () => /* @__PURE__ */ h(ZoomOutIcon, null) }),
       "tipZoomOut"
     );
-    const downloadNode = withTooltip(
-      /* @__PURE__ */ h(UBaseIcon, { clsPrefix, onClick: this.handleDownloadClick }, { default: () => downloadIcon }),
-      "tipDownload"
-    );
     const closeNode = withTooltip(
       /* @__PURE__ */ h(UBaseIcon, { clsPrefix, onClick: () => this.close() }, { default: () => closeIcon }),
       "tipClose"
@@ -51192,17 +51419,13 @@ var _UImagePreview = defineComponent({
                   return null;
                 return /* @__PURE__ */ 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__ */ h(Fragment, null, this.onPrev ? /* @__PURE__ */ h(Fragment, null, prevNode, nextNode) : null, rotateCounterclockwiseNode, rotateClockwiseNode, originalSizeNode, zoomOutNode, zoomInNode, downloadNode, closeNode));
+                }) : /* @__PURE__ */ h(Fragment, null, rotateCounterclockwiseNode, rotateClockwiseNode, zoomOutNode, zoomInNode, closeNode));
               }
             }) : null,
             /* @__PURE__ */ h(
@@ -51857,7 +52080,7 @@ var _USpin = defineComponent({
   }
 });
 
-function useUploadActionsRender(opts) {
+function useUploadActionsRender(options) {
   const {
     clsPrefix,
     listType,
@@ -51877,7 +52100,7 @@ function useUploadActionsRender(opts) {
     handleRetryClick,
     handleDownloadClick,
     capitalizeFirstLetter
-  } = opts;
+  } = options;
   const getExt = (name) => {
     const i = name.lastIndexOf(".");
     return i === -1 || i === name.length - 1 ? "" : name.slice(i + 1);
@@ -52004,159 +52227,6 @@ function useUploadActionsRender(opts) {
   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",
@@ -52234,7 +52304,12 @@ var UUploadFile = defineComponent({
         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;
@@ -52313,6 +52388,8 @@ var UUploadFile = defineComponent({
       } = 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)
@@ -52399,7 +52476,8 @@ var UUploadFile = defineComponent({
               `${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__ */ h(
@@ -52567,11 +52645,17 @@ var _UUploadFileList = defineComponent({
       themeClassRef,
       maxReachedRef,
       showTriggerRef,
-      imageGroupPropsRef
+      imageGroupPropsRef,
+      previewSrcListRef,
+      previewShowRef,
+      previewCurrentRef
     } = UUpload;
     const isImageCardTypeRef = computed(
       () => listTypeRef.value === "image-card" || listTypeRef.value === "image"
     );
+    const isPreviewListTypeRef = computed(
+      () => listTypeRef.value === "preview-list"
+    );
     const renderFileList = () => mergedFileListRef.value.map((file) => /* @__PURE__ */ h(
       UUploadFile,
       {
@@ -52585,6 +52669,21 @@ var _UUploadFileList = defineComponent({
     const renderUploadFileList = () => isImageCardTypeRef.value ? /* @__PURE__ */ h(_UImageGroup, { ...imageGroupPropsRef.value }, { default: renderFileList }) : /* @__PURE__ */ h(FadeInExpandTransition, { group: true }, {
       default: renderFileList
     });
+    const renderPreview = () => /* @__PURE__ */ 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;
@@ -52603,6 +52702,7 @@ var _UUploadFileList = defineComponent({
           ]
         },
         renderUploadFileList(),
+        isPreviewListTypeRef.value && renderPreview(),
         showTriggerRef.value && !maxReachedRef.value && isImageCardTypeRef.value && /* @__PURE__ */ h(_UUploadTrigger, null, slots)
       );
     };
@@ -52868,119 +52968,6 @@ function useUploadInternals(options) {
   };
 }
 
-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 = defineComponent({
   name: "Upload",
   props: uploadProps,
@@ -53030,15 +53017,15 @@ var _UUpload = defineComponent({
     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 = "";
     }
@@ -53058,12 +53045,12 @@ var _UUpload = defineComponent({
       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);
@@ -53092,6 +53079,10 @@ var _UUpload = defineComponent({
             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
@@ -53104,7 +53095,7 @@ var _UUpload = defineComponent({
         let nextTickChain = Promise.resolve();
         fileInfos.forEach((fileInfo) => {
           nextTickChain = nextTickChain.then(nextTick).then(() => {
-            fileInfo && doChange(fileInfo, e, {
+            fileInfo && doChange(fileInfo, event, {
               append: true
             });
           });
@@ -53131,6 +53122,15 @@ var _UUpload = defineComponent({
       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: {
@@ -53211,6 +53211,26 @@ var _UUpload = defineComponent({
       }
       return "";
     }
+    function isFilePreviewable(file) {
+      return props.shouldUseThumbnailUrl(file) && getFilePreviewSrc(file) !== null;
+    }
+    const previewFileListRef = computed(
+      () => mergedFileListRef.value.filter(isFilePreviewable)
+    );
+    const previewSrcListRef = computed(
+      () => previewFileListRef.value.map((file) => getFilePreviewSrc(file))
+    );
+    const previewShowRef = ref(false);
+    const previewCurrentRef = 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 = computed(() => {
       const { value: size } = formItem.mergedSizeRef;
       const {
@@ -53330,7 +53350,12 @@ var _UUpload = defineComponent({
       imageGroupPropsRef: toRef(props, "imageGroupProps"),
       mergedDirectoryDndRef: computed(() => {
         return props.directoryDnd ?? props.directory;
-      })
+      }),
+      previewSrcListRef,
+      previewShowRef,
+      previewCurrentRef,
+      isFilePreviewable,
+      openFilePreview
     });
     const exposedMethods = {
       clear: () => {
@@ -54833,6 +54858,12 @@ var _UMessageBubble = defineComponent({
       );
       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(
@@ -54873,7 +54904,7 @@ var _UMessageBubble = defineComponent({
           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,
@@ -54884,6 +54915,8 @@ var _UMessageBubble = defineComponent({
         _UUpload,
         {
           abstract: true,
+          listType: "preview-list",
+          shouldUseThumbnailUrl: isAttachmentPreviewable,
           fileList,
           fileListStyle: withPadding ? {
             display: "flex",
@@ -117093,7 +117126,7 @@ function useThemeVars() {
   });
 }
 
-var version = "2.3.1";
+var version = "2.3.2";
 
 function create({
   componentPrefix = "U",