@ramathibodi/nuxt-commons 0.1.34 → 0.1.35

package/dist/module.json

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

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

@@ -70,8 +70,7 @@ const loadFormData = () => {
 watchEffect(loadFormData)
 
 watch(() => isShowing.value, (newValue) => {
-  if (!newValue) formPadRef.value.reset()
-  else loadFormData()
+  if (newValue) loadFormData()
 })
 </script>
 

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

@@ -1,14 +1,15 @@
 <script lang="ts" setup>
-import { uniqWith, isEqual } from 'lodash-es'
-import { ref, watch } from 'vue'
-import { VTextField } from 'vuetify/components/VTextField'
-import { useAlert } from '../../composables/alert'
+import {isEqual, uniqWith} from 'lodash-es'
+import {ref, watch} from 'vue'
+import {VTextField} from 'vuetify/components/VTextField'
+import {useAlert} from '../../composables/alert'
 
 const alert = useAlert()
 
 interface Base64String {
   base64String?: string
   fileName: string
+  originalFileName?: string
   id?: number
 }
 
@@ -16,22 +17,24 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VTextField['$props
   accept?: string
   multiple?: boolean
   maxSize?: number
-  modelValue?: Base64String[]
+  modelValue?: Base64String | Base64String[]
+  downloadable?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   accept: '*',
   multiple: false,
   maxSize: 5,
+  downloadable: false
 })
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: Base64String[]): void
+  (e: 'update:modelValue', value: Base64String | Base64String[]): void
 }>()
 
 const allFiles = ref<File[]>([])
 const allAssets = ref<Base64String[]>([])
-const combinedBase64String = ref<Base64String[]>([])
+const combinedBase64String = ref<Base64String[] | Base64String>([])
 const fileInput = ref()
 
 function openWindowUpload() {
@@ -47,141 +50,172 @@ function addFiles(files: File | File[]) {
 
 function removeFileByIndex(i: number | string) {
   const index = Number(i)
-  if (Array.isArray(allFiles.value) && allFiles.value.length) {
-    if (index >= 0 && index < allFiles.value.length) allFiles.value.splice(index, 1)
-  }
+  if (index >= 0 && index < allFiles.value.length) allFiles.value.splice(index, 1)
 }
 
 function removeAssetByIndex(i: number | string) {
   const index = Number(i)
-  if (Array.isArray(allAssets.value) && allAssets.value.length) {
-    if (index >= 0 && index < allAssets.value.length) allAssets.value.splice(index, 1)
-  }
+  if (index >= 0 && index < allAssets.value.length) allAssets.value.splice(index, 1)
 }
 
 function fileToBase64(file: File) {
   const maxSize = props.maxSize * 1048576
 
   return new Promise<Base64String>((resolve, reject) => {
-    if (file.size > maxSize) reject (`File (${file.name}) size exceeds the ${props.maxSize} MB limit.`)
+    if (file.size > maxSize) reject(`File (${file.name}) size exceeds the ${props.maxSize} MB limit.`)
 
     const reader = new FileReader()
-    reader.onload = function (event) {
+    reader.onload = (event) => {
       resolve({ fileName: file.name, base64String: event.target?.result as string })
     }
-    reader.onerror = function (error) {
-      reject(error)
-    }
+    reader.onerror = reject
     reader.readAsDataURL(file)
   })
 }
 
-function base64ToFile(base64Data: string, filename: string) {
-  // Extract content type and base64 payload from the Base64 string
-  const matchResult = base64Data.match(/data:([^;]*);base64,(.*)/)
-  if (matchResult === null) {
-    return undefined
+function base64ToFile(base64Data: string, filename: string, defaultContentType: string = "application/octet-stream") {
+  const matchResult = base64Data.match(/data:([^;]*);base64,(.*)/);
+  let contentType: string;
+  let base64Payload: string;
+
+  if (matchResult) {
+    [contentType, base64Payload] = matchResult.slice(1)
+  } else {
+    contentType = defaultContentType
+    base64Payload = base64Data
   }
-  const [contentType, base64Payload] = matchResult.slice(1)
-
-  // Convert base64 to a Uint8Array
-  const binaryStr = atob(base64Payload)
-  const len = binaryStr.length
-  const bytes = new Uint8Array(len)
-  for (let i = 0; i < len; i++) {
-    bytes[i] = binaryStr.charCodeAt(i)
+
+  try {
+    const binaryStr = atob(base64Payload)
+    const bytes = new Uint8Array(binaryStr.length)
+    for (let i = 0; i < binaryStr.length; i++) {
+      bytes[i] = binaryStr.charCodeAt(i)
+    }
+    return new File([bytes], filename, { type: contentType });
+  } catch (error) {
+    console.error("Invalid base64 data", error);
+    return undefined;
   }
+}
+
+function downloadBase64File(base64Data: string, filename: string): void {
+  const file = base64ToFile(base64Data,filename)
 
-  return new File([bytes], filename, { type: contentType })
+  if (file) {
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(file);
+    link.download = filename;
+
+    // Append the link to the body temporarily and trigger the download
+    document.body.appendChild(link);
+    link.click();
+
+    // Cleanup
+    document.body.removeChild(link);
+    URL.revokeObjectURL(link.href);
+  }
 }
 
+
 watch(
-  () => props.modelValue,
-  () => {
-    if (props.modelValue && Array.isArray(props.modelValue)) {
-      allAssets.value = props.modelValue.filter((item: Base64String) => item.id !== undefined)
-      allFiles.value = props.modelValue.filter((item: Base64String) => item.id === undefined && item.base64String !== undefined).map((base64: Base64String) => base64ToFile(base64.base64String as string, base64.fileName)).filter((item: File | undefined) => item !== undefined) as File[]
-    }
-    else {
-      allAssets.value = []
-      allFiles.value = []
-    }
-  },
-  { deep: true, immediate: true },
+    () => props.modelValue,
+    () => {
+      if (Array.isArray(props.modelValue)) {
+        allAssets.value = props.modelValue.filter((item) => item.id !== undefined)
+        allFiles.value = props.modelValue
+            .filter((item) => item.id === undefined && item.base64String !== undefined)
+            .map((base64) => base64ToFile(base64.base64String as string, base64.fileName))
+            .filter((item) => item !== undefined) as File[]
+      } else if (props.modelValue) {
+        allAssets.value = props.modelValue.id !== undefined ? [props.modelValue] : []
+        allFiles.value =
+            props.modelValue.id === undefined && props.modelValue.base64String !== undefined
+                ? [base64ToFile(props.modelValue.base64String, props.modelValue.fileName)].filter(
+                    (item) => item !== undefined
+                ) as File[]
+                : []
+      } else {
+        allAssets.value = []
+        allFiles.value = []
+      }
+    },
+    { deep: true, immediate: true }
 )
 
 watch([allAssets, allFiles], () => {
-  if (allFiles.value && allFiles.value?.length) {
-    const base64Promises = allFiles.value?.map(file => fileToBase64(file))
-
-    Promise.all(base64Promises).then((base64Strings) => {
-      combinedBase64String.value = [...allAssets.value, ...base64Strings]
-    }).catch((error) => {
-      alert?.addAlert({ message: error, alertType: 'error' })
-      allFiles.value = []
-    })
-  }
-  else {
-    combinedBase64String.value = [...allAssets.value]
+  if (allFiles.value.length) {
+    const base64Promises = allFiles.value.map(fileToBase64)
+    Promise.all(base64Promises)
+        .then((base64Strings) => {
+          combinedBase64String.value = props.multiple
+              ? [...allAssets.value, ...base64Strings]
+              : base64Strings[0] || allAssets.value[0] || null
+        })
+        .catch((error) => {
+          alert?.addAlert({ message: error, alertType: 'error' })
+          allFiles.value = []
+        })
+  } else {
+    combinedBase64String.value = props.multiple
+        ? [...allAssets.value]
+        : allAssets.value[0] || null
   }
 }, { deep: true, immediate: true })
 
 watch(combinedBase64String, (newValue, oldValue) => {
   if (!isEqual(newValue, oldValue)) {
-    emit('update:modelValue', uniqWith(newValue, isEqual))
+    emit('update:modelValue', props.multiple ? uniqWith(newValue as Base64String[], isEqual) : newValue)
   }
 }, { deep: true })
 </script>
 
 <template>
   <v-text-field
-    v-bind="$attrs"
-    label="Upload files"
-    readonly
-    :dirty="combinedBase64String.length>0"
-    v-on="(combinedBase64String.length>0) ? {} : { click: openWindowUpload }"
+      v-bind="$attrs"
+      label="Upload files"
+      readonly
+      :dirty="Array.isArray(combinedBase64String) ? combinedBase64String.length > 0 : !!combinedBase64String"
+      v-on="Array.isArray(combinedBase64String) && combinedBase64String.length > 0 ? {} : { click: openWindowUpload }"
   >
     <template #default>
       <v-chip
-        v-for="(asset, index) in allAssets"
-        :key="asset"
-        color="green"
-        variant="flat"
-        closable
-        @click:close="removeAssetByIndex(index)"
+          v-for="(asset, index) in allAssets"
+          :key="asset.fileName"
+          color="green"
+          variant="flat"
+          closable
+          @click:close="removeAssetByIndex(index)"
       >
-        {{ asset.fileName }}
+        {{ asset.originalFileName || asset.fileName }}
+        <template #append v-if="downloadable">
+          <slot name="download" :item="asset">
+            <v-icon @click="downloadBase64File(asset.base64String || '',asset.originalFileName || asset.fileName)" v-if="asset.base64String">mdi mdi-download</v-icon>
+          </slot>
+        </template>
       </v-chip>
       <v-chip
-        v-for="(file, index) in allFiles"
-        :key="file"
-        color="primary"
-        variant="flat"
-        closable
-        @click:close="removeFileByIndex(index)"
+          v-for="(file, index) in allFiles"
+          :key="file.name"
+          color="primary"
+          variant="flat"
+          closable
+          @click:close="removeFileByIndex(index)"
       >
         {{ file.name }}
       </v-chip>
     </template>
 
-    <template
-      v-if="combinedBase64String.length>0 && props.multiple"
-      #append-inner
-    >
-      <VBtn
-        variant="text"
-        :icon="true"
-        @click="openWindowUpload"
-      >
+    <template v-if="props.multiple && Array.isArray(combinedBase64String) && combinedBase64String.length > 0" #append-inner>
+      <VBtn variant="text" :icon="true" @click="openWindowUpload">
         <v-icon>mdi mdi-plus</v-icon>
       </VBtn>
     </template>
   </v-text-field>
   <v-file-input
-    ref="fileInput"
-    :accept="props.accept"
-    :multiple="props.multiple"
-    style="display: none"
-    @update:model-value="addFiles"
+      ref="fileInput"
+      :accept="props.accept"
+      :multiple="props.multiple"
+      style="display: none"
+      @update:model-value="addFiles"
   />
 </template>

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

@@ -22,6 +22,8 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VDataIterator['$pr
   insertable?: boolean
   searchable?: boolean
 
+  loading?: boolean
+
   viewSwitch?: boolean
   viewSwitchMultiple?: boolean
 
@@ -44,6 +46,8 @@ const props = withDefaults(defineProps<Props>(), {
   insertable: true,
   searchable: true,
 
+  loading: false,
+
   viewSwitch: false,
   viewSwitchMultiple:false,
 
@@ -208,6 +212,7 @@ defineExpose({operation})
         :items="items"
         :item-value="modelKey"
         :search="search"
+        :loading="loading"
     >
       <template #default="defaultProps" v-if="viewType.includes('iterator')">
         <slot
@@ -244,7 +249,7 @@ defineExpose({operation})
           <v-container fluid>
             <v-row>
               <v-col
-                  v-for="key in computedSkeletonPerPage"
+                  v-for="key in itemsPerPage"
                   :key="key"
                   :cols="cols"
                   :sm="sm"
@@ -340,6 +345,7 @@ defineExpose({operation})
             color="primary"
             :items="items"
             :search="search"
+            :loading="loading"
             v-if="viewType.includes('table')"
         >
           <!-- @ts-ignore -->

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

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { VueSignaturePad } from 'vue-signature-pad';
-import { type Ref, ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { VInput } from 'vuetify/components/VInput'
+import { type Ref, ref, onMounted, onBeforeUnmount, nextTick,watch,defineExpose,useTemplateRef } from 'vue'
 
 interface SignatureOptions {
  penColor: string
@@ -8,7 +9,7 @@ interface SignatureOptions {
  maxWidth?: number
 }
 
-interface SignatureProps {
+interface SignatureProps extends /* @vue-ignore */ InstanceType<typeof VInput['$props']> {
   title?: string
   btnName?: string
   titleConfirm?: string
@@ -21,8 +22,10 @@ const props = withDefaults(defineProps<SignatureProps>(), {
   titleConfirm: 'I Accept My Signature',
 })
 
-const signaturePadRef: Ref<any> = ref(null)
-const signatureData: Ref<string> = ref('')
+const inputRef = useTemplateRef<VInput>("inputRef")
+const signaturePadRef = useTemplateRef<typeof VueSignaturePad>("signaturePadRef")
+
+const signatureData: Ref<string|null> = ref(null)
 const colorOptions: string[] = ['#303F9F', '#1A2023', '#2E7D32', '#AC04BF']
 const defaultColor: string = colorOptions[0]
 const selectedColor: Ref<string> = ref(defaultColor)
@@ -30,28 +33,27 @@ const signatureOptions: Ref<SignatureOptions> = ref({ penColor: defaultColor, mi
 const isDialogOpen: Ref<boolean> = ref(false)
 
 const undoSignature = (): void => {
- signaturePadRef.value.undoSignature()
+ signaturePadRef.value?.undoSignature()
 }
 
 const clearSignature = (): void => {
- signaturePadRef.value.clearSignature()
+ signaturePadRef.value?.clearSignature()
 }
 
 const closeDialog = (): void => {
  isDialogOpen.value = false
- signaturePadRef.value.clearSignature()
- signaturePadRef.value.clearCacheImages()
+ signaturePadRef.value?.clearSignature()
+ signaturePadRef.value?.clearCacheImages()
 }
 
 const emit = defineEmits<{
- (event: 'update:modelValue', value: string): void
+ (event: 'update:modelValue', value: string|null): void
 }>()
 
 const saveSignature = (): void => {
  isDialogOpen.value = false
- const { isEmpty, data } = signaturePadRef.value.saveSignature()
- signatureData.value = isEmpty ? '' : data
- emit('update:modelValue', signatureData.value)
+ const { isEmpty, data } = signaturePadRef.value?.saveSignature()
+ signatureData.value = isEmpty ? null : data
 }
 
 const changePenColor = (color: string): void => {
@@ -65,130 +67,167 @@ const openSignatureDialog = (): void => {
   isDialogOpen.value = true
   nextTick(() =>{
     if (props.modelValue) {
-      signaturePadRef.value.fromDataURL(props.modelValue)
+      signaturePadRef.value?.fromDataURL(props.modelValue)
     }
   });
 }
 
 const signaturePadHeight: Ref<string> = ref('')
 const updateSignaturePadHeight = () => {
- const screenHeight = window.innerHeight
- signaturePadHeight.value = `${screenHeight * 0.4}px`
+  const screenHeight = window.innerHeight
+  signaturePadHeight.value = `${screenHeight * 0.4}px`
 }
 
+watch(signatureData,()=>{
+  emit('update:modelValue', signatureData.value)
+})
+
+watch(()=>props.modelValue, (newValue) => {
+  signatureData.value = newValue || null
+},{immediate: true})
+
 onMounted(() => {
- updateSignaturePadHeight()
- window.addEventListener('resize', updateSignaturePadHeight)
-  if (props.modelValue) {
-    signatureData.value = props.modelValue
-  }
+  updateSignaturePadHeight()
+  window.addEventListener('resize', updateSignaturePadHeight)
 })
 
 onBeforeUnmount(() => {
- window.removeEventListener('resize', updateSignaturePadHeight)
+  window.removeEventListener('resize', updateSignaturePadHeight)
+})
+
+const isValid = computed(()=>{
+  return inputRef.value?.isValid
+})
+
+const errorMessages = computed(()=>{
+  return inputRef.value?.errorMessages
+})
+
+defineExpose({
+  errorMessages,
+  isValid,
+  reset: ()=>inputRef.value?.reset(),
+  resetValidation : ()=>inputRef.value?.resetValidation(),
+  validate : ()=>inputRef.value?.validate(),
 })
 </script>
 
 <template>
-  <v-card
-    v-if="signatureData"
-    v-bind="$attrs"
-    @click="openSignatureDialog"
-  >
-    <v-img
-      :src="signatureData"
-      cover
-    />
-  </v-card>
-  <v-btn
-    append-icon="mdi mdi-draw-pen"
-    block
-    class="text-none"
-    color="primary"
-    variant="flat"
-    @click="openSignatureDialog"
-  >
-    {{ props.btnName }}
-  </v-btn>
-
-  <v-dialog
-    v-model="isDialogOpen"
-    height="auto"
-    persistent
-    width="100%"
-  >
-    <v-card>
-      <v-toolbar>
-        <v-toolbar-title class="text-no-wrap">
-          {{ props.title }}
-        </v-toolbar-title>
-        <v-btn
-          icon
-          @click="undoSignature"
-        >
-          <v-icon>fa-solid fa-arrow-rotate-left</v-icon>
-        </v-btn>
-        <v-btn
-          icon
-          @click="clearSignature"
-        >
-          <v-icon>fa-solid fa-trash</v-icon>
-        </v-btn>
-        <v-menu>
-          <template #activator="{ props: activatorProps }">
-            <v-btn
-              :color="selectedColor"
-              :icon="true"
-              v-bind="activatorProps"
-            >
-              <v-icon>fa-solid fa-paintbrush</v-icon>
-            </v-btn>
-          </template>
-          <v-list>
-            <v-row>
-              <v-col class="text-center">
-                <v-avatar
-                  v-for="(color, index) in colorOptions"
-                  :key="index"
-                  :color="color"
-                  :value="color"
-                  class="mr-1"
-                  @click="changePenColor(color)"
-                >
-                  <v-icon color="white">
-                    {{ selectedColor === color ? 'fa-solid fa-check' : '' }}
-                  </v-icon>
-                </v-avatar>
-              </v-col>
-            </v-row>
-          </v-list>
-        </v-menu>
-        <v-btn
-          icon
-          @click="closeDialog"
-        >
-          <v-icon>fa-solid fa-xmark</v-icon>
-        </v-btn>
-      </v-toolbar>
-      <v-card-text>
-        <VueSignaturePad
-          ref="signaturePadRef"
-          :options="signatureOptions"
-          :height="signaturePadHeight"
-        />
-      </v-card-text>
-      <v-divider />
-      <v-card-actions class="justify-center">
-        <v-btn
-          class="text-none"
-          color="success"
-          prepend-icon="fa-solid fa-check"
-          variant="flat"
-          @click="saveSignature"
+  <v-input v-model="signatureData" v-bind="$attrs" ref="inputRef">
+    <template #default="{isReadonly,isDisabled}">
+      <v-card
+          class="w-100"
+          flat
+      >
+        <v-card-text v-if="signatureData">
+          <v-img
+              :src="signatureData"
+              cover
+          />
+          <v-icon
+              class="position-absolute"
+              style="top: 8px; right: 8px; z-index: 10;"
+              @click="signatureData=null"
+              v-if="signatureData && !isReadonly.value"
+          >
+            mdi mdi-close-circle
+          </v-icon>
+        </v-card-text>
+        <v-card-actions>
+          <v-btn
+              append-icon="mdi mdi-draw-pen"
+              block
+              class="text-none"
+              color="primary"
+              variant="flat"
+              @click="openSignatureDialog"
+              :readonly="isReadonly.value"
+              :disabled="isDisabled.value"
+          >
+            {{ props.btnName }}
+          </v-btn>
+        </v-card-actions>
+        <v-dialog
+            v-model="isDialogOpen"
+            height="auto"
+            persistent
+            width="100%"
         >
-          {{ props.titleConfirm }}
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+          <v-card>
+            <v-toolbar>
+              <v-toolbar-title class="text-no-wrap">
+                {{ props.title }}
+              </v-toolbar-title>
+              <v-btn
+                  icon
+                  @click="undoSignature"
+              >
+                <v-icon>fa-solid fa-arrow-rotate-left</v-icon>
+              </v-btn>
+              <v-btn
+                  icon
+                  @click="clearSignature"
+              >
+                <v-icon>fa-solid fa-trash</v-icon>
+              </v-btn>
+              <v-menu>
+                <template #activator="{ props: activatorProps }">
+                  <v-btn
+                      :color="selectedColor"
+                      :icon="true"
+                      v-bind="activatorProps"
+                  >
+                    <v-icon>fa-solid fa-paintbrush</v-icon>
+                  </v-btn>
+                </template>
+                <v-list>
+                  <v-row>
+                    <v-col class="text-center">
+                      <v-avatar
+                          v-for="(color, index) in colorOptions"
+                          :key="index"
+                          :color="color"
+                          :value="color"
+                          class="mr-1"
+                          @click="changePenColor(color)"
+                      >
+                        <v-icon color="white">
+                          {{ selectedColor === color ? 'fa-solid fa-check' : '' }}
+                        </v-icon>
+                      </v-avatar>
+                    </v-col>
+                  </v-row>
+                </v-list>
+              </v-menu>
+              <v-btn
+                  icon
+                  @click="closeDialog"
+              >
+                <v-icon>fa-solid fa-xmark</v-icon>
+              </v-btn>
+            </v-toolbar>
+            <v-card-text>
+              <VueSignaturePad
+                  ref="signaturePadRef"
+                  :options="signatureOptions"
+                  :height="signaturePadHeight"
+              />
+            </v-card-text>
+            <v-divider />
+            <v-card-actions class="justify-center">
+              <v-btn
+                  class="text-none"
+                  color="success"
+                  prepend-icon="fa-solid fa-check"
+                  variant="flat"
+                  @click="saveSignature"
+              >
+                {{ props.titleConfirm }}
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-card>
+    </template>
+  </v-input>
 </template>

package/dist/runtime/components/master/label.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { computedAsync } from '@vueuse/core'
+import { useGraphQl } from '../../composables/graphql'
+
+interface Props {
+  groupKey?: string | null
+  itemCode?: string | null
+  locale?: string
+  notFoundText?: string
+  placeholder?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  locale: 'TH',
+})
+
+const masterItemValue = computedAsync<string>(async () => {
+  if (props.groupKey && props.itemCode) {
+    try {
+      const result = await useGraphQl().queryPromise<any>("masterItemByGroupKeyAndItemCode",['itemValue', 'itemValueAlternative'],{ groupKey: props.groupKey, itemCode: props.itemCode })
+
+      if (result) {
+        return props.locale === 'TH'
+          ? result.itemValue
+          : result.itemValueAlternative || result.itemValue
+      }
+    } catch (e) {
+      console.error(e)
+    }
+  }
+  return props.notFoundText || `${props.itemCode}`
+}, props.placeholder || `${props.groupKey}(${props.itemCode})`)
+</script>
+
+<template>
+  {{ masterItemValue }}
+</template>

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

@@ -65,23 +65,27 @@ function cancel() {
   loadFormData()
 }
 
+const operation = ref({save, cancel, reload, item, canSave, isLoading,isDataChange,isCreating})
+
 defineExpose({ save, cancel, reload, item, isLoading })
 </script>
 
 <template>
   <VCard>
     <VToolbar>
-      <VToolbarTitle>
-        <slot name="title">
-          {{ title }}
-          <v-icon
-            size="small"
-            @click="reload"
-          >
-            mdi mdi-refresh
-          </v-icon>
-        </slot>
-      </VToolbarTitle>
+      <slot name="titleToolbar" :operation="operation">
+        <VToolbarTitle>
+          <slot name="title" :operation="operation">
+            {{ title }}
+            <v-icon
+              size="small"
+              @click="reload"
+            >
+              mdi mdi-refresh
+            </v-icon>
+          </slot>
+        </VToolbarTitle>
+      </slot>
     </VToolbar>
     <VCardText>
       <form-pad
@@ -99,24 +103,26 @@ defineExpose({ save, cancel, reload, item, isLoading })
       </form-pad>
     </VCardText>
     <VCardActions>
-      <VSpacer />
-      <VBtn
-        color="primary"
-        variant="flat"
-        :loading="isLoading"
-        :disabled="!isDataChange || !canSave"
-        @click="save"
-      >
-        {{ saveCaption }}
-      </VBtn>
-      <VBtn
-        color="error"
-        variant="flat"
-        :disabled="isLoading"
-        @click="cancel"
-      >
-        {{ cancelCaption }}
-      </VBtn>
+      <slot name="action" :operation="operation">
+        <VSpacer />
+        <VBtn
+            color="primary"
+            variant="flat"
+            :loading="isLoading"
+            :disabled="!isDataChange || !canSave"
+            @click="save"
+        >
+          {{ saveCaption }}
+        </VBtn>
+        <VBtn
+            color="error"
+            variant="flat"
+            :disabled="isLoading"
+            @click="cancel"
+        >
+          {{ cancelCaption }}
+        </VBtn>
+      </slot>
     </VCardActions>
   </VCard>
 </template>

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

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { computedAsync } from '@vueuse/core'
+import { useGraphQlOperation } from '../../composables/graphqlOperation'
+
+interface Props {
+  modelName: string
+  modelBy?: object
+  itemTitle: string
+  fields?: Array<string | object>
+  cache?: boolean
+
+  notFoundText?: string
+  placeholder?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  cache: false,
+})
+
+const modelItemValue = computedAsync<string>(async () => {
+  if (props.modelName && props.itemTitle) {
+    let fields: any[] = [props.itemTitle]
+    const variables: Record<string, any> = Object.assign({},props.modelBy)
+
+    try {
+      const result : Record<string, any> = await useGraphQlOperation('Query',props.modelName,fields,variables,props.cache)
+
+      if (result) {
+        return result[props.itemTitle]
+      }
+    } catch (e) {
+      console.error(e)
+    }
+  }
+  return props.notFoundText
+}, props.placeholder )
+</script>
+
+<template>
+  {{ modelItemValue }}
+</template>

package/dist/runtime/components/pdf/View.vue

@@ -5,12 +5,23 @@ import printJS from 'print-js'
 import { ref, computed } from 'vue'
 import { useAlert } from '../../composables/alert'
 
-const props = defineProps<{
+interface Props extends /* @vue-ignore */ InstanceType<typeof PDF['$props']> {
   base64String?: string
   title?: string
   fileName?: string
   disabled?: boolean
-}>()
+  isPrint?: boolean
+  showBackToTopBtn?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  base64String: "",
+  title: "",
+  fileName: "",
+  disabled: false,
+  isPrint: false,
+  showBackToTopBtn: false
+})
 
 const emit = defineEmits(['closeDialog'])
 const base64 = ref(props.base64String)
@@ -61,9 +72,19 @@ const endLoadPdf = () => {
   base64.value = ''
 }
 
-const isMobile = computed(() => {
-  if (/Android|Mobi|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Macintosh/i.test(navigator.userAgent)) {
-    return true
+const isMobile = () => {
+  return /Android|Mobi|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Macintosh/i.test(navigator.userAgent);
+}
+
+const checkMobileAndPrint = computed(() => {
+  return !isMobile() && props.isPrint;
+});
+
+const setWidthPdf = computed(() => {
+  if (isMobile()) {
+    return "100%"
+  } else {
+    return "100dvh"
   }
 })
 </script>
@@ -74,7 +95,7 @@ const isMobile = computed(() => {
       <v-toolbar-title>{{ props.title }}</v-toolbar-title>
       <v-spacer />
       <v-btn
-        v-if="!isMobile"
+        v-if="checkMobileAndPrint"
         icon="mdi mdi-printer"
         variant="plain"
         @click="printPdf"
@@ -91,13 +112,12 @@ const isMobile = computed(() => {
         @click="endLoadPdf"
       />
     </v-toolbar>
-    <v-card-text class="justify-center">
+    <v-card-text class="justify-center h-screen">
       <PDF
-        :show-progress="true"
-        pdf-width="100%"
-        :src="base64"
-        :show-page-tooltip="false"
-        :show-back-to-top-btn="false"
+          v-bind="$attrs"
+          :pdf-width="setWidthPdf"
+          :src="base64"
+          :show-back-to-top-btn="props.showBackToTopBtn"
       />
     </v-card-text>
   </v-card>

package/dist/runtime/composables/graphqlOperation.js

@@ -4,7 +4,7 @@ import { graphqlInputType, graphqlOperation, graphqlType, scalarType } from "#im
 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 || fields.length == 0) fields = ["*"];
   if (fields.includes("*")) {
     operationFields.fields.forEach((field) => {
       if (!fields.includes(field) && !field.toLowerCase().endsWith("base64") && !field.toLowerCase().endsWith("base64string")) fields.push(field);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramathibodi/nuxt-commons",
-  "version": "0.1.34",
+  "version": "0.1.35",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",
@@ -115,5 +115,5 @@
     "vitest": "^1.6.0",
     "vue-tsc": "2.0.29"
   },
-  "packageManager": "pnpm@9.13.2+sha512.88c9c3864450350e65a33587ab801acf946d7c814ed1134da4a924f6df5a2120fd36b46aab68f7cd1d413149112d53c7db3a4136624cfd00ff1846a0c6cef48a"
+  "packageManager": "pnpm@9.14.4+sha512.c8180b3fbe4e4bca02c94234717896b5529740a6cbadf19fa78254270403ea2f27d4e1d46a08a0f56c89b63dc8ebfd3ee53326da720273794e6200fcf0d184ab"
 }