@rescui/switcher 0.7.1 → 0.9.0
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.
- package/lib/index.css +118 -40
- package/lib/index.p.module.css.js +17 -13
- package/lib/public-api.p.css +33 -3
- package/lib/public-api.pcss +33 -3
- package/lib/switcher.d.ts +13 -5
- package/lib/switcher.js +25 -23
- package/package.json +2 -2
package/lib/index.css
CHANGED
|
@@ -1,14 +1,20 @@
|
|
|
1
|
-
.
|
|
1
|
+
._themeLight_mp550j_6{
|
|
2
2
|
--rs-theme-dark:0;
|
|
3
3
|
}
|
|
4
|
-
.
|
|
4
|
+
._themeDark_mp550j_9{
|
|
5
5
|
--rs-theme-dark:1;
|
|
6
6
|
}
|
|
7
|
-
.
|
|
7
|
+
._sizeXS_mp550j_13{
|
|
8
8
|
--_rs-switcher-border-radius:4px;
|
|
9
|
+
--_rs-switcher-compact-border-radius:var(--_rs-switcher-border-radius);
|
|
9
10
|
--_rs-switcher-option-padding:2px 12px;
|
|
11
|
+
--_rs-switcher-compact-option-padding:2px 8px;
|
|
12
|
+
--_rs-switcher-icon-size:16px;
|
|
13
|
+
--_rs-switcher-icon-offset:4px;
|
|
14
|
+
--_rs-switcher-compact-icon-offset:var(--_rs-switcher-icon-offset);
|
|
15
|
+
--_rs-switcher-icon-margin-vertical:2px;
|
|
10
16
|
}
|
|
11
|
-
.
|
|
17
|
+
._sizeXS_mp550j_13 [data-rs-internal='switcher__option']{
|
|
12
18
|
--_rs-typography-letter-spacing:0.0045em;
|
|
13
19
|
--_rs-typography-text-transform:initial;
|
|
14
20
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -42,11 +48,17 @@
|
|
|
42
48
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
43
49
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
44
50
|
}
|
|
45
|
-
.
|
|
46
|
-
--_rs-switcher-border-radius:
|
|
51
|
+
._sizeS_mp550j_16{
|
|
52
|
+
--_rs-switcher-border-radius:16px;
|
|
53
|
+
--_rs-switcher-compact-border-radius:4px;
|
|
47
54
|
--_rs-switcher-option-padding:6px 16px;
|
|
55
|
+
--_rs-switcher-compact-option-padding:6px 8px;
|
|
56
|
+
--_rs-switcher-icon-size:20px;
|
|
57
|
+
--_rs-switcher-icon-offset:8px;
|
|
58
|
+
--_rs-switcher-compact-icon-offset:4px;
|
|
59
|
+
--_rs-switcher-icon-margin-vertical:0px;
|
|
48
60
|
}
|
|
49
|
-
.
|
|
61
|
+
._sizeS_mp550j_16 [data-rs-internal='switcher__option']{
|
|
50
62
|
--_rs-typography-letter-spacing:0.0045em;
|
|
51
63
|
--_rs-typography-text-transform:initial;
|
|
52
64
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -80,11 +92,17 @@
|
|
|
80
92
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
81
93
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
82
94
|
}
|
|
83
|
-
.
|
|
84
|
-
--_rs-switcher-border-radius:
|
|
95
|
+
._sizeM_mp550j_19{
|
|
96
|
+
--_rs-switcher-border-radius:20px;
|
|
97
|
+
--_rs-switcher-compact-border-radius:8px;
|
|
85
98
|
--_rs-switcher-option-padding:8px 24px;
|
|
99
|
+
--_rs-switcher-compact-option-padding:8px 12px;
|
|
100
|
+
--_rs-switcher-icon-size:24px;
|
|
101
|
+
--_rs-switcher-icon-offset:12px;
|
|
102
|
+
--_rs-switcher-compact-icon-offset:8px;
|
|
103
|
+
--_rs-switcher-icon-margin-vertical:0px;
|
|
86
104
|
}
|
|
87
|
-
.
|
|
105
|
+
._sizeM_mp550j_19 [data-rs-internal='switcher__option']{
|
|
88
106
|
--_rs-typography-letter-spacing:0.0015em;
|
|
89
107
|
--_rs-typography-text-transform:initial;
|
|
90
108
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -119,15 +137,21 @@
|
|
|
119
137
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
120
138
|
}
|
|
121
139
|
@media screen and (max-width: 640px){
|
|
122
|
-
.
|
|
140
|
+
._sizeM_mp550j_19 [data-rs-internal='switcher__option']{
|
|
123
141
|
--_rs-typography-list-li-margin-top-from-text:12px;
|
|
124
142
|
}
|
|
125
143
|
}
|
|
126
|
-
.
|
|
127
|
-
--_rs-switcher-border-radius:
|
|
144
|
+
._sizeL_mp550j_22{
|
|
145
|
+
--_rs-switcher-border-radius:26px;
|
|
146
|
+
--_rs-switcher-compact-border-radius:12px;
|
|
128
147
|
--_rs-switcher-option-padding:12px 32px;
|
|
148
|
+
--_rs-switcher-compact-option-padding:12px 16px;
|
|
149
|
+
--_rs-switcher-icon-size:28px;
|
|
150
|
+
--_rs-switcher-icon-offset:16px;
|
|
151
|
+
--_rs-switcher-compact-icon-offset:12px;
|
|
152
|
+
--_rs-switcher-icon-margin-vertical:0px;
|
|
129
153
|
}
|
|
130
|
-
.
|
|
154
|
+
._sizeL_mp550j_22 [data-rs-internal='switcher__option']{
|
|
131
155
|
--_rs-typography-letter-spacing:normal;
|
|
132
156
|
--_rs-typography-text-transform:initial;
|
|
133
157
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -162,22 +186,27 @@
|
|
|
162
186
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
163
187
|
}
|
|
164
188
|
@media screen and (max-width: 640px){
|
|
165
|
-
.
|
|
189
|
+
._sizeL_mp550j_22 [data-rs-internal='switcher__option']{
|
|
166
190
|
--_rs-typography-list-li-margin-top-from-text:16px;
|
|
167
191
|
}
|
|
168
192
|
}
|
|
169
|
-
.
|
|
193
|
+
._modeClassic_mp550j_26{
|
|
170
194
|
--_rs-switcher-option-hover-background:var(--_rs-color-primary-t-fog);
|
|
171
195
|
--_rs-switcher-mark-border-color:var(--_rs-color-primary);
|
|
172
196
|
}
|
|
173
|
-
.
|
|
197
|
+
._modeRock_mp550j_29{
|
|
174
198
|
--_rs-switcher-option-hover-background:rgba(
|
|
175
199
|
calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
|
|
176
200
|
0.1
|
|
177
201
|
);
|
|
178
202
|
--_rs-switcher-mark-border-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
|
|
179
203
|
}
|
|
180
|
-
.
|
|
204
|
+
._compact_mp550j_33{
|
|
205
|
+
--_rs-switcher-border-radius-from-compact:var(--_rs-switcher-compact-border-radius);
|
|
206
|
+
--_rs-switcher-option-padding-from-compact:var(--_rs-switcher-compact-option-padding);
|
|
207
|
+
--_rs-switcher-icon-offset-from-compact:var(--_rs-switcher-compact-icon-offset);
|
|
208
|
+
}
|
|
209
|
+
._switcher_mp550j_37{
|
|
181
210
|
--_rs-theme-dark:var(
|
|
182
211
|
--_rs-internal-force-theme-dark-consult-rescui-before-using,
|
|
183
212
|
var(--rs-theme-dark, 0)
|
|
@@ -187,7 +216,7 @@
|
|
|
187
216
|
--_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
|
|
188
217
|
}
|
|
189
218
|
@supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
190
|
-
.
|
|
219
|
+
._switcher_mp550j_37{
|
|
191
220
|
--_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
192
221
|
--_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
193
222
|
--_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
@@ -196,7 +225,7 @@
|
|
|
196
225
|
}
|
|
197
226
|
}
|
|
198
227
|
@supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
199
|
-
.
|
|
228
|
+
._switcher_mp550j_37{
|
|
200
229
|
--_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
|
|
201
230
|
--_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
|
|
202
231
|
--_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
|
|
@@ -204,7 +233,7 @@
|
|
|
204
233
|
--_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
|
|
205
234
|
}
|
|
206
235
|
}
|
|
207
|
-
.
|
|
236
|
+
._switcher_mp550j_37 {
|
|
208
237
|
|
|
209
238
|
position:relative;
|
|
210
239
|
|
|
@@ -218,7 +247,10 @@
|
|
|
218
247
|
|
|
219
248
|
box-sizing:border-box;
|
|
220
249
|
|
|
221
|
-
border-radius:var(
|
|
250
|
+
border-radius:var(
|
|
251
|
+
--_rs-switcher-border-radius-from-compact,
|
|
252
|
+
var(--_rs-switcher-border-radius)
|
|
253
|
+
);
|
|
222
254
|
|
|
223
255
|
background:transparent;
|
|
224
256
|
-webkit-box-shadow:inset rgba(
|
|
@@ -230,7 +262,13 @@
|
|
|
230
262
|
calc(0.4 + var(--_rs-theme-dark-coefficient)*0.1)
|
|
231
263
|
) 0 0 0 1px;
|
|
232
264
|
}
|
|
233
|
-
.
|
|
265
|
+
._alignIconLeft_mp550j_61{
|
|
266
|
+
--_rs-switcher-option-flex-direction:row;
|
|
267
|
+
}
|
|
268
|
+
._alignIconRight_mp550j_64{
|
|
269
|
+
--_rs-switcher-option-flex-direction:row-reverse;
|
|
270
|
+
}
|
|
271
|
+
._option_mp550j_68{
|
|
234
272
|
letter-spacing:var(
|
|
235
273
|
--rs-text-base-letter-spacing,
|
|
236
274
|
var(--_rs-typography-letter-spacing)
|
|
@@ -244,11 +282,11 @@
|
|
|
244
282
|
-webkit-font-feature-settings:'kern', 'liga', 'calt';
|
|
245
283
|
font-feature-settings:'kern', 'liga', 'calt';
|
|
246
284
|
}
|
|
247
|
-
.
|
|
248
|
-
.
|
|
285
|
+
._option_mp550j_68 > p:not(:nth-child(1)),
|
|
286
|
+
._option_mp550j_68 > pre:not(:nth-child(1)){
|
|
249
287
|
padding-top:var(--_rs-typography-auto-offset-or-initial);
|
|
250
288
|
}
|
|
251
|
-
.
|
|
289
|
+
._option_mp550j_68 {
|
|
252
290
|
--_rs-typography-hardness-color:var(
|
|
253
291
|
--rs-color-hard,
|
|
254
292
|
rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227))
|
|
@@ -257,19 +295,43 @@
|
|
|
257
295
|
position:relative;
|
|
258
296
|
z-index:1;
|
|
259
297
|
|
|
260
|
-
display
|
|
298
|
+
display:-webkit-inline-box;
|
|
299
|
+
|
|
300
|
+
display:-ms-inline-flexbox;
|
|
301
|
+
|
|
302
|
+
display:inline-flex;
|
|
261
303
|
-webkit-box-flex:1;
|
|
262
304
|
-ms-flex:1 1 auto;
|
|
263
305
|
flex:1 1 auto;
|
|
306
|
+
-webkit-box-orient:vertical;
|
|
307
|
+
-webkit-box-direction:normal;
|
|
308
|
+
-ms-flex-direction:var(--_rs-switcher-option-flex-direction);
|
|
309
|
+
flex-direction:var(--_rs-switcher-option-flex-direction);
|
|
310
|
+
-webkit-box-pack:center;
|
|
311
|
+
-ms-flex-pack:center;
|
|
312
|
+
justify-content:center;
|
|
313
|
+
-webkit-box-align:start;
|
|
314
|
+
-ms-flex-align:start;
|
|
315
|
+
align-items:flex-start;
|
|
316
|
+
gap:var(
|
|
317
|
+
--_rs-switcher-icon-offset-from-compact,
|
|
318
|
+
var(--_rs-switcher-icon-offset)
|
|
319
|
+
);
|
|
264
320
|
|
|
265
321
|
-webkit-box-sizing:border-box;
|
|
266
322
|
|
|
267
323
|
box-sizing:border-box;
|
|
268
324
|
margin:0;
|
|
269
|
-
padding:var(
|
|
325
|
+
padding:var(
|
|
326
|
+
--_rs-switcher-option-padding-from-compact,
|
|
327
|
+
var(--_rs-switcher-option-padding)
|
|
328
|
+
);
|
|
270
329
|
|
|
271
330
|
border:none;
|
|
272
|
-
border-radius:var(
|
|
331
|
+
border-radius:var(
|
|
332
|
+
--_rs-switcher-border-radius-from-compact,
|
|
333
|
+
var(--_rs-switcher-border-radius)
|
|
334
|
+
);
|
|
273
335
|
outline:none;
|
|
274
336
|
|
|
275
337
|
cursor:pointer;
|
|
@@ -280,26 +342,26 @@
|
|
|
280
342
|
-moz-appearance:none;
|
|
281
343
|
appearance:none;
|
|
282
344
|
}
|
|
283
|
-
.
|
|
345
|
+
._disabled_mp550j_105 ._option_mp550j_68{
|
|
284
346
|
cursor:not-allowed;
|
|
285
347
|
pointer-events:none;
|
|
286
348
|
}
|
|
287
|
-
.
|
|
349
|
+
._option_mp550j_68:focus[data-focus-method='key']{
|
|
288
350
|
-webkit-box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
|
|
289
351
|
box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
|
|
290
352
|
}
|
|
291
|
-
.
|
|
353
|
+
._option_mp550j_68:hover{
|
|
292
354
|
background:var(--_rs-switcher-option-hover-background);
|
|
293
355
|
}
|
|
294
|
-
.
|
|
356
|
+
._option_mp550j_68._selected_mp550j_118:active{
|
|
295
357
|
background:transparent;
|
|
296
358
|
}
|
|
297
|
-
.
|
|
298
|
-
.
|
|
359
|
+
._option_mp550j_68._selected_mp550j_118:hover,
|
|
360
|
+
._option_mp550j_68._selected_mp550j_118:active{
|
|
299
361
|
cursor:default;
|
|
300
362
|
}
|
|
301
|
-
.
|
|
302
|
-
.
|
|
363
|
+
._disabled_mp550j_105 ._option_mp550j_68,
|
|
364
|
+
._disabled_mp550j_105 ._option_mp550j_68._selected_mp550j_118{
|
|
303
365
|
cursor:default;
|
|
304
366
|
|
|
305
367
|
color:rgba(
|
|
@@ -308,7 +370,20 @@
|
|
|
308
370
|
);
|
|
309
371
|
background:transparent;
|
|
310
372
|
}
|
|
311
|
-
.
|
|
373
|
+
._option_mp550j_68 ._icon_mp550j_139{
|
|
374
|
+
-webkit-box-flex:0;
|
|
375
|
+
-ms-flex:0 0 auto;
|
|
376
|
+
flex:0 0 auto;
|
|
377
|
+
|
|
378
|
+
width:auto;
|
|
379
|
+
height:var(--_rs-switcher-icon-size);
|
|
380
|
+
|
|
381
|
+
fill:currentColor;
|
|
382
|
+
|
|
383
|
+
margin-top:var(--_rs-switcher-icon-margin-vertical);
|
|
384
|
+
margin-bottom:var(--_rs-switcher-icon-margin-vertical);
|
|
385
|
+
}
|
|
386
|
+
._mark_mp550j_152{
|
|
312
387
|
position:absolute;
|
|
313
388
|
top:0;
|
|
314
389
|
bottom:0;
|
|
@@ -321,13 +396,16 @@
|
|
|
321
396
|
|
|
322
397
|
border:solid 2px var(--_rs-switcher-mark-border-color);
|
|
323
398
|
|
|
324
|
-
border-radius:var(
|
|
399
|
+
border-radius:var(
|
|
400
|
+
--_rs-switcher-border-radius-from-compact,
|
|
401
|
+
var(--_rs-switcher-border-radius)
|
|
402
|
+
);
|
|
325
403
|
|
|
326
404
|
-webkit-transition:all 0.2s;
|
|
327
405
|
|
|
328
406
|
transition:all 0.2s;
|
|
329
407
|
}
|
|
330
|
-
.
|
|
408
|
+
._disabled_mp550j_105 ._mark_mp550j_152{
|
|
331
409
|
border:solid 2px rgba(
|
|
332
410
|
calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
|
|
333
411
|
calc(0.4 - var(--_rs-theme-dark-coefficient)*0.2)
|
|
@@ -1,16 +1,20 @@
|
|
|
1
1
|
var styles = {
|
|
2
|
-
"themeLight": "
|
|
3
|
-
"themeDark": "
|
|
4
|
-
"sizeXS": "
|
|
5
|
-
"sizeS": "
|
|
6
|
-
"sizeM": "
|
|
7
|
-
"sizeL": "
|
|
8
|
-
"modeClassic": "
|
|
9
|
-
"modeRock": "
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
2
|
+
"themeLight": "_themeLight_mp550j_6",
|
|
3
|
+
"themeDark": "_themeDark_mp550j_9",
|
|
4
|
+
"sizeXS": "_sizeXS_mp550j_13",
|
|
5
|
+
"sizeS": "_sizeS_mp550j_16",
|
|
6
|
+
"sizeM": "_sizeM_mp550j_19",
|
|
7
|
+
"sizeL": "_sizeL_mp550j_22",
|
|
8
|
+
"modeClassic": "_modeClassic_mp550j_26",
|
|
9
|
+
"modeRock": "_modeRock_mp550j_29",
|
|
10
|
+
"compact": "_compact_mp550j_33",
|
|
11
|
+
"switcher": "_switcher_mp550j_37",
|
|
12
|
+
"alignIconLeft": "_alignIconLeft_mp550j_61",
|
|
13
|
+
"alignIconRight": "_alignIconRight_mp550j_64",
|
|
14
|
+
"option": "_option_mp550j_68",
|
|
15
|
+
"disabled": "_disabled_mp550j_105",
|
|
16
|
+
"selected": "_selected_mp550j_118",
|
|
17
|
+
"icon": "_icon_mp550j_139",
|
|
18
|
+
"mark": "_mark_mp550j_152"
|
|
15
19
|
};
|
|
16
20
|
export { styles as default };
|
package/lib/public-api.p.css
CHANGED
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
@define-mixin rs-switcher-size-xs{
|
|
2
2
|
&:not(html){
|
|
3
3
|
--_rs-switcher-border-radius:4px;
|
|
4
|
+
--_rs-switcher-compact-border-radius:var(--_rs-switcher-border-radius);
|
|
4
5
|
--_rs-switcher-option-padding:2px 12px;
|
|
6
|
+
--_rs-switcher-compact-option-padding:2px 8px;
|
|
7
|
+
--_rs-switcher-icon-size:16px;
|
|
8
|
+
--_rs-switcher-icon-offset:4px;
|
|
9
|
+
--_rs-switcher-compact-icon-offset:var(--_rs-switcher-icon-offset);
|
|
10
|
+
--_rs-switcher-icon-margin-vertical:2px;
|
|
5
11
|
}
|
|
6
12
|
&:not(html) [data-rs-internal='switcher__option']{
|
|
7
13
|
--_rs-typography-letter-spacing:0.0045em;
|
|
@@ -40,8 +46,14 @@
|
|
|
40
46
|
}
|
|
41
47
|
@define-mixin rs-switcher-size-s{
|
|
42
48
|
&:not(html){
|
|
43
|
-
--_rs-switcher-border-radius:
|
|
49
|
+
--_rs-switcher-border-radius:16px;
|
|
50
|
+
--_rs-switcher-compact-border-radius:4px;
|
|
44
51
|
--_rs-switcher-option-padding:6px 16px;
|
|
52
|
+
--_rs-switcher-compact-option-padding:6px 8px;
|
|
53
|
+
--_rs-switcher-icon-size:20px;
|
|
54
|
+
--_rs-switcher-icon-offset:8px;
|
|
55
|
+
--_rs-switcher-compact-icon-offset:4px;
|
|
56
|
+
--_rs-switcher-icon-margin-vertical:0px;
|
|
45
57
|
}
|
|
46
58
|
&:not(html) [data-rs-internal='switcher__option']{
|
|
47
59
|
--_rs-typography-letter-spacing:0.0045em;
|
|
@@ -80,8 +92,14 @@
|
|
|
80
92
|
}
|
|
81
93
|
@define-mixin rs-switcher-size-m{
|
|
82
94
|
&:not(html){
|
|
83
|
-
--_rs-switcher-border-radius:
|
|
95
|
+
--_rs-switcher-border-radius:20px;
|
|
96
|
+
--_rs-switcher-compact-border-radius:8px;
|
|
84
97
|
--_rs-switcher-option-padding:8px 24px;
|
|
98
|
+
--_rs-switcher-compact-option-padding:8px 12px;
|
|
99
|
+
--_rs-switcher-icon-size:24px;
|
|
100
|
+
--_rs-switcher-icon-offset:12px;
|
|
101
|
+
--_rs-switcher-compact-icon-offset:8px;
|
|
102
|
+
--_rs-switcher-icon-margin-vertical:0px;
|
|
85
103
|
}
|
|
86
104
|
&:not(html) [data-rs-internal='switcher__option']{
|
|
87
105
|
--_rs-typography-letter-spacing:0.0015em;
|
|
@@ -125,8 +143,14 @@
|
|
|
125
143
|
}
|
|
126
144
|
@define-mixin rs-switcher-size-l{
|
|
127
145
|
&:not(html){
|
|
128
|
-
--_rs-switcher-border-radius:
|
|
146
|
+
--_rs-switcher-border-radius:26px;
|
|
147
|
+
--_rs-switcher-compact-border-radius:12px;
|
|
129
148
|
--_rs-switcher-option-padding:12px 32px;
|
|
149
|
+
--_rs-switcher-compact-option-padding:12px 16px;
|
|
150
|
+
--_rs-switcher-icon-size:28px;
|
|
151
|
+
--_rs-switcher-icon-offset:16px;
|
|
152
|
+
--_rs-switcher-compact-icon-offset:12px;
|
|
153
|
+
--_rs-switcher-icon-margin-vertical:0px;
|
|
130
154
|
}
|
|
131
155
|
&:not(html) [data-rs-internal='switcher__option']{
|
|
132
156
|
--_rs-typography-letter-spacing:normal;
|
|
@@ -183,3 +207,9 @@
|
|
|
183
207
|
--_rs-switcher-mark-border-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
|
|
184
208
|
}
|
|
185
209
|
}
|
|
210
|
+
@define-mixin rs-switcher-icon-position-left{
|
|
211
|
+
--_rs-switcher-option-flex-direction:row;
|
|
212
|
+
}
|
|
213
|
+
@define-mixin rs-switcher-icon-position-right{
|
|
214
|
+
--_rs-switcher-option-flex-direction:row-reverse;
|
|
215
|
+
}
|
package/lib/public-api.pcss
CHANGED
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
@define-mixin rs-switcher-size-xs{
|
|
2
2
|
&:not(html){
|
|
3
3
|
--_rs-switcher-border-radius:4px;
|
|
4
|
+
--_rs-switcher-compact-border-radius:var(--_rs-switcher-border-radius);
|
|
4
5
|
--_rs-switcher-option-padding:2px 12px;
|
|
6
|
+
--_rs-switcher-compact-option-padding:2px 8px;
|
|
7
|
+
--_rs-switcher-icon-size:16px;
|
|
8
|
+
--_rs-switcher-icon-offset:4px;
|
|
9
|
+
--_rs-switcher-compact-icon-offset:var(--_rs-switcher-icon-offset);
|
|
10
|
+
--_rs-switcher-icon-margin-vertical:2px;
|
|
5
11
|
}
|
|
6
12
|
&:not(html) [data-rs-internal='switcher__option']{
|
|
7
13
|
--_rs-typography-letter-spacing:0.0045em;
|
|
@@ -40,8 +46,14 @@
|
|
|
40
46
|
}
|
|
41
47
|
@define-mixin rs-switcher-size-s{
|
|
42
48
|
&:not(html){
|
|
43
|
-
--_rs-switcher-border-radius:
|
|
49
|
+
--_rs-switcher-border-radius:16px;
|
|
50
|
+
--_rs-switcher-compact-border-radius:4px;
|
|
44
51
|
--_rs-switcher-option-padding:6px 16px;
|
|
52
|
+
--_rs-switcher-compact-option-padding:6px 8px;
|
|
53
|
+
--_rs-switcher-icon-size:20px;
|
|
54
|
+
--_rs-switcher-icon-offset:8px;
|
|
55
|
+
--_rs-switcher-compact-icon-offset:4px;
|
|
56
|
+
--_rs-switcher-icon-margin-vertical:0px;
|
|
45
57
|
}
|
|
46
58
|
&:not(html) [data-rs-internal='switcher__option']{
|
|
47
59
|
--_rs-typography-letter-spacing:0.0045em;
|
|
@@ -80,8 +92,14 @@
|
|
|
80
92
|
}
|
|
81
93
|
@define-mixin rs-switcher-size-m{
|
|
82
94
|
&:not(html){
|
|
83
|
-
--_rs-switcher-border-radius:
|
|
95
|
+
--_rs-switcher-border-radius:20px;
|
|
96
|
+
--_rs-switcher-compact-border-radius:8px;
|
|
84
97
|
--_rs-switcher-option-padding:8px 24px;
|
|
98
|
+
--_rs-switcher-compact-option-padding:8px 12px;
|
|
99
|
+
--_rs-switcher-icon-size:24px;
|
|
100
|
+
--_rs-switcher-icon-offset:12px;
|
|
101
|
+
--_rs-switcher-compact-icon-offset:8px;
|
|
102
|
+
--_rs-switcher-icon-margin-vertical:0px;
|
|
85
103
|
}
|
|
86
104
|
&:not(html) [data-rs-internal='switcher__option']{
|
|
87
105
|
--_rs-typography-letter-spacing:0.0015em;
|
|
@@ -125,8 +143,14 @@
|
|
|
125
143
|
}
|
|
126
144
|
@define-mixin rs-switcher-size-l{
|
|
127
145
|
&:not(html){
|
|
128
|
-
--_rs-switcher-border-radius:
|
|
146
|
+
--_rs-switcher-border-radius:26px;
|
|
147
|
+
--_rs-switcher-compact-border-radius:12px;
|
|
129
148
|
--_rs-switcher-option-padding:12px 32px;
|
|
149
|
+
--_rs-switcher-compact-option-padding:12px 16px;
|
|
150
|
+
--_rs-switcher-icon-size:28px;
|
|
151
|
+
--_rs-switcher-icon-offset:16px;
|
|
152
|
+
--_rs-switcher-compact-icon-offset:12px;
|
|
153
|
+
--_rs-switcher-icon-margin-vertical:0px;
|
|
130
154
|
}
|
|
131
155
|
&:not(html) [data-rs-internal='switcher__option']{
|
|
132
156
|
--_rs-typography-letter-spacing:normal;
|
|
@@ -183,3 +207,9 @@
|
|
|
183
207
|
--_rs-switcher-mark-border-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
|
|
184
208
|
}
|
|
185
209
|
}
|
|
210
|
+
@define-mixin rs-switcher-icon-position-left{
|
|
211
|
+
--_rs-switcher-option-flex-direction:row;
|
|
212
|
+
}
|
|
213
|
+
@define-mixin rs-switcher-icon-position-right{
|
|
214
|
+
--_rs-switcher-option-flex-direction:row-reverse;
|
|
215
|
+
}
|
package/lib/switcher.d.ts
CHANGED
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export
|
|
3
|
-
label: React.ReactNode;
|
|
4
|
-
value: OptionsValueType;
|
|
5
|
-
}
|
|
2
|
+
export declare type SwitcherOptionIconPosition = 'left' | 'right';
|
|
6
3
|
export declare type SwitcherSize = 'l' | 'm' | 's' | 'xs';
|
|
7
4
|
export declare type SwitcherTheme = 'light' | 'dark';
|
|
8
5
|
export declare type SwitcherMode = 'rock' | 'classic';
|
|
6
|
+
export declare type SwitcherOption<OptionsValueType> = {
|
|
7
|
+
label?: React.ReactNode;
|
|
8
|
+
value: OptionsValueType;
|
|
9
|
+
/** Additional icon */
|
|
10
|
+
icon?: React.ReactNode;
|
|
11
|
+
};
|
|
12
|
+
export declare type SwitcherOptionForDocs = SwitcherOption<any>;
|
|
9
13
|
export interface SwitcherProps<ValueType, OptionsValueType extends ValueType> {
|
|
10
14
|
/** Current selected value */
|
|
11
15
|
value: ValueType;
|
|
@@ -18,10 +22,14 @@ export interface SwitcherProps<ValueType, OptionsValueType extends ValueType> {
|
|
|
18
22
|
/** Appearance mode */
|
|
19
23
|
mode?: SwitcherMode;
|
|
20
24
|
disabled?: boolean;
|
|
25
|
+
/** Decrease horizontal paddings, gap and border-radius values */
|
|
26
|
+
compact?: boolean;
|
|
21
27
|
/** Identifier for e2e tests */
|
|
22
28
|
'data-e2e'?: string;
|
|
29
|
+
/** **Works only if the `icon` on options is present.** Additional icon position. */
|
|
30
|
+
iconPosition?: SwitcherOptionIconPosition;
|
|
23
31
|
}
|
|
24
|
-
export declare function Switcher<ValueType, OptionsValueType extends ValueType = ValueType>({ className, theme: themeFromProps, size, disabled, ['data-e2e']: e2eId, options, value: switcherValue, mode, onChange }: SwitcherProps<ValueType, OptionsValueType>): JSX.Element;
|
|
32
|
+
export declare function Switcher<ValueType, OptionsValueType extends ValueType = ValueType>({ className, theme: themeFromProps, size, disabled, compact, ['data-e2e']: e2eId, options, value: switcherValue, mode, iconPosition, onChange }: SwitcherProps<ValueType, OptionsValueType>): JSX.Element;
|
|
25
33
|
export declare namespace Switcher {
|
|
26
34
|
var propTypes: {};
|
|
27
35
|
}
|
package/lib/switcher.js
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
|
|
2
|
-
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
|
3
2
|
import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
|
|
4
3
|
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
|
|
5
|
-
import
|
|
6
|
-
import React, { useRef, useMemo, useCallback, useState, useEffect } from 'react';
|
|
4
|
+
import React, { cloneElement, useRef, useCallback, useState, useEffect } from 'react';
|
|
7
5
|
import PropTypes from 'prop-types';
|
|
8
6
|
import cn from 'classnames';
|
|
9
7
|
import { useThemeWithUndefined } from '@rescui/ui-contexts';
|
|
@@ -24,28 +22,27 @@ var modeToClass = {
|
|
|
24
22
|
rock: styles.modeRock
|
|
25
23
|
};
|
|
26
24
|
|
|
27
|
-
var hashOptions = function hashOptions(options) {
|
|
28
|
-
return options.reduce(function (hash, option) {
|
|
29
|
-
var _context, _context2;
|
|
30
|
-
|
|
31
|
-
return _concatInstanceProperty(_context = _concatInstanceProperty(_context2 = "".concat(hash)).call(_context2, String(option.value), ":")).call(_context, String(option.label));
|
|
32
|
-
}, '');
|
|
33
|
-
};
|
|
34
|
-
|
|
35
25
|
var findIndexByValue = function findIndexByValue(options, value) {
|
|
36
26
|
var index = _findIndexInstanceProperty(options).call(options, function (option) {
|
|
37
27
|
return option.value === value;
|
|
38
28
|
});
|
|
39
29
|
|
|
40
30
|
return index === -1 ? 0 : index;
|
|
31
|
+
}; // check for ignored jsx values and empty string, more info https://reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
var isNodeEmpty = function isNodeEmpty(node) {
|
|
35
|
+
return node === null || typeof node === 'undefined' || node === false || node === true || node === '';
|
|
41
36
|
};
|
|
42
37
|
|
|
43
38
|
var optionRenderer = function optionRenderer(_ref, ref) {
|
|
44
39
|
var label = _ref.label,
|
|
45
40
|
value = _ref.value,
|
|
41
|
+
icon = _ref.icon,
|
|
46
42
|
disabled = _ref.disabled,
|
|
47
43
|
onClick = _ref.onClick,
|
|
48
44
|
selected = _ref.selected;
|
|
45
|
+
var isWithoutText = isNodeEmpty(label);
|
|
49
46
|
return /*#__PURE__*/React.createElement("button", {
|
|
50
47
|
key: String(value),
|
|
51
48
|
ref: ref,
|
|
@@ -54,7 +51,9 @@ var optionRenderer = function optionRenderer(_ref, ref) {
|
|
|
54
51
|
"data-rs-internal": 'switcher__option',
|
|
55
52
|
disabled: disabled,
|
|
56
53
|
className: cn(styles.option, selected && styles.selected)
|
|
57
|
-
},
|
|
54
|
+
}, /*#__PURE__*/React.isValidElement(icon) && /*#__PURE__*/cloneElement(icon, {
|
|
55
|
+
className: cn(icon.props.className, styles.icon)
|
|
56
|
+
}), !isWithoutText && /*#__PURE__*/React.createElement("span", null, label));
|
|
58
57
|
};
|
|
59
58
|
|
|
60
59
|
var Option = /*#__PURE__*/React.forwardRef(optionRenderer);
|
|
@@ -65,20 +64,19 @@ function Switcher(_ref2) {
|
|
|
65
64
|
_ref2$size = _ref2.size,
|
|
66
65
|
size = _ref2$size === void 0 ? 'm' : _ref2$size,
|
|
67
66
|
disabled = _ref2.disabled,
|
|
67
|
+
_ref2$compact = _ref2.compact,
|
|
68
|
+
compact = _ref2$compact === void 0 ? false : _ref2$compact,
|
|
68
69
|
e2eId = _ref2['data-e2e'],
|
|
69
70
|
options = _ref2.options,
|
|
70
71
|
switcherValue = _ref2.value,
|
|
71
72
|
_ref2$mode = _ref2.mode,
|
|
72
73
|
mode = _ref2$mode === void 0 ? 'classic' : _ref2$mode,
|
|
74
|
+
_ref2$iconPosition = _ref2.iconPosition,
|
|
75
|
+
iconPosition = _ref2$iconPosition === void 0 ? 'left' : _ref2$iconPosition,
|
|
73
76
|
onChange = _ref2.onChange;
|
|
74
77
|
var refsArray = useRef([]);
|
|
75
78
|
var containerRef = useRef(null);
|
|
76
79
|
var theme = useThemeWithUndefined(themeFromProps);
|
|
77
|
-
var optionsHash = hashOptions(options); // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
78
|
-
|
|
79
|
-
var memoizedOptions = useMemo(function () {
|
|
80
|
-
return options;
|
|
81
|
-
}, [optionsHash]);
|
|
82
80
|
var handleOptionRef = useCallback(function (index) {
|
|
83
81
|
return function (ref) {
|
|
84
82
|
if (!ref) {
|
|
@@ -90,7 +88,7 @@ function Switcher(_ref2) {
|
|
|
90
88
|
}
|
|
91
89
|
};
|
|
92
90
|
}, []);
|
|
93
|
-
var activeIndex = findIndexByValue(
|
|
91
|
+
var activeIndex = findIndexByValue(options, switcherValue);
|
|
94
92
|
|
|
95
93
|
var _useState = useState({
|
|
96
94
|
offset: 0,
|
|
@@ -122,18 +120,20 @@ function Switcher(_ref2) {
|
|
|
122
120
|
}, [activeIndex]);
|
|
123
121
|
useResizeObserver(containerRef, onResize);
|
|
124
122
|
return /*#__PURE__*/React.createElement("span", {
|
|
125
|
-
className: cn(className, styles.switcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled),
|
|
123
|
+
className: cn(className, styles.switcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled, compact && styles.compact, iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft),
|
|
126
124
|
"data-e2e": e2eId,
|
|
127
125
|
ref: containerRef,
|
|
128
126
|
"data-rs-internal": 'switcher',
|
|
129
127
|
"data-test": "switcher".concat(disabled ? '-disabled' : '')
|
|
130
|
-
}, _mapInstanceProperty(
|
|
128
|
+
}, _mapInstanceProperty(options).call(options, function (_ref3, index) {
|
|
131
129
|
var value = _ref3.value,
|
|
132
|
-
label = _ref3.label
|
|
130
|
+
label = _ref3.label,
|
|
131
|
+
icon = _ref3.icon;
|
|
133
132
|
return /*#__PURE__*/React.createElement(Option, {
|
|
134
133
|
key: String(value),
|
|
135
134
|
value: value,
|
|
136
135
|
label: label,
|
|
136
|
+
icon: icon,
|
|
137
137
|
disabled: disabled,
|
|
138
138
|
onClick: function onClick() {
|
|
139
139
|
return onChange(value);
|
|
@@ -151,8 +151,9 @@ function Switcher(_ref2) {
|
|
|
151
151
|
}
|
|
152
152
|
|
|
153
153
|
var optionPropType = PropTypes.shape({
|
|
154
|
-
label: PropTypes.node
|
|
155
|
-
value: PropTypes.any.isRequired
|
|
154
|
+
label: PropTypes.node,
|
|
155
|
+
value: PropTypes.any.isRequired,
|
|
156
|
+
icon: PropTypes.node
|
|
156
157
|
});
|
|
157
158
|
Switcher.propTypes = {
|
|
158
159
|
options: PropTypes.arrayOf(optionPropType).isRequired,
|
|
@@ -162,6 +163,7 @@ Switcher.propTypes = {
|
|
|
162
163
|
size: PropTypes.oneOf(['l', 'm', 's', 'xs']),
|
|
163
164
|
theme: PropTypes.oneOf(['light', 'dark']),
|
|
164
165
|
disabled: PropTypes.bool,
|
|
166
|
+
iconPosition: PropTypes.oneOf(['left', 'right']),
|
|
165
167
|
'data-e2e': PropTypes.string
|
|
166
168
|
};
|
|
167
169
|
export { Switcher, Switcher as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rescui/switcher",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.9.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "JetBrains",
|
|
@@ -34,5 +34,5 @@
|
|
|
34
34
|
"build": "rescui-scripts build && yarn run build-pcss-api",
|
|
35
35
|
"build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "9fa2934442b7e2feac97b039aef0c02fde6f4d5e"
|
|
38
38
|
}
|