lkt-item-crud 1.1.12 → 1.1.14

package/dist/build.d.ts

@@ -1,5 +1,5 @@
-declare function Oe(u?: boolean): void;
-declare namespace Ve {
-    function install(u: any, $?: {}): void;
+declare function we(u?: boolean): void;
+declare namespace Oe {
+    function install(u: any, T?: {}): void;
 }
-export { Oe as debugLktItemCrud, Ve as default };
+export { we as debugLktItemCrud, Oe as default };

package/dist/build.js

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

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

@@ -113,6 +113,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         required: false;
         default: () => boolean;
     };
+    beforeEmitUpdate: {
+        type: FunctionConstructor;
+        required: false;
+        default: () => boolean;
+    };
     onCreate: {
         type: FunctionConstructor;
         required: false;
@@ -256,6 +261,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         required: false;
         default: () => boolean;
     };
+    beforeEmitUpdate: {
+        type: FunctionConstructor;
+        required: false;
+        default: () => boolean;
+    };
     onCreate: {
         type: FunctionConstructor;
         required: false;
@@ -306,6 +316,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     updateDisabled: boolean;
     dropDisabled: boolean;
     saveValidator: Function;
+    beforeEmitUpdate: Function;
     insideModal: boolean;
 }, {}>, {
     "post-title"?(_: {

package/package.json

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

package/src/lib-components/LktItemCrud.vue

@@ -43,6 +43,7 @@ const props = defineProps({
     dropDisabled: {type: Boolean, default: false},
 
     saveValidator: {type: Function, required: false, default: () => true},
+    beforeEmitUpdate: {type: Function, required: false, default: () => true},
 
     onCreate: {type: Function, required: false, default: () => true},
     onUpdate: {type: Function, required: false, default: () => true},
@@ -139,7 +140,13 @@ watch(() => props.modelValue, v => {
 }, {deep: true});
 
 watch(item, (v) => {
+    debug('item updated ->', item.value);
+    if (typeof props.beforeEmitUpdate === 'function') {
+        debug('item updated -> has beforeEmitUpdate');
+        props.beforeEmitUpdate(item.value);
+    }
     emit('update:modelValue', item.value);
+    debug('item updated -> update dataState');
     dataState.value.increment(v);
 }, {deep: true});
 
@@ -255,7 +262,8 @@ const showDropButton = computed(() => {
     showSwitchButton = computed(() => {
         return !isLoading.value
             && !createMode.value
-            && httpSuccessRead.value;
+            && httpSuccessRead.value
+            && !(props.dropDisabled && props.updateDisabled);
     }),
     showButtons = computed(() => {
         return !props.hiddenButtons && (showSaveButton.value || showDropButton.value || showSwitchButton.value);