@ramathibodi/nuxt-commons 0.1.54 → 0.1.55

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.54",
+  "version": "0.1.55",
   "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/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.55",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",