@policystudio/policy-studio-ui-vue 1.1.90-beta.65 → 1.1.90-beta.67

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 (7) hide show
  1. package/dist/css/psui_styles_output.css +660 -617
  2. package/package.json +1 -1
  3. package/src/assets/scss/components/PsChips.scss +40 -23
  4. package/src/assets/scss/components/PsTooltip.scss +160 -146
  5. package/src/components/chips/PsChips.vue +14 -1
  6. package/src/components/tooltip/PsRichTooltip.vue +1 -1
  7. package/src/components/tooltip/PsTooltip.vue +2 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@policystudio/policy-studio-ui-vue",
3
- "version": "1.1.90-beta.65",
3
+ "version": "1.1.90-beta.67",
4
4
  "description": "Policy Studio UI",
5
5
  "author": "Policy Studio Team",
6
6
  "scripts": {
package/src/assets/scss/components/PsChips.scss CHANGED
@@ -7,6 +7,42 @@
7
7
  @apply psui-icon;
8
8
  }
9
9
 
10
+ label {
11
+ @apply psui-flex psui-bg-white psui-items-center psui-justify-center psui-text-gray-60 psui-transition-colors psui-cursor-pointer psui-rounded psui-py-1 psui-px-3 psui-text-small psui-border psui-border-gray-40;
12
+ padding: 5px 6px 5px 8px;
13
+
14
+ &:hover {
15
+ @apply psui-text-blue-60 psui-border-blue-60;
16
+ }
17
+
18
+ &:focus,
19
+ &:active {
20
+ @apply psui-text-blue-60 psui-bg-blue-20;
21
+ }
22
+
23
+ &.checked {
24
+ @apply psui-text-blue-70 psui-bg-blue-10 psui-border-blue-60;
25
+ }
26
+
27
+ &.icon-position-right {
28
+ @apply psui-flex-row-reverse;
29
+
30
+ .psui-el-chips-icon {
31
+ @apply psui-ml-1;
32
+ }
33
+ }
34
+
35
+ }
36
+
37
+ .psui-el-chips-icon {
38
+ @apply psui-icon;
39
+ font-size: 16px;
40
+
41
+ &.is-rotated {
42
+ transform: rotate(180deg);
43
+ }
44
+ }
45
+
10
46
  &.type-checkbox,
11
47
  &.type-radio {
12
48
  font-size: 14px;
@@ -18,7 +54,7 @@
18
54
 
19
55
  &:checked {
20
56
  + label {
21
- @apply psui-text-blue-60 psui-bg-blue-20;
57
+ @apply psui-text-blue-60 psui-bg-blue-20 psui-border-blue-60;
22
58
 
23
59
  &.layout-disabled {
24
60
  @apply psui-bg-gray-20 psui-text-gray-40 psui-cursor-default;
@@ -36,8 +72,6 @@
36
72
  }
37
73
 
38
74
  label {
39
- @apply psui-flex psui-items-center psui-justify-center psui-text-gray-50 psui-bg-gray-10 psui-transition-all psui-cursor-pointer psui-rounded;
40
- padding: 4px 8px 4px 6px;
41
75
 
42
76
  &:before {
43
77
  @apply psui-inline-block psui-text-gray-30 psui-cursor-pointer psui-transition-all;
@@ -90,23 +124,6 @@
90
124
  }
91
125
 
92
126
  &.type-button {
93
- label {
94
- @apply psui-flex psui-items-center psui-justify-center psui-text-gray-60 psui-transition-all psui-cursor-pointer psui-rounded psui-py-1 psui-px-3 psui-text-small;
95
- background-color: #F6F7F8;
96
- &:hover {
97
- @apply psui-text-blue-60 psui-bg-white;
98
- }
99
-
100
- &:focus,
101
- &:active {
102
- @apply psui-text-blue-60 psui-bg-blue-20;
103
- }
104
-
105
- &.checked {
106
- @apply psui-text-blue-60 psui-bg-blue-20;
107
- }
108
-
109
- }
110
127
 
111
128
  &.layout-with-icon {
112
129
  label {
@@ -156,15 +173,15 @@
156
173
  }
157
174
 
158
175
  .psui-el-chips-icon {
159
- font-size: 18px;
176
+ font-size: 16px;
160
177
 
161
178
  &-prepend {
162
- @apply psui-bg-gray-30 psui-rounded-full psui-text-white psui-mr-2 psui-w-6 psui-h-6 psui-flex psui-items-center psui-justify-center;
179
+ @apply psui-bg-gray-30 psui-rounded-full psui-text-white psui-w-6 psui-h-6 psui-flex psui-items-center psui-justify-center;
163
180
  }
164
181
  }
165
182
 
166
183
  .psui-el-chips-close {
167
- @apply psui-text-gray-40 psui-flex psui-items-center psui-justify-center psui-ml-2;
184
+ @apply psui-text-gray-40 psui-flex psui-items-center psui-justify-center;
168
185
  }
169
186
  }
170
187
  }
package/src/assets/scss/components/PsTooltip.scss CHANGED
@@ -1,151 +1,165 @@
1
1
  @layer components {
2
- .psui-el-tooltip {
3
-
4
- .psui-el-tooltip-wrapper{
5
- @apply psui-relative;
6
-
7
- .psui-el-tooltip-dialog {
8
- @apply psui-fixed psui-opacity-0 psui-transition-opacity psui-duration-300 psui-ease-in-out psui-hidden;
9
- transition-delay: 0.4s;
10
- z-index: 999;
11
-
12
- .psui-el-tooltip-content {
13
- @apply psui-flex psui-flex-col psui-bg-gray-50 psui-text-white;
14
- padding: 5px 8px 4px 8px;
15
- border-radius: 4px;
16
-
17
- h2 {
18
- @apply psui-font-bold;
19
- }
20
-
21
- .psui-el-tooltip-content-wrapper{
22
- @apply psui-text-xsmall psui-font-bold;
23
- }
24
-
25
- &.layout {
26
- &-gray {
27
- @apply psui-bg-gray-30 psui-text-gray-80 psui-shadow-none;
28
- font-size: 12px;
29
- line-height: 120%;
30
- padding: 10px 16px 12px 16px;
31
-
32
- .psui-el-tooltip-content-wrapper {
33
- @apply psui-font-normal psui-mt-1
34
- }
35
- }
36
-
37
- &-blue {
38
- @apply psui-bg-blue-70 psui-text-white psui-shadow-none;
39
- font-size: 12px;
40
- line-height: 120%;
41
- padding: 10px 16px 12px 16px;
42
-
43
- .psui-el-tooltip-content-wrapper {
44
- @apply psui-font-normal psui-mt-1
45
- }
46
- }
47
-
48
- &-red {
49
- @apply psui-bg-red-10 psui-text-red-70 psui-shadow-none;
50
- font-size: 12px;
51
- line-height: 120%;
52
- padding: 10px 16px 12px 16px;
53
-
54
- .psui-el-tooltip-content-wrapper {
55
- @apply psui-font-normal psui-mt-1
56
- }
57
- }
58
-
59
- &-white {
60
- @apply psui-bg-white psui-py-4 psui-px-6 psui-flex psui-flex-col psui-shadow-elevation-30;
61
- gap: 8.8px;
62
-
63
- h2 {
64
- @apply psui-text-gray-80 psui-font-bold;
65
- font-size: 17px;
66
- line-height: 120%;
67
- }
68
-
69
- .psui-el-tooltip-content-wrapper {
70
- @apply psui-text-gray-50 psui-font-normal psui-flex psui-flex-col;
71
- gap: 13.6px;
72
- font-size: 14px;
73
- line-height: 120%;
74
-
75
- button {
76
- @apply psui-rounded-md psui-bg-blue-20 psui-text-blue-60 psui-font-bold;
77
- padding: 7px 16px;
78
- width: fit-content;
79
-
80
- &:focus {
81
- outline: none;
82
- }
83
- }
84
- }
85
- }
86
-
87
- &-dark {
88
- @apply psui-bg-blue-70 psui-py-4 psui-px-6 psui-flex psui-flex-col psui-shadow-elevation-30;
89
- gap: 8.8px;
90
-
91
- h2 {
92
- @apply psui-text-white psui-font-bold;
93
- font-size: 17px;
94
- line-height: 120%;
95
- }
96
-
97
- .psui-el-tooltip-content-wrapper {
98
- @apply psui-text-white psui-font-normal psui-flex psui-flex-col;
99
- gap: 13.6px;
100
- font-size: 14px;
101
- line-height: 120%;
102
-
103
- button {
104
- @apply psui-rounded-md psui-bg-blue-60 psui-text-white psui-font-bold;
105
- padding: 7px 16px;
106
- width: fit-content;
107
-
108
- &:focus {
109
- outline: none;
110
- }
111
-
112
- }
113
- }
114
- }
115
-
116
- &-color {
117
- @apply psui-bg-blue-50 psui-py-4 psui-px-6 psui-flex psui-flex-col psui-shadow-elevation-30;
118
- gap: 8.8px;
119
-
120
-
121
- h2 {
122
- @apply psui-text-white psui-font-bold;
123
- font-size: 17px;
124
- line-height: 120%;
125
- }
126
-
127
- .psui-el-tooltip-content-wrapper {
128
- @apply psui-text-white psui-font-normal psui-flex psui-flex-col;
129
- gap: 13.6px;
130
- font-size: 14px;
131
- line-height: 120%;
132
-
133
- button {
134
- @apply psui-rounded-md psui-bg-blue-60 psui-text-white psui-font-bold;
135
- padding: 7px 16px;
136
- width: fit-content;
137
-
138
- &:focus {
139
- outline: none;
140
- }
141
-
142
- }
143
- }
144
- }
145
-
146
- }
2
+ .psui-el-tooltip {
3
+ .psui-el-tooltip-wrapper {
4
+ @apply psui-relative;
5
+
6
+ .psui-el-tooltip-dialog {
7
+ @apply psui-fixed psui-opacity-0 psui-transition-opacity psui-duration-300 psui-ease-in-out psui-hidden;
8
+ transition-delay: 0.4s;
9
+ z-index: 999;
10
+
11
+ .psui-el-tooltip-content {
12
+ @apply psui-flex psui-flex-col psui-bg-gray-50 psui-text-white;
13
+ padding: 5px 8px 4px 8px;
14
+ border-radius: 4px;
15
+
16
+ h2 {
17
+ @apply psui-font-bold;
18
+ }
19
+
20
+ .psui-el-tooltip-content-wrapper {
21
+ @apply psui-text-xsmall psui-font-bold;
22
+ }
23
+
24
+ &.layout {
25
+ &-gray {
26
+ @apply psui-bg-gray-30 psui-text-gray-80 psui-shadow-none;
27
+ font-size: 12px;
28
+ line-height: 120%;
29
+ padding: 10px 16px 12px 16px;
30
+
31
+ .psui-el-tooltip-content-wrapper {
32
+ @apply psui-font-normal psui-mt-1;
33
+ }
34
+ }
35
+
36
+ &-blue {
37
+ @apply psui-bg-blue-70 psui-text-white psui-shadow-none;
38
+ font-size: 12px;
39
+ line-height: 120%;
40
+ padding: 10px 16px 12px 16px;
41
+
42
+ .psui-el-tooltip-content-wrapper {
43
+ @apply psui-font-normal psui-mt-1;
44
+ }
45
+ }
46
+
47
+ &-red {
48
+ @apply psui-bg-red-10 psui-text-red-70 psui-shadow-none;
49
+ font-size: 12px;
50
+ line-height: 120%;
51
+ padding: 10px 16px 12px 16px;
52
+
53
+ .psui-el-tooltip-content-wrapper {
54
+ @apply psui-font-normal psui-mt-1;
55
+ }
56
+ }
57
+
58
+ &-green {
59
+ @apply psui-flex psui-flex-col psui-items-center psui-shadow-none;
60
+ width: 180px;
61
+ padding: 10px 16px 12px 16px;
62
+ gap: 4px;
63
+ border-radius: 6px;
64
+ background: linear-gradient(270deg, #5db883 0%, #28b08e 100%);
65
+ font-size: 12px;
66
+ line-height: 120%;
67
+
68
+ h2 {
69
+ @apply psui-text-white psui-font-bold;
70
+ }
71
+
72
+ .psui-el-tooltip-content-wrapper {
73
+ @apply psui-text-white psui-font-normal psui-text-center;
74
+ }
75
+ }
76
+
77
+ &-white {
78
+ @apply psui-bg-white psui-py-4 psui-px-6 psui-flex psui-flex-col psui-shadow-elevation-30;
79
+ gap: 8.8px;
80
+
81
+ h2 {
82
+ @apply psui-text-gray-80 psui-font-bold;
83
+ font-size: 17px;
84
+ line-height: 120%;
85
+ }
86
+
87
+ .psui-el-tooltip-content-wrapper {
88
+ @apply psui-text-gray-50 psui-font-normal psui-flex psui-flex-col;
89
+ gap: 13.6px;
90
+ font-size: 14px;
91
+ line-height: 120%;
92
+
93
+ button {
94
+ @apply psui-rounded-md psui-bg-blue-20 psui-text-blue-60 psui-font-bold;
95
+ padding: 7px 16px;
96
+ width: fit-content;
97
+
98
+ &:focus {
99
+ outline: none;
100
+ }
101
+ }
102
+ }
103
+ }
104
+
105
+ &-dark {
106
+ @apply psui-bg-blue-70 psui-py-4 psui-px-6 psui-flex psui-flex-col psui-shadow-elevation-30;
107
+ gap: 8.8px;
108
+
109
+ h2 {
110
+ @apply psui-text-white psui-font-bold;
111
+ font-size: 17px;
112
+ line-height: 120%;
113
+ }
114
+
115
+ .psui-el-tooltip-content-wrapper {
116
+ @apply psui-text-white psui-font-normal psui-flex psui-flex-col;
117
+ gap: 13.6px;
118
+ font-size: 14px;
119
+ line-height: 120%;
120
+
121
+ button {
122
+ @apply psui-rounded-md psui-bg-blue-60 psui-text-white psui-font-bold;
123
+ padding: 7px 16px;
124
+ width: fit-content;
125
+
126
+ &:focus {
127
+ outline: none;
128
+ }
129
+ }
130
+ }
131
+ }
132
+
133
+ &-color {
134
+ @apply psui-bg-blue-50 psui-py-4 psui-px-6 psui-flex psui-flex-col psui-shadow-elevation-30;
135
+ gap: 8.8px;
136
+
137
+ h2 {
138
+ @apply psui-text-white psui-font-bold;
139
+ font-size: 17px;
140
+ line-height: 120%;
141
+ }
142
+
143
+ .psui-el-tooltip-content-wrapper {
144
+ @apply psui-text-white psui-font-normal psui-flex psui-flex-col;
145
+ gap: 13.6px;
146
+ font-size: 14px;
147
+ line-height: 120%;
148
+
149
+ button {
150
+ @apply psui-rounded-md psui-bg-blue-60 psui-text-white psui-font-bold;
151
+ padding: 7px 16px;
152
+ width: fit-content;
153
+
154
+ &:focus {
155
+ outline: none;
156
+ }
147
157
  }
158
+ }
148
159
  }
160
+ }
149
161
  }
162
+ }
150
163
  }
151
- }
164
+ }
165
+ }
package/src/components/chips/PsChips.vue CHANGED
@@ -23,11 +23,15 @@
23
23
  <label
24
24
  :disabled="disabled"
25
25
  :for="getInputId"
26
- :class="{'checked': checked && type === 'button', 'layout-disabled': layout === 'disabled'}"
26
+ :class="[
27
+ {'checked': checked && type === 'button', 'layout-disabled': layout === 'disabled'},
28
+ `icon-position-${iconPosition}`
29
+ ]"
27
30
  >
28
31
  <i
29
32
  v-if="icon"
30
33
  class="psui-el-chips-icon psui-el-chips-icon-prepend"
34
+ :class="{ 'is-rotated': rotableIcon }"
31
35
  >{{ icon }}</i>
32
36
  {{ label }}
33
37
  <button
@@ -82,6 +86,15 @@ const props = defineProps({
82
86
  /**
83
87
  * It sets if the button was checked or not checked.
84
88
  */
89
+ iconPosition: {
90
+ type: String,
91
+ default: 'left',
92
+ validator: (value) => ['left', 'right'].includes(value)
93
+ },
94
+ rotableIcon:{
95
+ type: Boolean,
96
+ defaul: false
97
+ },
85
98
  checked: {
86
99
  type: Boolean,
87
100
  default: false,
package/src/components/tooltip/PsRichTooltip.vue CHANGED
@@ -33,7 +33,7 @@ defineProps({
33
33
  layout: {
34
34
  type: String,
35
35
  default: 'gray',
36
- validator: (type) => ['gray', 'red', 'blue'].includes(type),
36
+ validator: (type) => ['gray', 'red', 'blue', 'green'].includes(type),
37
37
  },
38
38
  cssClass: {
39
39
  type: String,
package/src/components/tooltip/PsTooltip.vue CHANGED
@@ -149,9 +149,10 @@ const updatePosition = () => {
149
149
  dialog.style.top = `${rectTrigger.y - rectDialog.height - 10}px`
150
150
  }
151
151
  if (props.position == 'custom') {
152
+ const hasFixedPosition = props.customPosition.includes('position: fixed')
152
153
  dialog.style = props.customPosition
153
154
  dialog.style.display = 'block'
154
- dialog.style.position = 'absolute'
155
+ dialog.style.position = hasFixedPosition ? 'fixed' : 'absolute'
155
156
  }
156
157
  setTimeout(() => {
157
158
  if(dialog) dialog.style.opacity = 100