@asd20/ui 3.2.840 → 3.2.842
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 +1 -1
- package/src/components/organisms/Asd20ActionMenu/index.vue +8 -1
- package/src/components/organisms/Asd20Navbar/index.vue +8 -4
- package/src/components/organisms/Asd20SiteMenu/index.vue +14 -3
- package/src/components/organisms/Asd20SiteNavigation/index.vue +3 -2
- package/src/design/_typography.scss +1 -1
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="asd20-action-menu">
|
|
2
|
+
<div :class="emptyNav ? 'asd20-action-menu emptyNav' : 'asd20-action-menu'">
|
|
3
3
|
<asd20-action-menu-item
|
|
4
4
|
v-for="(item, index) in items"
|
|
5
5
|
:key="index"
|
|
@@ -21,6 +21,7 @@ export default {
|
|
|
21
21
|
open: { type: Boolean, default: false },
|
|
22
22
|
items: { type: Array, default: () => actionItems },
|
|
23
23
|
zoomed: { type: Boolean, default: false },
|
|
24
|
+
emptyNav: { type: Boolean, default: false },
|
|
24
25
|
},
|
|
25
26
|
|
|
26
27
|
computed: {
|
|
@@ -86,6 +87,9 @@ export default {
|
|
|
86
87
|
flex-basis: calc(100% / 3);
|
|
87
88
|
}
|
|
88
89
|
}
|
|
90
|
+
.emptyNav {
|
|
91
|
+
top: space(2);
|
|
92
|
+
}
|
|
89
93
|
|
|
90
94
|
@media (min-width: 768px) {
|
|
91
95
|
.asd20-action-menu {
|
|
@@ -140,5 +144,8 @@ export default {
|
|
|
140
144
|
}
|
|
141
145
|
}
|
|
142
146
|
}
|
|
147
|
+
.emptyNav {
|
|
148
|
+
top: unset;
|
|
149
|
+
}
|
|
143
150
|
}
|
|
144
151
|
</style>
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :class="classes">
|
|
3
3
|
<asd20-action-menu-item
|
|
4
|
-
v-if="!emptyNav"
|
|
5
4
|
ref="menuButton"
|
|
6
5
|
id="menu-toggle-button"
|
|
7
6
|
aria-owns="main-menu-list"
|
|
8
7
|
:aria-expanded="menuActive ? 'true' : 'false'"
|
|
9
8
|
:size="desktop && !zoomed ? 'lg' : 'md'"
|
|
10
|
-
class="menu-button"
|
|
9
|
+
:class="emptyNav ? 'menu-button emptyNav' : 'menu-button'"
|
|
11
10
|
:icon="menuActive ? 'close' : 'menu'"
|
|
12
11
|
:label="menuActive ? 'Close' : 'Menu'"
|
|
13
12
|
:active="menuActive"
|
|
@@ -153,10 +152,12 @@ $logo-width: 50vw;
|
|
|
153
152
|
::v-deep .asd20-icon g{
|
|
154
153
|
// --line-color: var(--website-icon__fill-color);
|
|
155
154
|
// --fill-color: red;
|
|
156
|
-
|
|
155
|
+
}
|
|
157
156
|
}
|
|
158
157
|
}
|
|
159
|
-
|
|
158
|
+
.emptyNav {
|
|
159
|
+
display: initial;
|
|
160
|
+
}
|
|
160
161
|
}
|
|
161
162
|
|
|
162
163
|
@keyframes navbar-collapse {
|
|
@@ -234,6 +235,9 @@ $logo-width: 50vw;
|
|
|
234
235
|
animation: none;
|
|
235
236
|
}
|
|
236
237
|
}
|
|
238
|
+
.emptyNav {
|
|
239
|
+
display: none !important;
|
|
240
|
+
}
|
|
237
241
|
}
|
|
238
242
|
@media (min-width: 1024px) {
|
|
239
243
|
.navbar
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
<div
|
|
19
19
|
id="main-menu-list"
|
|
20
20
|
ref="menuContainer"
|
|
21
|
-
class="asd20-site-menu"
|
|
21
|
+
:class="emptyNav ? 'asd20-site-menu emptyNav' : 'asd20-site-menu'"
|
|
22
22
|
@click="onBackgroundClick"
|
|
23
23
|
@focus="onFocus"
|
|
24
24
|
@blur="onBlur"
|
|
@@ -30,7 +30,11 @@
|
|
|
30
30
|
@keyup.escape="deactivateSection"
|
|
31
31
|
tabindex="-1"
|
|
32
32
|
>
|
|
33
|
-
<focus-trap
|
|
33
|
+
<focus-trap
|
|
34
|
+
v-if="!emptyNav"
|
|
35
|
+
:active="active"
|
|
36
|
+
:initial-focus="() => $refs.focused[0]"
|
|
37
|
+
>
|
|
34
38
|
<div class="asd20-site-menu__viewport">
|
|
35
39
|
<transition name="slide-right" role="group">
|
|
36
40
|
<div
|
|
@@ -129,6 +133,7 @@ export default {
|
|
|
129
133
|
props: {
|
|
130
134
|
sections: { type: Array, default: () => [] },
|
|
131
135
|
active: { type: Boolean, default: false },
|
|
136
|
+
emptyNav: { type: Boolean, default: false },
|
|
132
137
|
},
|
|
133
138
|
data: () => ({
|
|
134
139
|
activeSectionIndex: -1,
|
|
@@ -145,7 +150,9 @@ export default {
|
|
|
145
150
|
},
|
|
146
151
|
},
|
|
147
152
|
mounted() {
|
|
148
|
-
this.
|
|
153
|
+
if (!this.emptyNav) {
|
|
154
|
+
this.setFocus()
|
|
155
|
+
}
|
|
149
156
|
},
|
|
150
157
|
methods: {
|
|
151
158
|
onFocus(event) {
|
|
@@ -463,6 +470,10 @@ export default {
|
|
|
463
470
|
}
|
|
464
471
|
// display: none;
|
|
465
472
|
}
|
|
473
|
+
.emptyNav {
|
|
474
|
+
display: none;
|
|
475
|
+
}
|
|
476
|
+
|
|
466
477
|
@media (min-width: 768px) {
|
|
467
478
|
.asd20-site-menu__section {
|
|
468
479
|
flex-grow: 0.1;
|
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
:collapsed="collapsed"
|
|
10
10
|
:zoomed="zoomed"
|
|
11
11
|
:desktop="desktop"
|
|
12
|
-
@keyboardTriggeredLastAction="keyboardTriggeredLastAction = $event"
|
|
13
12
|
:emptyNav="emptyNav"
|
|
13
|
+
@keyboardTriggeredLastAction="keyboardTriggeredLastAction = $event"
|
|
14
14
|
>
|
|
15
15
|
<!-- <asd20-district-logo
|
|
16
16
|
v-show="
|
|
@@ -50,6 +50,7 @@
|
|
|
50
50
|
:items="actionItems"
|
|
51
51
|
:active="menuOpen"
|
|
52
52
|
:zoomed="zoomed"
|
|
53
|
+
:emptyNav="emptyNav"
|
|
53
54
|
@update:active="$emit('update:menuOpen', $event)"
|
|
54
55
|
/>
|
|
55
56
|
</transition>
|
|
@@ -71,6 +72,7 @@
|
|
|
71
72
|
:active="menuOpen"
|
|
72
73
|
@update:active="$emit('update:menuOpen', $event)"
|
|
73
74
|
:sections="navigation"
|
|
75
|
+
:emptyNav="emptyNav"
|
|
74
76
|
/>
|
|
75
77
|
</transition>
|
|
76
78
|
|
|
@@ -244,7 +246,6 @@ export default {
|
|
|
244
246
|
&::before {
|
|
245
247
|
left: space(3);
|
|
246
248
|
}
|
|
247
|
-
|
|
248
249
|
.asd20-site-search.slide-enter,
|
|
249
250
|
.asd20-site-search.slide-leave-to {
|
|
250
251
|
transform: translate3d(-100%, 0, 0);
|