@ramathibodi/nuxt-commons 0.1.21 → 0.1.23

package/dist/module.d.mts

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

package/dist/module.d.ts

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

package/dist/module.json

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

package/dist/runtime/components/ExportCSV.vue

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

package/dist/runtime/components/FileBtn.vue

@@ -29,9 +29,10 @@ const reset = () => {
   files.value = undefined
 }
 
-watch(files, () => {
+const emitFiles = () => {
   emit('update:modelValue', files.value)
-}, { deep: true })
+  files.value = []
+}
 
 defineExpose({ reset })
 </script>
@@ -55,6 +56,7 @@ defineExpose({ reset })
   <v-file-input
     ref="fileInput"
     v-model="files"
+    @update:modelValue="emitFiles"
     :accept="props.accept"
     :multiple="props.multiple"
     style="display: none"

package/dist/runtime/components/ImportCSV.vue

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

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

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

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

@@ -1,22 +1,22 @@
 <script lang="ts" setup>
-import { VueSignaturePad } from 'vue-signature-pad'
-import { type Ref, ref, onMounted, onBeforeUnmount, withDefaults } from 'vue'
+import { VueSignaturePad } from 'vue-signature-pad';
+import { type Ref, ref, onMounted, onBeforeUnmount } from 'vue'
 
 interface SignatureOptions {
-  penColor: string
-  minWidth?: number
-  maxWidth?: number
+ penColor: string
+ minWidth?: number
+ maxWidth?: number
 }
 
 interface SignatureProps {
-  title?: string
-  titleConfirm?: string
-  modelValue: string
+ title?: string
+ titleConfirm?: string
+ modelValue?: string
 }
 
 const props = withDefaults(defineProps<SignatureProps>(), {
-  title: 'Draw Your Signature',
-  titleConfirm: 'I Accept My Signature',
+ title: 'Draw Your Signature',
+ titleConfirm: 'I Accept My Signature',
 })
 
 const signaturePadRef: Ref<any> = ref(null)
@@ -28,54 +28,54 @@ 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()
+ isDialogOpen.value = false
+ signaturePadRef.value.clearSignature()
+ signaturePadRef.value.clearCacheImages()
 }
 
 const emit = defineEmits<{
-  (event: 'update:modelValue', value: string): void
+ (event: 'update:modelValue', value: string): void
 }>()
 
 const saveSignature = (): void => {
-  isDialogOpen.value = false
-  const { isEmpty, data } = signaturePadRef.value.saveSignature()
-  signatureData.value = isEmpty ? '' : data
-  emit('update:modelValue', signatureData.value)
+ isDialogOpen.value = false
+ const { isEmpty, data } = signaturePadRef.value.saveSignature()
+ signatureData.value = isEmpty ? '' : data
+ emit('update:modelValue', signatureData.value)
 }
 
 const changePenColor = (color: string): void => {
-  selectedColor.value = color
-  signatureOptions.value = { penColor: color }
+ selectedColor.value = color
+ signatureOptions.value = { penColor: color }
 }
 
 const openSignatureDialog = (): void => {
-  selectedColor.value = defaultColor
-  signatureOptions.value = { penColor: defaultColor }
-  isDialogOpen.value = true
+ selectedColor.value = defaultColor
+ signatureOptions.value = { penColor: defaultColor }
+ isDialogOpen.value = true
 }
 
 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`
 }
 
 onMounted(() => {
-  updateSignaturePadHeight()
-  window.addEventListener('resize', updateSignaturePadHeight)
+ updateSignaturePadHeight()
+ window.addEventListener('resize', updateSignaturePadHeight)
 })
 
 onBeforeUnmount(() => {
-  window.removeEventListener('resize', updateSignaturePadHeight)
+ window.removeEventListener('resize', updateSignaturePadHeight)
 })
 </script>
 

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

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

package/dist/runtime/components/form/images/Field.vue

@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+import { type Ref, ref, watch} from 'vue'
+import {useAlert} from '../../../composables/alert'
+import { isEqual } from 'lodash-es'
+interface Props {
+  modelValue?: any;
+  readonly?: boolean;
+  label?: string;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+  (e: "update:modelValue", value: {}): void;
+}>();
+
+const alert = useAlert()
+
+interface Image {
+  title: string;
+  data: string;
+  props: {};
+}
+
+const images = ref<Image[]>([]);
+const dialog: Ref<boolean> = ref(false);
+const dialogUpdate: Ref<boolean> = ref(false);
+const dataUpdate: Ref<Image> = ref({
+  title: "",
+  data: "",
+  props: {},
+});
+const remove = (index: number) => {
+  images.value.splice(index, 1);
+};
+
+const setDataUpdate = (data: Image) => {
+  dataUpdate.value = data;
+  dialogUpdate.value = true;
+};
+
+
+interface FileBase64 {
+  base64string: string;
+  mineType: string;
+  filename: string;
+}
+
+
+const uploadImages: Ref<any[]> = ref([]);
+const checkDuplicationName = async (currentImageName: string) => {
+  for (const {title} of images.value) {
+    if(isEqual(title, currentImageName)) return true
+  }
+}
+
+const update = async () => {
+  const duplicatedFileName = ref("")
+  for (const image of uploadImages.value) {
+    if(await checkDuplicationName(image.name)){
+      duplicatedFileName.value += `${image.name},`
+    }else{
+      const fileBase64: any = await convertFileToBase64(image);
+      if (isImage(fileBase64)) {
+        addImage(fileBase64);
+      } else {
+        alert?.addAlert({message: `ไฟล์ "${fileBase64.filename}" ไม่ใช่ไฟล์นามสกุล .jpg หรือ .jpeg`, alertType: 'error'})
+      }
+    }
+  }
+  uploadImages.value = []
+  if(duplicatedFileName.value !== ""){
+    alert?.addAlert({message: `ไม่สามารถอัพโหลดไฟล์ ${duplicatedFileName.value}`, alertType: 'error'})
+    duplicatedFileName.value = ""
+  }
+};
+const convertFileToBase64 = async (file: any) => {
+  try {
+    const readPromise: any = new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        let result: any = reader.result;
+        const mineType = result.split(",")[0];
+        const base64 = result.split(",")[1];
+        resolve({
+          base64string: base64,
+          mineType: mineType,
+          filename: file.name,
+        });
+      };
+      reader.onerror = (error) => {
+        reject(error);
+      };
+      reader.readAsDataURL(file);
+    });
+    return await readPromise;
+  } catch (error: any) {
+    alert?.addAlert({message: error, alertType: 'error'})
+  }
+};
+const isImage = (fileBase64: any) => {
+  const typeFile: string = fileBase64.mineType.substring(5, 10);
+  return typeFile === "image" ? true : false;
+};
+
+const addImage = (data: FileBase64) => {
+  images.value.push({
+    title: data.filename,
+    data: `${data.mineType},${data.base64string}`,
+    props: {},
+  });
+  dialog.value = false;
+};
+watch(images, () => {
+  emit("update:modelValue", images);
+}, { deep: true });
+</script>
+
+<template>
+  <VCard>
+    <VToolbar density="compact">
+      <VToolbarTitle>{{ label }}</VToolbarTitle>
+      <v-spacer></v-spacer>
+      <VToolbarItems v-if="!readonly">
+        <FileBtn
+            ref="fileBtn"
+            v-model="uploadImages"
+            accept=".jpg, .jpeg"
+            color="primary"
+            icon="mdi:mdi-image-plus"
+            iconOnly
+            multiple
+            variant="text"
+            @update:model-value="update"
+        />
+        <v-btn color="primary" icon @click="dialog = true">
+          <v-icon>mdi mdi-camera-plus</v-icon>
+        </v-btn>
+      </VToolbarItems>
+    </VToolbar>
+    <VCardText>
+      <VRow dense justify="center">
+        <VCol v-for="(image, index) in images" :key="index" cols="4">
+          <VCard max-height="250">
+            <VToolbar density="compact">
+              <VToolbarTitle>
+                {{ image.title }}
+              </VToolbarTitle>
+              <VSpacer></VSpacer>
+              <VToolbarItems v-if="!readonly">
+                <v-btn icon @click="remove(index)">
+                  <v-icon>mdi mdi-delete-outline</v-icon>
+                </v-btn>
+                <v-btn
+                    color="primary"
+                    icon
+                    @click="setDataUpdate(image)"
+                >
+                  <v-icon>mdi mdi-image-edit-outline</v-icon>
+                </v-btn>
+              </VToolbarItems>
+            </VToolbar>
+            <v-img
+                :src="image.data"
+                @click="setDataUpdate(image)"
+            ></v-img>
+          </VCard>
+        </VCol>
+      </VRow>
+    </VCardText>
+  </VCard>
+  <VDialog
+      v-model="dialogUpdate"
+      fullscreen
+      transition="dialog-bottom-transition"
+  >
+    <FormImagesPad
+        v-model="dataUpdate.data"
+        @closedDialog="dialogUpdate = false"
+    ></FormImagesPad>
+  </VDialog>
+  <VDialog v-model="dialog">
+    <FormImagesCapture
+
+        @close-dialog="dialog = false"
+    ></FormImagesCapture>
+  </VDialog>
+</template>

package/dist/runtime/components/form/images/Pad.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { onMounted, nextTick } from 'vue';
+import Painterro from 'painterro';
+
+const props = defineProps({
+  modelValue: String
+})
+
+const emit = defineEmits(['update:modelValue', 'closedDialog'])
+
+const setting = {
+  id: "painterroContainer",
+  defaultTool: 'brush',
+  toolbarPosition: 'top',
+  toolbarHeightPx: '50',
+  pixelizePixelSize: '5%',
+  hiddenTools: [
+    'resize',
+    'redo',
+    'bucket',
+    'clear',
+    'settings',
+  ],
+  saveHandler: function (image:any, done:any) {
+    emit('update:modelValue', image.asDataURL())
+    emit('closedDialog', false)
+    done(true)
+  },
+  onClose: function () {
+    emit('closedDialog', false)
+  }
+}
+
+onMounted(async () => {
+  await nextTick();
+  props.modelValue != "" ? Painterro(setting).show(props.modelValue) : Painterro(setting).show()
+});
+
+</script>
+
+<template>
+  <div id="painterroContainer" style="width: 100%; height: 100dvh;"></div>
+</template>

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

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import {computed, nextTick, ref, useAttrs} from 'vue'
-import {VDataTable} from 'vuetify/components/VDataTable'
-import {omit} from 'lodash-es'
-import type {GraphqlModelProps} from '../../composables/graphqlModel'
-import {useGraphqlModel} from '../../composables/graphqlModel'
+import { computed,watch, nextTick, ref, useAttrs } from 'vue'
+import { VDataTable } from 'vuetify/components/VDataTable'
+import { omit } from 'lodash-es'
+import type { GraphqlModelProps } from '../../composables/graphqlModel'
+import { useGraphqlModel } from '../../composables/graphqlModel'
 
 defineOptions({
   inheritAttrs: false,
@@ -17,6 +17,9 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props
   toolbarColor?: string
   importable?: boolean
   exportable?: boolean
+  insertable?: boolean
+  searchable?: boolean
+  search?: string
 }
 
 const props = withDefaults(defineProps<Props & GraphqlModelProps>(), {
@@ -25,6 +28,8 @@ const props = withDefaults(defineProps<Props & GraphqlModelProps>(), {
   toolbarColor: 'primary',
   importable: true,
   exportable: true,
+  insertable: true,
+  searchable: true,
   modelKey: 'id',
   modelBy: undefined,
   fields: () => [],
@@ -40,7 +45,7 @@ const currentItem = ref<Record<string, any> | undefined>(undefined)
 const isDialogOpen = ref<boolean>(false)
 
 const { items, itemsLength,
-  search,
+  search,setSearch,
   canServerPageable, canServerSearch, canCreate, canUpdate, canDelete,
   createItem, importItems, updateItem, deleteItem,
   loadItems, reload,
@@ -53,12 +58,16 @@ function openDialog(item?: object) {
   })
 }
 
-const operation = ref({ openDialog, createItem, importItems, updateItem, deleteItem, reload, canServerPageable, canServerSearch, canCreate, canUpdate, canDelete })
+const operation = ref({ openDialog, createItem, importItems, updateItem, deleteItem, reload, setSearch, canServerPageable, canServerSearch, canCreate, canUpdate, canDelete })
 
 const computedInitialData = computed(() => {
   return Object.assign({}, props.initialData, props.modelBy)
 })
 
+watch(()=>props.search,()=>{
+  search.value = props.search
+},{immediate:true})
+
 defineExpose({ reload })
 </script>
 
@@ -67,7 +76,6 @@ defineExpose({ reload })
     <slot
       name="header"
       :items="items"
-      :search="search"
       :operation="operation"
     >
       <VToolbar :color="toolbarColor">
@@ -94,7 +102,7 @@ defineExpose({ reload })
               </slot>
             </VToolbarTitle>
           </v-col>
-          <v-col cols="5">
+          <v-col cols="5" v-if="props.searchable">
             <slot name="search">
               <VTextField
                 v-model="search"
@@ -112,11 +120,11 @@ defineExpose({ reload })
         <VToolbarItems>
           <slot name="toolbarItems" />
           <ImportCSV
-            v-if="props.importable"
+            v-if="props.importable && canCreate && props.insertable"
             icon="mdi mdi-file-upload"
             variant="flat"
-            @import="importItems"
             :color="toolbarColor"
+            @import="importItems"
           />
           <ExportCSV
             v-if="props.exportable && items.length"
@@ -127,7 +135,7 @@ defineExpose({ reload })
             :color="toolbarColor"
           />
           <VBtn
-            v-if="canCreate"
+            v-if="canCreate && props.insertable"
             :color="toolbarColor"
             prepend-icon="mdi mdi-plus"
             variant="flat"