srcdev-nuxt-components 0.0.27 → 0.0.29

package/components/presentation/tabs/{Tabs.vue → TabsCore.vue}

@@ -1,19 +1,33 @@
 <template>
-  <ul role="tablist" aria-labelledby="channel-name" ref="navContainerRef" @mouseleave="resetHoverToActivePosition()" class="tabs-list" :class="[elementClasses]">
-    <li v-for="(item, index) in navItems" class="masonry-grid-ordered-item" ref="gridItemsRefs">
-      <button @click.prevent="navItemClicked($event)" @mouseover="navItemHovered($event)" :data-tab-index="index" data-nav-item role="tab" aria-selected="false" class="tabs-list-item">
-        {{ item.name }}
-      </button>
-    </li>
-  </ul>
+  <div class="tabs">
+    <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-nav-item
+          role="tab"
+          aria-selected="false"
+          class="tabs-list-item"
+        >
+          <slot :name="`tab-${key}-trigger`"></slot>
+        </button>
+      </li>
+    </ul>
+    <div class="tab-content-wrapper">
+      <div v-for="(item, key) in navItems" :key="key" class="tab-content" :aria-labelledby="`tab-${key}-trigger`" :id="`tab-${key}-content`" role="region" aria-hidden="true" ref="tabsContentRefs">
+        <div>
+          <slot :name="`tab-${key}-content`"></slot>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-interface INavLink {
-  action?: string;
-  name: string;
-  path?: string;
-}
+import type { ITabNav } from '@/types/types.tabs';
 
 const props = defineProps({
   tag: {
@@ -21,7 +35,7 @@ const props = defineProps({
     default: 'button',
   },
   navItems: {
-    type: Array as PropType<INavLink[]>,
+    type: Array as PropType<ITabNav[]>,
     required: true,
   },
   trackHover: {
@@ -44,9 +58,10 @@ const props = defineProps({
 
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
-const navContainerRef = ref<HTMLElement | null>(null);
+const tabsNavRef = ref<HTMLElement | null>(null);
+const tabsContentRefs = ref<HTMLElement[] | null>(null);
 
-const { initNavDecorators, navItemClicked, navItemHovered, resetHoverToActivePosition } = useNavDecoration(navContainerRef);
+const { initNavDecorators, navItemClicked, navItemHovered, resetHoverToActivePosition } = useTabs(tabsNavRef, tabsContentRefs);
 
 onMounted(() => {
   initNavDecorators();
@@ -55,13 +70,16 @@ onMounted(() => {
 
 <style lang="css">
 .tabs-list {
-  --_default-text: light-dark(var(--gray-12), var(--gray-0));
-  --_active-bg: light-dark(var(--gray-12), var(--gray-0));
-  --_active-text: light-dark(var(--gray-0), var(--gray-12));
-  --_active-indicator: light-dark(var(--gray-12), var(--gray-0));
-  --_hovered-bg: light-dark(var(--gray-7), var(--gray-3));
-  --_hovered-text: light-dark(var(--gray-0), var(--gray-12));
-  --_border-bottom: light-dark(var(--gray-12), var(--gray-0));
+  /*
+  * CSS var within /assets/styles/components/tabs.css
+  */
+  --_tabs-default-text: var(--tabs-default-text, light-dark(var(--gray-12), var(--gray-0)));
+  --_tabs-active-bg: var(--tabs-active-bg, light-dark(var(--gray-12), var(--gray-0)));
+  --_tabs-active-text: var(--tabs-active-text, light-dark(var(--gray-0), var(--gray-12)));
+  --_tabs-active-indicator: var(--tabs-active-indicator, light-dark(var(--gray-12), var(--gray-0)));
+  --_tabs-hovered-bg: var(--tabs-hovered-bg, light-dark(var(--gray-7), var(--gray-3)));
+  --_tabs-hovered-text: var(--tabs-hovered-text, light-dark(var(--gray-0), var(--gray-12)));
+  --_tabs-border-bottom: var(--tabs-border-bottom, light-dark(var(--gray-12), var(--gray-0)));
 
   position: relative;
   display: flex;
@@ -130,28 +148,28 @@ onMounted(() => {
   /*
 * User configurable variables
 */
-  border-bottom: 1px solid var(--_border-bottom);
+  border-bottom: 1px solid var(--_tabs-border-bottom);
   margin-block: 3rem;
 
   .nav__hovered {
-    background: var(--_hovered-bg);
-    color: var(--_hovered-text);
+    background: var(--_tabs-hovered-bg);
+    color: var(--_tabs-hovered-text);
   }
 
   .nav__active {
-    background: var(--_active-bg);
-    color: var(--_active-text);
+    background: var(--_tabs-active-bg);
+    color: var(--_tabs-active-text);
   }
 
   .nav__active-indicator {
-    background: var(--_active-indicator);
+    background: var(--_tabs-active-indicator);
     height: 4px;
   }
 
   .tabs-list-item {
     background: transparent;
     border: 0;
-    color: var(--_default-text);
+    color: var(--_tabs-default-text);
     cursor: pointer;
     font: inherit;
     text-transform: uppercase;
@@ -160,12 +178,22 @@ onMounted(() => {
     padding: 1em 2em;
 
     &:hover {
-      color: var(--_hovered-text);
+      color: var(--_tabs-hovered-text);
     }
 
     &[aria-selected='true'] {
-      color: var(--_active-text);
+      color: var(--_tabs-active-text);
     }
   }
 }
+
+.tab-content-wrapper {
+  display: grid;
+  grid-template-areas: 'element-stack';
+
+  .tab-content {
+    grid-area: element-stack;
+    display: none;
+  }
+}
 </style>

package/composables/{useNavDecoration.ts → useTabs.ts}

@@ -1,6 +1,6 @@
 import { useResizeObserver } from '@vueuse/core';
 
-const useNavDecoration = (navContainerRef: Ref<HTMLElement | null>, duration: number = 200) => {
+const useTabs = (tabsNavRef: Ref<HTMLElement | null>, tabsContentRefs: Ref<HTMLElement[] | null>, duration: number = 200) => {
   const navItems = ref<HTMLElement[] | null>(null);
   const previousActiveTab = useState<HTMLElement | null>('previousActiveTab', () => null);
   const currentActiveTab = ref<HTMLElement>();
@@ -10,7 +10,7 @@ const useNavDecoration = (navContainerRef: Ref<HTMLElement | null>, duration: nu
   const tagName = ref<string>();
 
   const initNavDecorators = () => {
-    navItems.value = navContainerRef.value ? (Array.from(navContainerRef.value.querySelectorAll('[data-nav-item')) as HTMLElement[]) : [];
+    navItems.value = tabsNavRef.value ? (Array.from(tabsNavRef.value.querySelectorAll('[data-nav-item')) as HTMLElement[]) : [];
     tagName.value = navItems.value[0].tagName.toLowerCase();
 
     const activeIndex = ref(0);
@@ -34,15 +34,16 @@ const useNavDecoration = (navContainerRef: Ref<HTMLElement | null>, duration: nu
     previousHoveredTab.value = navItems.value[activeIndex.value];
 
     addNavDecorators();
+    setActiveTabContent();
   };
 
   const addNavDecorators = () => {
     const elementClasses = ['nav__active-indicator', 'nav__active', 'nav__hovered'];
-    if (navContainerRef.value) {
+    if (tabsNavRef.value) {
       for (let i = 0; i < 3; i++) {
         const div = document.createElement('div');
         div.classList.add(elementClasses[i]);
-        navContainerRef.value.appendChild(div);
+        tabsNavRef.value.appendChild(div);
       }
     }
   };
@@ -75,26 +76,27 @@ const useNavDecoration = (navContainerRef: Ref<HTMLElement | null>, duration: nu
     });
 
     moveActiveIndicator();
+    setActiveTabContent();
   };
 
   const setFinalHoveredPositions = (resized: boolean = false) => {
     const setDuration = resized ? 0 : duration;
-    const newTabWidth = currentHoveredTab.value && navContainerRef.value ? currentHoveredTab.value.offsetWidth / navContainerRef.value.offsetWidth : 0;
-    navContainerRef.value?.style.setProperty('--_transition-duration', setDuration + 'ms');
-    navContainerRef.value?.style.setProperty('--_left-hovered', currentHoveredTab.value?.offsetLeft + 'px');
-    navContainerRef.value?.style.setProperty('--_width-hovered', newTabWidth?.toString());
+    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('--_width-hovered', newTabWidth?.toString());
   };
 
   const setFinalActivePositions = (resized: boolean = false) => {
     const setDuration = resized ? 0 : duration;
-    const newTabWidth = currentActiveTab.value && navContainerRef.value ? currentActiveTab.value.offsetWidth / navContainerRef.value.offsetWidth : 0;
-    navContainerRef.value?.style.setProperty('--_transition-duration', setDuration + 'ms');
-    navContainerRef.value?.style.setProperty('--_left-active', currentActiveTab.value?.offsetLeft + 'px');
-    navContainerRef.value?.style.setProperty('--_width-active', newTabWidth?.toString());
+    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('--_width-active', newTabWidth?.toString());
   };
 
   const moveActiveIndicator = () => {
-    navContainerRef.value?.style.setProperty('--_transition-duration', duration + 'ms');
+    tabsNavRef.value?.style.setProperty('--_transition-duration', duration + 'ms');
 
     const newTabPosition = previousActiveTab.value && currentActiveTab.value ? previousActiveTab.value.compareDocumentPosition(currentActiveTab.value) : 0;
     let transitionWidth;
@@ -103,10 +105,10 @@ const useNavDecoration = (navContainerRef: Ref<HTMLElement | null>, duration: nu
       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;
-      navContainerRef.value?.style.setProperty('--_left-active', currentActiveTab.value ? currentActiveTab.value.offsetLeft + 'px' : '0');
+      tabsNavRef.value?.style.setProperty('--_left-active', currentActiveTab.value ? currentActiveTab.value.offsetLeft + 'px' : '0');
     }
 
-    navContainerRef.value?.style.setProperty('--_width-active', String(transitionWidth / navContainerRef.value.offsetWidth));
+    tabsNavRef.value?.style.setProperty('--_width-active', String(transitionWidth / tabsNavRef.value.offsetWidth));
 
     setTimeout(() => {
       setFinalActivePositions();
@@ -114,7 +116,7 @@ const useNavDecoration = (navContainerRef: Ref<HTMLElement | null>, duration: nu
   };
 
   const moveHoveredIndicator = () => {
-    navContainerRef.value?.style.setProperty('--_transition-duration', duration + 'ms');
+    tabsNavRef.value?.style.setProperty('--_transition-duration', duration + 'ms');
 
     const newTabPosition = previousHoveredTab.value && currentHoveredTab.value ? previousHoveredTab.value.compareDocumentPosition(currentHoveredTab.value) : 0;
     let transitionWidth;
@@ -123,28 +125,38 @@ const useNavDecoration = (navContainerRef: Ref<HTMLElement | null>, duration: nu
       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;
-      navContainerRef.value?.style.setProperty('--_left-hovered', currentHoveredTab.value ? currentHoveredTab.value.offsetLeft + 'px' : '0');
+      tabsNavRef.value?.style.setProperty('--_left-hovered', currentHoveredTab.value ? currentHoveredTab.value.offsetLeft + 'px' : '0');
     }
 
-    navContainerRef.value?.style.setProperty('--_width-hovered', String(transitionWidth / navContainerRef.value.offsetWidth));
+    tabsNavRef.value?.style.setProperty('--_width-hovered', String(transitionWidth / tabsNavRef.value.offsetWidth));
 
     setTimeout(() => {
       setFinalHoveredPositions();
     }, Math.floor(duration + 20));
   };
 
-  useResizeObserver(navContainerRef, () => {
+  const setActiveTabContent = () => {
+    const activeIndex = navItems.value?.findIndex((el) => el === currentActiveTab.value);
+    tabsContentRefs.value?.forEach((tabContent: HTMLElement, index: number) => {
+      tabContent.style.display = activeIndex === index ? 'block' : 'none';
+    });
+  };
+
+  const animationRunning = (running: boolean) => {
+    console.log('animationRunning', running);
+  };
+
+  useResizeObserver(tabsNavRef, () => {
     setFinalActivePositions(true);
     setFinalHoveredPositions(true);
   });
 
   return {
     initNavDecorators,
-    navContainerRef,
     navItemClicked,
     navItemHovered,
     resetHoverToActivePosition,
   };
 };
 
-export default useNavDecoration;
+export default useTabs;

package/package.json

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