sprintify-ui 0.0.193 → 0.0.195

package/src/components/BaseTabs.stories.js

@@ -3,6 +3,7 @@ import BaseTabItem from './BaseTabItem.vue';
 import BaseContainer from './BaseContainer.vue';
 import BaseCard from './BaseCard.vue';
 import BaseCardRow from './BaseCardRow.vue';
+import BaseCounter from './BaseCounter.vue';
 
 export default {
   title: 'Layout/BaseTabs',
@@ -17,6 +18,7 @@ const Template = (args) => ({
     BaseContainer,
     BaseCard,
     BaseCardRow,
+    BaseCounter,
   },
   setup() {
     return { args };
@@ -25,8 +27,11 @@ const Template = (args) => ({
   <div class="bg-slate-100 py-10">
     <BaseContainer>
       <BaseTabs v-bind="args">
-        <BaseTabItem to="/">
-          Home
+        <BaseTabItem to="/" v-slot="{active}">
+          <div class="flex items-center">
+            <span class="mr-1">Home</span>
+            <BaseCounter :size="args.size" :color="active ? 'primary' : 'light'" :count="1"></BaseCounter>  
+          </div>
         </BaseTabItem>
         <BaseTabItem to="/setup">
           Setup
@@ -34,9 +39,15 @@ const Template = (args) => ({
         <BaseTabItem to="/settings">
           Settings
         </BaseTabItem>
+        <BaseTabItem to="/articles">
+          Articles
+        </BaseTabItem>
         <BaseTabItem to="/misc">
           Miscellaneous
         </BaseTabItem>
+        <BaseTabItem to="/users">
+          Users
+        </BaseTabItem>
       </BaseTabs>
       <div class="mt-10">
         <BaseCard>
@@ -52,3 +63,23 @@ const Template = (args) => ({
 
 export const Demo = Template.bind({});
 Demo.args = {};
+
+export const SizeXS = Template.bind({});
+SizeXS.args = {
+  size: 'xs',
+};
+
+export const SizeSM = Template.bind({});
+SizeSM.args = {
+  size: 'sm',
+};
+
+export const SizeMD = Template.bind({});
+SizeMD.args = {
+  size: 'md',
+};
+
+export const SizeLG = Template.bind({});
+SizeLG.args = {
+  size: 'lg',
+};

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>