@nutui/nutui-react 2.3.8-beta.0 → 2.3.8

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+# v2.3.8
+`2024-01-26`
+
+* 🔨 chore: 修复dev环境下demo分包体超过2M问题 (#1905) @xiaoyatong
+* 📖 docs(configprovider): 文档可读性优化 (#1882) @Alex.huxiyang
+* 📖 docs(grid): 文档可读性优化 (#1903) @Alex.huxiyang
+* 📖 docs(swiper): customize pagination controls (#1892) @oasis
+* :sparkles: feat(navbar): title区域自适应宽度 (#1891) @songsong
+* :sparkles: feat(rate): 新增 touchable 属性支持滑动选择 (#1880) @Eiinu
+* :sparkles: feat(video): support passing through attributes for Taro Video (#1890) @xiaoyatong
+* :sparkles: feat: radiogroup add shape props (#1898) @oasis
+* :bug: fix(ellipsis): 修复小程序文本省略问题 (#1888) @Eiinu
+* :bug: fix(ellipsis): 在 taro 小程序下尽量展示的平滑舒适 (#1902) @xiaoyatong
+* :bug: fix(image): 文档可读性优化 (#1887) @Alex.huxiyang
+* :bug: fix(overlay): 文档可读性优化 (#1894) @Alex.huxiyang
+* :bug: fix(rate): 修复 rate 高度问题 (#1883) @Eiinu
+* :bug: fix(steps): 小程序的真机情况下出现的换行的情况 (#1899) @xiaoyatong
+* :bug: fix(swiper): 轮播跳帧 (#1886) @oasis
+* :bug: fix(tabs): 解决组件嵌套tabs，横向滚动位置计算偏差问题 (#1884) @songsong
+* :bug: fix: doc、demo调整&优化 @huxiyang3
+* :bug: fix: taro.createSelectorQuery not function (#1907) @oasis
+
+
 # v2.3.7
 `2024-01-19`
 

package/dist/esm/NavBar/style/style.css

@@ -1 +1 @@
-.nut-navbar{width:var(--nutui-navbar-width, 100%);position:relative;display:flex;align-items:center;height:var(--nutui-navbar-height, 44px);box-sizing:border-box;background:var(--nutui-navbar-background, var(--nutui-gray-3, #f6f6f6));box-shadow:var(--nutui-navbar-box-shadow, 0px);font-size:var(--nutui-navbar-font-size, var(--nutui-font-size-3, 14px));color:var(--nutui-navbar-color, var(--nutui-gray-7, #1a1a1a));margin-bottom:var(--nutui-navbar-margin-bottom, 20px);overflow:hidden}.nut-navbar-fixed{position:fixed;top:0;left:0;width:100%}.nut-navbar-placeholder{display:inline-block;width:100%}.nut-navbar-safe-area-inset-top{padding-top:constant(safe-area-inset-top);padding-top:env(safe-area-inset-top)}.nut-navbar-title{min-width:53%;margin:0 auto;text-align:center;display:flex;align-items:center;justify-content:center;font-size:var(--nutui-navbar-title-font-size, var(--nutui-font-size-5, 18px));font-weight:var(--nutui-navbar-title-font-weight, var(--nutui-font-weight-bold, 500));color:var(--nutui-navbar-title-font-color, var(--nutui-gray-7, #1a1a1a))}.nut-navbar-title .nut-tabs-titles{background:transparent}.nut-navbar-title .nut-tabs-titles-item-text{color:var(--nutui-gray-7, #1a1a1a)}.nut-navbar-title .nut-tabpane{display:none}.nut-navbar-title ::-webkit-scrollbar{display:none}.nut-navbar-left,.nut-navbar-right{position:absolute;top:0;bottom:0;display:flex;align-items:center;cursor:pointer;padding:0 14px}.nut-navbar-left .nut-icon,.nut-navbar-left .nutui-iconfont,.nut-navbar-right .nut-icon,.nut-navbar-right .nutui-iconfont{width:20px;height:20px;font-size:20px}.nut-navbar-left{left:0}.nut-navbar-left-back{display:flex;align-items:center;justify-content:center;margin-right:10px}.nut-navbar-right{right:0}.nut-navbar-right .nut-icon{margin-left:12px}.nut-navbar-right .nut-icon:first-child{margin-left:0}.nut-navbar-title-align-left{padding:0 14px}.nut-navbar-title-align-left .nut-navbar-left{position:static;padding:0}.nut-navbar-title-align-left .nut-navbar-left .nut-icon{margin-left:12px}.nut-navbar-title-align-left .nut-navbar-left .nut-icon:first-child{margin-left:0}.nut-navbar-title-align-left .nut-navbar-left-back{margin-right:0}.nut-navbar-title-align-left .nut-navbar-title{margin:0;flex:1;justify-content:flex-start;padding:0 8px}
+.nut-navbar{width:var(--nutui-navbar-width, 100%);position:relative;display:flex;align-items:center;height:var(--nutui-navbar-height, 44px);box-sizing:border-box;background:var(--nutui-navbar-background, var(--nutui-gray-3, #f6f6f6));box-shadow:var(--nutui-navbar-box-shadow, 0px);font-size:var(--nutui-navbar-font-size, var(--nutui-font-size-3, 14px));color:var(--nutui-navbar-color, var(--nutui-gray-7, #1a1a1a));margin-bottom:var(--nutui-navbar-margin-bottom, 20px);overflow:hidden}.nut-navbar-fixed{position:fixed;top:0;left:0;width:100%}.nut-navbar-placeholder{display:inline-block;width:100%}.nut-navbar-safe-area-inset-top{padding-top:constant(safe-area-inset-top);padding-top:env(safe-area-inset-top)}.nut-navbar-title{min-width:53%;margin:0 auto;text-align:center;display:flex;align-items:center;justify-content:center;font-size:var(--nutui-navbar-title-font-size, var(--nutui-font-size-5, 18px));font-weight:var(--nutui-navbar-title-font-weight, var(--nutui-font-weight-bold, 500));color:var(--nutui-navbar-title-font-color, var(--nutui-gray-7, #1a1a1a))}.nut-navbar-title .nut-tabs-titles{background:transparent}.nut-navbar-title .nut-tabs-titles-item-text{color:var(--nutui-gray-7, #1a1a1a)}.nut-navbar-title .nut-tabpane{display:none}.nut-navbar-title ::-webkit-scrollbar{display:none}.nut-navbar-left,.nut-navbar-right{position:absolute;top:0;bottom:0;display:flex;align-items:center;cursor:pointer;padding:0 14px}.nut-navbar-left .nut-icon,.nut-navbar-left .nutui-iconfont,.nut-navbar-right .nut-icon,.nut-navbar-right .nutui-iconfont{width:20px;height:20px;font-size:20px}.nut-navbar-left{left:0}.nut-navbar-left-back{display:flex;align-items:center;justify-content:center;margin-right:10px}.nut-navbar-right{right:0}.nut-navbar-right .nut-icon{margin-left:12px}.nut-navbar-right .nut-icon:first-child{margin-left:0}.nut-navbar-title-align-left{padding:0 14px}.nut-navbar-title-align-left .nut-navbar-left{position:static;padding:0}.nut-navbar-title-align-left .nut-navbar-left .nut-icon{margin-left:12px}.nut-navbar-title-align-left .nut-navbar-left .nut-icon:first-child{margin-left:0}.nut-navbar-title-align-left .nut-navbar-right{position:static;display:inline-flex;white-space:nowrap;padding-left:0}.nut-navbar-title-align-left .nut-navbar-left-back{margin-right:0}.nut-navbar-title-align-left .nut-navbar-title{min-width:0;margin:0;flex:1;justify-content:flex-start;padding:0 8px}

package/dist/esm/NavBar.js

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) {
   var t = Object.keys(e);
@@ -20,9 +21,10 @@ function _objectSpread(e) {
   }
   return e;
 }
-import React__default from "react";
+import React__default, { useRef, useState, useEffect } from "react";
 import classNames from "classnames";
 import { C as ComponentDefaults } from "./typings.js";
+import { g as getRect } from "./use-client-rect.js";
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   left: "",
   right: "",
@@ -42,9 +44,40 @@ var NavBar = function NavBar2(props) {
       zIndex
     });
   };
+  var leftRef = useRef(null);
+  var rightRef = useRef(null);
+  var wrapperRef = useRef(null);
+  var _useState = useState("50%"), _useState2 = _slicedToArray(_useState, 2), contentWidth = _useState2[0], setContentWidth = _useState2[1];
+  var getNodeWidth = function getNodeWidth2(node) {
+    if (node) {
+      var ele = getRect(node);
+      return ele.width;
+    }
+    return 0;
+  };
+  useEffect(function() {
+    if (titleAlign === "left") {
+      return;
+    }
+    if (!(back || left || right)) {
+      setContentWidth("100%");
+      return;
+    }
+    var leftRectWidth = getNodeWidth(leftRef === null || leftRef === void 0 ? void 0 : leftRef.current);
+    var rightRectWidth = getNodeWidth(rightRef === null || rightRef === void 0 ? void 0 : rightRef.current);
+    var wrapperWidth = getNodeWidth(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+    var centerWidth = wrapperWidth / 2;
+    if (leftRectWidth && rightRectWidth) {
+      centerWidth = wrapperWidth - (leftRectWidth > rightRectWidth ? leftRectWidth * 2 : rightRectWidth * 2);
+    } else {
+      centerWidth = wrapperWidth - leftRectWidth * 2 - rightRectWidth * 2;
+    }
+    setContentWidth(centerWidth.toFixed(2));
+  }, [left, right, back]);
   var renderLeft = function renderLeft2() {
     return back || left ? React__default.createElement("div", {
-      className: "".concat(classPrefix, "-left")
+      className: "".concat(classPrefix, "-left"),
+      ref: leftRef
     }, back && React__default.createElement("div", {
       className: "".concat(classPrefix, "-left-back"),
       onClick: function onClick(e) {
@@ -53,19 +86,30 @@ var NavBar = function NavBar2(props) {
     }, back), left) : null;
   };
   var renderContent = function renderContent2() {
+    var titleStyle = {};
+    if (titleAlign === "center") {
+      var contentRealWidth = "".concat(contentWidth).concat(/%$/i.test(contentWidth) ? "" : "px");
+      titleStyle = {
+        minWidth: contentRealWidth,
+        width: contentRealWidth
+      };
+    }
     return React__default.createElement("div", {
-      className: "".concat(classPrefix, "-title")
+      className: "".concat(classPrefix, "-title"),
+      style: titleStyle
     }, children);
   };
   var renderRight = function renderRight2() {
     return React__default.createElement("div", {
-      className: "".concat(classPrefix, "-right")
+      className: "".concat(classPrefix, "-right"),
+      ref: rightRef
     }, right);
   };
   var renderWrapper = function renderWrapper2() {
     return React__default.createElement("div", {
       className: cls,
-      style: styles()
+      style: styles(),
+      ref: wrapperRef
     }, renderLeft(), renderContent(), renderRight());
   };
   var classes = classNames(_defineProperty(_defineProperty(_defineProperty({}, "".concat(classPrefix, "-fixed"), fixed), "".concat(classPrefix, "-safe-area-inset-top"), safeAreaInsetTop), "".concat(classPrefix, "-title-align-").concat(titleAlign), true));

package/dist/esm/Picker.js

@@ -30,6 +30,7 @@ import { P as Popup } from "./popup2.js";
 import { S as SafeArea } from "./safearea2.js";
 import { u as useTouch } from "./use-touch.js";
 import { p as passiveSupported } from "./supports-passive.js";
+import { u as useRefs } from "./use-refs.js";
 import { useConfig } from "./ConfigProvider.js";
 import { u as usePropsValue } from "./use-props-value.js";
 import { C as ComponentDefaults } from "./typings.js";
@@ -249,19 +250,6 @@ var InternalPickerPanel = function InternalPickerPanel2(props, ref) {
 };
 var PickerPanel = React__default.forwardRef(InternalPickerPanel);
 var PickerPanel$1 = PickerPanel;
-function useRefs() {
-  var refs = React__default.useRef([]);
-  var setRefs = React__default.useCallback(function(index) {
-    return function(el) {
-      if (el)
-        refs.current[index] = el;
-    };
-  }, []);
-  var reset = React__default.useCallback(function() {
-    refs.current = [];
-  }, []);
-  return [refs.current, setRefs, reset];
-}
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   title: "",
   options: [],

package/dist/esm/RadioGroup.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "value", "defaultValue", "onChange", "labelPosition", "direction", "options", "disabled"], _excluded2 = ["label", "value", "disabled", "onChange"];
+var _excluded = ["children", "className", "value", "defaultValue", "onChange", "shape", "labelPosition", "direction", "options", "disabled"], _excluded2 = ["label", "value", "disabled", "onChange"];
 function ownKeys(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
@@ -39,7 +39,7 @@ var defaultProps = {
 };
 var classPrefix = "nut-radiogroup";
 var RadioGroup = React__default.forwardRef(function(props, ref) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, className = _defaultProps$props.className, value = _defaultProps$props.value, defaultValue = _defaultProps$props.defaultValue, onChange2 = _defaultProps$props.onChange, labelPosition = _defaultProps$props.labelPosition, direction = _defaultProps$props.direction, options = _defaultProps$props.options, disabled = _defaultProps$props.disabled, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, className = _defaultProps$props.className, value = _defaultProps$props.value, defaultValue = _defaultProps$props.defaultValue, onChange2 = _defaultProps$props.onChange, shape = _defaultProps$props.shape, labelPosition = _defaultProps$props.labelPosition, direction = _defaultProps$props.direction, options = _defaultProps$props.options, disabled = _defaultProps$props.disabled, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
   var _usePropsValue = usePropsValue({
     defaultValue: props.defaultValue,
     value: props.value,
@@ -64,6 +64,7 @@ var RadioGroup = React__default.forwardRef(function(props, ref) {
     value: {
       labelPosition: labelPosition || "right",
       disabled,
+      shape,
       value: val2State,
       check: function check(value2) {
         setVal2State(value2);

package/dist/esm/Rate/style/style.css

@@ -1 +1 @@
-.nut-rate{display:flex}.nut-rate.disabled .nut-rate-item-icon{cursor:not-allowed}.nut-rate.readonly .nut-rate-item-icon{cursor:default}.nut-rate-item{display:flex;flex-shrink:0;position:relative;margin-right:var(--nutui-rate-item-margin, 14px)}.nut-rate-item:last-child{margin-right:0}.nut-rate-item-half{position:absolute;height:100%;width:50%!important;left:0;top:0;overflow:hidden}.nut-rate-item-half .nut-icon{flex-shrink:0}.nut-rate-item-icon{display:flex;color:var(--nutui-rate-icon-color, var(--nutui-color-primary, #fa2c19));cursor:pointer}.nut-rate-item-icon-disabled{color:var(--nutui-rate-icon-inactive-color, var(--nutui-color-text-disabled, #bfbfbf))}.nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half{position:absolute;left:0;top:0;overflow:hidden}.nut-rate-item-icon.nut-rate-item-icon:before{position:relative;top:auto;left:auto;transform:none}
+.nut-rate{display:flex;touch-action:pan-x}.nut-rate.disabled .nut-rate-item-icon{cursor:not-allowed}.nut-rate.readonly .nut-rate-item-icon{cursor:default}.nut-rate-item{display:flex;flex-shrink:0;position:relative;margin-right:var(--nutui-rate-item-margin, 14px)}.nut-rate-item:last-child{margin-right:0}.nut-rate-item-half{position:absolute;height:100%;width:50%!important;left:0;top:0;overflow:hidden}.nut-rate-item-half .nut-icon{flex-shrink:0}.nut-rate-item-icon{display:flex;color:var(--nutui-rate-icon-color, var(--nutui-color-primary, #fa2c19));cursor:pointer}.nut-rate-item-icon-disabled{color:var(--nutui-rate-icon-inactive-color, var(--nutui-color-text-disabled, #bfbfbf))}.nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half{position:absolute;left:0;top:0;overflow:hidden}.nut-rate-item-icon.nut-rate-item-icon:before{position:relative;top:auto;left:auto;transform:none}

package/dist/esm/Rate.js

@@ -21,11 +21,13 @@ function _objectSpread(e) {
   }
   return e;
 }
-import React__default, { useState, useEffect } from "react";
+import React__default, { useState, useRef, useEffect } from "react";
 import classNames from "classnames";
 import { StarFill } from "@nutui/icons-react";
 import { C as ComponentDefaults } from "./typings.js";
 import { u as usePropsValue } from "./use-props-value.js";
+import { g as getRect } from "./use-client-rect.js";
+import { u as useRefs } from "./use-refs.js";
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   count: 5,
   min: 0,
@@ -33,12 +35,15 @@ var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   uncheckedIcon: null,
   disabled: false,
   readOnly: false,
-  allowHalf: false
+  allowHalf: false,
+  touchable: false
 });
 var Rate = function Rate2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, style = _defaultProps$props.style, count = _defaultProps$props.count, value = _defaultProps$props.value, defaultValue = _defaultProps$props.defaultValue, min = _defaultProps$props.min, checkedIcon = _defaultProps$props.checkedIcon, uncheckedIcon = _defaultProps$props.uncheckedIcon, disabled = _defaultProps$props.disabled, readOnly = _defaultProps$props.readOnly, allowHalf = _defaultProps$props.allowHalf, onChange = _defaultProps$props.onChange;
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, style = _defaultProps$props.style, count = _defaultProps$props.count, value = _defaultProps$props.value, defaultValue = _defaultProps$props.defaultValue, min = _defaultProps$props.min, checkedIcon = _defaultProps$props.checkedIcon, uncheckedIcon = _defaultProps$props.uncheckedIcon, disabled = _defaultProps$props.disabled, readOnly = _defaultProps$props.readOnly, allowHalf = _defaultProps$props.allowHalf, touchable = _defaultProps$props.touchable, onChange = _defaultProps$props.onChange, onTouchEnd = _defaultProps$props.onTouchEnd;
   var classPrefix = "nut-rate";
   var _useState = useState([1, 2, 3, 4, 5]), _useState2 = _slicedToArray(_useState, 2), countArray = _useState2[0], setCountArray = _useState2[1];
+  var _useRefs = useRefs(), _useRefs2 = _slicedToArray(_useRefs, 2), refs = _useRefs2[0], setRefs = _useRefs2[1];
+  var rateRects = useRef([]);
   var _usePropsValue = usePropsValue({
     value,
     defaultValue: Math.max(defaultValue || 0, min),
@@ -75,16 +80,97 @@ var Rate = function Rate2(props) {
     var value2 = Math.max(min, n - 0.5);
     setScore(value2);
   };
+  var getScoreByPosition = function getScoreByPosition2(x) {
+    var _rateRects$current;
+    if ((_rateRects$current = rateRects.current) !== null && _rateRects$current !== void 0 && _rateRects$current.length) {
+      for (var index = rateRects.current.length - 1; index >= 0; index--) {
+        var item = rateRects.current[index];
+        if (item && x > item.left) {
+          return allowHalf ? index + (x > item.left + item.width / 2 ? 1 : 0.5) : index + 1;
+        }
+      }
+      return 0;
+    }
+  };
+  var updateRects = function updateRects2() {
+    for (var index = 0; index < refs.length; index++) {
+      var item = refs[index];
+      if (item) {
+        rateRects.current[index] = getRect(item);
+      }
+    }
+  };
+  var handleTouchStart = function handleTouchStart2(e) {
+    if (!touchable || readOnly || disabled) {
+      return;
+    }
+    if (e.cancelable) {
+      e.preventDefault();
+    }
+    e.stopPropagation();
+    updateRects();
+  };
+  var handleTouchMove = function handleTouchMove2(e) {
+    if (!touchable || readOnly || disabled) {
+      return;
+    }
+    if (e.cancelable) {
+      e.preventDefault();
+    }
+    e.stopPropagation();
+    var val = getScoreByPosition(e.touches[0].clientX);
+    if (val !== void 0) {
+      setScore(Math.max(min, val));
+    }
+  };
+  var handleTouchEnd = function handleTouchEnd2(e) {
+    if (!touchable || readOnly || disabled) {
+      return;
+    }
+    if (e.cancelable) {
+      e.preventDefault();
+    }
+    e.stopPropagation();
+    var val = getScoreByPosition(e.changedTouches[0].clientX);
+    if (val !== void 0) {
+      setScore(Math.max(min, val));
+      onTouchEnd && onTouchEnd(e, Math.max(min, val));
+    }
+  };
+  var rateRef = useRef(null);
+  useEffect(function() {
+    var element = rateRef.current;
+    if (element) {
+      element.addEventListener("touchstart", handleTouchStart, {
+        passive: false
+      });
+      element.addEventListener("touchmove", handleTouchMove, {
+        passive: false
+      });
+      element.addEventListener("touchend", handleTouchEnd, {
+        passive: false
+      });
+    }
+    return function() {
+      if (element) {
+        element.removeEventListener("touchstart", handleTouchStart);
+        element.removeEventListener("touchmove", handleTouchMove);
+        element.removeEventListener("touchend", handleTouchEnd);
+      }
+    };
+  }, []);
   return React__default.createElement("div", {
     className: classNames(classPrefix, {
       disabled,
       readonly: readOnly
     }, className),
+    ref: rateRef,
     style
-  }, countArray.map(function(n) {
+  }, countArray.map(function(n, index) {
     return React__default.createElement("div", {
       className: "".concat(classPrefix, "-item"),
       key: n,
+      ref: setRefs(index),
       onClick: function onClick(event) {
         return _onClick(event, n);
       }

package/dist/esm/Step/style/style.css

@@ -1 +1 @@
-.nut-step{flex-grow:0;flex-shrink:0;flex:1;text-align:center;font-size:0}.nut-step-head{position:relative;display:flex;justify-content:center;margin-bottom:var(--nutui-steps-base-icon-margin-bottom, 12px)}.nut-step-line{position:absolute;top:calc(var(--nutui-steps-base-icon-height, 25px) / 2);left:calc(50% + (100% - var(--nutui-steps-base-line-width, 70%)) / 2);height:var(--nutui-steps-base-line-height, 1px);width:var(--nutui-steps-base-line-width, 70%);background:var(--nutui-steps-base-line-background, var(--nutui-gray-5, #8c8c8c))}.nut-step-icon{position:relative;display:flex;align-items:center;justify-content:center;width:var(--nutui-steps-base-icon-width, 25px);height:var(--nutui-steps-base-icon-height, 25px);line-height:var(--nutui-steps-base-icon-line-height, 25px);font-size:var(--nutui-steps-base-icon-font-size, var(--nutui-font-size-2, 12px));background-color:var(--nutui-steps-wait-icon-bg-color, var(--nutui-gray-5, #8c8c8c));border-color:var(--nutui-steps-wait-icon-bg-color, var(--nutui-gray-5, #8c8c8c));color:var(--nutui-steps-wait-icon-color, #ffffff);z-index:1}.nut-step-icon .nut-icon{width:100%;height:100%}.nut-step-icon.is-text,.nut-step-icon.is-icon{border-radius:50%;border-width:1px;border-style:solid}.nut-step-main{display:inline-block;padding-left:10%;padding-right:10%;text-align:center}.nut-step-title{display:block;margin-bottom:var(--nutui-steps-base-title-margin-bottom, 10px);font-size:var(--nutui-steps-base-title-font-size, var(--nutui-font-size-3, 14px));color:var(--nutui-steps-base-title-color, var(--nutui-gray-7, #1a1a1a))}.nut-step-description{display:block;font-size:var(--nutui-steps-base-description-font-size, var(--nutui-font-size-2, 12px));color:var(--nutui-steps-base-description-color, var(--nutui-gray-6, #595959))}.nut-step:last-child .nut-step-line{display:none}.nut-step.nut-step-process .nut-step-icon{background-color:var(--nutui-steps-process-icon-bg-color, var(--nutui-color-primary, #fa2c19));border-color:var(--nutui-steps-process-icon-bg-color, var(--nutui-color-primary, #fa2c19));color:var(--nutui-steps-process-icon-color, #ffffff)}.nut-step.nut-step-process .nut-step-title{color:var(--nutui-steps-process-title-color, var(--nutui-color-primary, #fa2c19));font-size:var(--nutui-steps-process-title-font-size, var(--nutui-font-size-3, 14px));font-weight:var(--nutui-steps-process-title-font-weight, var(--nutui-font-weight-bold, 500))}.nut-step.nut-step-process .nut-step-description{color:var(--nutui-steps-process-description-color, var(--nutui-gray-6, #595959))}.nut-step.nut-step-wait .nut-step-title{color:var(--nutui-steps-wait-title-color, var(--nutui-gray-7, #1a1a1a))}.nut-step.nut-step-wait .nut-step-description{color:var(--nutui-steps-wait-description-color, var(--nutui-gray-6, #595959))}.nut-step.nut-step-finish .nut-step-icon{background-color:var(--nutui-steps-finish-icon-bg-color, var(--nutui-color-primary-text, #ffffff));border-color:var(--nutui-steps-finish-icon-border-color, var(--nutui-steps-finish-icon-color, var(--nutui-color-primary, #fa2c19)));color:var(--nutui-steps-finish-icon-color, var(--nutui-color-primary, #fa2c19))}.nut-step.nut-step-finish .nut-step-line{background:var(--nutui-steps-finish-line-background, var(--nutui-color-primary, #fa2c19))}.nut-step.nut-step-finish .nut-step-title{color:var(--nutui-steps-finish-title-color, var(--nutui-color-primary, #fa2c19))}.nut-step.nut-step-finish .nut-step-description{color:var(--nutui-steps-finish-description-color, var(--nutui-gray-6, #595959))}.nut-steps-dot .nut-step-head{margin:var(--nutui-steps-dot-head-margin, 10px 0)}.nut-steps-dot .nut-step-line{top:7px}.nut-steps-dot .nut-step-icon{width:var(--nutui-steps-dot-icon-width, 6px);height:var(--nutui-steps-dot-icon-height, 6px);border:var(--nutui-steps-dot-icon-border, 2px solid var(--nutui-color-primary-text, #ffffff));border-radius:50%;box-sizing:content-box}.nut-steps-dot .nut-step-wait .nut-step-icon{background-color:var(--nutui-steps-dot-wait-icon-bg-color, var(--nutui-steps-wait-icon-bg-color, var(--nutui-gray-5, #8c8c8c)))}.nut-steps-dot .nut-step-finish .nut-step-icon{background-color:var(--nutui-steps-finish-icon-bg-color, var(--nutui-color-primary-text, #ffffff));border-color:var(--nutui-steps-dot-finish-icon-bg-color, var(--nutui-steps-finish-icon-color, var(--nutui-color-primary, #fa2c19)))}.nut-steps-dot .nut-step-process .nut-step-icon{position:relative}.nut-steps-dot .nut-step-process .nut-step-icon:before{content:"";display:inline-block;position:absolute;left:50%;top:50%;margin-left:-7px;margin-top:-7px;width:14px;height:14px;background-color:var(--nutui-steps-process-icon-before-bg-color, var(--nutui-color-primary-stop-2, #fa2c19));border-radius:50%;opacity:.23}.nut-steps-horizontal.nut-steps-dot .nut-step-line{top:50%;bottom:-50%}.nut-steps-vertical .nut-step{display:flex;height:33.34%}.nut-steps-vertical .nut-step-line{position:absolute;display:inline-block;width:1px;height:var(--nutui-steps-base-line-width, 70%);background:var(--nutui-steps-base-line-background, var(--nutui-gray-5, #8c8c8c));top:calc(var(--nutui-steps-base-icon-height, 25px) + (100% - var(--nutui-steps-base-line-width, 70%) - var(--nutui-steps-base-icon-margin-bottom, 12px)) / 2);left:calc(50% - 1px)}.nut-steps-vertical.nut-steps-dot .nut-step-line{top:calc(var(--nutui-steps-dot-icon-height, 6px) + (100% - var(--nutui-steps-base-line-width, 70%)) / 2)}.nut-steps-vertical .nut-step-main{display:inline-block;padding-left:6%;text-align:left}
+.nut-step{flex-grow:0;flex-shrink:0;flex:1;text-align:center;font-size:0}.nut-step-head{position:relative;display:flex;justify-content:center;margin-bottom:var(--nutui-steps-base-icon-margin-bottom, 12px)}.nut-step-line{position:absolute;top:calc(var(--nutui-steps-base-icon-height, 25px) / 2);left:calc(50% + (100% - var(--nutui-steps-base-line-width, 70%)) / 2);height:var(--nutui-steps-base-line-height, 1px);width:var(--nutui-steps-base-line-width, 70%);background:var(--nutui-steps-base-line-background, var(--nutui-gray-5, #8c8c8c))}.nut-step-icon{position:relative;display:flex;align-items:center;justify-content:center;width:var(--nutui-steps-base-icon-width, 25px);height:var(--nutui-steps-base-icon-height, 25px);line-height:var(--nutui-steps-base-icon-line-height, 25px);font-size:var(--nutui-steps-base-icon-font-size, var(--nutui-font-size-2, 12px));background-color:var(--nutui-steps-wait-icon-bg-color, var(--nutui-gray-5, #8c8c8c));border-color:var(--nutui-steps-wait-icon-bg-color, var(--nutui-gray-5, #8c8c8c));color:var(--nutui-steps-wait-icon-color, #ffffff);z-index:1}.nut-step-icon .nut-icon{width:100%;height:100%}.nut-step-icon.is-text,.nut-step-icon.is-icon{border-radius:50%;border-width:1px;border-style:solid}.nut-step-main{padding:0 10%;display:flex;flex-direction:column;justify-content:center;align-items:center}.nut-step-title{display:block;margin-bottom:var(--nutui-steps-base-title-margin-bottom, 10px);font-size:var(--nutui-steps-base-title-font-size, var(--nutui-font-size-3, 14px));color:var(--nutui-steps-base-title-color, var(--nutui-gray-7, #1a1a1a))}.nut-step-description{display:block;font-size:var(--nutui-steps-base-description-font-size, var(--nutui-font-size-2, 12px));color:var(--nutui-steps-base-description-color, var(--nutui-gray-6, #595959))}.nut-step:last-child .nut-step-line{display:none}.nut-step.nut-step-process .nut-step-icon{background-color:var(--nutui-steps-process-icon-bg-color, var(--nutui-color-primary, #fa2c19));border-color:var(--nutui-steps-process-icon-bg-color, var(--nutui-color-primary, #fa2c19));color:var(--nutui-steps-process-icon-color, #ffffff)}.nut-step.nut-step-process .nut-step-title{color:var(--nutui-steps-process-title-color, var(--nutui-color-primary, #fa2c19));font-size:var(--nutui-steps-process-title-font-size, var(--nutui-font-size-3, 14px));font-weight:var(--nutui-steps-process-title-font-weight, var(--nutui-font-weight-bold, 500))}.nut-step.nut-step-process .nut-step-description{color:var(--nutui-steps-process-description-color, var(--nutui-gray-6, #595959))}.nut-step.nut-step-wait .nut-step-title{color:var(--nutui-steps-wait-title-color, var(--nutui-gray-7, #1a1a1a))}.nut-step.nut-step-wait .nut-step-description{color:var(--nutui-steps-wait-description-color, var(--nutui-gray-6, #595959))}.nut-step.nut-step-finish .nut-step-icon{background-color:var(--nutui-steps-finish-icon-bg-color, var(--nutui-color-primary-text, #ffffff));border-color:var(--nutui-steps-finish-icon-border-color, var(--nutui-steps-finish-icon-color, var(--nutui-color-primary, #fa2c19)));color:var(--nutui-steps-finish-icon-color, var(--nutui-color-primary, #fa2c19))}.nut-step.nut-step-finish .nut-step-line{background:var(--nutui-steps-finish-line-background, var(--nutui-color-primary, #fa2c19))}.nut-step.nut-step-finish .nut-step-title{color:var(--nutui-steps-finish-title-color, var(--nutui-color-primary, #fa2c19))}.nut-step.nut-step-finish .nut-step-description{color:var(--nutui-steps-finish-description-color, var(--nutui-gray-6, #595959))}.nut-steps-dot .nut-step-head{margin:var(--nutui-steps-dot-head-margin, 10px 0)}.nut-steps-dot .nut-step-line{top:7px}.nut-steps-dot .nut-step-icon{width:var(--nutui-steps-dot-icon-width, 6px);height:var(--nutui-steps-dot-icon-height, 6px);border:var(--nutui-steps-dot-icon-border, 2px solid var(--nutui-color-primary-text, #ffffff));border-radius:50%;box-sizing:content-box}.nut-steps-dot .nut-step-wait .nut-step-icon{background-color:var(--nutui-steps-dot-wait-icon-bg-color, var(--nutui-steps-wait-icon-bg-color, var(--nutui-gray-5, #8c8c8c)))}.nut-steps-dot .nut-step-finish .nut-step-icon{background-color:var(--nutui-steps-finish-icon-bg-color, var(--nutui-color-primary-text, #ffffff));border-color:var(--nutui-steps-dot-finish-icon-bg-color, var(--nutui-steps-finish-icon-color, var(--nutui-color-primary, #fa2c19)))}.nut-steps-dot .nut-step-process .nut-step-icon{position:relative}.nut-steps-dot .nut-step-process .nut-step-icon:before{content:"";display:inline-block;position:absolute;left:50%;top:50%;margin-left:-7px;margin-top:-7px;width:14px;height:14px;background-color:var(--nutui-steps-process-icon-before-bg-color, var(--nutui-color-primary-stop-2, #fa2c19));border-radius:50%;opacity:.23}.nut-steps-horizontal.nut-steps-dot .nut-step-line{top:50%;bottom:-50%}.nut-steps-vertical .nut-step{display:flex;height:33.34%}.nut-steps-vertical .nut-step-line{position:absolute;display:inline-block;width:1px;height:var(--nutui-steps-base-line-width, 70%);background:var(--nutui-steps-base-line-background, var(--nutui-gray-5, #8c8c8c));top:calc(var(--nutui-steps-base-icon-height, 25px) + (100% - var(--nutui-steps-base-line-width, 70%) - var(--nutui-steps-base-icon-margin-bottom, 12px)) / 2);left:calc(50% - 1px)}.nut-steps-vertical.nut-steps-dot .nut-step-line{top:calc(var(--nutui-steps-dot-icon-height, 6px) + (100% - var(--nutui-steps-base-line-width, 70%)) / 2)}.nut-steps-vertical .nut-step-main{display:inline-block;padding-left:6%;text-align:left}

package/dist/esm/Step.js

@@ -69,7 +69,7 @@ var Step = function Step2(props) {
     className: renderIconClass()
   }, icon || !dot && React__default.createElement("span", {
     className: "nut-step-inner"
-  }, value))), React__default.createElement("div", {
+  }, value))), (title || description) && React__default.createElement("div", {
     className: "nut-step-main"
   }, React__default.createElement("span", {
     className: "nut-step-title"

package/dist/esm/Steps/style/style.css

@@ -1 +1 @@
-.nut-step{flex-grow:0;flex-shrink:0;flex:1;text-align:center;font-size:0}.nut-step-head{position:relative;display:flex;justify-content:center;margin-bottom:var(--nutui-steps-base-icon-margin-bottom, 12px)}.nut-step-line{position:absolute;top:calc(var(--nutui-steps-base-icon-height, 25px) / 2);left:calc(50% + (100% - var(--nutui-steps-base-line-width, 70%)) / 2);height:var(--nutui-steps-base-line-height, 1px);width:var(--nutui-steps-base-line-width, 70%);background:var(--nutui-steps-base-line-background, var(--nutui-gray-5, #8c8c8c))}.nut-step-icon{position:relative;display:flex;align-items:center;justify-content:center;width:var(--nutui-steps-base-icon-width, 25px);height:var(--nutui-steps-base-icon-height, 25px);line-height:var(--nutui-steps-base-icon-line-height, 25px);font-size:var(--nutui-steps-base-icon-font-size, var(--nutui-font-size-2, 12px));background-color:var(--nutui-steps-wait-icon-bg-color, var(--nutui-gray-5, #8c8c8c));border-color:var(--nutui-steps-wait-icon-bg-color, var(--nutui-gray-5, #8c8c8c));color:var(--nutui-steps-wait-icon-color, #ffffff);z-index:1}.nut-step-icon .nut-icon{width:100%;height:100%}.nut-step-icon.is-text,.nut-step-icon.is-icon{border-radius:50%;border-width:1px;border-style:solid}.nut-step-main{display:inline-block;padding-left:10%;padding-right:10%;text-align:center}.nut-step-title{display:block;margin-bottom:var(--nutui-steps-base-title-margin-bottom, 10px);font-size:var(--nutui-steps-base-title-font-size, var(--nutui-font-size-3, 14px));color:var(--nutui-steps-base-title-color, var(--nutui-gray-7, #1a1a1a))}.nut-step-description{display:block;font-size:var(--nutui-steps-base-description-font-size, var(--nutui-font-size-2, 12px));color:var(--nutui-steps-base-description-color, var(--nutui-gray-6, #595959))}.nut-step:last-child .nut-step-line{display:none}.nut-step.nut-step-process .nut-step-icon{background-color:var(--nutui-steps-process-icon-bg-color, var(--nutui-color-primary, #fa2c19));border-color:var(--nutui-steps-process-icon-bg-color, var(--nutui-color-primary, #fa2c19));color:var(--nutui-steps-process-icon-color, #ffffff)}.nut-step.nut-step-process .nut-step-title{color:var(--nutui-steps-process-title-color, var(--nutui-color-primary, #fa2c19));font-size:var(--nutui-steps-process-title-font-size, var(--nutui-font-size-3, 14px));font-weight:var(--nutui-steps-process-title-font-weight, var(--nutui-font-weight-bold, 500))}.nut-step.nut-step-process .nut-step-description{color:var(--nutui-steps-process-description-color, var(--nutui-gray-6, #595959))}.nut-step.nut-step-wait .nut-step-title{color:var(--nutui-steps-wait-title-color, var(--nutui-gray-7, #1a1a1a))}.nut-step.nut-step-wait .nut-step-description{color:var(--nutui-steps-wait-description-color, var(--nutui-gray-6, #595959))}.nut-step.nut-step-finish .nut-step-icon{background-color:var(--nutui-steps-finish-icon-bg-color, var(--nutui-color-primary-text, #ffffff));border-color:var(--nutui-steps-finish-icon-border-color, var(--nutui-steps-finish-icon-color, var(--nutui-color-primary, #fa2c19)));color:var(--nutui-steps-finish-icon-color, var(--nutui-color-primary, #fa2c19))}.nut-step.nut-step-finish .nut-step-line{background:var(--nutui-steps-finish-line-background, var(--nutui-color-primary, #fa2c19))}.nut-step.nut-step-finish .nut-step-title{color:var(--nutui-steps-finish-title-color, var(--nutui-color-primary, #fa2c19))}.nut-step.nut-step-finish .nut-step-description{color:var(--nutui-steps-finish-description-color, var(--nutui-gray-6, #595959))}.nut-steps-dot .nut-step-head{margin:var(--nutui-steps-dot-head-margin, 10px 0)}.nut-steps-dot .nut-step-line{top:7px}.nut-steps-dot .nut-step-icon{width:var(--nutui-steps-dot-icon-width, 6px);height:var(--nutui-steps-dot-icon-height, 6px);border:var(--nutui-steps-dot-icon-border, 2px solid var(--nutui-color-primary-text, #ffffff));border-radius:50%;box-sizing:content-box}.nut-steps-dot .nut-step-wait .nut-step-icon{background-color:var(--nutui-steps-dot-wait-icon-bg-color, var(--nutui-steps-wait-icon-bg-color, var(--nutui-gray-5, #8c8c8c)))}.nut-steps-dot .nut-step-finish .nut-step-icon{background-color:var(--nutui-steps-finish-icon-bg-color, var(--nutui-color-primary-text, #ffffff));border-color:var(--nutui-steps-dot-finish-icon-bg-color, var(--nutui-steps-finish-icon-color, var(--nutui-color-primary, #fa2c19)))}.nut-steps-dot .nut-step-process .nut-step-icon{position:relative}.nut-steps-dot .nut-step-process .nut-step-icon:before{content:"";display:inline-block;position:absolute;left:50%;top:50%;margin-left:-7px;margin-top:-7px;width:14px;height:14px;background-color:var(--nutui-steps-process-icon-before-bg-color, var(--nutui-color-primary-stop-2, #fa2c19));border-radius:50%;opacity:.23}.nut-steps-horizontal.nut-steps-dot .nut-step-line{top:50%;bottom:-50%}.nut-steps-vertical .nut-step{display:flex;height:33.34%}.nut-steps-vertical .nut-step-line{position:absolute;display:inline-block;width:1px;height:var(--nutui-steps-base-line-width, 70%);background:var(--nutui-steps-base-line-background, var(--nutui-gray-5, #8c8c8c));top:calc(var(--nutui-steps-base-icon-height, 25px) + (100% - var(--nutui-steps-base-line-width, 70%) - var(--nutui-steps-base-icon-margin-bottom, 12px)) / 2);left:calc(50% - 1px)}.nut-steps-vertical.nut-steps-dot .nut-step-line{top:calc(var(--nutui-steps-dot-icon-height, 6px) + (100% - var(--nutui-steps-base-line-width, 70%)) / 2)}.nut-steps-vertical .nut-step-main{display:inline-block;padding-left:6%;text-align:left}.nut-steps{display:flex}.nut-steps-vertical{height:100%;flex-flow:column}
+.nut-step{flex-grow:0;flex-shrink:0;flex:1;text-align:center;font-size:0}.nut-step-head{position:relative;display:flex;justify-content:center;margin-bottom:var(--nutui-steps-base-icon-margin-bottom, 12px)}.nut-step-line{position:absolute;top:calc(var(--nutui-steps-base-icon-height, 25px) / 2);left:calc(50% + (100% - var(--nutui-steps-base-line-width, 70%)) / 2);height:var(--nutui-steps-base-line-height, 1px);width:var(--nutui-steps-base-line-width, 70%);background:var(--nutui-steps-base-line-background, var(--nutui-gray-5, #8c8c8c))}.nut-step-icon{position:relative;display:flex;align-items:center;justify-content:center;width:var(--nutui-steps-base-icon-width, 25px);height:var(--nutui-steps-base-icon-height, 25px);line-height:var(--nutui-steps-base-icon-line-height, 25px);font-size:var(--nutui-steps-base-icon-font-size, var(--nutui-font-size-2, 12px));background-color:var(--nutui-steps-wait-icon-bg-color, var(--nutui-gray-5, #8c8c8c));border-color:var(--nutui-steps-wait-icon-bg-color, var(--nutui-gray-5, #8c8c8c));color:var(--nutui-steps-wait-icon-color, #ffffff);z-index:1}.nut-step-icon .nut-icon{width:100%;height:100%}.nut-step-icon.is-text,.nut-step-icon.is-icon{border-radius:50%;border-width:1px;border-style:solid}.nut-step-main{padding:0 10%;display:flex;flex-direction:column;justify-content:center;align-items:center}.nut-step-title{display:block;margin-bottom:var(--nutui-steps-base-title-margin-bottom, 10px);font-size:var(--nutui-steps-base-title-font-size, var(--nutui-font-size-3, 14px));color:var(--nutui-steps-base-title-color, var(--nutui-gray-7, #1a1a1a))}.nut-step-description{display:block;font-size:var(--nutui-steps-base-description-font-size, var(--nutui-font-size-2, 12px));color:var(--nutui-steps-base-description-color, var(--nutui-gray-6, #595959))}.nut-step:last-child .nut-step-line{display:none}.nut-step.nut-step-process .nut-step-icon{background-color:var(--nutui-steps-process-icon-bg-color, var(--nutui-color-primary, #fa2c19));border-color:var(--nutui-steps-process-icon-bg-color, var(--nutui-color-primary, #fa2c19));color:var(--nutui-steps-process-icon-color, #ffffff)}.nut-step.nut-step-process .nut-step-title{color:var(--nutui-steps-process-title-color, var(--nutui-color-primary, #fa2c19));font-size:var(--nutui-steps-process-title-font-size, var(--nutui-font-size-3, 14px));font-weight:var(--nutui-steps-process-title-font-weight, var(--nutui-font-weight-bold, 500))}.nut-step.nut-step-process .nut-step-description{color:var(--nutui-steps-process-description-color, var(--nutui-gray-6, #595959))}.nut-step.nut-step-wait .nut-step-title{color:var(--nutui-steps-wait-title-color, var(--nutui-gray-7, #1a1a1a))}.nut-step.nut-step-wait .nut-step-description{color:var(--nutui-steps-wait-description-color, var(--nutui-gray-6, #595959))}.nut-step.nut-step-finish .nut-step-icon{background-color:var(--nutui-steps-finish-icon-bg-color, var(--nutui-color-primary-text, #ffffff));border-color:var(--nutui-steps-finish-icon-border-color, var(--nutui-steps-finish-icon-color, var(--nutui-color-primary, #fa2c19)));color:var(--nutui-steps-finish-icon-color, var(--nutui-color-primary, #fa2c19))}.nut-step.nut-step-finish .nut-step-line{background:var(--nutui-steps-finish-line-background, var(--nutui-color-primary, #fa2c19))}.nut-step.nut-step-finish .nut-step-title{color:var(--nutui-steps-finish-title-color, var(--nutui-color-primary, #fa2c19))}.nut-step.nut-step-finish .nut-step-description{color:var(--nutui-steps-finish-description-color, var(--nutui-gray-6, #595959))}.nut-steps-dot .nut-step-head{margin:var(--nutui-steps-dot-head-margin, 10px 0)}.nut-steps-dot .nut-step-line{top:7px}.nut-steps-dot .nut-step-icon{width:var(--nutui-steps-dot-icon-width, 6px);height:var(--nutui-steps-dot-icon-height, 6px);border:var(--nutui-steps-dot-icon-border, 2px solid var(--nutui-color-primary-text, #ffffff));border-radius:50%;box-sizing:content-box}.nut-steps-dot .nut-step-wait .nut-step-icon{background-color:var(--nutui-steps-dot-wait-icon-bg-color, var(--nutui-steps-wait-icon-bg-color, var(--nutui-gray-5, #8c8c8c)))}.nut-steps-dot .nut-step-finish .nut-step-icon{background-color:var(--nutui-steps-finish-icon-bg-color, var(--nutui-color-primary-text, #ffffff));border-color:var(--nutui-steps-dot-finish-icon-bg-color, var(--nutui-steps-finish-icon-color, var(--nutui-color-primary, #fa2c19)))}.nut-steps-dot .nut-step-process .nut-step-icon{position:relative}.nut-steps-dot .nut-step-process .nut-step-icon:before{content:"";display:inline-block;position:absolute;left:50%;top:50%;margin-left:-7px;margin-top:-7px;width:14px;height:14px;background-color:var(--nutui-steps-process-icon-before-bg-color, var(--nutui-color-primary-stop-2, #fa2c19));border-radius:50%;opacity:.23}.nut-steps-horizontal.nut-steps-dot .nut-step-line{top:50%;bottom:-50%}.nut-steps-vertical .nut-step{display:flex;height:33.34%}.nut-steps-vertical .nut-step-line{position:absolute;display:inline-block;width:1px;height:var(--nutui-steps-base-line-width, 70%);background:var(--nutui-steps-base-line-background, var(--nutui-gray-5, #8c8c8c));top:calc(var(--nutui-steps-base-icon-height, 25px) + (100% - var(--nutui-steps-base-line-width, 70%) - var(--nutui-steps-base-icon-margin-bottom, 12px)) / 2);left:calc(50% - 1px)}.nut-steps-vertical.nut-steps-dot .nut-step-line{top:calc(var(--nutui-steps-dot-icon-height, 6px) + (100% - var(--nutui-steps-base-line-width, 70%)) / 2)}.nut-steps-vertical .nut-step-main{display:inline-block;padding-left:6%;text-align:left}.nut-steps{display:flex}.nut-steps-vertical{height:100%;flex-flow:column}

package/dist/esm/radio2.js

@@ -100,11 +100,11 @@ var Radio = function Radio2(props) {
       className: classNames(color())
     });
   };
+  var renderByShape = function renderByShape2(shape2) {
+    return shape2 === "button" ? renderButton() : React__default.createElement(React__default.Fragment, null, renderIcon(), renderLabel());
+  };
   var renderRadioItem = function renderRadioItem2() {
-    if (shape === "button") {
-      return renderButton();
-    }
-    return React__default.createElement(React__default.Fragment, null, renderIcon(), renderLabel());
+    return renderByShape(context && context.shape ? context.shape : shape);
   };
   var handleClick = function handleClick2(e) {
     if (disabled || checkedStatement)

package/dist/esm/types/src/packages/navbar/navbar.taro.d.ts

@@ -1,4 +1,5 @@
 import React, { FunctionComponent } from 'react';
+import { ITouchEvent } from '@tarojs/components';
 import { BasicComponent } from '@/utils/typings';
 export interface NavBarProps extends BasicComponent {
     left: React.ReactNode;
@@ -9,7 +10,7 @@ export interface NavBarProps extends BasicComponent {
     safeAreaInsetTop: boolean;
     placeholder: boolean;
     zIndex: number | string;
-    onBackClick: (e: React.MouseEvent<HTMLElement>) => void;
+    onBackClick: (e: ITouchEvent) => void;
     children?: React.ReactNode;
 }
 export declare const NavBar: FunctionComponent<Partial<NavBarProps>>;

package/dist/esm/types/src/packages/radio/index.d.ts

@@ -1,3 +1,4 @@
 import { Radio } from './radio';
-export type { RadioProps, RadioShape, RadioPosition } from './radio';
+export type { RadioProps } from './radio';
+export type { RadioShape, RadioPosition } from './types';
 export default Radio;

package/dist/esm/types/src/packages/radio/index.taro.d.ts

@@ -1,3 +1,4 @@
 import { Radio } from './radio.taro';
-export type { RadioProps, RadioPosition, RadioShape } from './radio';
+export type { RadioProps } from './radio.taro';
+export type { RadioShape, RadioPosition } from './types';
 export default Radio;

package/dist/esm/types/src/packages/radio/radio.d.ts

@@ -1,8 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import RadioGroup from '@/packages/radiogroup';
 import { BasicComponent } from '@/utils/typings';
-export type RadioShape = 'button' | 'round';
-export type RadioPosition = 'right' | 'left';
+import { RadioPosition, RadioShape } from '@/packages/radio/types';
 export interface RadioProps extends BasicComponent {
     disabled: boolean;
     checked: boolean;

package/dist/esm/types/src/packages/radio/radio.taro.d.ts

@@ -1,8 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import RadioGroup from '@/packages/radiogroup/index.taro';
 import { BasicComponent } from '@/utils/typings';
-export type RadioShape = 'button' | 'round';
-export type RadioPosition = 'right' | 'left';
+import { RadioPosition, RadioShape } from '@/packages/radio/types';
 export interface RadioProps extends BasicComponent {
     disabled: boolean;
     checked: boolean;

package/dist/esm/types/src/packages/radio/types.d.ts

@@ -0,0 +1,2 @@
+export type RadioShape = 'button' | 'round';
+export type RadioPosition = 'right' | 'left';

package/dist/esm/types/src/packages/radiogroup/context.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
+import { RadioGroupShape } from './types';
 declare const _default: React.Context<{
     labelPosition: 'left' | 'right';
     disabled: boolean | undefined;
     value: string | number;
+    shape: RadioGroupShape | undefined;
     check: (value: string | number) => void;
     uncheck: () => void;
 } | null>;

package/dist/esm/types/src/packages/radiogroup/index.d.ts

@@ -1,2 +1,3 @@
 import { RadioGroup } from './radiogroup';
+export type { RadioGroupOptionType, RadioGroupPosition, RadioGroupDirection, RadioGroupShape, } from './types';
 export default RadioGroup;

package/dist/esm/types/src/packages/radiogroup/index.taro.d.ts

@@ -1,2 +1,3 @@
 import { RadioGroup } from './radiogroup.taro';
+export type { RadioGroupOptionType, RadioGroupPosition, RadioGroupDirection, RadioGroupShape, } from './types';
 export default RadioGroup;

package/dist/esm/types/src/packages/radiogroup/radiogroup.d.ts

@@ -1,15 +1,13 @@
 import React from 'react';
-import { RadioGroupOptionType } from './types';
-type Position = 'left' | 'right';
-type Direction = 'horizontal' | 'vertical';
+import { RadioGroupDirection, RadioGroupOptionType, RadioGroupPosition, RadioGroupShape } from './types';
 export interface RadioGroupProps {
     value?: string | number;
     defaultValue?: string | number;
-    labelPosition: Position;
-    direction: Direction;
+    labelPosition: RadioGroupPosition;
+    direction: RadioGroupDirection;
+    shape?: RadioGroupShape;
     disabled?: boolean;
     options: RadioGroupOptionType[];
     onChange: (value: string | number) => void;
 }
 export declare const RadioGroup: React.ForwardRefExoticComponent<Partial<RadioGroupProps> & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<unknown>>;
-export {};

package/dist/esm/types/src/packages/radiogroup/radiogroup.taro.d.ts

@@ -1,15 +1,13 @@
 import React from 'react';
-import { RadioGroupOptionType } from './types';
-type Position = 'left' | 'right';
-type Direction = 'horizontal' | 'vertical';
+import { RadioGroupDirection, RadioGroupOptionType, RadioGroupPosition, RadioGroupShape } from './types';
 export interface RadioGroupProps {
     value?: string | number;
     defaultValue?: string | number;
-    labelPosition: Position;
-    direction: Direction;
+    labelPosition: RadioGroupPosition;
+    direction: RadioGroupDirection;
+    shape?: RadioGroupShape;
     disabled?: boolean;
     options: RadioGroupOptionType[];
     onChange: (value: string | number) => void;
 }
 export declare const RadioGroup: React.ForwardRefExoticComponent<Partial<RadioGroupProps> & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<unknown>>;
-export {};

package/dist/esm/types/src/packages/radiogroup/types.d.ts

@@ -2,5 +2,9 @@ export interface RadioGroupOptionType {
     label: string;
     value: string;
     disabled?: boolean;
+    shape?: RadioGroupShape;
     onChange?: (checked: boolean) => void;
 }
+export type RadioGroupPosition = 'left' | 'right';
+export type RadioGroupDirection = 'horizontal' | 'vertical';
+export type RadioGroupShape = 'button' | 'round';

package/dist/esm/types/src/packages/rate/rate.d.ts

@@ -10,6 +10,8 @@ export interface RateProps extends BasicComponent {
     disabled: boolean;
     readOnly: boolean;
     allowHalf: boolean;
+    touchable: boolean;
     onChange: (value: number) => void;
+    onTouchEnd: (e: TouchEvent, value: number) => void;
 }
 export declare const Rate: FunctionComponent<Partial<RateProps>>;

package/dist/esm/types/src/packages/rate/rate.taro.d.ts

@@ -10,6 +10,8 @@ export interface RateProps extends BasicComponent {
     disabled: boolean;
     readOnly: boolean;
     allowHalf: boolean;
+    touchable: boolean;
     onChange: (value: number) => void;
+    onTouchEnd: (e: TouchEvent, value: number) => void;
 }
 export declare const Rate: FunctionComponent<Partial<RateProps>>;

package/dist/esm/types/src/packages/video/video.taro.d.ts

@@ -1,7 +1,6 @@
-import React, { FunctionComponent } from 'react';
-import { BaseEventOrig } from '@tarojs/components';
-import { BasicComponent } from '@/utils/typings';
-export interface VideoProps extends BasicComponent {
+import { FunctionComponent } from 'react';
+import { VideoProps as VideoPropsTaro, BaseEventOrig } from '@tarojs/components';
+export interface VideoProps extends Omit<VideoPropsTaro, 'src'> {
     source: {
         type: string;
         src: string;
@@ -18,4 +17,4 @@ export interface VideoProps extends BasicComponent {
     onPause: (event: BaseEventOrig<any>) => void;
     onPlayEnd: (event: BaseEventOrig<any>) => void;
 }
-export declare const Video: FunctionComponent<Partial<VideoProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onPause' | 'onPlay'>>;
+export declare const Video: FunctionComponent<Partial<VideoProps>>;

package/dist/esm/use-refs.js

@@ -0,0 +1,17 @@
+import React__default from "react";
+function useRefs() {
+  var refs = React__default.useRef([]);
+  var setRefs = React__default.useCallback(function(index) {
+    return function(el) {
+      if (el)
+        refs.current[index] = el;
+    };
+  }, []);
+  var reset = React__default.useCallback(function() {
+    refs.current = [];
+  }, []);
+  return [refs.current, setRefs, reset];
+}
+export {
+  useRefs as u
+};

package/dist/locales/base.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.3.8-beta.0 Tue Jan 23 2024 11:21:40 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.3.8 Fri Jan 26 2024 15:14:38 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/en-US.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.3.8-beta.0 Tue Jan 23 2024 11:21:40 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.3.8 Fri Jan 26 2024 15:14:38 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/id-ID.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.3.8-beta.0 Tue Jan 23 2024 11:21:40 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.3.8 Fri Jan 26 2024 15:14:38 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/tr-TR.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.3.8-beta.0 Tue Jan 23 2024 11:21:40 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.3.8 Fri Jan 26 2024 15:14:38 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */