lkt-item-crud 1.1.6 → 1.1.7

package/dist/build.d.ts

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

package/dist/build.js

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

package/dist/functions/debug.d.ts

@@ -0,0 +1,2 @@
+export declare const debug: (...args: any[]) => void;
+export declare const debugLktItemCrud: (state?: boolean) => void;

package/dist/index.d.ts

@@ -2,3 +2,4 @@ import { Plugin } from "vue";
 import "./../lkt-item-crud.css";
 declare const LktItemCrud: Plugin;
 export default LktItemCrud;
+export { debugLktItemCrud } from "./functions/debug";

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

@@ -306,14 +306,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     "button-drop"?(_: {
         item: Record<string, any>;
         editMode: boolean;
-        isCreate: any;
+        isCreate: false;
         canUpdate: boolean;
         canDrop: boolean;
     }): any;
     "button-save"?(_: {
         item: Record<string, any>;
         editMode: boolean;
-        isCreate: any;
+        isCreate: boolean;
         canUpdate: boolean;
         canDrop: boolean;
     }): any;
@@ -321,7 +321,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         item: Record<string, any>;
         loading: false;
         editMode: boolean;
-        isCreate: any;
+        isCreate: boolean;
         canUpdate: boolean;
         canDrop: boolean;
     }): any;

package/dist/settings/Settings.d.ts

@@ -0,0 +1,3 @@
+export declare class Settings {
+    static debugEnabled: boolean;
+}

package/package.json

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

package/src/lib-components/LktItemCrud.vue

@@ -6,6 +6,7 @@ export default {name: "LktItemCrud", inheritAttrs: false}
 import {ref, watch, useSlots, computed} from "vue";
 import {httpCall, HTTPResponse} from "lkt-http-client";
 import {DataState} from "lkt-data-state";
+import {debug} from "../functions/debug";
 
 const props = defineProps({
     modelValue: {type: Object, required: false, default: () => ({})},
@@ -63,7 +64,7 @@ const isLoading = ref(true),
     saveButton = ref(null),
     dropButton = ref(null),
     dataState = ref(new DataState(item.value)),
-    createMode = ref(createMode.value);
+    createMode = ref(props.isCreate);
 
 const saveConfirm = computed(() => {
         return createMode.value
@@ -95,11 +96,13 @@ const saveConfirm = computed(() => {
     canDrop = computed(() => !createMode.value && perms.value.includes('drop'));
 
 const fetchItem = async () => {
+    debug('fetchItem');
     isLoading.value = true;
     httpStatus.value = -1;
     showStoreMessage.value = false;
     try {
         const r = await httpCall(props.readResource, props.readData);
+        debug('fetchItem -> response', r);
         isLoading.value = false;
         httpStatus.value = r.httpStatus;
         if (!r.success) {
@@ -172,6 +175,7 @@ const onDrop = ($event: PointerEvent, r: HTTPResponse) => {
 
     },
     onSave = ($event: PointerEvent, r: HTTPResponse) => {
+        debug('onSave -> received response:', r);
         if (saveResource.value) {
             isLoading.value = false;
             httpStatus.value = r.httpStatus;
@@ -184,18 +188,27 @@ const onDrop = ($event: PointerEvent, r: HTTPResponse) => {
         }
         let emits: 'create' | 'update' = createMode.value ? 'create' : 'update';
         if (!createMode.value) {
+            debug('onSave -> turn stored data into original');
             dataState.value.turnStoredIntoOriginal();
         }
 
         if (r.autoReloadId) {
+            debug('onSave -> autoReloadId detected: ', r.autoReloadId);
             props.readData['id'] = r.autoReloadId;
+            debug('onSave -> turning off create mode');
             createMode.value = false;
             fetchItem();
         }
         if (createMode.value) {
-            if (typeof props.onCreate === 'function') props.onCreate();
+            if (typeof props.onCreate === 'function') {
+                debug('onSave -> trigger onCreate callback');
+                props.onCreate();
+            }
         } else {
-            if (typeof props.onUpdate === 'function') props.onUpdate();
+            if (typeof props.onUpdate === 'function') {
+                debug('onSave -> trigger onUpdate callback');
+                props.onUpdate();
+            }
         }
         emit(emits, r)
     },