@globalbrain/sefirot 4.22.0 → 4.23.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.
|
@@ -42,6 +42,7 @@ const props = defineProps<{
|
|
|
42
42
|
iconMode?: Mode
|
|
43
43
|
label?: string
|
|
44
44
|
labelMode?: Mode
|
|
45
|
+
count?: number
|
|
45
46
|
href?: string
|
|
46
47
|
rounded?: boolean
|
|
47
48
|
block?: boolean
|
|
@@ -120,6 +121,9 @@ function handleClick(): void {
|
|
|
120
121
|
<span v-if="trailIcon" class="icon" :class="iconMode">
|
|
121
122
|
<component :is="trailIcon" class="icon-svg" />
|
|
122
123
|
</span>
|
|
124
|
+
<span v-else-if="count !== undefined" class="count">
|
|
125
|
+
{{ count }}
|
|
126
|
+
</span>
|
|
123
127
|
</span>
|
|
124
128
|
|
|
125
129
|
<transition name="fade">
|
|
@@ -197,6 +201,11 @@ function handleClick(): void {
|
|
|
197
201
|
color: var(--button-loader-color);
|
|
198
202
|
}
|
|
199
203
|
|
|
204
|
+
.count {
|
|
205
|
+
display: inline-block;
|
|
206
|
+
background-color: var(--button-count-bg-color);
|
|
207
|
+
}
|
|
208
|
+
|
|
200
209
|
.SButton.mini {
|
|
201
210
|
min-width: 28px;
|
|
202
211
|
min-height: 28px;
|
|
@@ -208,6 +217,15 @@ function handleClick(): void {
|
|
|
208
217
|
&.has-label.has-trail-icon { padding: var(--button-padding, 0 8px 0 10px); }
|
|
209
218
|
.content { gap: 4px; }
|
|
210
219
|
.icon-svg { width: 16px; height: 16px; }
|
|
220
|
+
|
|
221
|
+
.count {
|
|
222
|
+
border-radius: 9px;
|
|
223
|
+
padding: 0 6px;
|
|
224
|
+
min-width: 18px;
|
|
225
|
+
line-height: 18px;
|
|
226
|
+
font-size: 12px;
|
|
227
|
+
font-weight: 500;
|
|
228
|
+
}
|
|
211
229
|
}
|
|
212
230
|
|
|
213
231
|
.SButton.small {
|
|
@@ -219,8 +237,17 @@ function handleClick(): void {
|
|
|
219
237
|
&.has-label { padding: var(--button-padding, 0 12px); }
|
|
220
238
|
&.has-label.has-lead-icon { padding: var(--button-padding, 0 10px 0 8px); }
|
|
221
239
|
&.has-label.has-trail-icon { padding: var(--button-padding, 0 8px 0 10px); }
|
|
222
|
-
.content { gap:
|
|
240
|
+
.content { gap: 6px; }
|
|
223
241
|
.icon-svg { width: 16px; height: 16px; }
|
|
242
|
+
|
|
243
|
+
.count {
|
|
244
|
+
border-radius: 9px;
|
|
245
|
+
padding: 0 6px;
|
|
246
|
+
min-width: 18px;
|
|
247
|
+
line-height: 18px;
|
|
248
|
+
font-size: 12px;
|
|
249
|
+
font-weight: 600;
|
|
250
|
+
}
|
|
224
251
|
}
|
|
225
252
|
|
|
226
253
|
.SButton.medium {
|
|
@@ -234,6 +261,15 @@ function handleClick(): void {
|
|
|
234
261
|
&.has-label.has-trail-icon { padding: var(--button-padding, 0 10px 0 12px); }
|
|
235
262
|
.content { gap: 8px; }
|
|
236
263
|
.icon-svg { width: 18px; height: 18px; }
|
|
264
|
+
|
|
265
|
+
.count {
|
|
266
|
+
border-radius: 10px;
|
|
267
|
+
padding: 0 6px;
|
|
268
|
+
min-width: 20px;
|
|
269
|
+
line-height: 20px;
|
|
270
|
+
font-size: 12px;
|
|
271
|
+
font-weight: 600;
|
|
272
|
+
}
|
|
237
273
|
}
|
|
238
274
|
|
|
239
275
|
.SButton.large {
|
|
@@ -247,6 +283,15 @@ function handleClick(): void {
|
|
|
247
283
|
&.has-label.has-trail-icon { padding: var(--button-padding, 0 12px 0 14px); }
|
|
248
284
|
.content { gap: 8px; }
|
|
249
285
|
.icon-svg { width: 18px; height: 18px; }
|
|
286
|
+
|
|
287
|
+
.count {
|
|
288
|
+
border-radius: 10px;
|
|
289
|
+
padding: 0 6px;
|
|
290
|
+
min-width: 20px;
|
|
291
|
+
line-height: 20px;
|
|
292
|
+
font-size: 12px;
|
|
293
|
+
font-weight: 600;
|
|
294
|
+
}
|
|
250
295
|
}
|
|
251
296
|
|
|
252
297
|
.SButton.jumbo {
|
|
@@ -260,6 +305,15 @@ function handleClick(): void {
|
|
|
260
305
|
&.has-label.has-trail-icon { padding: var(--button-padding, 0 18px 0 20px); }
|
|
261
306
|
.content { gap: 8px; }
|
|
262
307
|
.icon-svg { width: 20px; height: 20px; }
|
|
308
|
+
|
|
309
|
+
.count {
|
|
310
|
+
border-radius: 12px;
|
|
311
|
+
padding: 0 8px;
|
|
312
|
+
min-width: 24px;
|
|
313
|
+
line-height: 24px;
|
|
314
|
+
font-size: 14px;
|
|
315
|
+
font-weight: 500;
|
|
316
|
+
}
|
|
263
317
|
}
|
|
264
318
|
|
|
265
319
|
.SButton.disabled {
|
|
@@ -288,6 +342,7 @@ function handleClick(): void {
|
|
|
288
342
|
--button-border-color: var(--button-fill-default-border-color);
|
|
289
343
|
--button-text-color: var(--button-fill-default-text-color);
|
|
290
344
|
--button-bg-color: var(--button-fill-default-bg-color);
|
|
345
|
+
--button-count-bg-color: var(--button-fill-default-count-bg-color);
|
|
291
346
|
--button-hover-border-color: var(--button-fill-default-hover-border-color);
|
|
292
347
|
--button-hover-text-color: var(--button-fill-default-hover-text-color);
|
|
293
348
|
--button-hover-bg-color: var(--button-fill-default-hover-bg-color);
|
|
@@ -304,6 +359,7 @@ function handleClick(): void {
|
|
|
304
359
|
--button-border-color: var(--button-fill-mute-border-color);
|
|
305
360
|
--button-text-color: var(--button-fill-mute-text-color);
|
|
306
361
|
--button-bg-color: var(--button-fill-mute-bg-color);
|
|
362
|
+
--button-count-bg-color: var(--button-fill-mute-count-bg-color);
|
|
307
363
|
--button-hover-border-color: var(--button-fill-mute-hover-border-color);
|
|
308
364
|
--button-hover-text-color: var(--button-fill-mute-hover-text-color);
|
|
309
365
|
--button-hover-bg-color: var(--button-fill-mute-hover-bg-color);
|
|
@@ -320,6 +376,7 @@ function handleClick(): void {
|
|
|
320
376
|
--button-border-color: var(--button-fill-neutral-border-color);
|
|
321
377
|
--button-text-color: var(--button-fill-neutral-text-color);
|
|
322
378
|
--button-bg-color: var(--button-fill-neutral-bg-color);
|
|
379
|
+
--button-count-bg-color: var(--button-fill-neutral-count-bg-color);
|
|
323
380
|
--button-hover-border-color: var(--button-fill-neutral-hover-border-color);
|
|
324
381
|
--button-hover-text-color: var(--button-fill-neutral-hover-text-color);
|
|
325
382
|
--button-hover-bg-color: var(--button-fill-neutral-hover-bg-color);
|
|
@@ -336,6 +393,7 @@ function handleClick(): void {
|
|
|
336
393
|
--button-border-color: var(--button-fill-white-border-color);
|
|
337
394
|
--button-text-color: var(--button-fill-white-text-color);
|
|
338
395
|
--button-bg-color: var(--button-fill-white-bg-color);
|
|
396
|
+
--button-count-bg-color: var(--button-fill-white-count-bg-color);
|
|
339
397
|
--button-hover-border-color: var(--button-fill-white-hover-border-color);
|
|
340
398
|
--button-hover-text-color: var(--button-fill-white-hover-text-color);
|
|
341
399
|
--button-hover-bg-color: var(--button-fill-white-hover-bg-color);
|
|
@@ -352,6 +410,7 @@ function handleClick(): void {
|
|
|
352
410
|
--button-border-color: var(--button-fill-black-border-color);
|
|
353
411
|
--button-text-color: var(--button-fill-black-text-color);
|
|
354
412
|
--button-bg-color: var(--button-fill-black-bg-color);
|
|
413
|
+
--button-count-bg-color: var(--button-fill-black-count-bg-color);
|
|
355
414
|
--button-hover-border-color: var(--button-fill-black-hover-border-color);
|
|
356
415
|
--button-hover-text-color: var(--button-fill-black-hover-text-color);
|
|
357
416
|
--button-hover-bg-color: var(--button-fill-black-hover-bg-color);
|
|
@@ -368,6 +427,7 @@ function handleClick(): void {
|
|
|
368
427
|
--button-border-color: var(--button-fill-info-border-color);
|
|
369
428
|
--button-text-color: var(--button-fill-info-text-color);
|
|
370
429
|
--button-bg-color: var(--button-fill-info-bg-color);
|
|
430
|
+
--button-count-bg-color: var(--button-fill-info-count-bg-color);
|
|
371
431
|
--button-hover-border-color: var(--button-fill-info-hover-border-color);
|
|
372
432
|
--button-hover-text-color: var(--button-fill-info-hover-text-color);
|
|
373
433
|
--button-hover-bg-color: var(--button-fill-info-hover-bg-color);
|
|
@@ -384,6 +444,7 @@ function handleClick(): void {
|
|
|
384
444
|
--button-border-color: var(--button-fill-success-border-color);
|
|
385
445
|
--button-text-color: var(--button-fill-success-text-color);
|
|
386
446
|
--button-bg-color: var(--button-fill-success-bg-color);
|
|
447
|
+
--button-count-bg-color: var(--button-fill-success-count-bg-color);
|
|
387
448
|
--button-hover-border-color: var(--button-fill-success-hover-border-color);
|
|
388
449
|
--button-hover-text-color: var(--button-fill-success-hover-text-color);
|
|
389
450
|
--button-hover-bg-color: var(--button-fill-success-hover-bg-color);
|
|
@@ -400,6 +461,7 @@ function handleClick(): void {
|
|
|
400
461
|
--button-border-color: var(--button-fill-warning-border-color);
|
|
401
462
|
--button-text-color: var(--button-fill-warning-text-color);
|
|
402
463
|
--button-bg-color: var(--button-fill-warning-bg-color);
|
|
464
|
+
--button-count-bg-color: var(--button-fill-warning-count-bg-color);
|
|
403
465
|
--button-hover-border-color: var(--button-fill-warning-hover-border-color);
|
|
404
466
|
--button-hover-text-color: var(--button-fill-warning-hover-text-color);
|
|
405
467
|
--button-hover-bg-color: var(--button-fill-warning-hover-bg-color);
|
|
@@ -416,6 +478,7 @@ function handleClick(): void {
|
|
|
416
478
|
--button-border-color: var(--button-fill-danger-border-color);
|
|
417
479
|
--button-text-color: var(--button-fill-danger-text-color);
|
|
418
480
|
--button-bg-color: var(--button-fill-danger-bg-color);
|
|
481
|
+
--button-count-bg-color: var(--button-fill-danger-count-bg-color);
|
|
419
482
|
--button-hover-border-color: var(--button-fill-danger-hover-border-color);
|
|
420
483
|
--button-hover-text-color: var(--button-fill-danger-hover-text-color);
|
|
421
484
|
--button-hover-bg-color: var(--button-fill-danger-hover-bg-color);
|
|
@@ -489,6 +552,7 @@ function handleClick(): void {
|
|
|
489
552
|
&.default {
|
|
490
553
|
--button-border-color: var(--button-outline-default-border-color);
|
|
491
554
|
--button-text-color: var(--button-outline-default-text-color);
|
|
555
|
+
--button-count-bg-color: var(--button-outline-default-count-bg-color);
|
|
492
556
|
--button-hover-bg-color: var(--button-outline-default-hover-bg-color);
|
|
493
557
|
--button-active-bg-color: var(--button-outline-default-active-bg-color);
|
|
494
558
|
--button-disabled-border-color: var(--button-outline-default-disabled-border-color);
|
|
@@ -498,6 +562,7 @@ function handleClick(): void {
|
|
|
498
562
|
&.mute {
|
|
499
563
|
--button-border-color: var(--button-outline-mute-border-color);
|
|
500
564
|
--button-text-color: var(--button-outline-mute-text-color);
|
|
565
|
+
--button-count-bg-color: var(--button-outline-mute-count-bg-color);
|
|
501
566
|
--button-hover-bg-color: var(--button-outline-mute-hover-bg-color);
|
|
502
567
|
--button-active-bg-color: var(--button-outline-mute-active-bg-color);
|
|
503
568
|
--button-disabled-border-color: var(--button-outline-mute-disabled-border-color);
|
|
@@ -507,6 +572,7 @@ function handleClick(): void {
|
|
|
507
572
|
&.neutral {
|
|
508
573
|
--button-border-color: var(--button-outline-neutral-border-color);
|
|
509
574
|
--button-text-color: var(--button-outline-neutral-text-color);
|
|
575
|
+
--button-count-bg-color: var(--button-outline-neutral-count-bg-color);
|
|
510
576
|
--button-hover-bg-color: var(--button-outline-neutral-hover-bg-color);
|
|
511
577
|
--button-active-bg-color: var(--button-outline-neutral-active-bg-color);
|
|
512
578
|
--button-disabled-border-color: var(--button-outline-neutral-disabled-border-color);
|
|
@@ -516,6 +582,7 @@ function handleClick(): void {
|
|
|
516
582
|
&.white {
|
|
517
583
|
--button-border-color: var(--button-outline-white-border-color);
|
|
518
584
|
--button-text-color: var(--button-outline-white-text-color);
|
|
585
|
+
--button-count-bg-color: var(--button-outline-white-count-bg-color);
|
|
519
586
|
--button-hover-bg-color: var(--button-outline-white-hover-bg-color);
|
|
520
587
|
--button-active-bg-color: var(--button-outline-white-active-bg-color);
|
|
521
588
|
--button-disabled-border-color: var(--button-outline-white-disabled-border-color);
|
|
@@ -525,6 +592,7 @@ function handleClick(): void {
|
|
|
525
592
|
&.black {
|
|
526
593
|
--button-border-color: var(--button-outline-black-border-color);
|
|
527
594
|
--button-text-color: var(--button-outline-black-text-color);
|
|
595
|
+
--button-count-bg-color: var(--button-outline-black-count-bg-color);
|
|
528
596
|
--button-hover-bg-color: var(--button-outline-black-hover-bg-color);
|
|
529
597
|
--button-active-bg-color: var(--button-outline-black-active-bg-color);
|
|
530
598
|
--button-disabled-border-color: var(--button-outline-black-disabled-border-color);
|
|
@@ -534,6 +602,7 @@ function handleClick(): void {
|
|
|
534
602
|
&.info {
|
|
535
603
|
--button-border-color: var(--button-outline-info-border-color);
|
|
536
604
|
--button-text-color: var(--button-outline-info-text-color);
|
|
605
|
+
--button-count-bg-color: var(--button-outline-info-count-bg-color);
|
|
537
606
|
--button-hover-bg-color: var(--button-outline-info-hover-bg-color);
|
|
538
607
|
--button-active-bg-color: var(--button-outline-info-active-bg-color);
|
|
539
608
|
--button-disabled-border-color: var(--button-outline-info-disabled-border-color);
|
|
@@ -543,6 +612,7 @@ function handleClick(): void {
|
|
|
543
612
|
&.success {
|
|
544
613
|
--button-border-color: var(--button-outline-success-border-color);
|
|
545
614
|
--button-text-color: var(--button-outline-success-text-color);
|
|
615
|
+
--button-count-bg-color: var(--button-outline-success-count-bg-color);
|
|
546
616
|
--button-hover-bg-color: var(--button-outline-success-hover-bg-color);
|
|
547
617
|
--button-active-bg-color: var(--button-outline-success-active-bg-color);
|
|
548
618
|
--button-disabled-border-color: var(--button-outline-success-disabled-border-color);
|
|
@@ -552,6 +622,7 @@ function handleClick(): void {
|
|
|
552
622
|
&.warning {
|
|
553
623
|
--button-border-color: var(--button-outline-warning-border-color);
|
|
554
624
|
--button-text-color: var(--button-outline-warning-text-color);
|
|
625
|
+
--button-count-bg-color: var(--button-outline-warning-count-bg-color);
|
|
555
626
|
--button-hover-bg-color: var(--button-outline-warning-hover-bg-color);
|
|
556
627
|
--button-active-bg-color: var(--button-outline-warning-active-bg-color);
|
|
557
628
|
--button-disabled-border-color: var(--button-outline-warning-disabled-border-color);
|
|
@@ -561,6 +632,7 @@ function handleClick(): void {
|
|
|
561
632
|
&.danger {
|
|
562
633
|
--button-border-color: var(--button-outline-danger-border-color);
|
|
563
634
|
--button-text-color: var(--button-outline-danger-text-color);
|
|
635
|
+
--button-count-bg-color: var(--button-outline-danger-count-bg-color);
|
|
564
636
|
--button-hover-bg-color: var(--button-outline-danger-hover-bg-color);
|
|
565
637
|
--button-active-bg-color: var(--button-outline-danger-active-bg-color);
|
|
566
638
|
--button-disabled-border-color: var(--button-outline-danger-disabled-border-color);
|
|
@@ -629,6 +701,7 @@ function handleClick(): void {
|
|
|
629
701
|
|
|
630
702
|
&.default {
|
|
631
703
|
--button-text-color: var(--button-text-default-text-color);
|
|
704
|
+
--button-count-bg-color: var(--button-text-default-count-bg-color);
|
|
632
705
|
--button-hover-bg-color: var(--button-text-default-hover-bg-color);
|
|
633
706
|
--button-active-bg-color: var(--button-text-default-active-bg-color);
|
|
634
707
|
--button-disabled-text-color: var(--button-text-default-disabled-text-color);
|
|
@@ -636,6 +709,7 @@ function handleClick(): void {
|
|
|
636
709
|
|
|
637
710
|
&.mute {
|
|
638
711
|
--button-text-color: var(--button-text-mute-text-color);
|
|
712
|
+
--button-count-bg-color: var(--button-text-mute-count-bg-color);
|
|
639
713
|
--button-hover-bg-color: var(--button-text-mute-hover-bg-color);
|
|
640
714
|
--button-active-bg-color: var(--button-text-mute-active-bg-color);
|
|
641
715
|
--button-disabled-text-color: var(--button-text-mute-disabled-text-color);
|
|
@@ -643,6 +717,7 @@ function handleClick(): void {
|
|
|
643
717
|
|
|
644
718
|
&.neutral {
|
|
645
719
|
--button-text-color: var(--button-text-neutral-text-color);
|
|
720
|
+
--button-count-bg-color: var(--button-text-neutral-count-bg-color);
|
|
646
721
|
--button-hover-bg-color: var(--button-text-neutral-hover-bg-color);
|
|
647
722
|
--button-active-bg-color: var(--button-text-neutral-active-bg-color);
|
|
648
723
|
--button-disabled-text-color: var(--button-text-neutral-disabled-text-color);
|
|
@@ -650,6 +725,7 @@ function handleClick(): void {
|
|
|
650
725
|
|
|
651
726
|
&.white {
|
|
652
727
|
--button-text-color: var(--button-text-white-text-color);
|
|
728
|
+
--button-count-bg-color: var(--button-text-white-count-bg-color);
|
|
653
729
|
--button-hover-bg-color: var(--button-text-white-hover-bg-color);
|
|
654
730
|
--button-active-bg-color: var(--button-text-white-active-bg-color);
|
|
655
731
|
--button-disabled-text-color: var(--button-text-white-disabled-text-color);
|
|
@@ -657,6 +733,7 @@ function handleClick(): void {
|
|
|
657
733
|
|
|
658
734
|
&.black {
|
|
659
735
|
--button-text-color: var(--button-text-black-text-color);
|
|
736
|
+
--button-count-bg-color: var(--button-text-black-count-bg-color);
|
|
660
737
|
--button-hover-bg-color: var(--button-text-black-hover-bg-color);
|
|
661
738
|
--button-active-bg-color: var(--button-text-black-active-bg-color);
|
|
662
739
|
--button-disabled-text-color: var(--button-text-black-disabled-text-color);
|
|
@@ -664,6 +741,7 @@ function handleClick(): void {
|
|
|
664
741
|
|
|
665
742
|
&.info {
|
|
666
743
|
--button-text-color: var(--button-text-info-text-color);
|
|
744
|
+
--button-count-bg-color: var(--button-text-info-count-bg-color);
|
|
667
745
|
--button-hover-bg-color: var(--button-text-info-hover-bg-color);
|
|
668
746
|
--button-active-bg-color: var(--button-text-info-active-bg-color);
|
|
669
747
|
--button-disabled-text-color: var(--button-text-info-disabled-text-color);
|
|
@@ -671,6 +749,7 @@ function handleClick(): void {
|
|
|
671
749
|
|
|
672
750
|
&.success {
|
|
673
751
|
--button-text-color: var(--button-text-success-text-color);
|
|
752
|
+
--button-count-bg-color: var(--button-text-success-count-bg-color);
|
|
674
753
|
--button-hover-bg-color: var(--button-text-success-hover-bg-color);
|
|
675
754
|
--button-active-bg-color: var(--button-text-success-active-bg-color);
|
|
676
755
|
--button-disabled-text-color: var(--button-text-success-disabled-text-color);
|
|
@@ -678,6 +757,7 @@ function handleClick(): void {
|
|
|
678
757
|
|
|
679
758
|
&.warning {
|
|
680
759
|
--button-text-color: var(--button-text-warning-text-color);
|
|
760
|
+
--button-count-bg-color: var(--button-text-warning-count-bg-color);
|
|
681
761
|
--button-hover-bg-color: var(--button-text-warning-hover-bg-color);
|
|
682
762
|
--button-active-bg-color: var(--button-text-warning-active-bg-color);
|
|
683
763
|
--button-disabled-text-color: var(--button-text-warning-disabled-text-color);
|
|
@@ -685,6 +765,7 @@ function handleClick(): void {
|
|
|
685
765
|
|
|
686
766
|
&.danger {
|
|
687
767
|
--button-text-color: var(--button-text-danger-text-color);
|
|
768
|
+
--button-count-bg-color: var(--button-text-danger-count-bg-color);
|
|
688
769
|
--button-hover-bg-color: var(--button-text-danger-hover-bg-color);
|
|
689
770
|
--button-active-bg-color: var(--button-text-danger-active-bg-color);
|
|
690
771
|
--button-disabled-text-color: var(--button-text-danger-disabled-text-color);
|
|
@@ -56,10 +56,10 @@ const { t } = useTrans({
|
|
|
56
56
|
}
|
|
57
57
|
})
|
|
58
58
|
|
|
59
|
-
const container = ref<
|
|
59
|
+
const container = ref<HTMLDivElement>()
|
|
60
60
|
|
|
61
61
|
const { isOpen, open } = useFlyout(container)
|
|
62
|
-
const {
|
|
62
|
+
const { inset, update: updatePosition } = useManualDropdownPosition(container, () => props.position)
|
|
63
63
|
|
|
64
64
|
const classes = computed(() => [
|
|
65
65
|
props.size ?? 'small',
|
|
@@ -171,7 +171,7 @@ function handleArray(value: OptionValue) {
|
|
|
171
171
|
</div>
|
|
172
172
|
</div>
|
|
173
173
|
|
|
174
|
-
<div v-if="isOpen" class="dropdown" :
|
|
174
|
+
<div v-if="isOpen" class="dropdown" :style="inset">
|
|
175
175
|
<div class="dropdown-content">
|
|
176
176
|
<SDropdown :sections="dropdownOptions" />
|
|
177
177
|
</div>
|
|
@@ -236,25 +236,8 @@ function handleArray(value: OptionValue) {
|
|
|
236
236
|
}
|
|
237
237
|
|
|
238
238
|
.dropdown {
|
|
239
|
-
position: absolute;
|
|
240
|
-
left: 0;
|
|
241
|
-
z-index: var(--z-index-dropdown);
|
|
242
|
-
|
|
243
|
-
&.top {
|
|
244
|
-
bottom: calc(100% + 8px);
|
|
245
|
-
|
|
246
|
-
:deep(.SDropdown) {
|
|
247
|
-
transform: translateY(-100%);
|
|
248
|
-
}
|
|
249
|
-
}
|
|
250
|
-
|
|
251
|
-
&.bottom {
|
|
252
|
-
top: calc(100% + 8px);
|
|
253
|
-
}
|
|
254
|
-
}
|
|
255
|
-
|
|
256
|
-
.dropdown-content {
|
|
257
239
|
position: fixed;
|
|
240
|
+
z-index: var(--z-index-dropdown);
|
|
258
241
|
}
|
|
259
242
|
|
|
260
243
|
.SInputDropdown.mini {
|
|
@@ -104,10 +104,10 @@ onBeforeUnmount(() => {
|
|
|
104
104
|
|
|
105
105
|
<Teleport to="#sefirot-modals">
|
|
106
106
|
<Transition name="fade">
|
|
107
|
-
<
|
|
108
|
-
<
|
|
109
|
-
<
|
|
110
|
-
</
|
|
107
|
+
<div v-show="on" class="container" :class="containerClasses" ref="content">
|
|
108
|
+
<div v-if="$slots.text" class="tip"><slot name="text" /></div>
|
|
109
|
+
<div v-else-if="text" class="tip" v-html="text" />
|
|
110
|
+
</div>
|
|
111
111
|
</Transition>
|
|
112
112
|
</Teleport>
|
|
113
113
|
</component>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useElementBounding, useWindowSize } from '@vueuse/core'
|
|
2
|
-
import { type Component, type MaybeRef, type MaybeRefOrGetter, type Ref, ref, unref } from 'vue'
|
|
2
|
+
import { type Component, type MaybeRef, type MaybeRefOrGetter, type Ref, computed, ref, toValue, unref } from 'vue'
|
|
3
3
|
import { type ActionList } from '../components/SActionList.vue'
|
|
4
4
|
import { type DateRange } from '../support/DateRange'
|
|
5
5
|
|
|
@@ -83,6 +83,7 @@ export interface DropdownSectionComponent extends DropdownSectionBase {
|
|
|
83
83
|
export interface ManualDropdownPosition {
|
|
84
84
|
container: Ref<any>
|
|
85
85
|
position: Ref<'top' | 'bottom'>
|
|
86
|
+
inset: Ref<{ top?: string; right?: string; bottom?: string; left?: string; transform?: string }>
|
|
86
87
|
update(): void
|
|
87
88
|
}
|
|
88
89
|
|
|
@@ -122,19 +123,20 @@ export function createDropdownComponent(
|
|
|
122
123
|
|
|
123
124
|
export function useManualDropdownPosition(
|
|
124
125
|
container?: Ref<any>,
|
|
125
|
-
|
|
126
|
+
override?: MaybeRefOrGetter<'top' | 'bottom' | undefined>
|
|
126
127
|
): ManualDropdownPosition {
|
|
127
128
|
const el = container ?? ref<any>(null)
|
|
128
129
|
|
|
129
|
-
const { top, bottom } = useElementBounding(el)
|
|
130
|
+
const { top, bottom, left } = useElementBounding(el)
|
|
130
131
|
const { height } = useWindowSize()
|
|
131
132
|
|
|
132
|
-
const position = ref<'top' | 'bottom'>(
|
|
133
|
-
|
|
133
|
+
const position = ref<'top' | 'bottom'>(toValue(override) ?? 'bottom')
|
|
134
134
|
const dialogHeight = 400
|
|
135
135
|
|
|
136
136
|
function update(): void {
|
|
137
|
-
|
|
137
|
+
const overrideValue = toValue(override)
|
|
138
|
+
if (overrideValue) {
|
|
139
|
+
position.value = overrideValue
|
|
138
140
|
return
|
|
139
141
|
}
|
|
140
142
|
|
|
@@ -154,9 +156,25 @@ export function useManualDropdownPosition(
|
|
|
154
156
|
position.value = 'top'
|
|
155
157
|
}
|
|
156
158
|
|
|
159
|
+
const inset = computed(() => {
|
|
160
|
+
if (position.value === 'top') {
|
|
161
|
+
return {
|
|
162
|
+
top: `${top.value - 8}px`,
|
|
163
|
+
left: `${left.value}px`,
|
|
164
|
+
transform: 'translateY(-100%)'
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
return {
|
|
169
|
+
top: `${bottom.value + 8}px`,
|
|
170
|
+
left: `${left.value}px`
|
|
171
|
+
}
|
|
172
|
+
})
|
|
173
|
+
|
|
157
174
|
return {
|
|
158
175
|
container: el,
|
|
159
176
|
position,
|
|
177
|
+
inset,
|
|
160
178
|
update
|
|
161
179
|
}
|
|
162
180
|
}
|
package/lib/styles/variables.css
CHANGED
|
@@ -428,6 +428,7 @@
|
|
|
428
428
|
--button-fill-default-text-color: var(--c-text-1);
|
|
429
429
|
--button-fill-default-content-color: var(--c-text-1);
|
|
430
430
|
--button-fill-default-bg-color: var(--c-bg-mute-1);
|
|
431
|
+
--button-fill-default-count-bg-color: var(--c-gray-7);
|
|
431
432
|
--button-fill-default-loader-color: var(--c-neutral-1);
|
|
432
433
|
--button-fill-default-hover-border-color: var(--c-border-mute-2);
|
|
433
434
|
--button-fill-default-hover-text-color: var(--c-text-1);
|
|
@@ -444,6 +445,8 @@
|
|
|
444
445
|
--button-fill-mute-text-color: var(--c-text-2);
|
|
445
446
|
--button-fill-mute-content-color: var(--c-text-2);
|
|
446
447
|
--button-fill-mute-bg-color: var(--c-bg-mute-1);
|
|
448
|
+
--button-fill-mute-count-bg-color: var(--c-gray-6);
|
|
449
|
+
--button-fill-default-count-bg-color: var(--c-gray-7);
|
|
447
450
|
--button-fill-mute-loader-color: var(--c-neutral);
|
|
448
451
|
--button-fill-mute-hover-border-color: var(--c-border-mute-2);
|
|
449
452
|
--button-fill-mute-hover-text-color: var(--c-text-2);
|
|
@@ -461,6 +464,7 @@
|
|
|
461
464
|
--button-fill-neutral-content-color: var(--c-text-1);
|
|
462
465
|
--button-fill-neutral-bg-color: var(--c-neutral-1);
|
|
463
466
|
--button-fill-neutral-loader-color: var(--c-neutral-inverse-1);
|
|
467
|
+
--button-fill-neutral-count-bg-color: var(--c-neutral-2);
|
|
464
468
|
--button-fill-neutral-hover-border-color: transparent;
|
|
465
469
|
--button-fill-neutral-hover-text-color: var(--c-text-inverse-1);
|
|
466
470
|
--button-fill-neutral-hover-bg-color: var(--c-neutral-2);
|
|
@@ -477,6 +481,7 @@
|
|
|
477
481
|
--button-fill-white-content-color: var(--c-text-dark-1);
|
|
478
482
|
--button-fill-white-bg-color: var(--c-neutral-dark-1);
|
|
479
483
|
--button-fill-white-loader-color: var(--c-neutral-light-1);
|
|
484
|
+
--button-fill-white-count-bg-color: var(--c-neutral-dark-2);
|
|
480
485
|
--button-fill-white-hover-border-color: transparent;
|
|
481
486
|
--button-fill-white-hover-text-color: var(--c-text-light-1);
|
|
482
487
|
--button-fill-white-hover-bg-color: var(--c-neutral-dark-2);
|
|
@@ -493,6 +498,7 @@
|
|
|
493
498
|
--button-fill-black-content-color: var(--c-text-light-1);
|
|
494
499
|
--button-fill-black-bg-color: var(--c-neutral-light-1);
|
|
495
500
|
--button-fill-black-loader-color: var(--c-neutral-dark-1);
|
|
501
|
+
--button-fill-black-count-bg-color: var(--c-neutral-light-2);
|
|
496
502
|
--button-fill-black-hover-border-color: transparent;
|
|
497
503
|
--button-fill-black-hover-text-color: var(--c-text-dark-1);
|
|
498
504
|
--button-fill-black-hover-bg-color: var(--c-neutral-light-2);
|
|
@@ -509,6 +515,7 @@
|
|
|
509
515
|
--button-fill-info-content-color: var(--c-white-1);
|
|
510
516
|
--button-fill-info-bg-color: var(--c-bg-info-1);
|
|
511
517
|
--button-fill-info-loader-color: var(--c-white-1);
|
|
518
|
+
--button-fill-info-count-bg-color: var(--c-blue-8);
|
|
512
519
|
--button-fill-info-hover-border-color: var(--c-border-info-2);
|
|
513
520
|
--button-fill-info-hover-text-color: var(--c-white-1);
|
|
514
521
|
--button-fill-info-hover-bg-color: var(--c-bg-info-2);
|
|
@@ -525,6 +532,7 @@
|
|
|
525
532
|
--button-fill-success-content-color: var(--c-white-1);
|
|
526
533
|
--button-fill-success-bg-color: var(--c-bg-success-1);
|
|
527
534
|
--button-fill-success-loader-color: var(--c-white);
|
|
535
|
+
--button-fill-success-count-bg-color: var(--c-green-8);
|
|
528
536
|
--button-fill-success-hover-border-color: var(--c-border-success-2);
|
|
529
537
|
--button-fill-success-hover-text-color: var(--c-white);
|
|
530
538
|
--button-fill-success-hover-bg-color: var(--c-bg-success-2);
|
|
@@ -541,6 +549,7 @@
|
|
|
541
549
|
--button-fill-warning-content-color: var(--c-text-warning-1);
|
|
542
550
|
--button-fill-warning-bg-color: var(--c-bg-mute-1);
|
|
543
551
|
--button-fill-warning-loader-color: var(--c-neutral);
|
|
552
|
+
--button-fill-warning-count-bg-color: var(--c-bg-mute-3);
|
|
544
553
|
--button-fill-warning-hover-border-color: var(--c-border-warning-1);
|
|
545
554
|
--button-fill-warning-hover-text-color: var(--c-white);
|
|
546
555
|
--button-fill-warning-hover-bg-color: var(--c-bg-warning-1);
|
|
@@ -557,6 +566,7 @@
|
|
|
557
566
|
--button-fill-danger-content-color: var(--c-text-danger-1);
|
|
558
567
|
--button-fill-danger-bg-color: var(--c-bg-mute-1);
|
|
559
568
|
--button-fill-danger-loader-color: var(--c-neutral);
|
|
569
|
+
--button-fill-danger-count-bg-color: var(--c-bg-mute-3);
|
|
560
570
|
--button-fill-danger-hover-border-color: var(--c-border-danger-1);
|
|
561
571
|
--button-fill-danger-hover-text-color: var(--c-white);
|
|
562
572
|
--button-fill-danger-hover-bg-color: var(--c-bg-danger-1);
|
|
@@ -572,6 +582,7 @@
|
|
|
572
582
|
--button-outline-default-text-color: var(--c-text-1);
|
|
573
583
|
--button-outline-default-content-color: var(--c-text-1);
|
|
574
584
|
--button-outline-default-loader-color: var(--c-neutral-1);
|
|
585
|
+
--button-outline-default-count-bg-color: var(--c-bg-mute-1);
|
|
575
586
|
--button-outline-default-hover-bg-color: var(--c-neutral-dimm-a1);
|
|
576
587
|
--button-outline-default-active-bg-color: var(--c-neutral-dimm-a2);
|
|
577
588
|
--button-outline-default-disabled-border-color: var(--c-border-mute-1);
|
|
@@ -582,6 +593,7 @@
|
|
|
582
593
|
--button-outline-mute-text-color: var(--c-text-2);
|
|
583
594
|
--button-outline-mute-content-color: var(--c-text-2);
|
|
584
595
|
--button-outline-mute-loader-color: var(--c-neutral-1);
|
|
596
|
+
--button-outline-mute-count-bg-color: var(--c-bg-mute-1);
|
|
585
597
|
--button-outline-mute-hover-bg-color: var(--c-neutral-dimm-a1);
|
|
586
598
|
--button-outline-mute-active-bg-color: var(--c-neutral-dimm-a2);
|
|
587
599
|
--button-outline-mute-disabled-border-color: var(--c-border-mute-1);
|
|
@@ -592,6 +604,7 @@
|
|
|
592
604
|
--button-outline-neutral-text-color: var(--c-text-1);
|
|
593
605
|
--button-outline-neutral-content-color: var(--c-text-1);
|
|
594
606
|
--button-outline-neutral-loader-color: var(--c-neutral-1);
|
|
607
|
+
--button-outline-neutral-count-bg-color: var(--c-bg-mute-1);
|
|
595
608
|
--button-outline-neutral-hover-bg-color: var(--c-neutral-dimm-a1);
|
|
596
609
|
--button-outline-neutral-active-bg-color: var(--c-neutral-dimm-a2);
|
|
597
610
|
--button-outline-neutral-disabled-border-color: var(--c-neutral-3);
|
|
@@ -602,6 +615,7 @@
|
|
|
602
615
|
--button-outline-white-text-color: var(--c-text-dark-1);
|
|
603
616
|
--button-outline-white-content-color: var(--c-text-dark-1);
|
|
604
617
|
--button-outline-white-loader-color: var(--c-neutral-dark-1);
|
|
618
|
+
--button-outline-white-count-bg-color: var(--c-bg-mute-1);
|
|
605
619
|
--button-outline-white-hover-bg-color: var(--c-neutral-dark-dimm-a1);
|
|
606
620
|
--button-outline-white-active-bg-color: var(--c-neutral-dark-dimm-a2);
|
|
607
621
|
--button-outline-white-disabled-border-color: var(--c-neutral-dark-3);
|
|
@@ -612,6 +626,7 @@
|
|
|
612
626
|
--button-outline-black-text-color: var(--c-text-light-1);
|
|
613
627
|
--button-outline-black-content-color: var(--c-text-light-1);
|
|
614
628
|
--button-outline-black-loader-color: var(--c-neutral-light-1);
|
|
629
|
+
--button-outline-black-count-bg-color: var(--c-bg-mute-1);
|
|
615
630
|
--button-outline-black-hover-bg-color: var(--c-neutral-light-dimm-a1);
|
|
616
631
|
--button-outline-black-active-bg-color: var(--c-neutral-light-dimm-a2);
|
|
617
632
|
--button-outline-black-disabled-border-color: var(--c-neutral-light-3);
|
|
@@ -622,6 +637,7 @@
|
|
|
622
637
|
--button-outline-info-text-color: var(--c-text-info-1);
|
|
623
638
|
--button-outline-info-content-color: var(--c-text-info-1);
|
|
624
639
|
--button-outline-info-loader-color: var(--c-neutral-1);
|
|
640
|
+
--button-outline-info-count-bg-color: var(--c-bg-info-dimm-a2);
|
|
625
641
|
--button-outline-info-hover-bg-color: var(--c-bg-info-dimm-a1);
|
|
626
642
|
--button-outline-info-active-bg-color: var(--c-bg-info-dimm-a2);
|
|
627
643
|
--button-outline-info-disabled-border-color: var(--c-blue-8);
|
|
@@ -632,6 +648,7 @@
|
|
|
632
648
|
--button-outline-success-text-color: var(--c-text-success-1);
|
|
633
649
|
--button-outline-success-content-color: var(--c-text-success-1);
|
|
634
650
|
--button-outline-success-loader-color: var(--c-neutral-1);
|
|
651
|
+
--button-outline-success-count-bg-color: var(--c-bg-success-dimm-a2);
|
|
635
652
|
--button-outline-success-hover-bg-color: var(--c-bg-success-dimm-a1);
|
|
636
653
|
--button-outline-success-active-bg-color: var(--c-bg-success-dimm-a2);
|
|
637
654
|
--button-outline-success-disabled-border-color: var(--c-green-8);
|
|
@@ -642,6 +659,7 @@
|
|
|
642
659
|
--button-outline-warning-text-color: var(--c-text-warning-1);
|
|
643
660
|
--button-outline-warning-content-color: var(--c-text-warning-1);
|
|
644
661
|
--button-outline-warning-loader-color: var(--c-neutral-1);
|
|
662
|
+
--button-outline-warning-count-bg-color: var(--c-bg-warning-dimm-a2);
|
|
645
663
|
--button-outline-warning-hover-bg-color: var(--c-bg-warning-dimm-a1);
|
|
646
664
|
--button-outline-warning-active-bg-color: var(--c-bg-warning-dimm-a2);
|
|
647
665
|
--button-outline-warning-disabled-border-color: var(--c-yellow-8);
|
|
@@ -652,6 +670,7 @@
|
|
|
652
670
|
--button-outline-danger-text-color: var(--c-text-danger-1);
|
|
653
671
|
--button-outline-danger-content-color: var(--c-text-danger-1);
|
|
654
672
|
--button-outline-danger-loader-color: var(--c-neutral-1);
|
|
673
|
+
--button-outline-danger-count-bg-color: var(--c-bg-danger-dimm-a2);
|
|
655
674
|
--button-outline-danger-hover-bg-color: var(--c-bg-danger-dimm-a1);
|
|
656
675
|
--button-outline-danger-active-bg-color: var(--c-bg-danger-dimm-a2);
|
|
657
676
|
--button-outline-danger-disabled-border-color: var(--c-red-8);
|
|
@@ -660,6 +679,7 @@
|
|
|
660
679
|
|
|
661
680
|
--button-text-default-text-color: var(--c-text-1);
|
|
662
681
|
--button-text-default-content-color: var(--c-text-1);
|
|
682
|
+
--button-text-default-count-bg-color: var(--c-bg-mute-1);
|
|
663
683
|
--button-text-default-hover-bg-color: var(--c-bg-mute-1);
|
|
664
684
|
--button-text-default-active-bg-color: var(--c-bg-mute-2);
|
|
665
685
|
--button-text-default-disabled-text-color: var(--c-text-3);
|
|
@@ -667,6 +687,7 @@
|
|
|
667
687
|
|
|
668
688
|
--button-text-mute-text-color: var(--c-text-2);
|
|
669
689
|
--button-text-mute-content-color: var(--c-text-2);
|
|
690
|
+
--button-text-mute-count-bg-color: var(--c-bg-mute-1);
|
|
670
691
|
--button-text-mute-hover-bg-color: var(--c-bg-mute-1);
|
|
671
692
|
--button-text-mute-active-bg-color: var(--c-bg-mute-2);
|
|
672
693
|
--button-text-mute-disabled-text-color: var(--c-text-3);
|
|
@@ -674,6 +695,7 @@
|
|
|
674
695
|
|
|
675
696
|
--button-text-neutral-text-color: var(--c-text-1);
|
|
676
697
|
--button-text-neutral-content-color: var(--c-text-1);
|
|
698
|
+
--button-text-neutral-count-bg-color: var(--c-bg-mute-1);
|
|
677
699
|
--button-text-neutral-hover-bg-color: var(--c-neutral-dimm-a1);
|
|
678
700
|
--button-text-neutral-active-bg-color: var(--c-neutral-dimm-a2);
|
|
679
701
|
--button-text-neutral-disabled-text-color: var(--c-text-3);
|
|
@@ -681,6 +703,7 @@
|
|
|
681
703
|
|
|
682
704
|
--button-text-white-text-color: var(--c-text-dark-1);
|
|
683
705
|
--button-text-white-content-color: var(--c-text-dark-1);
|
|
706
|
+
--button-text-white-count-bg-color: var(--c-bg-mute-1);
|
|
684
707
|
--button-text-white-hover-bg-color: var(--c-neutral-dark-dimm-a1);
|
|
685
708
|
--button-text-white-active-bg-color: var(--c-neutral-dark-dimm-a2);
|
|
686
709
|
--button-text-white-disabled-text-color: var(--c-text-dark-3);
|
|
@@ -688,6 +711,7 @@
|
|
|
688
711
|
|
|
689
712
|
--button-text-black-text-color: var(--c-text-light-1);
|
|
690
713
|
--button-text-black-content-color: var(--c-text-light-1);
|
|
714
|
+
--button-text-black-count-bg-color: var(--c-bg-mute-1);
|
|
691
715
|
--button-text-black-hover-bg-color: var(--c-neutral-light-dimm-a1);
|
|
692
716
|
--button-text-black-active-bg-color: var(--c-neutral-light-dimm-a2);
|
|
693
717
|
--button-text-black-disabled-text-color: var(--c-text-light-3);
|
|
@@ -695,6 +719,7 @@
|
|
|
695
719
|
|
|
696
720
|
--button-text-info-text-color: var(--c-text-info-1);
|
|
697
721
|
--button-text-info-content-color: var(--c-text-info-1);
|
|
722
|
+
--button-text-info-count-bg-color: var(--c-bg-info-dimm-a2);
|
|
698
723
|
--button-text-info-hover-bg-color: var(--c-bg-info-dimm-a1);
|
|
699
724
|
--button-text-info-active-bg-color: var(--c-bg-info-dimm-a2);
|
|
700
725
|
--button-text-info-disabled-text-color: var(--c-text-info-3);
|
|
@@ -702,6 +727,7 @@
|
|
|
702
727
|
|
|
703
728
|
--button-text-success-text-color: var(--c-text-success-1);
|
|
704
729
|
--button-text-success-content-color: var(--c-text-success-1);
|
|
730
|
+
--button-text-success-count-bg-color: var(--c-bg-success-dimm-a2);
|
|
705
731
|
--button-text-success-hover-bg-color: var(--c-bg-success-dimm-a1);
|
|
706
732
|
--button-text-success-active-bg-color: var(--c-bg-success-dimm-a2);
|
|
707
733
|
--button-text-success-disabled-text-color: var(--c-text-success-3);
|
|
@@ -709,6 +735,7 @@
|
|
|
709
735
|
|
|
710
736
|
--button-text-warning-text-color: var(--c-text-warning-1);
|
|
711
737
|
--button-text-warning-content-color: var(--c-text-warning-1);
|
|
738
|
+
--button-text-warning-count-bg-color: var(--c-bg-warning-dimm-a2);
|
|
712
739
|
--button-text-warning-hover-bg-color: var(--c-bg-warning-dimm-a1);
|
|
713
740
|
--button-text-warning-active-bg-color: var(--c-bg-warning-dimm-a2);
|
|
714
741
|
--button-text-warning-disabled-text-color: var(--c-text-warning-3);
|
|
@@ -716,6 +743,7 @@
|
|
|
716
743
|
|
|
717
744
|
--button-text-danger-text-color: var(--c-text-danger-1);
|
|
718
745
|
--button-text-danger-content-color: var(--c-text-danger-1);
|
|
746
|
+
--button-text-danger-count-bg-color: var(--c-bg-danger-dimm-a2);
|
|
719
747
|
--button-text-danger-hover-bg-color: var(--c-bg-danger-dimm-a1);
|
|
720
748
|
--button-text-danger-active-bg-color: var(--c-bg-danger-dimm-a2);
|
|
721
749
|
--button-text-danger-disabled-text-color: var(--c-text-danger-3);
|
package/package.json
CHANGED