@policystudio/policy-studio-ui-vue 1.2.0-access.25 → 1.2.0-access.26

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.
@@ -2458,7 +2458,8 @@ video {
2458
2458
  margin-bottom: 0.125rem;
2459
2459
  margin-left: -0.094rem;
2460
2460
  }
2461
- .psui-el-table-results.layout-results tr th:last-child, .psui-el-table-results.layout-results tr td:last-child {
2461
+ .psui-el-table-results.layout-results tr th:last-child,
2462
+ .psui-el-table-results.layout-results tr td:last-child {
2462
2463
  padding-right: 0.5rem;
2463
2464
  }
2464
2465
  .psui-el-table-results.layout-results thead {
@@ -2512,7 +2513,7 @@ video {
2512
2513
  line-height: 20px;
2513
2514
  }
2514
2515
  .psui-el-table-results.layout-results thead tr .title {
2515
- font-weight: 700;
2516
+ font-weight: 600;
2516
2517
  }
2517
2518
  .psui-el-table-results.layout-results thead tr .title {
2518
2519
  line-height: 1rem;
@@ -2542,12 +2543,16 @@ video {
2542
2543
  padding-bottom: 13px;
2543
2544
  }
2544
2545
  .psui-el-table-results.layout-results thead tr th .description {
2545
- font-size: 12px;
2546
- line-height: 130%;
2546
+ font-size: 14px;
2547
+ line-height: 20px;
2547
2548
  }
2548
2549
  .psui-el-table-results.layout-results thead tr th .description {
2549
2550
  font-weight: 400;
2550
2551
  }
2552
+ .psui-el-table-results.layout-results thead tr th .description {
2553
+ --tw-text-opacity: 1;
2554
+ color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
2555
+ }
2551
2556
  .psui-el-table-results.layout-results thead tr th .description {
2552
2557
  line-height: 110%;
2553
2558
  }
@@ -2574,7 +2579,7 @@ video {
2574
2579
  text-align: left;
2575
2580
  }
2576
2581
  .psui-el-table-results.layout-results thead tr th:first-child {
2577
- box-shadow: inset -1px 0px 0px #EBEEF0;
2582
+ box-shadow: inset -1px 0px 0px #ebeef0;
2578
2583
  min-width: 300px;
2579
2584
  }
2580
2585
  .psui-el-table-results.layout-results thead tr th:first-child > div {
@@ -2712,7 +2717,7 @@ video {
2712
2717
  text-align: left;
2713
2718
  }
2714
2719
  .psui-el-table-results.layout-results tbody tr td:first-child {
2715
- box-shadow: inset -1px 0px 0px #EBEEF0;
2720
+ box-shadow: inset -1px 0px 0px #ebeef0;
2716
2721
  padding-top: 8px;
2717
2722
  padding-bottom: 8px;
2718
2723
  }
@@ -2729,7 +2734,8 @@ video {
2729
2734
  box-shadow: 3px 0px 10px 0px rgba(0, 0, 0, 0.15);
2730
2735
  border-right-color: transparent;
2731
2736
  }
2732
- .psui-el-table-results.layout-comparison tr th, .psui-el-table-results.layout-comparison tr td {
2737
+ .psui-el-table-results.layout-comparison tr th,
2738
+ .psui-el-table-results.layout-comparison tr td {
2733
2739
  position: relative;
2734
2740
  }
2735
2741
  .psui-el-table-results.layout-comparison thead {
@@ -2805,7 +2811,7 @@ video {
2805
2811
  content: "";
2806
2812
  right: -1px;
2807
2813
  height: calc(100% + 0.5rem);
2808
- background-color: #C3CAD1;
2814
+ background-color: #c3cad1;
2809
2815
  }
2810
2816
  .psui-el-table-results.layout-comparison thead tr:not(:first-of-type) th:last-child:after {
2811
2817
  display: none;
@@ -2845,7 +2851,7 @@ video {
2845
2851
  content: "";
2846
2852
  width: 1px;
2847
2853
  height: calc(100% + 0.5rem);
2848
- background-color: #C3CAD1;
2854
+ background-color: #c3cad1;
2849
2855
  }
2850
2856
  .psui-el-table-results.layout-comparison thead tr:first-of-type th:first-child {
2851
2857
  position: sticky;
@@ -2905,7 +2911,7 @@ video {
2905
2911
  position: relative;
2906
2912
  }
2907
2913
  .psui-el-table-results.layout-comparison tbody tr td {
2908
- border-right: 1px solid #C8D0D9;
2914
+ border-right: 1px solid #c8d0d9;
2909
2915
  }
2910
2916
  .psui-el-table-results.layout-comparison tbody tr td > div {
2911
2917
  position: relative;
@@ -2953,7 +2959,7 @@ video {
2953
2959
  }
2954
2960
  .psui-el-table-results.layout-comparison tbody tr td .badge {
2955
2961
  width: 28px;
2956
- background-color: #D3EFDE;
2962
+ background-color: #d3efde;
2957
2963
  }
2958
2964
  .psui-el-table-results.layout-comparison tbody tr td:before, .psui-el-table-results.layout-comparison tbody tr td:after {
2959
2965
  content: "";
@@ -3034,7 +3040,8 @@ video {
3034
3040
  .psui-el-table-results.layout-comparison tbody tr:not(.is-first).opened {
3035
3041
  border-bottom-width: 14px;
3036
3042
  }
3037
- .psui-el-table-results.layout-flexible tr th:last-child, .psui-el-table-results.layout-flexible tr td:last-child {
3043
+ .psui-el-table-results.layout-flexible tr th:last-child,
3044
+ .psui-el-table-results.layout-flexible tr td:last-child {
3038
3045
  padding-right: 0.5rem;
3039
3046
  }
3040
3047
  .psui-el-table-results.layout-flexible thead {
@@ -3137,7 +3144,7 @@ video {
3137
3144
  right: 0;
3138
3145
  width: 1px;
3139
3146
  height: 100%;
3140
- background-color: #D6DDE5;
3147
+ background-color: #d6dde5;
3141
3148
  }
3142
3149
  .psui-el-table-results.layout-flexible thead tr:first-of-type th {
3143
3150
  text-align: left;
@@ -3278,7 +3285,7 @@ video {
3278
3285
  margin-left: 4px;
3279
3286
  }
3280
3287
  .psui-el-table-results.layout-flexible tbody tr.is-disabled td.hover-color {
3281
- background-color: #E6ECF2 !important;
3288
+ background-color: #e6ecf2 !important;
3282
3289
  opacity: 0.99;
3283
3290
  transition: background-color 0.5s ease;
3284
3291
  }
@@ -3297,7 +3304,7 @@ video {
3297
3304
  color: rgb(52, 64, 74, var(--tw-text-opacity, 1));
3298
3305
  }
3299
3306
  .psui-el-table-results.layout-flexible tbody tr td.hover-color {
3300
- background-color: #ECF7FB !important;
3307
+ background-color: #ecf7fb !important;
3301
3308
  opacity: 0.99;
3302
3309
  transition: background-color 0.5s ease;
3303
3310
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@policystudio/policy-studio-ui-vue",
3
- "version": "1.2.0-access.25",
3
+ "version": "1.2.0-access.26",
4
4
  "description": "Policy Studio UI",
5
5
  "author": "Policy Studio Team",
6
6
  "scripts": {
@@ -1,4 +1,4 @@
1
- @layer components{
1
+ @layer components {
2
2
  .psui-el-table-results-wrapper {
3
3
  @apply psui-w-full psui-whitespace-nowrap psui-flex psui-overflow-auto;
4
4
 
@@ -27,61 +27,62 @@
27
27
 
28
28
  &.layout-results {
29
29
  tr {
30
- th, td {
30
+ th,
31
+ td {
31
32
  &:last-child {
32
33
  @apply psui-pr-2;
33
34
  }
34
35
  }
35
36
  }
36
-
37
+
37
38
  thead {
38
39
  @apply psui-bg-white psui-items-start psui-shadow-elevation-10 psui-sticky psui-top-0 psui-z-15;
39
-
40
+
40
41
  &:after {
41
42
  content: '';
42
43
  @apply psui-inline-block psui-absolute psui-top-0 psui-w-2 psui-h-full psui-bg-white;
43
44
  right: -8px;
44
45
  }
45
-
46
+
46
47
  tr {
47
48
  .title {
48
- @apply psui-text-14 psui-font-bold psui-leading-4 psui-text-gray-80;
49
+ @apply psui-text-14 psui-font-semibold psui-leading-4 psui-text-gray-80;
49
50
  }
50
-
51
+
51
52
  th {
52
53
  @apply psui-pl-6 psui-text-gray-50 psui-text-right psui-w-auto psui-align-top;
53
54
  padding-top: 13px;
54
55
  padding-bottom: 13px;
55
-
56
+
56
57
  .description {
57
- @apply psui-text-xsmall psui-font-normal;
58
+ @apply psui-text-14 psui-text-gray-60 psui-font-normal;
58
59
  line-height: 110%;
59
60
  }
60
-
61
+
61
62
  &:first-child {
62
63
  @apply psui-pl-0 psui-pr-8 psui-text-left psui-bg-white psui-sticky psui-z-10 psui-left-0;
63
- box-shadow: inset -1px 0px 0px #EBEEF0;
64
+ box-shadow: inset -1px 0px 0px #ebeef0;
64
65
  min-width: 300px;
65
-
66
+
66
67
  > div {
67
68
  @apply psui-pl-0;
68
69
  }
69
70
  }
70
71
  }
71
-
72
+
72
73
  &:first-of-type {
73
74
  th {
74
75
  @apply psui-text-left;
75
76
  padding-top: 0;
76
77
  padding-bottom: 0;
77
-
78
+
78
79
  > div {
79
80
  @apply psui-flex psui-flex-row psui-border-b psui-border-gray-30;
80
81
  padding-top: 0.688rem;
81
82
  padding-bottom: 0.688rem;
82
83
  }
83
84
  }
84
-
85
+
85
86
  p {
86
87
  @apply psui-text-16;
87
88
  line-height: 18px;
@@ -89,53 +90,53 @@
89
90
  }
90
91
  }
91
92
  }
92
-
93
+
93
94
  tbody {
94
95
  tr {
95
96
  @apply psui-border-b psui-border-gray-20;
96
-
97
+
97
98
  &.is-first {
98
99
  .title {
99
100
  @apply psui-font-bold psui-text-gray-80;
100
101
  }
101
102
  }
102
-
103
+
103
104
  .title {
104
105
  @apply psui-flex psui-items-center;
105
106
  line-height: 24px;
106
107
  }
107
-
108
+
108
109
  td {
109
110
  @apply psui-pl-8 psui-text-gray-80 psui-h-10 psui-text-right psui-text-14;
110
111
  padding-top: 0.688rem;
111
112
  padding-bottom: 0.688rem;
112
113
  min-height: 41.5px;
113
-
114
+
114
115
  > div {
115
116
  @apply psui-flex psui-items-center;
116
117
  }
117
-
118
+
118
119
  .actions {
119
120
  @apply psui-flex psui-items-center psui-h-full psui-relative;
120
-
121
+
121
122
  &-button {
122
123
  @apply psui-cursor-pointer psui-ml-1;
123
124
  }
124
-
125
+
125
126
  .is-last-deep {
126
127
  @apply psui-pl-10;
127
128
  }
128
129
  }
129
-
130
+
130
131
  &:not(:first-child) {
131
132
  > div {
132
133
  @apply psui-justify-end;
133
134
  }
134
135
  }
135
-
136
+
136
137
  &:first-child {
137
138
  @apply psui-pl-0 psui-pr-8 psui-text-left psui-block psui-bg-white psui-sticky psui-z-10 psui-left-0;
138
- box-shadow: inset -1px 0px 0px #EBEEF0;
139
+ box-shadow: inset -1px 0px 0px #ebeef0;
139
140
  padding-top: 8px;
140
141
  padding-bottom: 8px;
141
142
  }
@@ -153,7 +154,6 @@
153
154
  }
154
155
 
155
156
  &.layout-comparison {
156
-
157
157
  &.is-sticky {
158
158
  tr:first-of-type th:first-child,
159
159
  td:first-child {
@@ -163,7 +163,8 @@
163
163
  }
164
164
 
165
165
  tr {
166
- th, td {
166
+ th,
167
+ td {
167
168
  @apply psui-relative;
168
169
  }
169
170
  }
@@ -174,18 +175,18 @@
174
175
  div {
175
176
  @apply psui-relative;
176
177
  }
177
-
178
+
178
179
  tr {
179
180
  .title {
180
181
  @apply psui-text-14 psui-font-bold psui-leading-4 psui-text-gray-80;
181
182
  }
182
-
183
+
183
184
  th {
184
185
  @apply psui-px-6 psui-py-4 psui-text-gray-50 psui-text-center psui-align-top;
185
186
  padding-top: 0.688rem;
186
187
  padding-bottom: 0.188rem;
187
188
  min-width: 200px;
188
-
189
+
189
190
  .description {
190
191
  @apply psui-text-xsmall psui-font-normal;
191
192
  line-height: 110%;
@@ -199,15 +200,15 @@
199
200
  content: '';
200
201
  right: -1px;
201
202
  height: calc(100% + 0.5rem);
202
- background-color: #C3CAD1;
203
+ background-color: #c3cad1;
203
204
  }
204
205
 
205
- &:last-child:after {
206
- display: none;
206
+ &:last-child:after {
207
+ display: none;
207
208
  }
208
209
  }
209
210
  }
210
-
211
+
211
212
  &:first-of-type {
212
213
  th {
213
214
  @apply psui-text-left psui-text-gray-50 psui-text-16 psui-px-6;
@@ -219,7 +220,7 @@
219
220
  content: '';
220
221
  width: 1px;
221
222
  height: calc(100% + 0.5rem);
222
- background-color: #C3CAD1;
223
+ background-color: #c3cad1;
223
224
  }
224
225
 
225
226
  &:first-child {
@@ -236,11 +237,11 @@
236
237
  }
237
238
  }
238
239
 
239
- &:last-child:after {
240
- display: none;
240
+ &:last-child:after {
241
+ display: none;
241
242
  }
242
243
  }
243
-
244
+
244
245
  p {
245
246
  @apply psui-text-14;
246
247
  line-height: 18px;
@@ -259,7 +260,7 @@
259
260
 
260
261
  td {
261
262
  @apply psui-relative;
262
- border-right: 1px solid #C8D0D9;
263
+ border-right: 1px solid #c8d0d9;
263
264
 
264
265
  > div {
265
266
  position: relative;
@@ -274,7 +275,7 @@
274
275
  .badge {
275
276
  @apply psui-flex psui-items-center psui-justify-center psui-rounded psui-h-6;
276
277
  width: 28px;
277
- background-color: #D3EFDE;
278
+ background-color: #d3efde;
278
279
  }
279
280
 
280
281
  &:before,
@@ -287,9 +288,11 @@
287
288
  }
288
289
 
289
290
  &:before {
290
- top: 0;
291
+ top: 0;
291
292
  height: 100%;
292
- box-shadow: 0px 0px 4px rgb(0 0 0 / 3%), 0px 1px 2px rgb(0 0 0 / 10%);
293
+ box-shadow:
294
+ 0px 0px 4px rgb(0 0 0 / 3%),
295
+ 0px 1px 2px rgb(0 0 0 / 10%);
293
296
  z-index: 1;
294
297
  }
295
298
 
@@ -321,7 +324,6 @@
321
324
 
322
325
  &.is-first {
323
326
  &.opened {
324
-
325
327
  td {
326
328
  &:first-child {
327
329
  @apply psui-rounded-bl-none;
@@ -353,24 +355,24 @@
353
355
  }
354
356
 
355
357
  &.layout-flexible {
356
-
357
358
  tr {
358
- th, td {
359
+ th,
360
+ td {
359
361
  &:last-child {
360
362
  @apply psui-pr-2;
361
363
  }
362
364
  }
363
365
  }
364
-
366
+
365
367
  thead {
366
368
  @apply psui-bg-white psui-items-start psui-sticky psui-top-0 psui-z-15;
367
-
369
+
368
370
  &:after {
369
371
  content: '';
370
372
  @apply psui-inline-block psui-absolute psui-top-0 psui-w-2 psui-h-full psui-bg-white;
371
373
  right: -8px;
372
374
  }
373
-
375
+
374
376
  tr {
375
377
  .title {
376
378
  @apply psui-text-14 psui-leading-4;
@@ -400,11 +402,10 @@
400
402
  right: 0;
401
403
  width: 1px;
402
404
  height: calc(100%);
403
- background-color: #D6DDE5;
405
+ background-color: #d6dde5;
404
406
  }
405
407
  }
406
408
  }
407
-
408
409
  }
409
410
 
410
411
  &:first-of-type {
@@ -419,17 +420,16 @@
419
420
  padding-left: 0;
420
421
  width: 598px;
421
422
  }
422
-
423
+
423
424
  > div {
424
425
  @apply psui-flex psui-flex-row psui-border-b psui-border-gray-30 psui-py-2;
425
426
 
426
- > .title {
427
+ > .title {
427
428
  @apply psui-text-accentSmall psui-text-blue-80 psui-font-bold psui-uppercase;
428
-
429
- }
429
+ }
430
430
  }
431
431
  }
432
-
432
+
433
433
  p {
434
434
  @apply psui-text-16;
435
435
  line-height: 18px;
@@ -439,17 +439,16 @@
439
439
  &:not(:first-of-type) {
440
440
  th {
441
441
  &:not(:first-of-type) {
442
- > div {
442
+ > div {
443
443
  > div {
444
444
  @apply psui-mx-auto;
445
445
  }
446
- }
446
+ }
447
447
  }
448
448
 
449
- > div {
449
+ > div {
450
450
  @apply psui-border-b psui-border-gray-20 psui-pr-[20px];
451
-
452
- }
451
+ }
453
452
 
454
453
  .title {
455
454
  @apply psui-text-blue-80;
@@ -470,7 +469,7 @@
470
469
  left: 352px;
471
470
  min-width: 140px;
472
471
  }
473
-
472
+
474
473
  &:nth-child(3) {
475
474
  @apply psui-sticky psui-z-10 psui-bg-white;
476
475
  left: 492px;
@@ -479,12 +478,12 @@
479
478
  }
480
479
  }
481
480
  }
482
-
481
+
483
482
  tbody {
484
483
  tr {
485
484
  @apply psui-border-gray-20;
486
485
  transition: background-color 0.5s ease;
487
-
486
+
488
487
  .title {
489
488
  @apply psui-flex psui-items-center;
490
489
  line-height: 24px;
@@ -499,27 +498,25 @@
499
498
  > div {
500
499
  margin-left: 4px;
501
500
  }
502
- }
501
+ }
503
502
  }
504
503
  }
505
504
 
506
-
507
505
  &.is-disabled {
508
506
  td {
509
507
  &.hover-color {
510
- background-color: #E6ECF2 !important;
508
+ background-color: #e6ecf2 !important;
511
509
  opacity: 0.99;
512
510
  transition: background-color 0.5s ease;
513
511
  }
514
512
  }
515
513
  }
516
514
 
517
-
518
515
  td {
519
- @apply psui-text-gray-70 psui-h-[32px] psui-text-right psui-text-14;
516
+ @apply psui-text-gray-70 psui-h-[32px] psui-text-right psui-text-14;
520
517
 
521
518
  &.hover-color {
522
- background-color: #ECF7FB !important;
519
+ background-color: #ecf7fb !important;
523
520
  opacity: 0.99;
524
521
  transition: background-color 0.5s ease;
525
522
  }
@@ -527,15 +524,15 @@
527
524
  > div {
528
525
  @apply psui-flex psui-items-center;
529
526
  }
530
-
527
+
531
528
  .actions {
532
529
  @apply psui-flex psui-items-center psui-h-full psui-relative;
533
-
530
+
534
531
  &-button {
535
532
  @apply psui-cursor-pointer;
536
533
  }
537
534
  }
538
-
535
+
539
536
  &:first-child {
540
537
  @apply psui-pr-8 psui-text-left psui-block psui-sticky psui-z-10 psui-left-0;
541
538
  width: 352px;
@@ -559,7 +556,7 @@
559
556
  }
560
557
  }
561
558
 
562
- &:nth-child(n+3) {
559
+ &:nth-child(n + 3) {
563
560
  padding-right: 20px;
564
561
  }
565
562
 
@@ -597,22 +594,22 @@
597
594
  .title {
598
595
  margin-left: 6px;
599
596
  }
600
-
597
+
601
598
  .actions-button {
602
599
  margin-left: 2px;
603
600
  }
604
-
601
+
605
602
  &:first-child {
606
603
  @apply psui-sticky;
607
604
  min-width: 330px;
608
-
605
+
609
606
  &:after {
610
607
  content: '';
611
608
  @apply psui-absolute psui-top-0;
612
609
  }
613
-
610
+
614
611
  &:after {
615
- @apply psui-bg-gray-10 psui-rounded-tl-full ;
612
+ @apply psui-bg-gray-10 psui-rounded-tl-full;
616
613
  box-shadow: -3px -3px 0px 0px #ffffff;
617
614
  z-index: 30;
618
615
  top: 0;
@@ -622,18 +619,18 @@
622
619
  }
623
620
  }
624
621
  }
625
-
622
+
626
623
  &.closed {
627
- td {
624
+ td {
628
625
  &:first-child {
629
626
  @apply psui-sticky;
630
-
627
+
631
628
  &:before,
632
629
  &:after {
633
630
  content: '';
634
631
  @apply psui-absolute psui-top-0;
635
632
  }
636
-
633
+
637
634
  &:after {
638
635
  @apply psui-bg-gray-10 psui-rounded-tl-full psui-rounded-bl-full;
639
636
  box-shadow: -8px 0px 0px 4px #ffffff;
@@ -646,29 +643,28 @@
646
643
  margin-left: 2px;
647
644
  }
648
645
  }
649
- }
646
+ }
650
647
  }
651
648
  }
652
-
653
649
  }
654
650
 
655
651
  &:not(.is-first):not(.removed-class) {
656
652
  td {
657
653
  &:first-child {
658
654
  @apply psui-sticky;
659
-
655
+
660
656
  &:before,
661
657
  &:after {
662
658
  content: '';
663
659
  @apply psui-absolute psui-top-0;
664
660
  }
665
-
661
+
666
662
  &:before {
667
663
  @apply psui-bg-white psui-left-0;
668
664
  width: 14px;
669
665
  height: calc(100% + 1px);
670
666
  }
671
-
667
+
672
668
  &:after {
673
669
  @apply psui-bg-gray-20 psui-w-px psui-h-0 psui-rounded-lg;
674
670
  left: 8px;
@@ -708,11 +704,10 @@
708
704
  td {
709
705
  @apply psui-bg-gray-10 psui-text-gray-40 !important;
710
706
  transition: background-color 0.5s ease;
711
-
707
+
712
708
  &:first-child {
713
709
  @apply psui-sticky;
714
710
 
715
-
716
711
  &:after {
717
712
  @apply psui-bg-gray-10 psui-rounded-bl-full psui-absolute psui-bottom-0 psui-overflow-hidden;
718
713
  box-shadow: -3px 3px 0px 0px #fff;
@@ -724,17 +719,15 @@
724
719
  height: 10px;
725
720
  }
726
721
  }
727
-
728
- }
722
+ }
729
723
  }
730
724
  }
731
725
 
732
726
  &.is-active {
733
-
734
727
  td {
735
728
  padding-top: 9px;
736
729
  padding-bottom: 9px;
737
-
730
+
738
731
  .title {
739
732
  @apply psui-text-14 psui-text-gray-50;
740
733
  }
@@ -749,17 +742,17 @@
749
742
  }
750
743
  }
751
744
  .psui-show-childrens-on-hover:hover * {
752
- opacity: 1!important
745
+ opacity: 1 !important;
753
746
  }
754
-
747
+
755
748
  .psui-show-childrens-on-hover.absolute-childrens {
756
- position: relative
749
+ position: relative;
757
750
  }
758
-
751
+
759
752
  .psui-show-childrens-on-hover.absolute-childrens .helper {
760
753
  position: absolute;
761
754
  top: 0;
762
- right: -18px
755
+ right: -18px;
763
756
  }
764
757
  }
765
- }
758
+ }
@@ -171,6 +171,7 @@
171
171
  v-if="shouldShowDropdown(item)"
172
172
  :class="[isHoveringRow === index ? 'opacity-1' : 'opacity-0']"
173
173
  position="custom"
174
+ width="175"
174
175
  >
175
176
  <template #dropdownTrigger>
176
177
  <PsIcon