srcdev-nuxt-components 9.1.8 → 9.1.10

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.8",
+  "version": "9.1.10",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",