srcdev-nuxt-components 9.1.9 → 9.1.10

package/.claude/settings.json

@@ -16,7 +16,9 @@
       "Bash(npx tsc:*)",
       "Bash(npx vitest:*)",
       "Bash(git show:*)",
-      "Edit(/.claude/skills/components/**)"
+      "Edit(/.claude/skills/components/**)",
+      "Bash(npx nuxi:*)",
+      "Bash(node -e \"const t = require\\('/Users/simoncornforth/websites/nuxt-components/node_modules/pinia-plugin-persistedstate'\\); console.log\\(Object.keys\\(t\\)\\)\")"
     ],
     "additionalDirectories": [
       "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms/content-wrappers/content-width",

package/app/components/02.molecules/navigation/site-navigation/SiteNavigation.vue

@@ -17,7 +17,11 @@
       @mouseleave="resetHoverNavToActive"
       @mouseover="handleNavHover"
     >
-      <li v-for="item in navItemData.main" :key="item.href" :class="[item.cssName, { 'is-active': activeHref === item.href }]">
+      <li
+        v-for="item in navItemData.main"
+        :key="item.href"
+        :class="[item.cssName, { 'is-active': isActiveItem(item.href) }]"
+      >
         <NuxtLink :href="item.href" :external="item.isExternal || undefined" class="site-nav-link" data-nav-item>
           <Icon v-if="item.iconName" :name="item.iconName" aria-hidden="true" />
           {{ item.text }}
@@ -70,7 +74,11 @@
           @mouseover="handlePanelHover"
           @mouseleave="resetHoverPanelToActive"
         >
-          <li v-for="item in navItemData.main" :key="item.href" :class="[item.cssName, { 'is-active': activeHref === item.href }]">
+          <li
+            v-for="item in navItemData.main"
+            :key="item.href"
+            :class="[item.cssName, { 'is-active': isActiveItem(item.href) }]"
+          >
             <NuxtLink
               :href="item.href"
               :external="item.isExternal || undefined"
@@ -92,7 +100,6 @@
 </template>
 
 <script setup lang="ts">
-import { useResizeObserver, onClickOutside } from "@vueuse/core";
 import type { NavItemData } from "~/types/components";
 
 interface Props {
@@ -106,35 +113,6 @@ const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
 });
 
-const navRef = ref<HTMLElement | null>(null);
-const navListRef = ref<HTMLUListElement | null>(null);
-
-const isCollapsed = ref(false);
-const isLoaded = useState("site-nav-loaded", () => false);
-const isMenuOpen = ref(false);
-
-// Stored natural width of the list — used when the list is not in the DOM
-let navListNaturalWidth = 0;
-
-const checkOverflow = () => {
-  if (!navRef.value) return;
-
-  // Measure and store the list width whenever it's in the DOM
-  if (navListRef.value) {
-    navListNaturalWidth = navListRef.value.scrollWidth;
-  }
-
-  isCollapsed.value = navListNaturalWidth > navRef.value.clientWidth;
-};
-
-const toggleMenu = () => {
-  isMenuOpen.value = !isMenuOpen.value;
-};
-
-const closeMenu = () => {
-  isMenuOpen.value = false;
-};
-
 // ─── Nav decorators (active / hover indicators) ─────────────────────────────
 
 const NAV_DECORATOR_DURATION = 200;
@@ -200,6 +178,13 @@ const moveNavHoveredIndicator = () => {
 const handleNavLinkClick = (event: MouseEvent) => {
   const target = (event.target as HTMLElement).closest<HTMLElement>("[data-nav-item]");
   if (!target) return;
+
+  // Update store with clicked href for reliable active state tracking
+  const href = target.getAttribute("href");
+  if (href) {
+    navigationStore.handleNavLinkClick(href);
+  }
+
   currentActiveNavLink = target;
   currentHoveredNavLink = target;
   previousHoveredNavLink = target;
@@ -230,8 +215,7 @@ const initNavDecorators = () => {
     navSnapTimer = null;
   }
 
-  const activeLink =
-    links.find((el) => el.getAttribute("href") === activeHref.value) ?? links[0];
+  const activeLink = links.find((el) => el.getAttribute("href") === activeHref.value) ?? links[0];
   if (!activeLink) return;
 
   currentActiveNavLink = activeLink;
@@ -303,6 +287,13 @@ const movePanelHoveredIndicator = () => {
 const handlePanelLinkClick = (event: MouseEvent) => {
   const target = (event.target as HTMLElement).closest<HTMLElement>("[data-panel-nav-item]");
   if (!target) return;
+
+  // Update store with clicked href for reliable active state tracking
+  const href = target.getAttribute("href");
+  if (href) {
+    navigationStore.handleNavLinkClick(href);
+  }
+
   currentActivePanelLink = target;
   currentHoveredPanelLink = target;
   previousHoveredPanelLink = target;
@@ -334,8 +325,7 @@ const initPanelDecorators = () => {
     panelSnapTimer = null;
   }
 
-  const activeLink =
-    links.find((el) => el.getAttribute("href") === activeHref.value) ?? links[0];
+  const activeLink = links.find((el) => el.getAttribute("href") === activeHref.value) ?? links[0];
   if (!activeLink) return;
 
   currentActivePanelLink = activeLink;
@@ -348,61 +338,23 @@ const initPanelDecorators = () => {
 
 // ─────────────────────────────────────────────────────────────────────────────
 
-// Compute active href from route directly — avoids racing against Vue Router's
-// class application timing when reading router-link-exact-active from the DOM.
-const route = useRoute();
-
-const activeHref = computed(() => {
-  const items = props.navItemData.main ?? [];
-  const exact = items.find((item) => item.href && route.path === item.href);
-  if (exact) return exact.href ?? null;
-  return (
-    items
-      .filter((item) => item.href && route.path.startsWith(item.href + "/"))
-      .sort((a, b) => (b.href?.length ?? 0) - (a.href?.length ?? 0))[0]?.href ?? null
-  );
-});
-watch(
-  () => route.path,
-  () => {
-    closeMenu();
-    requestAnimationFrame(() => {
+const { navRef, navListRef, isCollapsed, isLoaded, isMenuOpen, activeHref, isActiveItem, toggleMenu, closeMenu, navigationStore } =
+  useNavCollapse(props.navItemData, "site-nav-loaded", {
+    onResize: () => {
+      setFinalNavActivePositions(true);
+      setFinalNavHoveredPositions(true);
+      setFinalPanelActivePositions(true);
+      setFinalPanelHoveredPositions(true);
+    },
+    onRouteChange: () => {
+      requestAnimationFrame(() => {
+        initNavDecorators();
+      });
+    },
+    onMounted: () => {
       initNavDecorators();
-    });
-  },
-  { flush: "post" }
-);
-
-useResizeObserver(navRef, () => {
-  checkOverflow();
-  if (!isCollapsed.value) closeMenu();
-  setFinalNavActivePositions(true);
-  setFinalNavHoveredPositions(true);
-  setFinalPanelActivePositions(true);
-  setFinalPanelHoveredPositions(true);
-});
-
-onClickOutside(navRef, closeMenu);
-
-const router = useRouter();
-
-onMounted(async () => {
-  await nextTick();
-  checkOverflow();
-  isLoaded.value = true;
-  await router.isReady();
-  requestAnimationFrame(() => {
-    initNavDecorators();
+    },
   });
-});
-
-watch(isCollapsed, async (collapsed) => {
-  if (!collapsed) {
-    cachedNavLinks = []; // nav <ul> was re-rendered — invalidate cache
-    await nextTick();
-    initNavDecorators();
-  }
-});
 
 watch(isMenuOpen, async (open) => {
   if (open) {
@@ -588,7 +540,6 @@ watch(
           color: var(--_link-hover-color);
           outline: none;
         }
-
       }
       li.is-active .site-nav-link {
         color: var(--_link-active-color);
@@ -781,7 +732,6 @@ watch(
             color: var(--_panel-link-hover-color);
             outline: none;
           }
-
         }
         li.is-active .site-nav-panel-link {
           color: var(--_panel-link-active-color);

package/app/components/02.molecules/navigation/tab-navigation/TabNavigation.vue

@@ -20,9 +20,15 @@
         v-for="item in navItemData.main"
         :key="item.href"
         :data-href="item.href"
-        :class="[item.cssName, { 'is-active': activeHref === item.href, 'is-hovered': hoveredItemHref === item.href }]"
+        :class="[item.cssName, { 'is-active': isActiveItem(item.href), 'is-hovered': hoveredItemHref === item.href }]"
       >
-        <NuxtLink :href="item.href" :external="item.isExternal || undefined" class="tab-nav-link" data-nav-item>
+        <NuxtLink
+          :href="item.href"
+          :external="item.isExternal || undefined"
+          class="tab-nav-link"
+          data-nav-item
+          @click="handleNavLinkClick"
+        >
           <Icon v-if="item.iconName" :name="item.iconName" aria-hidden="true" />
           {{ item.text }}
         </NuxtLink>
@@ -72,7 +78,7 @@
               :href="item.href"
               :external="item.isExternal || undefined"
               class="tab-nav-panel-link"
-              @click="closeMenu"
+              @click="handlePanelLinkClick"
             >
               <Icon v-if="item.iconName" :name="item.iconName" aria-hidden="true" />
               {{ item.text }}
@@ -85,7 +91,6 @@
 </template>
 
 <script setup lang="ts">
-import { useResizeObserver, onClickOutside } from "@vueuse/core";
 import type { NavItemData } from "~/types/components";
 
 interface Props {
@@ -99,49 +104,26 @@ const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
 });
 
-const navRef = ref<HTMLElement | null>(null);
-const navListRef = ref<HTMLUListElement | null>(null);
+const { navRef, navListRef, isCollapsed, isLoaded, isMenuOpen, isActiveItem, toggleMenu, closeMenu, navigationStore } =
+  useNavCollapse(props.navItemData, "tab-nav-loaded");
 
-const isCollapsed = ref(false);
-const isLoaded = useState("tab-nav-loaded", () => false);
-const isMenuOpen = ref(false);
-
-// Stored natural width of the list — used when the list is not in the DOM
-let navListNaturalWidth = 0;
-
-const checkOverflow = () => {
-  if (!navRef.value) return;
-
-  if (navListRef.value) {
-    navListNaturalWidth = navListRef.value.scrollWidth;
-  }
-
-  isCollapsed.value = navListNaturalWidth > navRef.value.clientWidth;
+// Handle navigation link clicks to update store
+const handleNavLinkClick = (event: MouseEvent) => {
+  const target = (event.target as HTMLElement).closest<HTMLElement>("[href]");
+  if (!target) return;
+  const href = target.getAttribute("href");
+  if (href) navigationStore.handleNavLinkClick(href);
 };
 
-const toggleMenu = () => {
-  isMenuOpen.value = !isMenuOpen.value;
+// Handle panel link clicks to update store and close menu
+const handlePanelLinkClick = (event: MouseEvent) => {
+  const target = (event.target as HTMLElement).closest<HTMLElement>("[href]");
+  if (!target) return;
+  const href = target.getAttribute("href");
+  if (href) navigationStore.handleNavLinkClick(href);
+  closeMenu();
 };
 
-const closeMenu = () => {
-  isMenuOpen.value = false;
-};
-
-const route = useRoute();
-
-// Compute the active nav item href from the current route.
-// Prefers an exact match; falls back to the longest prefix match.
-const activeHref = computed(() => {
-  const items = props.navItemData.main ?? [];
-  const exact = items.find((item) => item.href && route.path === item.href);
-  if (exact) return exact.href ?? null;
-  return (
-    items
-      .filter((item) => item.href && route.path.startsWith(item.href + "/"))
-      .sort((a, b) => (b.href?.length ?? 0) - (a.href?.length ?? 0))[0]?.href ?? null
-  );
-});
-
 const hoveredItemHref = ref<string | null>(null);
 
 const handleNavMousemove = (event: MouseEvent) => {
@@ -150,27 +132,6 @@ const handleNavMousemove = (event: MouseEvent) => {
   hoveredItemHref.value = li.dataset.href ?? null;
 };
 
-watch(
-  () => route.path,
-  () => {
-    closeMenu();
-  },
-  { flush: "post" }
-);
-
-useResizeObserver(navRef, () => {
-  checkOverflow();
-  if (!isCollapsed.value) closeMenu();
-});
-
-onClickOutside(navRef, closeMenu);
-
-onMounted(async () => {
-  await nextTick();
-  checkOverflow();
-  isLoaded.value = true;
-});
-
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 watch(

package/app/components/02.molecules/navigation/tab-navigation/tests/__snapshots__/TabNavigation.spec.ts.snap

@@ -0,0 +1,27 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`TabNavigation > renders correct HTML structure 1`] = `
+"<nav class="tab-navigation tab-navigation--left is-loaded" aria-label="Site navigation">
+  <ul class="tab-nav-list">
+    <li data-href="/" class=""><a href="/" class="tab-nav-link" data-nav-item="">
+        <!--v-if--> Home
+      </a></li>
+    <li data-href="/about" class=""><a href="/about" class="tab-nav-link" data-nav-item="">
+        <!--v-if--> About
+      </a></li>
+    <li data-href="/contact" class=""><a href="/contact" class="tab-nav-link" data-nav-item="">
+        <!--v-if--> Contact
+      </a></li>
+    <li aria-hidden="true" role="none" class="nav-indicator-li">
+      <div class="nav__hovered"></div>
+    </li>
+    <li aria-hidden="true" role="none" class="nav-indicator-li">
+      <div class="nav__active-indicator"></div>
+    </li>
+  </ul>
+  <!--v-if-->
+  <!--teleport start-->
+  <!--teleport end-->
+  <!--v-if-->
+</nav>"
+`;

package/app/composables/useNavCollapse.ts

@@ -0,0 +1,90 @@
+import { useResizeObserver, onClickOutside } from "@vueuse/core";
+import type { NavItemData } from "~/types/components";
+
+interface NavCollapseOptions {
+  onResize?: () => void;
+  onRouteChange?: () => void;
+  onMounted?: () => void;
+}
+
+export const useNavCollapse = (navItemData: NavItemData, stateKey: string, options: NavCollapseOptions = {}) => {
+  const navRef = ref<HTMLElement | null>(null);
+  const navListRef = ref<HTMLUListElement | null>(null);
+
+  const isCollapsed = ref(false);
+  const isLoaded = useState(stateKey, () => false);
+  const isMenuOpen = ref(false);
+  const isMounted = ref(false);
+
+  // Stored natural width of the list — used when the list is not in the DOM
+  let navListNaturalWidth = 0;
+
+  const checkOverflow = () => {
+    if (!navRef.value) return;
+    if (navListRef.value) {
+      navListNaturalWidth = navListRef.value.scrollWidth;
+    }
+    isCollapsed.value = navListNaturalWidth > navRef.value.clientWidth;
+  };
+
+  const toggleMenu = () => {
+    isMenuOpen.value = !isMenuOpen.value;
+  };
+
+  const closeMenu = () => {
+    isMenuOpen.value = false;
+  };
+
+  const navigationStore = useNavigationStore();
+  const route = useRoute();
+
+  const activeHref = computed(() => navigationStore.currentActiveHref);
+
+  // Client-side only active state check to prevent hydration mismatch
+  const isActiveItem = (href?: string) => isMounted.value && activeHref.value === href;
+
+  watch(
+    () => route.path,
+    (newPath) => {
+      closeMenu();
+      navigationStore.syncWithRoute(navItemData.main ?? [], newPath);
+      options.onRouteChange?.();
+    },
+    { flush: "post" }
+  );
+
+  useResizeObserver(navRef, () => {
+    checkOverflow();
+    if (!isCollapsed.value) closeMenu();
+    options.onResize?.();
+  });
+
+  onClickOutside(navRef, closeMenu);
+
+  const router = useRouter();
+
+  onMounted(async () => {
+    await nextTick();
+    checkOverflow();
+    isLoaded.value = true;
+    await router.isReady();
+    navigationStore.initializeFromRoute(navItemData.main ?? [], route.path);
+    isMounted.value = true;
+    options.onMounted?.();
+  });
+
+  return {
+    navRef,
+    navListRef,
+    isCollapsed,
+    isLoaded,
+    isMenuOpen,
+    isMounted,
+    activeHref,
+    checkOverflow,
+    toggleMenu,
+    closeMenu,
+    isActiveItem,
+    navigationStore,
+  };
+};

package/app/stores/useNavigationStore.ts

@@ -0,0 +1,113 @@
+export const useNavigationStore = defineStore(
+  "useNavigationStore",
+  () => {
+    // State
+    const activeHref = ref<string | null>(null);
+    const isInitialized = ref(false);
+
+    // Getters
+    const currentActiveHref = computed(() => activeHref.value);
+
+    // Actions
+    const setActiveHref = (href: string | null) => {
+      activeHref.value = href;
+    };
+
+    /**
+     * Initialize active href based on current route and navigation items
+     * Used on component mount to handle deep links and initial page loads
+     */
+    const initializeFromRoute = (navItems: Array<{ href?: string }>, routePath: string) => {
+      if (isInitialized.value) return;
+
+      const items = navItems.filter((item): item is { href: string } => Boolean(item.href));
+
+      // Try exact match first
+      const exact = items.find((item) => routePath === item.href);
+      if (exact) {
+        activeHref.value = exact.href;
+        isInitialized.value = true;
+        return;
+      }
+
+      // Fall back to longest prefix match
+      const prefixMatches = items
+        .filter((item) => routePath.startsWith(item.href + "/"))
+        .sort((a, b) => b.href.length - a.href.length);
+
+      if (prefixMatches.length > 0) {
+        activeHref.value = prefixMatches[0]!.href;
+      } else {
+        // Default to null if no matches (let component handle fallback)
+        activeHref.value = null;
+      }
+
+      isInitialized.value = true;
+    };
+
+    /**
+     * Update active href when user clicks a navigation link
+     * Provides explicit control over active state
+     */
+    const handleNavLinkClick = (href: string) => {
+      activeHref.value = href;
+    };
+
+    /**
+     * Sync with route changes (for programmatic navigation)
+     * Re-runs the route matching logic when route changes
+     */
+    const syncWithRoute = (navItems: Array<{ href?: string }>, routePath: string) => {
+      const items = navItems.filter((item): item is { href: string } => Boolean(item.href));
+
+      // Try exact match first
+      const exact = items.find((item) => routePath === item.href);
+      if (exact) {
+        activeHref.value = exact.href;
+        return;
+      }
+
+      // Fall back to longest prefix match
+      const prefixMatches = items
+        .filter((item) => routePath.startsWith(item.href + "/"))
+        .sort((a, b) => b.href.length - a.href.length);
+
+      if (prefixMatches.length > 0) {
+        activeHref.value = prefixMatches[0]!.href;
+      }
+      // Don't reset to null if no matches - preserve existing active state
+    };
+
+    /**
+     * Reset store state (useful for testing or when navigation data changes)
+     */
+    const reset = () => {
+      activeHref.value = null;
+      isInitialized.value = false;
+    };
+
+    return {
+      // State
+      activeHref,
+      isInitialized,
+
+      // Getters
+      currentActiveHref,
+
+      // Actions
+      setActiveHref,
+      initializeFromRoute,
+      handleNavLinkClick,
+      syncWithRoute,
+      reset,
+    };
+  },
+  {
+    persist: {
+      storage: piniaPluginPersistedstate.sessionStorage(),
+      // Only persist the active href, not initialization state
+      // (we want to re-initialize on page refresh to handle route changes)
+      pick: ["activeHref"],
+    },
+  }
+);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.1.9",
+  "version": "9.1.10",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",