@ramathibodi/nuxt-commons 4.0.12 → 4.0.13

package/dist/runtime/components/model/Table.vue

@@ -8,6 +8,7 @@ import { usePerPagePreference } from "../../composables/perPagePreference";
 import { useDialog } from "../../composables/dialog";
 import { useUserPermission } from "../../composables/userPermission";
 import { useModelAutoRefresh } from "../../composables/modelAutoRefresh";
+import { shouldVirtualize } from "../../utils/virtualize";
 import { useState } from "#imports";
 defineOptions({
   inheritAttrs: false
@@ -29,6 +30,7 @@ const props = defineProps({
   search: { type: String, required: false },
   saveAndStay: { type: Boolean, required: false, default: false },
   stringFields: { type: Array, required: false, default: () => [] },
+  importConcurrency: { type: Number, required: false, default: 3 },
   onlyOwnerEdit: { type: Boolean, required: false, default: false },
   onlyOwnerOverridePermission: { type: [String, Array], required: false },
   api: { type: Boolean, required: false, default: false },
@@ -37,6 +39,9 @@ const props = defineProps({
   autoRefresh: { type: [Number, Boolean], required: false, default: false },
   autoRefreshDefault: { type: Number, required: false, default: 60 },
   autoRefreshControl: { type: Boolean, required: false, default: true },
+  virtual: { type: Boolean, required: false, default: void 0 },
+  virtualThreshold: { type: Number, required: false, default: 500 },
+  virtualHeight: { type: [Number, String], required: false, default: "70vh" },
   modelName: { type: String, required: true },
   modelKey: { type: String, required: false, default: "id" },
   modelBy: { type: Object, required: false, default: void 0 },
@@ -74,6 +79,7 @@ const {
   itemsLength,
   search,
   setSearch,
+  currentOptions,
   canServerPageable,
   canServerSearch,
   canCreate,
@@ -85,7 +91,8 @@ const {
   deleteItem,
   loadItems,
   reload,
-  isLoading
+  isLoading,
+  importProgress
 } = props.api ? useApiModel(props) : useGraphqlModel(props);
 const { autoRefresh, manualReload } = useModelAutoRefresh(props, {
   reload,
@@ -136,13 +143,25 @@ const canEditRow = function(item) {
   return true;
 };
 const operation = ref({ openDialog, openDialogReadonly, createItem, importItems, updateItem, deleteItem, reload, setSearch, canServerPageable, canServerSearch, canCreate, canUpdate, canDelete, canEditRow, onlyOwnerEdit: props.onlyOwnerEdit, onlyOwnerOverridePermission: props.onlyOwnerOverridePermission, autoRefresh: markRaw(autoRefresh) });
+const useVirtual = computed(() => shouldVirtualize(items.value.length, props.virtual, props.virtualThreshold));
+const virtualPerPageOptions = computed(
+  () => plainAttrs.value["items-per-page-options"] ?? plainAttrs.value["itemsPerPageOptions"] ?? [{ value: 25, title: "25" }, { value: 50, title: "50" }, { value: 100, title: "100" }, { value: -1, title: "All" }]
+);
+function onVirtualPerPageChange(value) {
+  itemsPerPageInternal.value = value;
+  loadItems({
+    page: 1,
+    itemsPerPage: Number(value),
+    sortBy: currentOptions.value?.sortBy ?? []
+  });
+}
 const computedInitialData = computed(() => {
   return Object.assign({}, props.initialData, props.modelBy);
 });
 watch(() => props.search, () => {
   search.value = props.search;
 }, { immediate: true });
-defineExpose({ reload, operation, items, autoRefresh });
+defineExpose({ reload, operation, items, autoRefresh, importProgress });
 </script>
 
 <template>
@@ -233,7 +252,7 @@ defineExpose({ reload, operation, items, autoRefresh });
       </VToolbar>
     </slot>
     <v-data-table-server
-      v-if="canServerPageable"
+      v-if="canServerPageable && !useVirtual"
       v-bind="plainAttrs"
       v-model:items-per-page="itemsPerPageInternal"
       color="primary"
@@ -283,6 +302,72 @@ defineExpose({ reload, operation, items, autoRefresh });
         />
       </template>
     </v-data-table-server>
+    <v-data-table-virtual
+      v-else-if="useVirtual"
+      v-bind="plainAttrs"
+      color="primary"
+      :items="items"
+      :item-value="props.modelKey"
+      :search="search"
+      :loading="isLoading"
+      :height="props.virtualHeight"
+      fixed-header
+    >
+      <!-- @ts-ignore -->
+      <template
+        v-for="(_, name, index) in $slots"
+        :key="index"
+        #[name]="slotData"
+      >
+        <slot
+          :name="name"
+          v-bind="slotData || {}"
+          :operation="operation"
+        />
+      </template>
+      <!-- action-column: keep in sync with the v-data-table-server and v-data-table branches -->
+      <template
+        v-if="!$slots['item.action']"
+        #item.action="{ item }"
+      >
+        <v-btn
+            v-if="!canUpdate || !canEditRow(item)"
+            variant="flat"
+            density="compact"
+            icon="mdi mdi-note-search"
+            @click="openDialogReadonly(item)"
+        />
+        <v-btn
+          v-if="canUpdate && canEditRow(item)"
+          variant="flat"
+          density="compact"
+          icon="mdi mdi-note-edit"
+          @click="openDialog(item)"
+        />
+        <v-btn
+          v-if="canDelete && canEditRow(item)"
+          variant="flat"
+          density="compact"
+          icon="mdi mdi-delete"
+          @click="confirmDeleteItem(item)"
+        />
+      </template>
+      <template #bottom>
+        <div class="d-flex align-center justify-end pa-2 ga-3">
+          <span class="text-caption text-medium-emphasis">{{ items.length }} rows</span>
+          <v-select
+            :model-value="itemsPerPageInternal"
+            :items="virtualPerPageOptions"
+            label="Items per page"
+            density="compact"
+            variant="outlined"
+            hide-details
+            style="max-width: 130px"
+            @update:model-value="onVirtualPerPageChange"
+          />
+        </div>
+      </template>
+    </v-data-table-virtual>
     <v-data-table
       v-else
       v-bind="plainAttrs"
@@ -373,5 +458,23 @@ defineExpose({ reload, operation, items, autoRefresh });
         />
       </template>
     </FormDialog>
+    <slot
+      name="importProgress"
+      :is-importing="importProgress.isImporting.value"
+      :total="importProgress.total.value"
+      :processed="importProgress.processed.value"
+      :succeeded="importProgress.succeeded.value"
+      :failed="importProgress.failed.value"
+      :percent="importProgress.percent.value"
+    >
+      <DialogImportProgress
+        :model-value="importProgress.isImporting.value"
+        :total="importProgress.total.value"
+        :processed="importProgress.processed.value"
+        :succeeded="importProgress.succeeded.value"
+        :failed="importProgress.failed.value"
+        :percent="importProgress.percent.value"
+      />
+    </slot>
   </v-card>
 </template>

package/dist/runtime/components/model/Table.vue.d.ts

@@ -18,6 +18,7 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props
     search?: string;
     saveAndStay?: boolean;
     stringFields?: Array<string>;
+    importConcurrency?: number;
     onlyOwnerEdit?: boolean;
     onlyOwnerOverridePermission?: string | string[];
     api?: boolean;
@@ -26,6 +27,9 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props
     autoRefresh?: number | boolean;
     autoRefreshDefault?: number;
     autoRefreshControl?: boolean;
+    virtual?: boolean;
+    virtualThreshold?: number;
+    virtualHeight?: number | string;
 }
 /**
  * Public props accepted by ModelTable.
@@ -40,7 +44,7 @@ declare var __VLS_8: {
         openDialog: typeof openDialog;
         openDialogReadonly: typeof openDialogReadonly;
         createItem: ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<any>);
-        importItems: ((importItems: Record<string, any>[], callback?: FormDialogCallback) => void) | ((importItemsList: Record<string, any>[], callback?: FormDialogCallback) => void);
+        importItems: ((importData: Record<string, any>[], callback?: FormDialogCallback) => void) | ((importData: Record<string, any>[], callback?: FormDialogCallback) => void);
         updateItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
         deleteItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
         reload: (() => Promise<void> | undefined) | (() => Promise<void>);
@@ -73,7 +77,7 @@ declare var __VLS_8: {
         openDialog: typeof openDialog;
         openDialogReadonly: typeof openDialogReadonly;
         createItem: ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<any>);
-        importItems: ((importItems: Record<string, any>[], callback?: FormDialogCallback) => void) | ((importItemsList: Record<string, any>[], callback?: FormDialogCallback) => void);
+        importItems: ((importData: Record<string, any>[], callback?: FormDialogCallback) => void) | ((importData: Record<string, any>[], callback?: FormDialogCallback) => void);
         updateItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
         deleteItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
         reload: (() => Promise<void> | undefined) | (() => Promise<void>);
@@ -94,7 +98,7 @@ declare var __VLS_8: {
         openDialog: typeof openDialog;
         openDialogReadonly: typeof openDialogReadonly;
         createItem: ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<any>);
-        importItems: ((importItems: Record<string, any>[], callback?: FormDialogCallback) => void) | ((importItemsList: Record<string, any>[], callback?: FormDialogCallback) => void);
+        importItems: ((importData: Record<string, any>[], callback?: FormDialogCallback) => void) | ((importData: Record<string, any>[], callback?: FormDialogCallback) => void);
         updateItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
         deleteItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
         reload: (() => Promise<void> | undefined) | (() => Promise<void>);
@@ -114,7 +118,7 @@ declare var __VLS_8: {
         openDialog: typeof openDialog;
         openDialogReadonly: typeof openDialogReadonly;
         createItem: ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<any>);
-        importItems: ((importItems: Record<string, any>[], callback?: FormDialogCallback) => void) | ((importItemsList: Record<string, any>[], callback?: FormDialogCallback) => void);
+        importItems: ((importData: Record<string, any>[], callback?: FormDialogCallback) => void) | ((importData: Record<string, any>[], callback?: FormDialogCallback) => void);
         updateItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
         deleteItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
         reload: (() => Promise<void> | undefined) | (() => Promise<void>);
@@ -134,7 +138,7 @@ declare var __VLS_8: {
         openDialog: typeof openDialog;
         openDialogReadonly: typeof openDialogReadonly;
         createItem: ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<any>);
-        importItems: ((importItems: Record<string, any>[], callback?: FormDialogCallback) => void) | ((importItemsList: Record<string, any>[], callback?: FormDialogCallback) => void);
+        importItems: ((importData: Record<string, any>[], callback?: FormDialogCallback) => void) | ((importData: Record<string, any>[], callback?: FormDialogCallback) => void);
         updateItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
         deleteItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
         reload: (() => Promise<void> | undefined) | (() => Promise<void>);
@@ -149,11 +153,40 @@ declare var __VLS_8: {
         onlyOwnerOverridePermission: string | string[] | undefined;
         autoRefresh: import("vue").Raw<import("#imports").UseAutoRefreshHandle>;
     };
-}, __VLS_171: any, __VLS_174: any, __VLS_177: any;
+}, __VLS_176: never, __VLS_177: {
+    operation: {
+        openDialog: typeof openDialog;
+        openDialogReadonly: typeof openDialogReadonly;
+        createItem: ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<any>);
+        importItems: ((importData: Record<string, any>[], callback?: FormDialogCallback) => void) | ((importData: Record<string, any>[], callback?: FormDialogCallback) => void);
+        updateItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
+        deleteItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
+        reload: (() => Promise<void> | undefined) | (() => Promise<void>);
+        setSearch: ((keyword: string) => void) | ((keyword: string) => void);
+        canServerPageable: boolean;
+        canServerSearch: boolean;
+        canCreate: boolean;
+        canUpdate: boolean;
+        canDelete: boolean;
+        canEditRow: (item: Record<string, any>) => boolean;
+        onlyOwnerEdit: boolean;
+        onlyOwnerOverridePermission: string | string[] | undefined;
+        autoRefresh: import("vue").Raw<import("#imports").UseAutoRefreshHandle>;
+    };
+}, __VLS_212: any, __VLS_215: any, __VLS_218: any, __VLS_220: {
+    isImporting: boolean;
+    total: number;
+    processed: number;
+    succeeded: number;
+    failed: number;
+    percent: number;
+};
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_102>]?: (props: typeof __VLS_103) => any;
 } & {
     [K in NonNullable<typeof __VLS_135>]?: (props: typeof __VLS_136) => any;
+} & {
+    [K in NonNullable<typeof __VLS_176>]?: (props: typeof __VLS_177) => any;
 } & {
     header?: (props: typeof __VLS_8) => any;
 } & {
@@ -165,11 +198,13 @@ type __VLS_Slots = {} & {
 } & {
     toolbarItems?: (props: typeof __VLS_70) => any;
 } & {
-    form?: (props: typeof __VLS_171) => any;
+    form?: (props: typeof __VLS_212) => any;
 } & {
-    formTitle?: (props: typeof __VLS_174) => any;
+    formTitle?: (props: typeof __VLS_215) => any;
 } & {
-    formAction?: (props: typeof __VLS_177) => any;
+    formAction?: (props: typeof __VLS_218) => any;
+} & {
+    importProgress?: (props: typeof __VLS_220) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
     noDataText: string;
@@ -184,19 +219,23 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     modelBy: undefined;
     fields: () => never[];
     stringFields: () => never[];
+    importConcurrency: number;
     onlyOwnerEdit: boolean;
     api: boolean;
     perPageStorageEnabled: boolean;
     autoRefresh: boolean;
     autoRefreshDefault: number;
     autoRefreshControl: boolean;
+    virtual: undefined;
+    virtualThreshold: number;
+    virtualHeight: string;
 }>>, {
     reload: (() => Promise<void> | undefined) | (() => Promise<void>);
     operation: import("vue").Ref<{
         openDialog: typeof openDialog;
         openDialogReadonly: typeof openDialogReadonly;
         createItem: ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<any>);
-        importItems: ((importItems: Record<string, any>[], callback?: FormDialogCallback) => void) | ((importItemsList: Record<string, any>[], callback?: FormDialogCallback) => void);
+        importItems: ((importData: Record<string, any>[], callback?: FormDialogCallback) => void) | ((importData: Record<string, any>[], callback?: FormDialogCallback) => void);
         updateItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
         deleteItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
         reload: (() => Promise<void> | undefined) | (() => Promise<void>);
@@ -214,7 +253,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         openDialog: typeof openDialog;
         openDialogReadonly: typeof openDialogReadonly;
         createItem: ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<any>);
-        importItems: ((importItems: Record<string, any>[], callback?: FormDialogCallback) => void) | ((importItemsList: Record<string, any>[], callback?: FormDialogCallback) => void);
+        importItems: ((importData: Record<string, any>[], callback?: FormDialogCallback) => void) | ((importData: Record<string, any>[], callback?: FormDialogCallback) => void);
         updateItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
         deleteItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
         reload: (() => Promise<void> | undefined) | (() => Promise<void>);
@@ -232,7 +271,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         openDialog: typeof openDialog;
         openDialogReadonly: typeof openDialogReadonly;
         createItem: ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<any>);
-        importItems: ((importItems: Record<string, any>[], callback?: FormDialogCallback) => void) | ((importItemsList: Record<string, any>[], callback?: FormDialogCallback) => void);
+        importItems: ((importData: Record<string, any>[], callback?: FormDialogCallback) => void) | ((importData: Record<string, any>[], callback?: FormDialogCallback) => void);
         updateItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
         deleteItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
         reload: (() => Promise<void> | undefined) | (() => Promise<void>);
@@ -249,6 +288,30 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     }>;
     items: import("vue").Ref<Record<string, any>[], Record<string, any>[]>;
     autoRefresh: import("#imports").UseAutoRefreshHandle;
+    importProgress: {
+        isImporting: import("vue").Ref<boolean, boolean>;
+        total: import("vue").Ref<number, number>;
+        processed: import("vue").Ref<number, number>;
+        succeeded: import("vue").Ref<number, number>;
+        failed: import("vue").Ref<number, number>;
+        errors: import("vue").Ref<{
+            index: number;
+            message: string;
+        }[], import("#imports").ImportError[] | {
+            index: number;
+            message: string;
+        }[]>;
+        percent: import("vue").ComputedRef<number>;
+        reset: () => void;
+        run: <T = any>(items: T[], worker: import("#imports").ImportWorker<T>, options?: {
+            concurrency
+            /**
+             * ModelTable connects model metadata to reusable selection, labeling, iterator, or table UI patterns.
+             * This doc block is consumed by vue-docgen for generated API documentation.
+             */
+            ?: number;
+        }) => Promise<import("#imports").ImportSummary>;
+    };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     delete: (...args: any[]) => void;
     create: (...args: any[]) => void;
@@ -268,12 +331,16 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     modelBy: undefined;
     fields: () => never[];
     stringFields: () => never[];
+    importConcurrency: number;
     onlyOwnerEdit: boolean;
     api: boolean;
     perPageStorageEnabled: boolean;
     autoRefresh: boolean;
     autoRefreshDefault: number;
     autoRefreshControl: boolean;
+    virtual: undefined;
+    virtualThreshold: number;
+    virtualHeight: string;
 }>>> & Readonly<{
     onDelete?: ((...args: any[]) => any) | undefined;
     onCreate?: ((...args: any[]) => any) | undefined;