@ramathibodi/nuxt-commons 0.1.9 → 0.1.10

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.9"
+  "version": "0.1.10"
 }

package/dist/module.mjs

@@ -33,6 +33,14 @@ const module = defineNuxtModule({
       src: resolver.resolve("runtime/types/menu.d.ts"),
       filename: "types/menu.d.ts"
     });
+    addTypeTemplate({
+      src: resolver.resolve("runtime/types/graphqlOperation.d.ts"),
+      filename: "types/graphqlOperation.d.ts"
+    });
+    addTypeTemplate({
+      src: resolver.resolve("runtime/types/formDialog.d.ts"),
+      filename: "types/formDialog.d.ts"
+    });
   }
 });
 

package/dist/runtime/components/ImportCSV.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import * as XLSX from 'xlsx'
-import { ref } from 'vue'
-import { useAlert } from '../composables/alert'
+import {ref} from 'vue'
+import {useAlert} from '../composables/alert'
 
 const alert = useAlert()
 const emit = defineEmits<{
@@ -12,10 +12,7 @@ const loading = ref(false)
 const fileBtnRef = ref()
 
 function uploadedFile(files: File[] | File | undefined) {
-  if (!files) {
-    alert?.addAlert({ message: 'Please upload a file again', alertType: 'error' })
-    return
-  }
+  if (!files) return
 
   if (Array.isArray(files) && files.length != 1) {
     alert?.addAlert({ message: 'Please select a single file for import', alertType: 'error' })

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { Codemirror } from 'vue-codemirror'
-import { oneDark } from '@codemirror/theme-one-dark'
-import { javascript } from '@codemirror/lang-javascript'
-import { html } from '@codemirror/lang-html'
-import { vue } from '@codemirror/lang-vue'
+import {Codemirror} from 'vue-codemirror'
+import {oneDark} from '@codemirror/theme-one-dark'
+import {javascript} from '@codemirror/lang-javascript'
+import {html} from '@codemirror/lang-html'
+import {vue as vueLang} from '@codemirror/lang-vue'
 
 interface Props {
   height?: string | number
@@ -19,7 +19,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const extensions = [oneDark]
 if (props.lang == 'vue') {
-  extensions.push(vue({ base: html({ autoCloseTags: true, matchClosingTags: true, selfClosingTags: true }) }))
+  extensions.push(vueLang({ base: html({ autoCloseTags: true, matchClosingTags: true, selfClosingTags: true }) }))
 }
 else {
   extensions.push(javascript({ typescript: true }))

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

@@ -1,11 +1,7 @@
 <script lang="ts" setup>
-import { ref, defineModel, computed, watch, watchEffect } from 'vue'
-import { cloneDeep, isEqual } from 'lodash-es'
-
-export interface FormDialogCallback {
-  done: Function
-  error: Function
-}
+import {computed, defineModel, ref, watch, watchEffect} from 'vue'
+import {cloneDeep, isEqual} from 'lodash-es'
+import type {FormDialogCallback} from '../../types/formDialog'
 
 interface Props {
   maxWidth?: number | string

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

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
-import { VDataTable } from 'vuetify/components/VDataTable'
-import { ref, watch, nextTick, defineOptions,computed,useAttrs } from 'vue'
-import type { FormDialogCallback } from './Dialog.vue'
-import { omit } from 'lodash-es'
+import {VDataTable} from 'vuetify/components/VDataTable'
+import {computed, defineOptions, nextTick, ref, useAttrs, watch} from 'vue'
+import type {FormDialogCallback} from '../../types/formDialog'
+import {omit} from 'lodash-es'
+
 defineOptions({
   inheritAttrs: false,
 })

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

@@ -0,0 +1,217 @@
+<script lang="ts" setup>
+import {computed, nextTick, ref, useAttrs} from 'vue'
+import type {GraphqlModelProps, HeaderProps} from '../../composables/graphqlModel'
+import {useGraphqlModel} from '../../composables/graphqlModel'
+import {VDataTable} from "vuetify/components/VDataTable";
+import {omit} from "lodash-es";
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props']> {
+  title: string
+  noDataText?: string
+  dialogFullscreen?: boolean
+  initialData?: Record<string, any>
+  toolbarColor?: string
+  importable?: boolean
+  exportable?: boolean
+}
+
+const props = withDefaults(defineProps<Props & GraphqlModelProps & HeaderProps>(), {
+  noDataText: 'ไม่พบข้อมูล',
+  dialogFullscreen: false,
+  toolbarColor: 'primary',
+  importable: true,
+  exportable: true,
+  modelKey: 'id',
+  modelBy: undefined,
+  fields: ()=>[]
+})
+
+const attrs = useAttrs()
+const plainAttrs = computed(() => {
+  let returnAttrs = omit(attrs, ['modelValue', 'onUpdate:modelValue'])
+  if (props.headers) returnAttrs['headers'] = props.headers
+  return returnAttrs
+})
+const currentItem = ref<Record<string, any> | undefined>(undefined)
+const isDialogOpen = ref<boolean>(false)
+
+const {items,itemsLength,
+  search,
+  canServerPageable,canServerSearch,canCreate,canUpdate,canDelete,
+  createItem,importItems,updateItem,deleteItem,
+  loadItems,reload,
+  isLoading} = useGraphqlModel(props)
+
+function openDialog(item?: object) {
+  currentItem.value = item
+  nextTick(() => {
+    isDialogOpen.value = true
+  })
+}
+
+defineExpose({ reload })
+</script>
+<template>
+  <v-card>
+    <VToolbar :color="toolbarColor">
+      <v-row
+          justify="end"
+          class="ma-1"
+          dense
+          no-gutters
+          align="center"
+      >
+        <v-col cols="7">
+          <VToolbarTitle class="pl-3">
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </VToolbarTitle>
+        </v-col>
+        <v-col cols="5">
+          <slot name="search">
+            <VTextField
+                v-model="search"
+                class="justify-end w-100"
+                density="compact"
+                hide-details
+                placeholder="ค้นหา"
+                clearable
+                variant="solo"
+            />
+          </slot>
+        </v-col>
+      </v-row>
+
+      <VToolbarItems>
+        <slot name="toolbarItems" />
+        <ImportCSV
+            v-if="props.importable"
+            icon="mdi mdi-file-upload"
+            variant="flat"
+            @import="importItems"
+        />
+        <ExportCSV
+            v-if="props.exportable && items.length"
+            icon="mdi mdi-file-download"
+            variant="flat"
+            :file-name="title"
+            :model-value="items"
+        />
+        <VBtn
+            :color="toolbarColor"
+            prepend-icon="mdi mdi-plus"
+            variant="flat"
+            @click="openDialog()"
+            v-if="canCreate"
+        >
+          add
+        </VBtn>
+      </VToolbarItems>
+    </VToolbar>
+    <v-data-table-server
+        v-if="canServerPageable"
+        v-bind="plainAttrs"
+        color="primary"
+        :items="items"
+        :items-length="itemsLength"
+        :item-value="props.modelKey"
+        :search="search"
+        :loading="isLoading"
+        @update:options="loadItems"
+    >
+      <!-- @ts-ignore -->
+      <template
+          v-for="(_, name, index) in ($slots as {})"
+          :key="index"
+          #[name]="slotData"
+      >
+        <slot
+            :name="name"
+            v-bind="(slotData as object)"
+            :operation="operation"
+        />
+      </template>
+      <template
+          v-if="!$slots['item.action']"
+          #item.action="{ item }"
+      >
+        <v-btn
+            variant="flat"
+            density="compact"
+            icon="mdi mdi-note-edit"
+            @click="openDialog(item)"
+            v-if="canUpdate"
+        />
+        <v-btn
+            variant="flat"
+            density="compact"
+            icon="mdi mdi-delete"
+            @click="deleteItem(item)"
+            v-if="canDelete"
+        />
+      </template>
+    </v-data-table-server>
+    <v-data-table
+        v-else
+        v-bind="plainAttrs"
+        color="primary"
+        :items="items"
+        :item-value="props.modelKey"
+        :search="search"
+        :loading="isLoading"
+    >
+      <!-- @ts-ignore -->
+      <template
+          v-for="(_, name, index) in ($slots as {})"
+          :key="index"
+          #[name]="slotData"
+      >
+        <slot
+            :name="name"
+            v-bind="(slotData as object)"
+            :operation="operation"
+        />
+      </template>
+      <template
+          v-if="!$slots['item.action']"
+          #item.action="{ item }"
+      >
+        <v-btn
+            variant="flat"
+            density="compact"
+            icon="mdi mdi-note-edit"
+            @click="openDialog(item)"
+            v-if="canUpdate"
+        />
+        <v-btn
+            variant="flat"
+            density="compact"
+            icon="mdi mdi-delete"
+            @click="deleteItem(item)"
+            v-if="canDelete"
+        />
+      </template>
+    </v-data-table>
+    <FormDialog
+        v-model="isDialogOpen"
+        :title="title"
+        :fullscreen="dialogFullscreen"
+        :initial-data="initialData"
+        :form-data="currentItem"
+        @create="createItem"
+        @update="updateItem"
+    >
+      <template #default="slotData">
+        <slot
+            name="form"
+            v-bind="slotData"
+        />
+      </template>
+    </FormDialog>
+  </v-card>
+</template>

package/dist/runtime/composables/api.mjs

@@ -1,12 +1,12 @@
 import { trimEnd, trimStart } from "lodash-es";
-import { useRuntimeConfig, useFetch } from "#imports";
+import { useFetch, useRuntimeConfig } from "#imports";
 export function useApi() {
   const config = useRuntimeConfig();
   function urlBuilder(url) {
     let returnUrl = "";
     if (Array.isArray(url)) {
       if (url[0].toLowerCase() == "agent")
-        url[0] = config?.public.WS_AGENT;
+        url[0] = config?.public.WS_AGENT || config?.public.WS_DEVICE;
       returnUrl = url.join("/");
     } else {
       returnUrl = url;

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

@@ -0,0 +1,44 @@
+import type { FormDialogCallback } from "../types/formDialog";
+import type { graphqlOperationObject } from "../types/graphqlOperation";
+export interface HeaderProps {
+    headers?: any[];
+}
+export interface GraphqlModelProps {
+    modelName: string;
+    modelKey?: string;
+    modelBy?: object;
+    operationCreate?: graphqlOperationObject<any, any> | string;
+    operationUpdate?: graphqlOperationObject<any, any> | string;
+    operationDelete?: graphqlOperationObject<any, any> | string;
+    operationRead?: graphqlOperationObject<any, any> | string;
+    operationReadPageable?: graphqlOperationObject<any, any> | string;
+    operationSearch?: graphqlOperationObject<any, any> | string;
+    fields?: Array<string | object>;
+}
+type GraphqlModelPropsWithOptionalHeaders = GraphqlModelProps & Partial<HeaderProps>;
+export declare function useGraphqlModel<T extends GraphqlModelPropsWithOptionalHeaders>(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[]>;
+    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;
+    importItems: (importItems: Record<string, any>[], callback?: FormDialogCallback) => void;
+    updateItem: (item: Record<string, any>, callback?: FormDialogCallback) => any;
+    deleteItem: (item: Record<string, any>, callback?: FormDialogCallback) => any;
+    loadItems: (options: any) => void;
+    reload: () => void;
+    isLoading: import("vue").Ref<boolean>;
+};
+export {};

package/dist/runtime/composables/graphqlModel.mjs

@@ -0,0 +1,261 @@
+import { computed, ref, watch } from "vue";
+import { useAlert } from "./alert.mjs";
+import { graphqlOperation } from "#imports";
+import { buildRequiredInputFields } from "./graphqlOperation.mjs";
+export function useGraphqlModel(props) {
+  const alert = useAlert();
+  const items = ref([]);
+  const itemsLength = ref(0);
+  const search = ref();
+  const currentOptions = ref();
+  const isLoading = ref(false);
+  function capitalizeFirstLetter(string) {
+    return string?.charAt(0).toUpperCase() + string?.slice(1);
+  }
+  function lowercaseFirstLetter(string) {
+    return string?.charAt(0).toLowerCase() + string?.slice(1);
+  }
+  const operationCreate = computed(() => {
+    if (props.operationCreate) {
+      if (typeof props.operationCreate === "string") {
+        if (graphqlOperation[props.operationCreate])
+          return graphqlOperation[props.operationCreate];
+      } else {
+        return props.operationCreate;
+      }
+    }
+    return graphqlOperation["create" + capitalizeFirstLetter(props.modelName)];
+  });
+  const operationUpdate = computed(() => {
+    if (props.operationUpdate) {
+      if (typeof props.operationUpdate === "string") {
+        if (graphqlOperation[props.operationUpdate])
+          return graphqlOperation[props.operationUpdate];
+      } else {
+        return props.operationUpdate;
+      }
+    }
+    return graphqlOperation["update" + capitalizeFirstLetter(props.modelName)];
+  });
+  const operationDelete = computed(() => {
+    if (props.operationDelete) {
+      if (typeof props.operationDelete === "string") {
+        if (graphqlOperation[props.operationDelete])
+          return graphqlOperation[props.operationDelete];
+      } else {
+        return props.operationDelete;
+      }
+    }
+    return graphqlOperation["delete" + capitalizeFirstLetter(props.modelName)];
+  });
+  const operationRead = computed(() => {
+    if (props.operationRead) {
+      if (typeof props.operationRead === "string") {
+        if (graphqlOperation[props.operationRead])
+          return graphqlOperation[props.operationRead];
+      } else {
+        return props.operationRead;
+      }
+    }
+    return graphqlOperation[lowercaseFirstLetter(props.modelName)];
+  });
+  const operationReadPageable = computed(() => {
+    if (props.operationReadPageable) {
+      if (typeof props.operationReadPageable === "string") {
+        if (graphqlOperation[props.operationReadPageable])
+          return graphqlOperation[props.operationReadPageable];
+      } else {
+        return props.operationReadPageable;
+      }
+    }
+    return graphqlOperation[lowercaseFirstLetter(props.modelName) + "Pageable"];
+  });
+  const operationSearch = computed(() => {
+    if (props.operationSearch) {
+      if (typeof props.operationSearch === "string") {
+        if (graphqlOperation[props.operationSearch])
+          return graphqlOperation[props.operationSearch];
+      } else {
+        return props.operationSearch;
+      }
+    }
+    return graphqlOperation["search" + capitalizeFirstLetter(props.modelName)];
+  });
+  function keyToField(key) {
+    const parts = key.split(".");
+    if (parts.length > 1) {
+      const result = {};
+      let current = result;
+      for (let i = 0; i < parts.length; i++) {
+        const part = parts[i];
+        const isLast = i === parts.length - 1;
+        if (isLast) {
+          current[part] = [part];
+        } else {
+          current[part] = [{}];
+          current = current[part][0];
+        }
+      }
+      return result;
+    } else {
+      return key;
+    }
+  }
+  const fields = computed(() => {
+    let tmpFields = [];
+    let fieldsProps = props.fields || [];
+    let requiredInputFields = [];
+    if (props.headers && props.headers.length > 0) {
+      props.headers.forEach((header) => {
+        if (!fieldsProps.includes(header.key))
+          tmpFields.push(keyToField(header.key));
+      });
+    }
+    if (canUpdate.value) {
+      requiredInputFields = buildRequiredInputFields(operationUpdate.value?.variables);
+    }
+    return [.../* @__PURE__ */ new Set([...fieldsProps, ...tmpFields, ...requiredInputFields])];
+  });
+  const canServerPageable = computed(() => {
+    return !!operationReadPageable.value && (!search.value || search.value && canServerSearch.value);
+  });
+  const canServerSearch = computed(() => {
+    return !!operationSearch.value;
+  });
+  const canCreate = computed(() => {
+    return !!operationCreate.value;
+  });
+  const canUpdate = computed(() => {
+    return !!operationUpdate.value;
+  });
+  const canDelete = computed(() => {
+    return !!operationDelete.value;
+  });
+  function createItem(item, callback, importing = false) {
+    isLoading.value = true;
+    return operationCreate.value?.call(fields.value, { input: item }).then((result) => {
+      if (canServerPageable) {
+        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();
+    });
+  }
+  function importItems(importItems2, callback) {
+    isLoading.value = true;
+    let importPromise = [];
+    importItems2.forEach((item) => {
+      let eachPromise = createItem(item, void 0, true);
+      if (eachPromise)
+        importPromise.push(eachPromise);
+    });
+    Promise.all(importPromise).finally(() => {
+      isLoading.value = false;
+      reload();
+      if (callback)
+        callback.done();
+    });
+  }
+  function updateItem(item, callback) {
+    isLoading.value = true;
+    return operationUpdate.value?.call(fields.value, { input: item }).then((result) => {
+      if (canServerPageable)
+        loadItems(currentOptions.value);
+      else {
+        let index = items.value.findIndex((item2) => item2[props.modelKey || "id"] === result[props.modelKey || "id"]);
+        if (index !== -1) {
+          items.value[index] = result;
+        }
+      }
+    }).catch((error) => {
+      alert?.addAlert({ alertType: "error", message: error });
+    }).finally(() => {
+      isLoading.value = false;
+      if (callback)
+        callback.done();
+    });
+  }
+  function deleteItem(item, callback) {
+    isLoading.value = true;
+    return operationDelete.value?.call(fields.value, { input: item }).catch((error) => {
+      alert?.addAlert({ alertType: "error", message: error });
+    }).finally(() => {
+      isLoading.value = false;
+      reload();
+      if (callback)
+        callback.done();
+    });
+  }
+  function loadItems(options) {
+    currentOptions.value = options;
+    if (canServerPageable) {
+      let pageableVariable = {
+        page: options.page,
+        perPage: options.itemsPerPage,
+        sortBy: options.sortBy
+      };
+      isLoading.value = true;
+      operationReadPageable.value?.call([{ data: fields.value }, "meta"], Object.assign(props.modelBy || {}, { pageable: pageableVariable })).then((result) => {
+        items.value = result.data;
+        itemsLength.value = result.meta.totalItems;
+      }).catch((error) => {
+        alert?.addAlert({ alertType: "error", message: error });
+      }).finally(() => {
+        isLoading.value = false;
+      });
+    }
+  }
+  function reload() {
+    if (canServerPageable.value) {
+      loadItems(currentOptions.value);
+    } else {
+      isLoading.value = true;
+      operationRead.value?.call(fields.value, props.modelBy).then((result) => {
+        items.value = result;
+      }).catch((error) => {
+        alert?.addAlert({ alertType: "error", message: error });
+      }).finally(() => {
+        isLoading.value = false;
+      });
+    }
+  }
+  watch(() => props.modelName, () => {
+    if (!canServerPageable.value)
+      reload();
+  }, { immediate: true });
+  watch(canServerPageable, () => {
+    reload();
+  });
+  return {
+    items,
+    itemsLength,
+    search,
+    currentOptions,
+    operationCreate,
+    operationUpdate,
+    operationDelete,
+    operationRead,
+    operationReadPageable,
+    operationSearch,
+    fields,
+    canServerPageable,
+    canServerSearch,
+    canCreate,
+    canUpdate,
+    canDelete,
+    createItem,
+    importItems,
+    updateItem,
+    deleteItem,
+    loadItems,
+    reload,
+    isLoading
+  };
+}

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

@@ -0,0 +1,10 @@
+import { type ClassConstructor } from "../utils/object";
+import type { graphqlTypeObject, graphqlVariable } from "../types/graphqlOperation";
+export declare function buildFields(operationFields: graphqlTypeObject, fields?: Array<string | Object> | ClassConstructor<any>, depth?: number): Array<string | Object>;
+export declare function buildVariables(outputVariables?: graphqlVariable[], inputVariables?: {
+    [p: string]: any;
+}, reject?: Function, isRoot?: boolean): Record<string, any> | undefined;
+export declare function buildRequiredInputFields(variables: graphqlVariable[] | undefined, inputField?: string): string[];
+export declare function useGraphQlOperation<T>(operationType: string, operation: string, fields?: Array<string | Object> | ClassConstructor<any>, variables?: {
+    [p: string]: any;
+}, cache?: boolean): Promise<T>;

package/dist/runtime/composables/graphqlOperation.mjs

@@ -0,0 +1,123 @@
+import { graphqlInputType, graphqlOperation, graphqlType, scalarType } from "#imports";
+import { classAttributes, isClassConstructor } from "../utils/object.mjs";
+import { useGraphQl } from "./graphql.mjs";
+export function buildFields(operationFields, fields, depth = 0) {
+  if (!operationFields)
+    return [];
+  if (isClassConstructor(fields))
+    fields = classAttributes(fields);
+  if (!fields || fields.length == 0)
+    fields = [...operationFields.fields];
+  if (fields.includes("*")) {
+    operationFields.fields.forEach((field) => {
+      if (!fields.includes(field))
+        fields.push(field);
+    });
+    fields.splice(fields.indexOf("*"), 1);
+  }
+  if (depth > 0)
+    operationFields.relations.forEach((relation) => fields.push(relation.name));
+  if (!fields.includes("timestampField") && operationFields.relations.find((relation) => relation.name == "timestampField"))
+    fields.push("timestampField");
+  if (!fields.includes("userstampField") && operationFields.relations.find((relation) => relation.name == "userstampField"))
+    fields.push("userstampField");
+  return fields.map((field) => {
+    if (typeof field == "string" && !operationFields?.fields?.includes(field)) {
+      let relationField = operationFields?.relations?.find((relation) => relation.name == field);
+      if (relationField && relationField.type) {
+        return { [relationField.name]: buildFields(graphqlType[relationField.type], void 0, depth - 1) };
+      } else {
+        return void 0;
+      }
+    } else if (typeof field == "object") {
+      Object.keys(field).forEach((key) => {
+        let relationField = operationFields?.relations?.find((relation) => relation.name == key);
+        if (relationField && relationField.type) {
+          let castField = field;
+          castField[key] = buildFields(graphqlType[relationField.type], castField[key], depth - 1);
+        }
+      });
+    }
+    return field;
+  }).filter((field) => !!field);
+}
+export function buildVariables(outputVariables, inputVariables, reject, isRoot = true) {
+  if (!outputVariables)
+    return void 0;
+  if (inputVariables) {
+    outputVariables.map((variable) => {
+      if (variable.type && !scalarType.includes(variable.type)) {
+        if (variable.list) {
+          if (inputVariables[variable.name] && Array.isArray(inputVariables[variable.name])) {
+            let tmpVariables = [];
+            inputVariables[variable.name].forEach((inputVariable) => {
+              tmpVariables.push(buildVariables(graphqlInputType[variable.type].variables, inputVariable, reject, false));
+            });
+            variable.value = tmpVariables;
+          } else {
+            variable.value = void 0;
+          }
+        } else {
+          variable.value = buildVariables(graphqlInputType[variable.type].variables, inputVariables[variable.name], reject, false);
+        }
+      } else {
+        variable.value = inputVariables[variable.name];
+      }
+      return variable;
+    });
+  }
+  outputVariables.forEach((variable) => {
+    if (variable.required && variable.value === void 0) {
+      console.warn("Required variable " + variable.name + " is not found, operation abort");
+      if (reject) {
+        reject("Required variable " + variable.name + " is not found");
+        return;
+      }
+    }
+  });
+  let usedVariables = outputVariables.map((variable) => variable.name);
+  let droppedVariable = Object.keys(inputVariables || {}).filter((key) => !usedVariables.includes(key));
+  if (droppedVariable.length > 0)
+    console.debug("There is data not appeared in schema and dropped before operation.", droppedVariable);
+  return outputVariables.reduce((acc, item) => {
+    acc[item.name] = isRoot ? item : item.value;
+    return acc;
+  }, {});
+}
+export function buildRequiredInputFields(variables, inputField = "input") {
+  let inputVariable = variables?.find((variable) => variable.name == inputField);
+  if (inputVariable) {
+    let returnFields = [];
+    graphqlInputType[inputVariable.type]?.variables?.forEach((variable) => {
+      if (variable.required)
+        returnFields.push(variable.name);
+    });
+    return returnFields;
+  } else {
+    return [];
+  }
+}
+export function useGraphQlOperation(operationType, operation, fields, variables, cache = false) {
+  return new Promise((resolve, reject) => {
+    let rejectReason = void 0;
+    function rejectInside(reason) {
+      rejectReason = reason;
+    }
+    variables = buildVariables(graphqlOperation[operation]?.variables, variables, rejectInside);
+    if (rejectReason) {
+      reject(rejectReason);
+      return;
+    }
+    if (graphqlOperation[operation]?.fields) {
+      fields = buildFields(graphqlOperation[operation]?.fields, fields, 0);
+      if (operationType == "Query")
+        useGraphQl().queryPromise(operation, fields, variables, cache).then((result) => resolve(result)).catch((error) => reject(error));
+      else if (operationType == "Mutation")
+        useGraphQl().mutationPromise(operation, fields, variables).then((result) => resolve(result)).catch((error) => reject(error));
+      else
+        reject("Invalid Operation Type");
+    } else {
+      reject("No schema of return data available");
+    }
+  });
+}

package/dist/runtime/types/formDialog.d.ts

@@ -0,0 +1,4 @@
+export interface FormDialogCallback {
+    done: Function
+    error: Function
+}

package/dist/runtime/types/graphqlOperation.d.ts

@@ -0,0 +1,23 @@
+export interface graphqlVariable {
+    name: string;
+    list?: boolean;
+    required?: boolean;
+    type?: string;
+    value?: any;
+}
+export interface graphqlOperationObject<T, U> {
+    variables?: graphqlVariable[];
+    fields?: graphqlTypeObject;
+    operationType: "Query" | "Mutation";
+    name: string;
+    call: (fields?: Array<string | Object>, variables?: U) => Promise<T>;
+}
+
+export interface graphqlTypeObject {
+    fields: string[];
+    relations: graphqlVariable[];
+}
+
+export interface graphqlInputObject {
+    variables: graphqlVariable[];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramathibodi/nuxt-commons",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",
@@ -19,13 +19,27 @@
       "import": "./dist/runtime/utils/*.mjs",
       "require": "./dist/runtime/utils/*.cjs"
     },
+    "./composables/*": {
+      "types": "./dist/runtime/composables/*.d.ts",
+      "import": "./dist/runtime/composables/*.mjs",
+      "require": "./dist/runtime/composables/*.cjs"
+    },
+    "./composables/*/*": {
+      "types": "./dist/runtime/composables/*/*.d.ts",
+      "import": "./dist/runtime/composables/*/*.mjs",
+      "require": "./dist/runtime/composables/*/*.cjs"
+    },
+    "./components/*": "./dist/runtime/components/*.vue",
+    "./components/*/*": "./dist/runtime/components/*/*.vue",
     "./lab/*": "./dist/runtime/labs/*.vue",
     "./lab/*/*": "./dist/runtime/labs/*/*.vue"
   },
   "main": "./dist/module.cjs",
   "types": "./dist/types.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "scripts",
+    "templates"
   ],
   "scripts": {
     "prepack": "nuxt-module-build build",
@@ -36,7 +50,8 @@
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "test": "vitest run",
-    "test:watch": "vitest watch"
+    "test:watch": "vitest watch",
+    "postinstall": "node scripts/postInstall.cjs"
   },
   "dependencies": {
     "@codemirror/lang-html": "^6.4.9",
@@ -51,6 +66,10 @@
     "@fullcalendar/multimonth": "^6.1.11",
     "@fullcalendar/timegrid": "^6.1.11",
     "@fullcalendar/vue3": "^6.1.11",
+    "@graphql-codegen/cli": "^5.0.2",
+    "@graphql-codegen/add": "^5.0.2",
+    "@graphql-codegen/plugin-helpers": "^5.0.4",
+    "@graphql-codegen/typescript": "^4.0.6",
     "@mdi/font": "^7.4.47",
     "@nuxt/kit": "^3.11.2",
     "@nuxtjs/apollo": "5.0.0-alpha.14",
@@ -61,6 +80,7 @@
     "cropperjs": "^1.6.2",
     "currency.js": "^2.0.4",
     "fuse.js": "^7.0.0",
+    "graphql": "^16.9.0",
     "gql-query-builder": "^3.8.0",
     "lodash": "^4.17.21",
     "luxon": "^3.4.4",
@@ -95,4 +115,4 @@
     "vitest": "^1.5.1",
     "vue-tsc": "^1.8.27"
   }
-}
+}

package/scripts/postInstall.cjs

@@ -0,0 +1,76 @@
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+// Function to copy a file from source to destination
+function copyFile(src, dest) {
+    fs.mkdirSync(path.dirname(dest), { recursive: true });
+    fs.copyFileSync(src, dest);
+    console.log(`Copied ${src} to ${dest}`);
+}
+
+// Function to copy all files in a directory recursively
+function copyDirectory(srcDir, destDir) {
+    const entries = fs.readdirSync(srcDir, { withFileTypes: true });
+
+    for (let entry of entries) {
+        const srcPath = path.join(srcDir, entry.name);
+        const destPath = path.join(destDir, entry.name);
+
+        if (entry.isDirectory()) {
+            copyDirectory(srcPath, destPath);
+        } else {
+            copyFile(srcPath, destPath);
+        }
+    }
+}
+
+// Function to add copied files to git
+function addFilesToGit(files, projectRoot) {
+    files.forEach(file => {
+        const filePath = path.join(projectRoot, file);
+        execSync(`git add ${filePath}`, { stdio: 'inherit' });
+        console.log(`Added ${filePath} to git`);
+    });
+}
+
+// Function to modify package.json to add a new script
+function addScriptToPackageJson(scriptName, scriptCommand) {
+    const packageJsonPath = path.join(process.env.INIT_CWD, 'package.json');
+    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+
+    packageJson.scripts = packageJson.scripts || {};
+    packageJson.scripts[scriptName] = scriptCommand;
+
+    fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
+    console.log(`Added script "${scriptName}": "${scriptCommand}" to package.json`);
+}
+
+// Function to run npm run codegen safely
+function runCodegen(projectRoot) {
+    try {
+        execSync('npm run codegen', { cwd: projectRoot, stdio: 'inherit' });
+        console.log('Successfully ran npm run codegen');
+    } catch (error) {
+        console.log('npm run codegen failed or script not found, continuing...');
+    }
+}
+
+if (process.env.INIT_CWD === process.cwd()) process.exit()
+
+// Define source and destination directories
+const srcDir = path.join(__dirname, '..', 'templates');
+const destDir = process.env.INIT_CWD; // Project root
+
+// Copy all files from templates directory to project root
+copyDirectory(srcDir, destDir);
+
+// Add new script to package.json
+addScriptToPackageJson('codegen', 'graphql-codegen --require dotenv/config --config ./.codegen/codegen.ts dotenv_config_path=.env');
+
+// Add copied files to git
+const copiedFiles = fs.readdirSync(srcDir).map(file => path.join('.', file));
+addFilesToGit(copiedFiles, destDir);
+
+// Run npm run codegen safely
+runCodegen(destDir);

package/templates/.codegen/codegen.ts

@@ -0,0 +1,32 @@
+import type {CodegenConfig} from '@graphql-codegen/cli';
+
+const config: CodegenConfig = {
+  overwrite: true,
+  schema: process.env.NUXT_PUBLIC_WS_GRAPHQL,
+  generates: {
+    './types/graphql.ts': {
+      plugins: [{
+        add: {
+          content: '//Auto-generated file, do not make any change. Content could be overwritten.',
+        }
+      },'typescript'],
+      config: {
+        maybeValue: 'T | null | undefined',
+        inputMaybeValue: 'T | null | undefined',
+        declarationKind: 'class',
+        enumsAsTypes: true,
+        skipTypename: true,
+      },
+    },
+    './composables/graphqlObject.ts': {
+      plugins: [{
+        add: {
+          content: '//Auto-generated file, do not make any change. Content could be overwritten.',
+        }
+      },'./.codegen/plugin-schema-object.js'],
+    },
+  },
+  hooks: { afterAllFileWrite: ['prettier --parser typescript --tab-width 4 --write','git add'] }
+};
+
+export default config;

package/templates/.codegen/plugin-schema-object.js

@@ -0,0 +1,148 @@
+const { getCachedDocumentNodeFromSchema } = require('@graphql-codegen/plugin-helpers')
+const { visit } = require('graphql')
+const { camelCase } = require('lodash')
+
+function capitalizeFirstLetter(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+function inputTypeToObject(inputType,result) {
+    if (inputType.kind==="NonNullType") {
+        result["required"] = true
+        inputTypeToObject(inputType.type,result)
+    }
+    if (inputType.kind==="ListType") {
+        result["list"] = true
+        inputTypeToObject(inputType.type,result)
+    }
+    if (inputType.kind==="NamedType") {
+        result["type"] = inputType.name.value
+    }
+}
+
+module.exports = {
+    plugin(schema, _documents, _config) {
+        const astNode = getCachedDocumentNodeFromSchema(schema) // Transforms the GraphQLSchema into ASTNode
+
+        const operationNode = []
+        const typeNode = []
+        const inputNode = []
+
+        const scalarType =['ID','String','Boolean','Int','Float']
+
+        const result = visit(astNode, {
+            ObjectTypeDefinition(node) {
+                if (node.name.value==="Query" || node.name.value==="Mutation")
+                {
+                    node.fields.forEach((field)=>{
+                        let fieldType = {}
+                        let fieldVariables = []
+                        inputTypeToObject(field.type,fieldType)
+                        field.arguments.forEach((argument)=>{
+                            let fieldVariablesItem = {name: argument.name.value}
+                            if (argument.defaultValue) fieldVariablesItem.value = argument.defaultValue.value
+                            if (argument.type) inputTypeToObject(argument.type,fieldVariablesItem)
+                            fieldVariables.push(fieldVariablesItem)
+                        })
+                        operationNode.push({
+                            name: field.name.value,
+                            variables: fieldVariables,
+                            type: fieldType.type,
+                            operationType: node.name.value
+                        })
+                    })
+                } else {
+                    let fields = []
+                    node.fields.forEach((field)=>{
+                        let fieldVariablesItem = {name: field.name.value}
+                        if (field.type) inputTypeToObject(field.type,fieldVariablesItem)
+                        fields.push(fieldVariablesItem)
+                    })
+                    typeNode.push({
+                        name: node.name.value,
+                        fields: fields
+                    })
+                }
+            },
+            InputObjectTypeDefinition(node) {
+                let fields = []
+                node.fields.forEach((field)=>{
+                    let fieldVariablesItem = {name: field.name.value}
+                    if (field.defaultValue) fieldVariablesItem.value = field.defaultValue.value
+                    if (field.type) inputTypeToObject(field.type,fieldVariablesItem)
+                    fields.push(fieldVariablesItem)
+                })
+                inputNode.push({
+                    name: node.name.value,
+                    variables: fields,
+                })
+            },
+            ScalarTypeDefinition(node) {
+                scalarType.push(node.name.value)
+            }
+        })
+
+        typeNode.map((node)=>{
+            let scalars = []
+            let relations = []
+            node.fields.forEach((field)=>{
+                if (scalarType.includes(field.type)) scalars.push(field.name)
+                else relations.push(field)
+            })
+            node.scalars = scalars
+            node.relations = relations
+        })
+
+        return `
+        import * as graphQlClass from "~/types/graphql"
+        import { useGraphQlOperation } from "#imports";
+        
+        export const scalarType = ${JSON.stringify(scalarType)}
+        
+        function operationCall${"<"+"T,U>"}(operationType:string, operation: string,fields?: ${"Array"+"<string | Object>"},variables?: U) {
+            return useGraphQlOperation${"<"+"T>"}(operationType,operation,fields,variables as {[p: string] : any} | undefined)
+        }
+        
+        function createGraphQLOperation${"<"+"T,U>"}(operationType: "Query" | "Mutation",name: string,variables?: graphqlVariable[],fields?: graphqlTypeObject): graphqlOperationObject${"<"+"T,U>"} {
+            return {
+                operationType,
+                name,
+                variables,
+                fields,
+                call: async function(fields?: ${"Array"+"<string | Object>"}, variables?: U): Promise${"<"+"T>"} {
+                    return operationCall(operationType,name, fields, variables);
+                }
+            }
+        }
+        
+        interface graphqlTypeObjects extends ${"Record<string,"+"graphqlTypeObject>"} {
+        ${typeNode.map((node)=>`${node.name}:  graphqlTypeObject`).join("\n")}
+        }
+        
+        export const graphqlType: graphqlTypeObjects= {
+        ${typeNode.map((node)=>`${node.name} : {
+        fields : ${JSON.stringify(node.scalars)},
+        relations: ${JSON.stringify(node.relations)}
+        } as graphqlTypeObject `).join(",")}
+        }
+        
+        interface graphqlInputObjects extends ${"Record<string,"+"graphqlInputObject>"} {
+        ${inputNode.map((node)=>`${node.name}:  graphqlInputObject`).join("\n")}
+        }
+        
+        export const graphqlInputType: graphqlInputObjects = {
+        ${inputNode.map((node)=>`${node.name} : {
+        variables: ${JSON.stringify(node.variables)},
+        }`).join(",")}
+        }
+        
+        interface graphqlOperationObjects extends ${"Record<string,"+"graphqlOperationObject"+"<"+"any"+",any>"+">"} {
+        ${operationNode.map((node)=>`${node.name}:  graphqlOperationObject${"<graphQlClass"+"."+node.operationType+"['"+node.name+"'],"+ ((node.variables.length) ? "graphQlClass."+node.operationType+capitalizeFirstLetter(camelCase(node.name))+"Args" : "undefined")+">"}`).join("\n")}
+        }
+        
+        export const graphqlOperation: graphqlOperationObjects = {
+        ${operationNode.map((node)=>`${node.name}:  createGraphQLOperation${"<graphQlClass"+"."+node.operationType+"['"+node.name+"'],"+ ((node.variables.length) ? "graphQlClass."+node.operationType+capitalizeFirstLetter(camelCase(node.name))+"Args" : "undefined")+">"}('${node.operationType}','${node.name}',${JSON.stringify(node.variables)},${typeNode.find((type)=>type.name===node.type) ? "graphqlType."+node.type : "undefined"})`).join(",")}
+        }
+        `
+    }
+}