@nutui/nutui-react 2.0.0-alpha.2 → 2.0.0-alpha.4

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 (44) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/esm/Badge.js +4 -66
  3. package/dist/esm/CalendarItem.js +2 -12
  4. package/dist/esm/Cascader.js +4 -2
  5. package/dist/esm/CircleProgress.js +20 -25
  6. package/dist/esm/Dialog.js +162 -171
  7. package/dist/esm/Input.js +87 -193
  8. package/dist/esm/Popup.js +2 -4
  9. package/dist/esm/Switch.js +16 -30
  10. package/dist/esm/TabPane.js +0 -2
  11. package/dist/esm/Tabbar.js +29 -33
  12. package/dist/esm/TabbarItem.js +5 -75
  13. package/dist/esm/Tabs.js +2 -2
  14. package/dist/esm/badge2.js +69 -0
  15. package/dist/esm/nutui-react.es.js +170 -170
  16. package/dist/esm/overlay2.js +12 -14
  17. package/dist/esm/raf.js +16 -0
  18. package/dist/esm/tabbaritem2.js +61 -0
  19. package/dist/esm/tabpane2.js +7 -9
  20. package/dist/esm/tabs2.js +101 -93
  21. package/dist/locales/base.js +1 -1
  22. package/dist/locales/en-US.js +1 -1
  23. package/dist/locales/id-ID.js +1 -1
  24. package/dist/locales/zh-CN.js +1 -1
  25. package/dist/locales/zh-TW.js +1 -1
  26. package/dist/locales/zh-UG.js +1 -1
  27. package/dist/nutui.react.mjs +18569 -19365
  28. package/dist/nutui.react.umd.js +18567 -19363
  29. package/dist/packages/badge/badge.scss +0 -1
  30. package/dist/packages/circleprogress/circleprogress.scss +0 -9
  31. package/dist/packages/dialog/dialog.scss +36 -65
  32. package/dist/packages/input/input.scss +13 -180
  33. package/dist/packages/overlay/overlay.scss +11 -4
  34. package/dist/packages/switch/switch.scss +13 -31
  35. package/dist/packages/tabbar/tabbar.scss +16 -23
  36. package/dist/packages/tabbaritem/tabbaritem.scss +9 -70
  37. package/dist/packages/tabs/tabs.scss +196 -225
  38. package/dist/style.css +1 -1
  39. package/dist/style.mjs +1 -1
  40. package/dist/styles/themes/default.scss +17 -17
  41. package/dist/styles/variables-jmapp.scss +24 -27
  42. package/dist/styles/variables.scss +34 -30
  43. package/dist/types/index.d.ts +366 -423
  44. package/package.json +2 -2
package/dist/packages/tabs/tabs.scss CHANGED
@@ -1,284 +1,255 @@
1
1
  @import '../../styles/mixins/index';
2
2
 
3
- .nut-theme-dark {
4
- .nut-tabs {
5
- .nut-tabpane {
6
- color: $white;
7
- }
3
+ .nut-tabs {
4
+ display: flex;
5
+ }
8
6
 
9
- &__titles {
10
- background: $dark5;
7
+ .nut-tabs__titles {
8
+ box-sizing: border-box;
9
+ height: $tabs-horizontal-titles-height;
10
+ padding: 0 10px;
11
+ display: flex;
12
+ user-select: none;
13
+ background: $tabs-titles-background-color;
14
+ border-radius: $tabs-titles-border-radius;
15
+ flex-shrink: 0;
16
+ overflow: hidden;
17
+
18
+ &::-webkit-scrollbar {
19
+ display: none;
20
+ width: 0;
21
+ background: transparent;
22
+ }
23
+ }
11
24
 
12
- &-item {
13
- color: $dark1;
25
+ .nut-tabs__titles--left {
26
+ justify-content: flex-start;
27
+ }
14
28
 
15
- &.active {
16
- color: $dark1;
17
- }
29
+ .nut-tabs__titles--right {
30
+ justify-content: flex-end;
31
+ }
18
32
 
19
- &__text {
20
- color: $dark1;
21
- }
22
- }
23
- }
33
+ .nut-tabs__titles--scrollable {
34
+ overflow-x: auto;
35
+ overflow-y: hidden;
24
36
 
25
- &.vertical {
26
- .nut-tabs__titles {
27
- &-item {
28
- &.active {
29
- background-color: $dark5;
30
- }
31
- }
32
- }
33
- }
37
+ .nut-tabs__titles-item {
38
+ width: auto;
34
39
  }
35
40
  }
36
41
 
37
- .nut-tabs {
42
+ .nut-tabs__titles-item {
43
+ position: relative;
44
+ min-width: $tabs-horizontal-titles-item-min-width;
38
45
  display: flex;
46
+ flex: 1;
47
+ align-items: center;
48
+ justify-content: center;
49
+ margin: 0 $nut-tabs-title-gap;
50
+ font-size: $tabs-titles-item-font-size;
51
+ color: $tabs-titles-item-color;
52
+ overflow: hidden;
53
+ text-overflow: ellipsis;
54
+ white-space: nowrap;
55
+ }
39
56
 
40
- &.horizontal {
41
- flex-direction: column;
42
- }
43
-
44
- &.vertical {
45
- flex-direction: row;
46
- width: 100%;
47
-
48
- .nut-tabs__titles {
49
- box-sizing: border-box;
50
- flex-direction: column;
51
- height: 100%;
52
- padding: 0 !important;
53
- width: $tabs-vertical-titles-width;
54
- flex-shrink: 0;
55
-
56
- &.scrollable {
57
- overflow-x: hidden;
58
- overflow-y: auto;
59
- }
60
-
61
- .nut-tabs__titles-item {
62
- height: $tabs-vertical-titles-item-height;
63
- flex: none;
64
-
65
- .nut-tabs__titles-item__smile {
66
- transition: width 0.3s ease;
67
- }
57
+ .nut-tabs__titles-item--left,
58
+ .nut-tabs__titles-item--right {
59
+ flex: none;
60
+ }
68
61
 
69
- .nut-tabs__titles-item__line {
70
- bottom: none;
71
- transform: translate(0, -50%);
72
- transition: height 0.3s ease;
73
- width: 0;
74
- height: 0;
75
- }
62
+ .nut-tabs__titles-item__text {
63
+ text-align: center;
64
+ }
76
65
 
77
- &.active {
78
- background-color: $tabs-horizontal-titles-item-active-background-color;
66
+ .nut-tabs__titles-item__smile,
67
+ .nut-tabs__titles-item__line {
68
+ position: absolute;
69
+ transition: width 0.3s ease;
70
+ width: 0;
71
+ height: 0;
72
+ content: ' ';
73
+ bottom: $tabs-horizontal-tab-line-bottom;
74
+ left: 50%;
75
+ transform: translate(-50%, 0);
76
+ border-radius: $tabs-horizontal-tab-line-border-radius;
77
+ opacity: $tabs-horizontal-tab-line-opacity;
78
+ overflow: hidden;
79
+ }
79
80
 
80
- .nut-tabs__titles-item__line {
81
- left: 10px;
82
- width: $tabs-vertical-titles-item-active-line-width;
83
- height: $tabs-vertical-titles-item-active-line-height;
84
- background: $tabs-vertical-tab-line-color;
85
- }
81
+ .nut-tabs__titles-item__smile {
82
+ bottom: -2%;
86
83
 
87
- .nut-tabs__titles-item__smile {
88
- right: -2px;
89
- bottom: 2px;
90
- left: auto;
91
- width: 3px;
92
- transform: rotate(320deg);
93
- height: $tabs-vertical-titles-item-active-line-height;
94
- }
95
- }
96
- }
97
- }
84
+ .nut-icon {
85
+ position: absolute;
86
+ font-size: 12px;
87
+ width: 100%;
88
+ height: 100%;
89
+ color: $tabs-tab-smile-color;
90
+ }
91
+ }
98
92
 
99
- .nut-tabs__content {
100
- flex-direction: column;
93
+ .nut-tabs__titles-item--active {
94
+ color: $tabs-titles-item-active-color;
95
+ font-weight: $tabs-titles-item-active-font-weight;
101
96
 
102
- &__wrap {
103
- flex: 1;
104
- }
97
+ .nut-tabs__titles-item__smile {
98
+ overflow: unset;
99
+ width: 40px;
100
+ height: 20px;
101
+ }
105
102
 
106
- height: 100%;
103
+ .nut-tabs__titles-item__line {
104
+ overflow: unset;
105
+ content: ' ';
106
+ width: $tabs-horizontal-titles-item-active-line-width;
107
+ height: $tabs-horizontal-titles-item-active-line-height;
108
+ background: $tabs-horizontal-tab-line-color;
109
+ }
110
+ }
107
111
 
108
- .nut-tabpane {
109
- height: 100%;
110
- }
111
- }
112
+ .nut-tabs__titles-item--disabled {
113
+ color: $disable-color;
114
+ }
112
115
 
113
- .horizontal {
114
- .nut-tabs__titles {
115
- display: flex;
116
- flex-direction: row;
117
- padding: 0 !important;
118
- width: 100%;
116
+ .nut-tabs--horizontal {
117
+ flex-direction: column;
118
+ }
119
119
 
120
- .nut-tabs__titles-item {
121
- display: flex;
122
- align-items: center;
123
- justify-content: center;
124
- flex: 1 0 auto;
120
+ .nut-tabs--vertical {
121
+ flex-direction: row;
122
+ width: 100%;
125
123
 
126
- .nut-tabs__titles-item__smile,
127
- .nut-tabs__titles-item__line {
128
- position: absolute;
129
- transition: width 0.3s ease;
130
- width: 0;
131
- height: 0;
132
- content: ' ';
133
- bottom: $tabs-horizontal-tab-line-bottom;
134
- left: 50%;
135
- transform: translate(-50%, 0);
136
- overflow: hidden;
137
- border-radius: $tabs-horizontal-tab-line-border-radius;
138
- opacity: $tabs-horizontal-tab-line-opacity;
139
- }
124
+ .nut-tabs__titles {
125
+ box-sizing: border-box;
126
+ flex-direction: column;
127
+ height: 100%;
128
+ padding: 0;
129
+ width: $tabs-vertical-titles-width;
130
+ flex-shrink: 0;
131
+ }
140
132
 
141
- &.active {
142
- color: $tabs-titles-item-active-color;
143
- font-weight: $tabs-titles-item-active-font-weight;
133
+ .nut-tabs__titles--scrollable {
134
+ overflow-x: hidden;
135
+ overflow-y: auto;
136
+ }
144
137
 
145
- .nut-tabs__titles-item__line {
146
- content: ' ';
147
- width: $tabs-horizontal-titles-item-active-line-width;
148
- height: $tabs-horizontal-titles-item-active-line-height;
149
- background: $tabs-horizontal-tab-line-color;
150
- }
151
- }
152
- }
153
- }
154
- }
138
+ .nut-tabs__titles-item {
139
+ height: $tabs-vertical-titles-item-height;
140
+ flex: none;
155
141
  }
156
142
 
157
- .nut-tabs__titles {
158
- height: $tabs-horizontal-titles-height;
159
- padding: 0 10px;
160
- display: flex;
161
- user-select: none;
162
- background: $tabs-titles-background-color;
163
- border-radius: $tabs-titles-border-radius;
164
- flex-shrink: 0;
143
+ .nut-tabs__titles-item__smile {
144
+ width: 0;
145
+ height: 0;
165
146
  overflow: hidden;
147
+ transition: width 0.3s ease;
148
+ }
166
149
 
167
- &.large {
168
- .nut-tabs__titles-item {
169
- font-size: $tabs-titles-item-large-font-size;
170
- }
171
- }
150
+ .nut-tabs__titles-item__line {
151
+ width: 0;
152
+ height: 0;
153
+ transform: translate(0, -50%);
154
+ transition: height 0.3s ease;
155
+ }
172
156
 
173
- &.normal {
174
- .nut-tabs__titles-item {
175
- font-size: $tabs-titles-item-font-size;
176
- }
177
- }
157
+ .nut-tabs__titles-item--active {
158
+ background-color: $tabs-horizontal-titles-item-active-background-color;
178
159
 
179
- &.small {
180
- .nut-tabs__titles-item {
181
- font-size: $tabs-titles-item-small-font-size;
182
- }
160
+ .nut-tabs__titles-item__line {
161
+ left: 10px;
162
+ width: $tabs-vertical-titles-item-active-line-width;
163
+ height: $tabs-vertical-titles-item-active-line-height;
164
+ background: $tabs-vertical-tab-line-color;
183
165
  }
184
166
 
185
- &::-webkit-scrollbar {
186
- display: none;
187
- width: 0;
188
- background: transparent;
189
- }
190
-
191
- &.smile {
192
- .nut-tabs__titles-item {
193
- &.active {
194
- .nut-tabs__titles-item__smile {
195
- width: 20px;
196
- height: 8px;
197
- }
198
- }
199
- }
167
+ .nut-tabs__titles-item__smile {
168
+ right: -5px;
169
+ bottom: 2%;
170
+ left: auto;
171
+ width: 40px;
172
+ height: 20px;
173
+ transform: rotate(320deg);
200
174
  }
175
+ }
201
176
 
202
- &.scrollable {
177
+ .nut-tabs--horizontal {
178
+ .nut-tabs__titles {
179
+ flex-direction: row;
203
180
  overflow-x: auto;
204
181
  overflow-y: hidden;
205
-
206
- .nut-tabs__titles-item {
207
- width: auto;
208
- }
182
+ height: $tabs-horizontal-titles-height;
209
183
  }
210
184
 
211
- .nut-tabs__titles-item {
212
- position: relative;
213
- font-size: $tabs-titles-item-font-size;
214
- min-width: $tabs-horizontal-titles-item-min-width;
215
- display: flex;
216
- align-items: center;
217
- justify-content: center;
218
- flex: 1 0 auto;
219
- color: $tabs-titles-item-color;
220
-
221
- .nut-tabs__titles-item__text {
222
- text-align: center;
185
+ .nut-tabs__content {
186
+ flex-direction: row;
187
+ }
223
188
 
224
- &.ellipsis {
225
- @include oneline-ellipsis();
226
- }
227
- }
189
+ .nut-tabs__titles-item--active {
190
+ background-color: initial;
228
191
 
229
- .nut-tabs__titles-item__smile,
230
192
  .nut-tabs__titles-item__line {
231
- position: absolute;
232
- transition: width 0.3s ease;
233
- width: 0;
234
- height: 0;
235
- content: ' ';
236
- bottom: $tabs-horizontal-tab-line-bottom;
237
193
  left: 50%;
238
194
  transform: translate(-50%, 0);
239
- overflow: hidden;
240
- border-radius: $tabs-horizontal-tab-line-border-radius;
241
- opacity: $tabs-horizontal-tab-line-opacity;
242
195
  }
243
196
 
244
197
  .nut-tabs__titles-item__smile {
245
- .nut-icon {
246
- position: absolute;
247
- font-size: 12px;
248
- width: 100%;
249
- height: 100%;
250
- color: $tabs-tab-smile-color;
251
- }
198
+ left: 50%;
199
+ right: auto;
200
+ bottom: -3px;
201
+ transform: translate(-50%, 0) rotate(0deg);
252
202
  }
203
+ }
204
+ }
253
205
 
254
- &.nut-tabs__titles-item-left-align {
255
- flex: none;
256
- }
206
+ .nut-tabs__content {
207
+ flex-direction: column;
208
+ height: 100%;
257
209
 
258
- &.disabled {
259
- color: $disable-color;
260
- }
210
+ &__wrap {
211
+ flex: 1;
212
+ }
261
213
 
262
- &.active {
263
- color: $tabs-titles-item-active-color;
264
- font-weight: $tabs-titles-item-active-font-weight;
214
+ .nut-tabpane {
215
+ height: 100%;
216
+ }
217
+ }
265
218
 
266
- .nut-tabs__titles-item__line {
267
- content: ' ';
268
- width: $tabs-horizontal-titles-item-active-line-width;
269
- height: $tabs-horizontal-titles-item-active-line-height;
270
- background: $tabs-horizontal-tab-line-color;
219
+ .nut-tabs--horizontal {
220
+ .nut-tabs__titles {
221
+ display: flex;
222
+ flex-direction: row;
223
+ padding: 0 !important;
224
+ width: 100%;
225
+
226
+ .nut-tabs__titles-item {
227
+ display: flex;
228
+ align-items: center;
229
+ justify-content: center;
230
+ flex: 1 0 auto;
231
+
232
+ &--active {
233
+ color: $tabs-titles-item-active-color;
234
+ font-weight: $tabs-titles-item-active-font-weight;
235
+
236
+ .nut-tabs__titles-item__line {
237
+ content: ' ';
238
+ width: $tabs-horizontal-titles-item-active-line-width;
239
+ height: $tabs-horizontal-titles-item-active-line-height;
240
+ background: $tabs-horizontal-tab-line-color;
241
+ }
271
242
  }
272
243
  }
273
244
  }
274
245
  }
246
+ }
275
247
 
276
- &__content {
277
- &__wrap {
278
- overflow: hidden;
279
- }
280
-
281
- display: flex;
282
- box-sizing: border-box;
248
+ .nut-tabs__content {
249
+ &__wrap {
250
+ overflow: hidden;
283
251
  }
252
+
253
+ display: flex;
254
+ box-sizing: border-box;
284
255
  }