@nutui/nutui-react 2.4.0 → 2.4.2

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.4.0 Fri Mar 08 2024 14:22:38 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.4.2 Wed Mar 20 2024 19:59:52 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -1182,15 +1182,15 @@ Check the top-level render call using <` + t2 + ">.");
       const getStyle = React.useCallback(() => {
         const style2 = {};
         if (props.color) {
-          if (props.fill && (props.fill === "outline" || props.fill === "dashed")) {
+          if (props.fill === "outline" || props.fill === "dashed") {
             style2.color = color;
-            style2.background = "#fff";
             if (!(color == null ? void 0 : color.includes("gradient"))) {
               style2.borderColor = color;
             }
           } else {
             style2.color = "#fff";
             style2.background = color;
+            style2.borderColor = "transparent";
           }
         }
         return style2;
@@ -1215,7 +1215,7 @@ Check the top-level render call using <` + t2 + ">.");
               [`${prefixCls$2}-${size}`]: size,
               [`${prefixCls$2}-${shape}`]: shape,
               [`${prefixCls$2}-block`]: block,
-              [`${prefixCls$2}-disabled`]: disabled,
+              [`${prefixCls$2}-disabled`]: disabled || loading,
               [`${prefixCls$2}-loading`]: loading
             },
             className
@@ -4892,13 +4892,13 @@ Check the top-level render call using <` + t2 + ">.");
       return className2;
     };
     const getClasses = () => {
-      return `
-    ${getClass("", type2)}
-    ${getClass("justify", justify)}
-    ${getClass("align", align)}
-    ${getClass("flex", wrap)}
-    ${classPrefix$m}
-   `;
+      return classNames(
+        classPrefix$m,
+        getClass("", type2),
+        getClass("justify", justify),
+        getClass("align", align),
+        getClass("flex", wrap)
+      );
     };
     const parentRow = {
       gutter
@@ -5148,6 +5148,7 @@ Check the top-level render call using <` + t2 + ">.");
     duration: 1e3
   };
   const BackTop = (props) => {
+    const rtl = useRtl();
     const {
       children,
       target,
@@ -5233,7 +5234,7 @@ Check the top-level render call using <` + t2 + ">.");
       zIndex,
       ...style
     } : {
-      right: "10px",
+      [rtl ? "left" : "right"]: "10px",
       bottom: "20px",
       zIndex
     };
@@ -11131,19 +11132,33 @@ Please add \`${key}Action\` when creating your handler.`);
     max: 99,
     top: "4",
     right: "8",
-    color: ""
+    color: "",
+    fill: "solid"
   };
   const Badge = (props) => {
     var _a;
     const rtl = useRtl();
-    const { className, style, value, max, children, dot, top, right, color } = {
+    const {
+      className,
+      style,
+      value,
+      max,
+      children,
+      dot,
+      top,
+      right,
+      color,
+      fill
+    } = {
       ...defaultProps$1b,
       ...props
     };
     const classPrefix2 = "nut-badge";
-    const classes = classNames(classPrefix2, className);
+    const classes = classNames(classPrefix2, className, {
+      [`${classPrefix2}-${fill}`]: fill === "outline"
+    });
     function content() {
-      if (dot || typeof value === "object")
+      if (dot || typeof value === "object" || value === 0)
         return null;
       if (typeof value === "number" && typeof max === "number") {
         return max < value ? `${max}+` : `${value}`;
@@ -11175,7 +11190,18 @@ Please add \`${key}Action\` when creating your handler.`);
       style2.top = `${Number(top) || parseFloat(String(top)) || 0}px`;
       const dir = rtl ? "left" : "right";
       style2[dir] = `${Number(right) || parseFloat(String(right)) || 0}px`;
-      style2.background = color;
+      if (color) {
+        if (fill === "outline") {
+          style2.color = color;
+          style2.background = "#fff";
+          if (!(color == null ? void 0 : color.includes("gradient"))) {
+            style2.border = `1px solid ${color}`;
+          }
+        } else {
+          style2.color = "#fff";
+          style2.background = color;
+        }
+      }
       return style2;
     };
     return /* @__PURE__ */ React.createElement("div", { className: classes, style }, isIcon() && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-icon` }, value), children, !isIcon() && /* @__PURE__ */ React.createElement("div", { className: contentClasses, style: getStyle() }, content()));
@@ -11346,6 +11372,7 @@ Please add \`${key}Action\` when creating your handler.`);
   };
   const classPrefix$j = "nut-tabs";
   const Tabs = (props) => {
+    const rtl = useRtl();
     const {
       activeColor,
       tabStyle,
@@ -11452,9 +11479,10 @@ Please add \`${key}Action\` when creating your handler.`);
       background: activeType === "line" ? activeColor : ""
     };
     React.useEffect(() => {
-      const index = titles.current.findIndex((t2) => t2.value == value);
+      let index = titles.current.findIndex((t2) => t2.value == value);
+      index = index < 0 ? 0 : index;
       setContentStyle({
-        transform: direction === "horizontal" ? `translate3d(-${index * 100}%, 0, 0)` : `translate3d( 0,-${index * 100}%, 0)`,
+        transform: direction === "horizontal" ? `translate3d(${rtl ? "" : "-"}${index * 100}%, 0, 0)` : `translate3d( 0,-${index * 100}%, 0)`,
         transitionDuration: `${duration}ms`
       });
       setTimeout(() => {
@@ -13404,14 +13432,11 @@ Please add \`${key}Action\` when creating your handler.`);
       }
       return range2 ? [convertDayToDate(range2)] : [];
     };
-    const [innerValue, setInnerValue] = React.useState(() => {
-      const val = value || defaultValue ? valueToRange(value || defaultValue) : [];
-      return val;
+    const [innerValue, setInnerValue] = usePropsValue({
+      value: value ? valueToRange(value) : void 0,
+      defaultValue: defaultValue ? valueToRange(defaultValue) : void 0,
+      finalValue: []
     });
-    React.useEffect(() => {
-      const val = value || defaultValue ? valueToRange(value || defaultValue) : [];
-      setInnerValue(val);
-    }, [value]);
     const change = (v) => {
       setInnerValue(v);
       if (type2 === "single") {
@@ -13604,7 +13629,7 @@ Please add \`${key}Action\` when creating your handler.`);
             change([day]);
           } else if (len === 1) {
             const t2 = compareDay(innerValue[0], day);
-            if (t2 === 0 || t2 === null || t2 === void 0) {
+            if (t2 === null || t2 === void 0) {
               change([]);
             } else if (t2 < 0) {
               change([innerValue[0], day]);
@@ -16790,11 +16815,13 @@ Please add \`${key}Action\` when creating your handler.`);
     const getParentOffset = () => {
       setTimeout(() => {
         const p = parent.menuRef.current;
-        const rect = p.getBoundingClientRect();
-        setPosition({
-          height: rect.height,
-          top: rect.top
-        });
+        if (p) {
+          const rect = p.getBoundingClientRect();
+          setPosition({
+            height: rect.height,
+            top: rect.top
+          });
+        }
       });
     };
     React.useEffect(() => {
@@ -19661,9 +19688,9 @@ Please add \`${key}Action\` when creating your handler.`);
   Drag.defaultProps = defaultProps$D;
   Drag.displayName = "NutDrag";
   const defaultStatus = {
-    empty: "https://static-ftcms.jd.com/p/files/61a9e3183985005b3958672b.png",
-    error: "https://ftcms.jd.com/p/files/61a9e33ee7dcdbcc0ce62736.png",
-    network: "https://static-ftcms.jd.com/p/files/61a9e31de7dcdbcc0ce62734.png"
+    empty: "https://storage.360buyimg.com/imgtools/30186cfda0-0d3eee40-c0ac-11ee-9382-9125782aa3b8.png",
+    error: "https://storage.360buyimg.com/imgtools/f3278d0ebb-0ce360c0-c0ac-11ee-8375-193101bb1a46.png",
+    network: "https://storage.360buyimg.com/imgtools/43c30f7e29-0d483d10-c0ac-11ee-bec4-eb4d2a09a51d.png"
   };
   const defaultProps$C = {
     ...ComponentDefaults,
@@ -19737,6 +19764,7 @@ Please add \`${key}Action\` when creating your handler.`);
   Empty.displayName = "NutEmpty";
   const defaultProps$B = {
     ...ComponentDefaults,
+    type: "default",
     hasMore: true,
     threshold: 200,
     target: "",
@@ -19748,6 +19776,7 @@ Please add \`${key}Action\` when creating your handler.`);
     const { locale } = useConfig();
     const {
       children,
+      type: type2,
       hasMore,
       threshold,
       target,
@@ -19774,7 +19803,7 @@ Please add \`${key}Action\` when creating your handler.`);
     const refreshMaxH = React.useRef(0);
     const y = React.useRef(0);
     const distance = React.useRef(0);
-    const classes = classNames(classPrefix$d, className);
+    const classes = classNames(classPrefix$d, className, `${classPrefix$d}-${type2}`);
     React.useEffect(() => {
       var _a;
       if (target && document.getElementById(target)) {
@@ -19947,6 +19976,7 @@ Please add \`${key}Action\` when creating your handler.`);
     wrap: false,
     leftIcon: /* @__PURE__ */ React.createElement(r, { width: 16, height: 16 }),
     rightIcon: null,
+    right: null,
     delay: 1,
     scrollable: null,
     speed: 50
@@ -19967,6 +19997,7 @@ Please add \`${key}Action\` when creating your handler.`);
       wrap,
       leftIcon,
       rightIcon,
+      right,
       delay,
       scrollable,
       speed,
@@ -20282,7 +20313,7 @@ Please add \`${key}Action\` when creating your handler.`);
       },
       children,
       content
-    )), closeable || rightIcon ? /* @__PURE__ */ React.createElement("div", { className: "nut-noticebar-box-right-icon", onClick: onClickIcon }, rightIcon || /* @__PURE__ */ React.createElement(r$2, { width: 12, height: 12 })) : null) : null, showNoticeBar && scrollList.current.length > 0 && isVertical ? /* @__PURE__ */ React.createElement(
+    )), right ? /* @__PURE__ */ React.createElement("div", { className: "nut-noticebar-box-right" }, right) : null, closeable || rightIcon ? /* @__PURE__ */ React.createElement("div", { className: "nut-noticebar-box-right-icon", onClick: onClickIcon }, rightIcon || /* @__PURE__ */ React.createElement(r$2, { width: 12, height: 12 })) : null) : null, showNoticeBar && scrollList.current.length > 0 && isVertical ? /* @__PURE__ */ React.createElement(
       "div",
       {
         className: "nut-noticebar-vertical",
@@ -20806,6 +20837,7 @@ Please add \`${key}Action\` when creating your handler.`);
   const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));
   const defaultProps$x = {
     ...ComponentDefaults,
+    type: "default",
     pullingText: "",
     canReleaseText: "",
     refreshingText: "",
@@ -20830,6 +20862,11 @@ Please add \`${key}Action\` when creating your handler.`);
         completeText: p.completeText || locale.pullToRefresh.completeText
       }
     };
+    const classes = classNames(
+      classPrefix2,
+      props.className,
+      `${classPrefix2}-${props.type}`
+    );
     const headHeight = props.headHeight;
     const threshold = props.threshold;
     const [status, setStatus] = React.useState("pulling");
@@ -20956,24 +20993,15 @@ Please add \`${key}Action\` when creating your handler.`);
         return props.completeText;
       return "";
     };
-    return /* @__PURE__ */ React.createElement(
-      animated.div,
+    return /* @__PURE__ */ React.createElement(animated.div, { ref: elementRef, className: classes, style: props.style }, /* @__PURE__ */ React.createElement(animated.div, { style: springStyles, className: `${classPrefix2}-head` }, /* @__PURE__ */ React.createElement(
+      "div",
       {
-        ref: elementRef,
-        className: `${classPrefix2} ${props.className}`,
-        style: props.style
+        className: `${classPrefix2}-head-content`,
+        style: { height: headHeight }
       },
-      /* @__PURE__ */ React.createElement(animated.div, { style: springStyles, className: `${classPrefix2}-head` }, /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: `${classPrefix2}-head-content`,
-          style: { height: headHeight }
-        },
-        /* @__PURE__ */ React.createElement("div", null, renderStatusIcon()),
-        /* @__PURE__ */ React.createElement("div", null, renderStatusText())
-      )),
-      /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-content` }, props.children)
-    );
+      /* @__PURE__ */ React.createElement("div", null, renderStatusIcon()),
+      /* @__PURE__ */ React.createElement("div", null, renderStatusText())
+    )), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-content` }, props.children));
   };
   PullToRefresh.defaultProps = defaultProps$x;
   PullToRefresh.displayName = "NutPullToRefresh";
@@ -22786,6 +22814,7 @@ Please add \`${key}Action\` when creating your handler.`);
     className: ""
   };
   const Swiper = React.forwardRef((props, ref) => {
+    const rtl = useRtl();
     const mergedProps = { ...defaultProps$h, ...props };
     const {
       children,
@@ -22996,7 +23025,7 @@ Please add \`${key}Action\` when creating your handler.`);
       target.style.transitionDuration = `${swiperRef.current.moving ? 0 : props.duration}ms`;
       target.style[isVertical ? "height" : "width"] = `${Number(size) * swiperItemCount}px`;
       target.style[isVertical ? "width" : "height"] = `${isVertical ? width : height}px`;
-      target.style.transform = `translate3D${!isVertical ? `(${_offset}px,0,0)` : `(0,${_offset}px,0)`}`;
+      target.style.transform = `translate3D${!isVertical ? `(${rtl ? -_offset : _offset}px,0,0)` : `(0,${_offset}px,0)`}`;
     };
     const onTouchStart = (e2) => {
       if (!props.touchable)
@@ -23055,7 +23084,7 @@ Please add \`${key}Action\` when creating your handler.`);
       }
       const offset2 = childOffset[index];
       if (offset2) {
-        style.transform = `translate3D${direction === "horizontal" ? `(${offset2}px,0,0)` : `(0,${offset2}px,0)`}`;
+        style.transform = `translate3D${direction === "horizontal" ? `(${rtl ? -offset2 : offset2}px,0,0)` : `(0,${offset2}px,0)`}`;
       }
       return style;
     };

package/dist/packages/badge/badge.scss

@@ -59,6 +59,14 @@
     border-radius: $badge-dot-width;
     padding: 0;
   }
+
+  &-outline {
+    .nut-badge-content {
+      background: $color-primary-text;
+      border: 1px solid $color-primary;
+      color: $color-primary;
+    }
+  }
 }
 
 [dir='rtl'] .nut-badge,

package/dist/packages/button/button.scss

@@ -13,7 +13,7 @@
   font-weight: $button-default-font-weight;
   text-align: center;
   cursor: pointer;
-  transition: opacity 0.2s;
+  transition: $button-transition;
   -webkit-appearance: none;
   user-select: none;
   touch-action: manipulation;
@@ -59,6 +59,11 @@
     align-items: center;
     justify-content: center;
     background: initial;
+    .nut-icon {
+      font-size: $button-default-font-size;
+      width: $button-default-font-size;
+      height: $button-default-font-size;
+    }
   }
 
   &-loading,
@@ -78,7 +83,7 @@
     border: $button-border-width solid $button-default-border-color;
 
     &.nut-button-disabled {
-      color: $color-text-help;
+      color: $button-default-disabled-color;
       background: transparent;
     }
 
@@ -86,7 +91,7 @@
       background: transparent;
 
       &.nut-button-disabled {
-        color: $color-text-help;
+        color: $button-default-disabled-color;
       }
     }
 
@@ -95,7 +100,7 @@
       background: transparent;
 
       &.nut-button-disabled {
-        color: $color-text-help;
+        color: $button-default-disabled-color;
         border-color: $button-default-disabled;
       }
     }
@@ -105,22 +110,54 @@
     padding: $button-normal-padding;
   }
 
+  &-xlarge {
+    height: $button-xlarge-height;
+    padding: $button-xlarge-padding;
+    font-size: $button-xlarge-font-size;
+    font-weight: $button-large-font-weight;
+
+    .nut-icon {
+      font-size: $button-xlarge-font-size;
+      width: $button-xlarge-font-size;
+      height: $button-xlarge-font-size;
+    }
+  }
+
   &-large {
     height: $button-large-height;
     padding: $button-large-padding;
     font-size: $button-large-font-size;
+    font-weight: $button-large-font-weight;
+
+    .nut-icon {
+      font-size: $button-large-font-size;
+      width: $button-large-font-size;
+      height: $button-large-font-size;
+    }
   }
 
   &-small {
     height: $button-small-height;
     padding: $button-small-padding;
     font-size: $button-small-font-size;
+
+    .nut-icon {
+      font-size: $button-small-font-size;
+      width: $button-small-font-size;
+      height: $button-small-font-size;
+    }
   }
 
   &-mini {
     height: $button-mini-height;
     padding: $button-mini-padding;
     font-size: $button-mini-font-size;
+
+    .nut-icon {
+      font-size: $button-mini-font-size;
+      width: $button-mini-font-size;
+      height: $button-mini-font-size;
+    }
   }
 
   &-primary {
@@ -290,7 +327,7 @@
     border: $button-border-width solid transparent;
 
     &.nut-button-disabled {
-      color: #ffffff;
+      color: $button-default-disabled-color;
       background: $button-default-disabled;
     }
   }
@@ -308,7 +345,6 @@
 
   &-disabled {
     cursor: not-allowed;
-    font-weight: 400;
     color: #ffffff;
     background: $button-default-disabled;
     border-color: $button-default-disabled;
@@ -321,6 +357,19 @@
 
   &-round {
     border-radius: $button-border-radius;
+
+    &.nut-button-xlarge,
+    &.nut-button-large {
+      border-radius: $button-large-border-radius;
+    }
+
+    &.nut-button-small {
+      border-radius: $button-small-border-radius;
+    }
+
+    &.nut-button-mini {
+      border-radius: $button-mini-border-radius;
+    }
   }
 
   &-square {

package/dist/packages/calendarcard/calendarcard.scss

@@ -61,22 +61,28 @@
       line-height: 12px;
     }
 
-    &.active,
+    &.weekend {
+      color: $calendar-choose-color;
+    }
+
+    &.active {
+      background-color: $calendar-active-background-color;
+      color: $color-primary-text;
+      border-radius: $calendar-day-active-border-radius;
+    }
+
     &.start,
     &.end {
       background-color: $calendar-active-background-color;
-      color: $color-primary-text !important;
-      border-radius: $calendar-day-active-border-radius;
+      color: $color-primary-text;
     }
 
     &.start {
-      border-radius: 0px;
       border-top-left-radius: $calendar-day-active-border-radius;
       border-bottom-left-radius: $calendar-day-active-border-radius;
     }
 
     &.end {
-      border-radius: 0px;
       border-top-right-radius: $calendar-day-active-border-radius;
       border-bottom-right-radius: $calendar-day-active-border-radius;
     }
@@ -86,10 +92,6 @@
       color: $calendar-choose-color;
     }
 
-    &.weekend {
-      color: $calendar-choose-color;
-    }
-
     .nut-calendar-day-info {
       color: $color-primary-text;
     }
@@ -127,17 +129,17 @@
     }
   }
   &-day {
+    &.start,
+    &.end {
+      border-radius: 0;
+    }
     &.start {
-      border-top-left-radius: 0;
       border-top-right-radius: $calendar-day-active-border-radius;
-      border-bottom-left-radius: 0;
       border-bottom-right-radius: $calendar-day-active-border-radius;
     }
 
     &.end {
-      border-top-right-radius: 0;
       border-top-left-radius: $calendar-day-active-border-radius;
-      border-bottom-right-radius: 0;
       border-bottom-left-radius: $calendar-day-active-border-radius;
     }
   }

package/dist/packages/infiniteloading/infiniteloading.scss

@@ -47,6 +47,13 @@
       }
     }
   }
+  &-primary {
+    background-color: $color-primary;
+    .nut-infinite-bottom,
+    .nut-infinite-top {
+      color: $color-text-dark;
+    }
+  }
 }
 
 [dir='rtl'] .nut-infiniteloading,

package/dist/packages/noticebar/noticebar.scss

@@ -59,6 +59,11 @@
       justify-content: center;
       width: $noticebar-right-icon-width;
       margin-left: $noticebar-icon-gap;
+
+      .nut-icon {
+        width: 12px;
+        height: 12px;
+      }
     }
 
     &-wrap {

package/dist/packages/pulltorefresh/pulltorefresh.scss

@@ -22,6 +22,19 @@
       }
     }
   }
+
+  &-primary {
+    background: $pulltorefresh-color-primary;
+    .nut-pulltorefresh-content {
+      color: $color-text-dark;
+    }
+
+    .nut-pulltorefresh-head {
+      &-content {
+        color: $color-text-dark;
+      }
+    }
+  }
 }
 
 [dir='rtl'] .nut-pulltorefresh,