@policystudio/policy-studio-ui-vue 1.1.71 → 1.1.72

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 +44 -83
  2. package/package.json +1 -1
  3. package/src/assets/scss/components/PsTableResults.scss +47 -70
  4. package/src/components/table-results/PsTableResults.vue +2 -2
package/dist/css/psui_styles.css CHANGED
@@ -1933,11 +1933,6 @@ video {
1933
1933
  .psui-el-table-results-wrapper.table-flexible {
1934
1934
  padding-right: 1rem;
1935
1935
  padding-bottom: 0.5rem;
1936
- border-width: 1px;
1937
- --border-opacity: 1;
1938
- border-color: #E6ECF2;
1939
- border-color: rgba(230, 236, 242, var(--border-opacity));
1940
- border-radius: 0.5rem;
1941
1936
  }
1942
1937
 
1943
1938
  .psui-el-table-results {
@@ -2398,7 +2393,6 @@ video {
2398
2393
  }
2399
2394
 
2400
2395
  .psui-el-table-results.layout-flexible thead tr th {
2401
- padding-left: 1rem;
2402
2396
  --text-opacity: 1;
2403
2397
  color: #798490;
2404
2398
  color: rgba(121, 132, 144, var(--text-opacity));
@@ -2417,13 +2411,12 @@ video {
2417
2411
  }
2418
2412
 
2419
2413
  .psui-el-table-results.layout-flexible thead tr th:first-child {
2420
- padding-left: 1rem;
2421
- padding-right: 1rem;
2422
2414
  text-align: left;
2423
2415
  background-color: #ffffff ;
2424
2416
  position: sticky;
2425
2417
  z-index: 10;
2426
2418
  left: 0;
2419
+ padding-left: 0;
2427
2420
  }
2428
2421
 
2429
2422
  .psui-el-table-results.layout-flexible thead tr th:first-child > div {
@@ -2444,10 +2437,18 @@ video {
2444
2437
  text-align: left;
2445
2438
  padding-top: 0;
2446
2439
  padding-bottom: 0;
2447
- min-width: 100px;
2440
+ padding-left: 10px;
2448
2441
  position: sticky;
2449
2442
  }
2450
2443
 
2444
+ .psui-el-table-results.layout-flexible thead tr:first-of-type th:first-child {
2445
+ padding-left: 0;
2446
+ }
2447
+
2448
+ .psui-el-table-results.layout-flexible thead tr:first-of-type th:first-child > div {
2449
+ max-width: 598px;
2450
+ }
2451
+
2451
2452
  .psui-el-table-results.layout-flexible thead tr:first-of-type th > div {
2452
2453
  display: flex;
2453
2454
  flex-direction: row;
@@ -2476,10 +2477,14 @@ video {
2476
2477
  line-height: 18px;
2477
2478
  }
2478
2479
 
2480
+ .psui-el-table-results.layout-flexible thead tr:not(:first-of-type) th {
2481
+ padding-left: 20px;
2482
+ }
2483
+
2479
2484
  .psui-el-table-results.layout-flexible thead tr:not(:first-of-type) th .title {
2480
2485
  --text-opacity: 1;
2481
- color: #28323B;
2482
- color: rgba(40, 50, 59, var(--text-opacity));
2486
+ color: #002A3A;
2487
+ color: rgba(0, 42, 58, var(--text-opacity));
2483
2488
  }
2484
2489
 
2485
2490
  .psui-el-table-results.layout-flexible thead tr:not(:first-of-type) th p:not(:first-of-type) {
@@ -2490,14 +2495,15 @@ video {
2490
2495
 
2491
2496
  .psui-el-table-results.layout-flexible thead tr:not(:first-of-type) th:first-child {
2492
2497
  text-align: left;
2493
- min-width: 357px;
2498
+ max-width: 330px;
2499
+ padding-left: 0;
2494
2500
  }
2495
2501
 
2496
2502
  .psui-el-table-results.layout-flexible thead tr:not(:first-of-type) th:nth-child(2) {
2497
2503
  position: sticky;
2498
2504
  z-index: 10;
2499
2505
  background-color: #ffffff ;
2500
- left:357px;
2506
+ left:330px;
2501
2507
  min-width: 140px;
2502
2508
  }
2503
2509
 
@@ -2505,7 +2511,7 @@ video {
2505
2511
  position: sticky;
2506
2512
  z-index: 10;
2507
2513
  background-color: #ffffff ;
2508
- left: 497px;
2514
+ left: 470px;
2509
2515
  }
2510
2516
 
2511
2517
  .psui-el-table-results.layout-flexible tbody tr {
@@ -2529,29 +2535,11 @@ video {
2529
2535
  color: rgba(162, 172, 183, var(--text-opacity)) !important;
2530
2536
  }
2531
2537
 
2532
- .psui-el-table-results.layout-flexible tbody tr.removed-class td div:first-child {
2533
- margin-left: 4px;
2534
- }
2535
-
2536
- .psui-el-table-results.layout-flexible tbody tr.removed-class td:first-child {
2537
- position: sticky;
2538
- }
2539
-
2540
- .psui-el-table-results.layout-flexible tbody tr.removed-class td:first-child:before {
2541
- content: '';
2542
- position: absolute;
2543
- top: 0;
2544
- }
2545
-
2546
- .psui-el-table-results.layout-flexible tbody tr.removed-class td:first-child:before {
2547
- background-color: #ffffff ;
2548
- left: 0;
2549
- width: 16px;
2550
- height: calc(100% + 1px);
2538
+ .psui-el-table-results.layout-flexible tbody tr.removed-class td:first-child > div {
2539
+ margin-left: 4px;
2551
2540
  }
2552
2541
 
2553
2542
  .psui-el-table-results.layout-flexible tbody tr td {
2554
- padding-left: 2rem;
2555
2543
  --text-opacity: 1;
2556
2544
  color: #34404A;
2557
2545
  color: rgba(52, 64, 74, var(--text-opacity));
@@ -2562,6 +2550,7 @@ video {
2562
2550
  padding-top: 0.688rem;
2563
2551
  padding-bottom: 0.688rem;
2564
2552
  min-height: 41.5px;
2553
+ padding-left: 20px;
2565
2554
  }
2566
2555
 
2567
2556
  .psui-el-table-results.layout-flexible tbody tr td > div {
@@ -2578,11 +2567,9 @@ video {
2578
2567
 
2579
2568
  .psui-el-table-results.layout-flexible tbody tr td .actions-button {
2580
2569
  cursor: pointer;
2581
- margin-left: 0.25rem;
2582
2570
  }
2583
2571
 
2584
2572
  .psui-el-table-results.layout-flexible tbody tr td:first-child {
2585
- padding-left: 0.5rem;
2586
2573
  padding-right: 2rem;
2587
2574
  text-align: left;
2588
2575
  display: block;
@@ -2591,14 +2578,15 @@ video {
2591
2578
  left: 0;
2592
2579
  padding-top: 8px;
2593
2580
  padding-bottom: 8px;
2594
- min-width: 357px;
2581
+ max-width: 330px;
2582
+ padding-left: 0px;
2595
2583
  }
2596
2584
 
2597
2585
  .psui-el-table-results.layout-flexible tbody tr td:nth-child(2) {
2598
2586
  position: sticky;
2599
2587
  z-index: 10;
2600
2588
  min-width: 140px;
2601
- left: 357px;
2589
+ left: 330px;
2602
2590
  }
2603
2591
 
2604
2592
  .psui-el-table-results.layout-flexible tbody tr td:nth-child(2) > div {
@@ -2609,8 +2597,7 @@ video {
2609
2597
  position: sticky;
2610
2598
  z-index: 10;
2611
2599
  min-width: 140px;
2612
- left: 497px;
2613
- padding-right: 22px;
2600
+ left: 470px;
2614
2601
  }
2615
2602
 
2616
2603
  .psui-el-table-results.layout-flexible tbody tr td:nth-child(3) > div {
@@ -2659,28 +2646,24 @@ video {
2659
2646
  color: rgba(162, 172, 183, var(--text-opacity));
2660
2647
  }
2661
2648
 
2662
- .psui-el-table-results.layout-flexible tbody tr.is-first.removed-class td div:first-child {
2663
- margin-left: 4px;
2649
+ .psui-el-table-results.layout-flexible tbody tr.is-first.removed-class td .title {
2650
+ margin-left: 6px;
2651
+ }
2652
+
2653
+ .psui-el-table-results.layout-flexible tbody tr.is-first.removed-class td .actions-button {
2654
+ margin-left: 2px;
2664
2655
  }
2665
2656
 
2666
2657
  .psui-el-table-results.layout-flexible tbody tr.is-first.removed-class td:first-child {
2667
2658
  position: sticky;
2668
2659
  }
2669
2660
 
2670
- .psui-el-table-results.layout-flexible tbody tr.is-first.removed-class td:first-child:before,
2671
- .psui-el-table-results.layout-flexible tbody tr.is-first.removed-class td:first-child:after {
2661
+ .psui-el-table-results.layout-flexible tbody tr.is-first.removed-class td:first-child:after {
2672
2662
  content: '';
2673
2663
  position: absolute;
2674
2664
  top: 0;
2675
2665
  }
2676
2666
 
2677
- .psui-el-table-results.layout-flexible tbody tr.is-first.removed-class td:first-child:before {
2678
- background-color: #ffffff ;
2679
- left: 0;
2680
- width: 16px;
2681
- height: calc(100% + 1px);
2682
- }
2683
-
2684
2667
  .psui-el-table-results.layout-flexible tbody tr.is-first.removed-class td:first-child:after {
2685
2668
  --bg-opacity: 1;
2686
2669
  background-color: #F3F6F9;
@@ -2689,7 +2672,7 @@ video {
2689
2672
  box-shadow: -3px -3px 0px 0px #ffffff;
2690
2673
  z-index: 30;
2691
2674
  top: 0;
2692
- left: 16px;
2675
+ left: 0;
2693
2676
  width: 10px;
2694
2677
  height: 10px;
2695
2678
  }
@@ -2705,13 +2688,6 @@ video {
2705
2688
  top: 0;
2706
2689
  }
2707
2690
 
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
2691
  .psui-el-table-results.layout-flexible tbody tr.is-first.removed-class.closed td:first-child:after {
2716
2692
  --bg-opacity: 1;
2717
2693
  background-color: #F3F6F9;
@@ -2719,13 +2695,15 @@ video {
2719
2695
  border-top-left-radius: 9999px;
2720
2696
  border-bottom-left-radius: 9999px;
2721
2697
  box-shadow: -8px 0px 0px 4px #ffffff;
2722
- z-index: 30;
2723
2698
  top: 0;
2724
- left: 16px;
2725
- width: 10px;
2699
+ left: 0px;
2726
2700
  height: calc(100%);
2727
2701
  }
2728
2702
 
2703
+ .psui-el-table-results.layout-flexible tbody tr.is-first.removed-class.closed td:first-child .actions-button {
2704
+ margin-left: 2px;
2705
+ }
2706
+
2729
2707
  .psui-el-table-results.layout-flexible tbody tr:not(.is-first):not(.removed-class) td:first-child {
2730
2708
  position: sticky;
2731
2709
  }
@@ -2740,7 +2718,7 @@ video {
2740
2718
  .psui-el-table-results.layout-flexible tbody tr:not(.is-first):not(.removed-class) td:first-child:before {
2741
2719
  background-color: #ffffff ;
2742
2720
  left: 0;
2743
- width: 30px;
2721
+ width: 14px;
2744
2722
  height: calc(100% + 1px);
2745
2723
  }
2746
2724
 
@@ -2751,7 +2729,7 @@ video {
2751
2729
  width: 1px;
2752
2730
  height: 0;
2753
2731
  border-radius: 0.5rem;
2754
- left: 19.5px;
2732
+ left: 8px;
2755
2733
  }
2756
2734
 
2757
2735
  .psui-el-table-results.layout-flexible tbody tr:not(.is-first):not(.removed-class):hover td {
@@ -2765,7 +2743,7 @@ video {
2765
2743
  }
2766
2744
 
2767
2745
  .psui-el-table-results.layout-flexible tbody tr:not(.is-first) td:first-child > div {
2768
- margin-left: 16px;
2746
+ margin-left: 10px;
2769
2747
  }
2770
2748
 
2771
2749
  .psui-el-table-results.layout-flexible tbody tr.is-last {
@@ -2781,27 +2759,10 @@ video {
2781
2759
  color: rgba(162, 172, 183, var(--text-opacity)) !important;
2782
2760
  }
2783
2761
 
2784
- .psui-el-table-results.layout-flexible tbody tr.is-last.removed-class td div:first-child {
2785
- margin-left: 4px;
2786
- }
2787
-
2788
2762
  .psui-el-table-results.layout-flexible tbody tr.is-last.removed-class td:first-child {
2789
2763
  position: sticky;
2790
2764
  }
2791
2765
 
2792
- .psui-el-table-results.layout-flexible tbody tr.is-last.removed-class td:first-child:before{
2793
- content: '';
2794
- position: absolute;
2795
- top: 0;
2796
- }
2797
-
2798
- .psui-el-table-results.layout-flexible tbody tr.is-last.removed-class td:first-child:before {
2799
- background-color: #ffffff ;
2800
- left: 0;
2801
- width: 16px;
2802
- height: calc(100% + 1px);
2803
- }
2804
-
2805
2766
  .psui-el-table-results.layout-flexible tbody tr.is-last.removed-class td:first-child:after {
2806
2767
  --bg-opacity: 1;
2807
2768
  background-color: #F3F6F9;
@@ -2814,7 +2775,7 @@ video {
2814
2775
  content: '';
2815
2776
  z-index: 30;
2816
2777
  bottom: 0;
2817
- left: 16px;
2778
+ left: 0;
2818
2779
  width: 10px;
2819
2780
  height: 10px;
2820
2781
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@policystudio/policy-studio-ui-vue",
3
- "version": "1.1.71",
3
+ "version": "1.1.72",
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-pr-4 psui-pb-2 psui-border psui-border-gray-20 psui-rounded-lg;
6
+ @apply psui-pr-4 psui-pb-2;
7
7
  }
8
8
  }
9
9
 
@@ -362,7 +362,7 @@
362
362
  }
363
363
 
364
364
  th {
365
- @apply psui-pl-4 psui-text-gray-50 psui-text-right psui-w-auto psui-align-top;
365
+ @apply 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,8 +372,8 @@
372
372
  }
373
373
 
374
374
  &:first-child {
375
- @apply psui-pl-4 psui-pr-4 psui-text-left psui-bg-white psui-sticky psui-z-10 psui-left-0;
376
-
375
+ @apply psui-text-left psui-bg-white psui-sticky psui-z-10 psui-left-0;
376
+ padding-left: 0;
377
377
 
378
378
  > div {
379
379
  @apply psui-items-start;
@@ -399,8 +399,16 @@
399
399
  @apply psui-text-left;
400
400
  padding-top: 0;
401
401
  padding-bottom: 0;
402
- min-width: 100px;
402
+ padding-left: 10px;
403
403
  position: sticky;
404
+
405
+ &:first-child {
406
+ padding-left: 0;
407
+
408
+ > div {
409
+ max-width: 598px;
410
+ }
411
+ }
404
412
 
405
413
  > div {
406
414
  @apply psui-flex psui-flex-row psui-border-b psui-border-gray-30;
@@ -422,8 +430,10 @@
422
430
 
423
431
  &:not(:first-of-type) {
424
432
  th {
433
+ padding-left: 20px;
434
+
425
435
  .title {
426
- @apply psui-text-gray-80;
436
+ @apply psui-text-blue-80;
427
437
  }
428
438
 
429
439
  p:not(:first-of-type) {
@@ -432,18 +442,19 @@
432
442
 
433
443
  &:first-child {
434
444
  @apply psui-text-left;
435
- min-width: 357px;
445
+ max-width: 330px;
446
+ padding-left: 0;
436
447
  }
437
448
 
438
449
  &:nth-child(2) {
439
450
  @apply psui-sticky psui-z-10 psui-bg-white;
440
- left:357px;
451
+ left:330px;
441
452
  min-width: 140px;
442
453
  }
443
454
 
444
455
  &:nth-child(3) {
445
456
  @apply psui-sticky psui-z-10 psui-bg-white;
446
- left: 497px;
457
+ left: 470px;
447
458
  }
448
459
  }
449
460
  }
@@ -462,35 +473,21 @@
462
473
  &.removed-class {
463
474
  td {
464
475
  @apply psui-bg-gray-10 psui-text-gray-40 !important;
465
-
466
- div:first-child {
467
- margin-left: 4px;
468
- }
469
-
470
476
  &:first-child {
471
- @apply psui-sticky;
472
-
473
- &:before {
474
- content: '';
475
- @apply psui-absolute psui-top-0;
476
- }
477
-
478
- &:before {
479
- @apply psui-bg-white psui-left-0;
480
- width: 16px;
481
- height: calc(100% + 1px);
477
+ > div {
478
+ margin-left: 4px;
482
479
  }
483
-
484
- }
480
+ }
485
481
  }
486
482
 
487
483
  }
488
484
 
489
485
  td {
490
- @apply psui-pl-8 psui-text-gray-70 psui-h-10 psui-text-right psui-text-small;
486
+ @apply psui-text-gray-70 psui-h-10 psui-text-right psui-text-small;
491
487
  padding-top: 0.688rem;
492
488
  padding-bottom: 0.688rem;
493
489
  min-height: 41.5px;
490
+ padding-left: 20px;
494
491
 
495
492
  > div {
496
493
  @apply psui-flex psui-items-center;
@@ -500,21 +497,22 @@
500
497
  @apply psui-flex psui-items-center psui-h-full psui-relative;
501
498
 
502
499
  &-button {
503
- @apply psui-cursor-pointer psui-ml-1;
500
+ @apply psui-cursor-pointer;
504
501
  }
505
502
  }
506
503
 
507
504
  &:first-child {
508
- @apply psui-pl-2 psui-pr-8 psui-text-left psui-block psui-sticky psui-z-10 psui-left-0;
505
+ @apply psui-pr-8 psui-text-left psui-block psui-sticky psui-z-10 psui-left-0;
509
506
  padding-top: 8px;
510
507
  padding-bottom: 8px;
511
- min-width: 357px;
508
+ max-width: 330px;
509
+ padding-left: 0px;
512
510
  }
513
511
 
514
512
  &:nth-child(2) {
515
513
  @apply psui-sticky psui-z-10;
516
514
  min-width: 140px;
517
- left: 357px;
515
+ left: 330px;
518
516
  > div {
519
517
  @apply psui-justify-center;
520
518
  }
@@ -523,8 +521,7 @@
523
521
  &:nth-child(3) {
524
522
  @apply psui-sticky psui-z-10;
525
523
  min-width: 140px;
526
- left: 497px;
527
- padding-right: 22px;
524
+ left: 470px;
528
525
  > div {
529
526
  @apply psui-justify-center;
530
527
  }
@@ -559,32 +556,29 @@
559
556
  &.removed-class {
560
557
  td {
561
558
  @apply psui-bg-gray-10 psui-text-gray-40;
559
+
560
+ .title {
561
+ margin-left: 6px;
562
+ }
562
563
 
563
- div:first-child {
564
- margin-left: 4px;
564
+ .actions-button {
565
+ margin-left: 2px;
565
566
  }
566
567
 
567
568
  &:first-child {
568
569
  @apply psui-sticky;
569
570
 
570
- &:before,
571
571
  &:after {
572
572
  content: '';
573
573
  @apply psui-absolute psui-top-0;
574
574
  }
575
575
 
576
- &:before {
577
- @apply psui-bg-white psui-left-0;
578
- width: 16px;
579
- height: calc(100% + 1px);
580
- }
581
-
582
576
  &:after {
583
577
  @apply psui-bg-gray-10 psui-rounded-tl-full ;
584
578
  box-shadow: -3px -3px 0px 0px #ffffff;
585
579
  z-index: 30;
586
580
  top: 0;
587
- left: 16px;
581
+ left: 0;
588
582
  width: 10px;
589
583
  height: 10px;
590
584
  }
@@ -602,21 +596,17 @@
602
596
  @apply psui-absolute psui-top-0;
603
597
  }
604
598
 
605
- &:before {
606
- @apply psui-bg-white psui-left-0;
607
- width: 16px;
608
- height: calc(100% + 1px);
609
- }
610
-
611
599
  &:after {
612
600
  @apply psui-bg-gray-10 psui-rounded-tl-full psui-rounded-bl-full;
613
601
  box-shadow: -8px 0px 0px 4px #ffffff;
614
- z-index: 30;
615
602
  top: 0;
616
- left: 16px;
617
- width: 10px;
603
+ left: 0px;
618
604
  height: calc(100%);
619
605
  }
606
+
607
+ .actions-button {
608
+ margin-left: 2px;
609
+ }
620
610
  }
621
611
  }
622
612
  }
@@ -637,13 +627,13 @@
637
627
 
638
628
  &:before {
639
629
  @apply psui-bg-white psui-left-0;
640
- width: 30px;
630
+ width: 14px;
641
631
  height: calc(100% + 1px);
642
632
  }
643
633
 
644
634
  &:after {
645
635
  @apply psui-bg-gray-20 psui-w-px psui-h-0 psui-rounded-lg;
646
- left: 19.5px;
636
+ left: 8px;
647
637
  }
648
638
  }
649
639
  }
@@ -667,7 +657,7 @@
667
657
  td {
668
658
  &:first-child {
669
659
  > div {
670
- margin-left: 16px;
660
+ margin-left: 10px;
671
661
  }
672
662
  }
673
663
  }
@@ -680,23 +670,10 @@
680
670
  td {
681
671
  @apply psui-bg-gray-10 psui-text-gray-40 !important;
682
672
 
683
- div:first-child {
684
- margin-left: 4px;
685
- }
686
673
 
687
674
  &:first-child {
688
675
  @apply psui-sticky;
689
-
690
- &:before{
691
- content: '';
692
- @apply psui-absolute psui-top-0;
693
- }
694
676
 
695
- &:before {
696
- @apply psui-bg-white psui-left-0;
697
- width: 16px;
698
- height: calc(100% + 1px);
699
- }
700
677
 
701
678
  &:after {
702
679
  @apply psui-bg-gray-10 psui-rounded-bl-full psui-absolute psui-bottom-0 psui-overflow-hidden;
@@ -704,7 +681,7 @@
704
681
  content: '';
705
682
  z-index: 30;
706
683
  bottom: 0;
707
- left: 16px;
684
+ left: 0;
708
685
  width: 10px;
709
686
  height: 10px;
710
687
  }
package/src/components/table-results/PsTableResults.vue CHANGED
@@ -185,8 +185,7 @@
185
185
  </template>
186
186
  </PsDropdown>
187
187
  </div>
188
- </div>
189
-
188
+ </div>
190
189
  </td>
191
190
 
192
191
  <template v-for="(columnGroup, indexColumn) of columnGroups">
@@ -580,6 +579,7 @@ export default {
580
579
  this.isHoveringRow = index
581
580
  },
582
581
  shouldShowIcon(item) {
582
+ console.log('item',item)
583
583
  if(item?.actions?.length === 1) return true
584
584
  else return false
585
585
  },