@policystudio/policy-studio-ui-vue 1.0.61 → 1.0.62
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
CHANGED
|
@@ -4,9 +4,16 @@
|
|
|
4
4
|
@mouseenter="onMouseEnter"
|
|
5
5
|
@mouseleave="onMouseLeave"
|
|
6
6
|
class='psui-el-button'
|
|
7
|
-
:class="[getComponentClass, {'hover': isHover}, {'disabled': disabled}]"
|
|
7
|
+
:class="[getComponentClass, {'hover': isHover}, {'disabled': disabled || loading }]"
|
|
8
8
|
>
|
|
9
|
-
<
|
|
9
|
+
<svg v-if="loading"
|
|
10
|
+
class="psui-animate-spin psui-mr-3 psui-h-5 psui-w-5 psui-text-black"
|
|
11
|
+
:class="`${iconPosition == 'left' ? 'psui-mr-3' : 'psui-ml-3 psui--mr-1'}`"
|
|
12
|
+
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
13
|
+
<circle class="psui-opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
14
|
+
<path class="psui-opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
15
|
+
</svg>
|
|
16
|
+
<i v-else-if="icon" :class='iconClass' class='material-icons-round'>{{icon}}</i>
|
|
10
17
|
<span v-if="label">{{ label }}</span>
|
|
11
18
|
</button>
|
|
12
19
|
</template>
|
|
@@ -57,6 +64,13 @@ export default {
|
|
|
57
64
|
type: Boolean,
|
|
58
65
|
default: false
|
|
59
66
|
},
|
|
67
|
+
/**
|
|
68
|
+
* It disable and add a spin icon to the button. All mouse event are disabled.
|
|
69
|
+
*/
|
|
70
|
+
loading: {
|
|
71
|
+
type: Boolean,
|
|
72
|
+
default: false
|
|
73
|
+
},
|
|
60
74
|
/**
|
|
61
75
|
* It set any further css style that might be needed.
|
|
62
76
|
*/
|
|
@@ -76,7 +90,7 @@ export default {
|
|
|
76
90
|
} else {
|
|
77
91
|
return `layout-${this.layout} size-${this.size}`
|
|
78
92
|
}
|
|
79
|
-
}
|
|
93
|
+
},
|
|
80
94
|
},
|
|
81
95
|
methods: {
|
|
82
96
|
onClick() {
|
|
@@ -15,78 +15,83 @@ const TemplateDefault = (args, { argTypes }) => ({
|
|
|
15
15
|
props: Object.keys(argTypes),
|
|
16
16
|
components: { PsButton },
|
|
17
17
|
template: `
|
|
18
|
-
<div style="display:flex; flex-direction: column;">
|
|
18
|
+
<div style="display:flex; flex-direction: column;">
|
|
19
19
|
<p>Size: Big</p>
|
|
20
20
|
<div style="display: flex; flex-direction: column; gap: 10px;">
|
|
21
|
-
<div style="display: grid; grid-template-columns: repeat(
|
|
21
|
+
<div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;">
|
|
22
22
|
<span style="text-align: center; color: black;">Solid Style</span>
|
|
23
23
|
<PsButton label='Left Icon' layout='solid' icon='verified' iconPosition='left'/>
|
|
24
24
|
<PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right'/>
|
|
25
25
|
<PsButton label='Text Only' layout='solid' />
|
|
26
|
-
<PsButton label='Disabled' layout='solid' icon='verified' iconPosition='left' disabled/>
|
|
26
|
+
<PsButton label='Disabled' layout='solid' icon='verified' iconPosition='left' disabled/>
|
|
27
|
+
<PsButton label='Loading Solid' layout='solid' icon='verified' iconPosition='left' loading />
|
|
27
28
|
</div>
|
|
28
|
-
<div style="display: grid; grid-template-columns: repeat(
|
|
29
|
+
<div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
|
|
29
30
|
<span style="text-align: center; color: blue;">Outline Style</span>
|
|
30
31
|
<PsButton label='Left Icon' layout='outline' icon='verified' iconPosition='left'/>
|
|
31
32
|
<PsButton label='Right Icon' layout='outline' icon='verified' iconPosition='right'/>
|
|
32
33
|
<PsButton label='Text Only' layout='outline'/>
|
|
33
34
|
<PsButton label='Disabled' layout='outline' icon='verified' iconPosition='left' disabled/>
|
|
35
|
+
<PsButton label='Loading Outline' layout='outline' icon='verified' iconPosition='left' loading />
|
|
34
36
|
</div>
|
|
35
|
-
<div style="display: grid; grid-template-columns: repeat(
|
|
37
|
+
<div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
|
|
36
38
|
<span style="text-align: center; color: brown;">Ghost Style</span>
|
|
37
39
|
<PsButton label='Left Icon' layout='ghost' icon='verified' iconPosition='left'/>
|
|
38
40
|
<PsButton label='Right Icon' layout='ghost' icon='verified' iconPosition='right'/>
|
|
39
41
|
<PsButton label='Text Only' layout='ghost' />
|
|
40
42
|
<PsButton label='Disabled' layout='ghost' icon='verified' iconPosition='left' disabled/>
|
|
43
|
+
<PsButton label='Loading Ghost' layout='ghost' icon='verified' iconPosition='left' loading />
|
|
41
44
|
</div>
|
|
42
|
-
<div style="display: grid; grid-template-columns: repeat(
|
|
45
|
+
<div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
|
|
43
46
|
<span style="text-align: center; color: green;">Only-Text Style</span>
|
|
44
47
|
<PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left'/>
|
|
45
48
|
<PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right'/>
|
|
46
49
|
<PsButton label='Text Only' layout='onlytext'/>
|
|
47
50
|
<PsButton label='Disabled' layout='onlytext' icon='verified' iconPosition='left' disabled/>
|
|
51
|
+
<PsButton label='Loading Only-Text' layout='onlytext' icon='verified' iconPosition='left' loading />
|
|
48
52
|
</div>
|
|
49
|
-
<div style="display: grid; grid-template-columns: repeat(
|
|
53
|
+
<div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
|
|
50
54
|
<span style="text-align: center; color: red;">Caution Button</span>
|
|
51
55
|
<PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left'/>
|
|
52
56
|
<PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right'/>
|
|
53
57
|
<PsButton label='Text Only' layout='caution' />
|
|
54
58
|
<PsButton label='Disabled' layout='caution' icon='verified' iconPosition='left' disabled/>
|
|
59
|
+
<PsButton label='Loading Caution' layout='caution' icon='verified' iconPosition='left' loading />
|
|
55
60
|
</div>
|
|
56
61
|
|
|
57
62
|
|
|
58
63
|
</div>
|
|
59
64
|
<p>Size: Medium</p>
|
|
60
65
|
<div style="display: flex; flex-direction: column; gap: 10px;">
|
|
61
|
-
<div style="display: grid; grid-template-columns: repeat(
|
|
66
|
+
<div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
|
|
62
67
|
<span style="text-align: center; color: black;">Solid Style</span>
|
|
63
68
|
<PsButton label='Left Icon' layout='solid' icon='verified' iconPosition='left' size='medium'/>
|
|
64
69
|
<PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right' size='medium'/>
|
|
65
70
|
<PsButton label='Text Only' layout='solid' size='medium'/>
|
|
66
71
|
<PsButton label='Disabled' layout='solid' icon='verified' iconPosition='left' disabled size='medium'/>
|
|
67
72
|
</div>
|
|
68
|
-
<div style="display: grid; grid-template-columns: repeat(
|
|
73
|
+
<div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
|
|
69
74
|
<span style="text-align: center; color: blue;">Outline Style</span>
|
|
70
75
|
<PsButton label='Left Icon' layout='outline' icon='verified' iconPosition='left' size='medium'/>
|
|
71
76
|
<PsButton label='Right Icon' layout='outline' icon='verified' iconPosition='right' size='medium'/>
|
|
72
77
|
<PsButton label='Text Only' layout='outline' size='medium'/>
|
|
73
78
|
<PsButton label='Disabled' layout='outline' icon='verified' iconPosition='left' disabled size='medium'/>
|
|
74
79
|
</div>
|
|
75
|
-
<div style="display: grid; grid-template-columns: repeat(
|
|
80
|
+
<div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
|
|
76
81
|
<span style="text-align: center; color: brown;">Ghost Style</span>
|
|
77
82
|
<PsButton label='Left Icon' layout='ghost' icon='verified' iconPosition='left' size='medium'/>
|
|
78
83
|
<PsButton label='Right Icon' layout='ghost' icon='verified' iconPosition='right' size='medium'/>
|
|
79
84
|
<PsButton label='Text Only' layout='ghost' size='medium'/>
|
|
80
85
|
<PsButton label='Disabled' layout='ghost' icon='verified' iconPosition='left' disabled size='medium'/>
|
|
81
86
|
</div>
|
|
82
|
-
<div style="display: grid; grid-template-columns: repeat(
|
|
87
|
+
<div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
|
|
83
88
|
<span style="text-align: center; color: green;">Only-Text Style</span>
|
|
84
89
|
<PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left' size='medium'/>
|
|
85
90
|
<PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right' size='medium'/>
|
|
86
91
|
<PsButton label='Text Only' layout='onlytext' size='medium'/>
|
|
87
92
|
<PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left' size='medium'/>
|
|
88
93
|
</div>
|
|
89
|
-
<div style="display: grid; grid-template-columns: repeat(
|
|
94
|
+
<div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
|
|
90
95
|
<span style="text-align: center; color: red;">Caution Button</span>
|
|
91
96
|
<PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left' size='medium'/>
|
|
92
97
|
<PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right' size='medium'/>
|
|
@@ -96,21 +101,21 @@ const TemplateDefault = (args, { argTypes }) => ({
|
|
|
96
101
|
</div>
|
|
97
102
|
<p>Size: Small</p>
|
|
98
103
|
<div style="display: flex; flex-direction: column; gap: 10px;">
|
|
99
|
-
<div style="display: grid; grid-template-columns: repeat(
|
|
104
|
+
<div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
|
|
100
105
|
<span style="text-align: center; color: black;">Solid Style</span>
|
|
101
106
|
<PsButton label='Left Icon' layout='solid' icon='verified' iconPosition='left' size='small'/>
|
|
102
107
|
<PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right' size='small'/>
|
|
103
108
|
<PsButton label='Text Only' layout='solid' size='small'/>
|
|
104
109
|
<PsButton label='Disabled' layout='solid' icon='verified' iconPosition='left' disabled size='small'/>
|
|
105
110
|
</div>
|
|
106
|
-
<div style="display: grid; grid-template-columns: repeat(
|
|
111
|
+
<div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
|
|
107
112
|
<span style="text-align: center; color: green;">Only-Text Style</span>
|
|
108
113
|
<PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left' size='small'/>
|
|
109
114
|
<PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right' size='small'/>
|
|
110
115
|
<PsButton label='Text Only' layout='onlytext' size='small'/>
|
|
111
116
|
<PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left' size='small'/>
|
|
112
117
|
</div>
|
|
113
|
-
<div style="display: grid; grid-template-columns: repeat(
|
|
118
|
+
<div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
|
|
114
119
|
<span style="text-align: center; color: red;">Caution Button</span>
|
|
115
120
|
<PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left' size='small'/>
|
|
116
121
|
<PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right' size='small'/>
|