@ramathibodi/nuxt-commons 0.1.52 → 0.1.54

package/dist/module.json

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

package/dist/runtime/components/document/TemplateBuilder.vue

@@ -3,7 +3,7 @@ import {computed, ref, watch} from 'vue'
 import * as prettier from 'prettier'
 import prettierPluginHtml from 'prettier/plugins/html'
 import {useDocumentTemplate, validationRulesRegex,optionStringToChoiceObject} from '../../composables/document/template'
-import {cloneDeep} from "lodash-es";
+import {cloneDeep , filter} from "lodash-es";
 
 interface Props {
   title?: string
@@ -323,7 +323,6 @@ const ruleOptions = (inputType: string) => (value: any) => {
                     </form-table>
                   </v-col>
                   <v-col cols="12">
-                    {{optionData}}
                     <form-table v-model="optionData.items"
                                 hide-default-footer
                                 :importable="false"
@@ -343,14 +342,14 @@ const ruleOptions = (inputType: string) => (value: any) => {
                         </v-container>
                       </template>
 
-                      <template  v-for="header of useFilter(optionData.headers,(item)=> item.template)" #[`item.${header.key}`]="{item}">
+                      <template  v-for="header of filter(optionData.headers,(item)=> item.template)" #[`item.${header.key}`]="{item}">
                         <form-pad
                                   :template="header.template"
                                   v-model="item[header.key]">
                         </form-pad>
 
                       </template>
-                      <template  v-for="header of useFilter(optionData.headers,(item)=> item.headerTemplate)" #[`header.${header.key}`]="{item}">
+                      <template  v-for="header of filter(optionData.headers,(item)=> item.headerTemplate)" #[`header.${header.key}`]="{item}">
                         <form-pad
                             :template="header.headerTemplate"
                             >

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

@@ -43,8 +43,7 @@ const props = withDefaults(defineProps<Props>(), {
   stringFields: ()=>[],
 })
 
-const emit = defineEmits(['update:modelValue'])
-
+const emit = defineEmits(['update:modelValue','open:dialog','close:dialog'])
 const attrs = useAttrs()
 const plainAttrs = computed(() => {
   return omit(attrs, ['modelValue', 'onUpdate:modelValue'])
@@ -175,6 +174,7 @@ function openDialog(item?: object) {
     currentItem.value = item
     nextTick(() => {
       isDialogOpen.value = true
+      emit('open:dialog',item)
     })
   }
 }
@@ -325,6 +325,7 @@ defineExpose({
               :form-data="currentItem"
               @create="createItem"
               @update="updateItem"
+              @afterLeave="emit('close:dialog')"
               :saveAndStay="saveAndStay"
               v-if="!props.inputPadOnly"
           >

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

@@ -1,41 +1,92 @@
 <script setup lang="ts">
-import { DateTime, type ToRelativeOptions } from "luxon";
+import { DateTime } from "luxon";
 import { computed } from "vue";
 
+type Unit = 'years' | 'months' | 'days' | 'hours' | 'minutes' | 'seconds';
+type Locale = 'th' | 'en' | 'en-US' | 'th-TH';
+
 interface Props {
   modelValue: DateTime;
-  locale?: 'TH' | 'EN';
+  locale?: Locale;
+  showSuffix?: boolean;
+  units?: Unit[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  locale: 'TH',
+  locale: 'th',
+  showSuffix: true
 });
 
-const timeAgo = computed(() => {
+// 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 localizedLabels: Record<'en' | 'th', Record<Unit, string>> = {
+  en: {
+    years: 'years',
+    months: 'months',
+    days: 'days',
+    hours: 'hours',
+    minutes: 'minutes',
+    seconds: 'seconds',
+  },
+  th: {
+    years: 'ปี',
+    months: 'เดือน',
+    days: 'วัน',
+    hours: 'ชั่วโมง',
+    minutes: 'นาที',
+    seconds: 'วินาที',
+  },
+};
+
+const localizedSuffix: Record<'en' | 'th', string> = {
+  en: 'ago',
+  th: 'ที่ผ่านมา',
+};
+
+const outputText = computed(() => {
   const now = DateTime.now();
-  const diff = now.diff(props.modelValue, ['years', 'months', 'days', 'hours', 'minutes', 'seconds']).toObject();
-
-  let unit: ToRelativeOptions['unit'] = 'seconds';
-  if (diff.years && diff.years > 0) {
-    unit = 'years';
-  } else if (diff.months && diff.months > 0) {
-    unit = 'months';
-  } else if (diff.days && diff.days > 0) {
-    unit = 'days';
-  } else if (diff.hours && diff.hours > 0) {
-    unit = 'hours';
-  } else if (diff.minutes && diff.minutes > 0) {
-    unit = 'minutes';
+  const baseLocale = normalizeLocale(props.locale);
+
+  const units: Unit[] = props.units?.length
+      ? props.units
+      : ['years', 'months', 'days', 'hours', 'minutes', 'seconds'];
+
+  const diff = now.diff(props.modelValue, units).toObject();
+
+  if (!props.units) {
+    const foundUnit = units.find(unit => (diff[unit] ?? 0) >= 1);
+    const value = Math.floor(diff[foundUnit!] ?? 0);
+    const label = localizedLabels[baseLocale][foundUnit!];
+    const suffix = props.showSuffix ? localizedSuffix[baseLocale] : '';
+    return `${value} ${label}${suffix}`;
+  }
+
+  const parts = units.map(unit => {
+    const value = Math.floor(diff[unit] ?? 0);
+    if (value > 0) {
+      const label = localizedLabels[baseLocale][unit];
+      return `${value} ${label}`;
+    }
+    return '';
+  }).filter(Boolean);
+
+  if (parts.length === 0) {
+    const lastUnit = units.at(-1)!;
+    const label = localizedLabels[baseLocale][lastUnit];
+    const suffix = props.showSuffix ? localizedSuffix[baseLocale] : '';
+    return `0 ${label} ${suffix}`;
   }
 
-  return props.modelValue.setLocale(props.locale).toRelative({ unit });
+  const suffix = props.showSuffix ? localizedSuffix[baseLocale] : '';
+  return `${parts.join(' ')} ${suffix}`;
 });
 </script>
 
 <template>
-  <span>{{ timeAgo }}</span>
+  <span>{{ outputText }}</span>
 </template>
-
-<style scoped>
-
-</style>

package/dist/runtime/components/model/Table.vue

@@ -46,6 +46,7 @@ const props = withDefaults(defineProps<Props & GraphqlModelProps>(), {
   onlyOwnerEdit: false,
 })
 
+const emit = defineEmits(['open:dialog','close:dialog'])
 const attrs = useAttrs()
 const plainAttrs = computed(() => {
   const returnAttrs = clone(attrs)
@@ -75,6 +76,7 @@ function openDialog(item?: object) {
   currentItem.value = item
   nextTick(() => {
     isDialogOpen.value = true
+    emit('open:dialog' , item)
   })
 }
 
@@ -83,6 +85,7 @@ function openDialogReadonly(item?: object) {
   currentItem.value = item
   nextTick(() => {
     isDialogOpen.value = true
+    emit('open:dialog' , item)
   })
 }
 
@@ -289,6 +292,7 @@ defineExpose({ reload,operation })
       :form-data="currentItem"
       @create="createItem"
       @update="updateItem"
+      @afterLeave="emit('close:dialog')"
       :saveAndStay="saveAndStay"
       :readonly="isDialogReadonly"
     >

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

@@ -36,7 +36,7 @@ const modelItemValue = computedAsync<string>(async () => {
     }
   }
   return props.notFoundText
-}, props.placeholder )
+}, props.placeholder ?? '' )
 </script>
 
 <template>

package/package.json

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