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

package/dist/nutui.react.mjs

@@ -6,7 +6,7 @@ var __publicField = (obj, key, value) => {
 };
 var _a;
 /*!
-* @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.
 */
@@ -3283,7 +3283,7 @@ const defaultProps$1q = {
   onClick: (event) => {
   }
 };
-const classPrefix$7 = "nut-cell";
+const classPrefix$8 = "nut-cell";
 const Cell = (props) => {
   const {
     children,
@@ -3312,26 +3312,26 @@ const Cell = (props) => {
     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`
       })]
     })
   });
@@ -3343,7 +3343,7 @@ const defaultProps$1p = {
   title: "",
   description: ""
 };
-const classPrefix$6 = "nut-cell-group";
+const classPrefix$7 = "nut-cell-group";
 const CellGroup = (props) => {
   const {
     children,
@@ -3357,16 +3357,16 @@ const CellGroup = (props) => {
     ...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
     })]
   });
@@ -3846,7 +3846,7 @@ const defaultProps$1n = {
   loading: true,
   lazy: false
 };
-const classPrefix$5 = "nut-image";
+const classPrefix$6 = "nut-image";
 const Image$1 = (props) => {
   const {
     className,
@@ -3975,7 +3975,7 @@ const Image$1 = (props) => {
     return null;
   }, [loading, innerLoading]);
   return /* @__PURE__ */ jsxs("div", {
-    className: classNames(classPrefix$5, className),
+    className: classNames(classPrefix$6, className),
     style: containerStyle,
     onClick: (e) => {
       imageClick(e);
@@ -4010,7 +4010,7 @@ const defaultOverlayProps = {
   visible: false,
   lockScroll: true
 };
-const classPrefix$4 = `nut-overlay`;
+const classPrefix$5 = `nut-overlay`;
 const Overlay = (props) => {
   const {
     children,
@@ -4053,7 +4053,7 @@ const Overlay = (props) => {
     "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`,
@@ -5829,138 +5829,17 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$4({},
   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(module) {
-  if (process.env.NODE_ENV === "production") {
-    module.exports = requireClassname_production_min();
-  } else {
-    module.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: () => {
@@ -5969,14 +5848,8 @@ const defaultProps$1m = {
   },
   onClick: (e) => {
   },
-  onOpened: (e) => {
-  },
-  onClosed: (e) => {
-  },
-  onClickOverlay: (e) => {
-  },
-  onClickCloseIcon: (e) => {
-  },
+  onClickOverlay: (e) => true,
+  onClickCloseIcon: (e) => true,
   ...defaultOverlayProps
 };
 let _zIndex = 1e3;
@@ -5987,7 +5860,7 @@ const Popup = (props) => {
     overlay,
     closeOnOverlayClick,
     overlayStyle,
-    overlayClass,
+    overlayClassName,
     zIndex,
     lockScroll,
     duration,
@@ -5998,23 +5871,22 @@ const Popup = (props) => {
     transition,
     round,
     position,
-    popClass,
     className,
     destroyOnClose,
-    teleport,
+    portal,
     onOpen,
     onClose,
     onClickOverlay,
     onClickCloseIcon,
-    onOpened,
-    onClosed,
+    afterShow,
+    afterClose,
     onClick
   } = props;
   const [index, setIndex] = useState(zIndex || _zIndex);
   const [innerVisible, setInnerVisible] = useState(visible);
   const [showChildren, setShowChildren] = useState(true);
   const [transitionName, setTransitionName] = useState("");
-  const b2 = cn("popup");
+  const classPrefix2 = "nut-popup";
   const baseStyle = {
     zIndex: index,
     animationDuration: `${duration}s`
@@ -6027,15 +5899,15 @@ const Popup = (props) => {
     ...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) {
@@ -6053,29 +5925,29 @@ const Popup = (props) => {
       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;
@@ -6111,7 +5983,7 @@ const Popup = (props) => {
       onExited: onHandleClosed,
       children: /* @__PURE__ */ jsxs("div", {
         style: popStyles,
-        className: classes,
+        className: popClassName,
         onClick: onHandleClick,
         children: [showChildren ? children : "", renderIcon()]
       })
@@ -6122,7 +5994,7 @@ const Popup = (props) => {
       children: overlay ? /* @__PURE__ */ jsxs(Fragment, {
         children: [/* @__PURE__ */ jsx(Overlay, {
           style: overlayStyles,
-          className: overlayClass,
+          className: overlayClassName,
           visible: innerVisible,
           closeOnOverlayClick,
           zIndex,
@@ -6140,16 +6012,17 @@ const Popup = (props) => {
     !visible && close();
   }, [visible]);
   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 = createContext({});
 const defaultProps$1l = {
+  ...ComponentDefaults,
   span: "24",
   offset: "0",
   gutter: "0"
@@ -6157,7 +6030,7 @@ const defaultProps$1l = {
 const Col = (props) => {
   const {
     className,
-    style = {},
+    style,
     span,
     offset,
     children,
@@ -6203,7 +6076,7 @@ const defaultProps$1k = {
   contentPosition: "center",
   direction: "horizontal"
 };
-const classPrefix$3 = `nut-divider`;
+const classPrefix$4 = `nut-divider`;
 const Divider = (props) => {
   const {
     children,
@@ -6217,14 +6090,14 @@ const Divider = (props) => {
     ...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 || ""}`,
@@ -6408,7 +6281,9 @@ const Layout = (props) => {
 };
 Layout.defaultProps = defaultProps$1h;
 Layout.displayName = "NutLayout";
+const classPrefix$3 = "nut-row";
 const defaultProps$1g = {
+  ...ComponentDefaults,
   type: "",
   justify: "start",
   align: "flex-start",
@@ -6418,7 +6293,7 @@ const defaultProps$1g = {
 const Row = (props) => {
   const {
     className,
-    style = {},
+    style,
     children,
     type: type4,
     justify,
@@ -6430,7 +6305,6 @@ const Row = (props) => {
     ...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}`;
@@ -6442,7 +6316,7 @@ const Row = (props) => {
     ${getClass("justify", justify)}
     ${getClass("align", align)}
     ${getClass("flex", wrap)}
-    ${prefixCls2}
+    ${classPrefix$3}
    `;
   };
   const parentRow = {
@@ -11801,6 +11675,126 @@ const host = createHost(primitives, {
   }
 });
 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(module) {
+  if (process.env.NODE_ENV === "production") {
+    module.exports = requireClassname_production_min();
+  } else {
+    module.exports = requireClassname_development();
+  }
+})(classname);
+const cn = classnameExports.withNaming({ n: "nut-", e: "__", m: "--", v: "-" });
 const elevatorContext = createContext({});
 const defaultProps$1e = {
   height: "200px",
@@ -12735,7 +12729,6 @@ const defaultProps$17 = {
   width: "80%"
 };
 const SideNavBar = (props) => {
-  useConfig();
   const {
     title,
     visible,
@@ -14641,7 +14634,7 @@ const InternalCascader = (props, ref) => {
   };
   return /* @__PURE__ */ jsx(Fragment, {
     children: poppable ? /* @__PURE__ */ jsx(Popup, {
-      popClass: "cascadar-popup",
+      className: "cascadar-popup",
       visible,
       position: "bottom",
       round: true,
@@ -17826,7 +17819,7 @@ const NumberKeyboard = (props) => {
     children: /* @__PURE__ */ jsx(Popup, {
       visible: show,
       position: "bottom",
-      popClass,
+      className: popClass,
       onClickOverlay: onClose,
       overlay,
       onClickCloseIcon: onClose,
@@ -19719,29 +19712,26 @@ const funcInterceptor = (interceptor, {
 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;
   }
 };
@@ -19765,32 +19755,33 @@ const InternalUploader = (props, ref) => {
   const {
     children,
     uploadIcon,
-    uploadIconSize,
-    uploadIconTip,
+    uploadLabel,
     name,
     accept,
-    defaultFileList,
-    listType,
+    defaultValue,
+    value,
+    previewType,
+    imageFit,
     disabled,
     multiple,
     url: url2,
-    defaultImg,
+    previewUrl,
     headers,
     timeout: timeout2,
     method: method4,
     xhrState,
     withCredentials,
     data,
-    isPreview,
-    isDeletable,
-    maximum,
+    preview,
+    deletable,
+    maxCount,
     capture,
-    maximize,
+    maxFileSize,
     className,
     autoUpload,
     clearInput,
     onStart,
-    onRemove,
+    onDelete,
     onChange,
     onFileItemClick,
     onProgress,
@@ -19798,23 +19789,22 @@ const InternalUploader = (props, ref) => {
     onUpdate,
     onFailure,
     onOversize,
-    onBeforeUpload,
-    onBeforeXhrUpload,
-    onBeforeDelete,
+    beforeUpload,
+    beforeXhrUpload,
+    beforeDelete,
     ...restProps
   } = {
     ...defaultProps$J,
     ...props
   };
-  const [fileList, setFileList] = useState([]);
+  const [fileList, setFileList] = useState(defaultValue || []);
   const [uploadQueue, setUploadQueue] = useState([]);
   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");
   useImperativeHandle(ref, () => ({
     submit: () => {
       Promise.all(uploadQueue).then((res) => {
@@ -19841,8 +19831,8 @@ const InternalUploader = (props, ref) => {
   const executeUpload = (fileItem, index) => {
     const uploadOption = new UploadOptions();
     uploadOption.url = url2;
-    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 = timeout2 * 1;
@@ -19850,7 +19840,7 @@ const InternalUploader = (props, ref) => {
     uploadOption.xhrState = xhrState;
     uploadOption.headers = headers;
     uploadOption.withCredentials = withCredentials;
-    uploadOption.beforeXhrUpload = onBeforeXhrUpload;
+    uploadOption.beforeXhrUpload = beforeXhrUpload;
     try {
       uploadOption.sourceFile = fileItem.formData.get(name);
     } catch (error) {
@@ -19948,7 +19938,7 @@ const InternalUploader = (props, ref) => {
         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;
@@ -19963,10 +19953,10 @@ const InternalUploader = (props, ref) => {
     });
   };
   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;
       }
@@ -19975,23 +19965,23 @@ const InternalUploader = (props, ref) => {
     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)
     });
@@ -20004,8 +19994,8 @@ const InternalUploader = (props, ref) => {
     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);
       });
@@ -20030,7 +20020,7 @@ const InternalUploader = (props, ref) => {
     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",
@@ -20053,13 +20043,13 @@ const InternalUploader = (props, ref) => {
       })
     }), 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", {
@@ -20071,6 +20061,7 @@ const InternalUploader = (props, ref) => {
             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",
@@ -20079,14 +20070,17 @@ const InternalUploader = (props, ref) => {
           }), 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", {
@@ -20103,16 +20097,16 @@ const InternalUploader = (props, ref) => {
             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,
@@ -20121,17 +20115,17 @@ const InternalUploader = (props, ref) => {
           })]
         })]
       }, 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",
@@ -21859,15 +21853,13 @@ __publicField(AnimatingNumbers, "CountUp", CountUp);
 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) => {
@@ -21875,7 +21867,7 @@ const defaultProps$x = {
   // type 为 progress时生效
   onPause: (e) => {
   },
-  onPlayEnd: (e) => {
+  onEnd: (e) => {
   },
   onMute: (e) => {
   },
@@ -21888,17 +21880,17 @@ const Audio = (props) => {
   } = useConfig();
   const {
     className,
-    url: url2,
+    src,
     style,
     muted,
     autoplay,
     loop: loop2,
     preload,
     type: type4,
-    onFastBack,
+    onBack,
     onForward,
     onPause,
-    onPlayEnd,
+    onEnd,
     onMute,
     onCanPlay,
     children,
@@ -21922,13 +21914,13 @@ const Audio = (props) => {
     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() {
@@ -21953,15 +21945,13 @@ const Audio = (props) => {
     }
   };
   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" : ""
         })
       })
     });
@@ -21970,7 +21960,7 @@ const Audio = (props) => {
     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 = () => {
@@ -22007,12 +21997,12 @@ const Audio = (props) => {
   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,
@@ -22054,7 +22044,7 @@ const Audio = (props) => {
   };
   const renderNone = () => {
     return /* @__PURE__ */ jsx("div", {
-      className: b2("none-container"),
+      className: `${classPrefix2}__none-container`,
       onClick: handleStatusChange,
       children
     });
@@ -22090,14 +22080,14 @@ const Audio = (props) => {
     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: type4 === "controls",
       ref: AudioRef,
-      src: url2,
+      src,
       muted,
       preload,
       loop: loop2,
@@ -23851,7 +23841,7 @@ const ImagePreview = (props) => {
   };
   return /* @__PURE__ */ jsxs(Popup, {
     visible: showPop,
-    popClass: "custom-pop",
+    className: "custom-pop",
     style: {
       width: "100%"
     },