@nutui/nutui-react-taro 1.4.9-beta.0 → 1.4.9-beta.2

package/dist/nutui.react.umd.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v1.4.9-beta.0 Fri Feb 24 2023 14:00:57 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v1.4.9 Wed Mar 01 2023 15:41:27 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -1632,7 +1632,7 @@
         round,
         [`nut-popup-${position}`]: true,
         [`${popClass}`]: true,
-        [`${className}`]: true
+        [`${className || ""}`]: true
       },
       b2("")
     );
@@ -1862,7 +1862,9 @@
     const b2 = cn("grid");
     const rootClass = () => {
       const prefixCls = b2();
-      return `${className} ${prefixCls} ${border && !gutter ? `${b2("border")}` : ""}`;
+      return classNames(className, prefixCls, {
+        [b2("border")]: border && !gutter
+      });
     };
     const rootStyle = () => {
       let styleSelf = {};
@@ -1963,8 +1965,14 @@
       return style;
     };
     const contentClass = () => {
-      return `${b2("content")} ${border && b2("content--border")} ${border && gutter && b2("content--surround")}  ${center && b2("content--center")} ${square && b2("content--square")} ${reverse && b2("content--reverse")} ${!!direction && b2(`content--${direction}`)}
-      `;
+      return classNames(b2("content"), {
+        [b2("content--border")]: border,
+        [b2("content--surround")]: border && gutter,
+        [b2("content--center")]: center,
+        [b2("content--square")]: square,
+        [b2("content--reverse")]: reverse,
+        [b2(`content--${direction}`)]: !!direction
+      });
     };
     const isIconName = () => {
       return typeof icon === "string";
@@ -2135,6 +2143,7 @@
     bottom: 0,
     zIndex: 2e3
   };
+  const b$2 = cn("sticky");
   const Sticky = (props) => {
     const {
       position = "top",
@@ -2235,10 +2244,10 @@
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       ref: rootRef,
       style: rootStyle,
-      className: `nut-sticky ${className}`,
+      className: classNames(b$2(), className),
       ...rest
     }, /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: `nut-sticky-box ${fixed ? "nut-sticky-fixed" : ""}`,
+      className: classNames("nut-sticky-box", { "nut-sticky-fixed": fixed }),
       ref: stickyRef,
       style: stickyStyle
     }, children));
@@ -2609,7 +2618,7 @@
     React.useEffect(() => {
     }, []);
     return /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: `${classes} ${className}`,
+      className: classNames(classes, className),
       ...rest
     }, renderEles());
   };
@@ -3618,6 +3627,7 @@
   };
   Tabs.defaultProps = defaultProps$15;
   Tabs.displayName = "NutTabs";
+  Tabs.TabPane = TabPane;
   const Utils = {
     isLeapYear(y) {
       return y % 4 == 0 && y % 100 != 0 || y % 400 == 0;
@@ -3765,6 +3775,7 @@
     const [monthsData, setMonthsData] = React.useState([]);
     const [translateY, setTranslateY] = React.useState(0);
     const [monthDefaultRange, setMonthDefaultRange] = React.useState([]);
+    const [scrollTop, setScrollTop] = React.useState(0);
     const [state] = React.useState({
       currDate: "",
       propStartDate: "",
@@ -4061,7 +4072,7 @@
       setMonthDefaultRange([start2, end]);
       setTranslateY(state.monthsData[start2].cssScrollHeight);
     };
-    const mothsViewScroll = (e2) => {
+    const monthsViewScroll = (e2) => {
       if (state.monthsData.length <= 1) {
         return;
       }
@@ -4261,11 +4272,13 @@
                   clearInterval(interval);
                   if (months.current) {
                     months.current.scrollTop = state.monthsData[index].cssScrollHeight;
+                    setScrollTop(months.current.scrollTop);
                   }
                 }
               }, 40);
             } else {
               months.current.scrollTop = state.monthsData[index].cssScrollHeight;
+              setScrollTop(months.current.scrollTop);
             }
           }
         }
@@ -4296,9 +4309,12 @@
     }, weeks.map((item) => /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "calendar-week-item",
       key: item
-    }, item)))), /* @__PURE__ */ React__default["default"].createElement("div", {
+    }, item)))), /* @__PURE__ */ React__default["default"].createElement(index_cjs.ScrollView, {
+      scrollTop,
+      scrollY: true,
+      scrollWithAnimation: true,
       className: "nut-calendar-content",
-      onScroll: mothsViewScroll,
+      onScroll: monthsViewScroll,
       ref: months
     }, /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "calendar-months-panel",
@@ -4958,6 +4974,7 @@
   const Cascader = React__default["default"].forwardRef(InternalCascader);
   Cascader.defaultProps = defaultProps$11;
   Cascader.displayName = "NutCascader";
+  const CheckboxGroupContext = React.createContext(null);
   const defaultProps$10 = {
     disabled: false,
     checkedValue: [],
@@ -4983,8 +5000,6 @@
         options,
         ...rest
       } = props;
-      const [innerDisabled, setInnerDisabled] = React.useState(disabled);
-      const [innerValue, setInnerValue] = React.useState(checkedValue);
       React.useImperativeHandle(ref, () => ({
         toggleAll(state) {
           if (state === false) {
@@ -5010,75 +5025,41 @@
           setInnerValue(reverse);
         }
       }));
+      const [innerValue, setInnerValue] = React.useState(checkedValue || []);
       React.useEffect(() => {
-        setInnerDisabled(disabled);
-        setInnerValue(checkedValue);
-      }, [disabled, checkedValue]);
-      function handleChildChange(state, label) {
-        if (max !== void 0 && innerValue && innerValue.length > max)
-          return;
-        if (innerValue) {
-          let clippedValue = [];
-          if (state) {
-            clippedValue = [...innerValue, label];
-          } else {
-            innerValue == null ? void 0 : innerValue.splice(innerValue == null ? void 0 : innerValue.indexOf(label), 1);
-            clippedValue = [...innerValue];
-          }
-          setInnerValue(clippedValue);
-          onChange && onChange(clippedValue);
-        }
-      }
-      function validateChildChecked(child) {
-        if (!innerValue)
-          return false;
-        return (innerValue == null ? void 0 : innerValue.indexOf(child.props.label || child.children)) > -1;
-      }
-      function validateChecked(value) {
-        if (!innerValue)
-          return false;
-        return (innerValue == null ? void 0 : innerValue.indexOf(value)) > -1;
-      }
-      function getParentVals() {
-        return innerValue;
-      }
-      function cloneChildren() {
-        return React__default["default"].Children.map(children, (child) => {
-          const childChecked = validateChildChecked(child);
-          if (child.type.displayName !== "NutCheckBox") {
-            return React__default["default"].cloneElement(child);
-          }
-          return React__default["default"].cloneElement(child, {
-            disabled: innerDisabled,
-            checked: childChecked,
-            onChange: handleChildChange,
-            getParentVals,
-            max,
-            textPosition
-          });
-        });
-      }
-      const renderOptionsChildren = React.useCallback(() => {
+        setInnerValue(checkedValue || []);
+      }, [checkedValue]);
+      const renderOptions = React.useCallback(() => {
         return options == null ? void 0 : options.map(({ label, value, disabled: disabled2, onChange: onChange2, ...rest2 }) => {
-          const childChecked = validateChecked(value);
           return /* @__PURE__ */ React__default["default"].createElement(Checkbox, {
             key: value == null ? void 0 : value.toString(),
             children: label,
             label: value,
-            disabled: innerDisabled ? true : disabled2,
-            onChange: handleChildChange,
-            ...rest2,
-            max,
-            textPosition,
-            getParentVals,
-            checked: childChecked
+            ...rest2
           });
         });
-      }, [innerValue, options, innerDisabled, max]);
-      return /* @__PURE__ */ React__default["default"].createElement("div", {
+      }, [options, max]);
+      return /* @__PURE__ */ React__default["default"].createElement(CheckboxGroupContext.Provider, {
+        value: {
+          textPosition: textPosition || "left",
+          disabled,
+          max,
+          checkedValue: innerValue || [],
+          check: (value) => {
+            const combined = [...innerValue, value];
+            setInnerValue(combined);
+            onChange && onChange(combined);
+          },
+          uncheck: (value) => {
+            const reduced = innerValue.filter((item) => item !== value);
+            setInnerValue(reduced);
+            onChange && onChange(reduced);
+          }
+        }
+      }, /* @__PURE__ */ React__default["default"].createElement("div", {
         className: `${b2()} nut-checkboxgroup--${props.direction} ${className || ""}`,
         ...rest
-      }, (options == null ? void 0 : options.length) ? renderOptionsChildren() : cloneChildren());
+      }, (options == null ? void 0 : options.length) ? renderOptions() : children));
     }
   );
   CheckboxGroup.defaultProps = defaultProps$10;
@@ -5108,7 +5089,6 @@
       iconSize,
       label,
       className,
-      textPosition,
       iconActiveName,
       checked,
       disabled,
@@ -5117,20 +5097,33 @@
       iconClassPrefix,
       iconFontClassName,
       iconIndeterminateName,
-      getParentVals,
-      max,
-      ...rest
+      ...others
     } = props;
-    const [innerChecked, setInnerChecked] = React.useState(checked);
-    const [innerDisabled, setDisabled] = React.useState(disabled);
+    let { textPosition, ...rest } = others;
+    const ctx2 = React.useContext(CheckboxGroupContext);
+    let [innerChecked, setInnerChecked] = React.useState(checked);
+    let [innerDisabled, setDisabled] = React.useState(disabled);
     const [_indeterminate, setIndeterminate] = React.useState(indeterminate);
     React.useEffect(() => {
-      setInnerChecked(checked);
+      !ctx2 && setInnerChecked(checked);
       setDisabled(disabled);
-    }, [disabled, checked]);
-    React.useEffect(() => {
       setIndeterminate(indeterminate);
-    }, [indeterminate]);
+    }, [disabled, checked, indeterminate]);
+    if (ctx2) {
+      if (ctx2.textPosition !== void 0) {
+        textPosition = ctx2.textPosition;
+      }
+      innerDisabled = ctx2.disabled;
+      innerChecked = ctx2.checkedValue.includes(label);
+      setInnerChecked = (checked2) => {
+        if (ctx2.disabled)
+          return;
+        if (checked2)
+          ctx2.check(label);
+        if (!checked2)
+          ctx2.uncheck(label);
+      };
+    }
     const getIconName = () => {
       if (!innerChecked) {
         return iconName;
@@ -5167,13 +5160,15 @@
       }, children || label);
     };
     const handleClick = () => {
-      if (!disabled) {
-        const latest = !innerChecked;
-        if (max !== void 0 && latest && getParentVals().length >= max)
+      if (disabled)
+        return;
+      const latestChecked = !innerChecked;
+      if (ctx2 && ctx2.max !== void 0) {
+        if (latestChecked && ctx2.checkedValue.length >= ctx2.max)
           return;
-        onChange && onChange(latest, label || children);
-        setInnerChecked(latest);
       }
+      onChange && onChange(latestChecked, label || children);
+      setInnerChecked(latestChecked);
     };
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       className: `${b2({ reverse: textPosition === "left" })} ${className || ""}`,
@@ -5451,7 +5446,7 @@
       }, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, item.text ? item.text : item));
     }), !threeDimensional && listData.map((item, index) => {
       return /* @__PURE__ */ React__default["default"].createElement("div", {
-        className: "nut-picker-roller-item-tile",
+        className: "nut-picker-roller-item-title",
         key: item.value ? item.value : index,
         style: {
           height: `${lineSpacing.current}px`,
@@ -5690,6 +5685,19 @@
     }))));
   };
   const Picker = React__default["default"].forwardRef(InternalPicker);
+  const defaultConfigRef = {
+    current: {
+      locale: zhCN
+    }
+  };
+  const getDefaultConfig = () => {
+    return defaultConfigRef.current;
+  };
+  const ConfigContext = React.createContext(null);
+  const useConfig = () => {
+    var _a;
+    return (_a = React.useContext(ConfigContext)) != null ? _a : getDefaultConfig();
+  };
   const currentYear = new Date().getFullYear();
   const defaultProps$_ = {
     modelValue: null,
@@ -5725,6 +5733,7 @@
       ...defaultProps$_,
       ...props
     };
+    const { locale } = useConfig();
     const [show, setShow] = React.useState(false);
     const [currentDate, setCurrentDate] = React.useState(modelValue);
     const [defaultValue, setDefaultValue] = React.useState([]);
@@ -5733,13 +5742,14 @@
     const isDate = (val) => {
       return Object.prototype.toString.call(val) === "[object Date]" && !Number.isNaN(val.getTime());
     };
+    const datepickerLang = locale.datepicker;
     const zhCNType = {
-      day: "\u65E5",
-      year: "\u5E74",
-      month: "\u6708",
-      hour: "\u65F6",
-      minute: "\u5206",
-      seconds: "\u79D2"
+      day: datepickerLang.day,
+      year: datepickerLang.year,
+      month: datepickerLang.month,
+      hour: datepickerLang.hour,
+      minute: datepickerLang.min,
+      seconds: datepickerLang.seconds
     };
     const formatValue = (value) => {
       let cvalue = value;
@@ -5790,7 +5800,6 @@
     };
     const ranges = (date) => {
       const curDate = date || currentDate;
-      console.log(11, currentDate);
       if (!curDate)
         return [];
       const { maxYear, maxDate: maxDate2, maxMonth, maxHour, maxMinute, maxSeconds } = getBoundary("max", curDate);
@@ -5977,6 +5986,7 @@
       style,
       ...rest
     }, listData.length > 0 && /* @__PURE__ */ React__default["default"].createElement(Picker, {
+      title,
       isVisible: show,
       listData,
       onClose: onCloseDatePicker,
@@ -7820,7 +7830,7 @@
       onChange && onChange(value);
     };
     return /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: `${b2()} ${className}`,
+      className: classNames(b2(), className),
       style
     }, countArray.map((n) => {
       return /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -7832,7 +7842,9 @@
         classPrefix: iconClassPrefix,
         fontClassName: iconFontClassName,
         size: iconSize,
-        className: `${bi("icon")} ${disabled || n > score ? bi("icon--disabled") : ""}`,
+        className: classNames(bi("icon"), {
+          [bi("icon--disabled")]: disabled || n > score
+        }),
         name: n <= score ? checkedIcon : uncheckedIcon,
         color: n <= score ? activeColor : voidColor
       }), allowHalf && score > n - 1 && /* @__PURE__ */ React__default["default"].createElement(Icon, {
@@ -8507,57 +8519,98 @@
         console.warn("\u6D4F\u89C8\u5668\u4E0D\u652F\u6301 XMLHttpRequest");
       }
     }
+  }
+  class UploaderTaro extends Upload {
+    constructor(options) {
+      super(options);
+    }
     uploadTaro(uploadFile, env) {
       var _a;
       const options = this.options;
       if (env === "WEB") {
         this.upload();
-      } else if (options.beforeXhrUpload) {
-        options.beforeXhrUpload(uploadFile, options);
       } else {
-        const uploadTask = uploadFile({
-          url: options.url,
-          filePath: options.taroFilePath,
-          fileType: options.fileType,
-          header: {
-            "Content-Type": "multipart/form-data",
-            ...options.headers
-          },
-          formData: options.formData,
-          name: options.name,
-          success(response) {
-            var _a2, _b;
-            if (options.xhrState == response.statusCode) {
-              (_a2 = options.onSuccess) == null ? void 0 : _a2.call(options, response, options);
-            } else {
-              (_b = options.onFailure) == null ? void 0 : _b.call(options, response, options);
+        if (options.beforeXhrUpload) {
+          options.beforeXhrUpload(uploadFile, options);
+        } else {
+          const uploadTask = uploadFile({
+            url: options.url,
+            filePath: options.taroFilePath,
+            fileType: options.fileType,
+            header: {
+              "Content-Type": "multipart/form-data",
+              ...options.headers
+            },
+            formData: options.formData,
+            name: options.name,
+            success(response) {
+              var _a2, _b;
+              if (options.xhrState == response.statusCode) {
+                (_a2 = options.onSuccess) == null ? void 0 : _a2.call(options, response, options);
+              } else {
+                (_b = options.onFailure) == null ? void 0 : _b.call(options, response, options);
+              }
+            },
+            fail(e2) {
+              var _a2;
+              (_a2 = options.onFailure) == null ? void 0 : _a2.call(options, e2, options);
             }
-          },
-          fail(e2) {
-            var _a2;
-            (_a2 = options.onFailure) == null ? void 0 : _a2.call(options, e2, options);
+          });
+          (_a = options.onStart) == null ? void 0 : _a.call(options, options);
+          uploadTask.progress(
+            (res) => {
+              var _a2;
+              (_a2 = options.onProgress) == null ? void 0 : _a2.call(options, res, options);
+            }
+          );
+        }
+      }
+    }
+  }
+  const isObject = (val) => val !== null && typeof val === "object";
+  const isFunction = (val) => typeof val === "function";
+  const isPromise = (val) => {
+    return isObject(val) && isFunction(val.then) && isFunction(val.catch);
+  };
+  const funcInterceptor = (interceptor, {
+    args = [],
+    done,
+    canceled
+  }) => {
+    if (interceptor) {
+      const returnVal = interceptor.apply(null, args);
+      if (isPromise(returnVal)) {
+        returnVal.then((value) => {
+          if (value) {
+            done(value);
+          } else if (canceled) {
+            canceled();
           }
+        }).catch(() => {
         });
-        (_a = options.onStart) == null ? void 0 : _a.call(options, options);
-        uploadTask.progress(
-          (res) => {
-            var _a2;
-            (_a2 = options.onProgress) == null ? void 0 : _a2.call(options, res, options);
-          }
-        );
+      } else if (returnVal) {
+        done();
+      } else if (canceled) {
+        canceled();
       }
+    } else {
+      done();
     }
-  }
+  };
   const defaultProps$K = {
     ...ComponentDefaults,
     url: "",
-    maximum: 9,
+    maximum: 1,
     sizeType: ["original", "compressed"],
     sourceType: ["album", "camera"],
+    mediaType: ["image", "video"],
+    camera: "back",
     uploadIcon: "photograph",
     uploadIconSize: "",
+    uploadIconTip: "",
     listType: "picture",
     name: "file",
+    accept: "*",
     disabled: false,
     autoUpload: true,
     multiple: false,
@@ -8570,6 +8623,7 @@
     timeout: 1e3 * 30,
     isPreview: true,
     isDeletable: true,
+    maxDuration: 10,
     onBeforeDelete: (file, files) => {
       return true;
     }
@@ -8589,10 +8643,14 @@
       children,
       uploadIcon,
       uploadIconSize,
+      uploadIconTip,
+      accept,
       name,
+      camera,
       defaultFileList,
       listType,
       disabled,
+      multiple,
       url,
       defaultImg,
       headers,
@@ -8604,11 +8662,14 @@
       isDeletable,
       maximum,
       maximize,
-      multiple,
+      mediaType,
       className,
       autoUpload,
       sizeType,
       sourceType,
+      maxDuration,
+      iconClassPrefix,
+      iconFontClassName,
       onStart,
       onRemove,
       onChange,
@@ -8618,7 +8679,6 @@
       onUpdate,
       onFailure,
       onOversize,
-      onBeforeUpload,
       onBeforeXhrUpload,
       onBeforeDelete,
       ...restProps
@@ -8637,6 +8697,9 @@
         Promise.all(uploadQueue).then((res) => {
           res.forEach((i) => i.uploadTaro(Taro.uploadFile, Taro.getEnv()));
         });
+      },
+      clear: () => {
+        clearUploadQueue();
       }
     }));
     const clearUploadQueue = (index = -1) => {
@@ -8645,18 +8708,54 @@
         setUploadQueue(uploadQueue);
       } else {
         setUploadQueue([]);
+        fileList.splice(0, fileList.length);
+        setFileList([...fileList]);
       }
     };
     const _chooseImage = () => {
       if (disabled) {
         return;
       }
-      Taro.chooseImage({
-        count: multiple ? maximum * 1 - fileList.length : 1,
-        sizeType,
-        sourceType,
-        success: onChangeFn
-      });
+      if (Taro__default["default"].getEnv() == "WEB") {
+        let el = document.getElementById("taroChooseImage");
+        if (el) {
+          el == null ? void 0 : el.setAttribute("accept", accept);
+        } else {
+          const obj = document.createElement("input");
+          obj.setAttribute("type", "file");
+          obj.setAttribute("id", "taroChooseImage");
+          obj.setAttribute("accept", accept);
+          obj.setAttribute(
+            "style",
+            "position: fixed; top: -4000px; left: -3000px; z-index: -300;"
+          );
+          document.body.appendChild(obj);
+        }
+      }
+      if (Taro.getEnv() == "WEAPP") {
+        Taro.chooseMedia({
+          count: multiple ? maximum * 1 - fileList.length : 1,
+          mediaType,
+          sourceType,
+          maxDuration,
+          sizeType: [],
+          camera,
+          fail: (res) => {
+            onFailure && onFailure(res);
+          },
+          success: onChangeMedia
+        });
+      } else {
+        Taro.chooseImage({
+          count: multiple ? maximum * 1 - fileList.length : 1,
+          sizeType,
+          sourceType,
+          success: onChangeImage,
+          fail: (res) => {
+            onFailure && onFailure(res);
+          }
+        });
+      }
     };
     const executeUpload = (fileItem, index) => {
       const uploadOption = new UploadOptions();
@@ -8709,7 +8808,8 @@
         });
         onSuccess && onSuccess({
           responseText,
-          option
+          option,
+          fileList
         });
       };
       uploadOption.onFailure = (responseText, option) => {
@@ -8724,10 +8824,11 @@
         });
         onFailure && onFailure({
           responseText,
-          option
+          option,
+          fileList
         });
       };
-      const task = new Upload(uploadOption);
+      const task = new UploaderTaro(uploadOption);
       if (props.autoUpload) {
         task.uploadTaro(Taro.uploadFile, Taro.getEnv());
       } else {
@@ -8740,20 +8841,28 @@
       }
     };
     const readFile = (files) => {
-      const imgReg = /\.(png|jpeg|jpg|webp|gif)$/i;
       files.forEach((file, index) => {
         var _a, _b;
-        console.log("file", file);
         let fileType = file.type;
+        let filepath = file.tempFilePath || file.path;
         const fileItem = new FileItem();
-        if (!fileType && imgReg.test(file.path)) {
-          fileType = "image";
+        if (file.fileType) {
+          fileType = file.fileType;
+        } else {
+          const imgReg = /\.(png|jpeg|jpg|webp|gif)$/i;
+          if (!fileType && (imgReg.test(filepath) || filepath.includes("data:image"))) {
+            fileType = "image";
+          }
         }
-        fileItem.path = file.path;
-        fileItem.name = file.path;
+        fileItem.path = filepath;
+        fileItem.name = filepath;
         fileItem.status = "ready";
-        fileItem.message = locale.uploader.readyUpload;
         fileItem.type = fileType;
+        if (autoUpload) {
+          fileItem.message = locale.uploader.readyUpload;
+        } else {
+          fileItem.message = locale.uploader.waitingUpload;
+        }
         if (Taro.getEnv() === "WEB") {
           const formData = new FormData();
           for (const [key, value] of Object.entries(data)) {
@@ -8767,7 +8876,7 @@
           fileItem.formData = data;
         }
         if (isPreview) {
-          fileItem.url = file.path;
+          fileItem.url = fileType == "video" ? file.thumbTempFilePath : filepath;
         }
         fileList.push(fileItem);
         setFileList([...fileList]);
@@ -8794,27 +8903,28 @@
       }
       return filterFile;
     };
+    const deleted = (file, index) => {
+      fileList.splice(index, 1);
+      onRemove && onRemove(file, fileList);
+      setFileList([...fileList]);
+    };
     const onDelete = (file, index) => {
       clearUploadQueue(index);
-      if (onBeforeDelete && onBeforeDelete(file, fileList)) {
-        fileList.splice(index, 1);
-        onRemove && onRemove(file, fileList);
-        setFileList([...fileList]);
-      } else {
-        console.log(locale.uploader.deleteWord);
-      }
+      funcInterceptor(onBeforeDelete, {
+        args: [file, fileList],
+        done: () => deleted(file, index)
+      });
     };
-    const onChangeFn = (res) => {
+    const onChangeMedia = (res) => {
       const { tempFiles } = res;
-      if (onBeforeUpload) {
-        onBeforeUpload(tempFiles).then((f) => {
-          const _files = filterFiles(f);
-          readFile(_files);
-        });
-      } else {
-        const _files = filterFiles(tempFiles);
-        readFile(_files);
-      }
+      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) => {
@@ -8834,35 +8944,35 @@
         key: item.uid
       }, listType === "picture" && !children && /* @__PURE__ */ React__default["default"].createElement("div", {
         className: "nut-uploader__preview-img"
-      }, item.status === "ready" ? /* @__PURE__ */ React__default["default"].createElement("div", {
+      }, isDeletable && /* @__PURE__ */ React__default["default"].createElement(Icon$1, {
+        classPrefix: iconClassPrefix,
+        fontClassName: iconFontClassName,
+        color: "rgba(0,0,0,0.6)",
+        className: "close",
+        name: "failure",
+        onClick: () => onDelete(item, index)
+      }), item.status === "ready" ? /* @__PURE__ */ React__default["default"].createElement("div", {
         className: "nut-uploader__preview__progress"
       }, /* @__PURE__ */ React__default["default"].createElement("div", {
         className: "nut-uploader__preview__progress__msg"
       }, item.message)) : item.status !== "success" && /* @__PURE__ */ React__default["default"].createElement("div", {
         className: "nut-uploader__preview__progress"
-      }, /* @__PURE__ */ React__default["default"].createElement(Icon$1, {
-        classPrefix: props.iconClassPrefix,
-        fontClassName: props.iconFontClassName,
+      }, item.failIcon === " " || item.loadingIcon === " " ? null : /* @__PURE__ */ React__default["default"].createElement(Icon$1, {
+        classPrefix: iconClassPrefix,
+        fontClassName: iconFontClassName,
         color: "#fff",
-        name: `${item.status === "error" ? "failure" : "loading"}`
+        name: `${item.status === "error" ? `${item.failIcon || "failure"}` : `${item.loadingIcon || "loading"}`}`
       }), /* @__PURE__ */ React__default["default"].createElement("div", {
         className: "nut-uploader__preview__progress__msg"
-      }, item.message)), isDeletable && /* @__PURE__ */ React__default["default"].createElement(Icon$1, {
-        classPrefix: props.iconClassPrefix,
-        fontClassName: props.iconFontClassName,
-        color: "rgba(0,0,0,0.6)",
-        className: "close",
-        name: "failure",
-        onClick: () => onDelete(item, index)
-      }), item.type.includes("image") ? /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, item.url && /* @__PURE__ */ React__default["default"].createElement("img", {
+      }, item.message)), item.type.includes("image") ? /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, item.url && /* @__PURE__ */ React__default["default"].createElement(index_cjs.Image, {
         className: "nut-uploader__preview-img__c",
+        mode: "aspectFit",
         src: item.url,
-        alt: "",
         onClick: () => handleItemClick(item)
-      })) : /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, defaultImg ? /* @__PURE__ */ React__default["default"].createElement("img", {
+      })) : /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, defaultImg ? /* @__PURE__ */ React__default["default"].createElement(index_cjs.Image, {
         className: "nut-uploader__preview-img__c",
+        mode: "aspectFit",
         src: defaultImg,
-        alt: "",
         onClick: () => handleItemClick(item)
       }) : /* @__PURE__ */ React__default["default"].createElement("div", {
         className: "nut-uploader__preview-img__file"
@@ -8870,24 +8980,24 @@
         onClick: () => handleItemClick(item),
         className: "nut-uploader__preview-img__file__name"
       }, /* @__PURE__ */ React__default["default"].createElement(Icon$1, {
-        classPrefix: props.iconClassPrefix,
-        fontClassName: props.iconFontClassName,
+        classPrefix: iconClassPrefix,
+        fontClassName: iconFontClassName,
         color: "#808080",
         name: "link"
-      }), "\xA0", item.name))), /* @__PURE__ */ React__default["default"].createElement("div", {
+      }), "\xA0", item.name))), item.status === "success" ? /* @__PURE__ */ React__default["default"].createElement("div", {
         className: "tips"
-      }, item.name)), listType === "list" && /* @__PURE__ */ React__default["default"].createElement("div", {
+      }, item.name) : null), listType === "list" && /* @__PURE__ */ React__default["default"].createElement("div", {
         className: "nut-uploader__preview-list"
       }, /* @__PURE__ */ React__default["default"].createElement("div", {
         className: `nut-uploader__preview-img__file__name ${item.status}`,
         onClick: () => handleItemClick(item)
       }, /* @__PURE__ */ React__default["default"].createElement(Icon$1, {
-        classPrefix: props.iconClassPrefix,
-        fontClassName: props.iconFontClassName,
+        classPrefix: iconClassPrefix,
+        fontClassName: iconFontClassName,
         name: "link"
       }), "\xA0", item.name), isDeletable && /* @__PURE__ */ React__default["default"].createElement(Icon$1, {
-        classPrefix: props.iconClassPrefix,
-        fontClassName: props.iconFontClassName,
+        classPrefix: iconClassPrefix,
+        fontClassName: iconFontClassName,
         color: "#808080",
         className: "nut-uploader__preview-img__file__del",
         name: "del",
@@ -8899,14 +9009,18 @@
         showText: false
       })));
     }), maximum > fileList.length && listType === "picture" && !children && /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: `nut-uploader__upload ${listType}`
+      className: `nut-uploader__upload ${listType} ${disabled ? "nut-uploader__upload-disabled" : ""}`
+    }, /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "nut-uploader__icon"
     }, /* @__PURE__ */ React__default["default"].createElement(Icon$1, {
-      classPrefix: props.iconClassPrefix,
-      fontClassName: props.iconFontClassName,
+      classPrefix: iconClassPrefix,
+      fontClassName: iconFontClassName,
       size: uploadIconSize,
       color: "#808080",
       name: uploadIcon
-    }), /* @__PURE__ */ React__default["default"].createElement(Button, {
+    }), /* @__PURE__ */ React__default["default"].createElement("span", {
+      className: "nut-uploader__icon-tip"
+    }, uploadIconTip)), /* @__PURE__ */ React__default["default"].createElement(Button, {
       className: "nut-uploader__input",
       onClick: _chooseImage
     })));
@@ -14462,7 +14576,7 @@
     }, []);
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       ref: root2,
-      className: `${swipeBem()} ${className}`,
+      className: classNames(swipeBem(), className),
       onTouchStart: (e2) => onTouchStart(e2),
       onTouchMove: (e2) => onTouchMove(e2),
       onTouchEnd: (e2) => onTouchEnd(e2),
@@ -14690,7 +14804,7 @@
   AnimatingNumbers.defaultProps = defaultProps$y;
   AnimatingNumbers.displayName = "NutAnimatingNumbers";
   AnimatingNumbers.CountUp = CountUp;
-  const b = cn("audio");
+  const b$1 = cn("audio");
   const warn = console.warn;
   const defaultProps$x = {
     ...ComponentDefaults,
@@ -14825,9 +14939,9 @@
     };
     const renderIcon = () => {
       return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", {
-        className: b("icon")
+        className: b$1("icon")
       }, /* @__PURE__ */ React__default["default"].createElement("div", {
-        className: `${b("icon-box")} ${playing ? b("icon-play") : b("icon-stop")}`,
+        className: `${b$1("icon-box")} ${playing ? b$1("icon-play") : b$1("icon-stop")}`,
         onClick: handleStatusChange
       }, playing ? /* @__PURE__ */ React__default["default"].createElement(Icon$1, {
         classPrefix: iconClassPrefix,
@@ -14842,11 +14956,11 @@
     };
     const renderProgerss = () => {
       return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", {
-        className: b("progress")
+        className: b$1("progress")
       }, /* @__PURE__ */ React__default["default"].createElement("div", {
         className: "time"
       }, currentDuration), /* @__PURE__ */ React__default["default"].createElement("div", {
-        className: b("progress-bar-wrapper")
+        className: b$1("progress-bar-wrapper")
       }, /* @__PURE__ */ React__default["default"].createElement(Range, {
         modelValue: percent,
         hiddenTag: true,
@@ -14875,7 +14989,7 @@
     };
     const renderNone = () => {
       return /* @__PURE__ */ React__default["default"].createElement("div", {
-        className: b("none-container"),
+        className: b$1("none-container"),
         onClick: handleStatusChange
       }, children);
     };
@@ -14892,7 +15006,7 @@
       }
     };
     return /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: `${b()} ${className}`,
+      className: `${b$1()} ${className}`,
       style,
       ...rest
     }, renderAudio());
@@ -15015,19 +15129,6 @@
   };
   Avatar.defaultProps = defaultProps$w;
   Avatar.displayName = "NutAvatar";
-  const defaultConfigRef = {
-    current: {
-      locale: zhCN
-    }
-  };
-  const getDefaultConfig = () => {
-    return defaultConfigRef.current;
-  };
-  const ConfigContext = React.createContext(null);
-  const useConfig = () => {
-    var _a;
-    return (_a = React.useContext(ConfigContext)) != null ? _a : getDefaultConfig();
-  };
   const defaultProps$v = {
     maxContent: "",
     maxCount: "",
@@ -15059,6 +15160,7 @@
   };
   AvatarGroup.defaultProps = defaultProps$v;
   AvatarGroup.displayName = "NutAvatarGroup";
+  const b = cn("badge");
   const defaultProps$u = {
     ...ComponentDefaults,
     className: "",
@@ -15107,7 +15209,7 @@
       return style2;
     };
     return /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: `nut-badge ${className}`,
+      className: classNames(b(), className),
       style
     }, icons !== "" && /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "slot-icons"
@@ -15119,13 +15221,12 @@
       color: "#ffffff",
       size: "12"
     })), /* @__PURE__ */ React__default["default"].createElement("div", null, children), /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: `${dot ? "is-dot" : ""} nut-badge__content sup`,
+      className: classNames({ "is-dot": dot }, b("content"), "sup"),
       style: getStyle()
     }, content()));
   };
   Badge.defaultProps = defaultProps$u;
   Badge.displayName = "NutBadge";
-  const isObject = (val) => val !== null && typeof val === "object";
   const defaultProps$t = {
     strokeWidth: 5,
     radius: 50,
@@ -15318,7 +15419,7 @@
         onChange && onChange(!isOpen, name);
       };
       return /* @__PURE__ */ React__default["default"].createElement("div", {
-        className: `${colBem()} ${className}`,
+        className: classNames(colBem(), className),
         style
       }, childrenDom.map((item) => {
         return React__default["default"].cloneElement(item, {
@@ -19053,7 +19154,7 @@
     };
     const b2 = cn("card");
     return /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: `${b2()} ${className}`,
+      className: classNames(b2(), className),
       style,
       ...rest
     }, /* @__PURE__ */ React__default["default"].createElement("div", {