tantee-nuxt-commons 0.0.172 → 0.0.174

package/dist/module.json

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

package/dist/runtime/components/Alert.vue

@@ -45,6 +45,7 @@ watch(() => alert?.hasAlert(), (hasAlert) => {
       elevation="2"
       theme="dark"
       variant="flat"
+      v-bind="currentItem.alertIcon ? { icon: currentItem.alertIcon } : {}"
       @click:close="renewAlert()"
     >
       {{ currentItem.statusCode ? currentItem.statusCode + ' ' : '' }} {{ currentItem.message }} {{ !isEmpty(currentItem.data) ? currentItem.data : '' }}

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

@@ -73,7 +73,7 @@ const loadFormData = () => {
     formData.value = cloneDeep(formDataOriginalValue.value)
   }
   else {
-    formData.value = Object.assign({}, props.initialData)
+    formData.value = Object.assign({}, cloneDeep(props.initialData))
   }
 }
 

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

@@ -85,7 +85,7 @@ const loadFormData = () => {
     formDataOriginalValue.value = cloneDeep(props.formData)
   }
   else {
-    formData.value = Object.assign({}, props.initialData)
+    formData.value = Object.assign({}, cloneDeep(props.initialData))
   }
   isSavedAndStay.value = false
 }

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

@@ -78,7 +78,7 @@ const loadFormData = () => {
     formDataOriginalValue.value = cloneDeep(props.formData)
   }
   else {
-    formData.value = Object.assign({}, props.initialData)
+    formData.value = Object.assign({}, cloneDeep(props.initialData))
   }
 }
 

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

@@ -497,8 +497,6 @@ defineExpose({
                       show-first-last-page
                       @first="footerProps.setPage(1)"
                       @last="footerProps.setPage(footerProps.pageCount)"
-                      @next="footerProps.nextPage"
-                      @prev="footerProps.prevPage"
                       @update:model-value="footerProps.setPage"
                   />
                 </v-row>

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

@@ -34,6 +34,7 @@ interface Props {
   parentTemplates?: string|string[]
   dirtyClass?: string
   dirtyOnCreate?: boolean
+  sanitizeDelay?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -43,7 +44,8 @@ const props = withDefaults(defineProps<Props>(), {
   decoration: () => { return {} },
   parentTemplates: (): string[] => [],
   dirtyClass: "form-data-dirty",
-  dirtyOnCreate: false
+  dirtyOnCreate: false,
+  sanitizeDelay: 2000,
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -87,7 +89,7 @@ function isBlankString(v: unknown): v is string {
   return isString(v) && v.trim().length === 0
 }
 
-const sanitizeBlankStrings = debounce(sanitizeBlankStringsRaw, 500)
+const sanitizeBlankStrings = debounce(sanitizeBlankStringsRaw, props.sanitizeDelay)
 
 function sanitizeBlankStringsRaw(val: any, original?: any): void {
   if (!original && props.originalData) {
@@ -125,6 +127,71 @@ function sanitizeBlankStringsRaw(val: any, original?: any): void {
   }
 }
 
+function autoSanitizedDisplay(item: any, separator: string = ","): string | undefined {
+  const isEmptyScalar = (v: any) =>
+      v === null ||
+      v === undefined ||
+      (typeof v === "string" && v.trim() === "") ||
+      (typeof v === "number" && Number.isNaN(v));
+
+  const toStr = (v: any): string | undefined => {
+    if (isEmptyScalar(v)) return undefined;
+    if (typeof v === "string") return v.trim();
+    if (typeof v === "number" || typeof v === "boolean" || typeof v === "bigint") return String(v);
+    if (typeof v === "symbol") return v.description ?? String(v);
+    if (typeof v === "function") return v.name ? `[Function ${v.name}]` : "[Function]";
+    return undefined;
+  };
+
+  // 1) empty -> undefined
+  if (isEmptyScalar(item)) return undefined;
+
+  // 2) array -> recurse + join
+  if (Array.isArray(item)) {
+    const parts = item
+        .map((x) => autoSanitizedDisplay(x, separator))
+        .filter((s): s is string => typeof s === "string" && s.trim() !== "");
+    return parts.length ? parts.join(separator) : undefined;
+  }
+
+  // simple scalars
+  const scalar = toStr(item);
+  if (scalar !== undefined) return scalar;
+
+  // 3) object
+  if (typeof item === "object") {
+    // 3.1 label
+    if ("label" in item) {
+      const v = autoSanitizedDisplay((item as any).label, separator) ?? toStr((item as any).label);
+      if (v !== undefined) return v;
+    }
+    // 3.2 value
+    if ("value" in item) {
+      const v = autoSanitizedDisplay((item as any).value, separator) ?? toStr((item as any).value);
+      if (v !== undefined) return v;
+    }
+
+    // 3.3 stringify attributes as key:value (recurse values)
+    const entries = Object.entries(item as Record<string, any>)
+        .map(([k, v]) => {
+          const rendered = autoSanitizedDisplay(v, separator) ?? toStr(v);
+          if (rendered === undefined || rendered.trim() === "") return undefined;
+          return `${k}:${rendered}`;
+        })
+        .filter((x): x is string => typeof x === "string" && x.trim() !== "");
+
+    return entries.length ? entries.join(separator) : undefined;
+  }
+
+  // fallback
+  try {
+    const s = String(item);
+    return s.trim() ? s : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
 watch(formData, (newValue) => {
   sanitizeBlankStrings(newValue)
   emit('update:modelValue', newValue)
@@ -219,6 +286,7 @@ function buildFormComponent() {
           resetValidate: () => formPadTemplate.value.resetValidate(),
           isValid,
           ...templateScriptFunction.value(props, ctx, ...Object.values(vueFunctions)),
+          autoSanitizedDisplay
         }
       },
       template: componentTemplate,
@@ -279,6 +347,7 @@ defineExpose({
     :disabled="disabled"
     :readonly="readonly"
     :class="$attrs.class"
+    autocomplete="off"
   >
     <template #default="formProvided">
       <slot

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

@@ -230,58 +230,65 @@ defineExpose({
 <template>
   <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"
-            />
-            <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>
+      <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">

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>

package/dist/runtime/components/pdf/View.vue

@@ -15,12 +15,12 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof PDF['$props']> {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  base64String: "",
-  title: "",
-  fileName: "",
+  base64String: '',
+  title: '',
+  fileName: '',
   disabled: false,
   isPrint: false,
-  showBackToTopBtn: false
+  showBackToTopBtn: false,
 })
 
 const emit = defineEmits(['closeDialog'])
@@ -33,25 +33,34 @@ const generateUniqueId = (): string => {
 }
 
 const downloadPdf = (): void => {
-  const byteString = atob(props.base64String || '')
-  const byteArray = new Uint8Array(byteString.length)
+  try {
+    if (!props.base64String) alert?.addAlert({ message: 'No Base64 provided', alertType: 'error' })
 
-  for (let i = 0; i < byteString.length; i++) {
-    byteArray[i] = byteString.charCodeAt(i)
-  }
+    const byteString = atob(props.base64String || '')
+    const byteArray = new Uint8Array(byteString.length)
 
-  const blob = new Blob([byteArray], { type: 'application/pdf' })
-  const link = URL.createObjectURL(blob)
-  const anchorElement = document.createElement('a')
-  anchorElement.style.display = 'none'
-  anchorElement.href = link
-  anchorElement.download = `${generateUniqueId()}.pdf`
-
-  document.body.appendChild(anchorElement)
-  anchorElement.click()
-  URL.revokeObjectURL(link)
-  document.body.removeChild(anchorElement)
-  base64.value = ''
+    for (let i = 0; i < byteString.length; i++) {
+      byteArray[i] = byteString.charCodeAt(i)
+    }
+
+    const blob = new Blob([byteArray], { type: 'application/pdf' })
+    const link = URL.createObjectURL(blob)
+    const anchorElement = document.createElement('a')
+    anchorElement.style.display = 'none'
+    anchorElement.href = link
+    anchorElement.download = `${generateUniqueId()}.pdf`
+
+    document.body.appendChild(anchorElement)
+    anchorElement.click()
+    URL.revokeObjectURL(link)
+    document.body.removeChild(anchorElement)
+    base64.value = ''
+
+    alert?.addAlert({ message: 'Download success', alertType: 'success' })
+  }
+  catch (error) {
+    alert?.addAlert({ message: `Download unsuccess : ${error}`, alertType: 'error' })
+  }
 }
 
 const printPdf = () => {
@@ -60,7 +69,7 @@ const printPdf = () => {
     type: 'pdf',
     base64: true,
     onPrintDialogClose: endLoadPdf,
-    onError: (error: any) => {
+    onError: (error) => {
       alert?.addAlert({ message: error, alertType: 'error' })
     },
   })
@@ -73,18 +82,19 @@ const endLoadPdf = () => {
 }
 
 const isMobile = () => {
-  return /Android|Mobi|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Macintosh/i.test(navigator.userAgent);
+  return /Android|Mobi|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Macintosh/i.test(navigator.userAgent)
 }
 
 const checkMobileAndPrint = computed(() => {
-  return !isMobile() && props.isPrint;
-});
+  return !isMobile() && props.isPrint
+})
 
 const setWidthPdf = computed(() => {
   if (isMobile()) {
-    return "100%"
-  } else {
-    return "100dvh"
+    return '100%'
+  }
+  else {
+    return '100dvh'
   }
 })
 </script>
@@ -114,10 +124,10 @@ const setWidthPdf = computed(() => {
     </v-toolbar>
     <v-card-text class="justify-center h-screen">
       <PDF
-          v-bind="$attrs"
-          :pdf-width="setWidthPdf"
-          :src="base64"
-          :show-back-to-top-btn="props.showBackToTopBtn"
+        v-bind="$attrs"
+        :pdf-width="setWidthPdf"
+        :src="base64"
+        :show-back-to-top-btn="props.showBackToTopBtn"
       />
     </v-card-text>
   </v-card>

package/dist/runtime/composables/document/templateFormTable.js

@@ -34,13 +34,16 @@ function guessWidth(width) {
 export function processTemplateFormTable(item, parentTemplates, dataVariable) {
   let tableOptions = Object.assign({ title: item.inputLabel || "", formTemplate: "" }, item.inputOptions);
   let tableHeader = tableOptions.headers || [];
-  if (!tableHeader.some((h) => h.key === "action")) tableHeader.push({ title: "Action", key: "action", width: "100px" });
   let tableItemTemplate = "";
   tableHeader.forEach((h) => {
     if (h.template) {
       tableItemTemplate += `\r
 <template #item.${h.key}="props">${h.template}</template>`;
+    } else {
+      tableItemTemplate += `\r
+<template #item.${h.key}="props">{{autoSanitizedDisplay(props.item.${h.key})}}</template>`;
     }
   });
+  if (!tableHeader.some((h) => h.key === "action")) tableHeader.push({ title: "Action", key: "action", width: "100px" });
   return processDefaultTemplate(item, `<template #form="{data,rules}">${useDocumentTemplate(tableOptions.formTemplate)}</template>${tableItemTemplate}`, `title="${tableOptions.title}" :headers='${escapeObjectForInlineBinding(tableHeader)}'`, void 0, dataVariable);
 }

package/package.json

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