@ramathibodi/nuxt-commons 0.1.73 → 0.1.75

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

@@ -1,379 +1,391 @@
-<script lang="ts" setup>
-import {VDataTable} from 'vuetify/components/VDataTable'
-import {VInput} from 'vuetify/components/VInput'
-import {computed, defineOptions,defineExpose, nextTick, ref, useAttrs, watch, useTemplateRef} from 'vue'
-import {omit} from 'lodash-es'
-import {useDialog} from "../../composables/dialog"
-import type {FormDialogCallback} from '../../types/formDialog'
-import { useLocalStorageModel, type PersistSlimProps } from '../../composables/localStorageModel'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props']> {
-  title: string
-  noDataText?: string
-  modelValue?: Record<string, any>[]
-  modelKey?: string
-  dialogWidth?: string | number
-  dialogMaxWidth?: string | number
-  dialogHeight?: string | number
-  dialogMaxHeight?: string | number
-  dialogFullscreen?: boolean
-  initialData?: Record<string, any>
-  toolbarColor?: string
-  importable?: boolean
-  exportable?: boolean
-  insertable?: boolean
-  searchable?: boolean
-  inputPad?: boolean
-  inputPadOnly?: boolean
-  saveAndStay?: boolean
-  stringFields?: Array<string>
-}
-
-const props = withDefaults(defineProps<Props & PersistSlimProps>(), {
-  noDataText: 'ไม่พบข้อมูล',
-  dialogFullscreen: false,
-  modelKey: 'id',
-  toolbarColor: 'primary',
-  importable: true,
-  exportable: true,
-  insertable: true,
-  searchable: true,
-  inputPad: false,
-  inputPadOnly: false,
-  saveAndStay: false,
-  stringFields: ()=>[],
-})
-
-const emit = defineEmits(['update:modelValue','open:dialog','close:dialog'])
-const attrs = useAttrs()
-const plainAttrs = computed(() => {
-  return omit(attrs, ['modelValue', 'onUpdate:modelValue'])
-})
-
-const inputRef = useTemplateRef<VInput>("inputRef")
-
-const items = ref<Record<string, any>[]>([])
-const search = ref<string>()
-const currentItem = ref<Record<string, any> | undefined>(undefined)
-
-useLocalStorageModel(items,props)
-
-function setSearch(keyword: string) {
-  search.value = keyword
-}
-
-const isDialogOpen = ref<boolean>(false)
-
-watch(() => props.modelValue, (newValue) => {
-  if (!Array.isArray(newValue) || !newValue.every(item => typeof item === 'object')) {
-    items.value = []
-  }
-  else {
-    let maxKey = 0
-
-    newValue.forEach((item) => {
-      if (!item.hasOwnProperty(props.modelKey)) {
-        maxKey = Math.max(maxKey, ...newValue.map(i => i[props.modelKey] || 0))
-        item[props.modelKey] = maxKey + 1
-      }
-    })
-
-    items.value = newValue
-  }
-}, { immediate: true })
-
-watch(items, (newValue) => {
-  emit('update:modelValue', newValue)
-}, { deep: true })
-
-
-function createItem(item: Record<string, any>, callback?: FormDialogCallback) {
-  if (items.value.length > 0) item[props.modelKey] = Math.max(...items.value.map(i => i[props.modelKey] || 0)) + 1
-  else item[props.modelKey] = 1
-
-  items.value.push(item)
-
-  if (callback && callback.setData) callback.setData(item)
-  if (callback) callback.done()
-}
-
-function importItems(importItems: Record<string, any>[], callback?: FormDialogCallback) {
-  importItems.forEach((item) => {
-    createItem(item)
-  })
-  if (callback) callback.done()
-}
-
-function updateItem(newItem: Record<string, any>, callback?: FormDialogCallback) {
-  const index = items.value.findIndex(item => item[props.modelKey] === newItem[props.modelKey])
-
-  if (index !== -1) {
-    items.value[index] = newItem
-  }
-
-  if (callback && callback.setData) callback.setData(newItem)
-  if (callback) callback.done()
-}
-
-function moveUpItem(currentItem: Record<string, any>, callback?: FormDialogCallback) {
-  const index = items.value.findIndex(item => item[props.modelKey] === currentItem[props.modelKey])
-
-  if (index > 0) {
-    const temp = items.value[index - 1]
-    items.value[index - 1] = items.value[index]
-    items.value[index] = temp
-  }
-
-  if (callback) callback.done()
-}
-
-function moveDownItem(currentItem: Record<string, any>, callback?: FormDialogCallback) {
-  const index = items.value.findIndex(item => item[props.modelKey] === currentItem[props.modelKey])
-
-  if (index >= 0 && index < items.value.length - 1) {
-    const temp = items.value[index + 1]
-    items.value[index + 1] = items.value[index]
-    items.value[index] = temp
-  }
-
-  if (callback) callback.done()
-}
-
-function moveToItem(currentItem: Record<string, any>, callback?: FormDialogCallback) {
-  const index = items.value.findIndex(item => item[props.modelKey] === currentItem[props.modelKey]);
-
-  if (index !== -1) {
-    const newPosition = prompt("Enter the new position (0-based index):");
-    const parsedPosition = parseInt(<string>newPosition, 10);
-
-    if (isNaN(parsedPosition) || parsedPosition < 0 || parsedPosition >= items.value.length) {
-      alert("Invalid position entered. Please enter a number between 0 and " + (items.value.length - 1));
-      return
-    }
-
-    const [temp] = items.value.splice(index, 1);
-
-    items.value.splice(parsedPosition, 0, temp);
-  }
-
-  if (callback) callback.done();
-}
-
-async function deleteItem(deleteItem: Record<string, any>, callback?: FormDialogCallback) {
-  const index = items.value.findIndex(item => item[props.modelKey] === deleteItem[props.modelKey])
-
-  if (index !== -1) {
-    let confirm = await useDialog().confirm({message: "Do you want to delete record?"})
-    if (confirm) {
-      items.value.splice(index, 1)
-      if (callback) callback.done()
-    }
-  }
-}
-
-function openDialog(item?: object) {
-  if (props.inputPadOnly) inputPadRef.value?.setOriginalData(item)
-  else {
-    currentItem.value = item
-    nextTick(() => {
-      isDialogOpen.value = true
-      emit('open:dialog',item)
-    })
-  }
-}
-const inputPadRef = ref()
-
-const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpItem, moveDownItem,moveToItem,setSearch })
-
-const isValid = computed(()=>{
-  return inputRef.value?.isValid
-})
-
-const errorMessages = computed(()=>{
-  return inputRef.value?.errorMessages
-})
-
-defineExpose({
-  errorMessages,
-  isValid,
-  reset: ()=>inputRef.value?.reset(),
-  resetValidation : ()=>inputRef.value?.resetValidation(),
-  validate : ()=>inputRef.value?.validate(),
-  operation,
-  items
-})
-</script>
-
-<template>
-  <v-input v-model="items" v-bind="plainAttrs" ref="inputRef">
-    <template #default="{isReadonly,isDisabled}">
-      <v-container fluid class="ma-0 pa-0">
-        <v-card>
-          <slot
-              name="header"
-              :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">
-                      {{ title }}
-                    </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 && !(isReadonly.value || isDisabled.value)"
-                    icon="mdi:mdi-file-upload"
-                    variant="flat"
-                    @import="importItems"
-                    :color="toolbarColor"
-                    :stringFields="props.stringFields"
-                />
-                <ExportCSV
-                    v-if="props.exportable && items.length && !(isReadonly.value || isDisabled.value)"
-                    icon="mdi:mdi-file-download"
-                    variant="flat"
-                    :file-name="title"
-                    :model-value="items"
-                    :color="toolbarColor"
-                    :stringFields="props.stringFields"
-                />
-                <VBtn
-                    v-if="props.insertable && !props.inputPadOnly && !(isReadonly.value || isDisabled.value)"
-                    :color="toolbarColor"
-                    prepend-icon="mdi:mdi-plus"
-                    variant="flat"
-                    @click="openDialog()"
-                >
-                  add
-                </VBtn>
-              </VToolbarItems>
-            </VToolbar>
-          </slot>
-          <v-data-table
-              v-bind="plainAttrs"
-              color="primary"
-              :items="items"
-              :search="search"
-          >
-            <!-- @ts-ignore -->
-            <template
-                v-for="(_, name, index) in ($slots as {})"
-                :key="index"
-                #[name]="slotData"
-            >
-              <slot
-                  :name="name"
-                  v-bind="((slotData || {}) as object)"
-                  :operation="operation"
-                  :isReadonly="isReadonly"
-                  :isDisabled="isDisabled"
-              />
-            </template>
-            <template
-                v-if="!$slots['item.operation'] && !(isReadonly.value || isDisabled.value)"
-                #item.operation="props"
-            >
-              <v-icon density="compact" :disabled="props.index==0" @click="moveUpItem(props.item)">mdi:mdi-arrow-up-thick</v-icon>
-              <v-icon density="compact" @click="moveToItem(props.item)">fa:fas fa-arrow-right-to-bracket</v-icon>
-              <v-icon density="compact" :disabled="props.index==items.length-1" @click="moveDownItem(props.item)">mdi:mdi-arrow-down-thick</v-icon>
-            </template>
-            <template
-                v-if="!$slots['item.action'] && !(isReadonly.value || isDisabled.value)"
-                #item.action="{ item }"
-            >
-              <v-btn
-                  variant="flat"
-                  density="compact"
-                  icon="mdi:mdi-note-edit"
-                  @click="openDialog(item)"
-              />
-              <v-btn
-                  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="initialData"
-              :form-data="currentItem"
-              @create="createItem"
-              @update="updateItem"
-              @afterLeave="emit('close:dialog')"
-              :saveAndStay="saveAndStay"
-              :width="dialogWidth"
-              :height="dialogHeight"
-              :max-width="dialogMaxWidth"
-              :max-height="dialogMaxHeight"
-              v-if="!props.inputPadOnly"
-          >
-            <template #default="slotData">
-              <slot
-                  name="form"
-                  v-bind="slotData"
-              />
-            </template>
-            <template #title="slotData">
-              <slot
-                  name="formTitle"
-                  v-bind="slotData"
-              />
-            </template>
-            <template #action="slotData">
-              <slot
-                  name="formAction"
-                  v-bind="slotData"
-              />
-            </template>
-          </FormDialog>
-        </v-card>
-        <slot name="inputPad" :operation="operation" :isReadonly="isReadonly" :isDisabled="isDisabled">
-          <v-sheet border rounded class="mt-1" v-if="inputPad && !(isReadonly.value || isDisabled.value)">
-            <form-action-pad ref="inputPadRef" :title="props.title" @create="createItem" @update="updateItem" :initial-data="initialData">
-              <template #default="slotData">
-                <slot
-                    name="form"
-                    v-bind="slotData"
-                />
-              </template>
-            </form-action-pad>
-          </v-sheet>
-        </slot>
-      </v-container>
-    </template>
-  </v-input>
-</template>
+<script lang="ts" setup>
+/**
+ * FormTable is a schema-driven form field component that binds model data, renders field UI, and emits normalized updates.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import {VDataTable} from 'vuetify/components/VDataTable'
+import {VInput} from 'vuetify/components/VInput'
+import {computed, defineOptions,defineExpose, nextTick, ref, useAttrs, watch, useTemplateRef} from 'vue'
+import {omit} from 'lodash-es'
+import {useDialog} from "../../composables/dialog"
+import type {FormDialogCallback} from '../../types/formDialog'
+import { useLocalStorageModel, type PersistSlimProps } from '../../composables/localStorageModel'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props']> {
+  title: string // Toolbar title and default export file name shown for this table section.
+  noDataText?: string // Text rendered by the data table when `items` is empty after filtering/loading.
+  modelValue?: Record<string, any>[] // Source rows from parent; component normalizes, mutates order, then emits updated rows.
+  modelKey?: string // Unique row key used for update/delete/reorder; missing keys are auto-generated incrementally.
+  dialogWidth?: string | number // Passed to row edit dialog width to control normal (non-fullscreen) modal size.
+  dialogMaxWidth?: string | number // Upper width bound for the edit dialog on large screens.
+  dialogHeight?: string | number // Passed to row edit dialog height to control vertical editing space.
+  dialogMaxHeight?: string | number // Upper height bound for the edit dialog before internal scrolling.
+  dialogFullscreen?: boolean // Default open mode for row editor dialog (`true` opens full screen).
+  initialData?: Record<string, any> // Seed object merged into new rows before user input.
+  toolbarColor?: string // Vuetify color applied to toolbar and default action buttons.
+  importable?: boolean // Enables Import button and `@import` flow for adding multiple rows from file.
+  exportable?: boolean // Enables Export button for current `items` dataset.
+  insertable?: boolean // Enables Add button and creation flow for new rows.
+  searchable?: boolean // Shows toolbar search input and binds keyword to table filtering.
+  inputPad?: boolean // Enables embedded pad editing workflow instead of relying only on dialog.
+  inputPadOnly?: boolean // Uses pad editor exclusively and skips dialog open/close behavior.
+  saveAndStay?: boolean // Forwards to child editor to keep it open after save (batch editing).
+  stringFields?: Array<string> // Dot-path fields preserved as string during import/export flattening and parsing.
+}
+
+/**
+ * Public props accepted by FormTable.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<Props & PersistSlimProps>(), {
+  noDataText: 'ไม่พบข้อมูล',
+  dialogFullscreen: false,
+  modelKey: 'id',
+  toolbarColor: 'primary',
+  importable: true,
+  exportable: true,
+  insertable: true,
+  searchable: true,
+  inputPad: false,
+  inputPadOnly: false,
+  saveAndStay: false,
+  stringFields: ()=>[],
+})
+
+/**
+ * Custom events emitted by FormTable.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
+const emit = defineEmits(['update:modelValue','open:dialog','close:dialog'])
+const attrs = useAttrs()
+const plainAttrs = computed(() => {
+  return omit(attrs, ['modelValue', 'onUpdate:modelValue'])
+})
+
+const inputRef = useTemplateRef<VInput>("inputRef")
+
+const items = ref<Record<string, any>[]>([])
+const search = ref<string>()
+const currentItem = ref<Record<string, any> | undefined>(undefined)
+
+useLocalStorageModel(items,props)
+
+function setSearch(keyword: string) {
+  search.value = keyword
+}
+
+const isDialogOpen = ref<boolean>(false)
+
+watch(() => props.modelValue, (newValue) => {
+  if (!Array.isArray(newValue) || !newValue.every(item => typeof item === 'object')) {
+    items.value = []
+  }
+  else {
+    let maxKey = 0
+
+    newValue.forEach((item) => {
+      if (!item.hasOwnProperty(props.modelKey)) {
+        maxKey = Math.max(maxKey, ...newValue.map(i => i[props.modelKey] || 0))
+        item[props.modelKey] = maxKey + 1
+      }
+    })
+
+    items.value = newValue
+  }
+}, { immediate: true })
+
+watch(items, (newValue) => {
+  emit('update:modelValue', newValue)
+}, { deep: true })
+
+
+function createItem(item: Record<string, any>, callback?: FormDialogCallback) {
+  if (items.value.length > 0) item[props.modelKey] = Math.max(...items.value.map(i => i[props.modelKey] || 0)) + 1
+  else item[props.modelKey] = 1
+
+  items.value.push(item)
+
+  if (callback && callback.setData) callback.setData(item)
+  if (callback) callback.done()
+}
+
+function importItems(importItems: Record<string, any>[], callback?: FormDialogCallback) {
+  importItems.forEach((item) => {
+    createItem(item)
+  })
+  if (callback) callback.done()
+}
+
+function updateItem(newItem: Record<string, any>, callback?: FormDialogCallback) {
+  const index = items.value.findIndex(item => item[props.modelKey] === newItem[props.modelKey])
+
+  if (index !== -1) {
+    items.value[index] = newItem
+  }
+
+  if (callback && callback.setData) callback.setData(newItem)
+  if (callback) callback.done()
+}
+
+function moveUpItem(currentItem: Record<string, any>, callback?: FormDialogCallback) {
+  const index = items.value.findIndex(item => item[props.modelKey] === currentItem[props.modelKey])
+
+  if (index > 0) {
+    const temp = items.value[index - 1]
+    items.value[index - 1] = items.value[index]
+    items.value[index] = temp
+  }
+
+  if (callback) callback.done()
+}
+
+function moveDownItem(currentItem: Record<string, any>, callback?: FormDialogCallback) {
+  const index = items.value.findIndex(item => item[props.modelKey] === currentItem[props.modelKey])
+
+  if (index >= 0 && index < items.value.length - 1) {
+    const temp = items.value[index + 1]
+    items.value[index + 1] = items.value[index]
+    items.value[index] = temp
+  }
+
+  if (callback) callback.done()
+}
+
+function moveToItem(currentItem: Record<string, any>, callback?: FormDialogCallback) {
+  const index = items.value.findIndex(item => item[props.modelKey] === currentItem[props.modelKey]);
+
+  if (index !== -1) {
+    const newPosition = prompt("Enter the new position (0-based index):");
+    const parsedPosition = parseInt(<string>newPosition, 10);
+
+    if (isNaN(parsedPosition) || parsedPosition < 0 || parsedPosition >= items.value.length) {
+      alert("Invalid position entered. Please enter a number between 0 and " + (items.value.length - 1));
+      return
+    }
+
+    const [temp] = items.value.splice(index, 1);
+
+    items.value.splice(parsedPosition, 0, temp);
+  }
+
+  if (callback) callback.done();
+}
+
+async function deleteItem(deleteItem: Record<string, any>, callback?: FormDialogCallback) {
+  const index = items.value.findIndex(item => item[props.modelKey] === deleteItem[props.modelKey])
+
+  if (index !== -1) {
+    let confirm = await useDialog().confirm({message: "Do you want to delete record?"})
+    if (confirm) {
+      items.value.splice(index, 1)
+      if (callback) callback.done()
+    }
+  }
+}
+
+function openDialog(item?: object) {
+  if (props.inputPadOnly) inputPadRef.value?.setOriginalData(item)
+  else {
+    currentItem.value = item
+    nextTick(() => {
+      isDialogOpen.value = true
+      emit('open:dialog',item)
+    })
+  }
+}
+const inputPadRef = ref()
+
+const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpItem, moveDownItem,moveToItem,setSearch })
+
+const isValid = computed(()=>{
+  return inputRef.value?.isValid
+})
+
+const errorMessages = computed(()=>{
+  return inputRef.value?.errorMessages
+})
+
+defineExpose({
+  errorMessages,
+  isValid,
+  reset: ()=>inputRef.value?.reset(),
+  resetValidation : ()=>inputRef.value?.resetValidation(),
+  validate : ()=>inputRef.value?.validate(),
+  operation,
+  items
+})
+</script>
+
+<template>
+  <v-input v-model="items" v-bind="plainAttrs" ref="inputRef">
+    <template #default="{isReadonly,isDisabled}">
+      <v-container fluid class="ma-0 pa-0">
+        <v-card>
+          <slot
+              name="header"
+              :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">
+                      {{ title }}
+                    </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 && !(isReadonly.value || isDisabled.value)"
+                    icon="mdi:mdi-file-upload"
+                    variant="flat"
+                    @import="importItems"
+                    :color="toolbarColor"
+                    :stringFields="props.stringFields"
+                />
+                <ExportCSV
+                    v-if="props.exportable && items.length && !(isReadonly.value || isDisabled.value)"
+                    icon="mdi:mdi-file-download"
+                    variant="flat"
+                    :file-name="title"
+                    :model-value="items"
+                    :color="toolbarColor"
+                    :stringFields="props.stringFields"
+                />
+                <VBtn
+                    v-if="props.insertable && !props.inputPadOnly && !(isReadonly.value || isDisabled.value)"
+                    :color="toolbarColor"
+                    prepend-icon="mdi:mdi-plus"
+                    variant="flat"
+                    @click="openDialog()"
+                >
+                  add
+                </VBtn>
+              </VToolbarItems>
+            </VToolbar>
+          </slot>
+          <v-data-table
+              v-bind="plainAttrs"
+              color="primary"
+              :items="items"
+              :search="search"
+          >
+            <!-- @ts-ignore -->
+            <template
+                v-for="(_, name, index) in ($slots as {})"
+                :key="index"
+                #[name]="slotData"
+            >
+              <slot
+                  :name="name"
+                  v-bind="((slotData || {}) as object)"
+                  :operation="operation"
+                  :isReadonly="isReadonly"
+                  :isDisabled="isDisabled"
+              />
+            </template>
+            <template
+                v-if="!$slots['item.operation'] && !(isReadonly.value || isDisabled.value)"
+                #item.operation="props"
+            >
+              <v-icon density="compact" :disabled="props.index==0" @click="moveUpItem(props.item)">mdi:mdi-arrow-up-thick</v-icon>
+              <v-icon density="compact" @click="moveToItem(props.item)">fa:fas fa-arrow-right-to-bracket</v-icon>
+              <v-icon density="compact" :disabled="props.index==items.length-1" @click="moveDownItem(props.item)">mdi:mdi-arrow-down-thick</v-icon>
+            </template>
+            <template
+                v-if="!$slots['item.action'] && !(isReadonly.value || isDisabled.value)"
+                #item.action="{ item }"
+            >
+              <v-btn
+                  variant="flat"
+                  density="compact"
+                  icon="mdi:mdi-note-edit"
+                  @click="openDialog(item)"
+              />
+              <v-btn
+                  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="initialData"
+              :form-data="currentItem"
+              @create="createItem"
+              @update="updateItem"
+              @afterLeave="emit('close:dialog')"
+              :saveAndStay="saveAndStay"
+              :width="dialogWidth"
+              :height="dialogHeight"
+              :max-width="dialogMaxWidth"
+              :max-height="dialogMaxHeight"
+              v-if="!props.inputPadOnly"
+          >
+            <template #default="slotData">
+              <slot
+                  name="form"
+                  v-bind="slotData"
+              />
+            </template>
+            <template #title="slotData">
+              <slot
+                  name="formTitle"
+                  v-bind="slotData"
+              />
+            </template>
+            <template #action="slotData">
+              <slot
+                  name="formAction"
+                  v-bind="slotData"
+              />
+            </template>
+          </FormDialog>
+        </v-card>
+        <slot name="inputPad" :operation="operation" :isReadonly="isReadonly" :isDisabled="isDisabled">
+          <v-sheet border rounded class="mt-1" v-if="inputPad && !(isReadonly.value || isDisabled.value)">
+            <form-action-pad ref="inputPadRef" :title="props.title" @create="createItem" @update="updateItem" :initial-data="initialData">
+              <template #default="slotData">
+                <slot
+                    name="form"
+                    v-bind="slotData"
+                />
+              </template>
+            </form-action-pad>
+          </v-sheet>
+        </slot>
+      </v-container>
+    </template>
+  </v-input>
+</template>