lkt-item-crud 1.0.1 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/lkt-item-crud.es.js +159 -55
  2. package/dist/lkt-item-crud.umd.js +1 -1
  3. package/dist/style.css +1 -0
  4. package/dist/types/index.d.ts +1 -0
  5. package/dist/types/lib-components/LktItemCrud.vue.d.ts +311 -42
  6. package/lkt-item-crud.css +12 -0
  7. package/package.json +5 -1
  8. package/src/index.ts +1 -0
  9. package/src/lib-components/LktItemCrud.vue +172 -50
package/dist/lkt-item-crud.es.js CHANGED
@@ -1,77 +1,181 @@
1
- import { defineComponent as q, useSlots as w, ref as p, computed as I, watch as m, resolveComponent as B, openBlock as c, createElementBlock as f, createElementVNode as h, toDisplayString as D, renderSlot as k, createCommentVNode as v, createBlock as L } from "vue";
2
- import { httpCall as d } from "lkt-http-client";
3
- const b = { class: "lkt-item-crud" }, j = {
1
+ 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";
2
+ import { httpCall as ee } from "lkt-http-client";
3
+ import { DataState as E } from "lkt-data-state";
4
+ const te = { class: "lkt-item-crud" }, ae = {
4
5
  key: 0,
5
6
  class: "lkt-item-crud_header"
6
- }, E = { class: "lkt-item-crud_header-title" }, N = { class: "lkt-item-crud_header-slot" }, O = {
7
+ }, 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 = {
7
8
  key: 1,
8
9
  class: "lkt-item-crud_content"
9
- }, $ = { name: "LktItemCrud", inheritAttrs: !1 }, x = /* @__PURE__ */ q({
10
- ...$,
10
+ }, ne = {
11
+ key: 0,
12
+ class: "lkt-grid-1"
13
+ }, ie = { name: "LktItemCrud", inheritAttrs: !1 }, ce = /* @__PURE__ */ Y({
14
+ ...ie,
11
15
  props: {
12
16
  modelValue: { type: Object, required: !1, default: () => ({}) },
17
+ title: { type: String, default: "" },
18
+ editModeText: { type: String, default: "Edition Mode" },
19
+ saveText: { type: String, default: "Save" },
20
+ dropText: { type: String, default: "Delete" },
13
21
  readResource: { type: String, required: !0 },
14
- readData: { type: Object, required: !1, default: () => ({}) },
15
22
  createResource: { type: String, required: !1 },
16
23
  updateResource: { type: String, required: !1 },
17
24
  dropResource: { type: String, required: !1 },
18
- title: { type: String, default: "" }
25
+ readData: { type: Object, required: !1, default: () => ({}) },
26
+ createData: { type: Object, required: !1, default: () => ({}) },
27
+ updateData: { type: Object, required: !1, default: () => ({}) },
28
+ dropData: { type: Object, required: !1, default: () => ({}) },
29
+ saveIsCreate: { type: Boolean, default: !1 },
30
+ createConfirm: { type: String, default: "" },
31
+ updateConfirm: { type: String, default: "" },
32
+ dropConfirm: { type: String, default: "" },
33
+ createDisabled: { type: Boolean, default: !1 },
34
+ updateDisabled: { type: Boolean, default: !1 },
35
+ dropDisabled: { type: Boolean, default: !1 }
19
36
  },
20
- emits: ["update:modelValue", "read", "create", "update", "drop", "perms"],
21
- setup(u, { expose: _, emit: y }) {
22
- const r = u, g = w(), s = y, t = p(!0), l = p(r.modelValue), n = p([]), i = async () => (t.value = !0, await d(r.readResource, r.readData).then((e) => {
23
- t.value = !1, l.value = e.data, n.value = e.perms, s("read", e);
24
- })), R = I(() => t.value ? !1 : r.title || !!g["post-title"]);
25
- m(() => r.modelValue, (e) => l.value = e), m(l, () => s("update:modelValue", l.value)), m(n, () => s("perms", n.value));
26
- const S = async (e) => {
27
- const o = r.createResource;
28
- return t.value = !0, await d(o, { ...e }).then((a) => {
29
- t.value = !1, s("create", a);
30
- });
31
- }, C = async (e) => {
32
- const o = r.updateResource;
33
- return t.value = !0, await d(o, { ...e }).then((a) => {
34
- t.value = !1, s("update", a);
35
- });
36
- }, V = async (e) => {
37
- const o = r.dropResource;
38
- return t.value = !0, await d(o, { ...e }).then((a) => {
39
- t.value = !1, s("drop", a);
40
- });
37
+ emits: ["update:modelValue", "read", "create", "update", "drop", "perms", "error", "modified-data"],
38
+ setup(u, { expose: w, emit: A }) {
39
+ const t = u, R = Z(), s = A;
40
+ let H = [];
41
+ 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) => {
42
+ if (a.value = !1, !e.success) {
43
+ c.value = !1, n.value = e.httpStatus, s("error", e.httpStatus);
44
+ return;
45
+ }
46
+ c.value = !0, o.value = e.data, B.value = e.perms, S.value = new E(JSON.parse(JSON.stringify(o.value))), s("read", e);
47
+ })), G = p(() => a.value ? !1 : t.title || !!R["post-title"]);
48
+ b(() => t.modelValue, (e) => {
49
+ o.value = e, S.value.increment(JSON.parse(JSON.stringify(e)));
50
+ }, { deep: !0 }), b(o, (e) => {
51
+ s("update:modelValue", o.value), S.value.increment(JSON.parse(JSON.stringify(e)));
52
+ }, { deep: !0 }), b(B, () => s("perms", B.value));
53
+ const J = p(() => F.value ? !1 : S.value.changed());
54
+ b(J, (e) => s("modified-data", e)), t.readResource && L();
55
+ const K = (e, l) => {
56
+ if (a.value = !1, n.value = l.httpStatus, !l.success) {
57
+ v.value = !0, s("error", l.httpStatus);
58
+ return;
59
+ }
60
+ v.value = !0, s("drop", l);
61
+ }, Q = (e, l) => {
62
+ if (a.value = !1, n.value = l.httpStatus, !l.success) {
63
+ v.value = !0, s("error", l.httpStatus);
64
+ return;
65
+ }
66
+ v.value = !0;
67
+ let h = t.saveIsCreate ? "create" : "update";
68
+ s(h, l);
69
+ }, M = () => {
70
+ a.value = !0, n.value = -1;
71
+ }, T = () => {
72
+ a.value = !1;
41
73
  };
42
- return r.readResource && i(), _({
43
- fetchItem: i,
44
- create: S,
45
- update: C,
46
- drop: V,
47
- refresh: i
48
- }), (e, o) => {
49
- const a = B("lkt-loader");
50
- return c(), f("article", b, [
51
- R.value ? (c(), f("header", j, [
52
- h("h1", E, D(u.title), 1),
53
- h("div", N, [
54
- k(e.$slots, "post-title", {
55
- item: l.value,
56
- loading: t.value
74
+ return w({
75
+ doDrop: () => {
76
+ y.value && typeof y.value.click == "function" && y.value.click();
77
+ },
78
+ doRefresh: L,
79
+ doSave: () => {
80
+ k.value && typeof k.value.click == "function" && k.value.click();
81
+ }
82
+ }), (e, l) => {
83
+ const h = g("lkt-button"), W = g("lkt-field-switch"), $ = g("lkt-http-info"), X = g("lkt-loader");
84
+ return d(), m("article", te, [
85
+ G.value ? (d(), m("header", ae, [
86
+ I("h1", le, N(u.title), 1),
87
+ I("div", ue, [
88
+ C(e.$slots, "post-title", {
89
+ item: o.value,
90
+ loading: a.value
57
91
  })
58
92
  ])
59
- ])) : v("", !0),
60
- t.value ? v("", !0) : (c(), f("div", O, [
61
- k(e.$slots, "item", {
62
- item: l.value,
63
- loading: t.value
64
- })
93
+ ])) : D("", !0),
94
+ _(I("div", oe, [
95
+ _(V(h, {
96
+ ref: (f) => y.value = f,
97
+ palette: "danger",
98
+ disabled: u.dropDisabled,
99
+ "confirm-modal": u.dropConfirm,
100
+ resource: u.dropResource,
101
+ "resource-data": u.dropData,
102
+ onLoading: M,
103
+ onLoaded: T,
104
+ onClick: K
105
+ }, {
106
+ default: x(() => [
107
+ j(R)["button-drop"] ? C(e.$slots, "button-drop", {
108
+ key: 0,
109
+ item: o.value,
110
+ editMode: i.value
111
+ }) : (d(), m("span", re, N(u.dropText), 1))
112
+ ]),
113
+ _: 3
114
+ }, 8, ["disabled", "confirm-modal", "resource", "resource-data"]), [
115
+ [O, !a.value && i.value && c.value]
116
+ ]),
117
+ _(V(h, {
118
+ ref: (f) => k.value = f,
119
+ palette: "success",
120
+ disabled: !J.value,
121
+ "confirm-modal": P.value,
122
+ resource: U.value,
123
+ "resource-data": z.value,
124
+ onLoading: M,
125
+ onLoaded: T,
126
+ onClick: Q
127
+ }, {
128
+ default: x(() => [
129
+ j(R)["button-save"] ? C(e.$slots, "button-save", {
130
+ key: 0,
131
+ item: o.value,
132
+ editMode: i.value
133
+ }) : (d(), m("span", se, N(u.saveText), 1))
134
+ ]),
135
+ _: 3
136
+ }, 8, ["disabled", "confirm-modal", "resource", "resource-data"]), [
137
+ [O, !a.value && i.value && c.value]
138
+ ]),
139
+ _(V(W, {
140
+ modelValue: i.value,
141
+ "onUpdate:modelValue": l[0] || (l[0] = (f) => i.value = f),
142
+ label: u.editModeText
143
+ }, null, 8, ["modelValue", "label"]), [
144
+ [O, !a.value && c.value]
145
+ ])
146
+ ], 512), [
147
+ [O, c.value]
148
+ ]),
149
+ a.value ? D("", !0) : (d(), m("div", de, [
150
+ c.value ? (d(), m("div", ne, [
151
+ v.value ? (d(), q($, {
152
+ key: 0,
153
+ code: n.value,
154
+ quick: "",
155
+ palette: n.value === 200 ? "success" : "danger",
156
+ "can-close": "",
157
+ onClose: l[1] || (l[1] = (f) => v.value = !1)
158
+ }, null, 8, ["code", "palette"])) : D("", !0),
159
+ C(e.$slots, "item", {
160
+ item: o.value,
161
+ loading: a.value,
162
+ editMode: i.value
163
+ })
164
+ ])) : (d(), q($, {
165
+ key: 1,
166
+ code: n.value
167
+ }, null, 8, ["code"]))
65
168
  ])),
66
- t.value ? (c(), L(a, { key: 2 })) : v("", !0)
169
+ a.value ? (d(), q(X, { key: 2 })) : D("", !0)
67
170
  ]);
68
171
  };
69
172
  }
70
- }), z = {
71
- install: (u, _ = {}) => {
72
- u.component("LktItemCrud", x);
173
+ });
174
+ const ye = {
175
+ install: (u, w = {}) => {
176
+ u.component("LktItemCrud", ce);
73
177
  }
74
178
  };
75
179
  export {
76
- z as default
180
+ ye as default
77
181
  };
package/dist/lkt-item-crud.umd.js CHANGED
@@ -1 +1 @@
1
- (function(e,o){typeof exports=="object"&&typeof module<"u"?module.exports=o(require("vue"),require("lkt-http-client")):typeof define=="function"&&define.amd?define(["vue","lkt-http-client"],o):(e=typeof globalThis<"u"?globalThis:e||self,e.LktItemCrud=o(e.Vue,e.LktHttpClient))})(this,function(e,o){"use strict";const m={class:"lkt-item-crud"},f={key:0,class:"lkt-item-crud_header"},h={class:"lkt-item-crud_header-title"},k={class:"lkt-item-crud_header-slot"},_={key:1,class:"lkt-item-crud_content"},y={name:"LktItemCrud",inheritAttrs:!1},C=e.defineComponent({...y,props:{modelValue:{type:Object,required:!1,default:()=>({})},readResource:{type:String,required:!0},readData:{type:Object,required:!1,default:()=>({})},createResource:{type:String,required:!1},updateResource:{type:String,required:!1},dropResource:{type:String,required:!1},title:{type:String,default:""}},emits:["update:modelValue","read","create","update","drop","perms"],setup(d,{expose:p,emit:V}){const a=d,R=e.useSlots(),s=V,r=e.ref(!0),n=e.ref(a.modelValue),u=e.ref([]),i=async()=>(r.value=!0,await o.httpCall(a.readResource,a.readData).then(t=>{r.value=!1,n.value=t.data,u.value=t.perms,s("read",t)})),S=e.computed(()=>r.value?!1:a.title||!!R["post-title"]);e.watch(()=>a.modelValue,t=>n.value=t),e.watch(n,()=>s("update:modelValue",n.value)),e.watch(u,()=>s("perms",u.value));const q=async t=>{const c=a.createResource;return r.value=!0,await o.httpCall(c,{...t}).then(l=>{r.value=!1,s("create",l)})},B=async t=>{const c=a.updateResource;return r.value=!0,await o.httpCall(c,{...t}).then(l=>{r.value=!1,s("update",l)})},g=async t=>{const c=a.dropResource;return r.value=!0,await o.httpCall(c,{...t}).then(l=>{r.value=!1,s("drop",l)})};return a.readResource&&i(),p({fetchItem:i,create:q,update:B,drop:g,refresh:i}),(t,c)=>{const l=e.resolveComponent("lkt-loader");return e.openBlock(),e.createElementBlock("article",m,[S.value?(e.openBlock(),e.createElementBlock("header",f,[e.createElementVNode("h1",h,e.toDisplayString(d.title),1),e.createElementVNode("div",k,[e.renderSlot(t.$slots,"post-title",{item:n.value,loading:r.value})])])):e.createCommentVNode("",!0),r.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",_,[e.renderSlot(t.$slots,"item",{item:n.value,loading:r.value})])),r.value?(e.openBlock(),e.createBlock(l,{key:2})):e.createCommentVNode("",!0)])}}});return{install:(d,p={})=>{d.component("LktItemCrud",C)}}});
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)}}});
package/dist/style.css ADDED
@@ -0,0 +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}
package/dist/types/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { App } from "vue";
2
+ import "./../lkt-item-crud.css";
2
3
  declare const LktItemCrud: {
3
4
  install: (app: App, options?: {}) => void;
4
5
  };
package/dist/types/lib-components/LktItemCrud.vue.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import { LktObject } from "lkt-ts-interfaces";
2
1
  declare const _default: {
3
2
  new (...args: any[]): import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
4
3
  modelValue: {
@@ -6,15 +5,26 @@ declare const _default: {
6
5
  required: false;
7
6
  default: () => {};
8
7
  };
8
+ title: {
9
+ type: StringConstructor;
10
+ default: string;
11
+ };
12
+ editModeText: {
13
+ type: StringConstructor;
14
+ default: string;
15
+ };
16
+ saveText: {
17
+ type: StringConstructor;
18
+ default: string;
19
+ };
20
+ dropText: {
21
+ type: StringConstructor;
22
+ default: string;
23
+ };
9
24
  readResource: {
10
25
  type: StringConstructor;
11
26
  required: true;
12
27
  };
13
- readData: {
14
- type: ObjectConstructor;
15
- required: false;
16
- default: () => {};
17
- };
18
28
  createResource: {
19
29
  type: StringConstructor;
20
30
  required: false;
@@ -27,38 +37,93 @@ declare const _default: {
27
37
  type: StringConstructor;
28
38
  required: false;
29
39
  };
30
- title: {
40
+ readData: {
41
+ type: ObjectConstructor;
42
+ required: false;
43
+ default: () => {};
44
+ };
45
+ createData: {
46
+ type: ObjectConstructor;
47
+ required: false;
48
+ default: () => {};
49
+ };
50
+ updateData: {
51
+ type: ObjectConstructor;
52
+ required: false;
53
+ default: () => {};
54
+ };
55
+ dropData: {
56
+ type: ObjectConstructor;
57
+ required: false;
58
+ default: () => {};
59
+ };
60
+ saveIsCreate: {
61
+ type: BooleanConstructor;
62
+ default: boolean;
63
+ };
64
+ createConfirm: {
65
+ type: StringConstructor;
66
+ default: string;
67
+ };
68
+ updateConfirm: {
31
69
  type: StringConstructor;
32
70
  default: string;
33
71
  };
72
+ dropConfirm: {
73
+ type: StringConstructor;
74
+ default: string;
75
+ };
76
+ createDisabled: {
77
+ type: BooleanConstructor;
78
+ default: boolean;
79
+ };
80
+ updateDisabled: {
81
+ type: BooleanConstructor;
82
+ default: boolean;
83
+ };
84
+ dropDisabled: {
85
+ type: BooleanConstructor;
86
+ default: boolean;
87
+ };
34
88
  }>> & {
89
+ onError?: ((...args: any[]) => any) | undefined;
35
90
  onDrop?: ((...args: any[]) => any) | undefined;
36
91
  onUpdate?: ((...args: any[]) => any) | undefined;
37
92
  "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
38
93
  onRead?: ((...args: any[]) => any) | undefined;
39
94
  onCreate?: ((...args: any[]) => any) | undefined;
40
95
  onPerms?: ((...args: any[]) => any) | undefined;
96
+ "onModified-data"?: ((...args: any[]) => any) | undefined;
41
97
  }, {
42
- fetchItem: () => Promise<void>;
43
- create: (data: LktObject) => Promise<void>;
44
- update: (data: LktObject) => Promise<void>;
45
- drop: (data: LktObject) => Promise<void>;
46
- refresh: () => Promise<void>;
47
- }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("drop" | "update" | "update:modelValue" | "read" | "create" | "perms")[], import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
98
+ doDrop: () => void;
99
+ doRefresh: () => Promise<void>;
100
+ doSave: () => void;
101
+ }, 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<{
48
102
  modelValue: {
49
103
  type: ObjectConstructor;
50
104
  required: false;
51
105
  default: () => {};
52
106
  };
107
+ title: {
108
+ type: StringConstructor;
109
+ default: string;
110
+ };
111
+ editModeText: {
112
+ type: StringConstructor;
113
+ default: string;
114
+ };
115
+ saveText: {
116
+ type: StringConstructor;
117
+ default: string;
118
+ };
119
+ dropText: {
120
+ type: StringConstructor;
121
+ default: string;
122
+ };
53
123
  readResource: {
54
124
  type: StringConstructor;
55
125
  required: true;
56
126
  };
57
- readData: {
58
- type: ObjectConstructor;
59
- required: false;
60
- default: () => {};
61
- };
62
127
  createResource: {
63
128
  type: StringConstructor;
64
129
  required: false;
@@ -71,21 +136,80 @@ declare const _default: {
71
136
  type: StringConstructor;
72
137
  required: false;
73
138
  };
74
- title: {
139
+ readData: {
140
+ type: ObjectConstructor;
141
+ required: false;
142
+ default: () => {};
143
+ };
144
+ createData: {
145
+ type: ObjectConstructor;
146
+ required: false;
147
+ default: () => {};
148
+ };
149
+ updateData: {
150
+ type: ObjectConstructor;
151
+ required: false;
152
+ default: () => {};
153
+ };
154
+ dropData: {
155
+ type: ObjectConstructor;
156
+ required: false;
157
+ default: () => {};
158
+ };
159
+ saveIsCreate: {
160
+ type: BooleanConstructor;
161
+ default: boolean;
162
+ };
163
+ createConfirm: {
75
164
  type: StringConstructor;
76
165
  default: string;
77
166
  };
167
+ updateConfirm: {
168
+ type: StringConstructor;
169
+ default: string;
170
+ };
171
+ dropConfirm: {
172
+ type: StringConstructor;
173
+ default: string;
174
+ };
175
+ createDisabled: {
176
+ type: BooleanConstructor;
177
+ default: boolean;
178
+ };
179
+ updateDisabled: {
180
+ type: BooleanConstructor;
181
+ default: boolean;
182
+ };
183
+ dropDisabled: {
184
+ type: BooleanConstructor;
185
+ default: boolean;
186
+ };
78
187
  }>> & {
188
+ onError?: ((...args: any[]) => any) | undefined;
79
189
  onDrop?: ((...args: any[]) => any) | undefined;
80
190
  onUpdate?: ((...args: any[]) => any) | undefined;
81
191
  "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
82
192
  onRead?: ((...args: any[]) => any) | undefined;
83
193
  onCreate?: ((...args: any[]) => any) | undefined;
84
194
  onPerms?: ((...args: any[]) => any) | undefined;
195
+ "onModified-data"?: ((...args: any[]) => any) | undefined;
85
196
  }, {
86
197
  title: string;
87
198
  modelValue: Record<string, any>;
199
+ editModeText: string;
200
+ saveText: string;
201
+ dropText: string;
88
202
  readData: Record<string, any>;
203
+ createData: Record<string, any>;
204
+ updateData: Record<string, any>;
205
+ dropData: Record<string, any>;
206
+ saveIsCreate: boolean;
207
+ createConfirm: string;
208
+ updateConfirm: string;
209
+ dropConfirm: string;
210
+ createDisabled: boolean;
211
+ updateDisabled: boolean;
212
+ dropDisabled: boolean;
89
213
  }, true, {}, {}, {
90
214
  P: {};
91
215
  B: {};
@@ -99,15 +223,26 @@ declare const _default: {
99
223
  required: false;
100
224
  default: () => {};
101
225
  };
226
+ title: {
227
+ type: StringConstructor;
228
+ default: string;
229
+ };
230
+ editModeText: {
231
+ type: StringConstructor;
232
+ default: string;
233
+ };
234
+ saveText: {
235
+ type: StringConstructor;
236
+ default: string;
237
+ };
238
+ dropText: {
239
+ type: StringConstructor;
240
+ default: string;
241
+ };
102
242
  readResource: {
103
243
  type: StringConstructor;
104
244
  required: true;
105
245
  };
106
- readData: {
107
- type: ObjectConstructor;
108
- required: false;
109
- default: () => {};
110
- };
111
246
  createResource: {
112
247
  type: StringConstructor;
113
248
  required: false;
@@ -120,27 +255,84 @@ declare const _default: {
120
255
  type: StringConstructor;
121
256
  required: false;
122
257
  };
123
- title: {
258
+ readData: {
259
+ type: ObjectConstructor;
260
+ required: false;
261
+ default: () => {};
262
+ };
263
+ createData: {
264
+ type: ObjectConstructor;
265
+ required: false;
266
+ default: () => {};
267
+ };
268
+ updateData: {
269
+ type: ObjectConstructor;
270
+ required: false;
271
+ default: () => {};
272
+ };
273
+ dropData: {
274
+ type: ObjectConstructor;
275
+ required: false;
276
+ default: () => {};
277
+ };
278
+ saveIsCreate: {
279
+ type: BooleanConstructor;
280
+ default: boolean;
281
+ };
282
+ createConfirm: {
124
283
  type: StringConstructor;
125
284
  default: string;
126
285
  };
286
+ updateConfirm: {
287
+ type: StringConstructor;
288
+ default: string;
289
+ };
290
+ dropConfirm: {
291
+ type: StringConstructor;
292
+ default: string;
293
+ };
294
+ createDisabled: {
295
+ type: BooleanConstructor;
296
+ default: boolean;
297
+ };
298
+ updateDisabled: {
299
+ type: BooleanConstructor;
300
+ default: boolean;
301
+ };
302
+ dropDisabled: {
303
+ type: BooleanConstructor;
304
+ default: boolean;
305
+ };
127
306
  }>> & {
307
+ onError?: ((...args: any[]) => any) | undefined;
128
308
  onDrop?: ((...args: any[]) => any) | undefined;
129
309
  onUpdate?: ((...args: any[]) => any) | undefined;
130
310
  "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
131
311
  onRead?: ((...args: any[]) => any) | undefined;
132
312
  onCreate?: ((...args: any[]) => any) | undefined;
133
313
  onPerms?: ((...args: any[]) => any) | undefined;
314
+ "onModified-data"?: ((...args: any[]) => any) | undefined;
134
315
  }, {
135
- fetchItem: () => Promise<void>;
136
- create: (data: LktObject) => Promise<void>;
137
- update: (data: LktObject) => Promise<void>;
138
- drop: (data: LktObject) => Promise<void>;
139
- refresh: () => Promise<void>;
316
+ doDrop: () => void;
317
+ doRefresh: () => Promise<void>;
318
+ doSave: () => void;
140
319
  }, {}, {}, {}, {
141
320
  title: string;
142
321
  modelValue: Record<string, any>;
322
+ editModeText: string;
323
+ saveText: string;
324
+ dropText: string;
143
325
  readData: Record<string, any>;
326
+ createData: Record<string, any>;
327
+ updateData: Record<string, any>;
328
+ dropData: Record<string, any>;
329
+ saveIsCreate: boolean;
330
+ createConfirm: string;
331
+ updateConfirm: string;
332
+ dropConfirm: string;
333
+ createDisabled: boolean;
334
+ updateDisabled: boolean;
335
+ dropDisabled: boolean;
144
336
  }>;
145
337
  __isFragment?: undefined;
146
338
  __isTeleport?: undefined;
@@ -151,15 +343,26 @@ declare const _default: {
151
343
  required: false;
152
344
  default: () => {};
153
345
  };
346
+ title: {
347
+ type: StringConstructor;
348
+ default: string;
349
+ };
350
+ editModeText: {
351
+ type: StringConstructor;
352
+ default: string;
353
+ };
354
+ saveText: {
355
+ type: StringConstructor;
356
+ default: string;
357
+ };
358
+ dropText: {
359
+ type: StringConstructor;
360
+ default: string;
361
+ };
154
362
  readResource: {
155
363
  type: StringConstructor;
156
364
  required: true;
157
365
  };
158
- readData: {
159
- type: ObjectConstructor;
160
- required: false;
161
- default: () => {};
162
- };
163
366
  createResource: {
164
367
  type: StringConstructor;
165
368
  required: false;
@@ -172,36 +375,102 @@ declare const _default: {
172
375
  type: StringConstructor;
173
376
  required: false;
174
377
  };
175
- title: {
378
+ readData: {
379
+ type: ObjectConstructor;
380
+ required: false;
381
+ default: () => {};
382
+ };
383
+ createData: {
384
+ type: ObjectConstructor;
385
+ required: false;
386
+ default: () => {};
387
+ };
388
+ updateData: {
389
+ type: ObjectConstructor;
390
+ required: false;
391
+ default: () => {};
392
+ };
393
+ dropData: {
394
+ type: ObjectConstructor;
395
+ required: false;
396
+ default: () => {};
397
+ };
398
+ saveIsCreate: {
399
+ type: BooleanConstructor;
400
+ default: boolean;
401
+ };
402
+ createConfirm: {
176
403
  type: StringConstructor;
177
404
  default: string;
178
405
  };
406
+ updateConfirm: {
407
+ type: StringConstructor;
408
+ default: string;
409
+ };
410
+ dropConfirm: {
411
+ type: StringConstructor;
412
+ default: string;
413
+ };
414
+ createDisabled: {
415
+ type: BooleanConstructor;
416
+ default: boolean;
417
+ };
418
+ updateDisabled: {
419
+ type: BooleanConstructor;
420
+ default: boolean;
421
+ };
422
+ dropDisabled: {
423
+ type: BooleanConstructor;
424
+ default: boolean;
425
+ };
179
426
  }>> & {
427
+ onError?: ((...args: any[]) => any) | undefined;
180
428
  onDrop?: ((...args: any[]) => any) | undefined;
181
429
  onUpdate?: ((...args: any[]) => any) | undefined;
182
430
  "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
183
431
  onRead?: ((...args: any[]) => any) | undefined;
184
432
  onCreate?: ((...args: any[]) => any) | undefined;
185
433
  onPerms?: ((...args: any[]) => any) | undefined;
434
+ "onModified-data"?: ((...args: any[]) => any) | undefined;
186
435
  }, {
187
- fetchItem: () => Promise<void>;
188
- create: (data: LktObject) => Promise<void>;
189
- update: (data: LktObject) => Promise<void>;
190
- drop: (data: LktObject) => Promise<void>;
191
- refresh: () => Promise<void>;
192
- }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("drop" | "update" | "update:modelValue" | "read" | "create" | "perms")[], "drop" | "update" | "update:modelValue" | "read" | "create" | "perms", {
436
+ doDrop: () => void;
437
+ doRefresh: () => Promise<void>;
438
+ doSave: () => void;
439
+ }, 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", {
193
440
  title: string;
194
441
  modelValue: Record<string, any>;
442
+ editModeText: string;
443
+ saveText: string;
444
+ dropText: string;
195
445
  readData: Record<string, any>;
446
+ createData: Record<string, any>;
447
+ updateData: Record<string, any>;
448
+ dropData: Record<string, any>;
449
+ saveIsCreate: boolean;
450
+ createConfirm: string;
451
+ updateConfirm: string;
452
+ dropConfirm: string;
453
+ createDisabled: boolean;
454
+ updateDisabled: boolean;
455
+ dropDisabled: boolean;
196
456
  }, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
197
457
  $slots: {
198
458
  'post-title': (_: {
199
459
  item: Record<string, any>;
200
460
  loading: boolean;
201
461
  }) => any;
462
+ 'button-drop': (_: {
463
+ item: Record<string, any>;
464
+ editMode: boolean;
465
+ }) => any;
466
+ 'button-save': (_: {
467
+ item: Record<string, any>;
468
+ editMode: boolean;
469
+ }) => any;
202
470
  item: (_: {
203
471
  item: Record<string, any>;
204
472
  loading: false;
473
+ editMode: boolean;
205
474
  }) => any;
206
475
  };
207
476
  });
package/lkt-item-crud.css CHANGED
@@ -8,4 +8,16 @@
8
8
  display: flex;
9
9
  flex-direction: column;
10
10
  gap: 15px;
11
+ }
12
+
13
+ .lkt-item-crud-buttons {
14
+ position: sticky;
15
+ top: 0;
16
+ display: flex;
17
+ align-items: center;
18
+ gap: var(--gap);
19
+ }
20
+
21
+ .lkt-item-crud-buttons > :last-child {
22
+ margin-left: auto;
11
23
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lkt-item-crud",
3
- "version": "1.0.1",
3
+ "version": "1.0.4",
4
4
  "description": "",
5
5
  "main": "src/index.ts",
6
6
  "module": "src/index.ts",
@@ -59,8 +59,12 @@
59
59
  "vue-tsc": "^0.38.9"
60
60
  },
61
61
  "dependencies": {
62
+ "lkt-button": "^1.0.14",
63
+ "lkt-data-state": "^1.0.9",
62
64
  "lkt-events": "^1.0.2",
65
+ "lkt-field-switch": "^1.0.0",
63
66
  "lkt-http-client": "^1.0.12",
67
+ "lkt-http-info": "^1.0.2",
64
68
  "lkt-loader": "^1.0.2",
65
69
  "lkt-string-tools": "^1.0.2",
66
70
  "lkt-ts-interfaces": "^1.0.2",
package/src/index.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import {App} from "vue";
2
2
  import {default as itemCrud} from "./lib-components/LktItemCrud.vue";
3
3
 
4
+ import "./../lkt-item-crud.css";
4
5
 
5
6
  const LktItemCrud = {
6
7
  install: (app: App, options = {}) => {
package/src/lib-components/LktItemCrud.vue CHANGED
@@ -4,86 +4,166 @@ export default {name: "LktItemCrud", inheritAttrs: false}
4
4
 
5
5
  <script setup lang="ts">
6
6
  import {ref, watch, useSlots, computed} from "vue";
7
- import {httpCall} from "lkt-http-client";
8
- import {LktObject} from "lkt-ts-interfaces";
7
+ import {httpCall, HTTPResponse} from "lkt-http-client";
8
+ import {DataState} from "lkt-data-state";
9
9
 
10
10
  const props = defineProps({
11
11
  modelValue: {type: Object, required: false, default: () => ({})},
12
+ title: {type: String, default: ''},
13
+
14
+ editModeText: {type: String, default: 'Edition Mode'},
15
+ saveText: {type: String, default: 'Save'},
16
+ dropText: {type: String, default: 'Delete'},
17
+
12
18
  readResource: {type: String, required: true},
13
- readData: {type: Object, required: false, default: () => ({})},
14
19
  createResource: {type: String, required: false},
15
20
  updateResource: {type: String, required: false},
16
21
  dropResource: {type: String, required: false},
17
- title: {type: String, default: ''},
22
+
23
+ readData: {type: Object, required: false, default: () => ({})},
24
+ createData: {type: Object, required: false, default: () => ({})},
25
+ updateData: {type: Object, required: false, default: () => ({})},
26
+ dropData: {type: Object, required: false, default: () => ({})},
27
+
28
+ saveIsCreate: {type: Boolean, default: false},
29
+ createConfirm: {type: String, default: ''},
30
+ updateConfirm: {type: String, default: ''},
31
+ dropConfirm: {type: String, default: ''},
32
+
33
+ createDisabled: {type: Boolean, default: false},
34
+ updateDisabled: {type: Boolean, default: false},
35
+ dropDisabled: {type: Boolean, default: false},
18
36
  });
19
37
 
20
38
  const slots = useSlots();
21
39
 
22
- const emit = defineEmits(['update:modelValue', 'read', 'create', 'update', 'drop', 'perms']);
40
+ const emit = defineEmits(['update:modelValue', 'read', 'create', 'update', 'drop', 'perms', 'error', 'modified-data']);
41
+
42
+ let basePerms: string[] = [];
23
43
 
24
- const loading = ref(true),
44
+ const isLoading = ref(true),
25
45
  item = ref(props.modelValue),
26
- perms = ref([]);
46
+ perms = ref(basePerms),
47
+ editMode = ref(false),
48
+ httpSuccessRead = ref(false),
49
+ showStoreMessage = ref(false),
50
+ httpStatus = ref(200),
51
+ saveButton = ref(null),
52
+ dropButton = ref(null);
53
+
54
+ const dataState = ref(new DataState(JSON.parse(JSON.stringify(item.value))));
55
+
56
+ const saveConfirm = computed(() => {
57
+ return props.saveIsCreate
58
+ ? props.createConfirm
59
+ : props.updateConfirm;
60
+ }),
61
+ saveResource = computed(() => {
62
+ return props.saveIsCreate
63
+ ? props.createResource
64
+ : props.updateResource;
65
+ }),
66
+ saveData = computed(() => {
67
+ return props.saveIsCreate
68
+ ? props.createData
69
+ : props.updateData;
70
+ }),
71
+ saveDisabled = computed(() => {
72
+ return props.saveIsCreate
73
+ ? props.createDisabled
74
+ : props.updateDisabled;
75
+ })
27
76
 
28
77
  const fetchItem = async () => {
29
- loading.value = true;
30
- return await httpCall(props.readResource, props.readData).then(r => {
31
- loading.value = false;
78
+ isLoading.value = true;
79
+ httpStatus.value = -1;
80
+ return await httpCall(props.readResource, props.readData).then((r) => {
81
+ isLoading.value = false;
82
+ if (!r.success) {
83
+ httpSuccessRead.value = false;
84
+ httpStatus.value = r.httpStatus;
85
+ emit('error', r.httpStatus);
86
+ return;
87
+ }
88
+ httpSuccessRead.value = true;
32
89
  item.value = r.data;
33
90
  perms.value = r.perms;
91
+ dataState.value = new DataState(JSON.parse(JSON.stringify(item.value)));
34
92
  emit('read', r);
35
93
  });
36
94
  }
37
95
 
38
96
  const displayHeader = computed(() => {
39
- if (loading.value) return false;
97
+ if (isLoading.value) return false;
40
98
 
41
99
  return props.title || !!slots['post-title'];
42
100
  })
43
101
 
44
- watch(() => props.modelValue, v => item.value = v);
45
- watch(item, () => emit('update:modelValue', item.value));
102
+ watch(() => props.modelValue, v => {
103
+ item.value = v;
104
+ dataState.value.increment(JSON.parse(JSON.stringify(v)));
105
+ }, {deep: true});
106
+ watch(item, (v) => {
107
+ emit('update:modelValue', item.value);
108
+ dataState.value.increment(JSON.parse(JSON.stringify(v)));
109
+ }, {deep: true});
46
110
  watch(perms, () => emit('perms', perms.value));
47
111
 
48
- const create = async (data: LktObject) => {
49
- const resource = props.createResource;
50
-
51
- loading.value = true;
52
- return await httpCall(resource, {...data}).then(r => {
53
- loading.value = false;
54
- emit('create', r);
55
- });
56
- }
57
-
58
- const update = async (data: LktObject) => {
59
- const resource = props.updateResource;
60
-
61
- loading.value = true;
62
- return await httpCall(resource, {...data}).then(r => {
63
- loading.value = false;
64
- emit('update', r);
65
- });
66
- }
67
-
68
- const drop = async (data: LktObject) => {
69
- const resource = props.dropResource;
112
+ const ableToSave = computed(() => {
113
+ if (saveDisabled.value) return false;
70
114
 
71
- loading.value = true;
72
- return await httpCall(resource, {...data}).then(r => {
73
- loading.value = false;
74
- emit('drop', r);
75
- });
76
- }
115
+ return dataState.value.changed();
116
+ })
117
+ watch(ableToSave, (v) => emit('modified-data', v));
77
118
 
78
119
  // Fetch item
79
120
  if (props.readResource) fetchItem();
80
121
 
122
+ const onDrop = ($event: PointerEvent, r: HTTPResponse) => {
123
+ isLoading.value = false;
124
+ httpStatus.value = r.httpStatus;
125
+ if (!r.success) {
126
+ showStoreMessage.value = true;
127
+ emit('error', r.httpStatus);
128
+ return;
129
+ }
130
+ showStoreMessage.value = true;
131
+ emit('drop', r)
132
+
133
+ },
134
+ onSave = ($event: PointerEvent, r: HTTPResponse) => {
135
+ isLoading.value = false;
136
+ httpStatus.value = r.httpStatus;
137
+ if (!r.success) {
138
+ showStoreMessage.value = true;
139
+ emit('error', r.httpStatus);
140
+ return;
141
+ }
142
+ showStoreMessage.value = true;
143
+ let emits: 'create' | 'update' = props.saveIsCreate ? 'create' : 'update';
144
+ emit(emits, r)
145
+
146
+ },
147
+ onButtonLoading = () => {
148
+ isLoading.value = true;
149
+ httpStatus.value = -1;
150
+ },
151
+ onButtonLoaded = () => {
152
+ isLoading.value = false;
153
+ },
154
+ doSave = () => {
155
+ // @ts-ignore
156
+ if (saveButton.value && typeof saveButton.value.click === 'function') saveButton.value.click();
157
+ },
158
+ doDrop = () => {
159
+ // @ts-ignore
160
+ if (dropButton.value && typeof dropButton.value.click === 'function') dropButton.value.click();
161
+ }
162
+
81
163
  defineExpose({
82
- fetchItem,
83
- create,
84
- update,
85
- drop,
86
- refresh: fetchItem
164
+ doDrop,
165
+ doRefresh: fetchItem,
166
+ doSave
87
167
  });
88
168
  </script>
89
169
 
@@ -92,12 +172,54 @@ defineExpose({
92
172
  <header class="lkt-item-crud_header" v-if="displayHeader">
93
173
  <h1 class="lkt-item-crud_header-title">{{ title }}</h1>
94
174
  <div class="lkt-item-crud_header-slot">
95
- <slot name="post-title" v-bind:item="item" v-bind:loading="loading"></slot>
175
+ <slot name="post-title" v-bind:item="item" v-bind:loading="isLoading"></slot>
96
176
  </div>
97
177
  </header>
98
- <div class="lkt-item-crud_content" v-if="!loading">
99
- <slot name="item" v-bind:item="item" v-bind:loading="loading"></slot>
178
+ <div class="lkt-item-crud-buttons" v-show="httpSuccessRead">
179
+ <lkt-button
180
+ :ref="(el:any) => dropButton = el"
181
+ v-show="!isLoading && editMode && httpSuccessRead"
182
+ palette="danger"
183
+ v-bind:disabled="dropDisabled"
184
+ v-bind:confirm-modal="dropConfirm"
185
+ v-bind:resource="dropResource"
186
+ v-bind:resource-data="dropData"
187
+ v-on:loading="onButtonLoading"
188
+ v-on:loaded="onButtonLoaded"
189
+ v-on:click="onDrop">
190
+ <slot v-if="!!slots['button-drop']" name="button-drop" v-bind:item="item"
191
+ v-bind:edit-mode="editMode"></slot>
192
+ <span v-else>{{ dropText }}</span>
193
+ </lkt-button>
194
+
195
+ <lkt-button
196
+ :ref="(el:any) => saveButton = el"
197
+ v-show="!isLoading && editMode && httpSuccessRead"
198
+ palette="success"
199
+ v-bind:disabled="!ableToSave"
200
+ v-bind:confirm-modal="saveConfirm"
201
+ v-bind:resource="saveResource"
202
+ v-bind:resource-data="saveData"
203
+ v-on:loading="onButtonLoading"
204
+ v-on:loaded="onButtonLoaded"
205
+ v-on:click="onSave">
206
+ <slot v-if="!!slots['button-save']" name="button-save" v-bind:item="item"
207
+ v-bind:edit-mode="editMode"></slot>
208
+ <span v-else>{{ saveText }}</span>
209
+ </lkt-button>
210
+
211
+ <lkt-field-switch
212
+ v-show="!isLoading && httpSuccessRead" v-model="editMode" :label="editModeText"></lkt-field-switch>
213
+ </div>
214
+ <div class="lkt-item-crud_content" v-if="!isLoading">
215
+ <div v-if="httpSuccessRead" class="lkt-grid-1">
216
+ <lkt-http-info :code="httpStatus" v-if="showStoreMessage" quick
217
+ :palette="httpStatus === 200 ? 'success' : 'danger'" can-close
218
+ v-on:close="showStoreMessage = false"></lkt-http-info>
219
+ <slot name="item" v-bind:item="item" v-bind:loading="isLoading" v-bind:edit-mode="editMode"></slot>
220
+ </div>
221
+ <lkt-http-info :code="httpStatus" v-else></lkt-http-info>
100
222
  </div>
101
- <lkt-loader v-if="loading"></lkt-loader>
223
+ <lkt-loader v-if="isLoading"></lkt-loader>
102
224
  </article>
103
225
  </template>