ketekny-ui-kit 1.0.86 → 1.0.87
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,6 +1,10 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="space-y-1.5">
|
|
3
|
-
<div
|
|
3
|
+
<div
|
|
4
|
+
v-for="item in items"
|
|
5
|
+
:key="item.key"
|
|
6
|
+
class="space-y-1.5"
|
|
7
|
+
>
|
|
4
8
|
<div
|
|
5
9
|
class="flex items-stretch"
|
|
6
10
|
:class="item.hasChildren ? 'gap-2' : 'gap-0'"
|
|
@@ -15,16 +19,25 @@
|
|
|
15
19
|
<span
|
|
16
20
|
class="flex h-5 w-5 shrink-0 items-center justify-center text-[#eef2f7] transition-colors duration-150"
|
|
17
21
|
>
|
|
18
|
-
<kIcon
|
|
22
|
+
<kIcon
|
|
23
|
+
v-if="showFullIcon(item)"
|
|
24
|
+
:name="item.icon"
|
|
25
|
+
size="18"
|
|
26
|
+
color="#eef2f7"
|
|
27
|
+
/>
|
|
28
|
+
<span
|
|
29
|
+
v-else
|
|
30
|
+
class="h-1.5 w-1.5 rounded-full bg-current opacity-80"
|
|
31
|
+
/>
|
|
19
32
|
</span>
|
|
20
33
|
<span class="min-w-0 flex-1">
|
|
21
|
-
<span class="block truncate
|
|
34
|
+
<span class="block truncate font-medium" :class="itemLabelClasses">
|
|
22
35
|
{{ item.label }}
|
|
23
36
|
</span>
|
|
24
37
|
<span
|
|
25
38
|
v-if="item.description"
|
|
26
|
-
class="mt-1 block truncate
|
|
27
|
-
:class="item.active ? 'text-[#9fa6b5]' : 'text-[#6f7786]'"
|
|
39
|
+
class="mt-1 block truncate"
|
|
40
|
+
:class="[itemDescriptionClasses, item.active ? 'text-[#9fa6b5]' : 'text-[#6f7786]']"
|
|
28
41
|
>
|
|
29
42
|
{{ item.description }}
|
|
30
43
|
</span>
|
|
@@ -34,28 +47,29 @@
|
|
|
34
47
|
<button
|
|
35
48
|
v-if="item.hasChildren"
|
|
36
49
|
type="button"
|
|
37
|
-
class="flex w-8 shrink-0 appearance-none items-center justify-center border-0 bg-transparent text-[#
|
|
50
|
+
class="flex w-8 shrink-0 appearance-none items-center justify-center border-0 bg-transparent text-[#6f7786] outline-none transition hover:bg-white/6 hover:text-[#cbd5e1]"
|
|
38
51
|
:aria-expanded="isExpanded(item)"
|
|
39
52
|
:aria-label="`${isExpanded(item) ? 'Collapse' : 'Expand'} ${item.label}`"
|
|
40
53
|
@click.stop="toggle(item.key)"
|
|
41
54
|
>
|
|
42
55
|
<kIcon
|
|
43
|
-
name="
|
|
56
|
+
name="ChevronRight"
|
|
44
57
|
size="15"
|
|
45
|
-
color="
|
|
46
|
-
class="transition-transform duration-200"
|
|
47
|
-
:class="isExpanded(item) ? 'rotate-
|
|
58
|
+
color="currentColor"
|
|
59
|
+
class="!text-[#6f7786] transition-transform duration-200"
|
|
60
|
+
:class="isExpanded(item) ? 'rotate-90' : ''"
|
|
48
61
|
/>
|
|
49
62
|
</button>
|
|
50
63
|
</div>
|
|
51
64
|
|
|
52
65
|
<div
|
|
53
66
|
v-if="item.hasChildren && isExpanded(item)"
|
|
54
|
-
class="ml-2
|
|
67
|
+
class="ml-2 pl-4"
|
|
55
68
|
>
|
|
56
69
|
<TwoColSidebarMenuList
|
|
57
70
|
:items="item.children"
|
|
58
71
|
:expanded-state="expandedState"
|
|
72
|
+
:level="level + 1"
|
|
59
73
|
@item-click="$emit('item-click', $event)"
|
|
60
74
|
@toggle-branch="$emit('toggle-branch', $event)"
|
|
61
75
|
/>
|
|
@@ -77,8 +91,26 @@ export default {
|
|
|
77
91
|
props: {
|
|
78
92
|
items: { type: Array, default: () => [] },
|
|
79
93
|
expandedState: { type: Object, required: true },
|
|
94
|
+
level: { type: Number, default: 0 },
|
|
80
95
|
},
|
|
81
96
|
emits: ["item-click", "toggle-branch"],
|
|
97
|
+
computed: {
|
|
98
|
+
itemLabelClasses() {
|
|
99
|
+
return this.level === 0
|
|
100
|
+
? "text-[15px] leading-5"
|
|
101
|
+
: "text-[14px] leading-5";
|
|
102
|
+
},
|
|
103
|
+
itemDescriptionClasses() {
|
|
104
|
+
return this.level === 0
|
|
105
|
+
? "text-[12px] leading-4"
|
|
106
|
+
: "text-[11px] leading-4";
|
|
107
|
+
},
|
|
108
|
+
activeIndicatorClasses() {
|
|
109
|
+
return this.level === 0
|
|
110
|
+
? "before:left-0"
|
|
111
|
+
: "before:-left-4";
|
|
112
|
+
},
|
|
113
|
+
},
|
|
82
114
|
methods: {
|
|
83
115
|
menuItemComponent(item) {
|
|
84
116
|
if (item?.isLink) return RouterLink;
|
|
@@ -99,9 +131,12 @@ export default {
|
|
|
99
131
|
isExpanded(item) {
|
|
100
132
|
return Boolean(this.expandedState[item.key]);
|
|
101
133
|
},
|
|
134
|
+
showFullIcon(item) {
|
|
135
|
+
return this.level === 0 && Boolean(item?.icon);
|
|
136
|
+
},
|
|
102
137
|
itemRowClasses(item) {
|
|
103
138
|
return item.active
|
|
104
|
-
?
|
|
139
|
+
? `relative rounded-xl bg-[#1f232b] text-white before:absolute before:bottom-2 before:top-2 before:w-[3px] before:rounded-r-full before:bg-[#2491ff] ${this.activeIndicatorClasses}`
|
|
105
140
|
: "rounded-xl text-[#e5e7eb] hover:bg-[#242424] hover:text-white";
|
|
106
141
|
},
|
|
107
142
|
toggle(key) {
|