srcdev-nuxt-components 1.0.4 → 1.1.1

package/components/presentation/tabs/TabsCore.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="tabs">
+  <div class="tabs-core" :class="`axis-${axis}`">
     <ul role="tablist" aria-labelledby="channel-name" ref="tabsNavRef" @mouseleave="resetHoverToActivePosition()" class="tabs-list" :class="[elementClasses]">
       <li v-for="(index, key) in navItems" :key="key">
         <button
           @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,14 @@ const props = defineProps({
     type: String as PropType<string>,
     default: 'button',
   },
+  axis: {
+    type: String as PropType<'x' | 'y'>,
+    default: 'x',
+  },
+  transitionDuration: {
+    type: Number as PropType<number>,
+    default: 200,
+  },
   navItems: {
     type: Array as PropType<ITabNav[]>,
     required: true,
@@ -59,7 +67,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(props.axis, tabsNavRef, tabsContentRefs, props.transitionDuration);
 
 onMounted(() => {
   initNavDecorators();
@@ -67,7 +75,7 @@ onMounted(() => {
 </script>
 
 <style lang="css">
-.tabs {
+.tabs-core {
   /*
   * CSS var within /assets/styles/components/tabs.css
   */
@@ -104,7 +112,7 @@ onMounted(() => {
       bottom: 0;
       top: 0;
       scale: var(--_width-hovered, 0.125) 1;
-      translate: var(--_left-hovered, 0) 0;
+      translate: var(--_x-hovered, 0) 0;
       transform-origin: left;
       transition: scale var(--_transition-duration), translate var(--_transition-duration);
       z-index: 1;
@@ -118,7 +126,7 @@ onMounted(() => {
       bottom: 0;
       top: 0;
       scale: var(--_width-active, 0.125) 1;
-      translate: var(--_left-active, 0) 0;
+      translate: var(--_x-active, 0) 0;
       transform-origin: left;
       transition: scale var(--_transition-duration), translate var(--_transition-duration);
       z-index: 2;
@@ -131,7 +139,7 @@ onMounted(() => {
       right: 0;
       bottom: 0;
       scale: var(--_width-active, 0.125) 1;
-      translate: var(--_left-active, 0) 0;
+      translate: var(--_x-active, 0) 0;
       transform-origin: left;
       transition: scale var(--_transition-duration), translate var(--_transition-duration);
       z-index: 3;
@@ -140,7 +148,7 @@ onMounted(() => {
     .tabs-list-item {
       opacity: 0.7;
       position: relative;
-      transition: color 0.2s;
+      transition: color 100ms;
       z-index: 4;
 
       &:hover {
@@ -181,12 +189,17 @@ onMounted(() => {
       padding: 1em 2em;
 
       &:hover {
+        /* background: var(--_tabs-hovered-bg); */
         color: var(--_tabs-hovered-text);
       }
 
       &[aria-selected='true'] {
         color: var(--_tabs-active-text);
       }
+
+      &.transitioning {
+        color: var(--_tabs-hovered-text);
+      }
     }
   }
 
@@ -218,4 +231,78 @@ onMounted(() => {
     } */
   }
 }
+
+/*
+* Deal with axis-y
+**/
+
+.tabs-core {
+  &.axis-y {
+    display: flex;
+    flex-direction: row;
+    gap: 2em;
+
+    .tabs-list {
+      flex-direction: column;
+
+      border-bottom: initial;
+      border-left: var(--_tabs-border-bottom);
+      position: relative;
+
+      .tabs-list-item {
+        text-align: left;
+        width: 100%;
+
+        /* &:hover {
+          color: var(--_tabs-hovered-text);
+        }
+
+        &[aria-selected='true'] {
+          color: var(--_tabs-active-text);
+        }
+
+        &.transitioning {
+          color: var(--_tabs-hovered-text);
+        } */
+      }
+
+      .nav__hovered {
+        left: 0;
+        right: initial;
+        bottom: initial;
+        top: 0;
+        height: var(--_y-height);
+        translate: 0 var(--_y-hovered, 0);
+        transform-origin: top;
+        width: var(--_y-width);
+      }
+
+      .nav__active {
+        left: 0;
+        right: initial;
+        bottom: initial;
+        top: 0;
+        height: var(--_y-height);
+        translate: 0 var(--_y-active, 0);
+        transform-origin: top;
+        width: var(--_y-width);
+      }
+
+      .nav__active-indicator {
+        left: 0;
+        right: initial;
+        bottom: initial;
+        top: 0;
+        height: var(--_y-height);
+        scale: var(--_width-active, 0.125) 1;
+        translate: 0 var(--_y-active, 0);
+        transform-origin: top;
+        width: 0.4em;
+      }
+    }
+    .tab-content-wrapper {
+      flex-grow: 1;
+    }
+  }
+}
 </style>

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 = (axis: string, 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,20 +79,59 @@ 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 tabsNavRefYPosition = tabsNavRef.value?.getBoundingClientRect().top || 0;
     const newTabWidth = currentHoveredTab.value && tabsNavRef.value ? currentHoveredTab.value.offsetWidth / tabsNavRef.value.offsetWidth : 0;
     tabsNavRef.value?.style.setProperty('--_transition-duration', setDuration + 'ms');
-    tabsNavRef.value?.style.setProperty('--_left-hovered', currentHoveredTab.value?.offsetLeft + 'px');
+    tabsNavRef.value?.style.setProperty('--_x-hovered', currentHoveredTab.value?.offsetLeft + 'px');
+
     tabsNavRef.value?.style.setProperty('--_width-hovered', newTabWidth?.toString());
+    tabsNavRef.value?.style.setProperty('--_y-hovered', currentHoveredTab.value?.offsetTop + 'px');
+    tabsNavRef.value?.style.setProperty('--_y-height', currentHoveredTab.value?.offsetHeight + 'px');
+    tabsNavRef.value?.style.setProperty('--_y-width', currentHoveredTab.value?.offsetWidth + 'px');
   };
 
   const setFinalActivePositions = (resized: boolean = false) => {
     const setDuration = resized ? 0 : duration;
     const newTabWidth = currentActiveTab.value && tabsNavRef.value ? currentActiveTab.value.offsetWidth / tabsNavRef.value.offsetWidth : 0;
     tabsNavRef.value?.style.setProperty('--_transition-duration', setDuration + 'ms');
-    tabsNavRef.value?.style.setProperty('--_left-active', currentActiveTab.value?.offsetLeft + 'px');
+    tabsNavRef.value?.style.setProperty('--_x-active', currentActiveTab.value?.offsetLeft + 'px');
     tabsNavRef.value?.style.setProperty('--_width-active', newTabWidth?.toString());
+    tabsNavRef.value?.style.setProperty('--_y-active', currentActiveTab.value?.offsetTop + 'px');
+    tabsNavRef.value?.style.setProperty('--_y-height', currentActiveTab.value?.offsetHeight + 'px');
+    tabsNavRef.value?.style.setProperty('--_y-width', currentActiveTab.value?.offsetWidth + 'px');
   };
 
   const moveActiveIndicator = () => {
@@ -105,11 +144,13 @@ const useTabs = (tabsNavRef: Ref<HTMLElement | null>, tabsContentRefs: Ref<HTMLE
       transitionWidth = currentActiveTab.value && previousActiveTab.value ? currentActiveTab.value.offsetLeft + currentActiveTab.value.offsetWidth - previousActiveTab.value.offsetLeft : 0;
     } else {
       transitionWidth = previousActiveTab.value && currentActiveTab.value ? previousActiveTab.value.offsetLeft + previousActiveTab.value.offsetWidth - currentActiveTab.value.offsetLeft : 0;
-      tabsNavRef.value?.style.setProperty('--_left-active', currentActiveTab.value ? currentActiveTab.value.offsetLeft + 'px' : '0');
+      tabsNavRef.value?.style.setProperty('--_x-active', currentActiveTab.value ? currentActiveTab.value.offsetLeft + 'px' : '0');
     }
 
     tabsNavRef.value?.style.setProperty('--_width-active', String(transitionWidth / tabsNavRef.value.offsetWidth));
 
+    handleTransitioningClass(duration);
+
     setTimeout(() => {
       setFinalActivePositions();
     }, Math.floor(duration + 20));
@@ -125,11 +166,13 @@ const useTabs = (tabsNavRef: Ref<HTMLElement | null>, tabsContentRefs: Ref<HTMLE
       transitionWidth = currentHoveredTab.value && previousHoveredTab.value ? currentHoveredTab.value.offsetLeft + currentHoveredTab.value.offsetWidth - previousHoveredTab.value.offsetLeft : 0;
     } else {
       transitionWidth = previousHoveredTab.value && currentHoveredTab.value ? previousHoveredTab.value.offsetLeft + previousHoveredTab.value.offsetWidth - currentHoveredTab.value.offsetLeft : 0;
-      tabsNavRef.value?.style.setProperty('--_left-hovered', currentHoveredTab.value ? currentHoveredTab.value.offsetLeft + 'px' : '0');
+      tabsNavRef.value?.style.setProperty('--_x-hovered', currentHoveredTab.value ? currentHoveredTab.value.offsetLeft + 'px' : '0');
     }
 
     tabsNavRef.value?.style.setProperty('--_width-hovered', String(transitionWidth / tabsNavRef.value.offsetWidth));
 
+    handleTransitioningClass(duration);
+
     setTimeout(() => {
       setFinalHoveredPositions();
     }, Math.floor(duration + 20));
@@ -142,10 +185,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.1",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",