lkt-item-crud 1.0.0 → 1.0.3

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