@policystudio/policy-studio-ui-vue 1.2.0-access.13 → 1.2.0-access.14
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.
|
@@ -1545,6 +1545,8 @@ video {
|
|
|
1545
1545
|
transition-property: all;
|
|
1546
1546
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1547
1547
|
transition-duration: 130ms;
|
|
1548
|
+
text-decoration: none;
|
|
1549
|
+
cursor: pointer;
|
|
1548
1550
|
}
|
|
1549
1551
|
.psui-el-button span {
|
|
1550
1552
|
flex-shrink: 0;
|
|
@@ -1565,6 +1567,9 @@ video {
|
|
|
1565
1567
|
outline-offset: 2px;
|
|
1566
1568
|
border-radius: 6px;
|
|
1567
1569
|
}
|
|
1570
|
+
.psui-el-button[href] {
|
|
1571
|
+
display: inline-flex;
|
|
1572
|
+
}
|
|
1568
1573
|
.psui-el-button.size-big {
|
|
1569
1574
|
display: flex;
|
|
1570
1575
|
}
|
package/package.json
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
.psui-el-button {
|
|
3
3
|
@apply psui-flex psui-items-center psui-content-center psui-font-bold psui-transition-all psui-ease-in-out;
|
|
4
4
|
transition-duration: 130ms;
|
|
5
|
+
text-decoration: none;
|
|
6
|
+
cursor: pointer;
|
|
5
7
|
|
|
6
8
|
span {
|
|
7
9
|
@apply psui-font-semibold psui-flex-shrink-0;
|
|
@@ -19,6 +21,10 @@
|
|
|
19
21
|
outline-offset: 2px;
|
|
20
22
|
border-radius: 6px;
|
|
21
23
|
}
|
|
24
|
+
|
|
25
|
+
&[href] {
|
|
26
|
+
display: inline-flex;
|
|
27
|
+
}
|
|
22
28
|
|
|
23
29
|
&.size-big {
|
|
24
30
|
@apply psui-flex psui-items-center psui-justify-center psui-content-center psui-rounded-md;
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
2
|
+
<component
|
|
3
|
+
:is="href ? 'a' : 'button'"
|
|
4
|
+
v-bind="$attrs"
|
|
5
|
+
:href="href || undefined"
|
|
6
|
+
:target="target || undefined"
|
|
7
|
+
:rel="target === '_blank' ? 'noopener noreferrer' : undefined"
|
|
8
|
+
:aria-label="ariaLabel || undefined"
|
|
3
9
|
@click="onClick($event)"
|
|
4
10
|
@mouseenter="onMouseEnter"
|
|
5
11
|
@mouseleave="onMouseLeave"
|
|
@@ -65,7 +71,7 @@
|
|
|
65
71
|
:class="[iconRightClass, 'icon-right-side']"
|
|
66
72
|
class="material-icons-round"
|
|
67
73
|
>{{ iconRight }}</i>
|
|
68
|
-
</
|
|
74
|
+
</component>
|
|
69
75
|
</template>
|
|
70
76
|
|
|
71
77
|
<script setup>
|
|
@@ -85,6 +91,18 @@ const props = defineProps({
|
|
|
85
91
|
default: 'solid',
|
|
86
92
|
validator: (value) => ['solid', 'outline', 'onlytext', 'caution'].includes(value),
|
|
87
93
|
},
|
|
94
|
+
href: {
|
|
95
|
+
type: String,
|
|
96
|
+
default: '',
|
|
97
|
+
},
|
|
98
|
+
target: {
|
|
99
|
+
type: String,
|
|
100
|
+
default: '',
|
|
101
|
+
},
|
|
102
|
+
ariaLabel: {
|
|
103
|
+
type: String,
|
|
104
|
+
default: '',
|
|
105
|
+
},
|
|
88
106
|
iconLeft: {
|
|
89
107
|
type: String,
|
|
90
108
|
default: '',
|