@policystudio/policy-studio-ui-vue 1.1.44 → 1.1.47
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.
- package/.storybook/PolicyStudio.js +0 -1
- package/.storybook/eventBus.js +3 -0
- package/dist/css/psui_styles.css +524 -28
- package/package.json +1 -1
- package/src/assets/scss/components/PsSlider.scss +152 -6
- package/src/assets/scss/components/PsSwitch.scss +62 -64
- package/src/assets/scss/components/PsTableResults.scss +256 -18
- package/src/components/controls/PsCheckboxSimple.vue +5 -1
- package/src/components/controls/PsDraggable.vue +1 -0
- package/src/components/controls/PsSlider.vue +204 -84
- package/src/components/table-results/PsTableResults.vue +83 -30
- package/src/components/table-results/PsTableResultsHeadFlexible.vue +117 -0
- package/src/components/tooltip/PsTooltip.vue +6 -1
- package/src/contents/ComparisonData.js +378 -0
- package/src/contents/FlexibleData.js +502 -0
- package/src/contents/ResultsData.js +531 -0
- package/src/index.js +9 -1
- package/src/stories/Slider.stories.js +50 -15
- package/src/stories/TableResults.stories.js +684 -1438
|
@@ -1,11 +1,157 @@
|
|
|
1
1
|
@layer components {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
.psui-el-slider {
|
|
3
|
+
&-label {
|
|
4
|
+
@apply psui-mb-2;
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
span {
|
|
7
|
+
@apply psui-text-gray-50 psui-text-small
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
&-input {
|
|
12
|
+
width: 100%;
|
|
13
|
+
-webkit-appearance: none;
|
|
14
|
+
height: 6px;
|
|
15
|
+
border-radius: 5px;
|
|
16
|
+
background: #d3d3d3;
|
|
17
|
+
outline: none;
|
|
18
|
+
opacity: 0.7;
|
|
19
|
+
-webkit-transition: .2s;
|
|
20
|
+
transition: opacity .2s;
|
|
21
|
+
|
|
22
|
+
&:hover {
|
|
23
|
+
opacity: 1;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&::-webkit-slider-thumb {
|
|
27
|
+
border: none;
|
|
28
|
+
-webkit-appearance: none;
|
|
29
|
+
appearance: none;
|
|
30
|
+
width: 20px;
|
|
31
|
+
height: 20px;
|
|
32
|
+
border-radius: 50%;
|
|
33
|
+
background: #64B5CE;
|
|
34
|
+
cursor: pointer;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&::-moz-range-thumb {
|
|
38
|
+
border: none;
|
|
39
|
+
width: 20px;
|
|
40
|
+
height: 20px;
|
|
41
|
+
border-radius: 50%;
|
|
42
|
+
background: #64B5CE;
|
|
43
|
+
cursor: pointer;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
&::-webkit-slider-progress,
|
|
47
|
+
&::-moz-range-progress {
|
|
48
|
+
border-top-left-radius: 5px;
|
|
49
|
+
border-bottom-left-radius: 5px;
|
|
50
|
+
-webkit-appearance: none;
|
|
51
|
+
box-shadow: none;
|
|
52
|
+
border: none;
|
|
53
|
+
background: #64B5CE;
|
|
54
|
+
height: 6px;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
&-bubble {
|
|
59
|
+
@apply psui-bg-gray-20 psui-font-bold psui-text-gray-50 psui-px-2 psui-py-px psui-rounded-sm psui-float-left psui-ml-2;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
&.layout-default {
|
|
63
|
+
.psui-el-slider-range-value {
|
|
64
|
+
@apply psui-relative psui-text-white psui-font-bold psui-bg-gray-40 psui-text-gray-20 psui-rounded-md psui-w-10 psui-text-center psui-inline-block;
|
|
65
|
+
transform: translateX(-6px);
|
|
66
|
+
margin-bottom: 10px;
|
|
67
|
+
padding: 2px 4px;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
&.layout-rich {
|
|
72
|
+
|
|
73
|
+
.psui-el-slider-input {
|
|
74
|
+
@apply psui-bg-gray-30 psui-rounded psui-shadow-elevation--5 psui-opacity-100 psui-h-2;
|
|
75
|
+
|
|
76
|
+
&::-webkit-slider-thumb {
|
|
77
|
+
@apply psui-relative psui-bg-blue-50 psui-w-6 psui-h-6 psui-shadow-elevation-10;
|
|
78
|
+
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDEyIDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTAuMzUzNzEyIDIuNjc0NDJMMy4xNDY2IDAuMTM0MDhDMy40NjE2OCAtMC4xNTI1MDYgMy45OTk5MiAwLjA1MDczODUgMy45OTk5MiAwLjQ1NjMwMVY1LjU0MzdDMy45OTk5MiA1Ljk0OTU1IDMuNDYxMDIgNi4xNTI2NiAzLjE0NjE0IDUuODY1NDlMMC4zNTMyNDUgMy4zMTg0NEMwLjE1ODExMSAzLjE0MDQ4IDAuMTU4MzIgMi44NTIxNCAwLjM1MzcxMiAyLjY3NDQyWiIgZmlsbD0id2hpdGUiLz4KICA8cGF0aCBkPSJNMTEuNjQ2MSAyLjY3NDQyTDguODUzMjQgMC4xMzQwOEM4LjUzODE3IC0wLjE1MjUwNiA3Ljk5OTkyIDAuMDUwNzM4NSA3Ljk5OTkyIDAuNDU2MzAxVjUuNTQzN0M3Ljk5OTkyIDUuOTQ5NTUgOC41Mzg4MyA2LjE1MjY2IDguODUzNzEgNS44NjU0OUwxMS42NDY2IDMuMzE4NDRDMTEuODQxNyAzLjE0MDQ4IDExLjg0MTUgMi44NTIxNCAxMS42NDYxIDIuNjc0NDJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4=");
|
|
79
|
+
background-position: center center;
|
|
80
|
+
background-repeat: no-repeat;
|
|
81
|
+
z-index: 30;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
&::-moz-range-thumb {
|
|
85
|
+
border: none;
|
|
86
|
+
width: 20px;
|
|
87
|
+
height: 20px;
|
|
88
|
+
border-radius: 50%;
|
|
89
|
+
background: #64B5CE;
|
|
90
|
+
cursor: pointer;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.psui-el-slider-wrapper {
|
|
95
|
+
display: flex;
|
|
96
|
+
flex-direction: column;
|
|
97
|
+
justify-content: flex-end;
|
|
98
|
+
position: relative;
|
|
99
|
+
height: 80px;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.psui-el-slider-wrapper-input {
|
|
103
|
+
@apply psui-relative;
|
|
104
|
+
|
|
105
|
+
.slider-bar,
|
|
106
|
+
.slider-bar-bg,
|
|
107
|
+
.slider-bar-dynamic,
|
|
108
|
+
.slider-bar-max {
|
|
109
|
+
@apply psui-absolute psui-top-0 psui-bg-blue-60 psui-shadow-elevation--5 psui-h-2;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.slider-bar {
|
|
113
|
+
@apply psui-bg-blue-60 psui-left-0 psui-rounded psui-z-20;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.slider-bar-max {
|
|
117
|
+
@apply psui-bg-gray-40 psui-right-0 psui-rounded-r;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.slider-bar-bg {
|
|
121
|
+
@apply psui-z-10;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.slider-bar-dynamic {
|
|
125
|
+
@apply psui-z-30;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.psui-el-slider-range-value {
|
|
130
|
+
@apply psui-absolute psui-text-blue-60 psui-text-xsmall psui-font-bold psui-text-center psui-w-6 psui-inline-block;
|
|
131
|
+
top: -28px;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.psui-el-slider-grid {
|
|
135
|
+
@apply psui-relative psui-flex psui-justify-between;
|
|
136
|
+
padding-top: 10px;
|
|
137
|
+
margin-top: 3px;
|
|
138
|
+
height: 26px;
|
|
139
|
+
|
|
140
|
+
.line {
|
|
141
|
+
@apply psui-absolute psui-top-0 psui-w-px psui-h-2 psui-bg-gray-60;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.info {
|
|
145
|
+
@apply psui-text-xsmall psui-text-gray-60 psui-w-6 psui-inline-block psui-text-center;
|
|
146
|
+
|
|
147
|
+
&-min {
|
|
148
|
+
transform: translateX(-12px);
|
|
149
|
+
}
|
|
150
|
+
&-max {
|
|
151
|
+
transform: translateX(12px);
|
|
152
|
+
}
|
|
9
153
|
}
|
|
154
|
+
}
|
|
10
155
|
}
|
|
156
|
+
}
|
|
11
157
|
}
|
|
@@ -1,70 +1,68 @@
|
|
|
1
1
|
@layer components {
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
.psui-el-switch {
|
|
3
|
+
@apply psui-relative psui-inline-block psui-rounded-3xl;
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
5
|
+
&.disabled {
|
|
6
|
+
pointer-events: none;
|
|
7
|
+
}
|
|
8
|
+
&.size-big {
|
|
9
|
+
width: 46px;
|
|
10
|
+
height: 24px;
|
|
11
|
+
}
|
|
12
|
+
&.size-small {
|
|
13
|
+
width: 30px;
|
|
14
|
+
height: 16px;
|
|
15
|
+
|
|
16
|
+
.psui-el-switch-button {
|
|
17
|
+
&.toggle-false{
|
|
18
|
+
&::before {
|
|
19
|
+
@apply psui-absolute psui-h-3 psui-w-3 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-300 psui-shadow-elevation-20;
|
|
20
|
+
left: 2px;
|
|
21
|
+
top: 2px;
|
|
22
|
+
content: '';
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&.toggle-true {
|
|
27
|
+
@apply psui-bg-green-20;
|
|
15
28
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}
|
|
46
|
-
.psui-el-switch-button {
|
|
47
|
-
@apply psui-absolute psui-inline-block psui-cursor-pointer psui-top-0 psui-left-0 psui-right-0 psui-bottom-0 psui-bg-gray-40 psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-500;
|
|
48
|
-
|
|
49
|
-
&.toggle-false{
|
|
50
|
-
&::before {
|
|
51
|
-
@apply psui-absolute psui-h-5 psui-w-5 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-300 psui-shadow-elevation-20;
|
|
52
|
-
left: 2px;
|
|
53
|
-
top: 2px;
|
|
54
|
-
content: '';
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
&.toggle-true {
|
|
59
|
-
@apply psui-bg-green-20;
|
|
29
|
+
&::before {
|
|
30
|
+
@apply psui-absolute psui-h-3 psui-w-3 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-300 psui-shadow-elevation-20;
|
|
31
|
+
left: 16px;
|
|
32
|
+
top: 2px;
|
|
33
|
+
content: '';
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
&:focus {
|
|
39
|
+
@apply psui-outline-none;
|
|
40
|
+
}
|
|
41
|
+
input {
|
|
42
|
+
@apply psui-opacity-0 psui-w-0 psui-h-0;
|
|
43
|
+
}
|
|
44
|
+
.psui-el-switch-button {
|
|
45
|
+
@apply psui-absolute psui-inline-block psui-cursor-pointer psui-top-0 psui-left-0 psui-right-0 psui-bottom-0 psui-bg-gray-40 psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-500;
|
|
46
|
+
|
|
47
|
+
&.toggle-false{
|
|
48
|
+
&::before {
|
|
49
|
+
@apply psui-absolute psui-h-5 psui-w-5 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-300 psui-shadow-elevation-20;
|
|
50
|
+
left: 2px;
|
|
51
|
+
top: 2px;
|
|
52
|
+
content: '';
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
&.toggle-true {
|
|
57
|
+
@apply psui-bg-green-20;
|
|
60
58
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
}
|
|
59
|
+
&::before {
|
|
60
|
+
@apply psui-absolute psui-h-5 psui-w-5 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-300 psui-shadow-elevation-20;
|
|
61
|
+
left: 24px;
|
|
62
|
+
top:2px;
|
|
63
|
+
content: '';
|
|
64
|
+
}
|
|
65
|
+
}
|
|
69
66
|
}
|
|
67
|
+
}
|
|
70
68
|
}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
@layer components{
|
|
2
2
|
.psui-el-table-results-wrapper {
|
|
3
3
|
@apply psui-w-full psui-whitespace-no-wrap psui-flex psui-overflow-auto;
|
|
4
|
+
|
|
5
|
+
&.table-flexible {
|
|
6
|
+
@apply psui-px-4 psui-py-2 psui-border psui-border-gray-20 psui-rounded-lg;
|
|
7
|
+
}
|
|
4
8
|
}
|
|
5
9
|
|
|
6
10
|
.psui-el-table-results {
|
|
@@ -134,8 +138,14 @@
|
|
|
134
138
|
}
|
|
135
139
|
|
|
136
140
|
&.layout-comparison {
|
|
137
|
-
|
|
138
|
-
|
|
141
|
+
|
|
142
|
+
&.is-sticky {
|
|
143
|
+
tr:first-of-type th:first-child,
|
|
144
|
+
td:first-child {
|
|
145
|
+
box-shadow: 3px 0px 10px 0px rgba(0, 0, 0, 0.15);
|
|
146
|
+
border-right-color: transparent;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
139
149
|
|
|
140
150
|
tr {
|
|
141
151
|
th, td {
|
|
@@ -170,8 +180,9 @@
|
|
|
170
180
|
&:not(:first-of-type) {
|
|
171
181
|
th {
|
|
172
182
|
&:after {
|
|
173
|
-
@apply psui-absolute psui-top-0 psui-
|
|
183
|
+
@apply psui-absolute psui-top-0 psui-inline-block psui-w-px;
|
|
174
184
|
content: '';
|
|
185
|
+
right: -1px;
|
|
175
186
|
height: calc(100% + 0.5rem);
|
|
176
187
|
background-color: #C3CAD1;
|
|
177
188
|
}
|
|
@@ -197,7 +208,7 @@
|
|
|
197
208
|
}
|
|
198
209
|
|
|
199
210
|
&:first-child {
|
|
200
|
-
@apply psui-align-middle;
|
|
211
|
+
@apply psui-align-middle psui-sticky psui-z-10 psui-left-0 psui-bg-gray-20;
|
|
201
212
|
padding-left: 22px;
|
|
202
213
|
min-width: 240px;
|
|
203
214
|
|
|
@@ -229,12 +240,17 @@
|
|
|
229
240
|
|
|
230
241
|
tbody {
|
|
231
242
|
tr {
|
|
232
|
-
|
|
243
|
+
border-bottom: 8px solid transparent;
|
|
233
244
|
|
|
234
245
|
td {
|
|
235
246
|
@apply psui-relative;
|
|
236
247
|
border-right: 1px solid #C8D0D9;
|
|
237
248
|
|
|
249
|
+
> div {
|
|
250
|
+
position: relative;
|
|
251
|
+
z-index: 3;
|
|
252
|
+
}
|
|
253
|
+
|
|
238
254
|
.title {
|
|
239
255
|
@apply psui-text-small psui-text-gray-80 psui-font-bold psui-truncate psui-leading-none psui-ml-1;
|
|
240
256
|
width: 144px;
|
|
@@ -246,51 +262,273 @@
|
|
|
246
262
|
background-color: #D3EFDE;
|
|
247
263
|
}
|
|
248
264
|
|
|
249
|
-
&:before
|
|
250
|
-
|
|
265
|
+
&:before,
|
|
266
|
+
&:after {
|
|
251
267
|
content: '';
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
background-color: #
|
|
268
|
+
position: absolute;
|
|
269
|
+
left: 0;
|
|
270
|
+
width: 100%;
|
|
271
|
+
background-color: #fff;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
&:before {
|
|
275
|
+
top: 0;
|
|
276
|
+
height: 100%;
|
|
277
|
+
box-shadow: 0px 0px 4px rgb(0 0 0 / 3%), 0px 1px 2px rgb(0 0 0 / 10%);
|
|
278
|
+
z-index: 1;
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
&:after {
|
|
282
|
+
background-color: #fff;
|
|
283
|
+
bottom: 0;
|
|
284
|
+
height: 8px;
|
|
285
|
+
z-index: 11;
|
|
286
|
+
width: calc(100% - 1px);
|
|
256
287
|
}
|
|
257
288
|
|
|
258
289
|
&:first-child {
|
|
259
|
-
@apply psui-px-3 psui-rounded-tl-md psui-rounded-bl-md;
|
|
290
|
+
@apply psui-px-3 psui-rounded-tl-md psui-rounded-bl-md psui-bg-white psui-sticky psui-z-10 psui-left-0;
|
|
260
291
|
border-right-width: 2px;
|
|
261
292
|
}
|
|
293
|
+
|
|
262
294
|
&:last-child {
|
|
263
|
-
@apply psui-px-3 psui-rounded-tr-md psui-rounded-br-md;
|
|
295
|
+
@apply psui-px-3 psui-rounded-tr-md psui-rounded-br-md psui-border-r-0;
|
|
264
296
|
}
|
|
265
297
|
}
|
|
266
298
|
|
|
267
|
-
&.
|
|
299
|
+
&.opened {
|
|
268
300
|
td {
|
|
269
301
|
&:before {
|
|
270
|
-
@apply psui-
|
|
302
|
+
@apply psui-shadow-elevation-20;
|
|
271
303
|
}
|
|
272
304
|
}
|
|
305
|
+
}
|
|
273
306
|
|
|
307
|
+
&.is-first {
|
|
274
308
|
&.opened {
|
|
309
|
+
|
|
275
310
|
td {
|
|
276
311
|
&:first-child {
|
|
277
312
|
@apply psui-rounded-bl-none;
|
|
278
313
|
}
|
|
314
|
+
|
|
315
|
+
&:last-child {
|
|
316
|
+
@apply psui-rounded-br-none;
|
|
317
|
+
}
|
|
279
318
|
}
|
|
280
319
|
}
|
|
281
320
|
}
|
|
282
321
|
|
|
283
|
-
|
|
284
|
-
|
|
322
|
+
&:not(.is-first) {
|
|
323
|
+
td {
|
|
324
|
+
&:first-child {
|
|
325
|
+
@apply psui-rounded-tl-none;
|
|
326
|
+
}
|
|
327
|
+
&:last-child {
|
|
328
|
+
@apply psui-rounded-tr-none;
|
|
329
|
+
}
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
&.opened {
|
|
333
|
+
border-bottom-width: 14px;
|
|
334
|
+
}
|
|
335
|
+
}
|
|
336
|
+
}
|
|
337
|
+
}
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
&.layout-flexible {
|
|
341
|
+
|
|
342
|
+
tr {
|
|
343
|
+
th, td {
|
|
344
|
+
&:last-child {
|
|
345
|
+
@apply psui-pr-2;
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
thead {
|
|
351
|
+
@apply psui-bg-white psui-items-start psui-z-15;
|
|
352
|
+
|
|
353
|
+
&:after {
|
|
354
|
+
content: '';
|
|
355
|
+
@apply psui-inline-block psui-absolute psui-top-0 psui-w-2 psui-h-full psui-bg-white;
|
|
356
|
+
right: -8px;
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
tr {
|
|
360
|
+
.title {
|
|
361
|
+
@apply psui-text-small psui-font-bold psui-leading-4 psui-text-gray-80;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
th {
|
|
365
|
+
@apply psui-pl-6 psui-text-gray-50 psui-text-right psui-w-auto psui-align-top;
|
|
366
|
+
padding-top: 0.438rem;
|
|
367
|
+
padding-bottom: 0.625rem;
|
|
368
|
+
|
|
369
|
+
.description {
|
|
370
|
+
@apply psui-text-xsmall psui-font-normal;
|
|
371
|
+
line-height: 110%;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
&:first-child {
|
|
375
|
+
padding-left: 0;
|
|
376
|
+
|
|
377
|
+
> div {
|
|
378
|
+
@apply psui-items-start;
|
|
379
|
+
}
|
|
380
|
+
}
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
&:first-of-type {
|
|
384
|
+
th {
|
|
385
|
+
@apply psui-text-left;
|
|
386
|
+
padding-top: 0;
|
|
387
|
+
padding-bottom: 0;
|
|
388
|
+
|
|
389
|
+
> div {
|
|
390
|
+
@apply psui-flex psui-flex-row psui-border-b psui-border-gray-30;
|
|
391
|
+
padding-top: 0.5rem;
|
|
392
|
+
padding-bottom: 0.625rem;
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
p {
|
|
399
|
+
@apply psui-text-p;
|
|
400
|
+
line-height: 18px;
|
|
401
|
+
}
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
&:not(:first-of-type) {
|
|
405
|
+
th {
|
|
406
|
+
&:first-child {
|
|
407
|
+
@apply psui-text-left;
|
|
408
|
+
}
|
|
409
|
+
}
|
|
410
|
+
}
|
|
411
|
+
}
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
tbody {
|
|
415
|
+
tr {
|
|
416
|
+
@apply psui-border-b psui-border-gray-20;
|
|
417
|
+
|
|
418
|
+
.title {
|
|
419
|
+
@apply psui-flex psui-items-center;
|
|
420
|
+
line-height: 24px;
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
td {
|
|
424
|
+
@apply psui-pl-8 psui-text-gray-70 psui-h-10 psui-text-right psui-text-small;
|
|
425
|
+
padding-top: 0.688rem;
|
|
426
|
+
padding-bottom: 0.688rem;
|
|
427
|
+
min-height: 41.5px;
|
|
428
|
+
|
|
429
|
+
> div {
|
|
430
|
+
@apply psui-flex psui-items-center;
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
.actions {
|
|
434
|
+
@apply psui-flex psui-items-center psui-h-full psui-relative;
|
|
435
|
+
|
|
436
|
+
&-button {
|
|
437
|
+
@apply psui-cursor-pointer psui-ml-1;
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
.is-last-deep {
|
|
441
|
+
@apply psui-pl-4;
|
|
442
|
+
}
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
&:first-child {
|
|
446
|
+
@apply psui-pl-0 psui-pr-8 psui-text-left psui-block;
|
|
447
|
+
padding-top: 8px;
|
|
448
|
+
padding-bottom: 8px;
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
&.column-flexible_score {
|
|
452
|
+
@apply psui-text-gray-40;
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
.psui-el-tooltip-dialog {
|
|
456
|
+
text-align: left;
|
|
457
|
+
max-width: 180px;
|
|
458
|
+
|
|
459
|
+
.psui-el-tooltip-content-wrapper {
|
|
460
|
+
white-space: normal;
|
|
461
|
+
}
|
|
462
|
+
}
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
&.is-first {
|
|
466
|
+
@apply psui-border-transparent;
|
|
467
|
+
|
|
468
|
+
.actions-button span {
|
|
469
|
+
font-size: 16px !important;
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
.title {
|
|
473
|
+
@apply psui-text-xsmall psui-font-bold psui-text-gray-60;
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
td {
|
|
477
|
+
@apply psui-h-auto psui-pt-2 psui-pb-0;
|
|
478
|
+
min-height: 1rem;
|
|
479
|
+
}
|
|
285
480
|
}
|
|
286
481
|
|
|
287
482
|
&:not(.is-first) {
|
|
288
483
|
td {
|
|
289
484
|
&:first-child {
|
|
290
|
-
@apply psui-
|
|
485
|
+
@apply psui-relative;
|
|
486
|
+
|
|
487
|
+
&:before,
|
|
488
|
+
&:after {
|
|
489
|
+
content: '';
|
|
490
|
+
@apply psui-absolute psui-top-0;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
&:before {
|
|
494
|
+
@apply psui-bg-white psui-left-0;
|
|
495
|
+
width: 22px;
|
|
496
|
+
height: calc(100% + 1px);
|
|
497
|
+
}
|
|
498
|
+
|
|
499
|
+
&:after {
|
|
500
|
+
@apply psui-bg-gray-20 psui-w-px psui-h-0;
|
|
501
|
+
left: 11px;
|
|
502
|
+
}
|
|
503
|
+
}
|
|
504
|
+
}
|
|
505
|
+
|
|
506
|
+
&:hover {
|
|
507
|
+
td {
|
|
508
|
+
@apply psui-bg-blue-10;
|
|
509
|
+
}
|
|
510
|
+
}
|
|
511
|
+
|
|
512
|
+
&.opened {
|
|
513
|
+
td:first-child {
|
|
514
|
+
&:after {
|
|
515
|
+
height: calc(100% + 1px);
|
|
516
|
+
}
|
|
291
517
|
}
|
|
292
518
|
}
|
|
293
519
|
}
|
|
520
|
+
|
|
521
|
+
&.is-last {
|
|
522
|
+
@apply psui-border-b-0;
|
|
523
|
+
}
|
|
524
|
+
|
|
525
|
+
&.is-active {
|
|
526
|
+
@apply psui-bg-gray-10;
|
|
527
|
+
|
|
528
|
+
td:first-child {
|
|
529
|
+
@apply psui-bg-gray-10;
|
|
530
|
+
}
|
|
531
|
+
}
|
|
294
532
|
}
|
|
295
533
|
}
|
|
296
534
|
}
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
<label
|
|
43
43
|
:for="getInputId"
|
|
44
44
|
class="psui-el-checkmark"
|
|
45
|
-
:title="label"
|
|
45
|
+
:title="showLabelTitle ? label : ''"
|
|
46
46
|
>
|
|
47
47
|
<slot name="content">
|
|
48
48
|
<span>{{ label }}</span>
|
|
@@ -105,6 +105,10 @@ export default {
|
|
|
105
105
|
type: String,
|
|
106
106
|
default: 'default',
|
|
107
107
|
validator: (value)=> ['default','mixed'].includes(value)
|
|
108
|
+
},
|
|
109
|
+
showLabelTitle: {
|
|
110
|
+
type: Boolean,
|
|
111
|
+
default: true
|
|
108
112
|
}
|
|
109
113
|
},
|
|
110
114
|
inheritAttrs: false,
|
|
@@ -47,6 +47,7 @@
|
|
|
47
47
|
@dragstart="$emit('drag-start-item', { indexColumnGroup, indexColumn }, $event)"
|
|
48
48
|
@dragover="$emit('drag-over-item', { indexColumnGroup, indexColumn }, $event)"
|
|
49
49
|
@dragend="$emit('drag-end-item', $event)"
|
|
50
|
+
v-tooltip="column.tooltip || undefined"
|
|
50
51
|
>
|
|
51
52
|
<div
|
|
52
53
|
class="psui-w-full psui-flex psui-items-center"
|