tantee-nuxt-commons 0.0.167 → 0.0.169

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

@@ -1,220 +1,195 @@
 <script lang="ts" setup>
-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 {type Ref, ref, watch, onMounted} from 'vue'
+import {useAlert} from '../../../composables/alert'
+import {isEqual} from 'lodash-es'
+import type {FormDialogCallback} from "../../../types/formDialog";
+
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: Base64Image[]): void
-}>()
+  (e: "update:modelValue", value: {}): void;
+}>();
 
 const alert = useAlert()
-const { fileToBase64, hydrateAssetFile } = useAssetFile()
+
+interface Image {
+  title: string;
+  data: string;
+  props: {};
+}
 
 interface Props {
-  modelValue?: Base64Image[]
-  readonly?: boolean
-  label?: string
-  accept?: string
-  autoHydrate?: boolean
+  modelValue?: any[];
+  readonly?: boolean;
+  label?: string;
 }
 const props = withDefaults(defineProps<Props>(), {
-  modelValue: () => [] as Base64Image[],
-  accept: '.jpg,.jpeg,.png,.webp,.gif,.bmp,.tiff,.tif',
-  autoHydrate: false,
+  modelValue: () => [] as any[],
 })
 
-/** Internal state (always Base64Image[]) */
-const images = ref<Base64Image[]>([])
-const uploadImages = ref<File[]>([])
+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);
+};
 
-/** Dialogs */
-const dialog = ref(false)               // capture dialog
-const dialogUpdate = ref(false)         // edit dialog
-const dataUpdate = ref<Base64Image>({ imageData: {}, imageTitle: '', imageProps: {} })
+// open dialog for editing selected image
+const setDataUpdate = (data: Image) => {
+  dataUpdate.value = data;
+  dialogUpdate.value = true;
+};
 
-/** Fullscreen preview */
-const dialogImageFullScreen = ref(false)
-const imageFullScreen = ref({ 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('|')
+// check if File name is already exist
+const checkDuplicationName = async (currentImageName: string) => {
+  for (const {title} of images.value) {
+    if (isEqual(title, currentImageName)) return true
+  }
 }
-
-/** Emit helper (guarded + updates last signature) */
-function emitNow(next: Base64Image[]) {
-  const sig = signature(next)
-  if (sig === lastEmittedSig) return
-  internalSync = true
+// 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 {
-    emit('update:modelValue', next)
-    lastEmittedSig = sig
-  } finally {
-    queueMicrotask(() => { internalSync = false })
+    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'})
   }
-}
-
-/** ---------- Helpers ---------- */
+};
 
-const addImage = (img: Base64Image) => {
+// push image into Field
+const addImage = (data: Image) => {
   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)
+    title: data.title,
+    data: data.data,
+    props: {},
+  });
+  dialog.value = false;
+};
 
-/** File → Base64Image using composable */
-const fileToBase64Image = async (file: File): Promise<Base64Image | null> => {
-  try {
-    const b64 = await fileToBase64(file)
-    const dataUrl = b64.base64String || ''
-    if (!isImageDataUrl(dataUrl)) {
-      alert?.addAlert({ message: `ไฟล์ "${b64.fileName}" ไม่ใช่ไฟล์รูปภาพที่รองรับ`, alertType: 'error' })
-      return null
-    }
-    return {
-      imageData: { base64String: dataUrl } as Base64Asset,
-      imageTitle: b64.fileName,
-      imageProps: {},
-    }
-  } catch (e: any) {
-    alert?.addAlert({ message: String(e), alertType: 'error' })
-    return null
-  }
-}
-
-/** Handle upload button update */
 const update = async () => {
-  const duplicated: string[] = []
-  for (const file of uploadImages.value) {
-    if (checkDuplicationName(file.name)) {
-      duplicated.push(file.name)
-      continue
+  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'
+        })
+      }
     }
-    const base64Image = await fileToBase64Image(file)
-    if (base64Image) addImage(base64Image)
   }
   uploadImages.value = []
-  if (duplicated.length) {
-    alert?.addAlert({ message: `ไม่สามารถอัพโหลดไฟล์ ${duplicated.join(', ')}`, alertType: 'error' })
+  if (duplicatedFileName.value !== "") {
+    alert?.addAlert({message: `ไม่สามารถอัพโหลดไฟล์ ${duplicatedFileName.value}`, alertType: 'error'})
+    duplicatedFileName.value = ""
   }
-}
-
-/** 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: 'รูปภาพไม่ถูกต้อง', alertType: 'error' })
-    return
-  }
+//  Capture Image
+const modelData = ref();
+const captureImage = (image: any, callback: FormDialogCallback) => {
   addImage({
-    imageData: { base64String: dataUrl },
-    imageTitle: Math.random().toString(36).slice(2, 11),
-    imageProps: {},
+    title: Math.random().toString(36).slice(2, 11),
+    data: image.imageCapture,
+    props: {}
   })
-  cb?.done?.()
+  callback.done()
 }
 
-/** Fullscreen preview */
-const openImageFullScreen = (img: Base64Image) => {
+// open Fullscreen image
+const dialogImageFullScreen = ref(false)
+const imageFullScreen = ref({
+  title: "",
+  image: ""
+})
+
+const openImageFullScreen = (image: { [key: string]: string }) => {
   dialogImageFullScreen.value = true
-  imageFullScreen.value.title = img.imageTitle ?? ''
-  imageFullScreen.value.image = img.imageData?.base64String ?? ''
+  imageFullScreen.value.title = image.title
+  imageFullScreen.value.image = image.data
 }
 
-/** ---------- Watchers (signature-based) ---------- */
 
-/* Parent → Internal */
-watch(
-    () => props.modelValue,
-    async (val) => {
-      if (internalSync) return
+watch(images, () => {
+  emit("update:modelValue", images.value);
+}, {deep: true});
 
-      const next = Array.isArray(val) ? [...val] : []
-      const nextSig = signature(next)
 
-      // Only reassign when truly different
-      if (nextSig !== signature(images.value)) {
-        images.value = next
+// updating when the parent component adds image to v-model
+watch(props.modelValue, () => {
+  images.value = props.modelValue
+}, {deep: true});
 
-        // 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 }
-)
+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>
   <VCard>
     <VToolbar density="compact">
       <VToolbarTitle>{{ label }}</VToolbarTitle>
-      <v-spacer />
+      <v-spacer></v-spacer>
       <VToolbarItems v-if="!readonly">
         <FileBtn
+            ref="fileBtn"
             v-model="uploadImages"
-            :accept="accept"
+            accept=".jpg, .jpeg"
             color="primary"
             icon="mdi:mdi-image-plus"
-            icon-only
+            iconOnly
             multiple
             variant="text"
             @update:model-value="update"
@@ -224,30 +199,32 @@ watch(
         </v-btn>
       </VToolbarItems>
     </VToolbar>
-
     <VCardText>
       <VRow dense justify="center">
-        <VCol v-for="(image, index) in images" :key="`${imageKey(image)}-${index}`" cols="4">
+        <VCol v-for="(image, index) in images" :key="index" cols="4">
           <VCard>
             <VToolbar density="compact">
               <VToolbarTitle>
-                {{ image.imageTitle }}
+                {{ image.title }}
               </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-icon>mdi mdi-image-edit-outline</v-icon>
                 </v-btn>
               </VToolbarItems>
             </VToolbar>
-
             <v-img
-                :src="image.imageData?.base64String"
+                :src="image.data"
+                @click="() => { (props.readonly) ? openImageFullScreen(image) : setDataUpdate(image)}"
                 height="250"
-                @click="() => { props.readonly ? openImageFullScreen(image) : setDataUpdate(image) }"
             />
           </VCard>
         </VCol>
@@ -255,29 +232,32 @@ watch(
     </VCardText>
   </VCard>
 
-  <!-- Edit dialog -->
-  <VDialog v-model="dialogUpdate" fullscreen transition="dialog-bottom-transition">
+
+  <VDialog
+      v-model="dialogUpdate"
+      fullscreen
+      transition="dialog-bottom-transition"
+  >
     <FormImagesPad
-        v-model="dataUpdate.imageData.base64String"
+        v-model="dataUpdate.data"
         @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,39 +2,143 @@
 import { DateTime } from "luxon";
 import { computed } from "vue";
 
-type Locale = "th" | "en" | "en-US" | "th-TH";
+type Unit = 'years' | 'months' | 'days' | 'hours' | 'minutes' | 'seconds';
+type Locale = 'th' | 'en' | 'en-US' | 'th-TH';
 
 interface Props {
   modelValue: DateTime;
   endDate?: DateTime;
   locale?: Locale;
-  zeroBase?: boolean; // true = start at 0, false = start at 1
+  showSuffix?: boolean;
+  units?: Unit[];
+  zeroBase?: boolean; // true = start at 0, false = start at 1 (inclusive)
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  locale: "th",
+  locale: 'th',
+  showSuffix: true,
   zeroBase: true,
 });
 
-const normalizeLocale = (locale: Locale): "en" | "th" =>
-    locale.startsWith("en") ? "en" : "th";
+// 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 countDate = computed(() => {
-  const base = props.endDate ?? DateTime.now();
+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 baseLocale = normalizeLocale(props.locale);
 
-  let days = Math.floor(base.diff(props.modelValue, "days").days ?? 0);
+  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;
+  });
 
-  if (!props.zeroBase) days += 1;
+  // สร้างข้อความจากหน่วยที่มีค่า > 0
+  const parts = adjusted
+      .filter((v) => v.raw > 0)
+      .map((v) => `${v.raw} ${labelFor(v.unit, v.raw)}`);
 
-  if (baseLocale === "en") {
-    return days === 1 ? "1 day" : `${days} days`;
+  // หากทั้งหมดเป็น 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}` : ''}`;
   }
 
-  return `${days} วัน`;
+  const suffix = props.showSuffix ? localizedSuffix[baseLocale] : '';
+  return `${parts.join(' ')}${suffix ? ` ${suffix}` : ''}`;
 });
 </script>
 
 <template>
-  <span>{{ countDate }}</span>
+<span>
+  <i v-if="props.zeroBase" class="mdi mdi-clock-time-twelve-outline"></i>
+  <span v-if="props.zeroBase">&nbsp;</span>{{ outputText }}
+</span>
 </template>