@ramathibodi/nuxt-commons 0.1.13 → 0.1.15

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

@@ -1,240 +1,242 @@
-<script lang="ts" setup>
-import {computed, nextTick, ref, useAttrs} from 'vue'
-import {VDataTable} from 'vuetify/components/VDataTable'
-import {omit} from 'lodash-es'
-import type {GraphqlModelProps} from '../../composables/graphqlModel'
-import {useGraphqlModel} from '../../composables/graphqlModel'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props']> {
-  title: string
-  noDataText?: string
-  dialogFullscreen?: boolean
-  initialData?: Record<string, any>
-  toolbarColor?: string
-  importable?: boolean
-  exportable?: boolean
-}
-
-const props = withDefaults(defineProps<Props & GraphqlModelProps>(), {
-  noDataText: 'ไม่พบข้อมูล',
-  dialogFullscreen: false,
-  toolbarColor: 'primary',
-  importable: true,
-  exportable: true,
-  modelKey: 'id',
-  modelBy: undefined,
-  fields: () => [],
-})
-
-const attrs = useAttrs()
-const plainAttrs = computed(() => {
-  const returnAttrs = omit(attrs, ['modelValue', 'onUpdate:modelValue'])
-  if (props.headers) returnAttrs['headers'] = props.headers
-  return returnAttrs
-})
-const currentItem = ref<Record<string, any> | undefined>(undefined)
-const isDialogOpen = ref<boolean>(false)
-
-const { items, itemsLength,
-  search,
-  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 operation = ref({ openDialog, createItem, importItems, updateItem, deleteItem, reload, canServerPageable, canServerSearch, canCreate, canUpdate, canDelete })
-
-const computedInitialData = computed(() => {
-  return Object.assign({}, props.initialData, props.modelBy)
-})
-
-defineExpose({ reload })
-</script>
-
-<template>
-  <v-card>
-    <slot
-      name="header"
-      :items="items"
-      :search="search"
-      :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">
-              <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" />
-          <ImportCSV
-            v-if="props.importable"
-            icon="mdi mdi-file-upload"
-            variant="flat"
-            @import="importItems"
-          />
-          <ExportCSV
-            v-if="props.exportable && items.length"
-            icon="mdi mdi-file-download"
-            variant="flat"
-            :file-name="title"
-            :model-value="items"
-          />
-          <VBtn
-            v-if="canCreate"
-            :color="toolbarColor"
-            prepend-icon="mdi mdi-plus"
-            variant="flat"
-            @click="openDialog()"
-          >
-            add
-          </VBtn>
-        </VToolbarItems>
-      </VToolbar>
-    </slot>
-    <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 ($slots 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 ($slots 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>
-    <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>
+import {computed, nextTick, ref, useAttrs} from 'vue'
+import {VDataTable} from 'vuetify/components/VDataTable'
+import {omit} from 'lodash-es'
+import type {GraphqlModelProps} from '../../composables/graphqlModel'
+import {useGraphqlModel} from '../../composables/graphqlModel'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props']> {
+  title: string
+  noDataText?: string
+  dialogFullscreen?: boolean
+  initialData?: Record<string, any>
+  toolbarColor?: string
+  importable?: boolean
+  exportable?: boolean
+}
+
+const props = withDefaults(defineProps<Props & GraphqlModelProps>(), {
+  noDataText: 'ไม่พบข้อมูล',
+  dialogFullscreen: false,
+  toolbarColor: 'primary',
+  importable: true,
+  exportable: true,
+  modelKey: 'id',
+  modelBy: undefined,
+  fields: () => [],
+})
+
+const attrs = useAttrs()
+const plainAttrs = computed(() => {
+  const returnAttrs = omit(attrs, ['modelValue', 'onUpdate:modelValue'])
+  if (props.headers) returnAttrs['headers'] = props.headers
+  return returnAttrs
+})
+const currentItem = ref<Record<string, any> | undefined>(undefined)
+const isDialogOpen = ref<boolean>(false)
+
+const { items, itemsLength,
+  search,
+  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 operation = ref({ openDialog, createItem, importItems, updateItem, deleteItem, reload, canServerPageable, canServerSearch, canCreate, canUpdate, canDelete })
+
+const computedInitialData = computed(() => {
+  return Object.assign({}, props.initialData, props.modelBy)
+})
+
+defineExpose({ reload })
+</script>
+
+<template>
+  <v-card>
+    <slot
+      name="header"
+      :items="items"
+      :search="search"
+      :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">
+              <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" />
+          <ImportCSV
+            v-if="props.importable"
+            icon="mdi mdi-file-upload"
+            variant="flat"
+            @import="importItems"
+            :color="toolbarColor"
+          />
+          <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"
+            :color="toolbarColor"
+            prepend-icon="mdi mdi-plus"
+            variant="flat"
+            @click="openDialog()"
+          >
+            add
+          </VBtn>
+        </VToolbarItems>
+      </VToolbar>
+    </slot>
+    <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 ($slots 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 ($slots 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>
+    <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>