@ramathibodi/nuxt-commons 4.0.10 → 4.0.12

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

@@ -1,5 +1,6 @@
 <script setup>
-import { computed, nextTick, ref, useAttrs, useSlots, watch } from "vue";
+import { computed, nextTick, ref, markRaw, useAttrs, useSlots, watch } from "vue";
+import { useModelAutoRefresh } from "../../composables/modelAutoRefresh";
 import { VDataIterator } from "vuetify/components/VDataIterator";
 import { VDataTable } from "vuetify/components/VDataTable";
 import { omit } from "lodash-es";
@@ -39,6 +40,9 @@ const props = defineProps({
   api: { type: Boolean, required: false, default: false },
   perPageStorageKey: { type: String, required: false },
   perPageStorageEnabled: { type: Boolean, required: false, default: true },
+  autoRefresh: { type: [Number, Boolean], required: false, default: false },
+  autoRefreshDefault: { type: Number, required: false, default: 60 },
+  autoRefreshControl: { type: Boolean, required: false, default: true },
   modelName: { type: String, required: true },
   modelKey: { type: String, required: false, default: "id" },
   modelBy: { type: Object, required: false, default: void 0 },
@@ -114,6 +118,11 @@ const {
   reload,
   isLoading
 } = props.api ? useApiModel(props) : useGraphqlModel(props);
+const { autoRefresh, manualReload } = useModelAutoRefresh(props, {
+  reload,
+  isLoading,
+  isDialogOpen
+});
 function openDialog(item) {
   currentItem.value = item;
   nextTick(() => {
@@ -158,7 +167,7 @@ watch(
   },
   { immediate: true }
 );
-const operation = ref({ openDialog, createItem, importItems, updateItem, deleteItem, reload, setSearch, canServerPageable, canServerSearch, canCreate, canUpdate, canDelete });
+const operation = ref({ openDialog, createItem, importItems, updateItem, deleteItem, reload, setSearch, canServerPageable, canServerSearch, canCreate, canUpdate, canDelete, autoRefresh: markRaw(autoRefresh) });
 const computedInitialData = computed(() => {
   return Object.assign({}, props.initialData, props.modelBy);
 });
@@ -169,7 +178,7 @@ const computedSkeletonPerPage = computed(() => {
 watch(() => props.search, () => {
   search.value = props.search;
 }, { immediate: true });
-defineExpose({ reload, operation });
+defineExpose({ reload, operation, autoRefresh });
 </script>
 
 <template>
@@ -256,16 +265,26 @@ defineExpose({ reload, operation });
                 <VToolbarTitle class="pl-3">
                   <slot
                     name="title"
-                    :reload="reload"
+                    :reload="manualReload"
                   >
                     {{ title }}
                     <v-icon
                       size="small"
-                      @click="reload"
+                      @click="manualReload"
                     >
                       mdi mdi-refresh
                     </v-icon>
                   </slot>
+                  <slot
+                    name="autoRefreshControl"
+                    v-bind="autoRefresh"
+                  >
+                    <ModelAutoRefreshChip
+                      v-if="props.autoRefreshControl"
+                      :control="autoRefresh"
+                      :color="toolbarColor"
+                    />
+                  </slot>
                 </VToolbarTitle>
               </v-col>
               <v-col cols="5">

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

@@ -29,6 +29,9 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VDataIterator['$pr
     api?: boolean;
     perPageStorageKey?: string;
     perPageStorageEnabled?: boolean;
+    autoRefresh?: number | boolean;
+    autoRefreshDefault?: number;
+    autoRefreshControl?: boolean;
 }
 /**
  * Public props accepted by ModelIterator.
@@ -39,17 +42,18 @@ declare function openDialog(item?: object): void;
 declare var __VLS_15: {
     operation: {
         openDialog: typeof openDialog;
-        createItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<any>;
-        importItems: (importItemsList: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void;
-        updateItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>;
-        deleteItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>;
-        reload: () => void;
-        setSearch: (keyword: string) => void;
+        createItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<void>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<any>);
+        importItems: ((importItems: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void) | ((importItemsList: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void);
+        updateItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<void>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>);
+        deleteItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").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;
+        autoRefresh: import("vue").Raw<import("../../composables/autoRefresh.js").UseAutoRefreshHandle>;
     };
     page: number;
     itemsPerPage: number;
@@ -75,17 +79,18 @@ declare var __VLS_15: {
     item: import("vuetify/lib/components/VDataIterator/composables/items.mjs").DataIteratorItem<Record<string, any>>;
     operation: {
         openDialog: typeof openDialog;
-        createItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<any>;
-        importItems: (importItemsList: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void;
-        updateItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>;
-        deleteItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>;
-        reload: () => void;
-        setSearch: (keyword: string) => void;
+        createItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<void>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<any>);
+        importItems: ((importItems: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void) | ((importItemsList: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void);
+        updateItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<void>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>);
+        deleteItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").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;
+        autoRefresh: import("vue").Raw<import("../../composables/autoRefresh.js").UseAutoRefreshHandle>;
     };
 }, __VLS_38: {
     color: string | undefined;
@@ -94,17 +99,18 @@ declare var __VLS_15: {
     items: Record<string, any>[];
     operation: {
         openDialog: typeof openDialog;
-        createItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<any>;
-        importItems: (importItemsList: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void;
-        updateItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>;
-        deleteItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>;
-        reload: () => void;
-        setSearch: (keyword: string) => void;
+        createItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<void>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<any>);
+        importItems: ((importItems: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void) | ((importItemsList: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void);
+        updateItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<void>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>);
+        deleteItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").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;
+        autoRefresh: import("vue").Raw<import("../../composables/autoRefresh.js").UseAutoRefreshHandle>;
     };
     page: number;
     itemsPerPage: number;
@@ -127,73 +133,87 @@ declare var __VLS_15: {
     groupedItems: readonly (import("vuetify/lib/components/VDataIterator/composables/items.mjs").DataIteratorItem<Record<string, any>> | import("vuetify/lib/components/VDataTable/composables/group.mjs").Group<import("vuetify/lib/components/VDataIterator/composables/items.mjs").DataIteratorItem<Record<string, any>>> | import("vuetify/lib/components/VDataTable/composables/group.mjs").GroupSummary<import("vuetify/lib/components/VDataIterator/composables/items.mjs").DataIteratorItem<Record<string, any>>>)[];
 }, __VLS_92: {
     reload: () => void;
-}, __VLS_108: {
+}, __VLS_102: {
+    enabled: import("vue").ComputedRef<boolean>;
+    isActive: import("vue").ComputedRef<boolean>;
+    isLoading: import("vue").ComputedRef<boolean>;
+    intervalSeconds: import("vue").ComputedRef<number>;
+    remainingSeconds: import("vue").Ref<number>;
+    isUserPaused: import("vue").Ref<boolean>;
+    togglePause: () => void;
+    reset: () => void;
+    reload: () => void | Promise<void>;
+}, __VLS_115: {
     items: Record<string, any>[];
     operation: {
         openDialog: typeof openDialog;
-        createItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<any>;
-        importItems: (importItemsList: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void;
-        updateItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>;
-        deleteItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>;
-        reload: () => void;
-        setSearch: (keyword: string) => void;
+        createItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<void>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<any>);
+        importItems: ((importItems: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void) | ((importItemsList: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void);
+        updateItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<void>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>);
+        deleteItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").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;
+        autoRefresh: import("vue").Raw<import("../../composables/autoRefresh.js").UseAutoRefreshHandle>;
     };
-}, __VLS_121: {
+}, __VLS_128: {
     items: Record<string, any>[];
     operation: {
         openDialog: typeof openDialog;
-        createItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<any>;
-        importItems: (importItemsList: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void;
-        updateItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>;
-        deleteItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>;
-        reload: () => void;
-        setSearch: (keyword: string) => void;
+        createItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<void>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<any>);
+        importItems: ((importItems: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void) | ((importItemsList: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void);
+        updateItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<void>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>);
+        deleteItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").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;
+        autoRefresh: import("vue").Raw<import("../../composables/autoRefresh.js").UseAutoRefreshHandle>;
     };
-}, __VLS_175: never, __VLS_176: {
+}, __VLS_182: never, __VLS_183: {
     operation: {
         openDialog: typeof openDialog;
-        createItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<any>;
-        importItems: (importItemsList: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void;
-        updateItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>;
-        deleteItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>;
-        reload: () => void;
-        setSearch: (keyword: string) => void;
+        createItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<void>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<any>);
+        importItems: ((importItems: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void) | ((importItemsList: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void);
+        updateItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<void>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>);
+        deleteItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").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;
+        autoRefresh: import("vue").Raw<import("../../composables/autoRefresh.js").UseAutoRefreshHandle>;
     };
-}, __VLS_201: never, __VLS_202: {
+}, __VLS_208: never, __VLS_209: {
     operation: {
         openDialog: typeof openDialog;
-        createItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<any>;
-        importItems: (importItemsList: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void;
-        updateItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>;
-        deleteItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>;
-        reload: () => void;
-        setSearch: (keyword: string) => void;
+        createItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<void>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<any>);
+        importItems: ((importItems: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void) | ((importItemsList: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void);
+        updateItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<void>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>);
+        deleteItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").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;
+        autoRefresh: import("vue").Raw<import("../../composables/autoRefresh.js").UseAutoRefreshHandle>;
     };
-}, __VLS_270: any;
+}, __VLS_277: any;
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_175>]?: (props: typeof __VLS_176) => any;
+    [K in NonNullable<typeof __VLS_182>]?: (props: typeof __VLS_183) => any;
 } & {
-    [K in NonNullable<typeof __VLS_201>]?: (props: typeof __VLS_202) => any;
+    [K in NonNullable<typeof __VLS_208>]?: (props: typeof __VLS_209) => any;
 } & {
     default?: (props: typeof __VLS_15) => any;
 } & {
@@ -207,11 +227,13 @@ type __VLS_Slots = {} & {
 } & {
     title?: (props: typeof __VLS_92) => any;
 } & {
-    search?: (props: typeof __VLS_108) => any;
+    autoRefreshControl?: (props: typeof __VLS_102) => any;
 } & {
-    toolbarItems?: (props: typeof __VLS_121) => any;
+    search?: (props: typeof __VLS_115) => any;
 } & {
-    form?: (props: typeof __VLS_270) => any;
+    toolbarItems?: (props: typeof __VLS_128) => any;
+} & {
+    form?: (props: typeof __VLS_277) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
     noDataText: string;
@@ -235,48 +257,55 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     itemsPerPage: number;
     api: boolean;
     perPageStorageEnabled: boolean;
+    autoRefresh: boolean;
+    autoRefreshDefault: number;
+    autoRefreshControl: boolean;
 }>>, {
-    reload: () => void;
+    reload: (() => Promise<void> | undefined) | (() => Promise<void>);
     operation: import("vue").Ref<{
         openDialog: typeof openDialog;
-        createItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<any>;
-        importItems: (importItemsList: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void;
-        updateItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>;
-        deleteItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>;
-        reload: () => void;
-        setSearch: (keyword: string) => void;
+        createItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<void>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<any>);
+        importItems: ((importItems: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void) | ((importItemsList: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void);
+        updateItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<void>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>);
+        deleteItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").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;
+        autoRefresh: import("vue").Raw<import("../../composables/autoRefresh.js").UseAutoRefreshHandle>;
     }, {
         openDialog: typeof openDialog;
-        createItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<any>;
-        importItems: (importItemsList: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void;
-        updateItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>;
-        deleteItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>;
-        reload: () => void;
-        setSearch: (keyword: string) => void;
+        createItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<void>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<any>);
+        importItems: ((importItems: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void) | ((importItemsList: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void);
+        updateItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<void>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>);
+        deleteItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>);
+        reload: (() => Promise<void> | undefined) | (() => Promise<void>);
+        setSearch: ((keyword: string) => void) | ((keyword: string) => void);
         canServerPageable: import("vue").ComputedRef<boolean>;
         canServerSearch: import("vue").ComputedRef<boolean>;
         canCreate: import("vue").ComputedRef<boolean>;
         canUpdate: import("vue").ComputedRef<boolean>;
         canDelete: import("vue").ComputedRef<boolean>;
+        autoRefresh: import("vue").Raw<import("../../composables/autoRefresh.js").UseAutoRefreshHandle>;
     } | {
         openDialog: typeof openDialog;
-        createItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<any>;
-        importItems: (importItemsList: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void;
-        updateItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>;
-        deleteItem: (item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>;
-        reload: () => void;
-        setSearch: (keyword: string) => void;
+        createItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<void>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback, importing?: boolean) => Promise<any>);
+        importItems: ((importItems: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void) | ((importItemsList: Record<string, any>[], callback?: import("../../types/formDialog.js").FormDialogCallback) => void);
+        updateItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<void>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>);
+        deleteItem: ((item: Record<string, any>, callback?: import("../../types/formDialog.js").FormDialogCallback) => Promise<any>) | ((item: Record<string, any>, callback?: import("../../types/formDialog.js").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;
+        autoRefresh: import("vue").Raw<import("../../composables/autoRefresh.js").UseAutoRefreshHandle>;
     }>;
+    autoRefresh: import("../../composables/autoRefresh.js").UseAutoRefreshHandle;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
     noDataText: string;
     dialogFullscreen: boolean;
@@ -299,6 +328,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     itemsPerPage: number;
     api: boolean;
     perPageStorageEnabled: boolean;
+    autoRefresh: boolean;
+    autoRefreshDefault: number;
+    autoRefreshControl: boolean;
 }>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/composables/apiModel.d.ts

@@ -34,7 +34,7 @@ export declare function useApiModel<T extends ApiModelComposableProps>(props: T)
     importItems: (importItemsList: Record<string, any>[], callback?: FormDialogCallback) => void;
     updateItem: (item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>;
     deleteItem: (item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>;
-    loadItems: (options: any) => void;
-    reload: () => void;
+    loadItems: (options: any) => Promise<void>;
+    reload: () => Promise<void>;
     isLoading: import("vue").Ref<boolean, boolean>;
 };

package/dist/runtime/composables/apiModel.js

@@ -119,7 +119,7 @@ export function useApiModel(props) {
   function loadItems(options) {
     currentOptions.value = options;
     isLoading.value = true;
-    ops.value.readPageable(
+    return ops.value.readPageable(
       fields.value,
       props.modelBy,
       {
@@ -140,10 +140,10 @@ export function useApiModel(props) {
   }
   function reload() {
     if (currentOptions.value) {
-      loadItems(currentOptions.value);
+      return loadItems(currentOptions.value);
     } else {
       isLoading.value = true;
-      ops.value.read(
+      return ops.value.read(
         fields.value,
         props.modelBy
       ).then((result) => {

package/dist/runtime/composables/autoRefresh.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Auto-refresh composable: drives a countdown that fires a `reload()` at a configurable
+ * interval (in seconds), with four pause sources — document visibility, external paused
+ * ref, in-flight loading, and user toggle. Designed for `<ModelTable>` and
+ * `<ModelIterator>` but composable-shaped so any consumer can use it.
+ */
+import { type ComputedRef, type MaybeRefOrGetter, type Ref } from 'vue';
+export interface UseAutoRefreshOptions {
+    /** Polling interval. Number ⇒ seconds. `true` ⇒ `defaultSeconds`. Falsy ⇒ disabled. */
+    interval: MaybeRefOrGetter<number | boolean | undefined>;
+    /**
+     * Function called when a tick fires. If it returns a Promise it is awaited before the
+     * countdown resets, so the next cycle starts only after the reload has settled (rather
+     * than restarting while data is still in flight). Overlapping reloads are prevented by the
+     * `isLoading` gate below, which freezes ticks for as long as a request is in flight — wire
+     * it for that guarantee, since the per-second timer itself keeps ticking during a slow reload.
+     */
+    reload: () => void | Promise<void>;
+    /**
+     * Optional. While true the countdown freezes and ticks are suppressed. Wire this to the
+     * model's loading flag. Note: a model that never clears `isLoading` (e.g. an error path
+     * that leaves it set) will halt polling — by design, since polling-while-loading is the
+     * thing this gate prevents.
+     */
+    isLoading?: Ref<boolean>;
+    /** Optional external pause signal (e.g. dialog open). */
+    paused?: Ref<boolean>;
+    /** Seconds used when `interval === true`. Defaults to 60. */
+    defaultSeconds?: number;
+}
+export interface UseAutoRefreshHandle {
+    enabled: ComputedRef<boolean>;
+    isActive: ComputedRef<boolean>;
+    isLoading: ComputedRef<boolean>;
+    intervalSeconds: ComputedRef<number>;
+    remainingSeconds: Ref<number>;
+    isUserPaused: Ref<boolean>;
+    togglePause: () => void;
+    reset: () => void;
+    reload: () => void | Promise<void>;
+}
+export declare function useAutoRefresh(opts: UseAutoRefreshOptions): UseAutoRefreshHandle;

package/dist/runtime/composables/autoRefresh.js

@@ -0,0 +1,57 @@
+import { computed, ref, toValue, watch } from "vue";
+import { useDocumentVisibility, useIntervalFn } from "@vueuse/core";
+function resolveInterval(raw, def) {
+  if (raw === true) return def;
+  if (typeof raw === "number" && raw > 0) return raw;
+  return 0;
+}
+export function useAutoRefresh(opts) {
+  const documentVisibility = useDocumentVisibility();
+  const defaultSeconds = opts.defaultSeconds ?? 60;
+  const intervalSeconds = computed(() => resolveInterval(toValue(opts.interval), defaultSeconds));
+  const enabled = computed(() => intervalSeconds.value > 0);
+  const isUserPaused = ref(false);
+  const remainingSeconds = ref(0);
+  const isLoadingMirror = computed(() => opts.isLoading?.value === true);
+  const paused = computed(
+    () => !enabled.value || isUserPaused.value || documentVisibility.value === "hidden" || opts.paused?.value === true || isLoadingMirror.value
+  );
+  const isActive = computed(() => enabled.value && !paused.value);
+  const ticker = useIntervalFn(async () => {
+    if (paused.value) return;
+    if (remainingSeconds.value <= 1) {
+      try {
+        await opts.reload();
+      } finally {
+        remainingSeconds.value = intervalSeconds.value;
+      }
+    } else {
+      remainingSeconds.value -= 1;
+    }
+  }, 1e3, { immediate: false });
+  watch(enabled, (on) => {
+    remainingSeconds.value = on ? intervalSeconds.value : 0;
+  }, { immediate: true });
+  watch(isActive, (active) => {
+    if (active && typeof document !== "undefined") ticker.resume();
+    else ticker.pause();
+  }, { immediate: true });
+  watch(intervalSeconds, (s) => {
+    if (enabled.value && remainingSeconds.value > s) remainingSeconds.value = s;
+  });
+  return {
+    enabled,
+    isActive,
+    isLoading: isLoadingMirror,
+    intervalSeconds,
+    remainingSeconds,
+    isUserPaused,
+    togglePause: () => {
+      isUserPaused.value = !isUserPaused.value;
+    },
+    reset: () => {
+      remainingSeconds.value = intervalSeconds.value;
+    },
+    reload: opts.reload
+  };
+}

package/dist/runtime/composables/document/template.js

@@ -3,7 +3,8 @@ import { processTemplateFormTableData } from "./templateFormTableData.js";
 import { processTemplateFormHidden } from "./templateFormHidden.js";
 import { some, includes, cloneDeep } from "lodash-es";
 import { migrateInputAttributes, migrateTemplateString } from "./templateMigrate.js";
-export const validationRulesRegex = /^(require(?:\([^)]*\))?|requireIf\([^)]*\)|requireTrue(?:\([^)]*\))?|requireTrueIf\([^)]*\)|numeric(?:\([^)]*\))?|range\([^)]*\)|integer(?:\([^)]*\))?|unique\([^)]*\)|length(?:\([^)]*\))?|lengthGreater\([^)]*\)|lengthLess\([^)]*\)|telephone(?:\([^)]*\))?|email(?:\([^)]*\))?|regex\([^)]*\)|idcard(?:\([^)]*\))?|DateFuture(?:\([^)]*\))?|DatetimeFuture(?:\([^)]*\))?|DateHappen(?:\([^)]*\))?|DatetimeHappen(?:\([^)]*\))?|DateAfter\([^)]*\)|DateBefore\([^)]*\)|DateEqual\([^)]*\))(,(require(?:\([^)]*\))?|requireIf\([^)]*\)|requireTrue(?:\([^)]*\))?|requireTrueIf\([^)]*\)|numeric(?:\([^)]*\))?|range\([^)]*\)|integer(?:\([^)]*\))?|unique\([^)]*\)|length(?:\([^)]*\))?|lengthGreater\([^)]*\)|lengthLess\([^)]*\)|telephone(?:\([^)]*\))?|email(?:\([^)]*\))?|regex\([^)]*\)|idcard(?:\([^)]*\))?|DateFuture(?:\([^)]*\))?|DatetimeFuture(?:\([^)]*\))?|DateHappen(?:\([^)]*\))?|DatetimeHappen(?:\([^)]*\))?|DateAfter\([^)]*\)|DateBefore\([^)]*\)|DateEqual\([^)]*\)))*$/;
+import { getDocumentTemplateInputTypeEntry } from "./templateInputTypes.js";
+export const validationRulesRegex = /^(require(?:\([^)]*\))?|requireIf\([^)]*\)|requireTrue(?:\([^)]*\))?|requireTrueIf\([^)]*\)|requireNotEmpty(?:\([^)]*\))?|numeric(?:\([^)]*\))?|range\([^)]*\)|integer(?:\([^)]*\))?|unique\([^)]*\)|length(?:\([^)]*\))?|lengthGreater\([^)]*\)|lengthLess\([^)]*\)|telephone(?:\([^)]*\))?|email(?:\([^)]*\))?|regex\([^)]*\)|idcard(?:\([^)]*\))?|DateFuture(?:\([^)]*\))?|DatetimeFuture(?:\([^)]*\))?|DateHappen(?:\([^)]*\))?|DatetimeHappen(?:\([^)]*\))?|DateAfter\([^)]*\)|DateBefore\([^)]*\)|DateEqual\([^)]*\))(,(require(?:\([^)]*\))?|requireIf\([^)]*\)|requireTrue(?:\([^)]*\))?|requireTrueIf\([^)]*\)|requireNotEmpty(?:\([^)]*\))?|numeric(?:\([^)]*\))?|range\([^)]*\)|integer(?:\([^)]*\))?|unique\([^)]*\)|length(?:\([^)]*\))?|lengthGreater\([^)]*\)|lengthLess\([^)]*\)|telephone(?:\([^)]*\))?|email(?:\([^)]*\))?|regex\([^)]*\)|idcard(?:\([^)]*\))?|DateFuture(?:\([^)]*\))?|DatetimeFuture(?:\([^)]*\))?|DateHappen(?:\([^)]*\))?|DatetimeHappen(?:\([^)]*\))?|DateAfter\([^)]*\)|DateBefore\([^)]*\)|DateEqual\([^)]*\)))*$/;
 export function useDocumentTemplate(items, parentTemplates) {
   if (!items) return "";
   if (typeof items === "string") {
@@ -52,6 +53,14 @@ export function templateItemToString(inputItem, parentTemplates, dataVariable =
   }
   let templateString;
   const validationRules = item.validationRules ? buildValidationRules(item.validationRules) || "" : "";
+  const registryEntry = getDocumentTemplateInputTypeEntry(item.inputType);
+  if (registryEntry && typeof registryEntry.render === "function") {
+    templateString = registryEntry.render(item, parentTemplates, dataVariable);
+    if (item.computedValue && item.variableName) {
+      templateString = `${templateString || ""}<FormHidden v-model="${dataVariable}.${item.variableName}" :item-value="data" :hook="()=>${item.computedValue}"/>`.trim();
+    }
+    return templateString || "";
+  }
   switch (item.inputType) {
     case "CustomCode":
       templateString = item.inputCustomCode || "";