lkt-item-crud 1.0.9 → 1.0.11
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/dist/lkt-item-crud.es.js
CHANGED
|
@@ -1,26 +1,29 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { httpCall as
|
|
3
|
-
import { DataState as
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
const
|
|
1
|
+
import { defineComponent as le, useSlots as ue, ref as n, computed as r, watch as B, resolveComponent as w, openBlock as i, createElementBlock as m, createElementVNode as I, toDisplayString as M, renderSlot as R, createCommentVNode as y, withDirectives as V, createBlock as _, withCtx as A, unref as F, vShow as L, createVNode as P } from "vue";
|
|
2
|
+
import { httpCall as oe } from "lkt-http-client";
|
|
3
|
+
import { DataState as re } from "lkt-data-state";
|
|
4
|
+
import de from "lkt-button";
|
|
5
|
+
import se from "lkt-http-info";
|
|
6
|
+
import ne from "lkt-loader";
|
|
7
|
+
const ie = { class: "lkt-item-crud" }, ce = {
|
|
8
8
|
key: 0,
|
|
9
9
|
class: "lkt-item-crud_header"
|
|
10
|
-
},
|
|
10
|
+
}, ve = { class: "lkt-item-crud_header-title" }, fe = { class: "lkt-item-crud_header-slot" }, pe = { class: "lkt-item-crud-buttons" }, me = { key: 1 }, he = { key: 1 }, ke = {
|
|
11
11
|
key: 1,
|
|
12
12
|
class: "lkt-item-crud_content"
|
|
13
|
-
},
|
|
13
|
+
}, ye = {
|
|
14
14
|
key: 0,
|
|
15
15
|
class: "lkt-grid-1"
|
|
16
|
-
},
|
|
17
|
-
...
|
|
16
|
+
}, Se = { name: "LktItemCrud", inheritAttrs: !1 }, Ce = /* @__PURE__ */ le({
|
|
17
|
+
...Se,
|
|
18
18
|
props: {
|
|
19
19
|
modelValue: { type: Object, required: !1, default: () => ({}) },
|
|
20
20
|
title: { type: String, default: "" },
|
|
21
21
|
editModeText: { type: String, default: "Edition Mode" },
|
|
22
22
|
saveText: { type: String, default: "Save" },
|
|
23
23
|
dropText: { type: String, default: "Delete" },
|
|
24
|
+
hiddenSave: { type: Boolean, default: !1 },
|
|
25
|
+
hiddenDrop: { type: Boolean, default: !1 },
|
|
26
|
+
hiddenButtons: { type: Boolean, default: !1 },
|
|
24
27
|
readResource: { type: String, required: !1 },
|
|
25
28
|
createResource: { type: String, required: !1 },
|
|
26
29
|
updateResource: { type: String, required: !1 },
|
|
@@ -39,166 +42,168 @@ const oe = { class: "lkt-item-crud" }, se = {
|
|
|
39
42
|
saveValidator: { type: Function, required: !1, default: () => !0 }
|
|
40
43
|
},
|
|
41
44
|
emits: ["update:modelValue", "read", "create", "update", "drop", "perms", "error", "modified-data"],
|
|
42
|
-
setup(t, { expose: N, emit:
|
|
43
|
-
const e = t,
|
|
44
|
-
let
|
|
45
|
-
const l =
|
|
45
|
+
setup(t, { expose: N, emit: z }) {
|
|
46
|
+
const e = t, q = ue(), d = z;
|
|
47
|
+
let G = [];
|
|
48
|
+
const l = n(!0), o = n(e.modelValue), h = n(G), c = n(!1), v = n(!1), f = n(!1), s = n(200), S = n(null), C = n(null), k = n(new re(o.value)), K = r(() => e.isCreate ? e.createConfirm : e.updateConfirm), T = r(() => e.isCreate ? e.createResource : e.updateResource), Q = r(() => e.isCreate ? { ...e.createData, ...JSON.parse(JSON.stringify(o.value)) } : { ...e.updateData, ...JSON.parse(JSON.stringify(o.value)) }), W = r(() => e.isCreate ? e.createDisabled : e.updateDisabled), D = r(() => !e.isCreate && h.value.includes("update")), b = r(() => !e.isCreate && h.value.includes("drop")), O = async () => {
|
|
46
49
|
l.value = !0, s.value = -1, f.value = !1;
|
|
47
50
|
try {
|
|
48
|
-
const a = await
|
|
51
|
+
const a = await oe(e.readResource, e.readData);
|
|
49
52
|
if (l.value = !1, s.value = a.httpStatus, !a.success) {
|
|
50
|
-
|
|
53
|
+
v.value = !1, s.value = a.httpStatus, d("error", a.httpStatus);
|
|
51
54
|
return;
|
|
52
55
|
}
|
|
53
|
-
|
|
56
|
+
v.value = !0, o.value = a.data, h.value = a.perms, k.value.increment(o.value).turnStoredIntoOriginal(), d("read", a);
|
|
54
57
|
} catch {
|
|
55
|
-
l.value = !1,
|
|
58
|
+
l.value = !1, v.value = !1, s.value = 404, d("error", 404);
|
|
56
59
|
return;
|
|
57
60
|
}
|
|
58
|
-
},
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
}, { deep: !0 }),
|
|
62
|
-
|
|
63
|
-
}, { deep: !0 }),
|
|
64
|
-
const $ =
|
|
65
|
-
|
|
66
|
-
const
|
|
61
|
+
}, X = r(() => l.value ? !1 : e.title || !!q["post-title"]);
|
|
62
|
+
B(() => e.modelValue, (a) => {
|
|
63
|
+
o.value = a, k.value.increment(a);
|
|
64
|
+
}, { deep: !0 }), B(o, (a) => {
|
|
65
|
+
d("update:modelValue", o.value), k.value.increment(a);
|
|
66
|
+
}, { deep: !0 }), B(h, () => d("perms", h.value));
|
|
67
|
+
const $ = r(() => W.value || !e.isCreate && !D.value || typeof e.saveValidator == "function" && !e.saveValidator(o.value) ? !1 : k.value.changed());
|
|
68
|
+
B($, (a) => d("modified-data", a)), e.readResource && !e.isCreate ? O() : e.isCreate && (v.value = !0, c.value = !0, l.value = !1);
|
|
69
|
+
const Y = (a, u) => {
|
|
67
70
|
if (l.value = !1, s.value = u.httpStatus, !u.success) {
|
|
68
|
-
f.value = !0,
|
|
71
|
+
f.value = !0, d("error", u.httpStatus);
|
|
69
72
|
return;
|
|
70
73
|
}
|
|
71
|
-
f.value = !0,
|
|
72
|
-
},
|
|
74
|
+
f.value = !0, d("drop", u);
|
|
75
|
+
}, Z = (a, u) => {
|
|
73
76
|
if (T.value) {
|
|
74
77
|
if (l.value = !1, s.value = u.httpStatus, !u.success) {
|
|
75
|
-
f.value = !0,
|
|
78
|
+
f.value = !0, d("error", u.httpStatus);
|
|
76
79
|
return;
|
|
77
80
|
}
|
|
78
81
|
f.value = !0;
|
|
79
82
|
}
|
|
80
83
|
let g = e.isCreate ? "create" : "update";
|
|
81
|
-
e.isCreate ||
|
|
84
|
+
e.isCreate || k.value.turnStoredIntoOriginal(), u.autoReloadId && (e.readData.id = u.autoReloadId, O()), d(g, u);
|
|
82
85
|
}, x = () => {
|
|
83
86
|
l.value = !0, s.value = -1;
|
|
84
87
|
}, j = () => {
|
|
85
88
|
l.value = !1;
|
|
86
89
|
};
|
|
87
|
-
|
|
90
|
+
N({
|
|
88
91
|
doDrop: () => {
|
|
89
|
-
|
|
92
|
+
C.value && typeof C.value.click == "function" && C.value.click();
|
|
90
93
|
},
|
|
91
|
-
doRefresh:
|
|
94
|
+
doRefresh: O,
|
|
92
95
|
doSave: () => {
|
|
93
96
|
S.value && typeof S.value.click == "function" && S.value.click();
|
|
94
97
|
}
|
|
95
|
-
})
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
98
|
+
});
|
|
99
|
+
const U = r(() => !e.hiddenDrop && !l.value && c.value && v.value), J = r(() => !e.hiddenSave && !l.value && c.value && v.value), E = r(() => !l.value && !e.isCreate && v.value), ee = r(() => !e.hiddenButtons && (J.value || U.value || E.value));
|
|
100
|
+
return (a, u) => {
|
|
101
|
+
const g = w("lkt-button"), te = w("lkt-field-switch"), H = w("lkt-http-info"), ae = w("lkt-loader");
|
|
102
|
+
return i(), m("article", ie, [
|
|
103
|
+
X.value ? (i(), m("header", ce, [
|
|
104
|
+
I("h1", ve, M(t.title), 1),
|
|
105
|
+
I("div", fe, [
|
|
106
|
+
R(a.$slots, "post-title", {
|
|
107
|
+
item: o.value,
|
|
103
108
|
loading: l.value
|
|
104
109
|
})
|
|
105
110
|
])
|
|
106
|
-
])) :
|
|
107
|
-
|
|
108
|
-
t.isCreate ?
|
|
111
|
+
])) : y("", !0),
|
|
112
|
+
V(I("div", pe, [
|
|
113
|
+
t.isCreate ? y("", !0) : V((i(), _(g, {
|
|
109
114
|
key: 0,
|
|
110
|
-
ref: (
|
|
115
|
+
ref: (p) => C.value = p,
|
|
111
116
|
palette: "danger",
|
|
112
|
-
disabled: t.dropDisabled || !
|
|
117
|
+
disabled: t.dropDisabled || !b.value,
|
|
113
118
|
"confirm-modal": t.dropConfirm,
|
|
114
119
|
resource: t.dropResource,
|
|
115
120
|
"resource-data": t.dropData,
|
|
116
121
|
onLoading: x,
|
|
117
122
|
onLoaded: j,
|
|
118
|
-
onClick:
|
|
123
|
+
onClick: Y
|
|
119
124
|
}, {
|
|
120
|
-
default:
|
|
121
|
-
|
|
125
|
+
default: A(() => [
|
|
126
|
+
F(q)["button-drop"] ? R(a.$slots, "button-drop", {
|
|
122
127
|
key: 0,
|
|
123
|
-
item:
|
|
128
|
+
item: o.value,
|
|
124
129
|
editMode: c.value,
|
|
125
130
|
isCreate: t.isCreate,
|
|
126
|
-
canUpdate:
|
|
127
|
-
canDrop:
|
|
128
|
-
}) : (i(),
|
|
131
|
+
canUpdate: D.value,
|
|
132
|
+
canDrop: b.value
|
|
133
|
+
}) : (i(), m("span", me, M(t.dropText), 1))
|
|
129
134
|
]),
|
|
130
135
|
_: 3
|
|
131
136
|
}, 8, ["disabled", "confirm-modal", "resource", "resource-data"])), [
|
|
132
|
-
[
|
|
137
|
+
[L, U.value]
|
|
133
138
|
]),
|
|
134
|
-
|
|
135
|
-
ref: (
|
|
139
|
+
V(P(g, {
|
|
140
|
+
ref: (p) => S.value = p,
|
|
136
141
|
palette: "success",
|
|
137
142
|
disabled: !$.value,
|
|
138
|
-
"confirm-modal":
|
|
143
|
+
"confirm-modal": K.value,
|
|
139
144
|
resource: T.value,
|
|
140
|
-
"resource-data":
|
|
145
|
+
"resource-data": Q.value,
|
|
141
146
|
onLoading: x,
|
|
142
147
|
onLoaded: j,
|
|
143
|
-
onClick:
|
|
148
|
+
onClick: Z
|
|
144
149
|
}, {
|
|
145
|
-
default:
|
|
146
|
-
|
|
150
|
+
default: A(() => [
|
|
151
|
+
F(q)["button-save"] ? R(a.$slots, "button-save", {
|
|
147
152
|
key: 0,
|
|
148
|
-
item:
|
|
153
|
+
item: o.value,
|
|
149
154
|
editMode: c.value,
|
|
150
155
|
isCreate: t.isCreate,
|
|
151
|
-
canUpdate:
|
|
152
|
-
canDrop:
|
|
153
|
-
}) : (i(),
|
|
156
|
+
canUpdate: D.value,
|
|
157
|
+
canDrop: b.value
|
|
158
|
+
}) : (i(), m("span", he, M(t.saveText), 1))
|
|
154
159
|
]),
|
|
155
160
|
_: 3
|
|
156
161
|
}, 8, ["disabled", "confirm-modal", "resource", "resource-data"]), [
|
|
157
|
-
[
|
|
162
|
+
[L, J.value]
|
|
158
163
|
]),
|
|
159
|
-
|
|
164
|
+
V(P(te, {
|
|
160
165
|
modelValue: c.value,
|
|
161
|
-
"onUpdate:modelValue": u[0] || (u[0] = (
|
|
166
|
+
"onUpdate:modelValue": u[0] || (u[0] = (p) => c.value = p),
|
|
162
167
|
label: t.editModeText
|
|
163
168
|
}, null, 8, ["modelValue", "label"]), [
|
|
164
|
-
[
|
|
169
|
+
[L, E.value]
|
|
165
170
|
])
|
|
166
171
|
], 512), [
|
|
167
|
-
[
|
|
172
|
+
[L, ee.value]
|
|
168
173
|
]),
|
|
169
|
-
l.value ?
|
|
170
|
-
|
|
171
|
-
f.value ? (i(), _(
|
|
174
|
+
l.value ? y("", !0) : (i(), m("div", ke, [
|
|
175
|
+
v.value ? (i(), m("div", ye, [
|
|
176
|
+
f.value ? (i(), _(H, {
|
|
172
177
|
key: 0,
|
|
173
178
|
code: s.value,
|
|
174
179
|
quick: "",
|
|
175
180
|
palette: s.value === 200 ? "success" : "danger",
|
|
176
181
|
"can-close": "",
|
|
177
|
-
onClose: u[1] || (u[1] = (
|
|
178
|
-
}, null, 8, ["code", "palette"])) :
|
|
179
|
-
|
|
180
|
-
item:
|
|
182
|
+
onClose: u[1] || (u[1] = (p) => f.value = !1)
|
|
183
|
+
}, null, 8, ["code", "palette"])) : y("", !0),
|
|
184
|
+
R(a.$slots, "item", {
|
|
185
|
+
item: o.value,
|
|
181
186
|
loading: l.value,
|
|
182
187
|
editMode: c.value,
|
|
183
188
|
isCreate: t.isCreate,
|
|
184
|
-
canUpdate:
|
|
185
|
-
canDrop:
|
|
189
|
+
canUpdate: D.value,
|
|
190
|
+
canDrop: b.value
|
|
186
191
|
})
|
|
187
|
-
])) : (i(), _(
|
|
192
|
+
])) : (i(), _(H, {
|
|
188
193
|
key: 1,
|
|
189
194
|
code: s.value
|
|
190
195
|
}, null, 8, ["code"]))
|
|
191
196
|
])),
|
|
192
|
-
l.value ? (i(), _(
|
|
197
|
+
l.value ? (i(), _(ae, { key: 2 })) : y("", !0)
|
|
193
198
|
]);
|
|
194
199
|
};
|
|
195
200
|
}
|
|
196
201
|
});
|
|
197
|
-
const
|
|
202
|
+
const Le = {
|
|
198
203
|
install: (t, N = {}) => {
|
|
199
|
-
t.component("lkt-item-crud") === void 0 && t.component("lkt-item-crud",
|
|
204
|
+
t.component("lkt-item-crud") === void 0 && t.component("lkt-item-crud", Ce), t.component("lkt-button") === void 0 && t.use(de), t.component("lkt-http-info") === void 0 && t.use(se), t.component("lkt-loader") === void 0 && t.use(ne);
|
|
200
205
|
}
|
|
201
206
|
};
|
|
202
207
|
export {
|
|
203
|
-
|
|
208
|
+
Le as default
|
|
204
209
|
};
|
|
@@ -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"),require("lkt-button"),require("lkt-http-info"),require("lkt-loader")):typeof define=="function"&&define.amd?define(["vue","lkt-http-client","lkt-data-state","lkt-button","lkt-http-info","lkt-loader"],p):(e=typeof globalThis<"u"?globalThis:e||self,e.LktItemCrud=p(e.Vue,e.LktHttpClient,e.LktDataState,e.LktButton,e.LktHttpInfo,e.LktLoader))})(this,function(e,p,
|
|
1
|
+
(function(e,p){typeof exports=="object"&&typeof module<"u"?module.exports=p(require("vue"),require("lkt-http-client"),require("lkt-data-state"),require("lkt-button"),require("lkt-http-info"),require("lkt-loader")):typeof define=="function"&&define.amd?define(["vue","lkt-http-client","lkt-data-state","lkt-button","lkt-http-info","lkt-loader"],p):(e=typeof globalThis<"u"?globalThis:e||self,e.LktItemCrud=p(e.Vue,e.LktHttpClient,e.LktDataState,e.LktButton,e.LktHttpInfo,e.LktLoader))})(this,function(e,p,O,E,T,x){"use strict";const B=a=>a&&typeof a=="object"&&"default"in a?a:{default:a},M=B(E),j=B(T),$=B(x),U={class:"lkt-item-crud"},H={key:0,class:"lkt-item-crud_header"},J={class:"lkt-item-crud_header-title"},A={class:"lkt-item-crud_header-slot"},F={class:"lkt-item-crud-buttons"},P={key:1},z={key:1},G={key:1,class:"lkt-item-crud_content"},K={key:0,class:"lkt-grid-1"},Q={name:"LktItemCrud",inheritAttrs:!1},W=e.defineComponent({...Q,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"},hiddenSave:{type:Boolean,default:!1},hiddenDrop:{type:Boolean,default:!1},hiddenButtons:{type:Boolean,default:!1},readResource:{type:String,required:!1},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(a,{expose:g,emit:X}){const t=a,D=e.useSlots(),n=X;let Y=[];const o=e.ref(!0),d=e.ref(t.modelValue),m=e.ref(Y),u=e.ref(!1),i=e.ref(!1),c=e.ref(!1),s=e.ref(200),h=e.ref(null),v=e.ref(null),k=e.ref(new O.DataState(d.value)),Z=e.computed(()=>t.isCreate?t.createConfirm:t.updateConfirm),w=e.computed(()=>t.isCreate?t.createResource:t.updateResource),ee=e.computed(()=>t.isCreate?{...t.createData,...JSON.parse(JSON.stringify(d.value))}:{...t.updateData,...JSON.parse(JSON.stringify(d.value))}),te=e.computed(()=>t.isCreate?t.createDisabled:t.updateDisabled),S=e.computed(()=>!t.isCreate&&m.value.includes("update")),y=e.computed(()=>!t.isCreate&&m.value.includes("drop")),b=async()=>{o.value=!0,s.value=-1,c.value=!1;try{const l=await p.httpCall(t.readResource,t.readData);if(o.value=!1,s.value=l.httpStatus,!l.success){i.value=!1,s.value=l.httpStatus,n("error",l.httpStatus);return}i.value=!0,d.value=l.data,m.value=l.perms,k.value.increment(d.value).turnStoredIntoOriginal(),n("read",l)}catch{o.value=!1,i.value=!1,s.value=404,n("error",404);return}},ae=e.computed(()=>o.value?!1:t.title||!!D["post-title"]);e.watch(()=>t.modelValue,l=>{d.value=l,k.value.increment(l)},{deep:!0}),e.watch(d,l=>{n("update:modelValue",d.value),k.value.increment(l)},{deep:!0}),e.watch(m,()=>n("perms",m.value));const L=e.computed(()=>te.value||!t.isCreate&&!S.value||typeof t.saveValidator=="function"&&!t.saveValidator(d.value)?!1:k.value.changed());e.watch(L,l=>n("modified-data",l)),t.readResource&&!t.isCreate?b():t.isCreate&&(i.value=!0,u.value=!0,o.value=!1);const le=(l,r)=>{if(o.value=!1,s.value=r.httpStatus,!r.success){c.value=!0,n("error",r.httpStatus);return}c.value=!0,n("drop",r)},oe=(l,r)=>{if(w.value){if(o.value=!1,s.value=r.httpStatus,!r.success){c.value=!0,n("error",r.httpStatus);return}c.value=!0}let C=t.isCreate?"create":"update";t.isCreate||k.value.turnStoredIntoOriginal(),r.autoReloadId&&(t.readData.id=r.autoReloadId,b()),n(C,r)},V=()=>{o.value=!0,s.value=-1},_=()=>{o.value=!1};g({doDrop:()=>{v.value&&typeof v.value.click=="function"&&v.value.click()},doRefresh:b,doSave:()=>{h.value&&typeof h.value.click=="function"&&h.value.click()}});const q=e.computed(()=>!t.hiddenDrop&&!o.value&&u.value&&i.value),N=e.computed(()=>!t.hiddenSave&&!o.value&&u.value&&i.value),R=e.computed(()=>!o.value&&!t.isCreate&&i.value),re=e.computed(()=>!t.hiddenButtons&&(N.value||q.value||R.value));return(l,r)=>{const C=e.resolveComponent("lkt-button"),de=e.resolveComponent("lkt-field-switch"),I=e.resolveComponent("lkt-http-info"),ne=e.resolveComponent("lkt-loader");return e.openBlock(),e.createElementBlock("article",U,[ae.value?(e.openBlock(),e.createElementBlock("header",H,[e.createElementVNode("h1",J,e.toDisplayString(a.title),1),e.createElementVNode("div",A,[e.renderSlot(l.$slots,"post-title",{item:d.value,loading:o.value})])])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("div",F,[a.isCreate?e.createCommentVNode("",!0):e.withDirectives((e.openBlock(),e.createBlock(C,{key:0,ref:f=>v.value=f,palette:"danger",disabled:a.dropDisabled||!y.value,"confirm-modal":a.dropConfirm,resource:a.dropResource,"resource-data":a.dropData,onLoading:V,onLoaded:_,onClick:le},{default:e.withCtx(()=>[e.unref(D)["button-drop"]?e.renderSlot(l.$slots,"button-drop",{key:0,item:d.value,editMode:u.value,isCreate:a.isCreate,canUpdate:S.value,canDrop:y.value}):(e.openBlock(),e.createElementBlock("span",P,e.toDisplayString(a.dropText),1))]),_:3},8,["disabled","confirm-modal","resource","resource-data"])),[[e.vShow,q.value]]),e.withDirectives(e.createVNode(C,{ref:f=>h.value=f,palette:"success",disabled:!L.value,"confirm-modal":Z.value,resource:w.value,"resource-data":ee.value,onLoading:V,onLoaded:_,onClick:oe},{default:e.withCtx(()=>[e.unref(D)["button-save"]?e.renderSlot(l.$slots,"button-save",{key:0,item:d.value,editMode:u.value,isCreate:a.isCreate,canUpdate:S.value,canDrop:y.value}):(e.openBlock(),e.createElementBlock("span",z,e.toDisplayString(a.saveText),1))]),_:3},8,["disabled","confirm-modal","resource","resource-data"]),[[e.vShow,N.value]]),e.withDirectives(e.createVNode(de,{modelValue:u.value,"onUpdate:modelValue":r[0]||(r[0]=f=>u.value=f),label:a.editModeText},null,8,["modelValue","label"]),[[e.vShow,R.value]])],512),[[e.vShow,re.value]]),o.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",G,[i.value?(e.openBlock(),e.createElementBlock("div",K,[c.value?(e.openBlock(),e.createBlock(I,{key:0,code:s.value,quick:"",palette:s.value===200?"success":"danger","can-close":"",onClose:r[1]||(r[1]=f=>c.value=!1)},null,8,["code","palette"])):e.createCommentVNode("",!0),e.renderSlot(l.$slots,"item",{item:d.value,loading:o.value,editMode:u.value,isCreate:a.isCreate,canUpdate:S.value,canDrop:y.value})])):(e.openBlock(),e.createBlock(I,{key:1,code:s.value},null,8,["code"]))])),o.value?(e.openBlock(),e.createBlock(ne,{key:2})):e.createCommentVNode("",!0)])}}}),se="";return{install:(a,g={})=>{a.component("lkt-item-crud")===void 0&&a.component("lkt-item-crud",W),a.component("lkt-button")===void 0&&a.use(M.default),a.component("lkt-http-info")===void 0&&a.use(j.default),a.component("lkt-loader")===void 0&&a.use($.default)}}});
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.lkt-item-crud
|
|
1
|
+
.lkt-item-crud{display:flex;flex-direction:column;gap:var(--gap)}.lkt-item-crud_content{display:flex;flex-direction:column;gap:15px}.lkt-item-crud-buttons{position:sticky;top:calc(-1 * var(--gap));display:flex;align-items:center;gap:var(--gap);transition:all linear .15s;background:#ffffff;z-index:2}.lkt-item-crud-buttons>:last-child{margin-left:auto}
|
|
@@ -21,6 +21,18 @@ declare const _default: {
|
|
|
21
21
|
type: StringConstructor;
|
|
22
22
|
default: string;
|
|
23
23
|
};
|
|
24
|
+
hiddenSave: {
|
|
25
|
+
type: BooleanConstructor;
|
|
26
|
+
default: boolean;
|
|
27
|
+
};
|
|
28
|
+
hiddenDrop: {
|
|
29
|
+
type: BooleanConstructor;
|
|
30
|
+
default: boolean;
|
|
31
|
+
};
|
|
32
|
+
hiddenButtons: {
|
|
33
|
+
type: BooleanConstructor;
|
|
34
|
+
default: boolean;
|
|
35
|
+
};
|
|
24
36
|
readResource: {
|
|
25
37
|
type: StringConstructor;
|
|
26
38
|
required: false;
|
|
@@ -125,6 +137,18 @@ declare const _default: {
|
|
|
125
137
|
type: StringConstructor;
|
|
126
138
|
default: string;
|
|
127
139
|
};
|
|
140
|
+
hiddenSave: {
|
|
141
|
+
type: BooleanConstructor;
|
|
142
|
+
default: boolean;
|
|
143
|
+
};
|
|
144
|
+
hiddenDrop: {
|
|
145
|
+
type: BooleanConstructor;
|
|
146
|
+
default: boolean;
|
|
147
|
+
};
|
|
148
|
+
hiddenButtons: {
|
|
149
|
+
type: BooleanConstructor;
|
|
150
|
+
default: boolean;
|
|
151
|
+
};
|
|
128
152
|
readResource: {
|
|
129
153
|
type: StringConstructor;
|
|
130
154
|
required: false;
|
|
@@ -209,6 +233,9 @@ declare const _default: {
|
|
|
209
233
|
editModeText: string;
|
|
210
234
|
saveText: string;
|
|
211
235
|
dropText: string;
|
|
236
|
+
hiddenSave: boolean;
|
|
237
|
+
hiddenDrop: boolean;
|
|
238
|
+
hiddenButtons: boolean;
|
|
212
239
|
readData: Record<string, any>;
|
|
213
240
|
createData: Record<string, any>;
|
|
214
241
|
updateData: Record<string, any>;
|
|
@@ -250,6 +277,18 @@ declare const _default: {
|
|
|
250
277
|
type: StringConstructor;
|
|
251
278
|
default: string;
|
|
252
279
|
};
|
|
280
|
+
hiddenSave: {
|
|
281
|
+
type: BooleanConstructor;
|
|
282
|
+
default: boolean;
|
|
283
|
+
};
|
|
284
|
+
hiddenDrop: {
|
|
285
|
+
type: BooleanConstructor;
|
|
286
|
+
default: boolean;
|
|
287
|
+
};
|
|
288
|
+
hiddenButtons: {
|
|
289
|
+
type: BooleanConstructor;
|
|
290
|
+
default: boolean;
|
|
291
|
+
};
|
|
253
292
|
readResource: {
|
|
254
293
|
type: StringConstructor;
|
|
255
294
|
required: false;
|
|
@@ -338,6 +377,9 @@ declare const _default: {
|
|
|
338
377
|
editModeText: string;
|
|
339
378
|
saveText: string;
|
|
340
379
|
dropText: string;
|
|
380
|
+
hiddenSave: boolean;
|
|
381
|
+
hiddenDrop: boolean;
|
|
382
|
+
hiddenButtons: boolean;
|
|
341
383
|
readData: Record<string, any>;
|
|
342
384
|
createData: Record<string, any>;
|
|
343
385
|
updateData: Record<string, any>;
|
|
@@ -376,6 +418,18 @@ declare const _default: {
|
|
|
376
418
|
type: StringConstructor;
|
|
377
419
|
default: string;
|
|
378
420
|
};
|
|
421
|
+
hiddenSave: {
|
|
422
|
+
type: BooleanConstructor;
|
|
423
|
+
default: boolean;
|
|
424
|
+
};
|
|
425
|
+
hiddenDrop: {
|
|
426
|
+
type: BooleanConstructor;
|
|
427
|
+
default: boolean;
|
|
428
|
+
};
|
|
429
|
+
hiddenButtons: {
|
|
430
|
+
type: BooleanConstructor;
|
|
431
|
+
default: boolean;
|
|
432
|
+
};
|
|
379
433
|
readResource: {
|
|
380
434
|
type: StringConstructor;
|
|
381
435
|
required: false;
|
|
@@ -464,6 +518,9 @@ declare const _default: {
|
|
|
464
518
|
editModeText: string;
|
|
465
519
|
saveText: string;
|
|
466
520
|
dropText: string;
|
|
521
|
+
hiddenSave: boolean;
|
|
522
|
+
hiddenDrop: boolean;
|
|
523
|
+
hiddenButtons: boolean;
|
|
467
524
|
readData: Record<string, any>;
|
|
468
525
|
createData: Record<string, any>;
|
|
469
526
|
updateData: Record<string, any>;
|
package/package.json
CHANGED
|
@@ -14,6 +14,9 @@ const props = defineProps({
|
|
|
14
14
|
editModeText: {type: String, default: 'Edition Mode'},
|
|
15
15
|
saveText: {type: String, default: 'Save'},
|
|
16
16
|
dropText: {type: String, default: 'Delete'},
|
|
17
|
+
hiddenSave: {type: Boolean, default: false},
|
|
18
|
+
hiddenDrop: {type: Boolean, default: false},
|
|
19
|
+
hiddenButtons: {type: Boolean, default: false},
|
|
17
20
|
|
|
18
21
|
readResource: {type: String, required: false},
|
|
19
22
|
createResource: {type: String, required: false},
|
|
@@ -198,6 +201,27 @@ defineExpose({
|
|
|
198
201
|
doRefresh: fetchItem,
|
|
199
202
|
doSave
|
|
200
203
|
});
|
|
204
|
+
|
|
205
|
+
const showDropButton = computed(() => {
|
|
206
|
+
return !props.hiddenDrop
|
|
207
|
+
&& !isLoading.value
|
|
208
|
+
&& editMode.value
|
|
209
|
+
&& httpSuccessRead.value;
|
|
210
|
+
}),
|
|
211
|
+
showSaveButton = computed(() => {
|
|
212
|
+
return !props.hiddenSave
|
|
213
|
+
&& !isLoading.value
|
|
214
|
+
&& editMode.value
|
|
215
|
+
&& httpSuccessRead.value;
|
|
216
|
+
}),
|
|
217
|
+
showSwitchButton = computed(() => {
|
|
218
|
+
return !isLoading.value
|
|
219
|
+
&& !props.isCreate
|
|
220
|
+
&& httpSuccessRead.value;
|
|
221
|
+
}),
|
|
222
|
+
showButtons = computed(() => {
|
|
223
|
+
return !props.hiddenButtons && (showSaveButton.value || showDropButton.value || showSwitchButton.value);
|
|
224
|
+
})
|
|
201
225
|
</script>
|
|
202
226
|
|
|
203
227
|
<template>
|
|
@@ -208,10 +232,10 @@ defineExpose({
|
|
|
208
232
|
<slot name="post-title" v-bind:item="item" v-bind:loading="isLoading"></slot>
|
|
209
233
|
</div>
|
|
210
234
|
</header>
|
|
211
|
-
<div class="lkt-item-crud-buttons" v-show="
|
|
235
|
+
<div class="lkt-item-crud-buttons" v-show="showButtons">
|
|
212
236
|
<lkt-button
|
|
213
237
|
:ref="(el:any) => dropButton = el"
|
|
214
|
-
v-show="
|
|
238
|
+
v-show="showDropButton"
|
|
215
239
|
v-if="!isCreate"
|
|
216
240
|
palette="danger"
|
|
217
241
|
v-bind:disabled="dropDisabled || !canDrop"
|
|
@@ -223,15 +247,15 @@ defineExpose({
|
|
|
223
247
|
v-on:click="onDrop">
|
|
224
248
|
<slot v-if="!!slots['button-drop']" name="button-drop" v-bind:item="item"
|
|
225
249
|
v-bind:edit-mode="editMode"
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
250
|
+
v-bind:is-create="isCreate"
|
|
251
|
+
v-bind:can-update="canUpdate"
|
|
252
|
+
v-bind:can-drop="canDrop"></slot>
|
|
229
253
|
<span v-else>{{ dropText }}</span>
|
|
230
254
|
</lkt-button>
|
|
231
255
|
|
|
232
256
|
<lkt-button
|
|
233
257
|
:ref="(el:any) => saveButton = el"
|
|
234
|
-
v-show="
|
|
258
|
+
v-show="showSaveButton"
|
|
235
259
|
palette="success"
|
|
236
260
|
v-bind:disabled="!ableToSave"
|
|
237
261
|
v-bind:confirm-modal="saveConfirm"
|
|
@@ -242,14 +266,14 @@ defineExpose({
|
|
|
242
266
|
v-on:click="onSave">
|
|
243
267
|
<slot v-if="!!slots['button-save']" name="button-save" v-bind:item="item"
|
|
244
268
|
v-bind:edit-mode="editMode"
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
269
|
+
v-bind:is-create="isCreate"
|
|
270
|
+
v-bind:can-update="canUpdate"
|
|
271
|
+
v-bind:can-drop="canDrop"></slot>
|
|
248
272
|
<span v-else>{{ saveText }}</span>
|
|
249
273
|
</lkt-button>
|
|
250
274
|
|
|
251
275
|
<lkt-field-switch
|
|
252
|
-
v-show="
|
|
276
|
+
v-show="showSwitchButton" v-model="editMode"
|
|
253
277
|
:label="editModeText"></lkt-field-switch>
|
|
254
278
|
</div>
|
|
255
279
|
<div class="lkt-item-crud_content" v-if="!isLoading">
|
|
@@ -258,9 +282,9 @@ defineExpose({
|
|
|
258
282
|
:palette="httpStatus === 200 ? 'success' : 'danger'" can-close
|
|
259
283
|
v-on:close="showStoreMessage = false"></lkt-http-info>
|
|
260
284
|
<slot name="item" v-bind:item="item" v-bind:loading="isLoading" v-bind:edit-mode="editMode"
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
285
|
+
v-bind:is-create="isCreate"
|
|
286
|
+
v-bind:can-update="canUpdate"
|
|
287
|
+
v-bind:can-drop="canDrop"></slot>
|
|
264
288
|
</div>
|
|
265
289
|
<lkt-http-info :code="httpStatus" v-else></lkt-http-info>
|
|
266
290
|
</div>
|