@asd20/ui 3.2.522 → 3.2.524
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
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
ref="menuContainer"
|
|
4
4
|
id="main-menu-list"
|
|
5
5
|
class="asd20-site-menu"
|
|
6
|
-
role="group"
|
|
7
6
|
@click="onBackgroundClick"
|
|
8
7
|
@focus="onFocus"
|
|
9
8
|
@blur="onBlur"
|
|
@@ -14,9 +13,9 @@
|
|
|
14
13
|
@keyup.enter="activateSection"
|
|
15
14
|
@keyup.escape="deactivateSection"
|
|
16
15
|
@keydown.tab.stop="dismiss"
|
|
17
|
-
tabindex="
|
|
16
|
+
tabindex="-1"
|
|
18
17
|
>
|
|
19
|
-
|
|
18
|
+
<!-- <div
|
|
20
19
|
id="main-menu-list"
|
|
21
20
|
ref="menuContainer"
|
|
22
21
|
class="asd20-site-menu"
|
|
@@ -27,76 +26,77 @@
|
|
|
27
26
|
@keyup.enter="activateSection"
|
|
28
27
|
tabindex="-1"
|
|
29
28
|
> -->
|
|
30
|
-
<focus-trap :active="active" :initial-focus="() => $refs.focused[0]">
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
<button
|
|
39
|
-
v-for="(section, index) in sections"
|
|
40
|
-
:key="index"
|
|
41
|
-
:id="`asd20-site-menu__section-${index}`"
|
|
42
|
-
class="asd20-table-of-contents__item"
|
|
43
|
-
ref="focused"
|
|
44
|
-
aria-expanded="false"
|
|
45
|
-
:aria-owns="`asd20-site-menu__item-${index}`"
|
|
46
|
-
@click="activeSectionIndex = index"
|
|
47
|
-
@mouseup="keyboardTriggeredLastAction = false"
|
|
48
|
-
@keyup="keyboardTriggeredLastAction = true"
|
|
49
|
-
>
|
|
50
|
-
<span class="title">{{ section.title }}</span>
|
|
51
|
-
<asd20-icon name="chevron" size="sm" />
|
|
52
|
-
</button>
|
|
53
|
-
</div>
|
|
54
|
-
</transition>
|
|
55
|
-
<transition
|
|
56
|
-
name="slide-left"
|
|
57
|
-
v-on:after-enter="afterActivateTransition"
|
|
29
|
+
<!-- <focus-trap :active="active" :initial-focus="() => $refs.focused[0]"> -->
|
|
30
|
+
<div class="asd20-site-menu__viewport">
|
|
31
|
+
<transition name="slide-right" role="group">
|
|
32
|
+
<div
|
|
33
|
+
v-if="!activeSection"
|
|
34
|
+
class="asd20-table-of-contents"
|
|
35
|
+
tabindex="-1"
|
|
36
|
+
role="menu"
|
|
58
37
|
>
|
|
59
|
-
|
|
38
|
+
<button
|
|
39
|
+
v-for="(section, index) in sections"
|
|
40
|
+
:key="index"
|
|
41
|
+
:id="`asd20-site-menu__section-${index}`"
|
|
42
|
+
class="asd20-table-of-contents__item"
|
|
43
|
+
role="menuitem"
|
|
44
|
+
ref="focused"
|
|
45
|
+
aria-expanded="false"
|
|
46
|
+
:aria-controls="`asd20-site-menu__item-${index}`"
|
|
47
|
+
@click="activeSectionIndex = index"
|
|
48
|
+
@mouseup="keyboardTriggeredLastAction = false"
|
|
49
|
+
@keyup="keyboardTriggeredLastAction = true"
|
|
50
|
+
>
|
|
51
|
+
<span class="title">{{ section.title }}</span>
|
|
52
|
+
<asd20-icon name="chevron" size="sm" />
|
|
53
|
+
</button>
|
|
54
|
+
</div>
|
|
55
|
+
</transition>
|
|
56
|
+
<transition name="slide-left" v-on:after-enter="afterActivateTransition">
|
|
57
|
+
<!-- <focus-trap
|
|
60
58
|
:active="active"
|
|
61
59
|
aria-hidden="true"
|
|
62
60
|
returnFocusOnDeactivate="true"
|
|
63
61
|
> -->
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
<div
|
|
78
|
-
:id="`asd20-site-menu__item-${activeSectionIndex}`"
|
|
79
|
-
class="asd20-site-menu__items"
|
|
80
|
-
>
|
|
81
|
-
<a
|
|
82
|
-
v-for="(item, index) in activeSection.items"
|
|
83
|
-
:id="`asd20-site-menu__item-${activeSectionIndex}-${index}`"
|
|
84
|
-
:key="index"
|
|
62
|
+
<div v-if="activeSection" class="asd20-site-menu__section">
|
|
63
|
+
<!-- <div> -->
|
|
64
|
+
<button
|
|
65
|
+
class="asd20-site-menu__section__back"
|
|
66
|
+
aria-expanded="true"
|
|
67
|
+
aira-owns="asd20-site-menu__items"
|
|
68
|
+
@click="deactivateSection"
|
|
69
|
+
@mouseup="keyboardTriggeredLastAction = false"
|
|
70
|
+
@keyup="keyboardTriggeredLastAction = true"
|
|
71
|
+
>
|
|
72
|
+
<asd20-icon name="chevron" size="sm" />
|
|
73
|
+
<span class="title">{{ activeSection.title }}</span>
|
|
74
|
+
</button>
|
|
85
75
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
76
|
+
<div
|
|
77
|
+
:id="`asd20-site-menu__item-${activeSectionIndex}`"
|
|
78
|
+
class="asd20-site-menu__items"
|
|
79
|
+
role="menu"
|
|
80
|
+
>
|
|
81
|
+
<a
|
|
82
|
+
v-for="(item, index) in activeSection.items"
|
|
83
|
+
:id="`asd20-site-menu__item-${activeSectionIndex}-${index}`"
|
|
84
|
+
:key="index"
|
|
85
|
+
role="menuitem"
|
|
86
|
+
class="asd20-site-menu__item"
|
|
87
|
+
:href="item.url"
|
|
88
|
+
:target="
|
|
89
|
+
!item.url || item.url.startsWith('/') ? undefined : '_blank'
|
|
90
|
+
"
|
|
91
|
+
>{{ item.title }}</a
|
|
92
|
+
>
|
|
95
93
|
</div>
|
|
96
|
-
|
|
97
|
-
</
|
|
98
|
-
|
|
99
|
-
|
|
94
|
+
</div>
|
|
95
|
+
<!-- </div> -->
|
|
96
|
+
<!-- </focus-trap> -->
|
|
97
|
+
</transition>
|
|
98
|
+
</div>
|
|
99
|
+
<!-- </focus-trap> -->
|
|
100
100
|
</div>
|
|
101
101
|
</template>
|
|
102
102
|
|
|
@@ -104,7 +104,6 @@
|
|
|
104
104
|
import { setTimeout } from 'timers'
|
|
105
105
|
import { FocusTrap } from 'focus-trap-vue'
|
|
106
106
|
import Asd20Icon from '../../atoms/Asd20Icon'
|
|
107
|
-
|
|
108
107
|
export default {
|
|
109
108
|
name: 'Asd20SiteMenu',
|
|
110
109
|
components: { Asd20Icon, FocusTrap },
|
|
@@ -205,7 +204,6 @@ export default {
|
|
|
205
204
|
`asd20-site-menu__section-${this.focusedSectionIndex}`
|
|
206
205
|
)
|
|
207
206
|
let timeout = el ? 0 : 200
|
|
208
|
-
|
|
209
207
|
setTimeout(() => {
|
|
210
208
|
el = document.getElementById(
|
|
211
209
|
`asd20-site-menu__section-${this.focusedSectionIndex}`
|
|
@@ -238,7 +236,6 @@ export default {
|
|
|
238
236
|
<style lang="scss" scoped>
|
|
239
237
|
@import '../../../design/_variables.scss';
|
|
240
238
|
@import '../../../design/_mixins.scss';
|
|
241
|
-
|
|
242
239
|
.slide-right-enter-active,
|
|
243
240
|
.slide-right-leave-active {
|
|
244
241
|
transition: all asd20-speed(1) $anim-easing;
|
|
@@ -247,7 +244,6 @@ export default {
|
|
|
247
244
|
.slide-right-leave-to {
|
|
248
245
|
transform: translate3d(-100%, 0, 0);
|
|
249
246
|
}
|
|
250
|
-
|
|
251
247
|
.slide-left-enter-active,
|
|
252
248
|
.slide-left-leave-active {
|
|
253
249
|
transition: all asd20-speed(1) $anim-easing;
|
|
@@ -256,7 +252,6 @@ export default {
|
|
|
256
252
|
.slide-left-leave-to {
|
|
257
253
|
transform: translate3d(100%, 0, 0);
|
|
258
254
|
}
|
|
259
|
-
|
|
260
255
|
.asd20-site-menu {
|
|
261
256
|
position: fixed;
|
|
262
257
|
z-index: 300;
|
|
@@ -273,7 +268,6 @@ export default {
|
|
|
273
268
|
// outline: none;
|
|
274
269
|
}
|
|
275
270
|
}
|
|
276
|
-
|
|
277
271
|
.asd20-site-menu__viewport {
|
|
278
272
|
position: absolute;
|
|
279
273
|
left: 0;
|
|
@@ -285,7 +279,6 @@ export default {
|
|
|
285
279
|
overflow: auto;
|
|
286
280
|
// overflow-y: scroll !important;
|
|
287
281
|
}
|
|
288
|
-
|
|
289
282
|
.asd20-table-of-contents {
|
|
290
283
|
display: flex;
|
|
291
284
|
flex-grow: 1;
|
|
@@ -299,7 +292,6 @@ export default {
|
|
|
299
292
|
right: 0;
|
|
300
293
|
bottom: 0;
|
|
301
294
|
// box-shadow: 1px 10px 10px 0 rgba(0, 0, 0, 0.25);
|
|
302
|
-
|
|
303
295
|
&__item {
|
|
304
296
|
appearance: none;
|
|
305
297
|
border: none;
|
|
@@ -341,7 +333,6 @@ export default {
|
|
|
341
333
|
}
|
|
342
334
|
}
|
|
343
335
|
}
|
|
344
|
-
|
|
345
336
|
.asd20-site-menu__section {
|
|
346
337
|
display: flex;
|
|
347
338
|
flex-direction: column;
|
|
@@ -367,13 +358,11 @@ export default {
|
|
|
367
358
|
&:active {
|
|
368
359
|
background: rgba(0, 0, 0, 0.0625);
|
|
369
360
|
}
|
|
370
|
-
|
|
371
361
|
&:focus {
|
|
372
362
|
background: rgba(0, 0, 0, 0.0625);
|
|
373
363
|
// outline: none;
|
|
374
364
|
box-shadow: 0 0 0 5px var(--website-menu__link-color) inset;
|
|
375
365
|
}
|
|
376
|
-
|
|
377
366
|
.title {
|
|
378
367
|
color: var(--website-menu__title-color);
|
|
379
368
|
font-weight: 900;
|
|
@@ -387,12 +376,10 @@ export default {
|
|
|
387
376
|
// opacity: 0.5;
|
|
388
377
|
}
|
|
389
378
|
}
|
|
390
|
-
|
|
391
379
|
.asd20-site-menu__items {
|
|
392
380
|
overflow-y: scroll; /* has to be scroll, not auto */
|
|
393
381
|
// -webkit-overflow-scrolling: touch;
|
|
394
382
|
}
|
|
395
|
-
|
|
396
383
|
.asd20-site-menu__item {
|
|
397
384
|
display: flex;
|
|
398
385
|
justify-content: flex-start;
|
|
@@ -411,7 +398,6 @@ export default {
|
|
|
411
398
|
&:active {
|
|
412
399
|
background: var(--website-menu__hover-background-color);
|
|
413
400
|
}
|
|
414
|
-
|
|
415
401
|
&:last-child {
|
|
416
402
|
box-shadow: none;
|
|
417
403
|
}
|
|
@@ -423,7 +409,6 @@ export default {
|
|
|
423
409
|
}
|
|
424
410
|
// display: none;
|
|
425
411
|
}
|
|
426
|
-
|
|
427
412
|
@media (min-width: 768px) {
|
|
428
413
|
.asd20-site-menu__section {
|
|
429
414
|
flex-grow: 0.1;
|
|
@@ -437,7 +422,6 @@ export default {
|
|
|
437
422
|
}
|
|
438
423
|
}
|
|
439
424
|
}
|
|
440
|
-
|
|
441
425
|
@media (min-width: 1024px) {
|
|
442
426
|
.asd20-site-menu {
|
|
443
427
|
position: fixed;
|
|
@@ -451,7 +435,6 @@ export default {
|
|
|
451
435
|
display: flex;
|
|
452
436
|
flex-direction: column;
|
|
453
437
|
}
|
|
454
|
-
|
|
455
438
|
.asd20-site-menu__viewport {
|
|
456
439
|
position: absolute;
|
|
457
440
|
left: 0;
|
|
@@ -476,7 +459,6 @@ export default {
|
|
|
476
459
|
}
|
|
477
460
|
}
|
|
478
461
|
}
|
|
479
|
-
|
|
480
462
|
.asd20-site-menu__section {
|
|
481
463
|
&__back {
|
|
482
464
|
background: var(--website-menu__open-background-color, white);
|