lkt-item-crud 1.0.4 → 1.0.6

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

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

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

package/dist/style.css

@@ -1 +1 @@
-.lkt-item-crud,.lkt-item-crud_content{display:flex;flex-direction:column;gap:15px}.lkt-item-crud-buttons{position:sticky;top:0;display:flex;align-items:center;gap:var(--gap)}.lkt-item-crud-buttons>:last-child{margin-left:auto}
+.lkt-item-crud,.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:#ffffff;z-index:2;padding:var(--gap) 0}.lkt-item-crud-buttons>:last-child{margin-left:auto}

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

@@ -57,7 +57,7 @@ declare const _default: {
             required: false;
             default: () => {};
         };
-        saveIsCreate: {
+        isCreate: {
             type: BooleanConstructor;
             default: boolean;
         };
@@ -85,6 +85,11 @@ declare const _default: {
             type: BooleanConstructor;
             default: boolean;
         };
+        saveValidator: {
+            type: FunctionConstructor;
+            required: false;
+            default: () => boolean;
+        };
     }>> & {
         onError?: ((...args: any[]) => any) | undefined;
         onDrop?: ((...args: any[]) => any) | undefined;
@@ -156,7 +161,7 @@ declare const _default: {
             required: false;
             default: () => {};
         };
-        saveIsCreate: {
+        isCreate: {
             type: BooleanConstructor;
             default: boolean;
         };
@@ -184,6 +189,11 @@ declare const _default: {
             type: BooleanConstructor;
             default: boolean;
         };
+        saveValidator: {
+            type: FunctionConstructor;
+            required: false;
+            default: () => boolean;
+        };
     }>> & {
         onError?: ((...args: any[]) => any) | undefined;
         onDrop?: ((...args: any[]) => any) | undefined;
@@ -203,13 +213,14 @@ declare const _default: {
         createData: Record<string, any>;
         updateData: Record<string, any>;
         dropData: Record<string, any>;
-        saveIsCreate: boolean;
+        isCreate: boolean;
         createConfirm: string;
         updateConfirm: string;
         dropConfirm: string;
         createDisabled: boolean;
         updateDisabled: boolean;
         dropDisabled: boolean;
+        saveValidator: Function;
     }, true, {}, {}, {
         P: {};
         B: {};
@@ -275,7 +286,7 @@ declare const _default: {
             required: false;
             default: () => {};
         };
-        saveIsCreate: {
+        isCreate: {
             type: BooleanConstructor;
             default: boolean;
         };
@@ -303,6 +314,11 @@ declare const _default: {
             type: BooleanConstructor;
             default: boolean;
         };
+        saveValidator: {
+            type: FunctionConstructor;
+            required: false;
+            default: () => boolean;
+        };
     }>> & {
         onError?: ((...args: any[]) => any) | undefined;
         onDrop?: ((...args: any[]) => any) | undefined;
@@ -326,13 +342,14 @@ declare const _default: {
         createData: Record<string, any>;
         updateData: Record<string, any>;
         dropData: Record<string, any>;
-        saveIsCreate: boolean;
+        isCreate: boolean;
         createConfirm: string;
         updateConfirm: string;
         dropConfirm: string;
         createDisabled: boolean;
         updateDisabled: boolean;
         dropDisabled: boolean;
+        saveValidator: Function;
     }>;
     __isFragment?: undefined;
     __isTeleport?: undefined;
@@ -395,7 +412,7 @@ declare const _default: {
         required: false;
         default: () => {};
     };
-    saveIsCreate: {
+    isCreate: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -423,6 +440,11 @@ declare const _default: {
         type: BooleanConstructor;
         default: boolean;
     };
+    saveValidator: {
+        type: FunctionConstructor;
+        required: false;
+        default: () => boolean;
+    };
 }>> & {
     onError?: ((...args: any[]) => any) | undefined;
     onDrop?: ((...args: any[]) => any) | undefined;
@@ -446,13 +468,14 @@ declare const _default: {
     createData: Record<string, any>;
     updateData: Record<string, any>;
     dropData: Record<string, any>;
-    saveIsCreate: boolean;
+    isCreate: boolean;
     createConfirm: string;
     updateConfirm: string;
     dropConfirm: string;
     createDisabled: boolean;
     updateDisabled: boolean;
     dropDisabled: boolean;
+    saveValidator: Function;
 }, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         'post-title': (_: {

package/dist/vite.config.d.ts

@@ -24,6 +24,7 @@ declare namespace _default {
                     suneditor: string;
                     katex: string;
                     'lkt-tools': string;
+                    'lkt-data-state': string;
                     'lkt-http-client': string;
                     'lkt-string-tools': string;
                     'lkt-vue-tools': string;

package/lkt-item-crud.css

@@ -12,10 +12,14 @@
 
 .lkt-item-crud-buttons {
     position: sticky;
-    top: 0;
+    top: calc(-1 * var(--gap));
     display: flex;
     align-items: center;
     gap: var(--gap);
+    transition: all linear .150s;
+    background: #ffffff;
+    z-index: 2;
+    padding: var(--gap) 0;
 }
 
 .lkt-item-crud-buttons > :last-child {

package/package.json

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

package/src/lib-components/LktItemCrud.vue

@@ -25,7 +25,7 @@ const props = defineProps({
     updateData: {type: Object, required: false, default: () => ({})},
     dropData: {type: Object, required: false, default: () => ({})},
 
-    saveIsCreate: {type: Boolean, default: false},
+    isCreate: {type: Boolean, default: false},
     createConfirm: {type: String, default: ''},
     updateConfirm: {type: String, default: ''},
     dropConfirm: {type: String, default: ''},
@@ -33,6 +33,8 @@ const props = defineProps({
     createDisabled: {type: Boolean, default: false},
     updateDisabled: {type: Boolean, default: false},
     dropDisabled: {type: Boolean, default: false},
+
+    saveValidator: {type: Function, required: false, default: () => true},
 });
 
 const slots = useSlots();
@@ -49,27 +51,27 @@ const isLoading = ref(true),
     showStoreMessage = ref(false),
     httpStatus = ref(200),
     saveButton = ref(null),
-    dropButton = ref(null);
-
-const dataState = ref(new DataState(JSON.parse(JSON.stringify(item.value))));
+    dropButton = ref(null),
+    dataState = ref(new DataState(item.value));
 
 const saveConfirm = computed(() => {
-        return props.saveIsCreate
+        return props.isCreate
             ? props.createConfirm
             : props.updateConfirm;
     }),
     saveResource = computed(() => {
-        return props.saveIsCreate
+        return props.isCreate
             ? props.createResource
             : props.updateResource;
     }),
     saveData = computed(() => {
-        return props.saveIsCreate
-            ? 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.saveIsCreate
+        return props.isCreate
             ? props.createDisabled
             : props.updateDisabled;
     })
@@ -77,8 +79,11 @@ const saveConfirm = computed(() => {
 const fetchItem = async () => {
     isLoading.value = true;
     httpStatus.value = -1;
-    return await httpCall(props.readResource, props.readData).then((r) => {
+    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;
@@ -88,9 +93,15 @@ const fetchItem = async () => {
         httpSuccessRead.value = true;
         item.value = r.data;
         perms.value = r.perms;
-        dataState.value = new DataState(JSON.parse(JSON.stringify(item.value)));
+        dataState.value.increment(item.value).turnStoredIntoOriginal();
         emit('read', r);
-    });
+    } catch (e) {
+        isLoading.value = false;
+        httpSuccessRead.value = false;
+        httpStatus.value = 404;
+        emit('error', 404);
+        return;
+    }
 }
 
 const displayHeader = computed(() => {
@@ -101,23 +112,32 @@ const displayHeader = computed(() => {
 
 watch(() => props.modelValue, v => {
     item.value = v;
-    dataState.value.increment(JSON.parse(JSON.stringify(v)));
+    dataState.value.increment(v);
 }, {deep: true});
+
 watch(item, (v) => {
     emit('update:modelValue', item.value);
-    dataState.value.increment(JSON.parse(JSON.stringify(v)));
+    dataState.value.increment(v);
 }, {deep: true});
+
 watch(perms, () => emit('perms', perms.value));
 
 const ableToSave = computed(() => {
     if (saveDisabled.value) return false;
 
+    if (typeof props.saveValidator === 'function' && !props.saveValidator(item.value)) return false;
+
     return dataState.value.changed();
-})
+});
 watch(ableToSave, (v) => emit('modified-data', v));
 
 // Fetch item
-if (props.readResource) fetchItem();
+if (props.readResource && !props.isCreate) fetchItem();
+else if (props.isCreate) {
+    httpSuccessRead.value = true;
+    editMode.value = true;
+    isLoading.value = false;
+}
 
 const onDrop = ($event: PointerEvent, r: HTTPResponse) => {
         isLoading.value = false;
@@ -140,7 +160,15 @@ const onDrop = ($event: PointerEvent, r: HTTPResponse) => {
             return;
         }
         showStoreMessage.value = true;
-        let emits: 'create' | 'update' = props.saveIsCreate ? 'create' : 'update';
+        let emits: 'create' | 'update' = props.isCreate ? 'create' : 'update';
+        if (!props.isCreate) {
+            dataState.value.turnStoredIntoOriginal();
+        }
+
+        if (r.autoReloadId) {
+            props.readData['id'] = r.autoReloadId;
+            fetchItem();
+        }
         emit(emits, r)
 
     },
@@ -179,6 +207,7 @@ defineExpose({
             <lkt-button
                 :ref="(el:any) => dropButton = el"
                 v-show="!isLoading && editMode && httpSuccessRead"
+                v-if="!isCreate"
                 palette="danger"
                 v-bind:disabled="dropDisabled"
                 v-bind:confirm-modal="dropConfirm"
@@ -209,7 +238,8 @@ defineExpose({
             </lkt-button>
 
             <lkt-field-switch
-                v-show="!isLoading && httpSuccessRead" v-model="editMode" :label="editModeText"></lkt-field-switch>
+                v-show="!isLoading && httpSuccessRead && !isCreate" v-model="editMode"
+                :label="editModeText"></lkt-field-switch>
         </div>
         <div class="lkt-item-crud_content" v-if="!isLoading">
             <div v-if="httpSuccessRead" class="lkt-grid-1">