sprintify-ui 0.4.11 → 0.5.3

package/src/components/BaseSideNavigation.stories.js

@@ -6,7 +6,7 @@ import BaseCardRow from './BaseCardRow.vue';
 import BaseCounter from './BaseCounter.vue';
 
 export default {
-  title: 'Layout/BaseSideNavigation',
+  title: 'Navigation/BaseSideNavigation',
   component: BaseSideNavigation,
   args: {},
 };

package/src/components/BaseTabItem.vue

@@ -20,19 +20,14 @@
       >
         <div class="relative flex py-1">
           <div
-            v-if="isActiveInternal(isActive, isExactActive)"
-            class="absolute left-0 bottom-0 w-full h-[2px] bg-primary-600"
-          />
-          <div
-            class="whitespace-nowrap rounded-md"
             :class="[
-              isActiveInternal(isActive, isExactActive)
-                ? 'group-hover:bg-primary-100'
-                : 'group-hover:bg-slate-200',
+              'whitespace-nowrap rounded-md group-hover:bg-black group-hover:bg-opacity-5',
               sizeClassInner
             ]"
           >
-            <slot :active="isActiveInternal(isActive, isExactActive)" />
+            <div class="base-tab-item-slot">
+              <slot :active="isActiveInternal(isActive, isExactActive)" />
+            </div>
           </div>
         </div>
       </a>

package/src/components/BaseTabs.stories.js

@@ -6,7 +6,7 @@ import BaseCardRow from './BaseCardRow.vue';
 import BaseCounter from './BaseCounter.vue';
 
 export default {
-  title: 'Layout/BaseTabs',
+  title: 'Navigation/BaseTabs',
   component: BaseTabs,
   args: {},
 };
@@ -30,8 +30,12 @@ const Template = (args) => ({
         <BaseTabItem to="/" v-slot="{active}">
           <div class="flex items-center">
             <span class="mr-1">Home</span>
-            <BaseCounter :size="['lg', 'md'].includes(args.size) ? 'sm' : 'xs'" :color="active ? 'primary' : 'light'" :count="1"></BaseCounter>  
-            </div>
+            <BaseCounter 
+              :size="['lg', 'md'].includes(args.size) ? 'sm' : 'xs'" 
+              :color="active ? 'primary' : 'light'" 
+              :count="1"
+            ></BaseCounter>  
+          </div>
         </BaseTabItem>
         <BaseTabItem to="/setup">
           Setup

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/stories/List.stories.js

@@ -55,7 +55,7 @@ export default {
                 icon: 'heroicons:arrow-down-tray',
                 action: () => alert('export!'),
             },
-            { line: true },
+            { meta: { line: true } },
             {
                 label: 'Delete all',
                 icon: 'heroicons:trash',

package/src/types/ActionItem.ts

@@ -0,0 +1,16 @@
+import { RouteLocationRaw } from "vue-router";
+import { ActionColors } from ".";
+
+export interface ActionItem {
+    label?: string;
+    description?: string;
+    href?: string;
+    to?: RouteLocationRaw;
+    action?: () => Promise<void> | void;
+    icon?: string;
+    count?: number;
+    color?: ActionColors;
+    disabled?: boolean;
+    meta?: Record<string, any>;
+    actions?: ActionItem[];
+}

package/src/types/index.ts

@@ -75,35 +75,6 @@ export type ActionColors =
   | 'primary'
   | 'secondary';
 
-export interface MenuItemInterface {
-  label?: string;
-  href?: string;
-  to?: RouteLocationRaw;
-  action?: () => Promise<void> | void;
-  icon?: string;
-  count?: number;
-  color?: ActionColors;
-  line?: boolean;
-}
-
-export interface ActionItem {
-  label: string;
-  href?: string;
-  to?: RouteLocationRaw;
-  action?: () => Promise<void> | void;
-  icon?: string;
-  count?: number;
-  color?: ActionColors;
-  disabled?: boolean;
-  meta?: Record<string, any>;
-  actions?: ActionItem[];
-}
-
-export interface ActionSection {
-  title: string;
-  actions: ActionItem[];
-}
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type Row = Record<string, any>;