design-system-next 1.2.4 → 1.2.6

package/src/components/tabs/tabs.vue

@@ -1,46 +1,52 @@
 <template>
-  <div class="flex">
+  <div class="relative flex">
     <div
       v-for="(tab, index) in list"
       :key="index"
+      ref="tabElements"
       :class="[
         tabsClasses,
-        'body-sm-regular text-color-strong cursor-pointer border-solid',
         {
-          // Active tab without underline
-          'background-color-single-active border': !underlined && selectedTabIndex === index,
+          // Regular Tab
+          'rounded-l-md': !underlined && index === 0,
+          'rounded-r-md': !underlined && index === tabElements.length - 1,
 
-          // Inactive tab without underline
-          'border-color-weak hover:background-color-hover border-x-[0.5px] border-y':
-            !underlined && selectedTabIndex !== index,
+          // Regular Tab - Active
+          'text-color-brand-base border-color-success-base cursor-pointer border border-solid':
+            !underlined && activeTab.index === index,
 
-          // Underlined tab that is not selected
-          'border-color-base border-b': underlined && selectedTabIndex !== index,
+          // Regular Tab - Inactive
+          'border-color-weak hover:background-color-hover cursor-pointer border-x-[0.5px] border-y border-solid':
+            !underlined && activeTab.index !== index,
 
-          // Underlined and selected tab
-          'border-b-2': underlined && selectedTabIndex === index,
+          // Regular Tab - Disabled
+          'background-color-base !cursor-not-allowed': !underlined && tab.disabled,
 
-          // Disabled tab with underline
-          'border-color-disabled text-color-disabled !cursor-not-allowed border-b': underlined && tab.disabled,
-
-          // Regular text for non-selected tabs
-          'body-sm-regular': selectedTabIndex !== index,
+          // Underlined Tab - Active
+          'text-color-brand-base cursor-pointer': underlined && activeTab.index === index,
 
-          // Active tab with custom text and border styles
-          'body-sm-regular text-color-brand-base border-color-success-base': selectedTabIndex === index,
+          // Underlined Tab - Inactive
+          'border-color-base cursor-pointer border-b border-solid': underlined && activeTab.index !== index,
+          'hover:background-color-hover cursor-pointer': underlined && activeTab.index !== index && !tab.disabled,
 
-          // Border adjustments for previous and next tab
-          'border-l-0': selectedTabIndex - index === -1,
-          'border-r-0': selectedTabIndex - index === 1,
+          // Underlined Tab - Disabled
+          'border-color-disabled text-color-disabled !cursor-not-allowed border-b': underlined && tab.disabled,
         },
       ]"
       @click="updateSelectedTabIndex(index, tab.disabled)"
     >
-      <div class="flex items-center gap-size-spacing-5xs leading-none">
+      <div
+        :class="{
+          'flex items-center gap-size-spacing-5xs leading-none': true,
+          'transition duration-150 ease-in-out': true,
+          'cursor-pointer group-active:scale-75': !tab.disabled,
+          'cursor-not-allowed': tab.disabled,
+        }"
+      >
         <div v-if="!!tab.icon">
           <Icon
-            :icon="selectedTabIndex === index && !!tab.iconFill ? tab.iconFill : tab.icon"
             class="body-sm-regular"
+            :icon="activeTab.index === index && typeof tab.iconFill === 'string' ? tab.iconFill : tab.icon"
           />
         </div>
         <div v-if="!!tab.label">
@@ -48,17 +54,48 @@
         </div>
       </div>
     </div>
+
+    <!-- Regular Tab Background Active Indicator -->
+    <div
+      v-if="!underlined"
+      :class="[
+        'background-color-single-active absolute bottom-0 left-0 z-[5] block',
+        'transition-left duration-150 ease-in-out',
+        {
+          'rounded-l-md': activeTab.index === 0,
+          'rounded-r-md': activeTab.index === tabElements.length - 1,
+        },
+      ]"
+      :style="{
+        height: `${activeTab.height}px`,
+        width: `${activeTab.width}px`,
+        left: `${activeTab.undelineLeftOffset}px`,
+      }"
+    />
+
+    <!-- Underlined Tab Active Indicator -->
+    <div
+      v-if="underlined"
+      :class="[
+        'background-color-success-base absolute bottom-0 left-0 z-10 block h-0.5 rounded-full',
+        'transition-left duration-150 ease-in-out',
+      ]"
+      :style="{
+        width: `${activeTab.width}px`,
+        left: `calc(${activeTab.undelineLeftOffset}px - 2.3px)`,
+      }"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
+import { Icon } from '@iconify/vue';
+
 import { tabsPropTypes, tabsEmitTypes } from './tabs';
 import { useTabs } from './use-tabs';
 
-import { Icon } from '@iconify/vue';
-
 const emit = defineEmits(tabsEmitTypes);
 const props = defineProps(tabsPropTypes);
 
-const { updateSelectedTabIndex, selectedTabIndex, tabsClasses } = useTabs(props, emit);
+const { tabsClasses, activeTab, tabElements, updateSelectedTabIndex } = useTabs(props, emit);
 </script>

package/src/components/tabs/use-tabs.ts

@@ -1,33 +1,60 @@
-import { ref, computed, SetupContext } from 'vue';
+import { ref, computed, onMounted, SetupContext } from 'vue';
 import type { TabsPropTypes, TabsEmitTypes } from './tabs';
 
 import classNames from 'classnames';
 
 export const useTabs = (props: TabsPropTypes, emit: SetupContext<TabsEmitTypes>['emit']) => {
-  const selectedTabIndex = ref(0);
-  const { underlined } = props;
+  const tabsClasses = computed(() => {
+    return classNames({
+      'relative z-[10] px-size-spacing-xs py-size-spacing-3xs body-sm text-color-strong group': true,
+      'transition-left duration-150 ease-in-out': true,
+      capitalize: !props.underlined,
+      'uppercase border-x-0 border-t-0': props.underlined,
+    });
+  });
+
+  const activeTab = ref({
+    index: 0,
+    previousIndex: -1,
+    height: 0,
+    width: 0,
+    undelineLeftOffset: 0,
+  });
+
+  const tabElements = ref<HTMLElement[]>([]);
 
-  function updateSelectedTabIndex(index: number, disabled = false) {
+  const updateSelectedTabIndex = (index: number, disabled = false) => {
     if (disabled) return;
 
-    if (selectedTabIndex.value === index) return;
+    activeTab.value.previousIndex = activeTab.value.index;
 
-    selectedTabIndex.value = index;
+    if (activeTab.value.index === index) return;
+
+    activeTab.value.index = index;
+
+    // Update underline left offset based on previous index
+    const indexDifference = Math.abs(activeTab.value.index - activeTab.value.previousIndex);
+
+    if (activeTab.value.index > activeTab.value.previousIndex) {
+      // Moving right: increase the offset by the width of each tab
+      activeTab.value.undelineLeftOffset += indexDifference * activeTab.value.width;
+    } else {
+      // Moving left: decrease the offset by the width of each tab
+      activeTab.value.undelineLeftOffset -= indexDifference * activeTab.value.width;
+    }
 
     emit('tabIndex', index);
-  }
+  };
 
-  const tabsClasses = computed(() => {
-    return classNames({
-      'px-size-spacing-xs py-size-spacing-3xs capitalize text-color-strong first:rounded-l-md first:border-l last:border-r last:rounded-r-md':
-        !underlined,
-      'p-size-spacing-xs uppercase border-x-0 border-t-0': underlined,
-    });
+  onMounted(() => {
+    activeTab.value.height = tabElements.value[activeTab.value.index].offsetHeight;
+    activeTab.value.width = tabElements.value[activeTab.value.index].offsetWidth;
   });
 
   return {
     tabsClasses,
-    selectedTabIndex,
+    activeTab,
+    tabElements,
     updateSelectedTabIndex,
   };
 };