@ramathibodi/nuxt-commons 0.1.26 → 0.1.28

package/dist/module.json

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

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

@@ -1,14 +1,10 @@
 <script lang="ts" setup>
-import { type Ref, ref, watch} from 'vue'
+import {type Ref, ref, watch, onMounted} from 'vue'
 import {useAlert} from '../../../composables/alert'
-import { isEqual } from 'lodash-es'
-interface Props {
-  modelValue?: any;
-  readonly?: boolean;
-  label?: string;
-}
+import {isEqual} from 'lodash-es'
+import type {FormDialogCallback} from "../../../types/formDialog";
+
 
-const props = defineProps<Props>();
 const emit = defineEmits<{
   (e: "update:modelValue", value: {}): void;
 }>();
@@ -21,58 +17,55 @@ interface Image {
   props: {};
 }
 
-const images = ref<Image[]>([]);
+interface Props {
+  modelValue?: any[];
+  readonly?: boolean;
+  label?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [] as any[],
+})
+
+const images = ref<any[]>([]);
+// uploadImages = images that are imported by FileBtn
+const uploadImages: Ref<any[]> = ref([]);
+// dialog = dialog for capturing image
 const dialog: Ref<boolean> = ref(false);
+// dialogUpdate, dataUpdate = dialog for editing image
 const dialogUpdate: Ref<boolean> = ref(false);
 const dataUpdate: Ref<Image> = ref({
   title: "",
   data: "",
   props: {},
 });
+
+
+// remove selected image
 const remove = (index: number) => {
   images.value.splice(index, 1);
 };
 
+// open dialog for editing selected image
 const setDataUpdate = (data: Image) => {
   dataUpdate.value = data;
   dialogUpdate.value = true;
 };
 
 
-interface FileBase64 {
-  base64string: string;
-  mineType: string;
-  filename: string;
-}
 
-
-const uploadImages: Ref<any[]> = ref([]);
+// check if File name is already exist
 const checkDuplicationName = async (currentImageName: string) => {
   for (const {title} of images.value) {
-    if(isEqual(title, currentImageName)) return true
+    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 = ""
-  }
+// check if the base64 is image or not
+const isImage = (fileBase64: any) => {
+  const typeFile: string = fileBase64.mineType.substring(5, 10);
+  return typeFile === "image";
 };
+
+// convert FIle that is uploaded by FileBtn to base64
 const convertFileToBase64 = async (file: any) => {
   try {
     const readPromise: any = new Promise((resolve, reject) => {
@@ -97,22 +90,92 @@ const convertFileToBase64 = async (file: 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) => {
+// push image into Field
+const addImage = (data: Image) => {
   images.value.push({
-    title: data.filename,
-    data: `${data.mineType},${data.base64string}`,
+    title: data.title,
+    data: data.data,
     props: {},
   });
   dialog.value = false;
 };
+
+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({
+          title: fileBase64.filename,
+          data: `${fileBase64.mineType},${fileBase64.base64string}`,
+          props: {},
+        })
+      } else {
+        alert?.addAlert({
+          message: `ไฟล์ "${fileBase64.filename}" ไม่ใช่ไฟล์นามสกุล .jpg หรือ .jpeg`,
+          alertType: 'error'
+        })
+      }
+    }
+  }
+  uploadImages.value = []
+  if (duplicatedFileName.value !== "") {
+    alert?.addAlert({message: `ไม่สามารถอัพโหลดไฟล์ ${duplicatedFileName.value}`, alertType: 'error'})
+    duplicatedFileName.value = ""
+  }
+};
+
+//  Capture Image
+const modelData = ref();
+const captureImage = (image: any, callback: FormDialogCallback) => {
+  addImage({
+    title: Math.random().toString(36).slice(2, 11),
+    data: image.imageCapture,
+    props: {}
+  })
+  callback.done()
+}
+
+// open Fullscreen image
+const dialogImageFullScreen = ref(false)
+const imageFullScreen = ref({
+  title: "",
+  image: ""
+})
+
+const openImageFullScreen = (image: { [key: string]: string }) => {
+  dialogImageFullScreen.value = true
+  imageFullScreen.value.title = image.title
+  imageFullScreen.value.image = image.data
+}
+
+
 watch(images, () => {
-  emit("update:modelValue", images);
-}, { deep: true });
+  emit("update:modelValue", images.value);
+}, {deep: true});
+
+
+// updating when the parent component adds image to v-model
+watch(props.modelValue, () => {
+  images.value = props.modelValue
+}, {deep: true});
+
+
+onMounted(() => {
+  // import images by v-model
+  for (const modelValue of props.modelValue) {
+    addImage({
+      title: modelValue.title ?? Math.random().toString(36).slice(2, 11),
+      data: modelValue.data,
+      props: {}
+    })
+  }
+})
+
 </script>
 
 <template>
@@ -140,7 +203,7 @@ watch(images, () => {
     <VCardText>
       <VRow dense justify="center">
         <VCol v-for="(image, index) in images" :key="index" cols="4">
-          <VCard max-height="250">
+          <VCard>
             <VToolbar density="compact">
               <VToolbarTitle>
                 {{ image.title }}
@@ -161,13 +224,16 @@ watch(images, () => {
             </VToolbar>
             <v-img
                 :src="image.data"
-                @click="setDataUpdate(image)"
-            ></v-img>
+                @click="readonly ? openImageFullScreen(image) : setDataUpdate(image)"
+                height="250"
+            />
           </VCard>
         </VCol>
       </VRow>
     </VCardText>
   </VCard>
+
+
   <VDialog
       v-model="dialogUpdate"
       fullscreen
@@ -178,10 +244,21 @@ watch(images, () => {
         @closedDialog="dialogUpdate = false"
     ></FormImagesPad>
   </VDialog>
-  <VDialog v-model="dialog">
-    <FormImagesCapture
 
-        @close-dialog="dialog = false"
-    ></FormImagesCapture>
-  </VDialog>
+  <FormDialog v-model="dialog" :form-data="modelData" @create="captureImage">
+    <template #default="{ data }">
+      <FormImagesCapture v-model="data.imageCapture"/>
+    </template>
+  </FormDialog>
+
+  <v-dialog v-model="dialogImageFullScreen">
+    <v-toolbar :title="imageFullScreen.title">
+      <v-spacer/>
+      <v-btn icon="mdi mdi-close" @click="dialogImageFullScreen = false"/>
+    </v-toolbar>
+    <v-card height="80vh">
+      <v-img :src="imageFullScreen.image"/>
+    </v-card>
+
+  </v-dialog>
 </template>

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import {VAutocomplete} from 'vuetify/components/VAutocomplete'
 import {concat, isEmpty, sortBy} from 'lodash-es'
-import {computed, ref, watch} from 'vue'
+import {computed, ref, watch,watchEffect} from 'vue'
 import {watchDebounced} from '@vueuse/core'
 import {useFuzzy} from '../../composables/utils/fuzzy'
 import {useGraphQl} from '../../composables/graphql'
@@ -66,16 +66,15 @@ function query(groupKey: string, filterText: string | undefined) {
   })
 }
 
-watch(() => props.waitForFilter && !props.filterText, (newValue) => {
-  if (newValue) {
+watchEffect(()=>{
+  if (props.waitForFilter && !props.filterText) {
     masterItems.value = []
     items.value = []
     selectedItem.value = undefined
-  }
-  else {
+  } else {
     query(props.groupKey, props.filterText)
   }
-}, { immediate: true })
+})
 
 watch(() => props.modelValue, (newValue) => {
   selectedItem.value = newValue

package/package.json

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