sprintify-ui 0.0.198 → 0.0.200

package/src/components/BaseSideNavigationItem.vue

@@ -7,52 +7,86 @@
     <a
       :href="disabled ? undefined : href"
       :disabled="disabled"
-      class="group relative flex items-center px-3 py-1"
+      class="group block"
       :class="[
-        (activeStrategy == 'default' ? isActive : isExactActive)
+        isActiveInternal(isActive, isExactActive)
           ? 'font-semibold text-primary-600'
           : 'text-slate-600 hover:text-slate-900',
         disabled ? 'cursor-not-allowed opacity-60' : '',
+        sizeClassOuter,
       ]"
       @click.prevent="onClick(navigate)"
     >
-      <div
-        class="absolute left-0 top-0 h-full"
-        :class="[
-          (activeStrategy == 'default' ? isActive : isExactActive)
-            ? 'w-[2px] bg-primary-600'
-            : 'group-hover:w-px group-hover:bg-slate-700',
-        ]"
-      ></div>
-      <slot />
+      <div class="relative flex items-center" :class="[sizeClassInner]">
+        <div
+          class="absolute left-0 top-0 h-full"
+          :class="[
+            isActiveInternal(isActive, isExactActive)
+              ? 'w-[2px] bg-primary-600'
+              : 'group-hover:w-px group-hover:bg-slate-700',
+          ]"
+        ></div>
+        <slot :active="isActiveInternal(isActive, isExactActive)" />
+      </div>
     </a>
   </router-link>
 </template>
 
 <script lang="ts" setup>
-import { PropType } from 'vue';
-import { RouteLocationRaw } from 'vue-router';
-
-const props = defineProps({
-  to: {
-    required: true,
-    type: [Object, String] as PropType<RouteLocationRaw>,
-  },
-  disabled: {
-    default: false,
-    type: Boolean,
-  },
-  activeStrategy: {
-    default: 'default',
-    type: String as PropType<'default' | 'exact'>,
-  },
-});
+import { NavigationFailure, RouteLocationRaw } from 'vue-router';
+
+const props = withDefaults(
+  defineProps<{
+    to: RouteLocationRaw;
+    disabled?: boolean;
+    activeStrategy?: 'default' | 'exact';
+  }>(),
+  {
+    disabled: false,
+    activeStrategy: 'default',
+  }
+);
 
-const onClick = (navigate: () => void) => {
+const size = inject(
+  'sideNavigation:size',
+  ref<'xs' | 'sm' | 'md' | 'lg'>('md')
+);
+
+function onClick(navigate: () => Promise<void | NavigationFailure>) {
   if (props.disabled) {
     return;
   }
 
-  navigate();
-};
+  return navigate();
+}
+
+function isActiveInternal(isActive: boolean, isExactActive: boolean) {
+  return props.activeStrategy == 'default' ? isActive : isExactActive;
+}
+
+const sizeClassOuter = computed(() => {
+  switch (size.value) {
+    case 'xs':
+      return 'py-0.5';
+    case 'sm':
+      return 'py-1';
+    case 'md':
+      return 'py-2';
+    case 'lg':
+      return 'py-2';
+  }
+});
+
+const sizeClassInner = computed(() => {
+  switch (size.value) {
+    case 'xs':
+      return 'text-xs px-3 py-0.5 font-normal';
+    case 'sm':
+      return 'text-sm px-4 py-0.5 font-normal';
+    case 'md':
+      return 'text-sm px-4 py-0.5 font-normal';
+    case 'lg':
+      return 'text-base px-5 py-0.5 font-normal';
+  }
+});
 </script>

package/src/components/BaseTabItem.vue

@@ -1,32 +1,35 @@
 <template>
-  <li role="presentation">
+  <li>
     <router-link
       v-slot="{ href, navigate, isActive, isExactActive }"
       :to="to"
       custom
     >
       <a
-        :href="href"
-        class="group relative inline-block rounded-t-lg"
+        :href="disabled ? undefined : href"
+        :disabled="disabled"
+        class="group inline-block rounded-t-lg"
         :class="[
-          tabIsActive(isActive, isExactActive)
+          isActiveInternal(isActive, isExactActive)
             ? 'active text-primary-600'
             : 'text-slate-600 hover:text-slate-900',
           disabled ? 'cursor-not-allowed opacity-60' : '',
-          sizeClass,
+          sizeClassOuter,
         ]"
         @click.prevent="onClick(navigate)"
       >
-        <div
-          class="absolute left-0 bottom-0 w-full"
-          :class="[
-            tabIsActive(isActive, isExactActive)
-              ? 'h-[2px] bg-primary-600'
-              : 'group-hover:h-px group-hover:bg-slate-700',
-          ]"
-        ></div>
-        <div class="whitespace-nowrap">
-          <slot :active="tabIsActive(isActive, isExactActive)" />
+        <div class="relative flex" :class="sizeClassInner">
+          <div
+            class="absolute left-0 bottom-0 w-full"
+            :class="[
+              isActiveInternal(isActive, isExactActive)
+                ? 'h-[2px] bg-primary-600'
+                : 'group-hover:h-px group-hover:bg-slate-700',
+            ]"
+          ></div>
+          <div class="whitespace-nowrap">
+            <slot :active="isActiveInternal(isActive, isExactActive)" />
+          </div>
         </div>
       </a>
     </router-link>
@@ -34,7 +37,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ComputedRef } from 'vue';
 import { NavigationFailure, RouteLocationRaw } from 'vue-router';
 
 const props = withDefaults(
@@ -49,9 +51,7 @@ const props = withDefaults(
   }
 );
 
-const size = inject('tabs:size', ref('md')) as ComputedRef<
-  'xs' | 'sm' | 'md' | 'lg'
->;
+const size = inject('tabs:size', ref<'xs' | 'sm' | 'md' | 'lg'>('md'));
 
 function onClick(navigate: () => Promise<void | NavigationFailure>) {
   if (props.disabled) {
@@ -61,24 +61,33 @@ function onClick(navigate: () => Promise<void | NavigationFailure>) {
   return navigate();
 }
 
-function tabIsActive(isActive: boolean, isExactActive: boolean) {
-  if (props.activeStrategy == 'default') {
-    return isActive;
-  }
-
-  return isExactActive;
+function isActiveInternal(isActive: boolean, isExactActive: boolean) {
+  return props.activeStrategy == 'default' ? isActive : isExactActive;
 }
 
-const sizeClass = computed(() => {
+const sizeClassOuter = computed(() => {
+  switch (size.value) {
+    case 'xs':
+      return 'px-1';
+    case 'sm':
+      return 'px-2';
+    case 'md':
+      return 'px-2.5';
+    case 'lg':
+      return 'px-3';
+  }
+});
+
+const sizeClassInner = computed(() => {
   switch (size.value) {
     case 'xs':
-      return 'text-xs px-1 py-2 font-normal';
+      return 'text-xs py-2 px-1 font-normal';
     case 'sm':
-      return 'text-sm px-1 py-2.5 font-normal';
+      return 'text-sm py-2.5 px-1 font-normal';
     case 'md':
-      return 'text-sm px-1 py-4 font-normal';
+      return 'text-sm py-4 px-1 font-normal';
     case 'lg':
-      return 'text-base px-1 py-4 font-normal';
+      return 'text-base py-4 px-1 font-normal';
   }
 });
 </script>

package/src/components/BaseTabs.stories.js

@@ -30,8 +30,8 @@ const Template = (args) => ({
         <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>
+            <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

@@ -6,7 +6,7 @@
       class="scrollable relative overflow-x-auto overflow-y-hidden"
       data-scroll-lock-scrollable
     >
-      <ul class="flex text-center" :class="[sizeClass]">
+      <ul class="flex text-center">
         <slot />
       </ul>
     </div>
@@ -40,19 +40,6 @@ provide(
   computed(() => props.size)
 );
 
-const sizeClass = computed(() => {
-  switch (props.size) {
-    case 'xs':
-      return 'space-x-2';
-    case 'sm':
-      return 'space-x-4';
-    case 'md':
-      return 'space-x-5';
-    case 'lg':
-      return 'space-x-6';
-  }
-});
-
 function scrollToCenter() {
   if (!scrollable.value) {
     return;