srcdev-nuxt-components 1.1.0 → 1.1.1

package/components/presentation/tabs/TabsCore.vue

@@ -1,5 +1,5 @@
 <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
@@ -32,6 +32,10 @@ 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,
@@ -63,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, props.transitionDuration);
+const { initNavDecorators, navItemClicked, navItemHovered, resetHoverToActivePosition } = useTabs(props.axis, tabsNavRef, tabsContentRefs, props.transitionDuration);
 
 onMounted(() => {
   initNavDecorators();
@@ -71,7 +75,7 @@ onMounted(() => {
 </script>
 
 <style lang="css">
-.tabs {
+.tabs-core {
   /*
   * CSS var within /assets/styles/components/tabs.css
   */
@@ -108,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;
@@ -122,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;
@@ -135,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;
@@ -185,6 +189,7 @@ onMounted(() => {
       padding: 1em 2em;
 
       &:hover {
+        /* background: var(--_tabs-hovered-bg); */
         color: var(--_tabs-hovered-text);
       }
 
@@ -226,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) => {
+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>();
@@ -112,18 +112,26 @@ const useTabs = (tabsNavRef: Ref<HTMLElement | null>, tabsContentRefs: Ref<HTMLE
 
   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 = () => {
@@ -136,7 +144,7 @@ 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));
@@ -158,7 +166,7 @@ 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));

package/package.json

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