@ramathibodi/nuxt-commons 0.1.54 → 0.1.56

package/dist/module.json

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

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

@@ -7,6 +7,7 @@ type Locale = 'th' | 'en' | 'en-US' | 'th-TH';
 
 interface Props {
   modelValue: DateTime;
+  endDate?: DateTime;
   locale?: Locale;
   showSuffix?: boolean;
   units?: Unit[];
@@ -49,15 +50,16 @@ const localizedSuffix: Record<'en' | 'th', string> = {
 };
 
 const outputText = computed(() => {
-  const now = DateTime.now();
+  const base = props.endDate ?? DateTime.now(); // 👈 ใช้ baseDate ถ้ามี ไม่งั้น fallback เป็น now
   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();
+  const diff = base.diff(props.modelValue, units).toObject();
 
+  // แสดงแบบ single unit
   if (!props.units) {
     const foundUnit = units.find(unit => (diff[unit] ?? 0) >= 1);
     const value = Math.floor(diff[foundUnit!] ?? 0);
@@ -66,6 +68,7 @@ const outputText = computed(() => {
     return `${value} ${label}${suffix}`;
   }
 
+  // แสดงหลาย unit
   const parts = units.map(unit => {
     const value = Math.floor(diff[unit] ?? 0);
     if (value > 0) {
@@ -79,14 +82,14 @@ const outputText = computed(() => {
     const lastUnit = units.at(-1)!;
     const label = localizedLabels[baseLocale][lastUnit];
     const suffix = props.showSuffix ? localizedSuffix[baseLocale] : '';
-    return `0 ${label} ${suffix}`;
+    return `0 ${label}${suffix}`;
   }
 
   const suffix = props.showSuffix ? localizedSuffix[baseLocale] : '';
-  return `${parts.join(' ')} ${suffix}`;
+  return `${parts.join(' ')}${suffix}`;
 });
 </script>
 
 <template>
   <span>{{ outputText }}</span>
-</template>
+</template>

package/dist/runtime/components/master/Autocomplete.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {VAutocomplete} from 'vuetify/components/VAutocomplete'
-import {concat} from 'lodash-es'
+import {union} from 'lodash-es'
 import {computed} from 'vue'
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof VAutocomplete['$props']> {
@@ -16,6 +16,8 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VAutocomplete['$pr
   waitForFilter?: boolean
   waitForFilterText?: string
 
+  meilisearch?: boolean
+
   cache?: boolean | number
 }
 
@@ -27,6 +29,8 @@ const props = withDefaults(defineProps<Props>(), {
   noDataText: 'ไม่พบข้อมูล',
   waitForFilter: false,
 
+  meilisearch: false,
+
   cache: false,
 })
 
@@ -34,6 +38,7 @@ const computedModelName = computed(()=>{
   let operation = 'masterItemByGroupKey'
   if (props.filterText) operation = 'masterItemByGroupKeyAndFilterText'
   if (props.itemCodes && props.itemCodes.length>0) operation = 'masterItemByGroupKeyAndItemCodeIn'
+  if (props.meilisearch) operation = 'masterItemByGroupKeyAndFilterTextAndKeyword'
   if (props.waitForFilter && !props.filterText) operation = ""
   return operation
 })
@@ -49,14 +54,29 @@ const computedModelBy = computed(()=>{
   return modelBy
 })
 
+const computedModelSelectedItemBy = computed(()=>{
+  return {groupKey: props.groupKey}
+})
+
 const computedFields = computed(()=>{
-  return concat(['itemCode', 'itemValue', 'itemValueAlternative'],props.fields)
+  let fields : Array<string | object> = []
+  if (props.filterText) fields.push('filterText')
+  if (props.meilisearch) fields.push('_formatted')
+  return union(['itemCode', 'itemValue', 'itemValueAlternative'],fields,props.fields || [])
 })
 
 const itemTitleField = computed(() => {
   return (props.lang == 'TH') ? 'itemValue' : 'itemValueAlternative'
 })
 
+const formatItemTitle = (item: any)=>{
+  if (props.meilisearch) {
+    return (props.showCode ? item.raw?._formatted?.itemCode+'-' : '')+(item.raw?._formatted?.[itemTitleField.value] || item.raw?._formatted?.itemValue || item.raw?._formatted?.itemCode)
+  } else {
+    return (props.showCode ? item.raw.itemCode+'-' : '')+(item.title || item.raw.itemValue || item.raw.itemCode)
+  }
+}
+
 const computedNoDataText = computed(() => {
   if (props.waitForFilter && !props.filterText) return props.waitForFilterText
   return props.noDataText
@@ -82,7 +102,12 @@ const computedSortBy = computed(()=>{
       item-value="itemCode"
       :no-data-text="computedNoDataText"
       :show-code="props.showCode"
-      :cache="props.cache"
+      :cache="props.cache && !props.meilisearch"
+      :server-search="props.meilisearch && !!computedModelName"
+      server-search-key="keyword"
+      model-selected-item="masterItemByGroupKeyAndItemCodeIn"
+      :model-selected-item-by="computedModelSelectedItemBy"
+      model-selected-item-key="itemCodes"
   >
     <template
         v-for="(_, name, index) in ($slots as {})"
@@ -97,13 +122,35 @@ const computedSortBy = computed(()=>{
     </template>
 
     <template
-        v-if="!$slots.item"
+        v-if="!$slots.item && !meilisearch"
         #item="{ props, item }"
     >
       <v-list-item
           v-bind="props"
-          :title="item.title"
+          :title="formatItemTitle(item)"
       />
     </template>
+
+    <template
+        v-if="!$slots.item && meilisearch"
+        #item="{ props, item }"
+    >
+      <v-list-item v-bind="props">
+        <template #title v-if="item.raw?._formatted?.itemValue">
+          <span v-html="formatItemTitle(item)" class="meilisearch-item"></span>
+        </template>
+      </v-list-item>
+    </template>
+
+    <template
+        v-if="!$slots.selection && showCode"
+        #selection="{ item }"
+    >
+      {{ formatItemTitle(item) }}
+    </template>
   </model-autocomplete>
 </template>
+
+<style>
+.meilisearch-item em{font-weight:700}
+</style>

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

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import {VAutocomplete} from 'vuetify/components/VAutocomplete'
-import {concat, isEmpty, isArray, sortBy} from 'lodash-es'
-import {computed, ref,watchEffect} from 'vue'
-import {watchDebounced} from '@vueuse/core'
-import {useFuzzy} from '../../composables/utils/fuzzy'
-import {useGraphQlOperation} from "../../composables/graphqlOperation";
+import { VAutocomplete } from 'vuetify/components/VAutocomplete'
+import { union, isEmpty, isArray, sortBy, castArray } from 'lodash-es'
+import { computed, ref, watch, defineModel } from 'vue'
+import { watchDebounced } from '@vueuse/core'
+import { useFuzzy } from '../../composables/utils/fuzzy'
+import { useGraphQlOperation } from '../../composables/graphqlOperation'
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof VAutocomplete['$props']> {
   fuzzy?: boolean
@@ -12,7 +12,7 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VAutocomplete['$pr
   showCode?: boolean
 
   modelName: string
-  modelBy?: object
+  modelBy?: Record<string, any>
   itemTitle: string
   itemValue: string
   fields?: Array<string | object>
@@ -20,105 +20,232 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VAutocomplete['$pr
 
   serverSearch?: boolean
   serverSearchKey?: string
+  searchSearchSort?: boolean
+  serverSearchDebounce?: number
+
+  serverSearchText?: string
+  serverSearchLoadingText?: string
+
+  modelSelectedItem?: string
+  modelSelectedItemBy?: Record<string, any>
+  modelSelectedItemKey?: string
+
+  filterKeys?: string|string[]
+  noDataText?: string
+  placeholder?: string
+  multiple?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   fuzzy: false,
   showCode: false,
-
   cache: false,
-
   serverSearch: false,
+  searchSearchSort: false,
+  serverSearchText: "Type to search…",
+  serverSearchLoadingText: "Searching…",
+  serverSearchDebounce: 500,
 })
 
+const emit = defineEmits<{
+  (e: 'update:selectedObject', object: any|any[]): void
+}>()
+
 const modelItems = ref<Array<any>>([])
 const items = ref<Array<any>>([])
-
 const searchData = ref<string>('')
 
 const isLoading = ref(false)
 const isErrorLoading = ref(false)
 
-watchEffect(()=>{
-  let fields: any[] = [props.itemTitle,props.itemValue]
-  if (props.fields) fields = concat(fields, props.fields)
+const queryFields = computed(() => {
+  let fieldsArray: any[] = [props.itemTitle, props.itemValue]
+  if (props.fields) fieldsArray = union(fieldsArray, props.fields)
+  return fieldsArray
+})
+
+const computedFilterKeys = computed(() => {
+  if (props.filterKeys) return props.filterKeys
+  return ['title','raw.'+props.itemValue]
+})
+
+const computedPlaceholder = computed(() => {
+  if (!props.serverSearch) return props.placeholder
+  return isLoading.value ? props.serverSearchLoadingText : props.serverSearchText
+})
+
+const computedNoDataText = computed(() => {
+  if (!props.serverSearch) return props.noDataText
+  if (isLoading.value) return props.serverSearchLoadingText
+  if (!searchData.value) return props.serverSearchText
+  return props.noDataText
+})
+
+let requestId = 0
 
-  const variables: Record<string, any> = Object.assign({},props.modelBy)
+async function loadItems() {
+  if (!props.modelName) {
+    modelItems.value = []
+    items.value = []
+    return
+  }
+
+  const id = ++requestId
+  isLoading.value = true
+
+  const variables: Record<string, any> = { ...(props.modelBy || {}) }
   if (props.serverSearch && props.serverSearchKey) {
     variables[props.serverSearchKey] = searchData.value
   }
 
-  if (props.modelName) {
-    isLoading.value = true
-
-    useGraphQlOperation('Query',props.modelName,fields,variables,props.cache).then((result: any) => {
-      if (isArray(result)) {
-        modelItems.value = result
-        items.value = result
-        isErrorLoading.value = false
-      } else {
-        isErrorLoading.value = true
-      }
-    }).catch((_error) => {
+  try {
+    const result: any = await useGraphQlOperation('Query', props.modelName, queryFields.value, variables, props.cache)
+
+    if (id !== requestId) return
+
+    if (isArray(result)) {
+      modelItems.value = result
+      items.value = result
+      isErrorLoading.value = false
+    } else {
+      isErrorLoading.value = true
       modelItems.value = []
       items.value = []
-      isErrorLoading.value = true
-    }).finally(() => {
-      isLoading.value = false
-    })
-  } else {
+    }
+  } catch (_error) {
+    if (id !== requestId) return
+    isErrorLoading.value = true
     modelItems.value = []
     items.value = []
+  } finally {
+    if (id === requestId) isLoading.value = false
+  }
+}
+
+function applyFuzzy() {
+  if (!props.fuzzy) return
+
+  if (isEmpty(searchData.value)) {
+    items.value = modelItems.value
+    return
   }
-})
 
-async function fuzzySearch() {
-  if (props.fuzzy) {
-    if (isEmpty(searchData.value)) {
-      items.value = modelItems.value
+  const results: any = useFuzzy(searchData.value, modelItems.value, queryFields.value)
+  const output: any[] = []
+  if (results.value?.length) {
+    for (let index = 0; index < results.value.length; index++) {
+      const result = results.value[index]
+      if (result?.item) output.push(result.item)
     }
-    else {
-      let fields: any[] = [props.itemTitle,props.itemValue]
-      if (props.fields) fields = concat(fields, props.fields)
+  }
+  items.value = output
+}
 
-      const results: any = useFuzzy(searchData.value, modelItems.value, fields)
-      items.value = []
-      if (results.value.length) {
-        for (let i = 0; results.value.length > i; i++) {
-          if (results.value[i].item) items.value.push(results.value[i].item)
-        }
-      }
+const selectedItems = defineModel<any>()
+const selectedItemsObject = ref<any[]>([])
+async function syncSelectedFromModelValue() {
+  const modelValueData: any = selectedItems.value
+  const values = castArray(modelValueData).filter(value => value !== undefined && value !== null && value !== '')
+
+  if (!values.length) {
+    emit("update:selectedObject",(props.multiple) ? [] : undefined)
+    selectedItemsObject.value = []
+    return
+  }
+
+  let alreadyInObject : any[] = selectedItemsObject.value?.filter(item => values.includes(item?.[props.itemValue])) || []
+
+  const haveSet = new Set<any>([...alreadyInObject.map(item => item?.[props.itemValue])])
+  const missingValues: any[] = values.filter(value => !haveSet.has(value))
+
+  const stillMissing: any[] = []
+  for (const value of missingValues) {
+    const localHit = modelItems.value.find(item => item?.[props.itemValue] === value)
+    if (localHit) {
+      alreadyInObject.push(localHit)
+      haveSet.add(value)
+    } else {
+      stillMissing.push(value)
     }
   }
+
+  if (stillMissing.length && props.modelSelectedItem) {
+    try {
+      const key = props.modelSelectedItemKey || 'id'
+      const variables: Record<string, any> = { ...(props.modelSelectedItemBy || {}) }
+      variables[key] = values
+
+      const result: any = await useGraphQlOperation('Query', props.modelSelectedItem, queryFields.value,variables,props.cache)
+      selectedItemsObject.value = castArray(result)
+    } catch (_error) {
+      void _error
+    }
+  } else {
+    selectedItemsObject.value = alreadyInObject
+  }
+
+  emit("update:selectedObject",(props.multiple) ? selectedItemsObject.value : selectedItemsObject.value[0])
 }
 
-watchDebounced(searchData, fuzzySearch, { debounce: 1000, maxWait: 5000 })
+watch(
+  () => [
+    props.modelName,
+    props.serverSearch,
+    props.serverSearchKey,
+    props.cache,
+    props.modelBy,
+    queryFields.value,
+  ],
+  () => loadItems(),
+  { immediate: true, deep: true },
+)
 
-const computedItems = computed(()=>{
-  let sortByField = (!props.sortBy || typeof props.sortBy === "string") ?  [props.sortBy || ((props.showCode) ? props.itemValue : props.itemTitle)] : props.sortBy
+watchDebounced(searchData,()=>{
+  if (props.serverSearch) loadItems()
+  else applyFuzzy()
+},{ debounce: props.serverSearch ? props.serverSearchDebounce : 300, maxWait: 1500 })
 
-  const baseItems = props.fuzzy && !isEmpty(searchData.value)
+watch(()=>modelItems.value, () => {
+  if (!props.serverSearch) applyFuzzy()
+})
+
+watch(()=>props.modelValue,()=>{
+  syncSelectedFromModelValue()
+},{ immediate: true, deep: true })
+
+const computedItems = computed(() => {
+  const sortByField = !props.sortBy || typeof props.sortBy === 'string'
+      ? [props.sortBy || (props.showCode ? props.itemValue : props.itemTitle)]
+      : props.sortBy
+
+  const baseItems = (props.fuzzy  || (props.serverSearch && !props.searchSearchSort)) && !isEmpty(searchData.value)
       ? items.value
       : sortBy(items.value, sortByField)
 
-  return baseItems.map(item => ({
-    ...item,
-    [props.itemTitle]: props.showCode
-        ? `${item[props.itemValue]}-${item[props.itemTitle]}`
-        : item[props.itemTitle]
-  }))
+  for (const selectedItem of selectedItemsObject.value || []) {
+    if (!baseItems.find(existingItem => existingItem[props.itemValue] === selectedItem[props.itemValue])) {
+      baseItems.push(selectedItem)
+    }
+  }
+
+  return baseItems
 })
 </script>
 
 <template>
   <v-autocomplete
+      v-model="selectedItems"
       v-model:search="searchData"
       v-bind="$attrs"
       :items="computedItems"
-      :no-filter="props.fuzzy"
+      :filter-keys="computedFilterKeys"
+      :no-filter="props.fuzzy || props.serverSearch"
       :item-title="props.itemTitle"
       :item-value="props.itemValue"
       :loading="isLoading"
+      :placeholder="computedPlaceholder"
+      :no-data-text="computedNoDataText"
+      :multiple="props.multiple"
   >
     <!-- @ts-ignore -->
     <template
@@ -126,21 +253,28 @@ const computedItems = computed(()=>{
         :key="index"
         #[name]="slotData"
     >
-      <slot
-          :name="name"
-          v-bind="((slotData || {}) as object)"
-      />
+      <slot :name="name" v-bind="((slotData || {}) as object)" />
     </template>
-    <template v-if="!$slots.item" #item="{ props, item }">
-      <v-list-item v-bind="props" :title="(item as Record<string, any>)[String(props.itemTitle)]" />
+
+    <template
+        v-if="!$slots.item"
+        #item="{ props, item }"
+    >
+      <v-list-item
+          v-bind="props"
+          :title="(showCode ? item.value+'-' : '')+item.title"
+      />
     </template>
+
     <template
-        v-if="isErrorLoading"
-        #append
+        v-if="!$slots.selection && showCode"
+        #selection="{ item }"
     >
-      <v-icon color="error">
-        mdi mdi-alert
-      </v-icon>
+      {{item.value+'-'+item.title}}
+    </template>
+
+    <template v-if="isErrorLoading" #append>
+      <v-icon color="error">mdi mdi-alert</v-icon>
     </template>
   </v-autocomplete>
-</template>
+</template>

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/package.json

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