@nutui/nutui-react 2.0.0-alpha.0 → 2.0.0-alpha.1

package/dist/nutui.react.umd.js

@@ -9,7 +9,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react v2.0.0-alpha.0 Wed Apr 19 2023 21:29:36 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.0-alpha.1 Fri Apr 21 2023 18:04:48 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -3301,7 +3301,7 @@ Check the top-level render call using <` + t + ">.");
     onClick: (event) => {
     }
   };
-  const classPrefix$7 = "nut-cell";
+  const classPrefix$8 = "nut-cell";
   const Cell = (props) => {
     const {
       children,
@@ -3330,26 +3330,26 @@ Check the top-level render call using <` + t + ">.");
       flex: 1
     };
     return /* @__PURE__ */ jsx("div", {
-      className: classNames(classPrefix$7, className),
+      className: classNames(classPrefix$8, className),
       onClick: (event) => handleClick2(event),
       style: baseStyle,
       ...rest,
       children: children || /* @__PURE__ */ jsxs(Fragment, {
         children: [title || description ? /* @__PURE__ */ jsxs("div", {
-          className: `${classPrefix$7}__left`,
+          className: `${classPrefix$8}__left`,
           children: [title ? /* @__PURE__ */ jsx("div", {
-            className: `${classPrefix$7}__title`,
+            className: `${classPrefix$8}__title`,
             children: title
           }) : null, description ? /* @__PURE__ */ jsx("div", {
-            className: `${classPrefix$7}__description`,
+            className: `${classPrefix$8}__description`,
             children: description
           }) : null]
         }) : null, extra ? /* @__PURE__ */ jsx("div", {
-          className: `${classPrefix$7}__extra`,
+          className: `${classPrefix$8}__extra`,
           style: styles,
           children: extra
         }) : null, /* @__PURE__ */ jsx("div", {
-          className: `${classPrefix$7}__divider`
+          className: `${classPrefix$8}__divider`
         })]
       })
     });
@@ -3361,7 +3361,7 @@ Check the top-level render call using <` + t + ">.");
     title: "",
     description: ""
   };
-  const classPrefix$6 = "nut-cell-group";
+  const classPrefix$7 = "nut-cell-group";
   const CellGroup = (props) => {
     const {
       children,
@@ -3375,16 +3375,16 @@ Check the top-level render call using <` + t + ">.");
       ...props
     };
     return /* @__PURE__ */ jsxs("div", {
-      className: classNames(classPrefix$6, className),
+      className: classNames(classPrefix$7, className),
       ...rest,
       children: [title ? /* @__PURE__ */ jsx("div", {
-        className: `${classPrefix$6}__title`,
+        className: `${classPrefix$7}__title`,
         children: title
       }) : null, description ? /* @__PURE__ */ jsx("div", {
-        className: `${classPrefix$6}__description`,
+        className: `${classPrefix$7}__description`,
         children: description
       }) : null, /* @__PURE__ */ jsx("div", {
-        className: `${classPrefix$6}__wrap`,
+        className: `${classPrefix$7}__wrap`,
         children
       })]
     });
@@ -3864,7 +3864,7 @@ Check the top-level render call using <` + t + ">.");
     loading: true,
     lazy: false
   };
-  const classPrefix$5 = "nut-image";
+  const classPrefix$6 = "nut-image";
   const Image$1 = (props) => {
     const {
       className,
@@ -3993,7 +3993,7 @@ Check the top-level render call using <` + t + ">.");
       return null;
     }, [loading, innerLoading]);
     return /* @__PURE__ */ jsxs("div", {
-      className: classNames(classPrefix$5, className),
+      className: classNames(classPrefix$6, className),
       style: containerStyle,
       onClick: (e) => {
         imageClick(e);
@@ -4028,7 +4028,7 @@ Check the top-level render call using <` + t + ">.");
     visible: false,
     lockScroll: true
   };
-  const classPrefix$4 = `nut-overlay`;
+  const classPrefix$5 = `nut-overlay`;
   const Overlay = (props) => {
     const {
       children,
@@ -4071,7 +4071,7 @@ Check the top-level render call using <` + t + ">.");
       "overlay-fade-enter-active": visible,
       "first-render": renderRef.current && !visible,
       "hidden-render": !visible
-    }, className, classPrefix$4);
+    }, className, classPrefix$5);
     const styles = {
       zIndex,
       animationDuration: `${props.duration}s`,
@@ -5847,138 +5847,17 @@ Check the top-level render call using <` + t + ">.");
     onExited: propTypesExports.func
   }) : {};
   const CSSTransition$1 = CSSTransition;
-  var classnameExports = {};
-  var classname = {
-    get exports() {
-      return classnameExports;
-    },
-    set exports(v) {
-      classnameExports = v;
-    }
-  };
-  var classname_production_min = {};
-  var hasRequiredClassname_production_min;
-  function requireClassname_production_min() {
-    if (hasRequiredClassname_production_min)
-      return classname_production_min;
-    hasRequiredClassname_production_min = 1;
-    function r(r2) {
-      function t2(t3, i, a2, o) {
-        var f = i ? e + t3 + r2.e + i : e + t3, v = f;
-        if (a2) {
-          var s = " " + v + r2.m;
-          for (var u in a2)
-            if (a2.hasOwnProperty(u)) {
-              var p = a2[u];
-              true === p ? v += s + u : p && (v += s + u + n + p);
-            }
-        }
-        if (void 0 !== o)
-          for (var y2 = 0, c = (o = Array.isArray(o) ? o : [o]).length; y2 < c; y2++) {
-            var l2 = o[y2];
-            if (l2 && "string" == typeof l2.valueOf())
-              for (var g = l2.valueOf().split(" "), d = 0; d < g.length; d++) {
-                var h = g[d];
-                h !== f && (v += " " + h);
-              }
-          }
-        return v;
-      }
-      var e = r2.n || "", n = r2.v || r2.m;
-      return function(r3, e2) {
-        return function(n2, i, a2) {
-          return "string" == typeof n2 ? "string" == typeof i || Array.isArray(i) ? t2(r3, n2, void 0, i) : t2(r3, n2, i, a2) : t2(r3, e2, n2, i);
-        };
-      };
-    }
-    Object.defineProperty(classname_production_min, "__esModule", { value: true });
-    var t = r({ e: "-", m: "_" });
-    classname_production_min.cn = t, classname_production_min.withNaming = r;
-    return classname_production_min;
-  }
-  var classname_development = {};
-  var hasRequiredClassname_development;
-  function requireClassname_development() {
-    if (hasRequiredClassname_development)
-      return classname_development;
-    hasRequiredClassname_development = 1;
-    Object.defineProperty(classname_development, "__esModule", { value: true });
-    function withNaming(preset) {
-      var nameSpace = preset.n || "";
-      var modValueDelimiter = preset.v || preset.m;
-      function stringify(b2, e, m, mix) {
-        var entityName = e ? nameSpace + b2 + preset.e + e : nameSpace + b2;
-        var className = entityName;
-        if (m) {
-          var modPrefix = " " + className + preset.m;
-          for (var k2 in m) {
-            if (m.hasOwnProperty(k2)) {
-              var modVal = m[k2];
-              if (modVal === true) {
-                className += modPrefix + k2;
-              } else if (modVal) {
-                className += modPrefix + k2 + modValueDelimiter + modVal;
-              }
-            }
-          }
-        }
-        if (mix !== void 0) {
-          mix = Array.isArray(mix) ? mix : [mix];
-          for (var i = 0, len = mix.length; i < len; i++) {
-            var value = mix[i];
-            if (!value || typeof value.valueOf() !== "string")
-              continue;
-            var mixes = value.valueOf().split(" ");
-            for (var j = 0; j < mixes.length; j++) {
-              var val = mixes[j];
-              if (val !== entityName) {
-                className += " " + val;
-              }
-            }
-          }
-        }
-        return className;
-      }
-      return function cnGenerator(b2, e) {
-        return function(elemOrMods, elemModsOrBlockMix, elemMix) {
-          if (typeof elemOrMods === "string") {
-            if (typeof elemModsOrBlockMix === "string" || Array.isArray(elemModsOrBlockMix)) {
-              return stringify(b2, elemOrMods, void 0, elemModsOrBlockMix);
-            }
-            return stringify(b2, elemOrMods, elemModsOrBlockMix, elemMix);
-          }
-          return stringify(b2, e, elemOrMods, elemModsOrBlockMix);
-        };
-      };
-    }
-    var cn2 = withNaming({
-      e: "-",
-      m: "_"
-    });
-    classname_development.cn = cn2;
-    classname_development.withNaming = withNaming;
-    return classname_development;
-  }
-  (function(module2) {
-    if (process.env.NODE_ENV === "production") {
-      module2.exports = requireClassname_production_min();
-    } else {
-      module2.exports = requireClassname_development();
-    }
-  })(classname);
-  const cn = classnameExports.withNaming({ n: "nut-", e: "__", m: "--", v: "-" });
   const defaultProps$1m = {
     ...ComponentDefaults,
     position: "center",
     transition: "",
     overlayStyle: {},
-    overlayClass: "",
-    popClass: "",
+    overlayClassName: "",
     closeable: false,
     closeIconPosition: "top-right",
     closeIcon: "close",
-    destroyOnClose: true,
-    teleport: null,
+    destroyOnClose: false,
+    portal: null,
     overlay: true,
     round: false,
     onOpen: () => {
@@ -5987,14 +5866,8 @@ Check the top-level render call using <` + t + ">.");
     },
     onClick: (e) => {
     },
-    onOpened: (e) => {
-    },
-    onClosed: (e) => {
-    },
-    onClickOverlay: (e) => {
-    },
-    onClickCloseIcon: (e) => {
-    },
+    onClickOverlay: (e) => true,
+    onClickCloseIcon: (e) => true,
     ...defaultOverlayProps
   };
   let _zIndex = 1e3;
@@ -6005,7 +5878,7 @@ Check the top-level render call using <` + t + ">.");
       overlay,
       closeOnOverlayClick,
       overlayStyle,
-      overlayClass,
+      overlayClassName,
       zIndex,
       lockScroll,
       duration,
@@ -6016,23 +5889,22 @@ Check the top-level render call using <` + t + ">.");
       transition,
       round,
       position,
-      popClass,
       className,
       destroyOnClose,
-      teleport,
+      portal,
       onOpen,
       onClose,
       onClickOverlay,
       onClickCloseIcon,
-      onOpened,
-      onClosed,
+      afterShow,
+      afterClose,
       onClick
     } = props;
     const [index, setIndex] = React.useState(zIndex || _zIndex);
     const [innerVisible, setInnerVisible] = React.useState(visible);
     const [showChildren, setShowChildren] = React.useState(true);
     const [transitionName, setTransitionName] = React.useState("");
-    const b2 = cn("popup");
+    const classPrefix2 = "nut-popup";
     const baseStyle = {
       zIndex: index,
       animationDuration: `${duration}s`
@@ -6045,15 +5917,15 @@ Check the top-level render call using <` + t + ">.");
       ...style,
       ...baseStyle
     };
-    const classes = classNames({
+    const popClassName = classNames({
       round,
-      [`nut-popup-${position}`]: true,
-      [`${popClass}`]: true,
+      [`${classPrefix2}`]: true,
+      [`${classPrefix2}-${position}`]: true,
       [`${className || ""}`]: true
-    }, b2(""));
+    });
     const closeClasses = classNames({
-      "nut-popup__close-icon": true,
-      [`nut-popup__close-icon--${closeIconPosition}`]: true
+      [`${classPrefix2}__close-icon`]: true,
+      [`${classPrefix2}__close-icon--${closeIconPosition}`]: true
     });
     const open = () => {
       if (!innerVisible) {
@@ -6071,29 +5943,29 @@ Check the top-level render call using <` + t + ">.");
         if (destroyOnClose) {
           setTimeout(() => {
             setShowChildren(false);
-            onClose && onClose();
           }, Number(duration) * 1e3);
         }
+        onClose && onClose();
       }
     };
     const onHandleClickOverlay = (e) => {
       if (closeOnOverlayClick) {
-        onClickOverlay && onClickOverlay(e);
-        close();
+        const closed = onClickOverlay && onClickOverlay(e);
+        closed && close();
       }
     };
     const onHandleClick = (e) => {
       onClick && onClick(e);
     };
     const onHandleClickCloseIcon = (e) => {
-      onClickCloseIcon && onClickCloseIcon(e);
-      close();
+      const closed = onClickCloseIcon && onClickCloseIcon(e);
+      closed && close();
     };
     const onHandleOpened = (e) => {
-      onOpened && onOpened(e);
+      afterShow && afterShow();
     };
     const onHandleClosed = (e) => {
-      onClosed && onClosed(e);
+      afterClose && afterClose();
     };
     const resolveContainer = (getContainer) => {
       const container = typeof getContainer === "function" ? getContainer() : getContainer;
@@ -6129,7 +6001,7 @@ Check the top-level render call using <` + t + ">.");
         onExited: onHandleClosed,
         children: /* @__PURE__ */ jsxs("div", {
           style: popStyles,
-          className: classes,
+          className: popClassName,
           onClick: onHandleClick,
           children: [showChildren ? children : "", renderIcon()]
         })
@@ -6140,7 +6012,7 @@ Check the top-level render call using <` + t + ">.");
         children: overlay ? /* @__PURE__ */ jsxs(Fragment, {
           children: [/* @__PURE__ */ jsx(Overlay, {
             style: overlayStyles,
-            className: overlayClass,
+            className: overlayClassName,
             visible: innerVisible,
             closeOnOverlayClick,
             zIndex,
@@ -6158,16 +6030,17 @@ Check the top-level render call using <` + t + ">.");
       !visible && close();
     }, [visible]);
     React.useEffect(() => {
-      setTransitionName(transition || `nut-popup-slide-${position}`);
-    }, [position]);
+      setTransitionName(transition || `${classPrefix2}-slide-${position}`);
+    }, [position, transition]);
     return /* @__PURE__ */ jsx(Fragment, {
-      children: renderToContainer(teleport, renderNode())
+      children: renderToContainer(portal, renderNode())
     });
   };
   Popup.defaultProps = defaultProps$1m;
   Popup.displayName = "NutPopup";
   const DataContext$2 = React.createContext({});
   const defaultProps$1l = {
+    ...ComponentDefaults,
     span: "24",
     offset: "0",
     gutter: "0"
@@ -6175,7 +6048,7 @@ Check the top-level render call using <` + t + ">.");
   const Col = (props) => {
     const {
       className,
-      style = {},
+      style,
       span,
       offset,
       children,
@@ -6221,7 +6094,7 @@ Check the top-level render call using <` + t + ">.");
     contentPosition: "center",
     direction: "horizontal"
   };
-  const classPrefix$3 = `nut-divider`;
+  const classPrefix$4 = `nut-divider`;
   const Divider = (props) => {
     const {
       children,
@@ -6235,14 +6108,14 @@ Check the top-level render call using <` + t + ">.");
       ...props
     };
     const classes = direction === "horizontal" ? classNames({
-      [`${classPrefix$3}`]: true,
-      [`${classPrefix$3}__center`]: children,
-      [`${classPrefix$3}__left`]: contentPosition === "left",
-      [`${classPrefix$3}__right`]: contentPosition === "right",
-      [`${classPrefix$3}__hairline`]: true
+      [`${classPrefix$4}`]: true,
+      [`${classPrefix$4}__center`]: children,
+      [`${classPrefix$4}__left`]: contentPosition === "left",
+      [`${classPrefix$4}__right`]: contentPosition === "right",
+      [`${classPrefix$4}__hairline`]: true
     }) : classNames({
-      [`${classPrefix$3}`]: true,
-      [`${classPrefix$3}__vertical`]: direction === "vertical"
+      [`${classPrefix$4}`]: true,
+      [`${classPrefix$4}__vertical`]: direction === "vertical"
     });
     return /* @__PURE__ */ jsx("div", {
       className: `${classes} ${className || ""}`,
@@ -6426,7 +6299,9 @@ Check the top-level render call using <` + t + ">.");
   };
   Layout.defaultProps = defaultProps$1h;
   Layout.displayName = "NutLayout";
+  const classPrefix$3 = "nut-row";
   const defaultProps$1g = {
+    ...ComponentDefaults,
     type: "",
     justify: "start",
     align: "flex-start",
@@ -6436,7 +6311,7 @@ Check the top-level render call using <` + t + ">.");
   const Row = (props) => {
     const {
       className,
-      style = {},
+      style,
       children,
       type: type2,
       justify,
@@ -6448,7 +6323,6 @@ Check the top-level render call using <` + t + ">.");
       ...defaultProps$1g,
       ...props
     };
-    const prefixCls2 = "nut-row";
     const getClass = (prefix2, type22) => {
       const classType = type22 ? `nut-row-${prefix2}-${type22}` : "";
       const className2 = prefix2 ? classType : `nut-row-${type22}`;
@@ -6460,7 +6334,7 @@ Check the top-level render call using <` + t + ">.");
     ${getClass("justify", justify)}
     ${getClass("align", align)}
     ${getClass("flex", wrap)}
-    ${prefixCls2}
+    ${classPrefix$3}
    `;
     };
     const parentRow = {
@@ -11819,6 +11693,126 @@ Please add \`${key}Action\` when creating your handler.`);
     }
   });
   const animated = host.animated;
+  var classnameExports = {};
+  var classname = {
+    get exports() {
+      return classnameExports;
+    },
+    set exports(v) {
+      classnameExports = v;
+    }
+  };
+  var classname_production_min = {};
+  var hasRequiredClassname_production_min;
+  function requireClassname_production_min() {
+    if (hasRequiredClassname_production_min)
+      return classname_production_min;
+    hasRequiredClassname_production_min = 1;
+    function r(r2) {
+      function t2(t3, i, a2, o) {
+        var f = i ? e + t3 + r2.e + i : e + t3, v = f;
+        if (a2) {
+          var s = " " + v + r2.m;
+          for (var u in a2)
+            if (a2.hasOwnProperty(u)) {
+              var p = a2[u];
+              true === p ? v += s + u : p && (v += s + u + n + p);
+            }
+        }
+        if (void 0 !== o)
+          for (var y2 = 0, c = (o = Array.isArray(o) ? o : [o]).length; y2 < c; y2++) {
+            var l2 = o[y2];
+            if (l2 && "string" == typeof l2.valueOf())
+              for (var g = l2.valueOf().split(" "), d = 0; d < g.length; d++) {
+                var h = g[d];
+                h !== f && (v += " " + h);
+              }
+          }
+        return v;
+      }
+      var e = r2.n || "", n = r2.v || r2.m;
+      return function(r3, e2) {
+        return function(n2, i, a2) {
+          return "string" == typeof n2 ? "string" == typeof i || Array.isArray(i) ? t2(r3, n2, void 0, i) : t2(r3, n2, i, a2) : t2(r3, e2, n2, i);
+        };
+      };
+    }
+    Object.defineProperty(classname_production_min, "__esModule", { value: true });
+    var t = r({ e: "-", m: "_" });
+    classname_production_min.cn = t, classname_production_min.withNaming = r;
+    return classname_production_min;
+  }
+  var classname_development = {};
+  var hasRequiredClassname_development;
+  function requireClassname_development() {
+    if (hasRequiredClassname_development)
+      return classname_development;
+    hasRequiredClassname_development = 1;
+    Object.defineProperty(classname_development, "__esModule", { value: true });
+    function withNaming(preset) {
+      var nameSpace = preset.n || "";
+      var modValueDelimiter = preset.v || preset.m;
+      function stringify(b2, e, m, mix) {
+        var entityName = e ? nameSpace + b2 + preset.e + e : nameSpace + b2;
+        var className = entityName;
+        if (m) {
+          var modPrefix = " " + className + preset.m;
+          for (var k2 in m) {
+            if (m.hasOwnProperty(k2)) {
+              var modVal = m[k2];
+              if (modVal === true) {
+                className += modPrefix + k2;
+              } else if (modVal) {
+                className += modPrefix + k2 + modValueDelimiter + modVal;
+              }
+            }
+          }
+        }
+        if (mix !== void 0) {
+          mix = Array.isArray(mix) ? mix : [mix];
+          for (var i = 0, len = mix.length; i < len; i++) {
+            var value = mix[i];
+            if (!value || typeof value.valueOf() !== "string")
+              continue;
+            var mixes = value.valueOf().split(" ");
+            for (var j = 0; j < mixes.length; j++) {
+              var val = mixes[j];
+              if (val !== entityName) {
+                className += " " + val;
+              }
+            }
+          }
+        }
+        return className;
+      }
+      return function cnGenerator(b2, e) {
+        return function(elemOrMods, elemModsOrBlockMix, elemMix) {
+          if (typeof elemOrMods === "string") {
+            if (typeof elemModsOrBlockMix === "string" || Array.isArray(elemModsOrBlockMix)) {
+              return stringify(b2, elemOrMods, void 0, elemModsOrBlockMix);
+            }
+            return stringify(b2, elemOrMods, elemModsOrBlockMix, elemMix);
+          }
+          return stringify(b2, e, elemOrMods, elemModsOrBlockMix);
+        };
+      };
+    }
+    var cn2 = withNaming({
+      e: "-",
+      m: "_"
+    });
+    classname_development.cn = cn2;
+    classname_development.withNaming = withNaming;
+    return classname_development;
+  }
+  (function(module2) {
+    if (process.env.NODE_ENV === "production") {
+      module2.exports = requireClassname_production_min();
+    } else {
+      module2.exports = requireClassname_development();
+    }
+  })(classname);
+  const cn = classnameExports.withNaming({ n: "nut-", e: "__", m: "--", v: "-" });
   const elevatorContext = React.createContext({});
   const defaultProps$1e = {
     height: "200px",
@@ -12753,7 +12747,6 @@ Please add \`${key}Action\` when creating your handler.`);
     width: "80%"
   };
   const SideNavBar = (props) => {
-    useConfig();
     const {
       title,
       visible,
@@ -14659,7 +14652,7 @@ Please add \`${key}Action\` when creating your handler.`);
     };
     return /* @__PURE__ */ jsx(Fragment, {
       children: poppable ? /* @__PURE__ */ jsx(Popup, {
-        popClass: "cascadar-popup",
+        className: "cascadar-popup",
         visible,
         position: "bottom",
         round: true,
@@ -17844,7 +17837,7 @@ Please add \`${key}Action\` when creating your handler.`);
       children: /* @__PURE__ */ jsx(Popup, {
         visible: show,
         position: "bottom",
-        popClass,
+        className: popClass,
         onClickOverlay: onClose,
         overlay,
         onClickCloseIcon: onClose,
@@ -19737,29 +19730,26 @@ Please add \`${key}Action\` when creating your handler.`);
   const defaultProps$J = {
     ...ComponentDefaults,
     url: "",
-    maximum: 1,
-    uploadIcon: null,
-    uploadIconSize: "",
-    uploadIconTip: "",
-    listType: "picture",
+    maxCount: 1,
+    previewType: "picture",
+    imageFit: "cover",
     name: "file",
     accept: "*",
     disabled: false,
     autoUpload: true,
     multiple: false,
-    maximize: Number.MAX_VALUE,
+    maxFileSize: Number.MAX_VALUE,
     data: {},
     headers: {},
     method: "post",
-    defaultImg: "",
     xhrState: 200,
     timeout: 1e3 * 30,
     withCredentials: false,
     clearInput: true,
-    isPreview: true,
-    isDeletable: true,
+    preview: true,
+    deletable: true,
     capture: false,
-    onBeforeDelete: (file, files) => {
+    beforeDelete: (file, files) => {
       return true;
     }
   };
@@ -19783,32 +19773,33 @@ Please add \`${key}Action\` when creating your handler.`);
     const {
       children,
       uploadIcon,
-      uploadIconSize,
-      uploadIconTip,
+      uploadLabel,
       name,
       accept,
-      defaultFileList,
-      listType,
+      defaultValue,
+      value,
+      previewType,
+      imageFit,
       disabled,
       multiple,
       url,
-      defaultImg,
+      previewUrl,
       headers,
       timeout,
       method: method2,
       xhrState,
       withCredentials,
       data,
-      isPreview,
-      isDeletable,
-      maximum,
+      preview,
+      deletable,
+      maxCount,
       capture,
-      maximize,
+      maxFileSize,
       className,
       autoUpload,
       clearInput,
       onStart,
-      onRemove,
+      onDelete,
       onChange,
       onFileItemClick,
       onProgress,
@@ -19816,23 +19807,22 @@ Please add \`${key}Action\` when creating your handler.`);
       onUpdate,
       onFailure,
       onOversize,
-      onBeforeUpload,
-      onBeforeXhrUpload,
-      onBeforeDelete,
+      beforeUpload,
+      beforeXhrUpload,
+      beforeDelete,
       ...restProps
     } = {
       ...defaultProps$J,
       ...props
     };
-    const [fileList, setFileList] = React.useState([]);
+    const [fileList, setFileList] = React.useState(defaultValue || []);
     const [uploadQueue, setUploadQueue] = React.useState([]);
     React.useEffect(() => {
-      if (defaultFileList) {
-        setFileList(defaultFileList);
+      if (value) {
+        setFileList(value);
       }
-    }, [defaultFileList]);
-    const b2 = cn("uploader");
-    const classes = classNames(className, b2(""));
+    }, [value]);
+    const classes = classNames(className, "nut-uploader");
     React.useImperativeHandle(ref, () => ({
       submit: () => {
         Promise.all(uploadQueue).then((res) => {
@@ -19859,8 +19849,8 @@ Please add \`${key}Action\` when creating your handler.`);
     const executeUpload = (fileItem, index) => {
       const uploadOption = new UploadOptions();
       uploadOption.url = url;
-      for (const [key, value] of Object.entries(data)) {
-        fileItem.formData.append(key, value);
+      for (const [key, value2] of Object.entries(data)) {
+        fileItem.formData.append(key, value2);
       }
       uploadOption.formData = fileItem.formData;
       uploadOption.timeout = timeout * 1;
@@ -19868,7 +19858,7 @@ Please add \`${key}Action\` when creating your handler.`);
       uploadOption.xhrState = xhrState;
       uploadOption.headers = headers;
       uploadOption.withCredentials = withCredentials;
-      uploadOption.beforeXhrUpload = onBeforeXhrUpload;
+      uploadOption.beforeXhrUpload = beforeXhrUpload;
       try {
         uploadOption.sourceFile = fileItem.formData.get(name);
       } catch (error) {
@@ -19966,7 +19956,7 @@ Please add \`${key}Action\` when creating your handler.`);
           fileItem.message = locale.uploader.waitingUpload;
         }
         executeUpload(fileItem, index);
-        if (isPreview && file.type.includes("image")) {
+        if (preview && file.type.includes("image")) {
           const reader = new FileReader();
           reader.onload = (event) => {
             fileItem.url = event.target.result;
@@ -19981,10 +19971,10 @@ Please add \`${key}Action\` when creating your handler.`);
       });
     };
     const filterFiles = (files) => {
-      const maximum2 = props.maximum * 1;
+      const maximum = props.maxCount * 1;
       const oversizes = new Array();
       const filterFile = files.filter((file) => {
-        if (file.size > maximize) {
+        if (file.size > maxFileSize) {
           oversizes.push(file);
           return false;
         }
@@ -19993,23 +19983,23 @@ Please add \`${key}Action\` when creating your handler.`);
       if (oversizes.length) {
         onOversize && onOversize(files);
       }
-      if (filterFile.length > maximum2) {
-        filterFile.splice(maximum2, filterFile.length - maximum2);
+      if (filterFile.length > maximum) {
+        filterFile.splice(maximum, filterFile.length - maximum);
       }
       if (fileList.length !== 0) {
-        const index = maximum2 - fileList.length;
+        const index = maximum - fileList.length;
         filterFile.splice(index, filterFile.length - index);
       }
       return filterFile;
     };
     const deleted = (file, index) => {
       fileList.splice(index, 1);
-      onRemove && onRemove(file, fileList);
+      onDelete && onDelete(file, fileList);
       setFileList([...fileList]);
     };
-    const onDelete = (file, index) => {
+    const onDeleteItem = (file, index) => {
       clearUploadQueue(index);
-      funcInterceptor(onBeforeDelete, {
+      funcInterceptor(beforeDelete, {
         args: [file, fileList],
         done: () => deleted(file, index)
       });
@@ -20022,8 +20012,8 @@ Please add \`${key}Action\` when creating your handler.`);
       const {
         files
       } = $el;
-      if (onBeforeUpload) {
-        onBeforeUpload(new Array().slice.call(files)).then((f) => {
+      if (beforeUpload) {
+        beforeUpload(new Array().slice.call(files)).then((f) => {
           const _files = filterFiles(new Array().slice.call(f));
           readFile(_files);
         });
@@ -20048,7 +20038,7 @@ Please add \`${key}Action\` when creating your handler.`);
       children: [children && /* @__PURE__ */ jsx("div", {
         className: "nut-uploader__slot",
         children: /* @__PURE__ */ jsxs(Fragment, {
-          children: [children, maximum > fileList.length && /* @__PURE__ */ jsx(Fragment, {
+          children: [children, maxCount > fileList.length && /* @__PURE__ */ jsx(Fragment, {
             children: capture ? /* @__PURE__ */ jsx("input", {
               className: "nut-uploader__input",
               type: "file",
@@ -20071,13 +20061,13 @@ Please add \`${key}Action\` when creating your handler.`);
         })
       }), fileList.length !== 0 && fileList.map((item, index) => {
         return /* @__PURE__ */ jsxs("div", {
-          className: `nut-uploader__preview ${listType}`,
-          children: [listType === "picture" && !children && /* @__PURE__ */ jsxs("div", {
+          className: `nut-uploader__preview ${previewType}`,
+          children: [previewType === "picture" && !children && /* @__PURE__ */ jsxs("div", {
             className: "nut-uploader__preview-img",
-            children: [isDeletable && /* @__PURE__ */ jsx(x$8, {
+            children: [deletable && /* @__PURE__ */ jsx(x$8, {
               color: "rgba(0,0,0,0.6)",
               className: "close",
-              onClick: () => onDelete(item, index)
+              onClick: () => onDeleteItem(item, index)
             }), item.status === "ready" ? /* @__PURE__ */ jsx("div", {
               className: "nut-uploader__preview__progress",
               children: /* @__PURE__ */ jsx("div", {
@@ -20089,6 +20079,7 @@ Please add \`${key}Action\` when creating your handler.`);
               children: [item.failIcon !== " " && item.loadingIcon !== " " && (item.status === "error" ? item.failIcon || /* @__PURE__ */ jsx(x$8, {
                 color: "#fff"
               }) : item.loadingIcon || /* @__PURE__ */ jsx(k$2, {
+                className: "nut-icon-loading",
                 color: "#fff"
               })), /* @__PURE__ */ jsx("div", {
                 className: "nut-uploader__preview__progress__msg",
@@ -20097,14 +20088,17 @@ Please add \`${key}Action\` when creating your handler.`);
             }), item.type.includes("image") ? /* @__PURE__ */ jsx(Fragment, {
               children: item.url && /* @__PURE__ */ jsx("img", {
                 className: "nut-uploader__preview-img__c",
+                style: {
+                  objectFit: imageFit
+                },
                 src: item.url,
                 alt: "",
                 onClick: () => handleItemClick(item)
               })
             }) : /* @__PURE__ */ jsx(Fragment, {
-              children: defaultImg ? /* @__PURE__ */ jsx("img", {
+              children: previewUrl ? /* @__PURE__ */ jsx("img", {
                 className: "nut-uploader__preview-img__c",
-                src: defaultImg,
+                src: previewUrl,
                 alt: "",
                 onClick: () => handleItemClick(item)
               }) : /* @__PURE__ */ jsx("div", {
@@ -20121,16 +20115,16 @@ Please add \`${key}Action\` when creating your handler.`);
               className: "tips",
               children: item.name
             }) : null]
-          }), listType === "list" && /* @__PURE__ */ jsxs("div", {
+          }), previewType === "list" && /* @__PURE__ */ jsxs("div", {
             className: "nut-uploader__preview-list",
             children: [/* @__PURE__ */ jsxs("div", {
               className: `nut-uploader__preview-img__file__name ${item.status}`,
               onClick: () => handleItemClick(item),
               children: [/* @__PURE__ */ jsx(x$6, {}), " ", item.name]
-            }), isDeletable && /* @__PURE__ */ jsx(y$6, {
+            }), deletable && /* @__PURE__ */ jsx(y$6, {
               color: "#808080",
               className: "nut-uploader__preview-img__file__del",
-              onClick: () => onDelete(item, index)
+              onClick: () => onDeleteItem(item, index)
             }), item.status === "uploading" && /* @__PURE__ */ jsx(Progress, {
               size: "small",
               percentage: item.percentage,
@@ -20139,17 +20133,17 @@ Please add \`${key}Action\` when creating your handler.`);
             })]
           })]
         }, item.uid);
-      }), maximum > fileList.length && listType === "picture" && !children && /* @__PURE__ */ jsxs("div", {
-        className: `nut-uploader__upload ${listType} ${disabled ? "nut-uploader__upload-disabled" : ""}`,
+      }), maxCount > fileList.length && previewType === "picture" && !children && /* @__PURE__ */ jsxs("div", {
+        className: `nut-uploader__upload ${previewType} ${disabled ? "nut-uploader__upload-disabled" : ""}`,
         children: [/* @__PURE__ */ jsxs("div", {
           className: "nut-uploader__icon",
           children: [uploadIcon || /* @__PURE__ */ jsx(x$3, {
-            width: uploadIconSize,
-            height: uploadIconSize,
+            width: "20px",
+            height: "20px",
             color: "#808080"
           }), /* @__PURE__ */ jsx("span", {
             className: "nut-uploader__icon-tip",
-            children: uploadIconTip
+            children: uploadLabel
           })]
         }), capture ? /* @__PURE__ */ jsx("input", {
           className: "nut-uploader__input",
@@ -21877,15 +21871,13 @@ Please add \`${key}Action\` when creating your handler.`);
   AnimatingNumbers.CountUp = CountUp;
   const defaultProps$x = {
     ...ComponentDefaults,
-    className: "",
-    url: "",
-    style: {},
+    src: "",
     muted: false,
     autoplay: false,
     loop: false,
     preload: "auto",
     type: "progress",
-    onFastBack: (e) => {
+    onBack: (e) => {
     },
     // type 为 progress时生效
     onForward: (e) => {
@@ -21893,7 +21885,7 @@ Please add \`${key}Action\` when creating your handler.`);
     // type 为 progress时生效
     onPause: (e) => {
     },
-    onPlayEnd: (e) => {
+    onEnd: (e) => {
     },
     onMute: (e) => {
     },
@@ -21906,17 +21898,17 @@ Please add \`${key}Action\` when creating your handler.`);
     } = useConfig();
     const {
       className,
-      url,
+      src,
       style,
       muted,
       autoplay,
       loop: loop2,
       preload,
       type: type2,
-      onFastBack,
+      onBack,
       onForward,
       onPause,
-      onPlayEnd,
+      onEnd,
       onMute,
       onCanPlay,
       children,
@@ -21940,13 +21932,13 @@ Please add \`${key}Action\` when creating your handler.`);
       playing: props.autoplay,
       handPlaying: false
     });
-    const b2 = cn("audio");
+    const classPrefix2 = "nut-audio";
     const warn = console.warn;
     const handleEnded = (e) => {
       if (props.loop) {
         warn(locale.audio.tips || "onPlayEnd事件在loop=false时才会触发");
       } else {
-        props.onPlayEnd && props.onPlayEnd(e);
+        props.onEnd && props.onEnd(e);
       }
     };
     function watch() {
@@ -21971,15 +21963,13 @@ Please add \`${key}Action\` when creating your handler.`);
       }
     };
     const renderIcon = () => {
-      return /* @__PURE__ */ jsx(Fragment, {
+      return /* @__PURE__ */ jsx("div", {
+        className: `${classPrefix2}__icon`,
         children: /* @__PURE__ */ jsx("div", {
-          className: b2("icon"),
-          children: /* @__PURE__ */ jsx("div", {
-            className: `${b2("icon-box")} ${playing ? b2("icon-play") : b2("icon-stop")}`,
-            onClick: handleStatusChange,
-            children: /* @__PURE__ */ jsx(k, {
-              className: playing ? "nut-icon-loading" : ""
-            })
+          className: classNames(`${classPrefix2}__icon-box`, playing ? `${classPrefix2}__icon-play` : `${classPrefix2}__icon-stop`),
+          onClick: handleStatusChange,
+          children: /* @__PURE__ */ jsx(k, {
+            className: playing ? "nut-icon-loading" : ""
           })
         })
       });
@@ -21988,7 +21978,7 @@ Please add \`${key}Action\` when creating your handler.`);
       if (statusRef.current.currentTime > 0 && AudioRef.current) {
         statusRef.current.currentTime--;
         AudioRef.current.currentTime = statusRef.current.currentTime;
-        props.onFastBack && props.onFastBack(AudioRef.current);
+        props.onBack && props.onBack(AudioRef.current);
       }
     };
     const handleForward = () => {
@@ -22025,12 +22015,12 @@ Please add \`${key}Action\` when creating your handler.`);
     const renderProgerss = () => {
       return /* @__PURE__ */ jsxs(Fragment, {
         children: [/* @__PURE__ */ jsxs("div", {
-          className: b2("progress"),
+          className: `${classPrefix2}__progress`,
           children: [/* @__PURE__ */ jsx("div", {
             className: "time",
             children: currentDuration
           }), /* @__PURE__ */ jsx("div", {
-            className: b2("progress-bar-wrapper"),
+            className: `${classPrefix2}__progress-bar-wrapper`,
             children: /* @__PURE__ */ jsx(Range, {
               modelValue: percent,
               hiddenTag: true,
@@ -22072,7 +22062,7 @@ Please add \`${key}Action\` when creating your handler.`);
     };
     const renderNone = () => {
       return /* @__PURE__ */ jsx("div", {
-        className: b2("none-container"),
+        className: `${classPrefix2}__none-container`,
         onClick: handleStatusChange,
         children
       });
@@ -22108,14 +22098,14 @@ Please add \`${key}Action\` when creating your handler.`);
       statusRef.current.currentTime = time;
     };
     return /* @__PURE__ */ jsxs("div", {
-      className: `${b2()} ${className}`,
+      className: classNames(classPrefix2, className),
       style,
       ...rest,
       children: [renderAudio(), /* @__PURE__ */ jsx("audio", {
         className: "audioMain",
         controls: type2 === "controls",
         ref: AudioRef,
-        src: url,
+        src,
         muted,
         preload,
         loop: loop2,
@@ -23869,7 +23859,7 @@ Please add \`${key}Action\` when creating your handler.`);
     };
     return /* @__PURE__ */ jsxs(Popup, {
       visible: showPop,
-      popClass: "custom-pop",
+      className: "custom-pop",
       style: {
         width: "100%"
       },