srcdev-nuxt-components 2.5.2 → 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
|
|
|
@@ -104,6 +98,7 @@ const handleSummaryHover = (event: MouseEvent | FocusEvent) => {
|
|
|
104
98
|
} else {
|
|
105
99
|
parentDetailsElement.setAttribute('open', '');
|
|
106
100
|
}
|
|
101
|
+
overflowDetailsRef.value?.removeAttribute('open');
|
|
107
102
|
};
|
|
108
103
|
|
|
109
104
|
const mainNavigationState = ref<ResponsiveHeaderState>({
|
|
@@ -112,6 +107,7 @@ const mainNavigationState = ref<ResponsiveHeaderState>({
|
|
|
112
107
|
secondNav: false,
|
|
113
108
|
},
|
|
114
109
|
clonedNavLinks: props.responsiveNavLinks,
|
|
110
|
+
hasSecondNav: Object.keys(props.responsiveNavLinks).length > 1,
|
|
115
111
|
});
|
|
116
112
|
|
|
117
113
|
const navRefs = ref<Record<string, HTMLUListElement | null>>({});
|
|
@@ -137,7 +133,7 @@ const navigationDetailsRefs = useTemplateRef<HTMLElement[]>('navigationDetails')
|
|
|
137
133
|
const overflowDetailsRef = useTemplateRef('overflowDetails');
|
|
138
134
|
|
|
139
135
|
const showOverflowDetails = computed(() => {
|
|
140
|
-
const hasHiddenNav = !mainNavigationState.value.navListVisibility['firstNav'] || !mainNavigationState.value.navListVisibility['secondNav'];
|
|
136
|
+
const hasHiddenNav = !mainNavigationState.value.navListVisibility['firstNav'] || (!mainNavigationState.value.navListVisibility['secondNav'] && mainNavigationState.value.hasSecondNav);
|
|
141
137
|
return hasHiddenNav;
|
|
142
138
|
});
|
|
143
139
|
|
|
@@ -274,6 +270,7 @@ watch(
|
|
|
274
270
|
--_link-visibility-transition: all 0.2s ease-in-out;
|
|
275
271
|
}
|
|
276
272
|
|
|
273
|
+
/* flex-grow: 1; */
|
|
277
274
|
display: grid;
|
|
278
275
|
grid-template-areas: 'navStack';
|
|
279
276
|
|
package/package.json
CHANGED