@tekkare/auriga 0.2.201 → 0.2.203
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/dist/module.json
CHANGED
|
@@ -27,24 +27,40 @@
|
|
|
27
27
|
>
|
|
28
28
|
<!-- Direct items -->
|
|
29
29
|
<template v-if="section.items">
|
|
30
|
-
<
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
<span
|
|
30
|
+
<template v-for="(item, iIndex) in section.items" :key="'item-' + iIndex">
|
|
31
|
+
<div
|
|
32
|
+
v-if="item.onClick"
|
|
33
|
+
class="arg_accordion_item"
|
|
34
|
+
@click="() => { item.onClick!(); $emit('onNavigate', item); }"
|
|
35
|
+
>
|
|
36
|
+
<div class="arg_accordion_item_left">
|
|
37
|
+
<arg-icon v-if="item.icon" :name="item.icon" size="20" />
|
|
38
|
+
<span>{{ item.label }}</span>
|
|
39
|
+
</div>
|
|
40
|
+
<span
|
|
41
|
+
v-if="item.haveData !== undefined"
|
|
42
|
+
class="arg_accordion_indicator"
|
|
43
|
+
:class="item.haveData ? 'has-data' : 'no-data'"
|
|
44
|
+
/>
|
|
41
45
|
</div>
|
|
42
|
-
<
|
|
43
|
-
v-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
46
|
+
<NuxtLink
|
|
47
|
+
v-else
|
|
48
|
+
:to="item.to || '#'"
|
|
49
|
+
class="arg_accordion_item"
|
|
50
|
+
activeClass="is-active"
|
|
51
|
+
@click="$emit('onNavigate', item)"
|
|
52
|
+
>
|
|
53
|
+
<div class="arg_accordion_item_left">
|
|
54
|
+
<arg-icon v-if="item.icon" :name="item.icon" size="20" />
|
|
55
|
+
<span>{{ item.label }}</span>
|
|
56
|
+
</div>
|
|
57
|
+
<span
|
|
58
|
+
v-if="item.haveData !== undefined"
|
|
59
|
+
class="arg_accordion_indicator"
|
|
60
|
+
:class="item.haveData ? 'has-data' : 'no-data'"
|
|
61
|
+
/>
|
|
62
|
+
</NuxtLink>
|
|
63
|
+
</template>
|
|
48
64
|
</template>
|
|
49
65
|
|
|
50
66
|
<!-- Sub-sections -->
|
|
@@ -70,24 +86,40 @@
|
|
|
70
86
|
class="arg_accordion_sub_content"
|
|
71
87
|
:class="{ open: openSubSections[sIndex + '-' + subIndex] }"
|
|
72
88
|
>
|
|
73
|
-
<
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
<span
|
|
89
|
+
<template v-for="(item, iIndex) in sub.items" :key="'subitem-' + iIndex">
|
|
90
|
+
<div
|
|
91
|
+
v-if="item.onClick"
|
|
92
|
+
class="arg_accordion_item"
|
|
93
|
+
@click="() => { item.onClick!(); $emit('onNavigate', item); }"
|
|
94
|
+
>
|
|
95
|
+
<div class="arg_accordion_item_left">
|
|
96
|
+
<arg-icon v-if="item.icon" :name="item.icon" size="20" />
|
|
97
|
+
<span>{{ item.label }}</span>
|
|
98
|
+
</div>
|
|
99
|
+
<span
|
|
100
|
+
v-if="item.haveData !== undefined"
|
|
101
|
+
class="arg_accordion_indicator"
|
|
102
|
+
:class="item.haveData ? 'has-data' : 'no-data'"
|
|
103
|
+
/>
|
|
84
104
|
</div>
|
|
85
|
-
<
|
|
86
|
-
v-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
105
|
+
<NuxtLink
|
|
106
|
+
v-else
|
|
107
|
+
:to="item.to || '#'"
|
|
108
|
+
class="arg_accordion_item"
|
|
109
|
+
activeClass="is-active"
|
|
110
|
+
@click="$emit('onNavigate', item)"
|
|
111
|
+
>
|
|
112
|
+
<div class="arg_accordion_item_left">
|
|
113
|
+
<arg-icon v-if="item.icon" :name="item.icon" size="20" />
|
|
114
|
+
<span>{{ item.label }}</span>
|
|
115
|
+
</div>
|
|
116
|
+
<span
|
|
117
|
+
v-if="item.haveData !== undefined"
|
|
118
|
+
class="arg_accordion_indicator"
|
|
119
|
+
:class="item.haveData ? 'has-data' : 'no-data'"
|
|
120
|
+
/>
|
|
121
|
+
</NuxtLink>
|
|
122
|
+
</template>
|
|
91
123
|
</div>
|
|
92
124
|
</div>
|
|
93
125
|
</template>
|
|
@@ -97,7 +129,7 @@
|
|
|
97
129
|
</template>
|
|
98
130
|
|
|
99
131
|
<script>
|
|
100
|
-
import { defineComponent, reactive } from "vue";
|
|
132
|
+
import { defineComponent, reactive, watch } from "vue";
|
|
101
133
|
import argIcon from "./argIcon.vue";
|
|
102
134
|
export default defineComponent({
|
|
103
135
|
name: "argAccordionMenu",
|
|
@@ -116,14 +148,30 @@ export default defineComponent({
|
|
|
116
148
|
setup(props) {
|
|
117
149
|
const openSections = reactive({});
|
|
118
150
|
const openSubSections = reactive({});
|
|
119
|
-
|
|
120
|
-
openSections
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
openSubSections[
|
|
151
|
+
function initSections(menu) {
|
|
152
|
+
Object.keys(openSections).forEach((key) => {
|
|
153
|
+
delete openSections[Number(key)];
|
|
154
|
+
});
|
|
155
|
+
Object.keys(openSubSections).forEach((key) => {
|
|
156
|
+
delete openSubSections[key];
|
|
157
|
+
});
|
|
158
|
+
menu.forEach((section, index) => {
|
|
159
|
+
openSections[index] = section.defaultOpen ?? index === 0;
|
|
125
160
|
});
|
|
126
|
-
|
|
161
|
+
menu.forEach((section, sIndex) => {
|
|
162
|
+
section.subSections?.forEach((_sub, subIndex) => {
|
|
163
|
+
openSubSections[`${sIndex}-${subIndex}`] = true;
|
|
164
|
+
});
|
|
165
|
+
});
|
|
166
|
+
}
|
|
167
|
+
initSections(props.menu);
|
|
168
|
+
watch(
|
|
169
|
+
() => props.menu,
|
|
170
|
+
(newMenu) => {
|
|
171
|
+
initSections(newMenu);
|
|
172
|
+
},
|
|
173
|
+
{ deep: true }
|
|
174
|
+
);
|
|
127
175
|
function toggleSection(index) {
|
|
128
176
|
if (props.singleOpen) {
|
|
129
177
|
const wasOpen = openSections[index];
|
|
@@ -150,5 +198,5 @@ export default defineComponent({
|
|
|
150
198
|
</script>
|
|
151
199
|
|
|
152
200
|
<style scoped>
|
|
153
|
-
.arg_accordion_menu{display:flex;flex-direction:column;width:100%}.arg_accordion_section{border-bottom:1px solid var(--light,#ececf2);margin-bottom:4px;padding-bottom:8px}.arg_accordion_section:last-child{border-bottom:none}.arg_accordion_header{align-items:center;border-radius:8px;cursor:pointer;display:flex;justify-content:space-between;padding:8px;transition:background-color .2s ease}.arg_accordion_header:hover{background-color:var(--light,#ececf2)}.arg_accordion_title{font-size:13px;font-weight:700;line-height:normal}.arg_accordion_chevron{align-items:center;display:flex;transition:transform .2s ease}.arg_accordion_chevron.rotated{transform:rotate(180deg)}.arg_accordion_content{max-height:0;overflow:hidden;padding-left:12px;padding-right:8px;transition:max-height .3s ease}.arg_accordion_content.open{margin-top:4px;max-height:600px}.arg_accordion_item{align-items:center;align-self:stretch;border-radius:4px;color:var(--darkest,#1a1a2e);display:flex;font-size:14px;font-weight:400;gap:8px;justify-content:space-between;line-height:160%;padding:8px;text-decoration:none}.arg_accordion_item:hover:not(.is-active){background:var(--light,#ececf2)}.arg_accordion_item.is-active{background:rgba(33,118,255,.1)}.arg_accordion_item svg{color:var(--dark,#6c6c8a)!important}.arg_accordion_item.is-active svg,.arg_accordion_item:hover:not(.is-active) svg{color:var(--primary,#2176ff)!important}.arg_accordion_item_left{align-items:center;display:flex;gap:8px}.arg_accordion_indicator{border-radius:50%;flex-shrink:0;height:10px;width:10px}.arg_accordion_indicator.has-data{background-color:var(--system-success,#2ecc71)}.arg_accordion_indicator.no-data{background-color:#bdbdd2}.arg_accordion_sub_section{margin-bottom:8px}.arg_accordion_sub_header{align-items:center;border-radius:8px;cursor:pointer;display:flex;justify-content:space-between;padding:4px 8px;transition:background-color .2s ease}.arg_accordion_sub_header:hover{background-color:var(--light,#ececf2)}.arg_accordion_sub_label{color:var(--dark,#6c6c8a);font-size:12px;font-weight:700}.arg_accordion_sub_chevron{align-items:center;color:var(--medium,#9999b0);display:flex;transition:transform .2s ease}.arg_accordion_sub_chevron.rotated{transform:rotate(180deg)}.arg_accordion_sub_content{background:rgba(234,236,248,.4);border-radius:8px;margin-top:4px;max-height:0;overflow:hidden;padding:0 8px;transition:max-height .2s ease,padding .2s ease}.arg_accordion_sub_content.open{max-height:300px;padding:8px}
|
|
201
|
+
.arg_accordion_menu{display:flex;flex-direction:column;width:100%}.arg_accordion_section{border-bottom:1px solid var(--light,#ececf2);margin-bottom:4px;padding-bottom:8px}.arg_accordion_section:last-child{border-bottom:none}.arg_accordion_header{align-items:center;border-radius:8px;cursor:pointer;display:flex;justify-content:space-between;padding:8px;transition:background-color .2s ease}.arg_accordion_header:hover{background-color:var(--light,#ececf2)}.arg_accordion_title{font-size:13px;font-weight:700;line-height:normal}.arg_accordion_chevron{align-items:center;display:flex;transition:transform .2s ease}.arg_accordion_chevron.rotated{transform:rotate(180deg)}.arg_accordion_content{max-height:0;overflow:hidden;padding-left:12px;padding-right:8px;transition:max-height .3s ease}.arg_accordion_content.open{margin-top:4px;max-height:600px}.arg_accordion_item{align-items:center;align-self:stretch;border-radius:4px;color:var(--darkest,#1a1a2e);cursor:pointer;display:flex;font-size:14px;font-weight:400;gap:8px;justify-content:space-between;line-height:160%;padding:8px;text-decoration:none}.arg_accordion_item:hover:not(.is-active){background:var(--light,#ececf2)}.arg_accordion_item.is-active{background:rgba(33,118,255,.1)}.arg_accordion_item svg{color:var(--dark,#6c6c8a)!important}.arg_accordion_item.is-active svg,.arg_accordion_item:hover:not(.is-active) svg{color:var(--primary,#2176ff)!important}.arg_accordion_item_left{align-items:center;display:flex;gap:8px}.arg_accordion_indicator{border-radius:50%;flex-shrink:0;height:10px;width:10px}.arg_accordion_indicator.has-data{background-color:var(--system-success,#2ecc71)}.arg_accordion_indicator.no-data{background-color:#bdbdd2}.arg_accordion_sub_section{margin-bottom:8px}.arg_accordion_sub_header{align-items:center;border-radius:8px;cursor:pointer;display:flex;justify-content:space-between;padding:4px 8px;transition:background-color .2s ease}.arg_accordion_sub_header:hover{background-color:var(--light,#ececf2)}.arg_accordion_sub_label{color:var(--dark,#6c6c8a);font-size:12px;font-weight:700}.arg_accordion_sub_chevron{align-items:center;color:var(--medium,#9999b0);display:flex;transition:transform .2s ease}.arg_accordion_sub_chevron.rotated{transform:rotate(180deg)}.arg_accordion_sub_content{background:rgba(234,236,248,.4);border-radius:8px;margin-top:4px;max-height:0;overflow:hidden;padding:0 8px;transition:max-height .2s ease,padding .2s ease}.arg_accordion_sub_content.open{max-height:300px;padding:8px}
|
|
154
202
|
</style>
|