@policystudio/policy-studio-ui-vue 1.1.62 → 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 +157 -27
  2. package/package.json +1 -1
  3. package/src/assets/scss/components/PsTableResults.scss +121 -16
  4. package/src/components/table-results/PsTableResults.vue +23 -11
package/dist/css/psui_styles.css CHANGED
@@ -1931,9 +1931,7 @@ video {
1931
1931
  }
1932
1932
 
1933
1933
  .psui-el-table-results-wrapper.table-flexible {
1934
- padding-left: 1rem;
1935
1934
  padding-right: 1rem;
1936
- padding-top: 0.5rem;
1937
1935
  padding-bottom: 0.5rem;
1938
1936
  border-width: 1px;
1939
1937
  --border-opacity: 1;
@@ -2376,6 +2374,9 @@ video {
2376
2374
  .psui-el-table-results.layout-flexible thead {
2377
2375
  background-color: #ffffff ;
2378
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
+ position: sticky;
2379
+ top: 0;
2379
2380
  z-index: 15;
2380
2381
  }
2381
2382
 
@@ -2395,9 +2396,6 @@ video {
2395
2396
  line-height: 130%;
2396
2397
  font-weight: 700;
2397
2398
  line-height: 1rem;
2398
- --text-opacity: 1;
2399
- color: #28323B;
2400
- color: rgba(40, 50, 59, var(--text-opacity));
2401
2399
  }
2402
2400
 
2403
2401
  .psui-el-table-results.layout-flexible thead tr th {
@@ -2420,7 +2418,13 @@ video {
2420
2418
  }
2421
2419
 
2422
2420
  .psui-el-table-results.layout-flexible thead tr th:first-child {
2423
- padding-left: 0;
2421
+ padding-left: 1rem;
2422
+ padding-right: 2rem;
2423
+ text-align: left;
2424
+ background-color: #ffffff ;
2425
+ position: sticky;
2426
+ z-index: 10;
2427
+ left: 0;
2424
2428
  }
2425
2429
 
2426
2430
  .psui-el-table-results.layout-flexible thead tr th:first-child > div {
@@ -2451,13 +2455,24 @@ video {
2451
2455
  line-height: 18px;
2452
2456
  }
2453
2457
 
2458
+ .psui-el-table-results.layout-flexible thead tr:not(:first-of-type) th .title {
2459
+ --text-opacity: 1;
2460
+ color: #28323B;
2461
+ color: rgba(40, 50, 59, var(--text-opacity));
2462
+ }
2463
+
2464
+ .psui-el-table-results.layout-flexible thead tr:not(:first-of-type) th p:not(:first-of-type) {
2465
+ --text-opacity: 1;
2466
+ color: #798490;
2467
+ color: rgba(121, 132, 144, var(--text-opacity));
2468
+ }
2469
+
2454
2470
  .psui-el-table-results.layout-flexible thead tr:not(:first-of-type) th:first-child {
2455
2471
  text-align: left;
2456
2472
  min-width: 388px;
2457
2473
  }
2458
2474
 
2459
2475
  .psui-el-table-results.layout-flexible tbody tr {
2460
- border-bottom-width: 1px;
2461
2476
  --border-opacity: 1;
2462
2477
  border-color: #E6ECF2;
2463
2478
  border-color: rgba(230, 236, 242, var(--border-opacity));
@@ -2469,6 +2484,36 @@ video {
2469
2484
  line-height: 24px;
2470
2485
  }
2471
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
+
2472
2517
  .psui-el-table-results.layout-flexible tbody tr td {
2473
2518
  padding-left: 2rem;
2474
2519
  --text-opacity: 1;
@@ -2500,15 +2545,14 @@ video {
2500
2545
  margin-left: 0.25rem;
2501
2546
  }
2502
2547
 
2503
- .psui-el-table-results.layout-flexible tbody tr td .actions .is-last-deep {
2504
- padding-left: 1rem;
2505
- }
2506
-
2507
2548
  .psui-el-table-results.layout-flexible tbody tr td:first-child {
2508
- padding-left: 0;
2549
+ padding-left: 0.5rem;
2509
2550
  padding-right: 2rem;
2510
2551
  text-align: left;
2511
2552
  display: block;
2553
+ position: sticky;
2554
+ z-index: 10;
2555
+ left: 0;
2512
2556
  padding-top: 8px;
2513
2557
  padding-bottom: 8px;
2514
2558
  }
@@ -2546,40 +2590,85 @@ video {
2546
2590
  min-height: 1rem;
2547
2591
  }
2548
2592
 
2549
- .psui-el-table-results.layout-flexible tbody tr:not(.is-first) td:first-child {
2550
- position: relative;
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));
2551
2600
  }
2552
2601
 
2553
- .psui-el-table-results.layout-flexible tbody tr:not(.is-first) td:first-child:before,
2554
- .psui-el-table-results.layout-flexible tbody tr:not(.is-first) td:first-child:after {
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 {
2638
+ position: sticky;
2639
+ }
2640
+
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 {
2555
2643
  content: '';
2556
2644
  position: absolute;
2557
2645
  top: 0;
2558
2646
  }
2559
2647
 
2560
- .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 {
2561
2649
  background-color: #ffffff ;
2562
2650
  left: 0;
2563
- width: 22px;
2651
+ width: 20px;
2564
2652
  height: calc(100% + 1px);
2565
2653
  }
2566
2654
 
2567
- .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 {
2568
2656
  --bg-opacity: 1;
2569
2657
  background-color: #E6ECF2;
2570
2658
  background-color: rgba(230, 236, 242, var(--bg-opacity));
2571
2659
  width: 1px;
2572
2660
  height: 0;
2573
- left: 11px;
2661
+ border-radius: 0.5rem;
2662
+ left: 19.5px;
2574
2663
  }
2575
2664
 
2576
- .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 {
2577
2666
  --bg-opacity: 1;
2578
2667
  background-color: #ECF7FB;
2579
2668
  background-color: rgba(236, 247, 251, var(--bg-opacity));
2580
2669
  }
2581
2670
 
2582
- .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 {
2583
2672
  height: calc(100% + 1px);
2584
2673
  }
2585
2674
 
@@ -2587,11 +2676,52 @@ video {
2587
2676
  border-bottom-width: 0;
2588
2677
  }
2589
2678
 
2590
- .psui-el-table-results.layout-flexible tbody tr.is-active {
2591
- --bg-opacity: 1;
2592
- background-color: #F3F6F9;
2593
- background-color: rgba(243, 246, 249, var(--bg-opacity));
2594
- }
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
+ }
2595
2725
 
2596
2726
  .psui-el-table-results.layout-flexible tbody tr.is-active td {
2597
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.62",
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
@@ -3,7 +3,7 @@
3
3
  @apply psui-w-full psui-whitespace-no-wrap psui-flex psui-overflow-auto;
4
4
 
5
5
  &.table-flexible {
6
- @apply psui-px-4 psui-py-2 psui-border psui-border-gray-20 psui-rounded-lg;
6
+ @apply psui-pr-4 psui-pb-2 psui-border psui-border-gray-20 psui-rounded-lg;
7
7
  }
8
8
  }
9
9
 
@@ -348,7 +348,7 @@
348
348
  }
349
349
 
350
350
  thead {
351
- @apply psui-bg-white psui-items-start psui-z-15;
351
+ @apply psui-bg-white psui-items-start psui-shadow-elevation-10 psui-sticky psui-top-0 psui-z-15;
352
352
 
353
353
  &:after {
354
354
  content: '';
@@ -358,7 +358,7 @@
358
358
 
359
359
  tr {
360
360
  .title {
361
- @apply psui-text-small psui-font-bold psui-leading-4 psui-text-gray-80;
361
+ @apply psui-text-small psui-font-bold psui-leading-4;
362
362
  }
363
363
 
364
364
  th {
@@ -372,7 +372,7 @@
372
372
  }
373
373
 
374
374
  &:first-child {
375
- padding-left: 0;
375
+ @apply psui-pl-4 psui-pr-8 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;
@@ -404,6 +404,14 @@
404
404
 
405
405
  &:not(:first-of-type) {
406
406
  th {
407
+ .title {
408
+ @apply psui-text-gray-80;
409
+ }
410
+
411
+ p:not(:first-of-type) {
412
+ @apply psui-text-gray-50;
413
+ }
414
+
407
415
  &:first-child {
408
416
  @apply psui-text-left;
409
417
  min-width: 388px;
@@ -415,12 +423,39 @@
415
423
 
416
424
  tbody {
417
425
  tr {
418
- @apply psui-border-b psui-border-gray-20;
426
+ @apply psui-border-gray-20;
419
427
 
420
428
  .title {
421
429
  @apply psui-flex psui-items-center;
422
430
  line-height: 24px;
423
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
+ }
424
459
 
425
460
  td {
426
461
  @apply psui-pl-8 psui-text-gray-70 psui-h-10 psui-text-right psui-text-small;
@@ -438,14 +473,10 @@
438
473
  &-button {
439
474
  @apply psui-cursor-pointer psui-ml-1;
440
475
  }
441
-
442
- .is-last-deep {
443
- @apply psui-pl-4;
444
- }
445
476
  }
446
477
 
447
478
  &:first-child {
448
- @apply psui-pl-0 psui-pr-8 psui-text-left psui-block;
479
+ @apply psui-pl-2 psui-pr-8 psui-text-left psui-block psui-sticky psui-z-10 psui-left-0;
449
480
  padding-top: 8px;
450
481
  padding-bottom: 8px;
451
482
  }
@@ -475,12 +506,50 @@
475
506
  @apply psui-h-auto psui-pt-2 psui-pb-0;
476
507
  min-height: 1rem;
477
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
+
478
547
  }
479
548
 
480
- &:not(.is-first) {
549
+ &:not(.is-first):not(.removed-class) {
481
550
  td {
482
551
  &:first-child {
483
- @apply psui-relative;
552
+ @apply psui-sticky;
484
553
 
485
554
  &:before,
486
555
  &:after {
@@ -490,13 +559,13 @@
490
559
 
491
560
  &:before {
492
561
  @apply psui-bg-white psui-left-0;
493
- width: 22px;
562
+ width: 20px;
494
563
  height: calc(100% + 1px);
495
564
  }
496
565
 
497
566
  &:after {
498
- @apply psui-bg-gray-20 psui-w-px psui-h-0;
499
- left: 11px;
567
+ @apply psui-bg-gray-20 psui-w-px psui-h-0 psui-rounded-lg;
568
+ left: 19.5px;
500
569
  }
501
570
  }
502
571
  }
@@ -518,10 +587,46 @@
518
587
 
519
588
  &.is-last {
520
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
+ }
521
627
  }
522
628
 
523
629
  &.is-active {
524
- @apply psui-bg-gray-10;
525
630
 
526
631
  td {
527
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
  >