lkt-item-crud 2.0.19 → 2.0.20

package/dist/components/ButtonNav.vue.d.ts

@@ -1,6 +1,7 @@
-import { ButtonConfig, ItemCrudButtonNavVisibility, ItemCrudMode, ItemCrudView, LktObject } from 'lkt-vue-kernel';
+import { ButtonConfig, ItemCrudButtonNavVisibility, ItemCrudMode, ItemCrudView, LktObject, ModificationView } from 'lkt-vue-kernel';
 type __VLS_Props = {
     item: LktObject;
+    modifications: LktObject;
     editing?: boolean;
     loading?: boolean;
     grouped?: boolean;
@@ -22,122 +23,53 @@ type __VLS_Props = {
     perms?: Array<string>;
     httpSuccessRead?: boolean;
     buttonNavVisibility: ItemCrudButtonNavVisibility;
+    modificationView?: boolean | Array<ModificationView>;
+    pickedModificationView: string;
+    editableView: ModificationView;
 };
-declare var __VLS_5: {
+declare var __VLS_9: {
     canUpdate: boolean | undefined;
     canDrop: boolean | undefined;
     perms: string[] | undefined;
-}, __VLS_7: {
+}, __VLS_11: {
     canUpdate: boolean | undefined;
     canDrop: boolean | undefined;
     perms: string[] | undefined;
-}, __VLS_21: {
-    item: LktObject;
-    editMode: boolean;
-    isCreate: boolean;
-    canUpdate: boolean | undefined;
-    canDrop: boolean | undefined;
-}, __VLS_35: {
-    item: LktObject;
-    editMode: boolean;
-    isCreate: boolean;
-    canUpdate: boolean | undefined;
-    canDrop: boolean | undefined;
-}, __VLS_49: {
-    item: LktObject;
-    editMode: boolean;
-    isCreate: boolean;
-    canUpdate: boolean | undefined;
-    canDrop: boolean | undefined;
-}, __VLS_51: {}, __VLS_63: {
+}, __VLS_49: {}, __VLS_65: {
     canUpdate: boolean | undefined;
     canDrop: boolean | undefined;
     perms: string[] | undefined;
-}, __VLS_65: {
+}, __VLS_67: {
     canUpdate: boolean | undefined;
     canDrop: boolean | undefined;
     perms: string[] | undefined;
-}, __VLS_79: {
-    item: LktObject;
-    editMode: boolean;
-    isCreate: boolean;
-    canUpdate: boolean | undefined;
-    canDrop: boolean | undefined;
-}, __VLS_93: {
-    item: LktObject;
-    editMode: boolean;
-    isCreate: boolean;
-    canUpdate: boolean | undefined;
-    canDrop: boolean | undefined;
-}, __VLS_107: {
-    item: LktObject;
-    editMode: boolean;
-    isCreate: boolean;
-    canUpdate: boolean | undefined;
-    canDrop: boolean | undefined;
-}, __VLS_109: {}, __VLS_111: {
+}, __VLS_105: {}, __VLS_107: {
     canUpdate: boolean | undefined;
     canDrop: boolean | undefined;
     perms: string[] | undefined;
-}, __VLS_113: {
+}, __VLS_109: {
     canUpdate: boolean | undefined;
     canDrop: boolean | undefined;
     perms: string[] | undefined;
-}, __VLS_127: {
-    item: LktObject;
-    editMode: boolean;
-    isCreate: boolean;
-    canUpdate: boolean | undefined;
-    canDrop: boolean | undefined;
-}, __VLS_141: {
-    item: LktObject;
-    editMode: boolean;
-    isCreate: boolean;
-    canUpdate: boolean | undefined;
-    canDrop: boolean;
-}, __VLS_155: {
-    item: LktObject;
-    editMode: boolean;
-    isCreate: boolean;
-    canUpdate: boolean | undefined;
-    canDrop: boolean | undefined;
-}, __VLS_157: {};
+}, __VLS_147: {};
 type __VLS_Slots = {} & {
-    'prev-buttons-ever'?: (props: typeof __VLS_5) => any;
-} & {
-    'prev-buttons'?: (props: typeof __VLS_7) => any;
-} & {
-    'button-save'?: (props: typeof __VLS_21) => any;
-} & {
-    'button-save'?: (props: typeof __VLS_35) => any;
-} & {
-    'button-drop'?: (props: typeof __VLS_49) => any;
-} & {
-    buttons?: (props: typeof __VLS_51) => any;
-} & {
-    'prev-buttons-ever'?: (props: typeof __VLS_63) => any;
-} & {
-    'prev-buttons'?: (props: typeof __VLS_65) => any;
-} & {
-    'button-save'?: (props: typeof __VLS_79) => any;
-} & {
-    'button-save'?: (props: typeof __VLS_93) => any;
+    'prev-buttons-ever'?: (props: typeof __VLS_9) => any;
 } & {
-    'button-drop'?: (props: typeof __VLS_107) => any;
+    'prev-buttons'?: (props: typeof __VLS_11) => any;
 } & {
-    buttons?: (props: typeof __VLS_109) => any;
+    buttons?: (props: typeof __VLS_49) => any;
 } & {
-    'prev-buttons-ever'?: (props: typeof __VLS_111) => any;
+    'prev-buttons-ever'?: (props: typeof __VLS_65) => any;
 } & {
-    'prev-buttons'?: (props: typeof __VLS_113) => any;
+    'prev-buttons'?: (props: typeof __VLS_67) => any;
 } & {
-    'button-save'?: (props: typeof __VLS_127) => any;
+    buttons?: (props: typeof __VLS_105) => any;
 } & {
-    'button-save'?: (props: typeof __VLS_141) => any;
+    'prev-buttons-ever'?: (props: typeof __VLS_107) => any;
 } & {
-    'button-drop'?: (props: typeof __VLS_155) => any;
+    'prev-buttons'?: (props: typeof __VLS_109) => any;
 } & {
-    buttons?: (props: typeof __VLS_157) => any;
+    buttons?: (props: typeof __VLS_147) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     doSave: () => void;
@@ -147,15 +79,18 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     create: (...args: any[]) => void;
     "update:loading": (...args: any[]) => void;
     "update:editing": (...args: any[]) => void;
+    "update:pickedModificationView": (...args: any[]) => void;
     save: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onDrop?: ((...args: any[]) => any) | undefined;
     onCreate?: ((...args: any[]) => any) | undefined;
     "onUpdate:loading"?: ((...args: any[]) => any) | undefined;
     "onUpdate:editing"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:pickedModificationView"?: ((...args: any[]) => any) | undefined;
     onSave?: ((...args: any[]) => any) | undefined;
 }>, {
     item: LktObject;
+    modifications: LktObject;
     editing: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/functions/modifications-functions.d.ts

@@ -0,0 +1,4 @@
+import { FormConfig, LktObject } from 'lkt-vue-kernel';
+import { DataState } from 'lkt-data-state';
+export declare const getModificationsDataState: (value: LktObject, modifications: LktObject, form: FormConfig) => DataState;
+export declare const detectFormFieldsKeys: (form: FormConfig) => string[];

package/dist/lib-components/LktItemCrud.vue.d.ts

@@ -1,4 +1,4 @@
-import { ButtonConfig, ItemCrudButtonNavPosition, ItemCrudConfig, ItemCrudMode, ItemCrudView, LktObject, ModalConfig, NotificationType } from 'lkt-vue-kernel';
+import { ButtonConfig, ItemCrudButtonNavPosition, ItemCrudConfig, ItemCrudMode, ItemCrudView, LktObject, ModalConfig, ModificationView, NotificationType } from 'lkt-vue-kernel';
 declare var __VLS_17: {
     canUpdate: boolean | undefined;
     canDrop: boolean | undefined;
@@ -67,7 +67,8 @@ declare const __VLS_component: import("vue").DefineComponent<ItemCrudConfig, {
     "update:modelValue": (...args: any[]) => void;
     "update:perms": (...args: any[]) => void;
     "update:customData": (...args: any[]) => void;
-    "update:form": (...args: any[]) => void;
+    "update:modifications": (...args: any[]) => void;
+    "update:modificationView": (...args: any[]) => void;
     "before-save": (...args: any[]) => void;
     "modified-data": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<ItemCrudConfig> & Readonly<{
@@ -81,7 +82,8 @@ declare const __VLS_component: import("vue").DefineComponent<ItemCrudConfig, {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onUpdate:perms"?: ((...args: any[]) => any) | undefined;
     "onUpdate:customData"?: ((...args: any[]) => any) | undefined;
-    "onUpdate:form"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modifications"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modificationView"?: ((...args: any[]) => any) | undefined;
     "onBefore-save"?: ((...args: any[]) => any) | undefined;
     "onModified-data"?: ((...args: any[]) => any) | undefined;
 }>, {
@@ -89,6 +91,7 @@ declare const __VLS_component: import("vue").DefineComponent<ItemCrudConfig, {
     form: import("lkt-vue-kernel").FormConfig;
     title: string;
     mode: ItemCrudMode;
+    modifications: LktObject;
     modelValue: LktObject;
     events: {
         httpStart?: undefined | Function;
@@ -97,6 +100,8 @@ declare const __VLS_component: import("vue").DefineComponent<ItemCrudConfig, {
     editing: boolean;
     perms: import("lkt-vue-kernel").ValidTablePermission[];
     customData: LktObject;
+    visibleView: ModificationView;
+    modificationViews: boolean | Array<ModificationView>;
     editModeButton: ButtonConfig | false;
     dropButton: ButtonConfig | false;
     createButton: ButtonConfig | false;
@@ -115,6 +120,7 @@ declare const __VLS_component: import("vue").DefineComponent<ItemCrudConfig, {
     enabledSaveWithoutChanges: boolean;
     redirectOnCreate: string | ((id: number | string) => string);
     redirectOnDrop: string | (() => string);
+    differencesTableConfig: import("lkt-vue-kernel").TableConfig | ((config: import("lkt-vue-kernel").TableConfig) => import("lkt-vue-kernel").TableConfig);
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-item-crud",
-  "version": "2.0.19",
+  "version": "2.0.20",
   "description": "",
   "type": "module",
   "module": "./dist/build.js",

package/src/components/ButtonNav.vue

@@ -1,11 +1,20 @@
 <script setup lang="ts">
     import { computed, ref, SetupContext, useSlots, watch } from 'vue';
-    import { ButtonConfig, ItemCrudButtonNavVisibility, ItemCrudMode, ItemCrudView, LktObject } from 'lkt-vue-kernel';
+    import {
+        ButtonConfig,
+        ButtonType,
+        ItemCrudButtonNavVisibility,
+        ItemCrudMode,
+        ItemCrudView,
+        LktObject,
+        ModificationView,
+    } from 'lkt-vue-kernel';
     import { HTTPResponse } from 'lkt-http-client';
 
     const emit = defineEmits([
         'update:loading',
         'update:editing',
+        'update:pickedModificationView',
         'create',
         'save',
         'drop',
@@ -13,6 +22,7 @@
 
     const props = withDefaults(defineProps<{
         item: LktObject,
+        modifications: LktObject,
         editing?: boolean
         loading?: boolean
         grouped?: boolean
@@ -20,11 +30,11 @@
         view: ItemCrudView
         mode: ItemCrudMode
 
-        createButton?: ButtonConfig|false
-        updateButton?: ButtonConfig|false
-        dropButton?: ButtonConfig|false
-        editModeButton?: ButtonConfig|false
-        groupButton?: ButtonConfig|boolean
+        createButton?: ButtonConfig | false
+        updateButton?: ButtonConfig | false
+        dropButton?: ButtonConfig | false
+        editModeButton?: ButtonConfig | false
+        groupButton?: ButtonConfig | boolean
         groupButtonAsModalActions?: boolean
 
         dataChanged: boolean
@@ -40,12 +50,21 @@
         httpSuccessRead?: boolean
 
         buttonNavVisibility: ItemCrudButtonNavVisibility
+        modificationView?: boolean | Array<ModificationView>
+        pickedModificationView: string
+        editableView: ModificationView
     }>(), {
         item: () => ({}),
+        modifications: () => ({}),
         editing: false,
         isLoading: false,
     });
 
+    const selectedModificationView = ref(props.pickedModificationView);
+
+    watch(() => props.pickedModificationView, v => selectedModificationView.value = v);
+    watch(selectedModificationView, v => emit('update:pickedModificationView', v));
+
     const slots: SetupContext['slots'] = useSlots();
 
     const saveButtonRef = ref(<HTMLButtonElement | null>null);
@@ -65,19 +84,24 @@
         onButtonLoaded = () => {
             isLoading.value = false;
         },
-        onCreate = ($event: Event|undefined, r: HTTPResponse) => {
+        onCreate = ($event: Event | undefined, r: HTTPResponse) => {
             if (typeof $event === 'undefined') return;
             emit('create', $event, r);
         },
-        onSave = ($event: Event|undefined, r: HTTPResponse) => {
+        onSave = ($event: Event | undefined, r: HTTPResponse) => {
             if (typeof $event === 'undefined') return;
             emit('save', $event, r);
         },
-        onDrop = ($event: Event|undefined, r: HTTPResponse) => {
+        onDrop = ($event: Event | undefined, r: HTTPResponse) => {
             if (typeof $event === 'undefined') return;
             emit('drop', $event, r);
         };
 
+    const computedUpdateData = computed(() => {
+        if (props.editableView === ModificationView.Modifications) return props.modifications;
+        return props.item;
+    })
+
     const doSave = () => {
             if (saveButtonRef.value && typeof saveButtonRef.value.click === 'function') saveButtonRef.value.click();
         },
@@ -124,6 +148,77 @@
             return showSaveButton.value || showDropButton.value || showSwitchButton.value;
         });
 
+    const computedModificationView = computed(() => {
+            if (props.modificationView === false) return [];
+            if (props.modificationView === true) return [
+                ModificationView.Current,
+                ModificationView.Modifications,
+                ModificationView.SplitView,
+                ModificationView.Differences,
+            ];
+            if (Array.isArray(props.modificationView)) return props.modificationView;
+            return [];
+        }),
+        computedModificationSplitButtons = computed(() => {
+
+            let r = [];
+
+            if (computedModificationView.value.includes(ModificationView.Current)) {
+                r.push({
+                    text: 'Current',
+                    icon: 'lkt-icn-see',
+                    disabled: selectedModificationView.value === ModificationView.Current,
+                    events: {
+                        click: () => {
+                            selectedModificationView.value = ModificationView.Current;
+                        }
+                    }
+                });
+            }
+
+            if (computedModificationView.value.includes(ModificationView.Modifications)) {
+                r.push({
+                    text: 'Modifications',
+                    icon: 'lkt-icn-edit',
+                    disabled: selectedModificationView.value === ModificationView.Modifications,
+                    events: {
+                        click: () => {
+                            selectedModificationView.value = ModificationView.Modifications;
+                        }
+                    }
+                });
+            }
+
+            if (computedModificationView.value.includes(ModificationView.SplitView)) {
+                r.push({
+                    text: 'Split View',
+                    icon: 'lkt-icn-columns',
+                    disabled: selectedModificationView.value === ModificationView.SplitView,
+                    events: {
+                        click: () => {
+                            selectedModificationView.value = ModificationView.SplitView;
+                        }
+                    }
+                });
+            }
+
+            if (computedModificationView.value.includes(ModificationView.Differences)) {
+
+                r.push({
+                    text: 'Differences',
+                    icon: 'lkt-icn-balance',
+                    disabled: selectedModificationView.value === ModificationView.Differences,
+                    events: {
+                        click: () => {
+                            selectedModificationView.value = ModificationView.Differences;
+                        }
+                    }
+                });
+            }
+
+            return r;
+        });
+
 </script>
 
 <template>
@@ -136,6 +231,19 @@
                 v-model:checked="isEditing"
                 class="lkt-item-crud--switch-mode-button" />
 
+            <lkt-button
+                v-if="computedModificationView.length > 0"
+                v-bind="<ButtonConfig>{
+                    type: ButtonType.Tooltip,
+                    icon: 'lkt-icn-cross-arrows',
+                    class: 'lkt-item-crud--modifications-button',
+                    splitButtons: computedModificationSplitButtons,
+                    tooltip: {
+                        contentClass: 'lkt-flex-column',
+                    }
+                }"
+            />
+
 
             <template v-if="slots['prev-buttons-ever']" v-show="!isLoading">
                 <slot name="prev-buttons-ever"
@@ -156,32 +264,34 @@
             <lkt-button
                 ref="saveButtonRef"
                 v-show="mode === ItemCrudMode.Update && showSaveButton"
-                v-bind="updateButton"
-                :disabled="!ableToUpdate"
+                v-bind="{
+                    ...updateButton,
+                    resourceData: {
+                        ...updateButton?.resourceData,
+                        ...computedUpdateData
+                    },
+                    disabled: !ableToUpdate
+                }"
                 @loading="onButtonLoading"
                 @loaded="onButtonLoaded"
-                @click="onSave">
-                <slot v-if="!!slots['button-save']" name="button-save" :item="item"
-                      :edit-mode="isEditing"
-                      :is-create="false"
-                      :can-update="canUpdate"
-                      :can-drop="canDrop" />
-            </lkt-button>
+                @click="onSave"
+            />
 
             <lkt-button
                 ref="saveButtonRef"
                 v-show="mode === ItemCrudMode.Create && showSaveButton"
-                v-bind="createButton"
-                :disabled="!ableToCreate"
+                v-bind="{
+                    ...createButton,
+                    resourceData: {
+                        ...createButton?.resourceData,
+                        ...computedUpdateData
+                    },
+                    disabled: !ableToCreate
+                }"
                 @loading="onButtonLoading"
                 @loaded="onButtonLoaded"
-                @click="onCreate">
-                <slot v-if="!!slots['button-save']" name="button-save" :item="item"
-                      :edit-mode="isEditing"
-                      :is-create="true"
-                      :can-update="canUpdate"
-                      :can-drop="canDrop" />
-            </lkt-button>
+                @click="onCreate"
+            />
 
             <lkt-button
                 ref="dropButtonRef"
@@ -190,13 +300,8 @@
                 :disabled="!ableToDrop"
                 @loading="onButtonLoading"
                 @loaded="onButtonLoaded"
-                @click="onDrop">
-                <slot v-if="!!slots['button-drop']" name="button-drop" :item="item"
-                      :edit-mode="isEditing"
-                      :is-create="false"
-                      :can-update="canUpdate"
-                      :can-drop="canDrop" />
-            </lkt-button>
+                @click="onDrop"
+            />
 
             <template v-if="slots.buttons" v-show="isEditing && !isLoading">
                 <slot name="buttons" />
@@ -215,6 +320,18 @@
                         v-model:checked="isEditing"
                         class="lkt-item-crud--switch-mode-button" />
 
+                    <lkt-button
+                        v-if="computedModificationView.length > 0"
+                        v-bind="<ButtonConfig>{
+                            type: ButtonType.Tooltip,
+                            icon: 'lkt-icn-cross-arrows',
+                            class: 'lkt-item-crud--modifications-button',
+                            splitButtons: computedModificationSplitButtons,
+                            tooltip: {
+                                contentClass: 'lkt-flex-column',
+                            }
+                        }"
+                    />
 
                     <template v-if="slots['prev-buttons-ever']" v-show="!isLoading">
                         <slot name="prev-buttons-ever"
@@ -235,32 +352,35 @@
                     <lkt-button
                         ref="saveButtonRef"
                         v-show="mode === ItemCrudMode.Update && showSaveButton"
-                        v-bind="updateButton"
-                        :disabled="!ableToUpdate"
+                        v-bind="{
+                            ...updateButton,
+                            resourceData: {
+                                ...updateButton?.resourceData,
+                                ...computedUpdateData
+                            },
+                            disabled: !ableToUpdate
+                        }"
                         @loading="onButtonLoading"
                         @loaded="onButtonLoaded"
-                        @click="onSave">
-                        <slot v-if="!!slots['button-save']" name="button-save" :item="item"
-                              :edit-mode="isEditing"
-                              :is-create="false"
-                              :can-update="canUpdate"
-                              :can-drop="canDrop" />
-                    </lkt-button>
+                        @click="onSave"
+                    />
 
                     <lkt-button
                         ref="saveButtonRef"
                         v-show="mode === ItemCrudMode.Create && showSaveButton"
-                        v-bind="createButton"
+                        v-bind="{
+                            ...createButton,
+                            resourceData: {
+                                ...createButton?.resourceData,
+                                ...computedUpdateData
+                            },
+                            disabled: !ableToCreate
+                        }"
                         :disabled="!ableToCreate"
                         @loading="onButtonLoading"
                         @loaded="onButtonLoaded"
-                        @click="onCreate">
-                        <slot v-if="!!slots['button-save']" name="button-save" :item="item"
-                              :edit-mode="isEditing"
-                              :is-create="true"
-                              :can-update="canUpdate"
-                              :can-drop="canDrop" />
-                    </lkt-button>
+                        @click="onCreate"
+                    />
 
                     <lkt-button
                         ref="dropButtonRef"
@@ -269,13 +389,8 @@
                         :disabled="!ableToDrop"
                         @loading="onButtonLoading"
                         @loaded="onButtonLoaded"
-                        @click="onDrop">
-                        <slot v-if="!!slots['button-drop']" name="button-drop" :item="item"
-                              :edit-mode="isEditing"
-                              :is-create="false"
-                              :can-update="canUpdate"
-                              :can-drop="canDrop" />
-                    </lkt-button>
+                        @click="onDrop"
+                    />
 
                     <template v-if="slots.buttons" v-show="isEditing && !isLoading">
                         <slot name="buttons" />
@@ -305,32 +420,34 @@
             <lkt-button
                 ref="saveButtonRef"
                 v-show="mode === ItemCrudMode.Update && showSaveButton"
-                v-bind="updateButton"
-                :disabled="!ableToUpdate"
+                v-bind="{
+                    ...updateButton,
+                    resourceData: {
+                        ...updateButton?.resourceData,
+                        ...computedUpdateData
+                    },
+                    disabled: !ableToUpdate
+                }"
                 @loading="onButtonLoading"
                 @loaded="onButtonLoaded"
-                @click="onSave">
-                <slot v-if="!!slots['button-save']" name="button-save" :item="item"
-                      :edit-mode="isEditing"
-                      :is-create="false"
-                      :can-update="canUpdate"
-                      :can-drop="canDrop" />
-            </lkt-button>
+                @click="onSave"
+            />
 
             <lkt-button
                 ref="saveButtonRef"
                 v-show="mode === ItemCrudMode.Create && showSaveButton"
-                v-bind="createButton"
-                :disabled="!ableToCreate"
+                v-bind="{
+                    ...createButton,
+                    resourceData: {
+                        ...createButton?.resourceData,
+                        ...computedUpdateData
+                    },
+                    disabled: !ableToCreate
+                }"
                 @loading="onButtonLoading"
                 @loaded="onButtonLoaded"
-                @click="onCreate">
-                <slot v-if="!!slots['button-save']" name="button-save" :item="item"
-                      :edit-mode="isEditing"
-                      :is-create="true"
-                      :can-update="canUpdate"
-                      :can-drop="false" />
-            </lkt-button>
+                @click="onCreate"
+            />
 
             <lkt-button
                 ref="dropButtonRef"
@@ -339,18 +456,26 @@
                 :disabled="!ableToDrop"
                 @loading="onButtonLoading"
                 @loaded="onButtonLoaded"
-                @click="onDrop">
-                <slot v-if="!!slots['button-drop']" name="button-drop" :item="item"
-                      :edit-mode="isEditing"
-                      :is-create="false"
-                      :can-update="canUpdate"
-                      :can-drop="canDrop" />
-            </lkt-button>
+                @click="onDrop"
+            />
 
             <div class="lkt-item-crud-buttons" v-if="slots.buttons" v-show="isEditing && !isLoading">
                 <slot name="buttons" />
             </div>
 
+            <lkt-button
+                v-if="computedModificationView.length > 0"
+                v-bind="<ButtonConfig>{
+                    type: ButtonType.Tooltip,
+                    icon: 'lkt-icn-cross-arrows',
+                    class: 'lkt-item-crud--modifications-button',
+                    splitButtons: computedModificationSplitButtons,
+                    tooltip: {
+                        contentClass: 'lkt-flex-column',
+                    }
+                }"
+            />
+
             <lkt-button
                 v-if="showSwitchButton"
                 v-bind="editModeButton"