lkt-item-crud 1.0.3 → 1.0.5

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

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

package/dist/style.css

@@ -0,0 +1 @@
+.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/index.d.ts

@@ -1,4 +1,5 @@
 import { App } from "vue";
+import "./../lkt-item-crud.css";
 declare const LktItemCrud: {
     install: (app: App, options?: {}) => void;
 };

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;
@@ -93,11 +98,12 @@ declare const _default: {
         onRead?: ((...args: any[]) => any) | undefined;
         onCreate?: ((...args: any[]) => any) | undefined;
         onPerms?: ((...args: any[]) => any) | undefined;
+        "onModified-data"?: ((...args: any[]) => any) | undefined;
     }, {
         doDrop: () => void;
         doRefresh: () => Promise<void>;
         doSave: () => void;
-    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("error" | "drop" | "update" | "update:modelValue" | "read" | "create" | "perms")[], import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("error" | "drop" | "update" | "update:modelValue" | "read" | "create" | "perms" | "modified-data")[], import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
         modelValue: {
             type: ObjectConstructor;
             required: false;
@@ -155,7 +161,7 @@ declare const _default: {
             required: false;
             default: () => {};
         };
-        saveIsCreate: {
+        isCreate: {
             type: BooleanConstructor;
             default: boolean;
         };
@@ -183,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;
@@ -191,6 +202,7 @@ declare const _default: {
         onRead?: ((...args: any[]) => any) | undefined;
         onCreate?: ((...args: any[]) => any) | undefined;
         onPerms?: ((...args: any[]) => any) | undefined;
+        "onModified-data"?: ((...args: any[]) => any) | undefined;
     }, {
         title: string;
         modelValue: Record<string, any>;
@@ -201,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: {};
@@ -273,7 +286,7 @@ declare const _default: {
             required: false;
             default: () => {};
         };
-        saveIsCreate: {
+        isCreate: {
             type: BooleanConstructor;
             default: boolean;
         };
@@ -301,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;
@@ -309,6 +327,7 @@ declare const _default: {
         onRead?: ((...args: any[]) => any) | undefined;
         onCreate?: ((...args: any[]) => any) | undefined;
         onPerms?: ((...args: any[]) => any) | undefined;
+        "onModified-data"?: ((...args: any[]) => any) | undefined;
     }, {
         doDrop: () => void;
         doRefresh: () => Promise<void>;
@@ -323,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;
@@ -392,7 +412,7 @@ declare const _default: {
         required: false;
         default: () => {};
     };
-    saveIsCreate: {
+    isCreate: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -420,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;
@@ -428,11 +453,12 @@ declare const _default: {
     onRead?: ((...args: any[]) => any) | undefined;
     onCreate?: ((...args: any[]) => any) | undefined;
     onPerms?: ((...args: any[]) => any) | undefined;
+    "onModified-data"?: ((...args: any[]) => any) | undefined;
 }, {
     doDrop: () => void;
     doRefresh: () => Promise<void>;
     doSave: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("error" | "drop" | "update" | "update:modelValue" | "read" | "create" | "perms")[], "error" | "drop" | "update" | "update:modelValue" | "read" | "create" | "perms", {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("error" | "drop" | "update" | "update:modelValue" | "read" | "create" | "perms" | "modified-data")[], "error" | "drop" | "update" | "update:modelValue" | "read" | "create" | "perms" | "modified-data", {
     title: string;
     modelValue: Record<string, any>;
     editModeText: string;
@@ -442,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.3",
+  "version": "1.0.5",
   "description": "",
   "main": "src/index.ts",
   "module": "src/index.ts",
@@ -60,6 +60,7 @@
   },
   "dependencies": {
     "lkt-button": "^1.0.14",
+    "lkt-data-state": "^1.0.9",
     "lkt-events": "^1.0.2",
     "lkt-field-switch": "^1.0.0",
     "lkt-http-client": "^1.0.12",

package/src/index.ts

@@ -1,6 +1,7 @@
 import {App} from "vue";
 import {default as itemCrud} from "./lib-components/LktItemCrud.vue";
 
+import "./../lkt-item-crud.css";
 
 const LktItemCrud = {
     install: (app: App, options = {}) => {

package/src/lib-components/LktItemCrud.vue

@@ -5,6 +5,7 @@ export default {name: "LktItemCrud", inheritAttrs: false}
 <script setup lang="ts">
 import {ref, watch, useSlots, computed} from "vue";
 import {httpCall, HTTPResponse} from "lkt-http-client";
+import {DataState} from "lkt-data-state";
 
 const props = defineProps({
     modelValue: {type: Object, required: false, default: () => ({})},
@@ -24,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: ''},
@@ -32,11 +33,13 @@ 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();
 
-const emit = defineEmits(['update:modelValue', 'read', 'create', 'update', 'drop', 'perms', 'error']);
+const emit = defineEmits(['update:modelValue', 'read', 'create', 'update', 'drop', 'perms', 'error', 'modified-data']);
 
 let basePerms: string[] = [];
 
@@ -48,26 +51,26 @@ const isLoading = ref(true),
     showStoreMessage = ref(false),
     httpStatus = ref(200),
     saveButton = ref(null),
-    dropButton = ref(null);
-
+    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
+        return props.isCreate
             ? props.createData
             : props.updateData;
     }),
     saveDisabled = computed(() => {
-        return props.saveIsCreate
+        return props.isCreate
             ? props.createDisabled
             : props.updateDisabled;
     })
@@ -75,7 +78,8 @@ const saveConfirm = computed(() => {
 const fetchItem = async () => {
     isLoading.value = true;
     httpStatus.value = -1;
-    return await httpCall(props.readResource, props.readData).then((r) => {
+    try {
+        const r = await httpCall(props.readResource, props.readData);
         isLoading.value = false;
         if (!r.success) {
             httpSuccessRead.value = false;
@@ -86,8 +90,15 @@ const fetchItem = async () => {
         httpSuccessRead.value = true;
         item.value = r.data;
         perms.value = r.perms;
+        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(() => {
@@ -96,12 +107,34 @@ const displayHeader = computed(() => {
     return props.title || !!slots['post-title'];
 })
 
-watch(() => props.modelValue, v => item.value = v);
-watch(item, () => emit('update:modelValue', item.value));
+watch(() => props.modelValue, v => {
+    item.value = v;
+    dataState.value.increment(v);
+}, {deep: true});
+
+watch(item, (v) => {
+    emit('update:modelValue', item.value);
+    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;
@@ -124,7 +157,10 @@ 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();
+        }
         emit(emits, r)
 
     },
@@ -163,6 +199,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"
@@ -180,7 +217,7 @@ defineExpose({
                 :ref="(el:any) => saveButton = el"
                 v-show="!isLoading && editMode && httpSuccessRead"
                 palette="success"
-                v-bind:disabled="saveDisabled"
+                v-bind:disabled="!ableToSave"
                 v-bind:confirm-modal="saveConfirm"
                 v-bind:resource="saveResource"
                 v-bind:resource-data="saveData"
@@ -193,12 +230,14 @@ 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">
                 <lkt-http-info :code="httpStatus" v-if="showStoreMessage" quick
-                               :palette="httpStatus === 200 ? 'success' : 'danger'" can-close v-on:close="showStoreMessage = false"></lkt-http-info>
+                               :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>
             </div>
             <lkt-http-info :code="httpStatus" v-else></lkt-http-info>