@ramathibodi/nuxt-commons 0.1.64 → 0.1.65

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.64",
+  "version": "0.1.65",
   "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/label/DateCount.vue

@@ -2,39 +2,142 @@
 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" aria-hidden="true" ></i>
+    {{ outputText }}</span>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramathibodi/nuxt-commons",
-  "version": "0.1.64",
+  "version": "0.1.65",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",