sprintify-ui 0.5.2 → 0.5.3

package/src/components/BaseTabs.vue

@@ -4,9 +4,20 @@
     <div
       ref="scrollable"
       class="scrollable relative overflow-x-auto overflow-y-hidden"
+      :class="{
+        '-mx-2': size == 'xs',
+        '-mx-3': size == 'sm',
+        '-mx-4': size == 'md',
+        '-mx-5': size == 'lg',
+      }"
       data-scroll-lock-scrollable
     >
       <ul class="flex text-center">
+        <div
+          ref="lineRef"
+          style="visibility: hidden; width: 0px;"
+          class="absolute left-0 bottom-0 w-full h-[2px] bg-primary-600"
+        />
         <slot />
       </ul>
     </div>
@@ -31,6 +42,7 @@ watch(
   () => {
     nextTick(() => {
       scrollToCenter();
+      animateLine();
     });
   }
 );
@@ -40,15 +52,37 @@ provide(
   computed(() => props.size)
 );
 
-function scrollToCenter() {
+function getActiveTab(): HTMLElement | null {
+
   if (!scrollable.value) {
-    return;
+    return null;
   }
 
-  const activeTab = scrollable.value.querySelector(
+  return scrollable.value.querySelector(
     '.active'
   ) as HTMLElement | null;
 
+}
+
+function getActiveTabSlot(): HTMLElement | null {
+
+  if (!scrollable.value) {
+    return null;
+  }
+
+  return scrollable.value.querySelector(
+    '.active .base-tab-item-slot'
+  ) as HTMLElement | null;
+
+}
+
+function scrollToCenter() {
+  if (!scrollable.value) {
+    return;
+  }
+
+  const activeTab = getActiveTab();
+
   if (!activeTab) {
     return;
   }
@@ -56,14 +90,69 @@ function scrollToCenter() {
   const scrollableRect = scrollable.value.getBoundingClientRect();
   const activeTabRect = activeTab.getBoundingClientRect();
 
-  const scrollLeft =
-    activeTab.offsetLeft - (scrollableRect.width - activeTabRect.width) / 2;
+  const scrollLeft = activeTab.offsetLeft - (scrollableRect.width - activeTabRect.width) / 2;
 
   scrollable.value.scrollTo({
     left: scrollLeft,
     behavior: 'smooth',
   });
 }
+
+// Line animation
+
+const lineRef = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+  nextTick(() => {
+    animateLine(false);
+  });
+});
+
+function animateLine(animate = true) {
+
+  const activeTabSlot = getActiveTabSlot();
+
+  if (!scrollable.value) {
+    return;
+  }
+
+  if (!lineRef.value) {
+    return;
+  }
+
+  if (!activeTabSlot) {
+    return;
+  }
+
+  const width = activeTabSlot.clientWidth;
+  const activeTabSlotRect = activeTabSlot.getBoundingClientRect();
+  const scrollableRect = scrollable.value.getBoundingClientRect();
+
+  const x = activeTabSlotRect.left - scrollableRect.left + scrollable.value.scrollLeft;
+
+  lineRef.value.style.visibility = 'visible';
+
+  if (!animate) {
+    lineRef.value.style.transform = `translateX(${x}px)`;
+    lineRef.value.style.width = `${width}px`;
+    return;
+  }
+
+  lineRef.value.animate(
+    [
+      {
+        transform: `translateX(${x}px)`,
+        width: `${width}px`,
+      },
+    ],
+    {
+      duration: 200,
+      easing: 'ease-in-out',
+      fill: 'both',
+    }
+  );
+
+}
 </script>
 
 <style scoped>

package/src/types/ActionItem.ts

@@ -3,6 +3,7 @@ import { ActionColors } from ".";
 
 export interface ActionItem {
     label?: string;
+    description?: string;
     href?: string;
     to?: RouteLocationRaw;
     action?: () => Promise<void> | void;