lkt-item-crud 1.2.4 → 1.2.6

package/dist/build.d.ts

@@ -1,7 +1,7 @@
-declare function Xe(o?: boolean): void;
-declare namespace Ye {
+declare function _e(o?: boolean): void;
+declare namespace xe {
     function install(o: any, g?: {}): void;
 }
-declare function _e(o: any): void;
-declare function Ze(o: any): void;
-export { Xe as debugLktItemCrud, Ye as default, _e as setItemCrudDefaultDropIcon, Ze as setItemCrudDefaultSaveIcon };
+declare function tt(o: any): void;
+declare function et(o: any): void;
+export { _e as debugLktItemCrud, xe as default, tt as setItemCrudDefaultDropIcon, et as setItemCrudDefaultSaveIcon };

package/dist/build.js

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

package/package.json

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

package/src/components/ButtonNav.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
     import { ref, useSlots, watch } from 'vue';
     import { LktObject } from 'lkt-ts-interfaces';
+    import { HTTPResponse } from 'lkt-http-client';
 
     const emit = defineEmits(['update:loading', 'update:editing', 'save', 'drop']);
 
@@ -57,11 +58,11 @@
         onButtonLoaded = () => {
             isLoading.value = false;
         },
-        onSave = () => {
-            emit('save');
+        onSave = ($event: Event, r: HTTPResponse) => {
+            emit('save', $event, r);
         },
-        onDrop = () => {
-            emit('drop');
+        onDrop = ($event: Event, r: HTTPResponse) => {
+            emit('drop', $event, r);
         };
 
     const doSave = () => {
@@ -100,9 +101,9 @@
             :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">
+            @loading="onButtonLoading"
+            @loaded="onButtonLoaded"
+            @click="onSave">
             <slot v-if="!!slots['button-save']" name="button-save" :item="item"
                   :edit-mode="isEditing"
                   :is-create="createMode"
@@ -122,9 +123,9 @@
             :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">
+            @loading="onButtonLoading"
+            @loaded="onButtonLoaded"
+            @click="onDrop">
             <slot v-if="!!slots['button-drop']" name="button-drop" :item="item"
                   :edit-mode="isEditing"
                   :is-create="createMode"

package/src/lib-components/LktItemCrud.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-    import { computed, nextTick, ref, useSlots, watch } from 'vue';
+    import { computed, nextTick, onMounted, ref, useSlots, watch } from 'vue';
     import { httpCall, HTTPResponse } from 'lkt-http-client';
     import { DataState } from 'lkt-data-state';
     import { debug } from '../functions/debug';
@@ -143,7 +143,8 @@
         dataState = ref(new DataState(item.value, props.dataStateConfig)),
         readDataState = ref(new DataState(props.readData)),
         createMode = ref(props.isCreate),
-        itemBeingEdited = ref(false);
+        itemBeingEdited = ref(false),
+        itemCreated = ref(false);
 
     const buttonNav = ref(null);
 
@@ -259,13 +260,16 @@
         emit('update:editing', v);
     });
 
-    // Fetch item
-    if (props.readResource && !createMode.value) fetchItem();
-    else if (createMode.value) {
-        httpSuccessRead.value = true;
-        editMode.value = true;
-        isLoading.value = false;
-    }
+    onMounted(() => {
+        // Fetch item
+        if (props.readResource && !createMode.value) fetchItem();
+        else if (createMode.value) {
+            httpSuccessRead.value = true;
+            editMode.value = true;
+            isLoading.value = false;
+            dataState.value.increment(item.value).turnStoredIntoOriginal();
+        }
+    })
 
     const onDrop = ($event: PointerEvent, r: HTTPResponse) => {
             isLoading.value = false;
@@ -289,11 +293,13 @@
             emit('before-save');
             if (saveResource.value) {
                 isLoading.value = false;
-                httpStatus.value = r.httpStatus;
-                if (!r.success) {
-                    showStoreMessage.value = true;
-                    emit('error', r.httpStatus);
-                    return;
+                if (typeof r !== 'undefined') {
+                    httpStatus.value = r.httpStatus;
+                    if (!r.success) {
+                        showStoreMessage.value = true;
+                        emit('error', r.httpStatus);
+                        return;
+                    }
                 }
                 showStoreMessage.value = true;
             }
@@ -303,7 +309,10 @@
                 dataState.value.turnStoredIntoOriginal();
             }
 
+
             if (emits === 'create') {
+                itemCreated.value = true;
+                dataState.value.increment(item.value).turnStoredIntoOriginal();
                 if (typeof props.onCreate === 'function') {
                     debug('onSave -> trigger onCreate callback');
                     props.onCreate(r);
@@ -357,6 +366,15 @@
         return dataState.value.changed() ? props.editedCloseConfirm : '';
     });
 
+    const crudBeforeClose = (modalData: LktObject) => {
+        if (typeof props.beforeClose === 'function') {
+            return props.beforeClose({
+                ...modalData,
+                itemCreated: itemCreated.value,
+            });
+        }
+    };
+
     const showDropButton = computed(() => {
             if (!canUpdate.value && canDrop.value) return true;
 
@@ -412,19 +430,21 @@
         }),
         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,
+                    'before-close': crudBeforeClose,
                     'disabled-close': props.disabledClose,
                     'disabled-veil-click': props.disabledVeilClick,
                     'close-confirm': closeConfirm.value,
                     'close-confirm-key': props.editedCloseConfirmKey,
                     title: props.title,
                     size: props.size,
+                    item: item.value,
                 };
             }
             return {};