sprintify-ui 0.0.194 → 0.0.195

package/src/components/BaseTabs.vue

@@ -2,14 +2,85 @@
   <div class="relative">
     <div class="absolute bottom-0 left-0 h-px w-full bg-slate-300" />
     <div
-      class="relative overflow-x-auto overflow-y-hidden"
+      ref="scrollable"
+      class="scrollable relative overflow-x-auto overflow-y-hidden"
       data-scroll-lock-scrollable
     >
-      <ul class="flex space-x-4 text-center">
+      <ul class="flex text-center" :class="[sizeClass]">
         <slot />
       </ul>
     </div>
   </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+const props = withDefaults(
+  defineProps<{
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+  }>(),
+  {
+    size: 'md',
+  }
+);
+
+const route = useRoute();
+const scrollable = ref<HTMLElement | null>(null);
+
+watch(
+  () => route.fullPath,
+  () => {
+    nextTick(() => {
+      scrollToCenter();
+    });
+  }
+);
+
+provide(
+  'tabs:size',
+  computed(() => props.size)
+);
+
+const sizeClass = computed(() => {
+  switch (props.size) {
+    case 'xs':
+      return 'space-x-1.5';
+    case 'sm':
+      return 'space-x-3';
+    case 'md':
+      return 'space-x-3';
+    case 'lg':
+      return 'space-x-6';
+  }
+});
+
+function scrollToCenter() {
+  if (!scrollable.value) {
+    return;
+  }
+
+  const activeTab = scrollable.value.querySelector(
+    '.active'
+  ) as HTMLElement | null;
+
+  if (!activeTab) {
+    return;
+  }
+
+  const scrollableRect = scrollable.value.getBoundingClientRect();
+  const activeTabRect = activeTab.getBoundingClientRect();
+
+  const scrollLeft =
+    activeTab.offsetLeft - (scrollableRect.width - activeTabRect.width) / 2;
+
+  scrollable.value.scrollTo({
+    left: scrollLeft,
+    behavior: 'smooth',
+  });
+}
+</script>
+
+<style scoped>
+.scrollable::-webkit-scrollbar {
+  display: none;
+}
+</style>