srcdev-nuxt-components 2.5.3 → 2.5.5
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.
|
@@ -38,39 +38,32 @@
|
|
|
38
38
|
<details class="overflow-details" :class="[{ 'visually-hidden': !navLoaded || !showOverflowDetails }]"
|
|
39
39
|
ref="overflowDetails" name="overflow-group">
|
|
40
40
|
<summary class="overflow-details-summary has-toggle-icon">
|
|
41
|
-
<
|
|
41
|
+
<slot v-if="hasOverflowDetailsSummaryIcon" name="overflowDetailsSummaryIcon">
|
|
42
|
+
<Icon name="gravity-ui:ellipsis" class="icon" />
|
|
43
|
+
</slot>
|
|
42
44
|
</summary>
|
|
43
45
|
<div class="overflow-details-nav">
|
|
44
46
|
<NavigationItems :main-navigation-state="mainNavigationState" />
|
|
45
47
|
</div>
|
|
46
48
|
</details>
|
|
47
|
-
<
|
|
48
|
-
<li class="secondary-navigation-item">
|
|
49
|
-
<NuxtLink class="secondary-navigation-link" to="/">
|
|
50
|
-
<Icon name="material-symbols:settings-outline-rounded" class="icon" />
|
|
51
|
-
</NuxtLink>
|
|
52
|
-
</li>
|
|
53
|
-
</ul>
|
|
49
|
+
<slot v-if="hasSecondaryNavigation" name="secondaryNavigation"></slot>
|
|
54
50
|
</nav>
|
|
51
|
+
<LayoutRow tag="div" variant="full" :style-class-passthrough="['mb-20', 'debug-grid']">
|
|
52
|
+
<ClientOnly>
|
|
53
|
+
<div>
|
|
54
|
+
<h2 class="heading-4">navigationWrapperRects</h2>
|
|
55
|
+
<pre>{{ navigationWrapperRects }}</pre>
|
|
56
|
+
<hr>
|
|
57
|
+
<h2 class="heading-4">secondaryNavRects</h2>
|
|
58
|
+
<pre>{{ secondaryNavRects }}</pre>
|
|
59
|
+
</div>
|
|
60
|
+
<div>
|
|
61
|
+
<h2 class="heading-4">mainNavigationState</h2>
|
|
62
|
+
<pre>{{ mainNavigationState }}</pre>
|
|
63
|
+
</div>
|
|
64
|
+
</ClientOnly>
|
|
65
|
+
</LayoutRow>
|
|
55
66
|
</div>
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
<LayoutRow tag="div" variant="full" :style-class-passthrough="['mb-20', 'debug-grid']">
|
|
59
|
-
<ClientOnly>
|
|
60
|
-
<div>
|
|
61
|
-
<h2 class="heading-4">navigationWrapperRects</h2>
|
|
62
|
-
<pre>{{ navigationWrapperRects }}</pre>
|
|
63
|
-
<hr>
|
|
64
|
-
<h2 class="heading-4">secondaryNavRects</h2>
|
|
65
|
-
<pre>{{ secondaryNavRects }}</pre>
|
|
66
|
-
</div>
|
|
67
|
-
<div>
|
|
68
|
-
<h2 class="heading-4">mainNavigationState</h2>
|
|
69
|
-
<pre>{{ mainNavigationState }}</pre>
|
|
70
|
-
</div>
|
|
71
|
-
</ClientOnly>
|
|
72
|
-
|
|
73
|
-
</LayoutRow>
|
|
74
67
|
</template>
|
|
75
68
|
|
|
76
69
|
<script setup lang="ts">
|
|
@@ -92,6 +85,10 @@ const props = defineProps({
|
|
|
92
85
|
},
|
|
93
86
|
});
|
|
94
87
|
|
|
88
|
+
const slots = useSlots();
|
|
89
|
+
const hasSecondaryNavigation = computed(() => slots.secondaryNavigation !== undefined);
|
|
90
|
+
const hasOverflowDetailsSummaryIcon = computed(() => slots.overflowDetailsSummaryIcon !== undefined);
|
|
91
|
+
|
|
95
92
|
const navLoaded = ref(false);
|
|
96
93
|
const navigationWrapperRef = useTemplateRef('navigationWrapper');
|
|
97
94
|
|
|
@@ -113,6 +110,7 @@ const mainNavigationState = ref<ResponsiveHeaderState>({
|
|
|
113
110
|
secondNav: false,
|
|
114
111
|
},
|
|
115
112
|
clonedNavLinks: props.responsiveNavLinks,
|
|
113
|
+
hasSecondNav: Object.keys(props.responsiveNavLinks).length > 1,
|
|
116
114
|
});
|
|
117
115
|
|
|
118
116
|
const navRefs = ref<Record<string, HTMLUListElement | null>>({});
|
|
@@ -138,7 +136,7 @@ const navigationDetailsRefs = useTemplateRef<HTMLElement[]>('navigationDetails')
|
|
|
138
136
|
const overflowDetailsRef = useTemplateRef('overflowDetails');
|
|
139
137
|
|
|
140
138
|
const showOverflowDetails = computed(() => {
|
|
141
|
-
const hasHiddenNav = !mainNavigationState.value.navListVisibility['firstNav'] || !mainNavigationState.value.navListVisibility['secondNav'];
|
|
139
|
+
const hasHiddenNav = !mainNavigationState.value.navListVisibility['firstNav'] || (!mainNavigationState.value.navListVisibility['secondNav'] && mainNavigationState.value.hasSecondNav);
|
|
142
140
|
return hasHiddenNav;
|
|
143
141
|
});
|
|
144
142
|
|
|
@@ -275,6 +273,7 @@ watch(
|
|
|
275
273
|
--_link-visibility-transition: all 0.2s ease-in-out;
|
|
276
274
|
}
|
|
277
275
|
|
|
276
|
+
/* flex-grow: 1; */
|
|
278
277
|
display: grid;
|
|
279
278
|
grid-template-areas: 'navStack';
|
|
280
279
|
|
|
@@ -462,6 +461,7 @@ watch(
|
|
|
462
461
|
|
|
463
462
|
.overflow-details-summary {
|
|
464
463
|
--_icon-zoom: 1;
|
|
464
|
+
--_icon-size: 30px;
|
|
465
465
|
display: flex;
|
|
466
466
|
align-items: center;
|
|
467
467
|
justify-content: center;
|
|
@@ -474,7 +474,8 @@ watch(
|
|
|
474
474
|
outline: 1px solid #ffffff10;
|
|
475
475
|
background-color: Canvas;
|
|
476
476
|
|
|
477
|
-
width:
|
|
477
|
+
width: var(--_icon-size);
|
|
478
|
+
height: var(--_icon-size);
|
|
478
479
|
overflow: hidden;
|
|
479
480
|
|
|
480
481
|
|
|
@@ -491,6 +492,8 @@ watch(
|
|
|
491
492
|
.icon {
|
|
492
493
|
scale: var(--_icon-zoom);
|
|
493
494
|
transition: scale 0.2s ease-in-out;
|
|
495
|
+
width: var(--_icon-size);
|
|
496
|
+
height: var(--_icon-size);
|
|
494
497
|
}
|
|
495
498
|
}
|
|
496
499
|
|
package/package.json
CHANGED