@caido-utils/components 0.4.1 → 0.5.0

package/dist/DataTable/Container.d.vue.ts

@@ -12,11 +12,15 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<__VLS_With
     activeRow?: Record<string, unknown> | null;
     scrollKey?: string;
     dataKey?: string;
+    loading?: boolean;
+    loadingRows?: number;
 }>, {
     rowHeight: number;
     selectable: boolean;
     selection: () => never[];
     activeRow: null;
+    loading: boolean;
+    loadingRows: number;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
     items: Record<string, unknown>[];
     columns: {
@@ -31,16 +35,22 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<__VLS_With
     activeRow?: Record<string, unknown> | null;
     scrollKey?: string;
     dataKey?: string;
+    loading?: boolean;
+    loadingRows?: number;
 }>, {
     rowHeight: number;
     selectable: boolean;
     selection: () => never[];
     activeRow: null;
+    loading: boolean;
+    loadingRows: number;
 }>>>, {
+    loading: boolean;
     rowHeight: number;
     selectable: boolean | "single" | "multiple";
     selection: Record<string, unknown>[] | null;
     activeRow: Record<string, unknown> | null;
+    loadingRows: number;
 }, {}>, {
     [x: string]: ((props: {
         item: any;

package/dist/DataTable/Container.vue

@@ -7,6 +7,7 @@ const ROW_HEIGHT = 25;
 import DataTable from "primevue/datatable";
 import Column from "primevue/column";
 import Checkbox from "primevue/checkbox";
+import Skeleton from "primevue/skeleton";
 import {
   ref,
   computed,
@@ -34,12 +35,16 @@ const props = withDefaults(
     activeRow?: Record<string, unknown> | null;
     scrollKey?: string;
     dataKey?: string;
+    loading?: boolean;
+    loadingRows?: number;
   }>(),
   {
     rowHeight: ROW_HEIGHT,
     selectable: false,
     selection: () => [],
     activeRow: null,
+    loading: false,
+    loadingRows: 10,
   },
 );
 
@@ -62,7 +67,9 @@ let resizeObserver: ResizeObserver | undefined;
 onMounted(() => {
   if (!containerRef.value) return;
   resizeObserver = new ResizeObserver((entries) => {
-    if (entries[0] && entries[0].contentRect.height > 0) {
+    const height = entries[0]?.contentRect.height ?? 0;
+    if (height > 0) {
+      containerHeight.value = height;
       tableKey.value++;
       resizeObserver?.disconnect();
     }
@@ -213,6 +220,18 @@ function activeRowClass(data: Record<string, unknown>): string {
   return "";
 }
 
+const containerHeight = ref(0);
+
+const autoLoadingRows = computed(() =>
+  containerHeight.value > 0
+    ? Math.floor(containerHeight.value / props.rowHeight)
+    : props.loadingRows,
+);
+
+const skeletonItems = computed(() =>
+  Array.from({ length: autoLoadingRows.value }, (_, i) => ({ _skeletonId: i })),
+);
+
 const tablePt = {};
 
 const tablePtOptions = {
@@ -239,7 +258,7 @@ const columnPt = {
   <div ref="containerRef" class="h-full min-h-0">
     <DataTable
       :key="tableKey"
-      :value="items"
+      :value="loading ? skeletonItems : items"
       scrollable
       scrollHeight="flex"
       size="small"
@@ -284,8 +303,10 @@ const columnPt = {
             ]"
           />
         </template>
-        <template v-if="$slots[`cell-${col.field}`]" #body="{ data }">
+        <template #body="{ data }">
+          <Skeleton v-if="loading" />
           <slot
+            v-else-if="$slots[`cell-${col.field}`]"
             :name="`cell-${col.field}`"
             :item="data"
             :value="data[col.field]"

package/dist/DataTable/Container.vue.d.ts

@@ -12,11 +12,15 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<__VLS_With
     activeRow?: Record<string, unknown> | null;
     scrollKey?: string;
     dataKey?: string;
+    loading?: boolean;
+    loadingRows?: number;
 }>, {
     rowHeight: number;
     selectable: boolean;
     selection: () => never[];
     activeRow: null;
+    loading: boolean;
+    loadingRows: number;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
     items: Record<string, unknown>[];
     columns: {
@@ -31,16 +35,22 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<__VLS_With
     activeRow?: Record<string, unknown> | null;
     scrollKey?: string;
     dataKey?: string;
+    loading?: boolean;
+    loadingRows?: number;
 }>, {
     rowHeight: number;
     selectable: boolean;
     selection: () => never[];
     activeRow: null;
+    loading: boolean;
+    loadingRows: number;
 }>>>, {
+    loading: boolean;
     rowHeight: number;
     selectable: boolean | "single" | "multiple";
     selection: Record<string, unknown>[] | null;
     activeRow: Record<string, unknown> | null;
+    loadingRows: number;
 }, {}>, {
     [x: string]: ((props: {
         item: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caido-utils/components",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "type": "module",
   "files": [
     "dist"