@ramathibodi/nuxt-commons 0.1.73 → 0.1.75

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

@@ -1,489 +1,497 @@
-<script lang="ts" setup>
-import {computed, nextTick, ref, useAttrs, useSlots, watch} from 'vue'
-import {VDataIterator} from 'vuetify/components/VDataIterator'
-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,
-})
-
-interface Props extends /* @vue-ignore */ InstanceType<typeof VDataIterator['$props']> {
-  title: string
-  noDataText?: string
-  dialogFullscreen?: boolean
-  initialData?: Record<string, any>
-  toolbarColor?: string
-  importable?: boolean
-  exportable?: boolean
-  insertable?: boolean
-  searchable?: boolean
-  search?: string
-
-  viewSwitch?: boolean
-  viewSwitchMultiple?: boolean
-
-  cols?: string | number | boolean
-  xxl?: string | number | boolean
-  xl?: string | number | boolean
-  lg?: string | number | boolean
-  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>(), {
-  noDataText: 'ไม่พบข้อมูล',
-  dialogFullscreen: false,
-  toolbarColor: 'primary',
-  importable: false,
-  exportable: false,
-  insertable: true,
-  searchable: true,
-  modelKey: 'id',
-  modelBy: undefined,
-  fields: () => [],
-
-  viewSwitch: false,
-  viewSwitchMultiple:false,
-
-  cols: 12,
-  xxl: false,
-  xl: false,
-  lg: 2,
-  md: 4,
-  sm: 6,
-  itemsPerPage: 12,
-})
-
-const attrs = useAttrs()
-const plainAttrs = computed(() => {
-  const returnAttrs = omit(attrs, ['modelValue', 'onUpdate:modelValue'])
-  if (props.headers) returnAttrs['headers'] = props.headers
-  return returnAttrs
-})
-const slots = useSlots()
-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)
-
-const { items, itemsLength,
-  search, setSearch, currentOptions,
-  canServerPageable, canServerSearch, canCreate, canUpdate, canDelete,
-  createItem, importItems, updateItem, deleteItem,
-  loadItems, reload,
-  isLoading } = useGraphqlModel(props)
-
-function openDialog(item?: object) {
-  currentItem.value = item
-  nextTick(() => {
-    isDialogOpen.value = true
-  })
-}
-
-const itemsPerPageInternal = ref<string | number>()
-watch(() => props.itemsPerPage, (newValue) => {
-  if (newValue.toString().toLowerCase() == 'all') itemsPerPageInternal.value = '-1'
-  else if (newValue) itemsPerPageInternal.value = newValue
-}, { immediate: true })
-
-type SortItem = { key: string, order?: boolean | 'asc' | 'desc' }
-const sortBy = ref<SortItem[]>()
-
-const pageCount = computed(() => {
-  if (!itemsPerPageInternal.value || itemsPerPageInternal.value == 'All' || itemsPerPageInternal.value == '-1' || Number(itemsPerPageInternal.value) <= 0) return 1
-  else return Math.ceil(itemsLength.value / Number(itemsPerPageInternal.value))
-})
-const currentPage = ref<number>(1)
-
-watch([currentPage, itemsPerPageInternal, sortBy], () => {
-  if (canServerPageable.value) {
-    loadItems({
-      page: currentPage.value,
-      itemsPerPage: (!itemsPerPageInternal.value || itemsPerPageInternal.value == 'All' || Number(itemsPerPageInternal.value) <= 0) ? '-1' : itemsPerPageInternal.value,
-      sortBy: sortBy.value,
-    })
-  }
-}, { 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(() => {
-  return Object.assign({}, props.initialData, props.modelBy)
-})
-
-const computedSkeletonPerPage = computed(() => {
-  if (!itemsPerPageInternal.value || itemsPerPageInternal.value == 'All' || Number(itemsPerPageInternal.value) <= 0) return 1
-  else return Number(itemsPerPageInternal.value)
-})
-
-watch(()=>props.search,()=>{
-  search.value = props.search
-},{immediate:true})
-
-defineExpose({ reload,operation })
-</script>
-
-<template>
-  <v-card>
-    <v-data-iterator
-      v-bind="plainAttrs"
-      v-model:items-per-page="itemsPerPageInternal"
-      v-model:sort-by="sortBy"
-      :items="items"
-      :item-value="modelKey"
-      :search="search"
-      :loading="isLoading"
-    >
-      <template #default="defaultProps" v-if="viewType.includes('iterator')">
-        <slot
-          v-bind="defaultProps"
-          :operation="operation"
-        >
-          <v-container fluid>
-            <v-row>
-              <v-col
-                v-for="(item, index) in defaultProps.items"
-                :key="index"
-                :cols="cols"
-                :sm="sm"
-                :md="md"
-                :lg="lg"
-                :xl="xl"
-                :xxl="xxl"
-              >
-                <slot
-                  name="item"
-                  :item="item"
-                  :operation="operation"
-                />
-              </v-col>
-            </v-row>
-          </v-container>
-        </slot>
-      </template>
-      <template #loader="loaderProps" v-if="viewType.includes('iterator')">
-        <slot
-          name="loader"
-          v-bind="loaderProps"
-        >
-          <v-container fluid>
-            <v-row>
-              <v-col
-                v-for="key in computedSkeletonPerPage"
-                :key="key"
-                :cols="cols"
-                :sm="sm"
-                :md="md"
-                :lg="lg"
-                :xl="xl"
-                :xxl="xxl"
-              >
-                <slot name="loaderItem">
-                  <v-skeleton-loader
-                    type="paragraph"
-                  />
-                </slot>
-              </v-col>
-            </v-row>
-          </v-container>
-        </slot>
-      </template>
-      <template #header="headerProps">
-        <slot
-          name="header"
-          v-bind="headerProps"
-          :items="items"
-          :operation="operation"
-        >
-          <VToolbar :color="toolbarColor">
-            <v-row
-              justify="end"
-              class="ma-1"
-              dense
-              no-gutters
-              align="center"
-            >
-              <v-col cols="7">
-                <VToolbarTitle class="pl-3">
-                  <slot
-                    name="title"
-                    :reload="reload"
-                  >
-                    {{ title }}
-                    <v-icon
-                      size="small"
-                      @click="reload"
-                    >
-                      mdi mdi-refresh
-                    </v-icon>
-                  </slot>
-                </VToolbarTitle>
-              </v-col>
-              <v-col cols="5">
-                <slot name="search" :items="items" :operation="operation" v-if="props.searchable">
-                  <VTextField
-                    v-model="search"
-                    class="justify-end w-100"
-                    density="compact"
-                    hide-details
-                    placeholder="ค้นหา"
-                    clearable
-                    variant="solo"
-                  />
-                </slot>
-              </v-col>
-            </v-row>
-
-            <VToolbarItems>
-              <slot name="toolbarItems" :items="items" :operation="operation"/>
-              <ImportCSV
-                  v-if="props.importable && canCreate && props.insertable"
-                  icon="mdi mdi-file-upload"
-                  variant="flat"
-                  :color="toolbarColor"
-                  @import="importItems"
-              />
-              <ExportCSV
-                  v-if="props.exportable && items.length"
-                  icon="mdi mdi-file-download"
-                  variant="flat"
-                  :file-name="title"
-                  :model-value="items"
-                  :color="toolbarColor"
-              />
-              <VBtn
-                v-if="canCreate && props.insertable"
-                :color="toolbarColor"
-                prepend-icon="mdi mdi-plus"
-                variant="flat"
-                @click="openDialog()"
-              >
-                add
-              </VBtn>
-              <v-row align="center" class="mr-2 ml-2" v-if="viewSwitch">
-                <v-btn-toggle v-model="viewType" :multiple="viewSwitchMultiple">
-                  <v-btn icon="mdi mdi-view-grid-outline" value="iterator"></v-btn>
-                  <v-btn icon="mdi mdi-table-large" value="table"></v-btn>
-                </v-btn-toggle>
-              </v-row>
-            </VToolbarItems>
-          </VToolbar>
-        </slot>
-        <template v-if="viewType.includes('table')">
-          <v-data-table-server
-              v-if="canServerPageable"
-              v-bind="plainAttrs"
-              color="primary"
-              :items="items"
-              :items-length="itemsLength"
-              :item-value="props.modelKey"
-              :search="search"
-              :loading="isLoading"
-              @update:options="loadItems"
-          >
-            <!-- @ts-ignore -->
-            <template
-                v-for="(_, name, index) in (tableSlots as {})"
-                :key="index"
-                #[name]="slotData"
-            >
-              <slot
-                  :name="name"
-                  v-bind="((slotData || {}) as object)"
-                  :operation="operation"
-              />
-            </template>
-            <template
-                v-if="!$slots['item.action']"
-                #item.action="{ item }"
-            >
-              <v-btn
-                  v-if="canUpdate"
-                  variant="flat"
-                  density="compact"
-                  icon="mdi mdi-note-edit"
-                  @click="openDialog(item)"
-              />
-              <v-btn
-                  v-if="canDelete"
-                  variant="flat"
-                  density="compact"
-                  icon="mdi mdi-delete"
-                  @click="deleteItem(item)"
-              />
-            </template>
-          </v-data-table-server>
-          <v-data-table
-              v-else
-              v-bind="plainAttrs"
-              color="primary"
-              :items="items"
-              :item-value="props.modelKey"
-              :search="search"
-              :loading="isLoading"
-          >
-            <!-- @ts-ignore -->
-            <template
-                v-for="(_, name, index) in (tableSlots as {})"
-                :key="index"
-                #[name]="slotData"
-            >
-              <slot
-                  :name="name"
-                  v-bind="((slotData || {}) as object)"
-                  :operation="operation"
-              />
-            </template>
-            <template
-                v-if="!$slots['item.action']"
-                #item.action="{ item }"
-            >
-              <v-btn
-                  v-if="canUpdate"
-                  variant="flat"
-                  density="compact"
-                  icon="mdi mdi-note-edit"
-                  @click="openDialog(item)"
-              />
-              <v-btn
-                  v-if="canDelete"
-                  variant="flat"
-                  density="compact"
-                  icon="mdi mdi-delete"
-                  @click="deleteItem(item)"
-              />
-            </template>
-          </v-data-table>
-        </template>
-      </template>
-      <template #footer="footerProps" v-if="viewType.includes('iterator')">
-        <v-container fluid>
-          <v-row
-            align-content="center"
-            justify="end"
-            dense
-          >
-            <v-spacer />
-            <v-select
-              v-model="itemsPerPageInternal"
-              density="compact"
-              variant="outlined"
-              :items="[6, 12, 18, 24, 30, { title: 'All', value: '-1' }]"
-              min-width="220"
-              max-width="220"
-              hide-details
-            >
-              <template #prepend>
-                Items per page:
-              </template>
-            </v-select>
-            <v-pagination
-              v-if="!canServerPageable"
-              v-model="currentPage"
-              density="compact"
-              :length="footerProps.pageCount"
-              total-visible="6"
-              show-first-last-page
-              @first="footerProps.setPage(1)"
-              @last="footerProps.setPage(footerProps.pageCount)"
-              @next="footerProps.nextPage"
-              @prev="footerProps.prevPage"
-              @update:model-value="footerProps.setPage"
-            />
-            <v-pagination
-              v-else
-              v-model="currentPage"
-              density="compact"
-              :length="pageCount"
-              total-visible="6"
-              show-first-last-page
-            />
-          </v-row>
-        </v-container>
-      </template>
-    </v-data-iterator>
-    <FormDialog
-      v-model="isDialogOpen"
-      :title="title"
-      :fullscreen="dialogFullscreen"
-      :initial-data="computedInitialData"
-      :form-data="currentItem"
-      @create="createItem"
-      @update="updateItem"
-    >
-      <template #default="slotData">
-        <slot
-          name="form"
-          v-bind="slotData"
-        />
-      </template>
-    </FormDialog>
-  </v-card>
-</template>
+<script lang="ts" setup>
+/**
+ * ModelIterator connects model metadata to reusable selection, labeling, iterator, or table UI patterns.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import {computed, nextTick, ref, useAttrs, useSlots, watch} from 'vue'
+import {VDataIterator} from 'vuetify/components/VDataIterator'
+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,
+})
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof VDataIterator['$props']> {
+  title: string // Toolbar title for this model-backed iterator/table block.
+  noDataText?: string // Empty-state message shown when model query has no results.
+  dialogFullscreen?: boolean // Opens create/edit dialog fullscreen by default.
+  initialData?: Record<string, any> // Default values merged with `modelBy` before opening create dialog.
+  toolbarColor?: string // Toolbar/action color theme token.
+  importable?: boolean // Enables import action for creating many model rows at once.
+  exportable?: boolean // Enables export action for current model result set.
+  insertable?: boolean // Enables create action for new model rows.
+  searchable?: boolean // Shows search input and updates GraphQL model search state.
+  search?: string // External search value synced into internal search ref via watcher.
+
+  viewSwitch?: boolean // Displays control for switching between card iterator and table presentations.
+  viewSwitchMultiple?: boolean // Allows multiple selected view chips when switch UI supports it.
+
+  cols?: string | number | boolean // Base columns used by iterator card grid.
+  xxl?: string | number | boolean // Card grid columns at `xxl` breakpoint.
+  xl?: string | number | boolean // Card grid columns at `xl` breakpoint.
+  lg?: string | number | boolean // Card grid columns at `lg` breakpoint.
+  md?: string | number | boolean // Card grid columns at `md` breakpoint.
+  sm?: string | number | boolean // Card grid columns at `sm` breakpoint.
+  itemsPerPage?: string | number // Items per page for iterator/table pagination (`all` supported).
+
+  preferTable?: string | number | boolean // Auto view strategy: always table (`true`) or table after N items (number).
+  preferTableXxl?: string | number | boolean // `xxl` override for `preferTable`.
+  preferTableXl?: string | number | boolean // `xl` override for `preferTable`.
+  preferTableLg?: string | number | boolean // `lg` override for `preferTable`.
+  preferTableMd?: string | number | boolean // `md` override for `preferTable`.
+  preferTableSm?: string | number | boolean // `sm` override for `preferTable`.
+}
+
+/**
+ * Public props accepted by ModelIterator.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<Props & GraphqlModelProps>(), {
+  noDataText: 'ไม่พบข้อมูล',
+  dialogFullscreen: false,
+  toolbarColor: 'primary',
+  importable: false,
+  exportable: false,
+  insertable: true,
+  searchable: true,
+  modelKey: 'id',
+  modelBy: undefined,
+  fields: () => [],
+
+  viewSwitch: false,
+  viewSwitchMultiple:false,
+
+  cols: 12,
+  xxl: false,
+  xl: false,
+  lg: 2,
+  md: 4,
+  sm: 6,
+  itemsPerPage: 12,
+})
+
+const attrs = useAttrs()
+const plainAttrs = computed(() => {
+  const returnAttrs = omit(attrs, ['modelValue', 'onUpdate:modelValue'])
+  if (props.headers) returnAttrs['headers'] = props.headers
+  return returnAttrs
+})
+const slots = useSlots()
+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)
+
+const { items, itemsLength,
+  search, setSearch, currentOptions,
+  canServerPageable, canServerSearch, canCreate, canUpdate, canDelete,
+  createItem, importItems, updateItem, deleteItem,
+  loadItems, reload,
+  isLoading } = useGraphqlModel(props)
+
+function openDialog(item?: object) {
+  currentItem.value = item
+  nextTick(() => {
+    isDialogOpen.value = true
+  })
+}
+
+const itemsPerPageInternal = ref<string | number>()
+watch(() => props.itemsPerPage, (newValue) => {
+  if (newValue.toString().toLowerCase() == 'all') itemsPerPageInternal.value = '-1'
+  else if (newValue) itemsPerPageInternal.value = newValue
+}, { immediate: true })
+
+type SortItem = { key: string, order?: boolean | 'asc' | 'desc' }
+const sortBy = ref<SortItem[]>()
+
+const pageCount = computed(() => {
+  if (!itemsPerPageInternal.value || itemsPerPageInternal.value == 'All' || itemsPerPageInternal.value == '-1' || Number(itemsPerPageInternal.value) <= 0) return 1
+  else return Math.ceil(itemsLength.value / Number(itemsPerPageInternal.value))
+})
+const currentPage = ref<number>(1)
+
+watch([currentPage, itemsPerPageInternal, sortBy], () => {
+  if (canServerPageable.value) {
+    loadItems({
+      page: currentPage.value,
+      itemsPerPage: (!itemsPerPageInternal.value || itemsPerPageInternal.value == 'All' || Number(itemsPerPageInternal.value) <= 0) ? '-1' : itemsPerPageInternal.value,
+      sortBy: sortBy.value,
+    })
+  }
+}, { 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(() => {
+  return Object.assign({}, props.initialData, props.modelBy)
+})
+
+const computedSkeletonPerPage = computed(() => {
+  if (!itemsPerPageInternal.value || itemsPerPageInternal.value == 'All' || Number(itemsPerPageInternal.value) <= 0) return 1
+  else return Number(itemsPerPageInternal.value)
+})
+
+watch(()=>props.search,()=>{
+  search.value = props.search
+},{immediate:true})
+
+defineExpose({ reload,operation })
+</script>
+
+<template>
+  <v-card>
+    <v-data-iterator
+      v-bind="plainAttrs"
+      v-model:items-per-page="itemsPerPageInternal"
+      v-model:sort-by="sortBy"
+      :items="items"
+      :item-value="modelKey"
+      :search="search"
+      :loading="isLoading"
+    >
+      <template #default="defaultProps" v-if="viewType.includes('iterator')">
+        <slot
+          v-bind="defaultProps"
+          :operation="operation"
+        >
+          <v-container fluid>
+            <v-row>
+              <v-col
+                v-for="(item, index) in defaultProps.items"
+                :key="index"
+                :cols="cols"
+                :sm="sm"
+                :md="md"
+                :lg="lg"
+                :xl="xl"
+                :xxl="xxl"
+              >
+                <slot
+                  name="item"
+                  :item="item"
+                  :operation="operation"
+                />
+              </v-col>
+            </v-row>
+          </v-container>
+        </slot>
+      </template>
+      <template #loader="loaderProps" v-if="viewType.includes('iterator')">
+        <slot
+          name="loader"
+          v-bind="loaderProps"
+        >
+          <v-container fluid>
+            <v-row>
+              <v-col
+                v-for="key in computedSkeletonPerPage"
+                :key="key"
+                :cols="cols"
+                :sm="sm"
+                :md="md"
+                :lg="lg"
+                :xl="xl"
+                :xxl="xxl"
+              >
+                <slot name="loaderItem">
+                  <v-skeleton-loader
+                    type="paragraph"
+                  />
+                </slot>
+              </v-col>
+            </v-row>
+          </v-container>
+        </slot>
+      </template>
+      <template #header="headerProps">
+        <slot
+          name="header"
+          v-bind="headerProps"
+          :items="items"
+          :operation="operation"
+        >
+          <VToolbar :color="toolbarColor">
+            <v-row
+              justify="end"
+              class="ma-1"
+              dense
+              no-gutters
+              align="center"
+            >
+              <v-col cols="7">
+                <VToolbarTitle class="pl-3">
+                  <slot
+                    name="title"
+                    :reload="reload"
+                  >
+                    {{ title }}
+                    <v-icon
+                      size="small"
+                      @click="reload"
+                    >
+                      mdi mdi-refresh
+                    </v-icon>
+                  </slot>
+                </VToolbarTitle>
+              </v-col>
+              <v-col cols="5">
+                <slot name="search" :items="items" :operation="operation" v-if="props.searchable">
+                  <VTextField
+                    v-model="search"
+                    class="justify-end w-100"
+                    density="compact"
+                    hide-details
+                    placeholder="ค้นหา"
+                    clearable
+                    variant="solo"
+                  />
+                </slot>
+              </v-col>
+            </v-row>
+
+            <VToolbarItems>
+              <slot name="toolbarItems" :items="items" :operation="operation"/>
+              <ImportCSV
+                  v-if="props.importable && canCreate && props.insertable"
+                  icon="mdi mdi-file-upload"
+                  variant="flat"
+                  :color="toolbarColor"
+                  @import="importItems"
+              />
+              <ExportCSV
+                  v-if="props.exportable && items.length"
+                  icon="mdi mdi-file-download"
+                  variant="flat"
+                  :file-name="title"
+                  :model-value="items"
+                  :color="toolbarColor"
+              />
+              <VBtn
+                v-if="canCreate && props.insertable"
+                :color="toolbarColor"
+                prepend-icon="mdi mdi-plus"
+                variant="flat"
+                @click="openDialog()"
+              >
+                add
+              </VBtn>
+              <v-row align="center" class="mr-2 ml-2" v-if="viewSwitch">
+                <v-btn-toggle v-model="viewType" :multiple="viewSwitchMultiple">
+                  <v-btn icon="mdi mdi-view-grid-outline" value="iterator"></v-btn>
+                  <v-btn icon="mdi mdi-table-large" value="table"></v-btn>
+                </v-btn-toggle>
+              </v-row>
+            </VToolbarItems>
+          </VToolbar>
+        </slot>
+        <template v-if="viewType.includes('table')">
+          <v-data-table-server
+              v-if="canServerPageable"
+              v-bind="plainAttrs"
+              color="primary"
+              :items="items"
+              :items-length="itemsLength"
+              :item-value="props.modelKey"
+              :search="search"
+              :loading="isLoading"
+              @update:options="loadItems"
+          >
+            <!-- @ts-ignore -->
+            <template
+                v-for="(_, name, index) in (tableSlots as {})"
+                :key="index"
+                #[name]="slotData"
+            >
+              <slot
+                  :name="name"
+                  v-bind="((slotData || {}) as object)"
+                  :operation="operation"
+              />
+            </template>
+            <template
+                v-if="!$slots['item.action']"
+                #item.action="{ item }"
+            >
+              <v-btn
+                  v-if="canUpdate"
+                  variant="flat"
+                  density="compact"
+                  icon="mdi mdi-note-edit"
+                  @click="openDialog(item)"
+              />
+              <v-btn
+                  v-if="canDelete"
+                  variant="flat"
+                  density="compact"
+                  icon="mdi mdi-delete"
+                  @click="deleteItem(item)"
+              />
+            </template>
+          </v-data-table-server>
+          <v-data-table
+              v-else
+              v-bind="plainAttrs"
+              color="primary"
+              :items="items"
+              :item-value="props.modelKey"
+              :search="search"
+              :loading="isLoading"
+          >
+            <!-- @ts-ignore -->
+            <template
+                v-for="(_, name, index) in (tableSlots as {})"
+                :key="index"
+                #[name]="slotData"
+            >
+              <slot
+                  :name="name"
+                  v-bind="((slotData || {}) as object)"
+                  :operation="operation"
+              />
+            </template>
+            <template
+                v-if="!$slots['item.action']"
+                #item.action="{ item }"
+            >
+              <v-btn
+                  v-if="canUpdate"
+                  variant="flat"
+                  density="compact"
+                  icon="mdi mdi-note-edit"
+                  @click="openDialog(item)"
+              />
+              <v-btn
+                  v-if="canDelete"
+                  variant="flat"
+                  density="compact"
+                  icon="mdi mdi-delete"
+                  @click="deleteItem(item)"
+              />
+            </template>
+          </v-data-table>
+        </template>
+      </template>
+      <template #footer="footerProps" v-if="viewType.includes('iterator')">
+        <v-container fluid>
+          <v-row
+            align-content="center"
+            justify="end"
+            dense
+          >
+            <v-spacer />
+            <v-select
+              v-model="itemsPerPageInternal"
+              density="compact"
+              variant="outlined"
+              :items="[6, 12, 18, 24, 30, { title: 'All', value: '-1' }]"
+              min-width="220"
+              max-width="220"
+              hide-details
+            >
+              <template #prepend>
+                Items per page:
+              </template>
+            </v-select>
+            <v-pagination
+              v-if="!canServerPageable"
+              v-model="currentPage"
+              density="compact"
+              :length="footerProps.pageCount"
+              total-visible="6"
+              show-first-last-page
+              @first="footerProps.setPage(1)"
+              @last="footerProps.setPage(footerProps.pageCount)"
+              @next="footerProps.nextPage"
+              @prev="footerProps.prevPage"
+              @update:model-value="footerProps.setPage"
+            />
+            <v-pagination
+              v-else
+              v-model="currentPage"
+              density="compact"
+              :length="pageCount"
+              total-visible="6"
+              show-first-last-page
+            />
+          </v-row>
+        </v-container>
+      </template>
+    </v-data-iterator>
+    <FormDialog
+      v-model="isDialogOpen"
+      :title="title"
+      :fullscreen="dialogFullscreen"
+      :initial-data="computedInitialData"
+      :form-data="currentItem"
+      @create="createItem"
+      @update="updateItem"
+    >
+      <template #default="slotData">
+        <slot
+          name="form"
+          v-bind="slotData"
+        />
+      </template>
+    </FormDialog>
+  </v-card>
+</template>