sprintify-ui 0.10.24 → 0.10.25

package/dist/types/components/BaseTabItem.vue.d.ts

@@ -1,32 +1,50 @@
+import { ComputedRef } from 'vue';
 import { NavigationFailure, RouteLocationRaw } from 'vue-router';
 type __VLS_Props = {
-    to: RouteLocationRaw;
+    id?: string;
+    to?: RouteLocationRaw;
     disabled?: boolean;
+    /**
+     * The strategy to determine if the tab is active. Only used when the
+     * `to` prop is provided.
+     * - `default`: The tab is active if the route matches the path.
+     * - `exact`: The tab is active if the route matches the path exactly.
+     */
     activeStrategy?: 'default' | 'exact';
 };
-declare function onClick(navigate: () => Promise<void | NavigationFailure>): Promise<void | NavigationFailure> | undefined;
+declare const idInternal: ComputedRef<string>;
+declare const currentTabId: ComputedRef<string | null>;
+declare function onClick(navigate?: () => Promise<void | NavigationFailure> | null): Promise<void | NavigationFailure> | null | undefined;
 declare function isActiveInternal(isActive: boolean, isExactActive: boolean): boolean;
 declare const baseTabItemRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
-declare const sizeClassOuter: import("vue").ComputedRef<"" | "px-1" | "px-1.5" | "px-2">;
-declare const sizeClassInner: import("vue").ComputedRef<"" | "text-xs py-1 px-1 font-normal" | "text-sm py-1 px-2 font-normal" | "text-sm py-1.5 px-2 font-normal" | "text-base py-1.5 px-3 font-normal">;
+declare const sizeClassOuter: ComputedRef<string>;
+declare const sizeClassInner: ComputedRef<"" | "text-xs py-1 px-1 font-normal" | "text-sm py-1 px-2 font-normal" | "text-sm py-1.5 px-2 font-normal" | "text-base py-1.5 px-3 font-normal">;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_5: {
     active: boolean;
-};
+}, __VLS_7: {};
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
     default?: (props: typeof __VLS_5) => any;
+} & {
+    default?: (props: typeof __VLS_7) => any;
 }>;
 declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    idInternal: typeof idInternal;
+    currentTabId: typeof currentTabId;
     onClick: typeof onClick;
     isActiveInternal: typeof isActiveInternal;
     baseTabItemRef: typeof baseTabItemRef;
     sizeClassOuter: typeof sizeClassOuter;
     sizeClassInner: typeof sizeClassInner;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    to: RouteLocationRaw;
+    id: string;
     disabled: boolean;
     activeStrategy: "default" | "exact";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    to: RouteLocationRaw;
+    id: string;
     disabled: boolean;
     activeStrategy: "default" | "exact";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/types/components/BaseTabs.vue.d.ts

@@ -1,4 +1,5 @@
 type __VLS_Props = {
+    modelValue?: string | number | null | undefined;
     size?: 'xs' | 'sm' | 'md' | 'lg';
 };
 declare const scrollable: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
@@ -11,11 +12,21 @@ type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$
 declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
     scrollable: typeof scrollable;
     lineRef: typeof lineRef;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
     size: "xs" | "sm" | "md" | "lg";
+    modelValue: string | number | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
     size: "xs" | "sm" | "md" | "lg";
+    modelValue: string | number | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.10.24",
+  "version": "0.10.25",
   "type": "module",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",

package/src/components/BaseTabItem.vue

@@ -4,6 +4,7 @@
     class="[&:first-child_a]:pl-0 [&:last-child_a]:pr-0"
   >
     <RouterLink
+      v-if="to"
       v-slot="{ href, navigate, isActive, isExactActive }"
       :to="to"
       custom
@@ -16,7 +17,6 @@
           isActiveInternal(isActive, isExactActive)
             ? 'active text-primary-600'
             : 'text-slate-600 hover:text-slate-900',
-          disabled ? 'cursor-not-allowed opacity-60' : '',
           sizeClassOuter,
         ]"
         @click.prevent="onClick(navigate)"
@@ -35,40 +35,104 @@
         </div>
       </a>
     </RouterLink>
+    <button
+      v-else
+      type="button"
+      :disabled="disabled"
+      class="group inline-block rounded-t-lg"
+      :class="[
+        currentTabId === idInternal
+          ? 'active text-primary-600'
+          : 'text-slate-600 hover:text-slate-900',
+        sizeClassOuter,
+      ]"
+      @click="onClick()"
+    >
+      <div class="relative flex py-1">
+        <div
+          :class="[
+            'whitespace-nowrap rounded-md group-hover:bg-black group-hover:bg-opacity-5',
+            sizeClassInner
+          ]"
+        >
+          <div class="base-tab-item-slot">
+            <slot />
+          </div>
+        </div>
+      </div>
+    </button>
   </li>
 </template>
 
 <script lang="ts" setup>
 import { useElementBounding } from '@vueuse/core';
+import { uniqueId } from 'lodash';
+import { ComputedRef } from 'vue';
 import { NavigationFailure, RouteLocationRaw } from 'vue-router';
 
+const router = useRouter();
+
 const props = withDefaults(
   defineProps<{
-    to: RouteLocationRaw;
+    id?: string;
+    to?: RouteLocationRaw;
     disabled?: boolean;
+    /**
+     * The strategy to determine if the tab is active. Only used when the
+     * `to` prop is provided.
+     * - `default`: The tab is active if the route matches the path.
+     * - `exact`: The tab is active if the route matches the path exactly.
+     */
     activeStrategy?: 'default' | 'exact';
   }>(),
   {
+    id: undefined,
+    to: undefined,
     disabled: false,
     activeStrategy: 'default',
   }
 );
 
+const idInternal = computed(() => {
+  if (props.id) {
+    return props.id;
+  }
+
+  if (!router || !props.to) {
+    return uniqueId() + '';
+  }
+
+  const route = router.resolve(props.to);
+  const path = route.fullPath;
+
+  return path;
+});
+
+const currentTabId = inject<ComputedRef<string | null>>('tabs:currentTabId', computed(() => null));
+const updateTabId = inject<((tabId: string) => void)>('tabs:updateTabId');
+
 const size = inject('tabs:size', ref<'xs' | 'sm' | 'md' | 'lg'>('md'));
-const animate = inject('tabs:animate', () => { });
 
-function onClick(navigate: () => Promise<void | NavigationFailure>) {
+function onClick(navigate?: () => Promise<void | NavigationFailure> | null) {
   if (props.disabled) {
     return;
   }
 
-  return navigate();
+  if (updateTabId) {
+    updateTabId(idInternal.value);
+  }
+
+  if (navigate) {
+    return navigate();
+  }
 }
 
 function isActiveInternal(isActive: boolean, isExactActive: boolean) {
   return props.activeStrategy == 'default' ? isActive : isExactActive;
 }
 
+// Animate
+
 const baseTabItemRef = ref<HTMLElement | null>(null);
 
 const { x, y, width } = useElementBounding(baseTabItemRef);
@@ -80,20 +144,35 @@ watch(
   }
 );
 
+const animate = inject('tabs:animate', () => { });
+
+// Classes
 
 const sizeClassOuter = computed(() => {
+
+  const classes = [];
+
+  if (props.disabled) {
+    classes.push('cursor-not-allowed opacity-60');
+  }
+
   switch (size.value) {
     case 'xs':
-      return 'px-1';
+      classes.push('px-1');
+      break;
     case 'sm':
-      return 'px-1.5';
+      classes.push('px-1.5');
+      break;
     case 'md':
-      return 'px-2';
+      classes.push('px-2');
+      break;
     case 'lg':
-      return 'px-2';
-    default:
-      return '';
+      classes.push('px-3');
+      break;
   }
+
+  return classes.join(' ');
+
 });
 
 const sizeClassInner = computed(() => {

package/src/components/BaseTabs.stories.js

@@ -23,16 +23,18 @@ const Template = (args) => ({
   setup() {
     const label = ref("Home");
 
+    const modelValue = ref("setup");
+
     setInterval(() => {
       label.value = Math.random().toString(36).substring(7);
     }, 1000);
 
-    return { args, label };
+    return { args, label, modelValue };
   },
   template: `
   <div class="bg-slate-100 py-10">
     <BaseContainer>
-      <BaseTabs v-bind="args">
+      <BaseTabs v-model="modelValue" v-bind="args">
         <BaseTabItem to="/" v-slot="{active}">
           <div class="flex items-center">
             <span class="mr-1">{{ label }}</span>
@@ -62,7 +64,9 @@ const Template = (args) => ({
       <div class="mt-10">
         <BaseCard>
           <BaseCardRow>
-            {{ $route.path }}
+            path: {{ $route.path }}
+            <br>
+            id: {{ modelValue }}
           </BaseCardRow>
         </BaseCard>
       </div>
@@ -93,3 +97,70 @@ export const SizeLG = Template.bind({});
 SizeLG.args = {
   size: "lg",
 };
+
+const TemplateStatic = (args) => ({
+  components: {
+    BaseTabs,
+    BaseTabItem,
+    BaseContainer,
+    BaseCard,
+    BaseCardRow,
+    BaseCounter,
+  },
+  setup() {
+    const label = ref("Home");
+
+    const modelValue = ref("setup");
+
+    setInterval(() => {
+      label.value = Math.random().toString(36).substring(7);
+    }, 1000);
+
+    return { args, label, modelValue };
+  },
+  template: `
+  <div class="bg-slate-100 py-10">
+    <BaseContainer>
+      <BaseTabs v-model="modelValue" v-bind="args">
+        <BaseTabItem id="home" v-slot="{active}">
+          <div class="flex items-center">
+            <span class="mr-1">{{ label }}</span>
+            <BaseCounter 
+              :size="['lg', 'md'].includes(args.size) ? 'sm' : 'xs'" 
+              :color="active ? 'primary' : 'light'" 
+              :count="1"
+            ></BaseCounter>  
+          </div>
+        </BaseTabItem>
+        <BaseTabItem id="setup">
+          Setup
+        </BaseTabItem>
+        <BaseTabItem id="settings">
+          Settings
+        </BaseTabItem>
+        <BaseTabItem id="articles">
+          Articles
+        </BaseTabItem>
+        <BaseTabItem id="misc">
+          Miscellaneous
+        </BaseTabItem>
+        <BaseTabItem id="users">
+          Users
+        </BaseTabItem>
+      </BaseTabs>
+
+      <div class="mt-10">
+        <BaseCard>
+          <BaseCardRow>
+            id: {{ modelValue }}
+          </BaseCardRow>
+        </BaseCard>
+      </div>
+    </BaseContainer>
+  </div>
+  `,
+});
+
+export const Static = TemplateStatic.bind({});
+Static.args = {
+};

package/src/components/BaseTabs.vue

@@ -29,23 +29,55 @@ import { debounce } from 'lodash';
 
 const props = withDefaults(
   defineProps<{
+    modelValue?: string | number | null | undefined;
     size?: 'xs' | 'sm' | 'md' | 'lg';
   }>(),
   {
+    modelValue: null,
     size: 'md',
   }
 );
 
 const route = useRoute();
+
 const scrollable = ref<HTMLElement | null>(null);
 
+const emit = defineEmits(['update:modelValue']);
+
 watch(
   () => route.fullPath,
   () => {
     nextTick(() => {
-      scrollToCenter();
-      animateLine();
+      updateTab();
+    });
+  },
+  { immediate: true }
+);
+
+watch(
+  () => props.modelValue,
+  () => {
+    nextTick(() => {
+      updateTab();
     });
+  },
+  { immediate: true }
+);
+
+function updateTab() {
+  scrollToCenter();
+  animateLine();
+}
+
+provide(
+  'tabs:currentTabId',
+  computed(() => props.modelValue)
+);
+
+provide(
+  'tabs:updateTabId',
+  (tabId: string) => {
+    emit('update:modelValue', tabId);
   }
 );