srcdev-nuxt-components 1.0.4 → 1.1.0

package/components/presentation/tabs/TabsCore.vue

@@ -6,7 +6,7 @@
           @click.prevent="navItemClicked($event)"
           @mouseover="navItemHovered($event)"
           :id="`tab-${key}-trigger`"
-          :data-tab-index="index"
+          :data-tab-index="key"
           data-nav-item
           role="tab"
           aria-selected="false"
@@ -32,6 +32,10 @@ const props = defineProps({
     type: String as PropType<string>,
     default: 'button',
   },
+  transitionDuration: {
+    type: Number as PropType<number>,
+    default: 200,
+  },
   navItems: {
     type: Array as PropType<ITabNav[]>,
     required: true,
@@ -59,7 +63,7 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 const tabsNavRef = ref<HTMLElement | null>(null);
 const tabsContentRefs = ref<HTMLElement[] | null>(null);
 
-const { initNavDecorators, navItemClicked, navItemHovered, resetHoverToActivePosition } = useTabs(tabsNavRef, tabsContentRefs);
+const { initNavDecorators, navItemClicked, navItemHovered, resetHoverToActivePosition } = useTabs(tabsNavRef, tabsContentRefs, props.transitionDuration);
 
 onMounted(() => {
   initNavDecorators();
@@ -140,7 +144,7 @@ onMounted(() => {
     .tabs-list-item {
       opacity: 0.7;
       position: relative;
-      transition: color 0.2s;
+      transition: color 100ms;
       z-index: 4;
 
       &:hover {
@@ -187,6 +191,10 @@ onMounted(() => {
       &[aria-selected='true'] {
         color: var(--_tabs-active-text);
       }
+
+      &.transitioning {
+        color: var(--_tabs-hovered-text);
+      }
     }
   }
 

package/composables/useTabs.ts

@@ -1,6 +1,6 @@
 import { useResizeObserver } from '@vueuse/core';
 
-const useTabs = (tabsNavRef: Ref<HTMLElement | null>, tabsContentRefs: Ref<HTMLElement[] | null>, duration: number = 200) => {
+const useTabs = (tabsNavRef: Ref<HTMLElement | null>, tabsContentRefs: Ref<HTMLElement[] | null>, duration: number) => {
   const navItems = ref<HTMLElement[] | null>(null);
   const previousActiveTab = useState<HTMLElement | null>('previousActiveTab', () => null);
   const currentActiveTab = ref<HTMLElement>();
@@ -79,6 +79,37 @@ const useTabs = (tabsNavRef: Ref<HTMLElement | null>, tabsContentRefs: Ref<HTMLE
     setActiveTabContent();
   };
 
+  const handleTransitioningClass = (transitionDuration: number = 200) => {
+    if (previousHoveredTab.value && currentHoveredTab.value) {
+      const newTabPosition = previousHoveredTab.value.compareDocumentPosition(currentHoveredTab.value);
+      const navItemsArray = navItems.value || [];
+
+      const timeout = Math.floor(transitionDuration / Math.abs(navItemsArray.indexOf(currentHoveredTab.value) - navItemsArray.indexOf(previousHoveredTab.value)));
+
+      if (newTabPosition === 4) {
+        for (let i = navItemsArray.indexOf(previousHoveredTab.value); i < navItemsArray.indexOf(currentHoveredTab.value); i++) {
+          navItemsArray[i].classList.add('transitioning');
+          if (i >= navItemsArray.indexOf(previousHoveredTab.value) && i < navItemsArray.indexOf(currentHoveredTab.value)) {
+            setTimeout(() => {
+              navItemsArray[i].classList.remove('transitioning');
+              // }, timeout * (i - navItemsArray.indexOf(previousHoveredTab.value) - 1));
+            }, duration * 1.5);
+          }
+        }
+      } else {
+        for (let i = navItemsArray.indexOf(previousHoveredTab.value); i > navItemsArray.indexOf(currentHoveredTab.value); i--) {
+          navItemsArray[i].classList.add('transitioning');
+          if (i <= navItemsArray.indexOf(previousHoveredTab.value) && i > navItemsArray.indexOf(currentHoveredTab.value)) {
+            setTimeout(() => {
+              navItemsArray[i].classList.remove('transitioning');
+              // }, timeout * (i - navItemsArray.indexOf(previousHoveredTab.value) - 1));
+            }, duration * 1.5);
+          }
+        }
+      }
+    }
+  };
+
   const setFinalHoveredPositions = (resized: boolean = false) => {
     const setDuration = resized ? 0 : duration;
     const newTabWidth = currentHoveredTab.value && tabsNavRef.value ? currentHoveredTab.value.offsetWidth / tabsNavRef.value.offsetWidth : 0;
@@ -110,6 +141,8 @@ const useTabs = (tabsNavRef: Ref<HTMLElement | null>, tabsContentRefs: Ref<HTMLE
 
     tabsNavRef.value?.style.setProperty('--_width-active', String(transitionWidth / tabsNavRef.value.offsetWidth));
 
+    handleTransitioningClass(duration);
+
     setTimeout(() => {
       setFinalActivePositions();
     }, Math.floor(duration + 20));
@@ -130,6 +163,8 @@ const useTabs = (tabsNavRef: Ref<HTMLElement | null>, tabsContentRefs: Ref<HTMLE
 
     tabsNavRef.value?.style.setProperty('--_width-hovered', String(transitionWidth / tabsNavRef.value.offsetWidth));
 
+    handleTransitioningClass(duration);
+
     setTimeout(() => {
       setFinalHoveredPositions();
     }, Math.floor(duration + 20));
@@ -142,10 +177,6 @@ const useTabs = (tabsNavRef: Ref<HTMLElement | null>, tabsContentRefs: Ref<HTMLE
     });
   };
 
-  const animationRunning = (running: boolean) => {
-    console.log('animationRunning', running);
-  };
-
   useResizeObserver(tabsNavRef, () => {
     setFinalActivePositions(true);
     setFinalHoveredPositions(true);

package/package.json

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