@policystudio/policy-studio-ui-vue 1.1.65 → 1.1.66
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/css/psui_styles.css
CHANGED
|
@@ -2374,7 +2374,6 @@ video {
|
|
|
2374
2374
|
.psui-el-table-results.layout-flexible thead {
|
|
2375
2375
|
background-color: #ffffff ;
|
|
2376
2376
|
align-items: flex-start;
|
|
2377
|
-
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 2px 5px rgba(0, 0, 0, 0.08);
|
|
2378
2377
|
position: sticky;
|
|
2379
2378
|
top: 0;
|
|
2380
2379
|
z-index: 15;
|
|
@@ -2399,7 +2398,7 @@ video {
|
|
|
2399
2398
|
}
|
|
2400
2399
|
|
|
2401
2400
|
.psui-el-table-results.layout-flexible thead tr th {
|
|
2402
|
-
padding-left:
|
|
2401
|
+
padding-left: 1rem;
|
|
2403
2402
|
--text-opacity: 1;
|
|
2404
2403
|
color: #798490;
|
|
2405
2404
|
color: rgba(121, 132, 144, var(--text-opacity));
|
|
@@ -2419,7 +2418,7 @@ video {
|
|
|
2419
2418
|
|
|
2420
2419
|
.psui-el-table-results.layout-flexible thead tr th:first-child {
|
|
2421
2420
|
padding-left: 1rem;
|
|
2422
|
-
padding-right:
|
|
2421
|
+
padding-right: 1rem;
|
|
2423
2422
|
text-align: left;
|
|
2424
2423
|
background-color: #ffffff ;
|
|
2425
2424
|
position: sticky;
|
|
@@ -2431,11 +2430,22 @@ video {
|
|
|
2431
2430
|
align-items: flex-start;
|
|
2432
2431
|
}
|
|
2433
2432
|
|
|
2433
|
+
.psui-el-table-results.layout-flexible thead tr th:first-child.pseudo-line::after {
|
|
2434
|
+
content: '';
|
|
2435
|
+
position: absolute;
|
|
2436
|
+
top: 10px;
|
|
2437
|
+
right: 0;
|
|
2438
|
+
width: 1px;
|
|
2439
|
+
height: calc(100%);
|
|
2440
|
+
background-color: #D6DDE5;
|
|
2441
|
+
}
|
|
2442
|
+
|
|
2434
2443
|
.psui-el-table-results.layout-flexible thead tr:first-of-type th {
|
|
2435
2444
|
text-align: left;
|
|
2436
2445
|
padding-top: 0;
|
|
2437
2446
|
padding-bottom: 0;
|
|
2438
|
-
min-width:
|
|
2447
|
+
min-width: 497px;
|
|
2448
|
+
position: sticky;
|
|
2439
2449
|
}
|
|
2440
2450
|
|
|
2441
2451
|
.psui-el-table-results.layout-flexible thead tr:first-of-type th > div {
|
|
@@ -2469,14 +2479,14 @@ video {
|
|
|
2469
2479
|
|
|
2470
2480
|
.psui-el-table-results.layout-flexible thead tr:not(:first-of-type) th:first-child {
|
|
2471
2481
|
text-align: left;
|
|
2472
|
-
min-width:
|
|
2482
|
+
min-width: 357px;
|
|
2473
2483
|
}
|
|
2474
2484
|
|
|
2475
2485
|
.psui-el-table-results.layout-flexible thead tr:not(:first-of-type) th:nth-child(2) {
|
|
2476
2486
|
position: sticky;
|
|
2477
2487
|
z-index: 10;
|
|
2478
2488
|
background-color: #ffffff ;
|
|
2479
|
-
left:
|
|
2489
|
+
left:357px;
|
|
2480
2490
|
min-width: 140px;
|
|
2481
2491
|
}
|
|
2482
2492
|
|
|
@@ -2484,8 +2494,7 @@ video {
|
|
|
2484
2494
|
position: sticky;
|
|
2485
2495
|
z-index: 10;
|
|
2486
2496
|
background-color: #ffffff ;
|
|
2487
|
-
left:
|
|
2488
|
-
box-shadow: inset -1px 0px 0px #EBEEF0;
|
|
2497
|
+
left: 497px;
|
|
2489
2498
|
}
|
|
2490
2499
|
|
|
2491
2500
|
.psui-el-table-results.layout-flexible tbody tr {
|
|
@@ -2571,22 +2580,22 @@ video {
|
|
|
2571
2580
|
left: 0;
|
|
2572
2581
|
padding-top: 8px;
|
|
2573
2582
|
padding-bottom: 8px;
|
|
2583
|
+
min-width: 357px;
|
|
2574
2584
|
}
|
|
2575
2585
|
|
|
2576
2586
|
.psui-el-table-results.layout-flexible tbody tr td:nth-child(2) {
|
|
2577
2587
|
position: sticky;
|
|
2578
2588
|
z-index: 10;
|
|
2579
2589
|
min-width: 140px;
|
|
2580
|
-
left:
|
|
2590
|
+
left: 357px;
|
|
2581
2591
|
}
|
|
2582
2592
|
|
|
2583
2593
|
.psui-el-table-results.layout-flexible tbody tr td:nth-child(3) {
|
|
2584
2594
|
position: sticky;
|
|
2585
2595
|
z-index: 10;
|
|
2586
2596
|
min-width: 140px;
|
|
2587
|
-
left:
|
|
2597
|
+
left: 497px;
|
|
2588
2598
|
padding-right: 22px;
|
|
2589
|
-
box-shadow: inset -1px 0px 0px #EBEEF0;
|
|
2590
2599
|
}
|
|
2591
2600
|
|
|
2592
2601
|
.psui-el-table-results.layout-flexible tbody tr td .psui-el-tooltip-dialog {
|
|
@@ -2666,6 +2675,38 @@ video {
|
|
|
2666
2675
|
height: 10px;
|
|
2667
2676
|
}
|
|
2668
2677
|
|
|
2678
|
+
.psui-el-table-results.layout-flexible tbody tr.is-first.removed-class.closed td:first-child {
|
|
2679
|
+
position: sticky;
|
|
2680
|
+
}
|
|
2681
|
+
|
|
2682
|
+
.psui-el-table-results.layout-flexible tbody tr.is-first.removed-class.closed td:first-child:before,
|
|
2683
|
+
.psui-el-table-results.layout-flexible tbody tr.is-first.removed-class.closed td:first-child:after {
|
|
2684
|
+
content: '';
|
|
2685
|
+
position: absolute;
|
|
2686
|
+
top: 0;
|
|
2687
|
+
}
|
|
2688
|
+
|
|
2689
|
+
.psui-el-table-results.layout-flexible tbody tr.is-first.removed-class.closed td:first-child:before {
|
|
2690
|
+
background-color: #ffffff ;
|
|
2691
|
+
left: 0;
|
|
2692
|
+
width: 16px;
|
|
2693
|
+
height: calc(100% + 1px);
|
|
2694
|
+
}
|
|
2695
|
+
|
|
2696
|
+
.psui-el-table-results.layout-flexible tbody tr.is-first.removed-class.closed td:first-child:after {
|
|
2697
|
+
--bg-opacity: 1;
|
|
2698
|
+
background-color: #F3F6F9;
|
|
2699
|
+
background-color: rgba(243, 246, 249, var(--bg-opacity));
|
|
2700
|
+
border-top-left-radius: 9999px;
|
|
2701
|
+
border-bottom-left-radius: 9999px;
|
|
2702
|
+
box-shadow: -8px 0px 0px 4px #ffffff;
|
|
2703
|
+
z-index: 30;
|
|
2704
|
+
top: 0;
|
|
2705
|
+
left: 16px;
|
|
2706
|
+
width: 10px;
|
|
2707
|
+
height: calc(100%);
|
|
2708
|
+
}
|
|
2709
|
+
|
|
2669
2710
|
.psui-el-table-results.layout-flexible tbody tr:not(.is-first):not(.removed-class) td:first-child {
|
|
2670
2711
|
position: sticky;
|
|
2671
2712
|
}
|
package/package.json
CHANGED
|
@@ -348,7 +348,7 @@
|
|
|
348
348
|
}
|
|
349
349
|
|
|
350
350
|
thead {
|
|
351
|
-
@apply psui-bg-white psui-items-start psui-
|
|
351
|
+
@apply psui-bg-white psui-items-start psui-sticky psui-top-0 psui-z-15;
|
|
352
352
|
|
|
353
353
|
&:after {
|
|
354
354
|
content: '';
|
|
@@ -362,7 +362,7 @@
|
|
|
362
362
|
}
|
|
363
363
|
|
|
364
364
|
th {
|
|
365
|
-
@apply psui-pl-
|
|
365
|
+
@apply psui-pl-4 psui-text-gray-50 psui-text-right psui-w-auto psui-align-top;
|
|
366
366
|
padding-top: 0.438rem;
|
|
367
367
|
padding-bottom: 0.625rem;
|
|
368
368
|
|
|
@@ -372,11 +372,24 @@
|
|
|
372
372
|
}
|
|
373
373
|
|
|
374
374
|
&:first-child {
|
|
375
|
-
@apply psui-pl-4 psui-pr-
|
|
375
|
+
@apply psui-pl-4 psui-pr-4 psui-text-left psui-bg-white psui-sticky psui-z-10 psui-left-0;
|
|
376
|
+
|
|
376
377
|
|
|
377
378
|
> div {
|
|
378
379
|
@apply psui-items-start;
|
|
379
380
|
}
|
|
381
|
+
|
|
382
|
+
&.pseudo-line {
|
|
383
|
+
&::after {
|
|
384
|
+
content: '';
|
|
385
|
+
position: absolute;
|
|
386
|
+
top: 10px;
|
|
387
|
+
right: 0;
|
|
388
|
+
width: 1px;
|
|
389
|
+
height: calc(100%);
|
|
390
|
+
background-color: #D6DDE5;
|
|
391
|
+
}
|
|
392
|
+
}
|
|
380
393
|
}
|
|
381
394
|
|
|
382
395
|
}
|
|
@@ -386,15 +399,14 @@
|
|
|
386
399
|
@apply psui-text-left;
|
|
387
400
|
padding-top: 0;
|
|
388
401
|
padding-bottom: 0;
|
|
389
|
-
min-width:
|
|
402
|
+
min-width: 497px;
|
|
403
|
+
position: sticky;
|
|
390
404
|
|
|
391
405
|
> div {
|
|
392
406
|
@apply psui-flex psui-flex-row psui-border-b psui-border-gray-30;
|
|
393
407
|
padding-top: 0.5rem;
|
|
394
408
|
padding-bottom: 0.625rem;
|
|
395
409
|
}
|
|
396
|
-
|
|
397
|
-
|
|
398
410
|
}
|
|
399
411
|
|
|
400
412
|
p {
|
|
@@ -415,19 +427,18 @@
|
|
|
415
427
|
|
|
416
428
|
&:first-child {
|
|
417
429
|
@apply psui-text-left;
|
|
418
|
-
min-width:
|
|
430
|
+
min-width: 357px;
|
|
419
431
|
}
|
|
420
432
|
|
|
421
433
|
&:nth-child(2) {
|
|
422
434
|
@apply psui-sticky psui-z-10 psui-bg-white;
|
|
423
|
-
left:
|
|
435
|
+
left:357px;
|
|
424
436
|
min-width: 140px;
|
|
425
437
|
}
|
|
426
438
|
|
|
427
439
|
&:nth-child(3) {
|
|
428
440
|
@apply psui-sticky psui-z-10 psui-bg-white;
|
|
429
|
-
left:
|
|
430
|
-
box-shadow: inset -1px 0px 0px #EBEEF0;
|
|
441
|
+
left: 497px;
|
|
431
442
|
}
|
|
432
443
|
}
|
|
433
444
|
}
|
|
@@ -492,20 +503,20 @@
|
|
|
492
503
|
@apply psui-pl-2 psui-pr-8 psui-text-left psui-block psui-sticky psui-z-10 psui-left-0;
|
|
493
504
|
padding-top: 8px;
|
|
494
505
|
padding-bottom: 8px;
|
|
506
|
+
min-width: 357px;
|
|
495
507
|
}
|
|
496
508
|
|
|
497
509
|
&:nth-child(2) {
|
|
498
510
|
@apply psui-sticky psui-z-10;
|
|
499
511
|
min-width: 140px;
|
|
500
|
-
left:
|
|
512
|
+
left: 357px;
|
|
501
513
|
}
|
|
502
514
|
|
|
503
515
|
&:nth-child(3) {
|
|
504
516
|
@apply psui-sticky psui-z-10;
|
|
505
517
|
min-width: 140px;
|
|
506
|
-
left:
|
|
518
|
+
left: 497px;
|
|
507
519
|
padding-right: 22px;
|
|
508
|
-
box-shadow: inset -1px 0px 0px #EBEEF0;
|
|
509
520
|
}
|
|
510
521
|
|
|
511
522
|
.psui-el-tooltip-dialog {
|
|
@@ -567,8 +578,37 @@
|
|
|
567
578
|
height: 10px;
|
|
568
579
|
}
|
|
569
580
|
}
|
|
570
|
-
|
|
571
|
-
|
|
581
|
+
}
|
|
582
|
+
|
|
583
|
+
&.closed {
|
|
584
|
+
td {
|
|
585
|
+
&:first-child {
|
|
586
|
+
@apply psui-sticky;
|
|
587
|
+
|
|
588
|
+
&:before,
|
|
589
|
+
&:after {
|
|
590
|
+
content: '';
|
|
591
|
+
@apply psui-absolute psui-top-0;
|
|
592
|
+
}
|
|
593
|
+
|
|
594
|
+
&:before {
|
|
595
|
+
@apply psui-bg-white psui-left-0;
|
|
596
|
+
width: 16px;
|
|
597
|
+
height: calc(100% + 1px);
|
|
598
|
+
}
|
|
599
|
+
|
|
600
|
+
&:after {
|
|
601
|
+
@apply psui-bg-gray-10 psui-rounded-tl-full psui-rounded-bl-full;
|
|
602
|
+
box-shadow: -8px 0px 0px 4px #ffffff;
|
|
603
|
+
z-index: 30;
|
|
604
|
+
top: 0;
|
|
605
|
+
left: 16px;
|
|
606
|
+
width: 10px;
|
|
607
|
+
height: calc(100%);
|
|
608
|
+
}
|
|
609
|
+
}
|
|
610
|
+
}
|
|
611
|
+
}
|
|
572
612
|
}
|
|
573
613
|
|
|
574
614
|
}
|
|
@@ -655,9 +655,38 @@ export default {
|
|
|
655
655
|
const max = Math.max(...this.getRows.map(item => item.data[key]))
|
|
656
656
|
return (value * 100) / max
|
|
657
657
|
},
|
|
658
|
+
setVerticalStyleWhenScroolingForFlexibleLayout(tableWrapper){
|
|
659
|
+
if(tableWrapper.scrollTop > 0 && tableWrapper.classList.contains('table-flexible')) {
|
|
660
|
+
tableWrapper.getElementsByTagName('thead')[0].style.boxShadow = '0px 0px 8px rgba(0, 0, 0, 0.04), 0px 2px 5px rgba(0, 0, 0, 0.08)'
|
|
661
|
+
} else if(tableWrapper.classList.contains('table-flexible')) {
|
|
662
|
+
tableWrapper.getElementsByTagName('thead')[0].style.boxShadow = '0 0 0 rgba(0, 0, 0, 0)'
|
|
663
|
+
}
|
|
664
|
+
},
|
|
665
|
+
setHorizontalStyleWhenScrollingForFlexibleLayout(tableWrapper){
|
|
666
|
+
const firstHeaderElement = tableWrapper.querySelector('thead > tr:first-child > th:first-child')
|
|
667
|
+
const secondHeaderElment = tableWrapper.querySelector('thead > tr:not(:first-of-type) > th:nth-child(3)')
|
|
668
|
+
const getAllOtherBodyElements = tableWrapper.querySelectorAll( 'tbody > tr > td:nth-child(3)')
|
|
658
669
|
|
|
670
|
+
if (tableWrapper.scrollLeft > 0 && tableWrapper.classList.contains('table-flexible')) {
|
|
671
|
+
firstHeaderElement.classList.add('pseudo-line')
|
|
672
|
+
secondHeaderElment.style.boxShadow = 'inset -1px 0px 0px #D6DDE5'
|
|
673
|
+
getAllOtherBodyElements.forEach(element => {
|
|
674
|
+
element.style.boxShadow = 'inset -1px 0px 0px #D6DDE5'
|
|
675
|
+
})
|
|
676
|
+
} else if(tableWrapper.classList.contains('table-flexible')) {
|
|
677
|
+
firstHeaderElement.classList.remove('pseudo-line')
|
|
678
|
+
secondHeaderElment.style.boxShadow = '0 0 0 rgba(0, 0, 0, 0)'
|
|
679
|
+
getAllOtherBodyElements.forEach(element => {
|
|
680
|
+
element.style.boxShadow = '0 0 0 rgba(0, 0, 0, 0)'
|
|
681
|
+
})
|
|
682
|
+
}
|
|
683
|
+
},
|
|
659
684
|
handleTableScroll() {
|
|
660
685
|
const tableWrapper = this.$refs.tableWrapper
|
|
686
|
+
|
|
687
|
+
this.setVerticalStyleWhenScroolingForFlexibleLayout(tableWrapper)
|
|
688
|
+
this.setHorizontalStyleWhenScrollingForFlexibleLayout(tableWrapper)
|
|
689
|
+
|
|
661
690
|
if (tableWrapper.scrollLeft > 0) {
|
|
662
691
|
this.isSticky = true
|
|
663
692
|
} else {
|