@nutui/nutui-react-taro 3.0.3 → 3.0.5

package/dist/es/packages/inputnumber/inputnumber.js

@@ -239,7 +239,7 @@ export var InputNumber = function(props) {
         onClick: handleReduce
     }, /*#__PURE__*/ React.createElement(Minus, {
         size: 10,
-        className: classNames("".concat(classPrefix, "-icon ").concat(classPrefix, "-icon-minus"), _define_property({}, "".concat(classPrefix, "-icon-disabled"), shadowValue === min || disabled))
+        className: classNames("".concat(classPrefix, "-icon ").concat(classPrefix, "-icon-minus"), _define_property({}, "".concat(classPrefix, "-icon-disabled"), Number(shadowValue) <= Number(min) || disabled))
     })), /*#__PURE__*/ React.createElement("input", {
         className: classNames("".concat(classPrefix, "-input"), _define_property({}, "".concat(classPrefix, "-input-disabled"), disabled)),
         type: type,
@@ -256,7 +256,7 @@ export var InputNumber = function(props) {
         onClick: handlePlus
     }, /*#__PURE__*/ React.createElement(Plus, {
         size: 10,
-        className: classNames("".concat(classPrefix, "-icon ").concat(classPrefix, "-icon-plus"), _define_property({}, "".concat(classPrefix, "-icon-disabled"), shadowValue === max || disabled))
+        className: classNames("".concat(classPrefix, "-icon ").concat(classPrefix, "-icon-plus"), _define_property({}, "".concat(classPrefix, "-icon-disabled"), Number(shadowValue) >= Number(max) || disabled))
     })));
 };
 InputNumber.displayName = 'NutInputNumber';

package/dist/es/packages/picker/style/style.css

@@ -384,7 +384,6 @@
 }
 
 .nut-pickerview {
-  --nutui-picker-item-height: 36px;
   position: relative;
   display: flex;
   width: 100%;

package/dist/es/packages/pickerview/pickerroller.js

@@ -1,21 +1,29 @@
+import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import React, { useState, useEffect, useRef, useImperativeHandle } from "react";
+import classNames from "classnames";
 import { View } from "@tarojs/components";
 import { useTouch } from "../../hooks/use-touch";
 import { passiveSupported } from "../../utils/supports-passive";
 import { web } from "../../utils/platform-taro";
 import { preventDefault } from "../../utils";
 import { momentum, useStyles } from "./utils";
+import useUuid from "../../hooks/use-uuid";
+import { getRectByTaro } from "../../utils/get-rect-by-taro";
 var InternalPickerRoller = function(props, ref) {
     var _props_keyIndex = props.keyIndex, keyIndex = _props_keyIndex === void 0 ? 0 : _props_keyIndex, _props_options = props.options, options = _props_options === void 0 ? [] : _props_options, _props_threeDimensional = props.threeDimensional, threeDimensional = _props_threeDimensional === void 0 ? true : _props_threeDimensional, _props_duration = props.duration, duration = _props_duration === void 0 ? 1000 : _props_duration, onSelect = props.onSelect, _props_renderLabel = props.renderLabel, renderLabel = _props_renderLabel === void 0 ? function(item) {
         return item.label;
     } : _props_renderLabel;
+    var classPrefix = 'nut-pickerview-roller';
+    var uuid = useUuid();
     var DEFAULT_DURATION = 200;
     var INERTIA_TIME = 300;
     var INERTIA_DISTANCE = 15;
     var ROTATION = 20;
     var touch = useTouch();
-    var _useState = _sliced_to_array(useState(1), 2), currentIndex = _useState[0], setCurrentIndex = _useState[1];
+    var _useState = _sliced_to_array(useState(0), 2), currentIndex = _useState[0], setCurrentIndex = _useState[1];
     var lineSpacing = useRef(36);
     var _useState1 = _sliced_to_array(useState(0), 2), touchTime = _useState1[0], setTouchTime = _useState1[1];
     var _useState2 = _sliced_to_array(useState('0deg'), 2), touchDeg = _useState2[0], setTouchDeg = _useState2[1];
@@ -26,6 +34,7 @@ var InternalPickerRoller = function(props, ref) {
     var _useState4 = _sliced_to_array(useState(0), 2), startY = _useState4[0], setStartY = _useState4[1];
     var transformY = useRef(0);
     var _useState5 = _sliced_to_array(useState(0), 2), scrollDistance = _useState5[0], setScrollDistance = _useState5[1];
+    var _useState6 = _sliced_to_array(useState(web()), 2), isGetLineSpacing = _useState6[0], setGetStatus = _useState6[1];
     var _useStyles = useStyles(touchTime, touchDeg, scrollDistance, lineSpacing, ROTATION), touchRollerStyle = _useStyles.touchRollerStyle, touchTiledStyle = _useStyles.touchTiledStyle, rollerStyle = _useStyles.rollerStyle;
     var isItemHidden = function(index) {
         return index >= currentIndex + 8 || index <= currentIndex - 8;
@@ -50,7 +59,7 @@ var InternalPickerRoller = function(props, ref) {
             var deg1 = Math.min(Math.max(currentDeg, 0), (options.length + 1) * ROTATION);
             if (deg1 >= 0 && deg1 < (options.length + 1) * ROTATION) {
                 applyTransform('', "".concat(deg1, "deg"), undefined, updatedMove);
-                setCurrentIndex(Math.abs(Math.round(updatedMove / lineSpacing.current)) + 1);
+                deg1 > 0 && setCurrentIndex(Math.abs(Math.round(updatedMove / lineSpacing.current)) + 1);
             }
         }
     };
@@ -91,7 +100,7 @@ var InternalPickerRoller = function(props, ref) {
         var index = options.findIndex(function(item) {
             return item.value === selectedValue;
         });
-        setCurrentIndex(index === -1 ? 1 : index + 1);
+        setCurrentIndex(index === -1 ? 0 : index + 1);
         var move = index * lineSpacing.current;
         shouldSelect && selectValue(-move);
         handleMove(-move);
@@ -101,16 +110,69 @@ var InternalPickerRoller = function(props, ref) {
         setTouchTime(0);
         selectValue(scrollDistance);
     };
+    var getReactHeight = /*#__PURE__*/ function() {
+        var _ref = _async_to_generator(function() {
+            var placeholder, placeholderHeight, error;
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        _state.trys.push([
+                            0,
+                            2,
+                            ,
+                            3
+                        ]);
+                        return [
+                            4,
+                            getRectByTaro(rollerRef.current)
+                        ];
+                    case 1:
+                        placeholder = _state.sent();
+                        placeholderHeight = placeholder.height || 0;
+                        return [
+                            2,
+                            placeholderHeight
+                        ];
+                    case 2:
+                        error = _state.sent();
+                        console.error('获取高度失败:', error);
+                        return [
+                            2,
+                            0
+                        ];
+                    case 3:
+                        return [
+                            2
+                        ];
+                }
+            });
+        });
+        return function getReactHeight() {
+            return _ref.apply(this, arguments);
+        };
+    }();
     // lineSpacing.current CSS variable
     useEffect(function() {
         var element = pickerRollerRef.current;
+        var currentLineSpacing;
         if (element && web()) {
             var computedStyle = getComputedStyle(element);
-            var currentLineSpacing = computedStyle.getPropertyValue('--nutui-picker-item-height');
-            !!currentLineSpacing && (lineSpacing.current = parseFloat(currentLineSpacing));
+            currentLineSpacing = computedStyle.getPropertyValue('--nutui-picker-item-height');
+            if (currentLineSpacing) {
+                lineSpacing.current = parseFloat(currentLineSpacing);
+            }
+        } else {
+            getReactHeight().then(function(height) {
+                currentLineSpacing = height;
+                if (currentLineSpacing) {
+                    lineSpacing.current = currentLineSpacing;
+                    setGetStatus(true);
+                }
+            });
         }
     }, [
-        pickerRollerRef.current
+        pickerRollerRef.current,
+        rollerRef.current
     ]);
     useEffect(function() {
         isMoving.current = false;
@@ -152,21 +214,23 @@ var InternalPickerRoller = function(props, ref) {
         className: "nut-pickerview-list",
         ref: pickerRollerRef
     }, /*#__PURE__*/ React.createElement(View, {
-        className: "nut-pickerview-roller",
+        className: classPrefix,
+        id: "".concat(classPrefix, "-").concat(uuid),
         ref: rollerRef,
         style: threeDimensional ? touchRollerStyle() : touchTiledStyle(),
         onTransitionEnd: stopMomentumScroll
     }, threeDimensional && options.map(function(item, index) {
         var _item_value;
-        return /*#__PURE__*/ React.createElement(View, {
-            className: "nut-pickerview-roller-item ".concat(isItemHidden(index + 1) && 'nut-pickerview-roller-item-hidden'),
+        var _obj;
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, isGetLineSpacing ? /*#__PURE__*/ React.createElement(View, {
+            className: classNames("".concat(classPrefix, "-item"), (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-item-hidden"), isItemHidden(index + 1)), _define_property(_obj, "".concat(classPrefix, "-item-active"), index + 1 === currentIndex), _obj)),
             style: rollerStyle(index),
             key: (_item_value = item.value) !== null && _item_value !== void 0 ? _item_value : index
-        }, renderLabel(item));
+        }, renderLabel(item)) : null);
     }), !threeDimensional && options.map(function(item, index) {
         var _item_value;
         return /*#__PURE__*/ React.createElement(View, {
-            className: "nut-pickerview-roller-item-tiled",
+            className: classNames("".concat(classPrefix, "-item-tiled"), _define_property({}, "".concat(classPrefix, "-item-active"), index + 1 === currentIndex)),
             key: (_item_value = item.value) !== null && _item_value !== void 0 ? _item_value : index
         }, renderLabel(item));
     })));

package/dist/es/packages/pickerview/style/pickerview.scss

@@ -1,5 +1,4 @@
 .nut-pickerview {
-  --nutui-picker-item-height: 36px;
   position: relative;
   display: flex;
   width: 100%;

package/dist/es/packages/pickerview/style/style.css

@@ -3,7 +3,6 @@
 /* #ifndef harmony */
 /* #endif */
 .nut-pickerview {
-  --nutui-picker-item-height: 36px;
   position: relative;
   display: flex;
   width: 100%;

package/dist/es/packages/resultpage/style/index.js

@@ -1 +1,2 @@
+import '../../button/style';
 import './resultpage.scss';

package/dist/es/packages/resultpage/style/style.css

@@ -2,6 +2,395 @@
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
+.nut-button {
+  position: relative;
+  display: flex;
+  display: inline-block;
+  /* #ifdef harmony*/
+  width: 80px;
+  /* #endif */
+  /* #ifndef harmony*/
+  width: auto;
+  /* #endif */
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  height: var(--nutui-button-default-height, 32px);
+  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
+  font-weight: var(--nutui-font-weight, 400);
+  text-align: center;
+  cursor: pointer;
+  transition: opacity 0.2s;
+  user-select: none;
+  touch-action: manipulation;
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a));
+  background: var(--nutui-button-default-background-color, transparent);
+  border-width: var(--nutui-button-border-width, 0.5px);
+}
+.nut-button-text {
+  margin-left: var(--nutui-button-text-icon-margin, 4px);
+}
+.nut-button-text-right {
+  margin-right: var(--nutui-button-text-icon-margin, 4px);
+}
+.nut-button-children {
+  display: flex;
+  flex-direction: row;
+  background: transparent;
+}
+.nut-button::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  background-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7));
+  border: inherit;
+  border-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7));
+  border-radius: inherit;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  content: " ";
+}
+.nut-button::after {
+  border: none;
+}
+.nut-button:active::before {
+  opacity: 0.1;
+}
+.nut-button-wrap {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  /* #ifndef harmony */
+  background: initial;
+  /* #endif */
+}
+.nut-button-wrap .nut-icon {
+  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
+  width: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
+  height: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
+}
+.nut-button-loading::before, .nut-button-disabled::before {
+  display: none;
+}
+.nut-button-disabled {
+  cursor: not-allowed;
+  color: #ffffff;
+}
+.nut-button.nut-button-icononly {
+  width: var(--nutui-button-default-height, 32px);
+  padding: 0;
+}
+.nut-button-round {
+  border-radius: var(--nutui-button-border-radius, var(--nutui-radius-s, 6px));
+}
+.nut-button-round-xlarge {
+  border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base, 8px));
+}
+.nut-button-round-large {
+  border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-base, 8px));
+}
+.nut-button-round-small {
+  border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-s, 6px));
+}
+.nut-button-round-mini {
+  border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs, 4px));
+}
+.nut-button-default {
+  padding: var(--nutui-button-default-padding, 0px 12px);
+  border-style: solid;
+  border-color: var(--nutui-button-default-border-color, var(--nutui-color-text-disabled, #c2c4cc));
+}
+.nut-button-default-disabled, .nut-button-default-solid-disabled {
+  color: var(--nutui-button-primary-color, #ffffff);
+  background: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
+  border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
+}
+.nut-button-default-none-disabled {
+  color: var(--nutui-button-default-disabled-color, var(--nutui-color-text-help, #888b94));
+}
+.nut-button-default-outline-disabled, .nut-button-default-dashed-disabled {
+  background: transparent;
+  color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
+  border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
+}
+.nut-button-normal {
+  padding: var(--nutui-button-normal-padding, 0px 12px);
+}
+.nut-button-xlarge {
+  height: var(--nutui-button-xlarge-height, 48px);
+  padding: var(--nutui-button-xlarge-padding, 0px 24px);
+  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
+  border-radius: var(--nutui-radius-base, 8px);
+}
+.nut-button-xlarge .nut-button-text {
+  margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
+}
+.nut-button-xlarge .nut-button-text-right {
+  margin-right: var(--nutui-button-xlarge-text-icon-margin, 6px);
+}
+.nut-button-xlarge .nut-icon {
+  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
+  width: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
+  height: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
+}
+.nut-button-xlarge-children {
+  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
+}
+.nut-button-large {
+  height: var(--nutui-button-large-height, 40px);
+  padding: var(--nutui-button-large-padding, 0px 16px);
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+  border-radius: var(--nutui-radius-s, 6px);
+}
+.nut-button-large .nut-button-text {
+  margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
+}
+.nut-button-large .nut-button-text-right {
+  margin-right: var(--nutui-button-xlarge-text-icon-margin, 6px);
+}
+.nut-button-large .nut-icon {
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+  width: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+  height: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+}
+.nut-button-large-children {
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+}
+.nut-button-small {
+  height: var(--nutui-button-small-height, 28px);
+  padding: var(--nutui-button-small-padding, 0px 8px);
+  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
+  border-radius: var(--nutui-radius-xs, 4px);
+}
+.nut-button-small .nut-icon {
+  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
+  width: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
+  height: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
+}
+.nut-button-small-children {
+  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
+}
+.nut-button-mini {
+  height: var(--nutui-button-mini-height, 24px);
+  padding: var(--nutui-button-mini-padding, 0px 8px);
+  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+  border-radius: var(--nutui-radius-xs, 4px);
+}
+.nut-button-mini .nut-icon {
+  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+  width: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+  height: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+}
+.nut-button-mini-children {
+  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+}
+.nut-button-primary {
+  color: var(--nutui-button-primary-color, #ffffff);
+  background-origin: border-box;
+  border-color: transparent;
+}
+.nut-button-primary-children {
+  color: var(--nutui-button-primary-color, #ffffff);
+}
+.nut-button-primary-solid {
+  background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%);
+  color: var(--nutui-button-primary-color, #ffffff);
+  border-color: transparent;
+  font-weight: var(--nutui-font-weight-bold, 600);
+}
+.nut-button-primary-solid.nut-button-small, .nut-button-primary-solid.nut-button-mini {
+  font-weight: var(--nutui-font-weight, 400);
+}
+.nut-button-primary-disabled, .nut-button-primary-disabled.nut-button-icononly, .nut-button-primary-solid-disabled {
+  color: var(--nutui-button-primary-color, #ffffff);
+  background: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+}
+.nut-button-primary-none {
+  color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
+}
+.nut-button-primary-none-disabled {
+  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+}
+.nut-button-primary-outline {
+  color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
+  border-color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
+}
+.nut-button-primary-outline-disabled {
+  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+}
+.nut-button-primary-dashed {
+  color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
+  border-color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
+}
+.nut-button-primary-dashed-disabled {
+  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+}
+.nut-button-primary.nut-button-solid.nut-button-normal {
+  font-weight: var(--nutui-font-weight-bold, 600);
+}
+.nut-button-success {
+  color: var(--nutui-button-success-color, #ffffff);
+  background: var(--nutui-button-success-background-color, var(--nutui-color-success, #00d900));
+  background-origin: border-box;
+  border-color: transparent;
+}
+.nut-button-success-children {
+  color: var(--nutui-button-success-color, #ffffff);
+}
+.nut-button-success-solid-disabled {
+  background: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));
+  border-color: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));
+}
+.nut-button-success-outline, .nut-button-success-dashed {
+  color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900));
+  border-color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900));
+}
+.nut-button-success-outline-disabled, .nut-button-success-dashed-disabled {
+  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+}
+.nut-button-success-none {
+  color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900));
+}
+.nut-button-success-none-disabled {
+  color: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));
+}
+.nut-button-info {
+  color: var(--nutui-button-info-color, #ffffff);
+  background: var(--nutui-button-info-background-color, var(--nutui-color-info-background, #0073ff));
+  background-origin: border-box;
+  border-color: transparent;
+}
+.nut-button-info-children {
+  color: var(--nutui-button-info-color, #ffffff);
+}
+.nut-button-info-solid-disabled {
+  background: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));
+  border-color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));
+}
+.nut-button-info-outline, .nut-button-info-dashed {
+  color: var(--nutui-button-info-border-color, var(--nutui-color-info, #0073ff));
+  border-color: var(--nutui-button-info-border-color, var(--nutui-color-info, #0073ff));
+}
+.nut-button-info-outline-disabled, .nut-button-info-dashed-disabled {
+  color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));
+  border-color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));
+}
+.nut-button-info-none {
+  color: var(--nutui-button-info-border-color, var(--nutui-color-info, #0073ff));
+}
+.nut-button-info-none-disabled {
+  color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));
+}
+.nut-button-danger {
+  color: var(--nutui-button-danger-color, #ffffff);
+  background: var(--nutui-button-danger-background-color, var(--nutui-color-danger, #ff0f23));
+  background-origin: border-box;
+  border-color: transparent;
+}
+.nut-button-danger-children {
+  color: var(--nutui-button-danger-color, #ffffff);
+}
+.nut-button-danger-solid-disabled {
+  background: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
+  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
+}
+.nut-button-danger-outline, .nut-button-danger-dashed {
+  color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23));
+  border-color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23));
+}
+.nut-button-danger-outline-disabled, .nut-button-danger-dashed-disabled {
+  color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
+  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
+}
+.nut-button-danger-none {
+  color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23));
+}
+.nut-button-danger-none-disabled {
+  color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
+}
+.nut-button-warning {
+  color: var(--nutui-button-warning-color, #ffffff);
+  background: var(--nutui-button-warning-background-color, var(--nutui-color-warning, #ffbf00));
+  background-origin: border-box;
+  border-color: transparent;
+}
+.nut-button-warning-children {
+  color: var(--nutui-button-warning-color, #ffffff);
+}
+.nut-button-warning-disabled, .nut-button-warning-solid-disabled {
+  color: var(--nutui-button-warning-color, #ffffff);
+  background: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
+  border-color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
+}
+.nut-button-warning-outline, .nut-button-warning-dashed {
+  color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00));
+  border-color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00));
+}
+.nut-button-warning-outline-disabled, .nut-button-warning-dashed-disabled {
+  color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
+  border-color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
+}
+.nut-button-warning-none {
+  color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00));
+}
+.nut-button-warning-none-disabled {
+  color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
+}
+.nut-button-block {
+  display: block;
+  width: 100%;
+}
+.nut-button-outline {
+  background: transparent;
+  border-style: solid;
+}
+.nut-button-dashed {
+  background: transparent;
+  border-style: dashed;
+}
+.nut-button-none {
+  background: transparent;
+  border-color: transparent;
+}
+.nut-button-loading {
+  cursor: default;
+  opacity: 0.9;
+}
+.nut-button-square {
+  border-radius: var(--nutui-button-square-border-radius, 0);
+}
+
+[dir=rtl] .nut-button-text,
+.nut-rtl .nut-button-text {
+  margin-left: 0;
+  margin-right: var(--nutui-button-text-icon-margin, 4px);
+}
+[dir=rtl] .nut-button-text.right,
+.nut-rtl .nut-button-text.right {
+  margin-left: var(--nutui-button-text-icon-margin, 4px);
+}
+[dir=rtl] .nut-button::before,
+.nut-rtl .nut-button::before {
+  left: auto;
+  right: 50%;
+  transform: translate(50%, -50%);
+}
+
 .nut-resultpage {
   width: 100%;
   display: flex;

package/dist/es/packages/sidebar/sidebar.js

@@ -124,7 +124,7 @@ export var SideBar = function(props) {
         });
         index = index < 0 ? 0 : index;
         return {
-            transform: "translate3d( 0,-".concat(index * 100, "%, 0)"),
+            transform: "translateY(-".concat(index * 100, "%)"),
             transitionDuration: "".concat(contentDuration, "ms")
         };
     };
@@ -157,7 +157,6 @@ export var SideBar = function(props) {
         className: "".concat(classPrefix, "-list"),
         ref: navRef
     }, titles.current.map(function(item, index) {
-        var _obj;
         return /*#__PURE__*/ React.createElement(View, {
             ref: function(ref) {
                 return titleItemsRef.current.push(ref);
@@ -166,10 +165,10 @@ export var SideBar = function(props) {
             onClick: function(e) {
                 tabChange(item, index);
             },
-            className: classNames("".concat(classPrefix, "-titles-item"), (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-titles-item-active"), !item.disabled && String(item.value) === String(value)), _define_property(_obj, "".concat(classPrefix, "-titles-item-disabled"), item.disabled), _obj)),
+            className: classNames("".concat(classPrefix, "-titles-item"), _define_property({}, "".concat(classPrefix, "-titles-item-active"), !item.disabled && String(item.value) === String(value))),
             key: item.value
         }, /*#__PURE__*/ React.createElement(View, {
-            className: classNames("".concat(classPrefix, "-ellipsis"), "".concat(classPrefix, "-titles-item-text"))
+            className: classNames("".concat(classPrefix, "-ellipsis"), "".concat(classPrefix, "-titles-item-text"), _define_property({}, "".concat(classPrefix, "-titles-item-disabled"), item.disabled))
         }, item.title));
     }))), /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-content-wrap")

package/dist/es/packages/tabbar/style/style.css

@@ -5,6 +5,8 @@
 .nut-badge {
   position: relative;
   display: inline-flex;
+  vertical-align: middle;
+  box-sizing: content-box;
   width: auto;
 }
 .nut-badge-icon {
@@ -37,13 +39,12 @@
 }
 .nut-badge-sup {
   display: inline-flex;
-  justify-content: center;
-  height: var(--nutui-badge-height, 14px);
+  text-align: center;
   min-width: var(--nutui-badge-min-width, 6px);
   padding: var(--nutui-badge-padding, 1px 4px);
   box-sizing: border-box;
   color: var(--nutui-badge-color, #ffffff);
-  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxs, 10px));
+  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxxs, 9px));
   line-height: 12px;
   white-space: nowrap;
   font-weight: normal;
@@ -53,12 +54,6 @@
 }
 .nut-badge-number {
   font-family: "JD";
-  /* #ifdef harmony */
-  line-height: 12px;
-  /* #endif */
-  /* #ifndef harmony */
-  line-height: 13px;
-  /* #endif */
 }
 .nut-badge-one {
   height: var(--nutui-badge-height, 14px);