@policystudio/policy-studio-ui-vue 1.1.90-beta.52 → 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.
package/package.json
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
@layer components {
|
|
2
2
|
.psui-el-date-card {
|
|
3
3
|
@apply psui-flex psui-flex-col psui-bg-blue-60 psui-text-blue-20 psui-text-small psui-font-bold psui-text-center psui-overflow-hidden psui-rounded;
|
|
4
|
-
width: 61px;
|
|
5
4
|
|
|
6
|
-
&-month-day,
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
&-month-day, &-year {
|
|
6
|
+
@apply psui-text-small;
|
|
7
|
+
padding: 4px 8px;
|
|
9
8
|
}
|
|
10
|
-
|
|
9
|
+
|
|
11
10
|
&-year {
|
|
12
11
|
@apply psui-bg-blue-50 psui-w-full psui-font-bold;
|
|
13
12
|
}
|
|
@@ -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(() => {
|