@policystudio/policy-studio-ui-vue 1.0.66 → 1.0.68
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/package.json +1 -1
- package/src/components/tooltip/PsDialogTooltip.vue +12 -0
- package/src/components/tooltip/PsRichTooltip.vue +7 -1
- package/src/components/tooltip/PsTooltip.vue +16 -2
- package/src/stories/Tooltip.stories.js +2 -2
- package/vetur/attributes.json +144 -2
- package/vetur/tags.json +50 -12
package/package.json
CHANGED
|
@@ -64,6 +64,14 @@ export default {
|
|
|
64
64
|
type: String,
|
|
65
65
|
required: false,
|
|
66
66
|
},
|
|
67
|
+
/**
|
|
68
|
+
* It sets the vertical position.
|
|
69
|
+
*/
|
|
70
|
+
position:{
|
|
71
|
+
type: String,
|
|
72
|
+
default: 'bottom',
|
|
73
|
+
validator: (value)=> ['bottom','top'].includes(value)
|
|
74
|
+
}
|
|
67
75
|
},
|
|
68
76
|
inheritAttrs: true,
|
|
69
77
|
emits: ['show', 'click'],
|
|
@@ -124,6 +132,10 @@ export default {
|
|
|
124
132
|
dialog.style.left = `${rectTrigger.x + ((rectTrigger.width - rectDialog.width)/2)}px`
|
|
125
133
|
}
|
|
126
134
|
|
|
135
|
+
if(this.position == 'top') {
|
|
136
|
+
dialog.style.top = `${rectTrigger.y - rectTrigger.height - 10}px`
|
|
137
|
+
}
|
|
138
|
+
|
|
127
139
|
setTimeout(() => {
|
|
128
140
|
dialog.style.opacity = 100
|
|
129
141
|
}, 100)
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<PsTooltip :layout="layout" :title="title" :cssClass="cssClass">
|
|
2
|
+
<PsTooltip :layout="layout" :title="title" :cssClass="cssClass" :position="position">
|
|
3
3
|
<template v-slot:trigger>
|
|
4
4
|
<slot name="trigger"></slot>
|
|
5
5
|
</template>
|
|
@@ -35,6 +35,12 @@ export default {
|
|
|
35
35
|
type: String,
|
|
36
36
|
default: '',
|
|
37
37
|
},
|
|
38
|
+
position:{
|
|
39
|
+
type: String,
|
|
40
|
+
default: 'bottom',
|
|
41
|
+
validator: (value)=> ['bottom','top'].includes(value)
|
|
42
|
+
}
|
|
43
|
+
|
|
38
44
|
},
|
|
39
45
|
}
|
|
40
46
|
</script>
|
|
@@ -4,7 +4,9 @@
|
|
|
4
4
|
<slot name="trigger"></slot>
|
|
5
5
|
</div>
|
|
6
6
|
|
|
7
|
-
<div
|
|
7
|
+
<div
|
|
8
|
+
class='psui-el-tooltip-wrapper'
|
|
9
|
+
>
|
|
8
10
|
<div
|
|
9
11
|
role="menu"
|
|
10
12
|
ref="dialog"
|
|
@@ -54,6 +56,14 @@ export default {
|
|
|
54
56
|
*/
|
|
55
57
|
cssClass:{
|
|
56
58
|
type: String,
|
|
59
|
+
},
|
|
60
|
+
/**
|
|
61
|
+
* It sets the vertical position.
|
|
62
|
+
*/
|
|
63
|
+
position:{
|
|
64
|
+
type: String,
|
|
65
|
+
default: 'bottom',
|
|
66
|
+
validator: (value)=> ['bottom','top'].includes(value)
|
|
57
67
|
}
|
|
58
68
|
},
|
|
59
69
|
inheritAttrs: true,
|
|
@@ -67,7 +77,7 @@ export default {
|
|
|
67
77
|
computed:{
|
|
68
78
|
getComponentClass(){
|
|
69
79
|
return `layout-${this.layout}`
|
|
70
|
-
}
|
|
80
|
+
},
|
|
71
81
|
},
|
|
72
82
|
mounted() {
|
|
73
83
|
document.addEventListener('resize', this.updatePosition)
|
|
@@ -115,6 +125,10 @@ export default {
|
|
|
115
125
|
dialog.style.left = `${rectTrigger.x + ((rectTrigger.width - rectDialog.width)/2)}px`
|
|
116
126
|
}
|
|
117
127
|
|
|
128
|
+
if(this.position == 'top') {
|
|
129
|
+
dialog.style.top = `${rectTrigger.y - rectDialog.height - 10}px`
|
|
130
|
+
}
|
|
131
|
+
|
|
118
132
|
setTimeout(() => {
|
|
119
133
|
dialog.style.opacity = 100
|
|
120
134
|
}, 100)
|
|
@@ -78,7 +78,7 @@ const TemplateDefault = (args, {argTypes}) => ({
|
|
|
78
78
|
props: Object.keys(argTypes),
|
|
79
79
|
components: {PsTooltip},
|
|
80
80
|
template: `
|
|
81
|
-
<div style='display: flex; justify-content: space-between;'>
|
|
81
|
+
<div style='display: flex; justify-content: space-between; flex-direction: column; gap: 100px;'>
|
|
82
82
|
<PsTooltip v-bind='$props'>
|
|
83
83
|
<template v-slot:trigger>
|
|
84
84
|
Trigger
|
|
@@ -87,7 +87,7 @@ template: `
|
|
|
87
87
|
Basic Tooltip
|
|
88
88
|
</template>
|
|
89
89
|
</PsTooltip>
|
|
90
|
-
<PsTooltip v-bind='$props'>
|
|
90
|
+
<PsTooltip v-bind='$props' position='top'>
|
|
91
91
|
<template v-slot:trigger>
|
|
92
92
|
Trigger
|
|
93
93
|
</template>
|
package/vetur/attributes.json
CHANGED
|
@@ -39,6 +39,14 @@
|
|
|
39
39
|
"type": "string",
|
|
40
40
|
"description": "It sets the text key to get the svg icon in Google Fonts. Make sure to get the correct description of your icon on https://fonts.google.com/."
|
|
41
41
|
},
|
|
42
|
+
"ps-accordion-item/hasCustomHeader": {
|
|
43
|
+
"type": "boolean",
|
|
44
|
+
"description": "It sets if it has a custom header"
|
|
45
|
+
},
|
|
46
|
+
"PsAccordionItem/hasCustomHeader": {
|
|
47
|
+
"type": "boolean",
|
|
48
|
+
"description": "It sets if it has a custom header"
|
|
49
|
+
},
|
|
42
50
|
"ps-badge-with-icon/icon": {
|
|
43
51
|
"type": "string"
|
|
44
52
|
},
|
|
@@ -317,6 +325,14 @@
|
|
|
317
325
|
"type": "boolean",
|
|
318
326
|
"description": "It disable the button. All mouse event are disabled."
|
|
319
327
|
},
|
|
328
|
+
"ps-button/loading": {
|
|
329
|
+
"type": "boolean",
|
|
330
|
+
"description": "It disable and add a spin icon to the button. All mouse event are disabled."
|
|
331
|
+
},
|
|
332
|
+
"PsButton/loading": {
|
|
333
|
+
"type": "boolean",
|
|
334
|
+
"description": "It disable and add a spin icon to the button. All mouse event are disabled."
|
|
335
|
+
},
|
|
320
336
|
"ps-button/iconClass": {
|
|
321
337
|
"type": "string",
|
|
322
338
|
"description": "It set any further css style that might be needed."
|
|
@@ -401,6 +417,14 @@
|
|
|
401
417
|
"type": "boolean",
|
|
402
418
|
"description": "It sets if the button is active or not."
|
|
403
419
|
},
|
|
420
|
+
"ps-chips/inputAttrs": {
|
|
421
|
+
"type": "object",
|
|
422
|
+
"description": "Add html attributes to the element input"
|
|
423
|
+
},
|
|
424
|
+
"PsChips/inputAttrs": {
|
|
425
|
+
"type": "object",
|
|
426
|
+
"description": "Add html attributes to the element input"
|
|
427
|
+
},
|
|
404
428
|
"ps-checkbox/label": {
|
|
405
429
|
"type": "string",
|
|
406
430
|
"description": "It sets the label of the checkbox input."
|
|
@@ -480,10 +504,20 @@
|
|
|
480
504
|
"description": "It disables the checkbox input."
|
|
481
505
|
},
|
|
482
506
|
"ps-checkbox-simple/checked": {
|
|
483
|
-
"type": "boolean"
|
|
507
|
+
"type": "boolean",
|
|
508
|
+
"description": "Sets the input as checked"
|
|
484
509
|
},
|
|
485
510
|
"PsCheckboxSimple/checked": {
|
|
486
|
-
"type": "boolean"
|
|
511
|
+
"type": "boolean",
|
|
512
|
+
"description": "Sets the input as checked"
|
|
513
|
+
},
|
|
514
|
+
"ps-checkbox-simple/inputAttrs": {
|
|
515
|
+
"type": "object",
|
|
516
|
+
"description": "Add html attributes to the element input"
|
|
517
|
+
},
|
|
518
|
+
"PsCheckboxSimple/inputAttrs": {
|
|
519
|
+
"type": "object",
|
|
520
|
+
"description": "Add html attributes to the element input"
|
|
487
521
|
},
|
|
488
522
|
"ps-checkbox-simple/size": {
|
|
489
523
|
"type": "string",
|
|
@@ -691,6 +725,60 @@
|
|
|
691
725
|
"small"
|
|
692
726
|
]
|
|
693
727
|
},
|
|
728
|
+
"ps-radio-button-simple/label": {
|
|
729
|
+
"type": "string",
|
|
730
|
+
"description": "It sets the label of the checkbox input."
|
|
731
|
+
},
|
|
732
|
+
"PsRadioButtonSimple/label": {
|
|
733
|
+
"type": "string",
|
|
734
|
+
"description": "It sets the label of the checkbox input."
|
|
735
|
+
},
|
|
736
|
+
"ps-radio-button-simple/name": {
|
|
737
|
+
"type": "string"
|
|
738
|
+
},
|
|
739
|
+
"PsRadioButtonSimple/name": {
|
|
740
|
+
"type": "string"
|
|
741
|
+
},
|
|
742
|
+
"ps-radio-button-simple/disabled": {
|
|
743
|
+
"type": "boolean",
|
|
744
|
+
"description": "It disables the checkbox input."
|
|
745
|
+
},
|
|
746
|
+
"PsRadioButtonSimple/disabled": {
|
|
747
|
+
"type": "boolean",
|
|
748
|
+
"description": "It disables the checkbox input."
|
|
749
|
+
},
|
|
750
|
+
"ps-radio-button-simple/checked": {
|
|
751
|
+
"type": "boolean",
|
|
752
|
+
"description": "Sets the input as checked"
|
|
753
|
+
},
|
|
754
|
+
"PsRadioButtonSimple/checked": {
|
|
755
|
+
"type": "boolean",
|
|
756
|
+
"description": "Sets the input as checked"
|
|
757
|
+
},
|
|
758
|
+
"ps-radio-button-simple/inputAttrs": {
|
|
759
|
+
"type": "object",
|
|
760
|
+
"description": "Add html attributes to the element input"
|
|
761
|
+
},
|
|
762
|
+
"PsRadioButtonSimple/inputAttrs": {
|
|
763
|
+
"type": "object",
|
|
764
|
+
"description": "Add html attributes to the element input"
|
|
765
|
+
},
|
|
766
|
+
"ps-radio-button-simple/size": {
|
|
767
|
+
"type": "string",
|
|
768
|
+
"description": "It set the of the checkbox input. eg: big and small.",
|
|
769
|
+
"options": [
|
|
770
|
+
"big",
|
|
771
|
+
"small"
|
|
772
|
+
]
|
|
773
|
+
},
|
|
774
|
+
"PsRadioButtonSimple/size": {
|
|
775
|
+
"type": "string",
|
|
776
|
+
"description": "It set the of the checkbox input. eg: big and small.",
|
|
777
|
+
"options": [
|
|
778
|
+
"big",
|
|
779
|
+
"small"
|
|
780
|
+
]
|
|
781
|
+
},
|
|
694
782
|
"ps-slider/min": {
|
|
695
783
|
"type": "number"
|
|
696
784
|
},
|
|
@@ -889,6 +977,14 @@
|
|
|
889
977
|
"type": "boolean",
|
|
890
978
|
"description": "It's a property responsible for toggling the dropdown menu. default: true."
|
|
891
979
|
},
|
|
980
|
+
"ps-dropdown/disabled": {
|
|
981
|
+
"type": "boolean",
|
|
982
|
+
"description": "Disable the toogle on click. default: false."
|
|
983
|
+
},
|
|
984
|
+
"PsDropdown/disabled": {
|
|
985
|
+
"type": "boolean",
|
|
986
|
+
"description": "Disable the toogle on click. default: false."
|
|
987
|
+
},
|
|
892
988
|
"ps-dropdown-simple/icon": {
|
|
893
989
|
"type": "string",
|
|
894
990
|
"description": "It sets the text key which will retrieve a icon from Google Fonts. Make sure to get the correct description of your icon on https://fonts.google.com/."
|
|
@@ -1353,6 +1449,22 @@
|
|
|
1353
1449
|
"type": "string",
|
|
1354
1450
|
"description": "It sets a additional styling if needed."
|
|
1355
1451
|
},
|
|
1452
|
+
"ps-dialog-tooltip/position": {
|
|
1453
|
+
"type": "string",
|
|
1454
|
+
"description": "It sets the vertical position.",
|
|
1455
|
+
"options": [
|
|
1456
|
+
"bottom",
|
|
1457
|
+
"top"
|
|
1458
|
+
]
|
|
1459
|
+
},
|
|
1460
|
+
"PsDialogTooltip/position": {
|
|
1461
|
+
"type": "string",
|
|
1462
|
+
"description": "It sets the vertical position.",
|
|
1463
|
+
"options": [
|
|
1464
|
+
"bottom",
|
|
1465
|
+
"top"
|
|
1466
|
+
]
|
|
1467
|
+
},
|
|
1356
1468
|
"ps-rich-tooltip/title": {
|
|
1357
1469
|
"type": "string",
|
|
1358
1470
|
"description": "It sets the title of the tooltip if needed."
|
|
@@ -1385,6 +1497,20 @@
|
|
|
1385
1497
|
"PsRichTooltip/cssClass": {
|
|
1386
1498
|
"type": "string"
|
|
1387
1499
|
},
|
|
1500
|
+
"ps-rich-tooltip/position": {
|
|
1501
|
+
"type": "string",
|
|
1502
|
+
"options": [
|
|
1503
|
+
"bottom",
|
|
1504
|
+
"top"
|
|
1505
|
+
]
|
|
1506
|
+
},
|
|
1507
|
+
"PsRichTooltip/position": {
|
|
1508
|
+
"type": "string",
|
|
1509
|
+
"options": [
|
|
1510
|
+
"bottom",
|
|
1511
|
+
"top"
|
|
1512
|
+
]
|
|
1513
|
+
},
|
|
1388
1514
|
"ps-tooltip/title": {
|
|
1389
1515
|
"type": "string",
|
|
1390
1516
|
"description": "It sets the title of the tooltip if needed."
|
|
@@ -1417,6 +1543,22 @@
|
|
|
1417
1543
|
"type": "string",
|
|
1418
1544
|
"description": "It sets a additional styling if needed."
|
|
1419
1545
|
},
|
|
1546
|
+
"ps-tooltip/position": {
|
|
1547
|
+
"type": "string",
|
|
1548
|
+
"description": "It sets the vertical position.",
|
|
1549
|
+
"options": [
|
|
1550
|
+
"bottom",
|
|
1551
|
+
"top"
|
|
1552
|
+
]
|
|
1553
|
+
},
|
|
1554
|
+
"PsTooltip/position": {
|
|
1555
|
+
"type": "string",
|
|
1556
|
+
"description": "It sets the vertical position.",
|
|
1557
|
+
"options": [
|
|
1558
|
+
"bottom",
|
|
1559
|
+
"top"
|
|
1560
|
+
]
|
|
1561
|
+
},
|
|
1420
1562
|
"app-icon/icon": {
|
|
1421
1563
|
"type": "string",
|
|
1422
1564
|
"description": "It sets the text key to get the svg icon in Google Fonts. Make sure to get the correct description of your icon on https://fonts.google.com/."
|
package/vetur/tags.json
CHANGED
|
@@ -15,7 +15,8 @@
|
|
|
15
15
|
"attributes": [
|
|
16
16
|
"title",
|
|
17
17
|
"opened",
|
|
18
|
-
"icon"
|
|
18
|
+
"icon",
|
|
19
|
+
"hasCustomHeader"
|
|
19
20
|
],
|
|
20
21
|
"description": ""
|
|
21
22
|
},
|
|
@@ -23,7 +24,8 @@
|
|
|
23
24
|
"attributes": [
|
|
24
25
|
"title",
|
|
25
26
|
"opened",
|
|
26
|
-
"icon"
|
|
27
|
+
"icon",
|
|
28
|
+
"hasCustomHeader"
|
|
27
29
|
],
|
|
28
30
|
"description": ""
|
|
29
31
|
},
|
|
@@ -155,6 +157,7 @@
|
|
|
155
157
|
"iconPosition",
|
|
156
158
|
"size",
|
|
157
159
|
"disabled",
|
|
160
|
+
"loading",
|
|
158
161
|
"iconClass"
|
|
159
162
|
],
|
|
160
163
|
"description": ""
|
|
@@ -167,6 +170,7 @@
|
|
|
167
170
|
"iconPosition",
|
|
168
171
|
"size",
|
|
169
172
|
"disabled",
|
|
173
|
+
"loading",
|
|
170
174
|
"iconClass"
|
|
171
175
|
],
|
|
172
176
|
"description": ""
|
|
@@ -179,7 +183,8 @@
|
|
|
179
183
|
"icon",
|
|
180
184
|
"checked",
|
|
181
185
|
"disabled",
|
|
182
|
-
"active"
|
|
186
|
+
"active",
|
|
187
|
+
"inputAttrs"
|
|
183
188
|
],
|
|
184
189
|
"description": ""
|
|
185
190
|
},
|
|
@@ -191,7 +196,8 @@
|
|
|
191
196
|
"icon",
|
|
192
197
|
"checked",
|
|
193
198
|
"disabled",
|
|
194
|
-
"active"
|
|
199
|
+
"active",
|
|
200
|
+
"inputAttrs"
|
|
195
201
|
],
|
|
196
202
|
"description": ""
|
|
197
203
|
},
|
|
@@ -222,6 +228,7 @@
|
|
|
222
228
|
"label",
|
|
223
229
|
"disabled",
|
|
224
230
|
"checked",
|
|
231
|
+
"inputAttrs",
|
|
225
232
|
"size",
|
|
226
233
|
"layout"
|
|
227
234
|
],
|
|
@@ -232,6 +239,7 @@
|
|
|
232
239
|
"label",
|
|
233
240
|
"disabled",
|
|
234
241
|
"checked",
|
|
242
|
+
"inputAttrs",
|
|
235
243
|
"size",
|
|
236
244
|
"layout"
|
|
237
245
|
],
|
|
@@ -311,6 +319,28 @@
|
|
|
311
319
|
],
|
|
312
320
|
"description": ""
|
|
313
321
|
},
|
|
322
|
+
"ps-radio-button-simple": {
|
|
323
|
+
"attributes": [
|
|
324
|
+
"label",
|
|
325
|
+
"name",
|
|
326
|
+
"disabled",
|
|
327
|
+
"checked",
|
|
328
|
+
"inputAttrs",
|
|
329
|
+
"size"
|
|
330
|
+
],
|
|
331
|
+
"description": ""
|
|
332
|
+
},
|
|
333
|
+
"PsRadioButtonSimple": {
|
|
334
|
+
"attributes": [
|
|
335
|
+
"label",
|
|
336
|
+
"name",
|
|
337
|
+
"disabled",
|
|
338
|
+
"checked",
|
|
339
|
+
"inputAttrs",
|
|
340
|
+
"size"
|
|
341
|
+
],
|
|
342
|
+
"description": ""
|
|
343
|
+
},
|
|
314
344
|
"ps-slider": {
|
|
315
345
|
"attributes": [
|
|
316
346
|
"min",
|
|
@@ -411,7 +441,8 @@
|
|
|
411
441
|
"attributes": [
|
|
412
442
|
"minWidthDropDown",
|
|
413
443
|
"buttonLabelOnShow",
|
|
414
|
-
"toggleWhenActive"
|
|
444
|
+
"toggleWhenActive",
|
|
445
|
+
"disabled"
|
|
415
446
|
],
|
|
416
447
|
"description": ""
|
|
417
448
|
},
|
|
@@ -419,7 +450,8 @@
|
|
|
419
450
|
"attributes": [
|
|
420
451
|
"minWidthDropDown",
|
|
421
452
|
"buttonLabelOnShow",
|
|
422
|
-
"toggleWhenActive"
|
|
453
|
+
"toggleWhenActive",
|
|
454
|
+
"disabled"
|
|
423
455
|
],
|
|
424
456
|
"description": ""
|
|
425
457
|
},
|
|
@@ -596,7 +628,8 @@
|
|
|
596
628
|
"title",
|
|
597
629
|
"buttonText",
|
|
598
630
|
"layout",
|
|
599
|
-
"cssClass"
|
|
631
|
+
"cssClass",
|
|
632
|
+
"position"
|
|
600
633
|
],
|
|
601
634
|
"description": ""
|
|
602
635
|
},
|
|
@@ -605,7 +638,8 @@
|
|
|
605
638
|
"title",
|
|
606
639
|
"buttonText",
|
|
607
640
|
"layout",
|
|
608
|
-
"cssClass"
|
|
641
|
+
"cssClass",
|
|
642
|
+
"position"
|
|
609
643
|
],
|
|
610
644
|
"description": ""
|
|
611
645
|
},
|
|
@@ -613,7 +647,8 @@
|
|
|
613
647
|
"attributes": [
|
|
614
648
|
"title",
|
|
615
649
|
"layout",
|
|
616
|
-
"cssClass"
|
|
650
|
+
"cssClass",
|
|
651
|
+
"position"
|
|
617
652
|
],
|
|
618
653
|
"description": ""
|
|
619
654
|
},
|
|
@@ -621,7 +656,8 @@
|
|
|
621
656
|
"attributes": [
|
|
622
657
|
"title",
|
|
623
658
|
"layout",
|
|
624
|
-
"cssClass"
|
|
659
|
+
"cssClass",
|
|
660
|
+
"position"
|
|
625
661
|
],
|
|
626
662
|
"description": ""
|
|
627
663
|
},
|
|
@@ -630,7 +666,8 @@
|
|
|
630
666
|
"title",
|
|
631
667
|
"ignoreDialog",
|
|
632
668
|
"layout",
|
|
633
|
-
"cssClass"
|
|
669
|
+
"cssClass",
|
|
670
|
+
"position"
|
|
634
671
|
],
|
|
635
672
|
"description": ""
|
|
636
673
|
},
|
|
@@ -639,7 +676,8 @@
|
|
|
639
676
|
"title",
|
|
640
677
|
"ignoreDialog",
|
|
641
678
|
"layout",
|
|
642
|
-
"cssClass"
|
|
679
|
+
"cssClass",
|
|
680
|
+
"position"
|
|
643
681
|
],
|
|
644
682
|
"description": ""
|
|
645
683
|
},
|