@visns-studio/visns-components 5.6.3 → 5.6.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.
|
@@ -145,7 +145,8 @@
|
|
|
145
145
|
}
|
|
146
146
|
|
|
147
147
|
.reportSection {
|
|
148
|
-
padding-bottom:
|
|
148
|
+
padding-bottom: 0;
|
|
149
|
+
margin-bottom: 16px;
|
|
149
150
|
}
|
|
150
151
|
|
|
151
152
|
.reportSection h3 {
|
|
@@ -160,11 +161,11 @@
|
|
|
160
161
|
display: flex;
|
|
161
162
|
justify-content: space-between;
|
|
162
163
|
align-items: center;
|
|
163
|
-
margin-bottom:
|
|
164
|
+
margin-bottom: 0;
|
|
164
165
|
padding: 8px 12px;
|
|
165
166
|
background-color: #f9fafb;
|
|
166
167
|
border: 1px solid var(--border-color, #e5e7eb);
|
|
167
|
-
border-radius:
|
|
168
|
+
border-radius: 0;
|
|
168
169
|
|
|
169
170
|
h3 {
|
|
170
171
|
margin: 0;
|
|
@@ -175,7 +176,11 @@
|
|
|
175
176
|
.sectionHeaderActions {
|
|
176
177
|
display: flex;
|
|
177
178
|
align-items: center;
|
|
178
|
-
gap:
|
|
179
|
+
gap: 12px;
|
|
180
|
+
|
|
181
|
+
.btn {
|
|
182
|
+
margin: 0;
|
|
183
|
+
}
|
|
179
184
|
}
|
|
180
185
|
|
|
181
186
|
.helpButton {
|
|
@@ -344,15 +349,26 @@
|
|
|
344
349
|
.joinTablesContainer {
|
|
345
350
|
background-color: transparent;
|
|
346
351
|
padding: 0;
|
|
347
|
-
margin-bottom:
|
|
352
|
+
margin-bottom: 0;
|
|
353
|
+
margin-top: 0;
|
|
354
|
+
|
|
355
|
+
// When inside a filterGroup, add a border
|
|
356
|
+
.filterGroup & {
|
|
357
|
+
border: 1px solid var(--border-color, #e5e7eb);
|
|
358
|
+
border-top: none;
|
|
359
|
+
border-radius: 0;
|
|
360
|
+
padding: 20px;
|
|
361
|
+
background-color: #f9fafb;
|
|
362
|
+
}
|
|
348
363
|
}
|
|
349
364
|
|
|
350
365
|
// Filter group styles
|
|
351
366
|
.filterGroup {
|
|
352
367
|
margin-bottom: 16px;
|
|
353
|
-
border:
|
|
354
|
-
border-radius:
|
|
368
|
+
border: none;
|
|
369
|
+
border-radius: 0;
|
|
355
370
|
overflow: hidden;
|
|
371
|
+
margin-top: 0;
|
|
356
372
|
}
|
|
357
373
|
|
|
358
374
|
.filterGroupHeader {
|
|
@@ -361,7 +377,8 @@
|
|
|
361
377
|
align-items: center;
|
|
362
378
|
padding: 12px 16px;
|
|
363
379
|
background-color: #f3f4f6;
|
|
364
|
-
border
|
|
380
|
+
border: 1px solid var(--border-color, #e5e7eb);
|
|
381
|
+
border-radius: 0;
|
|
365
382
|
}
|
|
366
383
|
|
|
367
384
|
.filterGroupTitle {
|
|
@@ -401,7 +418,7 @@
|
|
|
401
418
|
padding: 12px 16px;
|
|
402
419
|
background-color: #f9fafb;
|
|
403
420
|
border: 1px solid var(--border-color, #e5e7eb);
|
|
404
|
-
border-
|
|
421
|
+
border-top: none;
|
|
405
422
|
}
|
|
406
423
|
|
|
407
424
|
.mainFilterOperator {
|
|
@@ -518,20 +535,161 @@
|
|
|
518
535
|
font-style: italic;
|
|
519
536
|
font-size: 0.9em;
|
|
520
537
|
background-color: #f9fafb;
|
|
538
|
+
border: 1px solid var(--border-color, #e5e7eb);
|
|
539
|
+
border-top: none;
|
|
540
|
+
border-radius: 0;
|
|
521
541
|
}
|
|
522
542
|
|
|
523
543
|
.joinSection {
|
|
524
|
-
margin-top:
|
|
544
|
+
margin-top: 0;
|
|
525
545
|
padding: 16px;
|
|
526
546
|
border: 1px solid var(--border-color, #e5e7eb);
|
|
527
|
-
border-radius:
|
|
547
|
+
border-radius: 0;
|
|
528
548
|
background-color: white;
|
|
529
|
-
margin-bottom:
|
|
549
|
+
margin-bottom: 0;
|
|
530
550
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
531
551
|
|
|
532
552
|
&:first-child {
|
|
533
553
|
margin-top: 0;
|
|
534
554
|
}
|
|
555
|
+
|
|
556
|
+
// When inside a filterGroup, style for better visual distinction
|
|
557
|
+
.filterGroup .joinTablesContainer & {
|
|
558
|
+
border: 1px solid var(--border-color, #e5e7eb);
|
|
559
|
+
border-radius: 6px;
|
|
560
|
+
background-color: white;
|
|
561
|
+
margin: 0 0 16px 0;
|
|
562
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
563
|
+
position: relative;
|
|
564
|
+
|
|
565
|
+
&:last-child {
|
|
566
|
+
margin-bottom: 0;
|
|
567
|
+
}
|
|
568
|
+
|
|
569
|
+
// Add a left border with a distinct color for visual emphasis
|
|
570
|
+
border-left: 3px solid var(--primary-color, #2563eb);
|
|
571
|
+
|
|
572
|
+
// Add alternating background colors for even better distinction
|
|
573
|
+
&:nth-child(odd) {
|
|
574
|
+
background-color: white;
|
|
575
|
+
}
|
|
576
|
+
|
|
577
|
+
&:nth-child(even) {
|
|
578
|
+
background-color: #f9fafb;
|
|
579
|
+
}
|
|
580
|
+
|
|
581
|
+
// Add a numbered indicator for each filter
|
|
582
|
+
&::before {
|
|
583
|
+
content: attr(data-filter-index);
|
|
584
|
+
position: absolute;
|
|
585
|
+
top: -10px;
|
|
586
|
+
left: -10px;
|
|
587
|
+
width: 24px;
|
|
588
|
+
height: 24px;
|
|
589
|
+
background-color: var(--primary-color, #2563eb);
|
|
590
|
+
color: white;
|
|
591
|
+
border-radius: 50%;
|
|
592
|
+
display: flex;
|
|
593
|
+
align-items: center;
|
|
594
|
+
justify-content: center;
|
|
595
|
+
font-size: 0.8em;
|
|
596
|
+
font-weight: bold;
|
|
597
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
598
|
+
z-index: 1;
|
|
599
|
+
}
|
|
600
|
+
}
|
|
601
|
+
|
|
602
|
+
// Style for sort criteria
|
|
603
|
+
&[data-sort-index] {
|
|
604
|
+
border: 1px solid var(--border-color, #e5e7eb);
|
|
605
|
+
border-radius: 0;
|
|
606
|
+
background-color: white;
|
|
607
|
+
margin: 0;
|
|
608
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
609
|
+
position: relative;
|
|
610
|
+
|
|
611
|
+
&:last-child {
|
|
612
|
+
margin-bottom: 0;
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
// Add a left border with a distinct color for visual emphasis
|
|
616
|
+
border-left: 3px solid var(--primary-color, #2563eb);
|
|
617
|
+
|
|
618
|
+
// Add alternating background colors for even better distinction
|
|
619
|
+
&:nth-child(odd) {
|
|
620
|
+
background-color: white;
|
|
621
|
+
}
|
|
622
|
+
|
|
623
|
+
&:nth-child(even) {
|
|
624
|
+
background-color: #f9fafb;
|
|
625
|
+
}
|
|
626
|
+
|
|
627
|
+
// Add a numbered indicator for each sort criterion
|
|
628
|
+
&::before {
|
|
629
|
+
content: attr(data-sort-index);
|
|
630
|
+
position: absolute;
|
|
631
|
+
top: -10px;
|
|
632
|
+
left: -10px;
|
|
633
|
+
width: 24px;
|
|
634
|
+
height: 24px;
|
|
635
|
+
background-color: var(--primary-color, #2563eb);
|
|
636
|
+
color: white;
|
|
637
|
+
border-radius: 50%;
|
|
638
|
+
display: flex;
|
|
639
|
+
align-items: center;
|
|
640
|
+
justify-content: center;
|
|
641
|
+
font-size: 0.8em;
|
|
642
|
+
font-weight: bold;
|
|
643
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
644
|
+
z-index: 1;
|
|
645
|
+
}
|
|
646
|
+
}
|
|
647
|
+
|
|
648
|
+
// Style for join tables
|
|
649
|
+
&[data-join-index] {
|
|
650
|
+
border: 1px solid var(--border-color, #e5e7eb);
|
|
651
|
+
border-radius: 0;
|
|
652
|
+
background-color: white;
|
|
653
|
+
margin: 0;
|
|
654
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
655
|
+
position: relative;
|
|
656
|
+
|
|
657
|
+
&:last-child {
|
|
658
|
+
margin-bottom: 0;
|
|
659
|
+
}
|
|
660
|
+
|
|
661
|
+
// Add a left border with a distinct color for visual emphasis
|
|
662
|
+
border-left: 3px solid var(--primary-color, #2563eb);
|
|
663
|
+
|
|
664
|
+
// Add alternating background colors for even better distinction
|
|
665
|
+
&:nth-child(odd) {
|
|
666
|
+
background-color: white;
|
|
667
|
+
}
|
|
668
|
+
|
|
669
|
+
&:nth-child(even) {
|
|
670
|
+
background-color: #f9fafb;
|
|
671
|
+
}
|
|
672
|
+
|
|
673
|
+
// Add a numbered indicator for each join
|
|
674
|
+
&::before {
|
|
675
|
+
content: attr(data-join-index);
|
|
676
|
+
position: absolute;
|
|
677
|
+
top: -10px;
|
|
678
|
+
left: -10px;
|
|
679
|
+
width: 24px;
|
|
680
|
+
height: 24px;
|
|
681
|
+
background-color: var(--primary-color, #2563eb);
|
|
682
|
+
color: white;
|
|
683
|
+
border-radius: 50%;
|
|
684
|
+
display: flex;
|
|
685
|
+
align-items: center;
|
|
686
|
+
justify-content: center;
|
|
687
|
+
font-size: 0.8em;
|
|
688
|
+
font-weight: bold;
|
|
689
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
690
|
+
z-index: 1;
|
|
691
|
+
}
|
|
692
|
+
}
|
|
535
693
|
}
|
|
536
694
|
|
|
537
695
|
.joinHeader {
|
|
@@ -548,6 +706,75 @@
|
|
|
548
706
|
color: var(--heading-color, #1f2937);
|
|
549
707
|
font-weight: 600;
|
|
550
708
|
}
|
|
709
|
+
|
|
710
|
+
// When inside a filterGroup, style for better visual distinction
|
|
711
|
+
.filterGroup .joinTablesContainer .joinSection & {
|
|
712
|
+
background-color: #f3f4f6;
|
|
713
|
+
padding: 12px 16px;
|
|
714
|
+
margin: -16px -16px 12px -16px;
|
|
715
|
+
border-radius: 5px 5px 0 0;
|
|
716
|
+
border-bottom: 1px solid var(--border-color, #e5e7eb);
|
|
717
|
+
|
|
718
|
+
h4 {
|
|
719
|
+
color: var(--primary-color, #2563eb);
|
|
720
|
+
font-weight: 600;
|
|
721
|
+
display: flex;
|
|
722
|
+
align-items: center;
|
|
723
|
+
|
|
724
|
+
&::before {
|
|
725
|
+
content: 'Filter ' attr(data-filter-index);
|
|
726
|
+
font-weight: 700;
|
|
727
|
+
margin-right: 8px;
|
|
728
|
+
color: var(--primary-color, #2563eb);
|
|
729
|
+
}
|
|
730
|
+
}
|
|
731
|
+
}
|
|
732
|
+
|
|
733
|
+
// Style for sort criteria
|
|
734
|
+
.joinTablesContainer .joinSection[data-sort-index] & {
|
|
735
|
+
background-color: #f3f4f6;
|
|
736
|
+
padding: 12px 16px;
|
|
737
|
+
margin: -16px -16px 12px -16px;
|
|
738
|
+
border-radius: 5px 5px 0 0;
|
|
739
|
+
border-bottom: 1px solid var(--border-color, #e5e7eb);
|
|
740
|
+
|
|
741
|
+
h4 {
|
|
742
|
+
color: var(--primary-color, #2563eb);
|
|
743
|
+
font-weight: 600;
|
|
744
|
+
display: flex;
|
|
745
|
+
align-items: center;
|
|
746
|
+
|
|
747
|
+
&::before {
|
|
748
|
+
content: 'Sort ' attr(data-sort-index);
|
|
749
|
+
font-weight: 700;
|
|
750
|
+
margin-right: 8px;
|
|
751
|
+
color: var(--primary-color, #2563eb);
|
|
752
|
+
}
|
|
753
|
+
}
|
|
754
|
+
}
|
|
755
|
+
|
|
756
|
+
// Style for join tables
|
|
757
|
+
.joinTablesContainer .joinSection[data-join-index] & {
|
|
758
|
+
background-color: #f3f4f6;
|
|
759
|
+
padding: 12px 16px;
|
|
760
|
+
margin: -16px -16px 12px -16px;
|
|
761
|
+
border-radius: 5px 5px 0 0;
|
|
762
|
+
border-bottom: 1px solid var(--border-color, #e5e7eb);
|
|
763
|
+
|
|
764
|
+
h4 {
|
|
765
|
+
color: var(--primary-color, #2563eb);
|
|
766
|
+
font-weight: 600;
|
|
767
|
+
display: flex;
|
|
768
|
+
align-items: center;
|
|
769
|
+
|
|
770
|
+
&::before {
|
|
771
|
+
content: 'Join ' attr(data-join-index);
|
|
772
|
+
font-weight: 700;
|
|
773
|
+
margin-right: 8px;
|
|
774
|
+
color: var(--primary-color, #2563eb);
|
|
775
|
+
}
|
|
776
|
+
}
|
|
777
|
+
}
|
|
551
778
|
}
|
|
552
779
|
|
|
553
780
|
.removeJoinBtn {
|
|
@@ -589,6 +816,27 @@
|
|
|
589
816
|
color: var(--paragraph-color, #4b5563);
|
|
590
817
|
font-weight: 500;
|
|
591
818
|
}
|
|
819
|
+
|
|
820
|
+
// When inside a filter, add more spacing and styling
|
|
821
|
+
.filterGroup .joinTablesContainer .joinSection & {
|
|
822
|
+
margin-bottom: 16px;
|
|
823
|
+
|
|
824
|
+
label {
|
|
825
|
+
font-weight: 600;
|
|
826
|
+
color: var(--heading-color, #1f2937);
|
|
827
|
+
margin-bottom: 6px;
|
|
828
|
+
}
|
|
829
|
+
|
|
830
|
+
select,
|
|
831
|
+
input {
|
|
832
|
+
border-color: #d1d5db;
|
|
833
|
+
|
|
834
|
+
&:focus {
|
|
835
|
+
border-color: var(--primary-color, #2563eb);
|
|
836
|
+
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
|
|
837
|
+
}
|
|
838
|
+
}
|
|
839
|
+
}
|
|
592
840
|
}
|
|
593
841
|
|
|
594
842
|
.addJoinButtonContainer {
|
|
@@ -911,6 +1159,55 @@
|
|
|
911
1159
|
text-overflow: ellipsis;
|
|
912
1160
|
white-space: nowrap;
|
|
913
1161
|
}
|
|
1162
|
+
|
|
1163
|
+
.inlineEditContainer {
|
|
1164
|
+
display: flex;
|
|
1165
|
+
flex: 1;
|
|
1166
|
+
align-items: center;
|
|
1167
|
+
gap: 4px;
|
|
1168
|
+
width: 100%;
|
|
1169
|
+
}
|
|
1170
|
+
|
|
1171
|
+
.columnNameInput {
|
|
1172
|
+
flex: 1;
|
|
1173
|
+
padding: 4px 8px;
|
|
1174
|
+
border: 1px solid var(--primary-color, #2563eb);
|
|
1175
|
+
border-radius: 4px;
|
|
1176
|
+
font-size: 0.9em;
|
|
1177
|
+
color: var(--paragraph-color, #4b5563);
|
|
1178
|
+
min-width: 50px;
|
|
1179
|
+
max-width: 200px;
|
|
1180
|
+
}
|
|
1181
|
+
|
|
1182
|
+
.saveBtn,
|
|
1183
|
+
.cancelBtn {
|
|
1184
|
+
background: none;
|
|
1185
|
+
border: none;
|
|
1186
|
+
cursor: pointer;
|
|
1187
|
+
padding: 2px 4px;
|
|
1188
|
+
border-radius: 4px;
|
|
1189
|
+
display: flex;
|
|
1190
|
+
align-items: center;
|
|
1191
|
+
justify-content: center;
|
|
1192
|
+
transition: all 0.2s ease;
|
|
1193
|
+
font-size: 0.9em;
|
|
1194
|
+
min-width: 20px;
|
|
1195
|
+
min-height: 20px;
|
|
1196
|
+
}
|
|
1197
|
+
|
|
1198
|
+
.saveBtn {
|
|
1199
|
+
color: var(--success-color, #10b981);
|
|
1200
|
+
&:hover {
|
|
1201
|
+
background: rgba(16, 185, 129, 0.1);
|
|
1202
|
+
}
|
|
1203
|
+
}
|
|
1204
|
+
|
|
1205
|
+
.cancelBtn {
|
|
1206
|
+
color: var(--danger-color, #ef4444);
|
|
1207
|
+
&:hover {
|
|
1208
|
+
background: rgba(239, 68, 68, 0.1);
|
|
1209
|
+
}
|
|
1210
|
+
}
|
|
914
1211
|
}
|
|
915
1212
|
|
|
916
1213
|
.selectedColumnItem:hover {
|
|
@@ -949,6 +1246,25 @@
|
|
|
949
1246
|
flex-shrink: 0;
|
|
950
1247
|
}
|
|
951
1248
|
|
|
1249
|
+
.editBtn {
|
|
1250
|
+
background: none;
|
|
1251
|
+
border: none;
|
|
1252
|
+
color: var(--primary-color, #2563eb);
|
|
1253
|
+
cursor: pointer;
|
|
1254
|
+
font-size: 1em;
|
|
1255
|
+
display: flex;
|
|
1256
|
+
align-items: center;
|
|
1257
|
+
justify-content: center;
|
|
1258
|
+
padding: 4px;
|
|
1259
|
+
border-radius: 4px;
|
|
1260
|
+
min-width: 24px;
|
|
1261
|
+
min-height: 24px;
|
|
1262
|
+
}
|
|
1263
|
+
|
|
1264
|
+
.editBtn:hover {
|
|
1265
|
+
background: rgba(var(--primary-rgb, 37, 99, 235), 0.1);
|
|
1266
|
+
}
|
|
1267
|
+
|
|
952
1268
|
.removeBtn {
|
|
953
1269
|
background: none;
|
|
954
1270
|
border: none;
|
|
@@ -1027,13 +1343,32 @@
|
|
|
1027
1343
|
display: flex;
|
|
1028
1344
|
justify-content: space-between;
|
|
1029
1345
|
align-items: center;
|
|
1030
|
-
margin-bottom:
|
|
1346
|
+
margin-bottom: 0;
|
|
1031
1347
|
}
|
|
1032
1348
|
|
|
1033
1349
|
.sectionHeader h3 {
|
|
1034
1350
|
margin: 0;
|
|
1035
1351
|
}
|
|
1036
1352
|
|
|
1353
|
+
.columnSectionHeader {
|
|
1354
|
+
display: flex;
|
|
1355
|
+
align-items: center;
|
|
1356
|
+
margin-bottom: 10px;
|
|
1357
|
+
flex-wrap: wrap;
|
|
1358
|
+
gap: 8px;
|
|
1359
|
+
}
|
|
1360
|
+
|
|
1361
|
+
.columnSectionHeader h3 {
|
|
1362
|
+
margin: 0;
|
|
1363
|
+
margin-right: 8px;
|
|
1364
|
+
}
|
|
1365
|
+
|
|
1366
|
+
.instructionText {
|
|
1367
|
+
font-size: 0.8em;
|
|
1368
|
+
color: var(--muted-color, #6b7280);
|
|
1369
|
+
font-style: italic;
|
|
1370
|
+
}
|
|
1371
|
+
|
|
1037
1372
|
.btnSmall {
|
|
1038
1373
|
padding: 4px 8px;
|
|
1039
1374
|
font-size: 0.8em;
|