@ramathibodi/nuxt-commons 0.1.20 → 0.1.22

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.20"
+  "version": "0.1.22"
 }

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/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/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"

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

@@ -17,6 +17,9 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VDataIterator['$pr
   toolbarColor?: string
   importable?: boolean
   exportable?: boolean
+  insertable?: boolean
+  searchable?: boolean
+  search?: string
   cols?: string | number | boolean
   xxl?: string | number | boolean
   xl?: string | number | boolean
@@ -32,6 +35,8 @@ const props = withDefaults(defineProps<Props & GraphqlModelProps>(), {
   toolbarColor: 'primary',
   importable: false,
   exportable: false,
+  insertable: true,
+  searchable: true,
   modelKey: 'id',
   modelBy: undefined,
   fields: () => [],
@@ -54,7 +59,7 @@ const currentItem = ref<Record<string, any> | undefined>(undefined)
 const isDialogOpen = ref<boolean>(false)
 
 const { items, itemsLength,
-  search, currentOptions,
+  search, setSearch, currentOptions,
   canServerPageable, canServerSearch, canCreate, canUpdate, canDelete,
   createItem, importItems, updateItem, deleteItem,
   loadItems, reload,
@@ -92,7 +97,7 @@ watch([currentPage, itemsPerPageInternal, sortBy], () => {
   }
 }, { immediate: true })
 
-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)
@@ -103,6 +108,10 @@ const computedSkeletonPerPage = computed(() => {
   else return Number(itemsPerPageInternal.value)
 })
 
+watch(()=>props.search,()=>{
+  search.value = props.search
+},{immediate:true})
+
 defineExpose({ reload })
 </script>
 
@@ -176,7 +185,6 @@ defineExpose({ reload })
           name="header"
           v-bind="headerProps"
           :items="items"
-          :search="search"
           :operation="operation"
         >
           <VToolbar :color="toolbarColor">
@@ -203,7 +211,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"
@@ -221,20 +229,22 @@ defineExpose({ reload })
             <VToolbarItems>
               <slot name="toolbarItems" />
               <ImportCSV
-                v-if="props.importable"
-                icon="mdi mdi-file-upload"
-                variant="flat"
-                @import="importItems"
+                  v-if="props.importable && canCreate && props.insertable"
+                  icon="mdi mdi-file-upload"
+                  variant="flat"
+                  :color="toolbarColor"
+                  @import="importItems"
               />
               <ExportCSV
-                v-if="props.exportable && items.length"
-                icon="mdi mdi-file-download"
-                variant="flat"
-                :file-name="title"
-                :model-value="items"
+                  v-if="props.exportable && items.length"
+                  icon="mdi mdi-file-download"
+                  variant="flat"
+                  :file-name="title"
+                  :model-value="items"
+                  :color="toolbarColor"
               />
               <VBtn
-                v-if="canCreate"
+                v-if="canCreate && props.insertable"
                 :color="toolbarColor"
                 prepend-icon="mdi mdi-plus"
                 variant="flat"

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

@@ -11,6 +11,7 @@ export declare function useGraphqlModel<T extends GraphqlModelProps>(props: T):
     items: import("vue").Ref<Record<string, any>[]>;
     itemsLength: import("vue").Ref<number>;
     search: import("vue").Ref<string | undefined>;
+    setSearch: (keyword: string) => void;
     currentOptions: import("vue").Ref<any>;
     operationCreate: import("vue").ComputedRef<any>;
     operationUpdate: import("vue").ComputedRef<any>;

package/dist/runtime/composables/graphqlModel.mjs

@@ -1,4 +1,5 @@
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted, ref } from "vue";
+import { watchDebounced } from "@vueuse/core";
 import { useAlert } from "./alert.mjs";
 import { buildRequiredInputFields } from "./graphqlOperation.mjs";
 import { useGraphqlModelOperation } from "./graphqlModelOperation.mjs";
@@ -8,6 +9,9 @@ export function useGraphqlModel(props) {
   const itemsLength = ref(0);
   const search = ref();
   const currentOptions = ref();
+  function setSearch(keyword) {
+    search.value = keyword;
+  }
   const isLoading = ref(false);
   const { operationCreate, operationUpdate, operationDelete, operationRead, operationReadPageable, operationSearch } = useGraphqlModelOperation(props);
   function keyToField(key) {
@@ -150,9 +154,9 @@ export function useGraphqlModel(props) {
       });
     }
   }
-  watch([() => props.modelName, () => props.modelBy, () => props.modelKey, canServerPageable], () => {
+  watchDebounced([() => props.modelName, () => props.modelBy, () => props.modelKey, canServerPageable], () => {
     reload();
-  }, { deep: true });
+  }, { deep: true, debounce: 500, maxWait: 500 });
   onMounted(() => {
     if (!canServerPageable.value)
       reload();
@@ -161,6 +165,7 @@ export function useGraphqlModel(props) {
     items,
     itemsLength,
     search,
+    setSearch,
     currentOptions,
     operationCreate,
     operationUpdate,

package/dist/runtime/composables/menu.mjs

@@ -11,11 +11,12 @@ export function routeToMenuItem(route) {
       icon: menuMeta.icon,
       role: menuMeta.role,
       name: route.name,
+      image: menuMeta.image,
       menuItems: [],
       link: {
         name: route.name
       },
-      active: true
+      active: menuMeta.active != void 0 ? menuMeta.active : true
     };
     if (route.children) {
       const menuItems = new Array();

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

@@ -9,6 +9,8 @@ declare global {
     title: string
     icon: string
     role: string
+    image? : string
+    active? : boolean
   }
 
   interface MenuItem {
@@ -19,6 +21,7 @@ declare global {
     menuItems: Array<MenuItem>
     active: boolean
     name: string
+    image? : string
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramathibodi/nuxt-commons",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",
@@ -86,6 +86,7 @@
     "lodash": "^4.17.21",
     "luxon": "^3.4.4",
     "maska": "^2.1.11",
+    "painterro": "^1.2.87",
     "pdf-vue3": "^1.0.12",
     "prettier": "3.3.2",
     "print-js": "^1.6.0",
@@ -116,5 +117,5 @@
     "vitest": "^1.5.1",
     "vue-tsc": "^1.8.27"
   },
-  "packageManager": "pnpm@9.8.0+sha512.8e4c3550fb500e808dbc30bb0ce4dd1eb614e30b1c55245f211591ec2cdf9c611cabd34e1364b42f564bd54b3945ed0f49d61d1bbf2ec9bd74b866fcdc723276"
+  "packageManager": "pnpm@9.9.0+sha512.60c18acd138bff695d339be6ad13f7e936eea6745660d4cc4a776d5247c540d0edee1a563695c183a66eb917ef88f2b4feb1fc25f32a7adcadc7aaf3438e99c1"
 }

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

@@ -110,7 +110,7 @@ module.exports = {
         }
         
         function createGraphQLOperation${'<' + 'T,U>'}(operationType: "Query" | "Mutation",name: string,variables?: graphqlVariable[],fields?: graphqlTypeObject): graphqlOperationObject${'<' + 'T,U>'} {
-            let returnGraphqlOperation = {
+            let returnGraphqlOperation : ${'Record' + '<string,any>'} = {
                 operationType,
                 name,
                 variables,
@@ -125,7 +125,7 @@ module.exports = {
                   return operationCall(operationType,name, fields, variables,cache);
               }
             }
-            return returnGraphqlOperation
+            return returnGraphqlOperation as graphqlOperationObject${'<' + 'T,U>'}
         }
         
         interface graphqlTypeObjects extends ${'Record<string,' + 'graphqlTypeObject>'} {

package/dist/runtime/plugins/vueSignaturePad.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
-export default _default;

package/dist/runtime/plugins/vueSignaturePad.mjs

@@ -1,5 +0,0 @@
-import { defineNuxtPlugin } from "nuxt/app";
-import VueSignaturePad from "vue-signature-pad";
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.vueApp.use(VueSignaturePad);
-});