@nutui/nutui-react-taro 1.4.9-beta.1 → 1.4.9

package/dist/nutui.react.es.js

@@ -1,11 +1,11 @@
 /*!
-* @nutui/nutui-react-taro v1.4.9-beta.1 Fri Feb 24 2023 14:33:09 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.
 */
 import * as React from "react";
 import React__default, { useCallback, useState, useEffect, createContext, useContext, useMemo, useRef, forwardRef, useImperativeHandle, useLayoutEffect, Component, memo } from "react";
-import Taro, { redirectTo, navigateTo, getEnv, usePageScroll, getSystemInfoSync, nextTick, createSelectorQuery, uploadFile, chooseImage, pageScrollTo, useReady, createInnerAudioContext, getSystemInfo, createOffscreenCanvas, canvasToTempFilePath } from "@tarojs/taro";
+import Taro, { redirectTo, navigateTo, getEnv, usePageScroll, getSystemInfoSync, nextTick, createSelectorQuery, uploadFile, chooseMedia, chooseImage, pageScrollTo, useReady, createInnerAudioContext, getSystemInfo, createOffscreenCanvas, canvasToTempFilePath } from "@tarojs/taro";
 import ReactDOM, { createPortal, unstable_batchedUpdates } from "react-dom";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getAugmentedNamespace(n) {
@@ -1605,7 +1605,7 @@ const Popup = (props) => {
       round,
       [`nut-popup-${position}`]: true,
       [`${popClass}`]: true,
-      [`${className}`]: true
+      [`${className || ""}`]: true
     },
     b2("")
   );
@@ -1835,7 +1835,9 @@ const Grid = (props) => {
   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 = {};
@@ -1936,8 +1938,14 @@ const GridItem = (props) => {
     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";
@@ -2108,6 +2116,7 @@ const defaultProps$1i = {
   bottom: 0,
   zIndex: 2e3
 };
+const b$2 = cn("sticky");
 const Sticky = (props) => {
   const {
     position = "top",
@@ -2208,10 +2217,10 @@ const Sticky = (props) => {
   return /* @__PURE__ */ React__default.createElement("div", {
     ref: rootRef,
     style: rootStyle,
-    className: `nut-sticky ${className}`,
+    className: classNames(b$2(), className),
     ...rest
   }, /* @__PURE__ */ React__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));
@@ -2582,7 +2591,7 @@ const Indicator = (props) => {
   useEffect(() => {
   }, []);
   return /* @__PURE__ */ React__default.createElement("div", {
-    className: `${classes} ${className}`,
+    className: classNames(classes, className),
     ...rest
   }, renderEles());
 };
@@ -3591,6 +3600,7 @@ const Tabs = (props) => {
 };
 Tabs.defaultProps = defaultProps$15;
 Tabs.displayName = "NutTabs";
+Tabs.TabPane = TabPane;
 const Utils = {
   isLeapYear(y) {
     return y % 4 == 0 && y % 100 != 0 || y % 400 == 0;
@@ -3738,6 +3748,7 @@ const CalendarItem = React__default.forwardRef((props, ref) => {
   const [monthsData, setMonthsData] = useState([]);
   const [translateY, setTranslateY] = useState(0);
   const [monthDefaultRange, setMonthDefaultRange] = useState([]);
+  const [scrollTop, setScrollTop] = useState(0);
   const [state] = useState({
     currDate: "",
     propStartDate: "",
@@ -4034,7 +4045,7 @@ const CalendarItem = React__default.forwardRef((props, ref) => {
     setMonthDefaultRange([start2, end]);
     setTranslateY(state.monthsData[start2].cssScrollHeight);
   };
-  const mothsViewScroll = (e2) => {
+  const monthsViewScroll = (e2) => {
     if (state.monthsData.length <= 1) {
       return;
     }
@@ -4234,11 +4245,13 @@ const CalendarItem = React__default.forwardRef((props, ref) => {
                 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);
           }
         }
       }
@@ -4269,9 +4282,12 @@ const CalendarItem = React__default.forwardRef((props, ref) => {
   }, weeks.map((item) => /* @__PURE__ */ React__default.createElement("div", {
     className: "calendar-week-item",
     key: item
-  }, item)))), /* @__PURE__ */ React__default.createElement("div", {
+  }, item)))), /* @__PURE__ */ React__default.createElement(index_cjs.ScrollView, {
+    scrollTop,
+    scrollY: true,
+    scrollWithAnimation: true,
     className: "nut-calendar-content",
-    onScroll: mothsViewScroll,
+    onScroll: monthsViewScroll,
     ref: months
   }, /* @__PURE__ */ React__default.createElement("div", {
     className: "calendar-months-panel",
@@ -4931,6 +4947,7 @@ const InternalCascader = (props, ref) => {
 const Cascader = React__default.forwardRef(InternalCascader);
 Cascader.defaultProps = defaultProps$11;
 Cascader.displayName = "NutCascader";
+const CheckboxGroupContext = createContext(null);
 const defaultProps$10 = {
   disabled: false,
   checkedValue: [],
@@ -4956,8 +4973,6 @@ const CheckboxGroup = React__default.forwardRef(
       options,
       ...rest
     } = props;
-    const [innerDisabled, setInnerDisabled] = useState(disabled);
-    const [innerValue, setInnerValue] = useState(checkedValue);
     useImperativeHandle(ref, () => ({
       toggleAll(state) {
         if (state === false) {
@@ -4983,75 +4998,41 @@ const CheckboxGroup = React__default.forwardRef(
         setInnerValue(reverse);
       }
     }));
+    const [innerValue, setInnerValue] = useState(checkedValue || []);
     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.Children.map(children, (child) => {
-        const childChecked = validateChildChecked(child);
-        if (child.type.displayName !== "NutCheckBox") {
-          return React__default.cloneElement(child);
-        }
-        return React__default.cloneElement(child, {
-          disabled: innerDisabled,
-          checked: childChecked,
-          onChange: handleChildChange,
-          getParentVals,
-          max,
-          textPosition
-        });
-      });
-    }
-    const renderOptionsChildren = useCallback(() => {
+      setInnerValue(checkedValue || []);
+    }, [checkedValue]);
+    const renderOptions = useCallback(() => {
       return options == null ? void 0 : options.map(({ label, value, disabled: disabled2, onChange: onChange2, ...rest2 }) => {
-        const childChecked = validateChecked(value);
         return /* @__PURE__ */ React__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.createElement("div", {
+    }, [options, max]);
+    return /* @__PURE__ */ React__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.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;
@@ -5081,7 +5062,6 @@ const Checkbox = (props) => {
     iconSize,
     label,
     className,
-    textPosition,
     iconActiveName,
     checked,
     disabled,
@@ -5090,20 +5070,33 @@ const Checkbox = (props) => {
     iconClassPrefix,
     iconFontClassName,
     iconIndeterminateName,
-    getParentVals,
-    max,
-    ...rest
+    ...others
   } = props;
-  const [innerChecked, setInnerChecked] = useState(checked);
-  const [innerDisabled, setDisabled] = useState(disabled);
+  let { textPosition, ...rest } = others;
+  const ctx2 = useContext(CheckboxGroupContext);
+  let [innerChecked, setInnerChecked] = useState(checked);
+  let [innerDisabled, setDisabled] = useState(disabled);
   const [_indeterminate, setIndeterminate] = useState(indeterminate);
   useEffect(() => {
-    setInnerChecked(checked);
+    !ctx2 && setInnerChecked(checked);
     setDisabled(disabled);
-  }, [disabled, checked]);
-  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;
@@ -5140,13 +5133,15 @@ const Checkbox = (props) => {
     }, 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.createElement("div", {
     className: `${b2({ reverse: textPosition === "left" })} ${className || ""}`,
@@ -5663,6 +5658,19 @@ const InternalPicker = (props, ref) => {
   }))));
 };
 const Picker = React__default.forwardRef(InternalPicker);
+const defaultConfigRef = {
+  current: {
+    locale: zhCN
+  }
+};
+const getDefaultConfig = () => {
+  return defaultConfigRef.current;
+};
+const ConfigContext = createContext(null);
+const useConfig = () => {
+  var _a;
+  return (_a = useContext(ConfigContext)) != null ? _a : getDefaultConfig();
+};
 const currentYear = new Date().getFullYear();
 const defaultProps$_ = {
   modelValue: null,
@@ -5698,6 +5706,7 @@ const DatePicker = (props) => {
     ...defaultProps$_,
     ...props
   };
+  const { locale } = useConfig();
   const [show, setShow] = useState(false);
   const [currentDate, setCurrentDate] = useState(modelValue);
   const [defaultValue, setDefaultValue] = useState([]);
@@ -5706,13 +5715,14 @@ const DatePicker = (props) => {
   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;
@@ -5763,7 +5773,6 @@ const DatePicker = (props) => {
   };
   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);
@@ -5950,6 +5959,7 @@ const DatePicker = (props) => {
     style,
     ...rest
   }, listData.length > 0 && /* @__PURE__ */ React__default.createElement(Picker, {
+    title,
     isVisible: show,
     listData,
     onClose: onCloseDatePicker,
@@ -7793,7 +7803,7 @@ const Rate = (props) => {
     onChange && onChange(value);
   };
   return /* @__PURE__ */ React__default.createElement("div", {
-    className: `${b2()} ${className}`,
+    className: classNames(b2(), className),
     style
   }, countArray.map((n) => {
     return /* @__PURE__ */ React__default.createElement("div", {
@@ -7805,7 +7815,9 @@ const Rate = (props) => {
       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.createElement(Icon, {
@@ -8480,57 +8492,98 @@ class Upload {
       console.warn("\u6D4F\u89C8\u5668\u4E0D\u652F\u6301 XMLHttpRequest");
     }
   }
+}
+class UploaderTaro extends Upload {
+  constructor(options) {
+    super(options);
+  }
   uploadTaro(uploadFile2, env) {
     var _a;
     const options = this.options;
     if (env === "WEB") {
       this.upload();
-    } else if (options.beforeXhrUpload) {
-      options.beforeXhrUpload(uploadFile2, options);
     } else {
-      const uploadTask = uploadFile2({
-        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(uploadFile2, options);
+      } else {
+        const uploadTask = uploadFile2({
+          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,
@@ -8543,6 +8596,7 @@ const defaultProps$K = {
   timeout: 1e3 * 30,
   isPreview: true,
   isDeletable: true,
+  maxDuration: 10,
   onBeforeDelete: (file, files) => {
     return true;
   }
@@ -8562,10 +8616,14 @@ const InternalUploader = (props, ref) => {
     children,
     uploadIcon,
     uploadIconSize,
+    uploadIconTip,
+    accept,
     name,
+    camera,
     defaultFileList,
     listType,
     disabled,
+    multiple,
     url,
     defaultImg,
     headers,
@@ -8577,11 +8635,14 @@ const InternalUploader = (props, ref) => {
     isDeletable,
     maximum,
     maximize,
-    multiple,
+    mediaType,
     className,
     autoUpload,
     sizeType,
     sourceType,
+    maxDuration,
+    iconClassPrefix,
+    iconFontClassName,
     onStart,
     onRemove,
     onChange,
@@ -8591,7 +8652,6 @@ const InternalUploader = (props, ref) => {
     onUpdate,
     onFailure,
     onOversize,
-    onBeforeUpload,
     onBeforeXhrUpload,
     onBeforeDelete,
     ...restProps
@@ -8610,6 +8670,9 @@ const InternalUploader = (props, ref) => {
       Promise.all(uploadQueue).then((res) => {
         res.forEach((i) => i.uploadTaro(uploadFile, getEnv()));
       });
+    },
+    clear: () => {
+      clearUploadQueue();
     }
   }));
   const clearUploadQueue = (index = -1) => {
@@ -8618,18 +8681,54 @@ const InternalUploader = (props, ref) => {
       setUploadQueue(uploadQueue);
     } else {
       setUploadQueue([]);
+      fileList.splice(0, fileList.length);
+      setFileList([...fileList]);
     }
   };
   const _chooseImage = () => {
     if (disabled) {
       return;
     }
-    chooseImage({
-      count: multiple ? maximum * 1 - fileList.length : 1,
-      sizeType,
-      sourceType,
-      success: onChangeFn
-    });
+    if (Taro.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 (getEnv() == "WEAPP") {
+      chooseMedia({
+        count: multiple ? maximum * 1 - fileList.length : 1,
+        mediaType,
+        sourceType,
+        maxDuration,
+        sizeType: [],
+        camera,
+        fail: (res) => {
+          onFailure && onFailure(res);
+        },
+        success: onChangeMedia
+      });
+    } else {
+      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();
@@ -8682,7 +8781,8 @@ const InternalUploader = (props, ref) => {
       });
       onSuccess && onSuccess({
         responseText,
-        option
+        option,
+        fileList
       });
     };
     uploadOption.onFailure = (responseText, option) => {
@@ -8697,10 +8797,11 @@ const InternalUploader = (props, ref) => {
       });
       onFailure && onFailure({
         responseText,
-        option
+        option,
+        fileList
       });
     };
-    const task = new Upload(uploadOption);
+    const task = new UploaderTaro(uploadOption);
     if (props.autoUpload) {
       task.uploadTaro(uploadFile, getEnv());
     } else {
@@ -8713,20 +8814,28 @@ const InternalUploader = (props, ref) => {
     }
   };
   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 (getEnv() === "WEB") {
         const formData = new FormData();
         for (const [key, value] of Object.entries(data)) {
@@ -8740,7 +8849,7 @@ const InternalUploader = (props, ref) => {
         fileItem.formData = data;
       }
       if (isPreview) {
-        fileItem.url = file.path;
+        fileItem.url = fileType == "video" ? file.thumbTempFilePath : filepath;
       }
       fileList.push(fileItem);
       setFileList([...fileList]);
@@ -8767,27 +8876,28 @@ const InternalUploader = (props, ref) => {
     }
     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) => {
@@ -8807,35 +8917,35 @@ const InternalUploader = (props, ref) => {
       key: item.uid
     }, listType === "picture" && !children && /* @__PURE__ */ React__default.createElement("div", {
       className: "nut-uploader__preview-img"
-    }, item.status === "ready" ? /* @__PURE__ */ React__default.createElement("div", {
+    }, isDeletable && /* @__PURE__ */ React__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.createElement("div", {
       className: "nut-uploader__preview__progress"
     }, /* @__PURE__ */ React__default.createElement("div", {
       className: "nut-uploader__preview__progress__msg"
     }, item.message)) : item.status !== "success" && /* @__PURE__ */ React__default.createElement("div", {
       className: "nut-uploader__preview__progress"
-    }, /* @__PURE__ */ React__default.createElement(Icon$1, {
-      classPrefix: props.iconClassPrefix,
-      fontClassName: props.iconFontClassName,
+    }, item.failIcon === " " || item.loadingIcon === " " ? null : /* @__PURE__ */ React__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.createElement("div", {
       className: "nut-uploader__preview__progress__msg"
-    }, item.message)), isDeletable && /* @__PURE__ */ React__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.createElement(React__default.Fragment, null, item.url && /* @__PURE__ */ React__default.createElement("img", {
+    }, item.message)), item.type.includes("image") ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, item.url && /* @__PURE__ */ React__default.createElement(index_cjs.Image, {
       className: "nut-uploader__preview-img__c",
+      mode: "aspectFit",
       src: item.url,
-      alt: "",
       onClick: () => handleItemClick(item)
-    })) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, defaultImg ? /* @__PURE__ */ React__default.createElement("img", {
+    })) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, defaultImg ? /* @__PURE__ */ React__default.createElement(index_cjs.Image, {
       className: "nut-uploader__preview-img__c",
+      mode: "aspectFit",
       src: defaultImg,
-      alt: "",
       onClick: () => handleItemClick(item)
     }) : /* @__PURE__ */ React__default.createElement("div", {
       className: "nut-uploader__preview-img__file"
@@ -8843,24 +8953,24 @@ const InternalUploader = (props, ref) => {
       onClick: () => handleItemClick(item),
       className: "nut-uploader__preview-img__file__name"
     }, /* @__PURE__ */ React__default.createElement(Icon$1, {
-      classPrefix: props.iconClassPrefix,
-      fontClassName: props.iconFontClassName,
+      classPrefix: iconClassPrefix,
+      fontClassName: iconFontClassName,
       color: "#808080",
       name: "link"
-    }), "\xA0", item.name))), /* @__PURE__ */ React__default.createElement("div", {
+    }), "\xA0", item.name))), item.status === "success" ? /* @__PURE__ */ React__default.createElement("div", {
       className: "tips"
-    }, item.name)), listType === "list" && /* @__PURE__ */ React__default.createElement("div", {
+    }, item.name) : null), listType === "list" && /* @__PURE__ */ React__default.createElement("div", {
       className: "nut-uploader__preview-list"
     }, /* @__PURE__ */ React__default.createElement("div", {
       className: `nut-uploader__preview-img__file__name ${item.status}`,
       onClick: () => handleItemClick(item)
     }, /* @__PURE__ */ React__default.createElement(Icon$1, {
-      classPrefix: props.iconClassPrefix,
-      fontClassName: props.iconFontClassName,
+      classPrefix: iconClassPrefix,
+      fontClassName: iconFontClassName,
       name: "link"
     }), "\xA0", item.name), isDeletable && /* @__PURE__ */ React__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",
@@ -8872,14 +8982,18 @@ const InternalUploader = (props, ref) => {
       showText: false
     })));
   }), maximum > fileList.length && listType === "picture" && !children && /* @__PURE__ */ React__default.createElement("div", {
-    className: `nut-uploader__upload ${listType}`
+    className: `nut-uploader__upload ${listType} ${disabled ? "nut-uploader__upload-disabled" : ""}`
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    className: "nut-uploader__icon"
   }, /* @__PURE__ */ React__default.createElement(Icon$1, {
-    classPrefix: props.iconClassPrefix,
-    fontClassName: props.iconFontClassName,
+    classPrefix: iconClassPrefix,
+    fontClassName: iconFontClassName,
     size: uploadIconSize,
     color: "#808080",
     name: uploadIcon
-  }), /* @__PURE__ */ React__default.createElement(Button, {
+  }), /* @__PURE__ */ React__default.createElement("span", {
+    className: "nut-uploader__icon-tip"
+  }, uploadIconTip)), /* @__PURE__ */ React__default.createElement(Button, {
     className: "nut-uploader__input",
     onClick: _chooseImage
   })));
@@ -14435,7 +14549,7 @@ const Swipe = forwardRef((props, instanceRef) => {
   }, []);
   return /* @__PURE__ */ React__default.createElement("div", {
     ref: root2,
-    className: `${swipeBem()} ${className}`,
+    className: classNames(swipeBem(), className),
     onTouchStart: (e2) => onTouchStart(e2),
     onTouchMove: (e2) => onTouchMove(e2),
     onTouchEnd: (e2) => onTouchEnd(e2),
@@ -14663,7 +14777,7 @@ class AnimatingNumbers extends Component {
 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,
@@ -14798,9 +14912,9 @@ const Audio = (props) => {
   };
   const renderIcon = () => {
     return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", {
-      className: b("icon")
+      className: b$1("icon")
     }, /* @__PURE__ */ React__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.createElement(Icon$1, {
       classPrefix: iconClassPrefix,
@@ -14815,11 +14929,11 @@ const Audio = (props) => {
   };
   const renderProgerss = () => {
     return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", {
-      className: b("progress")
+      className: b$1("progress")
     }, /* @__PURE__ */ React__default.createElement("div", {
       className: "time"
     }, currentDuration), /* @__PURE__ */ React__default.createElement("div", {
-      className: b("progress-bar-wrapper")
+      className: b$1("progress-bar-wrapper")
     }, /* @__PURE__ */ React__default.createElement(Range, {
       modelValue: percent,
       hiddenTag: true,
@@ -14848,7 +14962,7 @@ const Audio = (props) => {
   };
   const renderNone = () => {
     return /* @__PURE__ */ React__default.createElement("div", {
-      className: b("none-container"),
+      className: b$1("none-container"),
       onClick: handleStatusChange
     }, children);
   };
@@ -14865,7 +14979,7 @@ const Audio = (props) => {
     }
   };
   return /* @__PURE__ */ React__default.createElement("div", {
-    className: `${b()} ${className}`,
+    className: `${b$1()} ${className}`,
     style,
     ...rest
   }, renderAudio());
@@ -14988,19 +15102,6 @@ const Avatar = (props) => {
 };
 Avatar.defaultProps = defaultProps$w;
 Avatar.displayName = "NutAvatar";
-const defaultConfigRef = {
-  current: {
-    locale: zhCN
-  }
-};
-const getDefaultConfig = () => {
-  return defaultConfigRef.current;
-};
-const ConfigContext = createContext(null);
-const useConfig = () => {
-  var _a;
-  return (_a = useContext(ConfigContext)) != null ? _a : getDefaultConfig();
-};
 const defaultProps$v = {
   maxContent: "",
   maxCount: "",
@@ -15032,6 +15133,7 @@ const AvatarGroup = (props) => {
 };
 AvatarGroup.defaultProps = defaultProps$v;
 AvatarGroup.displayName = "NutAvatarGroup";
+const b = cn("badge");
 const defaultProps$u = {
   ...ComponentDefaults,
   className: "",
@@ -15080,7 +15182,7 @@ const Badge = (props) => {
     return style2;
   };
   return /* @__PURE__ */ React__default.createElement("div", {
-    className: `nut-badge ${className}`,
+    className: classNames(b(), className),
     style
   }, icons !== "" && /* @__PURE__ */ React__default.createElement("div", {
     className: "slot-icons"
@@ -15092,13 +15194,12 @@ const Badge = (props) => {
     color: "#ffffff",
     size: "12"
   })), /* @__PURE__ */ React__default.createElement("div", null, children), /* @__PURE__ */ React__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,
@@ -15291,7 +15392,7 @@ const Collapse = memo(
       onChange && onChange(!isOpen, name);
     };
     return /* @__PURE__ */ React__default.createElement("div", {
-      className: `${colBem()} ${className}`,
+      className: classNames(colBem(), className),
       style
     }, childrenDom.map((item) => {
       return React__default.cloneElement(item, {
@@ -19026,7 +19127,7 @@ const Card = (props) => {
   };
   const b2 = cn("card");
   return /* @__PURE__ */ React__default.createElement("div", {
-    className: `${b2()} ${className}`,
+    className: classNames(b2(), className),
     style,
     ...rest
   }, /* @__PURE__ */ React__default.createElement("div", {