sprintify-ui 0.8.5 → 0.8.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.8.5",
+  "version": "0.8.6",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseTabItem.vue

@@ -1,5 +1,8 @@
 <template>
-  <li class="[&:first-child_a]:pl-0 [&:last-child_a]:pr-0">
+  <li
+    ref="baseTabItemRef"
+    class="[&:first-child_a]:pl-0 [&:last-child_a]:pr-0"
+  >
     <RouterLink
       v-slot="{ href, navigate, isActive, isExactActive }"
       :to="to"
@@ -36,6 +39,7 @@
 </template>
 
 <script lang="ts" setup>
+import { useElementBounding } from '@vueuse/core';
 import { NavigationFailure, RouteLocationRaw } from 'vue-router';
 
 const props = withDefaults(
@@ -51,6 +55,7 @@ const props = withDefaults(
 );
 
 const size = inject('tabs:size', ref<'xs' | 'sm' | 'md' | 'lg'>('md'));
+const animate = inject('tabs:animate', () => { });
 
 function onClick(navigate: () => Promise<void | NavigationFailure>) {
   if (props.disabled) {
@@ -64,6 +69,18 @@ function isActiveInternal(isActive: boolean, isExactActive: boolean) {
   return props.activeStrategy == 'default' ? isActive : isExactActive;
 }
 
+const baseTabItemRef = ref<HTMLElement | null>(null);
+
+const { x, y, width } = useElementBounding(baseTabItemRef);
+
+watch(
+  () => x.value + '-' + y.value + '-' + width.value,
+  () => {
+    animate();
+  }
+);
+
+
 const sizeClassOuter = computed(() => {
   switch (size.value) {
     case 'xs':

package/src/components/BaseTabs.stories.js

@@ -21,7 +21,14 @@ const Template = (args) => ({
     BaseCounter,
   },
   setup() {
-    return { args };
+
+    const label = ref('Home');
+
+    setInterval(() => {
+      label.value = Math.random().toString(36).substring(7);
+    }, 1000);
+
+    return { args, label };
   },
   template: `
   <div class="bg-slate-100 py-10">
@@ -29,7 +36,7 @@ const Template = (args) => ({
       <BaseTabs v-bind="args">
         <BaseTabItem to="/" v-slot="{active}">
           <div class="flex items-center">
-            <span class="mr-1">Home</span>
+            <span class="mr-1">{{ label }}</span>
             <BaseCounter 
               :size="['lg', 'md'].includes(args.size) ? 'sm' : 'xs'" 
               :color="active ? 'primary' : 'light'" 

package/src/components/BaseTabs.vue

@@ -25,6 +25,8 @@
 </template>
 
 <script lang="ts" setup>
+import { debounce } from 'lodash';
+
 const props = withDefaults(
   defineProps<{
     size?: 'xs' | 'sm' | 'md' | 'lg';
@@ -52,6 +54,12 @@ provide(
   computed(() => props.size)
 );
 
+provide(
+  'tabs:animate',
+  debounce(animateLine, 100)
+);
+
+
 function getActiveTab(): HTMLElement | null {
 
   if (!scrollable.value) {