@nutui/nutui-react 3.0.0-beta.3 → 3.0.0-beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (123) hide show
  1. package/dist/cjs/packages/address/style/style.css +1 -1
  2. package/dist/cjs/packages/animatingnumbers/countup.js +7 -6
  3. package/dist/cjs/packages/animatingnumbers/style/style.css +10 -4
  4. package/dist/cjs/packages/audio/style/style.css +49 -34
  5. package/dist/cjs/packages/button/style/button.scss +36 -19
  6. package/dist/cjs/packages/button/style/style.css +49 -34
  7. package/dist/cjs/packages/calendar/style/style.css +1 -1
  8. package/dist/cjs/packages/card/style/card.scss +3 -18
  9. package/dist/cjs/packages/card/style/style.css +4 -13
  10. package/dist/cjs/packages/checkbox/checkbox.d.ts +1 -4
  11. package/dist/cjs/packages/checkbox/checkbox.js +0 -2
  12. package/dist/cjs/packages/checkbox/index.d.ts +7 -2
  13. package/dist/cjs/packages/checkbox/index.js +4 -1
  14. package/dist/cjs/packages/checkbox/style/style.css +10 -0
  15. package/dist/cjs/packages/checkboxgroup/style/checkboxgroup.scss +8 -0
  16. package/dist/cjs/packages/checkboxgroup/style/style.css +10 -0
  17. package/dist/cjs/packages/configprovider/types.d.ts +1 -1
  18. package/dist/cjs/packages/countdown/countdown.d.ts +2 -20
  19. package/dist/cjs/packages/countdown/countdown.js +3 -2
  20. package/dist/cjs/packages/countdown/index.d.ts +1 -1
  21. package/dist/cjs/packages/countdown/style/countdown.scss +8 -2
  22. package/dist/cjs/packages/countdown/style/style.css +18 -13
  23. package/dist/cjs/packages/countdown/types.d.ts +26 -0
  24. package/dist/cjs/packages/countdown/types.js +4 -0
  25. package/dist/cjs/packages/countup/style/countup.scss +10 -4
  26. package/dist/cjs/packages/countup/style/style.css +10 -4
  27. package/dist/cjs/packages/dialog/style/dialog.scss +10 -7
  28. package/dist/cjs/packages/dialog/style/style.css +58 -41
  29. package/dist/cjs/packages/grid/grid.js +2 -6
  30. package/dist/cjs/packages/grid/style/grid.scss +2 -2
  31. package/dist/cjs/packages/grid/style/style.css +8 -6
  32. package/dist/cjs/packages/griditem/griditem.js +12 -6
  33. package/dist/cjs/packages/griditem/style/griditem.scss +6 -4
  34. package/dist/cjs/packages/griditem/style/style.css +6 -4
  35. package/dist/cjs/packages/imagepreview/style/imagepreview.scss +4 -0
  36. package/dist/cjs/packages/imagepreview/style/style.css +3 -0
  37. package/dist/cjs/packages/progress/progress.js +1 -1
  38. package/dist/cjs/packages/progress/style/progress.scss +2 -2
  39. package/dist/cjs/packages/progress/style/style.css +3 -2
  40. package/dist/cjs/packages/rate/style/rate.scss +10 -5
  41. package/dist/cjs/packages/rate/style/style.css +7 -5
  42. package/dist/cjs/packages/resultpage/resultpage.js +23 -17
  43. package/dist/cjs/packages/resultpage/style/resultpage.scss +5 -3
  44. package/dist/cjs/packages/resultpage/style/style.css +10 -8
  45. package/dist/cjs/packages/resultpage/types.d.ts +1 -1
  46. package/dist/cjs/packages/tabbar/style/style.css +10 -0
  47. package/dist/cjs/packages/tabbaritem/style/style.css +10 -0
  48. package/dist/cjs/packages/tabbaritem/style/tabbaritem.scss +10 -0
  49. package/dist/cjs/packages/tag/style/style.css +1 -0
  50. package/dist/cjs/packages/tag/style/tag.scss +1 -0
  51. package/dist/cjs/packages/toast/style/index.js +1 -0
  52. package/dist/cjs/packages/toast/style/style.css +60 -0
  53. package/dist/cjs/packages/uploader/style/style.css +3 -2
  54. package/dist/cjs/utils/add-color-for-harmony.d.ts +9 -0
  55. package/dist/cjs/utils/add-color-for-harmony.js +27 -0
  56. package/dist/es/packages/address/style/style.css +1 -1
  57. package/dist/es/packages/animatingnumbers/countup.js +7 -6
  58. package/dist/es/packages/animatingnumbers/style/style.css +10 -4
  59. package/dist/es/packages/audio/style/style.css +49 -34
  60. package/dist/es/packages/button/style/button.scss +36 -19
  61. package/dist/es/packages/button/style/style.css +49 -34
  62. package/dist/es/packages/calendar/style/style.css +1 -1
  63. package/dist/es/packages/card/card.d.ts +11 -55
  64. package/dist/es/packages/card/style/card.scss +3 -18
  65. package/dist/es/packages/card/style/style.css +4 -13
  66. package/dist/es/packages/checkbox/checkbox.d.ts +1 -4
  67. package/dist/es/packages/checkbox/checkbox.js +1 -3
  68. package/dist/es/packages/checkbox/index.d.ts +7 -2
  69. package/dist/es/packages/checkbox/index.js +4 -1
  70. package/dist/es/packages/checkbox/style/style.css +10 -0
  71. package/dist/es/packages/checkboxgroup/checkboxgroup.d.ts +10 -50
  72. package/dist/es/packages/checkboxgroup/style/checkboxgroup.scss +8 -0
  73. package/dist/es/packages/checkboxgroup/style/style.css +10 -0
  74. package/dist/es/packages/configprovider/types.d.ts +1 -1
  75. package/dist/es/packages/countdown/countdown.d.ts +2 -20
  76. package/dist/es/packages/countdown/countdown.js +3 -2
  77. package/dist/es/packages/countdown/index.d.ts +1 -1
  78. package/dist/es/packages/countdown/style/countdown.scss +8 -2
  79. package/dist/es/packages/countdown/style/style.css +18 -13
  80. package/dist/es/packages/countdown/types.d.ts +26 -0
  81. package/dist/es/packages/countdown/types.js +1 -0
  82. package/dist/es/packages/countup/style/countup.scss +10 -4
  83. package/dist/es/packages/countup/style/style.css +10 -4
  84. package/dist/es/packages/dialog/style/dialog.scss +10 -7
  85. package/dist/es/packages/dialog/style/style.css +58 -41
  86. package/dist/es/packages/ellipsis/ellipsis.d.ts +1 -1
  87. package/dist/es/packages/grid/grid.js +2 -6
  88. package/dist/es/packages/grid/style/grid.scss +2 -2
  89. package/dist/es/packages/grid/style/style.css +8 -6
  90. package/dist/es/packages/griditem/griditem.js +12 -6
  91. package/dist/es/packages/griditem/style/griditem.scss +6 -4
  92. package/dist/es/packages/griditem/style/style.css +6 -4
  93. package/dist/es/packages/imagepreview/imagepreview.d.ts +14 -70
  94. package/dist/es/packages/imagepreview/style/imagepreview.scss +4 -0
  95. package/dist/es/packages/imagepreview/style/style.css +3 -0
  96. package/dist/es/packages/progress/progress.js +1 -1
  97. package/dist/es/packages/progress/style/progress.scss +2 -2
  98. package/dist/es/packages/progress/style/style.css +3 -2
  99. package/dist/es/packages/rate/rate.d.ts +12 -60
  100. package/dist/es/packages/rate/style/rate.scss +10 -5
  101. package/dist/es/packages/rate/style/style.css +7 -5
  102. package/dist/es/packages/resultpage/resultpage.js +23 -16
  103. package/dist/es/packages/resultpage/style/resultpage.scss +5 -3
  104. package/dist/es/packages/resultpage/style/style.css +10 -8
  105. package/dist/es/packages/resultpage/types.d.ts +1 -1
  106. package/dist/es/packages/tabbar/style/style.css +10 -0
  107. package/dist/es/packages/tabbar/tabbar.d.ts +7 -35
  108. package/dist/es/packages/tabbaritem/style/style.css +10 -0
  109. package/dist/es/packages/tabbaritem/style/tabbaritem.scss +10 -0
  110. package/dist/es/packages/tabbaritem/tabbaritem.d.ts +7 -35
  111. package/dist/es/packages/tag/style/style.css +1 -0
  112. package/dist/es/packages/tag/style/tag.scss +1 -0
  113. package/dist/es/packages/toast/style/index.js +1 -0
  114. package/dist/es/packages/toast/style/style.css +60 -0
  115. package/dist/es/packages/uploader/style/style.css +3 -2
  116. package/dist/es/utils/add-color-for-harmony.d.ts +9 -0
  117. package/dist/es/utils/add-color-for-harmony.js +16 -0
  118. package/dist/nutui.react.umd.js +244 -187
  119. package/dist/style.css +1 -1
  120. package/dist/styles/jd-font.scss +8 -0
  121. package/dist/styles/themes/default.scss +2 -105
  122. package/dist/styles/variables.scss +46 -35
  123. package/package.json +1 -1
@@ -984,7 +984,7 @@
984
984
  line-height: 42px;
985
985
  margin: auto;
986
986
  text-align: center;
987
- background: var(--nutui-color-primary, #ff0f23);
987
+ background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%);
988
988
  border-radius: 21px;
989
989
  font-size: 15px;
990
990
  color: var(--nutui-color-primary-text, #ffffff);
@@ -47,7 +47,7 @@ var CountUp = function CountUp(props) {
47
47
  var currNumber = "".concat(thousands ? intNumber.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') : intNumber).concat(splitArr[1] ? '.' : '').concat(splitArr[1] || '');
48
48
  return currNumber.split('');
49
49
  };
50
- var numerArr = (0, _react.useMemo)(getShowNumber, [
50
+ var numberArr = (0, _react.useMemo)(getShowNumber, [
51
51
  value,
52
52
  length,
53
53
  thousands
@@ -55,7 +55,7 @@ var CountUp = function CountUp(props) {
55
55
  var setNumberTransform = (0, _react.useCallback)(function() {
56
56
  if (countupRef.current) {
57
57
  var numberItems = countupRef.current.querySelectorAll('.nut-countup-number');
58
- var numberFilterArr = numerArr.filter(function(item) {
58
+ var numberFilterArr = numberArr.filter(function(item) {
59
59
  return !Number.isNaN(Number(item));
60
60
  });
61
61
  Object.keys(numberItems).forEach(function(key) {
@@ -70,10 +70,10 @@ var CountUp = function CountUp(props) {
70
70
  });
71
71
  }
72
72
  }, [
73
- numerArr
73
+ numberArr
74
74
  ]);
75
75
  var numberEaseStyle = {
76
- transition: "transform ".concat(duration, "s ease-in-out")
76
+ transitionDuration: "".concat(duration, "s")
77
77
  };
78
78
  (0, _react.useEffect)(function() {
79
79
  timerRef.current = window.setTimeout(function() {
@@ -83,7 +83,7 @@ var CountUp = function CountUp(props) {
83
83
  window.clearTimeout(timerRef.current);
84
84
  };
85
85
  }, [
86
- numerArr,
86
+ numberArr,
87
87
  delay,
88
88
  setNumberTransform
89
89
  ]);
@@ -92,7 +92,7 @@ var CountUp = function CountUp(props) {
92
92
  ref: countupRef
93
93
  }, /*#__PURE__*/ _react.default.createElement("ul", {
94
94
  className: "".concat(classPrefix, "-list")
95
- }, numerArr.map(function(item, idx) {
95
+ }, numberArr.map(function(item, idx) {
96
96
  return /*#__PURE__*/ _react.default.createElement("li", {
97
97
  className: "".concat(classPrefix, "-listitem ").concat(!Number.isNaN(Number(item)) ? "".concat(classPrefix, "-listitem-number") : ''),
98
98
  key: idx
@@ -101,6 +101,7 @@ var CountUp = function CountUp(props) {
101
101
  style: numberEaseStyle
102
102
  }, (0, _to_consumable_array._)(numbers).concat((0, _to_consumable_array._)(numbers)).map(function(number, subidx) {
103
103
  return /*#__PURE__*/ _react.default.createElement("span", {
104
+ className: "".concat(classPrefix, "-number-text"),
104
105
  key: subidx
105
106
  }, number);
106
107
  })) : /*#__PURE__*/ _react.default.createElement("span", {
@@ -7,9 +7,8 @@
7
7
  .nut-countup-listitem {
8
8
  height: var(--nutui-countup-height, 32px);
9
9
  overflow: hidden;
10
- color: var(--nutui-color-title, #1a1a1a);
11
- font-size: var(--nutui-countup-base-size, 18px);
12
- font-weight: var(--nutui-font-weight-bold, 600);
10
+ user-select: none;
11
+ -webkit-tap-highlight-color: transparent;
13
12
  }
14
13
  .nut-countup-listitem-number {
15
14
  margin: 0 var(--nutui-countup-lr-margin, 0);
@@ -22,14 +21,21 @@
22
21
  height: 80%;
23
22
  align-items: flex-end;
24
23
  color: var(--nutui-countup-bg-color, inherit);
24
+ font-size: var(--nutui-countup-base-size, 18px);
25
+ font-weight: var(--nutui-font-weight-bold, 600);
25
26
  }
26
27
  .nut-countup-number {
27
28
  display: flex;
28
29
  flex-direction: column;
29
30
  align-items: center;
30
31
  width: var(--nutui-countup-width, auto);
32
+ transition: transform 1s ease-in-out;
33
+ transform: translate(0, 0);
31
34
  }
32
- .nut-countup-number span {
35
+ .nut-countup-number-text {
33
36
  height: var(--nutui-countup-height, 32px);
34
37
  line-height: var(--nutui-countup-height, 32px);
38
+ color: var(--nutui-countup-color, var(--nutui-color-title, #1a1a1a));
39
+ font-size: var(--nutui-countup-base-size, 18px);
40
+ font-weight: var(--nutui-font-weight-bold, 600);
35
41
  }
@@ -1,7 +1,6 @@
1
1
  .nut-button {
2
2
  position: relative;
3
3
  display: flex;
4
- display: inline-block;
5
4
  /* #ifdef rn harmony*/
6
5
  width: 80px;
7
6
  /* #endif */
@@ -16,14 +15,14 @@
16
15
  margin: 0;
17
16
  padding: 0;
18
17
  height: var(--nutui-button-default-height, 32px);
19
- font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
18
+ font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
20
19
  font-weight: var(--nutui-button-default-font-weight, var(--nutui-font-weight, 400));
21
20
  text-align: center;
22
21
  cursor: pointer;
23
22
  transition: opacity 0.2s;
24
- -webkit-appearance: none;
25
23
  user-select: none;
26
24
  touch-action: manipulation;
25
+ -webkit-appearance: none;
27
26
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
28
27
  color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a));
29
28
  background: var(--nutui-button-default-background-color, transparent);
@@ -72,9 +71,9 @@
72
71
  /* #endif */
73
72
  }
74
73
  .nut-button-wrap .nut-icon {
75
- font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
76
- width: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
77
- height: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
74
+ font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
75
+ width: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
76
+ height: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
78
77
  }
79
78
  .nut-button-loading::before, .nut-button-disabled::before {
80
79
  display: none;
@@ -87,6 +86,18 @@
87
86
  width: var(--nutui-button-default-height, 32px);
88
87
  padding: 0;
89
88
  }
89
+ .nut-button-round {
90
+ border-radius: var(--nutui-button-border-radius, 8px);
91
+ }
92
+ .nut-button-round-xlarge, .nut-button-round-large {
93
+ border-radius: var(--nutui-button-large-border-radius, 12px);
94
+ }
95
+ .nut-button-round-small {
96
+ border-radius: var(--nutui-button-small-border-radius, 8px);
97
+ }
98
+ .nut-button-round-mini {
99
+ border-radius: var(--nutui-button-mini-border-radius, 6px);
100
+ }
90
101
  .nut-button-default {
91
102
  padding: var(--nutui-button-default-padding, 0px 12px);
92
103
  border-style: solid;
@@ -111,37 +122,52 @@
111
122
  .nut-button-xlarge {
112
123
  height: var(--nutui-button-xlarge-height, 48px);
113
124
  padding: var(--nutui-button-xlarge-padding, 0px 24px);
114
- font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xxl, 24px));
125
+ font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
115
126
  font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
127
+ border-radius: var(--nutui-radius-base, 8px);
128
+ }
129
+ .nut-button-xlarge .nut-button-text {
130
+ margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
131
+ }
132
+ .nut-button-xlarge .nut-button-text-right {
133
+ margin-right: var(--nutui-button-xlarge-text-icon-margin, 6px);
116
134
  }
117
135
  .nut-button-xlarge .nut-icon {
118
- font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xxl, 24px));
119
- width: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xxl, 24px));
120
- height: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xxl, 24px));
136
+ font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
137
+ width: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
138
+ height: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
121
139
  }
122
140
  .nut-button-xlarge-children {
123
- font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xxl, 24px));
141
+ font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
124
142
  font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
125
143
  }
126
144
  .nut-button-large {
127
145
  height: var(--nutui-button-large-height, 40px);
128
146
  padding: var(--nutui-button-large-padding, 0px 16px);
129
- font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
147
+ font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
130
148
  font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
149
+ border-radius: var(--nutui-radius-base, 8px);
150
+ }
151
+ .nut-button-large .nut-button-text {
152
+ margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
153
+ }
154
+ .nut-button-large .nut-button-text-right {
155
+ margin-right: var(--nutui-button-xlarge-text-icon-margin, 6px);
131
156
  }
132
157
  .nut-button-large .nut-icon {
133
- font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
134
- width: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
135
- height: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
158
+ font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
159
+ width: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
160
+ height: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
136
161
  }
137
162
  .nut-button-large-children {
138
- font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
163
+ font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
139
164
  font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
140
165
  }
141
166
  .nut-button-small {
142
167
  height: var(--nutui-button-small-height, 28px);
143
168
  padding: var(--nutui-button-small-padding, 0px 8px);
144
169
  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
170
+ border-radius: var(--nutui-radius-s, 6px);
145
171
  }
146
172
  .nut-button-small .nut-icon {
147
173
  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
@@ -154,15 +180,16 @@
154
180
  .nut-button-mini {
155
181
  height: var(--nutui-button-mini-height, 24px);
156
182
  padding: var(--nutui-button-mini-padding, 0px 8px);
157
- font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
183
+ font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
184
+ border-radius: var(--nutui-radius-s, 6px);
158
185
  }
159
186
  .nut-button-mini .nut-icon {
160
- font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
161
- width: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
162
- height: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
187
+ font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
188
+ width: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
189
+ height: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
163
190
  }
164
191
  .nut-button-mini-children {
165
- font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
192
+ font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
166
193
  }
167
194
  .nut-button-primary {
168
195
  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
@@ -173,7 +200,7 @@
173
200
  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
174
201
  }
175
202
  .nut-button-primary-solid {
176
- background: var(--nutui-color-primary, #ff0f23);
203
+ background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%);
177
204
  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
178
205
  border-color: transparent;
179
206
  }
@@ -333,18 +360,6 @@
333
360
  cursor: default;
334
361
  opacity: 0.9;
335
362
  }
336
- .nut-button-round {
337
- border-radius: var(--nutui-button-border-radius, 8px);
338
- }
339
- .nut-button-round-xlarge, .nut-button-round-large {
340
- border-radius: var(--nutui-button-large-border-radius, 12px);
341
- }
342
- .nut-button-round-small {
343
- border-radius: var(--nutui-button-small-border-radius, 8px);
344
- }
345
- .nut-button-round-mini {
346
- border-radius: var(--nutui-button-mini-border-radius, 6px);
347
- }
348
363
  .nut-button-square {
349
364
  border-radius: var(--nutui-button-square-border-radius, 0);
350
365
  }
@@ -1,7 +1,6 @@
1
1
  .nut-button {
2
2
  position: relative;
3
3
  display: flex;
4
- display: inline-block;
5
4
  /* #ifdef rn harmony*/
6
5
  width: 80px;
7
6
  /* #endif */
@@ -21,9 +20,9 @@
21
20
  text-align: center;
22
21
  cursor: pointer;
23
22
  transition: $button-transition;
24
- -webkit-appearance: none;
25
23
  user-select: none;
26
24
  touch-action: manipulation;
25
+ -webkit-appearance: none;
27
26
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
28
27
  color: $button-default-color;
29
28
  background: $button-default-background-color;
@@ -99,6 +98,23 @@
99
98
  padding: 0;
100
99
  }
101
100
 
101
+ &-round {
102
+ border-radius: $button-border-radius;
103
+
104
+ &-xlarge,
105
+ &-large {
106
+ border-radius: $button-large-border-radius;
107
+ }
108
+
109
+ &-small {
110
+ border-radius: $button-small-border-radius;
111
+ }
112
+
113
+ &-mini {
114
+ border-radius: $button-mini-border-radius;
115
+ }
116
+ }
117
+
102
118
  &-default {
103
119
  padding: $button-default-padding;
104
120
  border-style: solid;
@@ -136,6 +152,14 @@
136
152
  padding: $button-xlarge-padding;
137
153
  font-size: $button-xlarge-font-size;
138
154
  font-weight: $button-large-font-weight;
155
+ border-radius: $radius-base;
156
+
157
+ .nut-button-text {
158
+ margin-left: $button-xlarge-text-icon-margin;
159
+ &-right {
160
+ margin-right: $button-xlarge-text-icon-margin;
161
+ }
162
+ }
139
163
 
140
164
  .nut-icon {
141
165
  font-size: $button-xlarge-font-size;
@@ -153,6 +177,14 @@
153
177
  padding: $button-large-padding;
154
178
  font-size: $button-large-font-size;
155
179
  font-weight: $button-large-font-weight;
180
+ border-radius: $radius-base;
181
+
182
+ .nut-button-text {
183
+ margin-left: $button-xlarge-text-icon-margin;
184
+ &-right {
185
+ margin-right: $button-xlarge-text-icon-margin;
186
+ }
187
+ }
156
188
 
157
189
  .nut-icon {
158
190
  font-size: $button-large-font-size;
@@ -170,6 +202,7 @@
170
202
  height: $button-small-height;
171
203
  padding: $button-small-padding;
172
204
  font-size: $button-small-font-size;
205
+ border-radius: $radius-s;
173
206
 
174
207
  .nut-icon {
175
208
  font-size: $button-small-font-size;
@@ -186,6 +219,7 @@
186
219
  height: $button-mini-height;
187
220
  padding: $button-mini-padding;
188
221
  font-size: $button-mini-font-size;
222
+ border-radius: $radius-s;
189
223
 
190
224
  .nut-icon {
191
225
  font-size: $button-mini-font-size;
@@ -412,23 +446,6 @@
412
446
  opacity: 0.9;
413
447
  }
414
448
 
415
- &-round {
416
- border-radius: $button-border-radius;
417
-
418
- &-xlarge,
419
- &-large {
420
- border-radius: $button-large-border-radius;
421
- }
422
-
423
- &-small {
424
- border-radius: $button-small-border-radius;
425
- }
426
-
427
- &-mini {
428
- border-radius: $button-mini-border-radius;
429
- }
430
- }
431
-
432
449
  &-square {
433
450
  border-radius: $button-square-border-radius;
434
451
  }
@@ -1,7 +1,6 @@
1
1
  .nut-button {
2
2
  position: relative;
3
3
  display: flex;
4
- display: inline-block;
5
4
  /* #ifdef rn harmony*/
6
5
  width: 80px;
7
6
  /* #endif */
@@ -16,14 +15,14 @@
16
15
  margin: 0;
17
16
  padding: 0;
18
17
  height: var(--nutui-button-default-height, 32px);
19
- font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
18
+ font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
20
19
  font-weight: var(--nutui-button-default-font-weight, var(--nutui-font-weight, 400));
21
20
  text-align: center;
22
21
  cursor: pointer;
23
22
  transition: opacity 0.2s;
24
- -webkit-appearance: none;
25
23
  user-select: none;
26
24
  touch-action: manipulation;
25
+ -webkit-appearance: none;
27
26
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
28
27
  color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a));
29
28
  background: var(--nutui-button-default-background-color, transparent);
@@ -72,9 +71,9 @@
72
71
  /* #endif */
73
72
  }
74
73
  .nut-button-wrap .nut-icon {
75
- font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
76
- width: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
77
- height: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
74
+ font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
75
+ width: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
76
+ height: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
78
77
  }
79
78
  .nut-button-loading::before, .nut-button-disabled::before {
80
79
  display: none;
@@ -87,6 +86,18 @@
87
86
  width: var(--nutui-button-default-height, 32px);
88
87
  padding: 0;
89
88
  }
89
+ .nut-button-round {
90
+ border-radius: var(--nutui-button-border-radius, 8px);
91
+ }
92
+ .nut-button-round-xlarge, .nut-button-round-large {
93
+ border-radius: var(--nutui-button-large-border-radius, 12px);
94
+ }
95
+ .nut-button-round-small {
96
+ border-radius: var(--nutui-button-small-border-radius, 8px);
97
+ }
98
+ .nut-button-round-mini {
99
+ border-radius: var(--nutui-button-mini-border-radius, 6px);
100
+ }
90
101
  .nut-button-default {
91
102
  padding: var(--nutui-button-default-padding, 0px 12px);
92
103
  border-style: solid;
@@ -111,37 +122,52 @@
111
122
  .nut-button-xlarge {
112
123
  height: var(--nutui-button-xlarge-height, 48px);
113
124
  padding: var(--nutui-button-xlarge-padding, 0px 24px);
114
- font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xxl, 24px));
125
+ font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
115
126
  font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
127
+ border-radius: var(--nutui-radius-base, 8px);
128
+ }
129
+ .nut-button-xlarge .nut-button-text {
130
+ margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
131
+ }
132
+ .nut-button-xlarge .nut-button-text-right {
133
+ margin-right: var(--nutui-button-xlarge-text-icon-margin, 6px);
116
134
  }
117
135
  .nut-button-xlarge .nut-icon {
118
- font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xxl, 24px));
119
- width: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xxl, 24px));
120
- height: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xxl, 24px));
136
+ font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
137
+ width: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
138
+ height: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
121
139
  }
122
140
  .nut-button-xlarge-children {
123
- font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xxl, 24px));
141
+ font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
124
142
  font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
125
143
  }
126
144
  .nut-button-large {
127
145
  height: var(--nutui-button-large-height, 40px);
128
146
  padding: var(--nutui-button-large-padding, 0px 16px);
129
- font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
147
+ font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
130
148
  font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
149
+ border-radius: var(--nutui-radius-base, 8px);
150
+ }
151
+ .nut-button-large .nut-button-text {
152
+ margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
153
+ }
154
+ .nut-button-large .nut-button-text-right {
155
+ margin-right: var(--nutui-button-xlarge-text-icon-margin, 6px);
131
156
  }
132
157
  .nut-button-large .nut-icon {
133
- font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
134
- width: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
135
- height: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
158
+ font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
159
+ width: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
160
+ height: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
136
161
  }
137
162
  .nut-button-large-children {
138
- font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
163
+ font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
139
164
  font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
140
165
  }
141
166
  .nut-button-small {
142
167
  height: var(--nutui-button-small-height, 28px);
143
168
  padding: var(--nutui-button-small-padding, 0px 8px);
144
169
  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
170
+ border-radius: var(--nutui-radius-s, 6px);
145
171
  }
146
172
  .nut-button-small .nut-icon {
147
173
  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
@@ -154,15 +180,16 @@
154
180
  .nut-button-mini {
155
181
  height: var(--nutui-button-mini-height, 24px);
156
182
  padding: var(--nutui-button-mini-padding, 0px 8px);
157
- font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
183
+ font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
184
+ border-radius: var(--nutui-radius-s, 6px);
158
185
  }
159
186
  .nut-button-mini .nut-icon {
160
- font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
161
- width: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
162
- height: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
187
+ font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
188
+ width: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
189
+ height: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
163
190
  }
164
191
  .nut-button-mini-children {
165
- font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
192
+ font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
166
193
  }
167
194
  .nut-button-primary {
168
195
  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
@@ -173,7 +200,7 @@
173
200
  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
174
201
  }
175
202
  .nut-button-primary-solid {
176
- background: var(--nutui-color-primary, #ff0f23);
203
+ background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%);
177
204
  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
178
205
  border-color: transparent;
179
206
  }
@@ -333,18 +360,6 @@
333
360
  cursor: default;
334
361
  opacity: 0.9;
335
362
  }
336
- .nut-button-round {
337
- border-radius: var(--nutui-button-border-radius, 8px);
338
- }
339
- .nut-button-round-xlarge, .nut-button-round-large {
340
- border-radius: var(--nutui-button-large-border-radius, 12px);
341
- }
342
- .nut-button-round-small {
343
- border-radius: var(--nutui-button-small-border-radius, 8px);
344
- }
345
- .nut-button-round-mini {
346
- border-radius: var(--nutui-button-mini-border-radius, 6px);
347
- }
348
363
  .nut-button-square {
349
364
  border-radius: var(--nutui-button-square-border-radius, 0);
350
365
  }
@@ -583,7 +583,7 @@
583
583
  height: 44px;
584
584
  margin: 10px 18px;
585
585
  border-radius: 22px;
586
- background: var(--nutui-color-primary, #ff0f23);
586
+ background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%);
587
587
  color: var(--nutui-color-primary-text, #ffffff);
588
588
  text-align: center;
589
589
  line-height: 44px;
@@ -37,28 +37,13 @@
37
37
  line-height: 18px;
38
38
  margin-top: 9px;
39
39
 
40
- .nut-price {
41
- .nut-price-big {
42
- font-size: 18px;
43
- }
44
-
45
- .nut-price-symbol,
46
- .nut-price-point,
47
- .nut-price-small {
48
- font-size: 12px;
49
- }
50
- }
51
-
52
40
  &-origin {
53
41
  &.nut-price {
54
42
  margin-left: 2px;
55
- color: #d2a448;
56
-
57
- .nut-price-big,
58
43
  .nut-price-symbol,
59
- .nut-price-point,
60
- .nut-price-small {
61
- font-size: 12px;
44
+ .nut-price-integer,
45
+ .nut-price-decimal {
46
+ color: #d2a448;
62
47
  }
63
48
  }
64
49
  }
@@ -61,6 +61,7 @@
61
61
  .nut-tag .nut-icon {
62
62
  vertical-align: middle;
63
63
  margin-left: 4px;
64
+ color: var(--nutui-tag-color, #ffffff);
64
65
  }
65
66
  .nut-tag-text {
66
67
  font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10px));
@@ -153,23 +154,13 @@
153
154
  line-height: 18px;
154
155
  margin-top: 9px;
155
156
  }
156
- .nut-card-right-price .nut-price .nut-price-big {
157
- font-size: 18px;
158
- }
159
- .nut-card-right-price .nut-price .nut-price-symbol,
160
- .nut-card-right-price .nut-price .nut-price-point,
161
- .nut-card-right-price .nut-price .nut-price-small {
162
- font-size: 12px;
163
- }
164
157
  .nut-card-right-price-origin.nut-price {
165
158
  margin-left: 2px;
166
- color: #d2a448;
167
159
  }
168
- .nut-card-right-price-origin.nut-price .nut-price-big,
169
160
  .nut-card-right-price-origin.nut-price .nut-price-symbol,
170
- .nut-card-right-price-origin.nut-price .nut-price-point,
171
- .nut-card-right-price-origin.nut-price .nut-price-small {
172
- font-size: 12px;
161
+ .nut-card-right-price-origin.nut-price .nut-price-integer,
162
+ .nut-card-right-price-origin.nut-price .nut-price-decimal {
163
+ color: #d2a448;
173
164
  }
174
165
  .nut-card-right-other {
175
166
  display: flex;
@@ -1,5 +1,4 @@
1
1
  import React, { FunctionComponent, ReactNode } from 'react';
2
- import CheckboxGroup from "../checkboxgroup";
3
2
  import { BasicComponent } from "../../utils/typings";
4
3
  import { CheckboxLabelPosition } from "../checkboxgroup/types";
5
4
  export type CheckboxShape = 'button' | 'round';
@@ -17,6 +16,4 @@ export interface CheckboxProps extends BasicComponent {
17
16
  label: ReactNode;
18
17
  onChange: (value: boolean) => void;
19
18
  }
20
- export declare const Checkbox: FunctionComponent<Partial<CheckboxProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>> & {
21
- Group: typeof CheckboxGroup;
22
- };
19
+ export declare const Checkbox: FunctionComponent<Partial<CheckboxProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>>;
@@ -18,7 +18,6 @@ var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
18
18
  var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
19
19
  var _iconsreact = require("@nutui/icons-react");
20
20
  var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
21
- var _checkboxgroup = /*#__PURE__*/ _interop_require_default._(require("../checkboxgroup"));
22
21
  var _typings = require("../../utils/typings");
23
22
  var _context = /*#__PURE__*/ _interop_require_default._(require("../checkboxgroup/context"));
24
23
  var _usepropsvalue = require("../../utils/use-props-value");
@@ -174,4 +173,3 @@ var Checkbox = function Checkbox(props) {
174
173
  }), renderCheckboxItem());
175
174
  };
176
175
  Checkbox.displayName = 'NutCheckBox';
177
- Checkbox.Group = _checkboxgroup.default;
@@ -1,3 +1,8 @@
1
- import { Checkbox } from './checkbox';
1
+ import { CheckboxProps } from './checkbox';
2
+ import { CheckboxGroup } from '../checkboxgroup/checkboxgroup';
2
3
  export type { CheckboxProps, CheckboxShape } from './checkbox';
3
- export default Checkbox;
4
+ type CompoundedComponent = React.FC<Partial<CheckboxProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>> & {
5
+ Group: typeof CheckboxGroup;
6
+ };
7
+ declare const InnerCheckbox: CompoundedComponent;
8
+ export default InnerCheckbox;
@@ -9,4 +9,7 @@ Object.defineProperty(exports, "default", {
9
9
  }
10
10
  });
11
11
  var _checkbox = require("./checkbox");
12
- var _default = _checkbox.Checkbox;
12
+ var _checkboxgroup = require("../checkboxgroup/checkboxgroup");
13
+ var InnerCheckbox = _checkbox.Checkbox;
14
+ InnerCheckbox.Group = _checkboxgroup.CheckboxGroup;
15
+ var _default = InnerCheckbox;