@ramathibodi/nuxt-commons 0.1.33 → 0.1.35

package/dist/module.json

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

package/dist/runtime/components/TabsGroup.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import {ref} from 'vue'
 import {VTabs} from 'vuetify/components'
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof VTabs['$props']> {
@@ -11,7 +10,7 @@ defineOptions({
 })
 
 const props = defineProps<Props>()
-const currentTab = ref<string | number>()
+const currentTab = defineModel<string|number>()
 </script>
 
 <template>

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import {computed, defineOptions, nextTick, ref, useAttrs, useSlots, watch} from 'vue'
+import {computed, defineExpose, 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";
@@ -20,6 +20,9 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VDataIterator['$pr
   importable?: boolean
   exportable?: boolean
   insertable?: boolean
+  searchable?: boolean
+
+  loading?: boolean
 
   viewSwitch?: boolean
   viewSwitchMultiple?: boolean
@@ -41,6 +44,9 @@ const props = withDefaults(defineProps<Props>(), {
   importable: true,
   exportable: true,
   insertable: true,
+  searchable: true,
+
+  loading: false,
 
   viewSwitch: false,
   viewSwitchMultiple:false,
@@ -72,6 +78,10 @@ const items = ref<Record<string, any>[]>([])
 const search = ref<string>()
 const currentItem = ref<Record<string, any> | undefined>(undefined)
 
+function setSearch(keyword: string) {
+  search.value = keyword
+}
+
 const isDialogOpen = ref<boolean>(false)
 
 watch(() => props.modelValue, (newValue) => {
@@ -189,7 +199,9 @@ function openDialog(item?: object) {
   })
 }
 
-const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpItem, moveDownItem,moveToItem })
+const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpItem, moveDownItem,moveToItem,setSearch })
+
+defineExpose({operation})
 </script>
 
 <template>
@@ -200,6 +212,7 @@ const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpIt
         :items="items"
         :item-value="modelKey"
         :search="search"
+        :loading="loading"
     >
       <template #default="defaultProps" v-if="viewType.includes('iterator')">
         <slot
@@ -236,7 +249,7 @@ const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpIt
           <v-container fluid>
             <v-row>
               <v-col
-                  v-for="key in computedSkeletonPerPage"
+                  v-for="key in itemsPerPage"
                   :key="key"
                   :cols="cols"
                   :sm="sm"
@@ -278,7 +291,7 @@ const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpIt
                 </VToolbarTitle>
               </v-col>
               <v-col cols="5">
-                <slot name="search">
+                <slot name="search" :items="items" :operation="operation" v-if="props.searchable">
                   <VTextField
                       v-model="search"
                       class="justify-end w-100"
@@ -293,7 +306,7 @@ const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpIt
             </v-row>
 
             <VToolbarItems>
-              <slot name="toolbarItems" />
+              <slot name="toolbarItems" :items="items" :operation="operation"/>
               <ImportCSV
                   v-if="props.importable"
                   icon="mdi:mdi-file-upload"
@@ -332,6 +345,7 @@ const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpIt
             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/form/Table.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {VDataTable} from 'vuetify/components/VDataTable'
-import {computed, defineOptions, nextTick, ref, useAttrs, watch} from 'vue'
+import {computed, defineOptions,defineExpose, nextTick, ref, useAttrs, watch} from 'vue'
 import {omit} from 'lodash-es'
 import type {FormDialogCallback} from '../../types/formDialog'
 
@@ -19,6 +19,7 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props
   importable?: boolean
   exportable?: boolean
   insertable?: boolean
+  searchable?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -29,6 +30,7 @@ const props = withDefaults(defineProps<Props>(), {
   importable: true,
   exportable: true,
   insertable: true,
+  searchable: true,
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -42,6 +44,10 @@ const items = ref<Record<string, any>[]>([])
 const search = ref<string>()
 const currentItem = ref<Record<string, any> | undefined>(undefined)
 
+function setSearch(keyword: string) {
+  search.value = keyword
+}
+
 const isDialogOpen = ref<boolean>(false)
 
 watch(() => props.modelValue, (newValue) => {
@@ -153,69 +159,77 @@ function openDialog(item?: object) {
   })
 }
 
-const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpItem, moveDownItem,moveToItem })
+const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpItem, moveDownItem,moveToItem,setSearch })
+
+defineExpose({operation})
 </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"
-            :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
-            v-if="props.insertable"
-            :color="toolbarColor"
-            prepend-icon="mdi:mdi-plus"
-            variant="flat"
-            @click="openDialog()"
+    <slot
+      name="header"
+      :items="items"
+      :operation="operation"
+    >
+      <VToolbar :color="toolbarColor">
+        <v-row
+            justify="end"
+            class="ma-1"
+            dense
+            no-gutters
+            align="center"
         >
-          add
-        </VBtn>
-      </VToolbarItems>
-    </VToolbar>
+          <v-col cols="7">
+            <VToolbarTitle class="pl-3">
+              <slot name="title">
+                {{ title }}
+              </slot>
+            </VToolbarTitle>
+          </v-col>
+          <v-col cols="5">
+            <slot name="search" :items="items" :operation="operation" v-if="props.searchable">
+              <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" :items="items" :operation="operation"/>
+          <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
+              v-if="props.insertable"
+              :color="toolbarColor"
+              prepend-icon="mdi:mdi-plus"
+              variant="flat"
+              @click="openDialog()"
+          >
+            add
+          </VBtn>
+        </VToolbarItems>
+      </VToolbar>
+    </slot>
     <v-data-table
       v-bind="plainAttrs"
       color="primary"

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/Table.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed,watch, nextTick, ref, useAttrs } from 'vue'
 import { VDataTable } from 'vuetify/components/VDataTable'
-import { omit } from 'lodash-es'
+import { clone } from 'lodash-es'
 import type { GraphqlModelProps } from '../../composables/graphqlModel'
 import { useGraphqlModel } from '../../composables/graphqlModel'
 
@@ -37,7 +37,7 @@ const props = withDefaults(defineProps<Props & GraphqlModelProps>(), {
 
 const attrs = useAttrs()
 const plainAttrs = computed(() => {
-  const returnAttrs = omit(attrs, ['modelValue', 'onUpdate:modelValue'])
+  const returnAttrs = clone(attrs)
   if (props.headers) returnAttrs['headers'] = props.headers
   return returnAttrs
 })
@@ -68,7 +68,7 @@ watch(()=>props.search,()=>{
   search.value = props.search
 },{immediate:true})
 
-defineExpose({ reload })
+defineExpose({ reload,operation })
 </script>
 
 <template>
@@ -102,8 +102,8 @@ defineExpose({ reload })
               </slot>
             </VToolbarTitle>
           </v-col>
-          <v-col cols="5" v-if="props.searchable">
-            <slot name="search">
+          <v-col cols="5">
+            <slot name="search" :items="items" :operation="operation" v-if="props.searchable">
               <VTextField
                 v-model="search"
                 class="justify-end w-100"
@@ -118,7 +118,7 @@ defineExpose({ reload })
         </v-row>
 
         <VToolbarItems>
-          <slot name="toolbarItems" />
+          <slot name="toolbarItems" :items="items" :operation="operation"/>
           <ImportCSV
             v-if="props.importable && canCreate && props.insertable"
             icon="mdi mdi-file-upload"

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

@@ -128,7 +128,7 @@ watch(()=>props.search,()=>{
   search.value = props.search
 },{immediate:true})
 
-defineExpose({ reload })
+defineExpose({ reload,operation })
 </script>
 
 <template>
@@ -227,8 +227,8 @@ defineExpose({ reload })
                   </slot>
                 </VToolbarTitle>
               </v-col>
-              <v-col cols="5" v-if="props.searchable">
-                <slot name="search">
+              <v-col cols="5">
+                <slot name="search" :items="items" :operation="operation" v-if="props.searchable">
                   <VTextField
                     v-model="search"
                     class="justify-end w-100"
@@ -243,7 +243,7 @@ defineExpose({ reload })
             </v-row>
 
             <VToolbarItems>
-              <slot name="toolbarItems" />
+              <slot name="toolbarItems" :items="items" :operation="operation"/>
               <ImportCSV
                   v-if="props.importable && canCreate && props.insertable"
                   icon="mdi mdi-file-upload"

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.33",
+  "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.12.3+sha512.cce0f9de9c5a7c95bef944169cc5dfe8741abfb145078c0d508b868056848a87c81e626246cb60967cbd7fd29a6c062ef73ff840d96b3c86c40ac92cf4a813ee"
+  "packageManager": "pnpm@9.14.4+sha512.c8180b3fbe4e4bca02c94234717896b5529740a6cbadf19fa78254270403ea2f27d4e1d46a08a0f56c89b63dc8ebfd3ee53326da720273794e6200fcf0d184ab"
 }