sprintify-ui 0.8.5 → 0.8.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.8.5",
+  "version": "0.8.7",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseDataTableTemplate.vue

@@ -689,17 +689,40 @@ function nextSequence() {
   return sequence.value++;
 }
 
+let warningNoRowKeyFoundShown = false;
+
 function getRowKey(row: Row): string {
+
   if (row.id) {
     return row.id;
   }
+
   if (row.key) {
     return row.key;
   }
+
   if (row.uuid) {
     return row.uuid;
   }
-  return objectHash(row);
+
+  if (!warningNoRowKeyFoundShown) {
+    console.warn('%cNo unique key found for items provided to BaseDataTable.%cPlease provide a unique key for each row (id, key or uuid) for faster rendering', 'font-weight: bold', 'font-weight: normal');
+    warningNoRowKeyFoundShown = true;
+  }
+
+  // if no key is found, hash a simplified version of the row object
+  // We use a simplified version to avoid hashing functions, objects, etc. for performance reasons
+
+  const simpleRow = {} as Record<string, string | number | boolean>;
+
+  for (const key in row) {
+    const value = row[key];
+    if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+      simpleRow[key] = value;
+    }
+  }
+
+  return objectHash(simpleRow);
 }
 
 provide('addColumn', addColumn);

package/src/components/BaseTabItem.vue

@@ -1,5 +1,8 @@
 <template>
-  <li class="[&:first-child_a]:pl-0 [&:last-child_a]:pr-0">
+  <li
+    ref="baseTabItemRef"
+    class="[&:first-child_a]:pl-0 [&:last-child_a]:pr-0"
+  >
     <RouterLink
       v-slot="{ href, navigate, isActive, isExactActive }"
       :to="to"
@@ -36,6 +39,7 @@
 </template>
 
 <script lang="ts" setup>
+import { useElementBounding } from '@vueuse/core';
 import { NavigationFailure, RouteLocationRaw } from 'vue-router';
 
 const props = withDefaults(
@@ -51,6 +55,7 @@ const props = withDefaults(
 );
 
 const size = inject('tabs:size', ref<'xs' | 'sm' | 'md' | 'lg'>('md'));
+const animate = inject('tabs:animate', () => { });
 
 function onClick(navigate: () => Promise<void | NavigationFailure>) {
   if (props.disabled) {
@@ -64,6 +69,18 @@ function isActiveInternal(isActive: boolean, isExactActive: boolean) {
   return props.activeStrategy == 'default' ? isActive : isExactActive;
 }
 
+const baseTabItemRef = ref<HTMLElement | null>(null);
+
+const { x, y, width } = useElementBounding(baseTabItemRef);
+
+watch(
+  () => x.value + '-' + y.value + '-' + width.value,
+  () => {
+    animate();
+  }
+);
+
+
 const sizeClassOuter = computed(() => {
   switch (size.value) {
     case 'xs':

package/src/components/BaseTabs.stories.js

@@ -21,7 +21,14 @@ const Template = (args) => ({
     BaseCounter,
   },
   setup() {
-    return { args };
+
+    const label = ref('Home');
+
+    setInterval(() => {
+      label.value = Math.random().toString(36).substring(7);
+    }, 1000);
+
+    return { args, label };
   },
   template: `
   <div class="bg-slate-100 py-10">
@@ -29,7 +36,7 @@ const Template = (args) => ({
       <BaseTabs v-bind="args">
         <BaseTabItem to="/" v-slot="{active}">
           <div class="flex items-center">
-            <span class="mr-1">Home</span>
+            <span class="mr-1">{{ label }}</span>
             <BaseCounter 
               :size="['lg', 'md'].includes(args.size) ? 'sm' : 'xs'" 
               :color="active ? 'primary' : 'light'" 

package/src/components/BaseTabs.vue

@@ -25,6 +25,8 @@
 </template>
 
 <script lang="ts" setup>
+import { debounce } from 'lodash';
+
 const props = withDefaults(
   defineProps<{
     size?: 'xs' | 'sm' | 'md' | 'lg';
@@ -52,6 +54,12 @@ provide(
   computed(() => props.size)
 );
 
+provide(
+  'tabs:animate',
+  debounce(animateLine, 100)
+);
+
+
 function getActiveTab(): HTMLElement | null {
 
   if (!scrollable.value) {