@policystudio/policy-studio-ui-vue 1.2.0-access.2 → 1.2.0-access.21

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 (37) hide show
  1. package/dist/css/psui_styles_output.css +585 -325
  2. package/doc/src/stories/Button.stories.ts +95 -73
  3. package/doc/src/stories/DropdownList.stories.ts +2 -2
  4. package/doc/src/stories/Typography.mdx +14 -14
  5. package/package.json +1 -1
  6. package/src/assets/scss/components/PsAccordion.scss +19 -28
  7. package/src/assets/scss/components/PsButton.scss +128 -91
  8. package/src/assets/scss/components/PsCardInfos.scss +1 -1
  9. package/src/assets/scss/components/PsChartLegend.scss +2 -2
  10. package/src/assets/scss/components/PsCheckbox.scss +2 -2
  11. package/src/assets/scss/components/PsChips.scss +1 -1
  12. package/src/assets/scss/components/PsCollapse.scss +1 -1
  13. package/src/assets/scss/components/PsDataTable.scss +1 -1
  14. package/src/assets/scss/components/PsDateCardInfo.scss +7 -4
  15. package/src/assets/scss/components/PsDialog.scss +2 -2
  16. package/src/assets/scss/components/PsDraggable.scss +1 -1
  17. package/src/assets/scss/components/PsDropdownList.scss +2 -2
  18. package/src/assets/scss/components/PsInlineSelector.scss +3 -3
  19. package/src/assets/scss/components/PsInput.scss +2 -2
  20. package/src/assets/scss/components/PsInputSelect.scss +2 -2
  21. package/src/assets/scss/components/PsInputTextArea.scss +3 -3
  22. package/src/assets/scss/components/PsMiniTag.scss +25 -30
  23. package/src/assets/scss/components/PsRadioButton.scss +2 -2
  24. package/src/assets/scss/components/PsSlider.scss +1 -1
  25. package/src/assets/scss/components/PsTabHeader.scss +134 -134
  26. package/src/assets/scss/components/PsTableResults.scss +12 -12
  27. package/src/assets/scss/components/PsTestimonialCard.scss +3 -3
  28. package/src/assets/scss/components/PsToast.scss +1 -1
  29. package/src/assets/scss/components/PsToggle.scss +1 -1
  30. package/src/assets/scss/components/_PsTableResults.scss +3 -3
  31. package/src/components/badges-and-tags/PsDateCardInfo.vue +16 -5
  32. package/src/components/badges-and-tags/PsMiniTag.vue +5 -5
  33. package/src/components/buttons/PsButton.vue +111 -20
  34. package/src/components/navigations/PsBreadcrumb.vue +1 -1
  35. package/src/components/table-results/PsTableResults.vue +2 -2
  36. package/src/components/ui/PsIcon.vue +10 -5
  37. package/tailwind.config.js +70 -87
package/src/assets/scss/components/PsTabHeader.scss CHANGED
@@ -1,11 +1,10 @@
1
- @layer components{
2
-
1
+ @layer components {
3
2
  .psui-el-tab-header {
4
- @apply psui-flex;
3
+ @apply psui-flex psui-space-x-1;
5
4
 
6
5
  button {
7
- @apply transition-default psui-text-small;
8
-
6
+ @apply transition-default psui-text-14;
7
+
9
8
  &.status-disabled {
10
9
  @apply psui-cursor-not-allowed;
11
10
  }
@@ -15,184 +14,185 @@
15
14
  }
16
15
 
17
16
  &:focus-visible {
18
- outline: 2px solid #2563EB;
19
- outline-offset: 2px;
20
- border-radius: 6px;
17
+ outline: 2px solid #2563eb;
18
+ outline-offset: 2px;
19
+ border-radius: 6px;
21
20
  }
22
21
  }
23
22
 
24
23
  &.status-disabled {
25
24
  .psui-el-input-wrapper {
26
- @apply psui-bg-gray-20 psui-border-gray-20
25
+ @apply psui-bg-gray-20 psui-border-gray-20;
27
26
  }
28
27
  }
29
28
 
30
29
  /* Layout Policy Design */
31
- &.layout-policy-design {
32
- button {
33
- padding: 8px 2px 7px 0px;
34
- margin-right: 8px;
35
- @apply psui-flex psui-items-center psui-relative;
36
-
37
- &:not(:first-child) {
38
- margin-left: 8px;
39
- }
40
-
41
-
42
- &:after {
43
- content: '';
44
- @apply psui-transition-all psui-h-[3px] psui-block psui-w-full psui-absolute psui-bottom-0 psui-left-0 psui-opacity-0 psui-bg-blue-60;
45
- }
46
-
47
- &:hover {
48
- > div {
49
- @apply psui-text-gray-60;
50
- }
51
- }
52
-
53
- &.status-active {
54
- @apply psui-border-blue-60;
55
-
56
- &:after {
57
- @apply psui-opacity-100;
58
- }
59
-
60
- > div {
61
- @apply psui-text-blue-60;
62
- }
63
-
64
- > span {
65
- @apply psui-font-bold psui-text-gray-70;
66
- }
67
- }
68
-
69
- > div {
70
- @apply psui-text-gray-50 psui-mr-1;
71
- }
72
-
73
- > span {
74
- line-height: 120%;
75
- font-size: 14px;
76
- @apply psui-text-gray-60 psui-font-bold;
77
- }
30
+ &.layout-policy-design {
31
+ button {
32
+ padding: 8px 2px 7px 0px;
33
+ margin-right: 8px;
34
+ @apply psui-flex psui-items-center psui-relative;
35
+
36
+ &:not(:first-child) {
37
+ margin-left: 8px;
38
+ }
39
+
40
+ &:after {
41
+ content: '';
42
+ @apply psui-transition-all psui-h-[3px] psui-block psui-w-full psui-absolute psui-bottom-0 psui-left-0 psui-opacity-0 psui-bg-blue-60;
43
+ }
44
+
45
+ &:hover {
46
+ > div {
47
+ @apply psui-text-gray-60;
78
48
  }
79
49
  }
80
-
81
50
 
51
+ &.status-active {
52
+ @apply psui-border-blue-60;
53
+
54
+ &:after {
55
+ @apply psui-opacity-100;
56
+ }
57
+
58
+ > div {
59
+ @apply psui-text-blue-60;
60
+ }
61
+
62
+ > span {
63
+ @apply psui-font-bold psui-text-gray-70;
64
+ }
65
+ }
66
+
67
+ > div {
68
+ @apply psui-text-gray-50 psui-mr-1;
69
+ }
82
70
 
71
+ > span {
72
+ line-height: 120%;
73
+ font-size: 14px;
74
+ @apply psui-text-gray-60 psui-font-bold;
75
+ }
76
+ }
77
+ }
83
78
  /* ----------------------------------------- */
84
79
 
85
80
  /* Layout Standard */
86
81
  /* ----------------------------------------- */
87
- &.layout-standard {
88
- @apply psui-rounded-md;
82
+ &.layout-standard {
83
+ @apply psui-rounded-md;
89
84
 
90
- .psui-el-tooltip{
91
- &:not(:last-child) {
92
- margin-right: 20px;
93
- }
85
+ .psui-el-tooltip {
86
+ &:not(:last-child) {
87
+ margin-right: 20px;
94
88
  }
95
-
96
- button {
97
- @apply psui-bg-gray-10 psui-text-gray-60;
98
- padding: 6px 12px;
99
- box-shadow: inset 0px 0px 8px rgba(40, 50, 59, 0.05);
89
+ }
100
90
 
101
- &:not(:last-child) {
102
- margin-right: 1px;
103
- }
91
+ button {
92
+ @apply psui-bg-gray-10 psui-text-gray-60;
93
+ padding: 6px 12px;
94
+ box-shadow: inset 0px 0px 8px rgba(40, 50, 59, 0.05);
104
95
 
105
- &:first-child {
106
- @apply psui-rounded-l;
107
- }
96
+ &:not(:last-child) {
97
+ margin-right: 1px;
98
+ }
108
99
 
109
- &:last-child {
110
- @apply psui-rounded-r;
111
- }
100
+ &:first-child {
101
+ @apply psui-rounded-l;
102
+ }
112
103
 
113
- &:hover {
114
- @apply psui-text-blue-60;
115
- box-shadow: inset 0px 0px 8px rgba(40, 50, 59, 0.05);
116
- }
104
+ &:last-child {
105
+ @apply psui-rounded-r;
106
+ }
117
107
 
118
- &.status-active {
119
- @apply psui-text-white psui-bg-blue-60 psui-font-bold;
120
- }
108
+ &:hover {
109
+ @apply psui-text-blue-60;
110
+ box-shadow: inset 0px 0px 8px rgba(40, 50, 59, 0.05);
111
+ }
121
112
 
122
- &.status-disabled:hover {
123
- @apply psui-text-gray-60;
124
- }
113
+ &.status-active {
114
+ @apply psui-text-white psui-bg-blue-60 psui-font-bold;
115
+ }
116
+
117
+ &.status-disabled:hover {
118
+ @apply psui-text-gray-60;
125
119
  }
126
120
  }
121
+ }
127
122
  /* ----------------------------------------- Layout Standard */
128
-
123
+
129
124
  /* Layout Underline */
130
125
  /* ----------------------------------------- */
131
- &.layout-underline {
132
- .psui-el-tooltip {
133
- &:not(:last-child) {
134
- margin-right: 20px;
135
- }
126
+ &.layout-underline {
127
+ .psui-el-tooltip {
128
+ &:not(:last-child) {
129
+ margin-right: 20px;
136
130
  }
131
+ }
137
132
 
138
- button {
139
- @apply psui-text-gray-50 psui-font-bold;
140
- border-bottom: 3px solid transparent;
141
- padding: 11.5px 0;
133
+ button {
134
+ @apply psui-text-gray-80 psui-font-semibold psui-relative;
135
+ padding: 8px 0;
142
136
 
143
- &:hover {
144
- @apply psui-text-blue-60;
145
- }
137
+ &:hover {
138
+ @apply psui-text-blue-60;
139
+ }
146
140
 
147
- &:not(:last-child) {
148
- margin-right: 20px;
149
- }
141
+ &:not(:last-child) {
142
+ margin-right: 8px;
143
+ }
150
144
 
151
- &.status-enable:hover {
152
- @apply psui-text-blue-60;
153
- }
145
+ &.status-enable:hover {
146
+ @apply psui-text-blue-60;
147
+ }
154
148
 
155
- &.status-active {
156
- @apply psui-text-blue-60 psui-border-blue-50;
149
+ &.status-active {
150
+ &::after {
151
+ @apply psui-content-['']
152
+ psui-absolute
153
+ psui-bottom-0
154
+ psui-left-0
155
+ psui-w-full
156
+ psui-h-[3px]
157
+ psui-rounded-tl-[20px]
158
+ psui-rounded-tr-[20px]
159
+ psui-bg-blue-60;
157
160
  }
158
161
  }
159
162
  }
163
+ }
160
164
  /* ----------------------------------------- Layout Underline */
161
-
162
-
165
+
163
166
  /* Layout Folder */
164
167
  /* ----------------------------------------- */
165
- &.layout-folder {
166
-
167
- .psui-el-tooltip{
168
- &:not(:last-child) {
169
- margin-right: 20px;
170
- }
168
+ &.layout-folder {
169
+ .psui-el-tooltip {
170
+ &:not(:last-child) {
171
+ margin-right: 20px;
171
172
  }
173
+ }
172
174
 
173
- button {
174
- @apply psui-bg-gray-10 psui-text-gray-50 psui-rounded-t;
175
- padding: 9px 12px;
175
+ button {
176
+ @apply psui-bg-gray-10 psui-text-gray-50 psui-rounded-t;
177
+ padding: 9px 12px;
176
178
 
177
- &:hover {
178
- @apply psui-text-blue-60;
179
- }
179
+ &:hover {
180
+ @apply psui-text-blue-60;
181
+ }
180
182
 
181
- &:not(:last-child) {
182
- margin-right: 4px;
183
- }
183
+ &:not(:last-child) {
184
+ margin-right: 4px;
185
+ }
184
186
 
185
- &.status-enable:hover {
186
- @apply psui-text-gray-60;
187
- }
187
+ &.status-enable:hover {
188
+ @apply psui-text-gray-60;
189
+ }
188
190
 
189
- &.status-active {
190
- @apply psui-text-blue-60 psui-font-bold psui-bg-white;
191
- }
191
+ &.status-active {
192
+ @apply psui-text-blue-60 psui-font-bold psui-bg-white;
192
193
  }
193
194
  }
195
+ }
194
196
  /* ----------------------------------------- Layout Folder */
195
-
196
197
  }
197
-
198
- }
198
+ }
package/src/assets/scss/components/PsTableResults.scss CHANGED
@@ -8,7 +8,7 @@
8
8
  }
9
9
 
10
10
  .psui-el-table-results {
11
- @apply psui-relative psui-align-top psui-w-full psui-max-w-full psui-text-p;
11
+ @apply psui-relative psui-align-top psui-w-full psui-max-w-full psui-text-16;
12
12
 
13
13
  .is-warning-column {
14
14
  padding-right: 12px;
@@ -45,7 +45,7 @@
45
45
 
46
46
  tr {
47
47
  .title {
48
- @apply psui-text-small psui-font-bold psui-leading-4 psui-text-gray-80;
48
+ @apply psui-text-14 psui-font-bold psui-leading-4 psui-text-gray-80;
49
49
  }
50
50
 
51
51
  th {
@@ -83,7 +83,7 @@
83
83
  }
84
84
 
85
85
  p {
86
- @apply psui-text-p;
86
+ @apply psui-text-16;
87
87
  line-height: 18px;
88
88
  }
89
89
  }
@@ -106,7 +106,7 @@
106
106
  }
107
107
 
108
108
  td {
109
- @apply psui-pl-8 psui-text-gray-80 psui-h-10 psui-text-right psui-text-small;
109
+ @apply psui-pl-8 psui-text-gray-80 psui-h-10 psui-text-right psui-text-14;
110
110
  padding-top: 0.688rem;
111
111
  padding-bottom: 0.688rem;
112
112
  min-height: 41.5px;
@@ -177,7 +177,7 @@
177
177
 
178
178
  tr {
179
179
  .title {
180
- @apply psui-text-small psui-font-bold psui-leading-4 psui-text-gray-80;
180
+ @apply psui-text-14 psui-font-bold psui-leading-4 psui-text-gray-80;
181
181
  }
182
182
 
183
183
  th {
@@ -210,7 +210,7 @@
210
210
 
211
211
  &:first-of-type {
212
212
  th {
213
- @apply psui-text-left psui-text-gray-50 psui-text-p psui-px-6;
213
+ @apply psui-text-left psui-text-gray-50 psui-text-16 psui-px-6;
214
214
  padding-top: 7px;
215
215
  padding-bottom: 7px;
216
216
 
@@ -242,7 +242,7 @@
242
242
  }
243
243
 
244
244
  p {
245
- @apply psui-text-small;
245
+ @apply psui-text-14;
246
246
  line-height: 18px;
247
247
 
248
248
  &.title {
@@ -267,7 +267,7 @@
267
267
  }
268
268
 
269
269
  .title {
270
- @apply psui-text-small psui-text-gray-80 psui-font-bold psui-truncate psui-leading-none psui-ml-1;
270
+ @apply psui-text-14 psui-text-gray-80 psui-font-bold psui-truncate psui-leading-none psui-ml-1;
271
271
  width: 144px;
272
272
  }
273
273
 
@@ -373,7 +373,7 @@
373
373
 
374
374
  tr {
375
375
  .title {
376
- @apply psui-text-small psui-leading-4;
376
+ @apply psui-text-14 psui-leading-4;
377
377
  }
378
378
 
379
379
  th {
@@ -431,7 +431,7 @@
431
431
  }
432
432
 
433
433
  p {
434
- @apply psui-text-p;
434
+ @apply psui-text-16;
435
435
  line-height: 18px;
436
436
  }
437
437
  }
@@ -516,7 +516,7 @@
516
516
 
517
517
 
518
518
  td {
519
- @apply psui-text-gray-70 psui-h-[32px] psui-text-right psui-text-small;
519
+ @apply psui-text-gray-70 psui-h-[32px] psui-text-right psui-text-14;
520
520
 
521
521
  &.hover-color {
522
522
  background-color: #ECF7FB !important;
@@ -736,7 +736,7 @@
736
736
  padding-bottom: 9px;
737
737
 
738
738
  .title {
739
- @apply psui-text-small psui-text-gray-50;
739
+ @apply psui-text-14 psui-text-gray-50;
740
740
  }
741
741
  }
742
742
 
package/src/assets/scss/components/PsTestimonialCard.scss CHANGED
@@ -10,7 +10,7 @@
10
10
  }
11
11
 
12
12
  &-description {
13
- @apply psui-text-p psui-text-blue-80 psui-italic;
13
+ @apply psui-text-16 psui-text-blue-80 psui-italic psui-leading-6;
14
14
  margin-bottom: 33px;
15
15
  }
16
16
 
@@ -18,12 +18,12 @@
18
18
  @apply psui-flex psui-flex-col psui-mt-auto;
19
19
 
20
20
  &-user {
21
- @apply psui-mb-1 psui-text-blue-80 psui-text-small psui-font-bold;
21
+ @apply psui-mb-1 psui-text-blue-80 psui-text-14 psui-font-bold;
22
22
  }
23
23
 
24
24
  &-position,
25
25
  &-jurisdiction {
26
- @apply psui-text-gray-50 psui-text-small;
26
+ @apply psui-text-gray-60 psui-text-14 psui-leading-[130%];
27
27
  }
28
28
  }
29
29
  }
package/src/assets/scss/components/PsToast.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @layer components {
2
2
  .psui-el-toast {
3
- @apply psui-flex psui-items-center psui-text-big psui-text-white psui-py-3 psui-px-4 psui-rounded-md psui-font-bold psui-shadow-elevation-20;
3
+ @apply psui-flex psui-items-center psui-text-16 psui-text-white psui-py-3 psui-px-4 psui-rounded-md psui-font-bold psui-shadow-elevation-20;
4
4
 
5
5
  &:focus {
6
6
  outline: none;
package/src/assets/scss/components/PsToggle.scss CHANGED
@@ -7,7 +7,7 @@
7
7
  border-radius: 4px;
8
8
 
9
9
  button {
10
- @apply transition-default psui-inline-flex psui-text-small psui-bg-gray-10 psui-text-blue-60 psui-outline-none psui-align-middle;
10
+ @apply transition-default psui-inline-flex psui-text-14 psui-bg-gray-10 psui-text-blue-60 psui-outline-none psui-align-middle;
11
11
  border-radius: 4px;
12
12
  padding:1px 8px;
13
13
 
package/src/assets/scss/components/_PsTableResults.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @layer components{
2
2
 
3
3
  .psui-el-table-results {
4
- @apply .psui-w-full psui-overflow-auto .psui-text-small;
4
+ @apply .psui-w-full psui-overflow-auto psui-text-14;
5
5
 
6
6
  &-header,
7
7
  &-row {
@@ -13,7 +13,7 @@
13
13
 
14
14
 
15
15
  .title {
16
- @apply .psui-text-p .psui-font-bold .psui-text-gray-80 .psui-border-b .psui-border-gray-30;
16
+ @apply psui-text-16 .psui-font-bold .psui-text-gray-80 .psui-border-b .psui-border-gray-30;
17
17
  padding-top: 0.688rem;
18
18
  padding-bottom: 0.688rem;
19
19
  }
@@ -29,7 +29,7 @@
29
29
  }
30
30
 
31
31
  h6 {
32
- @apply .psui-text-small .psui-font-bold .psui-text-gray-80 .psui-leading-4;
32
+ @apply psui-text-14 .psui-font-bold .psui-text-gray-80 .psui-leading-4;
33
33
  }
34
34
 
35
35
  p {
package/src/components/badges-and-tags/PsDateCardInfo.vue CHANGED
@@ -1,8 +1,14 @@
1
1
  <template>
2
2
  <div class="psui-el-date-card">
3
- <span class="psui-el-date-card-month-day">
4
- {{ getMonthAndDayFromDate }}
5
- </span>
3
+ <div class="psui-el-date-card-month-day">
4
+ <span>
5
+ {{ getMonth }}
6
+ </span>
7
+ <span>
8
+ {{ getDay }}
9
+ </span>
10
+ </div>
11
+
6
12
  <span class="psui-el-date-card-year">
7
13
  {{ getYearFromDate }}
8
14
  </span>
@@ -19,11 +25,16 @@ const props = defineProps({
19
25
  },
20
26
  })
21
27
 
22
- const getMonthAndDayFromDate = computed(() => {
23
- const options = { month: 'short', day: '2-digit' }
28
+ const getMonth= computed(() => {
29
+ const options = { month: 'short'}
24
30
  return new Date(props.date)?.toLocaleString('default', options).replace('.', '')
25
31
  })
26
32
 
33
+ const getDay = computed(() => {
34
+ const options = { day: '2-digit' }
35
+ return new Date(props.date)?.toLocaleString('default', options)
36
+ })
37
+
27
38
  const getYearFromDate = computed(() => {
28
39
  return new Date(props.date)?.toLocaleString('default', { year: 'numeric' })
29
40
  })
package/src/components/badges-and-tags/PsMiniTag.vue CHANGED
@@ -23,11 +23,11 @@ const props = defineProps({
23
23
  'warning',
24
24
  'error',
25
25
  'default',
26
- 'solid-info',
27
- 'solid-success',
28
- 'solid-warning',
29
- 'solid-error',
30
- 'solid-default'
26
+ 'dark-info',
27
+ 'dark-success',
28
+ 'dark-warning',
29
+ 'dark-error',
30
+ 'dark-default'
31
31
  ].indexOf(value) !== -1,
32
32
  },
33
33
  /**