@ramathibodi/nuxt-commons 0.1.53 → 0.1.55

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.53",
+  "version": "0.1.55",
   "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
@@ -342,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/Iterator.vue

@@ -5,6 +5,7 @@ import type {FormDialogCallback} from '../../types/formDialog'
 import {VDataIterator} from "vuetify/components/VDataIterator";
 import {VDataTable} from "vuetify/components/VDataTable";
 import {VInput} from 'vuetify/components/VInput'
+import {useDisplay} from 'vuetify'
 
 defineOptions({
   inheritAttrs: false,
@@ -35,6 +36,13 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VDataIterator['$pr
   md?: string | number | boolean
   sm?: string | number | boolean
   itemsPerPage?: string | number
+
+  preferTable?: string | number | boolean
+  preferTableXxl?: string | number | boolean
+  preferTableXl?: string | number | boolean
+  preferTableLg?: string | number | boolean
+  preferTableMd?: string | number | boolean
+  preferTableSm?: string | number | boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -75,8 +83,42 @@ const tableSlots = computed(() => {
   return omit(slots, ['item'])
 })
 
+const display = useDisplay()
+const isProgrammaticSet = ref(false)
+const userOverrodeView = ref(false)
+
 const viewType = ref<string[] | string>('iterator')
 
+function setViewTypeSafely(val: 'iterator' | 'table') {
+  isProgrammaticSet.value = true
+  if (Array.isArray(viewType.value)) {
+    viewType.value = [val]
+  } else {
+    viewType.value = val
+  }
+  nextTick(() => { isProgrammaticSet.value = false })
+}
+
+watch(viewType, () => {
+  if (!isProgrammaticSet.value) userOverrodeView.value = true
+})
+
+function parsePrefer(val: unknown): boolean | number {
+  if (val === true) return true
+  const n = Number(val)
+  return Number.isFinite(n) && n > 0 ? n : false
+}
+
+const computedPreferTable = computed<boolean | number>(() => {
+  const bp = display.name?.value
+  if (bp === 'xxl' && props.preferTableXxl !== undefined) return parsePrefer(props.preferTableXxl)
+  if (bp === 'xl'  && props.preferTableXl  !== undefined) return parsePrefer(props.preferTableXl)
+  if (bp === 'lg'  && props.preferTableLg  !== undefined) return parsePrefer(props.preferTableLg)
+  if (bp === 'md'  && props.preferTableMd  !== undefined) return parsePrefer(props.preferTableMd)
+  if (bp === 'sm'  && props.preferTableSm  !== undefined) return parsePrefer(props.preferTableSm)
+  return parsePrefer(props.preferTable)
+})
+
 const items = ref<Record<string, any>[]>([])
 const search = ref<string>()
 const currentItem = ref<Record<string, any> | undefined>(undefined)
@@ -109,6 +151,23 @@ watch(items, (newValue) => {
   emit('update:modelValue', newValue)
 }, { deep: true })
 
+watch(
+    [() => items.value?.length, computedPreferTable, () => display.name?.value],
+    ([len, prefer]) => {
+      if (userOverrodeView.value) return // respect explicit user choice forever (until remount)
+
+      let target: 'iterator' | 'table' = 'iterator'
+      if (prefer === true) {
+        target = 'table'
+      } else if (typeof prefer === 'number') {
+        if (Number(len) >= prefer) target = 'table'
+      }
+
+      if (!viewType.value?.includes(target)) setViewTypeSafely(target)
+    },
+    { immediate: true }
+)
+
 const itemsPerPageInternal = ref<string | number>()
 watch(() => props.itemsPerPage, (newValue) => {
   if (newValue.toString().toLowerCase() == 'all') itemsPerPageInternal.value = '-1'

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

@@ -269,18 +269,25 @@ defineExpose({ reload,operation })
         #item.action="{ item }"
       >
         <v-btn
-          v-if="canUpdate"
-          variant="flat"
-          density="compact"
-          icon="mdi mdi-note-edit"
-          @click="openDialog(item)"
+            v-if="!canUpdate || !canEditRow(item)"
+            variant="flat"
+            density="compact"
+            icon="mdi mdi-note-search"
+            @click="openDialogReadonly(item)"
         />
         <v-btn
-          v-if="canDelete"
-          variant="flat"
-          density="compact"
-          icon="mdi mdi-delete"
-          @click="confirmDeleteItem(item)"
+            v-if="canUpdate && canEditRow(item)"
+            variant="flat"
+            density="compact"
+            icon="mdi mdi-note-edit"
+            @click="openDialog(item)"
+        />
+        <v-btn
+            v-if="canDelete && canEditRow(item)"
+            variant="flat"
+            density="compact"
+            icon="mdi mdi-delete"
+            @click="confirmDeleteItem(item)"
         />
       </template>
     </v-data-table>

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

@@ -5,6 +5,7 @@ import {VDataTable} from "vuetify/components/VDataTable";
 import {omit} from 'lodash-es'
 import type {GraphqlModelProps} from '../../composables/graphqlModel'
 import {useGraphqlModel} from '../../composables/graphqlModel'
+import {useDisplay} from 'vuetify'
 
 defineOptions({
   inheritAttrs: false,
@@ -32,6 +33,13 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VDataIterator['$pr
   md?: string | number | boolean
   sm?: string | number | boolean
   itemsPerPage?: string | number
+
+  preferTable?: string | number | boolean
+  preferTableXxl?: string | number | boolean
+  preferTableXl?: string | number | boolean
+  preferTableLg?: string | number | boolean
+  preferTableMd?: string | number | boolean
+  preferTableSm?: string | number | boolean
 }
 
 const props = withDefaults(defineProps<Props & GraphqlModelProps>(), {
@@ -69,8 +77,42 @@ const tableSlots = computed(() => {
   return omit(slots, ['item'])
 })
 
+const display = useDisplay()
+const isProgrammaticSet = ref(false)
+const userOverrodeView = ref(false)
+
 const viewType = ref<string[] | string>('iterator')
 
+function setViewTypeSafely(val: 'iterator' | 'table') {
+  isProgrammaticSet.value = true
+  if (Array.isArray(viewType.value)) {
+    viewType.value = [val]
+  } else {
+    viewType.value = val
+  }
+  nextTick(() => { isProgrammaticSet.value = false })
+}
+
+watch(viewType, () => {
+  if (!isProgrammaticSet.value) userOverrodeView.value = true
+})
+
+function parsePrefer(val: unknown): boolean | number {
+  if (val === true) return true
+  const n = Number(val)
+  return Number.isFinite(n) && n > 0 ? n : false
+}
+
+const computedPreferTable = computed<boolean | number>(() => {
+  const bp = display.name?.value
+  if (bp === 'xxl' && props.preferTableXxl !== undefined) return parsePrefer(props.preferTableXxl)
+  if (bp === 'xl'  && props.preferTableXl  !== undefined) return parsePrefer(props.preferTableXl)
+  if (bp === 'lg'  && props.preferTableLg  !== undefined) return parsePrefer(props.preferTableLg)
+  if (bp === 'md'  && props.preferTableMd  !== undefined) return parsePrefer(props.preferTableMd)
+  if (bp === 'sm'  && props.preferTableSm  !== undefined) return parsePrefer(props.preferTableSm)
+  return parsePrefer(props.preferTable)
+})
+
 const currentItem = ref<Record<string, any> | undefined>(undefined)
 const isDialogOpen = ref<boolean>(false)
 
@@ -113,6 +155,23 @@ watch([currentPage, itemsPerPageInternal, sortBy], () => {
   }
 }, { immediate: true })
 
+watch(
+    [itemsLength, computedPreferTable, () => display.name?.value],
+    ([len, prefer]) => {
+      if (userOverrodeView.value) return // respect explicit user choice forever (until remount)
+
+      let target: 'iterator' | 'table' = 'iterator'
+      if (prefer === true) {
+        target = 'table'
+      } else if (typeof prefer === 'number') {
+        if (Number(len) >= prefer) target = 'table'
+      }
+
+      if (!viewType.value?.includes(target)) setViewTypeSafely(target)
+    },
+    { immediate: true }
+)
+
 const operation = ref({ openDialog, createItem, importItems, updateItem, deleteItem, reload, setSearch, canServerPageable, canServerSearch, canCreate, canUpdate, canDelete })
 
 const computedInitialData = computed(() => {

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.53",
+  "version": "0.1.55",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",