@ramathibodi/nuxt-commons 0.1.74 → 4.0.0

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

@@ -0,0 +1,221 @@
+/**
+ * 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 type { FormDialogCallback } from '../../types/formDialog.js';
+import { type PersistSlimProps } from '../../composables/localStorageModel.js';
+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>;
+}
+/**
+ * Public props accepted by FormTable.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+type __VLS_Props = Props & PersistSlimProps;
+declare function setSearch(keyword: string): void;
+declare function createItem(item: Record<string, any>, callback?: FormDialogCallback): void;
+declare function updateItem(newItem: Record<string, any>, callback?: FormDialogCallback): void;
+declare function moveUpItem(currentItem: Record<string, any>, callback?: FormDialogCallback): void;
+declare function moveDownItem(currentItem: Record<string, any>, callback?: FormDialogCallback): void;
+declare function moveToItem(currentItem: Record<string, any>, callback?: FormDialogCallback): void;
+declare function deleteItem(deleteItem: Record<string, any>, callback?: FormDialogCallback): Promise<void>;
+declare function openDialog(item?: object): void;
+declare var __VLS_22: {
+    items: Record<string, any>[];
+    operation: {
+        openDialog: typeof openDialog;
+        createItem: typeof createItem;
+        updateItem: typeof updateItem;
+        deleteItem: typeof deleteItem;
+        moveUpItem: typeof moveUpItem;
+        moveDownItem: typeof moveDownItem;
+        moveToItem: typeof moveToItem;
+        setSearch: typeof setSearch;
+    };
+}, __VLS_48: {}, __VLS_56: {
+    items: Record<string, any>[];
+    operation: {
+        openDialog: typeof openDialog;
+        createItem: typeof createItem;
+        updateItem: typeof updateItem;
+        deleteItem: typeof deleteItem;
+        moveUpItem: typeof moveUpItem;
+        moveDownItem: typeof moveDownItem;
+        moveToItem: typeof moveToItem;
+        setSearch: typeof setSearch;
+    };
+}, __VLS_69: {
+    items: Record<string, any>[];
+    operation: {
+        openDialog: typeof openDialog;
+        createItem: typeof createItem;
+        updateItem: typeof updateItem;
+        deleteItem: typeof deleteItem;
+        moveUpItem: typeof moveUpItem;
+        moveDownItem: typeof moveDownItem;
+        moveToItem: typeof moveToItem;
+        setSearch: typeof setSearch;
+    };
+}, __VLS_99: never, __VLS_100: {
+    operation: {
+        openDialog: typeof openDialog;
+        createItem: typeof createItem;
+        updateItem: typeof updateItem;
+        deleteItem: typeof deleteItem;
+        moveUpItem: typeof moveUpItem;
+        moveDownItem: typeof moveDownItem;
+        moveToItem: typeof moveToItem;
+        setSearch: typeof setSearch;
+    };
+    isReadonly: import("vue").ComputedRef<boolean>;
+    isDisabled: import("vue").ComputedRef<boolean>;
+}, __VLS_153: any, __VLS_156: any, __VLS_159: any, __VLS_161: {
+    operation: {
+        openDialog: typeof openDialog;
+        createItem: typeof createItem;
+        updateItem: typeof updateItem;
+        deleteItem: typeof deleteItem;
+        moveUpItem: typeof moveUpItem;
+        moveDownItem: typeof moveDownItem;
+        moveToItem: typeof moveToItem;
+        setSearch: typeof setSearch;
+    };
+    isReadonly: import("vue").ComputedRef<boolean>;
+    isDisabled: import("vue").ComputedRef<boolean>;
+}, __VLS_181: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_99>]?: (props: typeof __VLS_100) => any;
+} & {
+    header?: (props: typeof __VLS_22) => any;
+} & {
+    title?: (props: typeof __VLS_48) => any;
+} & {
+    search?: (props: typeof __VLS_56) => any;
+} & {
+    toolbarItems?: (props: typeof __VLS_69) => any;
+} & {
+    form?: (props: typeof __VLS_153) => any;
+} & {
+    formTitle?: (props: typeof __VLS_156) => any;
+} & {
+    formAction?: (props: typeof __VLS_159) => any;
+} & {
+    inputPad?: (props: typeof __VLS_161) => any;
+} & {
+    form?: (props: typeof __VLS_181) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    noDataText: string;
+    dialogFullscreen: boolean;
+    modelKey: string;
+    toolbarColor: string;
+    importable: boolean;
+    exportable: boolean;
+    insertable: boolean;
+    searchable: boolean;
+    inputPad: boolean;
+    inputPadOnly: boolean;
+    saveAndStay: boolean;
+    stringFields: () => never[];
+}>>, {
+    errorMessages: import("vue").ComputedRef<(string & string[]) | (readonly string[] & string[]) | undefined>;
+    isValid: import("vue").ComputedRef<boolean | null | undefined>;
+    reset: () => Promise<void> | undefined;
+    resetValidation: () => Promise<void> | undefined;
+    validate: () => Promise<string[]> | undefined;
+    operation: import("vue").Ref<{
+        openDialog: typeof openDialog;
+        createItem: typeof createItem;
+        updateItem: typeof updateItem;
+        deleteItem: typeof deleteItem;
+        moveUpItem: typeof moveUpItem;
+        moveDownItem: typeof moveDownItem;
+        moveToItem: typeof moveToItem;
+        setSearch: typeof setSearch;
+    }, {
+        openDialog: typeof openDialog;
+        createItem: typeof createItem;
+        updateItem: typeof updateItem;
+        deleteItem: typeof deleteItem;
+        moveUpItem: typeof moveUpItem;
+        moveDownItem: typeof moveDownItem;
+        moveToItem: typeof moveToItem;
+        setSearch: typeof setSearch;
+    } | {
+        openDialog: typeof openDialog;
+        createItem: typeof createItem;
+        updateItem: typeof updateItem;
+        deleteItem: typeof deleteItem;
+        moveUpItem: typeof moveUpItem;
+        moveDownItem: typeof moveDownItem;
+        moveToItem: typeof moveToItem;
+        setSearch: typeof setSearch;
+    }>;
+    items: import("vue").Ref<Record<string, any>[], Record<string, any>[]>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+    "open:dialog": (...args: any[]) => void;
+    "close:dialog": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    noDataText: string;
+    dialogFullscreen: boolean;
+    modelKey: string;
+    toolbarColor: string;
+    importable: boolean;
+    exportable: boolean;
+    insertable: boolean;
+    searchable: boolean;
+    inputPad: boolean;
+    inputPadOnly: boolean;
+    saveAndStay: boolean;
+    stringFields: () => never[];
+}>>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onOpen:dialog"?: ((...args: any[]) => any) | undefined;
+    "onClose:dialog"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<Required<T>[K]>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/form/TableData.d.vue.ts

@@ -0,0 +1,102 @@
+/**
+ * FormTableData 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 { type PersistSlimProps } from '../../composables/localStorageModel.js';
+interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props']> {
+    title: string;
+    noDataText?: string;
+    modelValue?: Record<string, any>[];
+    modelKey?: string;
+    toolbarColor?: string;
+    headers: Record<string, any>[];
+    itemsInitial: Record<string, any>[];
+    dataTemplate?: string | object;
+    disableApplyToAll?: boolean | string | string[];
+}
+/**
+ * Public props accepted by FormTableData.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+type __VLS_Props = Props & PersistSlimProps;
+declare var __VLS_22: {
+    items: Record<string, any>[];
+    operation: {
+        reset: () => void;
+    };
+}, __VLS_48: {}, __VLS_56: {
+    items: Record<string, any>[];
+    operation: {
+        reset: () => void;
+    };
+}, __VLS_73: never, __VLS_74: {
+    operation: {
+        reset: () => void;
+    };
+    isReadonly: import("vue").ComputedRef<boolean>;
+    isDisabled: import("vue").ComputedRef<boolean>;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_73>]?: (props: typeof __VLS_74) => any;
+} & {
+    header?: (props: typeof __VLS_22) => any;
+} & {
+    title?: (props: typeof __VLS_48) => any;
+} & {
+    toolbarItems?: (props: typeof __VLS_56) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    noDataText: string;
+    modelKey: string;
+    toolbarColor: string;
+    disableApplyToAll: boolean;
+}>>, {
+    errorMessages: import("vue").ComputedRef<(string & string[]) | (readonly string[] & string[]) | undefined>;
+    isValid: import("vue").ComputedRef<boolean | null | undefined>;
+    reset: () => void;
+    resetValidation: () => Promise<void> | undefined;
+    validate: () => Promise<string[]> | undefined;
+    operation: import("vue").Ref<{
+        reset: () => void;
+    }, {
+        reset: () => void;
+    } | {
+        reset: () => void;
+    }>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    noDataText: string;
+    modelKey: string;
+    toolbarColor: string;
+    disableApplyToAll: boolean;
+}>>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<Required<T>[K]>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -1,166 +1,136 @@
-<script lang="ts" setup>
-/**
- * FormTableData 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, ref, useAttrs, watch, useTemplateRef} from 'vue'
-import {cloneDeep, isEqual, omit, isArray, isString} from 'lodash-es'
-import {templateItemToString} from "../../composables/document/template";
-import {templateToHeader} from "../../composables/document/templateFormTable";
-import { useLocalStorageModel, type PersistSlimProps } from '../../composables/localStorageModel'
-
+<script setup>
+import { VDataTable } from "vuetify/components/VDataTable";
+import { VInput } from "vuetify/components/VInput";
+import { computed, ref, useAttrs, watch, useTemplateRef } from "vue";
+import { cloneDeep, isEqual, omit, isArray, isString } from "lodash-es";
+import { templateItemToString } from "../../composables/document/template";
+import { templateToHeader } from "../../composables/document/templateFormTable";
+import { useLocalStorageModel } from "../../composables/localStorageModel";
 defineOptions({
-  inheritAttrs: false,
-})
-
-interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props']> {
-  title: string // Title text displayed in the component header or dialog.
-  noDataText?: string // Fallback message shown when there is no data to display.
-  modelValue?: Record<string, any>[] // Bound value for v-model synchronization with the parent component.
-  modelKey?: string // Primary key field name used to track row identity.
-  toolbarColor?: string // Vuetify color name applied to toolbar and action areas.
-  headers: Record<string, any>[] // Column definitions used to render table headers and field mapping.
-  itemsInitial: Record<string, any>[] // Initial rows used before external data is loaded.
-  dataTemplate?: string | object // Template object/string used to seed new row data.
-  disableApplyToAll?: boolean | string | string[] // Disables apply-to-all behavior globally or for selected field keys.
-}
-
-/**
- * Public props accepted by FormTableData.
- * Document each prop field with intent, defaults, and side effects for clear generated docs.
- */
-const props = withDefaults(defineProps<Props & PersistSlimProps>(), {
-  noDataText: 'ไม่พบข้อมูล',
-  modelKey: 'id',
-  toolbarColor: 'primary',
-  disableApplyToAll: false,
-})
-
-/**
- * Custom events emitted by FormTableData.
- * Parents can listen to these events to react to user actions and internal state changes.
- */
-const emit = defineEmits(['update:modelValue'])
-const attrs = useAttrs()
+  inheritAttrs: false
+});
+const props = defineProps({
+  title: { type: String, required: true },
+  noDataText: { type: String, required: false, default: "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25" },
+  modelValue: { type: Array, required: false },
+  modelKey: { type: String, required: false, default: "id" },
+  toolbarColor: { type: String, required: false, default: "primary" },
+  headers: { type: Array, required: true },
+  itemsInitial: { type: Array, required: true },
+  dataTemplate: { type: [String, Object], required: false },
+  disableApplyToAll: { type: [Boolean, String, Array], required: false, default: false },
+  persist: { type: Boolean, required: false },
+  persistKey: { type: String, required: false },
+  persistPrefix: { type: String, required: false },
+  persistDebounce: { type: Number, required: false },
+  persistClearOnEmpty: { type: Boolean, required: false },
+  persistTtl: { type: Number, required: false },
+  persistEncrypt: { type: Boolean, required: false },
+  persistSecret: { type: String, required: false },
+  persistAlwaysHydrate: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const attrs = useAttrs();
 const plainAttrs = computed(() => {
-  return omit(attrs, ['modelValue','items','onUpdate:modelValue','itemsInitial','dataTemplate'])
-})
-
-const inputRef = useTemplateRef<VInput>("inputRef")
-
-const itemsInternal = ref<Record<string, any>[]>([])
-const itemsApplyAll = ref<Record<string, any>>({})
-
-useLocalStorageModel(itemsInternal,props)
-
-const computedDisableApplyToAll = computed(()=>{
+  return omit(attrs, ["modelValue", "items", "onUpdate:modelValue", "itemsInitial", "dataTemplate"]);
+});
+const inputRef = useTemplateRef("inputRef");
+const itemsInternal = ref([]);
+const itemsApplyAll = ref({});
+useLocalStorageModel(itemsInternal, props);
+const computedDisableApplyToAll = computed(() => {
   if (isString(props.disableApplyToAll)) {
-    return props.disableApplyToAll.split(',').map(i=>i.trim())
+    return props.disableApplyToAll.split(",").map((i) => i.trim());
   }
-  return props.disableApplyToAll
-})
-const canApplyAll = (variableName: string) => {
-  if (isArray(computedDisableApplyToAll.value)) return !computedDisableApplyToAll.value.includes(variableName)
-  return !computedDisableApplyToAll.value
-}
-
+  return props.disableApplyToAll;
+});
+const canApplyAll = (variableName) => {
+  if (isArray(computedDisableApplyToAll.value)) return !computedDisableApplyToAll.value.includes(variableName);
+  return !computedDisableApplyToAll.value;
+};
 watch(() => props.modelValue, (newValue) => {
-  if (!Array.isArray(newValue) || !newValue.every(item => typeof item === 'object')) {
-    itemsInternal.value = cloneDeep(props.itemsInitial)
-  }
-  else {
-    let maxKey = 0
-
+  if (!Array.isArray(newValue) || !newValue.every((item) => typeof item === "object")) {
+    itemsInternal.value = cloneDeep(props.itemsInitial);
+  } 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
+        maxKey = Math.max(maxKey, ...newValue.map((i) => i[props.modelKey] || 0));
+        item[props.modelKey] = maxKey + 1;
       }
-    })
-
-    itemsInternal.value = newValue
+    });
+    itemsInternal.value = newValue;
   }
-}, { immediate: true })
-
-watch(()=>props.itemsInitial, (newValue,oldValue)=>{
-  if (!isEqual(newValue,oldValue)) itemsInternal.value = cloneDeep(props.itemsInitial)
-},{immediate:true,deep:true})
-
+}, { immediate: true });
+watch(() => props.itemsInitial, (newValue, oldValue) => {
+  if (!isEqual(newValue, oldValue)) itemsInternal.value = cloneDeep(props.itemsInitial);
+}, { immediate: true, deep: true });
 watch(itemsInternal, () => {
-  emit('update:modelValue', itemsInternal.value)
-}, { deep: true })
-
+  emit("update:modelValue", itemsInternal.value);
+}, { deep: true });
 watch(itemsApplyAll, () => {
   itemsInternal.value = itemsInternal.value?.map((item) => {
-    return Object.assign(item, itemsApplyAll.value)
-  })
-},{deep:true})
-
-const computedHeaders = computed(()=>{
-  let dataHeaders = templateToHeader(props.dataTemplate)
-  let combinedHeaders = [...props.headers, ...dataHeaders]
-  return combinedHeaders.map((header: any) => {
-    return {...header,headerProps:
-          {
-            style: 'font-weight: 800'
-          }
-    }
-  })
-})
-
-const computedDataTemplate = computed(()=>{
-  let template = cloneDeep(props.dataTemplate)
+    return Object.assign(item, itemsApplyAll.value);
+  });
+}, { deep: true });
+const computedHeaders = computed(() => {
+  let dataHeaders = templateToHeader(props.dataTemplate);
+  let combinedHeaders = [...props.headers, ...dataHeaders];
+  return combinedHeaders.map((header) => {
+    return {
+      ...header,
+      headerProps: {
+        style: "font-weight: 800"
+      }
+    };
+  });
+});
+const computedDataTemplate = computed(() => {
+  let template = cloneDeep(props.dataTemplate);
   if (isString(props.dataTemplate)) {
     try {
-      template = JSON.parse(props.dataTemplate)
+      template = JSON.parse(props.dataTemplate);
     } catch (e) {
-      void e
+      void e;
     }
   }
   if (isArray(template)) {
-    return template.map((t: any) => {
-      const out = { ...t }
-      let s = out.inputAttributes?.trim() || ""
+    return template.map((t) => {
+      const out = { ...t };
+      let s = out.inputAttributes?.trim() || "";
       if (!/(^|\s)hide-details(\s|$)/.test(s) && !/(^|\s)hideDetails(\s|$)/.test(s)) {
-        s = `${s} hide-details`.trim()
+        s = `${s} hide-details`.trim();
       }
-      out.inputAttributes = s
-      return out
-    })
+      out.inputAttributes = s;
+      return out;
+    });
   }
-  return []
-})
-
-const reset = ()=>{
-  inputRef.value?.reset()
-  itemsApplyAll.value = {}
-}
-
-const isValid = computed(()=>{
-  return inputRef.value?.isValid
-})
-
-const errorMessages = computed(()=>{
-  return inputRef.value?.errorMessages
-})
-
-const operation = ref({reset})
-
+  return [];
+});
+const reset = () => {
+  inputRef.value?.reset();
+  itemsApplyAll.value = {};
+};
+const isValid = computed(() => {
+  return inputRef.value?.isValid;
+});
+const errorMessages = computed(() => {
+  return inputRef.value?.errorMessages;
+});
+const operation = ref({ reset });
 defineExpose({
   errorMessages,
   isValid,
   reset,
-  resetValidation : ()=>inputRef.value?.resetValidation(),
-  validate : ()=>inputRef.value?.validate(),
+  resetValidation: () => inputRef.value?.resetValidation(),
+  validate: () => inputRef.value?.validate(),
   operation
-})
+});
 </script>
 
 <template>
   <v-input v-model="itemsInternal" v-bind="plainAttrs" ref="inputRef">
-    <template #default="{isReadonly,isDisabled}">
+    <template #default="{ isReadonly, isDisabled }">
       <v-container fluid class="ma-0 pa-0">
         <v-card>
           <slot
@@ -172,7 +142,7 @@ defineExpose({
               <v-row
                   justify="end"
                   class="ma-1"
-                  dense
+                  density="compact"
                   no-gutters
                   align="center"
               >
@@ -207,13 +177,13 @@ defineExpose({
           >
             <!-- @ts-ignore -->
             <template
-                v-for="(_, name, index) in ($slots as {})"
+                v-for="(_, name, index) in $slots"
                 :key="index"
                 #[name]="slotData"
             >
               <slot
                   :name="name"
-                  v-bind="((slotData || {}) as object)"
+                  v-bind="slotData || {}"
                   :operation="operation"
                   :isReadonly="isReadonly"
                   :isDisabled="isDisabled"
@@ -221,12 +191,12 @@ defineExpose({
             </template>
 
             <template v-for="template in computedDataTemplate" :key="template.variableName" #[`header.${template.variableName}`]="props">
-              <form-pad v-model="itemsApplyAll" :template="templateItemToString(template,[])" v-if="canApplyAll(template.variableName)"></form-pad>
+              <form-pad v-model="itemsApplyAll" :template="templateItemToString(template, [])" v-if="canApplyAll(template.variableName)"></form-pad>
               <template v-else>{{props.column.title}}</template>
             </template>
 
-            <template v-for="template in computedDataTemplate" :key="template.variableName" #[`item.${template.variableName}`]="{index}">
-              <form-pad v-model="itemsInternal[index]" :template="templateItemToString(template,[])"></form-pad>
+            <template v-for="template in computedDataTemplate" :key="template.variableName" #[`item.${template.variableName}`]="{ index }">
+              <form-pad v-model="itemsInternal[index]" :template="templateItemToString(template, [])"></form-pad>
             </template>
           </v-data-table>
         </v-card>