@ramathibodi/nuxt-commons 0.1.28 → 0.1.30

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.28",
+  "version": "0.1.30",
   "builder": {
     "@nuxt/module-builder": "0.8.3",
     "unbuild": "2.0.0"

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

@@ -0,0 +1,426 @@
+<script lang="ts" setup>
+import {computed, defineOptions, nextTick, ref, useAttrs, useSlots, watch} from 'vue'
+import {omit} from 'lodash-es'
+import type {FormDialogCallback} from '../../types/formDialog'
+import {VDataIterator} from "vuetify/components/VDataIterator";
+import {VDataTable} from "vuetify/components/VDataTable";
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof VDataIterator['$props']>,/* @vue-ignore */ InstanceType<typeof VDataTable['$props']> {
+  title: string
+  noDataText?: string
+  modelValue?: Record<string, any>[]
+  modelKey?: string
+  dialogFullscreen?: boolean
+  initialData?: Record<string, any>
+  toolbarColor?: string
+  importable?: boolean
+  exportable?: boolean
+
+  viewSwitch?: boolean
+  viewSwitchMultiple?: boolean
+
+  cols?: string | number | boolean
+  xxl?: string | number | boolean
+  xl?: string | number | boolean
+  lg?: string | number | boolean
+  md?: string | number | boolean
+  sm?: string | number | boolean
+  itemsPerPage?: string | number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  noDataText: 'ไม่พบข้อมูล',
+  dialogFullscreen: false,
+  modelKey: 'id',
+  toolbarColor: 'primary',
+  importable: true,
+  exportable: true,
+
+  viewSwitch: false,
+  viewSwitchMultiple:false,
+
+  cols: 12,
+  xxl: false,
+  xl: false,
+  lg: false,
+  md: 2,
+  sm: 6,
+  itemsPerPage: 12,
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const attrs = useAttrs()
+const plainAttrs = computed(() => {
+  return omit(attrs, ['modelValue', 'onUpdate:modelValue'])
+})
+
+const slots = useSlots()
+const tableSlots = computed(() => {
+  return omit(slots, ['item'])
+})
+
+const viewType = ref<string[] | string>('iterator')
+
+const items = ref<Record<string, any>[]>([])
+const search = ref<string>()
+const currentItem = ref<Record<string, any> | undefined>(undefined)
+
+const isDialogOpen = ref<boolean>(false)
+
+watch(() => props.modelValue, (newValue) => {
+  if (!Array.isArray(newValue) || !newValue.every(item => typeof item === 'object')) {
+    items.value = []
+  }
+  else {
+    let maxKey = 0
+
+    newValue.forEach((item) => {
+      if (!item.hasOwnProperty(props.modelKey)) {
+        maxKey = Math.max(maxKey, ...newValue.map(i => i[props.modelKey] || 0))
+        item[props.modelKey] = maxKey + 1
+      }
+    })
+
+    items.value = newValue
+  }
+}, { immediate: true })
+
+watch(items, (newValue) => {
+  emit('update:modelValue', newValue)
+}, { deep: true })
+
+const itemsPerPageInternal = ref<string | number>()
+watch(() => props.itemsPerPage, (newValue) => {
+  if (newValue.toString().toLowerCase() == 'all') itemsPerPageInternal.value = '-1'
+  else if (newValue) itemsPerPageInternal.value = newValue
+}, { immediate: true })
+
+function createItem(item: Record<string, any>, callback?: FormDialogCallback) {
+  if (items.value.length > 0) item[props.modelKey] = Math.max(...items.value.map(i => i[props.modelKey] || 0)) + 1
+  else item[props.modelKey] = 1
+
+  items.value.push(item)
+
+  if (callback) callback.done()
+}
+
+function importItems(importItems: Record<string, any>[], callback?: FormDialogCallback) {
+  importItems.forEach((item) => {
+    createItem(item)
+  })
+  if (callback) callback.done()
+}
+
+function updateItem(newItem: Record<string, any>, callback?: FormDialogCallback) {
+  const index = items.value.findIndex(item => item[props.modelKey] === newItem[props.modelKey])
+
+  if (index !== -1) {
+    items.value[index] = newItem
+  }
+
+  if (callback) callback.done()
+}
+
+function moveUpItem(currentItem: Record<string, any>, callback?: FormDialogCallback) {
+  const index = items.value.findIndex(item => item[props.modelKey] === currentItem[props.modelKey])
+
+  if (index > 0) {
+    const temp = items.value[index - 1]
+    items.value[index - 1] = items.value[index]
+    items.value[index] = temp
+  }
+
+  if (callback) callback.done()
+}
+
+function moveDownItem(currentItem: Record<string, any>, callback?: FormDialogCallback) {
+  const index = items.value.findIndex(item => item[props.modelKey] === currentItem[props.modelKey])
+
+  if (index >= 0 && index < items.value.length - 1) {
+    const temp = items.value[index + 1]
+    items.value[index + 1] = items.value[index]
+    items.value[index] = temp
+  }
+
+  if (callback) callback.done()
+}
+
+function moveToItem(currentItem: Record<string, any>, callback?: FormDialogCallback) {
+  const index = items.value.findIndex(item => item[props.modelKey] === currentItem[props.modelKey]);
+
+  if (index !== -1) {
+    const newPosition = prompt("Enter the new position (0-based index):");
+    const parsedPosition = parseInt(<string>newPosition, 10);
+
+    if (isNaN(parsedPosition) || parsedPosition < 0 || parsedPosition >= items.value.length) {
+      alert("Invalid position entered. Please enter a number between 0 and " + (items.value.length - 1));
+      return
+    }
+
+    const [temp] = items.value.splice(index, 1);
+
+    items.value.splice(parsedPosition, 0, temp);
+  }
+
+  if (callback) callback.done();
+}
+
+function deleteItem(deleteItem: Record<string, any>, callback?: FormDialogCallback) {
+  const index = items.value.findIndex(item => item[props.modelKey] === deleteItem[props.modelKey])
+
+  if (index !== -1) {
+    items.value.splice(index, 1)
+  }
+
+  if (callback) callback.done()
+}
+
+function openDialog(item?: object) {
+  currentItem.value = item
+  nextTick(() => {
+    isDialogOpen.value = true
+  })
+}
+
+const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpItem, moveDownItem,moveToItem })
+</script>
+
+<template>
+  <v-card>
+    <v-data-iterator
+        v-bind="plainAttrs"
+        v-model:items-per-page="itemsPerPageInternal"
+        :items="items"
+        :item-value="modelKey"
+        :search="search"
+    >
+      <template #default="defaultProps" v-if="viewType.includes('iterator')">
+        <slot
+            v-bind="defaultProps"
+            :operation="operation"
+        >
+          <v-container fluid>
+            <v-row>
+              <v-col
+                  v-for="(item, index) in defaultProps.items"
+                  :key="index"
+                  :cols="cols"
+                  :sm="sm"
+                  :md="md"
+                  :lg="lg"
+                  :xl="xl"
+                  :xxl="xxl"
+              >
+                <slot
+                    name="item"
+                    :item="item"
+                    :operation="operation"
+                />
+              </v-col>
+            </v-row>
+          </v-container>
+        </slot>
+      </template>
+      <template #loader="loaderProps">
+        <slot
+            name="loader"
+            v-bind="loaderProps"
+        >
+          <v-container fluid>
+            <v-row>
+              <v-col
+                  v-for="key in computedSkeletonPerPage"
+                  :key="key"
+                  :cols="cols"
+                  :sm="sm"
+                  :md="md"
+                  :lg="lg"
+                  :xl="xl"
+                  :xxl="xxl"
+              >
+                <slot name="loaderItem">
+                  <v-skeleton-loader
+                      type="paragraph"
+                  />
+                </slot>
+              </v-col>
+            </v-row>
+          </v-container>
+        </slot>
+      </template>
+      <template #header="headerProps">
+        <slot
+            name="header"
+            v-bind="headerProps"
+            :items="items"
+            :operation="operation"
+        >
+          <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"
+                  :color="toolbarColor"
+              />
+              <ExportCSV
+                  v-if="props.exportable && items.length"
+                  icon="mdi:mdi-file-download"
+                  variant="flat"
+                  :file-name="title"
+                  :model-value="items"
+                  :color="toolbarColor"
+              />
+              <VBtn
+                  :color="toolbarColor"
+                  prepend-icon="mdi:mdi-plus"
+                  variant="flat"
+                  @click="openDialog()"
+              >
+                add
+              </VBtn>
+              <v-row align="center" class="mr-2 ml-2" v-if="viewSwitch">
+                <v-btn-toggle v-model="viewType" :multiple="viewSwitchMultiple">
+                  <v-btn icon="mdi mdi-view-grid-outline" value="iterator"></v-btn>
+                  <v-btn icon="mdi mdi-table-large" value="table"></v-btn>
+                </v-btn-toggle>
+              </v-row>
+            </VToolbarItems>
+          </VToolbar>
+        </slot>
+        <v-data-table
+            v-bind="plainAttrs"
+            color="primary"
+            :items="items"
+            :search="search"
+            v-if="viewType.includes('table')"
+        >
+          <!-- @ts-ignore -->
+          <template
+              v-for="(_, name, index) in (tableSlots as {})"
+              :key="index"
+              #[name]="slotData"
+          >
+            <slot
+                :name="name"
+                v-bind="((slotData || {}) as object)"
+                :operation="operation"
+            />
+          </template>
+          <template
+              v-if="!$slots['item.operation']"
+              #item.operation="props"
+          >
+            <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']"
+              #item.action="{ item }"
+          >
+            <v-btn
+                variant="flat"
+                density="compact"
+                icon="mdi:mdi-note-edit"
+                @click="openDialog(item)"
+            />
+            <v-btn
+                variant="flat"
+                density="compact"
+                icon="mdi:mdi-delete"
+                @click="deleteItem(item)"
+            />
+          </template>
+        </v-data-table>
+      </template>
+      <template #footer="footerProps" v-if="viewType.includes('iterator')">
+        <v-container fluid>
+          <v-row
+              align-content="center"
+              justify="end"
+              dense
+          >
+            <v-spacer />
+            <v-select
+                v-model="itemsPerPageInternal"
+                density="compact"
+                variant="outlined"
+                :items="[6, 12, 18, 24, 30, { title: 'All', value: '-1' }]"
+                min-width="220"
+                max-width="220"
+                hide-details
+            >
+              <template #prepend>
+                Items per page:
+              </template>
+            </v-select>
+            <v-pagination
+                density="compact"
+                :length="footerProps.pageCount"
+                total-visible="6"
+                show-first-last-page
+                @first="footerProps.setPage(1)"
+                @last="footerProps.setPage(footerProps.pageCount)"
+                @next="footerProps.nextPage"
+                @prev="footerProps.prevPage"
+                @update:model-value="footerProps.setPage"
+            />
+          </v-row>
+        </v-container>
+      </template >
+    </v-data-iterator>
+    <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/components/master/Autocomplete.vue

@@ -58,8 +58,7 @@ function query(groupKey: string, filterText: string | undefined) {
     masterItems.value = result
     items.value = result
     isErrorLoading.value = false
-  }).catch((error) => {
-    console.log(error)
+  }).catch((_error) => {
     isErrorLoading.value = true
   }).finally(() => {
     isLoading.value = false

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

@@ -0,0 +1,141 @@
+<script lang="ts" setup>
+import {VAutocomplete} from 'vuetify/components/VAutocomplete'
+import {concat, isEmpty, isArray, sortBy} from 'lodash-es'
+import {computed, ref,watchEffect} from 'vue'
+import {watchDebounced} from '@vueuse/core'
+import {useFuzzy} from '../../composables/utils/fuzzy'
+import {useGraphQlOperation} from "../../composables/graphqlOperation";
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof VAutocomplete['$props']> {
+  fuzzy?: boolean
+  sortBy?: string
+  showCode?: boolean
+
+  modelName: string
+  modelBy?: object
+  itemTitle: string
+  itemValue: string
+  fields?: Array<string | object>
+  cache?: boolean
+
+  serverSearch?: boolean
+  serverSearchKey?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  fuzzy: false,
+  showCode: false,
+
+  cache: false,
+
+  serverSearch: false,
+})
+
+const modelItems = ref<Array<any>>([])
+const items = ref<Array<any>>([])
+
+const searchData = ref<string>('')
+
+const isLoading = ref(false)
+const isErrorLoading = ref(false)
+
+watchEffect(()=>{
+  let fields: any[] = [props.itemTitle,props.itemValue]
+  if (props.fields) fields = concat(fields, props.fields)
+
+  const variables: Record<string, any> = Object.assign({},props.modelBy)
+  if (props.serverSearch && props.serverSearchKey) {
+    variables[props.serverSearchKey] = searchData.value
+  }
+
+  isLoading.value = true
+
+  useGraphQlOperation('Query',props.modelName,fields,variables,props.cache).then((result: any) => {
+    if (isArray(result)) {
+      modelItems.value = result
+      items.value = result
+      isErrorLoading.value = false
+    } else {
+      isErrorLoading.value = true
+    }
+  }).catch((_error) => {
+    isErrorLoading.value = true
+  }).finally(() => {
+    isLoading.value = false
+  })
+})
+
+async function fuzzySearch() {
+  if (props.fuzzy) {
+    if (isEmpty(searchData.value)) {
+      items.value = modelItems.value
+    }
+    else {
+      let fields: any[] = [props.itemTitle,props.itemValue]
+      if (props.fields) fields = concat(fields, props.fields)
+
+      const results: any = useFuzzy(searchData.value, modelItems.value, fields)
+      items.value = []
+      if (results.value.length) {
+        for (let i = 0; results.value.length > i; i++) {
+          if (results.value[i].item) items.value.push(results.value[i].item)
+        }
+      }
+    }
+  }
+}
+
+watchDebounced(searchData, fuzzySearch, { debounce: 1000, maxWait: 5000 })
+
+const computedItems = computed(()=>{
+  let sortByField = props.sortBy || props.itemTitle
+
+  if (props.fuzzy && !isEmpty(searchData.value)) {
+    return items.value
+  } else {
+    return sortBy(items.value, [sortByField])
+  }
+})
+</script>
+
+<template>
+  <v-autocomplete
+      v-model:search="searchData"
+      v-bind="$attrs"
+      :items="computedItems"
+      :no-filter="props.fuzzy"
+      :item-title="props.itemTitle"
+      :item-value="props.itemValue"
+      :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"
+        #item="{ props, item }"
+    >
+      <v-list-item
+          v-bind="props"
+          :title="(showCode ? item.value+'-' : '')+item.title"
+      />
+    </template>
+    <template
+        v-if="isErrorLoading"
+        #append
+    >
+      <v-icon color="error">
+        mdi mdi-alert
+      </v-icon>
+    </template>
+  </v-autocomplete>
+</template>

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

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import {computed, nextTick, ref, useAttrs, watch} from 'vue'
+import {computed, nextTick, ref, useAttrs, useSlots, watch} from 'vue'
 import {VDataIterator} from 'vuetify/components/VDataIterator'
+import {VDataTable} from "vuetify/components/VDataTable";
 import {omit} from 'lodash-es'
 import type {GraphqlModelProps} from '../../composables/graphqlModel'
 import {useGraphqlModel} from '../../composables/graphqlModel'
@@ -20,6 +21,10 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VDataIterator['$pr
   insertable?: boolean
   searchable?: boolean
   search?: string
+
+  viewSwitch?: boolean
+  viewSwitchMultiple?: boolean
+
   cols?: string | number | boolean
   xxl?: string | number | boolean
   xl?: string | number | boolean
@@ -40,6 +45,10 @@ const props = withDefaults(defineProps<Props & GraphqlModelProps>(), {
   modelKey: 'id',
   modelBy: undefined,
   fields: () => [],
+
+  viewSwitch: false,
+  viewSwitchMultiple:false,
+
   cols: 12,
   xxl: false,
   xl: false,
@@ -55,6 +64,13 @@ const plainAttrs = computed(() => {
   if (props.headers) returnAttrs['headers'] = props.headers
   return returnAttrs
 })
+const slots = useSlots()
+const tableSlots = computed(() => {
+  return omit(slots, ['item'])
+})
+
+const viewType = ref<string[] | string>('iterator')
+
 const currentItem = ref<Record<string, any> | undefined>(undefined)
 const isDialogOpen = ref<boolean>(false)
 
@@ -126,7 +142,7 @@ defineExpose({ reload })
       :search="search"
       :loading="isLoading"
     >
-      <template #default="defaultProps">
+      <template #default="defaultProps" v-if="viewType.includes('iterator')">
         <slot
           v-bind="defaultProps"
           :operation="operation"
@@ -153,7 +169,7 @@ defineExpose({ reload })
           </v-container>
         </slot>
       </template>
-      <template #loader="loaderProps">
+      <template #loader="loaderProps" v-if="viewType.includes('iterator')">
         <slot
           name="loader"
           v-bind="loaderProps"
@@ -252,11 +268,103 @@ defineExpose({ reload })
               >
                 add
               </VBtn>
+              <v-row align="center" class="mr-2 ml-2" v-if="viewSwitch">
+                <v-btn-toggle v-model="viewType" :multiple="viewSwitchMultiple">
+                  <v-btn icon="mdi mdi-view-grid-outline" value="iterator"></v-btn>
+                  <v-btn icon="mdi mdi-table-large" value="table"></v-btn>
+                </v-btn-toggle>
+              </v-row>
             </VToolbarItems>
           </VToolbar>
         </slot>
+        <template v-if="viewType.includes('table')">
+          <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 (tableSlots 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
+                  v-if="canUpdate"
+                  variant="flat"
+                  density="compact"
+                  icon="mdi mdi-note-edit"
+                  @click="openDialog(item)"
+              />
+              <v-btn
+                  v-if="canDelete"
+                  variant="flat"
+                  density="compact"
+                  icon="mdi mdi-delete"
+                  @click="deleteItem(item)"
+              />
+            </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 (tableSlots 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
+                  v-if="canUpdate"
+                  variant="flat"
+                  density="compact"
+                  icon="mdi mdi-note-edit"
+                  @click="openDialog(item)"
+              />
+              <v-btn
+                  v-if="canDelete"
+                  variant="flat"
+                  density="compact"
+                  icon="mdi mdi-delete"
+                  @click="deleteItem(item)"
+              />
+            </template>
+          </v-data-table>
+        </template>
       </template>
-      <template #footer="footerProps">
+      <template #footer="footerProps" v-if="viewType.includes('iterator')">
         <v-container fluid>
           <v-row
             align-content="center"
@@ -288,7 +396,7 @@ defineExpose({ reload })
               @last="footerProps.setPage(footerProps.pageCount)"
               @next="footerProps.nextPage"
               @prev="footerProps.prevPage"
-@update:model-value="footerProps.setPage"
+              @update:model-value="footerProps.setPage"
             />
             <v-pagination
               v-else

package/dist/runtime/composables/api.js

@@ -1,11 +1,10 @@
-import { trimEnd, trimStart } from "lodash-es";
-import { useRuntimeConfig, useAuthentication } from "#imports";
 import { ofetch } from "ofetch";
+import { trimEnd, trimStart } from "lodash-es";
+import { useAuthentication, useRuntimeConfig } from "#imports";
 export function useApi() {
   const config = useRuntimeConfig();
-  const nuxtApp = useNuxtApp();
   function urlBuilder(url) {
-    let returnUrl = "";
+    let returnUrl;
     if (Array.isArray(url)) {
       if (url[0].toLowerCase() == "agent") url[0] = config?.public.WS_AGENT || config?.public.WS_DEVICE;
       returnUrl = url.join("/");
@@ -15,26 +14,30 @@ export function useApi() {
     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
-    };
+  function optionBuilder(method, body, params, options = {}) {
     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;
+    const { token } = useAuthentication().keycloak || {};
+    if (token) {
+      headers["Authorization"] = `Bearer ${token}`;
     }
-    returnOption = Object.assign(returnOption, options);
-    return returnOption;
+    const baseOptions = {
+      method,
+      body,
+      query: params,
+      headers
+    };
+    const finalHeaders = {
+      ...headers,
+      ...options.headers || {}
+    };
+    Object.assign(baseOptions, options);
+    return {
+      ...baseOptions,
+      headers: finalHeaders
+    };
   }
   function get(url, body, params, options) {
     return ofetch(urlBuilder(url), optionBuilder("GET", body, params, options));

package/dist/runtime/composables/graphqlModel.js

@@ -71,8 +71,17 @@ export function useGraphqlModel(props) {
     isLoading.value = true;
     const importPromise = [];
     importItems2.forEach((item) => {
-      const eachPromise = createItem(Object.assign({}, props.initialData, item), void 0, true);
-      if (eachPromise) importPromise.push(eachPromise);
+      if (item[props.modelKey || "id"]) {
+        importPromise.push(operationUpdate.value?.call(fields.value, { input: item }).then((result) => {
+          if (!result) {
+            return createItem(Object.assign({}, props.initialData, item), void 0, true);
+          }
+        }).catch((error) => {
+          alert?.addAlert({ alertType: "error", message: error });
+        }));
+      } else {
+        importPromise.push(createItem(Object.assign({}, props.initialData, item), void 0, true));
+      }
     });
     Promise.all(importPromise).finally(() => {
       isLoading.value = false;

package/dist/runtime/composables/graphqlOperation.js

@@ -7,7 +7,7 @@ export function buildFields(operationFields, fields, depth = 0) {
   if (!fields || fields.length == 0) fields = [...operationFields.fields];
   if (fields.includes("*")) {
     operationFields.fields.forEach((field) => {
-      if (!fields.includes(field)) fields.push(field);
+      if (!fields.includes(field) && !field.toLowerCase().endsWith("base64") && !field.toLowerCase().endsWith("base64string")) fields.push(field);
     });
     fields.splice(fields.indexOf("*"), 1);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramathibodi/nuxt-commons",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",
@@ -114,5 +114,5 @@
     "vitest": "^1.6.0",
     "vue-tsc": "2.0.29"
   },
-  "packageManager": "pnpm@9.12.1+sha512.e5a7e52a4183a02d5931057f7a0dbff9d5e9ce3161e33fa68ae392125b79282a8a8a470a51dfc8a0ed86221442eb2fb57019b0990ed24fab519bf0e1bc5ccfc4"
+  "packageManager": "pnpm@9.12.2+sha512.22721b3a11f81661ae1ec68ce1a7b879425a1ca5b991c975b074ac220b187ce56c708fe5db69f4c962c989452eee76c82877f4ee80f474cebd61ee13461b6228"
 }