lkt-table 1.3.20 → 1.3.22

package/dist/build.d.ts

@@ -1,4 +1,4 @@
-declare class P {
+declare class H {
     constructor(r?: {});
     key: string;
     label: string;
@@ -11,7 +11,7 @@ declare class P {
     isForRowKey: boolean;
     extractTitleFromColumn: string;
     slotData: {};
-    field: Ze;
+    field: _e;
     getHref(r: any): any;
     doAction(r: any): any;
 }
@@ -946,5 +946,5 @@ declare function _l(t: any): boolean;
 declare function ea(t: any): void;
 declare function Ol(t: any): boolean;
 declare function ta(t: any): void;
-import { Field as Ze } from "lkt-field";
-export { P as Column, Hl as createActionColumn, Gl as createCheckColumn, Ul as createColumn, jl as createEmailColumn, Xl as createFileColumn, Kl as createFloatColumn, Yl as createHiddenColumn, ql as createIntegerColumn, Pl as createLinkColumn, Ql as createSelectColumn, Jl as createSwitchColumn, zl as createTelColumn, Wl as createTextColumn, Zl as default, xl as setTableCreateButtonSlot, _l as setTableDropButtonSlot, ea as setTableEmptySlot, Ol as setTableNavButtonSlot, ta as setTableSaveIcon };
+import { Field as _e } from "lkt-field";
+export { H as Column, Hl as createActionColumn, Gl as createCheckColumn, Ul as createColumn, jl as createEmailColumn, Xl as createFileColumn, Kl as createFloatColumn, Yl as createHiddenColumn, ql as createIntegerColumn, Pl as createLinkColumn, Ql as createSelectColumn, Jl as createSwitchColumn, zl as createTelColumn, Wl as createTextColumn, Zl as default, xl as setTableCreateButtonSlot, _l as setTableDropButtonSlot, ea as setTableEmptySlot, Ol as setTableNavButtonSlot, ta as setTableSaveIcon };

package/dist/build.js

@@ -1,17 +1,17 @@
-import { reactive as q, defineComponent as te, ref as b, watch as F, computed as c, resolveComponent as J, unref as f, openBlock as n, createBlock as g, withCtx as W, createTextVNode as ie, toDisplayString as x, createElementBlock as s, mergeProps as Xe, Fragment as $, withModifiers as xe, resolveDynamicComponent as ee, createCommentVNode as v, useSlots as et, normalizeClass as j, createElementVNode as U, createVNode as ue, renderSlot as N, renderList as K, withDirectives as pe, vShow as ve, onMounted as Lt, nextTick as Re, createSlots as Ye, normalizeProps as oe } from "vue";
-import { Field as Ze } from "lkt-field";
-import { __ as ke } from "lkt-i18n";
-import { replaceAll as tt, generateRandomString as Ft } from "lkt-string-tools";
+import { reactive as q, defineComponent as te, ref as b, watch as F, computed as c, resolveComponent as J, unref as f, openBlock as n, createBlock as g, withCtx as U, createTextVNode as de, toDisplayString as x, createElementBlock as s, mergeProps as Ze, Fragment as R, withModifiers as tt, resolveDynamicComponent as ee, createCommentVNode as v, useSlots as lt, normalizeClass as j, createElementVNode as P, createVNode as re, renderSlot as $, renderList as K, withDirectives as ve, vShow as ye, onMounted as Lt, nextTick as Re, createSlots as Oe, normalizeProps as oe } from "vue";
+import { Field as _e } from "lkt-field";
+import { __ as be } from "lkt-i18n";
+import { replaceAll as at, generateRandomString as Ft } from "lkt-string-tools";
 import { DataState as At } from "lkt-data-state";
 import Ut from "sortablejs";
 import { time as Be } from "lkt-date-tools";
-var R = /* @__PURE__ */ ((t) => (t.Text = "text", t.Number = "number", t.Check = "check", t.Switch = "switch", t.Select = "select", t.Email = "email", t.Tel = "tel", t.File = "file", t.Link = "link", t.Action = "action", t.Integer = "int", t.Float = "float", t.None = "", t))(R || {});
-class P {
+var M = /* @__PURE__ */ ((t) => (t.Text = "text", t.Number = "number", t.Check = "check", t.Switch = "switch", t.Select = "select", t.Email = "email", t.Tel = "tel", t.File = "file", t.Link = "link", t.Action = "action", t.Integer = "int", t.Float = "float", t.None = "", t))(M || {});
+class H {
   constructor(r = {}) {
-    this.key = "", this.label = "", this.sortable = !0, this.hidden = !1, this.editable = !1, this.formatter = void 0, this.checkEmpty = void 0, this.colspan = void 0, this.preferSlot = !0, this.type = R.None, this.link = "", this.action = void 0, this.isForRowKey = !1, this.extractTitleFromColumn = "", this.slotData = {}, this.field = new Ze();
+    this.key = "", this.label = "", this.sortable = !0, this.hidden = !1, this.editable = !1, this.formatter = void 0, this.checkEmpty = void 0, this.colspan = void 0, this.preferSlot = !0, this.type = M.None, this.link = "", this.action = void 0, this.isForRowKey = !1, this.extractTitleFromColumn = "", this.slotData = {}, this.field = new _e();
     for (let d in r)
       this[d] = r[d];
-    this.field = new Ze(this.field);
+    this.field = new _e(this.field);
   }
   getHref(r) {
     return typeof this.link == "function" ? this.link(r) : this.link;
@@ -22,7 +22,7 @@ class P {
     console.warn("No action defined");
   }
 }
-const Ul = (t) => q(new P(t)), Pl = (t, r, d, o = !0) => q(new P({ key: t, label: r, sortable: o, type: R.Link, link: d })), Hl = (t, r, d, o = !0) => q(new P({ key: t, label: r, sortable: o, type: R.Action, action: d })), Wl = (t, r, d = !0) => q(new P({ key: t, label: r, type: R.Text, sortable: d })), ql = (t, r, d = !0) => q(new P({ key: t, label: r, type: R.Number, sortable: d })), Kl = (t, r, d = !0) => q(new P({ key: t, label: r, type: R.Number, sortable: d })), jl = (t, r, d = !0) => q(new P({ key: t, label: r, type: R.Email, sortable: d })), zl = (t, r, d = !0) => q(new P({ key: t, label: r, type: R.Tel, sortable: d })), Gl = (t, r, d = !0) => q(new P({ key: t, label: r, type: R.Check, sortable: d })), Jl = (t, r, d = !0) => q(new P({ key: t, label: r, type: R.Switch, sortable: d })), Ql = (t, r, d, o = !0) => q(new P({ key: t, label: r, type: R.Select, sortable: o })), Xl = (t, r, d = !0) => q(new P({ key: t, label: r, type: R.File, sortable: d })), Yl = (t, r, d = !0) => q(new P({ key: t, label: r, sortable: d, hidden: !0 })), Oe = (t, r, d, o) => {
+const Ul = (t) => q(new H(t)), Pl = (t, r, d, o = !0) => q(new H({ key: t, label: r, sortable: o, type: M.Link, link: d })), Hl = (t, r, d, o = !0) => q(new H({ key: t, label: r, sortable: o, type: M.Action, action: d })), Wl = (t, r, d = !0) => q(new H({ key: t, label: r, type: M.Text, sortable: d })), ql = (t, r, d = !0) => q(new H({ key: t, label: r, type: M.Number, sortable: d })), Kl = (t, r, d = !0) => q(new H({ key: t, label: r, type: M.Number, sortable: d })), jl = (t, r, d = !0) => q(new H({ key: t, label: r, type: M.Email, sortable: d })), zl = (t, r, d = !0) => q(new H({ key: t, label: r, type: M.Tel, sortable: d })), Gl = (t, r, d = !0) => q(new H({ key: t, label: r, type: M.Check, sortable: d })), Jl = (t, r, d = !0) => q(new H({ key: t, label: r, type: M.Switch, sortable: d })), Ql = (t, r, d, o = !0) => q(new H({ key: t, label: r, type: M.Select, sortable: o })), Xl = (t, r, d = !0) => q(new H({ key: t, label: r, type: M.File, sortable: d })), Yl = (t, r, d = !0) => q(new H({ key: t, label: r, sortable: d, hidden: !0 })), xe = (t, r, d, o) => {
   if (!d) return 0;
   let u = t[d.key], l = r[d.key];
   if (o === "asc") {
@@ -33,15 +33,15 @@ const Ul = (t) => q(new P(t)), Pl = (t, r, d, o = !0) => q(new P({ key: t, label
     if (l > u) return 1;
   }
   return 0;
-}, re = (t, r, d, o = []) => {
+}, ie = (t, r, d, o = []) => {
   if (t.extractTitleFromColumn) {
     let u = o.find((l) => l.key === t.extractTitleFromColumn);
     if (u)
-      return re(u, r, d, o);
+      return ie(u, r, d, o);
   }
   if (t.formatter && typeof t.formatter == "function") {
     let u = t.formatter(r[t.key], r, t, d);
-    return u.startsWith("__:") ? ke(u.substring(3)) : u;
+    return u.startsWith("__:") ? be(u.substring(3)) : u;
   }
   return r[t.key];
 }, Pt = (t, r, d) => {
@@ -67,11 +67,11 @@ const Ul = (t) => q(new P(t)), Pl = (t, r, d, o = !0) => q(new P({ key: t, label
       if (t[d].key === r) return t[d];
   }
   return null;
-}, lt = (t) => t.type ? `is-${t.type}` : "", at = /* @__PURE__ */ te({
+}, ot = (t) => t.type ? `is-${t.type}` : "", nt = /* @__PURE__ */ te({
   __name: "LktTableCell",
   props: {
     modelValue: { default: () => ({}) },
-    column: { default: () => new P() },
+    column: { default: () => new H() },
     columns: { default: () => [] },
     i: { default: 0 },
     editModeEnabled: { type: Boolean, default: !1 },
@@ -79,17 +79,17 @@ const Ul = (t) => q(new P(t)), Pl = (t, r, d, o = !0) => q(new P({ key: t, label
   },
   emits: ["update:modelValue"],
   setup(t, { emit: r }) {
-    const d = r, o = t, u = b(o.modelValue), l = b(u.value[o.column.key]), y = b(null);
-    let S = o.column.type;
-    [R.Integer, R.Float].includes(S) && (S = R.Number), F(l, (a) => {
-      const M = JSON.parse(JSON.stringify(u.value));
-      M[o.column.key] = a, d("update:modelValue", M);
+    const d = r, o = t, u = b(o.modelValue), l = b(u.value[o.column.key]), k = b(null);
+    let I = o.column.type;
+    [M.Integer, M.Float].includes(I) && (I = M.Number), F(l, (a) => {
+      const N = JSON.parse(JSON.stringify(u.value));
+      N[o.column.key] = a, d("update:modelValue", N);
     }), F(() => o.modelValue, (a) => {
       u.value = a, l.value = u.value[o.column.key];
     });
     const p = c(() => ({ ...o.column.slotData, item: u.value })), D = c(() => {
-      var a, M, z, L;
-      if ((a = o.column.field) != null && a.modalData && typeof ((M = o.column.field) == null ? void 0 : M.modalData) == "object")
+      var a, N, z, L;
+      if ((a = o.column.field) != null && a.modalData && typeof ((N = o.column.field) == null ? void 0 : N.modalData) == "object")
         for (let w in o.column.field.modalData)
           if (typeof ((z = o.column.field) == null ? void 0 : z.modalData[w]) == "string" && o.column.field.modalData[w].startsWith("prop:")) {
             let E = o.column.field.modalData[w].substring(5);
@@ -98,41 +98,41 @@ const Ul = (t) => q(new P(t)), Pl = (t, r, d, o = !0) => q(new P({ key: t, label
             o.column.field.modalData[w];
       return (L = o.column.field) == null ? void 0 : L.modalData;
     });
-    return (a, M) => {
+    return (a, N) => {
       const z = J("lkt-anchor"), L = J("lkt-field");
-      return a.column.type === f(R).Link ? (n(), g(z, {
+      return a.column.type === f(M).Link ? (n(), g(z, {
         key: 0,
         to: a.column.getHref(u.value)
       }, {
-        default: W(() => [
-          ie(x(f(re)(a.column, u.value, a.i)), 1)
+        default: U(() => [
+          de(x(f(ie)(a.column, u.value, a.i)), 1)
         ]),
         _: 1
-      }, 8, ["to"])) : a.column.type === f(R).Action ? (n(), s("a", {
+      }, 8, ["to"])) : a.column.type === f(M).Action ? (n(), s("a", {
         key: 1,
         href: "#",
-        onClick: M[0] || (M[0] = (w) => a.column.doAction(u.value))
-      }, x(f(re)(a.column, u.value, a.i)), 1)) : a.column.type !== "" && a.hasInlineEditPerm ? (n(), g(L, Xe({ key: 2 }, a.column.field, {
-        type: f(S),
+        onClick: N[0] || (N[0] = (w) => a.column.doAction(u.value))
+      }, x(f(ie)(a.column, u.value, a.i)), 1)) : a.column.type !== "" && a.hasInlineEditPerm ? (n(), g(L, Ze({ key: 2 }, a.column.field, {
+        type: f(I),
         "read-mode": !a.column.editable || !a.editModeEnabled,
-        ref: (w) => y.value = w,
+        ref: (w) => k.value = w,
         "slot-data": p.value,
         label: a.column.type === "switch" || a.column.type === "check" ? a.column.label : "",
         "modal-data": D.value,
         prop: u.value,
         modelValue: l.value,
-        "onUpdate:modelValue": M[1] || (M[1] = (w) => l.value = w)
-      }), null, 16, ["type", "read-mode", "slot-data", "label", "modal-data", "prop", "modelValue"])) : a.column.type !== "" ? (n(), g(L, Xe({ key: 3 }, a.column.field, {
-        type: f(S),
+        "onUpdate:modelValue": N[1] || (N[1] = (w) => l.value = w)
+      }), null, 16, ["type", "read-mode", "slot-data", "label", "modal-data", "prop", "modelValue"])) : a.column.type !== "" ? (n(), g(L, Ze({ key: 3 }, a.column.field, {
+        type: f(I),
         "read-mode": "",
-        ref: (w) => y.value = w,
+        ref: (w) => k.value = w,
         "slot-data": p.value,
         label: a.column.type === "switch" || a.column.type === "check" ? a.column.label : "",
         "modal-data": D.value,
         prop: u.value,
         "model-value": l.value
-      }), null, 16, ["type", "slot-data", "label", "modal-data", "prop", "model-value"])) : (n(), s($, { key: 4 }, [
-        ie(x(f(re)(a.column, u.value, a.i, a.columns)), 1)
+      }), null, 16, ["type", "slot-data", "label", "modal-data", "prop", "model-value"])) : (n(), s(R, { key: 4 }, [
+        de(x(f(ie)(a.column, u.value, a.i, a.columns)), 1)
       ], 64));
     };
   }
@@ -153,9 +153,9 @@ const jt = /* @__PURE__ */ te({
   emits: ["click"],
   setup(t, { emit: r }) {
     const d = r, o = c(() => V.dropButtonSlot !== ""), u = c(() => V.dropButtonSlot);
-    return (l, y) => {
-      const S = J("lkt-button");
-      return n(), g(S, {
+    return (l, k) => {
+      const I = J("lkt-button");
+      return n(), g(I, {
         palette: "table-delete",
         icon: o.value ? "" : l.icon,
         text: o.value ? "" : l.text,
@@ -163,9 +163,9 @@ const jt = /* @__PURE__ */ te({
         "resource-data": l.resourceData,
         "confirm-modal": l.confirm,
         disabled: l.disabled,
-        onClick: y[0] || (y[0] = xe((p) => d("click"), ["prevent", "stop"]))
+        onClick: k[0] || (k[0] = tt((p) => d("click"), ["prevent", "stop"]))
       }, {
-        default: W(() => [
+        default: U(() => [
           o.value ? (n(), g(ee(u.value), { key: 0 })) : v("", !0)
         ]),
         _: 1
@@ -186,9 +186,9 @@ const jt = /* @__PURE__ */ te({
   emits: ["click"],
   setup(t, { emit: r }) {
     const d = r, o = c(() => V.editButtonSlot !== ""), u = c(() => V.editButtonSlot);
-    return (l, y) => {
-      const S = J("lkt-button");
-      return n(), g(S, {
+    return (l, k) => {
+      const I = J("lkt-button");
+      return n(), g(I, {
         palette: "table-delete",
         icon: o.value ? "" : l.icon,
         text: o.value ? "" : l.text,
@@ -198,9 +198,9 @@ const jt = /* @__PURE__ */ te({
         "resource-data": l.resourceData,
         "confirm-modal": l.confirm,
         disabled: l.disabled,
-        onClick: y[0] || (y[0] = xe((p) => d("click"), ["prevent", "stop"]))
+        onClick: k[0] || (k[0] = tt((p) => d("click"), ["prevent", "stop"]))
       }, {
-        default: W(() => [
+        default: U(() => [
           o.value ? (n(), g(ee(u.value), { key: 0 })) : v("", !0)
         ]),
         _: 1
@@ -250,70 +250,70 @@ const Gt = ["data-i", "data-draggable"], Jt = {
   },
   emits: ["update:modelValue", "click", "show", "item-up", "item-down", "item-drop"],
   setup(t, { emit: r }) {
-    const d = et(), o = r, u = t, l = b(u.modelValue);
-    let y = typeof u.rowDisplayType == "function" ? u.rowDisplayType(l.value, u.i) : u.rowDisplayType;
-    y || (y = _.Auto);
-    const S = [_.Auto, _.PreferCustomItem].includes(y), p = [_.Auto, _.PreferItem].includes(y), D = b(u.editLink);
-    for (let i in l.value) D.value = tt(D.value, ":" + i, l.value[i]);
-    const a = (i) => o("click", i), M = (i, C) => {
+    const d = lt(), o = r, u = t, l = b(u.modelValue);
+    let k = typeof u.rowDisplayType == "function" ? u.rowDisplayType(l.value, u.i) : u.rowDisplayType;
+    k || (k = _.Auto);
+    const I = [_.Auto, _.PreferCustomItem].includes(k), p = [_.Auto, _.PreferItem].includes(k), D = b(u.editLink);
+    for (let i in l.value) D.value = at(D.value, ":" + i, l.value[i]);
+    const a = (i) => o("click", i), N = (i, C) => {
       o("show", i, C);
     }, z = c(() => {
       let i = [];
       return u.sortable && u.isDraggable && i.push("handle"), i.join(" ");
     }), L = c(() => V.navButtonSlot !== ""), w = c(() => V.navButtonSlot), E = () => {
       o("item-up", u.i);
-    }, be = () => {
+    }, he = () => {
       o("item-down", u.i);
     }, A = () => {
       o("item-drop", u.i);
-    }, he = () => {
+    }, ge = () => {
     };
     F(() => u.modelValue, (i) => l.value = i), F(l, (i) => {
       o("update:modelValue", i);
     }, { deep: !0 });
-    const de = c(() => typeof u.renderDrag == "function" ? u.renderDrag(l.value) : u.renderDrag === !0);
+    const se = c(() => typeof u.renderDrag == "function" ? u.renderDrag(l.value) : u.renderDrag === !0);
     return (i, C) => {
-      const I = J("lkt-button");
+      const S = J("lkt-button");
       return n(), s("tr", {
         "data-i": i.i,
         "data-draggable": i.isDraggable,
-        class: j({ "type-custom-item": f(S), "type-item": f(p) })
+        class: j({ "type-custom-item": f(I), "type-item": f(p) })
       }, [
-        i.sortable && i.isDraggable && i.editModeEnabled && de.value ? (n(), s("td", {
+        i.sortable && i.isDraggable && i.editModeEnabled && se.value ? (n(), s("td", {
           key: 0,
           "data-role": "drag-indicator",
           class: j(z.value)
-        }, null, 2)) : i.sortable && i.editModeEnabled && de.value ? (n(), s("td", Jt)) : v("", !0),
+        }, null, 2)) : i.sortable && i.editModeEnabled && se.value ? (n(), s("td", Jt)) : v("", !0),
         i.addNavigation && i.editModeEnabled ? (n(), s("td", Qt, [
-          U("div", Xt, [
-            ue(I, {
+          P("div", Xt, [
+            re(S, {
               palette: "table-nav",
               disabled: i.i === 0,
               onClick: E
             }, {
-              default: W(() => [
+              default: U(() => [
                 L.value ? (n(), g(ee(w.value), {
                   key: 0,
                   direction: "up"
-                })) : (n(), s($, { key: 1 }, [
-                  C[3] || (C[3] = U("i", { class: "" }, null, -1)),
-                  C[4] || (C[4] = ie(" UP "))
+                })) : (n(), s(R, { key: 1 }, [
+                  C[3] || (C[3] = P("i", { class: "" }, null, -1)),
+                  C[4] || (C[4] = de(" UP "))
                 ], 64))
               ]),
               _: 1
             }, 8, ["disabled"]),
-            ue(I, {
+            re(S, {
               palette: "table-nav",
               disabled: i.latestRow,
-              onClick: be
+              onClick: he
             }, {
-              default: W(() => [
+              default: U(() => [
                 L.value ? (n(), g(ee(w.value), {
                   key: 0,
                   direction: "down"
-                })) : (n(), s($, { key: 1 }, [
-                  C[5] || (C[5] = U("i", { class: "" }, null, -1)),
-                  C[6] || (C[6] = ie(" DOWN "))
+                })) : (n(), s(R, { key: 1 }, [
+                  C[5] || (C[5] = P("i", { class: "" }, null, -1)),
+                  C[6] || (C[6] = de(" DOWN "))
                 ], 64))
               ]),
               _: 1
@@ -322,15 +322,15 @@ const Gt = ["data-i", "data-draggable"], Jt = {
         ])) : v("", !0),
         i.displayHiddenColumnsIndicator ? (n(), s("td", {
           key: 3,
-          onClick: C[0] || (C[0] = (B) => M(B, i.i)),
+          onClick: C[0] || (C[0] = (B) => N(B, i.i)),
           "data-role": "show-more",
           class: j(i.hiddenIsVisible ? "state-open" : "")
         }, null, 2)) : v("", !0),
-        f(S) && f(d)[`item-${i.i}`] ? (n(), s("td", {
+        f(I) && f(d)[`item-${i.i}`] ? (n(), s("td", {
           key: "td" + i.i,
           colspan: i.visibleColumns.length
         }, [
-          N(i.$slots, `item-${i.i}`, {
+          $(i.$slots, `item-${i.i}`, {
             item: l.value,
             index: i.i
           })
@@ -338,26 +338,26 @@ const Gt = ["data-i", "data-draggable"], Jt = {
           key: "td" + i.i,
           colspan: i.visibleColumns.length
         }, [
-          N(i.$slots, "item", {
+          $(i.$slots, "item", {
             item: l.value,
             index: i.i
           })
-        ], 8, Zt)) : (n(!0), s($, { key: 6 }, K(i.visibleColumns, (B) => (n(), s($, null, [
+        ], 8, Zt)) : (n(!0), s(R, { key: 6 }, K(i.visibleColumns, (B) => (n(), s(R, null, [
           f(Wt)(B, i.emptyColumns, l.value) ? (n(), s("td", {
             key: "td" + i.i,
             "data-column": B.key,
             colspan: f(Me)(B, l.value),
-            title: f(re)(B, l.value, i.i, i.visibleColumns),
-            class: j(f(lt)(B)),
+            title: f(ie)(B, l.value, i.i, i.visibleColumns),
+            class: j(f(ot)(B)),
             onClick: C[2] || (C[2] = (le) => a(le))
           }, [
-            i.$slots[B.key] && f(Ht)(B, l.value) ? N(i.$slots, B.key, {
+            i.$slots[B.key] && f(Ht)(B, l.value) ? $(i.$slots, B.key, {
               key: 0,
               value: l.value[B.key],
               item: l.value,
               column: B,
               i: i.i
-            }) : l.value ? (n(), g(at, {
+            }) : l.value ? (n(), g(nt, {
               key: 1,
               modelValue: l.value,
               "onUpdate:modelValue": C[1] || (C[1] = (le) => l.value = le),
@@ -370,7 +370,7 @@ const Gt = ["data-i", "data-draggable"], Jt = {
           ], 10, Ot)) : v("", !0)
         ], 64))), 256)),
         i.canDrop && i.editModeEnabled ? (n(), s("td", _t, [
-          ue(jt, {
+          re(jt, {
             resource: i.dropResource,
             "resource-data": l.value,
             confirm: i.dropConfirm,
@@ -380,12 +380,12 @@ const Gt = ["data-i", "data-draggable"], Jt = {
           }, null, 8, ["resource", "resource-data", "confirm", "text", "icon"])
         ])) : v("", !0),
         i.canEdit && i.editModeEnabled ? (n(), s("td", xt, [
-          ue(zt, {
+          re(zt, {
             "resource-data": l.value,
             text: i.editText,
             icon: i.editIcon,
             link: D.value,
-            onClick: he
+            onClick: ge
           }, null, 8, ["resource-data", "text", "icon", "link"])
         ])) : v("", !0)
       ], 10, Gt);
@@ -406,35 +406,35 @@ const Gt = ["data-i", "data-draggable"], Jt = {
   },
   emits: ["update:modelValue", "click"],
   setup(t, { emit: r }) {
-    const d = r, o = t, u = b(o.modelValue), l = (y) => d("click", y);
-    return F(() => o.modelValue, (y) => u.value = y), F(u, () => d("update:modelValue", u.value)), (y, S) => pe((n(), s("tr", tl, [
-      U("td", { colspan: y.hiddenColumnsColSpan }, [
-        U("table", null, [
-          U("tr", null, [
-            (n(!0), s($, null, K(y.hiddenColumns, (p) => (n(), s("th", {
+    const d = r, o = t, u = b(o.modelValue), l = (k) => d("click", k);
+    return F(() => o.modelValue, (k) => u.value = k), F(u, () => d("update:modelValue", u.value)), (k, I) => ve((n(), s("tr", tl, [
+      P("td", { colspan: k.hiddenColumnsColSpan }, [
+        P("table", null, [
+          P("tr", null, [
+            (n(!0), s(R, null, K(k.hiddenColumns, (p) => (n(), s("th", {
               "data-column": p.key
             }, [
-              U("div", null, x(p.label), 1)
+              P("div", null, x(p.label), 1)
             ], 8, al))), 256))
           ]),
-          U("tr", { "data-i": y.i }, [
-            (n(!0), s($, null, K(y.hiddenColumns, (p, D) => (n(), s("td", {
+          P("tr", { "data-i": k.i }, [
+            (n(!0), s(R, null, K(k.hiddenColumns, (p, D) => (n(), s("td", {
               "data-column": p.key,
-              title: f(re)(p, u.value, D, y.hiddenColumns),
+              title: f(ie)(p, u.value, D, k.hiddenColumns),
               onClick: (a) => l(a, u.value)
             }, [
-              y.$slots[p.key] ? N(y.$slots, p.key, {
+              k.$slots[p.key] ? $(k.$slots, p.key, {
                 key: 0,
                 value: u.value[p.key],
                 item: u.value,
                 column: p,
                 i: D
-              }) : (n(), g(at, {
+              }) : (n(), g(nt, {
                 key: 1,
                 column: p,
-                columns: y.hiddenColumns,
+                columns: k.hiddenColumns,
                 modelValue: u.value,
-                "onUpdate:modelValue": S[0] || (S[0] = (a) => u.value = a),
+                "onUpdate:modelValue": I[0] || (I[0] = (a) => u.value = a),
                 i: D
               }, null, 8, ["column", "columns", "modelValue", "i"]))
             ], 8, nl))), 256))
@@ -442,10 +442,10 @@ const Gt = ["data-i", "data-draggable"], Jt = {
         ])
       ], 8, ll)
     ], 512)), [
-      [ve, y.hiddenIsVisible]
+      [ye, k.hiddenIsVisible]
     ]);
   }
-}), _e = /* @__PURE__ */ te({
+}), et = /* @__PURE__ */ te({
   __name: "CreateButton",
   props: {
     disabled: { type: Boolean, default: !1 },
@@ -457,12 +457,12 @@ const Gt = ["data-i", "data-draggable"], Jt = {
   },
   emits: ["click", "append"],
   setup(t, { emit: r }) {
-    const d = r, o = t, u = c(() => V.createButtonSlot !== ""), l = c(() => V.createButtonSlot), y = {
+    const d = r, o = t, u = c(() => V.createButtonSlot !== ""), l = c(() => V.createButtonSlot), k = {
       ...o.modalData,
       beforeClose: (p) => {
         "itemCreated" in p && p.itemCreated === !0 && d("append", p.item);
       }
-    }, S = () => {
+    }, I = () => {
       if (!o.modal) {
         d("click");
         return;
@@ -476,11 +476,11 @@ const Gt = ["data-i", "data-draggable"], Jt = {
         icon: u.value ? "" : p.icon,
         text: u.value ? "" : p.text,
         modal: p.modal,
-        "modal-data": y,
+        "modal-data": k,
         "on-click-to": p.to,
-        onClick: S
+        onClick: I
       }, {
-        default: W(() => [
+        default: U(() => [
           u.value ? (n(), g(ee(l.value), { key: 0 })) : v("", !0)
         ]),
         _: 1
@@ -498,21 +498,21 @@ const Gt = ["data-i", "data-draggable"], Jt = {
   },
   emits: ["click"],
   setup(t, { emit: r }) {
-    const d = r, o = t, u = c(() => Pt(o.column, o.amountOfColumns, o.items)), l = c(() => o.column.sortable === !0), y = c(() => l.value && o.sortBy === o.column.key ? o.sortDirection : ""), S = c(() => o.column.label.startsWith("__:") ? ke(o.column.label.substring(3)) : o.column.label), p = () => d("click", o.column);
+    const d = r, o = t, u = c(() => Pt(o.column, o.amountOfColumns, o.items)), l = c(() => o.column.sortable === !0), k = c(() => l.value && o.sortBy === o.column.key ? o.sortDirection : ""), I = c(() => o.column.label.startsWith("__:") ? be(o.column.label.substring(3)) : o.column.label), p = () => d("click", o.column);
     return (D, a) => (n(), s("th", {
       "data-column": D.column.key,
       "data-sortable": l.value,
-      "data-sort": y.value,
+      "data-sort": k.value,
       colspan: u.value,
-      title: S.value,
-      class: j(f(lt)(D.column)),
+      title: I.value,
+      class: j(f(ot)(D.column)),
       onClick: p
     }, [
-      U("div", null, x(S.value), 1)
+      P("div", null, x(I.value), 1)
     ], 10, rl));
   }
 });
-var Q = /* @__PURE__ */ ((t) => (t.Table = "table", t.Item = "item", t.Ul = "ul", t.Ol = "ol", t))(Q || {}), X = /* @__PURE__ */ ((t) => (t.Create = "create", t.Update = "update", t.Edit = "edit", t.Drop = "drop", t.Sort = "sort", t.InlineEdit = "inline-edit", t.InlineCreate = "inline-create", t.ModalCreate = "modal-create", t.InlineCreateEver = "inline-create-ever", t))(X || {}), ye = /* @__PURE__ */ ((t) => (t.Asc = "asc", t.Desc = "desc", t))(ye || {});
+var Q = /* @__PURE__ */ ((t) => (t.Table = "table", t.Item = "item", t.Ul = "ul", t.Ol = "ol", t))(Q || {}), X = /* @__PURE__ */ ((t) => (t.Create = "create", t.Update = "update", t.Edit = "edit", t.Drop = "drop", t.Sort = "sort", t.InlineEdit = "inline-edit", t.InlineCreate = "inline-create", t.ModalCreate = "modal-create", t.InlineCreateEver = "inline-create-ever", t))(X || {}), ke = /* @__PURE__ */ ((t) => (t.Asc = "asc", t.Desc = "desc", t))(ke || {});
 const dl = ["id"], sl = {
   key: 0,
   class: "lkt-table-page-buttons"
@@ -543,7 +543,7 @@ const dl = ["id"], sl = {
     modelValue: { default: () => [] },
     type: { default: Q.Table },
     columns: { default: () => [] },
-    sorter: { type: Function, default: Oe },
+    sorter: { type: Function, default: xe },
     draggableChecker: { type: Function, default: (t) => !0 },
     checkValidDrag: { type: Function, default: void 0 },
     renderDrag: { type: [Boolean, Function], default: !0 },
@@ -574,6 +574,8 @@ const dl = ["id"], sl = {
     confirmData: { default: () => ({}) },
     saveResource: { default: "" },
     saveResourceData: { default: () => ({}) },
+    saveTooltipEngine: { default: "absolute" },
+    splitSave: { type: Boolean, default: !1 },
     saveText: { default: "Save" },
     createText: { default: "Add item" },
     createIcon: { default: "" },
@@ -614,19 +616,19 @@ const dl = ["id"], sl = {
     "drag-end"
   ],
   setup(t, { expose: r, emit: d }) {
-    const o = d, u = et(), l = t, y = {}, S = b(typeof l.sorter == "function" ? l.sorter : Oe), p = b(qt(l.columns)), D = b(ye.Asc), a = b(l.modelValue), M = b(y), z = b(null), L = b(l.columns), w = b(l.page), E = b(l.loading), be = b(!1), A = b(l.perms), he = b(null), de = b(null), i = b({}), C = b(new At({ items: a.value }, l.dataStateConfig)), I = b(l.editMode), B = b(0), le = b(null), ne = b(!1);
+    const o = d, u = lt(), l = t, k = {}, I = b(typeof l.sorter == "function" ? l.sorter : xe), p = b(qt(l.columns)), D = b(ke.Asc), a = b(l.modelValue), N = b(k), z = b(null), L = b(l.columns), w = b(l.page), E = b(l.loading), he = b(!1), A = b(l.perms), ge = b(null), se = b(null), i = b({}), C = b(new At({ items: a.value }, l.dataStateConfig)), S = b(l.editMode), B = b(0), le = b(null), ne = b(!1);
     F(E, (e) => o("update:loading", e)), F(w, (e) => o("page", e));
-    const se = b(l.type);
-    l.itemMode && se.value === Q.Table && (se.value = Q.Item);
-    const ot = (e) => {
+    const ce = b(l.type);
+    l.itemMode && ce.value === Q.Table && (ce.value = Q.Item);
+    const ut = (e) => {
       A.value = e;
-    }, nt = (e) => {
-      Array.isArray(e.data) && (a.value = e.data), E.value = !1, be.value = !0, C.value.store({ items: a.value }).turnStoredIntoOriginal(), ne.value = !1, Re(() => {
+    }, rt = (e) => {
+      Array.isArray(e.data) && (a.value = e.data), E.value = !1, he.value = !0, C.value.store({ items: a.value }).turnStoredIntoOriginal(), ne.value = !1, Re(() => {
         o("read-response", e);
       });
-    }, ut = () => Re(() => E.value = !0), rt = () => {
-      he.value.doRefresh();
-    }, ce = Ft(12), Ve = c(() => {
+    }, it = () => Re(() => E.value = !0), dt = () => {
+      ge.value.doRefresh();
+    }, me = Ft(12), Ve = c(() => {
       if (!l.hideEmptyColumns) return [];
       let e = [];
       return L.value.forEach((m) => {
@@ -637,17 +639,17 @@ const dl = ["id"], sl = {
           Z[T] && (G = !0);
         }), G || e.push(T);
       }), e;
-    }), ge = c(() => L.value.filter((e) => !e.hidden)), we = c(() => L.value.filter((e) => e.hidden)), it = c(() => {
-      let e = ge.value.length + 1;
+    }), Ce = c(() => L.value.filter((e) => !e.hidden)), we = c(() => L.value.filter((e) => e.hidden)), st = c(() => {
+      let e = Ce.value.length + 1;
       return l.sortable && ++e, e;
-    }), dt = c(() => L.value.filter((e) => e.isForRowKey)), Ne = c(() => we.value.length > 0 && !l.sortable), st = c(() => L.value.map((e) => e.key)), Le = c(() => {
+    }), ct = c(() => L.value.filter((e) => e.isForRowKey)), Ne = c(() => we.value.length > 0 && !l.sortable), mt = c(() => L.value.map((e) => e.key)), Le = c(() => {
       let e = [];
-      for (let m in u) st.value.indexOf(m) !== -1 && e.push(m);
+      for (let m in u) mt.value.indexOf(m) !== -1 && e.push(m);
       return e;
-    }), Fe = c(() => l.hiddenSave || E.value || !l.saveResource ? !1 : I.value && ne.value ? !0 : I.value), ct = c(() => Ie.value && a.value.length >= l.requiredItemsForTopCreate || l.switchEditionEnabled ? !0 : Fe.value || I.value && Ce.value), mt = c(() => l.saveDisabled || typeof l.saveValidator == "function" && !l.saveValidator(a.value) ? !1 : ne.value), ft = c(() => a.value.length), pt = c(() => ({
+    }), Fe = c(() => l.hiddenSave || E.value || !l.saveResource ? !1 : S.value && ne.value ? !0 : S.value), ft = c(() => Ie.value && a.value.length >= l.requiredItemsForTopCreate || l.switchEditionEnabled ? !0 : Fe.value || S.value && ue.value), pt = c(() => l.saveDisabled || typeof l.saveValidator == "function" && !l.saveValidator(a.value) ? !1 : ne.value), vt = c(() => a.value.length), yt = c(() => ({
       items: a.value,
       ...l.saveResourceData
-    })), vt = c(() => l.titleTag === "" ? "h2" : l.titleTag), yt = c(() => l.wrapContentTag === "" ? "div" : l.wrapContentTag), Ee = c(() => l.title.startsWith("__:") ? ke(l.title.substring(3)) : l.title), kt = c(() => l.saveText.startsWith("__:") ? ke(l.saveText.substring(3)) : l.saveText), bt = c(() => l.editModeText.startsWith("__:") ? ke(l.editModeText.substring(3)) : l.editModeText), Ce = c(() => A.value.includes(X.Create)), Te = c(() => A.value.includes("read")), me = c(() => A.value.includes(X.Update)), Ae = c(() => A.value.includes(X.Edit)), ht = c(() => A.value.includes(X.InlineEdit)), gt = c(() => A.value.includes(X.ModalCreate)), Ct = c(() => A.value.includes(X.InlineCreate)), Ue = c(() => A.value.includes(X.InlineCreateEver)), fe = c(() => A.value.includes(X.Drop)), St = (e) => {
+    })), kt = c(() => l.titleTag === "" ? "h2" : l.titleTag), bt = c(() => l.wrapContentTag === "" ? "div" : l.wrapContentTag), Ee = c(() => l.title.startsWith("__:") ? be(l.title.substring(3)) : l.title), ht = c(() => l.saveText.startsWith("__:") ? be(l.saveText.substring(3)) : l.saveText), gt = c(() => l.editModeText.startsWith("__:") ? be(l.editModeText.substring(3)) : l.editModeText), ue = c(() => A.value.includes(X.Create)), Te = c(() => A.value.includes("read")), fe = c(() => A.value.includes(X.Update)), Ae = c(() => A.value.includes(X.Edit)), Ct = c(() => A.value.includes(X.InlineEdit)), St = c(() => A.value.includes(X.ModalCreate)), It = c(() => A.value.includes(X.InlineCreate)), Ue = c(() => A.value.includes(X.InlineCreateEver)), pe = c(() => A.value.includes(X.Drop)), Dt = (e) => {
       let m = e.target;
       if (typeof m.dataset.column > "u")
         do
@@ -655,23 +657,27 @@ const dl = ["id"], sl = {
         while (typeof m.dataset.column > "u" && m.tagName !== "TABLE" && m.tagName !== "body");
       if (m.tagName === "TD" && (m = m.parentNode, m = m.dataset.i, typeof m < "u"))
         return a.value[m];
-    }, It = (e) => a.value[e], Dt = (e) => {
+    }, Bt = (e) => a.value[e], Vt = (e) => {
       var m;
       return (m = z.value) == null ? void 0 : m.querySelector(`[data-i="${e}"]`);
-    }, Pe = (e) => M.value["tr_" + e] === !0, He = (e) => {
-      e && e.sortable && (a.value = a.value.sort((m, T) => S.value(m, T, e, D.value)), D.value = D.value === ye.Asc ? ye.Desc : ye.Asc, p.value = e.key, o("sort", [p.value, D.value]));
+    }, Pe = (e) => N.value["tr_" + e] === !0, He = (e) => {
+      e && e.sortable && (a.value = a.value.sort((m, T) => I.value(m, T, e, D.value)), D.value = D.value === ke.Asc ? ke.Desc : ke.Asc, p.value = e.key, o("sort", [p.value, D.value]));
     }, We = (e) => {
       o("click", e);
     }, qe = (e, m) => {
       let T = "tr_" + m;
-      M.value[T] = typeof M.value[T] > "u" ? !0 : !M.value[T];
-    }, Bt = (e) => typeof l.checkValidDrag == "function" ? l.checkValidDrag(e) : !0, Ke = (e) => typeof l.draggableChecker == "function" ? l.draggableChecker(e) : !0, je = () => {
+      N.value[T] = typeof N.value[T] > "u" ? !0 : !N.value[T];
+    }, wt = (e) => typeof l.checkValidDrag == "function" ? l.checkValidDrag(e) : !0, Ke = (e) => typeof l.draggableChecker == "function" ? l.draggableChecker(e) : !0, je = () => {
+      if (ue.value) {
+        o("click-create");
+        return;
+      }
       if (Ue.value)
         o("click-create");
       else {
         if (typeof l.newValueGenerator == "function") {
           let e = l.newValueGenerator();
-          if (typeof e == "object" || se.value !== Q.Table) {
+          if (typeof e == "object" || ce.value !== Q.Table) {
             a.value.push(e);
             return;
           }
@@ -680,9 +686,9 @@ const dl = ["id"], sl = {
       }
     }, ze = (e) => {
       a.value.push(e);
-    }, Vt = () => {
+    }, Ge = () => {
       E.value = !0;
-    }, wt = () => {
+    }, Je = () => {
       E.value = !1;
     }, Et = (e, m) => {
       if (o("before-save"), l.saveResource && (E.value = !1, !m.success)) {
@@ -690,22 +696,22 @@ const dl = ["id"], sl = {
         return;
       }
       C.value.turnStoredIntoOriginal(), ne.value = !1, o("save", m);
-    }, Ge = (e, m, T) => {
+    }, Qe = (e, m, T) => {
       if (T >= e.length) {
         let G = T - e.length + 1;
         for (; G--; ) e.push(void 0);
       }
       return e.splice(T, 0, e.splice(m, 1)[0]), e;
     }, Tt = (e) => {
-      Ge(a.value, e, e - 1), B.value = Be();
+      Qe(a.value, e, e - 1), B.value = Be();
     }, $t = (e) => {
-      Ge(a.value, e, e + 1), B.value = Be();
+      Qe(a.value, e, e + 1), B.value = Be();
     }, Se = (e) => {
       a.value.splice(e, 1), B.value = Be();
     }, Rt = () => {
       i.value && (i.value.destroy(), i.value = {});
-    }, Je = () => {
-      le.value || (le.value = document.getElementById("lkt-table-body-" + ce)), i.value = new Ut(le.value, {
+    }, Xe = () => {
+      le.value || (le.value = document.getElementById("lkt-table-body-" + me)), i.value = new Ut(le.value, {
         direction: "vertical",
         handle: ".handle",
         animation: 150,
@@ -714,89 +720,99 @@ const dl = ["id"], sl = {
           a.value.splice(T, 0, a.value.splice(m, 1)[0]), B.value = Be(), o("drag-end");
         },
         onMove: function(e, m) {
-          return Bt(e);
+          return wt(e);
         }
       });
     }, $e = (e, m, T = !1) => {
-      let G = [B.value, ce, "row", m];
-      return T && G.push("hidden"), dt.value.forEach((Z) => {
+      let G = [B.value, me, "row", m];
+      return T && G.push("hidden"), ct.value.forEach((Z) => {
         let O = String(e[Z.key]).toLowerCase();
-        O.length > 50 && (O = O.substring(0, 50)), O = tt(O, " ", "-"), G.push(O);
+        O.length > 50 && (O = O.substring(0, 50)), O = at(O, " ", "-"), G.push(O);
       }), G.join("-");
-    }, Qe = c(() => typeof l.createEnabledValidator == "function" ? l.createEnabledValidator({ items: a.value }) : !0), Ie = c(() => Ue.value || Ct.value && I.value || gt.value && I.value), De = (e, m) => typeof l.itemDisplayChecker == "function" ? l.itemDisplayChecker(e) : !0;
+    }, Ye = c(() => typeof l.createEnabledValidator == "function" ? l.createEnabledValidator({ items: a.value }) : !0), Ie = c(() => Ue.value || ue.value && S.value || It.value && S.value || St.value && S.value), De = (e, m) => typeof l.itemDisplayChecker == "function" ? l.itemDisplayChecker(e) : !0;
     Lt(() => {
       l.initialSorting && He(Kt(l.columns, p.value)), C.value.store({ items: a.value }).turnStoredIntoOriginal(), ne.value = !1, l.sortable && Re(() => {
-        Je();
+        Xe();
       });
     }), F(() => l.sortable, (e) => {
-      e ? Je() : Rt();
-    }), F(() => l.perms, (e) => A.value = e), F(A, (e) => o("update:perms", e)), F(() => l.editMode, (e) => I.value = e), F(() => l.columns, (e) => L.value = e, { deep: !0 }), F(() => l.modelValue, (e) => a.value = e, { deep: !0 }), F(a, (e) => {
+      e ? Xe() : Rt();
+    }), F(() => l.perms, (e) => A.value = e), F(A, (e) => o("update:perms", e)), F(() => l.editMode, (e) => S.value = e), F(() => l.columns, (e) => L.value = e, { deep: !0 }), F(() => l.modelValue, (e) => a.value = e, { deep: !0 }), F(a, (e) => {
       C.value.increment({ items: e }), ne.value = C.value.changed(), o("update:modelValue", e);
     }, { deep: !0 }), r({
-      getItemByEvent: St,
-      getItemByIndex: It,
-      getRowByIndex: Dt,
-      doRefresh: rt,
-      getHtml: () => de.value
+      getItemByEvent: Dt,
+      getItemByIndex: Bt,
+      getRowByIndex: Vt,
+      doRefresh: dt,
+      getHtml: () => se.value
     });
     const Mt = c(() => typeof V.defaultEmptySlot < "u"), Nt = c(() => V.defaultEmptySlot);
     return (e, m) => {
       const T = J("lkt-button"), G = J("lkt-field"), Z = J("lkt-loader"), O = J("lkt-paginator");
       return n(), s("section", {
         ref_key: "element",
-        ref: de,
+        ref: se,
         class: "lkt-table-page",
-        id: "lkt-table-page-" + f(ce)
+        id: "lkt-table-page-" + f(me)
       }, [
         Ee.value || f(u).title ? (n(), s("header", {
           key: 0,
           class: j(e.headerClass)
         }, [
-          Ee.value ? (n(), g(ee(vt.value), { key: 0 }, {
-            default: W(() => [
+          Ee.value ? (n(), g(ee(kt.value), { key: 0 }, {
+            default: U(() => [
               e.titleIcon ? (n(), s("i", {
                 key: 0,
                 class: j(e.titleIcon)
               }, null, 2)) : v("", !0),
-              ie(" " + x(Ee.value), 1)
+              de(" " + x(Ee.value), 1)
             ]),
             _: 1
           })) : v("", !0),
-          f(u).title ? N(e.$slots, "title", { key: 1 }) : v("", !0)
+          f(u).title ? $(e.$slots, "title", { key: 1 }) : v("", !0)
         ], 2)) : v("", !0),
-        (n(), g(ee(yt.value), {
+        (n(), g(ee(bt.value), {
           class: j(["lkt-table-page-content-wrapper", e.wrapContentClass])
         }, {
-          default: W(() => [
-            ct.value ? (n(), s("div", sl, [
-              pe(ue(T, {
+          default: U(() => [
+            ft.value ? (n(), s("div", sl, [
+              ve(re(T, {
                 class: "lkt-table--save-button",
                 ref: "saveButton",
                 icon: f(V).defaultSaveIcon,
-                disabled: !mt.value,
+                disabled: !pt.value,
                 "confirm-modal": e.saveConfirm,
                 "confirm-data": e.confirmData,
                 resource: e.saveResource,
-                "resource-data": pt.value,
-                onLoading: Vt,
-                onLoaded: wt,
+                "resource-data": yt.value,
+                split: e.splitSave,
+                "tooltip-engine": e.saveTooltipEngine,
+                onLoading: Ge,
+                onLoaded: Je,
                 onClick: Et
               }, {
-                default: W(() => [
-                  f(u)["button-save"] ? N(e.$slots, "button-save", {
+                split: U(({ doClose: h, doRootClick: y }) => [
+                  $(e.$slots, "button-save-split", {
+                    doClose: h,
+                    doRootClick: y,
+                    onButtonLoading: Ge,
+                    onButtonLoaded: Je
+                  })
+                ]),
+                default: U(() => [
+                  f(u)["button-save"] ? $(e.$slots, "button-save", {
                     key: 0,
                     items: a.value,
                     editMode: e.editMode,
                     canUpdate: !e.saveDisabled
-                  }) : (n(), s("span", cl, x(kt.value), 1))
+                  }) : (n(), s("span", cl, x(ht.value), 1))
                 ]),
                 _: 3
-              }, 8, ["icon", "disabled", "confirm-modal", "confirm-data", "resource", "resource-data"]), [
-                [ve, Fe.value]
+              }, 8, ["icon", "disabled", "confirm-modal", "confirm-data", "resource", "resource-data", "split", "tooltip-engine"]), [
+                [ye, Fe.value]
               ]),
-              Ie.value && a.value.length >= e.requiredItemsForTopCreate ? (n(), g(_e, {
+              Ie.value && a.value.length >= e.requiredItemsForTopCreate ? (n(), g(et, {
                 key: 0,
-                disabled: !Qe.value || e.createDisabled,
+                disabled: !Ye.value || e.createDisabled,
                 text: e.createText,
                 icon: e.createIcon,
                 to: e.createRoute,
@@ -805,38 +821,38 @@ const dl = ["id"], sl = {
                 onClick: je,
                 onAppend: ze
               }, null, 8, ["disabled", "text", "icon", "to", "modal", "modal-data"])) : v("", !0),
-              U("div", ml, [
-                pe(ue(G, {
+              P("div", ml, [
+                ve(re(G, {
                   type: "switch",
-                  modelValue: I.value,
-                  "onUpdate:modelValue": m[0] || (m[0] = (h) => I.value = h),
-                  label: bt.value
+                  modelValue: S.value,
+                  "onUpdate:modelValue": m[0] || (m[0] = (h) => S.value = h),
+                  label: gt.value
                 }, null, 8, ["modelValue", "label"]), [
-                  [ve, e.switchEditionEnabled]
+                  [ye, e.switchEditionEnabled]
                 ])
               ])
             ])) : v("", !0),
             f(u).buttons ? (n(), s("div", fl, [
-              N(e.$slots, "buttons")
+              $(e.$slots, "buttons")
             ])) : v("", !0),
-            be.value && f(u).filters ? (n(), s("div", pl, [
-              N(e.$slots, "filters", {
+            he.value && f(u).filters ? (n(), s("div", pl, [
+              $(e.$slots, "filters", {
                 items: a.value,
                 isLoading: E.value
               })
             ])) : v("", !0),
             E.value ? (n(), g(Z, { key: 3 })) : v("", !0),
-            pe(U("div", {
+            ve(P("div", {
               class: "lkt-table",
               "data-sortable": e.sortable
             }, [
-              se.value === f(Q).Table ? (n(), s("table", yl, [
-                U("thead", null, [
-                  U("tr", null, [
-                    e.sortable && I.value ? (n(), s("th", kl)) : v("", !0),
-                    e.addNavigation && I.value ? (n(), s("th", bl)) : v("", !0),
+              ce.value === f(Q).Table ? (n(), s("table", yl, [
+                P("thead", null, [
+                  P("tr", null, [
+                    e.sortable && S.value ? (n(), s("th", kl)) : v("", !0),
+                    e.addNavigation && S.value ? (n(), s("th", bl)) : v("", !0),
                     Ne.value ? (n(), s("th", hl)) : v("", !0),
-                    (n(!0), s($, null, K(ge.value, (h) => (n(), s($, null, [
+                    (n(!0), s(R, null, K(Ce.value, (h) => (n(), s(R, null, [
                       Ve.value.indexOf(h.key) === -1 ? (n(), g(il, {
                         key: 0,
                         column: h,
@@ -844,42 +860,42 @@ const dl = ["id"], sl = {
                         "sort-direction": D.value,
                         "amount-of-columns": e.columns.length,
                         items: a.value,
-                        onClick: (k) => He(h)
+                        onClick: (y) => He(h)
                       }, null, 8, ["column", "sort-by", "sort-direction", "amount-of-columns", "items", "onClick"])) : v("", !0)
                     ], 64))), 256)),
-                    fe.value && I.value ? (n(), s("th", gl)) : v("", !0),
-                    Ae.value && me.value && I.value ? (n(), s("th", Cl)) : v("", !0)
+                    pe.value && S.value ? (n(), s("th", gl)) : v("", !0),
+                    Ae.value && fe.value && S.value ? (n(), s("th", Cl)) : v("", !0)
                   ])
                 ]),
-                U("tbody", {
+                P("tbody", {
                   ref_key: "tableBody",
                   ref: z,
-                  id: "lkt-table-body-" + f(ce)
+                  id: "lkt-table-body-" + f(me)
                 }, [
-                  (n(!0), s($, null, K(a.value, (h, k) => pe((n(), g(el, {
-                    modelValue: a.value[k],
-                    "onUpdate:modelValue": (H) => a.value[k] = H,
-                    key: $e(h, k),
-                    i: k,
+                  (n(!0), s(R, null, K(a.value, (h, y) => ve((n(), g(el, {
+                    modelValue: a.value[y],
+                    "onUpdate:modelValue": (W) => a.value[y] = W,
+                    key: $e(h, y),
+                    i: y,
                     "display-hidden-columns-indicator": Ne.value,
                     "is-draggable": Ke(h),
                     sortable: e.sortable,
-                    "visible-columns": ge.value,
+                    "visible-columns": Ce.value,
                     "empty-columns": Ve.value,
                     "add-navigation": e.addNavigation,
-                    "hidden-is-visible": Pe(k),
-                    "latest-row": k + 1 === ft.value,
-                    "can-drop": fe.value && I.value,
+                    "hidden-is-visible": Pe(y),
+                    "latest-row": y + 1 === vt.value,
+                    "can-drop": pe.value && S.value,
                     "drop-confirm": e.dropConfirm,
                     "drop-resource": e.dropResource,
                     "drop-text": e.dropText,
                     "drop-icon": e.dropIcon,
-                    "can-edit": Ae.value && me.value && I.value,
+                    "can-edit": Ae.value && fe.value && S.value,
                     "edit-text": e.editText,
                     "edit-icon": e.editIcon,
                     "edit-link": e.editLink,
-                    "edit-mode-enabled": I.value,
-                    "has-inline-edit-perm": ht.value,
+                    "edit-mode-enabled": S.value,
+                    "has-inline-edit-perm": Ct.value,
                     "row-display-type": e.rowDisplayType,
                     "render-drag": e.renderDrag,
                     onClick: We,
@@ -887,30 +903,30 @@ const dl = ["id"], sl = {
                     onItemUp: Tt,
                     onItemDown: $t,
                     onItemDrop: Se
-                  }, Ye({ _: 2 }, [
-                    f(u)[`item-${k}`] ? {
-                      name: `item-${k}`,
-                      fn: W((H) => [
-                        N(e.$slots, `item-${k}`, oe({
-                          [e.slotItemVar || ""]: H.item,
-                          index: k
+                  }, Oe({ _: 2 }, [
+                    f(u)[`item-${y}`] ? {
+                      name: `item-${y}`,
+                      fn: U((W) => [
+                        $(e.$slots, `item-${y}`, oe({
+                          [e.slotItemVar || ""]: W.item,
+                          index: y
                         }))
                       ]),
                       key: "0"
                     } : f(u).item ? {
                       name: "item",
-                      fn: W((H) => [
-                        N(e.$slots, "item", oe({
-                          [e.slotItemVar || ""]: H.item,
-                          index: k
+                      fn: U((W) => [
+                        $(e.$slots, "item", oe({
+                          [e.slotItemVar || ""]: W.item,
+                          index: y
                         }))
                       ]),
                       key: "1"
                     } : void 0,
-                    K(Le.value, (H) => ({
-                      name: H,
-                      fn: W((ae) => [
-                        N(e.$slots, H, oe({
+                    K(Le.value, (W) => ({
+                      name: W,
+                      fn: U((ae) => [
+                        $(e.$slots, W, oe({
                           [e.slotItemVar || ""]: ae.item,
                           value: ae.value,
                           column: ae.column
@@ -918,27 +934,27 @@ const dl = ["id"], sl = {
                       ])
                     }))
                   ]), 1032, ["modelValue", "onUpdate:modelValue", "i", "display-hidden-columns-indicator", "is-draggable", "sortable", "visible-columns", "empty-columns", "add-navigation", "hidden-is-visible", "latest-row", "can-drop", "drop-confirm", "drop-resource", "drop-text", "drop-icon", "can-edit", "edit-text", "edit-icon", "edit-link", "edit-mode-enabled", "has-inline-edit-perm", "row-display-type", "render-drag"])), [
-                    [ve, De(a.value[k])]
+                    [ye, De(a.value[y])]
                   ])), 128)),
-                  we.value.length > 0 ? (n(!0), s($, { key: 0 }, K(a.value, (h, k) => (n(), g(ul, {
-                    modelValue: a.value[k],
-                    "onUpdate:modelValue": (H) => a.value[k] = H,
-                    key: $e(h, k, !0),
-                    i: k,
+                  we.value.length > 0 ? (n(!0), s(R, { key: 0 }, K(a.value, (h, y) => (n(), g(ul, {
+                    modelValue: a.value[y],
+                    "onUpdate:modelValue": (W) => a.value[y] = W,
+                    key: $e(h, y, !0),
+                    i: y,
                     "hidden-columns": we.value,
-                    "hidden-columns-col-span": it.value,
+                    "hidden-columns-col-span": st.value,
                     "is-draggable": Ke(h),
                     sortable: e.sortable,
-                    "visible-columns": ge.value,
+                    "visible-columns": Ce.value,
                     "empty-columns": Ve.value,
-                    "hidden-is-visible": Pe(k),
+                    "hidden-is-visible": Pe(y),
                     onClick: We,
                     onShow: qe
-                  }, Ye({ _: 2 }, [
-                    K(Le.value, (H) => ({
-                      name: H,
-                      fn: W((ae) => [
-                        N(e.$slots, H, oe({
+                  }, Oe({ _: 2 }, [
+                    K(Le.value, (W) => ({
+                      name: W,
+                      fn: U((ae) => [
+                        $(e.$slots, W, oe({
                           [e.slotItemVar || ""]: ae.item,
                           value: ae.value,
                           column: ae.column
@@ -947,29 +963,29 @@ const dl = ["id"], sl = {
                     }))
                   ]), 1032, ["modelValue", "onUpdate:modelValue", "i", "hidden-columns", "hidden-columns-col-span", "is-draggable", "sortable", "visible-columns", "empty-columns", "hidden-is-visible"]))), 128)) : v("", !0)
                 ], 8, Sl)
-              ])) : se.value === f(Q).Item ? (n(), s("div", {
+              ])) : ce.value === f(Q).Item ? (n(), s("div", {
                 key: 1,
                 ref_key: "tableBody",
                 ref: z,
-                id: "lkt-table-body-" + f(ce),
+                id: "lkt-table-body-" + f(me),
                 class: j(["lkt-table-items-container", e.itemsContainerClass])
               }, [
-                (n(!0), s($, null, K(a.value, (h, k) => (n(), s($, null, [
+                (n(!0), s(R, null, K(a.value, (h, y) => (n(), s(R, null, [
                   De(h) ? (n(), s("div", {
                     class: "lkt-table-item",
-                    "data-i": k,
-                    key: $e(h, k)
+                    "data-i": y,
+                    key: $e(h, y)
                   }, [
-                    N(e.$slots, "item", oe({
+                    $(e.$slots, "item", oe({
                       [e.slotItemVar || ""]: h,
-                      index: k,
-                      editing: I.value,
-                      canCreate: Ce.value,
+                      index: y,
+                      editing: S.value,
+                      canCreate: ue.value,
                       canRead: Te.value,
-                      canUpdate: me.value,
-                      canDrop: fe.value,
+                      canUpdate: fe.value,
+                      canDrop: pe.value,
                       isLoading: E.value,
-                      doDrop: () => Se(k)
+                      doDrop: () => Se(y)
                     }))
                   ], 8, Dl)) : v("", !0)
                 ], 64))), 256))
@@ -977,22 +993,22 @@ const dl = ["id"], sl = {
                 key: 2,
                 class: j(["lkt-table-items-container", e.itemsContainerClass])
               }, [
-                (n(!0), s($, null, K(a.value, (h, k) => (n(), s($, null, [
+                (n(!0), s(R, null, K(a.value, (h, y) => (n(), s(R, null, [
                   De(h) ? (n(), s("li", {
                     key: 0,
                     class: "lkt-table-item",
-                    "data-i": k
+                    "data-i": y
                   }, [
-                    N(e.$slots, "item", oe({
+                    $(e.$slots, "item", oe({
                       [e.slotItemVar || ""]: h,
-                      index: k,
-                      editing: I.value,
-                      canCreate: Ce.value,
+                      index: y,
+                      editing: S.value,
+                      canCreate: ue.value,
                       canRead: Te.value,
-                      canUpdate: me.value,
-                      canDrop: fe.value,
+                      canUpdate: fe.value,
+                      canDrop: pe.value,
                       isLoading: E.value,
-                      doDrop: () => Se(k)
+                      doDrop: () => Se(y)
                     }))
                   ], 8, Bl)) : v("", !0)
                 ], 64))), 256))
@@ -1000,41 +1016,41 @@ const dl = ["id"], sl = {
                 key: 3,
                 class: j(["lkt-table-items-container", e.itemsContainerClass])
               }, [
-                (n(!0), s($, null, K(a.value, (h, k) => (n(), s($, null, [
+                (n(!0), s(R, null, K(a.value, (h, y) => (n(), s(R, null, [
                   De(h) ? (n(), s("li", {
                     key: 0,
                     class: "lkt-table-item",
-                    "data-i": k
+                    "data-i": y
                   }, [
-                    N(e.$slots, "item", oe({
+                    $(e.$slots, "item", oe({
                       [e.slotItemVar || ""]: h,
-                      index: k,
-                      editing: I.value,
-                      canCreate: Ce.value,
+                      index: y,
+                      editing: S.value,
+                      canCreate: ue.value,
                       canRead: Te.value,
-                      canUpdate: me.value,
-                      canDrop: fe.value,
+                      canUpdate: fe.value,
+                      canDrop: pe.value,
                       isLoading: E.value,
-                      doDrop: () => Se(k)
+                      doDrop: () => Se(y)
                     }))
                   ], 8, Vl)) : v("", !0)
                 ], 64))), 256))
               ], 2)) : v("", !0)
             ], 8, vl), [
-              [ve, !E.value && a.value.length > 0]
+              [ye, !E.value && a.value.length > 0]
             ]),
             !E.value && a.value.length === 0 ? (n(), s("div", wl, [
-              f(u).empty ? N(e.$slots, "empty", { key: 0 }) : Mt.value ? (n(), g(ee(Nt.value), {
+              f(u).empty ? $(e.$slots, "empty", { key: 0 }) : Mt.value ? (n(), g(ee(Nt.value), {
                 key: 1,
                 message: e.noResultsText
-              }, null, 8, ["message"])) : e.noResultsText ? (n(), s($, { key: 2 }, [
-                ie(x(e.noResultsText), 1)
+              }, null, 8, ["message"])) : e.noResultsText ? (n(), s(R, { key: 2 }, [
+                de(x(e.noResultsText), 1)
               ], 64)) : v("", !0)
             ])) : v("", !0),
             Ie.value || f(u).bottomButtons ? (n(), s("div", El, [
-              Ie.value && a.value.length >= e.requiredItemsForBottomCreate ? (n(), g(_e, {
+              Ie.value && a.value.length >= e.requiredItemsForBottomCreate ? (n(), g(et, {
                 key: 0,
-                disabled: !Qe.value || e.createDisabled,
+                disabled: !Ye.value || e.createDisabled,
                 text: e.createText,
                 icon: e.createIcon,
                 to: e.createRoute,
@@ -1043,19 +1059,19 @@ const dl = ["id"], sl = {
                 onClick: je,
                 onAppend: ze
               }, null, 8, ["disabled", "text", "icon", "to", "modal", "modal-data"])) : v("", !0),
-              N(e.$slots, "bottom-buttons")
+              $(e.$slots, "bottom-buttons")
             ])) : v("", !0),
             e.resource.length > 0 ? (n(), g(O, {
               key: 6,
               ref_key: "paginator",
-              ref: he,
+              ref: ge,
               modelValue: w.value,
               "onUpdate:modelValue": m[1] || (m[1] = (h) => w.value = h),
               resource: e.resource,
               filters: e.filters,
-              onLoading: ut,
-              onPerms: ot,
-              onResponse: nt
+              onLoading: it,
+              onPerms: ut,
+              onResponse: rt
             }, null, 8, ["modelValue", "resource", "filters"])) : v("", !0)
           ]),
           _: 3
@@ -1073,7 +1089,7 @@ const dl = ["id"], sl = {
   V.defaultSaveIcon = t;
 };
 export {
-  P as Column,
+  H as Column,
   Hl as createActionColumn,
   Gl as createCheckColumn,
   Ul as createColumn,

package/dist/style.css

@@ -1 +1 @@
-.lkt-table-page{display:flex;width:100%;flex-direction:column;gap:var(--lkt-table-page-gap)}.lkt-table-page-content-wrapper{display:grid;width:100%;flex-direction:column;gap:var(--lkt-table-page-gap)}.lkt-table{width:var(--lkt-table-width);font-family:var(--lkt-table-font-family),serif}.lkt-table .lkt-field{--lkt-field-font-size: var(--lkt-table-font-size-row)}.lkt-table>table{width:100%;max-width:100%;border-collapse:var(--lkt-table-border-collapse);border-radius:var(--lkt-table-border-radius);border-spacing:var(--lkt-table-border-spacing)}.lkt-table th,.lkt-table td{vertical-align:middle;text-align:var(--lkt-table-text-align);padding:var(--lkt-table-padding-row);font-size:var(--lkt-table-font-size-row);color:var(--lkt-table-color-row)}.lkt-table th{font-family:var(--lkt-table-font-family-header),serif;padding:var(--lkt-table-padding-header)}.lkt-table thead tr{background-color:var(--lkt-table-bg-header);position:sticky;top:0;z-index:1}.lkt-table tbody tr{background-color:var(--lkt-table-bg-row)}.lkt-table tbody tr:nth-child(odd){background-color:var(--lkt-table-bg-row-odd)}.lkt-table [data-sort=asc]>div,.lkt-table [data-sort=desc]>div{display:inline-block}.lkt-table [data-sort=asc]>div:after,.lkt-table [data-sort=desc]>div:after{font-family:var(--lkt-table-font-family-sort-icon),serif;display:inline-block;font-size:var(--lkt-table-font-size-sort-icon)}.lkt-table [data-sort=asc]>div:after{content:var(--lkt-table-sort-icon-content-asc)}.lkt-table [data-sort=desc]>div:after{content:var(--lkt-table-sort-icon-content-desc)}.lkt-table td[data-role=drag-indicator],.lkt-table td[data-role=invalid-drag-indicator]{width:var(--lkt-table-width-drag);height:40px;padding:0!important;position:relative;background:#eee;cursor:pointer}.lkt-table td[data-role=drag-indicator]:before,.lkt-table td[data-role=invalid-drag-indicator]:before{content:"";display:block;background:#d4d4d4;border-bottom:1px solid #848484;margin:auto;position:absolute;top:0;left:0;height:100%;width:100%}.lkt-table td[data-role=drag-indicator]:after,.lkt-table td[data-role=invalid-drag-indicator]:after{content:"…";color:#000;display:block;position:absolute;top:50%;left:60%;font-weight:700;width:15px;height:7px;transform:rotate(90deg);transform-origin:center center}[data-lkt=empty-table]{border:1px solid #ddd;border-radius:var(--lkt-table-border-radius);width:100%;padding:10px;background-color:#f8f7e5;font-family:var(--lkt-table-font-family);font-size:13px;color:#444;text-align:var(--lkt-table-text-align)}.sortable-chosen{border:var(--lkt-table-border-sortable-chosen)}.sortable-chosen.ghost{background:var(--lkt-table-bg-sortable-chosen-ghost)}.lkt-table td.lkt-table-nav-cell{padding:0}.lkt-table-nav-container{display:flex;align-items:center;flex-direction:column;justify-content:center}.lkt-table-page-buttons{position:sticky;top:calc(-1 * var(--lkt-table-gap-buttons));display:flex;align-items:center;gap:var(--lkt-table-gap-buttons);transition:all linear .15s;background:transparent;z-index:2}.lkt-table-page-buttons-bottom{justify-content:center}.lkt-table-page-buttons>.switch-edition-mode{margin-left:auto}.lkt-table .lkt-table-col-drop{width:var(--lkt-table-width-col-drop);text-align:var(--lkt-table-text-align-col-drop)}
+.lkt-table-page{display:flex;width:100%;flex-direction:column;gap:var(--lkt-table-page-gap)}.lkt-table-page-content-wrapper{display:grid;width:100%;flex-direction:column;gap:var(--lkt-table-page-gap)}.lkt-table{width:var(--lkt-table-width);font-family:var(--lkt-table-font-family),serif}.lkt-table .lkt-field{--lkt-field-font-size: var(--lkt-table-font-size-row)}.lkt-table>table{width:100%;max-width:100%;border-collapse:var(--lkt-table-border-collapse);border-radius:var(--lkt-table-border-radius);border-spacing:var(--lkt-table-border-spacing)}.lkt-table th,.lkt-table td{vertical-align:middle;text-align:var(--lkt-table-text-align);padding:var(--lkt-table-padding-row);font-size:var(--lkt-table-font-size-row);color:var(--lkt-table-color-row)}.lkt-table th{font-family:var(--lkt-table-font-family-header),serif;padding:var(--lkt-table-padding-header)}.lkt-table thead tr{background-color:var(--lkt-table-bg-header);position:sticky;top:0;z-index:1}.lkt-table tbody tr{background-color:var(--lkt-table-bg-row)}.lkt-table tbody tr:nth-child(odd){background-color:var(--lkt-table-bg-row-odd)}.lkt-table [data-sort=asc]>div,.lkt-table [data-sort=desc]>div{display:inline-block}.lkt-table [data-sort=asc]>div:after,.lkt-table [data-sort=desc]>div:after{font-family:var(--lkt-table-font-family-sort-icon),serif;display:inline-block;font-size:var(--lkt-table-font-size-sort-icon)}.lkt-table [data-sort=asc]>div:after{content:var(--lkt-table-sort-icon-content-asc)}.lkt-table [data-sort=desc]>div:after{content:var(--lkt-table-sort-icon-content-desc)}.lkt-table td[data-role=drag-indicator],.lkt-table td[data-role=invalid-drag-indicator]{width:var(--lkt-table-width-drag);height:40px;padding:0!important;position:relative;background:#eee;cursor:pointer}.lkt-table td[data-role=drag-indicator]:before,.lkt-table td[data-role=invalid-drag-indicator]:before{content:"";display:block;background:#d4d4d4;border-bottom:1px solid #848484;margin:auto;position:absolute;top:0;left:0;height:100%;width:100%}.lkt-table td[data-role=drag-indicator]:after,.lkt-table td[data-role=invalid-drag-indicator]:after{content:"…";color:#000;display:block;position:absolute;top:50%;left:60%;font-weight:700;width:15px;height:7px;transform:rotate(90deg);transform-origin:center center}[data-lkt=empty-table]{border:1px solid #ddd;border-radius:var(--lkt-table-border-radius);width:100%;padding:10px;background-color:#f8f7e5;font-family:var(--lkt-table-font-family);font-size:13px;color:#444;text-align:var(--lkt-table-text-align)}.sortable-chosen{border:var(--lkt-table-border-sortable-chosen)}.sortable-chosen.ghost{background:var(--lkt-table-bg-sortable-chosen-ghost)}.lkt-table td.lkt-table-nav-cell{padding:0}.lkt-table-nav-container{display:flex;align-items:center;flex-direction:column;justify-content:center}.lkt-table-page-buttons{position:sticky;top:calc(-1 * var(--lkt-table-gap-buttons));display:flex;align-items:center;gap:var(--lkt-table-gap-buttons);transition:all linear .15s;background:transparent;z-index:6}.lkt-table-page-buttons-bottom{justify-content:center}.lkt-table-page-buttons>.switch-edition-mode{margin-left:auto}.lkt-table .lkt-table-col-drop{width:var(--lkt-table-width-col-drop);text-align:var(--lkt-table-text-align-col-drop)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-table",
-  "version": "1.3.20",
+  "version": "1.3.22",
   "description": "",
   "keywords": [
     "lkt",

package/src/lib-components/LktTable.vue

@@ -74,6 +74,8 @@ const props = withDefaults(defineProps<{
     confirmData?: LktObject
     saveResource?: string
     saveResourceData?: LktObject
+    saveTooltipEngine?: string
+    splitSave?: boolean
     saveText?: string
     createText?: string
     createIcon?: string
@@ -126,6 +128,7 @@ const props = withDefaults(defineProps<{
     wrapContentTag: 'div',
     wrapContentClass: '',
     itemsContainerClass: '',
+    saveTooltipEngine: 'absolute',
     filters: () => [],
     dataStateConfig: () => ({}),
     hiddenSave: false,
@@ -136,6 +139,7 @@ const props = withDefaults(defineProps<{
     confirmData: () => ({}),
     saveResource: '',
     saveResourceData: () => ({}),
+    splitSave: false,
     saveText: 'Save',
     dropText: 'Delete',
     dropIcon: '',
@@ -378,6 +382,11 @@ const getItemByEvent = (e: any) => {
         return true;
     },
     onClickAddItem = () => {
+        if (hasCreatePerm.value) {
+            emit('click-create');
+            return;
+        }
+
         if (!hasInlineCreateEverPerm.value) {
             if (typeof props.newValueGenerator === 'function') {
                 let newValue = props.newValueGenerator();
@@ -489,6 +498,7 @@ const getItemByEvent = (e: any) => {
     }),
     computedDisplayCreateButton = computed(() => {
         return hasInlineCreateEverPerm.value
+            || (hasCreatePerm.value && editModeEnabled.value)
             || (hasInlineCreatePerm.value && editModeEnabled.value)
             || (hasModalCreatePerm.value && editModeEnabled.value);
     }),
@@ -576,6 +586,8 @@ const hasEmptySlot = computed(() => {
                     :confirm-data="confirmData"
                     :resource="saveResource"
                     :resource-data="computedSaveResourceData"
+                    :split="splitSave"
+                    :tooltip-engine="saveTooltipEngine"
                     v-on:loading="onButtonLoading"
                     v-on:loaded="onButtonLoaded"
                     v-on:click="onSave">
@@ -585,6 +597,14 @@ const hasEmptySlot = computed(() => {
                           :edit-mode="editMode"
                           :can-update="!saveDisabled"></slot>
                     <span v-else>{{ computedSaveText }}</span>
+
+                    <template v-slot:split="{doClose, doRootClick}">
+                        <slot name="button-save-split"
+                              :do-close="doClose"
+                              :do-root-click="doRootClick"
+                              :on-button-loading="onButtonLoading"
+                              :on-button-loaded="onButtonLoaded" />
+                    </template>
                 </lkt-button>
 
                 <create-button