srcdev-nuxt-components 2.5.3 → 2.5.4
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.
|
@@ -44,33 +44,24 @@
|
|
|
44
44
|
<NavigationItems :main-navigation-state="mainNavigationState" />
|
|
45
45
|
</div>
|
|
46
46
|
</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>
|
|
47
|
+
<slot v-if="hasSecondaryNavigation" name="secondaryNavigation"></slot>
|
|
54
48
|
</nav>
|
|
49
|
+
<LayoutRow tag="div" variant="full" :style-class-passthrough="['mb-20', 'debug-grid']">
|
|
50
|
+
<ClientOnly>
|
|
51
|
+
<div>
|
|
52
|
+
<h2 class="heading-4">navigationWrapperRects</h2>
|
|
53
|
+
<pre>{{ navigationWrapperRects }}</pre>
|
|
54
|
+
<hr>
|
|
55
|
+
<h2 class="heading-4">secondaryNavRects</h2>
|
|
56
|
+
<pre>{{ secondaryNavRects }}</pre>
|
|
57
|
+
</div>
|
|
58
|
+
<div>
|
|
59
|
+
<h2 class="heading-4">mainNavigationState</h2>
|
|
60
|
+
<pre>{{ mainNavigationState }}</pre>
|
|
61
|
+
</div>
|
|
62
|
+
</ClientOnly>
|
|
63
|
+
</LayoutRow>
|
|
55
64
|
</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
65
|
</template>
|
|
75
66
|
|
|
76
67
|
<script setup lang="ts">
|
|
@@ -92,6 +83,9 @@ const props = defineProps({
|
|
|
92
83
|
},
|
|
93
84
|
});
|
|
94
85
|
|
|
86
|
+
const slots = useSlots();
|
|
87
|
+
const hasSecondaryNavigation = computed(() => slots.secondaryNavigation !== undefined);
|
|
88
|
+
|
|
95
89
|
const navLoaded = ref(false);
|
|
96
90
|
const navigationWrapperRef = useTemplateRef('navigationWrapper');
|
|
97
91
|
|
|
@@ -113,6 +107,7 @@ const mainNavigationState = ref<ResponsiveHeaderState>({
|
|
|
113
107
|
secondNav: false,
|
|
114
108
|
},
|
|
115
109
|
clonedNavLinks: props.responsiveNavLinks,
|
|
110
|
+
hasSecondNav: Object.keys(props.responsiveNavLinks).length > 1,
|
|
116
111
|
});
|
|
117
112
|
|
|
118
113
|
const navRefs = ref<Record<string, HTMLUListElement | null>>({});
|
|
@@ -138,7 +133,7 @@ const navigationDetailsRefs = useTemplateRef<HTMLElement[]>('navigationDetails')
|
|
|
138
133
|
const overflowDetailsRef = useTemplateRef('overflowDetails');
|
|
139
134
|
|
|
140
135
|
const showOverflowDetails = computed(() => {
|
|
141
|
-
const hasHiddenNav = !mainNavigationState.value.navListVisibility['firstNav'] || !mainNavigationState.value.navListVisibility['secondNav'];
|
|
136
|
+
const hasHiddenNav = !mainNavigationState.value.navListVisibility['firstNav'] || (!mainNavigationState.value.navListVisibility['secondNav'] && mainNavigationState.value.hasSecondNav);
|
|
142
137
|
return hasHiddenNav;
|
|
143
138
|
});
|
|
144
139
|
|
|
@@ -275,6 +270,7 @@ watch(
|
|
|
275
270
|
--_link-visibility-transition: all 0.2s ease-in-out;
|
|
276
271
|
}
|
|
277
272
|
|
|
273
|
+
/* flex-grow: 1; */
|
|
278
274
|
display: grid;
|
|
279
275
|
grid-template-areas: 'navStack';
|
|
280
276
|
|
package/package.json
CHANGED