lkt-item-crud 1.0.3 → 1.0.4

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 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";
+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" }, oe = { class: "lkt-item-crud-buttons" }, re = { key: 1 }, se = { key: 1 }, de = {
   key: 1,
   class: "lkt-item-crud_content"
-}, re = {
+}, ne = {
   key: 0,
   class: "lkt-grid-1"
-}, se = { name: "LktItemCrud", inheritAttrs: !1 }, de = /* @__PURE__ */ Q({
-  ...se,
+}, ie = { name: "LktItemCrud", inheritAttrs: !1 }, ce = /* @__PURE__ */ Y({
+  ...ie,
   props: {
     modelValue: { type: Object, required: !1, default: () => ({}) },
     title: { type: String, default: "" },
@@ -33,141 +34,148 @@ const Y = { class: "lkt-item-crud" }, Z = {
     updateDisabled: { type: Boolean, default: !1 },
     dropDisabled: { type: Boolean, default: !1 }
   },
-  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: 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);
         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) => {
+      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);
         return;
       }
       v.value = !0, s("drop", l);
-    }, G = (t, l) => {
+    }, Q = (e, l) => {
       if (a.value = !1, n.value = l.httpStatus, !l.success) {
         v.value = !0, s("error", l.httpStatus);
         return;
       }
       v.value = !0;
-      let h = e.saveIsCreate ? "create" : "update";
+      let h = t.saveIsCreate ? "create" : "update";
       s(h, l);
-    }, $ = () => {
+    }, M = () => {
       a.value = !0, n.value = -1;
-    }, x = () => {
+    }, T = () => {
       a.value = !1;
     };
     return w({
       doDrop: () => {
         y.value && typeof y.value.click == "function" && y.value.click();
       },
-      doRefresh: M,
+      doRefresh: L,
       doSave: () => {
         k.value && typeof k.value.click == "function" && k.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,
+    }), (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,
               loading: a.value
             })
           ])
-        ])) : C("", !0),
-        g(V("div", ae, [
-          g(I(h, {
-            ref: (p) => y.value = p,
+        ])) : D("", !0),
+        _(I("div", oe, [
+          _(V(h, {
+            ref: (f) => y.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: M,
+            onLoaded: T,
+            onClick: K
           }, {
-            default: j(() => [
-              O(_)["button-drop"] ? b(t.$slots, "button-drop", {
+            default: x(() => [
+              j(R)["button-drop"] ? C(e.$slots, "button-drop", {
                 key: 0,
-                item: d.value,
+                item: o.value,
                 editMode: i.value
-              }) : (r(), f("span", le, q(o.dropText), 1))
+              }) : (d(), m("span", re, N(u.dropText), 1))
             ]),
             _: 3
           }, 8, ["disabled", "confirm-modal", "resource", "resource-data"]), [
-            [D, !a.value && i.value && c.value]
+            [O, !a.value && i.value && c.value]
           ]),
-          g(I(h, {
-            ref: (p) => k.value = p,
+          _(V(h, {
+            ref: (f) => k.value = f,
             palette: "success",
-            disabled: U.value,
-            "confirm-modal": A.value,
-            resource: H.value,
-            "resource-data": P.value,
-            onLoading: $,
-            onLoaded: x,
-            onClick: G
+            disabled: !J.value,
+            "confirm-modal": P.value,
+            resource: U.value,
+            "resource-data": z.value,
+            onLoading: M,
+            onLoaded: T,
+            onClick: Q
           }, {
-            default: j(() => [
-              O(_)["button-save"] ? b(t.$slots, "button-save", {
+            default: x(() => [
+              j(R)["button-save"] ? C(e.$slots, "button-save", {
                 key: 0,
-                item: d.value,
+                item: o.value,
                 editMode: i.value
-              }) : (r(), f("span", oe, q(o.saveText), 1))
+              }) : (d(), m("span", se, N(u.saveText), 1))
             ]),
             _: 3
           }, 8, ["disabled", "confirm-modal", "resource", "resource-data"]), [
-            [D, !a.value && i.value && c.value]
+            [O, !a.value && i.value && c.value]
           ]),
-          g(I(J, {
+          _(V(W, {
             modelValue: i.value,
-            "onUpdate:modelValue": l[0] || (l[0] = (p) => i.value = p),
-            label: o.editModeText
+            "onUpdate:modelValue": l[0] || (l[0] = (f) => i.value = f),
+            label: u.editModeText
           }, null, 8, ["modelValue", "label"]), [
-            [D, !a.value && c.value]
+            [O, !a.value && c.value]
           ])
         ], 512), [
-          [D, c.value]
+          [O, c.value]
         ]),
-        a.value ? C("", !0) : (r(), f("div", ue, [
-          c.value ? (r(), f("div", re, [
-            v.value ? (r(), L(T, {
+        a.value ? D("", !0) : (d(), m("div", de, [
+          c.value ? (d(), m("div", ne, [
+            v.value ? (d(), q($, {
               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"])) : D("", !0),
+            C(e.$slots, "item", {
+              item: o.value,
               loading: a.value,
               editMode: i.value
             })
-          ])) : (r(), L(T, {
+          ])) : (d(), q($, {
             key: 1,
             code: n.value
           }, null, 8, ["code"]))
         ])),
-        a.value ? (r(), L(K, { key: 2 })) : C("", !0)
+        a.value ? (d(), q(X, { key: 2 })) : D("", !0)
       ]);
     };
   }
-}), pe = {
-  install: (o, w = {}) => {
-    o.component("LktItemCrud", de);
+});
+const ye = {
+  install: (u, w = {}) => {
+    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,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)}}});

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:0;display:flex;align-items:center;gap:var(--gap)}.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

@@ -93,11 +93,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;
@@ -191,6 +192,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>;
@@ -309,6 +311,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>;
@@ -428,11 +431,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-item-crud",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "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: () => ({})},
@@ -36,7 +37,7 @@ const props = defineProps({
 
 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[] = [];
 
@@ -50,6 +51,7 @@ const isLoading = ref(true),
     saveButton = ref(null),
     dropButton = ref(null);
 
+const dataState = ref(new DataState(JSON.parse(JSON.stringify(item.value))));
 
 const saveConfirm = computed(() => {
         return props.saveIsCreate
@@ -86,6 +88,7 @@ const fetchItem = async () => {
         httpSuccessRead.value = true;
         item.value = r.data;
         perms.value = r.perms;
+        dataState.value = new DataState(JSON.parse(JSON.stringify(item.value)));
         emit('read', r);
     });
 }
@@ -96,10 +99,23 @@ 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(JSON.parse(JSON.stringify(v)));
+}, {deep: true});
+watch(item, (v) => {
+    emit('update:modelValue', item.value);
+    dataState.value.increment(JSON.parse(JSON.stringify(v)));
+}, {deep: true});
 watch(perms, () => emit('perms', perms.value));
 
+const ableToSave = computed(() => {
+    if (saveDisabled.value) return false;
+
+    return dataState.value.changed();
+})
+watch(ableToSave, (v) => emit('modified-data', v));
+
 // Fetch item
 if (props.readResource) fetchItem();
 
@@ -180,7 +196,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"
@@ -198,7 +214,8 @@ defineExpose({
         <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>