lkt-item-crud 1.1.21 → 1.1.23

package/dist/build.d.ts

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

package/dist/build.js

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

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

@@ -36,6 +36,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     onCreateModalCallbacks: ModalCallbackConfig[];
     onUpdateModalCallbacks: ModalCallbackConfig[];
     onDropModalCallbacks: ModalCallbackConfig[];
+    editing: boolean;
 }>, {
     modelValue: () => {};
     title: string;
@@ -72,6 +73,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     onCreateModalCallbacks: () => never[];
     onUpdateModalCallbacks: () => never[];
     onDropModalCallbacks: () => never[];
+    editing: boolean;
 }>, {
     doDrop: () => void;
     doRefresh: () => Promise<void>;
@@ -82,8 +84,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     update: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
     "update:isCreate": (...args: any[]) => void;
+    "update:editing": (...args: any[]) => void;
     read: (...args: any[]) => void;
     create: (...args: any[]) => void;
+    "before-save": (...args: any[]) => void;
     perms: (...args: any[]) => void;
     "modified-data": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
@@ -122,6 +126,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     onCreateModalCallbacks: ModalCallbackConfig[];
     onUpdateModalCallbacks: ModalCallbackConfig[];
     onDropModalCallbacks: ModalCallbackConfig[];
+    editing: boolean;
 }>, {
     modelValue: () => {};
     title: string;
@@ -158,6 +163,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     onCreateModalCallbacks: () => never[];
     onUpdateModalCallbacks: () => never[];
     onDropModalCallbacks: () => never[];
+    editing: boolean;
 }>>> & {
     onError?: ((...args: any[]) => any) | undefined;
     onDrop?: ((...args: any[]) => any) | undefined;
@@ -165,7 +171,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     onUpdate?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onUpdate:isCreate"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:editing"?: ((...args: any[]) => any) | undefined;
     onRead?: ((...args: any[]) => any) | undefined;
+    "onBefore-save"?: ((...args: any[]) => any) | undefined;
     onPerms?: ((...args: any[]) => any) | undefined;
     "onModified-data"?: ((...args: any[]) => any) | undefined;
 }, {
@@ -204,6 +212,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     onCreateModalCallbacks: ModalCallbackConfig[];
     onUpdateModalCallbacks: ModalCallbackConfig[];
     onDropModalCallbacks: ModalCallbackConfig[];
+    editing: boolean;
 }, {}>, {
     "post-title"?(_: {
         item: LktObject;

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:#fff;z-index:2}.lkt-item-crud-buttons>:last-child{margin-left:auto}
+.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}

package/package.json

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

package/src/lib-components/LktItemCrud.vue

@@ -43,6 +43,7 @@ const props = withDefaults(defineProps<{
     onCreateModalCallbacks: ModalCallbackConfig[]
     onUpdateModalCallbacks: ModalCallbackConfig[]
     onDropModalCallbacks: ModalCallbackConfig[]
+    editing: boolean
 }>(), {
     modelValue: () => ({}),
     title: '',
@@ -79,24 +80,26 @@ const props = withDefaults(defineProps<{
     onCreateModalCallbacks: () => [],
     onUpdateModalCallbacks: () => [],
     onDropModalCallbacks: () => [],
+    editing: false,
 });
 
 const slots = useSlots();
 
-const emit = defineEmits(['update:modelValue', 'update:isCreate', 'read', 'create', 'update', 'drop', 'perms', 'error', 'modified-data']);
+const emit = defineEmits(['update:modelValue', 'update:isCreate', 'update:editing', 'read', 'create', 'update', 'drop', 'before-save', 'perms', 'error', 'modified-data']);
 
 let basePerms: string[] = [];
 
 const isLoading = ref(true),
     item = ref(props.modelValue),
     perms = ref(basePerms),
-    editMode = ref(false),
+    editMode = ref(props.editing),
     httpSuccessRead = ref(false),
     showStoreMessage = ref(false),
     httpStatus = ref(200),
     saveButton = ref(null),
     dropButton = ref(null),
     dataState = ref(new DataState(item.value, props.dataStateConfig)),
+    readDataState = ref(new DataState(props.readData)),
     createMode = ref(props.isCreate),
     itemBeingEdited = ref(false);
 
@@ -149,6 +152,7 @@ const fetchItem = async () => {
         item.value = r.data;
         perms.value = r.perms;
         dataState.value.increment(item.value).turnStoredIntoOriginal();
+        readDataState.value.turnStoredIntoOriginal();
         emit('read', r);
     } catch (e) {
         isLoading.value = false;
@@ -198,6 +202,20 @@ const ableToSave = computed(() => {
 watch(ableToSave, (v) => emit('modified-data', v));
 watch(createMode, (v) => emit('update:isCreate', v));
 
+watch(() => props.readData, v => {
+    readDataState.value.increment(v);
+    if (readDataState.value.changed()) fetchItem()
+})
+
+watch(() => props.editing, v => {
+    debug('editing updated -> updating editMode', v);
+    editMode.value = v;
+});
+watch(editMode, (v) => {
+    debug('editMode updated -> emit update', v);
+    emit('update:editing', v)
+});
+
 // Fetch item
 if (props.readResource && !createMode.value) fetchItem();
 else if (createMode.value) {
@@ -225,6 +243,7 @@ const onDrop = ($event: PointerEvent, r: HTTPResponse) => {
     },
     onSave = ($event: PointerEvent, r: HTTPResponse) => {
         debug('onSave -> received response:', r);
+        emit('before-save');
         if (saveResource.value) {
             isLoading.value = false;
             httpStatus.value = r.httpStatus;