sprintify-ui 0.8.6 → 0.8.8

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

@@ -19,9 +19,9 @@ declare const _default: import("vue").DefineComponent<{
                 checkedRows: import("@/index.js").Row[];
                 isRowCheckable: Function;
                 maxHeight: number;
+                rowKey: ((row: import("@/index.js").CollectionItem) => string | number) | undefined;
                 data: import("@/index.js").Row[];
                 visibleColumns: string[];
-                detailTransition: string;
             }> & Omit<{
                 readonly size: "xs" | "sm" | "md" | "lg" | "xl";
                 readonly loading: boolean;
@@ -33,11 +33,11 @@ declare const _default: import("vue").DefineComponent<{
                 readonly checkedRows: import("@/index.js").Row[];
                 readonly isRowCheckable: Function;
                 readonly data: import("@/index.js").Row[];
-                readonly detailTransition: string;
                 readonly rowTo?: ((row: import("@/index.js").CollectionItem) => import("vue-router").RouteLocationRaw) | undefined;
                 readonly rowHref?: ((row: import("@/index.js").CollectionItem) => string) | undefined;
                 readonly onRowClick?: ((row: import("@/index.js").CollectionItem, index: number, event: MouseEvent) => void) | undefined;
                 readonly maxHeight?: number | undefined;
+                readonly rowKey?: ((row: import("@/index.js").CollectionItem) => string | number) | undefined;
                 readonly visibleColumns?: string[] | undefined;
                 onCheck?: ((...args: any[]) => any) | undefined;
                 onSort?: ((...args: any[]) => any) | undefined;
@@ -89,10 +89,6 @@ declare const _default: import("vue").DefineComponent<{
                     type: FunctionConstructor;
                     default: () => boolean;
                 };
-                detailTransition: {
-                    type: StringConstructor;
-                    default: string;
-                };
                 maxHeight: {
                     default: undefined;
                     type: NumberConstructor;
@@ -113,6 +109,10 @@ declare const _default: import("vue").DefineComponent<{
                     default: undefined;
                     type: PropType<((row: import("@/index.js").CollectionItem, index: number, event: MouseEvent) => void) | undefined>;
                 };
+                rowKey: {
+                    default: undefined;
+                    type: PropType<((row: import("@/index.js").CollectionItem) => string | number) | undefined>;
+                };
             }>> & {
                 onCheck?: ((...args: any[]) => any) | undefined;
                 onSort?: ((...args: any[]) => any) | undefined;
@@ -123,7 +123,7 @@ declare const _default: import("vue").DefineComponent<{
                 "onUpdate:openedDetailed"?: ((...args: any[]) => any) | undefined;
                 "onCell-click"?: ((...args: any[]) => any) | undefined;
                 "onRow-click"?: ((...args: any[]) => any) | undefined;
-            }, "size" | "loading" | "sortField" | "sortDirection" | "rowTo" | "rowHref" | "onRowClick" | "detailed" | "hasDetailedVisible" | "checkable" | "checkedRows" | "isRowCheckable" | "maxHeight" | "data" | "visibleColumns" | "detailTransition">;
+            }, "size" | "loading" | "sortField" | "sortDirection" | "rowTo" | "rowHref" | "onRowClick" | "detailed" | "hasDetailedVisible" | "checkable" | "checkedRows" | "isRowCheckable" | "maxHeight" | "rowKey" | "data" | "visibleColumns">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -178,10 +178,6 @@ declare const _default: import("vue").DefineComponent<{
                     type: FunctionConstructor;
                     default: () => boolean;
                 };
-                detailTransition: {
-                    type: StringConstructor;
-                    default: string;
-                };
                 maxHeight: {
                     default: undefined;
                     type: NumberConstructor;
@@ -202,6 +198,10 @@ declare const _default: import("vue").DefineComponent<{
                     default: undefined;
                     type: PropType<((row: import("@/index.js").CollectionItem, index: number, event: MouseEvent) => void) | undefined>;
                 };
+                rowKey: {
+                    default: undefined;
+                    type: PropType<((row: import("@/index.js").CollectionItem) => string | number) | undefined>;
+                };
             }>> & {
                 onCheck?: ((...args: any[]) => any) | undefined;
                 onSort?: ((...args: any[]) => any) | undefined;
@@ -262,9 +262,9 @@ declare const _default: import("vue").DefineComponent<{
                 checkedRows: import("@/index.js").Row[];
                 isRowCheckable: Function;
                 maxHeight: number;
+                rowKey: ((row: import("@/index.js").CollectionItem) => string | number) | undefined;
                 data: import("@/index.js").Row[];
                 visibleColumns: string[];
-                detailTransition: string;
             }, {}, string, {}> & {
                 beforeCreate?: ((() => void) | (() => void)[]) | undefined;
                 created?: ((() => void) | (() => void)[]) | undefined;
@@ -326,10 +326,6 @@ declare const _default: import("vue").DefineComponent<{
                 type: FunctionConstructor;
                 default: () => boolean;
             };
-            detailTransition: {
-                type: StringConstructor;
-                default: string;
-            };
             maxHeight: {
                 default: undefined;
                 type: NumberConstructor;
@@ -350,6 +346,10 @@ declare const _default: import("vue").DefineComponent<{
                 default: undefined;
                 type: PropType<((row: import("@/index.js").CollectionItem, index: number, event: MouseEvent) => void) | undefined>;
             };
+            rowKey: {
+                default: undefined;
+                type: PropType<((row: import("@/index.js").CollectionItem) => string | number) | undefined>;
+            };
         }>> & {
             onCheck?: ((...args: any[]) => any) | undefined;
             onSort?: ((...args: any[]) => any) | undefined;
@@ -423,9 +423,9 @@ declare const _default: import("vue").DefineComponent<{
                 checkedRows: import("@/index.js").Row[];
                 isRowCheckable: Function;
                 maxHeight: number;
+                rowKey: ((row: import("@/index.js").CollectionItem) => string | number) | undefined;
                 data: import("@/index.js").Row[];
                 visibleColumns: string[];
-                detailTransition: string;
             }> & Omit<{
                 readonly size: "xs" | "sm" | "md" | "lg" | "xl";
                 readonly loading: boolean;
@@ -437,11 +437,11 @@ declare const _default: import("vue").DefineComponent<{
                 readonly checkedRows: import("@/index.js").Row[];
                 readonly isRowCheckable: Function;
                 readonly data: import("@/index.js").Row[];
-                readonly detailTransition: string;
                 readonly rowTo?: ((row: import("@/index.js").CollectionItem) => import("vue-router").RouteLocationRaw) | undefined;
                 readonly rowHref?: ((row: import("@/index.js").CollectionItem) => string) | undefined;
                 readonly onRowClick?: ((row: import("@/index.js").CollectionItem, index: number, event: MouseEvent) => void) | undefined;
                 readonly maxHeight?: number | undefined;
+                readonly rowKey?: ((row: import("@/index.js").CollectionItem) => string | number) | undefined;
                 readonly visibleColumns?: string[] | undefined;
                 onCheck?: ((...args: any[]) => any) | undefined;
                 onSort?: ((...args: any[]) => any) | undefined;
@@ -493,10 +493,6 @@ declare const _default: import("vue").DefineComponent<{
                     type: FunctionConstructor;
                     default: () => boolean;
                 };
-                detailTransition: {
-                    type: StringConstructor;
-                    default: string;
-                };
                 maxHeight: {
                     default: undefined;
                     type: NumberConstructor;
@@ -517,6 +513,10 @@ declare const _default: import("vue").DefineComponent<{
                     default: undefined;
                     type: PropType<((row: import("@/index.js").CollectionItem, index: number, event: MouseEvent) => void) | undefined>;
                 };
+                rowKey: {
+                    default: undefined;
+                    type: PropType<((row: import("@/index.js").CollectionItem) => string | number) | undefined>;
+                };
             }>> & {
                 onCheck?: ((...args: any[]) => any) | undefined;
                 onSort?: ((...args: any[]) => any) | undefined;
@@ -527,7 +527,7 @@ declare const _default: import("vue").DefineComponent<{
                 "onUpdate:openedDetailed"?: ((...args: any[]) => any) | undefined;
                 "onCell-click"?: ((...args: any[]) => any) | undefined;
                 "onRow-click"?: ((...args: any[]) => any) | undefined;
-            }, "size" | "loading" | "sortField" | "sortDirection" | "rowTo" | "rowHref" | "onRowClick" | "detailed" | "hasDetailedVisible" | "checkable" | "checkedRows" | "isRowCheckable" | "maxHeight" | "data" | "visibleColumns" | "detailTransition">;
+            }, "size" | "loading" | "sortField" | "sortDirection" | "rowTo" | "rowHref" | "onRowClick" | "detailed" | "hasDetailedVisible" | "checkable" | "checkedRows" | "isRowCheckable" | "maxHeight" | "rowKey" | "data" | "visibleColumns">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -582,10 +582,6 @@ declare const _default: import("vue").DefineComponent<{
                     type: FunctionConstructor;
                     default: () => boolean;
                 };
-                detailTransition: {
-                    type: StringConstructor;
-                    default: string;
-                };
                 maxHeight: {
                     default: undefined;
                     type: NumberConstructor;
@@ -606,6 +602,10 @@ declare const _default: import("vue").DefineComponent<{
                     default: undefined;
                     type: PropType<((row: import("@/index.js").CollectionItem, index: number, event: MouseEvent) => void) | undefined>;
                 };
+                rowKey: {
+                    default: undefined;
+                    type: PropType<((row: import("@/index.js").CollectionItem) => string | number) | undefined>;
+                };
             }>> & {
                 onCheck?: ((...args: any[]) => any) | undefined;
                 onSort?: ((...args: any[]) => any) | undefined;
@@ -666,9 +666,9 @@ declare const _default: import("vue").DefineComponent<{
                 checkedRows: import("@/index.js").Row[];
                 isRowCheckable: Function;
                 maxHeight: number;
+                rowKey: ((row: import("@/index.js").CollectionItem) => string | number) | undefined;
                 data: import("@/index.js").Row[];
                 visibleColumns: string[];
-                detailTransition: string;
             }, {}, string, {}> & {
                 beforeCreate?: ((() => void) | (() => void)[]) | undefined;
                 created?: ((() => void) | (() => void)[]) | undefined;
@@ -730,10 +730,6 @@ declare const _default: import("vue").DefineComponent<{
                 type: FunctionConstructor;
                 default: () => boolean;
             };
-            detailTransition: {
-                type: StringConstructor;
-                default: string;
-            };
             maxHeight: {
                 default: undefined;
                 type: NumberConstructor;
@@ -754,6 +750,10 @@ declare const _default: import("vue").DefineComponent<{
                 default: undefined;
                 type: PropType<((row: import("@/index.js").CollectionItem, index: number, event: MouseEvent) => void) | undefined>;
             };
+            rowKey: {
+                default: undefined;
+                type: PropType<((row: import("@/index.js").CollectionItem) => string | number) | undefined>;
+            };
         }>> & {
             onCheck?: ((...args: any[]) => any) | undefined;
             onSort?: ((...args: any[]) => any) | undefined;

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

@@ -228,6 +228,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
         type: PropType<"section" | "top">;
     };
+    /**
+     * Row key. Used to identify rows for faster rendering.
+     * If not provided, it will use the id, key or uuid, or create a hash from the row object.
+     */
+    rowKey: {
+        default: undefined;
+        type: PropType<(row: CollectionItem) => string | number>;
+    };
 }, {
     fetch: typeof fetch;
     fetchWithoutLoading: typeof fetchWithoutLoading;
@@ -460,6 +468,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
         type: PropType<"section" | "top">;
     };
+    /**
+     * Row key. Used to identify rows for faster rendering.
+     * If not provided, it will use the id, key or uuid, or create a hash from the row object.
+     */
+    rowKey: {
+        default: undefined;
+        type: PropType<(row: CollectionItem) => string | number>;
+    };
 }>> & {
     onDelete?: ((...args: any[]) => any) | undefined;
     "onUpdate:checked-rows"?: ((...args: any[]) => any) | undefined;
@@ -498,6 +514,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     maxHeight: number;
     rowActions: RowAction[];
     numberOfVisibleRowActions: number;
+    rowKey: (row: CollectionItem) => string | number;
 }, {}>, Partial<Record<string, (_: {}) => any>> & {
     default?(_: {}): any;
     detail?(_: {

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

@@ -58,10 +58,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: FunctionConstructor;
         default: () => boolean;
     };
-    detailTransition: {
-        type: StringConstructor;
-        default: string;
-    };
     maxHeight: {
         default: undefined;
         type: NumberConstructor;
@@ -82,6 +78,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
         type: PropType<((row: CollectionItem, index: number, event: MouseEvent) => void) | undefined>;
     };
+    rowKey: {
+        default: undefined;
+        type: PropType<((row: CollectionItem) => string | number) | undefined>;
+    };
 }, {
     newColumns: import("vue").ComputedRef<{
         id: string;
@@ -171,10 +171,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: FunctionConstructor;
         default: () => boolean;
     };
-    detailTransition: {
-        type: StringConstructor;
-        default: string;
-    };
     maxHeight: {
         default: undefined;
         type: NumberConstructor;
@@ -195,6 +191,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
         type: PropType<((row: CollectionItem, index: number, event: MouseEvent) => void) | undefined>;
     };
+    rowKey: {
+        default: undefined;
+        type: PropType<((row: CollectionItem) => string | number) | undefined>;
+    };
 }>> & {
     onCheck?: ((...args: any[]) => any) | undefined;
     onSort?: ((...args: any[]) => any) | undefined;
@@ -219,9 +219,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     checkedRows: Row[];
     isRowCheckable: Function;
     maxHeight: number;
+    rowKey: ((row: CollectionItem) => string | number) | undefined;
     data: Row[];
     visibleColumns: string[];
-    detailTransition: string;
 }, {}>, {
     default?(_: {}): any;
     detail?(_: {

package/package.json

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

package/src/components/BaseDataTable.stories.js

@@ -337,4 +337,5 @@ localProps.url = null;
 localProps.perPage = 4;
 localProps.rowTo = undefined;
 localProps.maxHeight = undefined;
-Local.args = localProps;
+localProps.rowKey = (row) => row.value;
+Local.args = localProps;

package/src/components/BaseDataTable.vue

@@ -82,6 +82,7 @@
           :size="sizeInternal.size.value"
           :row-to="rowToInternal"
           :row-href="rowHref"
+          :row-key="rowKey"
           @update:checked-rows="onCheckedRowsUpdate"
           @sort="dataIteratorProps.onSortChange"
           @row-click="onRowClick"
@@ -532,6 +533,15 @@ const props = defineProps({
     default: 'section',
     type: String as PropType<'top' | 'section'>,
   },
+
+  /**
+   * Row key. Used to identify rows for faster rendering. 
+   * If not provided, it will use the id, key or uuid, or create a hash from the row object.
+   */
+  rowKey: {
+    default: undefined,
+    type: Function as PropType<(row: CollectionItem) => string | number>,
+  },
 });
 
 const sizeInternal = useInputSize(props.size);

package/src/components/BaseDataTableTemplate.vue

@@ -166,22 +166,20 @@
             </BaseTableCell>
           </BaseTableRow>
 
-          <transition :name="detailTransition">
-            <BaseTableRow
-              v-if="isActiveDetailRow(row)"
-              :key="getRowKey(row) + 'detail'"
+          <BaseTableRow
+            v-if="isActiveDetailRow(row)"
+            :key="getRowKey(row) + 'detail'"
+          >
+            <BaseTableCell
+              :colspan="columnCount"
             >
-              <BaseTableCell
-                :colspan="columnCount"
-              >
-                <slot
-                  name="detail"
-                  :row="row"
-                  :index="index"
-                />
-              </BaseTableCell>
-            </BaseTableRow>
-          </transition>
+              <slot
+                name="detail"
+                :row="row"
+                :index="index"
+              />
+            </BaseTableCell>
+          </BaseTableRow>
         </template>
 
         <BaseTableRow v-if="data.length == 0">
@@ -272,11 +270,6 @@ const props = defineProps({
     type: Function,
     default: () => true,
   },
-  /* Transition name to use when toggling row details. */
-  detailTransition: {
-    type: String,
-    default: '',
-  },
   /* Max height (in px) */
   maxHeight: {
     default: undefined,
@@ -298,6 +291,10 @@ const props = defineProps({
     default: undefined,
     type: Function as PropType<((row: CollectionItem, index: number, event: MouseEvent) => void) | undefined>,
   },
+  rowKey: {
+    default: undefined,
+    type: Function as PropType<((row: CollectionItem) => string | number) | undefined>,
+  },
 });
 
 const emit = defineEmits([
@@ -689,17 +686,44 @@ function nextSequence() {
   return sequence.value++;
 }
 
+let warningNoRowKeyFoundShown = false;
+
 function getRowKey(row: Row): string {
+
+  if (props.rowKey) {
+    return props.rowKey(row) + '';
+  }
+
   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) or use the row-key props to specify a unique key.', '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);