@nutui/nutui-react-taro 3.0.20 → 3.0.22-cpp

package/dist/cjs/packages/searchbar/searchbar.js

@@ -34,7 +34,9 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     left: '',
     right: '',
     rightIn: '',
-    leftIn: /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Search, null),
+    leftIn: /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Search, {
+        ariaHidden: true
+    }),
     tag: false
 });
 var SearchBar = function SearchBar(props) {
@@ -189,12 +191,15 @@ var SearchBar = function SearchBar(props) {
                 onClick: function onClick(e) {
                     return onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, e);
                 }
-            }, item, /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Close, null));
+            }, item, /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Close, {
+                ariaLabel: locale.close
+            }));
         }));
     }, [
         value,
         onItemClick,
-        innerTag
+        innerTag,
+        locale.close
     ]);
     var renderLeftIn = (0, _react.useCallback)(function() {
         if (!leftIn) return null;
@@ -207,11 +212,16 @@ var SearchBar = function SearchBar(props) {
     var renderLeft = (0, _react.useCallback)(function() {
         if (!backable && !left) return null;
         return /*#__PURE__*/ _react.default.createElement(_components.View, {
-            className: "".concat(classPrefix, "-left")
-        }, backable ? /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.ArrowLeft, null) : left);
+            className: "".concat(classPrefix, "-left"),
+            ariaRole: backable ? 'button' : undefined,
+            ariaLabel: backable ? locale.back : undefined
+        }, backable ? /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.ArrowLeft, {
+            ariaHidden: true
+        }) : left);
     }, [
         backable,
-        left
+        left,
+        locale
     ]);
     var renderRightIn = (0, _react.useCallback)(function() {
         if (!rightIn) return null;
@@ -238,13 +248,17 @@ var SearchBar = function SearchBar(props) {
                 visibility: "".concat(!innerTag && value && clearable ? 'visible' : 'hidden')
             },
             onClick: clearaVal,
-            "aria-label": "清除"
-        }, /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.MaskClose, null));
+            ariaRole: "button",
+            ariaLabel: locale.clear
+        }, /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.MaskClose, {
+            ariaHidden: true
+        }));
     }, [
         value,
         clearable,
         clearaVal,
-        innerTag
+        innerTag,
+        locale
     ]);
     var onConfirm = function onConfirm() {
         onSearch && onSearch(value);

package/dist/cjs/packages/shortpassword/shortpassword.js

@@ -41,7 +41,7 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
 });
 var InternalShortPassword = function InternalShortPassword(props, ref) {
     var locale = (0, _index1.useConfig)().locale;
-    var _ref = (0, _object_spread._)({}, defaultProps, props), title = _ref.title, description = _ref.description, tips = _ref.tips, outerVisible = _ref.visible, value = _ref.value, error = _ref.error, hideFooter = _ref.hideFooter, length = _ref.length, plain = _ref.plain, style = _ref.style, className = _ref.className, closeable = _ref.closeable, autoFocus = _ref.autoFocus, round = _ref.round, onFocus = _ref.onFocus, onChange = _ref.onChange, onConfirm = _ref.onConfirm, onTips = _ref.onTips, onCancel = _ref.onCancel, onClose = _ref.onClose, onComplete = _ref.onComplete, onOverlayClick = _ref.onOverlayClick, onCloseIconClick = _ref.onCloseIconClick, rest = (0, _object_without_properties._)(_ref, [
+    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), title = _$_object_spread.title, description = _$_object_spread.description, tips = _$_object_spread.tips, outerVisible = _$_object_spread.visible, value = _$_object_spread.value, error = _$_object_spread.error, hideFooter = _$_object_spread.hideFooter, length = _$_object_spread.length, plain = _$_object_spread.plain, style = _$_object_spread.style, className = _$_object_spread.className, closeable = _$_object_spread.closeable, autoFocus = _$_object_spread.autoFocus, round = _$_object_spread.round, onFocus = _$_object_spread.onFocus, onChange = _$_object_spread.onChange, onConfirm = _$_object_spread.onConfirm, onTips = _$_object_spread.onTips, onCancel = _$_object_spread.onCancel, onClose = _$_object_spread.onClose, onComplete = _$_object_spread.onComplete, onOverlayClick = _$_object_spread.onOverlayClick, onCloseIconClick = _$_object_spread.onCloseIconClick, rest = (0, _object_without_properties._)(_$_object_spread, [
         "title",
         "description",
         "tips",

package/dist/cjs/packages/shortpassword/style/style.harmony.css

@@ -71,7 +71,7 @@
   align-items: center;
   justify-content: center;
   border-bottom: var(--nutui-popup-title-border-bottom, 0);
-  padding: var(--nutui-popup-title-padding, 16px);
+  padding: var(--nutui-popup-title-padding, 11px);
   position: relative;
 }
 .nut-popup-title-wrapper {
@@ -84,7 +84,6 @@
   color: var(--nutui-color-title, #1a1a1a);
   font-weight: var(--nutui-font-weight-bold, 600);
   font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
-  line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
 }
 .nut-popup-title-description {
   color: var(--nutui-color-text, #505259);
@@ -96,13 +95,13 @@
 }
 .nut-popup-title-left {
   position: absolute;
-  top: var(--nutui-popup-title-padding, 16px);
-  left: var(--nutui-popup-title-padding, 16px);
+  top: var(--nutui-popup-title-padding, 11px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 .nut-popup-title-right {
   position: absolute;
-  top: var(--nutui-popup-title-padding, 16px);
-  right: var(--nutui-popup-title-padding, 16px);
+  top: var(--nutui-popup-title-padding, 11px);
+  right: var(--nutui-popup-title-padding, 11px);
   z-index: 1;
   width: var(--nutui-popup-icon-size, 20px);
   height: var(--nutui-popup-icon-size, 20px);
@@ -113,20 +112,22 @@
   opacity: 0.7;
 }
 .nut-popup-title-right-top-left {
-  top: var(--nutui-popup-title-padding, 16px);
-  left: var(--nutui-popup-title-padding, 16px);
+  top: var(--nutui-popup-title-padding, 11px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 .nut-popup-title-right-bottom-left {
-  bottom: var(--nutui-popup-title-padding, 16px);
-  left: var(--nutui-popup-title-padding, 16px);
+  bottom: var(--nutui-popup-title-padding, 11px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 .nut-popup-title-right-bottom-right {
-  right: var(--nutui-popup-title-padding, 16px);
-  bottom: var(--nutui-popup-title-padding, 16px);
+  right: var(--nutui-popup-title-padding, 11px);
+  bottom: var(--nutui-popup-title-padding, 11px);
 }
 .nut-popup-center {
   top: 50%;
   left: 50%;
+  right: auto;
+  bottom: auto;
   min-height: 10%;
   max-width: 295px;
   transform: translate(-50%, -50%);
@@ -137,6 +138,8 @@
 .nut-popup-bottom {
   bottom: 0;
   left: 0;
+  right: auto;
+  top: auto;
   width: 100%;
 }
 .nut-popup-bottom.nut-popup-round {
@@ -148,6 +151,8 @@
 .nut-popup-right {
   top: 0;
   right: 0;
+  left: auto;
+  bottom: auto;
   width: 100px;
   height: 100%;
 }
@@ -157,6 +162,8 @@
 .nut-popup-left {
   top: 0;
   left: 0;
+  right: auto;
+  bottom: auto;
   width: 100px;
   height: 100%;
 }
@@ -166,6 +173,8 @@
 .nut-popup-top {
   top: 0;
   left: 0;
+  right: auto;
+  bottom: auto;
   width: 100%;
 }
 .nut-popup-top.nut-popup-round {
@@ -242,6 +251,9 @@
   }
 }
 @keyframes popup-slide-top-exit {
+  from {
+    transform: translate3d(0, 0%, 0);
+  }
   to {
     transform: translate3d(0, -100%, 0);
   }
@@ -266,6 +278,9 @@
   }
 }
 @keyframes popup-slide-right-exit {
+  from {
+    transform: translate3d(0%, 0, 0);
+  }
   to {
     transform: translate3d(100%, 0, 0);
   }
@@ -290,6 +305,9 @@
   }
 }
 @keyframes slide-bottom-exit {
+  from {
+    transform: translate3d(0, 0%, 0);
+  }
   to {
     transform: translate3d(0, 100%, 0);
   }
@@ -314,6 +332,9 @@
   }
 }
 @keyframes popup-slide-left-exit {
+  from {
+    transform: translate3d(0%, 0, 0);
+  }
   to {
     transform: translate3d(-100%, 0, 0);
   }
@@ -339,27 +360,27 @@
 [dir=rtl] .nut-popup-title-left,
 .nut-rtl .nut-popup-title-left {
   left: auto;
-  right: var(--nutui-popup-title-padding, 16px);
+  right: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title-right,
 .nut-rtl .nut-popup-title-right {
   right: auto;
-  left: var(--nutui-popup-title-padding, 16px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title-right-top-left,
 .nut-rtl .nut-popup-title-right-top-left {
   left: auto;
-  right: var(--nutui-popup-title-padding, 16px);
+  right: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title-right-bottom-left,
 .nut-rtl .nut-popup-title-right-bottom-left {
   left: auto;
-  right: var(--nutui-popup-title-padding, 16px);
+  right: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title-right-bottom-right,
 .nut-rtl .nut-popup-title-right-bottom-right {
   right: auto;
-  left: var(--nutui-popup-title-padding, 16px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title .nut-icon-ArrowLeft,
 .nut-rtl .nut-popup-title .nut-icon-ArrowLeft {

package/dist/cjs/packages/sidebar/sidebar.js

@@ -196,13 +196,13 @@ var SideBar = function SideBar(props) {
         className: "".concat(classPrefix, "-content"),
         style: getContentStyle()
     }, _react.default.Children.map(children, function(child, idx) {
+        var _child_props_value;
         if (!/*#__PURE__*/ _react.default.isValidElement(child)) {
             return null;
         }
         var childProps = (0, _object_spread_props._)((0, _object_spread._)({}, child.props), {
             active: value === child.props.value
         });
-        var _child_props_value;
         if (String(value) !== String((_child_props_value = child.props.value) !== null && _child_props_value !== void 0 ? _child_props_value : idx)) {
             childProps = (0, _object_spread._)({}, childProps);
         }

package/dist/cjs/packages/signature/signature.js

@@ -1,4 +1,4 @@
-/* eslint-disable react/no-unknown-property */ "use strict";
+"use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
@@ -24,7 +24,7 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     strokeStyle: '#1A1A1A'
 });
 var InternalSignature = function InternalSignature(props, ref) {
-    var _ref = (0, _object_spread._)({}, defaultProps, props), canvasId = _ref.canvasId, type = _ref.type, lineWidth = _ref.lineWidth, strokeStyle = _ref.strokeStyle, className = _ref.className, style = _ref.style, onConfirm = _ref.onConfirm, onClear = _ref.onClear, rest = (0, _object_without_properties._)(_ref, [
+    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), canvasId = _$_object_spread.canvasId, type = _$_object_spread.type, lineWidth = _$_object_spread.lineWidth, strokeStyle = _$_object_spread.strokeStyle, className = _$_object_spread.className, style = _$_object_spread.style, onConfirm = _$_object_spread.onConfirm, onClear = _$_object_spread.onClear, rest = (0, _object_without_properties._)(_$_object_spread, [
         "canvasId",
         "type",
         "lineWidth",

package/dist/cjs/packages/skeleton/skeleton.js

@@ -42,7 +42,7 @@ var Skeleton = function Skeleton(props) {
         };
         return {};
     };
-    var _ref = (0, _object_spread._)({}, defaultProps, props), className = _ref.className, width = _ref.width, height = _ref.height, shape = _ref.shape, animated = _ref.animated, rows = _ref.rows, visible = _ref.visible, size = _ref.size, duration = _ref.duration, children = _ref.children, rest = (0, _object_without_properties._)(_ref, [
+    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), className = _$_object_spread.className, width = _$_object_spread.width, height = _$_object_spread.height, shape = _$_object_spread.shape, animated = _$_object_spread.animated, rows = _$_object_spread.rows, visible = _$_object_spread.visible, size = _$_object_spread.size, duration = _$_object_spread.duration, children = _$_object_spread.children, rest = (0, _object_without_properties._)(_$_object_spread, [
         "className",
         "width",
         "height",

package/dist/cjs/packages/step/step.js

@@ -58,8 +58,7 @@ var Step = function Step(props) {
         type,
         className,
         description,
-        classPrefix,
-        parentType
+        classPrefix
     ]);
     // 头部渲染
     var renderHeadType = (0, _react.useMemo)(function() {
@@ -82,10 +81,7 @@ var Step = function Step(props) {
     }, [
         type,
         value,
-        icon,
-        parentIcon,
-        parentType,
-        classPrefix
+        icon
     ]);
     // 内容渲染
     var renderContent = (0, _react.useMemo)(function() {
@@ -99,8 +95,7 @@ var Step = function Step(props) {
         }, description));
     }, [
         title,
-        description,
-        classPrefix
+        description
     ]);
     return /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: classes,

package/dist/cjs/packages/step/style/step.scss

@@ -86,11 +86,9 @@
   }
 
   &-title {
-    height: 14px;
     line-height: 14px;
     font-size: $steps-base-title-font-size;
     color: $steps-base-title-color;
-    overflow: hidden;
     white-space: nowrap;
   }
 

package/dist/cjs/packages/step/style/style.css

@@ -73,11 +73,9 @@
   z-index: 1;
 }
 .nut-step-title {
-  height: 14px;
   line-height: 14px;
   font-size: var(--nutui-steps-base-title-font-size, var(--nutui-font-size-s, 12px));
   color: var(--nutui-steps-base-title-color, var(--nutui-color-title, #1a1a1a));
-  overflow: hidden;
   white-space: nowrap;
 }
 .nut-step-description {

package/dist/cjs/packages/step/style/style.harmony.css

@@ -73,11 +73,9 @@
   z-index: 1;
 }
 .nut-step-title {
-  height: 14px;
   line-height: 14px;
   font-size: var(--nutui-steps-base-title-font-size, var(--nutui-font-size-s, 12px));
   color: var(--nutui-steps-base-title-color, var(--nutui-color-title, #1a1a1a));
-  overflow: hidden;
   white-space: nowrap;
 }
 .nut-step-description {

package/dist/cjs/packages/step/style-jmapp/step.scss

@@ -86,11 +86,9 @@
   }
 
   &-title {
-    height: 14px;
     line-height: 14px;
     font-size: $steps-base-title-font-size;
     color: $steps-base-title-color;
-    overflow: hidden;
     white-space: nowrap;
   }
 

package/dist/cjs/packages/step/style-jmapp/style.css

@@ -73,11 +73,9 @@
   z-index: 1;
 }
 .nut-step-title {
-  height: 14px;
   line-height: 14px;
   font-size: var(--nutui-steps-base-title-font-size, var(--nutui-font-text-small));
   color: var(--nutui-steps-base-title-color, var(--nutui-color-title));
-  overflow: hidden;
   white-space: nowrap;
 }
 .nut-step-description {

package/dist/cjs/packages/step/style-jrkf/step.scss

@@ -86,11 +86,9 @@
   }
 
   &-title {
-    height: 14px;
     line-height: 14px;
     font-size: $steps-base-title-font-size;
     color: $steps-base-title-color;
-    overflow: hidden;
     white-space: nowrap;
   }
 

package/dist/cjs/packages/step/style-jrkf/style.css

@@ -73,11 +73,9 @@
   z-index: 1;
 }
 .nut-step-title {
-  height: 14px;
   line-height: 14px;
   font-size: var(--nutui-steps-base-title-font-size, var(--nutui-font-text-small));
   color: var(--nutui-steps-base-title-color, var(--nutui-color-title));
-  overflow: hidden;
   white-space: nowrap;
 }
 .nut-step-description {

package/dist/cjs/packages/steps/style/steps.scss

@@ -128,7 +128,7 @@
 
         &-head {
           justify-content: center;
-          margin-bottom: 6px;
+          margin-bottom: 5px;
 
           &-dot-wrap,
           &-icon-wrap,
@@ -151,7 +151,14 @@
         &-main {
           align-items: center;
           margin-left: 0;
-          margin-top: 2px;
+        }
+
+        &-title {
+          height: auto;
+          line-height: 20px;
+          white-space: normal;
+          overflow-wrap: break-word;
+          text-align: center;
         }
       }
 
@@ -212,7 +219,7 @@
       &-head {
         align-items: center;
         justify-content: center;
-        height: 18px;
+        height: 20px;
 
         &-icon {
           width: $steps-vertical-head-icon-size;

package/dist/cjs/packages/steps/style/style.css

@@ -95,7 +95,7 @@
 }
 .nut-steps-horizontal-double .nut-step-head {
   justify-content: center;
-  margin-bottom: 6px;
+  margin-bottom: 5px;
 }
 .nut-steps-horizontal-double .nut-step-head-dot-wrap, .nut-steps-horizontal-double .nut-step-head-icon-wrap, .nut-steps-horizontal-double .nut-step-head-text-wrap {
   background-color: var(--nutui-steps-background-color, #ffffff);
@@ -112,7 +112,13 @@
 .nut-steps-horizontal-double .nut-step-main {
   align-items: center;
   margin-left: 0;
-  margin-top: 2px;
+}
+.nut-steps-horizontal-double .nut-step-title {
+  height: auto;
+  line-height: 20px;
+  white-space: normal;
+  overflow-wrap: break-word;
+  text-align: center;
 }
 .nut-steps-horizontal-double.nut-steps-horizontal-icon .nut-step-head, .nut-steps-horizontal-double.nut-steps-horizontal-icon .nut-step-line {
   height: var(--nutui-steps-base-head-icon-size-right, 20px);
@@ -131,7 +137,7 @@
   flex-direction: column;
 }
 .nut-steps-vertical .nut-step {
-  padding-bottom: var(--nutui-steps-vertical-item-padding-bottom, 13px);
+  padding-bottom: var(--nutui-steps-vertical-item-padding-bottom, 12px);
 }
 .nut-steps-vertical .nut-step-last {
   padding-bottom: 0 !important;
@@ -147,7 +153,7 @@
 .nut-steps-vertical .nut-step-head {
   align-items: center;
   justify-content: center;
-  height: 18px;
+  height: 20px;
 }
 .nut-steps-vertical .nut-step-head-icon {
   width: var(--nutui-steps-vertical-item-icon-size, 20px);
@@ -166,18 +172,18 @@
 .nut-steps-vertical .nut-step-title {
   display: flex;
   align-items: center;
-  height: var(--nutui-steps-vertical-line-height, 18px);
+  height: var(--nutui-steps-vertical-line-height, 20px);
   font-size: var(--nutui-steps-vertical-title-font-size, var(--nutui-font-size-l, 15px));
   /* #ifndef dynamic*/
   overflow: auto;
   /* #endif */
   font-weight: 500;
-  margin-bottom: var(--nutui-steps-vertical-title-margin-bottom, 4px);
+  margin-bottom: var(--nutui-steps-vertical-title-margin-bottom, 3px);
 }
 .nut-steps-vertical .nut-step-description {
   margin: var(--nutui-steps-vertical-description-margin, 0 0 1px);
   height: auto;
-  line-height: var(--nutui-steps-vertical-line-height, 18px);
+  line-height: var(--nutui-steps-vertical-line-height, 20px);
   color: var(--nutui-color-title, #1a1a1a);
   font-size: var(--nutui-steps-vertical-description-font-size, var(--nutui-font-size-base, 14px));
   box-sizing: border-box;

package/dist/cjs/packages/steps/style/style.harmony.css

@@ -73,11 +73,9 @@
   z-index: 1;
 }
 .nut-step-title {
-  height: 14px;
   line-height: 14px;
   font-size: var(--nutui-steps-base-title-font-size, var(--nutui-font-size-s, 12px));
   color: var(--nutui-steps-base-title-color, var(--nutui-color-title, #1a1a1a));
-  overflow: hidden;
   white-space: nowrap;
 }
 .nut-step-description {
@@ -215,7 +213,7 @@
 }
 .nut-steps-horizontal-double .nut-step-head {
   justify-content: center;
-  margin-bottom: 6px;
+  margin-bottom: 5px;
 }
 .nut-steps-horizontal-double .nut-step-head-dot-wrap, .nut-steps-horizontal-double .nut-step-head-icon-wrap, .nut-steps-horizontal-double .nut-step-head-text-wrap {
   background-color: var(--nutui-steps-background-color, #ffffff);
@@ -232,7 +230,13 @@
 .nut-steps-horizontal-double .nut-step-main {
   align-items: center;
   margin-left: 0;
-  margin-top: 2px;
+}
+.nut-steps-horizontal-double .nut-step-title {
+  height: auto;
+  line-height: 20px;
+  white-space: normal;
+  overflow-wrap: break-word;
+  text-align: center;
 }
 .nut-steps-horizontal-double.nut-steps-horizontal-icon .nut-step-head, .nut-steps-horizontal-double.nut-steps-horizontal-icon .nut-step-line {
   height: var(--nutui-steps-base-head-icon-size-right, 20px);
@@ -251,7 +255,7 @@
   flex-direction: column;
 }
 .nut-steps-vertical .nut-step {
-  padding-bottom: var(--nutui-steps-vertical-item-padding-bottom, 13px);
+  padding-bottom: var(--nutui-steps-vertical-item-padding-bottom, 12px);
 }
 .nut-steps-vertical .nut-step-last {
   padding-bottom: 0 !important;
@@ -267,7 +271,7 @@
 .nut-steps-vertical .nut-step-head {
   align-items: center;
   justify-content: center;
-  height: 18px;
+  height: 20px;
 }
 .nut-steps-vertical .nut-step-head-icon {
   width: var(--nutui-steps-vertical-item-icon-size, 20px);
@@ -286,18 +290,18 @@
 .nut-steps-vertical .nut-step-title {
   display: flex;
   align-items: center;
-  height: var(--nutui-steps-vertical-line-height, 18px);
+  height: var(--nutui-steps-vertical-line-height, 20px);
   font-size: var(--nutui-steps-vertical-title-font-size, var(--nutui-font-size-l, 15px));
   /* #ifndef dynamic*/
   overflow: auto;
   /* #endif */
   font-weight: 500;
-  margin-bottom: var(--nutui-steps-vertical-title-margin-bottom, 4px);
+  margin-bottom: var(--nutui-steps-vertical-title-margin-bottom, 3px);
 }
 .nut-steps-vertical .nut-step-description {
   margin: var(--nutui-steps-vertical-description-margin, 0 0 1px);
   height: auto;
-  line-height: var(--nutui-steps-vertical-line-height, 18px);
+  line-height: var(--nutui-steps-vertical-line-height, 20px);
   color: var(--nutui-color-title, #1a1a1a);
   font-size: var(--nutui-steps-vertical-description-font-size, var(--nutui-font-size-base, 14px));
   box-sizing: border-box;

package/dist/cjs/packages/steps/style-jmapp/steps.scss

@@ -128,7 +128,7 @@
 
         &-head {
           justify-content: center;
-          margin-bottom: 6px;
+          margin-bottom: 5px;
 
           &-dot-wrap,
           &-icon-wrap,
@@ -151,7 +151,14 @@
         &-main {
           align-items: center;
           margin-left: 0;
-          margin-top: 2px;
+        }
+
+        &-title {
+          height: auto;
+          line-height: 20px;
+          white-space: normal;
+          overflow-wrap: break-word;
+          text-align: center;
         }
       }
 
@@ -212,7 +219,7 @@
       &-head {
         align-items: center;
         justify-content: center;
-        height: 18px;
+        height: 20px;
 
         &-icon {
           width: $steps-vertical-head-icon-size;

package/dist/cjs/packages/steps/style-jmapp/style.css

@@ -95,7 +95,7 @@
 }
 .nut-steps-horizontal-double .nut-step-head {
   justify-content: center;
-  margin-bottom: 6px;
+  margin-bottom: 5px;
 }
 .nut-steps-horizontal-double .nut-step-head-dot-wrap, .nut-steps-horizontal-double .nut-step-head-icon-wrap, .nut-steps-horizontal-double .nut-step-head-text-wrap {
   background-color: var(--nutui-steps-background-color, #ffffff);
@@ -112,7 +112,13 @@
 .nut-steps-horizontal-double .nut-step-main {
   align-items: center;
   margin-left: 0;
-  margin-top: 2px;
+}
+.nut-steps-horizontal-double .nut-step-title {
+  height: auto;
+  line-height: 20px;
+  white-space: normal;
+  overflow-wrap: break-word;
+  text-align: center;
 }
 .nut-steps-horizontal-double.nut-steps-horizontal-icon .nut-step-head, .nut-steps-horizontal-double.nut-steps-horizontal-icon .nut-step-line {
   height: var(--nutui-steps-base-head-icon-size-right, 20px);
@@ -147,7 +153,7 @@
 .nut-steps-vertical .nut-step-head {
   align-items: center;
   justify-content: center;
-  height: 18px;
+  height: 20px;
 }
 .nut-steps-vertical .nut-step-head-icon {
   width: var(--nutui-steps-vertical-item-icon-size, 20px);