@lensui/lens-table 0.1.4 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -121,10 +121,17 @@
121
121
  }
122
122
  .rvg-vertical-scrollbar {
123
123
  right: 2px;
124
+ left: auto;
124
125
  width: 9px;
126
+ max-width: 9px;
127
+ overflow: hidden;
125
128
  }
126
129
  .rvg-horizontal-scrollbar {
130
+ top: auto;
131
+ width: auto;
127
132
  height: 9px;
133
+ max-height: 9px;
134
+ overflow: hidden;
128
135
  }
129
136
  .rvg-vertical-scrollbar-thumb,
130
137
  .rvg-horizontal-scrollbar-thumb {
@@ -137,14 +144,22 @@
137
144
  .rvg-vertical-scrollbar-thumb {
138
145
  top: 0;
139
146
  right: 1px;
147
+ bottom: auto;
148
+ left: auto;
140
149
  width: 7px;
150
+ min-width: 0;
151
+ max-width: 7px;
141
152
  min-height: 28px;
142
153
  }
143
154
  .rvg-horizontal-scrollbar-thumb {
155
+ top: auto;
156
+ right: auto;
144
157
  bottom: 1px;
145
158
  left: 0;
146
- height: 7px;
147
159
  min-width: 36px;
160
+ min-height: 0;
161
+ height: 7px;
162
+ max-height: 7px;
148
163
  }
149
164
  .rvg-vertical-scrollbar:hover .rvg-vertical-scrollbar-thumb,
150
165
  .rvg-horizontal-scrollbar:hover .rvg-horizontal-scrollbar-thumb,
@@ -463,11 +478,280 @@
463
478
  }
464
479
  .rvg-selection-focus {
465
480
  position: absolute;
466
- z-index: 4;
481
+ z-index: 7;
467
482
  border: 2px solid var(--rvg-color-primary);
468
483
  box-sizing: border-box;
469
484
  pointer-events: none;
470
485
  }
486
+ .rvg-selection-edge-target {
487
+ position: absolute;
488
+ z-index: 6;
489
+ display: block;
490
+ min-width: 0;
491
+ min-height: 0;
492
+ margin: 0;
493
+ padding: 0;
494
+ overflow: visible;
495
+ border: 0;
496
+ border-radius: 0;
497
+ outline: 0;
498
+ appearance: none;
499
+ box-shadow: none;
500
+ box-sizing: border-box;
501
+ background: transparent;
502
+ color: transparent;
503
+ font: inherit;
504
+ line-height: 0;
505
+ cursor: pointer;
506
+ touch-action: manipulation;
507
+ -webkit-appearance: none;
508
+ }
509
+ .rvg-selection-edge-target::before,
510
+ .rvg-selection-edge-target::after {
511
+ position: absolute;
512
+ content: "";
513
+ pointer-events: none;
514
+ }
515
+ .rvg-selection-edge-target.is-shape-syncing::before,
516
+ .rvg-selection-edge-target.is-shape-syncing::after,
517
+ .rvg-selection-edge-target.is-shape-syncing .rvg-selection-edge-halo {
518
+ transition: none;
519
+ }
520
+ .rvg-selection-edge-target::before {
521
+ z-index: 1;
522
+ border-radius: 2px;
523
+ background-color: transparent;
524
+ background-image: linear-gradient(var(--rvg-color-primary), var(--rvg-color-primary));
525
+ background-repeat: no-repeat;
526
+ box-shadow: 0 0 0 rgba(22, 119, 255, 0);
527
+ transition:
528
+ top 160ms ease,
529
+ right 160ms ease,
530
+ bottom 160ms ease,
531
+ left 160ms ease,
532
+ width 140ms ease,
533
+ height 140ms ease,
534
+ background-size 140ms ease,
535
+ box-shadow 160ms ease;
536
+ }
537
+ .rvg-selection-edge-target::after {
538
+ inset: 2px;
539
+ border-radius: 4px;
540
+ opacity: 0;
541
+ background: rgba(22, 119, 255, 0.1);
542
+ transform: scale(.72);
543
+ transition: opacity 140ms ease, transform 160ms ease;
544
+ }
545
+ .rvg-selection-edge-target:not(.is-corner)::after {
546
+ display: none;
547
+ }
548
+ .rvg-selection-edge-halo {
549
+ position: absolute;
550
+ z-index: 0;
551
+ display: none;
552
+ opacity: 0;
553
+ pointer-events: none;
554
+ transition: opacity 160ms ease;
555
+ }
556
+ .rvg-selection-edge-halo svg {
557
+ display: block;
558
+ width: 100%;
559
+ height: 100%;
560
+ overflow: visible;
561
+ }
562
+ .rvg-selection-edge-halo path {
563
+ fill: none;
564
+ stroke: rgba(22, 119, 255, 0.12);
565
+ stroke-width: 11;
566
+ stroke-linecap: round;
567
+ stroke-linejoin: miter;
568
+ vector-effect: non-scaling-stroke;
569
+ }
570
+ .rvg-selection-edge-target.is-vertical::before {
571
+ top: 0;
572
+ bottom: 0;
573
+ left: 50%;
574
+ width: 2px;
575
+ background-position: center;
576
+ background-size: 2px 100%;
577
+ transform: translateX(-50%) scaleY(1);
578
+ }
579
+ .rvg-selection-edge-target.is-horizontal::before {
580
+ top: 50%;
581
+ right: 0;
582
+ left: 0;
583
+ height: 2px;
584
+ background-position: center;
585
+ background-size: 100% 2px;
586
+ transform: translateY(-50%) scaleX(1);
587
+ }
588
+ .rvg-selection-edge-target.is-vertical.is-viewport-left::before {
589
+ right: auto;
590
+ left: 6px;
591
+ transform: none;
592
+ }
593
+ .rvg-selection-edge-target.is-vertical.is-viewport-right::before {
594
+ right: 6px;
595
+ left: auto;
596
+ transform: none;
597
+ }
598
+ .rvg-selection-edge-target.is-horizontal.is-viewport-top::before {
599
+ top: 6px;
600
+ bottom: auto;
601
+ transform: none;
602
+ }
603
+ .rvg-selection-edge-target.is-horizontal.is-viewport-bottom::before {
604
+ top: auto;
605
+ bottom: 6px;
606
+ transform: none;
607
+ }
608
+ .rvg-selection-edge-target.is-corner {
609
+ --rvg-corner-hover-width-extension: 4px;
610
+ --rvg-corner-hover-height-extension: 4px;
611
+ }
612
+ .rvg-selection-edge-target.is-corner::before {
613
+ width: 2px;
614
+ height: var(--rvg-corner-height, 10px);
615
+ border-radius: 0;
616
+ opacity: 1;
617
+ background: var(--rvg-color-primary);
618
+ box-shadow: 0 0 0 rgba(22, 119, 255, 0);
619
+ transform: none;
620
+ transition: width 140ms ease, box-shadow 160ms ease;
621
+ }
622
+ .rvg-selection-edge-target.is-corner::after {
623
+ z-index: 1;
624
+ inset: auto;
625
+ width: var(--rvg-corner-width, 10px);
626
+ height: 2px;
627
+ border-radius: 0;
628
+ opacity: 1;
629
+ background: var(--rvg-color-primary);
630
+ box-shadow: 0 0 0 rgba(22, 119, 255, 0);
631
+ transform: none;
632
+ transition: height 140ms ease, box-shadow 160ms ease;
633
+ }
634
+ .rvg-selection-edge-target.is-corner.is-top-left::before,
635
+ .rvg-selection-edge-target.is-corner.is-top-left::after {
636
+ top: 6px;
637
+ left: 6px;
638
+ }
639
+ .rvg-selection-edge-target.is-corner.is-top-right::before,
640
+ .rvg-selection-edge-target.is-corner.is-top-right::after {
641
+ top: 6px;
642
+ right: 6px;
643
+ }
644
+ .rvg-selection-edge-target.is-corner.is-bottom-left::before,
645
+ .rvg-selection-edge-target.is-corner.is-bottom-left::after {
646
+ bottom: 6px;
647
+ left: 6px;
648
+ }
649
+ .rvg-selection-edge-target.is-corner.is-bottom-right::before,
650
+ .rvg-selection-edge-target.is-corner.is-bottom-right::after {
651
+ right: 6px;
652
+ bottom: 6px;
653
+ }
654
+ .rvg-selection-edge-target.is-corner:is(.is-top-left, .is-top-right)::before {
655
+ border-radius: 0 0 999px 999px;
656
+ }
657
+ .rvg-selection-edge-target.is-corner:is(.is-bottom-left, .is-bottom-right)::before {
658
+ border-radius: 999px 999px 0 0;
659
+ }
660
+ .rvg-selection-edge-target.is-corner:is(.is-top-left, .is-bottom-left)::after {
661
+ border-radius: 0 999px 999px 0;
662
+ }
663
+ .rvg-selection-edge-target.is-corner:is(.is-top-right, .is-bottom-right)::after {
664
+ border-radius: 999px 0 0 999px;
665
+ }
666
+ .rvg-selection-edge-target.is-corner .rvg-selection-edge-halo {
667
+ display: block;
668
+ width: max(0px, calc(var(--rvg-corner-width, 10px) + var(--rvg-corner-hover-width-extension) - 5px));
669
+ height: max(0px, calc(var(--rvg-corner-height, 10px) + var(--rvg-corner-hover-height-extension) - 5px));
670
+ transform-origin: center;
671
+ }
672
+ .rvg-selection-edge-target.is-corner.is-top-left .rvg-selection-edge-halo {
673
+ top: 8.5px;
674
+ left: 8.5px;
675
+ }
676
+ .rvg-selection-edge-target.is-corner.is-top-right .rvg-selection-edge-halo {
677
+ top: 8.5px;
678
+ right: 8.5px;
679
+ transform: scaleX(-1);
680
+ }
681
+ .rvg-selection-edge-target.is-corner.is-bottom-left .rvg-selection-edge-halo {
682
+ bottom: 8.5px;
683
+ left: 8.5px;
684
+ transform: scaleY(-1);
685
+ }
686
+ .rvg-selection-edge-target.is-corner.is-bottom-right .rvg-selection-edge-halo {
687
+ right: 8.5px;
688
+ bottom: 8.5px;
689
+ transform: scale(-1);
690
+ }
691
+ .rvg-selection-edge-target.is-corner:hover .rvg-selection-edge-halo,
692
+ .rvg-selection-edge-target.is-corner:focus-visible .rvg-selection-edge-halo {
693
+ opacity: 1;
694
+ }
695
+ .rvg-selection-edge-target.is-vertical:hover::before,
696
+ .rvg-selection-edge-target.is-vertical:focus-visible::before {
697
+ top: -4px;
698
+ bottom: -4px;
699
+ width: 5px;
700
+ background-size: 5px 100%;
701
+ box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12);
702
+ transform: translateX(-50%);
703
+ }
704
+ .rvg-selection-edge-target.is-horizontal:hover::before,
705
+ .rvg-selection-edge-target.is-horizontal:focus-visible::before {
706
+ right: -4px;
707
+ left: -4px;
708
+ height: 5px;
709
+ background-size: 100% 5px;
710
+ box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12);
711
+ transform: translateY(-50%);
712
+ }
713
+ .rvg-selection-edge-target.is-vertical.is-viewport-left:hover::before,
714
+ .rvg-selection-edge-target.is-vertical.is-viewport-left:focus-visible::before {
715
+ right: auto;
716
+ left: 6px;
717
+ transform: none;
718
+ }
719
+ .rvg-selection-edge-target.is-vertical.is-viewport-right:hover::before,
720
+ .rvg-selection-edge-target.is-vertical.is-viewport-right:focus-visible::before {
721
+ right: 6px;
722
+ left: auto;
723
+ transform: none;
724
+ }
725
+ .rvg-selection-edge-target.is-horizontal.is-viewport-top:hover::before,
726
+ .rvg-selection-edge-target.is-horizontal.is-viewport-top:focus-visible::before {
727
+ top: 6px;
728
+ bottom: auto;
729
+ transform: none;
730
+ }
731
+ .rvg-selection-edge-target.is-horizontal.is-viewport-bottom:hover::before,
732
+ .rvg-selection-edge-target.is-horizontal.is-viewport-bottom:focus-visible::before {
733
+ top: auto;
734
+ bottom: 6px;
735
+ transform: none;
736
+ }
737
+ .rvg-selection-edge-target.is-corner:hover::before,
738
+ .rvg-selection-edge-target.is-corner:focus-visible::before {
739
+ width: 5px;
740
+ height: calc(var(--rvg-corner-height, 10px) + var(--rvg-corner-hover-height-extension));
741
+ box-shadow: none;
742
+ transform: none;
743
+ }
744
+ .rvg-selection-edge-target.is-corner:hover::after,
745
+ .rvg-selection-edge-target.is-corner:focus-visible::after {
746
+ width: calc(var(--rvg-corner-width, 10px) + var(--rvg-corner-hover-width-extension));
747
+ height: 5px;
748
+ box-shadow: none;
749
+ transform: none;
750
+ }
751
+ .rvg-selection-edge-target:focus-visible {
752
+ outline: 2px solid rgba(22, 119, 255, 0.28);
753
+ outline-offset: -2px;
754
+ }
471
755
  .rvg-header-title {
472
756
  z-index: 1;
473
757
  color: var(--rvg-color-muted);
@@ -523,6 +807,20 @@
523
807
  overflow: hidden;
524
808
  pointer-events: none;
525
809
  }
810
+ .rvg-header-icons::after {
811
+ position: absolute;
812
+ z-index: 3;
813
+ top: 0;
814
+ right: 0;
815
+ bottom: 0;
816
+ width: 1px;
817
+ background: var(--rvg-color-grid);
818
+ content: "";
819
+ pointer-events: none;
820
+ }
821
+ .rvg-root.is-vertical-borderless .rvg-header-icons::after {
822
+ display: none;
823
+ }
526
824
  .rvg-header-scroll-clip {
527
825
  position: absolute;
528
826
  top: 0;
@@ -1269,6 +1567,7 @@
1269
1567
  position: absolute;
1270
1568
  z-index: 6;
1271
1569
  background: var(--rvg-color-bg);
1570
+ box-sizing: border-box;
1272
1571
  }
1273
1572
  .rvg-choice-editor {
1274
1573
  line-height: 1;
@@ -1282,6 +1581,7 @@
1282
1581
  gap: 3px;
1283
1582
  background: var(--rvg-color-bg);
1284
1583
  line-height: 1;
1584
+ box-sizing: border-box;
1285
1585
  }
1286
1586
  .rvg-time-field-group {
1287
1587
  display: contents;
@@ -1313,6 +1613,7 @@
1313
1613
  overflow: hidden;
1314
1614
  background: var(--rvg-color-bg);
1315
1615
  line-height: 1;
1616
+ box-sizing: border-box;
1316
1617
  }
1317
1618
  .rvg-native-editor.has-clear {
1318
1619
  padding-right: 32px;
@@ -1760,7 +2061,9 @@
1760
2061
  }
1761
2062
  }
1762
2063
  @media (prefers-reduced-motion: reduce) {
1763
- .rvg-choice-chevron {
2064
+ .rvg-choice-chevron,
2065
+ .rvg-selection-edge-target::before,
2066
+ .rvg-selection-edge-target::after {
1764
2067
  transition: none;
1765
2068
  }
1766
2069
  .rvg-choice-content[data-state] {
package/dist/index.d.cts CHANGED
@@ -36,6 +36,7 @@ interface TableLabels {
36
36
  sortDesc: string;
37
37
  sortBoth: string;
38
38
  dragColumn: string;
39
+ revealSelectedCell: string;
39
40
  previousYear: string;
40
41
  nextYear: string;
41
42
  previousMonth: string;
package/dist/index.d.ts CHANGED
@@ -36,6 +36,7 @@ interface TableLabels {
36
36
  sortDesc: string;
37
37
  sortBoth: string;
38
38
  dragColumn: string;
39
+ revealSelectedCell: string;
39
40
  previousYear: string;
40
41
  nextYear: string;
41
42
  previousMonth: string;