lkt-item-crud 1.0.5 → 1.0.6
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.
- package/LICENSE +1 -1
- package/dist/lkt-item-crud.es.js +65 -65
- package/dist/lkt-item-crud.umd.js +1 -1
- package/package.json +1 -1
- package/src/lib-components/LktItemCrud.vue +11 -3
package/LICENSE
CHANGED
package/dist/lkt-item-crud.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as X, useSlots as Y, ref as
|
|
1
|
+
import { defineComponent as X, useSlots as Y, ref as d, computed as p, watch as b, resolveComponent as g, openBlock as i, createElementBlock as m, createElementVNode as L, toDisplayString as w, renderSlot as D, createCommentVNode as k, withDirectives as _, createBlock as R, withCtx as x, unref as j, vShow as V, createVNode as J } from "vue";
|
|
2
2
|
import { httpCall as Z } from "lkt-http-client";
|
|
3
3
|
import { DataState as ee } from "lkt-data-state";
|
|
4
4
|
const te = { class: "lkt-item-crud" }, ae = {
|
|
@@ -36,61 +36,61 @@ const te = { class: "lkt-item-crud" }, ae = {
|
|
|
36
36
|
saveValidator: { type: Function, required: !1, default: () => !0 }
|
|
37
37
|
},
|
|
38
38
|
emits: ["update:modelValue", "read", "create", "update", "drop", "perms", "error", "modified-data"],
|
|
39
|
-
setup(u, { expose:
|
|
40
|
-
const e = u, q = Y(), o =
|
|
41
|
-
let
|
|
42
|
-
const a =
|
|
43
|
-
a.value = !0,
|
|
39
|
+
setup(u, { expose: I, emit: E }) {
|
|
40
|
+
const e = u, q = Y(), o = E;
|
|
41
|
+
let A = [];
|
|
42
|
+
const a = d(!0), r = d(e.modelValue), B = d(A), c = d(!1), n = d(!1), v = d(!1), s = d(200), S = d(null), h = d(null), y = d(new ee(r.value)), F = p(() => e.isCreate ? e.createConfirm : e.updateConfirm), H = p(() => e.isCreate ? e.createResource : e.updateResource), P = p(() => e.isCreate ? { ...e.createData, ...JSON.parse(JSON.stringify(r.value)) } : { ...e.updateData, ...JSON.parse(JSON.stringify(r.value)) }), U = p(() => e.isCreate ? e.createDisabled : e.updateDisabled), O = async () => {
|
|
43
|
+
a.value = !0, s.value = -1, v.value = !1;
|
|
44
44
|
try {
|
|
45
45
|
const t = await Z(e.readResource, e.readData);
|
|
46
|
-
if (a.value = !1, !t.success) {
|
|
47
|
-
|
|
46
|
+
if (a.value = !1, s.value = t.httpStatus, !t.success) {
|
|
47
|
+
n.value = !1, s.value = t.httpStatus, o("error", t.httpStatus);
|
|
48
48
|
return;
|
|
49
49
|
}
|
|
50
|
-
|
|
50
|
+
n.value = !0, r.value = t.data, B.value = t.perms, y.value.increment(r.value).turnStoredIntoOriginal(), o("read", t);
|
|
51
51
|
} catch {
|
|
52
|
-
a.value = !1,
|
|
52
|
+
a.value = !1, n.value = !1, s.value = 404, o("error", 404);
|
|
53
53
|
return;
|
|
54
54
|
}
|
|
55
|
-
},
|
|
55
|
+
}, z = p(() => a.value ? !1 : e.title || !!q["post-title"]);
|
|
56
56
|
b(() => e.modelValue, (t) => {
|
|
57
|
-
r.value = t,
|
|
57
|
+
r.value = t, y.value.increment(t);
|
|
58
58
|
}, { deep: !0 }), b(r, (t) => {
|
|
59
|
-
o("update:modelValue", r.value),
|
|
59
|
+
o("update:modelValue", r.value), y.value.increment(t);
|
|
60
60
|
}, { deep: !0 }), b(B, () => o("perms", B.value));
|
|
61
|
-
const
|
|
62
|
-
b(
|
|
63
|
-
const
|
|
64
|
-
if (a.value = !1,
|
|
61
|
+
const M = p(() => U.value || typeof e.saveValidator == "function" && !e.saveValidator(r.value) ? !1 : y.value.changed());
|
|
62
|
+
b(M, (t) => o("modified-data", t)), e.readResource && !e.isCreate ? O() : e.isCreate && (n.value = !0, c.value = !0, a.value = !1);
|
|
63
|
+
const G = (t, l) => {
|
|
64
|
+
if (a.value = !1, s.value = l.httpStatus, !l.success) {
|
|
65
65
|
v.value = !0, o("error", l.httpStatus);
|
|
66
66
|
return;
|
|
67
67
|
}
|
|
68
68
|
v.value = !0, o("drop", l);
|
|
69
69
|
}, K = (t, l) => {
|
|
70
|
-
if (a.value = !1,
|
|
70
|
+
if (a.value = !1, s.value = l.httpStatus, !l.success) {
|
|
71
71
|
v.value = !0, o("error", l.httpStatus);
|
|
72
72
|
return;
|
|
73
73
|
}
|
|
74
74
|
v.value = !0;
|
|
75
75
|
let C = e.isCreate ? "create" : "update";
|
|
76
|
-
e.isCreate ||
|
|
76
|
+
e.isCreate || y.value.turnStoredIntoOriginal(), l.autoReloadId && (e.readData.id = l.autoReloadId, O()), o(C, l);
|
|
77
|
+
}, N = () => {
|
|
78
|
+
a.value = !0, s.value = -1;
|
|
77
79
|
}, T = () => {
|
|
78
|
-
a.value = !0, n.value = -1;
|
|
79
|
-
}, $ = () => {
|
|
80
80
|
a.value = !1;
|
|
81
81
|
};
|
|
82
|
-
return
|
|
82
|
+
return I({
|
|
83
83
|
doDrop: () => {
|
|
84
|
-
|
|
84
|
+
h.value && typeof h.value.click == "function" && h.value.click();
|
|
85
85
|
},
|
|
86
|
-
doRefresh:
|
|
86
|
+
doRefresh: O,
|
|
87
87
|
doSave: () => {
|
|
88
|
-
|
|
88
|
+
S.value && typeof S.value.click == "function" && S.value.click();
|
|
89
89
|
}
|
|
90
90
|
}), (t, l) => {
|
|
91
|
-
const C = g("lkt-button"), Q = g("lkt-field-switch"),
|
|
92
|
-
return
|
|
93
|
-
|
|
91
|
+
const C = g("lkt-button"), Q = g("lkt-field-switch"), $ = g("lkt-http-info"), W = g("lkt-loader");
|
|
92
|
+
return i(), m("article", te, [
|
|
93
|
+
z.value ? (i(), m("header", ae, [
|
|
94
94
|
L("h1", le, w(u.title), 1),
|
|
95
95
|
L("div", ue, [
|
|
96
96
|
D(t.$slots, "post-title", {
|
|
@@ -98,93 +98,93 @@ const te = { class: "lkt-item-crud" }, ae = {
|
|
|
98
98
|
loading: a.value
|
|
99
99
|
})
|
|
100
100
|
])
|
|
101
|
-
])) :
|
|
101
|
+
])) : k("", !0),
|
|
102
102
|
_(L("div", re, [
|
|
103
|
-
u.isCreate ?
|
|
103
|
+
u.isCreate ? k("", !0) : _((i(), R(C, {
|
|
104
104
|
key: 0,
|
|
105
|
-
ref: (f) =>
|
|
105
|
+
ref: (f) => h.value = f,
|
|
106
106
|
palette: "danger",
|
|
107
107
|
disabled: u.dropDisabled,
|
|
108
108
|
"confirm-modal": u.dropConfirm,
|
|
109
109
|
resource: u.dropResource,
|
|
110
110
|
"resource-data": u.dropData,
|
|
111
|
-
onLoading:
|
|
112
|
-
onLoaded:
|
|
113
|
-
onClick:
|
|
111
|
+
onLoading: N,
|
|
112
|
+
onLoaded: T,
|
|
113
|
+
onClick: G
|
|
114
114
|
}, {
|
|
115
|
-
default:
|
|
116
|
-
|
|
115
|
+
default: x(() => [
|
|
116
|
+
j(q)["button-drop"] ? D(t.$slots, "button-drop", {
|
|
117
117
|
key: 0,
|
|
118
118
|
item: r.value,
|
|
119
119
|
editMode: c.value
|
|
120
|
-
}) : (
|
|
120
|
+
}) : (i(), m("span", oe, w(u.dropText), 1))
|
|
121
121
|
]),
|
|
122
122
|
_: 3
|
|
123
123
|
}, 8, ["disabled", "confirm-modal", "resource", "resource-data"])), [
|
|
124
|
-
[
|
|
124
|
+
[V, !a.value && c.value && n.value]
|
|
125
125
|
]),
|
|
126
|
-
_(
|
|
127
|
-
ref: (f) =>
|
|
126
|
+
_(J(C, {
|
|
127
|
+
ref: (f) => S.value = f,
|
|
128
128
|
palette: "success",
|
|
129
|
-
disabled: !
|
|
130
|
-
"confirm-modal":
|
|
131
|
-
resource:
|
|
132
|
-
"resource-data":
|
|
133
|
-
onLoading:
|
|
134
|
-
onLoaded:
|
|
129
|
+
disabled: !M.value,
|
|
130
|
+
"confirm-modal": F.value,
|
|
131
|
+
resource: H.value,
|
|
132
|
+
"resource-data": P.value,
|
|
133
|
+
onLoading: N,
|
|
134
|
+
onLoaded: T,
|
|
135
135
|
onClick: K
|
|
136
136
|
}, {
|
|
137
|
-
default:
|
|
138
|
-
|
|
137
|
+
default: x(() => [
|
|
138
|
+
j(q)["button-save"] ? D(t.$slots, "button-save", {
|
|
139
139
|
key: 0,
|
|
140
140
|
item: r.value,
|
|
141
141
|
editMode: c.value
|
|
142
|
-
}) : (
|
|
142
|
+
}) : (i(), m("span", se, w(u.saveText), 1))
|
|
143
143
|
]),
|
|
144
144
|
_: 3
|
|
145
145
|
}, 8, ["disabled", "confirm-modal", "resource", "resource-data"]), [
|
|
146
|
-
[
|
|
146
|
+
[V, !a.value && c.value && n.value]
|
|
147
147
|
]),
|
|
148
|
-
_(
|
|
148
|
+
_(J(Q, {
|
|
149
149
|
modelValue: c.value,
|
|
150
150
|
"onUpdate:modelValue": l[0] || (l[0] = (f) => c.value = f),
|
|
151
151
|
label: u.editModeText
|
|
152
152
|
}, null, 8, ["modelValue", "label"]), [
|
|
153
|
-
[
|
|
153
|
+
[V, !a.value && n.value && !u.isCreate]
|
|
154
154
|
])
|
|
155
155
|
], 512), [
|
|
156
|
-
[
|
|
156
|
+
[V, n.value]
|
|
157
157
|
]),
|
|
158
|
-
a.value ?
|
|
159
|
-
|
|
160
|
-
v.value ? (
|
|
158
|
+
a.value ? k("", !0) : (i(), m("div", de, [
|
|
159
|
+
n.value ? (i(), m("div", ie, [
|
|
160
|
+
v.value ? (i(), R($, {
|
|
161
161
|
key: 0,
|
|
162
|
-
code:
|
|
162
|
+
code: s.value,
|
|
163
163
|
quick: "",
|
|
164
|
-
palette:
|
|
164
|
+
palette: s.value === 200 ? "success" : "danger",
|
|
165
165
|
"can-close": "",
|
|
166
166
|
onClose: l[1] || (l[1] = (f) => v.value = !1)
|
|
167
|
-
}, null, 8, ["code", "palette"])) :
|
|
167
|
+
}, null, 8, ["code", "palette"])) : k("", !0),
|
|
168
168
|
D(t.$slots, "item", {
|
|
169
169
|
item: r.value,
|
|
170
170
|
loading: a.value,
|
|
171
171
|
editMode: c.value
|
|
172
172
|
})
|
|
173
|
-
])) : (
|
|
173
|
+
])) : (i(), R($, {
|
|
174
174
|
key: 1,
|
|
175
|
-
code:
|
|
175
|
+
code: s.value
|
|
176
176
|
}, null, 8, ["code"]))
|
|
177
177
|
])),
|
|
178
|
-
a.value ? (
|
|
178
|
+
a.value ? (i(), R(W, { key: 2 })) : k("", !0)
|
|
179
179
|
]);
|
|
180
180
|
};
|
|
181
181
|
}
|
|
182
182
|
});
|
|
183
|
-
const
|
|
184
|
-
install: (u,
|
|
183
|
+
const ke = {
|
|
184
|
+
install: (u, I = {}) => {
|
|
185
185
|
u.component("LktItemCrud", ce);
|
|
186
186
|
}
|
|
187
187
|
};
|
|
188
188
|
export {
|
|
189
|
-
|
|
189
|
+
ke as default
|
|
190
190
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(e,p){typeof exports=="object"&&typeof module<"u"?module.exports=p(require("vue"),require("lkt-http-client"),require("lkt-data-state")):typeof define=="function"&&define.amd?define(["vue","lkt-http-client","lkt-data-state"],p):(e=typeof globalThis<"u"?globalThis:e||self,e.LktItemCrud=p(e.Vue,e.LktHttpClient,e.LktDataState))})(this,function(e,p,w){"use strict";const _={class:"lkt-item-crud"},q={key:0,class:"lkt-item-crud_header"},L={class:"lkt-item-crud_header-title"},
|
|
1
|
+
(function(e,p){typeof exports=="object"&&typeof module<"u"?module.exports=p(require("vue"),require("lkt-http-client"),require("lkt-data-state")):typeof define=="function"&&define.amd?define(["vue","lkt-http-client","lkt-data-state"],p):(e=typeof globalThis<"u"?globalThis:e||self,e.LktItemCrud=p(e.Vue,e.LktHttpClient,e.LktDataState))})(this,function(e,p,w){"use strict";const _={class:"lkt-item-crud"},q={key:0,class:"lkt-item-crud_header"},L={class:"lkt-item-crud_header-title"},N={class:"lkt-item-crud_header-slot"},R={class:"lkt-item-crud-buttons"},I={key:1},O={key:1},E={key:1,class:"lkt-item-crud_content"},T={key:0,class:"lkt-grid-1"},x={name:"LktItemCrud",inheritAttrs:!1},M=e.defineComponent({...x,props:{modelValue:{type:Object,required:!1,default:()=>({})},title:{type:String,default:""},editModeText:{type:String,default:"Edition Mode"},saveText:{type:String,default:"Save"},dropText:{type:String,default:"Delete"},readResource:{type:String,required:!0},createResource:{type:String,required:!1},updateResource:{type:String,required:!1},dropResource:{type:String,required:!1},readData:{type:Object,required:!1,default:()=>({})},createData:{type:Object,required:!1,default:()=>({})},updateData:{type:Object,required:!1,default:()=>({})},dropData:{type:Object,required:!1,default:()=>({})},isCreate:{type:Boolean,default:!1},createConfirm:{type:String,default:""},updateConfirm:{type:String,default:""},dropConfirm:{type:String,default:""},createDisabled:{type:Boolean,default:!1},updateDisabled:{type:Boolean,default:!1},dropDisabled:{type:Boolean,default:!1},saveValidator:{type:Function,required:!1,default:()=>!0}},emits:["update:modelValue","read","create","update","drop","perms","error","modified-data"],setup(r,{expose:D,emit:$}){const t=r,v=e.useSlots(),s=$;let j=[];const l=e.ref(!0),d=e.ref(t.modelValue),y=e.ref(j),u=e.ref(!1),i=e.ref(!1),c=e.ref(!1),n=e.ref(200),k=e.ref(null),h=e.ref(null),m=e.ref(new w.DataState(d.value)),J=e.computed(()=>t.isCreate?t.createConfirm:t.updateConfirm),H=e.computed(()=>t.isCreate?t.createResource:t.updateResource),A=e.computed(()=>t.isCreate?{...t.createData,...JSON.parse(JSON.stringify(d.value))}:{...t.updateData,...JSON.parse(JSON.stringify(d.value))}),F=e.computed(()=>t.isCreate?t.createDisabled:t.updateDisabled),C=async()=>{l.value=!0,n.value=-1,c.value=!1;try{const a=await p.httpCall(t.readResource,t.readData);if(l.value=!1,n.value=a.httpStatus,!a.success){i.value=!1,n.value=a.httpStatus,s("error",a.httpStatus);return}i.value=!0,d.value=a.data,y.value=a.perms,m.value.increment(d.value).turnStoredIntoOriginal(),s("read",a)}catch{l.value=!1,i.value=!1,n.value=404,s("error",404);return}},P=e.computed(()=>l.value?!1:t.title||!!v["post-title"]);e.watch(()=>t.modelValue,a=>{d.value=a,m.value.increment(a)},{deep:!0}),e.watch(d,a=>{s("update:modelValue",d.value),m.value.increment(a)},{deep:!0}),e.watch(y,()=>s("perms",y.value));const B=e.computed(()=>F.value||typeof t.saveValidator=="function"&&!t.saveValidator(d.value)?!1:m.value.changed());e.watch(B,a=>s("modified-data",a)),t.readResource&&!t.isCreate?C():t.isCreate&&(i.value=!0,u.value=!0,l.value=!1);const U=(a,o)=>{if(l.value=!1,n.value=o.httpStatus,!o.success){c.value=!0,s("error",o.httpStatus);return}c.value=!0,s("drop",o)},z=(a,o)=>{if(l.value=!1,n.value=o.httpStatus,!o.success){c.value=!0,s("error",o.httpStatus);return}c.value=!0;let S=t.isCreate?"create":"update";t.isCreate||m.value.turnStoredIntoOriginal(),o.autoReloadId&&(t.readData.id=o.autoReloadId,C()),s(S,o)},g=()=>{l.value=!0,n.value=-1},b=()=>{l.value=!1};return D({doDrop:()=>{h.value&&typeof h.value.click=="function"&&h.value.click()},doRefresh:C,doSave:()=>{k.value&&typeof k.value.click=="function"&&k.value.click()}}),(a,o)=>{const S=e.resolveComponent("lkt-button"),G=e.resolveComponent("lkt-field-switch"),V=e.resolveComponent("lkt-http-info"),K=e.resolveComponent("lkt-loader");return e.openBlock(),e.createElementBlock("article",_,[P.value?(e.openBlock(),e.createElementBlock("header",q,[e.createElementVNode("h1",L,e.toDisplayString(r.title),1),e.createElementVNode("div",N,[e.renderSlot(a.$slots,"post-title",{item:d.value,loading:l.value})])])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("div",R,[r.isCreate?e.createCommentVNode("",!0):e.withDirectives((e.openBlock(),e.createBlock(S,{key:0,ref:f=>h.value=f,palette:"danger",disabled:r.dropDisabled,"confirm-modal":r.dropConfirm,resource:r.dropResource,"resource-data":r.dropData,onLoading:g,onLoaded:b,onClick:U},{default:e.withCtx(()=>[e.unref(v)["button-drop"]?e.renderSlot(a.$slots,"button-drop",{key:0,item:d.value,editMode:u.value}):(e.openBlock(),e.createElementBlock("span",I,e.toDisplayString(r.dropText),1))]),_:3},8,["disabled","confirm-modal","resource","resource-data"])),[[e.vShow,!l.value&&u.value&&i.value]]),e.withDirectives(e.createVNode(S,{ref:f=>k.value=f,palette:"success",disabled:!B.value,"confirm-modal":J.value,resource:H.value,"resource-data":A.value,onLoading:g,onLoaded:b,onClick:z},{default:e.withCtx(()=>[e.unref(v)["button-save"]?e.renderSlot(a.$slots,"button-save",{key:0,item:d.value,editMode:u.value}):(e.openBlock(),e.createElementBlock("span",O,e.toDisplayString(r.saveText),1))]),_:3},8,["disabled","confirm-modal","resource","resource-data"]),[[e.vShow,!l.value&&u.value&&i.value]]),e.withDirectives(e.createVNode(G,{modelValue:u.value,"onUpdate:modelValue":o[0]||(o[0]=f=>u.value=f),label:r.editModeText},null,8,["modelValue","label"]),[[e.vShow,!l.value&&i.value&&!r.isCreate]])],512),[[e.vShow,i.value]]),l.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",E,[i.value?(e.openBlock(),e.createElementBlock("div",T,[c.value?(e.openBlock(),e.createBlock(V,{key:0,code:n.value,quick:"",palette:n.value===200?"success":"danger","can-close":"",onClose:o[1]||(o[1]=f=>c.value=!1)},null,8,["code","palette"])):e.createCommentVNode("",!0),e.renderSlot(a.$slots,"item",{item:d.value,loading:l.value,editMode:u.value})])):(e.openBlock(),e.createBlock(V,{key:1,code:n.value},null,8,["code"]))])),l.value?(e.openBlock(),e.createBlock(K,{key:2})):e.createCommentVNode("",!0)])}}}),Q="";return{install:(r,D={})=>{r.component("LktItemCrud",M)}}});
|
package/package.json
CHANGED
|
@@ -65,9 +65,10 @@ const saveConfirm = computed(() => {
|
|
|
65
65
|
: props.updateResource;
|
|
66
66
|
}),
|
|
67
67
|
saveData = computed(() => {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
68
|
+
if (props.isCreate) {
|
|
69
|
+
return {...props.createData, ...JSON.parse(JSON.stringify(item.value))};
|
|
70
|
+
}
|
|
71
|
+
return {...props.updateData, ...JSON.parse(JSON.stringify(item.value))};
|
|
71
72
|
}),
|
|
72
73
|
saveDisabled = computed(() => {
|
|
73
74
|
return props.isCreate
|
|
@@ -78,9 +79,11 @@ const saveConfirm = computed(() => {
|
|
|
78
79
|
const fetchItem = async () => {
|
|
79
80
|
isLoading.value = true;
|
|
80
81
|
httpStatus.value = -1;
|
|
82
|
+
showStoreMessage.value = false;
|
|
81
83
|
try {
|
|
82
84
|
const r = await httpCall(props.readResource, props.readData);
|
|
83
85
|
isLoading.value = false;
|
|
86
|
+
httpStatus.value = r.httpStatus;
|
|
84
87
|
if (!r.success) {
|
|
85
88
|
httpSuccessRead.value = false;
|
|
86
89
|
httpStatus.value = r.httpStatus;
|
|
@@ -161,6 +164,11 @@ const onDrop = ($event: PointerEvent, r: HTTPResponse) => {
|
|
|
161
164
|
if (!props.isCreate) {
|
|
162
165
|
dataState.value.turnStoredIntoOriginal();
|
|
163
166
|
}
|
|
167
|
+
|
|
168
|
+
if (r.autoReloadId) {
|
|
169
|
+
props.readData['id'] = r.autoReloadId;
|
|
170
|
+
fetchItem();
|
|
171
|
+
}
|
|
164
172
|
emit(emits, r)
|
|
165
173
|
|
|
166
174
|
},
|