@ramathibodi/nuxt-commons 0.1.21 → 0.1.23

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

@@ -17,6 +17,9 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VDataIterator['$pr
   toolbarColor?: string
   importable?: boolean
   exportable?: boolean
+  insertable?: boolean
+  searchable?: boolean
+  search?: string
   cols?: string | number | boolean
   xxl?: string | number | boolean
   xl?: string | number | boolean
@@ -32,6 +35,8 @@ const props = withDefaults(defineProps<Props & GraphqlModelProps>(), {
   toolbarColor: 'primary',
   importable: false,
   exportable: false,
+  insertable: true,
+  searchable: true,
   modelKey: 'id',
   modelBy: undefined,
   fields: () => [],
@@ -54,7 +59,7 @@ const currentItem = ref<Record<string, any> | undefined>(undefined)
 const isDialogOpen = ref<boolean>(false)
 
 const { items, itemsLength,
-  search, currentOptions,
+  search, setSearch, currentOptions,
   canServerPageable, canServerSearch, canCreate, canUpdate, canDelete,
   createItem, importItems, updateItem, deleteItem,
   loadItems, reload,
@@ -92,7 +97,7 @@ watch([currentPage, itemsPerPageInternal, sortBy], () => {
   }
 }, { immediate: true })
 
-const operation = ref({ openDialog, createItem, importItems, updateItem, deleteItem, reload, canServerPageable, canServerSearch, canCreate, canUpdate, canDelete })
+const operation = ref({ openDialog, createItem, importItems, updateItem, deleteItem, reload, setSearch, canServerPageable, canServerSearch, canCreate, canUpdate, canDelete })
 
 const computedInitialData = computed(() => {
   return Object.assign({}, props.initialData, props.modelBy)
@@ -103,6 +108,10 @@ const computedSkeletonPerPage = computed(() => {
   else return Number(itemsPerPageInternal.value)
 })
 
+watch(()=>props.search,()=>{
+  search.value = props.search
+},{immediate:true})
+
 defineExpose({ reload })
 </script>
 
@@ -176,7 +185,6 @@ defineExpose({ reload })
           name="header"
           v-bind="headerProps"
           :items="items"
-          :search="search"
           :operation="operation"
         >
           <VToolbar :color="toolbarColor">
@@ -203,7 +211,7 @@ defineExpose({ reload })
                   </slot>
                 </VToolbarTitle>
               </v-col>
-              <v-col cols="5">
+              <v-col cols="5" v-if="props.searchable">
                 <slot name="search">
                   <VTextField
                     v-model="search"
@@ -221,20 +229,22 @@ defineExpose({ reload })
             <VToolbarItems>
               <slot name="toolbarItems" />
               <ImportCSV
-                v-if="props.importable"
-                icon="mdi mdi-file-upload"
-                variant="flat"
-                @import="importItems"
+                  v-if="props.importable && canCreate && props.insertable"
+                  icon="mdi mdi-file-upload"
+                  variant="flat"
+                  :color="toolbarColor"
+                  @import="importItems"
               />
               <ExportCSV
-                v-if="props.exportable && items.length"
-                icon="mdi mdi-file-download"
-                variant="flat"
-                :file-name="title"
-                :model-value="items"
+                  v-if="props.exportable && items.length"
+                  icon="mdi mdi-file-download"
+                  variant="flat"
+                  :file-name="title"
+                  :model-value="items"
+                  :color="toolbarColor"
               />
               <VBtn
-                v-if="canCreate"
+                v-if="canCreate && props.insertable"
                 :color="toolbarColor"
                 prepend-icon="mdi mdi-plus"
                 variant="flat"

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

@@ -1,5 +1,5 @@
 import { type InjectionKey, type Ref } from 'vue';
-import type { AlertItem } from '../types/alert';
+import type { AlertItem } from '../types/alert.js';
 interface AlertProvide {
     addAlert: (item: Partial<AlertItem>) => void;
     takeAlert: (location?: string) => AlertItem | undefined;

package/dist/runtime/composables/{alert.mjs → alert.js}

@@ -23,8 +23,7 @@ export function createAlert() {
     },
     takeAlert(location = "default") {
       const item = head(items.value.filter((i) => i.alertLocation === location));
-      if (item)
-        remove(items.value, (i) => i === item);
+      if (item) remove(items.value, (i) => i === item);
       return item;
     },
     hasAlert(location = "default") {

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

@@ -2,8 +2,8 @@ import type { UseFetchOptions } from 'nuxt/app';
 import type { SearchParameters } from 'ofetch';
 export declare function useApi(): {
     urlBuilder: (url: string | string[]) => string;
-    get: (url: string | string[], body?: Record<string, any> | [], params?: SearchParameters, options?: UseFetchOptions<unknown>) => any;
-    getPromise: (url: string | string[], body?: Record<string, any> | [], params?: SearchParameters, options?: UseFetchOptions<unknown>) => Promise<unknown>;
-    post: (url: string | string[], body?: Record<string, any> | [], params?: SearchParameters, options?: UseFetchOptions<unknown>) => any;
-    postPromise: (url: string | string[], body?: Record<string, any> | [], params?: SearchParameters, options?: UseFetchOptions<unknown>) => Promise<unknown>;
+    get: (url: string | string[], body?: Record<string, any> | [], params?: SearchParameters, options?: UseFetchOptions<unknown>) => Promise<any>;
+    getPromise: (url: string | string[], body?: Record<string, any> | [], params?: SearchParameters, options?: UseFetchOptions<unknown>) => Promise<any>;
+    post: (url: string | string[], body?: Record<string, any> | [], params?: SearchParameters, options?: UseFetchOptions<unknown>) => Promise<any>;
+    postPromise: (url: string | string[], body?: Record<string, any> | [], params?: SearchParameters, options?: UseFetchOptions<unknown>) => Promise<any>;
 };

package/dist/runtime/composables/api.js

@@ -0,0 +1,52 @@
+import { trimEnd, trimStart } from "lodash-es";
+import { useRuntimeConfig, useAuthentication } from "#imports";
+import { ofetch } from "ofetch";
+export function useApi() {
+  const config = useRuntimeConfig();
+  const nuxtApp = useNuxtApp();
+  function urlBuilder(url) {
+    let returnUrl = "";
+    if (Array.isArray(url)) {
+      if (url[0].toLowerCase() == "agent") url[0] = config?.public.WS_AGENT || config?.public.WS_DEVICE;
+      returnUrl = url.join("/");
+    } else {
+      returnUrl = url;
+    }
+    if (returnUrl.startsWith("http://") || returnUrl.startsWith("https://")) return returnUrl;
+    else return trimEnd(config?.public.WS_API, "/") + "/" + trimStart(returnUrl, "/");
+  }
+  function optionBuilder(method, body, params, options) {
+    let returnOption = {
+      method,
+      body,
+      query: params
+    };
+    const headers = {
+      "Content-Type": "application/json",
+      "Accept": "application/json"
+    };
+    if (useAuthentication().keycloak?.token) {
+      headers["Authorization"] = `Bearer ${useAuthentication().keycloak.token}`;
+    }
+    if (options) {
+      options = Object.assign(options, returnOption);
+      if (options.headers) options.headers = Object.assign(options.headers, headers);
+      else options.headers = headers;
+    }
+    returnOption = Object.assign(returnOption, options);
+    return returnOption;
+  }
+  function get(url, body, params, options) {
+    return ofetch(urlBuilder(url), optionBuilder("GET", body, params, options));
+  }
+  function getPromise(url, body, params, options) {
+    return ofetch(urlBuilder(url), optionBuilder("GET", body, params, options));
+  }
+  function post(url, body, params, options) {
+    return ofetch(urlBuilder(url), optionBuilder("POST", body, params, options));
+  }
+  function postPromise(url, body, params, options) {
+    return ofetch(urlBuilder(url), optionBuilder("POST", body, params, options));
+  }
+  return { urlBuilder, get, getPromise, post, postPromise };
+}

package/dist/runtime/composables/document/{template.mjs → template.js}

@@ -1,7 +1,6 @@
 export const validationRulesRegex = /^(require(?:\([^)]*\))?|requireIf(?:\([^)]*\))?|requireTrue(?:\([^)]*\))?|requireTrueIf(?:\([^)]*\))?|numeric(?:\([^)]*\))?|range(?:\([^)]*\))?|integer(?:\([^)]*\))?|unique(?:\([^)]*\))?|length(?:\([^)]*\))?|lengthGreater(?:\([^)]*\))?|lengthLess(?:\([^)]*\))?|telephone(?:\([^)]*\))?|email(?:\([^)]*\))?|regex(?:\([^)]*\))?)(,(require(?:\([^)]*\))?|requireIf(?:\([^)]*\))?|requireTrue(?:\([^)]*\))?|requireTrueIf(?:\([^)]*\))?|numeric(?:\([^)]*\))?|range(?:\([^)]*\))?|integer(?:\([^)]*\))?|unique(?:\([^)]*\))?|length(?:\([^)]*\))?|lengthGreater(?:\([^)]*\))?|lengthLess(?:\([^)]*\))?|telephone(?:\([^)]*\))?|email(?:\([^)]*\))?|regex(?:\([^)]*\))?))*$/;
 export function useDocumentTemplate(items) {
-  if (!items)
-    return "";
+  if (!items) return "";
   if (typeof items === "string") {
     try {
       items = JSON.parse(items);
@@ -35,10 +34,8 @@ function templateItemToString(item) {
       optionString = item.inputOptions.split(",").join(" ");
     }
   }
-  if (item.inputType == "FormDateTime" && !item.inputAttributes?.includes("dense"))
-    item.inputAttributes = (item.inputAttributes?.trim() + " dense").trim();
-  if (item.validationRules)
-    validationRules = buildValidationRules(item.validationRules);
+  if (item.inputType == "FormDateTime" && !item.inputAttributes?.includes("dense")) item.inputAttributes = (item.inputAttributes?.trim() + " dense").trim();
+  if (item.validationRules) validationRules = buildValidationRules(item.validationRules);
   let templateString;
   switch (item.inputType) {
     case "CustomCode":
@@ -59,10 +56,8 @@ function templateItemToString(item) {
     default:
       templateString = `<${item.inputType} v-model="data.${item.variableName}" label="${item.inputLabel || item.variableName}"${item.inputAttributes ? " " + item.inputAttributes : ""}${optionString ? " " + optionString.trim() : ""}${validationRules ? " " + validationRules.trim() : ""}></${item.inputType}>`;
   }
-  if (!["Separator", "Header"].includes(item.inputType))
-    templateString = `<v-col${item.width ? ' cols="' + item.width + '"' : ""}${item.columnAttributes ? " " + item.columnAttributes : ""}>${templateString}</v-col>`;
-  if (["Header"].includes(item.inputType))
-    templateString = `</v-row><v-row dense><v-col${item.columnAttributes ? " " + item.columnAttributes : ""}>${templateString}</v-col></v-row><v-row dense>`;
+  if (!["Separator", "Header"].includes(item.inputType)) templateString = `<v-col${item.width ? ' cols="' + item.width + '"' : ""}${item.columnAttributes ? " " + item.columnAttributes : ""}>${templateString}</v-col>`;
+  if (["Header"].includes(item.inputType)) templateString = `</v-row><v-row dense><v-col${item.columnAttributes ? " " + item.columnAttributes : ""}>${templateString}</v-col></v-row><v-row dense>`;
   return templateString;
 }
 function optionStringToChoiceObject(option) {
@@ -83,12 +78,9 @@ function optionStringToChoiceObject(option) {
 }
 function buildValidationRules(validationString) {
   validationString = validationString.trim();
-  if (validationString.startsWith("["))
-    validationString = validationString.substring(1);
-  if (validationString.endsWith("]"))
-    validationString = validationString.substring(0, validationString.length - 1);
-  if (!validationRulesRegex.test(validationString))
-    return "";
+  if (validationString.startsWith("[")) validationString = validationString.substring(1);
+  if (validationString.endsWith("]")) validationString = validationString.substring(0, validationString.length - 1);
+  if (!validationRulesRegex.test(validationString)) return "";
   validationString = validationString.split(",").map((rule) => {
     rule = rule.trim();
     if (!rule.startsWith("rules.")) {

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

@@ -1,4 +1,5 @@
-import { type ClassConstructor } from '../utils/object';
+import { type ClassConstructor } from '../utils/object.js';
+import type { UseMutationReturn } from "@vue/apollo-composable";
 declare type VariableOptions = {
     type?: string;
     name?: string;
@@ -9,9 +10,9 @@ declare type VariableOptions = {
     [k: string]: any;
 };
 export declare function useGraphQl(): {
-    query: <T>(operation: string, fields: Array<string | Object> | ClassConstructor<any>, variables?: VariableOptions, cache?: boolean) => any;
-    queryPromise: <T_1>(operation: string, fields: Array<string | Object> | ClassConstructor<any>, variables?: VariableOptions, cache?: boolean) => Promise<T_1>;
-    mutation: <T_2>(operation: string, fields: Array<string | Object> | ClassConstructor<any>, variables?: VariableOptions) => any;
-    mutationPromise: <T_3>(operation: string, fields: Array<string | Object> | ClassConstructor<any>, variables?: VariableOptions) => Promise<T_3>;
+    query: <T>(operation: string, fields: Array<string | Object> | ClassConstructor<any>, variables?: VariableOptions, cache?: boolean) => import("#app").AsyncData<(T extends any[] ? T : T extends Record<string, any> ? keyof T extends (T extends T ? keyof T extends string ? string & keyof T : never : never) ? T : (T extends T ? keyof T extends string ? string & keyof T : never : never) extends never ? T : Pick<T, T extends T ? keyof T extends string ? string & keyof T : never : never> : T) | null, import("#app").NuxtError<unknown> | null>;
+    queryPromise: <T>(operation: string, fields: Array<string | Object> | ClassConstructor<any>, variables?: VariableOptions, cache?: boolean) => Promise<T>;
+    mutation: <T>(operation: string, fields: Array<string | Object> | ClassConstructor<any>, variables?: VariableOptions) => UseMutationReturn<any, any>;
+    mutationPromise: <T>(operation: string, fields: Array<string | Object> | ClassConstructor<any>, variables?: VariableOptions) => Promise<T>;
 };
 export {};

package/dist/runtime/composables/{graphql.mjs → graphql.js}

@@ -1,11 +1,32 @@
 import { mutation as gqlMutation, query as gqlQuery } from "gql-query-builder";
-import { useQuery } from "@vue/apollo-composable";
-import { classAttributes, isClassConstructor } from "../utils/object.mjs";
-import { gql, useAsyncQuery, useMutation } from "#imports";
+import { classAttributes, isClassConstructor } from "../utils/object.js";
+import { gql, useAsyncQuery, useMutation, useRuntimeConfig } from "#imports";
+import { useApi } from "./api.js";
 export function useGraphQl() {
+  function simplePromiseCall(operation, query2, variables) {
+    return new Promise((resolve, reject) => {
+      useApi().postPromise(useRuntimeConfig().public.WS_GRAPHQL, {
+        query: query2,
+        variables
+      }).then((result) => {
+        if (result.errors) reject(result.errors.map((error) => {
+          return error.message;
+        }).join("\n"));
+        else {
+          try {
+            const dataObject = result.data;
+            resolve(dataObject[operation]);
+          } catch (error) {
+            reject(error);
+          }
+        }
+      }).catch((error) => {
+        reject(error);
+      });
+    });
+  }
   function query(operation, fields, variables, cache = false) {
-    if (isClassConstructor(fields))
-      fields = classAttributes(fields);
+    if (isClassConstructor(fields)) fields = classAttributes(fields);
     const builder = gqlQuery({ operation, fields, variables });
     const options = {
       query: gql(builder.query),
@@ -15,49 +36,19 @@ export function useGraphQl() {
     return useAsyncQuery(options);
   }
   function queryPromise(operation, fields, variables, cache = false) {
-    if (isClassConstructor(fields))
-      fields = classAttributes(fields);
+    if (isClassConstructor(fields)) fields = classAttributes(fields);
     const builder = gqlQuery({ operation, fields, variables });
-    return new Promise((resolve, reject) => {
-      const { onResult, onError } = useQuery(gql(builder.query), builder.variables, { fetchPolicy: cache ? "cache-first" : "no-cache" });
-      onResult((queryResult) => {
-        if (!queryResult.loading) {
-          const dataObject = queryResult.data;
-          try {
-            resolve(dataObject[operation]);
-          } catch (error) {
-            reject(error);
-          }
-        }
-      });
-      onError((error) => {
-        reject(error);
-      });
-    });
+    return simplePromiseCall(operation, builder.query, builder.variables);
   }
   function mutation(operation, fields, variables) {
-    if (isClassConstructor(fields))
-      fields = classAttributes(fields);
+    if (isClassConstructor(fields)) fields = classAttributes(fields);
     const builder = gqlMutation({ operation, fields, variables });
     return useMutation(gql(builder.query), { variables: builder.variables });
   }
   function mutationPromise(operation, fields, variables) {
-    if (isClassConstructor(fields))
-      fields = classAttributes(fields);
+    if (isClassConstructor(fields)) fields = classAttributes(fields);
     const builder = gqlMutation({ operation, fields, variables });
-    return new Promise(async (resolve, reject) => {
-      const { mutate, error } = useMutation(gql(builder.query), { variables: builder.variables });
-      if (!error.value) {
-        try {
-          const results = await mutate();
-          resolve(results.data[operation]);
-        } catch (e) {
-          reject(e);
-        }
-      } else {
-        reject(error.value);
-      }
-    });
+    return simplePromiseCall(operation, builder.query, builder.variables);
   }
   return { query, queryPromise, mutation, mutationPromise };
 }

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

@@ -1,5 +1,5 @@
-import type { FormDialogCallback } from '../types/formDialog';
-import { type GraphqlModelConfigProps } from './graphqlModelOperation';
+import type { FormDialogCallback } from '../types/formDialog.js';
+import { type GraphqlModelConfigProps } from './graphqlModelOperation.js';
 export interface HeaderProps {
     headers?: any[];
 }
@@ -8,27 +8,28 @@ export interface InitialDataProps {
 }
 export type GraphqlModelProps = GraphqlModelConfigProps & Partial<HeaderProps> & Partial<InitialDataProps>;
 export declare function useGraphqlModel<T extends GraphqlModelProps>(props: T): {
-    items: import("vue").Ref<Record<string, any>[]>;
-    itemsLength: import("vue").Ref<number>;
-    search: import("vue").Ref<string | undefined>;
-    currentOptions: import("vue").Ref<any>;
-    operationCreate: import("vue").ComputedRef<any>;
-    operationUpdate: import("vue").ComputedRef<any>;
-    operationDelete: import("vue").ComputedRef<any>;
-    operationRead: import("vue").ComputedRef<any>;
-    operationReadPageable: import("vue").ComputedRef<any>;
-    operationSearch: import("vue").ComputedRef<any>;
-    fields: import("vue").ComputedRef<any[]>;
+    items: import("vue").Ref<Record<string, any>[], Record<string, any>[]>;
+    itemsLength: import("vue").Ref<number, number>;
+    search: import("vue").Ref<string | undefined, string | undefined>;
+    setSearch: (keyword: string) => void;
+    currentOptions: import("vue").Ref<any, any>;
+    operationCreate: import("vue").ComputedRef<import("../../../playground/composables/graphqlObject").graphqlOperationObject<any, any>>;
+    operationUpdate: import("vue").ComputedRef<import("../../../playground/composables/graphqlObject").graphqlOperationObject<any, any>>;
+    operationDelete: import("vue").ComputedRef<import("../../../playground/composables/graphqlObject").graphqlOperationObject<any, any>>;
+    operationRead: import("vue").ComputedRef<import("../../../playground/composables/graphqlObject").graphqlOperationObject<any, any>>;
+    operationReadPageable: import("vue").ComputedRef<import("../../../playground/composables/graphqlObject").graphqlOperationObject<any, any>>;
+    operationSearch: import("vue").ComputedRef<import("../../../playground/composables/graphqlObject").graphqlOperationObject<any, any>>;
+    fields: import("vue").ComputedRef<(string | object)[]>;
     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>;
-    createItem: (item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => any;
+    createItem: (item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<void>;
     importItems: (importItems: Record<string, any>[], callback?: FormDialogCallback) => void;
-    updateItem: (item: Record<string, any>, callback?: FormDialogCallback) => any;
-    deleteItem: (item: Record<string, any>, callback?: FormDialogCallback) => any;
+    updateItem: (item: Record<string, any>, callback?: FormDialogCallback) => Promise<void>;
+    deleteItem: (item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>;
     loadItems: (options: any) => void;
     reload: () => void;
-    isLoading: import("vue").Ref<boolean>;
+    isLoading: import("vue").Ref<boolean, boolean>;
 };

package/dist/runtime/composables/{graphqlModel.mjs → graphqlModel.js}

@@ -1,26 +1,27 @@
-import { computed, onMounted, ref, watch } from "vue";
-import { useAlert } from "./alert.mjs";
-import { buildRequiredInputFields } from "./graphqlOperation.mjs";
-import { useGraphqlModelOperation } from "./graphqlModelOperation.mjs";
+import { computed, onMounted, ref } from "vue";
+import { watchDebounced } from "@vueuse/core";
+import { useAlert } from "./alert.js";
+import { buildRequiredInputFields } from "./graphqlOperation.js";
+import { useGraphqlModelOperation } from "./graphqlModelOperation.js";
 export function useGraphqlModel(props) {
   const alert = useAlert();
   const items = ref([]);
   const itemsLength = ref(0);
   const search = ref();
   const currentOptions = ref();
+  function setSearch(keyword) {
+    search.value = keyword;
+  }
   const isLoading = ref(false);
   const { operationCreate, operationUpdate, operationDelete, operationRead, operationReadPageable, operationSearch } = useGraphqlModelOperation(props);
   function keyToField(key) {
     const parts = key.split(".");
-    if (parts.length <= 1)
-      return key;
+    if (parts.length <= 1) return key;
     let lastValue = parts.pop();
     let result = {};
     for (let i = parts.length - 1; i >= 0; i--) {
-      if (i == parts.length - 1)
-        result = { [parts[i]]: [lastValue] };
-      else
-        result = { [parts[i]]: result };
+      if (i == parts.length - 1) result = { [parts[i]]: [lastValue] };
+      else result = { [parts[i]]: result };
     }
     return result;
   }
@@ -30,8 +31,7 @@ export function useGraphqlModel(props) {
     let requiredInputFields = [];
     if (props.headers && props.headers.length > 0) {
       props.headers.forEach((header) => {
-        if (!fieldsProps.includes(header.key))
-          tmpFields.push(keyToField(header.key));
+        if (!fieldsProps.includes(header.key)) tmpFields.push(keyToField(header.key));
       });
     }
     if (canUpdate.value) {
@@ -58,17 +58,13 @@ export function useGraphqlModel(props) {
     isLoading.value = true;
     return operationCreate.value?.call(fields.value, { input: item }).then((result) => {
       if (canServerPageable.value) {
-        if (!importing)
-          loadItems(currentOptions.value);
-      } else
-        items.value.push(result);
+        if (!importing) loadItems(currentOptions.value);
+      } else items.value.push(result);
     }).catch((error) => {
       alert?.addAlert({ alertType: "error", message: error });
     }).finally(() => {
-      if (!importing)
-        isLoading.value = false;
-      if (callback)
-        callback.done();
+      if (!importing) isLoading.value = false;
+      if (callback) callback.done();
     });
   }
   function importItems(importItems2, callback) {
@@ -76,21 +72,18 @@ export function useGraphqlModel(props) {
     const importPromise = [];
     importItems2.forEach((item) => {
       const eachPromise = createItem(Object.assign({}, props.initialData, item), void 0, true);
-      if (eachPromise)
-        importPromise.push(eachPromise);
+      if (eachPromise) importPromise.push(eachPromise);
     });
     Promise.all(importPromise).finally(() => {
       isLoading.value = false;
       reload();
-      if (callback)
-        callback.done();
+      if (callback) callback.done();
     });
   }
   function updateItem(item, callback) {
     isLoading.value = true;
     return operationUpdate.value?.call(fields.value, { input: item }).then((result) => {
-      if (canServerPageable.value)
-        loadItems(currentOptions.value);
+      if (canServerPageable.value) loadItems(currentOptions.value);
       else {
         const index = items.value.findIndex((item2) => item2[props.modelKey || "id"] === result[props.modelKey || "id"]);
         if (index !== -1) {
@@ -101,8 +94,7 @@ export function useGraphqlModel(props) {
       alert?.addAlert({ alertType: "error", message: error });
     }).finally(() => {
       isLoading.value = false;
-      if (callback)
-        callback.done();
+      if (callback) callback.done();
     });
   }
   function deleteItem(item, callback) {
@@ -112,8 +104,7 @@ export function useGraphqlModel(props) {
     }).finally(() => {
       isLoading.value = false;
       reload();
-      if (callback)
-        callback.done();
+      if (callback) callback.done();
     });
   }
   function loadItems(options) {
@@ -137,8 +128,7 @@ export function useGraphqlModel(props) {
   }
   function reload() {
     if (canServerPageable.value) {
-      if (currentOptions.value)
-        loadItems(currentOptions.value);
+      if (currentOptions.value) loadItems(currentOptions.value);
     } else {
       isLoading.value = true;
       operationRead.value?.call(fields.value, props.modelBy).then((result) => {
@@ -150,17 +140,17 @@ export function useGraphqlModel(props) {
       });
     }
   }
-  watch([() => props.modelName, () => props.modelBy, () => props.modelKey, canServerPageable], () => {
+  watchDebounced([() => props.modelName, () => props.modelBy, () => props.modelKey, canServerPageable], () => {
     reload();
-  }, { deep: true });
+  }, { deep: true, debounce: 500, maxWait: 500 });
   onMounted(() => {
-    if (!canServerPageable.value)
-      reload();
+    if (!canServerPageable.value) reload();
   });
   return {
     items,
     itemsLength,
     search,
+    setSearch,
     currentOptions,
     operationCreate,
     operationUpdate,

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

@@ -1,20 +1,20 @@
-import type { FormDialogCallback } from '../types/formDialog';
-import { type GraphqlModelConfigProps } from './graphqlModelOperation';
+import type { FormDialogCallback } from '../types/formDialog.js';
+import { type GraphqlModelConfigProps } from './graphqlModelOperation.js';
 export type GraphqlModelItemProps = Omit<GraphqlModelConfigProps, 'operationSearch' | 'operationReadPageable'>;
 export declare function useGraphqlModelItem<T extends GraphqlModelItemProps>(props: T): {
-    modelBy: import("vue").Ref<object | undefined>;
-    item: import("vue").Ref<Record<string, any> | undefined>;
-    operationCreate: import("vue").ComputedRef<any>;
-    operationUpdate: import("vue").ComputedRef<any>;
-    operationDelete: import("vue").ComputedRef<any>;
-    operationRead: import("vue").ComputedRef<any>;
-    fields: import("vue").ComputedRef<any[]>;
+    modelBy: import("vue").Ref<object | undefined, object | undefined>;
+    item: import("vue").Ref<Record<string, any> | undefined, Record<string, any> | undefined>;
+    operationCreate: import("vue").ComputedRef<import("../../../playground/composables/graphqlObject").graphqlOperationObject<any, any>>;
+    operationUpdate: import("vue").ComputedRef<import("../../../playground/composables/graphqlObject").graphqlOperationObject<any, any>>;
+    operationDelete: import("vue").ComputedRef<import("../../../playground/composables/graphqlObject").graphqlOperationObject<any, any>>;
+    operationRead: import("vue").ComputedRef<import("../../../playground/composables/graphqlObject").graphqlOperationObject<any, any>>;
+    fields: import("vue").ComputedRef<(string | object)[]>;
     canCreate: import("vue").ComputedRef<boolean>;
     canUpdate: import("vue").ComputedRef<boolean>;
     canDelete: import("vue").ComputedRef<boolean>;
-    createItem: (createItem: Record<string, any>, callback?: FormDialogCallback) => any;
-    updateItem: (updateItem: Record<string, any>, callback?: FormDialogCallback) => any;
-    deleteItem: (item: Record<string, any>, callback?: FormDialogCallback) => any;
+    createItem: (createItem: Record<string, any>, callback?: FormDialogCallback) => Promise<void>;
+    updateItem: (updateItem: Record<string, any>, callback?: FormDialogCallback) => Promise<void>;
+    deleteItem: (item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>;
     reload: () => void;
-    isLoading: import("vue").Ref<boolean>;
+    isLoading: import("vue").Ref<boolean, boolean>;
 };

package/dist/runtime/composables/{graphqlModelItem.mjs → graphqlModelItem.js}

@@ -1,7 +1,7 @@
 import { computed, ref, watch } from "vue";
-import { useAlert } from "./alert.mjs";
-import { buildRequiredInputFields } from "./graphqlOperation.mjs";
-import { useGraphqlModelOperation } from "./graphqlModelOperation.mjs";
+import { useAlert } from "./alert.js";
+import { buildRequiredInputFields } from "./graphqlOperation.js";
+import { useGraphqlModelOperation } from "./graphqlModelOperation.js";
 export function useGraphqlModelItem(props) {
   const alert = useAlert();
   const modelBy = ref();
@@ -34,8 +34,7 @@ export function useGraphqlModelItem(props) {
       reload();
     }).finally(() => {
       isLoading.value = false;
-      if (callback)
-        callback.done();
+      if (callback) callback.done();
     });
   }
   function updateItem(updateItem2, callback) {
@@ -47,8 +46,7 @@ export function useGraphqlModelItem(props) {
       reload();
     }).finally(() => {
       isLoading.value = false;
-      if (callback)
-        callback.done();
+      if (callback) callback.done();
     });
   }
   function deleteItem(item2, callback) {
@@ -58,8 +56,7 @@ export function useGraphqlModelItem(props) {
     }).finally(() => {
       isLoading.value = false;
       reload();
-      if (callback)
-        callback.done();
+      if (callback) callback.done();
     });
   }
   function reload() {

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

@@ -1,4 +1,4 @@
-import type { graphqlOperationObject } from '../types/graphqlOperation';
+import type { graphqlOperationObject } from '../types/graphqlOperation.js';
 export interface GraphqlModelConfigProps {
     modelName: string;
     modelKey?: string;
@@ -12,10 +12,10 @@ export interface GraphqlModelConfigProps {
     fields?: Array<string | object>;
 }
 export declare function useGraphqlModelOperation<T extends GraphqlModelConfigProps>(props: T): {
-    operationCreate: import("vue").ComputedRef<any>;
-    operationUpdate: import("vue").ComputedRef<any>;
-    operationDelete: import("vue").ComputedRef<any>;
-    operationRead: import("vue").ComputedRef<any>;
-    operationReadPageable: import("vue").ComputedRef<any>;
-    operationSearch: import("vue").ComputedRef<any>;
+    operationCreate: import("vue").ComputedRef<import("#imports").graphqlOperationObject<any, any>>;
+    operationUpdate: import("vue").ComputedRef<import("#imports").graphqlOperationObject<any, any>>;
+    operationDelete: import("vue").ComputedRef<import("#imports").graphqlOperationObject<any, any>>;
+    operationRead: import("vue").ComputedRef<import("#imports").graphqlOperationObject<any, any>>;
+    operationReadPageable: import("vue").ComputedRef<import("#imports").graphqlOperationObject<any, any>>;
+    operationSearch: import("vue").ComputedRef<import("#imports").graphqlOperationObject<any, any>>;
 };