@nutui/nutui-react-taro 2.0.19-beta.0 → 2.0.20-beta.0

package/dist/nutui.react.umd.js

@@ -8,7 +8,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react-taro v2.0.19-beta.0 Mon Sep 25 2023 18:03:38 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.0.20 Fri Oct 13 2023 13:54:07 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -3238,6 +3238,9 @@ var __publicField = (obj, key, value) => {
     ));
   };
   ConfigProvider.displayName = "NutConfigProvider";
+  const pxCheck = (value) => {
+    return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
+  };
   const defaultProps$1r = {
     src: "",
     error: true,
@@ -3272,14 +3275,13 @@ var __publicField = (obj, key, value) => {
         onError && onError(e);
       }
     };
-    const pxCheck2 = (value) => {
-      return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
-    };
     const containerStyle = {
-      height: height ? pxCheck2(height) : "",
-      width: width ? pxCheck2(width) : "",
+      // eslint-disable-next-line no-nested-ternary
+      height: height ? pxCheck(height) : Taro.getEnv() === "WEB" ? "" : "100px",
+      // eslint-disable-next-line no-nested-ternary
+      width: width ? pxCheck(width) : Taro.getEnv() === "WEB" ? "" : "100%",
       overflow: radius !== void 0 && radius !== null ? "hidden" : "",
-      borderRadius: radius !== void 0 && radius !== null ? pxCheck2(radius) : ""
+      borderRadius: radius !== void 0 && radius !== null ? pxCheck(radius) : ""
     };
     const imgStyle = {
       ...style
@@ -5224,9 +5226,6 @@ var __publicField = (obj, key, value) => {
     }
   };
   const GridContext = React.createContext(gridContext);
-  const pxCheck = (value) => {
-    return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
-  };
   const defaultProps$1o = {
     text: "",
     columns: 4,
@@ -6191,7 +6190,9 @@ var __publicField = (obj, key, value) => {
     const open2 = () => {
       if (!innerVisible) {
         setInnerVisible(true);
-        setIndex(++_zIndex);
+        if (props.zIndex === void 0) {
+          setIndex(++_zIndex);
+        }
       }
       if (destroyOnClose) {
         setShowChildren(true);
@@ -10942,11 +10943,11 @@ var __publicField = (obj, key, value) => {
           ...this.store,
           ...newStore
         };
-        this.fieldEntities.forEach((enetity) => {
-          const { name } = enetity.props;
+        this.fieldEntities.forEach((entity) => {
+          const { name } = entity.props;
           Object.keys(newStore).forEach((key) => {
             if (key === name) {
-              enetity.onStoreChange("update");
+              entity.onStoreChange("update");
             }
           });
         });
@@ -10957,44 +10958,19 @@ var __publicField = (obj, key, value) => {
           ...callback
         };
       });
-      __publicField(this, "validate", () => {
-        const err = [];
+      __publicField(this, "validateFields", async (nameList) => {
+        var _a;
+        let filterEntitys = [];
+        const errs = [];
         this.errors.length = 0;
-        this.fieldEntities.forEach((entity) => {
-          var _a;
-          const { name, rules: rules2 = [] } = entity.props;
-          const descriptor = {};
-          if (rules2.length) {
-            if (rules2.length > 1) {
-              descriptor[name] = [];
-              rules2.forEach((v) => {
-                descriptor[name].push(v);
-              });
-            } else {
-              descriptor[name] = rules2[0];
-            }
-          }
-          const validator = new Schema(descriptor);
-          validator.messages();
-          validator.validate({ [name]: (_a = this.store) == null ? void 0 : _a[name] }, (errors) => {
-            if (errors) {
-              err.push(...errors);
-              this.errors[name] = errors;
-            }
-            entity.onStoreChange("validate");
-          });
-        });
-        return err;
-      });
-      __publicField(this, "validateFields", (nameList) => {
         if (!nameList || nameList.length === 0) {
-          this.validate();
-          return;
+          filterEntitys = this.fieldEntities;
+        } else {
+          filterEntitys = this.fieldEntities.filter(
+            ({ props: { name } }) => nameList.includes(name)
+          );
         }
-        this.fieldEntities.filter(({ props: { name } }) => {
-          return nameList.includes(name);
-        }).forEach((entity) => {
-          var _a;
+        for (const entity of filterEntitys) {
           const { name, rules: rules2 = [] } = entity.props;
           const descriptor = {};
           if (rules2.length) {
@@ -11008,19 +10984,22 @@ var __publicField = (obj, key, value) => {
             }
           }
           const validator = new Schema(descriptor);
-          validator.messages();
-          validator.validate({ [name]: (_a = this.store) == null ? void 0 : _a[name] }, (errors) => {
+          try {
             this.errors[name] = [];
+            await validator.validate({ [name]: (_a = this.store) == null ? void 0 : _a[name] });
+          } catch ({ errors }) {
             if (errors) {
+              errs.push(...errors);
               this.errors[name] = errors;
             }
-            entity.onStoreChange("validate");
-          });
-        });
+          }
+          entity.onStoreChange("validate");
+        }
+        return errs;
       });
-      __publicField(this, "submit", () => {
+      __publicField(this, "submit", async () => {
         var _a, _b, _c, _d;
-        const errors = this.validate();
+        const errors = await this.validateFields();
         if (errors.length === 0) {
           (_b = (_a = this.callbacks).onFinish) == null ? void 0 : _b.call(_a, this.store);
         } else if (errors.length > 0) {
@@ -11810,6 +11789,8 @@ var __publicField = (obj, key, value) => {
     }, [showPopup]);
     const windowHeight = React.useMemo(() => Taro.getSystemInfoSync().windowHeight, []);
     const updateItemOffset = React.useCallback(() => {
+      if (!parent.lockScroll)
+        return;
       const p = parent.menuRef.current;
       p.getBoundingClientRect().then((rect) => {
         if (rect) {
@@ -13457,80 +13438,6 @@ var __publicField = (obj, key, value) => {
   };
   TextArea.defaultProps = defaultProps$J;
   TextArea.displayName = "NutTextArea";
-  const defaultProps$I = {
-    ...ComponentDefaults,
-    percent: 0,
-    showText: false,
-    animated: false,
-    delay: 0
-  };
-  const Progress = (props) => {
-    const {
-      className,
-      style,
-      percent,
-      background,
-      color,
-      strokeWidth,
-      showText,
-      animated,
-      children,
-      delay,
-      ...rest
-    } = {
-      ...defaultProps$I,
-      ...props
-    };
-    const classPrefix2 = "nut-progress";
-    const classesInner = classNames({
-      [`${classPrefix2}-inner`]: true,
-      [`${classPrefix2}-active`]: animated
-    });
-    const stylesOuter = {
-      height: `${strokeWidth}px`,
-      background
-    };
-    const [displayPercent, setDispalyPercent] = React.useState(0);
-    const stylesInner = {
-      width: `${displayPercent}%`,
-      background: color
-    };
-    React.useEffect(() => {
-      setDispalyPercent(percent);
-    }, [percent]);
-    React.useEffect(() => {
-      let timer = null;
-      if (delay) {
-        setDispalyPercent(0);
-        timer = setTimeout(() => {
-          setDispalyPercent(percent);
-        }, delay);
-      }
-      return () => {
-        timer && clearTimeout(timer);
-      };
-    }, []);
-    return /* @__PURE__ */ React.createElement("div", { className: classNames(classPrefix2, className), style, ...rest }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-outer`, style: stylesOuter }, /* @__PURE__ */ React.createElement("div", { className: classesInner, style: stylesInner }, showText && /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: `${classPrefix2}-text`,
-        style: { left: `${displayPercent}%` }
-      },
-      children || /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: `${classPrefix2}-text__inner`,
-          style: {
-            background: color
-          }
-        },
-        percent,
-        "%"
-      )
-    ))));
-  };
-  Progress.defaultProps = defaultProps$I;
-  Progress.displayName = "NutProgress";
   class UploadOptions {
     constructor() {
       __publicField(this, "url", "");
@@ -13551,6 +13458,9 @@ var __publicField = (obj, key, value) => {
       __publicField(this, "beforeXhrUpload");
     }
   }
+  const UPLOADING = "uploading";
+  const SUCCESS = "success";
+  const ERROR = "error";
   class Upload {
     constructor(options) {
       __publicField(this, "options");
@@ -13672,6 +13582,179 @@ var __publicField = (obj, key, value) => {
       done();
     }
   };
+  class FileItem {
+    constructor() {
+      __publicField(this, "status", "ready");
+      __publicField(this, "message", "准备中..");
+      __publicField(this, "uid", (/* @__PURE__ */ new Date()).getTime().toString());
+      __publicField(this, "name");
+      __publicField(this, "url");
+      __publicField(this, "type");
+      __publicField(this, "path");
+      __publicField(this, "percentage", 0);
+      __publicField(this, "formData", {});
+      __publicField(this, "responseText");
+      __publicField(this, "loadingIcon");
+      __publicField(this, "failIcon");
+    }
+  }
+  const defaultProps$I = {
+    ...ComponentDefaults,
+    percent: 0,
+    showText: false,
+    animated: false,
+    delay: 0
+  };
+  const Progress = (props) => {
+    const {
+      className,
+      style,
+      percent,
+      background,
+      color,
+      strokeWidth,
+      showText,
+      animated,
+      children,
+      delay,
+      ...rest
+    } = {
+      ...defaultProps$I,
+      ...props
+    };
+    const classPrefix2 = "nut-progress";
+    const classesInner = classNames({
+      [`${classPrefix2}-inner`]: true,
+      [`${classPrefix2}-active`]: animated
+    });
+    const stylesOuter = {
+      height: `${strokeWidth}px`,
+      background
+    };
+    const [displayPercent, setDispalyPercent] = React.useState(0);
+    const stylesInner = {
+      width: `${displayPercent}%`,
+      background: color
+    };
+    React.useEffect(() => {
+      setDispalyPercent(percent);
+    }, [percent]);
+    React.useEffect(() => {
+      let timer = null;
+      if (delay) {
+        setDispalyPercent(0);
+        timer = setTimeout(() => {
+          setDispalyPercent(percent);
+        }, delay);
+      }
+      return () => {
+        timer && clearTimeout(timer);
+      };
+    }, []);
+    return /* @__PURE__ */ React.createElement("div", { className: classNames(classPrefix2, className), style, ...rest }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-outer`, style: stylesOuter }, /* @__PURE__ */ React.createElement("div", { className: classesInner, style: stylesInner }, showText && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: `${classPrefix2}-text`,
+        style: { left: `${displayPercent}%` }
+      },
+      children || /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: `${classPrefix2}-text__inner`,
+          style: {
+            background: color
+          }
+        },
+        percent,
+        "%"
+      )
+    ))));
+  };
+  Progress.defaultProps = defaultProps$I;
+  Progress.displayName = "NutProgress";
+  const Preview = ({
+    fileList,
+    previewType,
+    deletable,
+    onDeleteItem,
+    handleItemClick,
+    previewUrl,
+    children
+  }) => {
+    const renderIcon = (item) => {
+      if (item.status === ERROR) {
+        return item.failIcon || /* @__PURE__ */ React.createElement(a$n, { color: "#fff" });
+      }
+      return item.loadingIcon || /* @__PURE__ */ React.createElement(r$h, { className: "nut-icon-loading", color: "#fff" });
+    };
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, fileList.length !== 0 && fileList.map((item, index) => {
+      var _a;
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: `nut-uploader__preview ${previewType}`,
+          key: item.uid
+        },
+        previewType === "picture" && deletable && /* @__PURE__ */ React.createElement(
+          a$n,
+          {
+            color: "rgba(0,0,0,0.6)",
+            className: "close",
+            onClick: () => onDeleteItem(item, index)
+          }
+        ),
+        previewType === "picture" && !children && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview-img" }, item.status === "ready" ? /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress" }, /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress__msg" }, item.message)) : item.status !== "success" && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress" }, renderIcon(item), /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress__msg" }, item.message)), ((_a = item.type) == null ? void 0 : _a.includes("image")) ? /* @__PURE__ */ React.createElement(React.Fragment, null, item.url && /* @__PURE__ */ React.createElement(
+          components.Image,
+          {
+            className: "nut-uploader__preview-img__c",
+            style: { objectFit: "fill" },
+            mode: "aspectFit",
+            src: item.url,
+            onClick: () => handleItemClick(item)
+          }
+        )) : /* @__PURE__ */ React.createElement(React.Fragment, null, previewUrl ? /* @__PURE__ */ React.createElement(
+          components.Image,
+          {
+            className: "nut-uploader__preview-img__c",
+            mode: "aspectFit",
+            src: previewUrl,
+            onClick: () => handleItemClick(item)
+          }
+        ) : /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview-img__file" }, /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            onClick: () => handleItemClick(item),
+            className: "nut-uploader__preview-img__file__name"
+          },
+          /* @__PURE__ */ React.createElement(a$i, { color: "#808080" }),
+          /* @__PURE__ */ React.createElement("span", null, " ", item.name)
+        ))), item.status === "success" ? /* @__PURE__ */ React.createElement("div", { className: "tips" }, item.name) : null),
+        previewType === "list" && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview-list" }, /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: `nut-uploader__preview-img__file__name ${item.status}`,
+            onClick: () => handleItemClick(item)
+          },
+          /* @__PURE__ */ React.createElement(a$i, null),
+          /* @__PURE__ */ React.createElement("span", null, " ", item.name)
+        ), deletable && /* @__PURE__ */ React.createElement(
+          a$p,
+          {
+            color: "#808080",
+            className: "nut-uploader__preview-img__file__del",
+            onClick: () => onDeleteItem(item, index)
+          }
+        ), item.status === "uploading" && /* @__PURE__ */ React.createElement(
+          Progress,
+          {
+            percent: item.percentage,
+            color: "linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)",
+            showText: false
+          }
+        ))
+      );
+    }));
+  };
   const defaultProps$H = {
     ...ComponentDefaults,
     url: "",
@@ -13680,7 +13763,7 @@ var __publicField = (obj, key, value) => {
     sourceType: ["album", "camera"],
     mediaType: ["image", "video"],
     camera: "back",
-    uploadIcon: null,
+    uploadIcon: /* @__PURE__ */ React.createElement(a$a, { size: "20px", color: "#808080" }),
     uploadLabel: "",
     previewType: "picture",
     fit: "cover",
@@ -13703,19 +13786,6 @@ var __publicField = (obj, key, value) => {
       return true;
     }
   };
-  class FileItem {
-    constructor() {
-      __publicField(this, "status", "ready");
-      __publicField(this, "message", "准备中..");
-      __publicField(this, "uid", Date.now().toString());
-      __publicField(this, "name");
-      __publicField(this, "url");
-      __publicField(this, "type");
-      __publicField(this, "path");
-      __publicField(this, "percentage", 0);
-      __publicField(this, "formData", {});
-    }
-  }
   const InternalUploader = (props, ref) => {
     const { locale } = useConfig$1();
     const {
@@ -13761,13 +13831,15 @@ var __publicField = (obj, key, value) => {
       beforeDelete,
       ...restProps
     } = { ...defaultProps$H, ...props };
-    const [fileList, setFileList] = React.useState(defaultValue || []);
-    const [uploadQueue, setUploadQueue] = React.useState([]);
-    React.useEffect(() => {
-      if (value) {
-        setFileList(value);
+    const [fileList, setFileList] = usePropsValue({
+      value,
+      defaultValue,
+      finalValue: [],
+      onChange: (v) => {
+        onChange == null ? void 0 : onChange(v);
       }
-    }, [value]);
+    });
+    const [uploadQueue, setUploadQueue] = React.useState([]);
     const classes = classNames(className, "nut-uploader");
     React.useImperativeHandle(ref, () => ({
       submit: () => {
@@ -13858,63 +13930,60 @@ var __publicField = (obj, key, value) => {
       uploadOption.beforeXhrUpload = beforeXhrUpload;
       uploadOption.onStart = (option) => {
         clearUploadQueue(index);
-        setFileList((fileList2) => {
-          fileList2.forEach((item) => {
+        setFileList(
+          fileList.map((item) => {
             if (item.uid === fileItem.uid) {
               item.status = "ready";
               item.message = locale.uploader.readyUpload;
             }
-          });
-          return [...fileList2];
-        });
+            return item;
+          })
+        );
         onStart && onStart(option);
       };
       uploadOption.onProgress = (e, option) => {
-        setFileList((fileList2) => {
-          fileList2.forEach((item) => {
+        setFileList(
+          fileList.map((item) => {
             if (item.uid === fileItem.uid) {
-              item.status = "uploading";
+              item.status = UPLOADING;
               item.message = locale.uploader.uploading;
               item.percentage = e.progress;
               onProgress && onProgress({ e, option, percentage: item.percentage });
             }
-          });
-          return [...fileList2];
-        });
+            return item;
+          })
+        );
       };
       uploadOption.onSuccess = (responseText, option) => {
-        setFileList((fileList2) => {
-          onUpdate && onUpdate(fileList2);
-          fileList2.forEach((item) => {
-            if (item.uid === fileItem.uid) {
-              item.status = "success";
-              item.message = locale.uploader.success;
-              item.responseText = responseText;
-            }
-          });
-          return [...fileList2];
+        const list = fileList.map((item) => {
+          if (item.uid === fileItem.uid) {
+            item.status = SUCCESS;
+            item.message = locale.uploader.success;
+            item.responseText = responseText;
+          }
+          return item;
         });
-        onSuccess && onSuccess({
+        setFileList(list);
+        onSuccess == null ? void 0 : onSuccess({
           responseText,
           option,
-          fileList
+          fileList: list
         });
       };
       uploadOption.onFailure = (responseText, option) => {
-        setFileList((fileList2) => {
-          fileList2.forEach((item) => {
-            if (item.uid === fileItem.uid) {
-              item.status = "error";
-              item.message = locale.uploader.error;
-              item.responseText = responseText;
-            }
-          });
-          return [...fileList2];
+        const list = fileList.map((item) => {
+          if (item.uid === fileItem.uid) {
+            item.status = ERROR;
+            item.message = locale.uploader.error;
+            item.responseText = responseText;
+          }
+          return item;
         });
-        onFailure && onFailure({
+        setFileList(list);
+        onFailure == null ? void 0 : onFailure({
           responseText,
           option,
-          fileList
+          fileList: list
         });
       };
       const task = new UploaderTaro(uploadOption);
@@ -13948,11 +14017,7 @@ var __publicField = (obj, key, value) => {
         fileItem.status = "ready";
         fileItem.type = fileType;
         fileItem.uid = `${fileItem.uid}_${index}`;
-        if (autoUpload) {
-          fileItem.message = locale.uploader.readyUpload;
-        } else {
-          fileItem.message = locale.uploader.waitingUpload;
-        }
+        fileItem.message = autoUpload ? locale.uploader.readyUpload : locale.uploader.waitingUpload;
         if (Taro.getEnv() === "WEB") {
           const formData = new FormData();
           for (const [key, value2] of Object.entries(data)) {
@@ -13969,7 +14034,7 @@ var __publicField = (obj, key, value) => {
           fileItem.url = fileType === "video" ? file.thumbTempFilePath : filepath;
         }
         fileList.push(fileItem);
-        setFileList([...fileList]);
+        setFileList(fileList);
         executeUpload(fileItem, index);
       });
     };
@@ -13994,9 +14059,9 @@ var __publicField = (obj, key, value) => {
       return filterFile;
     };
     const deleted = (file, index) => {
-      fileList.splice(index, 1);
-      onDelete && onDelete(file, fileList);
-      setFileList([...fileList]);
+      const deletedFileList = fileList.filter((file2, idx) => idx !== index);
+      onDelete == null ? void 0 : onDelete(file, deletedFileList);
+      setFileList(deletedFileList);
     };
     const onDeleteItem = (file, index) => {
       clearUploadQueue(index);
@@ -14009,88 +14074,34 @@ var __publicField = (obj, key, value) => {
       const { tempFiles } = res;
       const _files = filterFiles(tempFiles);
       readFile(_files);
-      onChange && onChange({ fileList });
     };
     const onChangeImage = (res) => {
       const { tempFiles } = res;
       const _files = filterFiles(tempFiles);
       readFile(_files);
-      onChange && onChange({ fileList });
     };
     const handleItemClick = (file) => {
-      onFileItemClick && onFileItemClick(file);
+      onFileItemClick == null ? void 0 : onFileItemClick(file);
     };
-    return /* @__PURE__ */ React.createElement("div", { className: classes, ...restProps }, (children || previewType === "list") && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__slot" }, /* @__PURE__ */ React.createElement(React.Fragment, null, children || /* @__PURE__ */ React.createElement(Button, { size: "small", type: "primary" }, "上传文件"), maxCount > fileList.length && /* @__PURE__ */ React.createElement(Button, { className: "nut-uploader__input", onClick: _chooseImage }))), fileList.length !== 0 && Array.isArray(fileList) && fileList.map((item, index) => {
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: `nut-uploader__preview ${previewType}`,
-          key: item.uid
-        },
-        previewType === "picture" && deletable && /* @__PURE__ */ React.createElement(
-          a$n,
-          {
-            color: "rgba(0,0,0,0.6)",
-            className: "close",
-            onClick: () => onDeleteItem(item, index)
-          }
-        ),
-        previewType === "picture" && !children && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview-img" }, item.status === "ready" ? /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress" }, /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress__msg" }, item.message)) : item.status !== "success" && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress" }, item.failIcon !== " " && item.loadingIcon !== " " && (item.status === "error" ? item.failIcon || /* @__PURE__ */ React.createElement(a$n, { color: "#fff" }) : item.loadingIcon || /* @__PURE__ */ React.createElement(r$h, { color: "#fff" })), /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview__progress__msg" }, item.message)), item.type.includes("image") ? /* @__PURE__ */ React.createElement(React.Fragment, null, item.url && /* @__PURE__ */ React.createElement(
-          components.Image,
-          {
-            className: "nut-uploader__preview-img__c",
-            style: { objectFit: fit },
-            mode: "aspectFit",
-            src: item.url,
-            onClick: () => handleItemClick(item)
-          }
-        )) : /* @__PURE__ */ React.createElement(React.Fragment, null, previewUrl ? /* @__PURE__ */ React.createElement(
-          components.Image,
-          {
-            className: "nut-uploader__preview-img__c",
-            mode: "aspectFit",
-            src: previewUrl,
-            onClick: () => handleItemClick(item)
-          }
-        ) : /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview-img__file" }, /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            onClick: () => handleItemClick(item),
-            className: "nut-uploader__preview-img__file__name"
-          },
-          /* @__PURE__ */ React.createElement(a$i, { color: "#808080" }),
-          /* @__PURE__ */ React.createElement("span", null, " ", item.name)
-        ))), item.status === "success" ? /* @__PURE__ */ React.createElement("div", { className: "tips" }, item.name) : null),
-        previewType === "list" && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__preview-list" }, /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: `nut-uploader__preview-img__file__name ${item.status}`,
-            onClick: () => handleItemClick(item)
-          },
-          /* @__PURE__ */ React.createElement(a$i, null),
-          /* @__PURE__ */ React.createElement("span", null, " ", item.name)
-        ), deletable && /* @__PURE__ */ React.createElement(
-          a$p,
-          {
-            color: "#808080",
-            className: "nut-uploader__preview-img__file__del",
-            onClick: () => onDeleteItem(item, index)
-          }
-        ), item.status === "uploading" && /* @__PURE__ */ React.createElement(
-          Progress,
-          {
-            percent: item.percentage,
-            color: "linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)",
-            showText: false
-          }
-        ))
-      );
-    }), maxCount > fileList.length && previewType === "picture" && !children && /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement("div", { className: classes, ...restProps }, (children || previewType === "list") && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__slot" }, /* @__PURE__ */ React.createElement(React.Fragment, null, children || /* @__PURE__ */ React.createElement(Button, { size: "small", type: "primary" }, "上传文件"), maxCount > fileList.length && /* @__PURE__ */ React.createElement(Button, { className: "nut-uploader__input", onClick: _chooseImage }))), /* @__PURE__ */ React.createElement(
+      Preview,
+      {
+        ...{
+          fileList,
+          previewType,
+          deletable,
+          onDeleteItem,
+          handleItemClick,
+          previewUrl,
+          children
+        }
+      }
+    ), maxCount > fileList.length && previewType === "picture" && !children && /* @__PURE__ */ React.createElement(
       "div",
       {
         className: `nut-uploader__upload ${previewType} ${disabled ? "nut-uploader__upload-disabled" : ""}`
       },
-      /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__icon" }, uploadIcon || /* @__PURE__ */ React.createElement(a$a, { size: "20px", color: "#808080" }), /* @__PURE__ */ React.createElement("span", { className: "nut-uploader__icon-tip" }, uploadLabel)),
+      /* @__PURE__ */ React.createElement("div", { className: "nut-uploader__icon" }, uploadIcon, /* @__PURE__ */ React.createElement("span", { className: "nut-uploader__icon-tip" }, uploadLabel)),
       /* @__PURE__ */ React.createElement(Button, { className: "nut-uploader__input", onClick: _chooseImage })
     ));
   };
@@ -17569,8 +17580,8 @@ var __publicField = (obj, key, value) => {
       {
         className: classNames(classPrefix$3, className),
         style: {
-          width: !width ? "100%" : `${width}px`,
-          height: !height ? "150px" : `${height}px`
+          width: !width ? "100%" : pxCheck(width),
+          height: !height ? "150px" : pxCheck(height)
         }
       },
       /* @__PURE__ */ React.createElement(
@@ -17578,8 +17589,8 @@ var __publicField = (obj, key, value) => {
         {
           className: "nut-swiper__inner",
           style: {
-            width: !width ? "100%" : `${width}px`,
-            height: !height ? "150px" : `${height}px`
+            width: !width ? "100%" : pxCheck(width),
+            height: !height ? "150px" : pxCheck(height)
           }
         },
         /* @__PURE__ */ React.createElement(
@@ -17596,12 +17607,18 @@ var __publicField = (obj, key, value) => {
               (_a = props.onChange) == null ? void 0 : _a.call(props, e);
             },
             style: {
-              width: !width ? "100%" : `${width}px`,
-              height: !height ? "150px" : `${height}px`
+              width: !width ? "100%" : pxCheck(width),
+              height: !height ? "150px" : pxCheck(height)
             },
             ...rest
           },
-          React.Children.toArray(children).map((child, index) => /* @__PURE__ */ React.createElement(components.SwiperItem, { key: index }, child))
+          React.Children.toArray(children).map((child, index) => {
+            let className2;
+            if (React.isValidElement(child)) {
+              className2 = child.props.className;
+            }
+            return /* @__PURE__ */ React.createElement(components.SwiperItem, { className: className2, key: index }, child);
+          })
         )
       ),
       renderIndicator()
@@ -17831,13 +17848,14 @@ var __publicField = (obj, key, value) => {
             ));
           }) : []).concat(
             images && images.length > 0 ? images.map((item, index) => {
-              return /* @__PURE__ */ React.createElement(SwiperItem, { key: index }, Taro.getEnv() === "WEB" ? /* @__PURE__ */ React.createElement("img", { src: item.src, alt: "" }) : /* @__PURE__ */ React.createElement(
-                components.Image,
+              return /* @__PURE__ */ React.createElement(SwiperItem, { key: index }, Taro.getEnv() === "WEB" ? /* @__PURE__ */ React.createElement(Image$1, { src: item.src, mode: "aspectFit" }) : /* @__PURE__ */ React.createElement(
+                Image$1,
                 {
                   src: item.src,
                   mode: "aspectFit",
                   showMenuByLongpress: true,
-                  style: { width: "100%", height: "100%" }
+                  width: "100%",
+                  height: "100%"
                 }
               ));
             }) : []