srcdev-nuxt-components 9.1.9 → 9.1.11

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;
@@ -221,6 +199,7 @@ const resetHoverNavToActive = () => {
 };
 
 const initNavDecorators = () => {
+  cachedNavLinks = []; // invalidate — list may have been re-rendered (collapse toggle)
   if (!navListRef.value) return;
   const links = getNavLinks();
   if (!links.length) return;
@@ -230,8 +209,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;
@@ -334,8 +312,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 +325,25 @@ 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 } =
+  useNavCollapse("site-nav-loaded", {
+    onResize: async () => {
+      await nextTick(); // wait for Vue to re-render after any isCollapsed change
       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();
+      if (isMenuOpen.value) {
+        setFinalPanelActivePositions(true);
+        setFinalPanelHoveredPositions(true);
+      }
+    },
+    onRouteChange: () => {
+      requestAnimationFrame(() => {
+        initNavDecorators();
+      });
+    },
+    onMounted: () => {
+      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 +529,6 @@ watch(
           color: var(--_link-hover-color);
           outline: none;
         }
-
       }
       li.is-active .site-nav-link {
         color: var(--_link-active-color);
@@ -781,7 +721,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/site-navigation/tests/__snapshots__/SiteNavigation.spec.ts.snap

@@ -3,7 +3,7 @@
 exports[`SiteNavigation > renders correct HTML structure 1`] = `
 "<nav class="site-navigation site-navigation--left is-loaded" aria-label="Site navigation">
   <ul class="site-nav-list" style="--_transition-duration: 0ms; --_x-active: 0px; --_width-active: NaN; --_x-hovered: 0px; --_width-hovered: NaN;">
-    <li class=""><a href="/" class="site-nav-link" data-nav-item="">
+    <li class="is-active"><a href="/" class="site-nav-link" data-nav-item="">
         <!--v-if--> Home
       </a></li>
     <li class=""><a href="/about" class="site-nav-link" data-nav-item="">

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

@@ -13,16 +13,21 @@
       v-if="!isCollapsed || !isLoaded"
       ref="navListRef"
       class="tab-nav-list"
-      @mousemove="handleNavMousemove"
       @mouseleave="hoveredItemHref = null"
     >
       <li
         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 }]"
+        @mouseenter="hoveredItemHref = item.href ?? null"
       >
-        <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
+        >
           <Icon v-if="item.iconName" :name="item.iconName" aria-hidden="true" />
           {{ item.text }}
         </NuxtLink>
@@ -32,7 +37,7 @@
     </ul>
 
     <InputButtonCore
-      v-if="isCollapsed && isLoaded"
+      v-if="showCollapsed"
       class="tab-nav-burger"
       :class="{ 'is-open': isMenuOpen }"
       variant="tertiary"
@@ -50,7 +55,7 @@
 
     <Teleport to="body">
       <div
-        v-if="isCollapsed && isLoaded"
+        v-if="showCollapsed"
         class="tab-nav-backdrop"
         :class="{ 'is-open': isMenuOpen }"
         aria-hidden="true"
@@ -59,7 +64,7 @@
     </Teleport>
 
     <div
-      v-if="isCollapsed && isLoaded"
+      v-if="showCollapsed"
       id="tab-nav-panel"
       class="tab-nav-panel"
       :class="{ 'is-open': isMenuOpen }"
@@ -85,7 +90,6 @@
 </template>
 
 <script setup lang="ts">
-import { useResizeObserver, onClickOutside } from "@vueuse/core";
 import type { NavItemData } from "~/types/components";
 
 interface Props {
@@ -99,77 +103,11 @@ 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("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;
-};
-
-const toggleMenu = () => {
-  isMenuOpen.value = !isMenuOpen.value;
-};
-
-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 { navRef, navListRef, isCollapsed, isLoaded, isMenuOpen, isActiveItem, toggleMenu, closeMenu } =
+  useNavCollapse("tab-nav-loaded");
 
 const hoveredItemHref = ref<string | null>(null);
-
-const handleNavMousemove = (event: MouseEvent) => {
-  const li = (event.target as HTMLElement).closest<HTMLElement>("li[data-href]");
-  if (!li) return;
-  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 showCollapsed = computed(() => isCollapsed.value && isLoaded.value);
 
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
@@ -206,8 +144,7 @@ watch(
 
     /* Decorators — horizontal nav */
     --_decorator-hovered-bg: var(--tab-nav-decorator-hovered-bg, transparent);
-    /* --_decorator-indicator-color: var(--tab-nav-decorator-indicator-color, var(--slate-01, currentColor)); */
-    --_decorator-indicator-color: red;
+    --_decorator-indicator-color: var(--tab-nav-decorator-indicator-color, var(--slate-01, currentColor));
 
     /* Horizontal nav */
     --_link-color: var(--tab-nav-link-color, var(--slate-01, currentColor));

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="is-active"><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,82 @@
+import { useResizeObserver, onClickOutside } from "@vueuse/core";
+
+interface NavCollapseOptions {
+  onResize?: () => void;
+  onRouteChange?: () => void;
+  onMounted?: () => void;
+}
+
+export const useNavCollapse = (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);
+
+  // 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;
+  };
+
+  // useRoute() in Nuxt is SSR-aware — route.path is consistent on server and client,
+  // so isActiveItem can be used directly without a isMounted guard.
+  const route = useRoute();
+
+  const activeHref = computed(() => route.path);
+  const isActiveItem = (href?: string) => href === route.path;
+
+  watch(
+    () => route.path,
+    () => {
+      closeMenu();
+      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();
+    options.onMounted?.();
+  });
+
+  return {
+    navRef,
+    navListRef,
+    isCollapsed,
+    isLoaded,
+    isMenuOpen,
+    activeHref,
+    checkOverflow,
+    toggleMenu,
+    closeMenu,
+    isActiveItem,
+  };
+};

package/package.json

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