@rescui/switcher 0.8.0 → 0.9.1
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 +88 -34
- package/lib/index.p.module.css.js +17 -14
- package/lib/public-api.p.css +22 -0
- package/lib/public-api.pcss +22 -0
- package/lib/switcher.d.ts +11 -5
- package/lib/switcher.js +23 -23
- package/package.json +3 -3
package/lib/index.css
CHANGED
|
@@ -1,16 +1,20 @@
|
|
|
1
|
-
.
|
|
1
|
+
._themeLight_198ikkh_6{
|
|
2
2
|
--rs-theme-dark:0;
|
|
3
3
|
}
|
|
4
|
-
.
|
|
4
|
+
._themeDark_198ikkh_9{
|
|
5
5
|
--rs-theme-dark:1;
|
|
6
6
|
}
|
|
7
|
-
.
|
|
7
|
+
._sizeXS_198ikkh_13{
|
|
8
8
|
--_rs-switcher-border-radius:4px;
|
|
9
9
|
--_rs-switcher-compact-border-radius:var(--_rs-switcher-border-radius);
|
|
10
10
|
--_rs-switcher-option-padding:2px 12px;
|
|
11
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;
|
|
12
16
|
}
|
|
13
|
-
.
|
|
17
|
+
._sizeXS_198ikkh_13 [data-rs-internal='switcher__option']{
|
|
14
18
|
--_rs-typography-letter-spacing:0.0045em;
|
|
15
19
|
--_rs-typography-text-transform:initial;
|
|
16
20
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -44,13 +48,17 @@
|
|
|
44
48
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
45
49
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
46
50
|
}
|
|
47
|
-
.
|
|
51
|
+
._sizeS_198ikkh_16{
|
|
48
52
|
--_rs-switcher-border-radius:16px;
|
|
49
53
|
--_rs-switcher-compact-border-radius:4px;
|
|
50
54
|
--_rs-switcher-option-padding:6px 16px;
|
|
51
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;
|
|
52
60
|
}
|
|
53
|
-
.
|
|
61
|
+
._sizeS_198ikkh_16 [data-rs-internal='switcher__option']{
|
|
54
62
|
--_rs-typography-letter-spacing:0.0045em;
|
|
55
63
|
--_rs-typography-text-transform:initial;
|
|
56
64
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -84,13 +92,17 @@
|
|
|
84
92
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
85
93
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
86
94
|
}
|
|
87
|
-
.
|
|
95
|
+
._sizeM_198ikkh_19{
|
|
88
96
|
--_rs-switcher-border-radius:20px;
|
|
89
97
|
--_rs-switcher-compact-border-radius:8px;
|
|
90
98
|
--_rs-switcher-option-padding:8px 24px;
|
|
91
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;
|
|
92
104
|
}
|
|
93
|
-
.
|
|
105
|
+
._sizeM_198ikkh_19 [data-rs-internal='switcher__option']{
|
|
94
106
|
--_rs-typography-letter-spacing:0.0015em;
|
|
95
107
|
--_rs-typography-text-transform:initial;
|
|
96
108
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -125,17 +137,21 @@
|
|
|
125
137
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
126
138
|
}
|
|
127
139
|
@media screen and (max-width: 640px){
|
|
128
|
-
.
|
|
140
|
+
._sizeM_198ikkh_19 [data-rs-internal='switcher__option']{
|
|
129
141
|
--_rs-typography-list-li-margin-top-from-text:12px;
|
|
130
142
|
}
|
|
131
143
|
}
|
|
132
|
-
.
|
|
144
|
+
._sizeL_198ikkh_22{
|
|
133
145
|
--_rs-switcher-border-radius:26px;
|
|
134
146
|
--_rs-switcher-compact-border-radius:12px;
|
|
135
147
|
--_rs-switcher-option-padding:12px 32px;
|
|
136
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;
|
|
137
153
|
}
|
|
138
|
-
.
|
|
154
|
+
._sizeL_198ikkh_22 [data-rs-internal='switcher__option']{
|
|
139
155
|
--_rs-typography-letter-spacing:normal;
|
|
140
156
|
--_rs-typography-text-transform:initial;
|
|
141
157
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -170,26 +186,27 @@
|
|
|
170
186
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
171
187
|
}
|
|
172
188
|
@media screen and (max-width: 640px){
|
|
173
|
-
.
|
|
189
|
+
._sizeL_198ikkh_22 [data-rs-internal='switcher__option']{
|
|
174
190
|
--_rs-typography-list-li-margin-top-from-text:16px;
|
|
175
191
|
}
|
|
176
192
|
}
|
|
177
|
-
.
|
|
193
|
+
._modeClassic_198ikkh_26{
|
|
178
194
|
--_rs-switcher-option-hover-background:var(--_rs-color-primary-t-fog);
|
|
179
195
|
--_rs-switcher-mark-border-color:var(--_rs-color-primary);
|
|
180
196
|
}
|
|
181
|
-
.
|
|
197
|
+
._modeRock_198ikkh_29{
|
|
182
198
|
--_rs-switcher-option-hover-background:rgba(
|
|
183
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),
|
|
184
200
|
0.1
|
|
185
201
|
);
|
|
186
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));
|
|
187
203
|
}
|
|
188
|
-
.
|
|
204
|
+
._compact_198ikkh_33{
|
|
189
205
|
--_rs-switcher-border-radius-from-compact:var(--_rs-switcher-compact-border-radius);
|
|
190
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);
|
|
191
208
|
}
|
|
192
|
-
.
|
|
209
|
+
._switcher_198ikkh_37{
|
|
193
210
|
--_rs-theme-dark:var(
|
|
194
211
|
--_rs-internal-force-theme-dark-consult-rescui-before-using,
|
|
195
212
|
var(--rs-theme-dark, 0)
|
|
@@ -199,7 +216,7 @@
|
|
|
199
216
|
--_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
|
|
200
217
|
}
|
|
201
218
|
@supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
202
|
-
.
|
|
219
|
+
._switcher_198ikkh_37{
|
|
203
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)));
|
|
204
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)));
|
|
205
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)));
|
|
@@ -208,7 +225,7 @@
|
|
|
208
225
|
}
|
|
209
226
|
}
|
|
210
227
|
@supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
211
|
-
.
|
|
228
|
+
._switcher_198ikkh_37{
|
|
212
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);
|
|
213
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));
|
|
214
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));
|
|
@@ -216,7 +233,7 @@
|
|
|
216
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));
|
|
217
234
|
}
|
|
218
235
|
}
|
|
219
|
-
.
|
|
236
|
+
._switcher_198ikkh_37 {
|
|
220
237
|
|
|
221
238
|
position:relative;
|
|
222
239
|
|
|
@@ -245,7 +262,13 @@
|
|
|
245
262
|
calc(0.4 + var(--_rs-theme-dark-coefficient)*0.1)
|
|
246
263
|
) 0 0 0 1px;
|
|
247
264
|
}
|
|
248
|
-
.
|
|
265
|
+
._alignIconLeft_198ikkh_61{
|
|
266
|
+
--_rs-switcher-option-flex-direction:row;
|
|
267
|
+
}
|
|
268
|
+
._alignIconRight_198ikkh_64{
|
|
269
|
+
--_rs-switcher-option-flex-direction:row-reverse;
|
|
270
|
+
}
|
|
271
|
+
._option_198ikkh_68{
|
|
249
272
|
letter-spacing:var(
|
|
250
273
|
--rs-text-base-letter-spacing,
|
|
251
274
|
var(--_rs-typography-letter-spacing)
|
|
@@ -259,11 +282,11 @@
|
|
|
259
282
|
-webkit-font-feature-settings:'kern', 'liga', 'calt';
|
|
260
283
|
font-feature-settings:'kern', 'liga', 'calt';
|
|
261
284
|
}
|
|
262
|
-
.
|
|
263
|
-
.
|
|
285
|
+
._option_198ikkh_68 > p:not(:nth-child(1)),
|
|
286
|
+
._option_198ikkh_68 > pre:not(:nth-child(1)){
|
|
264
287
|
padding-top:var(--_rs-typography-auto-offset-or-initial);
|
|
265
288
|
}
|
|
266
|
-
.
|
|
289
|
+
._option_198ikkh_68 {
|
|
267
290
|
--_rs-typography-hardness-color:var(
|
|
268
291
|
--rs-color-hard,
|
|
269
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))
|
|
@@ -272,10 +295,28 @@
|
|
|
272
295
|
position:relative;
|
|
273
296
|
z-index:1;
|
|
274
297
|
|
|
275
|
-
display
|
|
298
|
+
display:-webkit-inline-box;
|
|
299
|
+
|
|
300
|
+
display:-ms-inline-flexbox;
|
|
301
|
+
|
|
302
|
+
display:inline-flex;
|
|
276
303
|
-webkit-box-flex:1;
|
|
277
304
|
-ms-flex:1 1 auto;
|
|
278
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
|
+
);
|
|
279
320
|
|
|
280
321
|
-webkit-box-sizing:border-box;
|
|
281
322
|
|
|
@@ -301,26 +342,26 @@
|
|
|
301
342
|
-moz-appearance:none;
|
|
302
343
|
appearance:none;
|
|
303
344
|
}
|
|
304
|
-
.
|
|
345
|
+
._disabled_198ikkh_105 ._option_198ikkh_68{
|
|
305
346
|
cursor:not-allowed;
|
|
306
347
|
pointer-events:none;
|
|
307
348
|
}
|
|
308
|
-
.
|
|
349
|
+
._option_198ikkh_68:focus[data-focus-method='key']{
|
|
309
350
|
-webkit-box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
|
|
310
351
|
box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
|
|
311
352
|
}
|
|
312
|
-
.
|
|
353
|
+
._option_198ikkh_68:hover{
|
|
313
354
|
background:var(--_rs-switcher-option-hover-background);
|
|
314
355
|
}
|
|
315
|
-
.
|
|
356
|
+
._option_198ikkh_68._selected_198ikkh_118:active{
|
|
316
357
|
background:transparent;
|
|
317
358
|
}
|
|
318
|
-
.
|
|
319
|
-
.
|
|
359
|
+
._option_198ikkh_68._selected_198ikkh_118:hover,
|
|
360
|
+
._option_198ikkh_68._selected_198ikkh_118:active{
|
|
320
361
|
cursor:default;
|
|
321
362
|
}
|
|
322
|
-
.
|
|
323
|
-
.
|
|
363
|
+
._disabled_198ikkh_105 ._option_198ikkh_68,
|
|
364
|
+
._disabled_198ikkh_105 ._option_198ikkh_68._selected_198ikkh_118{
|
|
324
365
|
cursor:default;
|
|
325
366
|
|
|
326
367
|
color:rgba(
|
|
@@ -329,7 +370,20 @@
|
|
|
329
370
|
);
|
|
330
371
|
background:transparent;
|
|
331
372
|
}
|
|
332
|
-
.
|
|
373
|
+
._option_198ikkh_68 ._icon_198ikkh_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_198ikkh_152{
|
|
333
387
|
position:absolute;
|
|
334
388
|
top:0;
|
|
335
389
|
bottom:0;
|
|
@@ -351,7 +405,7 @@
|
|
|
351
405
|
|
|
352
406
|
transition:all 0.2s;
|
|
353
407
|
}
|
|
354
|
-
.
|
|
408
|
+
._disabled_198ikkh_105 ._mark_198ikkh_152{
|
|
355
409
|
border:solid 2px rgba(
|
|
356
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),
|
|
357
411
|
calc(0.4 - var(--_rs-theme-dark-coefficient)*0.2)
|
|
@@ -1,17 +1,20 @@
|
|
|
1
1
|
var styles = {
|
|
2
|
-
"themeLight": "
|
|
3
|
-
"themeDark": "
|
|
4
|
-
"sizeXS": "
|
|
5
|
-
"sizeS": "
|
|
6
|
-
"sizeM": "
|
|
7
|
-
"sizeL": "
|
|
8
|
-
"modeClassic": "
|
|
9
|
-
"modeRock": "
|
|
10
|
-
"compact": "
|
|
11
|
-
"switcher": "
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
2
|
+
"themeLight": "_themeLight_198ikkh_6",
|
|
3
|
+
"themeDark": "_themeDark_198ikkh_9",
|
|
4
|
+
"sizeXS": "_sizeXS_198ikkh_13",
|
|
5
|
+
"sizeS": "_sizeS_198ikkh_16",
|
|
6
|
+
"sizeM": "_sizeM_198ikkh_19",
|
|
7
|
+
"sizeL": "_sizeL_198ikkh_22",
|
|
8
|
+
"modeClassic": "_modeClassic_198ikkh_26",
|
|
9
|
+
"modeRock": "_modeRock_198ikkh_29",
|
|
10
|
+
"compact": "_compact_198ikkh_33",
|
|
11
|
+
"switcher": "_switcher_198ikkh_37",
|
|
12
|
+
"alignIconLeft": "_alignIconLeft_198ikkh_61",
|
|
13
|
+
"alignIconRight": "_alignIconRight_198ikkh_64",
|
|
14
|
+
"option": "_option_198ikkh_68",
|
|
15
|
+
"disabled": "_disabled_198ikkh_105",
|
|
16
|
+
"selected": "_selected_198ikkh_118",
|
|
17
|
+
"icon": "_icon_198ikkh_139",
|
|
18
|
+
"mark": "_mark_198ikkh_152"
|
|
16
19
|
};
|
|
17
20
|
export { styles as default };
|
package/lib/public-api.p.css
CHANGED
|
@@ -4,6 +4,10 @@
|
|
|
4
4
|
--_rs-switcher-compact-border-radius:var(--_rs-switcher-border-radius);
|
|
5
5
|
--_rs-switcher-option-padding:2px 12px;
|
|
6
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;
|
|
7
11
|
}
|
|
8
12
|
&:not(html) [data-rs-internal='switcher__option']{
|
|
9
13
|
--_rs-typography-letter-spacing:0.0045em;
|
|
@@ -46,6 +50,10 @@
|
|
|
46
50
|
--_rs-switcher-compact-border-radius:4px;
|
|
47
51
|
--_rs-switcher-option-padding:6px 16px;
|
|
48
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;
|
|
49
57
|
}
|
|
50
58
|
&:not(html) [data-rs-internal='switcher__option']{
|
|
51
59
|
--_rs-typography-letter-spacing:0.0045em;
|
|
@@ -88,6 +96,10 @@
|
|
|
88
96
|
--_rs-switcher-compact-border-radius:8px;
|
|
89
97
|
--_rs-switcher-option-padding:8px 24px;
|
|
90
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;
|
|
91
103
|
}
|
|
92
104
|
&:not(html) [data-rs-internal='switcher__option']{
|
|
93
105
|
--_rs-typography-letter-spacing:0.0015em;
|
|
@@ -135,6 +147,10 @@
|
|
|
135
147
|
--_rs-switcher-compact-border-radius:12px;
|
|
136
148
|
--_rs-switcher-option-padding:12px 32px;
|
|
137
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;
|
|
138
154
|
}
|
|
139
155
|
&:not(html) [data-rs-internal='switcher__option']{
|
|
140
156
|
--_rs-typography-letter-spacing:normal;
|
|
@@ -191,3 +207,9 @@
|
|
|
191
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));
|
|
192
208
|
}
|
|
193
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
|
@@ -4,6 +4,10 @@
|
|
|
4
4
|
--_rs-switcher-compact-border-radius:var(--_rs-switcher-border-radius);
|
|
5
5
|
--_rs-switcher-option-padding:2px 12px;
|
|
6
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;
|
|
7
11
|
}
|
|
8
12
|
&:not(html) [data-rs-internal='switcher__option']{
|
|
9
13
|
--_rs-typography-letter-spacing:0.0045em;
|
|
@@ -46,6 +50,10 @@
|
|
|
46
50
|
--_rs-switcher-compact-border-radius:4px;
|
|
47
51
|
--_rs-switcher-option-padding:6px 16px;
|
|
48
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;
|
|
49
57
|
}
|
|
50
58
|
&:not(html) [data-rs-internal='switcher__option']{
|
|
51
59
|
--_rs-typography-letter-spacing:0.0045em;
|
|
@@ -88,6 +96,10 @@
|
|
|
88
96
|
--_rs-switcher-compact-border-radius:8px;
|
|
89
97
|
--_rs-switcher-option-padding:8px 24px;
|
|
90
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;
|
|
91
103
|
}
|
|
92
104
|
&:not(html) [data-rs-internal='switcher__option']{
|
|
93
105
|
--_rs-typography-letter-spacing:0.0015em;
|
|
@@ -135,6 +147,10 @@
|
|
|
135
147
|
--_rs-switcher-compact-border-radius:12px;
|
|
136
148
|
--_rs-switcher-option-padding:12px 32px;
|
|
137
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;
|
|
138
154
|
}
|
|
139
155
|
&:not(html) [data-rs-internal='switcher__option']{
|
|
140
156
|
--_rs-typography-letter-spacing:normal;
|
|
@@ -191,3 +207,9 @@
|
|
|
191
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));
|
|
192
208
|
}
|
|
193
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;
|
|
@@ -22,8 +26,10 @@ export interface SwitcherProps<ValueType, OptionsValueType extends ValueType> {
|
|
|
22
26
|
compact?: boolean;
|
|
23
27
|
/** Identifier for e2e tests */
|
|
24
28
|
'data-e2e'?: string;
|
|
29
|
+
/** **Works only if the `icon` on options is present.** Additional icon position. */
|
|
30
|
+
iconPosition?: SwitcherOptionIconPosition;
|
|
25
31
|
}
|
|
26
|
-
export declare function Switcher<ValueType, OptionsValueType extends ValueType = ValueType>({ className, theme: themeFromProps, size, disabled, compact, ['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;
|
|
27
33
|
export declare namespace Switcher {
|
|
28
34
|
var propTypes: {};
|
|
29
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);
|
|
@@ -72,15 +71,12 @@ function Switcher(_ref2) {
|
|
|
72
71
|
switcherValue = _ref2.value,
|
|
73
72
|
_ref2$mode = _ref2.mode,
|
|
74
73
|
mode = _ref2$mode === void 0 ? 'classic' : _ref2$mode,
|
|
74
|
+
_ref2$iconPosition = _ref2.iconPosition,
|
|
75
|
+
iconPosition = _ref2$iconPosition === void 0 ? 'left' : _ref2$iconPosition,
|
|
75
76
|
onChange = _ref2.onChange;
|
|
76
77
|
var refsArray = useRef([]);
|
|
77
78
|
var containerRef = useRef(null);
|
|
78
79
|
var theme = useThemeWithUndefined(themeFromProps);
|
|
79
|
-
var optionsHash = hashOptions(options); // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
80
|
-
|
|
81
|
-
var memoizedOptions = useMemo(function () {
|
|
82
|
-
return options;
|
|
83
|
-
}, [optionsHash]);
|
|
84
80
|
var handleOptionRef = useCallback(function (index) {
|
|
85
81
|
return function (ref) {
|
|
86
82
|
if (!ref) {
|
|
@@ -92,7 +88,7 @@ function Switcher(_ref2) {
|
|
|
92
88
|
}
|
|
93
89
|
};
|
|
94
90
|
}, []);
|
|
95
|
-
var activeIndex = findIndexByValue(
|
|
91
|
+
var activeIndex = findIndexByValue(options, switcherValue);
|
|
96
92
|
|
|
97
93
|
var _useState = useState({
|
|
98
94
|
offset: 0,
|
|
@@ -124,18 +120,20 @@ function Switcher(_ref2) {
|
|
|
124
120
|
}, [activeIndex]);
|
|
125
121
|
useResizeObserver(containerRef, onResize);
|
|
126
122
|
return /*#__PURE__*/React.createElement("span", {
|
|
127
|
-
className: cn(className, styles.switcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled, compact && styles.compact),
|
|
123
|
+
className: cn(className, styles.switcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled, compact && styles.compact, iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft),
|
|
128
124
|
"data-e2e": e2eId,
|
|
129
125
|
ref: containerRef,
|
|
130
126
|
"data-rs-internal": 'switcher',
|
|
131
127
|
"data-test": "switcher".concat(disabled ? '-disabled' : '')
|
|
132
|
-
}, _mapInstanceProperty(
|
|
128
|
+
}, _mapInstanceProperty(options).call(options, function (_ref3, index) {
|
|
133
129
|
var value = _ref3.value,
|
|
134
|
-
label = _ref3.label
|
|
130
|
+
label = _ref3.label,
|
|
131
|
+
icon = _ref3.icon;
|
|
135
132
|
return /*#__PURE__*/React.createElement(Option, {
|
|
136
133
|
key: String(value),
|
|
137
134
|
value: value,
|
|
138
135
|
label: label,
|
|
136
|
+
icon: icon,
|
|
139
137
|
disabled: disabled,
|
|
140
138
|
onClick: function onClick() {
|
|
141
139
|
return onChange(value);
|
|
@@ -153,8 +151,9 @@ function Switcher(_ref2) {
|
|
|
153
151
|
}
|
|
154
152
|
|
|
155
153
|
var optionPropType = PropTypes.shape({
|
|
156
|
-
label: PropTypes.node
|
|
157
|
-
value: PropTypes.any.isRequired
|
|
154
|
+
label: PropTypes.node,
|
|
155
|
+
value: PropTypes.any.isRequired,
|
|
156
|
+
icon: PropTypes.node
|
|
158
157
|
});
|
|
159
158
|
Switcher.propTypes = {
|
|
160
159
|
options: PropTypes.arrayOf(optionPropType).isRequired,
|
|
@@ -164,6 +163,7 @@ Switcher.propTypes = {
|
|
|
164
163
|
size: PropTypes.oneOf(['l', 'm', 's', 'xs']),
|
|
165
164
|
theme: PropTypes.oneOf(['light', 'dark']),
|
|
166
165
|
disabled: PropTypes.bool,
|
|
166
|
+
iconPosition: PropTypes.oneOf(['left', 'right']),
|
|
167
167
|
'data-e2e': PropTypes.string
|
|
168
168
|
};
|
|
169
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.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "JetBrains",
|
|
@@ -28,11 +28,11 @@
|
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@rescui/colors": "^0.2.0",
|
|
30
30
|
"@rescui/scripts": "^0.3.0",
|
|
31
|
-
"@rescui/typography": "^0.16.
|
|
31
|
+
"@rescui/typography": "^0.16.2"
|
|
32
32
|
},
|
|
33
33
|
"scripts": {
|
|
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": "a2e1fabd391841605a1f7d06800f60fb82a50feb"
|
|
38
38
|
}
|