srcdev-nuxt-components 6.1.5 → 6.1.7

package/app/components/display-prompt/DisplayPromptCore.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
-    class="display-prompt-core"
-    :class="[{ dismissed: hide }, { 'use-local-style-overrides': useLocalStyleOverrides }]"
-    :data-test-id="`display-prompt-core-${theme}`"
-  >
+  <div class="display-prompt-core" :class="[{ dismissed: hide }]" :data-test-id="`display-prompt-core-${theme}`">
     <div class="display-prompt-wrapper" :data-theme="theme" :class="[elementClasses]" data-test-id="display-prompt">
       <div class="display-prompt-inner">
         <div class="display-prompt-icon" data-test-id="prompt-icon">
@@ -47,7 +43,7 @@ const props = defineProps({
     type: String,
     default: "error",
     validator(value: string) {
-      return ["error", "info", "success", "warning", "secondary"].includes(value)
+      return ["primary", "secondary", "tertiary", "ghost", "error", "info", "success", "warning"].includes(value)
     },
   },
   styleClassPassthrough: {
@@ -61,10 +57,6 @@ const props = defineProps({
       return ["dark-grey", "white"].includes(value)
     },
   },
-  useLocalStyleOverrides: {
-    type: Boolean,
-    default: false,
-  },
   displayPromptIcons: {
     type: Object as PropType<Record<string, string>>,
     default: () => ({

package/app/components/responsive-header/ResponsiveHeader.vue

@@ -154,12 +154,22 @@ const props = defineProps({
   },
 })
 
-const slots = useSlots()
 const collapseNavigationBelowWidth = computed(
   () => props.collapseBreakpoint !== null || props.collapseAtMainNavIntersection
 )
 const collapseBreakpoint = ref(props.collapseBreakpoint)
-const navLoaded = ref(false)
+
+// Use global navigation state for caching between route changes
+const {
+  navLoaded,
+  navigationInitialized,
+  navigationWrapperRects: cachedNavigationWrapperRects,
+  secondaryNavRects: cachedSecondaryNavRects,
+  clearNavigationCache,
+} = useNavigationState()
+
+const slots = useSlots()
+
 const navigationWrapperRef = useTemplateRef("navigationWrapper")
 
 const closeAllNavigationDetails = () => {
@@ -215,6 +225,7 @@ const handleSummaryAction = (event: MouseEvent | KeyboardEvent) => {
   toggleDetailsElement(event)
 }
 
+// Initialize main navigation state
 const mainNavigationState = ref<ResponsiveHeaderState>({
   navListVisibility: {
     firstNav: false,
@@ -230,7 +241,13 @@ const setNavRef = (key: string, el: HTMLUListElement | null) => {
   navRefs.value[key] = el
 }
 
-const navigationWrapperRects = ref<IFlooredRect | null>(null)
+const navigationWrapperRects = computed({
+  get: () => cachedNavigationWrapperRects.value,
+  set: (value: IFlooredRect | null) => {
+    cachedNavigationWrapperRects.value = value
+  },
+})
+
 const firstNavRef = ref<HTMLUListElement | null>(null)
 const firstNavRects = ref<IFlooredRect | null>(null)
 
@@ -238,7 +255,12 @@ const secondNavRef = ref<HTMLUListElement | null>(null)
 const secondNavRects = ref<IFlooredRect | null>(null)
 
 const secondaryNavRef = useTemplateRef("secondaryNav")
-const secondaryNavRects = ref<IFlooredRect | null>(null)
+const secondaryNavRects = computed({
+  get: () => cachedSecondaryNavRects.value,
+  set: (value: IFlooredRect | null) => {
+    cachedSecondaryNavRects.value = value
+  },
+})
 
 const mainNavigationItemsRefs = useTemplateRef<HTMLLIElement[]>("mainNavigationItems")
 
@@ -323,7 +345,8 @@ const determineNavigationItemVisibility = (rect: DOMRect) => {
 const initMainNavigationState = () => {
   if (!mainNavigationItemsRefs.value) return
 
-  mainNavigationItemsRefs.value.forEach((item, index) => {
+  mainNavigationItemsRefs.value.forEach(async (item, index) => {
+    // await nextTick()
     const rect = item.getBoundingClientRect()
 
     const groupKey = item.dataset.groupKey
@@ -362,10 +385,14 @@ const initMainNavigationState = () => {
 }
 
 onMounted(async () => {
+  // If navigation is already initialized and loaded, skip the setup
+  if (navigationInitialized.value && navLoaded.value) {
+    return
+  }
+
   await initTemplateRefs().then(() => {
-    setTimeout(() => {
-      navLoaded.value = true
-    }, 100)
+    navLoaded.value = true
+    navigationInitialized.value = true
   })
 
   navigationDetailsRefs.value?.forEach((element, index) => {
@@ -465,7 +492,7 @@ watch(
       }
 
       .main-navigation-item {
-        width: var(--_main-navigation-item-width);
+        /* width: var(--_main-navigation-item-width); */
         overflow: hidden;
         transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
         padding-block: var(--_link-focus-visible-outline-width);
@@ -478,7 +505,7 @@ watch(
           color: inherit;
           text-decoration: none;
           margin-inline-start: 0;
-          transition: var(--_link-visibility-transition);
+          /* transition: var(--_link-visibility-transition); */
 
           padding-block: var(--_link-padding-block);
           padding-inline: var(--_link-padding-inline);
@@ -496,7 +523,7 @@ watch(
           --_icon-transform: scaleY(1);
 
           margin-inline-start: 0;
-          transition: var(--_link-visibility-transition);
+          /* transition: var(--_link-visibility-transition); */
 
           &[open] {
             --_icon-transform: scaleY(-1);

package/app/composables/useNavigationState.ts

@@ -0,0 +1,26 @@
+import type { IFlooredRect } from "@/types/responsiveHeader"
+
+export const useNavigationState = () => {
+  // Simple reactive refs that persist across route changes using useState
+  const navLoaded = useState<boolean>("nav-loaded", () => false)
+  const navigationInitialized = useState<boolean>("nav-initialized", () => false)
+
+  // Navigation rects cache
+  const navigationWrapperRects = useState<IFlooredRect | null>("nav-wrapper-rects", () => null)
+  const secondaryNavRects = useState<IFlooredRect | null>("secondary-nav-rects", () => null)
+
+  const clearNavigationCache = () => {
+    navLoaded.value = false
+    navigationInitialized.value = false
+    navigationWrapperRects.value = null
+    secondaryNavRects.value = null
+  }
+
+  return {
+    navLoaded,
+    navigationInitialized,
+    navigationWrapperRects,
+    secondaryNavRects,
+    clearNavigationCache,
+  }
+}

package/nuxt.config.ts

@@ -23,6 +23,7 @@ export default defineNuxtConfig({
       name: "layout",
       mode: "out-in",
     },
+    keepalive: true,
   },
   components: [
     {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "6.1.5",
+  "version": "6.1.7",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",