@ramathibodi/nuxt-commons 0.1.22 → 0.1.24

package/dist/module.d.mts

@@ -2,6 +2,6 @@ import * as _nuxt_schema from '@nuxt/schema';
 
 interface ModuleOptions {
 }
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { type ModuleOptions, _default as default };

package/dist/module.d.ts

@@ -2,6 +2,6 @@ import * as _nuxt_schema from '@nuxt/schema';
 
 interface ModuleOptions {
 }
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { type ModuleOptions, _default as default };

package/dist/module.json

@@ -4,5 +4,9 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.22"
+  "version": "0.1.24",
+  "builder": {
+    "@nuxt/module-builder": "0.8.3",
+    "unbuild": "2.0.0"
+  }
 }

package/dist/runtime/components/ExportCSV.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import {ref, withDefaults} from 'vue'
+import {ref} from 'vue'
 import * as XLSX from 'xlsx'
 import {VBtn} from 'vuetify/components/VBtn'
 import {useAlert} from '../composables/alert'
@@ -20,7 +20,7 @@ function exportFile() {
   if (props.modelValue && Array.isArray(props.modelValue)) {
     loading.value = true
     const workbook = XLSX.utils.book_new()
-    const worksheet = XLSX.utils.json_to_sheet(props.modelValue)
+    const worksheet = XLSX.utils.json_to_sheet(serializeRoleField(props.modelValue))
     const fileName = `${props.fileName}.xlsx`
     XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
     XLSX.writeFile(workbook, fileName)
@@ -30,25 +30,34 @@ function exportFile() {
     alert?.addAlert({ message: 'Invalid or no data to export', alertType: 'error' })
   }
 }
+
+const serializeRoleField = (items: any) => {
+  return items.map((item:any) => {
+    if (item.properties && typeof item.properties === 'object') {
+      item.properties = JSON.stringify(item.properties);
+    }
+    return item;
+  });
+}
 </script>
 
 <template>
   <VBtn
-    v-bind="$attrs"
-    color="primary"
-    :loading="loading"
-    :disabled="loading"
-    text="Export CSV"
-    @click="exportFile"
+      v-bind="$attrs"
+      color="primary"
+      :loading="loading"
+      :disabled="loading"
+      text="Export CSV"
+      @click="exportFile"
   >
     <template
-      v-for="(_, name, index) in ($slots as {})"
-      :key="index"
-      #[name]="slotData"
+        v-for="(_, name, index) in ($slots as {})"
+        :key="index"
+        #[name]="slotData"
     >
       <slot
-        :name="name"
-        v-bind="((slotData || {}) as object)"
+          :name="name"
+          v-bind="((slotData || {}) as object)"
       />
     </template>
   </VBtn>

package/dist/runtime/components/ImportCSV.vue

@@ -30,34 +30,44 @@ function uploadedFile(files: File[] | File | undefined) {
   const reader = new FileReader()
   reader.onload = (e: ProgressEvent<FileReader>) => {
     const workbook = XLSX.read(e.target?.result)
-    emit('import', XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]))
+    const parseData = parsePropertiesField(XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]))
+    emit('import', parseData)
     loading.value = false
     fileBtnRef.value.reset()
   }
   loading.value = true
   reader.readAsArrayBuffer(files)
 }
+
+const parsePropertiesField = (items:any) => {
+  return items.map((item : any) => {
+    if (item.properties && typeof item.properties === 'string') {
+      item.properties = JSON.parse(item.properties);
+    }
+    return item;
+  });
+};
 </script>
 
 <template>
   <FileBtn
-    ref="fileBtnRef"
-    v-bind="$attrs"
-    color="primary"
-    :loading="loading"
-    text="Import CSV"
-    accept=".csv, .xlsx"
-    :multiple="false"
-    @update:model-value="uploadedFile"
+      ref="fileBtnRef"
+      v-bind="$attrs"
+      color="primary"
+      :loading="loading"
+      text="Import CSV"
+      accept=".csv, .xlsx"
+      :multiple="false"
+      @update:model-value="uploadedFile"
   >
     <template
-      v-for="(_, name, index) in ($slots as {})"
-      :key="index"
-      #[name]="slotData"
+        v-for="(_, name, index) in ($slots as {})"
+        :key="index"
+        #[name]="slotData"
     >
       <slot
-        :name="name"
-        v-bind="((slotData || {}) as object)"
+          :name="name"
+          v-bind="((slotData || {}) as object)"
       />
     </template>
   </FileBtn>

package/dist/runtime/components/document/TemplateBuilder.vue

@@ -11,7 +11,7 @@ const isAdvanceMode = computed(() => {
   return modelValue.value && !isValidJsonArrayOfObjects(modelValue.value)
 })
 
-const templateItems = ref<Record<string, any>>([])
+const templateItems = ref<Record<string, any>[]>([])
 
 const headers = ref([
   { title: '',

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

@@ -235,26 +235,9 @@ const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpIt
         v-if="!$slots['item.operation']"
         #item.operation="props"
       >
-        <v-btn
-          :disabled="props.index==0"
-          variant="flat"
-          density="compact"
-          icon="mdi:mdi-arrow-up-thick"
-          @click="moveUpItem(props.item)"
-        />
-        <v-btn
-            variant="flat"
-            density="compact"
-            icon="fa:fas fa-arrow-right-to-bracket"
-            @click="moveToItem(props.item)"
-        />
-        <v-btn
-          :disabled="props.index==items.length-1"
-          variant="flat"
-          density="compact"
-          icon="mdi:mdi-arrow-down-thick"
-          @click="moveDownItem(props.item)"
-        />
+        <v-icon density="compact" :disabled="props.index==0" @click="moveUpItem(props.item)">mdi:mdi-arrow-up-thick</v-icon>
+        <v-icon density="compact" @click="moveToItem(props.item)">fa:fas fa-arrow-right-to-bracket</v-icon>
+        <v-icon density="compact" :disabled="props.index==items.length-1" @click="moveDownItem(props.item)">mdi:mdi-arrow-down-thick</v-icon>
       </template>
       <template
         v-if="!$slots['item.action']"

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,28 +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>;
+    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>;
-    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[]>;
+    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,8 +1,8 @@
 import { computed, onMounted, ref } from "vue";
 import { watchDebounced } from "@vueuse/core";
-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 useGraphqlModel(props) {
   const alert = useAlert();
   const items = ref([]);
@@ -16,15 +16,12 @@ export function useGraphqlModel(props) {
   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;
   }
@@ -34,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) {
@@ -62,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) {
@@ -80,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) {
@@ -105,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) {
@@ -116,8 +104,7 @@ export function useGraphqlModel(props) {
     }).finally(() => {
       isLoading.value = false;
       reload();
-      if (callback)
-        callback.done();
+      if (callback) callback.done();
     });
   }
   function loadItems(options) {
@@ -141,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) => {
@@ -158,8 +144,7 @@ export function useGraphqlModel(props) {
     reload();
   }, { deep: true, debounce: 500, maxWait: 500 });
   onMounted(() => {
-    if (!canServerPageable.value)
-      reload();
+    if (!canServerPageable.value) reload();
   });
   return {
     items,