@policystudio/policy-studio-ui-vue 1.0.54 → 1.0.55
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
|
@@ -1,40 +1,40 @@
|
|
|
1
1
|
@layer components {
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
.psui-el-badge-with-icon {
|
|
4
|
+
@apply psui-flex psui-items-center psui-py-1 psui-px-2 psui-rounded;
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
6
|
+
&.layout-grey{
|
|
7
|
+
@apply psui-bg-gray-10 psui-text-gray-50;
|
|
8
|
+
}
|
|
9
|
+
&.layout-blue{
|
|
10
|
+
@apply psui-bg-blue-20 psui-text-blue-60;
|
|
11
|
+
}
|
|
12
|
+
&.layout-green{
|
|
13
|
+
@apply psui-bg-green-10 psui-text-green-70;
|
|
14
|
+
}
|
|
15
|
+
&.layout-yellow{
|
|
16
|
+
@apply psui-bg-yellow-10 psui-text-yellow-70;
|
|
17
|
+
}
|
|
18
18
|
|
|
19
19
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
20
|
+
.psui-el-badge-with-icon-icon {
|
|
21
|
+
font-family: 'Material Icons Round';
|
|
22
|
+
font-weight: normal;
|
|
23
|
+
font-style: normal;
|
|
24
|
+
font-size: 16px;
|
|
25
|
+
line-height: 1;
|
|
26
|
+
letter-spacing: normal;
|
|
27
|
+
text-transform: none;
|
|
28
|
+
display: inline-block;
|
|
29
|
+
white-space: nowrap;
|
|
30
|
+
word-wrap: normal;
|
|
31
|
+
direction: ltr;
|
|
32
|
+
-webkit-font-feature-settings: 'liga';
|
|
33
|
+
-webkit-font-smoothing: antialiased;
|
|
34
|
+
}
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}
|
|
36
|
+
.psui-el-badge-with-icon-message {
|
|
37
|
+
@apply psui-ml-1 psui-text-xsmall psui-font-bold;
|
|
39
38
|
}
|
|
39
|
+
}
|
|
40
40
|
}
|
|
@@ -1,40 +1,43 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="psui-el-badge-with-icon" :class="getComponentClass">
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
<i
|
|
4
|
+
v-if="icon"
|
|
5
|
+
:class="iconClass"
|
|
6
|
+
class="psui-el-badge-with-icon-icon"
|
|
7
|
+
>{{icon}}</i>
|
|
8
|
+
<span class="psui-el-badge-with-icon-message">{{message}}</span>
|
|
5
9
|
</div>
|
|
6
10
|
</template>
|
|
7
11
|
|
|
8
12
|
<script>
|
|
9
|
-
export default {
|
|
13
|
+
export default {
|
|
10
14
|
name: 'PsBadgeWithIcon',
|
|
11
|
-
props:{
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
15
|
+
props: {
|
|
16
|
+
icon: {
|
|
17
|
+
type: String,
|
|
18
|
+
default:'info'
|
|
19
|
+
},
|
|
20
|
+
/**
|
|
21
|
+
* It set any further css style that might be needed.
|
|
22
|
+
*/
|
|
23
|
+
iconClass: {
|
|
24
|
+
type: String
|
|
25
|
+
},
|
|
26
|
+
message: {
|
|
27
|
+
type: String,
|
|
28
|
+
default: 'Lorem ipsum'
|
|
29
|
+
},
|
|
30
|
+
layout: {
|
|
31
|
+
type: String,
|
|
32
|
+
default: 'grey',
|
|
33
|
+
validator: (value) => ['grey', 'blue', 'green','yellow'].includes(value)
|
|
34
|
+
}
|
|
26
35
|
},
|
|
27
36
|
computed:{
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
37
|
+
getComponentClass(){
|
|
38
|
+
return `layout-${this.layout}`
|
|
39
|
+
}
|
|
31
40
|
}
|
|
32
|
-
}
|
|
41
|
+
}
|
|
33
42
|
</script>
|
|
34
43
|
|
|
35
|
-
<style scoped>
|
|
36
|
-
.material-icons-round{
|
|
37
|
-
font-size: 16px;
|
|
38
|
-
}
|
|
39
|
-
</style>>
|
|
40
|
-
|
|
@@ -29,10 +29,10 @@ export default {
|
|
|
29
29
|
* It's the value of the checkbox
|
|
30
30
|
*/
|
|
31
31
|
inputValue:{
|
|
32
|
-
type: String,
|
|
32
|
+
type: [String, Object],
|
|
33
33
|
},
|
|
34
34
|
value:{
|
|
35
|
-
type: String
|
|
35
|
+
type: [String, Object]
|
|
36
36
|
},
|
|
37
37
|
/**
|
|
38
38
|
* It disables the radio button. All mouse events are disabled.
|