lkt-item-crud 1.1.25 → 1.1.27

package/dist/build.d.ts

@@ -1,5 +1,5 @@
-declare function Oe(l?: boolean): void;
-declare namespace Te {
-    function install(l: any, f?: {}): void;
+declare function Je(l?: boolean): void;
+declare namespace Ke {
+    function install(l: any, h?: {}): void;
 }
-export { Oe as debugLktItemCrud, Te as default };
+export { Je as debugLktItemCrud, Ke as default };

package/dist/build.js

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

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

@@ -223,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-item-crud",
-  "version": "1.1.25",
+  "version": "1.1.27",
   "description": "",
   "type": "module",
   "module": "./dist/build.js",
@@ -18,7 +18,8 @@
   "license": "MIT",
   "sideEffects": false,
   "scripts": {
-    "build": "rm -rf dist/*; vue-tsc --declaration --emitDeclarationOnly; vite build; tsc --project tsconfig.build.json; cp build/* dist/"
+    "build": "vue-tsc --declaration --emitDeclarationOnly; vite build; tsc --project tsconfig.build.json; cp build/* dist/",
+    "rebuild": "rm -rf dist/*; vue-tsc --declaration --emitDeclarationOnly; vite build; tsc --project tsconfig.build.json; cp build/* dist/"
   },
   "author": "Antonio Ibáñez",
   "devDependencies": {
@@ -42,6 +43,7 @@
     "lkt-field-switch": "^1.0.0",
     "lkt-http-client": "^1.0.12",
     "lkt-http-info": "^1.0.2",
+    "lkt-i18n": "^1.0.4",
     "lkt-loader": "^1.0.2",
     "lkt-modal": "^1.1.1",
     "lkt-string-tools": "^1.0.2",

package/src/lib-components/LktItemCrud.vue

@@ -6,6 +6,7 @@ import {debug} from "../functions/debug";
 import {LktObject} from "lkt-ts-interfaces";
 import {ModalCallbackConfig} from "../types/ModalCallbackConfig";
 import {runModalCallback} from "../functions/modalCallbacks";
+import {__} from "lkt-i18n";
 
 const props = withDefaults(defineProps<{
     modelValue: LktObject
@@ -37,9 +38,9 @@ const props = withDefaults(defineProps<{
     updateDisabled: boolean
     dropDisabled: boolean
     saveValidator: Function
-    beforeEmitUpdate: Function|undefined
-    onCreate: Function|undefined
-    onUpdate: Function|undefined
+    beforeEmitUpdate: Function | undefined
+    onCreate: Function | undefined
+    onUpdate: Function | undefined
     insideModal: boolean
     hideSwitchEdition: boolean
     dataStateConfig: LktObject
@@ -167,11 +168,6 @@ const fetchItem = async () => {
     }
 }
 
-const displayHeader = computed(() => {
-    if (isLoading.value) return false;
-
-    return props.title || !!slots['post-title'];
-})
 
 watch(() => props.modelValue, v => {
     item.value = v;
@@ -350,14 +346,28 @@ const showDropButton = computed(() => {
     }),
     showButtons = computed(() => {
         return !props.hiddenButtons && (showSaveButton.value || showDropButton.value || showSwitchButton.value);
+    }),
+    computedTitle = computed(() => {
+        if (props.title.startsWith('__:')) {
+            return String(__(props.title.substring(3)));
+        }
+        return props.title;
+    }),
+    displayHeader = computed(() => {
+        if (isLoading.value) return false;
+
+        return computedTitle.value.length > 0 || !!slots['post-title'];
     });
 </script>
 
 <template>
     <article class="lkt-item-crud">
         <header class="lkt-item-crud_header" v-if="displayHeader">
-            <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['pre-title']">
+                <slot name="pre-title" v-bind:item="item" v-bind:loading="isLoading"></slot>
+            </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" v-bind:item="item" v-bind:loading="isLoading"></slot>
             </div>
         </header>