@policystudio/policy-studio-ui-vue 1.1.90-beta.66 → 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 (5) hide show
  1. package/dist/css/psui_styles_output.css +561 -527
  2. package/package.json +1 -1
  3. package/src/assets/scss/components/PsTooltip.scss +160 -146
  4. package/src/components/tooltip/PsRichTooltip.vue +1 -1
  5. 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.66",
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/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/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