@nutui/nutui-react 4.0.0-beta.6 → 4.0.0-beta.7

package/dist/cjs/types/spec/popover/base.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { BaseProps } from '../../base/props';
 import { FullPosition, SimpleValues, UITheme } from '../../base/atoms';
+export type PopoverType = 'status' | 'description';
 export interface PopoverList {
     key?: string;
     name: string;
@@ -20,6 +21,7 @@ export interface WrapperPosition {
     right: number;
 }
 export type BasePopover<POPUP_PROPS> = POPUP_PROPS & BaseProps & {
+    type: PopoverType;
     theme: UITheme;
     location: FullPosition;
     list: PopoverList[];
@@ -30,6 +32,8 @@ export type BasePopover<POPUP_PROPS> = POPUP_PROPS & BaseProps & {
     showArrow: boolean;
     closeOnOutsideClick: boolean;
     closeOnActionClick: boolean;
+    autoShow: boolean;
+    duration: number;
     children?: ReactNode;
     onClick: () => void;
     onOpen: () => void;

package/dist/cjs/utils/is-forward-ref-component.js

@@ -12,6 +12,6 @@ var _interop_require_default = require("@swc/helpers/_/_interop_require_default"
 var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
 function isForwardRefComponent(component) {
     return component.type && component.type.$$typeof && // eslint-disable-next-line react/display-name
-    /*#__PURE__*/ _react.default.forwardRef(// @ts-ignore
-    function() {}).$$typeof === component.type.$$typeof;
+    /*#__PURE__*/ (_react.default.forwardRef(// @ts-ignore
+    function() {})).$$typeof === component.type.$$typeof;
 }

package/dist/cjs/utils/render.js

@@ -19,8 +19,8 @@ _export(exports, {
 var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 var _async_to_generator = require("@swc/helpers/_/_async_to_generator");
 var _object_spread = require("@swc/helpers/_/_object_spread");
-var _type_of = require("@swc/helpers/_/_type_of");
 var _ts_generator = require("@swc/helpers/_/_ts_generator");
+var _type_of = require("@swc/helpers/_/_type_of");
 var _reactdom = /*#__PURE__*/ _interop_require_wildcard._(require("react-dom"));
 // Let compiler not to search module usage
 var fullClone = (0, _object_spread._)({}, _reactdom);

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

@@ -10,21 +10,15 @@ page {
 
 .nut-animate {
   /* Animation CSS */
-  /* Slide Animations */
-  /* Shake Animation */
-  /* Ripple Animation */
-  /* Breath Animation */
-  /* Twinkle Animation */
-  /* Flicker Animation */
-  /* Jump Animation */
-  /* Float Animation */
-  /* Loop Animation */
 }
 .nut-animate [class*=nut-animate-] {
   animation-duration: 0.5s;
   animation-timing-function: ease-out;
   animation-fill-mode: both;
 }
+.nut-animate {
+  /* Slide Animations */
+}
 @keyframes slide-right {
   0% {
     opacity: 0;
@@ -77,6 +71,9 @@ page {
 .nut-animate .nut-animate-slide-bottom {
   animation-name: slide-bottom;
 }
+.nut-animate {
+  /* Shake Animation */
+}
 @keyframes shake {
   0%, 100% {
     transform: translateX(0);
@@ -112,6 +109,9 @@ page {
 .nut-animate .nut-animate-shake {
   animation-name: shake;
 }
+.nut-animate {
+  /* Ripple Animation */
+}
 @keyframes ripple {
   0% {
     transform: scale(1);
@@ -123,6 +123,9 @@ page {
 .nut-animate .nut-animate-ripple {
   animation-name: ripple;
 }
+.nut-animate {
+  /* Breath Animation */
+}
 @keyframes breath {
   0%, 100% {
     transform: scale(1);
@@ -137,6 +140,9 @@ page {
   animation-timing-function: ease-in-out;
   animation-direction: alternate;
 }
+.nut-animate {
+  /* Twinkle Animation */
+}
 .nut-animate .nut-animate-twinkle {
   position: relative;
 }
@@ -170,6 +176,9 @@ page {
     opacity: 0;
   }
 }
+.nut-animate {
+  /* Flicker Animation */
+}
 .nut-animate .nut-animate-flicker {
   position: relative;
   overflow: hidden;
@@ -195,6 +204,9 @@ page {
     transform: translateX(calc(150px * var(--nut-scale-f, 1))) skewX(-20deg);
   }
 }
+.nut-animate {
+  /* Jump Animation */
+}
 @keyframes jump {
   0% {
     transform: rotate(0) translateY(0);
@@ -216,6 +228,9 @@ page {
   transform-origin: center center;
   animation: jump 0.7s linear;
 }
+.nut-animate {
+  /* Float Animation */
+}
 @keyframes float-pop {
   0% {
     top: 0;
@@ -237,6 +252,9 @@ page {
   position: relative;
   animation-name: float-pop;
 }
+.nut-animate {
+  /* Loop Animation */
+}
 .nut-animate .loop {
   animation-iteration-count: infinite;
 }

package/dist/es/packages/animate/style-jmapp/style.css

@@ -4,21 +4,15 @@
 /* #endif */
 .nut-animate {
   /* Animation CSS */
-  /* Slide Animations */
-  /* Shake Animation */
-  /* Ripple Animation */
-  /* Breath Animation */
-  /* Twinkle Animation */
-  /* Flicker Animation */
-  /* Jump Animation */
-  /* Float Animation */
-  /* Loop Animation */
 }
 .nut-animate [class*=nut-animate-] {
   animation-duration: 0.5s;
   animation-timing-function: ease-out;
   animation-fill-mode: both;
 }
+.nut-animate {
+  /* Slide Animations */
+}
 @keyframes slide-right {
   0% {
     opacity: 0;
@@ -71,6 +65,9 @@
 .nut-animate .nut-animate-slide-bottom {
   animation-name: slide-bottom;
 }
+.nut-animate {
+  /* Shake Animation */
+}
 @keyframes shake {
   0%, 100% {
     transform: translateX(0);
@@ -106,6 +103,9 @@
 .nut-animate .nut-animate-shake {
   animation-name: shake;
 }
+.nut-animate {
+  /* Ripple Animation */
+}
 @keyframes ripple {
   0% {
     transform: scale(1);
@@ -117,6 +117,9 @@
 .nut-animate .nut-animate-ripple {
   animation-name: ripple;
 }
+.nut-animate {
+  /* Breath Animation */
+}
 @keyframes breath {
   0%, 100% {
     transform: scale(1);
@@ -131,6 +134,9 @@
   animation-timing-function: ease-in-out;
   animation-direction: alternate;
 }
+.nut-animate {
+  /* Twinkle Animation */
+}
 .nut-animate .nut-animate-twinkle {
   position: relative;
 }
@@ -164,6 +170,9 @@
     opacity: 0;
   }
 }
+.nut-animate {
+  /* Flicker Animation */
+}
 .nut-animate .nut-animate-flicker {
   position: relative;
   overflow: hidden;
@@ -189,6 +198,9 @@
     transform: translateX(scale-px(150px)) skewX(-20deg);
   }
 }
+.nut-animate {
+  /* Jump Animation */
+}
 @keyframes jump {
   0% {
     transform: rotate(0) translateY(0);
@@ -210,6 +222,9 @@
   transform-origin: center center;
   animation: jump 0.7s linear;
 }
+.nut-animate {
+  /* Float Animation */
+}
 @keyframes float-pop {
   0% {
     top: 0;
@@ -231,6 +246,9 @@
   position: relative;
   animation-name: float-pop;
 }
+.nut-animate {
+  /* Loop Animation */
+}
 .nut-animate .loop {
   animation-iteration-count: infinite;
 }

package/dist/es/packages/animate/style-jrkf/style.css

@@ -4,21 +4,15 @@
 /* #endif */
 .nut-animate {
   /* Animation CSS */
-  /* Slide Animations */
-  /* Shake Animation */
-  /* Ripple Animation */
-  /* Breath Animation */
-  /* Twinkle Animation */
-  /* Flicker Animation */
-  /* Jump Animation */
-  /* Float Animation */
-  /* Loop Animation */
 }
 .nut-animate [class*=nut-animate-] {
   animation-duration: 0.5s;
   animation-timing-function: ease-out;
   animation-fill-mode: both;
 }
+.nut-animate {
+  /* Slide Animations */
+}
 @keyframes slide-right {
   0% {
     opacity: 0;
@@ -71,6 +65,9 @@
 .nut-animate .nut-animate-slide-bottom {
   animation-name: slide-bottom;
 }
+.nut-animate {
+  /* Shake Animation */
+}
 @keyframes shake {
   0%, 100% {
     transform: translateX(0);
@@ -106,6 +103,9 @@
 .nut-animate .nut-animate-shake {
   animation-name: shake;
 }
+.nut-animate {
+  /* Ripple Animation */
+}
 @keyframes ripple {
   0% {
     transform: scale(1);
@@ -117,6 +117,9 @@
 .nut-animate .nut-animate-ripple {
   animation-name: ripple;
 }
+.nut-animate {
+  /* Breath Animation */
+}
 @keyframes breath {
   0%, 100% {
     transform: scale(1);
@@ -131,6 +134,9 @@
   animation-timing-function: ease-in-out;
   animation-direction: alternate;
 }
+.nut-animate {
+  /* Twinkle Animation */
+}
 .nut-animate .nut-animate-twinkle {
   position: relative;
 }
@@ -164,6 +170,9 @@
     opacity: 0;
   }
 }
+.nut-animate {
+  /* Flicker Animation */
+}
 .nut-animate .nut-animate-flicker {
   position: relative;
   overflow: hidden;
@@ -189,6 +198,9 @@
     transform: translateX(scale-px(150px)) skewX(-20deg);
   }
 }
+.nut-animate {
+  /* Jump Animation */
+}
 @keyframes jump {
   0% {
     transform: rotate(0) translateY(0);
@@ -210,6 +222,9 @@
   transform-origin: center center;
   animation: jump 0.7s linear;
 }
+.nut-animate {
+  /* Float Animation */
+}
 @keyframes float-pop {
   0% {
     top: 0;
@@ -231,6 +246,9 @@
   position: relative;
   animation-name: float-pop;
 }
+.nut-animate {
+  /* Loop Animation */
+}
 .nut-animate .loop {
   animation-iteration-count: infinite;
 }

package/dist/es/packages/audio/audio.js

@@ -24,14 +24,6 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     onCanPlay: function onCanPlay(e) {}
 });
 export var Audio = function Audio(props) {
-    var watch = function watch() {
-        if (AudioRef && AudioRef.current) {
-            var current = AudioRef.current;
-            current.addEventListener('play', function() {
-                setPlaying(true);
-            });
-        }
-    };
     var locale = useConfig().locale;
     var _$_object_spread = _object_spread({}, defaultProps, props), className = _$_object_spread.className, src = _$_object_spread.src, style = _$_object_spread.style, muted = _$_object_spread.muted, autoPlay = _$_object_spread.autoPlay, loop = _$_object_spread.loop, preload = _$_object_spread.preload, type = _$_object_spread.type, onBack = _$_object_spread.onBack, onForward = _$_object_spread.onForward, onPause = _$_object_spread.onPause, onEnd = _$_object_spread.onEnd, onMute = _$_object_spread.onMute, onCanPlay = _$_object_spread.onCanPlay, children = _$_object_spread.children, rest = _object_without_properties(_$_object_spread, [
         "className",
@@ -73,6 +65,14 @@ export var Audio = function Audio(props) {
             onEnd === null || onEnd === void 0 ? void 0 : onEnd(e);
         }
     };
+    function watch() {
+        if (AudioRef && AudioRef.current) {
+            var current = AudioRef.current;
+            current.addEventListener('play', function() {
+                setPlaying(true);
+            });
+        }
+    }
     useEffect(function() {
         watch();
     }, []);

package/dist/es/packages/badge/badge.js

@@ -17,15 +17,6 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     disabled: false
 });
 export var Badge = function Badge(props) {
-    var isIcon = function isIcon() {
-        if ((typeof value === "undefined" ? "undefined" : _type_of(value)) === 'object' && value) return value;
-    };
-    var isNumber = function isNumber() {
-        if (typeof value === 'number' && value) return value;
-    };
-    var isString = function isString() {
-        if (typeof value === 'string' && value) return value;
-    };
     var _this;
     var rtl = useRtl();
     var _$_object_spread = _object_spread({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, value = _$_object_spread.value, max = _$_object_spread.max, children = _$_object_spread.children, dot = _$_object_spread.dot, top = _$_object_spread.top, right = _$_object_spread.right, fill = _$_object_spread.fill, size = _$_object_spread.size, disabled = _$_object_spread.disabled;
@@ -38,6 +29,15 @@ export var Badge = function Badge(props) {
         }
         return value;
     };
+    function isIcon() {
+        if ((typeof value === "undefined" ? "undefined" : _type_of(value)) === 'object' && value) return value;
+    }
+    function isNumber() {
+        if (typeof value === 'number' && value) return value;
+    }
+    function isString() {
+        if (typeof value === 'string' && value) return value;
+    }
     var _obj;
     var contentClasses = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-sup"), isNumber() || isString() || dot), _define_property(_obj, "".concat(classPrefix, "-number"), isNumber()), _define_property(_obj, "".concat(classPrefix, "-one"), typeof getContent() === 'string' && ((_this = "".concat(getContent())) === null || _this === void 0 ? void 0 : _this.length) === 1), _define_property(_obj, "".concat(classPrefix, "-dot"), dot), _define_property(_obj, "".concat(classPrefix, "-dot-").concat(size), dot), _define_property(_obj, "".concat(classPrefix, "-").concat(fill), fill === 'outline'), _define_property(_obj, "".concat(classPrefix, "-content"), children), _define_property(_obj, "".concat(classPrefix, "-disabled"), disabled), _obj));
     var getPositionStyle = function getPositionStyle() {

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

@@ -162,7 +162,6 @@ page {
   padding: var(--nutui-button-xlarge-padding, 0px calc(20px * var(--nut-scale-f, 1)));
   font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base, calc(8px * var(--nut-scale-f, 1))));
-  font-weight: var(--nutui-font-weight-bold, 600);
 }
 .nut-button-xlarge .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, calc(6px * var(--nut-scale-f, 1)));
@@ -178,12 +177,14 @@ page {
 .nut-button-xlarge-children {
   font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
+.nut-button-xlarge {
+  font-weight: var(--nutui-font-weight-bold, 600);
+}
 .nut-button-44 {
   height: var(--nutui-button-44-height, calc(44px * var(--nut-scale-f, 1)));
   padding: var(--nutui-button-44-padding, 0px calc(16px * var(--nut-scale-f, 1)));
   font-size: var(--nutui-button-44-font-size, var(--nutui-font-size-15));
   border-radius: var(--nutui-button-44-border-radius, var(--nutui-radius-base, calc(8px * var(--nut-scale-f, 1))));
-  font-weight: var(--nutui-font-weight-bold, 600);
 }
 .nut-button-44 .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, calc(6px * var(--nut-scale-f, 1)));
@@ -199,12 +200,14 @@ page {
 .nut-button-44-children {
   font-size: var(--nutui-button-44-font-size, var(--nutui-font-size-15));
 }
+.nut-button-44 {
+  font-weight: var(--nutui-font-weight-bold, 600);
+}
 .nut-button-large {
   height: var(--nutui-button-large-height, calc(40px * var(--nut-scale-f, 1)));
   padding: var(--nutui-button-large-padding, 0px calc(12px * var(--nut-scale-f, 1)));
   font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-base, calc(8px * var(--nut-scale-f, 1))));
-  min-width: calc(84px * var(--nut-scale-f, 1));
 }
 .nut-button-large .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, calc(6px * var(--nut-scale-f, 1)));
@@ -220,12 +223,14 @@ page {
 .nut-button-large-children {
   font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
+.nut-button-large {
+  min-width: calc(84px * var(--nut-scale-f, 1));
+}
 .nut-button-36 {
   height: var(--nutui-button-36-height, calc(36px * var(--nut-scale-f, 1)));
   padding: var(--nutui-button-36-padding, 0px calc(12px * var(--nut-scale-f, 1)));
   font-size: var(--nutui-button-36-font-size, var(--nutui-font-size-14));
   border-radius: var(--nutui-button-36-border-radius, var(--nutui-radius-base, calc(8px * var(--nut-scale-f, 1))));
-  min-width: calc(66px * var(--nut-scale-f, 1));
 }
 .nut-button-36 .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, calc(6px * var(--nut-scale-f, 1)));
@@ -241,13 +246,14 @@ page {
 .nut-button-36-children {
   font-size: var(--nutui-button-36-font-size, var(--nutui-font-size-14));
 }
+.nut-button-36 {
+  min-width: calc(66px * var(--nut-scale-f, 1));
+}
 .nut-button-small {
   height: var(--nutui-button-small-height, calc(28px * var(--nut-scale-f, 1)));
   padding: var(--nutui-button-small-padding, 0px calc(8px * var(--nut-scale-f, 1)));
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-s, calc(6px * var(--nut-scale-f, 1))));
-  min-width: calc(52px * var(--nut-scale-f, 1));
-  font-weight: var(--nutui-font-weight, 400);
 }
 .nut-button-small .nut-icon {
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
@@ -257,13 +263,15 @@ page {
 .nut-button-small-children {
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
+.nut-button-small {
+  min-width: calc(52px * var(--nut-scale-f, 1));
+  font-weight: var(--nutui-font-weight, 400);
+}
 .nut-button-mini {
   height: var(--nutui-button-mini-height, calc(24px * var(--nut-scale-f, 1)));
   padding: var(--nutui-button-mini-padding, 0px calc(6px * var(--nut-scale-f, 1)));
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs, calc(4px * var(--nut-scale-f, 1))));
-  min-width: calc(48px * var(--nut-scale-f, 1));
-  font-weight: var(--nutui-font-weight, 400);
 }
 .nut-button-mini .nut-icon {
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
@@ -273,6 +281,10 @@ page {
 .nut-button-mini-children {
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
+.nut-button-mini {
+  min-width: calc(48px * var(--nut-scale-f, 1));
+  font-weight: var(--nutui-font-weight, 400);
+}
 .nut-button-primary {
   color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
   background: var(--nutui-button-primary-background-color, var(--nutui-color-primary, #ff0f23));

package/dist/es/packages/button/style-jmapp/style.css

@@ -156,7 +156,6 @@
   padding: var(--nutui-button-xlarge-padding, 0px 32px);
   font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-h2));
   border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base));
-  font-weight: var(--nutui-font-weight-bold);
 }
 .nut-button-xlarge .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
@@ -172,12 +171,14 @@
 .nut-button-xlarge-children {
   font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-h2));
 }
+.nut-button-xlarge {
+  font-weight: var(--nutui-font-weight-bold);
+}
 .nut-button-44 {
   height: var(--nutui-button-44-height, 44px);
   padding: var(--nutui-button-44-padding, 0px 16px);
   font-size: var(--nutui-button-44-font-size, var(--nutui-font-size-15));
   border-radius: var(--nutui-button-44-border-radius, var(--nutui-radius-base));
-  font-weight: var(--nutui-font-weight-bold);
 }
 .nut-button-44 .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
@@ -193,12 +194,14 @@
 .nut-button-44-children {
   font-size: var(--nutui-button-44-font-size, var(--nutui-font-size-15));
 }
+.nut-button-44 {
+  font-weight: var(--nutui-font-weight-bold);
+}
 .nut-button-large {
   height: var(--nutui-button-large-height, 44px);
   padding: var(--nutui-button-large-padding, 0px var(--nutui-spacing-xxl));
   font-size: var(--nutui-button-large-font-size, var(--nutui-font-text-large));
   border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-s));
-  min-width: scale-px(84px);
 }
 .nut-button-large .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
@@ -214,12 +217,14 @@
 .nut-button-large-children {
   font-size: var(--nutui-button-large-font-size, var(--nutui-font-text-large));
 }
+.nut-button-large {
+  min-width: scale-px(84px);
+}
 .nut-button-36 {
   height: var(--nutui-button-36-height, 36px);
   padding: var(--nutui-button-36-padding, 0px 12px);
   font-size: var(--nutui-button-36-font-size, var(--nutui-font-size-14));
   border-radius: var(--nutui-button-36-border-radius, var(--nutui-radius-base));
-  min-width: scale-px(66px);
 }
 .nut-button-36 .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
@@ -235,13 +240,14 @@
 .nut-button-36-children {
   font-size: var(--nutui-button-36-font-size, var(--nutui-font-size-14));
 }
+.nut-button-36 {
+  min-width: scale-px(66px);
+}
 .nut-button-small {
   height: var(--nutui-button-small-height, 28px);
   padding: var(--nutui-button-small-padding, 0px var(--nutui-spacing-l));
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-text));
   border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-xs));
-  min-width: scale-px(52px);
-  font-weight: var(--nutui-font-weight);
 }
 .nut-button-small .nut-icon {
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-text));
@@ -251,13 +257,15 @@
 .nut-button-small-children {
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-text));
 }
+.nut-button-small {
+  min-width: scale-px(52px);
+  font-weight: var(--nutui-font-weight);
+}
 .nut-button-mini {
   height: var(--nutui-button-mini-height, 24px);
   padding: var(--nutui-button-mini-padding, 0px var(--nutui-spacing-l));
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-text-small));
   border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs));
-  min-width: scale-px(48px);
-  font-weight: var(--nutui-font-weight);
 }
 .nut-button-mini .nut-icon {
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-text-small));
@@ -267,6 +275,10 @@
 .nut-button-mini-children {
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-text-small));
 }
+.nut-button-mini {
+  min-width: scale-px(48px);
+  font-weight: var(--nutui-font-weight);
+}
 .nut-button-primary {
   color: var(--nutui-button-primary-color, var(--nutui-color-text-dark));
   background: var(--nutui-color-primary);