lkt-item-crud 2.0.19 → 2.0.21

package/dist/build.js

@@ -1,35 +1,36 @@
-import { defineComponent as we, useSlots as Re, ref as c, watch as D, computed as U, resolveComponent as le, createElementBlock as N, createCommentVNode as d, openBlock as m, createBlock as O, Fragment as Se, renderSlot as s, withDirectives as $, mergeProps as R, unref as u, createVNode as q, withCtx as C, vShow as L, mergeDefaults as Ne, nextTick as Ve, onMounted as je, resolveDynamicComponent as Pe, createSlots as re, createElementVNode as Xe, toDisplayString as Fe } from "vue";
-import { httpCall as We } from "lkt-http-client";
-import { DataState as Ie } from "lkt-data-state";
-import { ItemCrudMode as S, ItemCrudButtonNavVisibility as Me, TablePermission as ke, ensureButtonConfig as z, LktSettings as i, ItemCrudView as Te, ItemCrudButtonNavPosition as De, NotificationType as J, getDefaultValues as Ke, ItemCrud as Ge, ToastPositionX as Z } from "lkt-vue-kernel";
-import { closeModal as He, updateModalKey as qe } from "lkt-modal";
-import { __ as ze } from "lkt-i18n";
-import { openToast as _ } from "lkt-toast";
-import { useRouter as Je } from "vue-router";
-const te = class te {
+import { defineComponent as Fe, ref as d, watch as f, useSlots as Xe, computed as y, resolveComponent as ye, createElementBlock as J, createCommentVNode as p, openBlock as v, createBlock as A, Fragment as $e, renderSlot as U, withDirectives as F, mergeProps as S, normalizeProps as Ve, unref as n, createVNode as Y, vShow as X, withCtx as _, mergeDefaults as ze, nextTick as Qe, onMounted as Ye, resolveDynamicComponent as Ze, createSlots as ge, createElementVNode as _e, toDisplayString as xe } from "vue";
+import { httpCall as et } from "lkt-http-client";
+import { DataState as ke } from "lkt-data-state";
+import { ModificationView as g, ItemCrudMode as T, ItemCrudButtonNavVisibility as je, ButtonType as Te, TablePermission as Ie, ensureButtonConfig as Z, LktSettings as s, ItemCrudView as Pe, ItemCrudButtonNavPosition as Re, NotificationType as ee, getDefaultValues as tt, ItemCrud as ot, ToastPositionX as de } from "lkt-vue-kernel";
+import { closeModal as at, updateModalKey as it } from "lkt-modal";
+import { __ as nt } from "lkt-i18n";
+import { openToast as re } from "lkt-toast";
+import { useRouter as ut } from "vue-router";
+const ve = class ve {
 };
-te.debugEnabled = !1, te.defaultSaveIcon = "", te.defaultDropIcon = "";
-let x = te;
-const k = (...T) => {
-  x.debugEnabled && console.info("[LktItemCrud] ", ...T);
-}, gt = (T = !0) => {
-  x.debugEnabled = T;
-}, Qe = {
+ve.debugEnabled = !1, ve.defaultSaveIcon = "", ve.defaultDropIcon = "";
+let se = ve;
+const D = (...B) => {
+  se.debugEnabled && console.info("[LktItemCrud] ", ...B);
+}, It = (B = !0) => {
+  se.debugEnabled = B;
+}, lt = {
   key: 0,
   class: "lkt-item-crud-buttons"
-}, Ye = {
+}, dt = {
   key: 0,
   class: "lkt-item-crud-buttons"
-}, Ze = {
+}, rt = {
   key: 1,
   class: "lkt-item-crud-buttons"
-}, _e = {
+}, st = {
   key: 2,
   class: "lkt-item-crud-buttons"
-}, he = /* @__PURE__ */ we({
+}, Ae = /* @__PURE__ */ Fe({
   __name: "ButtonNav",
   props: {
     item: { default: () => ({}) },
+    modifications: { default: () => ({}) },
     editing: { type: Boolean, default: !1 },
     loading: { type: Boolean },
     grouped: { type: Boolean },
@@ -50,355 +51,391 @@ const k = (...T) => {
     canSwitchEditMode: { type: Boolean },
     perms: {},
     httpSuccessRead: { type: Boolean },
-    buttonNavVisibility: {}
+    buttonNavVisibility: {},
+    modificationView: { type: [Boolean, Array] },
+    pickedModificationView: {},
+    editableView: {}
   },
   emits: [
     "update:loading",
     "update:editing",
+    "update:pickedModificationView",
     "create",
     "save",
     "drop"
   ],
-  setup(T, { expose: ae, emit: ie }) {
-    const a = ie, r = T, l = Re(), b = c(null), v = c(null), n = c(r.loading);
-    D(() => r.loading, (e) => n.value = e), D(n, (e) => a("update:loading", e));
-    const g = c(r.editing);
-    D(() => r.editing, (e) => g.value = e), D(g, (e) => a("update:editing", e));
-    const f = () => {
-      n.value = !0;
-    }, y = () => {
-      n.value = !1;
-    }, X = (e, B) => {
-      typeof e > "u" || a("create", e, B);
-    }, A = (e, B) => {
-      typeof e > "u" || a("save", e, B);
-    }, F = (e, B) => {
-      typeof e > "u" || a("drop", e, B);
-    };
-    ae({
+  setup(B, { expose: K, emit: te }) {
+    const o = te, i = B, C = d(i.pickedModificationView);
+    f(() => i.pickedModificationView, (t) => C.value = t), f(C, (t) => o("update:pickedModificationView", t));
+    const c = Xe(), r = d(null), u = d(null), m = d(i.loading);
+    f(() => i.loading, (t) => m.value = t), f(m, (t) => o("update:loading", t));
+    const O = d(i.editing);
+    f(() => i.editing, (t) => O.value = t), f(O, (t) => o("update:editing", t));
+    const b = () => {
+      m.value = !0;
+    }, k = () => {
+      m.value = !1;
+    }, x = (t, w) => {
+      typeof t > "u" || o("create", t, w);
+    }, N = (t, w) => {
+      typeof t > "u" || o("save", t, w);
+    }, Q = (t, w) => {
+      typeof t > "u" || o("drop", t, w);
+    }, I = y(() => i.editableView === g.Modifications ? i.modifications : i.item);
+    K({
       doSave: () => {
-        b.value && typeof b.value.click == "function" && b.value.click();
+        r.value && typeof r.value.click == "function" && r.value.click();
       },
       doDrop: () => {
-        v.value && typeof v.value.click == "function" && v.value.click();
+        u.value && typeof u.value.click == "function" && u.value.click();
       }
     });
-    const M = U(() => !r.canDrop || r.dropButton === !1 ? !1 : !r.canUpdate && r.canDrop ? !0 : !n.value && r.editing && r.httpSuccessRead), V = U(() => r.mode === S.Create && r.createButton === !1 || r.mode === S.Update && r.updateButton === !1 || n.value ? !1 : r.editing && r.httpSuccessRead), E = U(() => r.editModeButton === !1 || !r.canSwitchEditMode || !r.canUpdate && !r.canDrop || !r.canUpdate && r.canDrop ? !1 : !n.value && r.mode !== S.Create && r.httpSuccessRead), ee = U(() => r.buttonNavVisibility === Me.Always || l["prev-buttons-ever"] ? !0 : r.buttonNavVisibility === Me.Never ? !1 : V.value || M.value || E.value);
-    return (e, B) => {
-      const h = le("lkt-button");
-      return ee.value ? (m(), N("div", Qe, [
-        e.grouped && e.groupButtonAsModalActions ? (m(), N(Se, { key: 0 }, [
-          E.value ? (m(), O(h, R({ key: 0 }, e.editModeButton, {
-            checked: g.value,
-            "onUpdate:checked": B[0] || (B[0] = (j) => g.value = j),
+    const M = y(() => !i.canDrop || i.dropButton === !1 ? !1 : !i.canUpdate && i.canDrop ? !0 : !m.value && i.editing && i.httpSuccessRead), W = y(() => i.mode === T.Create && i.createButton === !1 || i.mode === T.Update && i.updateButton === !1 || m.value ? !1 : i.editing && i.httpSuccessRead), E = y(() => i.editModeButton === !1 || !i.canSwitchEditMode || !i.canUpdate && !i.canDrop || !i.canUpdate && i.canDrop ? !1 : !m.value && i.mode !== T.Create && i.httpSuccessRead), pe = y(() => i.buttonNavVisibility === je.Always || c["prev-buttons-ever"] ? !0 : i.buttonNavVisibility === je.Never ? !1 : W.value || M.value || E.value), z = y(() => i.modificationView === !1 ? [] : i.modificationView === !0 ? [
+      g.Current,
+      g.Modifications,
+      g.SplitView,
+      g.Differences
+    ] : Array.isArray(i.modificationView) ? i.modificationView : []), H = y(() => {
+      let t = [];
+      return z.value.includes(g.Current) && t.push({
+        text: "Current",
+        icon: "lkt-icn-see",
+        disabled: C.value === g.Current,
+        events: {
+          click: () => {
+            C.value = g.Current;
+          }
+        }
+      }), z.value.includes(g.Modifications) && t.push({
+        text: "Modifications",
+        icon: "lkt-icn-edit",
+        disabled: C.value === g.Modifications,
+        events: {
+          click: () => {
+            C.value = g.Modifications;
+          }
+        }
+      }), z.value.includes(g.SplitView) && t.push({
+        text: "Split View",
+        icon: "lkt-icn-columns",
+        disabled: C.value === g.SplitView,
+        events: {
+          click: () => {
+            C.value = g.SplitView;
+          }
+        }
+      }), z.value.includes(g.Differences) && t.push({
+        text: "Differences",
+        icon: "lkt-icn-balance",
+        disabled: C.value === g.Differences,
+        events: {
+          click: () => {
+            C.value = g.Differences;
+          }
+        }
+      }), t;
+    });
+    return (t, w) => {
+      var L, $, j, P;
+      const h = ye("lkt-button");
+      return pe.value ? (v(), J("div", lt, [
+        t.grouped && t.groupButtonAsModalActions ? (v(), J($e, { key: 0 }, [
+          E.value ? (v(), A(h, S({ key: 0 }, t.editModeButton, {
+            checked: O.value,
+            "onUpdate:checked": w[0] || (w[0] = (G) => O.value = G),
             class: "lkt-item-crud--switch-mode-button"
-          }), null, 16, ["checked"])) : d("", !0),
-          u(l)["prev-buttons-ever"] ? s(e.$slots, "prev-buttons-ever", {
-            key: 1,
-            canUpdate: e.canUpdate,
-            canDrop: e.canDrop,
-            perms: e.perms
-          }) : d("", !0),
-          u(l)["prev-buttons"] ? s(e.$slots, "prev-buttons", {
+          }), null, 16, ["checked"])) : p("", !0),
+          z.value.length > 0 ? (v(), A(h, Ve(S({ key: 1 }, {
+            type: n(Te).Tooltip,
+            icon: "lkt-icn-cross-arrows",
+            class: "lkt-item-crud--modifications-button",
+            splitButtons: H.value,
+            tooltip: {
+              contentClass: "lkt-flex-column"
+            }
+          })), null, 16)) : p("", !0),
+          n(c)["prev-buttons-ever"] ? U(t.$slots, "prev-buttons-ever", {
             key: 2,
-            canUpdate: e.canUpdate,
-            canDrop: e.canDrop,
-            perms: e.perms
-          }) : d("", !0),
-          $(q(h, R({
+            canUpdate: t.canUpdate,
+            canDrop: t.canDrop,
+            perms: t.perms
+          }) : p("", !0),
+          n(c)["prev-buttons"] ? U(t.$slots, "prev-buttons", {
+            key: 3,
+            canUpdate: t.canUpdate,
+            canDrop: t.canDrop,
+            perms: t.perms
+          }) : p("", !0),
+          F(Y(h, S({
             ref_key: "saveButtonRef",
-            ref: b
-          }, e.updateButton, {
-            disabled: !e.ableToUpdate,
-            onLoading: f,
-            onLoaded: y,
-            onClick: A
-          }), {
-            default: C(() => [
-              u(l)["button-save"] ? s(e.$slots, "button-save", {
-                key: 0,
-                item: e.item,
-                editMode: g.value,
-                isCreate: !1,
-                canUpdate: e.canUpdate,
-                canDrop: e.canDrop
-              }) : d("", !0)
-            ]),
-            _: 3
-          }, 16, ["disabled"]), [
-            [L, e.mode === u(S).Update && V.value]
+            ref: r
+          }, {
+            ...t.updateButton,
+            resourceData: {
+              ...(L = t.updateButton) == null ? void 0 : L.resourceData,
+              ...I.value
+            },
+            disabled: !t.ableToUpdate
+          }, {
+            onLoading: b,
+            onLoaded: k,
+            onClick: N
+          }), null, 16), [
+            [X, t.mode === n(T).Update && W.value]
           ]),
-          $(q(h, R({
+          F(Y(h, S({
             ref_key: "saveButtonRef",
-            ref: b
-          }, e.createButton, {
-            disabled: !e.ableToCreate,
-            onLoading: f,
-            onLoaded: y,
-            onClick: X
-          }), {
-            default: C(() => [
-              u(l)["button-save"] ? s(e.$slots, "button-save", {
-                key: 0,
-                item: e.item,
-                editMode: g.value,
-                isCreate: !0,
-                canUpdate: e.canUpdate,
-                canDrop: e.canDrop
-              }) : d("", !0)
-            ]),
-            _: 3
-          }, 16, ["disabled"]), [
-            [L, e.mode === u(S).Create && V.value]
+            ref: r
+          }, {
+            ...t.createButton,
+            resourceData: {
+              ...($ = t.createButton) == null ? void 0 : $.resourceData,
+              ...I.value
+            },
+            disabled: !t.ableToCreate
+          }, {
+            onLoading: b,
+            onLoaded: k,
+            onClick: x
+          }), null, 16), [
+            [X, t.mode === n(T).Create && W.value]
           ]),
-          $(q(h, R({
+          F(Y(h, S({
             ref_key: "dropButtonRef",
-            ref: v
-          }, e.dropButton, {
-            disabled: !e.ableToDrop,
-            onLoading: f,
-            onLoaded: y,
-            onClick: F
-          }), {
-            default: C(() => [
-              u(l)["button-drop"] ? s(e.$slots, "button-drop", {
-                key: 0,
-                item: e.item,
-                editMode: g.value,
-                isCreate: !1,
-                canUpdate: e.canUpdate,
-                canDrop: e.canDrop
-              }) : d("", !0)
-            ]),
-            _: 3
-          }, 16, ["disabled"]), [
-            [L, M.value && e.mode !== u(S).Create]
+            ref: u
+          }, t.dropButton, {
+            disabled: !t.ableToDrop,
+            onLoading: b,
+            onLoaded: k,
+            onClick: Q
+          }), null, 16, ["disabled"]), [
+            [X, M.value && t.mode !== n(T).Create]
           ]),
-          u(l).buttons ? s(e.$slots, "buttons", { key: 3 }) : d("", !0)
-        ], 64)) : e.grouped ? (m(), O(h, R({
+          n(c).buttons ? U(t.$slots, "buttons", { key: 4 }) : p("", !0)
+        ], 64)) : t.grouped ? (v(), A(h, S({
           key: 1,
           ref: "groupButton"
-        }, e.groupButton, { class: "lkt-item-crud-group-button" }), {
-          split: C(() => [
-            E.value ? (m(), O(h, R({ key: 0 }, e.editModeButton, {
-              checked: g.value,
-              "onUpdate:checked": B[1] || (B[1] = (j) => g.value = j),
-              class: "lkt-item-crud--switch-mode-button"
-            }), null, 16, ["checked"])) : d("", !0),
-            u(l)["prev-buttons-ever"] ? s(e.$slots, "prev-buttons-ever", {
-              key: 1,
-              canUpdate: e.canUpdate,
-              canDrop: e.canDrop,
-              perms: e.perms
-            }) : d("", !0),
-            u(l)["prev-buttons"] ? s(e.$slots, "prev-buttons", {
-              key: 2,
-              canUpdate: e.canUpdate,
-              canDrop: e.canDrop,
-              perms: e.perms
-            }) : d("", !0),
-            $(q(h, R({
-              ref_key: "saveButtonRef",
-              ref: b
-            }, e.updateButton, {
-              disabled: !e.ableToUpdate,
-              onLoading: f,
-              onLoaded: y,
-              onClick: A
-            }), {
-              default: C(() => [
-                u(l)["button-save"] ? s(e.$slots, "button-save", {
-                  key: 0,
-                  item: e.item,
-                  editMode: g.value,
-                  isCreate: !1,
-                  canUpdate: e.canUpdate,
-                  canDrop: e.canDrop
-                }) : d("", !0)
+        }, t.groupButton, { class: "lkt-item-crud-group-button" }), {
+          split: _(() => {
+            var G, ue;
+            return [
+              E.value ? (v(), A(h, S({ key: 0 }, t.editModeButton, {
+                checked: O.value,
+                "onUpdate:checked": w[1] || (w[1] = (le) => O.value = le),
+                class: "lkt-item-crud--switch-mode-button"
+              }), null, 16, ["checked"])) : p("", !0),
+              z.value.length > 0 ? (v(), A(h, Ve(S({ key: 1 }, {
+                type: n(Te).Tooltip,
+                icon: "lkt-icn-cross-arrows",
+                class: "lkt-item-crud--modifications-button",
+                splitButtons: H.value,
+                tooltip: {
+                  contentClass: "lkt-flex-column"
+                }
+              })), null, 16)) : p("", !0),
+              n(c)["prev-buttons-ever"] ? U(t.$slots, "prev-buttons-ever", {
+                key: 2,
+                canUpdate: t.canUpdate,
+                canDrop: t.canDrop,
+                perms: t.perms
+              }) : p("", !0),
+              n(c)["prev-buttons"] ? U(t.$slots, "prev-buttons", {
+                key: 3,
+                canUpdate: t.canUpdate,
+                canDrop: t.canDrop,
+                perms: t.perms
+              }) : p("", !0),
+              F(Y(h, S({
+                ref_key: "saveButtonRef",
+                ref: r
+              }, {
+                ...t.updateButton,
+                resourceData: {
+                  ...(G = t.updateButton) == null ? void 0 : G.resourceData,
+                  ...I.value
+                },
+                disabled: !t.ableToUpdate
+              }, {
+                onLoading: b,
+                onLoaded: k,
+                onClick: N
+              }), null, 16), [
+                [X, t.mode === n(T).Update && W.value]
               ]),
-              _: 3
-            }, 16, ["disabled"]), [
-              [L, e.mode === u(S).Update && V.value]
-            ]),
-            $(q(h, R({
-              ref_key: "saveButtonRef",
-              ref: b
-            }, e.createButton, {
-              disabled: !e.ableToCreate,
-              onLoading: f,
-              onLoaded: y,
-              onClick: X
-            }), {
-              default: C(() => [
-                u(l)["button-save"] ? s(e.$slots, "button-save", {
-                  key: 0,
-                  item: e.item,
-                  editMode: g.value,
-                  isCreate: !0,
-                  canUpdate: e.canUpdate,
-                  canDrop: e.canDrop
-                }) : d("", !0)
+              F(Y(h, S({
+                ref_key: "saveButtonRef",
+                ref: r
+              }, {
+                ...t.createButton,
+                resourceData: {
+                  ...(ue = t.createButton) == null ? void 0 : ue.resourceData,
+                  ...I.value
+                },
+                disabled: !t.ableToCreate
+              }, {
+                disabled: !t.ableToCreate,
+                onLoading: b,
+                onLoaded: k,
+                onClick: x
+              }), null, 16, ["disabled"]), [
+                [X, t.mode === n(T).Create && W.value]
               ]),
-              _: 3
-            }, 16, ["disabled"]), [
-              [L, e.mode === u(S).Create && V.value]
-            ]),
-            $(q(h, R({
-              ref_key: "dropButtonRef",
-              ref: v
-            }, e.dropButton, {
-              disabled: !e.ableToDrop,
-              onLoading: f,
-              onLoaded: y,
-              onClick: F
-            }), {
-              default: C(() => [
-                u(l)["button-drop"] ? s(e.$slots, "button-drop", {
-                  key: 0,
-                  item: e.item,
-                  editMode: g.value,
-                  isCreate: !1,
-                  canUpdate: e.canUpdate,
-                  canDrop: e.canDrop
-                }) : d("", !0)
+              F(Y(h, S({
+                ref_key: "dropButtonRef",
+                ref: u
+              }, t.dropButton, {
+                disabled: !t.ableToDrop,
+                onLoading: b,
+                onLoaded: k,
+                onClick: Q
+              }), null, 16, ["disabled"]), [
+                [X, M.value && t.mode !== n(T).Create]
               ]),
-              _: 3
-            }, 16, ["disabled"]), [
-              [L, M.value && e.mode !== u(S).Create]
-            ]),
-            u(l).buttons ? s(e.$slots, "buttons", { key: 3 }) : d("", !0)
-          ]),
+              n(c).buttons ? U(t.$slots, "buttons", { key: 4 }) : p("", !0)
+            ];
+          }),
           _: 3
-        }, 16)) : (m(), N(Se, { key: 2 }, [
-          u(l)["prev-buttons-ever"] ? $((m(), N("div", Ye, [
-            s(e.$slots, "prev-buttons-ever", {
-              canUpdate: e.canUpdate,
-              canDrop: e.canDrop,
-              perms: e.perms
+        }, 16)) : (v(), J($e, { key: 2 }, [
+          n(c)["prev-buttons-ever"] ? F((v(), J("div", dt, [
+            U(t.$slots, "prev-buttons-ever", {
+              canUpdate: t.canUpdate,
+              canDrop: t.canDrop,
+              perms: t.perms
             })
           ], 512)), [
-            [L, !n.value]
-          ]) : d("", !0),
-          u(l)["prev-buttons"] ? $((m(), N("div", Ze, [
-            s(e.$slots, "prev-buttons", {
-              canUpdate: e.canUpdate,
-              canDrop: e.canDrop,
-              perms: e.perms
+            [X, !m.value]
+          ]) : p("", !0),
+          n(c)["prev-buttons"] ? F((v(), J("div", rt, [
+            U(t.$slots, "prev-buttons", {
+              canUpdate: t.canUpdate,
+              canDrop: t.canDrop,
+              perms: t.perms
             })
           ], 512)), [
-            [L, g.value && !n.value]
-          ]) : d("", !0),
-          $(q(h, R({
+            [X, O.value && !m.value]
+          ]) : p("", !0),
+          F(Y(h, S({
             ref_key: "saveButtonRef",
-            ref: b
-          }, e.updateButton, {
-            disabled: !e.ableToUpdate,
-            onLoading: f,
-            onLoaded: y,
-            onClick: A
-          }), {
-            default: C(() => [
-              u(l)["button-save"] ? s(e.$slots, "button-save", {
-                key: 0,
-                item: e.item,
-                editMode: g.value,
-                isCreate: !1,
-                canUpdate: e.canUpdate,
-                canDrop: e.canDrop
-              }) : d("", !0)
-            ]),
-            _: 3
-          }, 16, ["disabled"]), [
-            [L, e.mode === u(S).Update && V.value]
+            ref: r
+          }, {
+            ...t.updateButton,
+            resourceData: {
+              ...(j = t.updateButton) == null ? void 0 : j.resourceData,
+              ...I.value
+            },
+            disabled: !t.ableToUpdate
+          }, {
+            onLoading: b,
+            onLoaded: k,
+            onClick: N
+          }), null, 16), [
+            [X, t.mode === n(T).Update && W.value]
           ]),
-          $(q(h, R({
+          F(Y(h, S({
             ref_key: "saveButtonRef",
-            ref: b
-          }, e.createButton, {
-            disabled: !e.ableToCreate,
-            onLoading: f,
-            onLoaded: y,
-            onClick: X
-          }), {
-            default: C(() => [
-              u(l)["button-save"] ? s(e.$slots, "button-save", {
-                key: 0,
-                item: e.item,
-                editMode: g.value,
-                isCreate: !0,
-                canUpdate: e.canUpdate,
-                canDrop: !1
-              }) : d("", !0)
-            ]),
-            _: 3
-          }, 16, ["disabled"]), [
-            [L, e.mode === u(S).Create && V.value]
+            ref: r
+          }, {
+            ...t.createButton,
+            resourceData: {
+              ...(P = t.createButton) == null ? void 0 : P.resourceData,
+              ...I.value
+            },
+            disabled: !t.ableToCreate
+          }, {
+            onLoading: b,
+            onLoaded: k,
+            onClick: x
+          }), null, 16), [
+            [X, t.mode === n(T).Create && W.value]
           ]),
-          $(q(h, R({
+          F(Y(h, S({
             ref_key: "dropButtonRef",
-            ref: v
-          }, e.dropButton, {
-            disabled: !e.ableToDrop,
-            onLoading: f,
-            onLoaded: y,
-            onClick: F
-          }), {
-            default: C(() => [
-              u(l)["button-drop"] ? s(e.$slots, "button-drop", {
-                key: 0,
-                item: e.item,
-                editMode: g.value,
-                isCreate: !1,
-                canUpdate: e.canUpdate,
-                canDrop: e.canDrop
-              }) : d("", !0)
-            ]),
-            _: 3
-          }, 16, ["disabled"]), [
-            [L, M.value && e.mode !== u(S).Create]
+            ref: u
+          }, t.dropButton, {
+            disabled: !t.ableToDrop,
+            onLoading: b,
+            onLoaded: k,
+            onClick: Q
+          }), null, 16, ["disabled"]), [
+            [X, M.value && t.mode !== n(T).Create]
           ]),
-          u(l).buttons ? $((m(), N("div", _e, [
-            s(e.$slots, "buttons")
+          n(c).buttons ? F((v(), J("div", st, [
+            U(t.$slots, "buttons")
           ], 512)), [
-            [L, g.value && !n.value]
-          ]) : d("", !0),
-          E.value ? (m(), O(h, R({ key: 3 }, e.editModeButton, {
-            checked: g.value,
-            "onUpdate:checked": B[2] || (B[2] = (j) => g.value = j),
+            [X, O.value && !m.value]
+          ]) : p("", !0),
+          z.value.length > 0 ? (v(), A(h, Ve(S({ key: 3 }, {
+            type: n(Te).Tooltip,
+            icon: "lkt-icn-cross-arrows",
+            class: "lkt-item-crud--modifications-button",
+            splitButtons: H.value,
+            tooltip: {
+              contentClass: "lkt-flex-column"
+            }
+          })), null, 16)) : p("", !0),
+          E.value ? (v(), A(h, S({ key: 4 }, t.editModeButton, {
+            checked: O.value,
+            "onUpdate:checked": w[2] || (w[2] = (G) => O.value = G),
             class: "lkt-item-crud--switch-mode-button"
-          }), null, 16, ["checked"])) : d("", !0)
+          }), null, 16, ["checked"])) : p("", !0)
         ], 64))
-      ])) : d("", !0);
+      ])) : p("", !0);
     };
   }
-}), xe = { class: "lkt-item-crud" }, et = {
+}), pt = (B, K, te) => {
+  let o = new ke(JSON.parse(JSON.stringify(B)), {
+    onlyProps: Je(te),
+    recursiveOnlyProps: !1
+  });
+  return o.increment(JSON.parse(JSON.stringify(K))), o;
+}, Je = (B) => {
+  if (B.items === void 0) return [];
+  if (B.items.length === 0) return [];
+  let K = [];
+  for (let te in B.items) {
+    let o = B.items[te];
+    switch (o.type) {
+      case "field":
+        o.key !== void 0 && K.push(o.key);
+        break;
+      case "form":
+        o.form && (K = [...K, ...Je(o.form)]);
+        break;
+    }
+  }
+  return K;
+}, vt = { class: "lkt-item-crud" }, ct = {
   key: 0,
   class: "lkt-item-crud_header"
-}, tt = {
+}, ft = {
   key: 0,
   class: "lkt-item-crud_header-slot"
-}, at = {
+}, mt = {
   key: 1,
   class: "lkt-item-crud_header-title"
-}, ot = {
+}, bt = {
   key: 2,
   class: "lkt-item-crud_header-slot"
-}, ut = {
+}, gt = {
   key: 2,
   class: "lkt-item-crud_content"
-}, nt = {
+}, yt = {
   key: 0,
   class: "lkt-grid-1"
-}, dt = /* @__PURE__ */ we({
+}, kt = /* @__PURE__ */ Fe({
   __name: "LktItemCrud",
-  props: /* @__PURE__ */ Ne({
+  props: /* @__PURE__ */ ze({
     modelValue: {},
+    modifications: {},
     editing: { type: Boolean },
     perms: {},
     customData: {},
     form: {},
+    formUiConfig: {},
     mode: {},
     view: {},
+    visibleView: {},
+    modificationViews: { type: [Boolean, Array] },
     editModeButton: { type: [Object, Boolean] },
     dropButton: { type: [Object, Boolean] },
     createButton: { type: [Object, Boolean] },
@@ -418,14 +455,16 @@ const k = (...T) => {
     enabledSaveWithoutChanges: { type: Boolean },
     redirectOnCreate: { type: [String, Function] },
     redirectOnDrop: { type: [String, Function] },
+    differencesTableConfig: { type: [Object, Function] },
     events: {}
-  }, Ke(Ge)),
+  }, tt(ot)),
   emits: [
     "update:modelValue",
     "update:editing",
     "update:perms",
     "update:customData",
-    "update:form",
+    "update:modifications",
+    "update:modificationView",
     "read",
     "create",
     "update",
@@ -435,418 +474,453 @@ const k = (...T) => {
     "error",
     "modified-data"
   ],
-  setup(T, { expose: ae, emit: ie }) {
-    const a = T, r = Je(), l = Re(), b = ie, v = c(!0), n = c(a.modelValue), g = c(a.customData), f = c(a.perms), y = c(a.editing), X = c(!1), A = c(!1), F = c(!1), W = c(200), I = c(new Ie(n.value, a.dataStateConfig)), M = c(!1), V = c(new Ie(a.readData)), E = c(a.mode === S.Create), ee = c(!1), e = c(!1), B = c(null), h = U(() => !E.value && Array.isArray(f.value) && f.value.includes(ke.Update)), j = U(() => !E.value && Array.isArray(f.value) && f.value.includes(ke.Drop)), se = U(() => !E.value && Array.isArray(f.value) && f.value.includes(ke.SwitchEditMode));
-    D(() => a.mode, (t) => {
-      E.value = t === S.Create;
-    }), D(() => a.perms, (t) => {
-      f.value = t;
-    }), D(f, (t) => {
-      b("update:perms", t);
-    }), D(() => a.customData, (t) => {
-      g.value = t;
-    }), D(g, (t) => {
-      b("update:customData", t);
-    });
-    const K = c(z(a.createButton, i.defaultCreateButton)), G = c(z(a.updateButton, i.defaultUpdateButton)), H = c(z(a.dropButton, i.defaultDropButton)), oe = c(z(a.editModeButton, i.defaultEditModeButton)), pe = c(z(a.groupButton, i.defaultGroupButton));
-    D(() => a.createButton, (t) => {
-      K.value = z(t, i.defaultCreateButton);
-    }, { deep: !0 }), D(() => a.updateButton, (t) => {
-      G.value = z(t, i.defaultUpdateButton);
-    }, { deep: !0 }), D(() => a.dropButton, (t) => {
-      H.value = z(t, i.defaultDropButton);
-    }, { deep: !0 }), D(() => a.editModeButton, (t) => {
-      oe.value = z(t, i.defaultEditModeButton);
+  setup(B, { expose: K, emit: te }) {
+    const o = B, i = ut(), C = Xe(), c = te, r = d(!0), u = d(o.modelValue), m = d(o.modifications), O = d(o.customData), b = d(o.perms), k = d(o.editing), x = d(!1), N = d(!1), Q = d(!1), I = d(200), R = d(new ke(u.value, o.dataStateConfig)), ne = d(new ke(m.value, o.dataStateConfig)), M = d(!1), W = d(new ke(o.readData)), E = d(o.mode === T.Create), pe = d(!1), z = d(!1), H = d(null), t = y(() => !E.value && Array.isArray(b.value) && b.value.includes(Ie.Update)), w = y(() => !E.value && Array.isArray(b.value) && b.value.includes(Ie.Drop)), h = y(() => !E.value && Array.isArray(b.value) && b.value.includes(Ie.SwitchEditMode)), L = d(o.visibleView);
+    f(() => o.visibleView, (e) => {
+      L.value = e;
+    }), f(L, (e) => {
+      c("update:modificationView", e);
+    }), f(() => o.mode, (e) => {
+      E.value = e === T.Create;
+    }), f(() => o.perms, (e) => {
+      b.value = e;
+    }), f(b, (e) => {
+      c("update:perms", e);
+    }), f(() => o.customData, (e) => {
+      O.value = e;
+    }), f(O, (e) => {
+      c("update:customData", e);
+    }), f(() => o.modifications, (e) => {
+      ne.value.increment(e), m.value = e;
+    }, { deep: !0 }), f(m, (e) => {
+      Ee(), ne.value.increment(e), oe.value === g.Modifications && (M.value = ne.value.changed()), c("update:modifications", e);
+    }, { deep: !0 });
+    const $ = d(Z(o.createButton, s.defaultCreateButton)), j = d(Z(o.updateButton, s.defaultUpdateButton)), P = d(Z(o.dropButton, s.defaultDropButton)), G = d(Z(o.editModeButton, s.defaultEditModeButton)), ue = d(Z(o.groupButton, s.defaultGroupButton));
+    f(() => o.createButton, (e) => {
+      $.value = Z(e, s.defaultCreateButton);
+    }, { deep: !0 }), f(() => o.updateButton, (e) => {
+      j.value = Z(e, s.defaultUpdateButton);
+    }, { deep: !0 }), f(() => o.dropButton, (e) => {
+      P.value = Z(e, s.defaultDropButton);
+    }, { deep: !0 }), f(() => o.editModeButton, (e) => {
+      G.value = Z(e, s.defaultEditModeButton);
     }, { deep: !0 });
-    const ue = async () => {
-      var t, o, P;
-      k("fetchItem"), v.value = !0, W.value = -1, F.value = !1, typeof ((t = a.events) == null ? void 0 : t.httpStart) == "function" && a.events.httpStart();
+    const le = async () => {
+      var e, a, q;
+      D("fetchItem"), r.value = !0, I.value = -1, Q.value = !1, typeof ((e = o.events) == null ? void 0 : e.httpStart) == "function" && o.events.httpStart();
       try {
-        const w = await We(a.readResource, a.readData);
-        if (k("fetchItem -> response", w), v.value = !1, W.value = w.httpStatus, g.value = w.custom, !w.success) {
-          A.value = !1, W.value = w.httpStatus, typeof ((o = a.events) == null ? void 0 : o.httpEnd) == "function" && a.events.httpEnd({
-            httpResponse: w
-          }), b("error", w.httpStatus);
+        const V = await et(o.readResource, o.readData);
+        if (D("fetchItem -> response", V), r.value = !1, I.value = V.httpStatus, O.value = V.custom, !V.success) {
+          N.value = !1, I.value = V.httpStatus, typeof ((a = o.events) == null ? void 0 : a.httpEnd) == "function" && o.events.httpEnd({
+            httpResponse: V
+          }), c("error", V.httpStatus);
           return;
         }
-        A.value = !0, n.value = w.data, f.value = w.perms, I.value.increment(n.value).turnStoredIntoOriginal(), M.value = I.value.changed(), V.value.turnStoredIntoOriginal(), typeof ((P = a.events) == null ? void 0 : P.httpEnd) == "function" && a.events.httpEnd({
-          httpResponse: w
-        }), b("read", w);
+        N.value = !0, u.value = V.data, m.value = Array.isArray(V.modifications) ? {} : V.modifications, b.value = V.perms, R.value.increment(u.value).turnStoredIntoOriginal(), ne.value.increment(m.value).turnStoredIntoOriginal(), M.value = R.value.changed(), W.value.turnStoredIntoOriginal(), Object.keys(m.value).length > 0 && (L.value = g.Modifications), typeof ((q = o.events) == null ? void 0 : q.httpEnd) == "function" && o.events.httpEnd({
+          httpResponse: V
+        }), c("read", V);
       } catch {
-        v.value = !1, A.value = !1, W.value = 404, b("error", 404);
+        r.value = !1, N.value = !1, I.value = 404, c("error", 404);
         return;
       }
     };
-    D(() => a.modelValue, (t) => {
-      n.value = t, I.value.increment(t);
-    }, { deep: !0 }), D(n, (t) => {
-      if (ee.value = !0, k("item updated ->", n.value), typeof a.beforeEmitUpdate == "function") {
-        k("item updated -> has beforeEmitUpdate");
-        let o = a.beforeEmitUpdate(n.value);
-        k("item updated -> override with: ", o), typeof o == "object" && (n.value = o);
+    f(() => o.modelValue, (e) => {
+      u.value = e, R.value.increment(e);
+    }, { deep: !0 }), f(u, (e) => {
+      if (pe.value = !0, D("item updated ->", u.value), typeof o.beforeEmitUpdate == "function") {
+        D("item updated -> has beforeEmitUpdate");
+        let a = o.beforeEmitUpdate(u.value);
+        D("item updated -> override with: ", a), typeof a == "object" && (u.value = a);
       }
-      b("update:modelValue", n.value), k("item updated -> update dataState"), I.value.increment(t), M.value = I.value.changed(), Ve(() => ee.value = !1);
-    }, { deep: !0 }), D(f, () => b("perms", f.value)), D(M, (t) => {
-      b("modified-data", t);
-    }), D(() => a.readData, (t) => {
-      V.value.increment(t), V.value.changed() && ue();
-    }), D(() => a.editing, (t) => {
-      k("editing updated -> updating editMode", t), y.value = t;
-    }), D(y, (t) => {
-      k("editMode updated -> emit update", t), b("update:editing", t);
-    }), je(() => {
-      a.readResource && !E.value ? ue() : (E.value, A.value = !0, y.value = !0, v.value = !1, I.value.increment(n.value).turnStoredIntoOriginal(), M.value = I.value.changed());
+      Ee(), c("update:modelValue", u.value), D("item updated -> update dataState"), R.value.increment(e), oe.value === g.Current && (M.value = R.value.changed()), Qe(() => pe.value = !1);
+    }, { deep: !0 }), f(b, () => c("perms", b.value)), f(M, (e) => {
+      c("modified-data", e);
+    }), f(() => o.readData, (e) => {
+      W.value.increment(e), W.value.changed() && le();
+    }), f(() => o.editing, (e) => {
+      D("editing updated -> updating editMode", e), k.value = e;
+    }), f(k, (e) => {
+      D("editMode updated -> emit update", e), c("update:editing", e);
+    });
+    const Oe = d(void 0), Ee = () => {
+      me.value && (Oe.value = pt(u.value, m.value, o.form));
+    };
+    Ye(() => {
+      o.readResource && !E.value ? le() : (E.value, N.value = !0, k.value = !0, r.value = !1, R.value.increment(u.value).turnStoredIntoOriginal(), M.value = R.value.changed());
     });
-    const ve = (t, o) => {
-      if (o) {
-        if (v.value = !1, typeof t < "u" && (W.value = t.httpStatus, !t.success))
-          return F.value = !0, b("error", t.httpStatus), !1;
-        F.value = !0;
+    const Be = (e, a) => {
+      if (a) {
+        if (r.value = !1, typeof e < "u" && (I.value = e.httpStatus, !e.success))
+          return Q.value = !0, c("error", e.httpStatus), !1;
+        Q.value = !0;
       }
       return !0;
-    }, Ce = (t, o) => {
-      if (k("doAutoReloadId -> enter: ", t), typeof t < "u" && t.autoReloadId)
-        if (k("doAutoReloadId -> autoReloadId detected: ", t.autoReloadId), typeof o < "u") {
-          let P = o;
-          typeof o == "function" && (P = o(t.autoReloadId)), r.push(P);
-        } else ge.value ? (k("doAutoReloadId -> insideModal: ", a), qe(a.modalConfig.modalName, a.modalConfig.modalKey, t.autoReloadId)) : (k("doAutoReloadId -> outsideModal"), a.readData.id = t.autoReloadId, k("doAutoReloadId -> turning off create mode"), E.value = !1, ue());
-    }, fe = (t, o) => {
-      if (k("onCreate"), !ve(o, K.value.resource)) {
-        a.notificationType === J.Toast && _({
-          text: i.defaultCreateErrorText,
-          details: i.defaultCreateErrorDetails,
-          icon: i.defaultCreateErrorIcon,
-          positionX: Z.Right
+    }, Ne = (e, a) => {
+      if (D("doAutoReloadId -> enter: ", e), typeof e < "u" && e.autoReloadId)
+        if (D("doAutoReloadId -> autoReloadId detected: ", e.autoReloadId), typeof a < "u") {
+          let q = a;
+          typeof a == "function" && (q = a(e.autoReloadId)), i.push(q);
+        } else Se.value ? (D("doAutoReloadId -> insideModal: ", o), it(o.modalConfig.modalName, o.modalConfig.modalKey, e.autoReloadId)) : (D("doAutoReloadId -> outsideModal"), o.readData.id = e.autoReloadId, D("doAutoReloadId -> turning off create mode"), E.value = !1, le());
+    }, Ce = (e, a) => {
+      if (D("onCreate"), !Be(a, $.value.resource)) {
+        o.notificationType === ee.Toast && re({
+          text: s.defaultCreateErrorText,
+          details: s.defaultCreateErrorDetails,
+          icon: s.defaultCreateErrorIcon,
+          positionX: de.Right
         });
         return;
       }
-      e.value = !0, k("onCreate -> turn stored data into original"), I.value.increment(n.value).turnStoredIntoOriginal(), a.notificationType === J.Toast && _({
-        text: i.defaultCreateSuccessText,
-        details: i.defaultCreateSuccessDetails,
-        icon: i.defaultCreateSuccessIcon,
-        positionX: Z.Right
-      }), Ce(o, a.redirectOnCreate), k("onCreate -> beforeEmitCreate"), b("create", o);
-    }, ce = (t, o) => {
-      if (k("onUpdate"), !ve(o, G.value.resource)) {
-        a.notificationType === J.Toast && _({
-          text: i.defaultUpdateErrorText,
-          details: i.defaultUpdateErrorDetails,
-          icon: i.defaultUpdateErrorIcon,
-          positionX: Z.Right
+      z.value = !0, D("onCreate -> turn stored data into original"), R.value.increment(u.value).turnStoredIntoOriginal(), o.notificationType === ee.Toast && re({
+        text: s.defaultCreateSuccessText,
+        details: s.defaultCreateSuccessDetails,
+        icon: s.defaultCreateSuccessIcon,
+        positionX: de.Right
+      }), Ne(a, o.redirectOnCreate), D("onCreate -> beforeEmitCreate"), c("create", a);
+    }, he = (e, a) => {
+      if (D("onUpdate"), !Be(a, j.value.resource)) {
+        o.notificationType === ee.Toast && re({
+          text: s.defaultUpdateErrorText,
+          details: s.defaultUpdateErrorDetails,
+          icon: s.defaultUpdateErrorIcon,
+          positionX: de.Right
         });
         return;
       }
-      k("onUpdate -> turn stored data into original"), I.value.turnStoredIntoOriginal(), a.notificationType === J.Toast && _({
-        text: i.defaultUpdateSuccessText,
-        details: i.defaultUpdateSuccessDetails,
-        icon: i.defaultUpdateSuccessIcon,
-        positionX: Z.Right
-      }), Ce(o), b("update", o);
-    }, me = (t, o) => {
-      if (k("onDrop"), !ve(o, H.value.resource)) {
-        a.notificationType === J.Toast && _({
-          text: i.defaultDropErrorText,
-          details: i.defaultDropErrorDetails,
-          icon: i.defaultDropErrorIcon,
-          positionX: Z.Right
+      D("onUpdate -> turn stored data into original"), R.value.turnStoredIntoOriginal(), o.notificationType === ee.Toast && re({
+        text: s.defaultUpdateSuccessText,
+        details: s.defaultUpdateSuccessDetails,
+        icon: s.defaultUpdateSuccessIcon,
+        positionX: de.Right
+      }), Ne(a), c("update", a);
+    }, De = (e, a) => {
+      if (D("onDrop"), !Be(a, P.value.resource)) {
+        o.notificationType === ee.Toast && re({
+          text: s.defaultDropErrorText,
+          details: s.defaultDropErrorDetails,
+          icon: s.defaultDropErrorIcon,
+          positionX: de.Right
         });
         return;
       }
-      if (a.notificationType === J.Toast && _({
-        text: i.defaultDropSuccessText,
-        details: i.defaultDropSuccessDetails,
-        icon: i.defaultDropSuccessIcon,
-        positionX: Z.Right
-      }), b("drop", o), a.view === Te.Modal && (k("onDrop -> close modal"), He(a.modalConfig.modalName, a.modalConfig.modalKey)), typeof a.redirectOnDrop < "u") {
-        let P = a.redirectOnDrop;
-        typeof a.redirectOnDrop == "function" && (P = a.redirectOnDrop()), r.push(P);
+      if (o.notificationType === ee.Toast && re({
+        text: s.defaultDropSuccessText,
+        details: s.defaultDropSuccessDetails,
+        icon: s.defaultDropSuccessIcon,
+        positionX: de.Right
+      }), c("drop", a), o.view === Pe.Modal && (D("onDrop -> close modal"), at(o.modalConfig.modalName, o.modalConfig.modalKey)), typeof o.redirectOnDrop < "u") {
+        let q = o.redirectOnDrop;
+        typeof o.redirectOnDrop == "function" && (q = o.redirectOnDrop()), i.push(q);
       }
     };
-    ae({
+    K({
       doDrop: () => {
-        B.value && B.value.doDrop();
+        H.value && H.value.doDrop();
       },
-      doRefresh: ue,
+      doRefresh: le,
       doSave: () => {
-        B.value && B.value.doSave();
+        H.value && H.value.doSave();
       },
       turnStoredDataIntoOriginal: () => {
-        I.value.increment(n.value).turnStoredIntoOriginal();
+        R.value.increment(u.value).turnStoredIntoOriginal();
       },
-      hasModifiedData: () => I.value.changed()
+      hasModifiedData: () => R.value.changed()
     });
-    const Ae = U(() => {
-      var t;
-      return I.value.changed() ? (t = a.modalConfig) == null ? void 0 : t.closeConfirm : "";
-    }), Ee = (t) => {
-      var o;
-      if (typeof ((o = a.modalConfig) == null ? void 0 : o.beforeClose) == "function")
-        return a.modalConfig.beforeClose({
-          ...t,
-          itemCreated: e.value
+    const Ke = y(() => {
+      var e, a;
+      return be.value ? oe.value === g.Modifications ? ne.value.changed() ? (e = o.modalConfig) == null ? void 0 : e.closeConfirm : "" : R.value.changed() ? (a = o.modalConfig) == null ? void 0 : a.closeConfirm : "" : "";
+    }), We = (e) => {
+      var a;
+      if (typeof ((a = o.modalConfig) == null ? void 0 : a.beforeClose) == "function")
+        return o.modalConfig.beforeClose({
+          ...e,
+          itemCreated: z.value
         });
-    }, be = U(() => a.title.startsWith("__:") ? String(ze(a.title.substring(3))) : a.title), $e = U(() => v.value ? !1 : be.value.length > 0 || !!l["post-title"]), ge = U(() => a.view === Te.Modal), Ue = U(() => ge.value ? "lkt-modal" : "section"), ne = U(() => {
-      var t, o;
-      return a.mode !== S.Update || !h.value || !a.enabledSaveWithoutChanges && !M.value || (console.log("ableToUpdate", X.value), Be.value && !X.value) ? !1 : typeof ((t = G.value) == null ? void 0 : t.disabled) == "function" ? !G.value.disabled({
-        prop: n.value
-      }) : typeof ((o = G.value) == null ? void 0 : o.disabled) == "boolean" ? !G.value.disabled : !0;
-    }), de = U(() => {
-      var t, o;
-      return a.mode !== S.Create || !a.enabledSaveWithoutChanges && !M.value || Be.value && !X.value ? !1 : typeof ((t = K.value) == null ? void 0 : t.disabled) == "function" ? !K.value.disabled({
-        prop: n.value
-      }) : typeof ((o = K.value) == null ? void 0 : o.disabled) == "boolean" ? !K.value.disabled : !0;
-    }), ye = U(() => {
-      var t, o;
-      return j.value ? typeof ((t = H.value) == null ? void 0 : t.disabled) == "function" ? !H.value.disabled({
-        prop: n.value
-      }) : typeof ((o = H.value) == null ? void 0 : o.disabled) == "boolean" ? !H.value.disabled : !0 : !1;
-    }), Le = U(() => Ue.value === "lkt-modal" ? {
-      title: a.title,
-      item: n.value,
-      ...a.modalConfig,
-      beforeClose: Ee,
-      closeConfirm: Ae.value,
-      headerActionsButton: a.groupButton !== !1 ? {
-        dot: de.value || ne.value
+    }, we = y(() => o.title.startsWith("__:") ? String(nt(o.title.substring(3))) : o.title), He = y(() => r.value ? !1 : we.value.length > 0 || !!C["post-title"]), Se = y(() => o.view === Pe.Modal), Le = y(() => Se.value ? "lkt-modal" : "section"), ce = y(() => {
+      var e, a;
+      return o.mode !== T.Update || !t.value || !o.enabledSaveWithoutChanges && !M.value || me.value && !x.value ? !1 : typeof ((e = j.value) == null ? void 0 : e.disabled) == "function" ? !j.value.disabled({
+        prop: u.value
+      }) : typeof ((a = j.value) == null ? void 0 : a.disabled) == "boolean" ? !j.value.disabled : !0;
+    }), fe = y(() => {
+      var e, a;
+      return o.mode !== T.Create || !o.enabledSaveWithoutChanges && !M.value || me.value && !x.value ? !1 : typeof ((e = $.value) == null ? void 0 : e.disabled) == "function" ? !$.value.disabled({
+        prop: u.value
+      }) : typeof ((a = $.value) == null ? void 0 : a.disabled) == "boolean" ? !$.value.disabled : !0;
+    }), Ue = y(() => {
+      var e, a;
+      return w.value ? typeof ((e = P.value) == null ? void 0 : e.disabled) == "function" ? !P.value.disabled({
+        prop: u.value
+      }) : typeof ((a = P.value) == null ? void 0 : a.disabled) == "boolean" ? !P.value.disabled : !0 : !1;
+    }), Ge = y(() => Le.value === "lkt-modal" ? {
+      title: o.title,
+      item: u.value,
+      ...o.modalConfig,
+      beforeClose: We,
+      closeConfirm: Ke.value,
+      headerActionsButton: o.groupButton !== !1 ? {
+        dot: fe.value || ce.value
       } : !1
-    } : {}), Be = U(() => typeof a.form == "object" && Object.keys(a.form).length > 0);
-    return (t, o) => {
-      const P = le("lkt-http-info"), w = le("lkt-form"), Oe = le("lkt-loader");
-      return m(), O(Pe(Ue.value), R(Le.value, { class: "lkt-item-crud" }), re({
-        default: C(() => [
-          Xe("article", xe, [
-            !ge.value && $e.value ? (m(), N("header", et, [
-              u(l)["pre-title"] ? (m(), N("div", tt, [
-                s(t.$slots, "pre-title", {
-                  item: n.value,
-                  loading: v.value
+    } : {}), me = y(() => typeof o.form == "object" && Object.keys(o.form).length > 0), Me = y(() => Object.keys(m.value).length === 0 ? [] : o.modificationViews), oe = y(() => Object.keys(m.value).length === 0 ? g.Current : g.Modifications), be = y(() => E.value || t.value || w.value);
+    return (e, a) => {
+      const q = ye("lkt-http-info"), V = ye("lkt-form"), qe = ye("lkt-loader");
+      return v(), A(Ze(Le.value), S(Ge.value, { class: "lkt-item-crud" }), ge({
+        default: _(() => [
+          _e("article", vt, [
+            !Se.value && He.value ? (v(), J("header", ct, [
+              n(C)["pre-title"] ? (v(), J("div", ft, [
+                U(e.$slots, "pre-title", {
+                  item: u.value,
+                  loading: r.value
                 })
-              ])) : d("", !0),
-              be.value.length > 0 ? (m(), N("h1", at, Fe(be.value), 1)) : d("", !0),
-              u(l)["post-title"] ? (m(), N("div", ot, [
-                s(t.$slots, "post-title", {
-                  item: n.value,
-                  loading: v.value
+              ])) : p("", !0),
+              we.value.length > 0 ? (v(), J("h1", mt, xe(we.value), 1)) : p("", !0),
+              n(C)["post-title"] ? (v(), J("div", bt, [
+                U(e.$slots, "post-title", {
+                  item: u.value,
+                  loading: r.value
                 })
-              ])) : d("", !0)
-            ])) : d("", !0),
-            t.buttonNavPosition === u(De).Top && (t.groupButton === !1 || !t.groupButtonAsModalActions) ? (m(), O(he, {
+              ])) : p("", !0)
+            ])) : p("", !0),
+            e.buttonNavPosition === n(Re).Top && (e.groupButton === !1 || !e.groupButtonAsModalActions) && be.value ? (v(), A(Ae, {
               key: 1,
               ref_key: "buttonNav",
-              ref: B,
-              loading: v.value,
-              "onUpdate:loading": o[2] || (o[2] = (p) => v.value = p),
-              editing: y.value,
-              "onUpdate:editing": o[3] || (o[3] = (p) => y.value = p),
-              item: n.value,
-              mode: t.mode,
-              view: t.view,
-              grouped: t.groupButton !== !1,
-              "button-nav-visibility": t.buttonNavVisibility,
-              "create-button": K.value,
-              "update-button": G.value,
-              "drop-button": H.value,
-              "edit-mode-button": oe.value,
-              "group-button": pe.value,
+              ref: H,
+              loading: r.value,
+              "onUpdate:loading": a[3] || (a[3] = (l) => r.value = l),
+              editing: k.value,
+              "onUpdate:editing": a[4] || (a[4] = (l) => k.value = l),
+              "picked-modification-view": L.value,
+              "onUpdate:pickedModificationView": a[5] || (a[5] = (l) => L.value = l),
+              item: u.value,
+              modifications: m.value,
+              mode: e.mode,
+              view: e.view,
+              grouped: e.groupButton !== !1,
+              "button-nav-visibility": e.buttonNavVisibility,
+              "create-button": $.value,
+              "update-button": j.value,
+              "drop-button": P.value,
+              "edit-mode-button": G.value,
+              "group-button": ue.value,
               "data-changed": M.value,
-              "http-success-read": A.value,
-              "can-update": h.value,
-              "can-drop": j.value,
-              "can-switch-edit-mode": se.value,
-              "group-button-as-modal-actions": t.groupButtonAsModalActions,
-              "able-to-create": de.value,
-              "able-to-update": ne.value,
-              "able-to-drop": ye.value,
-              perms: f.value,
-              onCreate: fe,
-              onSave: ce,
-              onDrop: me
-            }, re({ _: 2 }, [
-              u(l)["prev-buttons-ever"] ? {
+              "http-success-read": N.value,
+              "can-update": t.value,
+              "can-drop": w.value,
+              "can-switch-edit-mode": h.value,
+              "group-button-as-modal-actions": e.groupButtonAsModalActions,
+              "able-to-create": fe.value,
+              "able-to-update": ce.value,
+              "able-to-drop": Ue.value,
+              perms: b.value,
+              "modification-view": Me.value,
+              "editable-view": oe.value,
+              onCreate: Ce,
+              onSave: he,
+              onDrop: De
+            }, ge({ _: 2 }, [
+              n(C)["prev-buttons-ever"] ? {
                 name: "prev-buttons-ever",
-                fn: C(({ canUpdate: p, canDrop: Q, perms: Y }) => [
-                  s(t.$slots, "prev-buttons-ever", {
-                    canUpdate: p,
-                    canDrop: Q,
-                    perms: Y
+                fn: _(({ canUpdate: l, canDrop: ae, perms: ie }) => [
+                  U(e.$slots, "prev-buttons-ever", {
+                    canUpdate: l,
+                    canDrop: ae,
+                    perms: ie
                   })
                 ]),
                 key: "0"
               } : void 0,
-              u(l)["prev-buttons"] ? {
+              n(C)["prev-buttons"] ? {
                 name: "prev-buttons",
-                fn: C(({ canUpdate: p, canDrop: Q, perms: Y }) => [
-                  s(t.$slots, "prev-buttons", {
-                    canUpdate: p,
-                    canDrop: Q,
-                    perms: Y
+                fn: _(({ canUpdate: l, canDrop: ae, perms: ie }) => [
+                  U(e.$slots, "prev-buttons", {
+                    canUpdate: l,
+                    canDrop: ae,
+                    perms: ie
                   })
                 ]),
                 key: "1"
               } : void 0
-            ]), 1032, ["loading", "editing", "item", "mode", "view", "grouped", "button-nav-visibility", "create-button", "update-button", "drop-button", "edit-mode-button", "group-button", "data-changed", "http-success-read", "can-update", "can-drop", "can-switch-edit-mode", "group-button-as-modal-actions", "able-to-create", "able-to-update", "able-to-drop", "perms"])) : d("", !0),
-            v.value ? d("", !0) : (m(), N("div", ut, [
-              A.value ? (m(), N("div", nt, [
-                F.value && t.notificationType === u(J).Inline ? (m(), O(P, {
+            ]), 1032, ["loading", "editing", "picked-modification-view", "item", "modifications", "mode", "view", "grouped", "button-nav-visibility", "create-button", "update-button", "drop-button", "edit-mode-button", "group-button", "data-changed", "http-success-read", "can-update", "can-drop", "can-switch-edit-mode", "group-button-as-modal-actions", "able-to-create", "able-to-update", "able-to-drop", "perms", "modification-view", "editable-view"])) : p("", !0),
+            r.value ? p("", !0) : (v(), J("div", gt, [
+              N.value ? (v(), J("div", yt, [
+                Q.value && e.notificationType === n(ee).Inline ? (v(), A(q, {
                   key: 0,
-                  code: W.value,
-                  palette: W.value === 200 ? "success" : "danger",
+                  code: I.value,
+                  palette: I.value === 200 ? "success" : "danger",
                   quick: "",
                   "can-close": "",
-                  onClose: o[4] || (o[4] = (p) => F.value = !1)
-                }, null, 8, ["code", "palette"])) : d("", !0),
-                Be.value ? (m(), O(w, {
+                  onClose: a[6] || (a[6] = (l) => Q.value = !1)
+                }, null, 8, ["code", "palette"])) : p("", !0),
+                me.value ? (v(), A(V, S({
                   key: 1,
-                  modelValue: n.value,
-                  "onUpdate:modelValue": o[5] || (o[5] = (p) => n.value = p),
-                  form: t.form,
-                  "onUpdate:form": o[6] || (o[6] = (p) => t.form = p),
-                  valid: X.value,
-                  "onUpdate:valid": o[7] || (o[7] = (p) => X.value = p)
-                }, null, 8, ["modelValue", "form", "valid"])) : s(t.$slots, "item", {
+                  modelValue: u.value,
+                  "onUpdate:modelValue": a[7] || (a[7] = (l) => u.value = l),
+                  modifications: m.value,
+                  "onUpdate:modifications": a[8] || (a[8] = (l) => m.value = l),
+                  valid: x.value,
+                  "onUpdate:valid": a[9] || (a[9] = (l) => x.value = l)
+                }, {
+                  ...e.formUiConfig,
+                  form: e.form,
+                  differencesTableConfig: e.differencesTableConfig,
+                  visibleView: L.value,
+                  modificationDataState: Oe.value,
+                  editableViews: [oe.value],
+                  disabled: !k.value
+                }), null, 16, ["modelValue", "modifications", "valid"])) : U(e.$slots, "item", {
                   key: 2,
-                  item: n.value,
-                  loading: v.value,
-                  editMode: y.value,
+                  item: u.value,
+                  loading: r.value,
+                  editMode: k.value,
                   isCreate: E.value,
-                  canUpdate: h.value,
-                  canDrop: j.value,
-                  itemBeingEdited: ee.value,
-                  perms: f.value
+                  canUpdate: t.value,
+                  canDrop: w.value,
+                  itemBeingEdited: pe.value,
+                  perms: b.value
                 })
-              ])) : t.notificationType === u(J).Inline ? (m(), O(P, {
+              ])) : e.notificationType === n(ee).Inline ? (v(), A(q, {
                 key: 1,
-                code: W.value
-              }, null, 8, ["code"])) : d("", !0)
+                code: I.value
+              }, null, 8, ["code"])) : p("", !0)
             ])),
-            v.value ? (m(), O(Oe, { key: 3 })) : d("", !0),
-            t.buttonNavPosition === u(De).Bottom && (t.groupButton === !1 || !t.groupButtonAsModalActions) ? (m(), O(he, {
+            r.value ? (v(), A(qe, { key: 3 })) : p("", !0),
+            e.buttonNavPosition === n(Re).Bottom && (e.groupButton === !1 || !e.groupButtonAsModalActions) && be.value ? (v(), A(Ae, {
               key: 4,
               ref_key: "buttonNav",
-              ref: B,
-              loading: v.value,
-              "onUpdate:loading": o[8] || (o[8] = (p) => v.value = p),
-              editing: y.value,
-              "onUpdate:editing": o[9] || (o[9] = (p) => y.value = p),
-              item: n.value,
-              mode: t.mode,
-              view: t.view,
-              grouped: t.groupButton !== !1,
-              "button-nav-visibility": t.buttonNavVisibility,
-              "create-button": K.value,
-              "update-button": G.value,
-              "drop-button": H.value,
-              "edit-mode-button": oe.value,
-              "group-button": pe.value,
+              ref: H,
+              loading: r.value,
+              "onUpdate:loading": a[10] || (a[10] = (l) => r.value = l),
+              editing: k.value,
+              "onUpdate:editing": a[11] || (a[11] = (l) => k.value = l),
+              "picked-modification-view": L.value,
+              "onUpdate:pickedModificationView": a[12] || (a[12] = (l) => L.value = l),
+              item: u.value,
+              modifications: m.value,
+              mode: e.mode,
+              view: e.view,
+              grouped: e.groupButton !== !1,
+              "button-nav-visibility": e.buttonNavVisibility,
+              "create-button": $.value,
+              "update-button": j.value,
+              "drop-button": P.value,
+              "edit-mode-button": G.value,
+              "group-button": ue.value,
               "data-changed": M.value,
-              "http-success-read": A.value,
-              "can-update": h.value,
-              "can-drop": j.value,
-              "can-switch-edit-mode": se.value,
-              "group-button-as-modal-actions": t.groupButtonAsModalActions,
-              "able-to-create": de.value,
-              "able-to-update": ne.value,
-              "able-to-drop": ye.value,
-              perms: f.value,
-              onCreate: fe,
-              onSave: ce,
-              onDrop: me
-            }, re({ _: 2 }, [
-              u(l)["prev-buttons-ever"] ? {
+              "http-success-read": N.value,
+              "can-update": t.value,
+              "can-drop": w.value,
+              "can-switch-edit-mode": h.value,
+              "group-button-as-modal-actions": e.groupButtonAsModalActions,
+              "able-to-create": fe.value,
+              "able-to-update": ce.value,
+              "able-to-drop": Ue.value,
+              perms: b.value,
+              "modification-view": Me.value,
+              "editable-view": oe.value,
+              onCreate: Ce,
+              onSave: he,
+              onDrop: De
+            }, ge({ _: 2 }, [
+              n(C)["prev-buttons-ever"] ? {
                 name: "prev-buttons-ever",
-                fn: C(() => [
-                  s(t.$slots, "prev-buttons-ever")
+                fn: _(() => [
+                  U(e.$slots, "prev-buttons-ever")
                 ]),
                 key: "0"
               } : void 0,
-              u(l)["prev-buttons"] ? {
+              n(C)["prev-buttons"] ? {
                 name: "prev-buttons-ever",
-                fn: C(() => [
-                  s(t.$slots, "prev-buttons")
+                fn: _(() => [
+                  U(e.$slots, "prev-buttons")
                 ]),
                 key: "1"
               } : void 0
-            ]), 1032, ["loading", "editing", "item", "mode", "view", "grouped", "button-nav-visibility", "create-button", "update-button", "drop-button", "edit-mode-button", "group-button", "data-changed", "http-success-read", "can-update", "can-drop", "can-switch-edit-mode", "group-button-as-modal-actions", "able-to-create", "able-to-update", "able-to-drop", "perms"])) : d("", !0)
+            ]), 1032, ["loading", "editing", "picked-modification-view", "item", "modifications", "mode", "view", "grouped", "button-nav-visibility", "create-button", "update-button", "drop-button", "edit-mode-button", "group-button", "data-changed", "http-success-read", "can-update", "can-drop", "can-switch-edit-mode", "group-button-as-modal-actions", "able-to-create", "able-to-update", "able-to-drop", "perms", "modification-view", "editable-view"])) : p("", !0)
           ])
         ]),
         _: 2
       }, [
-        t.groupButton !== !1 && t.groupButtonAsModalActions ? {
+        e.groupButton !== !1 && e.groupButtonAsModalActions && be.value ? {
           name: "header-actions",
-          fn: C(() => [
-            t.buttonNavPosition === u(De).Top ? (m(), O(he, {
+          fn: _(() => [
+            e.buttonNavPosition === n(Re).Top ? (v(), A(Ae, {
               key: 0,
               ref_key: "buttonNav",
-              ref: B,
-              loading: v.value,
-              "onUpdate:loading": o[0] || (o[0] = (p) => v.value = p),
-              editing: y.value,
-              "onUpdate:editing": o[1] || (o[1] = (p) => y.value = p),
-              item: n.value,
-              mode: t.mode,
-              view: t.view,
+              ref: H,
+              loading: r.value,
+              "onUpdate:loading": a[0] || (a[0] = (l) => r.value = l),
+              editing: k.value,
+              "onUpdate:editing": a[1] || (a[1] = (l) => k.value = l),
+              "picked-modification-view": L.value,
+              "onUpdate:pickedModificationView": a[2] || (a[2] = (l) => L.value = l),
+              item: u.value,
+              modifications: m.value,
+              mode: e.mode,
+              view: e.view,
               grouped: !0,
-              "button-nav-visibility": t.buttonNavVisibility,
-              "create-button": K.value,
-              "update-button": G.value,
-              "drop-button": H.value,
-              "edit-mode-button": oe.value,
-              "group-button": pe.value,
+              "button-nav-visibility": e.buttonNavVisibility,
+              "create-button": $.value,
+              "update-button": j.value,
+              "drop-button": P.value,
+              "edit-mode-button": G.value,
+              "group-button": ue.value,
               "data-changed": M.value,
-              "http-success-read": A.value,
-              "can-update": h.value,
-              "can-drop": j.value,
-              "can-switch-edit-mode": se.value,
-              "group-button-as-modal-actions": t.groupButtonAsModalActions,
-              "able-to-create": de.value,
-              "able-to-update": ne.value,
-              "able-to-drop": ye.value,
-              perms: f.value,
-              onCreate: fe,
-              onSave: ce,
-              onDrop: me
-            }, re({ _: 2 }, [
-              u(l)["prev-buttons-ever"] ? {
+              "http-success-read": N.value,
+              "can-update": t.value,
+              "can-drop": w.value,
+              "can-switch-edit-mode": h.value,
+              "group-button-as-modal-actions": e.groupButtonAsModalActions,
+              "able-to-create": fe.value,
+              "able-to-update": ce.value,
+              "able-to-drop": Ue.value,
+              perms: b.value,
+              "modification-view": Me.value,
+              "editable-view": oe.value,
+              onCreate: Ce,
+              onSave: he,
+              onDrop: De
+            }, ge({ _: 2 }, [
+              n(C)["prev-buttons-ever"] ? {
                 name: "prev-buttons-ever",
-                fn: C(({ canUpdate: p, canDrop: Q, perms: Y }) => [
-                  s(t.$slots, "prev-buttons-ever", {
-                    canUpdate: p,
-                    canDrop: Q,
-                    perms: Y
+                fn: _(({ canUpdate: l, canDrop: ae, perms: ie }) => [
+                  U(e.$slots, "prev-buttons-ever", {
+                    canUpdate: l,
+                    canDrop: ae,
+                    perms: ie
                   })
                 ]),
                 key: "0"
               } : void 0,
-              u(l)["prev-buttons"] ? {
+              n(C)["prev-buttons"] ? {
                 name: "prev-buttons",
-                fn: C(({ canUpdate: p, canDrop: Q, perms: Y }) => [
-                  s(t.$slots, "prev-buttons", {
-                    canUpdate: p,
-                    canDrop: Q,
-                    perms: Y
+                fn: _(({ canUpdate: l, canDrop: ae, perms: ie }) => [
+                  U(e.$slots, "prev-buttons", {
+                    canUpdate: l,
+                    canDrop: ae,
+                    perms: ie
                   })
                 ]),
                 key: "1"
               } : void 0
-            ]), 1032, ["loading", "editing", "item", "mode", "view", "button-nav-visibility", "create-button", "update-button", "drop-button", "edit-mode-button", "group-button", "data-changed", "http-success-read", "can-update", "can-drop", "can-switch-edit-mode", "group-button-as-modal-actions", "able-to-create", "able-to-update", "able-to-drop", "perms"])) : d("", !0)
+            ]), 1032, ["loading", "editing", "picked-modification-view", "item", "modifications", "mode", "view", "button-nav-visibility", "create-button", "update-button", "drop-button", "edit-mode-button", "group-button", "data-changed", "http-success-read", "can-update", "can-drop", "can-switch-edit-mode", "group-button-as-modal-actions", "able-to-create", "able-to-update", "able-to-drop", "perms", "modification-view", "editable-view"])) : p("", !0)
           ]),
           key: "0"
         } : void 0
       ]), 1040);
     };
   }
-}), yt = {
-  install: (T, ae = {}) => {
-    T.component("lkt-item-crud") === void 0 && T.component("lkt-item-crud", dt);
+}), Rt = {
+  install: (B, K = {}) => {
+    B.component("lkt-item-crud") === void 0 && B.component("lkt-item-crud", kt);
   }
-}, Bt = (T) => {
-  x.defaultSaveIcon = T;
-}, kt = (T) => {
-  x.defaultDropIcon = T;
+}, At = (B) => {
+  se.defaultSaveIcon = B;
+}, Ot = (B) => {
+  se.defaultDropIcon = B;
 };
 export {
-  gt as debugLktItemCrud,
-  yt as default,
-  kt as setItemCrudDefaultDropIcon,
-  Bt as setItemCrudDefaultSaveIcon
+  It as debugLktItemCrud,
+  Rt as default,
+  Ot as setItemCrudDefaultDropIcon,
+  At as setItemCrudDefaultSaveIcon
 };