srcdev-nuxt-components 0.0.19 → 0.0.20

package/composables/useNavDecoration.ts

@@ -2,18 +2,30 @@ import { useResizeObserver } from '@vueuse/core';
 
 const useNavDecoration = (navContainerRef: Ref<HTMLElement | null>, duration: number = 200) => {
   const navItems = ref<HTMLElement[] | null>(null);
-  const previousActiveTab = ref<HTMLElement>();
+  const previousActiveTab = useState<HTMLElement | null>('previousActiveTab', () => null);
   const currentActiveTab = ref<HTMLElement>();
 
   const previousHoveredTab = ref<HTMLElement>();
   const currentHoveredTab = ref<HTMLElement>();
+  const tagName = ref<string>();
 
   const initNavDecorators = () => {
     navItems.value = navContainerRef.value ? (Array.from(navContainerRef.value.querySelectorAll('[data-nav-item')) as HTMLElement[]) : [];
-    previousActiveTab.value = navItems.value[0];
-    currentActiveTab.value = navItems.value[0];
-    previousHoveredTab.value = navItems.value[0];
-    currentHoveredTab.value = navItems.value[0];
+    tagName.value = navItems.value[0].tagName.toLowerCase();
+
+    const activeIndex = ref(0);
+
+    // Test if navItems are hyperlinks
+    if (navItems.value[0].tagName.toLowerCase() === 'a') {
+      // Find index of element with class "router-link-active"
+      activeIndex.value = navItems.value.findIndex((el) => el.classList.contains('router-link-active'));
+    }
+
+    currentActiveTab.value = navItems.value[activeIndex.value];
+    currentHoveredTab.value = navItems.value[activeIndex.value];
+
+    previousActiveTab.value = navItems.value[activeIndex.value];
+    previousHoveredTab.value = navItems.value[activeIndex.value];
 
     addNavDecorators();
   };
@@ -49,7 +61,7 @@ const useNavDecoration = (navContainerRef: Ref<HTMLElement | null>, duration: nu
   const navItemClicked = (event: Event) => {
     const target = event.target as HTMLElement;
 
-    previousActiveTab.value = currentActiveTab.value;
+    previousActiveTab.value = currentActiveTab.value || null;
     currentActiveTab.value = target;
 
     navItems.value?.forEach((tab) => {

package/nuxt.config.ts

@@ -10,6 +10,14 @@ export default defineNuxtConfig({
       titleTemplate: '%s - Nuxt Components Layer',
       meta: [{ charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }],
     },
+    pageTransition: {
+      name: 'page',
+      mode: 'out-in',
+    },
+    layoutTransition: {
+      name: 'layout',
+      mode: 'out-in',
+    },
   },
   components: [
     {

package/package.json

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