tantee-nuxt-commons 0.0.169 → 0.0.171

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

@@ -1,263 +1,313 @@
 <script lang="ts" setup>
-import {type Ref, ref, watch, onMounted} from 'vue'
-import {useAlert} from '../../../composables/alert'
-import {isEqual} from 'lodash-es'
-import type {FormDialogCallback} from "../../../types/formDialog";
-
+import { ref, watch } from 'vue'
+import { isEqual } from 'lodash-es'
+import { useAlert } from '../../../composables/alert'
+import { useAssetFile, type Base64Image, type Base64Asset, type Base64File} from '../../../composables/assetFile'
+import { useRuntimeConfig } from "#imports";
+import { VInput } from 'vuetify/components/VInput'
 
 const emit = defineEmits<{
-  (e: "update:modelValue", value: {}): void;
-}>();
+  (e: 'update:modelValue', value: Base64Image[]): void
+}>()
 
 const alert = useAlert()
-
-interface Image {
-  title: string;
-  data: string;
-  props: {};
-}
+const { fileToBase64, hydrateAssetFile } = useAssetFile()
 
 interface Props {
-  modelValue?: any[];
-  readonly?: boolean;
-  label?: string;
+  modelValue?: Base64Image[]
+  readonly?: boolean
+  label?: string
+  accept?: string
+  autoHydrate?: boolean
+  maxFileSize?: number
 }
 const props = withDefaults(defineProps<Props>(), {
-  modelValue: () => [] as any[],
+  modelValue: () => [] as Base64Image[],
+  accept: '.jpg,.jpeg,.png,.webp,.gif,.bmp,.tiff,.tif',
+  autoHydrate: false,
+  maxFileSize: 10,
 })
 
-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);
-};
+/** Internal state (always Base64Image[]) */
+const images = ref<Base64Image[]>([])
+const uploadImages = ref<File[]>([])
 
-// open dialog for editing selected image
-const setDataUpdate = (data: Image) => {
-  dataUpdate.value = data;
-  dialogUpdate.value = true;
-};
+/** Dialogs */
+const dialog = ref(false)               // capture dialog
+const dialogUpdate = ref(false)         // edit dialog
+const dataUpdate = ref<Base64Image>({ imageData: {}, imageTitle: '', imageProps: {} })
 
+/** Fullscreen preview */
+const dialogImageFullScreen = ref(false)
+const imageFullScreen = ref<{title: string,image: string|undefined}>({ title: '', image: '' })
 
+/** ---------- Stable keys + guards ---------- */
+let internalSync = false
+let lastEmittedSig = ''   // signature of last emitted state
 
-// check if File name is already exist
-const checkDuplicationName = async (currentImageName: string) => {
-  for (const {title} of images.value) {
-    if (isEqual(title, currentImageName)) return true
-  }
+function imageKey(im: Base64Image): string {
+  const id = im.imageData?.id
+  if (id != null) return `id:${id}`
+  const title = im.imageTitle ?? ''
+  const len = im.imageData?.base64String?.length ?? 0
+  return `t:${title}|l:${len}`
 }
-// 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) => {
+
+function signature(arr: Base64Image[]): string {
+  return arr.map(imageKey).join('|')
+}
+
+/** Emit helper (guarded + updates last signature) */
+function emitNow(next: Base64Image[]) {
+  const sig = signature(next)
+  if (sig === lastEmittedSig) return
+  internalSync = true
   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'})
+    emit('update:modelValue', next)
+    lastEmittedSig = sig
+  } finally {
+    queueMicrotask(() => { internalSync = false })
   }
-};
+}
 
-// push image into Field
-const addImage = (data: Image) => {
+/** ---------- Helpers ---------- */
+
+const addImage = (img: Base64Image) => {
   images.value.push({
-    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'
-        })
-      }
+    imageData: img.imageData ?? {},
+    imageTitle: img.imageTitle ?? '',
+    imageProps: img.imageProps ?? {},
+  })
+  dialog.value = false
+}
+
+const remove = (index: number) => {
+  images.value.splice(index, 1)
+}
+
+const setDataUpdate = (img: Base64Image) => {
+  dataUpdate.value = {
+    imageData: { ...(img.imageData ?? {}) },
+    imageTitle: img.imageTitle ?? '',
+    imageProps: { ...(img.imageProps ?? {}) },
+  }
+  dialogUpdate.value = true
+}
+
+const checkDuplicationName = (name: string) => images.value.some(({ imageTitle }) => isEqual(imageTitle, name))
+
+const isImageDataUrl = (dataUrl: string) => /^data:image\//i.test(dataUrl)
+
+const imageSrcFromImageData = (imageData: Base64Image) => {
+  let assetUrl = useRuntimeConfig().public.ASSET_URL as string
+  if (imageData?.imageData?.base64String) return useAssetFile().ensureDataUrl(imageData?.imageData?.base64String.trim(),(imageData?.imageData as Base64File).fileType || "image/png")
+  if (imageData?.imageData?.id) return (assetUrl || '/asset').replace(/\/+$/, '') +"/"+imageData?.imageData?.id
+  return undefined
+}
+
+/** File → Base64Image using composable */
+const fileToBase64Image = async (file: File): Promise<Base64Image | null> => {
+  try {
+    const base64 = await fileToBase64(file,props.maxFileSize)
+    const dataUrl = base64.base64String || ''
+    if (!isImageDataUrl(dataUrl)) {
+      alert?.addAlert({ message: `File "${base64.fileName}" is not supported image type.`, alertType: 'error' })
+      return null
+    }
+    return {
+      imageData: { base64String: dataUrl } as Base64Asset,
+      imageTitle: base64.fileName,
+      imageProps: {},
     }
+  } catch (e: any) {
+    alert?.addAlert({ message: String(e), alertType: 'error' })
+    return null
+  }
+}
+
+/** Handle upload button update */
+const uploadImageFile = async () => {
+  const duplicated: string[] = []
+  for (const file of uploadImages.value) {
+    if (checkDuplicationName(file.name)) {
+      duplicated.push(file.name)
+      continue
+    }
+    const base64Image = await fileToBase64Image(file)
+    if (base64Image) addImage(base64Image)
   }
   uploadImages.value = []
-  if (duplicatedFileName.value !== "") {
-    alert?.addAlert({message: `ไม่สามารถอัพโหลดไฟล์ ${duplicatedFileName.value}`, alertType: 'error'})
-    duplicatedFileName.value = ""
+  if (duplicated.length) {
+    alert?.addAlert({ message: `File(s) are duplicated. ${duplicated.join(', ')}`, alertType: 'error' })
   }
-};
+}
 
-//  Capture Image
-const modelData = ref();
-const captureImage = (image: any, callback: FormDialogCallback) => {
+/** Capture flow (FormDialog) */
+type FormDialogCallback = { done: () => void }
+const modelData = ref()
+
+const captureImage = (payload: any, cb: FormDialogCallback) => {
+  const dataUrl: string = payload?.imageCapture ?? ''
+  if (!dataUrl || !isImageDataUrl(dataUrl)) {
+    alert?.addAlert({ message: 'Invalid image.', alertType: 'error' })
+    return
+  }
   addImage({
-    title: Math.random().toString(36).slice(2, 11),
-    data: image.imageCapture,
-    props: {}
+    imageData: { base64String: dataUrl },
+    imageTitle: Math.random().toString(36).slice(2, 11),
+    imageProps: {},
   })
-  callback.done()
+  cb?.done?.()
 }
 
-// open Fullscreen image
-const dialogImageFullScreen = ref(false)
-const imageFullScreen = ref({
-  title: "",
-  image: ""
-})
-
-const openImageFullScreen = (image: { [key: string]: string }) => {
+/** Fullscreen preview */
+const openImageFullScreen = (img: Base64Image) => {
   dialogImageFullScreen.value = true
-  imageFullScreen.value.title = image.title
-  imageFullScreen.value.image = image.data
+  imageFullScreen.value.title = img.imageTitle ?? ''
+  imageFullScreen.value.image = imageSrcFromImageData(img)
 }
 
+/** ---------- Watchers (signature-based) ---------- */
 
-watch(images, () => {
-  emit("update:modelValue", images.value);
-}, {deep: true});
+/* Parent → Internal */
+watch(
+    () => props.modelValue,
+    async (val) => {
+      if (internalSync) return
 
+      const next = Array.isArray(val) ? [...val] : []
+      const nextSig = signature(next)
 
-// updating when the parent component adds image to v-model
-watch(props.modelValue, () => {
-  images.value = props.modelValue
-}, {deep: true});
+      // Only reassign when truly different
+      if (nextSig !== signature(images.value)) {
+        images.value = next
 
+        // optional hydration
+        if (props.autoHydrate && images.value.length) {
+          const targets = images.value.filter(
+              (im) => im.imageData?.id != null && !im.imageData?.base64String
+          )
+          if (targets.length) {
+            await Promise.allSettled(targets.map((im) => hydrateAssetFile(im.imageData!)))
+            // After hydration, emit once (guarded) to update parent
+            emitNow(images.value)
+          }
+        }
 
-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: {}
-    })
-  }
+        // sync lastEmittedSig to current internal state so next local change emits
+        lastEmittedSig = signature(images.value)
+      }
+    },
+    { deep: true, immediate: true }
+)
+
+/* Internal → Parent: watch the signature instead of deep structure */
+watch(
+    () => signature(images.value),
+    () => {
+      if (internalSync) return
+      // Only emit when signature actually changes
+      emitNow(images.value)
+    },
+    { immediate: false }
+)
+
+// validation passthrough
+const inputRef = ref<InstanceType<typeof VInput> | null>(null)
+
+const isValid = computed(() => inputRef.value?.isValid)
+const errorMessages = computed(() => inputRef.value?.errorMessages)
+
+defineExpose({
+  errorMessages,
+  isValid,
+  reset: () => inputRef.value?.reset(),
+  resetValidation: () => inputRef.value?.resetValidation(),
+  validate: () => inputRef.value?.validate(),
 })
 </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>
-            <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="() => { (props.readonly) ? openImageFullScreen(image) : setDataUpdate(image)}"
-                height="250"
+  <v-input v-model="images" v-bind="$attrs" ref="inputRef">
+    <template #default="{ isReadonly, isDisabled }">
+      <VCard>
+        <VToolbar density="compact">
+          <VToolbarTitle>{{ label }}</VToolbarTitle>
+          <v-spacer />
+          <VToolbarItems v-if="!readonly">
+            <FileBtn
+                v-model="uploadImages"
+                :accept="accept"
+                color="primary"
+                icon="mdi:mdi-image-plus"
+                icon-only
+                multiple
+                variant="text"
+                @update:model-value="uploadImageFile"
+                :disabled="isDisabled?.value" :readonly="isReadonly?.value"
             />
-          </VCard>
-        </VCol>
-      </VRow>
-    </VCardText>
-  </VCard>
-
-
-  <VDialog
-      v-model="dialogUpdate"
-      fullscreen
-      transition="dialog-bottom-transition"
-  >
-    <FormImagesPad
-        v-model="dataUpdate.data"
-        @closedDialog="dialogUpdate = false"
-    ></FormImagesPad>
-  </VDialog>
-
-  <FormDialog v-model="dialog" :form-data="modelData" @create="captureImage">
-    <template #default="{ data }">
-      <FormImagesCapture v-model="data.imageCapture"/>
+            <v-btn color="primary" icon @click="dialog = true" :disabled="isDisabled?.value" :readonly="isReadonly?.value">
+              <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="`${imageKey(image)}-${index}`" cols="4">
+              <VCard>
+                <VToolbar density="compact">
+                  <VToolbarTitle>
+                    {{ image.imageTitle }}
+                  </VToolbarTitle>
+                  <VSpacer />
+                  <VToolbarItems v-if="!readonly">
+                    <v-btn icon @click="remove(index)" :disabled="isDisabled?.value" :readonly="isReadonly?.value">
+                      <v-icon>mdi mdi-delete-outline</v-icon>
+                    </v-btn>
+                    <v-btn color="primary" icon @click="setDataUpdate(image)" v-if="!image.imageData?.id" :disabled="isDisabled?.value" :readonly="isReadonly?.value">
+                      <v-icon>mdi mdi-image-edit-outline</v-icon>
+                    </v-btn>
+                  </VToolbarItems>
+                </VToolbar>
+
+                <v-img
+                    :src="imageSrcFromImageData(image)"
+                    height="250"
+                    @click="() => { (props.readonly || image.imageData?.id || isReadonly?.value) ? openImageFullScreen(image) : setDataUpdate(image) }"
+                    :disabled="isDisabled?.value"
+                />
+              </VCard>
+            </VCol>
+          </VRow>
+        </VCardText>
+      </VCard>
+
+      <!-- Edit dialog -->
+      <VDialog v-model="dialogUpdate" fullscreen transition="dialog-bottom-transition">
+        <FormImagesPad
+            v-model="dataUpdate.imageData.base64String"
+            @closedDialog="dialogUpdate = false"
+        />
+      </VDialog>
+
+      <!-- Capture dialog -->
+      <FormDialog v-model="dialog" :form-data="modelData" @create="captureImage">
+        <template #default="{ data }">
+          <FormImagesCapture v-model="data.imageCapture" />
+        </template>
+      </FormDialog>
+
+      <!-- Fullscreen preview -->
+      <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>
-  </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>
+  </v-input>
 </template>