@policystudio/policy-studio-ui-vue 1.1.90-beta.53 → 1.1.90-beta.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.
|
@@ -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,94 @@ 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 > :not([hidden]) ~ :not([hidden]) {
|
|
973
|
+
--tw-space-x-reverse: 0;
|
|
974
|
+
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
|
975
|
+
margin-left: calc(0.5rem * (1 - var(--tw-space-x-reverse)));
|
|
976
|
+
}
|
|
977
|
+
.psui-el-tab-header.layout-policy-design button {
|
|
978
|
+
padding: 8px 0px 10px 0px;
|
|
979
|
+
margin-right: 8px;
|
|
980
|
+
}
|
|
981
|
+
.psui-el-tab-header.layout-policy-design button {
|
|
982
|
+
position: relative;
|
|
983
|
+
}
|
|
984
|
+
.psui-el-tab-header.layout-policy-design button {
|
|
985
|
+
display: flex;
|
|
986
|
+
}
|
|
987
|
+
.psui-el-tab-header.layout-policy-design button {
|
|
988
|
+
align-items: center;
|
|
989
|
+
}
|
|
990
|
+
.psui-el-tab-header.layout-policy-design button:after {
|
|
991
|
+
content: "";
|
|
992
|
+
}
|
|
993
|
+
.psui-el-tab-header.layout-policy-design button:after {
|
|
994
|
+
position: absolute;
|
|
995
|
+
}
|
|
996
|
+
.psui-el-tab-header.layout-policy-design button:after {
|
|
997
|
+
bottom: 0px;
|
|
998
|
+
}
|
|
999
|
+
.psui-el-tab-header.layout-policy-design button:after {
|
|
1000
|
+
left: 0px;
|
|
1001
|
+
}
|
|
1002
|
+
.psui-el-tab-header.layout-policy-design button:after {
|
|
1003
|
+
display: block;
|
|
1004
|
+
}
|
|
1005
|
+
.psui-el-tab-header.layout-policy-design button:after {
|
|
1006
|
+
height: 3px;
|
|
1007
|
+
}
|
|
1008
|
+
.psui-el-tab-header.layout-policy-design button:after {
|
|
1009
|
+
width: 100%;
|
|
1010
|
+
}
|
|
1011
|
+
.psui-el-tab-header.layout-policy-design button:after {
|
|
1012
|
+
--tw-bg-opacity: 1;
|
|
1013
|
+
background-color: rgb(49 143 172/var(--tw-bg-opacity));
|
|
1014
|
+
}
|
|
1015
|
+
.psui-el-tab-header.layout-policy-design button:after {
|
|
1016
|
+
opacity: 0;
|
|
1017
|
+
}
|
|
1018
|
+
.psui-el-tab-header.layout-policy-design button:after {
|
|
1019
|
+
transition-property: all;
|
|
1020
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1021
|
+
transition-duration: 150ms;
|
|
1022
|
+
}
|
|
1023
|
+
.psui-el-tab-header.layout-policy-design button:hover > div {
|
|
1024
|
+
--tw-text-opacity: 1;
|
|
1025
|
+
color: rgb(81 94 106/var(--tw-text-opacity));
|
|
1026
|
+
}
|
|
1027
|
+
.psui-el-tab-header.layout-policy-design button.status-active {
|
|
1028
|
+
--tw-border-opacity: 1;
|
|
1029
|
+
border-color: rgb(49 143 172/var(--tw-border-opacity));
|
|
1030
|
+
}
|
|
1031
|
+
.psui-el-tab-header.layout-policy-design button.status-active:after {
|
|
1032
|
+
opacity: 1;
|
|
1033
|
+
}
|
|
1034
|
+
.psui-el-tab-header.layout-policy-design button.status-active > div {
|
|
1035
|
+
--tw-text-opacity: 1;
|
|
1036
|
+
color: rgb(49 143 172/var(--tw-text-opacity));
|
|
1037
|
+
}
|
|
1038
|
+
.psui-el-tab-header.layout-policy-design button.status-active > span {
|
|
1039
|
+
font-weight: 700;
|
|
1040
|
+
}
|
|
1041
|
+
.psui-el-tab-header.layout-policy-design button.status-active > span {
|
|
1042
|
+
--tw-text-opacity: 1;
|
|
1043
|
+
color: rgb(52 64 74/var(--tw-text-opacity));
|
|
1044
|
+
}
|
|
1045
|
+
.psui-el-tab-header.layout-policy-design button > div {
|
|
1046
|
+
--tw-text-opacity: 1;
|
|
1047
|
+
color: rgb(121 132 144/var(--tw-text-opacity));
|
|
1048
|
+
}
|
|
1049
|
+
.psui-el-tab-header.layout-policy-design button > span {
|
|
1050
|
+
margin-left: 0.25rem;
|
|
1051
|
+
}
|
|
1052
|
+
.psui-el-tab-header.layout-policy-design button > span {
|
|
1053
|
+
font-size: 14px;
|
|
1054
|
+
line-height: 130%;
|
|
1055
|
+
}
|
|
1056
|
+
.psui-el-tab-header.layout-policy-design button > span {
|
|
1057
|
+
--tw-text-opacity: 1;
|
|
1058
|
+
color: rgb(81 94 106/var(--tw-text-opacity));
|
|
1059
|
+
}
|
|
970
1060
|
.psui-el-tab-header.layout-standard {
|
|
971
1061
|
border-radius: 0.375rem;
|
|
972
1062
|
}
|
package/package.json
CHANGED
|
@@ -20,6 +20,56 @@
|
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
+
/* Layout Policy Design */
|
|
24
|
+
&.layout-policy-design {
|
|
25
|
+
@apply psui-space-x-2;
|
|
26
|
+
|
|
27
|
+
button {
|
|
28
|
+
padding: 8px 0px 10px 0px;
|
|
29
|
+
margin-right:8px;
|
|
30
|
+
@apply psui-flex psui-items-center psui-relative;
|
|
31
|
+
|
|
32
|
+
&:after {
|
|
33
|
+
content: '';
|
|
34
|
+
@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;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&:hover {
|
|
38
|
+
> div {
|
|
39
|
+
@apply psui-text-gray-60;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&.status-active {
|
|
44
|
+
@apply psui-border-blue-60;
|
|
45
|
+
|
|
46
|
+
&:after {
|
|
47
|
+
@apply psui-opacity-100;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
> div {
|
|
51
|
+
@apply psui-text-blue-60;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
> span {
|
|
55
|
+
@apply psui-font-bold psui-text-gray-70;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
> div {
|
|
60
|
+
@apply psui-text-gray-50;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
> span {
|
|
64
|
+
@apply psui-text-gray-60 psui-text-small psui-ml-1;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
/* ----------------------------------------- */
|
|
72
|
+
|
|
23
73
|
/* Layout Standard */
|
|
24
74
|
/* ----------------------------------------- */
|
|
25
75
|
&.layout-standard {
|
|
@@ -91,7 +141,7 @@
|
|
|
91
141
|
}
|
|
92
142
|
|
|
93
143
|
&.status-active {
|
|
94
|
-
@apply psui-text-blue-60 psui-border-blue-50
|
|
144
|
+
@apply psui-text-blue-60 psui-border-blue-50;
|
|
95
145
|
}
|
|
96
146
|
}
|
|
97
147
|
}
|
|
@@ -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(() => {
|