lkt-item-crud 1.1.24 → 1.1.26

package/dist/build.d.ts

@@ -1,5 +1,5 @@
-declare function $e(l?: boolean): void;
-declare namespace Fe {
-    function install(l: any, p?: {}): void;
+declare function Te(l?: boolean): void;
+declare namespace $e {
+    function install(l: any, h?: {}): void;
 }
-export { $e as debugLktItemCrud, Fe as default };
+export { Te as debugLktItemCrud, $e as default };

package/dist/build.js

@@ -1,48 +1,56 @@
-import { defineComponent as ve, useSlots as fe, ref as s, computed as i, watch as h, nextTick as pe, resolveComponent as I, openBlock as f, createElementBlock as M, createElementVNode as K, toDisplayString as j, renderSlot as V, createCommentVNode as w, withDirectives as N, createBlock as L, withCtx as Y, unref as Z, vShow as O, createVNode as ee } from "vue";
+import { defineComponent as ce, useSlots as ve, ref as i, computed as s, watch as b, nextTick as fe, resolveComponent as L, openBlock as f, createElementBlock as w, unref as C, renderSlot as U, createCommentVNode as m, createElementVNode as X, toDisplayString as pe, withDirectives as O, createBlock as T, withCtx as Y, vShow as $, createVNode as Z } from "vue";
 import { httpCall as me } from "lkt-http-client";
-import { DataState as ae } from "lkt-data-state";
-import { execModal as he, refreshModal as ke, closeModal as Ce, openModal as be, reOpenModal as De } from "lkt-modal";
-const H = class H {
+import { DataState as ee } from "lkt-data-state";
+import { execModal as he, refreshModal as ke, closeModal as be, openModal as Ce, reOpenModal as De } from "lkt-modal";
+const q = class q {
 };
-H.debugEnabled = !1;
-let T = H;
+q.debugEnabled = !1;
+let F = q;
 const u = (...l) => {
-  T.debugEnabled && console.info("[LktItemCrud] ", ...l);
-}, $e = (l = !0) => {
-  T.debugEnabled = l;
-}, q = (l) => {
+  F.debugEnabled && console.info("[LktItemCrud] ", ...l);
+}, Te = (l = !0) => {
+  F.debugEnabled = l;
+}, j = (l) => {
   u("runModalCallback -> init", l);
-  let p = l.modalKey ? l.modalKey : "_", S = l.args ? l.args : {};
+  let h = l.modalKey ? l.modalKey : "_", M = l.args ? l.args : {};
   switch (l.action) {
     case "reOpen":
-      return De(l.modalName, p, S);
+      return De(l.modalName, h, M);
     case "open":
-      return be(l.modalName, p, S);
+      return Ce(l.modalName, h, M);
     case "close":
-      return Ce(l.modalName, p);
+      return be(l.modalName, h);
     case "refresh":
-      return ke(l.modalName, p, S);
+      return ke(l.modalName, h, M);
     case "exec":
       let e = l.method;
-      return e ? he(l.modalName, p, e, S) : void 0;
+      return e ? he(l.modalName, h, e, M) : void 0;
   }
 }, Se = { class: "lkt-item-crud" }, ye = {
   key: 0,
   class: "lkt-item-crud_header"
-}, ge = { class: "lkt-item-crud_header-title" }, Me = { class: "lkt-item-crud_header-slot" }, _e = { class: "lkt-item-crud-buttons" }, Be = { key: 1 }, we = { key: 1 }, Ee = {
+}, ge = {
+  key: 0,
+  class: "lkt-item-crud_header-slot"
+}, Me = { class: "lkt-item-crud_header-title" }, Be = {
+  key: 1,
+  class: "lkt-item-crud_header-slot"
+}, _e = { class: "lkt-item-crud-buttons" }, we = {
   key: 1,
   class: "lkt-item-crud_content"
-}, Ue = {
+}, Ie = {
   key: 0,
   class: "lkt-grid-1"
-}, Re = /* @__PURE__ */ ve({
+}, Ee = /* @__PURE__ */ ce({
   __name: "LktItemCrud",
   props: {
     modelValue: { default: () => ({}) },
     title: { default: "" },
     editModeText: { default: "Edition Mode" },
     saveText: { default: "Save" },
+    saveIcon: {},
     dropText: { default: "Delete" },
+    dropIcon: {},
     hiddenSave: { type: Boolean, default: !1 },
     hiddenDrop: { type: Boolean, default: !1 },
     hiddenButtons: { type: Boolean, default: !1 },
@@ -77,188 +85,198 @@ const u = (...l) => {
     editing: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "update:isCreate", "update:editing", "read", "create", "update", "drop", "before-save", "perms", "error", "modified-data"],
-  setup(l, { expose: p, emit: S }) {
-    const e = l, $ = fe(), n = S;
-    let te = [];
-    const d = s(!0), r = s(e.modelValue), _ = s(te), c = s(e.editing), m = s(!1), k = s(!1), v = s(200), E = s(null), U = s(null), y = s(new ae(r.value, e.dataStateConfig)), F = s(new ae(e.readData)), o = s(e.isCreate), J = s(!1), le = i(() => o.value ? e.createConfirm : e.updateConfirm), oe = i(() => o.value ? e.createConfirmData : e.updateConfirmData), P = i(() => o.value ? e.createResource : e.updateResource), ue = i(() => o.value ? { ...e.createData, ...JSON.parse(JSON.stringify(r.value)) } : { ...e.updateData, ...JSON.parse(JSON.stringify(r.value)) }), de = i(() => o.value ? e.createDisabled : e.updateDisabled), C = i(() => !o.value && _.value.includes("update")), b = i(() => !o.value && _.value.includes("drop")), R = async () => {
-      u("fetchItem"), d.value = !0, v.value = -1, k.value = !1;
+  setup(l, { expose: h, emit: M }) {
+    const e = l, p = ve(), n = M;
+    let ae = [];
+    const d = i(!0), r = i(e.modelValue), I = i(ae), c = i(e.editing), k = i(!1), D = i(!1), v = i(200), R = i(null), V = i(null), B = i(new ee(r.value, e.dataStateConfig)), J = i(new ee(e.readData)), o = i(e.isCreate), K = i(!1), te = s(() => o.value ? e.createConfirm : e.updateConfirm), le = s(() => o.value ? e.createConfirmData : e.updateConfirmData), x = s(() => o.value ? e.createResource : e.updateResource), oe = s(() => o.value ? { ...e.createData, ...JSON.parse(JSON.stringify(r.value)) } : { ...e.updateData, ...JSON.parse(JSON.stringify(r.value)) }), ue = s(() => o.value ? e.createDisabled : e.updateDisabled), S = s(() => !o.value && I.value.includes("update")), y = s(() => !o.value && I.value.includes("drop")), N = async () => {
+      u("fetchItem"), d.value = !0, v.value = -1, D.value = !1;
       try {
         const a = await me(e.readResource, e.readData);
         if (u("fetchItem -> response", a), d.value = !1, v.value = a.httpStatus, !a.success) {
-          m.value = !1, v.value = a.httpStatus, n("error", a.httpStatus);
+          k.value = !1, v.value = a.httpStatus, n("error", a.httpStatus);
           return;
         }
-        m.value = !0, r.value = a.data, _.value = a.perms, y.value.increment(r.value).turnStoredIntoOriginal(), F.value.turnStoredIntoOriginal(), n("read", a);
+        k.value = !0, r.value = a.data, I.value = a.perms, B.value.increment(r.value).turnStoredIntoOriginal(), J.value.turnStoredIntoOriginal(), n("read", a);
       } catch {
-        d.value = !1, m.value = !1, v.value = 404, n("error", 404);
+        d.value = !1, k.value = !1, v.value = 404, n("error", 404);
         return;
       }
-    }, re = i(() => d.value ? !1 : e.title || !!$["post-title"]);
-    h(() => e.modelValue, (a) => {
-      r.value = a, y.value.increment(a);
-    }, { deep: !0 }), h(r, (a) => {
-      if (J.value = !0, u("item updated ->", r.value), typeof e.beforeEmitUpdate == "function") {
+    }, de = s(() => d.value ? !1 : e.title || !!p["post-title"]);
+    b(() => e.modelValue, (a) => {
+      r.value = a, B.value.increment(a);
+    }, { deep: !0 }), b(r, (a) => {
+      if (K.value = !0, u("item updated ->", r.value), typeof e.beforeEmitUpdate == "function") {
         u("item updated -> has beforeEmitUpdate");
         let t = e.beforeEmitUpdate(r.value);
         u("item updated -> override with: ", t), typeof t == "object" && (r.value = t);
       }
-      n("update:modelValue", r.value), u("item updated -> update dataState"), y.value.increment(a), pe(() => J.value = !1);
-    }, { deep: !0 }), h(_, () => n("perms", _.value));
-    const x = i(() => de.value || !o.value && !C.value || typeof e.saveValidator == "function" && !e.saveValidator(r.value) ? !1 : y.value.changed());
-    h(x, (a) => n("modified-data", a)), h(o, (a) => n("update:isCreate", a)), h(() => e.readData, (a) => {
-      F.value.increment(a), F.value.changed() && R();
-    }), h(() => e.editing, (a) => {
+      n("update:modelValue", r.value), u("item updated -> update dataState"), B.value.increment(a), fe(() => K.value = !1);
+    }, { deep: !0 }), b(I, () => n("perms", I.value));
+    const H = s(() => ue.value || !o.value && !S.value || typeof e.saveValidator == "function" && !e.saveValidator(r.value) ? !1 : B.value.changed());
+    b(H, (a) => n("modified-data", a)), b(o, (a) => n("update:isCreate", a)), b(() => e.readData, (a) => {
+      J.value.increment(a), J.value.changed() && N();
+    }), b(() => e.editing, (a) => {
       u("editing updated -> updating editMode", a), c.value = a;
-    }), h(c, (a) => {
+    }), b(c, (a) => {
       u("editMode updated -> emit update", a), n("update:editing", a);
-    }), e.readResource && !o.value ? R() : o.value && (m.value = !0, c.value = !0, d.value = !1);
-    const ne = (a, t) => {
+    }), e.readResource && !o.value ? N() : o.value && (k.value = !0, c.value = !0, d.value = !1);
+    const re = (a, t) => {
       if (d.value = !1, v.value = t.httpStatus, !t.success) {
-        k.value = !0, n("error", t.httpStatus);
+        D.value = !0, n("error", t.httpStatus);
         return;
       }
-      k.value = !0, e.onDropModalCallbacks.length > 0 && (u("onDrop -> has onDropModalCallbacks"), e.onDropModalCallbacks.forEach((D) => {
-        q(D);
+      D.value = !0, e.onDropModalCallbacks.length > 0 && (u("onDrop -> has onDropModalCallbacks"), e.onDropModalCallbacks.forEach((g) => {
+        j(g);
       })), n("drop", t);
-    }, se = (a, t) => {
-      if (u("onSave -> received response:", t), n("before-save"), P.value) {
+    }, ne = (a, t) => {
+      if (u("onSave -> received response:", t), n("before-save"), x.value) {
         if (d.value = !1, v.value = t.httpStatus, !t.success) {
-          k.value = !0, n("error", t.httpStatus);
+          D.value = !0, n("error", t.httpStatus);
           return;
         }
-        k.value = !0;
+        D.value = !0;
       }
-      let D = o.value ? "create" : "update";
-      o.value || (u("onSave -> turn stored data into original"), y.value.turnStoredIntoOriginal()), D === "create" ? typeof e.onCreate == "function" && (u("onSave -> trigger onCreate callback"), e.onCreate(t), e.onCreateModalCallbacks.length > 0 && (u("onSave -> has onCreateModalCallbacks"), e.onCreateModalCallbacks.forEach((B) => {
-        q(B);
-      }))) : typeof e.onUpdate == "function" && (u("onSave -> trigger onUpdate callback"), e.onUpdate(t), e.onUpdateModalCallbacks.length > 0 && (u("onSave -> has onUpdateModalCallbacks"), e.onUpdateModalCallbacks.forEach((B) => {
-        q(B);
-      }))), !e.insideModal && t.autoReloadId && (u("onSave -> autoReloadId detected: ", t.autoReloadId), e.readData.id = t.autoReloadId, u("onSave -> turning off create mode"), o.value = !1, R()), n(D, t);
-    }, z = () => {
+      let g = o.value ? "create" : "update";
+      o.value || (u("onSave -> turn stored data into original"), B.value.turnStoredIntoOriginal()), g === "create" ? typeof e.onCreate == "function" && (u("onSave -> trigger onCreate callback"), e.onCreate(t), e.onCreateModalCallbacks.length > 0 && (u("onSave -> has onCreateModalCallbacks"), e.onCreateModalCallbacks.forEach((E) => {
+        j(E);
+      }))) : typeof e.onUpdate == "function" && (u("onSave -> trigger onUpdate callback"), e.onUpdate(t), e.onUpdateModalCallbacks.length > 0 && (u("onSave -> has onUpdateModalCallbacks"), e.onUpdateModalCallbacks.forEach((E) => {
+        j(E);
+      }))), !e.insideModal && t.autoReloadId && (u("onSave -> autoReloadId detected: ", t.autoReloadId), e.readData.id = t.autoReloadId, u("onSave -> turning off create mode"), o.value = !1, N()), n(g, t);
+    }, P = () => {
       d.value = !0, v.value = -1;
-    }, A = () => {
+    }, z = () => {
       d.value = !1;
     };
-    p({
+    h({
       doDrop: () => {
-        U.value && typeof U.value.click == "function" && U.value.click();
+        V.value && typeof V.value.click == "function" && V.value.click();
       },
-      doRefresh: R,
+      doRefresh: N,
       doSave: () => {
-        E.value && typeof E.value.click == "function" && E.value.click();
+        R.value && typeof R.value.click == "function" && R.value.click();
       }
     });
-    const G = i(() => !C.value && b.value ? !0 : !e.hiddenDrop && !d.value && c.value && m.value), Q = i(() => y.value.changed() ? !0 : d.value ? !1 : o.value ? !0 : !e.hiddenSave && c.value && m.value), W = i(() => e.hideSwitchEdition || !C.value && !b.value || !C.value && b.value ? !1 : !d.value && !o.value && m.value && !(e.dropDisabled && e.updateDisabled)), ie = i(() => !e.hiddenButtons && (Q.value || G.value || W.value));
+    const A = s(() => !S.value && y.value ? !0 : !e.hiddenDrop && !d.value && c.value && k.value), G = s(() => B.value.changed() ? !0 : d.value ? !1 : o.value ? !0 : !e.hiddenSave && c.value && k.value), Q = s(() => e.hideSwitchEdition || !S.value && !y.value || !S.value && y.value ? !1 : !d.value && !o.value && k.value && !(e.dropDisabled && e.updateDisabled)), ie = s(() => !e.hiddenButtons && (G.value || A.value || Q.value));
     return (a, t) => {
-      const D = I("lkt-button"), B = I("lkt-field-switch"), X = I("lkt-http-info"), ce = I("lkt-loader");
-      return f(), M("article", Se, [
-        re.value ? (f(), M("header", ye, [
-          K("h1", ge, j(a.title), 1),
-          K("div", Me, [
-            V(a.$slots, "post-title", {
+      const g = L("lkt-button"), E = L("lkt-field-switch"), W = L("lkt-http-info"), se = L("lkt-loader");
+      return f(), w("article", Se, [
+        de.value ? (f(), w("header", ye, [
+          C(p)["pre-title"] ? (f(), w("div", ge, [
+            U(a.$slots, "pre-title", {
               item: r.value,
               loading: d.value
             })
-          ])
-        ])) : w("", !0),
-        N(K("div", _e, [
-          o.value ? w("", !0) : N((f(), L(D, {
+          ])) : m("", !0),
+          X("h1", Me, pe(a.title), 1),
+          C(p)["post-title"] ? (f(), w("div", Be, [
+            U(a.$slots, "post-title", {
+              item: r.value,
+              loading: d.value
+            })
+          ])) : m("", !0)
+        ])) : m("", !0),
+        O(X("div", _e, [
+          o.value ? m("", !0) : O((f(), T(g, {
             key: 0,
-            ref: (g) => U.value = g,
+            ref: (_) => V.value = _,
             palette: "danger",
-            disabled: a.dropDisabled || !b.value,
+            disabled: a.dropDisabled || !y.value,
             "confirm-modal": a.dropConfirm,
             "confirm-data": a.dropConfirmData,
             resource: a.dropResource,
             "resource-data": a.dropData,
-            onLoading: z,
-            onLoaded: A,
-            onClick: ne
+            text: C(p)["button-drop"] ? "" : a.dropText,
+            icon: C(p)["button-drop"] ? "" : a.dropIcon,
+            onLoading: P,
+            onLoaded: z,
+            onClick: re
           }, {
             default: Y(() => [
-              Z($)["button-drop"] ? V(a.$slots, "button-drop", {
+              C(p)["button-drop"] ? U(a.$slots, "button-drop", {
                 key: 0,
                 item: r.value,
                 editMode: c.value,
                 isCreate: o.value,
-                canUpdate: C.value,
-                canDrop: b.value
-              }) : (f(), M("span", Be, j(a.dropText), 1))
+                canUpdate: S.value,
+                canDrop: y.value
+              }) : m("", !0)
             ]),
             _: 3
-          }, 8, ["disabled", "confirm-modal", "confirm-data", "resource", "resource-data"])), [
-            [O, G.value]
+          }, 8, ["disabled", "confirm-modal", "confirm-data", "resource", "resource-data", "text", "icon"])), [
+            [$, A.value]
           ]),
-          N(ee(D, {
-            ref: (g) => E.value = g,
+          O(Z(g, {
+            ref: (_) => R.value = _,
             palette: "success",
-            disabled: !x.value,
-            "confirm-modal": le.value,
-            "confirm-data": oe.value,
-            resource: P.value,
-            "resource-data": ue.value,
-            onLoading: z,
-            onLoaded: A,
-            onClick: se
+            disabled: !H.value,
+            "confirm-modal": te.value,
+            "confirm-data": le.value,
+            resource: x.value,
+            "resource-data": oe.value,
+            text: C(p)["button-save"] ? "" : a.saveText,
+            icon: C(p)["button-save"] ? "" : a.saveIcon,
+            onLoading: P,
+            onLoaded: z,
+            onClick: ne
           }, {
             default: Y(() => [
-              Z($)["button-save"] ? V(a.$slots, "button-save", {
+              C(p)["button-save"] ? U(a.$slots, "button-save", {
                 key: 0,
                 item: r.value,
                 editMode: c.value,
                 isCreate: o.value,
-                canUpdate: C.value,
-                canDrop: b.value
-              }) : (f(), M("span", we, j(a.saveText), 1))
+                canUpdate: S.value,
+                canDrop: y.value
+              }) : m("", !0)
             ]),
             _: 3
-          }, 8, ["disabled", "confirm-modal", "confirm-data", "resource", "resource-data"]), [
-            [O, Q.value]
+          }, 8, ["disabled", "confirm-modal", "confirm-data", "resource", "resource-data", "text", "icon"]), [
+            [$, G.value]
           ]),
-          N(ee(B, {
+          O(Z(E, {
             modelValue: c.value,
-            "onUpdate:modelValue": t[0] || (t[0] = (g) => c.value = g),
+            "onUpdate:modelValue": t[0] || (t[0] = (_) => c.value = _),
             label: a.editModeText
           }, null, 8, ["modelValue", "label"]), [
-            [O, W.value]
+            [$, Q.value]
           ])
         ], 512), [
-          [O, ie.value]
+          [$, ie.value]
         ]),
-        d.value ? w("", !0) : (f(), M("div", Ee, [
-          m.value ? (f(), M("div", Ue, [
-            k.value ? (f(), L(X, {
+        d.value ? m("", !0) : (f(), w("div", we, [
+          k.value ? (f(), w("div", Ie, [
+            D.value ? (f(), T(W, {
               key: 0,
               code: v.value,
               quick: "",
               palette: v.value === 200 ? "success" : "danger",
               "can-close": "",
-              onClose: t[1] || (t[1] = (g) => k.value = !1)
-            }, null, 8, ["code", "palette"])) : w("", !0),
-            V(a.$slots, "item", {
+              onClose: t[1] || (t[1] = (_) => D.value = !1)
+            }, null, 8, ["code", "palette"])) : m("", !0),
+            U(a.$slots, "item", {
               item: r.value,
               loading: d.value,
               editMode: c.value,
               isCreate: o.value,
-              canUpdate: C.value,
-              canDrop: b.value,
-              itemBeingEdited: J.value
+              canUpdate: S.value,
+              canDrop: y.value,
+              itemBeingEdited: K.value
             })
-          ])) : (f(), L(X, {
+          ])) : (f(), T(W, {
             key: 1,
             code: v.value
           }, null, 8, ["code"]))
         ])),
-        d.value ? (f(), L(ce, { key: 2 })) : w("", !0)
+        d.value ? (f(), T(se, { key: 2 })) : m("", !0)
       ]);
     };
   }
-}), Fe = {
-  install: (l, p = {}) => {
-    l.component("lkt-item-crud") === void 0 && l.component("lkt-item-crud", Re);
+}), $e = {
+  install: (l, h = {}) => {
+    l.component("lkt-item-crud") === void 0 && l.component("lkt-item-crud", Ee);
   }
 };
 export {
-  $e as debugLktItemCrud,
-  Fe as default
+  Te as debugLktItemCrud,
+  $e as default
 };

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

@@ -5,7 +5,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     title: string;
     editModeText: string;
     saveText: string;
+    saveIcon: string;
     dropText: string;
+    dropIcon: string;
     hiddenSave: boolean;
     hiddenDrop: boolean;
     hiddenButtons: boolean;
@@ -97,7 +99,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     title: string;
     editModeText: string;
     saveText: string;
+    saveIcon: string;
     dropText: string;
+    dropIcon: string;
     hiddenSave: boolean;
     hiddenDrop: boolean;
     hiddenButtons: boolean;
@@ -219,6 +223,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     onDropModalCallbacks: ModalCallbackConfig[];
     editing: boolean;
 }, {}>, {
+    "pre-title"?(_: {
+        item: LktObject;
+        loading: boolean;
+    }): any;
     "post-title"?(_: {
         item: LktObject;
         loading: boolean;

package/dist/style.css

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

package/package.json

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

package/src/lib-components/LktItemCrud.vue

@@ -12,7 +12,9 @@ const props = withDefaults(defineProps<{
     title: string
     editModeText: string
     saveText: string
+    saveIcon: string
     dropText: string
+    dropIcon: string
     hiddenSave: boolean
     hiddenDrop: boolean
     hiddenButtons: boolean
@@ -354,8 +356,11 @@ const showDropButton = computed(() => {
 <template>
     <article class="lkt-item-crud">
         <header class="lkt-item-crud_header" v-if="displayHeader">
+            <div class="lkt-item-crud_header-slot" v-if="slots['pre-title']">
+                <slot name="pre-title" v-bind:item="item" v-bind:loading="isLoading"></slot>
+            </div>
             <h1 class="lkt-item-crud_header-title">{{ title }}</h1>
-            <div class="lkt-item-crud_header-slot">
+            <div class="lkt-item-crud_header-slot" v-if="slots['post-title']">
                 <slot name="post-title" v-bind:item="item" v-bind:loading="isLoading"></slot>
             </div>
         </header>
@@ -370,6 +375,8 @@ const showDropButton = computed(() => {
                 v-bind:confirm-data="dropConfirmData"
                 v-bind:resource="dropResource"
                 v-bind: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">
@@ -378,7 +385,6 @@ const showDropButton = computed(() => {
                       v-bind:is-create="createMode"
                       v-bind:can-update="canUpdate"
                       v-bind:can-drop="canDrop"></slot>
-                <span v-else>{{ dropText }}</span>
             </lkt-button>
 
             <lkt-button
@@ -390,6 +396,8 @@ const showDropButton = computed(() => {
                 v-bind:confirm-data="confirmData"
                 v-bind:resource="saveResource"
                 v-bind: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">
@@ -398,7 +406,6 @@ const showDropButton = computed(() => {
                       v-bind:is-create="createMode"
                       v-bind:can-update="canUpdate"
                       v-bind:can-drop="canDrop"></slot>
-                <span v-else>{{ saveText }}</span>
             </lkt-button>
 
             <lkt-field-switch