@ramathibodi/nuxt-commons 0.1.74 → 4.0.0

package/dist/runtime/components/form/Table.d.vue.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/Table.vue

@@ -1,228 +1,169 @@
-<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'
-
+<script setup>
+import { VDataTable } from "vuetify/components/VDataTable";
+import { VInput } from "vuetify/components/VInput";
+import { computed, nextTick, ref, useAttrs, watch, useTemplateRef } from "vue";
+import { omit } from "lodash-es";
+import { useDialog } from "../../composables/dialog";
+import { useLocalStorageModel } 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()
+  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" },
+  dialogWidth: { type: [String, Number], required: false },
+  dialogMaxWidth: { type: [String, Number], required: false },
+  dialogHeight: { type: [String, Number], required: false },
+  dialogMaxHeight: { type: [String, Number], required: false },
+  dialogFullscreen: { type: Boolean, required: false, default: false },
+  initialData: { type: Object, required: false },
+  toolbarColor: { type: String, required: false, default: "primary" },
+  importable: { type: Boolean, required: false, default: true },
+  exportable: { type: Boolean, required: false, default: true },
+  insertable: { type: Boolean, required: false, default: true },
+  searchable: { type: Boolean, required: false, default: true },
+  inputPad: { type: Boolean, required: false, default: false },
+  inputPadOnly: { type: Boolean, required: false, default: false },
+  saveAndStay: { type: Boolean, required: false, default: false },
+  stringFields: { type: Array, required: false, default: () => [] },
+  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", "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
+  return omit(attrs, ["modelValue", "onUpdate:modelValue"]);
+});
+const inputRef = useTemplateRef("inputRef");
+const items = ref([]);
+const search = ref();
+const currentItem = ref(void 0);
+useLocalStorageModel(items, props);
+function setSearch(keyword) {
+  search.value = keyword;
 }
-
-const isDialogOpen = ref<boolean>(false)
-
+const isDialogOpen = ref(false);
 watch(() => props.modelValue, (newValue) => {
-  if (!Array.isArray(newValue) || !newValue.every(item => typeof item === 'object')) {
-    items.value = []
-  }
-  else {
-    let maxKey = 0
-
+  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
+        maxKey = Math.max(maxKey, ...newValue.map((i) => i[props.modelKey] || 0));
+        item[props.modelKey] = maxKey + 1;
       }
-    })
-
-    items.value = newValue
+    });
+    items.value = newValue;
   }
-}, { immediate: true })
-
+}, { 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()
+  emit("update:modelValue", newValue);
+}, { deep: true });
+function createItem(item, callback) {
+  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 importItems(importItems2, callback) {
+  importItems2.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])
-
+function updateItem(newItem, callback) {
+  const index = items.value.findIndex((item) => item[props.modelKey] === newItem[props.modelKey]);
   if (index !== -1) {
-    items.value[index] = newItem
+    items.value[index] = newItem;
   }
-
-  if (callback && callback.setData) callback.setData(newItem)
-  if (callback) callback.done()
+  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])
-
+function moveUpItem(currentItem2, callback) {
+  const index = items.value.findIndex((item) => item[props.modelKey] === currentItem2[props.modelKey]);
   if (index > 0) {
-    const temp = items.value[index - 1]
-    items.value[index - 1] = items.value[index]
-    items.value[index] = temp
+    const temp = items.value[index - 1];
+    items.value[index - 1] = items.value[index];
+    items.value[index] = temp;
   }
-
-  if (callback) callback.done()
+  if (callback) callback.done();
 }
-
-function moveDownItem(currentItem: Record<string, any>, callback?: FormDialogCallback) {
-  const index = items.value.findIndex(item => item[props.modelKey] === currentItem[props.modelKey])
-
+function moveDownItem(currentItem2, callback) {
+  const index = items.value.findIndex((item) => item[props.modelKey] === currentItem2[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
+    const temp = items.value[index + 1];
+    items.value[index + 1] = items.value[index];
+    items.value[index] = temp;
   }
-
-  if (callback) callback.done()
+  if (callback) callback.done();
 }
-
-function moveToItem(currentItem: Record<string, any>, callback?: FormDialogCallback) {
-  const index = items.value.findIndex(item => item[props.modelKey] === currentItem[props.modelKey]);
-
+function moveToItem(currentItem2, callback) {
+  const index = items.value.findIndex((item) => item[props.modelKey] === currentItem2[props.modelKey]);
   if (index !== -1) {
     const newPosition = prompt("Enter the new position (0-based index):");
-    const parsedPosition = parseInt(<string>newPosition, 10);
-
+    const parsedPosition = parseInt(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
+      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])
-
+async function deleteItem(deleteItem2, callback) {
+  const index = items.value.findIndex((item) => item[props.modelKey] === deleteItem2[props.modelKey]);
   if (index !== -1) {
-    let confirm = await useDialog().confirm({message: "Do you want to delete record?"})
+    let confirm = await useDialog().confirm({ message: "Do you want to delete record?" });
     if (confirm) {
-      items.value.splice(index, 1)
-      if (callback) callback.done()
+      items.value.splice(index, 1);
+      if (callback) callback.done();
     }
   }
 }
-
-function openDialog(item?: object) {
-  if (props.inputPadOnly) inputPadRef.value?.setOriginalData(item)
+function openDialog(item) {
+  if (props.inputPadOnly) inputPadRef.value?.setOriginalData(item);
   else {
-    currentItem.value = item
+    currentItem.value = item;
     nextTick(() => {
-      isDialogOpen.value = true
-      emit('open:dialog',item)
-    })
+      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
-})
-
+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(),
+  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}">
+    <template #default="{ isReadonly, isDisabled }">
       <v-container fluid class="ma-0 pa-0">
         <v-card>
           <slot
@@ -234,7 +175,7 @@ defineExpose({
               <v-row
                   justify="end"
                   class="ma-1"
-                  dense
+                  density="compact"
                   no-gutters
                   align="center"
               >
@@ -299,13 +240,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"
@@ -315,9 +256,9 @@ defineExpose({
                 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" :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>
+              <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)"