@policystudio/policy-studio-ui-vue 1.1.90-beta.53 → 1.1.90-beta.54
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.
|
@@ -936,6 +936,8 @@ video {
|
|
|
936
936
|
|
|
937
937
|
.psui-el-tab-header {
|
|
938
938
|
display: flex;
|
|
939
|
+
/* Layout Policy Design */
|
|
940
|
+
/* ----------------------------------------- */
|
|
939
941
|
/* Layout Standard */
|
|
940
942
|
/* ----------------------------------------- */
|
|
941
943
|
/* ----------------------------------------- Layout Standard */
|
|
@@ -967,6 +969,89 @@ video {
|
|
|
967
969
|
--tw-bg-opacity: 1;
|
|
968
970
|
background-color: rgb(230 236 242/var(--tw-bg-opacity));
|
|
969
971
|
}
|
|
972
|
+
.psui-el-tab-header.layout-policy-design button {
|
|
973
|
+
padding: 8px 0px 10px 0px;
|
|
974
|
+
margin-right: 8px;
|
|
975
|
+
}
|
|
976
|
+
.psui-el-tab-header.layout-policy-design button {
|
|
977
|
+
position: relative;
|
|
978
|
+
}
|
|
979
|
+
.psui-el-tab-header.layout-policy-design button {
|
|
980
|
+
display: flex;
|
|
981
|
+
}
|
|
982
|
+
.psui-el-tab-header.layout-policy-design button {
|
|
983
|
+
align-items: center;
|
|
984
|
+
}
|
|
985
|
+
.psui-el-tab-header.layout-policy-design button:after {
|
|
986
|
+
content: "";
|
|
987
|
+
}
|
|
988
|
+
.psui-el-tab-header.layout-policy-design button:after {
|
|
989
|
+
position: absolute;
|
|
990
|
+
}
|
|
991
|
+
.psui-el-tab-header.layout-policy-design button:after {
|
|
992
|
+
bottom: 0px;
|
|
993
|
+
}
|
|
994
|
+
.psui-el-tab-header.layout-policy-design button:after {
|
|
995
|
+
left: 0px;
|
|
996
|
+
}
|
|
997
|
+
.psui-el-tab-header.layout-policy-design button:after {
|
|
998
|
+
display: block;
|
|
999
|
+
}
|
|
1000
|
+
.psui-el-tab-header.layout-policy-design button:after {
|
|
1001
|
+
height: 3px;
|
|
1002
|
+
}
|
|
1003
|
+
.psui-el-tab-header.layout-policy-design button:after {
|
|
1004
|
+
width: 100%;
|
|
1005
|
+
}
|
|
1006
|
+
.psui-el-tab-header.layout-policy-design button:after {
|
|
1007
|
+
--tw-bg-opacity: 1;
|
|
1008
|
+
background-color: rgb(49 143 172/var(--tw-bg-opacity));
|
|
1009
|
+
}
|
|
1010
|
+
.psui-el-tab-header.layout-policy-design button:after {
|
|
1011
|
+
opacity: 0;
|
|
1012
|
+
}
|
|
1013
|
+
.psui-el-tab-header.layout-policy-design button:after {
|
|
1014
|
+
transition-property: all;
|
|
1015
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1016
|
+
transition-duration: 150ms;
|
|
1017
|
+
}
|
|
1018
|
+
.psui-el-tab-header.layout-policy-design button:hover > div {
|
|
1019
|
+
--tw-text-opacity: 1;
|
|
1020
|
+
color: rgb(81 94 106/var(--tw-text-opacity));
|
|
1021
|
+
}
|
|
1022
|
+
.psui-el-tab-header.layout-policy-design button.status-active {
|
|
1023
|
+
--tw-border-opacity: 1;
|
|
1024
|
+
border-color: rgb(49 143 172/var(--tw-border-opacity));
|
|
1025
|
+
}
|
|
1026
|
+
.psui-el-tab-header.layout-policy-design button.status-active:after {
|
|
1027
|
+
opacity: 1;
|
|
1028
|
+
}
|
|
1029
|
+
.psui-el-tab-header.layout-policy-design button.status-active > div {
|
|
1030
|
+
--tw-text-opacity: 1;
|
|
1031
|
+
color: rgb(49 143 172/var(--tw-text-opacity));
|
|
1032
|
+
}
|
|
1033
|
+
.psui-el-tab-header.layout-policy-design button.status-active > span {
|
|
1034
|
+
font-weight: 700;
|
|
1035
|
+
}
|
|
1036
|
+
.psui-el-tab-header.layout-policy-design button.status-active > span {
|
|
1037
|
+
--tw-text-opacity: 1;
|
|
1038
|
+
color: rgb(52 64 74/var(--tw-text-opacity));
|
|
1039
|
+
}
|
|
1040
|
+
.psui-el-tab-header.layout-policy-design button > div {
|
|
1041
|
+
--tw-text-opacity: 1;
|
|
1042
|
+
color: rgb(121 132 144/var(--tw-text-opacity));
|
|
1043
|
+
}
|
|
1044
|
+
.psui-el-tab-header.layout-policy-design button > span {
|
|
1045
|
+
margin-left: 0.25rem;
|
|
1046
|
+
}
|
|
1047
|
+
.psui-el-tab-header.layout-policy-design button > span {
|
|
1048
|
+
font-size: 14px;
|
|
1049
|
+
line-height: 130%;
|
|
1050
|
+
}
|
|
1051
|
+
.psui-el-tab-header.layout-policy-design button > span {
|
|
1052
|
+
--tw-text-opacity: 1;
|
|
1053
|
+
color: rgb(81 94 106/var(--tw-text-opacity));
|
|
1054
|
+
}
|
|
970
1055
|
.psui-el-tab-header.layout-standard {
|
|
971
1056
|
border-radius: 0.375rem;
|
|
972
1057
|
}
|
package/package.json
CHANGED
|
@@ -20,6 +20,55 @@
|
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
+
/* Layout Policy Design */
|
|
24
|
+
&.layout-policy-design {
|
|
25
|
+
|
|
26
|
+
button {
|
|
27
|
+
padding: 8px 0px 10px 0px;
|
|
28
|
+
margin-right:8px;
|
|
29
|
+
@apply psui-flex psui-items-center psui-relative;
|
|
30
|
+
|
|
31
|
+
&:after {
|
|
32
|
+
content: '';
|
|
33
|
+
@apply psui-transition-all psui-h-[3px] psui-block psui-w-full psui-absolute psui-bottom-0 psui-left-0 psui-opacity-0 psui-bg-blue-60;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&:hover {
|
|
37
|
+
> div {
|
|
38
|
+
@apply psui-text-gray-60;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&.status-active {
|
|
43
|
+
@apply psui-border-blue-60;
|
|
44
|
+
|
|
45
|
+
&:after {
|
|
46
|
+
@apply psui-opacity-100;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
> div {
|
|
50
|
+
@apply psui-text-blue-60;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
> span {
|
|
54
|
+
@apply psui-font-bold psui-text-gray-70;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
> div {
|
|
59
|
+
@apply psui-text-gray-50;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
> span {
|
|
63
|
+
@apply psui-text-gray-60 psui-text-small psui-ml-1;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
/* ----------------------------------------- */
|
|
71
|
+
|
|
23
72
|
/* Layout Standard */
|
|
24
73
|
/* ----------------------------------------- */
|
|
25
74
|
&.layout-standard {
|
|
@@ -91,7 +140,7 @@
|
|
|
91
140
|
}
|
|
92
141
|
|
|
93
142
|
&.status-active {
|
|
94
|
-
@apply psui-text-blue-60 psui-border-blue-50
|
|
143
|
+
@apply psui-text-blue-60 psui-border-blue-50;
|
|
95
144
|
}
|
|
96
145
|
}
|
|
97
146
|
}
|
|
@@ -18,17 +18,29 @@
|
|
|
18
18
|
@click="selectTab(item)"
|
|
19
19
|
:class="getButtonClass(item).value"
|
|
20
20
|
>
|
|
21
|
+
<PsIcon
|
|
22
|
+
v-if="item.icon"
|
|
23
|
+
:icon="item.icon"
|
|
24
|
+
display="flex"
|
|
25
|
+
size="16"
|
|
26
|
+
/>
|
|
21
27
|
<span>{{ item[keyLabel] }}</span>
|
|
22
28
|
</button>
|
|
23
29
|
</template>
|
|
24
30
|
</PsRichTooltip>
|
|
25
|
-
<button
|
|
26
|
-
v-else
|
|
27
|
-
:key="item[keyValue] + index"
|
|
31
|
+
<button
|
|
32
|
+
v-else
|
|
28
33
|
type="button"
|
|
34
|
+
:key="item[keyValue] + index"
|
|
29
35
|
@click="selectTab(item)"
|
|
30
36
|
:class="getButtonClass(item).value"
|
|
31
37
|
>
|
|
38
|
+
<PsIcon
|
|
39
|
+
v-if="item.icon"
|
|
40
|
+
:icon="item.icon"
|
|
41
|
+
display="flex"
|
|
42
|
+
size="16"
|
|
43
|
+
/>
|
|
32
44
|
<span>{{ item[keyLabel] }}</span>
|
|
33
45
|
</button>
|
|
34
46
|
</slot>
|
|
@@ -39,6 +51,7 @@
|
|
|
39
51
|
<script setup>
|
|
40
52
|
import PsRichTooltip from '../tooltip/PsRichTooltip.vue'
|
|
41
53
|
import { computed } from 'vue'
|
|
54
|
+
import PsIcon from '../ui/PsIcon.vue'
|
|
42
55
|
|
|
43
56
|
const props = defineProps({
|
|
44
57
|
/**
|
|
@@ -47,7 +60,7 @@ const props = defineProps({
|
|
|
47
60
|
layout: {
|
|
48
61
|
type: String,
|
|
49
62
|
default: 'standard',
|
|
50
|
-
validator: (value) => ['standard', 'underline', 'folder'].includes(value),
|
|
63
|
+
validator: (value) => ['standard', 'underline', 'folder', 'policy-design'].includes(value),
|
|
51
64
|
},
|
|
52
65
|
/**
|
|
53
66
|
* It sets the tabs which will be rendered.
|
|
@@ -88,9 +101,9 @@ const emit = defineEmits(['change', 'update:selected'])
|
|
|
88
101
|
const getComponentClass = computed(() => {
|
|
89
102
|
if (props.disabled) {
|
|
90
103
|
return 'status-disabled'
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
return ''
|
|
94
107
|
})
|
|
95
108
|
|
|
96
109
|
const getIsObject = computed(() => {
|