@nutui/nutui-react 2.3.12 → 2.4.0

package/dist/nutui.react.umd.js

@@ -2,7 +2,7 @@
   typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react"), require("react-dom")) : typeof define === "function" && define.amd ? define(["exports", "react", "react-dom"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory((global2.nutui = global2.nutui || {}, global2.nutui.react = {}), global2.React, global2.ReactDOM));
 })(this, function(exports2, React, ReactDOM) {
   "use strict";/*!
-* @nutui/nutui-react v2.3.12 Fri Mar 01 2024 16:09:25 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.4.0 Fri Mar 08 2024 14:22:38 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -11135,6 +11135,7 @@ Please add \`${key}Action\` when creating your handler.`);
   };
   const Badge = (props) => {
     var _a;
+    const rtl = useRtl();
     const { className, style, value, max, children, dot, top, right, color } = {
       ...defaultProps$1b,
       ...props
@@ -11172,7 +11173,8 @@ Please add \`${key}Action\` when creating your handler.`);
     const getStyle = () => {
       const style2 = {};
       style2.top = `${Number(top) || parseFloat(String(top)) || 0}px`;
-      style2.right = `${Number(right) || parseFloat(String(right)) || 0}px`;
+      const dir = rtl ? "left" : "right";
+      style2[dir] = `${Number(right) || parseFloat(String(right)) || 0}px`;
       style2.background = color;
       return style2;
     };
@@ -13681,6 +13683,7 @@ Please add \`${key}Action\` when creating your handler.`);
   const defaultProps$$ = {
     max: void 0,
     min: void 0,
+    list: false,
     labelPosition: "right",
     direction: "vertical",
     onChange: (value) => {
@@ -13696,6 +13699,7 @@ Please add \`${key}Action\` when creating your handler.`);
         children,
         className,
         disabled,
+        list,
         onChange,
         value,
         defaultValue,
@@ -13759,6 +13763,7 @@ Please add \`${key}Action\` when creating your handler.`);
             labelPosition: labelPosition || "right",
             disabled,
             max,
+            list,
             onLimit,
             value: _value,
             check: (value2) => {
@@ -13785,7 +13790,8 @@ Please add \`${key}Action\` when creating your handler.`);
             className: classNames(
               classPrefix$i,
               {
-                [`nut-checkboxgroup-${props.direction}`]: props.direction
+                [`nut-checkboxgroup-${props.direction}`]: props.direction,
+                [`nut-checkboxgroup-list`]: list
               },
               className
             ),
@@ -13928,7 +13934,13 @@ Please add \`${key}Action\` when creating your handler.`);
         innerChecked && activeIcon ? /* @__PURE__ */ React.createElement("div", { className: classNames(`${classPrefix$h}-button-icon`) }, activeIcon) : null
       );
     };
+    const renderListItem = () => {
+      return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$h}-list-item` }, renderLabel(), renderIcon());
+    };
     const renderCheckboxItem = () => {
+      if (ctx2 == null ? void 0 : ctx2.list) {
+        return /* @__PURE__ */ React.createElement(React.Fragment, null, renderListItem());
+      }
       if (shape === "button") {
         return renderButton();
       }
@@ -14685,7 +14697,7 @@ Please add \`${key}Action\` when creating your handler.`);
         } else {
           cmin++;
         }
-        if (cmin <= val) {
+        if (cmin <= Number(val)) {
           index++;
         }
       }
@@ -16553,7 +16565,7 @@ Please add \`${key}Action\` when creating your handler.`);
         );
         const nextValue = bound2(shouldOverBoundary, Number(min), Number(max));
         setShadowValue(nextValue);
-        if (negative ? shouldOverBoundary < min : shouldOverBoundary > max) {
+        if (negative ? shouldOverBoundary < Number(min) : shouldOverBoundary > Number(max)) {
           onOverlimit == null ? void 0 : onOverlimit(e2);
         } else {
           onChange == null ? void 0 : onChange(nextValue, e2);
@@ -19068,7 +19080,7 @@ Please add \`${key}Action\` when creating your handler.`);
     const handleItemClick = (file, index) => {
       onFileItemClick == null ? void 0 : onFileItemClick(file, index);
     };
-    return /* @__PURE__ */ React.createElement("div", { className: classes, ...restProps }, (children || previewType === "list") && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader-slot" }, children || /* @__PURE__ */ React.createElement(Button, { size: "small", type: "primary" }, "上传文件"), maxCount > fileList.length && /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement("div", { className: classes, ...restProps }, (children || previewType === "list") && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader-slot" }, children || /* @__PURE__ */ React.createElement(Button, { size: "small", type: "primary" }, "上传文件"), Number(maxCount) > fileList.length && /* @__PURE__ */ React.createElement(
       "input",
       {
         className: "nut-uploader-input",
@@ -19093,7 +19105,7 @@ Please add \`${key}Action\` when creating your handler.`);
           children
         }
       }
-    ), maxCount > fileList.length && previewType === "picture" && !children && /* @__PURE__ */ React.createElement(
+    ), Number(maxCount) > fileList.length && previewType === "picture" && !children && /* @__PURE__ */ React.createElement(
       "div",
       {
         className: classNames("nut-uploader-upload", previewType, {
@@ -19278,7 +19290,7 @@ Please add \`${key}Action\` when creating your handler.`);
       const ret = _onConfirm == null ? void 0 : _onConfirm();
       if (ret && ret.then) {
         renderFunction(dialogConfig);
-        ret.then(
+        return ret.then(
           () => {
             onCancel(true);
           },
@@ -19479,6 +19491,7 @@ Please add \`${key}Action\` when creating your handler.`);
       ...restProps
     } = props;
     const classPrefix2 = "nut-dialog";
+    const [loading, setLoading] = React.useState(false);
     const renderFooter = () => {
       if (footer === null)
         return "";
@@ -19491,10 +19504,16 @@ Please add \`${key}Action\` when creating your handler.`);
         onClose == null ? void 0 : onClose();
         onCancel == null ? void 0 : onCancel();
       };
-      const handleOk = (e2) => {
+      const handleOk = async (e2) => {
         e2.stopPropagation();
-        onClose == null ? void 0 : onClose();
-        onConfirm == null ? void 0 : onConfirm(e2);
+        setLoading(true);
+        try {
+          await (onConfirm == null ? void 0 : onConfirm(e2));
+          setLoading(false);
+          onClose == null ? void 0 : onClose();
+        } catch {
+          setLoading(false);
+        }
       };
       return footer || /* @__PURE__ */ React.createElement(React.Fragment, null, !hideCancelButton && /* @__PURE__ */ React.createElement(
         Button,
@@ -19512,7 +19531,8 @@ Please add \`${key}Action\` when creating your handler.`);
             disabled: disableConfirmButton
           }),
           disabled: disableConfirmButton,
-          onClick: (e2) => handleOk(e2)
+          onClick: (e2) => handleOk(e2),
+          loading
         },
         confirmText || locale.confirm
       ));
@@ -19917,6 +19937,7 @@ Please add \`${key}Action\` when creating your handler.`);
   Loading.displayName = "NutLoading";
   const defaultProps$z = {
     ...ComponentDefaults,
+    align: "left",
     direction: "horizontal",
     list: [],
     duration: 1e3,
@@ -19931,10 +19952,12 @@ Please add \`${key}Action\` when creating your handler.`);
     speed: 50
   };
   const NoticeBar = (props) => {
+    const rtl = useRtl();
     const {
       children,
       className,
       style,
+      align,
       direction,
       list,
       duration,
@@ -20039,7 +20062,7 @@ Please add \`${key}Action\` when creating your handler.`);
         }
         const wrapW = getRect(wrapRef.current).width;
         const offsetW = getRect(contentRef.current).width;
-        const canScroll = scrollable == null ? offsetW > wrapW : scrollable;
+        const canScroll = align === "left" && scrollable == null ? offsetW > wrapW : scrollable;
         SetIsCanScroll(canScroll);
         if (canScroll) {
           SetWrapWidth(wrapW);
@@ -20089,7 +20112,7 @@ Please add \`${key}Action\` when creating your handler.`);
       onClose && onClose(event);
     };
     const isEllipsis = () => {
-      if (isCanScroll == null) {
+      if (isCanScroll == null && align === "left") {
         return wrap;
       }
       return !isCanScroll && !wrap;
@@ -20097,7 +20120,7 @@ Please add \`${key}Action\` when creating your handler.`);
     const contentStyle = {
       animationDelay: `${firstRound ? delay : 0}s`,
       animationDuration: `${animationDuration}s`,
-      transform: `translateX(${firstRound ? 0 : `${wrapWidth}px`})`
+      transform: `translateX(${firstRound ? 0 : `${rtl ? -wrapWidth : wrapWidth}px`})`
     };
     const barStyle = {
       height: isVertical ? `${height}px` : ""
@@ -20239,15 +20262,17 @@ Please add \`${key}Action\` when creating your handler.`);
       }
     };
     const noticebarClass = classNames({
-      "nut-noticebar-box": true,
-      [`nut-noticebar-box-wrapable`]: wrap
+      [`${classPrefix2}-box`]: true,
+      [`${classPrefix2}-box-wrapable`]: wrap,
+      [`${classPrefix2}-box-${align}`]: true
     });
+    const cls = classNames(classPrefix2, className);
     React.useEffect(() => {
       return () => {
         stopAutoPlay();
       };
     }, []);
-    return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2} ${className || ""}`, style }, showNoticeBar && direction === "horizontal" ? /* @__PURE__ */ React.createElement("div", { className: noticebarClass, style: barStyle, onClick: handleClick2 }, leftIcon ? /* @__PURE__ */ React.createElement("div", { className: "nut-noticebar-box-left-icon" }, leftIcon) : null, /* @__PURE__ */ React.createElement("div", { ref: wrapRef, className: "nut-noticebar-box-wrap" }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement("div", { className: cls, style }, showNoticeBar && direction === "horizontal" ? /* @__PURE__ */ React.createElement("div", { className: noticebarClass, style: barStyle, onClick: handleClick2 }, leftIcon ? /* @__PURE__ */ React.createElement("div", { className: "nut-noticebar-box-left-icon" }, leftIcon) : null, /* @__PURE__ */ React.createElement("div", { ref: wrapRef, className: "nut-noticebar-box-wrap" }, /* @__PURE__ */ React.createElement(
       "div",
       {
         ref: contentRef,
@@ -20481,6 +20506,7 @@ Please add \`${key}Action\` when creating your handler.`);
   const defaultProps$y = {
     ...ComponentDefaults,
     list: [],
+    theme: "light",
     location: "bottom",
     visible: false,
     offset: [0, 12],
@@ -20502,6 +20528,7 @@ Please add \`${key}Action\` when creating your handler.`);
     const {
       children,
       list,
+      theme,
       location,
       visible,
       offset,
@@ -20585,7 +20612,8 @@ Please add \`${key}Action\` when creating your handler.`);
     };
     const classes = classNames(
       {
-        [`${classPrefix$b}`]: true
+        [`${classPrefix$b}`]: true,
+        [`${classPrefix$b}-${theme}`]: theme === "dark"
       },
       className
     );
@@ -22267,7 +22295,7 @@ Please add \`${key}Action\` when creating your handler.`);
       if (!timeStr)
         return Date.now();
       let t2 = timeStr;
-      t2 = t2 > 0 ? +t2 : t2.toString().replace(/-/g, "/");
+      t2 = Number(t2) > 0 ? +t2 : t2.toString().replace(/-/g, "/");
       return new Date(t2).getTime();
     };
     const initTime = () => {
@@ -22823,7 +22851,7 @@ Please add \`${key}Action\` when creating your handler.`);
       swiperRef.current.autoplayTimer = null;
     };
     const startPlay = () => {
-      if (mergedProps.autoPlay <= 0 || swiperItemCount <= 1)
+      if (Number(mergedProps.autoPlay) <= 0 || swiperItemCount <= 1)
         return;
       stopAutoPlay();
       swiperRef.current.autoplayTimer = setTimeout(() => {
@@ -23664,7 +23692,7 @@ Please add \`${key}Action\` when creating your handler.`);
   };
   Steps.defaultProps = defaultProps$b;
   Steps.displayName = "NutSteps";
-  function useTableSticky(columns) {
+  function useTableSticky(columns, rtl = false) {
     const [isSticky, setIsSticky] = React.useState(false);
     const [stickyColumnStyleMap, setStickyColumnStyleMap] = React.useState({});
     const [stickyColumnClassMap, setStickyColumnClassMap] = React.useState({});
@@ -23679,9 +23707,9 @@ Please add \`${key}Action\` when creating your handler.`);
       let _stickyLeftWidth = 0;
       let _stickyRightWidth = 0;
       leftColumns.forEach((curr, index) => {
-        leftColumns[index - 1] || {};
+        const dir = rtl ? "right" : "left";
         _columnStyleMap[curr.key] = {
-          left: _stickyLeftWidth || 0,
+          [dir]: _stickyLeftWidth || 0,
           width: curr.width || "auto"
         };
         _columnClassMap[curr.key] = {
@@ -23697,9 +23725,9 @@ Please add \`${key}Action\` when creating your handler.`);
       });
       for (let i = rightColumns.length - 1; i >= 0; i--) {
         const curr = rightColumns[i];
-        rightColumns[i + 1] || {};
+        const dir = rtl ? "left" : "right";
         _columnStyleMap[curr.key] = {
-          right: _stickyRightWidth || 0,
+          [dir]: _stickyRightWidth || 0,
           width: curr.width || "auto"
         };
         _columnClassMap[curr.key] = {
@@ -23746,6 +23774,7 @@ Please add \`${key}Action\` when creating your handler.`);
   };
   const Table = (props) => {
     const { locale } = useConfig();
+    const rtl = useRtl();
     defaultProps$a.noData = locale.noData;
     const {
       children,
@@ -23776,7 +23805,7 @@ Please add \`${key}Action\` when creating your handler.`);
       stickyRightWidth,
       getStickyClass,
       getStickyStyle
-    } = useTableSticky(columns);
+    } = useTableSticky(columns, rtl);
     React.useEffect(() => {
       setValue(data);
     }, [data]);

package/dist/packages/animatingnumbers/countup.scss

@@ -3,6 +3,7 @@
     display: inline-flex;
     height: $countup-height;
     overflow: hidden;
+    direction: ltr;
   }
 
   &-listitem {

package/dist/packages/badge/badge.scss

@@ -38,6 +38,8 @@
     border: $badge-border;
     border-radius: $badge-border-radius;
     min-width: $badge-min-width;
+    white-space: nowrap;
+    z-index: 1;
   }
 
   &-one {

package/dist/packages/checkbox/checkbox.scss

@@ -118,6 +118,23 @@
     color: $white;
     border: 1px solid $color-text-disabled;
   }
+
+  &-list-item {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: $checkbox-list-item-padding;
+    border-top: $checkbox-list-item-border;
+
+    .nut-checkbox-label {
+      flex: auto;
+    }
+
+    .nut-icon {
+      flex: none;
+    }
+  }
 }
 
 [dir='rtl'] .nut-checkbox,
@@ -140,11 +157,13 @@
       left: 0;
       border-right: 10px solid transparent;
       border-left: 10px solid $color-primary;
+
       &-checked {
         left: auto;
         right: 50%;
         transform: translate(3px, -3px);
       }
+
       .nut-icon {
         &:before {
           margin-left: 0;

package/dist/packages/checkboxgroup/checkboxgroup.scss

@@ -8,6 +8,7 @@
   &-vertical {
     .nut-checkbox {
       margin-bottom: 5px;
+
       &.nut-checkbox-reverse {
         width: 100%;
         justify-content: space-between;
@@ -31,7 +32,31 @@
       }
     }
   }
+
+  &-list {
+    width: 100%;
+    border-bottom: $checkbox-list-item-border;
+    border-top: $checkbox-list-item-border;
+    padding: $checkbox-list-padding;
+    background: $checkbox-list-background-color;
+
+    .nut-checkbox {
+      margin-bottom: 5px;
+
+      &:first-child {
+        .nut-checkbox-list-item {
+          border-top: none;
+        }
+      }
+
+      &.nut-checkbox-reverse {
+        width: 100%;
+        justify-content: space-between;
+      }
+    }
+  }
 }
+
 [dir='rtl'] .nut-checkboxgroup,
 .nut-rtl .nut-checkboxgroup {
   .nut-checkbox {

package/dist/packages/collapseitem/collapseitem.scss

@@ -62,7 +62,7 @@
 
   &-icon-box {
     display: flex;
-    padding-right: 40px;
+    width: 24px;
     position: relative;
     color: $color-text;
   }
@@ -107,11 +107,6 @@
 }
 [dir='rtl'] .nut-collapse-item,
 .nut-rtl .nut-collapse-item {
-  &-icon-box {
-    padding-right: 0;
-    padding-left: 40px;
-  }
-
   &-icon {
     left: auto;
     right: 5px;

package/dist/packages/dialog/dialog.scss

@@ -17,7 +17,6 @@
   &-outer {
     position: fixed;
     max-height: 100%;
-    overflow-y: auto;
     background-color: $white;
     transition:
       transform 0.2s,
@@ -52,6 +51,13 @@
       left: $dialog-close-left;
     }
 
+    &-bottom {
+      top: initial;
+      bottom: -56px;
+      left: 50%;
+      transform: translate(-50%);
+    }
+
     &:active {
       opacity: 0.7;
     }
@@ -77,6 +83,7 @@
     word-break: break-all;
     white-space: pre-wrap;
     text-align: $dialog-content-text-align;
+    overflow-y: auto;
   }
 
   &-footer {

package/dist/packages/noticebar/noticebar.scss

@@ -12,13 +12,18 @@
     color: $noticebar-color;
     border-radius: $noticebar-border-radius;
 
-    &-wrapable {
+    &-wrapable,
+    &-center {
       height: auto;
       padding: $noticebar-wrap-padding;
 
       .nut-noticebar-box-wrap {
         height: auto;
+      }
+    }
 
+    &-wrapable {
+      .nut-noticebar-box-wrap {
         .nut-noticebar-box-wrap-content {
           position: relative;
           white-space: normal;
@@ -27,6 +32,19 @@
       }
     }
 
+    &-center {
+      justify-content: center;
+
+      .nut-noticebar-box-wrap {
+        flex: initial;
+
+        .nut-noticebar-box-wrap-content {
+          position: relative;
+          display: initial;
+        }
+      }
+    }
+
     &-left-icon {
       display: flex;
       height: $noticebar-left-icon-width;

package/dist/packages/popover/popover.scss

@@ -218,6 +218,27 @@
   }
 }
 
+.nut-popover-dark {
+  background: $popover-text-color;
+  color: $popover-content-background-color;
+
+  .nut-popover-arrow {
+    border-bottom-color: $popover-text-color;
+  }
+
+  .nut-popover-content {
+    background: $popover-text-color !important;
+    color: $popover-content-background-color !important;
+    .nut-popover-menu-item {
+      border-bottom-color: $popover-content-background-color;
+      &:hover {
+        color: $popover-content-background-color;
+        background-color: $popover-text-color;
+      }
+    }
+  }
+}
+
 [dir='rtl'] .nut-popover,
 .nut-rtl .nut-popover {
   &-arrow {

package/dist/packages/swipe/swipe.scss

@@ -5,6 +5,7 @@
   background-color: $white;
 
   &-wrapper {
+    height: inherit;
     transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1);
     transition-property: transform;
 
@@ -14,6 +15,7 @@
 
     .nut-cell {
       margin: 0;
+      height: 100%;
     }
   }