@policystudio/policy-studio-ui-vue 1.1.63 → 1.1.65

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.
@@ -2419,7 +2419,7 @@ video {
2419
2419
 
2420
2420
  .psui-el-table-results.layout-flexible thead tr th:first-child {
2421
2421
  padding-left: 1rem;
2422
- padding-right: 2rem;
2422
+ padding-right: 1.5rem;
2423
2423
  text-align: left;
2424
2424
  background-color: #ffffff ;
2425
2425
  position: sticky;
@@ -2472,8 +2472,23 @@ video {
2472
2472
  min-width: 388px;
2473
2473
  }
2474
2474
 
2475
+ .psui-el-table-results.layout-flexible thead tr:not(:first-of-type) th:nth-child(2) {
2476
+ position: sticky;
2477
+ z-index: 10;
2478
+ background-color: #ffffff ;
2479
+ left:388px;
2480
+ min-width: 140px;
2481
+ }
2482
+
2483
+ .psui-el-table-results.layout-flexible thead tr:not(:first-of-type) th:nth-child(3) {
2484
+ position: sticky;
2485
+ z-index: 10;
2486
+ background-color: #ffffff ;
2487
+ left: 528px;
2488
+ box-shadow: inset -1px 0px 0px #EBEEF0;
2489
+ }
2490
+
2475
2491
  .psui-el-table-results.layout-flexible tbody tr {
2476
- border-bottom-width: 1px;
2477
2492
  --border-opacity: 1;
2478
2493
  border-color: #E6ECF2;
2479
2494
  border-color: rgba(230, 236, 242, var(--border-opacity));
@@ -2485,6 +2500,36 @@ video {
2485
2500
  line-height: 24px;
2486
2501
  }
2487
2502
 
2503
+ .psui-el-table-results.layout-flexible tbody tr.removed-class td {
2504
+ --bg-opacity: 1 !important;
2505
+ background-color: #F3F6F9 !important;
2506
+ background-color: rgba(243, 246, 249, var(--bg-opacity)) !important;
2507
+ --text-opacity: 1 !important;
2508
+ color: #A2ACB7 !important;
2509
+ color: rgba(162, 172, 183, var(--text-opacity)) !important;
2510
+ }
2511
+
2512
+ .psui-el-table-results.layout-flexible tbody tr.removed-class td div:first-child {
2513
+ margin-left: 4px;
2514
+ }
2515
+
2516
+ .psui-el-table-results.layout-flexible tbody tr.removed-class td:first-child {
2517
+ position: sticky;
2518
+ }
2519
+
2520
+ .psui-el-table-results.layout-flexible tbody tr.removed-class td:first-child:before {
2521
+ content: '';
2522
+ position: absolute;
2523
+ top: 0;
2524
+ }
2525
+
2526
+ .psui-el-table-results.layout-flexible tbody tr.removed-class td:first-child:before {
2527
+ background-color: #ffffff ;
2528
+ left: 0;
2529
+ width: 16px;
2530
+ height: calc(100% + 1px);
2531
+ }
2532
+
2488
2533
  .psui-el-table-results.layout-flexible tbody tr td {
2489
2534
  padding-left: 2rem;
2490
2535
  --text-opacity: 1;
@@ -2516,10 +2561,6 @@ video {
2516
2561
  margin-left: 0.25rem;
2517
2562
  }
2518
2563
 
2519
- .psui-el-table-results.layout-flexible tbody tr td .actions .is-last-deep {
2520
- padding-left: 1rem;
2521
- }
2522
-
2523
2564
  .psui-el-table-results.layout-flexible tbody tr td:first-child {
2524
2565
  padding-left: 0.5rem;
2525
2566
  padding-right: 2rem;
@@ -2532,6 +2573,22 @@ video {
2532
2573
  padding-bottom: 8px;
2533
2574
  }
2534
2575
 
2576
+ .psui-el-table-results.layout-flexible tbody tr td:nth-child(2) {
2577
+ position: sticky;
2578
+ z-index: 10;
2579
+ min-width: 140px;
2580
+ left: 388px;
2581
+ }
2582
+
2583
+ .psui-el-table-results.layout-flexible tbody tr td:nth-child(3) {
2584
+ position: sticky;
2585
+ z-index: 10;
2586
+ min-width: 140px;
2587
+ left: 528px;
2588
+ padding-right: 22px;
2589
+ box-shadow: inset -1px 0px 0px #EBEEF0;
2590
+ }
2591
+
2535
2592
  .psui-el-table-results.layout-flexible tbody tr td .psui-el-tooltip-dialog {
2536
2593
  text-align: left;
2537
2594
  max-width: 180px;
@@ -2565,40 +2622,85 @@ video {
2565
2622
  min-height: 1rem;
2566
2623
  }
2567
2624
 
2568
- .psui-el-table-results.layout-flexible tbody tr:not(.is-first) td:first-child {
2625
+ .psui-el-table-results.layout-flexible tbody tr.is-first.removed-class td {
2626
+ --bg-opacity: 1;
2627
+ background-color: #F3F6F9;
2628
+ background-color: rgba(243, 246, 249, var(--bg-opacity));
2629
+ --text-opacity: 1;
2630
+ color: #A2ACB7;
2631
+ color: rgba(162, 172, 183, var(--text-opacity));
2632
+ }
2633
+
2634
+ .psui-el-table-results.layout-flexible tbody tr.is-first.removed-class td div:first-child {
2635
+ margin-left: 4px;
2636
+ }
2637
+
2638
+ .psui-el-table-results.layout-flexible tbody tr.is-first.removed-class td:first-child {
2639
+ position: sticky;
2640
+ }
2641
+
2642
+ .psui-el-table-results.layout-flexible tbody tr.is-first.removed-class td:first-child:before,
2643
+ .psui-el-table-results.layout-flexible tbody tr.is-first.removed-class td:first-child:after {
2644
+ content: '';
2645
+ position: absolute;
2646
+ top: 0;
2647
+ }
2648
+
2649
+ .psui-el-table-results.layout-flexible tbody tr.is-first.removed-class td:first-child:before {
2650
+ background-color: #ffffff ;
2651
+ left: 0;
2652
+ width: 16px;
2653
+ height: calc(100% + 1px);
2654
+ }
2655
+
2656
+ .psui-el-table-results.layout-flexible tbody tr.is-first.removed-class td:first-child:after {
2657
+ --bg-opacity: 1;
2658
+ background-color: #F3F6F9;
2659
+ background-color: rgba(243, 246, 249, var(--bg-opacity));
2660
+ border-top-left-radius: 9999px;
2661
+ box-shadow: -3px -3px 0px 0px #ffffff;
2662
+ z-index: 30;
2663
+ top: 0;
2664
+ left: 16px;
2665
+ width: 10px;
2666
+ height: 10px;
2667
+ }
2668
+
2669
+ .psui-el-table-results.layout-flexible tbody tr:not(.is-first):not(.removed-class) td:first-child {
2569
2670
  position: sticky;
2570
2671
  }
2571
2672
 
2572
- .psui-el-table-results.layout-flexible tbody tr:not(.is-first) td:first-child:before,
2573
- .psui-el-table-results.layout-flexible tbody tr:not(.is-first) td:first-child:after {
2673
+ .psui-el-table-results.layout-flexible tbody tr:not(.is-first):not(.removed-class) td:first-child:before,
2674
+ .psui-el-table-results.layout-flexible tbody tr:not(.is-first):not(.removed-class) td:first-child:after {
2574
2675
  content: '';
2575
2676
  position: absolute;
2576
2677
  top: 0;
2577
2678
  }
2578
2679
 
2579
- .psui-el-table-results.layout-flexible tbody tr:not(.is-first) td:first-child:before {
2680
+ .psui-el-table-results.layout-flexible tbody tr:not(.is-first):not(.removed-class) td:first-child:before {
2580
2681
  background-color: #ffffff ;
2581
2682
  left: 0;
2582
2683
  width: 20px;
2583
2684
  height: calc(100% + 1px);
2584
2685
  }
2585
2686
 
2586
- .psui-el-table-results.layout-flexible tbody tr:not(.is-first) td:first-child:after {
2687
+ .psui-el-table-results.layout-flexible tbody tr:not(.is-first):not(.removed-class) td:first-child:after {
2587
2688
  --bg-opacity: 1;
2588
2689
  background-color: #E6ECF2;
2589
2690
  background-color: rgba(230, 236, 242, var(--bg-opacity));
2590
2691
  width: 1px;
2591
2692
  height: 0;
2693
+ border-radius: 0.5rem;
2592
2694
  left: 19.5px;
2593
2695
  }
2594
2696
 
2595
- .psui-el-table-results.layout-flexible tbody tr:not(.is-first):hover td {
2697
+ .psui-el-table-results.layout-flexible tbody tr:not(.is-first):not(.removed-class):hover td {
2596
2698
  --bg-opacity: 1;
2597
2699
  background-color: #ECF7FB;
2598
2700
  background-color: rgba(236, 247, 251, var(--bg-opacity));
2599
2701
  }
2600
2702
 
2601
- .psui-el-table-results.layout-flexible tbody tr:not(.is-first).opened td:first-child:after {
2703
+ .psui-el-table-results.layout-flexible tbody tr:not(.is-first):not(.removed-class).opened td:first-child:after {
2602
2704
  height: calc(100% + 1px);
2603
2705
  }
2604
2706
 
@@ -2606,11 +2708,52 @@ video {
2606
2708
  border-bottom-width: 0;
2607
2709
  }
2608
2710
 
2609
- .psui-el-table-results.layout-flexible tbody tr.is-active {
2610
- --bg-opacity: 1;
2611
- background-color: #F3F6F9;
2612
- background-color: rgba(243, 246, 249, var(--bg-opacity));
2613
- }
2711
+ .psui-el-table-results.layout-flexible tbody tr.is-last.removed-class td {
2712
+ --bg-opacity: 1 !important;
2713
+ background-color: #F3F6F9 !important;
2714
+ background-color: rgba(243, 246, 249, var(--bg-opacity)) !important;
2715
+ --text-opacity: 1 !important;
2716
+ color: #A2ACB7 !important;
2717
+ color: rgba(162, 172, 183, var(--text-opacity)) !important;
2718
+ }
2719
+
2720
+ .psui-el-table-results.layout-flexible tbody tr.is-last.removed-class td div:first-child {
2721
+ margin-left: 4px;
2722
+ }
2723
+
2724
+ .psui-el-table-results.layout-flexible tbody tr.is-last.removed-class td:first-child {
2725
+ position: sticky;
2726
+ }
2727
+
2728
+ .psui-el-table-results.layout-flexible tbody tr.is-last.removed-class td:first-child:before{
2729
+ content: '';
2730
+ position: absolute;
2731
+ top: 0;
2732
+ }
2733
+
2734
+ .psui-el-table-results.layout-flexible tbody tr.is-last.removed-class td:first-child:before {
2735
+ background-color: #ffffff ;
2736
+ left: 0;
2737
+ width: 16px;
2738
+ height: calc(100% + 1px);
2739
+ }
2740
+
2741
+ .psui-el-table-results.layout-flexible tbody tr.is-last.removed-class td:first-child:after {
2742
+ --bg-opacity: 1;
2743
+ background-color: #F3F6F9;
2744
+ background-color: rgba(243, 246, 249, var(--bg-opacity));
2745
+ border-bottom-left-radius: 9999px;
2746
+ position: absolute;
2747
+ bottom: 0;
2748
+ overflow: hidden;
2749
+ box-shadow: -3px 3px 0px 0px #fff;
2750
+ content: '';
2751
+ z-index: 30;
2752
+ bottom: 0;
2753
+ left: 16px;
2754
+ width: 10px;
2755
+ height: 10px;
2756
+ }
2614
2757
 
2615
2758
  .psui-el-table-results.layout-flexible tbody tr.is-active td {
2616
2759
  padding-top: 9px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@policystudio/policy-studio-ui-vue",
3
- "version": "1.1.63",
3
+ "version": "1.1.65",
4
4
  "description": "Policy Studio UI",
5
5
  "main": "src/index.js",
6
6
  "author": "Policy Studio Team",
@@ -372,12 +372,13 @@
372
372
  }
373
373
 
374
374
  &:first-child {
375
- @apply psui-pl-4 psui-pr-8 psui-text-left psui-bg-white psui-sticky psui-z-10 psui-left-0;
375
+ @apply psui-pl-4 psui-pr-6 psui-text-left psui-bg-white psui-sticky psui-z-10 psui-left-0;
376
376
 
377
377
  > div {
378
378
  @apply psui-items-start;
379
379
  }
380
380
  }
381
+
381
382
  }
382
383
 
383
384
  &:first-of-type {
@@ -416,6 +417,18 @@
416
417
  @apply psui-text-left;
417
418
  min-width: 388px;
418
419
  }
420
+
421
+ &:nth-child(2) {
422
+ @apply psui-sticky psui-z-10 psui-bg-white;
423
+ left:388px;
424
+ min-width: 140px;
425
+ }
426
+
427
+ &:nth-child(3) {
428
+ @apply psui-sticky psui-z-10 psui-bg-white;
429
+ left: 528px;
430
+ box-shadow: inset -1px 0px 0px #EBEEF0;
431
+ }
419
432
  }
420
433
  }
421
434
  }
@@ -423,12 +436,39 @@
423
436
 
424
437
  tbody {
425
438
  tr {
426
- @apply psui-border-b psui-border-gray-20;
439
+ @apply psui-border-gray-20;
427
440
 
428
441
  .title {
429
442
  @apply psui-flex psui-items-center;
430
443
  line-height: 24px;
431
444
  }
445
+
446
+ &.removed-class {
447
+ td {
448
+ @apply psui-bg-gray-10 psui-text-gray-40 !important;
449
+
450
+ div:first-child {
451
+ margin-left: 4px;
452
+ }
453
+
454
+ &:first-child {
455
+ @apply psui-sticky;
456
+
457
+ &:before {
458
+ content: '';
459
+ @apply psui-absolute psui-top-0;
460
+ }
461
+
462
+ &:before {
463
+ @apply psui-bg-white psui-left-0;
464
+ width: 16px;
465
+ height: calc(100% + 1px);
466
+ }
467
+
468
+ }
469
+
470
+ }
471
+ }
432
472
 
433
473
  td {
434
474
  @apply psui-pl-8 psui-text-gray-70 psui-h-10 psui-text-right psui-text-small;
@@ -446,10 +486,6 @@
446
486
  &-button {
447
487
  @apply psui-cursor-pointer psui-ml-1;
448
488
  }
449
-
450
- .is-last-deep {
451
- @apply psui-pl-4;
452
- }
453
489
  }
454
490
 
455
491
  &:first-child {
@@ -458,6 +494,20 @@
458
494
  padding-bottom: 8px;
459
495
  }
460
496
 
497
+ &:nth-child(2) {
498
+ @apply psui-sticky psui-z-10;
499
+ min-width: 140px;
500
+ left: 388px;
501
+ }
502
+
503
+ &:nth-child(3) {
504
+ @apply psui-sticky psui-z-10;
505
+ min-width: 140px;
506
+ left: 528px;
507
+ padding-right: 22px;
508
+ box-shadow: inset -1px 0px 0px #EBEEF0;
509
+ }
510
+
461
511
  .psui-el-tooltip-dialog {
462
512
  text-align: left;
463
513
  max-width: 180px;
@@ -483,9 +533,47 @@
483
533
  @apply psui-h-auto psui-pt-2 psui-pb-0;
484
534
  min-height: 1rem;
485
535
  }
536
+
537
+ &.removed-class {
538
+ td {
539
+ @apply psui-bg-gray-10 psui-text-gray-40;
540
+
541
+ div:first-child {
542
+ margin-left: 4px;
543
+ }
544
+
545
+ &:first-child {
546
+ @apply psui-sticky;
547
+
548
+ &:before,
549
+ &:after {
550
+ content: '';
551
+ @apply psui-absolute psui-top-0;
552
+ }
553
+
554
+ &:before {
555
+ @apply psui-bg-white psui-left-0;
556
+ width: 16px;
557
+ height: calc(100% + 1px);
558
+ }
559
+
560
+ &:after {
561
+ @apply psui-bg-gray-10 psui-rounded-tl-full ;
562
+ box-shadow: -3px -3px 0px 0px #ffffff;
563
+ z-index: 30;
564
+ top: 0;
565
+ left: 16px;
566
+ width: 10px;
567
+ height: 10px;
568
+ }
569
+ }
570
+
571
+ }
572
+ }
573
+
486
574
  }
487
575
 
488
- &:not(.is-first) {
576
+ &:not(.is-first):not(.removed-class) {
489
577
  td {
490
578
  &:first-child {
491
579
  @apply psui-sticky;
@@ -503,7 +591,7 @@
503
591
  }
504
592
 
505
593
  &:after {
506
- @apply psui-bg-gray-20 psui-w-px psui-h-0;
594
+ @apply psui-bg-gray-20 psui-w-px psui-h-0 psui-rounded-lg;
507
595
  left: 19.5px;
508
596
  }
509
597
  }
@@ -526,10 +614,46 @@
526
614
 
527
615
  &.is-last {
528
616
  @apply psui-border-b-0;
617
+
618
+ &.removed-class {
619
+ td {
620
+ @apply psui-bg-gray-10 psui-text-gray-40 !important;
621
+
622
+ div:first-child {
623
+ margin-left: 4px;
624
+ }
625
+
626
+ &:first-child {
627
+ @apply psui-sticky;
628
+
629
+ &:before{
630
+ content: '';
631
+ @apply psui-absolute psui-top-0;
632
+ }
633
+
634
+ &:before {
635
+ @apply psui-bg-white psui-left-0;
636
+ width: 16px;
637
+ height: calc(100% + 1px);
638
+ }
639
+
640
+ &:after {
641
+ @apply psui-bg-gray-10 psui-rounded-bl-full psui-absolute psui-bottom-0 psui-overflow-hidden;
642
+ box-shadow: -3px 3px 0px 0px #fff;
643
+ content: '';
644
+ z-index: 30;
645
+ bottom: 0;
646
+ left: 16px;
647
+ width: 10px;
648
+ height: 10px;
649
+ }
650
+ }
651
+
652
+ }
653
+ }
529
654
  }
530
655
 
531
656
  &.is-active {
532
- @apply psui-bg-gray-10;
533
657
 
534
658
  td {
535
659
  padding-top: 9px;
@@ -27,6 +27,7 @@
27
27
  'psui-hidden' : checkRowIsCollapsed(item),
28
28
  'is-last' : item.is_last,
29
29
  'is-active' : selectedRow == item.id,
30
+ 'removed-class' : (item.slug == 'removed_measures' || item.is_excluded) && layout == 'flexible'
30
31
  },
31
32
  `${item.type}`
32
33
  ]"
@@ -37,17 +38,27 @@
37
38
  >
38
39
  <td
39
40
  :style="item.background_color ? `background-color: ${getBackgroundColor(item.background_color)};` : ''"
40
- class="psui-transition"
41
41
  >
42
+
42
43
  <div class="psui-flex psui-relative">
43
- <PsIcon
44
- v-if="item.remove_add_button"
45
- :icon="item.remove_add_button_icon"
46
- class="psui-flex psui-text-gray-40 pl-8 psui-cursor-pointer leading-none hover:psui-text-blue-60 transition-all"
47
- size="15"
48
- display="flex"
49
- @click.native="$emit('removeOrAddButtonChange',item)"
50
- />
44
+ <PsTooltip
45
+ :ignore-dialog="!item.is_excluded"
46
+ position="top"
47
+ >
48
+ <template v-slot:trigger>
49
+ <PsIcon
50
+ v-if="item.remove_add_button"
51
+ :icon="item.remove_add_button_icon"
52
+ class="psui-flex psui-text-gray-40 pl-8 psui-cursor-pointer leading-none hover:psui-text-blue-60 transition-all"
53
+ size="15"
54
+ display="flex"
55
+ @click.native="$emit('removeOrAddButtonChange',item)"
56
+ />
57
+ </template>
58
+ <template v-slot:content>
59
+ Restore this measure
60
+ </template>
61
+ </PsTooltip>
51
62
  <div
52
63
  class="psui-flex psui-items-center actions psui-space-x-3"
53
64
  :style="{paddingLeft: `${item.deep * 16}px`}"
@@ -180,7 +191,8 @@
180
191
  </template>
181
192
  </PsDropdown>
182
193
  </div>
183
- </div>
194
+ </div>
195
+
184
196
  </td>
185
197
 
186
198
  <template v-for="(columnGroup, indexColumn) of columnGroups">
@@ -261,7 +273,7 @@
261
273
  />
262
274
  <PsRichTooltip
263
275
  v-if="column.isSwitch && item.data[column.key] != null"
264
- :ignoreDialog="!item.data.is_disabled"
276
+ :ignoreDialog="!item.data.is_disabled || item.is_excluded"
265
277
  position="top"
266
278
  layout="blue"
267
279
  >