@ramathibodi/nuxt-commons 0.1.73 → 0.1.75

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

@@ -1,320 +1,331 @@
-<script lang="ts" setup>
-import { ref, watch,computed } 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: Base64Image[]): void
-}>()
-
-const alert = useAlert()
-const { fileToBase64, hydrateAssetFile } = useAssetFile()
-
-interface Props {
-  modelValue?: Base64Image[]
-  readonly?: boolean
-  label?: string
-  accept?: string
-  autoHydrate?: boolean
-  maxFileSize?: number
-}
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: () => [] as Base64Image[],
-  accept: '.jpg,.jpeg,.png,.webp,.gif,.bmp,.tiff,.tif',
-  autoHydrate: false,
-  maxFileSize: 10,
-})
-
-/** Internal state (always Base64Image[]) */
-const images = ref<Base64Image[]>([])
-const uploadImages = ref<File[]>([])
-
-/** 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
-
-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}`
-}
-
-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 {
-    emit('update:modelValue', next)
-    lastEmittedSig = sig
-  } finally {
-    queueMicrotask(() => { internalSync = false })
-  }
-}
-
-/** ---------- Helpers ---------- */
-
-const addImage = (img: Base64Image) => {
-  images.value.push({
-    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 (duplicated.length) {
-    alert?.addAlert({ message: `File(s) are duplicated. ${duplicated.join(', ')}`, alertType: 'error' })
-  }
-}
-
-/** 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({
-    imageData: { base64String: dataUrl },
-    imageTitle: Math.random().toString(36).slice(2, 11),
-    imageProps: {},
-  })
-  cb?.done?.()
-}
-
-/** Fullscreen preview */
-const openImageFullScreen = (img: Base64Image) => {
-  dialogImageFullScreen.value = true
-  imageFullScreen.value.title = img.imageTitle ?? ''
-  imageFullScreen.value.image = imageSrcFromImageData(img)
-}
-
-/** ---------- Watchers (signature-based) ---------- */
-
-/* Parent → Internal */
-watch(
-    () => props.modelValue,
-    async (val) => {
-      if (internalSync) return
-
-      const next = Array.isArray(val) ? [...val] : []
-      const nextSig = signature(next)
-
-      // 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)
-          }
-        }
-
-        // 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>
-  <v-input v-model="images" v-bind="$attrs" ref="inputRef">
-    <template #default="{ isReadonly, isDisabled }">
-      <v-container fluid>
-        <v-row>
-          <v-col class="pa-0">
-            <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"
-                  />
-                  <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="start">
-                  <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>
-          </v-col>
-        </v-row>
-      </v-container>
-
-
-      <!-- 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>
-  </v-input>
-</template>
+<script lang="ts" setup>
+/**
+ * FormImagesField handles image capture, editing, preview, and value synchronization for schema-driven form image fields.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import { ref, watch,computed } from 'vue'
+import { isEqual } from 'lodash-es'
+import { VInput } from 'vuetify/components/VInput'
+import { assetUrl } from '#imports'
+import { useAlert } from '../../../composables/alert'
+import { useAssetFile, type Base64Image, type Base64Asset, type Base64File} from '../../../composables/assetFile'
+
+/**
+ * Custom events emitted by FormImagesField.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: Base64Image[]): void
+}>()
+
+const alert = useAlert()
+const { fileToBase64, hydrateAssetFile } = useAssetFile()
+
+interface Props {
+  modelValue?: Base64Image[] // Bound value for v-model synchronization with the parent component.
+  readonly?: boolean // renders as read-only while keeping value visible
+  label?: string // UI label displayed to end users
+  accept?: string // Accepted file MIME types or extensions for file selection.
+  autoHydrate?: boolean // Converts incoming serialized values into component runtime format on mount/watch.
+  maxFileSize?: number // Maximum allowed image file size in MB before conversion.
+}
+/**
+ * Public props accepted by FormImagesField.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [] as Base64Image[],
+  accept: '.jpg,.jpeg,.png,.webp,.gif,.bmp,.tiff,.tif',
+  autoHydrate: false,
+  maxFileSize: 10,
+})
+
+/** Internal state (always Base64Image[]) */
+const images = ref<Base64Image[]>([])
+const uploadImages = ref<File[]>([])
+
+/** 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
+
+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}`
+}
+
+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 {
+    emit('update:modelValue', next)
+    lastEmittedSig = sig
+  } finally {
+    queueMicrotask(() => { internalSync = false })
+  }
+}
+
+/** ---------- Helpers ---------- */
+
+const addImage = (img: Base64Image) => {
+  images.value.push({
+    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) => {
+  if (imageData?.imageData?.base64String) return useAssetFile().ensureDataUrl(imageData?.imageData?.base64String.trim(),(imageData?.imageData as Base64File).fileType || "image/png")
+  if (imageData?.imageData?.id != null) return assetUrl(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 (duplicated.length) {
+    alert?.addAlert({ message: `File(s) are duplicated. ${duplicated.join(', ')}`, alertType: 'error' })
+  }
+}
+
+/** 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({
+    imageData: { base64String: dataUrl },
+    imageTitle: Math.random().toString(36).slice(2, 11),
+    imageProps: {},
+  })
+  cb?.done?.()
+}
+
+/** Fullscreen preview */
+const openImageFullScreen = (img: Base64Image) => {
+  dialogImageFullScreen.value = true
+  imageFullScreen.value.title = img.imageTitle ?? ''
+  imageFullScreen.value.image = imageSrcFromImageData(img)
+}
+
+/** ---------- Watchers (signature-based) ---------- */
+
+/* Parent → Internal */
+watch(
+    () => props.modelValue,
+    async (val) => {
+      if (internalSync) return
+
+      const next = Array.isArray(val) ? [...val] : []
+      const nextSig = signature(next)
+
+      // 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)
+          }
+        }
+
+        // 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>
+  <v-input v-model="images" v-bind="$attrs" ref="inputRef">
+    <template #default="{ isReadonly, isDisabled }">
+      <v-container fluid>
+        <v-row>
+          <v-col class="pa-0">
+            <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"
+                  />
+                  <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="start">
+                  <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>
+          </v-col>
+        </v-row>
+      </v-container>
+
+
+      <!-- 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>
+  </v-input>
+</template>