tantee-nuxt-commons 0.0.168 → 0.0.170

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.0.168",
+  "version": "0.0.170",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

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

@@ -317,5 +317,5 @@ defineExpose({
   />
 </template>
 <style>
-.form-data-dirty,.form-data-dirty:not(.v-input--error) *{color:color-mix(in srgb,currentColor 70%,rgb(var(--v-theme-primary)))!important;text-shadow:0 0 .02em currentColor}
+.form-data-dirty:not(.v-input--error) :not(.v-chip):not(.v-chip *){color:color-mix(in srgb,currentColor 70%,rgb(var(--v-theme-primary)))!important;text-shadow:0 0 .02em currentColor}
 </style>

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

@@ -2,7 +2,7 @@
 import { VueSignaturePad } from 'vue-signature-pad'
 import { VInput } from 'vuetify/components/VInput'
 import { ref, computed, withDefaults, defineProps, defineExpose, watch } from 'vue'
-import { useAssetFile, type Base64Asset } from '../../composables/assetFile'
+import { useAssetFile, type Base64Asset, type Base64File } from '../../composables/assetFile'
 
 interface SignatureProps extends /* @vue-ignore */ InstanceType<typeof VInput['$props']> {
   title?: string
@@ -44,14 +44,7 @@ const imageDataUrl = computed(() => {
   const val = normalized.value
   if (!val?.base64String) return null
 
-  const base = val.base64String.trim()
-
-  if (base.startsWith("data:")) {
-    return base
-  }
-
-  const mime = (val as Base64File).fileType || "image/png"
-  return `data:${mime};base64,${base}`
+  return useAssetFile().ensureDataUrl(val.base64String.trim(),(val as Base64File).fileType || "image/png")
 })
 
 

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

@@ -2,7 +2,8 @@
 import { ref, watch } from 'vue'
 import { isEqual } from 'lodash-es'
 import { useAlert } from '../../../composables/alert'
-import { useAssetFile, type Base64Image, type Base64Asset } from '../../../composables/assetFile'
+import {useAssetFile, type Base64Image, type Base64Asset, type Base64File} from '../../../composables/assetFile'
+import {useRuntimeConfig} from "#imports";
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: Base64Image[]): void
@@ -17,11 +18,13 @@ interface Props {
   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[]) */
@@ -35,7 +38,7 @@ const dataUpdate = ref<Base64Image>({ imageData: {}, imageTitle: '', imageProps:
 
 /** Fullscreen preview */
 const dialogImageFullScreen = ref(false)
-const imageFullScreen = ref({ title: '', image: '' })
+const imageFullScreen = ref<{title: string,image: string|undefined}>({ title: '', image: '' })
 
 /** ---------- Stable keys + guards ---------- */
 let internalSync = false
@@ -90,23 +93,29 @@ const setDataUpdate = (img: Base64Image) => {
   dialogUpdate.value = true
 }
 
-const checkDuplicationName = (name: string) =>
-    images.value.some(({ imageTitle }) => isEqual(imageTitle, name))
+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 b64 = await fileToBase64(file)
-    const dataUrl = b64.base64String || ''
+    const base64 = await fileToBase64(file,props.maxFileSize)
+    const dataUrl = base64.base64String || ''
     if (!isImageDataUrl(dataUrl)) {
-      alert?.addAlert({ message: `ไฟล์ "${b64.fileName}" ไม่ใช่ไฟล์รูปภาพที่รองรับ`, alertType: 'error' })
+      alert?.addAlert({ message: `File "${base64.fileName}" is not supported image type.`, alertType: 'error' })
       return null
     }
     return {
       imageData: { base64String: dataUrl } as Base64Asset,
-      imageTitle: b64.fileName,
+      imageTitle: base64.fileName,
       imageProps: {},
     }
   } catch (e: any) {
@@ -116,7 +125,7 @@ const fileToBase64Image = async (file: File): Promise<Base64Image | null> => {
 }
 
 /** Handle upload button update */
-const update = async () => {
+const uploadImageFile = async () => {
   const duplicated: string[] = []
   for (const file of uploadImages.value) {
     if (checkDuplicationName(file.name)) {
@@ -128,7 +137,7 @@ const update = async () => {
   }
   uploadImages.value = []
   if (duplicated.length) {
-    alert?.addAlert({ message: `ไม่สามารถอัพโหลดไฟล์ ${duplicated.join(', ')}`, alertType: 'error' })
+    alert?.addAlert({ message: `File(s) are duplicated. ${duplicated.join(', ')}`, alertType: 'error' })
   }
 }
 
@@ -139,7 +148,7 @@ const modelData = ref()
 const captureImage = (payload: any, cb: FormDialogCallback) => {
   const dataUrl: string = payload?.imageCapture ?? ''
   if (!dataUrl || !isImageDataUrl(dataUrl)) {
-    alert?.addAlert({ message: 'รูปภาพไม่ถูกต้อง', alertType: 'error' })
+    alert?.addAlert({ message: 'Invalid image.', alertType: 'error' })
     return
   }
   addImage({
@@ -154,7 +163,7 @@ const captureImage = (payload: any, cb: FormDialogCallback) => {
 const openImageFullScreen = (img: Base64Image) => {
   dialogImageFullScreen.value = true
   imageFullScreen.value.title = img.imageTitle ?? ''
-  imageFullScreen.value.image = img.imageData?.base64String ?? ''
+  imageFullScreen.value.image = imageSrcFromImageData(img)
 }
 
 /** ---------- Watchers (signature-based) ---------- */
@@ -217,7 +226,7 @@ watch(
             icon-only
             multiple
             variant="text"
-            @update:model-value="update"
+            @update:model-value="uploadImageFile"
         />
         <v-btn color="primary" icon @click="dialog = true">
           <v-icon>mdi mdi-camera-plus</v-icon>
@@ -238,16 +247,16 @@ watch(
                 <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-btn color="primary" icon @click="setDataUpdate(image)" v-if="!image.imageData?.id">
                   <v-icon>mdi mdi-image-edit-outline</v-icon>
                 </v-btn>
               </VToolbarItems>
             </VToolbar>
 
             <v-img
-                :src="image.imageData?.base64String"
+                :src="imageSrcFromImageData(image)"
                 height="250"
-                @click="() => { props.readonly ? openImageFullScreen(image) : setDataUpdate(image) }"
+                @click="() => { (props.readonly || image.imageData?.id) ? openImageFullScreen(image) : setDataUpdate(image) }"
             />
           </VCard>
         </VCol>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tantee-nuxt-commons",
-  "version": "0.0.168",
+  "version": "0.0.170",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",