lkt-item-crud 1.0.5 → 1.0.7

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 lekrat
+Copyright (c) 2023 alphaibanez
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/lkt-item-crud.es.js

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

package/dist/lkt-item-crud.umd.js

@@ -1 +1 @@
-(function(e,p){typeof exports=="object"&&typeof module<"u"?module.exports=p(require("vue"),require("lkt-http-client"),require("lkt-data-state")):typeof define=="function"&&define.amd?define(["vue","lkt-http-client","lkt-data-state"],p):(e=typeof globalThis<"u"?globalThis:e||self,e.LktItemCrud=p(e.Vue,e.LktHttpClient,e.LktDataState))})(this,function(e,p,w){"use strict";const _={class:"lkt-item-crud"},q={key:0,class:"lkt-item-crud_header"},L={class:"lkt-item-crud_header-title"},R={class:"lkt-item-crud_header-slot"},E={class:"lkt-item-crud-buttons"},N={key:1},I={key:1},T={key:1,class:"lkt-item-crud_content"},x={key:0,class:"lkt-grid-1"},M={name:"LktItemCrud",inheritAttrs:!1},O=e.defineComponent({...M,props:{modelValue:{type:Object,required:!1,default:()=>({})},title:{type:String,default:""},editModeText:{type:String,default:"Edition Mode"},saveText:{type:String,default:"Save"},dropText:{type:String,default:"Delete"},readResource:{type:String,required:!0},createResource:{type:String,required:!1},updateResource:{type:String,required:!1},dropResource:{type:String,required:!1},readData:{type:Object,required:!1,default:()=>({})},createData:{type:Object,required:!1,default:()=>({})},updateData:{type:Object,required:!1,default:()=>({})},dropData:{type:Object,required:!1,default:()=>({})},isCreate:{type:Boolean,default:!1},createConfirm:{type:String,default:""},updateConfirm:{type:String,default:""},dropConfirm:{type:String,default:""},createDisabled:{type:Boolean,default:!1},updateDisabled:{type:Boolean,default:!1},dropDisabled:{type:Boolean,default:!1},saveValidator:{type:Function,required:!1,default:()=>!0}},emits:["update:modelValue","read","create","update","drop","perms","error","modified-data"],setup(r,{expose:C,emit:$}){const t=r,v=e.useSlots(),n=$;let j=[];const l=e.ref(!0),d=e.ref(t.modelValue),S=e.ref(j),u=e.ref(!1),s=e.ref(!1),c=e.ref(!1),i=e.ref(200),k=e.ref(null),h=e.ref(null),m=e.ref(new w.DataState(d.value)),H=e.computed(()=>t.isCreate?t.createConfirm:t.updateConfirm),A=e.computed(()=>t.isCreate?t.createResource:t.updateResource),F=e.computed(()=>t.isCreate?t.createData:t.updateData),P=e.computed(()=>t.isCreate?t.createDisabled:t.updateDisabled),D=async()=>{l.value=!0,i.value=-1;try{const a=await p.httpCall(t.readResource,t.readData);if(l.value=!1,!a.success){s.value=!1,i.value=a.httpStatus,n("error",a.httpStatus);return}s.value=!0,d.value=a.data,S.value=a.perms,m.value.increment(d.value).turnStoredIntoOriginal(),n("read",a)}catch{l.value=!1,s.value=!1,i.value=404,n("error",404);return}},U=e.computed(()=>l.value?!1:t.title||!!v["post-title"]);e.watch(()=>t.modelValue,a=>{d.value=a,m.value.increment(a)},{deep:!0}),e.watch(d,a=>{n("update:modelValue",d.value),m.value.increment(a)},{deep:!0}),e.watch(S,()=>n("perms",S.value));const B=e.computed(()=>P.value||typeof t.saveValidator=="function"&&!t.saveValidator(d.value)?!1:m.value.changed());e.watch(B,a=>n("modified-data",a)),t.readResource&&!t.isCreate?D():t.isCreate&&(s.value=!0,u.value=!0,l.value=!1);const z=(a,o)=>{if(l.value=!1,i.value=o.httpStatus,!o.success){c.value=!0,n("error",o.httpStatus);return}c.value=!0,n("drop",o)},G=(a,o)=>{if(l.value=!1,i.value=o.httpStatus,!o.success){c.value=!0,n("error",o.httpStatus);return}c.value=!0;let y=t.isCreate?"create":"update";t.isCreate||m.value.turnStoredIntoOriginal(),n(y,o)},b=()=>{l.value=!0,i.value=-1},g=()=>{l.value=!1};return C({doDrop:()=>{h.value&&typeof h.value.click=="function"&&h.value.click()},doRefresh:D,doSave:()=>{k.value&&typeof k.value.click=="function"&&k.value.click()}}),(a,o)=>{const y=e.resolveComponent("lkt-button"),J=e.resolveComponent("lkt-field-switch"),V=e.resolveComponent("lkt-http-info"),K=e.resolveComponent("lkt-loader");return e.openBlock(),e.createElementBlock("article",_,[U.value?(e.openBlock(),e.createElementBlock("header",q,[e.createElementVNode("h1",L,e.toDisplayString(r.title),1),e.createElementVNode("div",R,[e.renderSlot(a.$slots,"post-title",{item:d.value,loading:l.value})])])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("div",E,[r.isCreate?e.createCommentVNode("",!0):e.withDirectives((e.openBlock(),e.createBlock(y,{key:0,ref:f=>h.value=f,palette:"danger",disabled:r.dropDisabled,"confirm-modal":r.dropConfirm,resource:r.dropResource,"resource-data":r.dropData,onLoading:b,onLoaded:g,onClick:z},{default:e.withCtx(()=>[e.unref(v)["button-drop"]?e.renderSlot(a.$slots,"button-drop",{key:0,item:d.value,editMode:u.value}):(e.openBlock(),e.createElementBlock("span",N,e.toDisplayString(r.dropText),1))]),_:3},8,["disabled","confirm-modal","resource","resource-data"])),[[e.vShow,!l.value&&u.value&&s.value]]),e.withDirectives(e.createVNode(y,{ref:f=>k.value=f,palette:"success",disabled:!B.value,"confirm-modal":H.value,resource:A.value,"resource-data":F.value,onLoading:b,onLoaded:g,onClick:G},{default:e.withCtx(()=>[e.unref(v)["button-save"]?e.renderSlot(a.$slots,"button-save",{key:0,item:d.value,editMode:u.value}):(e.openBlock(),e.createElementBlock("span",I,e.toDisplayString(r.saveText),1))]),_:3},8,["disabled","confirm-modal","resource","resource-data"]),[[e.vShow,!l.value&&u.value&&s.value]]),e.withDirectives(e.createVNode(J,{modelValue:u.value,"onUpdate:modelValue":o[0]||(o[0]=f=>u.value=f),label:r.editModeText},null,8,["modelValue","label"]),[[e.vShow,!l.value&&s.value&&!r.isCreate]])],512),[[e.vShow,s.value]]),l.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",T,[s.value?(e.openBlock(),e.createElementBlock("div",x,[c.value?(e.openBlock(),e.createBlock(V,{key:0,code:i.value,quick:"",palette:i.value===200?"success":"danger","can-close":"",onClose:o[1]||(o[1]=f=>c.value=!1)},null,8,["code","palette"])):e.createCommentVNode("",!0),e.renderSlot(a.$slots,"item",{item:d.value,loading:l.value,editMode:u.value})])):(e.openBlock(),e.createBlock(V,{key:1,code:i.value},null,8,["code"]))])),l.value?(e.openBlock(),e.createBlock(K,{key:2})):e.createCommentVNode("",!0)])}}}),Q="";return{install:(r,C={})=>{r.component("LktItemCrud",O)}}});
+(function(e,p){typeof exports=="object"&&typeof module<"u"?module.exports=p(require("vue"),require("lkt-http-client"),require("lkt-data-state")):typeof define=="function"&&define.amd?define(["vue","lkt-http-client","lkt-data-state"],p):(e=typeof globalThis<"u"?globalThis:e||self,e.LktItemCrud=p(e.Vue,e.LktHttpClient,e.LktDataState))})(this,function(e,p,L){"use strict";const N={class:"lkt-item-crud"},R={key:0,class:"lkt-item-crud_header"},_={class:"lkt-item-crud_header-title"},I={class:"lkt-item-crud_header-slot"},O={class:"lkt-item-crud-buttons"},E={key:1},T={key:1},x={key:1,class:"lkt-item-crud_content"},M={key:0,class:"lkt-grid-1"},$={name:"LktItemCrud",inheritAttrs:!1},j=e.defineComponent({...$,props:{modelValue:{type:Object,required:!1,default:()=>({})},title:{type:String,default:""},editModeText:{type:String,default:"Edition Mode"},saveText:{type:String,default:"Save"},dropText:{type:String,default:"Delete"},readResource:{type:String,required:!0},createResource:{type:String,required:!1},updateResource:{type:String,required:!1},dropResource:{type:String,required:!1},readData:{type:Object,required:!1,default:()=>({})},createData:{type:Object,required:!1,default:()=>({})},updateData:{type:Object,required:!1,default:()=>({})},dropData:{type:Object,required:!1,default:()=>({})},isCreate:{type:Boolean,default:!1},createConfirm:{type:String,default:""},updateConfirm:{type:String,default:""},dropConfirm:{type:String,default:""},createDisabled:{type:Boolean,default:!1},updateDisabled:{type:Boolean,default:!1},dropDisabled:{type:Boolean,default:!1},saveValidator:{type:Function,required:!1,default:()=>!0}},emits:["update:modelValue","read","create","update","drop","perms","error","modified-data"],setup(l,{expose:g,emit:U}){const t=l,D=e.useSlots(),n=U;let J=[];const r=e.ref(!0),d=e.ref(t.modelValue),m=e.ref(J),u=e.ref(!1),i=e.ref(!1),c=e.ref(!1),s=e.ref(200),v=e.ref(null),h=e.ref(null),k=e.ref(new L.DataState(d.value)),H=e.computed(()=>t.isCreate?t.createConfirm:t.updateConfirm),A=e.computed(()=>t.isCreate?t.createResource:t.updateResource),F=e.computed(()=>t.isCreate?{...t.createData,...JSON.parse(JSON.stringify(d.value))}:{...t.updateData,...JSON.parse(JSON.stringify(d.value))}),P=e.computed(()=>t.isCreate?t.createDisabled:t.updateDisabled),C=e.computed(()=>!t.isCreate&&m.value.includes("update")),S=e.computed(()=>!t.isCreate&&m.value.includes("drop")),B=async()=>{r.value=!0,s.value=-1,c.value=!1;try{const a=await p.httpCall(t.readResource,t.readData);if(r.value=!1,s.value=a.httpStatus,!a.success){i.value=!1,s.value=a.httpStatus,n("error",a.httpStatus);return}i.value=!0,d.value=a.data,m.value=a.perms,k.value.increment(d.value).turnStoredIntoOriginal(),n("read",a)}catch{r.value=!1,i.value=!1,s.value=404,n("error",404);return}},z=e.computed(()=>r.value?!1:t.title||!!D["post-title"]);e.watch(()=>t.modelValue,a=>{d.value=a,k.value.increment(a)},{deep:!0}),e.watch(d,a=>{n("update:modelValue",d.value),k.value.increment(a)},{deep:!0}),e.watch(m,()=>n("perms",m.value));const b=e.computed(()=>P.value||!t.isCreate&&!C.value||typeof t.saveValidator=="function"&&!t.saveValidator(d.value)?!1:k.value.changed());e.watch(b,a=>n("modified-data",a)),t.readResource&&!t.isCreate?B():t.isCreate&&(i.value=!0,u.value=!0,r.value=!1);const G=(a,o)=>{if(r.value=!1,s.value=o.httpStatus,!o.success){c.value=!0,n("error",o.httpStatus);return}c.value=!0,n("drop",o)},K=(a,o)=>{if(r.value=!1,s.value=o.httpStatus,!o.success){c.value=!0,n("error",o.httpStatus);return}c.value=!0;let y=t.isCreate?"create":"update";t.isCreate||k.value.turnStoredIntoOriginal(),o.autoReloadId&&(t.readData.id=o.autoReloadId,B()),n(y,o)},V=()=>{r.value=!0,s.value=-1},w=()=>{r.value=!1};return g({doDrop:()=>{h.value&&typeof h.value.click=="function"&&h.value.click()},doRefresh:B,doSave:()=>{v.value&&typeof v.value.click=="function"&&v.value.click()}}),(a,o)=>{const y=e.resolveComponent("lkt-button"),Q=e.resolveComponent("lkt-field-switch"),q=e.resolveComponent("lkt-http-info"),W=e.resolveComponent("lkt-loader");return e.openBlock(),e.createElementBlock("article",N,[z.value?(e.openBlock(),e.createElementBlock("header",R,[e.createElementVNode("h1",_,e.toDisplayString(l.title),1),e.createElementVNode("div",I,[e.renderSlot(a.$slots,"post-title",{item:d.value,loading:r.value})])])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("div",O,[l.isCreate?e.createCommentVNode("",!0):e.withDirectives((e.openBlock(),e.createBlock(y,{key:0,ref:f=>h.value=f,palette:"danger",disabled:l.dropDisabled||!S.value,"confirm-modal":l.dropConfirm,resource:l.dropResource,"resource-data":l.dropData,onLoading:V,onLoaded:w,onClick:G},{default:e.withCtx(()=>[e.unref(D)["button-drop"]?e.renderSlot(a.$slots,"button-drop",{key:0,item:d.value,editMode:u.value,isCreate:l.isCreate,canUpdate:C.value,canDrop:S.value}):(e.openBlock(),e.createElementBlock("span",E,e.toDisplayString(l.dropText),1))]),_:3},8,["disabled","confirm-modal","resource","resource-data"])),[[e.vShow,!r.value&&u.value&&i.value]]),e.withDirectives(e.createVNode(y,{ref:f=>v.value=f,palette:"success",disabled:!b.value,"confirm-modal":H.value,resource:A.value,"resource-data":F.value,onLoading:V,onLoaded:w,onClick:K},{default:e.withCtx(()=>[e.unref(D)["button-save"]?e.renderSlot(a.$slots,"button-save",{key:0,item:d.value,editMode:u.value,isCreate:l.isCreate,canUpdate:C.value,canDrop:S.value}):(e.openBlock(),e.createElementBlock("span",T,e.toDisplayString(l.saveText),1))]),_:3},8,["disabled","confirm-modal","resource","resource-data"]),[[e.vShow,!r.value&&u.value&&i.value]]),e.withDirectives(e.createVNode(Q,{modelValue:u.value,"onUpdate:modelValue":o[0]||(o[0]=f=>u.value=f),label:l.editModeText},null,8,["modelValue","label"]),[[e.vShow,!r.value&&i.value&&!l.isCreate]])],512),[[e.vShow,i.value]]),r.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",x,[i.value?(e.openBlock(),e.createElementBlock("div",M,[c.value?(e.openBlock(),e.createBlock(q,{key:0,code:s.value,quick:"",palette:s.value===200?"success":"danger","can-close":"",onClose:o[1]||(o[1]=f=>c.value=!1)},null,8,["code","palette"])):e.createCommentVNode("",!0),e.renderSlot(a.$slots,"item",{item:d.value,loading:r.value,editMode:u.value,isCreate:l.isCreate,canUpdate:C.value,canDrop:S.value})])):(e.openBlock(),e.createBlock(q,{key:1,code:s.value},null,8,["code"]))])),r.value?(e.openBlock(),e.createBlock(W,{key:2})):e.createCommentVNode("",!0)])}}}),X="";return{install:(l,g={})=>{l.component("LktItemCrud",j)}}});

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

@@ -485,15 +485,24 @@ declare const _default: {
         'button-drop': (_: {
             item: Record<string, any>;
             editMode: boolean;
+            isCreate: false;
+            canUpdate: boolean;
+            canDrop: boolean;
         }) => any;
         'button-save': (_: {
             item: Record<string, any>;
             editMode: boolean;
+            isCreate: boolean;
+            canUpdate: boolean;
+            canDrop: boolean;
         }) => any;
         item: (_: {
             item: Record<string, any>;
             loading: false;
             editMode: boolean;
+            isCreate: boolean;
+            canUpdate: boolean;
+            canDrop: boolean;
         }) => any;
     };
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-item-crud",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "",
   "main": "src/index.ts",
   "module": "src/index.ts",

package/src/lib-components/LktItemCrud.vue

@@ -65,22 +65,27 @@ const saveConfirm = computed(() => {
             : props.updateResource;
     }),
     saveData = computed(() => {
-        return props.isCreate
-            ? props.createData
-            : props.updateData;
+        if (props.isCreate) {
+            return {...props.createData, ...JSON.parse(JSON.stringify(item.value))};
+        }
+        return {...props.updateData, ...JSON.parse(JSON.stringify(item.value))};
     }),
     saveDisabled = computed(() => {
         return props.isCreate
             ? props.createDisabled
             : props.updateDisabled;
-    })
+    }),
+    canUpdate = computed(() => !props.isCreate && perms.value.includes('update')),
+    canDrop = computed(() => !props.isCreate && perms.value.includes('drop'));
 
 const fetchItem = async () => {
     isLoading.value = true;
     httpStatus.value = -1;
+    showStoreMessage.value = false;
     try {
         const r = await httpCall(props.readResource, props.readData);
         isLoading.value = false;
+        httpStatus.value = r.httpStatus;
         if (!r.success) {
             httpSuccessRead.value = false;
             httpStatus.value = r.httpStatus;
@@ -121,6 +126,7 @@ watch(perms, () => emit('perms', perms.value));
 
 const ableToSave = computed(() => {
     if (saveDisabled.value) return false;
+    if (!props.isCreate && !canUpdate.value) return false;
 
     if (typeof props.saveValidator === 'function' && !props.saveValidator(item.value)) return false;
 
@@ -161,6 +167,11 @@ const onDrop = ($event: PointerEvent, r: HTTPResponse) => {
         if (!props.isCreate) {
             dataState.value.turnStoredIntoOriginal();
         }
+
+        if (r.autoReloadId) {
+            props.readData['id'] = r.autoReloadId;
+            fetchItem();
+        }
         emit(emits, r)
 
     },
@@ -201,7 +212,7 @@ defineExpose({
                 v-show="!isLoading && editMode && httpSuccessRead"
                 v-if="!isCreate"
                 palette="danger"
-                v-bind:disabled="dropDisabled"
+                v-bind:disabled="dropDisabled || !canDrop"
                 v-bind:confirm-modal="dropConfirm"
                 v-bind:resource="dropResource"
                 v-bind:resource-data="dropData"
@@ -209,7 +220,10 @@ defineExpose({
                 v-on:loaded="onButtonLoaded"
                 v-on:click="onDrop">
                 <slot v-if="!!slots['button-drop']" name="button-drop" v-bind:item="item"
-                      v-bind:edit-mode="editMode"></slot>
+                      v-bind:edit-mode="editMode"
+                    v-bind:is-create="isCreate"
+                    v-bind:can-update="canUpdate"
+                    v-bind:can-drop="canDrop"></slot>
                 <span v-else>{{ dropText }}</span>
             </lkt-button>
 
@@ -225,7 +239,10 @@ defineExpose({
                 v-on:loaded="onButtonLoaded"
                 v-on:click="onSave">
                 <slot v-if="!!slots['button-save']" name="button-save" v-bind:item="item"
-                      v-bind:edit-mode="editMode"></slot>
+                      v-bind:edit-mode="editMode"
+                    v-bind:is-create="isCreate"
+                    v-bind:can-update="canUpdate"
+                    v-bind:can-drop="canDrop"></slot>
                 <span v-else>{{ saveText }}</span>
             </lkt-button>
 
@@ -238,7 +255,10 @@ defineExpose({
                 <lkt-http-info :code="httpStatus" v-if="showStoreMessage" quick
                                :palette="httpStatus === 200 ? 'success' : 'danger'" can-close
                                v-on:close="showStoreMessage = false"></lkt-http-info>
-                <slot name="item" v-bind:item="item" v-bind:loading="isLoading" v-bind:edit-mode="editMode"></slot>
+                <slot name="item" v-bind:item="item" v-bind:loading="isLoading" v-bind:edit-mode="editMode"
+                    v-bind:is-create="isCreate"
+                    v-bind:can-update="canUpdate"
+                    v-bind:can-drop="canDrop"></slot>
             </div>
             <lkt-http-info :code="httpStatus" v-else></lkt-http-info>
         </div>