comand-component-library 3.2.1 → 3.2.3
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/comand-component-library.css +1 -1
- package/dist/comand-component-library.umd.min.js +1 -1
- package/package.json +2 -1
- package/src/App.vue +34 -9
- package/src/assets/data/main-navigation.json +17 -0
- package/src/assets/data/multistep-form-progress-bar.json +63 -33
- package/src/assets/styles/global-styles.scss +1 -1
- package/src/components/CmdBox.vue +13 -6
- package/src/components/CmdFancyBox.vue +411 -412
- package/src/components/CmdListOfLinks.vue +0 -2
- package/src/components/CmdMainNavigation.vue +53 -15
|
@@ -19,14 +19,16 @@
|
|
|
19
19
|
</a>
|
|
20
20
|
</li>
|
|
21
21
|
<li v-for="(navigationEntry, index) in navigationEntries" :key="index"
|
|
22
|
-
:class="{'active' : navigationEntry.active, 'open' :
|
|
22
|
+
:class="{'active' : navigationEntry.active, 'open' : openEntry === index, 'has-subentries': navigationEntry?.subentries?.length}">
|
|
23
23
|
<!-- begin type === href -->
|
|
24
24
|
<a
|
|
25
25
|
v-if="navigationEntry.type === 'href'"
|
|
26
26
|
:href="navigationEntry.path"
|
|
27
27
|
:title="navigationEntry.tooltip"
|
|
28
28
|
:target="navigationEntry.target"
|
|
29
|
-
@click="executeLink($event, navigationEntry)"
|
|
29
|
+
@click="executeLink($event, navigationEntry, index)"
|
|
30
|
+
@mouseover="closeAllSubentries()"
|
|
31
|
+
@focus="closeAllSubentries()"
|
|
30
32
|
>
|
|
31
33
|
<span v-if="navigationEntry.iconClass" :class="navigationEntry.iconClass"></span>
|
|
32
34
|
<span v-if="navigationEntry.text">{{ navigationEntry.text }}</span>
|
|
@@ -50,15 +52,17 @@
|
|
|
50
52
|
<!-- end type === router -->
|
|
51
53
|
|
|
52
54
|
<!-- begin sub-level 1 -->
|
|
53
|
-
<ul v-if="navigationEntry?.subentries?.length" aria-expanded="true">
|
|
54
|
-
<li v-for="(navigationSubEntry, subindex) in navigationEntry.subentries" :key="subindex"
|
|
55
|
-
:class="{'open' : navigationSubEntry.open}">
|
|
55
|
+
<ul v-if="navigationEntry?.subentries?.length" :aria-expanded="openEntry ? 'true' : 'false'">
|
|
56
|
+
<li v-for="(navigationSubEntry, subindex) in navigationEntry.subentries" :key="subindex" :class="{'open' : openSubentry === subindex}">
|
|
56
57
|
<!-- begin type === href -->
|
|
57
58
|
<a v-if="navigationSubEntry.type === 'href'"
|
|
58
59
|
:href="navigationSubEntry.path"
|
|
59
60
|
:title="navigationSubEntry.tooltip"
|
|
60
61
|
:target="navigationSubEntry.target"
|
|
61
|
-
@click="executeLink($event, navigationSubEntry)"
|
|
62
|
+
@click="executeLink($event, navigationSubEntry, subindex, 1)"
|
|
63
|
+
@mouseover="closeAllSubentries(1)"
|
|
64
|
+
@focus="closeAllSubentries(1)"
|
|
65
|
+
>
|
|
62
66
|
<span v-if="navigationSubEntry.iconClass" :class="navigationSubEntry.iconClass"></span>
|
|
63
67
|
<span v-if="navigationSubEntry.text">{{ navigationSubEntry.text }}</span>
|
|
64
68
|
<span v-if="navigationSubEntry.subentries && navigationSubEntry.subentries.length > 0"
|
|
@@ -68,9 +72,11 @@
|
|
|
68
72
|
<!-- end type === href -->
|
|
69
73
|
|
|
70
74
|
<!-- begin type === router -->
|
|
71
|
-
<router-link
|
|
72
|
-
|
|
73
|
-
|
|
75
|
+
<router-link
|
|
76
|
+
v-if="navigationSubEntry.type === 'router'"
|
|
77
|
+
:to="getRoute(navigationSubEntry)"
|
|
78
|
+
:title="navigationSubEntry.tooltip"
|
|
79
|
+
>
|
|
74
80
|
<span v-if="navigationSubEntry.iconClass" :class="navigationSubEntry.iconClass"></span>
|
|
75
81
|
<span v-if="navigationSubEntry.text">{{ navigationSubEntry.text }}</span>
|
|
76
82
|
<span v-if="navigationSubEntry.subentries && navigationSubEntry.subentries.length > 0"
|
|
@@ -79,7 +85,7 @@
|
|
|
79
85
|
<!-- end type === router -->
|
|
80
86
|
|
|
81
87
|
<!-- begin sub-level 2 -->
|
|
82
|
-
<ul v-if="navigationSubEntry.subentries">
|
|
88
|
+
<ul v-if="navigationSubEntry.subentries" :aria-expanded="openSubentry ? 'true' : 'false'">
|
|
83
89
|
<li v-for="(navigationSubSubEntry, subsubindex) in navigationSubEntry.subentries"
|
|
84
90
|
:key="subsubindex">
|
|
85
91
|
<!-- begin type === href -->
|
|
@@ -87,7 +93,8 @@
|
|
|
87
93
|
:href="navigationSubSubEntry.path"
|
|
88
94
|
:title="navigationSubSubEntry.tooltip"
|
|
89
95
|
:target="navigationSubSubEntry.target"
|
|
90
|
-
@click="executeLink($event, navigationSubSubEntry)"
|
|
96
|
+
@click="executeLink($event, navigationSubSubEntry)"
|
|
97
|
+
>
|
|
91
98
|
<span v-if="navigationSubSubEntry.iconClass" :class="navigationSubSubEntry.iconClass"></span>
|
|
92
99
|
<span v-if="navigationSubSubEntry.text">{{ navigationSubSubEntry.text }}</span>
|
|
93
100
|
<span v-if="navigationSubSubEntry.subentries && navigationSubSubEntry.subentries.length > 0"
|
|
@@ -136,7 +143,9 @@ export default {
|
|
|
136
143
|
data() {
|
|
137
144
|
return {
|
|
138
145
|
showOffcanvas: false,
|
|
139
|
-
showSubNavigations: true
|
|
146
|
+
showSubNavigations: true,
|
|
147
|
+
openEntry: -1,
|
|
148
|
+
openSubentry: -1
|
|
140
149
|
}
|
|
141
150
|
},
|
|
142
151
|
props: {
|
|
@@ -218,7 +227,13 @@ export default {
|
|
|
218
227
|
}
|
|
219
228
|
},
|
|
220
229
|
methods: {
|
|
221
|
-
|
|
230
|
+
closeAllSubentries(sublevel) {
|
|
231
|
+
if(!sublevel) {
|
|
232
|
+
this.openEntry = -1
|
|
233
|
+
}
|
|
234
|
+
this.openSubentry = -1
|
|
235
|
+
},
|
|
236
|
+
executeLink(event, navigationEntry, index, sublevel) {
|
|
222
237
|
// execute default-link
|
|
223
238
|
if (navigationEntry.target || (navigationEntry.path.length > 1)) {
|
|
224
239
|
this.showOffcanvas = false
|
|
@@ -228,8 +243,14 @@ export default {
|
|
|
228
243
|
// toggle subentries (no link execution)
|
|
229
244
|
if(navigationEntry?.subentries?.length) {
|
|
230
245
|
event.preventDefault()
|
|
231
|
-
|
|
232
|
-
|
|
246
|
+
if(!sublevel) {
|
|
247
|
+
// assign index for first sub-level (or close if already open)
|
|
248
|
+
this.openEntry = this.openEntry === index ? -1 : index
|
|
249
|
+
this.openSubentry = -1 // close all sub-entries
|
|
250
|
+
} else {
|
|
251
|
+
// assign index for second sub-level (or close if already open)
|
|
252
|
+
this.openSubentry = this.openSubentry === index ? -1 : index
|
|
253
|
+
}
|
|
233
254
|
return
|
|
234
255
|
}
|
|
235
256
|
|
|
@@ -275,6 +296,19 @@ export default {
|
|
|
275
296
|
.close-nav {
|
|
276
297
|
display: none;
|
|
277
298
|
}
|
|
299
|
+
|
|
300
|
+
&.open {
|
|
301
|
+
> ul {
|
|
302
|
+
display: block;
|
|
303
|
+
> li {
|
|
304
|
+
&.open {
|
|
305
|
+
> ul {
|
|
306
|
+
display: block;
|
|
307
|
+
}
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
}
|
|
278
312
|
}
|
|
279
313
|
}
|
|
280
314
|
|
|
@@ -372,6 +406,10 @@ export default {
|
|
|
372
406
|
|
|
373
407
|
span {
|
|
374
408
|
font-weight: bold;
|
|
409
|
+
|
|
410
|
+
&[class*="icon"] {
|
|
411
|
+
font-size: 1rem;
|
|
412
|
+
}
|
|
375
413
|
}
|
|
376
414
|
}
|
|
377
415
|
|