@nutui/nutui-react-taro 3.0.0-beta.7 → 3.0.0-beta.8

package/dist/nutui.react.umd.js

@@ -4581,32 +4581,113 @@
     });
   };
   SafeArea.displayName = "NutSafeArea";
+  var getIcon = function(icon) {
+    return React.isValidElement(icon) ? React.cloneElement(icon, {
+      // @ts-ignore
+      className: "nut-icon"
+    }) : icon;
+  };
   var defaultProps$1n = _object_spread_props(_object_spread({}, ComponentDefaults), {
+    icon: null,
+    onClick: function(value) {
+    }
+  });
+  var classPrefix$n = "nut-hoverbutton-item";
+  var isHarmony = harmony();
+  var isNative$1 = harmonyAndRn();
+  var HoverButtonItem = function(props) {
+    var _$_object_spread = _object_spread({}, defaultProps$1n, props), className = _$_object_spread.className, style = _$_object_spread.style, icon = _$_object_spread.icon, onClick = _$_object_spread.onClick, children = _$_object_spread.children;
+    var _useState = _sliced_to_array(React.useState(false), 2), isTouchStart = _useState[0], setTouchStart = _useState[1];
+    React.useMemo(function() {
+      return isNative$1 ? {
+        color: isTouchStart ? "#595959" : "#1A1A1A"
+      } : {};
+    }, [
+      isTouchStart
+    ]);
+    var handleClick = function(event) {
+      onClick && onClick(event);
+    };
+    var handleActiveStart = function(event) {
+      isNative$1 && setTouchStart(true);
+    };
+    var handleActiveEnd = function(event) {
+      isNative$1 && setTouchStart(false);
+    };
+    var renderBody = function() {
+      if (icon && !children) return /* @__PURE__ */ React.createElement(components.View, {
+        className: "".concat(classPrefix$n, "-icon")
+      }, getIcon(icon));
+      if (icon && children) {
+        return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(components.View, {
+          className: classNames(_define_property({}, "".concat(classPrefix$n, "-text-icon"), true))
+        }), getIcon(icon), /* @__PURE__ */ React.createElement(components.View, {
+          className: classNames(_define_property({}, "".concat(classPrefix$n, "-text"), true))
+        }, children));
+      }
+    };
+    var _obj;
+    return /* @__PURE__ */ React.createElement(components.View, {
+      className: classNames([
+        "".concat(classPrefix$n, "-container"),
+        className
+      ], (_obj = {}, _define_property(_obj, "".concat(classPrefix$n, "-container-active"), isNative$1 && isTouchStart), _define_property(_obj, "".concat(classPrefix$n, "-container-harmony"), isHarmony), _define_property(_obj, "".concat(classPrefix$n, "-container-icontext"), icon && children), _obj)),
+      style,
+      onTouchStart: handleActiveStart,
+      onTouchEnd: handleActiveEnd,
+      onTouchCancel: handleActiveEnd,
+      onClick: handleClick
+    }, renderBody());
+  };
+  HoverButtonItem.displayName = "NutHoverButtonItem";
+  var UI_BOTTOM_DISTANCE = 60;
+  var defaultProps$1m = _object_spread({}, ComponentDefaults);
+  var classPrefix$m = "nut-hoverbutton";
+  var HoverButton = function(props) {
+    var _$_object_spread = _object_spread({}, defaultProps$1m, props), children = _$_object_spread.children, zIndex = _$_object_spread.zIndex, tabbarHeight = _$_object_spread.tabbarHeight, className = _$_object_spread.className, style = _$_object_spread.style, icon = _$_object_spread.icon, onClick = _$_object_spread.onClick;
+    var rtl = useRtl();
+    var baseStyle = _object_spread({}, style);
+    if (tabbarHeight) {
+      baseStyle.bottom = pxTransform(tabbarHeight + UI_BOTTOM_DISTANCE);
+    }
+    if (typeof zIndex !== "undefined") {
+      baseStyle.zIndex = zIndex;
+    }
+    var _obj;
+    return /* @__PURE__ */ React.createElement(components.View, {
+      className: classNames([
+        "".concat(classPrefix$m, "-container"),
+        className
+      ], (_obj = {}, _define_property(_obj, "".concat(classPrefix$m, "-container-rtl"), rtl), _define_property(_obj, "".concat(classPrefix$m, "-container-rn"), Taro.getEnv() === "RN"), _obj)),
+      style: baseStyle
+    }, /* @__PURE__ */ React.createElement(components.View, {
+      className: classPrefix$m
+    }, children || icon && /* @__PURE__ */ React.createElement(HoverButtonItem, {
+      icon,
+      onClick
+    })), /* @__PURE__ */ React.createElement(SafeArea, {
+      position: "bottom"
+    }));
+  };
+  HoverButton.displayName = "NutHoverButton";
+  HoverButton.Item = HoverButtonItem;
+  var defaultProps$1l = _object_spread_props(_object_spread({}, ComponentDefaults), {
     threshold: 200,
     zIndex: 900,
     duration: 1e3
   });
-  var isNative$2 = harmonyAndRn();
   var BackTop = function(props) {
-    var rtl = useRtl();
-    var _$_object_spread = _object_spread({}, defaultProps$1n, props), children = _$_object_spread.children, threshold = _$_object_spread.threshold, zIndex = _$_object_spread.zIndex, className = _$_object_spread.className, duration = _$_object_spread.duration, style = _$_object_spread.style, scrollRes = _$_object_spread.scrollRes, onClick = _$_object_spread.onClick;
+    var _$_object_spread = _object_spread({}, defaultProps$1l, props), children = _$_object_spread.children, threshold = _$_object_spread.threshold, zIndex = _$_object_spread.zIndex, className = _$_object_spread.className, duration = _$_object_spread.duration, icon = _$_object_spread.icon, style = _$_object_spread.style, scrollRes = _$_object_spread.scrollRes, onClick = _$_object_spread.onClick;
     var classPrefix2 = "nut-backtop";
     var _useState = _sliced_to_array(React.useState(false), 2), backTop = _useState[0], setBackTop = _useState[1];
-    var _useState1 = _sliced_to_array(React.useState(false), 2), isTouchStart = _useState1[0], setTouchStart = _useState1[1];
     var _obj;
-    var cls = classNames(classPrefix2, (_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-show"), backTop), _define_property(_obj, "".concat(classPrefix2, "-show-active"), isNative$2 && isTouchStart), _define_property(_obj, "".concat(classPrefix2, "-rn"), rn()), _obj), className);
+    var cls = classNames(classPrefix2, (_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-show"), backTop), _define_property(_obj, "".concat(classPrefix2, "-rn"), rn()), _obj), className);
     var systemInfo = React.useRef({});
     React.useEffect(function() {
       Taro.getSystemInfo().then(function(res) {
         systemInfo.current = res;
       });
     }, []);
-    var handleActiveStart = React.useCallback(function() {
-      isNative$2 && setTouchStart(true);
-    }, []);
-    var handleActiveEnd = React.useCallback(function() {
-      isNative$2 && setTouchStart(false);
-    }, []);
     var onScroll = React.useCallback(function(res) {
       var scrollTop = res.scrollTop;
       setBackTop(scrollTop >= threshold);
@@ -4631,29 +4712,21 @@
       duration,
       onClick
     ]);
-    var styles = React.useMemo(function() {
-      var _obj2;
-      return Object.keys(style || {}).length !== 0 ? _object_spread({
-        zIndex
-      }, style) : (_obj2 = {}, _define_property(_obj2, rtl ? "left" : "right", pxTransform(10)), _define_property(_obj2, "bottom", pxTransform(20)), _define_property(_obj2, "zIndex", zIndex), _obj2);
-    }, [
-      rtl,
-      style,
-      zIndex
-    ]);
-    return /* @__PURE__ */ React.createElement(components.View, {
+    return /* @__PURE__ */ React.createElement(HoverButton, {
       className: cls,
-      style: styles,
+      style: _object_spread({
+        zIndex
+      }, style),
+      icon: !children && (icon || /* @__PURE__ */ React.createElement(c, null)),
       onClick: function(e2) {
         goTop(e2);
-      },
-      onTouchStart: handleActiveStart,
-      onTouchEnd: handleActiveEnd,
-      onTouchCancel: handleActiveEnd
-    }, children || /* @__PURE__ */ React.createElement(c, {
-      size: 19,
-      className: "nut-backtop-main"
-    }));
+      }
+    }, children && /* @__PURE__ */ React.createElement(components.View, {
+      className: "nut-hoverbutton-item-container",
+      onClick: function(e2) {
+        goTop(e2);
+      }
+    }, children));
   };
   BackTop.displayName = "NutBackTop";
   function _array_without_holes(arr) {
@@ -4687,7 +4760,7 @@
     return idRef.current;
   }
   var elevatorContext = /* @__PURE__ */ React.createContext({});
-  var defaultProps$1m = _object_spread_props(_object_spread({}, ComponentDefaults), {
+  var defaultProps$1k = _object_spread_props(_object_spread({}, ComponentDefaults), {
     height: "200px",
     floorKey: "title",
     list: [],
@@ -4698,7 +4771,7 @@
     className: "weapp-elevator"
   });
   var Elevator = function(props) {
-    var _ref = _object_spread({}, defaultProps$1m, props), height = _ref.height, floorKey = _ref.floorKey, list = _ref.list, sticky = _ref.sticky, spaceHeight = _ref.spaceHeight;
+    var _ref = _object_spread({}, defaultProps$1k, props), height = _ref.height, floorKey = _ref.floorKey, list = _ref.list, sticky = _ref.sticky, spaceHeight = _ref.spaceHeight;
     _ref.titleHeight;
     var showKeys = _ref.showKeys, className = _ref.className, style = _ref.style, onItemClick = _ref.onItemClick, onIndexClick = _ref.onIndexClick, children = _ref.children, rest = _object_without_properties(_ref, [
       "height",
@@ -4923,7 +4996,7 @@
   };
   Elevator.displayName = "NutElevator";
   Elevator.Context = elevatorContext;
-  var defaultProps$1l = _object_spread_props(_object_spread({}, ComponentDefaults), {
+  var defaultProps$1j = _object_spread_props(_object_spread({}, ComponentDefaults), {
     activeText: "",
     inactiveText: "",
     type: "right",
@@ -4934,7 +5007,7 @@
   });
   var FixedNav = function(props) {
     var locale = useConfig().locale;
-    var _ref = _object_spread({}, defaultProps$1l, props), className = _ref.className, overlay = _ref.overlay, visible = _ref.visible, list = _ref.list, activeText = _ref.activeText, inactiveText = _ref.inactiveText, position = _ref.position, onChange = _ref.onChange, onSelect = _ref.onSelect, type2 = _ref.type, children = _ref.children, style = _ref.style, content = _ref.content, rest = _object_without_properties(_ref, [
+    var _ref = _object_spread({}, defaultProps$1j, props), className = _ref.className, overlay = _ref.overlay, visible = _ref.visible, list = _ref.list, activeText = _ref.activeText, inactiveText = _ref.inactiveText, position = _ref.position, onChange = _ref.onChange, onSelect = _ref.onSelect, type2 = _ref.type, children = _ref.children, style = _ref.style, content = _ref.content, rest = _object_without_properties(_ref, [
       "className",
       "overlay",
       "visible",
@@ -5002,96 +5075,6 @@
     }, visible ? activeText || locale.fixednav.activeText : inactiveText || locale.fixednav.inactiveText))));
   };
   FixedNav.displayName = "NutFixedNav";
-  var getIcon = function(icon) {
-    return React.isValidElement(icon) ? React.cloneElement(icon, {
-      // @ts-ignore
-      className: "nut-icon"
-    }) : icon;
-  };
-  var defaultProps$1k = _object_spread_props(_object_spread({}, ComponentDefaults), {
-    icon: null,
-    onClick: function(value) {
-    }
-  });
-  var classPrefix$n = "nut-hoverbutton-item";
-  var isHarmony = harmony();
-  var isNative$1 = harmonyAndRn();
-  var HoverButtonItem = function(props) {
-    var _$_object_spread = _object_spread({}, defaultProps$1k, props), className = _$_object_spread.className, style = _$_object_spread.style, icon = _$_object_spread.icon, onClick = _$_object_spread.onClick, children = _$_object_spread.children;
-    var _useState = _sliced_to_array(React.useState(false), 2), isTouchStart = _useState[0], setTouchStart = _useState[1];
-    React.useMemo(function() {
-      return isNative$1 ? {
-        color: isTouchStart ? "#595959" : "#1A1A1A"
-      } : {};
-    }, [
-      isTouchStart
-    ]);
-    var handleClick = function(event) {
-      onClick && onClick(event);
-    };
-    var handleActiveStart = function(event) {
-      isNative$1 && setTouchStart(true);
-    };
-    var handleActiveEnd = function(event) {
-      isNative$1 && setTouchStart(false);
-    };
-    var renderBody = function() {
-      if (icon && !children) return /* @__PURE__ */ React.createElement(components.View, {
-        className: "".concat(classPrefix$n, "-icon")
-      }, getIcon(icon));
-      if (icon && children) {
-        return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(components.View, {
-          className: classNames(_define_property({}, "".concat(classPrefix$n, "-text-icon"), true))
-        }), getIcon(icon), /* @__PURE__ */ React.createElement(components.View, {
-          className: classNames(_define_property({}, "".concat(classPrefix$n, "-text"), true))
-        }, children));
-      }
-    };
-    var _obj;
-    return /* @__PURE__ */ React.createElement(components.View, {
-      className: classNames([
-        "".concat(classPrefix$n, "-container"),
-        className
-      ], (_obj = {}, _define_property(_obj, "".concat(classPrefix$n, "-container-active"), isNative$1 && isTouchStart), _define_property(_obj, "".concat(classPrefix$n, "-container-harmony"), isHarmony), _define_property(_obj, "".concat(classPrefix$n, "-container-icontext"), icon && children), _obj)),
-      style,
-      onTouchStart: handleActiveStart,
-      onTouchEnd: handleActiveEnd,
-      onTouchCancel: handleActiveEnd,
-      onClick: handleClick
-    }, renderBody());
-  };
-  HoverButtonItem.displayName = "NutHoverButtonItem";
-  var UI_BOTTOM_DISTANCE = 60;
-  var defaultProps$1j = _object_spread({}, ComponentDefaults);
-  var classPrefix$m = "nut-hoverbutton";
-  var HoverButton = function(props) {
-    var _$_object_spread = _object_spread({}, defaultProps$1j, props), children = _$_object_spread.children, zIndex = _$_object_spread.zIndex, tabbarHeight = _$_object_spread.tabbarHeight, className = _$_object_spread.className, style = _$_object_spread.style, icon = _$_object_spread.icon, onClick = _$_object_spread.onClick;
-    var rtl = useRtl();
-    var baseStyle = _object_spread({}, style);
-    if (tabbarHeight) {
-      baseStyle.bottom = pxTransform(tabbarHeight + UI_BOTTOM_DISTANCE);
-    }
-    if (typeof zIndex !== "undefined") {
-      baseStyle.zIndex = zIndex;
-    }
-    var _obj;
-    return /* @__PURE__ */ React.createElement(components.View, {
-      className: classNames([
-        "".concat(classPrefix$m, "-container"),
-        className
-      ], (_obj = {}, _define_property(_obj, "".concat(classPrefix$m, "-container-rtl"), rtl), _define_property(_obj, "".concat(classPrefix$m, "-container-rn"), Taro.getEnv() === "RN"), _obj)),
-      style: baseStyle
-    }, /* @__PURE__ */ React.createElement(components.View, {
-      className: classPrefix$m
-    }, children || icon && /* @__PURE__ */ React.createElement(HoverButtonItem, {
-      icon,
-      onClick
-    })), /* @__PURE__ */ React.createElement(SafeArea, {
-      position: "bottom"
-    }));
-  };
-  HoverButton.displayName = "NutHoverButton";
-  HoverButton.Item = HoverButtonItem;
   var defaultProps$1i = _object_spread_props(_object_spread({}, ComponentDefaults), {
     left: "",
     right: "",
@@ -5605,10 +5588,10 @@
     value: "",
     dot: false,
     max: 99,
-    top: "4",
-    right: "8",
-    color: "",
-    fill: "solid"
+    top: 0,
+    right: 0,
+    fill: "solid",
+    size: "large"
   });
   var Badge = function(props) {
     var content = function content2() {
@@ -5629,14 +5612,14 @@
     };
     var _this;
     var rtl = useRtl();
-    var _$_object_spread = _object_spread({}, defaultProps$1e, props), className = _$_object_spread.className, style = _$_object_spread.style, value = _$_object_spread.value, max = _$_object_spread.max, children = _$_object_spread.children, dot = _$_object_spread.dot, top = _$_object_spread.top, right2 = _$_object_spread.right, color = _$_object_spread.color, fill = _$_object_spread.fill;
+    var _$_object_spread = _object_spread({}, defaultProps$1e, props), className = _$_object_spread.className, style = _$_object_spread.style, value = _$_object_spread.value, max = _$_object_spread.max, children = _$_object_spread.children, dot = _$_object_spread.dot, top = _$_object_spread.top, right2 = _$_object_spread.right, fill = _$_object_spread.fill, size = _$_object_spread.size;
     var classPrefix2 = "nut-badge";
     var isHarmony2 = harmony();
     var classes = classNames(classPrefix2, className);
     var badgeRef = React.useRef(null);
     var _useState = _sliced_to_array(React.useState({}), 2), contentStyle = _useState[0], setContentStyle = _useState[1];
     var _obj;
-    var contentClasses = classNames("".concat(classPrefix2, "-content"), (_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-sup"), isNumber() || isString() || dot), _define_property(_obj, "".concat(classPrefix2, "-one"), typeof content() === "string" && ((_this = "".concat(content())) === null || _this === void 0 ? void 0 : _this.length) === 1), _define_property(_obj, "".concat(classPrefix2, "-dot"), dot), _define_property(_obj, "".concat(classPrefix2, "-").concat(fill), fill === "outline"), _obj));
+    var contentClasses = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-sup"), isNumber() || isString() || dot), _define_property(_obj, "".concat(classPrefix2, "-number"), isNumber()), _define_property(_obj, "".concat(classPrefix2, "-one"), typeof content() === "string" && ((_this = "".concat(content())) === null || _this === void 0 ? void 0 : _this.length) === 1), _define_property(_obj, "".concat(classPrefix2, "-dot"), dot), _define_property(_obj, "".concat(classPrefix2, "-dot-").concat(size), dot), _define_property(_obj, "".concat(classPrefix2, "-").concat(fill), fill === "outline"), _define_property(_obj, "".concat(classPrefix2, "-content"), children), _obj));
     React.useEffect(function() {
       if (badgeRef.current) {
         getPositionStyle();
@@ -5644,59 +5627,22 @@
     }, []);
     var getPositionStyle = /* @__PURE__ */ function() {
       var _ref = _async_to_generator(function() {
-        var style2, reacts, dir;
+        var style2, dir;
         return __generator(this, function(_state) {
-          switch (_state.label) {
-            case 0:
-              style2 = {};
-              style2.top = pxTransform(-Number(top) || 0);
-              if (!rn()) return [
-                3,
-                2
-              ];
-              return [
-                4,
-                getRectByTaro(badgeRef.current)
-              ];
-            case 1:
-              reacts = _state.sent();
-              style2.left = (reacts === null || reacts === void 0 ? void 0 : reacts.width) && (reacts === null || reacts === void 0 ? void 0 : reacts.width) > Number(right2) ? pxTransform(reacts.width - Number(right2)) : 0;
-              return [
-                3,
-                3
-              ];
-            case 2:
-              dir = rtl ? "left" : "right";
-              style2[dir] = isHarmony2 ? pxTransform(Number(right2)) : "".concat(Number(right2) || parseFloat(String(right2)) || 0, "px");
-              _state.label = 3;
-            case 3:
-              setContentStyle(style2);
-              return [
-                2
-              ];
-          }
+          style2 = {};
+          style2.top = pxTransform(Number(top) || 0);
+          dir = rtl ? "left" : "right";
+          style2[dir] = isHarmony2 ? pxTransform(Number(right2)) : "".concat(Number(right2) || 0, "px");
+          setContentStyle(style2);
+          return [
+            2
+          ];
         });
       });
       return function getPositionStyle2() {
         return _ref.apply(this, arguments);
       };
     }();
-    var getStyle = function() {
-      var style2 = {};
-      if (color) {
-        if (fill === "outline") {
-          style2.color = color;
-          isHarmony2 ? style2.backgroundColor = "#fff" : style2.background = "#fff";
-          if (!(color === null || color === void 0 ? void 0 : color.includes("gradient"))) {
-            style2.borderColor = color;
-          }
-        } else {
-          style2.color = "#fff";
-          isHarmony2 ? style2.backgroundColor = color : style2.background = color;
-        }
-      }
-      return style2;
-    };
     var _obj1;
     return /* @__PURE__ */ React.createElement(components.View, {
       className: classes,
@@ -5707,7 +5653,7 @@
       style: contentStyle
     }, value), children, !isIcon() && /* @__PURE__ */ React.createElement(components.View, {
       className: contentClasses,
-      style: _object_spread({}, contentStyle, getStyle())
+      style: contentStyle
     }, content()));
   };
   Badge.displayName = "NutBadge";

package/dist/styles/variables.scss

@@ -960,12 +960,6 @@ $tour-content-bottom-btn-border-radius: var(
   4px
 ) !default;
 
-//backtop（✅）
-$backtop-border-color: var(
-  --nutui-backtop-border-color,
-  $color-border
-) !default;
-
 // calendar（✅）
 $calendar-active-background-color: var(
   --nutui-calendar-active-background-color,
@@ -1025,6 +1019,7 @@ $hoverbutton-position-right: var(
   --nutui-hoverbutton-position-right,
   $spacing-base
 ) !default;
+$hoverbutton-item-size: var(--nutui-hoverbutton-item-size, 40px) !default;
 $hoverbutton-item-border-color: var(
   --nutui-hoverbutton-item-border-color,
   rgba(0, 0, 0, 0.12)
@@ -1602,26 +1597,33 @@ $tag-mark-border-radius: var(
 $badge-height: var(--nutui-badge-height, 14px) !default;
 $badge-background-color: var(
   --nutui-badge-background-color,
-  $color-primary-gradient-1
+  $color-primary
 ) !default;
-$badge-color: var(--nutui-badge-color, #fff) !default;
+$badge-color: var(--nutui-badge-color, $color-primary-text) !default;
 $badge-font-size: var(--nutui-badge-font-size, $font-size-xxs) !default;
 $badge-border: var(
   --nutui-badge-border,
-  0px solid $color-primary-text
+  1px solid $color-primary-text
 ) !default;
 $badge-border-radius: var(--nutui-badge-border-radius, $badge-height) !default;
-$badge-min-width: var(--nutui-badge-min-width, 5px) !default;
-$badge-padding: var(--nutui-badge-padding, 0 4px) !default;
-$badge-icon-padding: var(--nutui-badge-icon-padding, 3px) !default;
-$badge-icon-size: var(--nutui-badge-icon-size, 12px) !default;
+$badge-min-width: var(--nutui-badge-min-width, 6px) !default;
+$badge-padding: var(--nutui-badge-padding, 1px 4px) !default;
+$badge-icon-padding: var(--nutui-badge-icon-padding, 2px) !default;
+$badge-icon-size: var(--nutui-badge-icon-size, 10px) !default;
 $badge-content-transform: var(
   --nutui-badge-content-transform,
-  translateX(100%)
+  translate(50%, -50%)
 ) !default;
 $badge-z-index: var(--nutui-badge-z-index, 1) !default;
-$badge-dot-width: var(--nutui-badge-dot-width, 7px) !default;
-$badge-dot-border: var(--nutui-badge-dot-border, 0px solid $color-primary-text);
+$badge-dot-width: var(--nutui-badge-dot-width, 6px) !default;
+$badge-dot-small-width: var(--nutui-badge-dot-width, 4px) !default;
+$badge-dot-large-width: var(--nutui-badge-dot-width, 8px) !default;
+$badge-dot-border: var(--nutui-badge-dot-border, 1px solid $color-primary-text);
+$badge-outline-color: var(--nutui-badge-outline-color, $color-primary) !default;
+$badge-outline-border: var(
+  --nutui-badge-outline-border,
+  1px solid $color-primary
+);
 
 //popover（✅）
 $popover-border-radius: var(--nutui-popover-border-radius, 8px) !default;
@@ -2423,6 +2425,10 @@ $countup-border-radius: var(--nutui-countup-border-radius, 4px) !default;
 $countup-lr-margin: var(--nutui-countup-lr-margin, 0) !default;
 $countup-bg-color: var(--nutui-countup-bg-color, inherit) !default;
 $countup-color: var(--nutui-countup-color, $color-title) !default;
+$countup-separator-color: var(
+  --nutui-countup-separator-color,
+  $color-title
+) !default;
 
 // layout（✅）
 $row-content-color: var(--nutui-row-content-color, #fff) !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui-react-taro",
-  "version": "3.0.0-beta.7",
+  "version": "3.0.0-beta.8",
   "style": "dist/style.css",
   "main": "dist/nutui.react.umd.js",
   "module": "dist/es/packages/nutui.react.build.js",