tantee-nuxt-commons 0.0.169 → 0.0.170

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

@@ -1,230 +1,262 @@
 <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";
 
 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 })
   }
-};
+}
+
+/** ---------- Helpers ---------- */
 
-// push image into Field
-const addImage = (data: Image) => {
+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 }
+)
 </script>
 
 <template>
   <VCard>
     <VToolbar density="compact">
       <VToolbarTitle>{{ label }}</VToolbarTitle>
-      <v-spacer></v-spacer>
+      <v-spacer />
       <VToolbarItems v-if="!readonly">
         <FileBtn
-            ref="fileBtn"
             v-model="uploadImages"
-            accept=".jpg, .jpeg"
+            :accept="accept"
             color="primary"
             icon="mdi:mdi-image-plus"
-            iconOnly
+            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>
         </v-btn>
       </VToolbarItems>
     </VToolbar>
+
     <VCardText>
       <VRow dense justify="center">
-        <VCol v-for="(image, index) in images" :key="index" cols="4">
+        <VCol v-for="(image, index) in images" :key="`${imageKey(image)}-${index}`" cols="4">
           <VCard>
             <VToolbar density="compact">
               <VToolbarTitle>
-                {{ image.title }}
+                {{ image.imageTitle }}
               </VToolbarTitle>
-              <VSpacer></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-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.data"
-                @click="() => { (props.readonly) ? openImageFullScreen(image) : setDataUpdate(image)}"
+                :src="imageSrcFromImageData(image)"
                 height="250"
+                @click="() => { (props.readonly || image.imageData?.id) ? openImageFullScreen(image) : setDataUpdate(image) }"
             />
           </VCard>
         </VCol>
@@ -232,32 +264,29 @@ onMounted(() => {
     </VCardText>
   </VCard>
 
-
-  <VDialog
-      v-model="dialogUpdate"
-      fullscreen
-      transition="dialog-bottom-transition"
-  >
+  <!-- Edit dialog -->
+  <VDialog v-model="dialogUpdate" fullscreen transition="dialog-bottom-transition">
     <FormImagesPad
-        v-model="dataUpdate.data"
+        v-model="dataUpdate.imageData.base64String"
         @closedDialog="dialogUpdate = false"
-    ></FormImagesPad>
+    />
   </VDialog>
 
+  <!-- Capture dialog -->
   <FormDialog v-model="dialog" :form-data="modelData" @create="captureImage">
     <template #default="{ data }">
-      <FormImagesCapture v-model="data.imageCapture"/>
+      <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-spacer />
+      <v-btn icon="mdi mdi-close" @click="dialogImageFullScreen = false" />
     </v-toolbar>
     <v-card height="80vh">
-      <v-img :src="imageFullScreen.image"/>
+      <v-img :src="imageFullScreen.image" />
     </v-card>
-
   </v-dialog>
 </template>

package/dist/runtime/components/label/DateCount.vue

@@ -2,143 +2,39 @@
 import { DateTime } from "luxon";
 import { computed } from "vue";
 
-type Unit = 'years' | 'months' | 'days' | 'hours' | 'minutes' | 'seconds';
-type Locale = 'th' | 'en' | 'en-US' | 'th-TH';
+type Locale = "th" | "en" | "en-US" | "th-TH";
 
 interface Props {
   modelValue: DateTime;
   endDate?: DateTime;
   locale?: Locale;
-  showSuffix?: boolean;
-  units?: Unit[];
-  zeroBase?: boolean; // true = start at 0, false = start at 1 (inclusive)
+  zeroBase?: boolean; // true = start at 0, false = start at 1
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  locale: 'th',
-  showSuffix: true,
+  locale: "th",
   zeroBase: true,
 });
 
-// Fallback map: map complex locale (e.g., en-US) to base (e.g., en)
-const normalizeLocale = (locale: Locale): 'en' | 'th' => {
-  if (locale.startsWith('en')) return 'en';
-  if (locale.startsWith('th')) return 'th';
-  return 'th'; // default fallback
-};
+const normalizeLocale = (locale: Locale): "en" | "th" =>
+    locale.startsWith("en") ? "en" : "th";
 
-const labelsEnPlural: Record<Unit, string> = {
-  years: 'years',
-  months: 'months',
-  days: 'days',
-  hours: 'hours',
-  minutes: 'minutes',
-  seconds: 'seconds',
-};
-const labelsEnSingular: Record<Unit, string> = {
-  years: 'year',
-  months: 'month',
-  days: 'day',
-  hours: 'hour',
-  minutes: 'minute',
-  seconds: 'second',
-};
-
-const localizedLabels: Record<'en' | 'th', Record<Unit, string>> = {
-  en: labelsEnPlural, // จะสลับเป็น singular ตามค่าจริงตอน render
-  th: {
-    years: 'ปี',
-    months: 'เดือน',
-    days: 'วัน',
-    hours: 'ชั่วโมง',
-    minutes: 'นาที',
-    seconds: 'วินาที',
-  },
-};
-
-const localizedSuffix: Record<'en' | 'th', string> = {
-  en: 'ago',
-  th: 'ที่ผ่านมา',
-};
-
-const outputText = computed(() => {
-  const base = props.endDate ?? DateTime.now(); // ใช้ endDate ถ้ามี ไม่งั้น now
+const countDate = computed(() => {
+  const base = props.endDate ?? DateTime.now();
   const baseLocale = normalizeLocale(props.locale);
 
-  const units: Unit[] = props.units?.length
-      ? props.units
-      : ['years', 'months', 'days', 'hours', 'minutes', 'seconds'];
-
-  const diffObj = base.diff(props.modelValue, units).toObject();
-
-  // helper: คืน label ตาม singular/plural (เฉพาะ en)
-  const labelFor = (unit: Unit, value: number) => {
-    if (baseLocale === 'en') {
-      return value === 1 ? labelsEnSingular[unit] : labelsEnPlural[unit];
-    }
-    return localizedLabels[baseLocale][unit];
-  };
-
-  // ---------- โหมด single unit ----------
-  if (!props.units) {
-    const foundUnit = units.find((unit) => (diffObj[unit] ?? 0) >= 1);
-    if (foundUnit) {
-      const raw = Math.floor(diffObj[foundUnit] ?? 0); // >= 1
-      const value = props.zeroBase ? raw : raw + 1;     // inclusive (+1)
-      const label = labelFor(foundUnit, value);
-      const suffix = props.showSuffix ? localizedSuffix[baseLocale] : '';
-      return `${value} ${label}${suffix ? ` ${suffix}` : ''}`;
-    }
-
-    // ถ้าไม่มีหน่วยใด >= 1 ให้ใช้หน่วยเล็กสุด
-    const lastUnit = units.at(-1)!;
-    const raw = Math.max(0, Math.floor(diffObj[lastUnit] ?? 0));
-    const value = props.zeroBase ? raw : 1; // inclusive: อย่างน้อย 1
-    const label = labelFor(lastUnit, value);
-    const suffix = props.showSuffix ? localizedSuffix[baseLocale] : '';
-    return `${value} ${label}${suffix ? ` ${suffix}` : ''}`;
-  }
-
-  // ---------- โหมด multi-unit ----------
-  // เก็บค่าแบบตัวเลขก่อน แล้วค่อยเรนเดอร์
-  const values = units.map((unit) => ({
-    unit,
-    raw: Math.max(0, Math.floor(diffObj[unit] ?? 0)),
-  }));
-
-  // เลือกหน่วยที่เล็กที่สุด
-  const smallest = values[values.length - 1];
-
-  // ถ้ามีค่าอย่างน้อยหนึ่งหน่วย > 0 และเป็น inclusive (zeroBase=false) => +1 ที่หน่วยเล็กสุด
-  const anyPositive = values.some((v) => v.raw > 0);
-  const adjusted = values.map((v, idx) => {
-    if (!props.zeroBase && anyPositive && idx === values.length - 1) {
-      return { ...v, raw: v.raw + 1 };
-    }
-    return v;
-  });
+  let days = Math.floor(base.diff(props.modelValue, "days").days ?? 0);
 
-  // สร้างข้อความจากหน่วยที่มีค่า > 0
-  const parts = adjusted
-      .filter((v) => v.raw > 0)
-      .map((v) => `${v.raw} ${labelFor(v.unit, v.raw)}`);
+  if (!props.zeroBase) days += 1;
 
-  // หากทั้งหมดเป็น 0:
-  if (parts.length === 0) {
-    const minValue = props.zeroBase ? 0 : 1;
-    const label = labelFor(smallest.unit, minValue);
-    const suffix = props.showSuffix ? localizedSuffix[baseLocale] : '';
-    return `${minValue} ${label}${suffix ? ` ${suffix}` : ''}`;
+  if (baseLocale === "en") {
+    return days === 1 ? "1 day" : `${days} days`;
   }
 
-  const suffix = props.showSuffix ? localizedSuffix[baseLocale] : '';
-  return `${parts.join(' ')}${suffix ? ` ${suffix}` : ''}`;
+  return `${days} วัน`;
 });
 </script>
 
 <template>
-<span>
-  <i v-if="props.zeroBase" class="mdi mdi-clock-time-twelve-outline"></i>
-  <span v-if="props.zeroBase">&nbsp;</span>{{ outputText }}
-</span>
+  <span>{{ countDate }}</span>
 </template>