lkt-item-crud 1.2.1 → 1.2.3

package/dist/build.d.ts

@@ -1,7 +1,7 @@
-declare function qe(t?: boolean): void;
-declare namespace Ae {
-    function install(t: any, C?: {}): void;
+declare function Ye(o?: boolean): void;
+declare namespace Ze {
+    function install(o: any, g?: {}): void;
 }
-declare function We(t: any): void;
-declare function He(t: any): void;
-export { qe as debugLktItemCrud, Ae as default, We as setItemCrudDefaultDropIcon, He as setItemCrudDefaultSaveIcon };
+declare function xe(o: any): void;
+declare function _e(o: any): void;
+export { Ye as debugLktItemCrud, Ze as default, xe as setItemCrudDefaultDropIcon, _e as setItemCrudDefaultSaveIcon };

package/dist/build.js

@@ -1,63 +1,210 @@
-import { defineComponent as pe, useSlots as me, ref as s, computed as n, watch as y, nextTick as he, resolveComponent as J, openBlock as c, createBlock as N, resolveDynamicComponent as Ce, normalizeProps as ke, guardReactiveProps as be, withCtx as P, createElementVNode as Z, createElementBlock as B, unref as h, renderSlot as R, createCommentVNode as v, toDisplayString as De, withDirectives as V, createVNode as ee, vShow as T } from "vue";
-import { httpCall as ye } from "lkt-http-client";
-import { DataState as ae } from "lkt-data-state";
-import { execModal as Se, refreshModal as ge, closeModal as Me, openModal as Ie, reOpenModal as Be } from "lkt-modal";
-import { __ as _e } from "lkt-i18n";
-const L = class L {
+import { defineComponent as pe, useSlots as ce, ref as v, watch as C, resolveComponent as Z, openBlock as c, createElementBlock as S, unref as f, withDirectives as I, renderSlot as k, vShow as T, createCommentVNode as m, createVNode as _, withCtx as E, createBlock as O, computed as s, nextTick as Ce, resolveDynamicComponent as ke, normalizeProps as ye, guardReactiveProps as De, createElementVNode as ge, toDisplayString as Se, createSlots as se } from "vue";
+import { httpCall as we } from "lkt-http-client";
+import { DataState as ie } from "lkt-data-state";
+import { execModal as Be, refreshModal as Me, closeModal as Ie, openModal as Te, reOpenModal as Ue } from "lkt-modal";
+import { __ as Ne } from "lkt-i18n";
+const F = class F {
 };
-L.debugEnabled = !1, L.defaultSaveIcon = "", L.defaultDropIcon = "";
-let S = L;
-const u = (...t) => {
-  S.debugEnabled && console.info("[LktItemCrud] ", ...t);
-}, qe = (t = !0) => {
-  S.debugEnabled = t;
-}, j = (t) => {
-  u("runModalCallback -> init", t);
-  let C = t.modalKey ? t.modalKey : "_", _ = t.args ? t.args : {};
-  switch (t.action) {
+F.debugEnabled = !1, F.defaultSaveIcon = "", F.defaultDropIcon = "";
+let U = F;
+const i = (...o) => {
+  U.debugEnabled && console.info("[LktItemCrud] ", ...o);
+}, Ye = (o = !0) => {
+  U.debugEnabled = o;
+}, Y = (o) => {
+  i("runModalCallback -> init", o);
+  let g = o.modalKey ? o.modalKey : "_", B = o.args ? o.args : {};
+  switch (o.action) {
     case "reOpen":
-      return Be(t.modalName, C, _);
+      return Ue(o.modalName, g, B);
     case "open":
-      return Ie(t.modalName, C, _);
+      return Te(o.modalName, g, B);
     case "close":
-      return Me(t.modalName, C);
+      return Ie(o.modalName, g);
     case "refresh":
-      return ge(t.modalName, C, _);
+      return Me(o.modalName, g, B);
     case "exec":
-      let e = t.method;
-      return e ? Se(t.modalName, C, e, _) : void 0;
+      let e = o.method;
+      return e ? Be(o.modalName, g, e, B) : void 0;
   }
-}, we = { class: "lkt-item-crud" }, Ee = {
+}, Re = { class: "lkt-item-crud-buttons" }, $e = {
+  key: 0,
+  class: "lkt-item-crud-buttons"
+}, Ee = {
+  key: 1,
+  class: "lkt-item-crud-buttons"
+}, Ve = {
+  key: 3,
+  class: "lkt-item-crud-buttons"
+}, ve = /* @__PURE__ */ pe({
+  __name: "ButtonNav",
+  props: {
+    item: { default: () => ({}) },
+    editing: { type: Boolean, default: !1 },
+    loading: { type: Boolean },
+    createMode: { type: Boolean },
+    canUpdate: { type: Boolean },
+    canDrop: { type: Boolean },
+    showSwitchButton: { type: Boolean },
+    showSaveButton: { type: Boolean, default: !1 },
+    showDropButton: { type: Boolean },
+    ableToSave: { type: Boolean, default: !1 },
+    ableToDrop: { type: Boolean },
+    saveConfirm: {},
+    dropConfirm: {},
+    confirmData: {},
+    dropConfirmData: {},
+    saveResource: {},
+    dropResource: {},
+    saveData: {},
+    dropData: {},
+    saveText: {},
+    dropText: {},
+    saveIcon: {},
+    dropIcon: {},
+    editModeText: {}
+  },
+  emits: ["update:loading", "update:editing", "save", "drop"],
+  setup(o, { expose: g, emit: B }) {
+    const e = B, b = o, u = ce(), V = v(null), r = v(null), d = v(b.loading);
+    C(() => b.loading, (t) => d.value = t), C(d, (t) => e("update:loading", t));
+    const p = v(b.editing);
+    C(() => b.editing, (t) => p.value = t), C(p, (t) => e("update:editing", t));
+    const h = () => {
+      d.value = !0;
+    }, y = () => {
+      d.value = !1;
+    }, w = () => {
+      e("save");
+    }, D = () => {
+      e("drop");
+    };
+    return g({
+      doSave: () => {
+        V.value && typeof V.value.click == "function" && V.value.click();
+      },
+      doDrop: () => {
+        r.value && typeof r.value.click == "function" && r.value.click();
+      }
+    }), (t, L) => {
+      const n = Z("lkt-button");
+      return c(), S("div", Re, [
+        f(u)["prev-buttons-ever"] ? I((c(), S("div", $e, [
+          k(t.$slots, "prev-buttons-ever")
+        ], 512)), [
+          [T, !d.value]
+        ]) : m("", !0),
+        f(u)["prev-buttons"] ? I((c(), S("div", Ee, [
+          k(t.$slots, "prev-buttons")
+        ], 512)), [
+          [T, p.value && !d.value]
+        ]) : m("", !0),
+        I(_(n, {
+          ref_key: "saveButton",
+          ref: V,
+          palette: "success",
+          disabled: !t.ableToSave,
+          "confirm-modal": t.saveConfirm,
+          "confirm-data": t.confirmData,
+          resource: t.saveResource,
+          "resource-data": t.saveData,
+          text: f(u)["button-save"] ? "" : t.saveText,
+          icon: f(u)["button-save"] ? "" : t.saveIcon,
+          onLoading: h,
+          onLoaded: y,
+          onClick: w
+        }, {
+          default: E(() => [
+            f(u)["button-save"] ? k(t.$slots, "button-save", {
+              key: 0,
+              item: t.item,
+              editMode: p.value,
+              isCreate: t.createMode,
+              canUpdate: t.canUpdate,
+              canDrop: t.canDrop
+            }) : m("", !0)
+          ]),
+          _: 3
+        }, 8, ["disabled", "confirm-modal", "confirm-data", "resource", "resource-data", "text", "icon"]), [
+          [T, t.showSaveButton]
+        ]),
+        t.createMode ? m("", !0) : I((c(), O(n, {
+          key: 2,
+          ref_key: "dropButton",
+          ref: r,
+          palette: "danger",
+          disabled: !t.ableToDrop,
+          "confirm-modal": t.dropConfirm,
+          "confirm-data": t.dropConfirmData,
+          resource: t.dropResource,
+          "resource-data": t.dropData,
+          text: f(u)["button-drop"] ? "" : t.dropText,
+          icon: f(u)["button-drop"] ? "" : t.dropIcon,
+          onLoading: h,
+          onLoaded: y,
+          onClick: D
+        }, {
+          default: E(() => [
+            f(u)["button-drop"] ? k(t.$slots, "button-drop", {
+              key: 0,
+              item: t.item,
+              editMode: p.value,
+              isCreate: t.createMode,
+              canUpdate: t.canUpdate,
+              canDrop: t.canDrop
+            }) : m("", !0)
+          ]),
+          _: 3
+        }, 8, ["disabled", "confirm-modal", "confirm-data", "resource", "resource-data", "text", "icon"])), [
+          [T, t.showDropButton]
+        ]),
+        f(u).buttons ? I((c(), S("div", Ve, [
+          k(t.$slots, "buttons")
+        ], 512)), [
+          [T, p.value && !d.value]
+        ]) : m("", !0),
+        I(_(n, {
+          checked: p.value,
+          "onUpdate:checked": L[0] || (L[0] = (A) => p.value = A),
+          class: "lkt-item-crud--switch-mode-button",
+          "show-switch": "",
+          text: t.editModeText
+        }, null, 8, ["checked", "text"]), [
+          [T, t.showSwitchButton]
+        ])
+      ]);
+    };
+  }
+});
+var x = /* @__PURE__ */ ((o) => (o.Top = "top", o.Bottom = "bottom", o))(x || {}), j = /* @__PURE__ */ ((o) => (o.Changed = "changed", o.Always = "always", o))(j || {});
+const Le = { class: "lkt-item-crud" }, Oe = {
   key: 0,
   class: "lkt-item-crud_header"
-}, Re = {
+}, Ae = {
   key: 0,
   class: "lkt-item-crud_header-slot"
-}, Ue = {
+}, ze = {
   key: 1,
   class: "lkt-item-crud_header-title"
-}, Ne = {
+}, Ke = {
   key: 2,
   class: "lkt-item-crud_header-slot"
-}, Ve = { class: "lkt-item-crud-buttons" }, Te = {
-  key: 1,
-  class: "lkt-item-crud-buttons"
-}, Le = {
+}, Fe = {
   key: 1,
   class: "lkt-item-crud_content"
-}, Oe = {
+}, Pe = {
   key: 0,
   class: "lkt-grid-1"
-}, $e = /* @__PURE__ */ pe({
+}, Je = /* @__PURE__ */ pe({
   __name: "LktItemCrud",
   props: {
     modelValue: { default: () => ({}) },
     title: { default: "" },
     editModeText: { default: "Edition Mode" },
     saveText: { default: "Save" },
-    saveIcon: { default: () => S.defaultSaveIcon },
+    saveIcon: { default: () => U.defaultSaveIcon },
     dropText: { default: "Delete" },
-    dropIcon: { default: () => S.defaultDropIcon },
+    dropIcon: { default: () => U.defaultDropIcon },
     hiddenSave: { type: Boolean, default: !1 },
     hiddenDrop: { type: Boolean, default: !1 },
     hiddenButtons: { type: Boolean, default: !1 },
@@ -90,6 +237,8 @@ const u = (...t) => {
     onUpdateModalCallbacks: { default: () => [] },
     onDropModalCallbacks: { default: () => [] },
     editing: { type: Boolean, default: !1 },
+    buttonNavPosition: { default: x.Top },
+    buttonNavVisibility: { default: j.Changed },
     size: { default: "" },
     preTitle: { default: "" },
     showClose: { type: Boolean, default: !0 },
@@ -103,79 +252,75 @@ const u = (...t) => {
     beforeClose: { type: Function, default: void 0 }
   },
   emits: ["update:modelValue", "update:isCreate", "update:editing", "read", "create", "update", "drop", "before-save", "perms", "error", "modified-data"],
-  setup(t, { expose: C, emit: _ }) {
-    const e = t, p = me(), i = _;
-    let te = [];
-    const d = s(!0), r = s(e.modelValue), U = s(te), f = s(e.editing), k = s(!1), g = s(!1), m = s(200), O = s(null), $ = s(null), b = s(new ae(r.value, e.dataStateConfig)), K = s(new ae(e.readData)), o = s(e.isCreate), x = s(!1), le = n(() => o.value ? e.createConfirm : e.updateConfirm), oe = n(() => o.value ? e.createConfirmData : e.updateConfirmData), q = n(() => o.value ? e.createResource : e.updateResource), ue = n(() => o.value ? { ...e.createData, ...JSON.parse(JSON.stringify(r.value)) } : { ...e.updateData, ...JSON.parse(JSON.stringify(r.value)) }), de = n(() => o.value ? e.createDisabled : e.updateDisabled), M = n(() => !o.value && U.value.includes("update")), I = n(() => !o.value && U.value.includes("drop")), z = async () => {
-      u("fetchItem"), d.value = !0, m.value = -1, g.value = !1;
+  setup(o, { expose: g, emit: B }) {
+    const e = o, b = ce(), u = B;
+    let V = [];
+    const r = v(!0), d = v(e.modelValue), p = v(V), h = v(e.editing), y = v(!1), w = v(!1), D = v(200), ee = v(null), ae = v(null), t = v(new ie(d.value, e.dataStateConfig)), L = v(new ie(e.readData)), n = v(e.isCreate), A = v(!1), P = v(null), te = s(() => n.value ? e.createConfirm : e.updateConfirm), oe = s(() => n.value ? e.createConfirmData : e.updateConfirmData), q = s(() => n.value ? e.createResource : e.updateResource), le = s(() => n.value ? { ...e.createData, ...JSON.parse(JSON.stringify(d.value)) } : { ...e.updateData, ...JSON.parse(JSON.stringify(d.value)) }), fe = s(() => n.value ? e.createDisabled : e.updateDisabled), N = s(() => !n.value && Array.isArray(p.value) && p.value.includes("update")), R = s(() => !n.value && Array.isArray(p.value) && p.value.includes("drop")), J = async () => {
+      i("fetchItem"), r.value = !0, D.value = -1, w.value = !1;
       try {
-        const a = await ye(e.readResource, e.readData);
-        if (u("fetchItem -> response", a), d.value = !1, m.value = a.httpStatus, !a.success) {
-          k.value = !1, m.value = a.httpStatus, i("error", a.httpStatus);
+        const a = await we(e.readResource, e.readData);
+        if (i("fetchItem -> response", a), r.value = !1, D.value = a.httpStatus, !a.success) {
+          y.value = !1, D.value = a.httpStatus, u("error", a.httpStatus);
           return;
         }
-        k.value = !0, r.value = a.data, U.value = a.perms, b.value.increment(r.value).turnStoredIntoOriginal(), K.value.turnStoredIntoOriginal(), i("read", a);
+        y.value = !0, d.value = a.data, p.value = a.perms, t.value.increment(d.value).turnStoredIntoOriginal(), L.value.turnStoredIntoOriginal(), u("read", a);
       } catch {
-        d.value = !1, k.value = !1, m.value = 404, i("error", 404);
+        r.value = !1, y.value = !1, D.value = 404, u("error", 404);
         return;
       }
     };
-    y(() => e.modelValue, (a) => {
-      r.value = a, b.value.increment(a);
-    }, { deep: !0 }), y(r, (a) => {
-      if (x.value = !0, u("item updated ->", r.value), typeof e.beforeEmitUpdate == "function") {
-        u("item updated -> has beforeEmitUpdate");
-        let l = e.beforeEmitUpdate(r.value);
-        u("item updated -> override with: ", l), typeof l == "object" && (r.value = l);
+    C(() => e.modelValue, (a) => {
+      d.value = a, t.value.increment(a);
+    }, { deep: !0 }), C(d, (a) => {
+      if (A.value = !0, i("item updated ->", d.value), typeof e.beforeEmitUpdate == "function") {
+        i("item updated -> has beforeEmitUpdate");
+        let l = e.beforeEmitUpdate(d.value);
+        i("item updated -> override with: ", l), typeof l == "object" && (d.value = l);
       }
-      i("update:modelValue", r.value), u("item updated -> update dataState"), b.value.increment(a), he(() => x.value = !1);
-    }, { deep: !0 }), y(U, () => i("perms", U.value));
-    const A = n(() => de.value || !o.value && !M.value || typeof e.saveValidator == "function" && !e.saveValidator(r.value) ? !1 : b.value.changed());
-    y(A, (a) => i("modified-data", a)), y(o, (a) => i("update:isCreate", a)), y(() => e.readData, (a) => {
-      K.value.increment(a), K.value.changed() && z();
-    }), y(() => e.editing, (a) => {
-      u("editing updated -> updating editMode", a), f.value = a;
-    }), y(f, (a) => {
-      u("editMode updated -> emit update", a), i("update:editing", a);
-    }), e.readResource && !o.value ? z() : o.value && (k.value = !0, f.value = !0, d.value = !1);
-    const re = (a, l) => {
-      if (d.value = !1, m.value = l.httpStatus, !l.success) {
-        g.value = !0, i("error", l.httpStatus);
+      u("update:modelValue", d.value), i("item updated -> update dataState"), t.value.increment(a), Ce(() => A.value = !1);
+    }, { deep: !0 }), C(p, () => u("perms", p.value));
+    const z = s(() => fe.value || !n.value && !N.value || typeof e.saveValidator == "function" && !e.saveValidator(d.value) ? !1 : t.value.changed()), H = s(() => !e.dropDisabled && R.value);
+    C(z, (a) => u("modified-data", a)), C(n, (a) => u("update:isCreate", a)), C(() => e.readData, (a) => {
+      L.value.increment(a), L.value.changed() && J();
+    }), C(() => e.editing, (a) => {
+      i("editing updated -> updating editMode", a), h.value = a;
+    }), C(h, (a) => {
+      i("editMode updated -> emit update", a), u("update:editing", a);
+    }), e.readResource && !n.value ? J() : n.value && (y.value = !0, h.value = !0, r.value = !1);
+    const de = (a, l) => {
+      if (r.value = !1, D.value = l.httpStatus, !l.success) {
+        w.value = !0, u("error", l.httpStatus);
         return;
       }
-      g.value = !0, e.onDropModalCallbacks.length > 0 && (u("onDrop -> has onDropModalCallbacks"), e.onDropModalCallbacks.forEach((D) => {
-        j(D);
-      })), i("drop", l);
-    }, ne = (a, l) => {
-      if (u("onSave -> received response:", l), i("before-save"), q.value) {
-        if (d.value = !1, m.value = l.httpStatus, !l.success) {
-          g.value = !0, i("error", l.httpStatus);
+      w.value = !0, e.onDropModalCallbacks.length > 0 && (i("onDrop -> has onDropModalCallbacks"), e.onDropModalCallbacks.forEach(($) => {
+        Y($);
+      })), u("drop", l);
+    }, re = (a, l) => {
+      if (i("onSave -> received response:", l), u("before-save"), q.value) {
+        if (r.value = !1, D.value = l.httpStatus, !l.success) {
+          w.value = !0, u("error", l.httpStatus);
           return;
         }
-        g.value = !0;
+        w.value = !0;
       }
-      let D = o.value ? "create" : "update";
-      o.value || (u("onSave -> turn stored data into original"), b.value.turnStoredIntoOriginal()), D === "create" ? typeof e.onCreate == "function" && (u("onSave -> trigger onCreate callback"), e.onCreate(l), e.onCreateModalCallbacks.length > 0 && (u("onSave -> has onCreateModalCallbacks"), e.onCreateModalCallbacks.forEach((w) => {
-        j(w);
-      }))) : typeof e.onUpdate == "function" && (u("onSave -> trigger onUpdate callback"), e.onUpdate(l), e.onUpdateModalCallbacks.length > 0 && (u("onSave -> has onUpdateModalCallbacks"), e.onUpdateModalCallbacks.forEach((w) => {
-        j(w);
-      }))), !e.insideModal && l.autoReloadId && (u("onSave -> autoReloadId detected: ", l.autoReloadId), e.readData.id = l.autoReloadId, u("onSave -> turning off create mode"), o.value = !1, z()), i(D, l);
-    }, H = () => {
-      d.value = !0, m.value = -1;
-    }, W = () => {
-      d.value = !1;
+      let $ = n.value ? "create" : "update";
+      n.value || (i("onSave -> turn stored data into original"), t.value.turnStoredIntoOriginal()), $ === "create" ? typeof e.onCreate == "function" && (i("onSave -> trigger onCreate callback"), e.onCreate(l), e.onCreateModalCallbacks.length > 0 && (i("onSave -> has onCreateModalCallbacks"), e.onCreateModalCallbacks.forEach((K) => {
+        Y(K);
+      }))) : typeof e.onUpdate == "function" && (i("onSave -> trigger onUpdate callback"), e.onUpdate(l), e.onUpdateModalCallbacks.length > 0 && (i("onSave -> has onUpdateModalCallbacks"), e.onUpdateModalCallbacks.forEach((K) => {
+        Y(K);
+      }))), !e.insideModal && l.autoReloadId && (i("onSave -> autoReloadId detected: ", l.autoReloadId), e.readData.id = l.autoReloadId, i("onSave -> turning off create mode"), n.value = !1, J()), u($, l);
     };
-    C({
+    g({
       doDrop: () => {
-        $.value && typeof $.value.click == "function" && $.value.click();
+        P.value && ae.value.doDrop();
       },
-      doRefresh: z,
+      doRefresh: J,
       doSave: () => {
-        O.value && typeof O.value.click == "function" && O.value.click();
+        P.value && ee.value.doSave();
       },
-      hasModifiedData: () => b.value.changed()
+      hasModifiedData: () => t.value.changed()
     });
-    const ie = n(() => b.value.changed() ? e.editedCloseConfirm : ""), G = n(() => !M.value && I.value ? !0 : !e.hiddenDrop && !d.value && f.value && k.value), Q = n(() => b.value.changed() ? !0 : d.value ? !1 : o.value ? !0 : !e.hiddenSave && f.value && k.value), X = n(() => e.hideSwitchEdition || !M.value && !I.value || !M.value && I.value ? !1 : !d.value && !o.value && k.value && !(e.dropDisabled && e.updateDisabled)), se = n(() => !e.hiddenButtons && (Q.value || G.value || X.value)), F = n(() => e.title.startsWith("__:") ? String(_e(e.title.substring(3))) : e.title), ce = n(() => d.value ? !1 : F.value.length > 0 || !!p["post-title"]), Y = n(() => e.insideModal ? "lkt-modal" : "section"), fe = n(() => Y.value === "lkt-modal" ? {
+    const me = s(() => t.value.changed() ? e.editedCloseConfirm : ""), W = s(() => !N.value && R.value ? !0 : !e.hiddenDrop && !r.value && h.value && y.value), G = s(() => t.value.changed() ? !0 : r.value ? !1 : n.value ? !0 : e.buttonNavVisibility === j.Always ? z.value : !e.hiddenSave && h.value && y.value), Q = s(() => e.hideSwitchEdition || !N.value && !R.value || !N.value && R.value ? !1 : !r.value && !n.value && y.value && !(e.dropDisabled && e.updateDisabled)), ue = s(() => e.buttonNavVisibility === j.Always && (z.value || H.value) || b["prev-buttons-ever"] ? !0 : !e.hiddenButtons && (G.value || W.value || Q.value)), X = s(() => e.title.startsWith("__:") ? String(Ne(e.title.substring(3))) : e.title), be = s(() => r.value ? !1 : X.value.length > 0 || !!b["post-title"]), ne = s(() => e.insideModal ? "lkt-modal" : "section"), he = s(() => ne.value === "lkt-modal" ? {
       "modal-name": e.modalName,
       "modal-key": e.modalKey,
       "z-index": e.zIndex,
@@ -184,149 +329,173 @@ const u = (...t) => {
       "before-close": e.beforeClose,
       "disabled-close": e.disabledClose,
       "disabled-veil-click": e.disabledVeilClick,
-      "close-confirm": ie.value,
+      "close-confirm": me.value,
       "close-confirm-key": e.editedCloseConfirmKey,
       title: e.title,
       size: e.size
     } : {});
     return (a, l) => {
-      const D = J("lkt-button"), w = J("lkt-http-info"), ve = J("lkt-loader");
-      return c(), N(Ce(Y.value), ke(be(fe.value)), {
-        default: P(() => [
-          Z("article", we, [
-            !a.insideModal && ce.value ? (c(), B("header", Ee, [
-              h(p)["pre-title"] ? (c(), B("div", Re, [
-                R(a.$slots, "pre-title", {
-                  item: r.value,
-                  loading: d.value
+      const $ = Z("lkt-http-info"), K = Z("lkt-loader");
+      return c(), O(ke(ne.value), ye(De(he.value)), {
+        default: E(() => [
+          ge("article", Le, [
+            !a.insideModal && be.value ? (c(), S("header", Oe, [
+              f(b)["pre-title"] ? (c(), S("div", Ae, [
+                k(a.$slots, "pre-title", {
+                  item: d.value,
+                  loading: r.value
                 })
-              ])) : v("", !0),
-              F.value.length > 0 ? (c(), B("h1", Ue, De(F.value), 1)) : v("", !0),
-              h(p)["post-title"] ? (c(), B("div", Ne, [
-                R(a.$slots, "post-title", {
-                  item: r.value,
-                  loading: d.value
+              ])) : m("", !0),
+              X.value.length > 0 ? (c(), S("h1", ze, Se(X.value), 1)) : m("", !0),
+              f(b)["post-title"] ? (c(), S("div", Ke, [
+                k(a.$slots, "post-title", {
+                  item: d.value,
+                  loading: r.value
                 })
-              ])) : v("", !0)
-            ])) : v("", !0),
-            V(Z("div", Ve, [
-              V(ee(D, {
-                ref: (E) => O.value = E,
-                palette: "success",
-                disabled: !A.value,
-                "confirm-modal": le.value,
-                "confirm-data": oe.value,
-                resource: q.value,
-                "resource-data": ue.value,
-                text: h(p)["button-save"] ? "" : a.saveText,
-                icon: h(p)["button-save"] ? "" : a.saveIcon,
-                onLoading: H,
-                onLoaded: W,
-                onClick: ne
-              }, {
-                default: P(() => [
-                  h(p)["button-save"] ? R(a.$slots, "button-save", {
-                    key: 0,
-                    item: r.value,
-                    editMode: f.value,
-                    isCreate: o.value,
-                    canUpdate: M.value,
-                    canDrop: I.value
-                  }) : v("", !0)
+              ])) : m("", !0)
+            ])) : m("", !0),
+            I(_(ve, {
+              ref_key: "buttonNav",
+              ref: P,
+              loading: r.value,
+              "onUpdate:loading": l[0] || (l[0] = (M) => r.value = M),
+              editing: h.value,
+              "onUpdate:editing": l[1] || (l[1] = (M) => h.value = M),
+              item: d.value,
+              "create-mode": n.value,
+              "can-update": N.value,
+              "can-drop": R.value,
+              "show-switch-button": Q.value,
+              "show-save-button": G.value,
+              "show-drop-button": W.value,
+              "able-to-save": z.value,
+              "able-to-drop": H.value,
+              "save-confirm": te.value,
+              "drop-confirm": a.dropConfirm,
+              "confirm-data": oe.value,
+              "drop-confirm-data": a.dropConfirmData,
+              "save-resource": q.value,
+              "drop-resource": a.dropResource,
+              "save-data": le.value,
+              "drop-data": a.dropData,
+              "save-text": a.saveText,
+              "drop-text": a.dropText,
+              "save-icon": a.saveIcon,
+              "drop-icon": a.dropIcon,
+              "edit-mode-text": a.editModeText,
+              onSave: re,
+              onDrop: de
+            }, se({ _: 2 }, [
+              f(b)["prev-buttons-ever"] ? {
+                name: "prev-buttons-ever",
+                fn: E(() => [
+                  k(a.$slots, "prev-buttons-ever")
                 ]),
-                _: 3
-              }, 8, ["disabled", "confirm-modal", "confirm-data", "resource", "resource-data", "text", "icon"]), [
-                [T, Q.value]
-              ]),
-              o.value ? v("", !0) : V((c(), N(D, {
-                key: 0,
-                ref: (E) => $.value = E,
-                palette: "danger",
-                disabled: a.dropDisabled || !I.value,
-                "confirm-modal": a.dropConfirm,
-                "confirm-data": a.dropConfirmData,
-                resource: a.dropResource,
-                "resource-data": a.dropData,
-                text: h(p)["button-drop"] ? "" : a.dropText,
-                icon: h(p)["button-drop"] ? "" : a.dropIcon,
-                onLoading: H,
-                onLoaded: W,
-                onClick: re
-              }, {
-                default: P(() => [
-                  h(p)["button-drop"] ? R(a.$slots, "button-drop", {
-                    key: 0,
-                    item: r.value,
-                    editMode: f.value,
-                    isCreate: o.value,
-                    canUpdate: M.value,
-                    canDrop: I.value
-                  }) : v("", !0)
+                key: "0"
+              } : void 0,
+              f(b)["prev-buttons"] ? {
+                name: "prev-buttons-ever",
+                fn: E(() => [
+                  k(a.$slots, "prev-buttons")
                 ]),
-                _: 3
-              }, 8, ["disabled", "confirm-modal", "confirm-data", "resource", "resource-data", "text", "icon"])), [
-                [T, G.value]
-              ]),
-              h(p).buttons ? V((c(), B("div", Te, [
-                R(a.$slots, "buttons")
-              ], 512)), [
-                [T, f.value]
-              ]) : v("", !0),
-              V(ee(D, {
-                checked: f.value,
-                "onUpdate:checked": l[0] || (l[0] = (E) => f.value = E),
-                class: "lkt-item-crud--switch-mode-button",
-                "show-switch": "",
-                text: a.editModeText
-              }, null, 8, ["checked", "text"]), [
-                [T, X.value]
-              ])
-            ], 512), [
-              [T, se.value]
+                key: "1"
+              } : void 0
+            ]), 1032, ["loading", "editing", "item", "create-mode", "can-update", "can-drop", "show-switch-button", "show-save-button", "show-drop-button", "able-to-save", "able-to-drop", "save-confirm", "drop-confirm", "confirm-data", "drop-confirm-data", "save-resource", "drop-resource", "save-data", "drop-data", "save-text", "drop-text", "save-icon", "drop-icon", "edit-mode-text"]), [
+              [T, ue.value && a.buttonNavPosition === "top"]
             ]),
-            d.value ? v("", !0) : (c(), B("div", Le, [
-              k.value ? (c(), B("div", Oe, [
-                g.value ? (c(), N(w, {
+            r.value ? m("", !0) : (c(), S("div", Fe, [
+              y.value ? (c(), S("div", Pe, [
+                w.value ? (c(), O($, {
                   key: 0,
-                  code: m.value,
+                  code: D.value,
                   quick: "",
-                  palette: m.value === 200 ? "success" : "danger",
+                  palette: D.value === 200 ? "success" : "danger",
                   "can-close": "",
-                  onClose: l[1] || (l[1] = (E) => g.value = !1)
-                }, null, 8, ["code", "palette"])) : v("", !0),
-                R(a.$slots, "item", {
-                  item: r.value,
-                  loading: d.value,
-                  editMode: f.value,
-                  isCreate: o.value,
-                  canUpdate: M.value,
-                  canDrop: I.value,
-                  itemBeingEdited: x.value
+                  onClose: l[2] || (l[2] = (M) => w.value = !1)
+                }, null, 8, ["code", "palette"])) : m("", !0),
+                k(a.$slots, "item", {
+                  item: d.value,
+                  loading: r.value,
+                  editMode: h.value,
+                  isCreate: n.value,
+                  canUpdate: N.value,
+                  canDrop: R.value,
+                  itemBeingEdited: A.value
                 })
-              ])) : (c(), N(w, {
+              ])) : (c(), O($, {
                 key: 1,
-                code: m.value
+                code: D.value
               }, null, 8, ["code"]))
             ])),
-            d.value ? (c(), N(ve, { key: 2 })) : v("", !0)
+            r.value ? (c(), O(K, { key: 2 })) : m("", !0),
+            a.buttonNavPosition === f(x).Bottom ? I((c(), O(ve, {
+              key: 3,
+              ref_key: "buttonNav",
+              ref: P,
+              loading: r.value,
+              "onUpdate:loading": l[3] || (l[3] = (M) => r.value = M),
+              editing: h.value,
+              "onUpdate:editing": l[4] || (l[4] = (M) => h.value = M),
+              item: d.value,
+              "create-mode": n.value,
+              "can-update": N.value,
+              "can-drop": R.value,
+              "show-switch-button": Q.value,
+              "show-save-button": G.value,
+              "show-drop-button": W.value,
+              "able-to-save": z.value,
+              "able-to-drop": H.value,
+              "save-confirm": te.value,
+              "drop-confirm": a.dropConfirm,
+              "confirm-data": oe.value,
+              "drop-confirm-data": a.dropConfirmData,
+              "save-resource": q.value,
+              "drop-resource": a.dropResource,
+              "save-data": le.value,
+              "drop-data": a.dropData,
+              "save-text": a.saveText,
+              "drop-text": a.dropText,
+              "save-icon": a.saveIcon,
+              "drop-icon": a.dropIcon,
+              "edit-mode-text": a.editModeText,
+              onSave: re,
+              onDrop: de
+            }, se({ _: 2 }, [
+              f(b)["prev-buttons-ever"] ? {
+                name: "prev-buttons-ever",
+                fn: E(() => [
+                  k(a.$slots, "prev-buttons-ever")
+                ]),
+                key: "0"
+              } : void 0,
+              f(b)["prev-buttons"] ? {
+                name: "prev-buttons-ever",
+                fn: E(() => [
+                  k(a.$slots, "prev-buttons")
+                ]),
+                key: "1"
+              } : void 0
+            ]), 1032, ["loading", "editing", "item", "create-mode", "can-update", "can-drop", "show-switch-button", "show-save-button", "show-drop-button", "able-to-save", "able-to-drop", "save-confirm", "drop-confirm", "confirm-data", "drop-confirm-data", "save-resource", "drop-resource", "save-data", "drop-data", "save-text", "drop-text", "save-icon", "drop-icon", "edit-mode-text"])), [
+              [T, ue.value]
+            ]) : m("", !0)
           ])
         ]),
         _: 3
       }, 16);
     };
   }
-}), Ae = {
-  install: (t, C = {}) => {
-    t.component("lkt-item-crud") === void 0 && t.component("lkt-item-crud", $e);
+}), Ze = {
+  install: (o, g = {}) => {
+    o.component("lkt-item-crud") === void 0 && o.component("lkt-item-crud", Je);
   }
-}, He = (t) => {
-  S.defaultSaveIcon = t;
-}, We = (t) => {
-  S.defaultDropIcon = t;
+}, _e = (o) => {
+  U.defaultSaveIcon = o;
+}, xe = (o) => {
+  U.defaultDropIcon = o;
 };
 export {
-  qe as debugLktItemCrud,
-  Ae as default,
-  We as setItemCrudDefaultDropIcon,
-  He as setItemCrudDefaultSaveIcon
+  Ye as debugLktItemCrud,
+  Ze as default,
+  xe as setItemCrudDefaultDropIcon,
+  _e as setItemCrudDefaultSaveIcon
 };

package/dist/style.css

@@ -1 +1 @@
-.lkt-item-crud{display:flex;flex-direction:column;gap:var(--lkt-item-crud-gap)}.lkt-item-crud_content{display:flex;flex-direction:column;gap:15px}.lkt-item-crud-buttons{position:sticky;top:calc(-1 * var(--lkt-item-crud-gap));display:flex;align-items:center;gap:var(--lkt-item-crud-gap-buttons);transition:all linear .15s;background:transparent;z-index:2}.lkt-item-crud-buttons>:last-child{margin-left:auto}.lkt-item-crud-buttons>.lkt-item-crud-buttons{padding:0}
+.lkt-item-crud{display:flex;flex-direction:column;gap:var(--lkt-item-crud-gap);text-align:var(--lkt-item-crud-text-align)}.lkt-item-crud_content{display:flex;flex-direction:column;gap:15px}.lkt-item-crud-buttons{position:sticky;top:calc(-1 * var(--lkt-item-crud-gap));display:flex;align-items:center;gap:var(--lkt-item-crud-gap-buttons);transition:all linear .15s;background:transparent;z-index:2}.lkt-item-crud-buttons>:last-child{margin-left:auto}.lkt-item-crud-buttons>.lkt-item-crud-buttons{padding:0}

package/package.json

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

package/src/components/ButtonNav.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+    import { ref, useSlots, watch } from 'vue';
+    import { LktObject } from 'lkt-ts-interfaces';
+
+    const emit = defineEmits(['update:loading', 'update:editing', 'save', 'drop']);
+
+    const props = withDefaults(defineProps<{
+        item: LktObject,
+        editing?: boolean
+        loading?: boolean
+        createMode?: boolean
+        canUpdate?: boolean
+        canDrop?: boolean
+        showSwitchButton?: boolean
+        showSaveButton?: boolean
+        showDropButton?: boolean
+        ableToSave?: boolean
+        ableToDrop?: boolean
+        saveConfirm?: string
+        dropConfirm?: string
+        confirmData?: LktObject
+        dropConfirmData?: LktObject
+        saveResource?: string
+        dropResource?: string
+        saveData?: LktObject
+        dropData?: LktObject
+        saveText?: string
+        dropText?: string
+        saveIcon?: string
+        dropIcon?: string
+        editModeText?: string
+
+    }>(), {
+        item: () => ({}),
+        editing: false,
+        isLoading: false,
+        showSaveButton: false,
+        ableToSave: false,
+    });
+
+    const slots = useSlots();
+
+    const saveButton = ref(<HTMLButtonElement|null>null);
+    const dropButton = ref(<HTMLButtonElement|null>null);
+
+    const isLoading = ref(props.loading);
+    watch(() => props.loading, v => isLoading.value = v);
+    watch(isLoading, v => emit('update:loading', v));
+
+    const isEditing = ref(props.editing);
+    watch(() => props.editing, v => isEditing.value = v);
+    watch(isEditing, v => emit('update:editing', v));
+
+    const onButtonLoading = () => {
+            isLoading.value = true;
+        },
+        onButtonLoaded = () => {
+            isLoading.value = false;
+        },
+        onSave = () => {
+            emit('save');
+        },
+        onDrop = () => {
+            emit('drop');
+        };
+
+    const doSave = () => {
+            if (saveButton.value && typeof saveButton.value.click === 'function') saveButton.value.click();
+        },
+        doDrop = () => {
+            if (dropButton.value && typeof dropButton.value.click === 'function') dropButton.value.click();
+        };
+
+    defineExpose({
+        doSave,
+        doDrop,
+    })
+
+</script>
+
+<template>
+    <div class="lkt-item-crud-buttons">
+
+        <div class="lkt-item-crud-buttons" v-if="slots['prev-buttons-ever']" v-show="!isLoading">
+            <slot name="prev-buttons-ever" />
+        </div>
+
+        <div class="lkt-item-crud-buttons" v-if="slots['prev-buttons']" v-show="isEditing && !isLoading">
+            <slot name="prev-buttons" />
+        </div>
+
+        <lkt-button
+            ref="saveButton"
+            v-show="showSaveButton"
+            palette="success"
+            :disabled="!ableToSave"
+            :confirm-modal="saveConfirm"
+            :confirm-data="confirmData"
+            :resource="saveResource"
+            :resource-data="saveData"
+            :text="slots['button-save'] ? '' : saveText"
+            :icon="slots['button-save'] ? '' : saveIcon"
+            v-on:loading="onButtonLoading"
+            v-on:loaded="onButtonLoaded"
+            v-on:click="onSave">
+            <slot v-if="!!slots['button-save']" name="button-save" :item="item"
+                  :edit-mode="isEditing"
+                  :is-create="createMode"
+                  :can-update="canUpdate"
+                  :can-drop="canDrop"></slot>
+        </lkt-button>
+
+        <lkt-button
+            ref="dropButton"
+            v-show="showDropButton"
+            v-if="!createMode"
+            palette="danger"
+            :disabled="!ableToDrop"
+            :confirm-modal="dropConfirm"
+            :confirm-data="dropConfirmData"
+            :resource="dropResource"
+            :resource-data="dropData"
+            :text="slots['button-drop'] ? '' : dropText"
+            :icon="slots['button-drop'] ? '' : dropIcon"
+            v-on:loading="onButtonLoading"
+            v-on:loaded="onButtonLoaded"
+            v-on:click="onDrop">
+            <slot v-if="!!slots['button-drop']" name="button-drop" :item="item"
+                  :edit-mode="isEditing"
+                  :is-create="createMode"
+                  :can-update="canUpdate"
+                  :can-drop="canDrop"></slot>
+        </lkt-button>
+
+        <div class="lkt-item-crud-buttons" v-if="slots.buttons" v-show="isEditing && !isLoading">
+            <slot name="buttons" />
+        </div>
+
+        <lkt-button
+            v-show="showSwitchButton"
+            v-model:checked="isEditing"
+            class="lkt-item-crud--switch-mode-button"
+            show-switch
+            :text="editModeText" />
+    </div>
+</template>

package/src/lib-components/LktItemCrud.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-    import { ref, watch, useSlots, computed, nextTick } from 'vue';
+    import { computed, nextTick, ref, useSlots, watch } from 'vue';
     import { httpCall, HTTPResponse } from 'lkt-http-client';
     import { DataState } from 'lkt-data-state';
     import { debug } from '../functions/debug';
@@ -8,6 +8,9 @@
     import { runModalCallback } from '../functions/modalCallbacks';
     import { __ } from 'lkt-i18n';
     import { Settings } from '../settings/Settings';
+    import ButtonNav from '../components/ButtonNav.vue';
+    import { ButtonNavPosition } from '../enums/ButtonNavPosition';
+    import { ButtonNavVisibility } from '../enums/ButtonNavVisibility';
 
     const props = withDefaults(defineProps<{
         modelValue: LktObject
@@ -49,6 +52,8 @@
         onUpdateModalCallbacks: ModalCallbackConfig[]
         onDropModalCallbacks: ModalCallbackConfig[]
         editing: boolean
+        buttonNavPosition?: ButtonNavPosition
+        buttonNavVisibility?: ButtonNavVisibility
 
         // Modal props
         size: string
@@ -60,8 +65,8 @@
         modalKey: string
         zIndex: number
         editedCloseConfirm: string
-        editedCloseConfirmKey: string|number
-        beforeClose: Function|undefined
+        editedCloseConfirmKey: string | number
+        beforeClose: Function | undefined
 
     }>(), {
         modelValue: () => ({}),
@@ -103,6 +108,8 @@
         onUpdateModalCallbacks: () => [],
         onDropModalCallbacks: () => [],
         editing: false,
+        buttonNavPosition: ButtonNavPosition.Top,
+        buttonNavVisibility: ButtonNavVisibility.Changed,
 
         // Modal props
         size: '',
@@ -138,6 +145,8 @@
         createMode = ref(props.isCreate),
         itemBeingEdited = ref(false);
 
+    const buttonNav = ref(null);
+
     const saveConfirm = computed(() => {
             return createMode.value
                 ? props.createConfirm
@@ -164,8 +173,8 @@
                 ? props.createDisabled
                 : props.updateDisabled;
         }),
-        canUpdate = computed(() => !createMode.value && perms.value.includes('update')),
-        canDrop = computed(() => !createMode.value && perms.value.includes('drop'));
+        canUpdate = computed(() => !createMode.value && Array.isArray(perms.value) && perms.value.includes('update')),
+        canDrop = computed(() => !createMode.value && Array.isArray(perms.value) && perms.value.includes('drop'));
 
     const fetchItem = async () => {
         debug('fetchItem');
@@ -229,6 +238,10 @@
 
         return dataState.value.changed();
     });
+
+    const ableToDrop = computed(() => {
+        return !props.dropDisabled && canDrop.value;
+    });
     watch(ableToSave, (v) => emit('modified-data', v));
     watch(createMode, (v) => emit('update:isCreate', v));
 
@@ -323,20 +336,13 @@
             }
             emit(emits, r);
         },
-        onButtonLoading = () => {
-            isLoading.value = true;
-            httpStatus.value = -1;
-        },
-        onButtonLoaded = () => {
-            isLoading.value = false;
-        },
         doSave = () => {
             // @ts-ignore
-            if (saveButton.value && typeof saveButton.value.click === 'function') saveButton.value.click();
+            if (buttonNav.value) saveButton.value.doSave();
         },
         doDrop = () => {
             // @ts-ignore
-            if (dropButton.value && typeof dropButton.value.click === 'function') dropButton.value.click();
+            if (buttonNav.value) dropButton.value.doDrop();
         };
 
     defineExpose({
@@ -347,10 +353,9 @@
     });
 
 
-
     const closeConfirm = computed(() => {
         return dataState.value.changed() ? props.editedCloseConfirm : '';
-    })
+    });
 
     const showDropButton = computed(() => {
             if (!canUpdate.value && canDrop.value) return true;
@@ -367,6 +372,10 @@
 
             if (createMode.value) return true;
 
+            if (props.buttonNavVisibility === ButtonNavVisibility.Always) {
+                return ableToSave.value;
+            }
+
             return !props.hiddenSave
                 && editMode.value
                 && httpSuccessRead.value;
@@ -382,6 +391,8 @@
                 && !(props.dropDisabled && props.updateDisabled);
         }),
         showButtons = computed(() => {
+            if (props.buttonNavVisibility === ButtonNavVisibility.Always && (ableToSave.value || ableToDrop.value)) return true;
+            if (slots['prev-buttons-ever']) return true;
             return !props.hiddenButtons && (showSaveButton.value || showDropButton.value || showSwitchButton.value);
         }),
         computedTitle = computed(() => {
@@ -395,29 +406,29 @@
 
             return computedTitle.value.length > 0 || !!slots['post-title'];
         }),
-    computedContainerTag = computed(() => {
-        if (props.insideModal) return 'lkt-modal';
-        return 'section';
-    }),
-    computedContainerAttrs = computed(() => {
-        if (computedContainerTag.value === 'lkt-modal') {
-            return {
-                'modal-name': props.modalName,
-                'modal-key': props.modalKey,
-                'z-index': props.zIndex,
-                'pre-title': props.preTitle,
-                'show-close': props.showClose,
-                'before-close': props.beforeClose,
-                'disabled-close': props.disabledClose,
-                'disabled-veil-click': props.disabledVeilClick,
-                'close-confirm': closeConfirm.value,
-                'close-confirm-key': props.editedCloseConfirmKey,
-                title: props.title,
-                size: props.size,
+        computedContainerTag = computed(() => {
+            if (props.insideModal) return 'lkt-modal';
+            return 'section';
+        }),
+        computedContainerAttrs = computed(() => {
+            if (computedContainerTag.value === 'lkt-modal') {
+                return {
+                    'modal-name': props.modalName,
+                    'modal-key': props.modalKey,
+                    'z-index': props.zIndex,
+                    'pre-title': props.preTitle,
+                    'show-close': props.showClose,
+                    'before-close': props.beforeClose,
+                    'disabled-close': props.disabledClose,
+                    'disabled-veil-click': props.disabledVeilClick,
+                    'close-confirm': closeConfirm.value,
+                    'close-confirm-key': props.editedCloseConfirmKey,
+                    title: props.title,
+                    size: props.size,
+                };
             }
-        }
-        return {};
-    });
+            return {};
+        });
 </script>
 
 <template>
@@ -428,82 +439,105 @@
         <article class="lkt-item-crud">
             <header class="lkt-item-crud_header" v-if="!insideModal && displayHeader">
                 <div class="lkt-item-crud_header-slot" v-if="slots['pre-title']">
-                    <slot name="pre-title" :item="item" :loading="isLoading"></slot>
+                    <slot name="pre-title" :item="item" :loading="isLoading"/>
                 </div>
                 <h1 class="lkt-item-crud_header-title" v-if="computedTitle.length > 0">{{ computedTitle }}</h1>
                 <div class="lkt-item-crud_header-slot" v-if="slots['post-title']">
-                    <slot name="post-title" :item="item" :loading="isLoading"></slot>
+                    <slot name="post-title" :item="item" :loading="isLoading"/>
                 </div>
             </header>
-            <div class="lkt-item-crud-buttons" v-show="showButtons">
-                <lkt-button
-                    :ref="(el:any) => saveButton = el"
-                    v-show="showSaveButton"
-                    palette="success"
-                    :disabled="!ableToSave"
-                    :confirm-modal="saveConfirm"
-                    :confirm-data="confirmData"
-                    :resource="saveResource"
-                    :resource-data="saveData"
-                    :text="slots['button-save'] ? '' : saveText"
-                    :icon="slots['button-save'] ? '' : saveIcon"
-                    v-on:loading="onButtonLoading"
-                    v-on:loaded="onButtonLoaded"
-                    v-on:click="onSave">
-                    <slot v-if="!!slots['button-save']" name="button-save" :item="item"
-                          :edit-mode="editMode"
-                          :is-create="createMode"
-                          :can-update="canUpdate"
-                          :can-drop="canDrop"></slot>
-                </lkt-button>
-
-                <lkt-button
-                    :ref="(el:any) => dropButton = el"
-                    v-show="showDropButton"
-                    v-if="!createMode"
-                    palette="danger"
-                    :disabled="dropDisabled || !canDrop"
-                    :confirm-modal="dropConfirm"
-                    :confirm-data="dropConfirmData"
-                    :resource="dropResource"
-                    :resource-data="dropData"
-                    :text="slots['button-drop'] ? '' : dropText"
-                    :icon="slots['button-drop'] ? '' : dropIcon"
-                    v-on:loading="onButtonLoading"
-                    v-on:loaded="onButtonLoaded"
-                    v-on:click="onDrop">
-                    <slot v-if="!!slots['button-drop']" name="button-drop" :item="item"
-                          :edit-mode="editMode"
-                          :is-create="createMode"
-                          :can-update="canUpdate"
-                          :can-drop="canDrop"></slot>
-                </lkt-button>
 
-                <div class="lkt-item-crud-buttons" v-if="slots.buttons" v-show="editMode">
-                    <slot name="buttons"/>
-                </div>
+            <button-nav
+                ref="buttonNav"
+                v-show="showButtons && buttonNavPosition === 'top'"
+                v-model:loading="isLoading"
+                v-model:editing="editMode"
+                :item="item"
+                :create-mode="createMode"
+                :can-update="canUpdate"
+                :can-drop="canDrop"
+                :show-switch-button="showSwitchButton"
+                :show-save-button="showSaveButton"
+                :show-drop-button="showDropButton"
+                :able-to-save="ableToSave"
+                :able-to-drop="ableToDrop"
+                :save-confirm="saveConfirm"
+                :drop-confirm="dropConfirm"
+                :confirm-data="confirmData"
+                :drop-confirm-data="dropConfirmData"
+                :save-resource="saveResource"
+                :drop-resource="dropResource"
+                :save-data="saveData"
+                :drop-data="dropData"
+                :save-text="saveText"
+                :drop-text="dropText"
+                :save-icon="saveIcon"
+                :drop-icon="dropIcon"
+                :edit-mode-text="editModeText"
+                @save="onSave"
+                @drop="onDrop"
+            >
+                <template #prev-buttons-ever v-if="slots['prev-buttons-ever']">
+                    <slot name="prev-buttons-ever" />
+                </template>
+                <template #prev-buttons-ever v-if="slots['prev-buttons']">
+                    <slot name="prev-buttons" />
+                </template>
+            </button-nav>
 
-                <lkt-button
-                    v-show="showSwitchButton"
-                    v-model:checked="editMode"
-                    class="lkt-item-crud--switch-mode-button"
-                    show-switch
-                    :text="editModeText"/>
-            </div>
             <div class="lkt-item-crud_content" v-if="!isLoading">
                 <div v-if="httpSuccessRead" class="lkt-grid-1">
                     <lkt-http-info :code="httpStatus" v-if="showStoreMessage" quick
                                    :palette="httpStatus === 200 ? 'success' : 'danger'" can-close
-                                   v-on:close="showStoreMessage = false"></lkt-http-info>
+                                   v-on:close="showStoreMessage = false"/>
                     <slot name="item" :item="item" :loading="isLoading" :edit-mode="editMode"
                           :is-create="createMode"
                           :can-update="canUpdate"
                           :can-drop="canDrop"
                           :item-being-edited="itemBeingEdited"></slot>
                 </div>
-                <lkt-http-info :code="httpStatus" v-else></lkt-http-info>
+                <lkt-http-info :code="httpStatus" v-else/>
             </div>
-            <lkt-loader v-if="isLoading"></lkt-loader>
+            <lkt-loader v-if="isLoading" />
+
+            <button-nav
+                ref="buttonNav"
+                v-if="buttonNavPosition === ButtonNavPosition.Bottom"
+                v-show="showButtons"
+                v-model:loading="isLoading"
+                v-model:editing="editMode"
+                :item="item"
+                :create-mode="createMode"
+                :can-update="canUpdate"
+                :can-drop="canDrop"
+                :show-switch-button="showSwitchButton"
+                :show-save-button="showSaveButton"
+                :show-drop-button="showDropButton"
+                :able-to-save="ableToSave"
+                :able-to-drop="ableToDrop"
+                :save-confirm="saveConfirm"
+                :drop-confirm="dropConfirm"
+                :confirm-data="confirmData"
+                :drop-confirm-data="dropConfirmData"
+                :save-resource="saveResource"
+                :drop-resource="dropResource"
+                :save-data="saveData"
+                :drop-data="dropData"
+                :save-text="saveText"
+                :drop-text="dropText"
+                :save-icon="saveIcon"
+                :drop-icon="dropIcon"
+                :edit-mode-text="editModeText"
+                @save="onSave"
+                @drop="onDrop"
+            >
+                <template #prev-buttons-ever v-if="slots['prev-buttons-ever']">
+                    <slot name="prev-buttons-ever" />
+                </template>
+                <template #prev-buttons-ever v-if="slots['prev-buttons']">
+                    <slot name="prev-buttons" />
+                </template>
+            </button-nav>
         </article>
     </component>
 </template>