@policystudio/policy-studio-ui-vue 1.1.65 → 1.1.67
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: 100px;
|
|
2448
|
+
position: sticky;
|
|
2439
2449
|
}
|
|
2440
2450
|
|
|
2441
2451
|
.psui-el-table-results.layout-flexible thead tr:first-of-type th > div {
|
|
@@ -2449,6 +2459,17 @@ video {
|
|
|
2449
2459
|
padding-bottom: 0.625rem;
|
|
2450
2460
|
}
|
|
2451
2461
|
|
|
2462
|
+
.psui-el-table-results.layout-flexible thead tr:first-of-type th > div > .title {
|
|
2463
|
+
font-size: 12px;
|
|
2464
|
+
line-height: 130%;
|
|
2465
|
+
letter-spacing: 0.6px;
|
|
2466
|
+
--text-opacity: 1;
|
|
2467
|
+
color: #515E6A;
|
|
2468
|
+
color: rgba(81, 94, 106, var(--text-opacity));
|
|
2469
|
+
font-weight: 700;
|
|
2470
|
+
text-transform: uppercase;
|
|
2471
|
+
}
|
|
2472
|
+
|
|
2452
2473
|
.psui-el-table-results.layout-flexible thead tr:first-of-type p {
|
|
2453
2474
|
font-size: 16px;
|
|
2454
2475
|
line-height: 130%;
|
|
@@ -2469,14 +2490,14 @@ video {
|
|
|
2469
2490
|
|
|
2470
2491
|
.psui-el-table-results.layout-flexible thead tr:not(:first-of-type) th:first-child {
|
|
2471
2492
|
text-align: left;
|
|
2472
|
-
min-width:
|
|
2493
|
+
min-width: 357px;
|
|
2473
2494
|
}
|
|
2474
2495
|
|
|
2475
2496
|
.psui-el-table-results.layout-flexible thead tr:not(:first-of-type) th:nth-child(2) {
|
|
2476
2497
|
position: sticky;
|
|
2477
2498
|
z-index: 10;
|
|
2478
2499
|
background-color: #ffffff ;
|
|
2479
|
-
left:
|
|
2500
|
+
left:357px;
|
|
2480
2501
|
min-width: 140px;
|
|
2481
2502
|
}
|
|
2482
2503
|
|
|
@@ -2484,8 +2505,7 @@ video {
|
|
|
2484
2505
|
position: sticky;
|
|
2485
2506
|
z-index: 10;
|
|
2486
2507
|
background-color: #ffffff ;
|
|
2487
|
-
left:
|
|
2488
|
-
box-shadow: inset -1px 0px 0px #EBEEF0;
|
|
2508
|
+
left: 497px;
|
|
2489
2509
|
}
|
|
2490
2510
|
|
|
2491
2511
|
.psui-el-table-results.layout-flexible tbody tr {
|
|
@@ -2571,24 +2591,32 @@ video {
|
|
|
2571
2591
|
left: 0;
|
|
2572
2592
|
padding-top: 8px;
|
|
2573
2593
|
padding-bottom: 8px;
|
|
2594
|
+
min-width: 357px;
|
|
2574
2595
|
}
|
|
2575
2596
|
|
|
2576
2597
|
.psui-el-table-results.layout-flexible tbody tr td:nth-child(2) {
|
|
2577
2598
|
position: sticky;
|
|
2578
2599
|
z-index: 10;
|
|
2579
2600
|
min-width: 140px;
|
|
2580
|
-
left:
|
|
2601
|
+
left: 357px;
|
|
2581
2602
|
}
|
|
2582
2603
|
|
|
2604
|
+
.psui-el-table-results.layout-flexible tbody tr td:nth-child(2) > div {
|
|
2605
|
+
justify-content: center;
|
|
2606
|
+
}
|
|
2607
|
+
|
|
2583
2608
|
.psui-el-table-results.layout-flexible tbody tr td:nth-child(3) {
|
|
2584
2609
|
position: sticky;
|
|
2585
2610
|
z-index: 10;
|
|
2586
2611
|
min-width: 140px;
|
|
2587
|
-
left:
|
|
2612
|
+
left: 497px;
|
|
2588
2613
|
padding-right: 22px;
|
|
2589
|
-
box-shadow: inset -1px 0px 0px #EBEEF0;
|
|
2590
2614
|
}
|
|
2591
2615
|
|
|
2616
|
+
.psui-el-table-results.layout-flexible tbody tr td:nth-child(3) > div {
|
|
2617
|
+
justify-content: center;
|
|
2618
|
+
}
|
|
2619
|
+
|
|
2592
2620
|
.psui-el-table-results.layout-flexible tbody tr td .psui-el-tooltip-dialog {
|
|
2593
2621
|
text-align: left;
|
|
2594
2622
|
max-width: 180px;
|
|
@@ -2666,6 +2694,38 @@ video {
|
|
|
2666
2694
|
height: 10px;
|
|
2667
2695
|
}
|
|
2668
2696
|
|
|
2697
|
+
.psui-el-table-results.layout-flexible tbody tr.is-first.removed-class.closed td:first-child {
|
|
2698
|
+
position: sticky;
|
|
2699
|
+
}
|
|
2700
|
+
|
|
2701
|
+
.psui-el-table-results.layout-flexible tbody tr.is-first.removed-class.closed td:first-child:before,
|
|
2702
|
+
.psui-el-table-results.layout-flexible tbody tr.is-first.removed-class.closed td:first-child:after {
|
|
2703
|
+
content: '';
|
|
2704
|
+
position: absolute;
|
|
2705
|
+
top: 0;
|
|
2706
|
+
}
|
|
2707
|
+
|
|
2708
|
+
.psui-el-table-results.layout-flexible tbody tr.is-first.removed-class.closed td:first-child:before {
|
|
2709
|
+
background-color: #ffffff ;
|
|
2710
|
+
left: 0;
|
|
2711
|
+
width: 16px;
|
|
2712
|
+
height: calc(100% + 1px);
|
|
2713
|
+
}
|
|
2714
|
+
|
|
2715
|
+
.psui-el-table-results.layout-flexible tbody tr.is-first.removed-class.closed td:first-child:after {
|
|
2716
|
+
--bg-opacity: 1;
|
|
2717
|
+
background-color: #F3F6F9;
|
|
2718
|
+
background-color: rgba(243, 246, 249, var(--bg-opacity));
|
|
2719
|
+
border-top-left-radius: 9999px;
|
|
2720
|
+
border-bottom-left-radius: 9999px;
|
|
2721
|
+
box-shadow: -8px 0px 0px 4px #ffffff;
|
|
2722
|
+
z-index: 30;
|
|
2723
|
+
top: 0;
|
|
2724
|
+
left: 16px;
|
|
2725
|
+
width: 10px;
|
|
2726
|
+
height: calc(100%);
|
|
2727
|
+
}
|
|
2728
|
+
|
|
2669
2729
|
.psui-el-table-results.layout-flexible tbody tr:not(.is-first):not(.removed-class) td:first-child {
|
|
2670
2730
|
position: sticky;
|
|
2671
2731
|
}
|
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,19 @@
|
|
|
386
399
|
@apply psui-text-left;
|
|
387
400
|
padding-top: 0;
|
|
388
401
|
padding-bottom: 0;
|
|
389
|
-
min-width:
|
|
402
|
+
min-width: 100px;
|
|
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
|
-
}
|
|
396
409
|
|
|
397
|
-
|
|
410
|
+
> .title {
|
|
411
|
+
@apply psui-text-accentSmall psui-text-gray-60 psui-font-bold psui-uppercase;
|
|
412
|
+
|
|
413
|
+
}
|
|
414
|
+
}
|
|
398
415
|
}
|
|
399
416
|
|
|
400
417
|
p {
|
|
@@ -415,19 +432,18 @@
|
|
|
415
432
|
|
|
416
433
|
&:first-child {
|
|
417
434
|
@apply psui-text-left;
|
|
418
|
-
min-width:
|
|
435
|
+
min-width: 357px;
|
|
419
436
|
}
|
|
420
437
|
|
|
421
438
|
&:nth-child(2) {
|
|
422
439
|
@apply psui-sticky psui-z-10 psui-bg-white;
|
|
423
|
-
left:
|
|
440
|
+
left:357px;
|
|
424
441
|
min-width: 140px;
|
|
425
442
|
}
|
|
426
443
|
|
|
427
444
|
&:nth-child(3) {
|
|
428
445
|
@apply psui-sticky psui-z-10 psui-bg-white;
|
|
429
|
-
left:
|
|
430
|
-
box-shadow: inset -1px 0px 0px #EBEEF0;
|
|
446
|
+
left: 497px;
|
|
431
447
|
}
|
|
432
448
|
}
|
|
433
449
|
}
|
|
@@ -492,20 +508,26 @@
|
|
|
492
508
|
@apply psui-pl-2 psui-pr-8 psui-text-left psui-block psui-sticky psui-z-10 psui-left-0;
|
|
493
509
|
padding-top: 8px;
|
|
494
510
|
padding-bottom: 8px;
|
|
511
|
+
min-width: 357px;
|
|
495
512
|
}
|
|
496
513
|
|
|
497
514
|
&:nth-child(2) {
|
|
498
515
|
@apply psui-sticky psui-z-10;
|
|
499
516
|
min-width: 140px;
|
|
500
|
-
left:
|
|
517
|
+
left: 357px;
|
|
518
|
+
> div {
|
|
519
|
+
@apply psui-justify-center;
|
|
520
|
+
}
|
|
501
521
|
}
|
|
502
522
|
|
|
503
523
|
&:nth-child(3) {
|
|
504
524
|
@apply psui-sticky psui-z-10;
|
|
505
525
|
min-width: 140px;
|
|
506
|
-
left:
|
|
526
|
+
left: 497px;
|
|
507
527
|
padding-right: 22px;
|
|
508
|
-
|
|
528
|
+
> div {
|
|
529
|
+
@apply psui-justify-center;
|
|
530
|
+
}
|
|
509
531
|
}
|
|
510
532
|
|
|
511
533
|
.psui-el-tooltip-dialog {
|
|
@@ -567,8 +589,37 @@
|
|
|
567
589
|
height: 10px;
|
|
568
590
|
}
|
|
569
591
|
}
|
|
570
|
-
|
|
571
|
-
|
|
592
|
+
}
|
|
593
|
+
|
|
594
|
+
&.closed {
|
|
595
|
+
td {
|
|
596
|
+
&:first-child {
|
|
597
|
+
@apply psui-sticky;
|
|
598
|
+
|
|
599
|
+
&:before,
|
|
600
|
+
&:after {
|
|
601
|
+
content: '';
|
|
602
|
+
@apply psui-absolute psui-top-0;
|
|
603
|
+
}
|
|
604
|
+
|
|
605
|
+
&:before {
|
|
606
|
+
@apply psui-bg-white psui-left-0;
|
|
607
|
+
width: 16px;
|
|
608
|
+
height: calc(100% + 1px);
|
|
609
|
+
}
|
|
610
|
+
|
|
611
|
+
&:after {
|
|
612
|
+
@apply psui-bg-gray-10 psui-rounded-tl-full psui-rounded-bl-full;
|
|
613
|
+
box-shadow: -8px 0px 0px 4px #ffffff;
|
|
614
|
+
z-index: 30;
|
|
615
|
+
top: 0;
|
|
616
|
+
left: 16px;
|
|
617
|
+
width: 10px;
|
|
618
|
+
height: calc(100%);
|
|
619
|
+
}
|
|
620
|
+
}
|
|
621
|
+
}
|
|
622
|
+
}
|
|
572
623
|
}
|
|
573
624
|
|
|
574
625
|
}
|
|
@@ -271,27 +271,24 @@
|
|
|
271
271
|
:value="item.data[column.key] == '--' ? 0 : item.data[column.key]"
|
|
272
272
|
:force-break-even="item.is_disabled || item.data[column.key] === '--' ? true : false"
|
|
273
273
|
/>
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
274
|
+
|
|
275
|
+
<div
|
|
276
|
+
v-if="column.isSwitch && item.data[column.key] != null"
|
|
277
|
+
v-tooltip="{
|
|
278
|
+
content: !item.data.is_disabled || item.is_excluded ? false : item.tooltip_text,
|
|
279
|
+
classes: 'layout-blue'
|
|
280
|
+
}"
|
|
281
|
+
>
|
|
282
|
+
<PsSwitch
|
|
282
283
|
:disabled="item.data.is_disabled"
|
|
283
284
|
:value="item.data[column.key]"
|
|
284
285
|
:background-color="switchButtonBackgroundColor"
|
|
286
|
+
class="psui-justify-self-center"
|
|
285
287
|
:class="{'psui-pointer-events-none':preventClickOnSwitchButtons}"
|
|
286
288
|
size="small"
|
|
287
289
|
@change="$emit('switchButtonItemChanged', item)"
|
|
288
290
|
/>
|
|
289
|
-
|
|
290
|
-
<template v-slot:content>
|
|
291
|
-
{{ item.tooltip_text }}
|
|
292
|
-
</template>
|
|
293
|
-
</PsRichTooltip>
|
|
294
|
-
|
|
291
|
+
</div>
|
|
295
292
|
</div>
|
|
296
293
|
|
|
297
294
|
<!-- only comparison layout -->
|
|
@@ -655,9 +652,38 @@ export default {
|
|
|
655
652
|
const max = Math.max(...this.getRows.map(item => item.data[key]))
|
|
656
653
|
return (value * 100) / max
|
|
657
654
|
},
|
|
655
|
+
setVerticalStyleWhenScroolingForFlexibleLayout(tableWrapper){
|
|
656
|
+
if(tableWrapper.scrollTop > 0 && tableWrapper.classList.contains('table-flexible')) {
|
|
657
|
+
tableWrapper.getElementsByTagName('thead')[0].style.boxShadow = '0px 0px 8px rgba(0, 0, 0, 0.04), 0px 2px 5px rgba(0, 0, 0, 0.08)'
|
|
658
|
+
} else if(tableWrapper.classList.contains('table-flexible')) {
|
|
659
|
+
tableWrapper.getElementsByTagName('thead')[0].style.boxShadow = '0 0 0 rgba(0, 0, 0, 0)'
|
|
660
|
+
}
|
|
661
|
+
},
|
|
662
|
+
setHorizontalStyleWhenScrollingForFlexibleLayout(tableWrapper){
|
|
663
|
+
const firstHeaderElement = tableWrapper.querySelector('thead > tr:first-child > th:first-child')
|
|
664
|
+
const secondHeaderElment = tableWrapper.querySelector('thead > tr:not(:first-of-type) > th:nth-child(3)')
|
|
665
|
+
const getAllOtherBodyElements = tableWrapper.querySelectorAll( 'tbody > tr > td:nth-child(3)')
|
|
658
666
|
|
|
667
|
+
if (tableWrapper.scrollLeft > 0 && tableWrapper.classList.contains('table-flexible')) {
|
|
668
|
+
firstHeaderElement.classList.add('pseudo-line')
|
|
669
|
+
secondHeaderElment.style.boxShadow = 'inset -1px 0px 0px #D6DDE5'
|
|
670
|
+
getAllOtherBodyElements.forEach(element => {
|
|
671
|
+
element.style.boxShadow = 'inset -1px 0px 0px #D6DDE5'
|
|
672
|
+
})
|
|
673
|
+
} else if(tableWrapper.classList.contains('table-flexible')) {
|
|
674
|
+
firstHeaderElement.classList.remove('pseudo-line')
|
|
675
|
+
secondHeaderElment.style.boxShadow = '0 0 0 rgba(0, 0, 0, 0)'
|
|
676
|
+
getAllOtherBodyElements.forEach(element => {
|
|
677
|
+
element.style.boxShadow = '0 0 0 rgba(0, 0, 0, 0)'
|
|
678
|
+
})
|
|
679
|
+
}
|
|
680
|
+
},
|
|
659
681
|
handleTableScroll() {
|
|
660
682
|
const tableWrapper = this.$refs.tableWrapper
|
|
683
|
+
|
|
684
|
+
this.setVerticalStyleWhenScroolingForFlexibleLayout(tableWrapper)
|
|
685
|
+
this.setHorizontalStyleWhenScrollingForFlexibleLayout(tableWrapper)
|
|
686
|
+
|
|
661
687
|
if (tableWrapper.scrollLeft > 0) {
|
|
662
688
|
this.isSticky = true
|
|
663
689
|
} else {
|