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

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.
Files changed (4) hide show
  1. package/dist/css/psui_styles.css +128 -17
  2. package/package.json +1 -1
  3. package/src/assets/scss/components/PsTableResults.scss +105 -8
  4. package/src/components/table-results/PsTableResults.vue +23 -11
package/dist/css/psui_styles.css CHANGED
@@ -2473,7 +2473,6 @@ video {
2473
2473
  }
2474
2474
 
2475
2475
  .psui-el-table-results.layout-flexible tbody tr {
2476
- border-bottom-width: 1px;
2477
2476
  --border-opacity: 1;
2478
2477
  border-color: #E6ECF2;
2479
2478
  border-color: rgba(230, 236, 242, var(--border-opacity));
@@ -2485,6 +2484,36 @@ video {
2485
2484
  line-height: 24px;
2486
2485
  }
2487
2486
 
2487
+ .psui-el-table-results.layout-flexible tbody tr.removed-class td {
2488
+ --bg-opacity: 1 !important;
2489
+ background-color: #F3F6F9 !important;
2490
+ background-color: rgba(243, 246, 249, var(--bg-opacity)) !important;
2491
+ --text-opacity: 1 !important;
2492
+ color: #A2ACB7 !important;
2493
+ color: rgba(162, 172, 183, var(--text-opacity)) !important;
2494
+ }
2495
+
2496
+ .psui-el-table-results.layout-flexible tbody tr.removed-class td div:first-child {
2497
+ margin-left: 4px;
2498
+ }
2499
+
2500
+ .psui-el-table-results.layout-flexible tbody tr.removed-class td:first-child {
2501
+ position: sticky;
2502
+ }
2503
+
2504
+ .psui-el-table-results.layout-flexible tbody tr.removed-class td:first-child:before {
2505
+ content: '';
2506
+ position: absolute;
2507
+ top: 0;
2508
+ }
2509
+
2510
+ .psui-el-table-results.layout-flexible tbody tr.removed-class td:first-child:before {
2511
+ background-color: #ffffff ;
2512
+ left: 0;
2513
+ width: 16px;
2514
+ height: calc(100% + 1px);
2515
+ }
2516
+
2488
2517
  .psui-el-table-results.layout-flexible tbody tr td {
2489
2518
  padding-left: 2rem;
2490
2519
  --text-opacity: 1;
@@ -2516,10 +2545,6 @@ video {
2516
2545
  margin-left: 0.25rem;
2517
2546
  }
2518
2547
 
2519
- .psui-el-table-results.layout-flexible tbody tr td .actions .is-last-deep {
2520
- padding-left: 1rem;
2521
- }
2522
-
2523
2548
  .psui-el-table-results.layout-flexible tbody tr td:first-child {
2524
2549
  padding-left: 0.5rem;
2525
2550
  padding-right: 2rem;
@@ -2565,40 +2590,85 @@ video {
2565
2590
  min-height: 1rem;
2566
2591
  }
2567
2592
 
2568
- .psui-el-table-results.layout-flexible tbody tr:not(.is-first) td:first-child {
2593
+ .psui-el-table-results.layout-flexible tbody tr.is-first.removed-class td {
2594
+ --bg-opacity: 1;
2595
+ background-color: #F3F6F9;
2596
+ background-color: rgba(243, 246, 249, var(--bg-opacity));
2597
+ --text-opacity: 1;
2598
+ color: #A2ACB7;
2599
+ color: rgba(162, 172, 183, var(--text-opacity));
2600
+ }
2601
+
2602
+ .psui-el-table-results.layout-flexible tbody tr.is-first.removed-class td div:first-child {
2603
+ margin-left: 4px;
2604
+ }
2605
+
2606
+ .psui-el-table-results.layout-flexible tbody tr.is-first.removed-class td:first-child {
2607
+ position: sticky;
2608
+ }
2609
+
2610
+ .psui-el-table-results.layout-flexible tbody tr.is-first.removed-class td:first-child:before,
2611
+ .psui-el-table-results.layout-flexible tbody tr.is-first.removed-class td:first-child:after {
2612
+ content: '';
2613
+ position: absolute;
2614
+ top: 0;
2615
+ }
2616
+
2617
+ .psui-el-table-results.layout-flexible tbody tr.is-first.removed-class td:first-child:before {
2618
+ background-color: #ffffff ;
2619
+ left: 0;
2620
+ width: 16px;
2621
+ height: calc(100% + 1px);
2622
+ }
2623
+
2624
+ .psui-el-table-results.layout-flexible tbody tr.is-first.removed-class td:first-child:after {
2625
+ --bg-opacity: 1;
2626
+ background-color: #F3F6F9;
2627
+ background-color: rgba(243, 246, 249, var(--bg-opacity));
2628
+ border-top-left-radius: 9999px;
2629
+ box-shadow: -3px -3px 0px 0px #ffffff;
2630
+ z-index: 30;
2631
+ top: 0;
2632
+ left: 16px;
2633
+ width: 10px;
2634
+ height: 10px;
2635
+ }
2636
+
2637
+ .psui-el-table-results.layout-flexible tbody tr:not(.is-first):not(.removed-class) td:first-child {
2569
2638
  position: sticky;
2570
2639
  }
2571
2640
 
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 {
2641
+ .psui-el-table-results.layout-flexible tbody tr:not(.is-first):not(.removed-class) td:first-child:before,
2642
+ .psui-el-table-results.layout-flexible tbody tr:not(.is-first):not(.removed-class) td:first-child:after {
2574
2643
  content: '';
2575
2644
  position: absolute;
2576
2645
  top: 0;
2577
2646
  }
2578
2647
 
2579
- .psui-el-table-results.layout-flexible tbody tr:not(.is-first) td:first-child:before {
2648
+ .psui-el-table-results.layout-flexible tbody tr:not(.is-first):not(.removed-class) td:first-child:before {
2580
2649
  background-color: #ffffff ;
2581
2650
  left: 0;
2582
2651
  width: 20px;
2583
2652
  height: calc(100% + 1px);
2584
2653
  }
2585
2654
 
2586
- .psui-el-table-results.layout-flexible tbody tr:not(.is-first) td:first-child:after {
2655
+ .psui-el-table-results.layout-flexible tbody tr:not(.is-first):not(.removed-class) td:first-child:after {
2587
2656
  --bg-opacity: 1;
2588
2657
  background-color: #E6ECF2;
2589
2658
  background-color: rgba(230, 236, 242, var(--bg-opacity));
2590
2659
  width: 1px;
2591
2660
  height: 0;
2661
+ border-radius: 0.5rem;
2592
2662
  left: 19.5px;
2593
2663
  }
2594
2664
 
2595
- .psui-el-table-results.layout-flexible tbody tr:not(.is-first):hover td {
2665
+ .psui-el-table-results.layout-flexible tbody tr:not(.is-first):not(.removed-class):hover td {
2596
2666
  --bg-opacity: 1;
2597
2667
  background-color: #ECF7FB;
2598
2668
  background-color: rgba(236, 247, 251, var(--bg-opacity));
2599
2669
  }
2600
2670
 
2601
- .psui-el-table-results.layout-flexible tbody tr:not(.is-first).opened td:first-child:after {
2671
+ .psui-el-table-results.layout-flexible tbody tr:not(.is-first):not(.removed-class).opened td:first-child:after {
2602
2672
  height: calc(100% + 1px);
2603
2673
  }
2604
2674
 
@@ -2606,11 +2676,52 @@ video {
2606
2676
  border-bottom-width: 0;
2607
2677
  }
2608
2678
 
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
- }
2679
+ .psui-el-table-results.layout-flexible tbody tr.is-last.removed-class td {
2680
+ --bg-opacity: 1 !important;
2681
+ background-color: #F3F6F9 !important;
2682
+ background-color: rgba(243, 246, 249, var(--bg-opacity)) !important;
2683
+ --text-opacity: 1 !important;
2684
+ color: #A2ACB7 !important;
2685
+ color: rgba(162, 172, 183, var(--text-opacity)) !important;
2686
+ }
2687
+
2688
+ .psui-el-table-results.layout-flexible tbody tr.is-last.removed-class td div:first-child {
2689
+ margin-left: 4px;
2690
+ }
2691
+
2692
+ .psui-el-table-results.layout-flexible tbody tr.is-last.removed-class td:first-child {
2693
+ position: sticky;
2694
+ }
2695
+
2696
+ .psui-el-table-results.layout-flexible tbody tr.is-last.removed-class td:first-child:before{
2697
+ content: '';
2698
+ position: absolute;
2699
+ top: 0;
2700
+ }
2701
+
2702
+ .psui-el-table-results.layout-flexible tbody tr.is-last.removed-class td:first-child:before {
2703
+ background-color: #ffffff ;
2704
+ left: 0;
2705
+ width: 16px;
2706
+ height: calc(100% + 1px);
2707
+ }
2708
+
2709
+ .psui-el-table-results.layout-flexible tbody tr.is-last.removed-class td:first-child:after {
2710
+ --bg-opacity: 1;
2711
+ background-color: #F3F6F9;
2712
+ background-color: rgba(243, 246, 249, var(--bg-opacity));
2713
+ border-bottom-left-radius: 9999px;
2714
+ position: absolute;
2715
+ bottom: 0;
2716
+ overflow: hidden;
2717
+ box-shadow: -3px 3px 0px 0px #fff;
2718
+ content: '';
2719
+ z-index: 30;
2720
+ bottom: 0;
2721
+ left: 16px;
2722
+ width: 10px;
2723
+ height: 10px;
2724
+ }
2614
2725
 
2615
2726
  .psui-el-table-results.layout-flexible tbody tr.is-active td {
2616
2727
  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.64",
4
4
  "description": "Policy Studio UI",
5
5
  "main": "src/index.js",
6
6
  "author": "Policy Studio Team",
package/src/assets/scss/components/PsTableResults.scss CHANGED
@@ -423,12 +423,39 @@
423
423
 
424
424
  tbody {
425
425
  tr {
426
- @apply psui-border-b psui-border-gray-20;
426
+ @apply psui-border-gray-20;
427
427
 
428
428
  .title {
429
429
  @apply psui-flex psui-items-center;
430
430
  line-height: 24px;
431
431
  }
432
+
433
+ &.removed-class {
434
+ td {
435
+ @apply psui-bg-gray-10 psui-text-gray-40 !important;
436
+
437
+ div:first-child {
438
+ margin-left: 4px;
439
+ }
440
+
441
+ &:first-child {
442
+ @apply psui-sticky;
443
+
444
+ &:before {
445
+ content: '';
446
+ @apply psui-absolute psui-top-0;
447
+ }
448
+
449
+ &:before {
450
+ @apply psui-bg-white psui-left-0;
451
+ width: 16px;
452
+ height: calc(100% + 1px);
453
+ }
454
+
455
+ }
456
+
457
+ }
458
+ }
432
459
 
433
460
  td {
434
461
  @apply psui-pl-8 psui-text-gray-70 psui-h-10 psui-text-right psui-text-small;
@@ -446,10 +473,6 @@
446
473
  &-button {
447
474
  @apply psui-cursor-pointer psui-ml-1;
448
475
  }
449
-
450
- .is-last-deep {
451
- @apply psui-pl-4;
452
- }
453
476
  }
454
477
 
455
478
  &:first-child {
@@ -483,9 +506,47 @@
483
506
  @apply psui-h-auto psui-pt-2 psui-pb-0;
484
507
  min-height: 1rem;
485
508
  }
509
+
510
+ &.removed-class {
511
+ td {
512
+ @apply psui-bg-gray-10 psui-text-gray-40;
513
+
514
+ div:first-child {
515
+ margin-left: 4px;
516
+ }
517
+
518
+ &:first-child {
519
+ @apply psui-sticky;
520
+
521
+ &:before,
522
+ &:after {
523
+ content: '';
524
+ @apply psui-absolute psui-top-0;
525
+ }
526
+
527
+ &:before {
528
+ @apply psui-bg-white psui-left-0;
529
+ width: 16px;
530
+ height: calc(100% + 1px);
531
+ }
532
+
533
+ &:after {
534
+ @apply psui-bg-gray-10 psui-rounded-tl-full ;
535
+ box-shadow: -3px -3px 0px 0px #ffffff;
536
+ z-index: 30;
537
+ top: 0;
538
+ left: 16px;
539
+ width: 10px;
540
+ height: 10px;
541
+ }
542
+ }
543
+
544
+ }
545
+ }
546
+
486
547
  }
487
548
 
488
- &:not(.is-first) {
549
+ &:not(.is-first):not(.removed-class) {
489
550
  td {
490
551
  &:first-child {
491
552
  @apply psui-sticky;
@@ -503,7 +564,7 @@
503
564
  }
504
565
 
505
566
  &:after {
506
- @apply psui-bg-gray-20 psui-w-px psui-h-0;
567
+ @apply psui-bg-gray-20 psui-w-px psui-h-0 psui-rounded-lg;
507
568
  left: 19.5px;
508
569
  }
509
570
  }
@@ -526,10 +587,46 @@
526
587
 
527
588
  &.is-last {
528
589
  @apply psui-border-b-0;
590
+
591
+ &.removed-class {
592
+ td {
593
+ @apply psui-bg-gray-10 psui-text-gray-40 !important;
594
+
595
+ div:first-child {
596
+ margin-left: 4px;
597
+ }
598
+
599
+ &:first-child {
600
+ @apply psui-sticky;
601
+
602
+ &:before{
603
+ content: '';
604
+ @apply psui-absolute psui-top-0;
605
+ }
606
+
607
+ &:before {
608
+ @apply psui-bg-white psui-left-0;
609
+ width: 16px;
610
+ height: calc(100% + 1px);
611
+ }
612
+
613
+ &:after {
614
+ @apply psui-bg-gray-10 psui-rounded-bl-full psui-absolute psui-bottom-0 psui-overflow-hidden;
615
+ box-shadow: -3px 3px 0px 0px #fff;
616
+ content: '';
617
+ z-index: 30;
618
+ bottom: 0;
619
+ left: 16px;
620
+ width: 10px;
621
+ height: 10px;
622
+ }
623
+ }
624
+
625
+ }
626
+ }
529
627
  }
530
628
 
531
629
  &.is-active {
532
- @apply psui-bg-gray-10;
533
630
 
534
631
  td {
535
632
  padding-top: 9px;
package/src/components/table-results/PsTableResults.vue CHANGED
@@ -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
  >