lkt-item-crud 1.0.7 → 1.0.9
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,24 +1,27 @@
|
|
|
1
|
-
import { defineComponent as Z, useSlots as ee, ref as d, computed as v, watch as R, resolveComponent as V, openBlock as i, createElementBlock as
|
|
1
|
+
import { defineComponent as Z, useSlots as ee, ref as d, computed as v, watch as R, resolveComponent as V, openBlock as i, createElementBlock as p, createElementVNode as I, toDisplayString as M, renderSlot as L, createCommentVNode as C, withDirectives as B, createBlock as _, withCtx as J, unref as E, vShow as q, createVNode as H } from "vue";
|
|
2
2
|
import { httpCall as te } from "lkt-http-client";
|
|
3
3
|
import { DataState as ae } from "lkt-data-state";
|
|
4
|
-
|
|
4
|
+
import le from "lkt-button";
|
|
5
|
+
import ue from "lkt-http-info";
|
|
6
|
+
import re from "lkt-loader";
|
|
7
|
+
const oe = { class: "lkt-item-crud" }, se = {
|
|
5
8
|
key: 0,
|
|
6
9
|
class: "lkt-item-crud_header"
|
|
7
|
-
},
|
|
10
|
+
}, de = { class: "lkt-item-crud_header-title" }, ie = { class: "lkt-item-crud_header-slot" }, ne = { class: "lkt-item-crud-buttons" }, ce = { key: 1 }, ve = { key: 1 }, fe = {
|
|
8
11
|
key: 1,
|
|
9
12
|
class: "lkt-item-crud_content"
|
|
10
|
-
},
|
|
13
|
+
}, me = {
|
|
11
14
|
key: 0,
|
|
12
15
|
class: "lkt-grid-1"
|
|
13
|
-
},
|
|
14
|
-
...
|
|
16
|
+
}, pe = { name: "LktItemCrud", inheritAttrs: !1 }, ke = /* @__PURE__ */ Z({
|
|
17
|
+
...pe,
|
|
15
18
|
props: {
|
|
16
19
|
modelValue: { type: Object, required: !1, default: () => ({}) },
|
|
17
20
|
title: { type: String, default: "" },
|
|
18
21
|
editModeText: { type: String, default: "Edition Mode" },
|
|
19
22
|
saveText: { type: String, default: "Save" },
|
|
20
23
|
dropText: { type: String, default: "Delete" },
|
|
21
|
-
readResource: { type: String, required: !
|
|
24
|
+
readResource: { type: String, required: !1 },
|
|
22
25
|
createResource: { type: String, required: !1 },
|
|
23
26
|
updateResource: { type: String, required: !1 },
|
|
24
27
|
dropResource: { type: String, required: !1 },
|
|
@@ -36,47 +39,49 @@ const le = { class: "lkt-item-crud" }, ue = {
|
|
|
36
39
|
saveValidator: { type: Function, required: !1, default: () => !0 }
|
|
37
40
|
},
|
|
38
41
|
emits: ["update:modelValue", "read", "create", "update", "drop", "perms", "error", "modified-data"],
|
|
39
|
-
setup(
|
|
40
|
-
const e =
|
|
42
|
+
setup(t, { expose: N, emit: A }) {
|
|
43
|
+
const e = t, O = ee(), o = A;
|
|
41
44
|
let F = [];
|
|
42
|
-
const l = d(!0), r = d(e.modelValue),
|
|
45
|
+
const l = d(!0), r = d(e.modelValue), k = d(F), c = d(!1), n = d(!1), f = d(!1), s = d(200), S = d(null), h = d(null), y = d(new ae(r.value)), P = v(() => e.isCreate ? e.createConfirm : e.updateConfirm), T = v(() => e.isCreate ? e.createResource : e.updateResource), z = v(() => e.isCreate ? { ...e.createData, ...JSON.parse(JSON.stringify(r.value)) } : { ...e.updateData, ...JSON.parse(JSON.stringify(r.value)) }), G = v(() => e.isCreate ? e.createDisabled : e.updateDisabled), b = v(() => !e.isCreate && k.value.includes("update")), D = v(() => !e.isCreate && k.value.includes("drop")), w = async () => {
|
|
43
46
|
l.value = !0, s.value = -1, f.value = !1;
|
|
44
47
|
try {
|
|
45
|
-
const
|
|
46
|
-
if (l.value = !1, s.value =
|
|
47
|
-
n.value = !1, s.value =
|
|
48
|
+
const a = await te(e.readResource, e.readData);
|
|
49
|
+
if (l.value = !1, s.value = a.httpStatus, !a.success) {
|
|
50
|
+
n.value = !1, s.value = a.httpStatus, o("error", a.httpStatus);
|
|
48
51
|
return;
|
|
49
52
|
}
|
|
50
|
-
n.value = !0, r.value =
|
|
53
|
+
n.value = !0, r.value = a.data, k.value = a.perms, y.value.increment(r.value).turnStoredIntoOriginal(), o("read", a);
|
|
51
54
|
} catch {
|
|
52
55
|
l.value = !1, n.value = !1, s.value = 404, o("error", 404);
|
|
53
56
|
return;
|
|
54
57
|
}
|
|
55
|
-
}, K = v(() => l.value ? !1 : e.title || !!
|
|
56
|
-
R(() => e.modelValue, (
|
|
57
|
-
r.value =
|
|
58
|
-
}, { deep: !0 }), R(r, (
|
|
59
|
-
o("update:modelValue", r.value),
|
|
60
|
-
}, { deep: !0 }), R(
|
|
61
|
-
const
|
|
62
|
-
R(
|
|
63
|
-
const Q = (
|
|
58
|
+
}, K = v(() => l.value ? !1 : e.title || !!O["post-title"]);
|
|
59
|
+
R(() => e.modelValue, (a) => {
|
|
60
|
+
r.value = a, y.value.increment(a);
|
|
61
|
+
}, { deep: !0 }), R(r, (a) => {
|
|
62
|
+
o("update:modelValue", r.value), y.value.increment(a);
|
|
63
|
+
}, { deep: !0 }), R(k, () => o("perms", k.value));
|
|
64
|
+
const $ = v(() => G.value || !e.isCreate && !b.value || typeof e.saveValidator == "function" && !e.saveValidator(r.value) ? !1 : y.value.changed());
|
|
65
|
+
R($, (a) => o("modified-data", a)), e.readResource && !e.isCreate ? w() : e.isCreate && (n.value = !0, c.value = !0, l.value = !1);
|
|
66
|
+
const Q = (a, u) => {
|
|
64
67
|
if (l.value = !1, s.value = u.httpStatus, !u.success) {
|
|
65
68
|
f.value = !0, o("error", u.httpStatus);
|
|
66
69
|
return;
|
|
67
70
|
}
|
|
68
71
|
f.value = !0, o("drop", u);
|
|
69
|
-
}, W = (
|
|
70
|
-
if (
|
|
71
|
-
|
|
72
|
-
|
|
72
|
+
}, W = (a, u) => {
|
|
73
|
+
if (T.value) {
|
|
74
|
+
if (l.value = !1, s.value = u.httpStatus, !u.success) {
|
|
75
|
+
f.value = !0, o("error", u.httpStatus);
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
f.value = !0;
|
|
73
79
|
}
|
|
74
|
-
f.value = !0;
|
|
75
80
|
let g = e.isCreate ? "create" : "update";
|
|
76
|
-
e.isCreate ||
|
|
77
|
-
}, $ = () => {
|
|
78
|
-
l.value = !0, s.value = -1;
|
|
81
|
+
e.isCreate || y.value.turnStoredIntoOriginal(), u.autoReloadId && (e.readData.id = u.autoReloadId, w()), o(g, u);
|
|
79
82
|
}, x = () => {
|
|
83
|
+
l.value = !0, s.value = -1;
|
|
84
|
+
}, j = () => {
|
|
80
85
|
l.value = !1;
|
|
81
86
|
};
|
|
82
87
|
return N({
|
|
@@ -87,113 +92,113 @@ const le = { class: "lkt-item-crud" }, ue = {
|
|
|
87
92
|
doSave: () => {
|
|
88
93
|
S.value && typeof S.value.click == "function" && S.value.click();
|
|
89
94
|
}
|
|
90
|
-
}), (
|
|
91
|
-
const g = V("lkt-button"), X = V("lkt-field-switch"),
|
|
92
|
-
return i(),
|
|
93
|
-
K.value ? (i(),
|
|
94
|
-
I("h1",
|
|
95
|
-
I("div",
|
|
96
|
-
|
|
95
|
+
}), (a, u) => {
|
|
96
|
+
const g = V("lkt-button"), X = V("lkt-field-switch"), U = V("lkt-http-info"), Y = V("lkt-loader");
|
|
97
|
+
return i(), p("article", oe, [
|
|
98
|
+
K.value ? (i(), p("header", se, [
|
|
99
|
+
I("h1", de, M(t.title), 1),
|
|
100
|
+
I("div", ie, [
|
|
101
|
+
L(a.$slots, "post-title", {
|
|
97
102
|
item: r.value,
|
|
98
103
|
loading: l.value
|
|
99
104
|
})
|
|
100
105
|
])
|
|
101
106
|
])) : C("", !0),
|
|
102
|
-
|
|
103
|
-
|
|
107
|
+
B(I("div", ne, [
|
|
108
|
+
t.isCreate ? C("", !0) : B((i(), _(g, {
|
|
104
109
|
key: 0,
|
|
105
|
-
ref: (
|
|
110
|
+
ref: (m) => h.value = m,
|
|
106
111
|
palette: "danger",
|
|
107
|
-
disabled:
|
|
108
|
-
"confirm-modal":
|
|
109
|
-
resource:
|
|
110
|
-
"resource-data":
|
|
111
|
-
onLoading:
|
|
112
|
-
onLoaded:
|
|
112
|
+
disabled: t.dropDisabled || !D.value,
|
|
113
|
+
"confirm-modal": t.dropConfirm,
|
|
114
|
+
resource: t.dropResource,
|
|
115
|
+
"resource-data": t.dropData,
|
|
116
|
+
onLoading: x,
|
|
117
|
+
onLoaded: j,
|
|
113
118
|
onClick: Q
|
|
114
119
|
}, {
|
|
115
|
-
default:
|
|
116
|
-
|
|
120
|
+
default: J(() => [
|
|
121
|
+
E(O)["button-drop"] ? L(a.$slots, "button-drop", {
|
|
117
122
|
key: 0,
|
|
118
123
|
item: r.value,
|
|
119
124
|
editMode: c.value,
|
|
120
|
-
isCreate:
|
|
121
|
-
canUpdate:
|
|
122
|
-
canDrop:
|
|
123
|
-
}) : (i(),
|
|
125
|
+
isCreate: t.isCreate,
|
|
126
|
+
canUpdate: b.value,
|
|
127
|
+
canDrop: D.value
|
|
128
|
+
}) : (i(), p("span", ce, M(t.dropText), 1))
|
|
124
129
|
]),
|
|
125
130
|
_: 3
|
|
126
131
|
}, 8, ["disabled", "confirm-modal", "resource", "resource-data"])), [
|
|
127
|
-
[
|
|
132
|
+
[q, !l.value && c.value && n.value]
|
|
128
133
|
]),
|
|
129
|
-
|
|
130
|
-
ref: (
|
|
134
|
+
B(H(g, {
|
|
135
|
+
ref: (m) => S.value = m,
|
|
131
136
|
palette: "success",
|
|
132
|
-
disabled:
|
|
133
|
-
"confirm-modal":
|
|
134
|
-
resource:
|
|
137
|
+
disabled: !$.value,
|
|
138
|
+
"confirm-modal": P.value,
|
|
139
|
+
resource: T.value,
|
|
135
140
|
"resource-data": z.value,
|
|
136
|
-
onLoading:
|
|
137
|
-
onLoaded:
|
|
141
|
+
onLoading: x,
|
|
142
|
+
onLoaded: j,
|
|
138
143
|
onClick: W
|
|
139
144
|
}, {
|
|
140
|
-
default:
|
|
141
|
-
|
|
145
|
+
default: J(() => [
|
|
146
|
+
E(O)["button-save"] ? L(a.$slots, "button-save", {
|
|
142
147
|
key: 0,
|
|
143
148
|
item: r.value,
|
|
144
149
|
editMode: c.value,
|
|
145
|
-
isCreate:
|
|
146
|
-
canUpdate:
|
|
147
|
-
canDrop:
|
|
148
|
-
}) : (i(),
|
|
150
|
+
isCreate: t.isCreate,
|
|
151
|
+
canUpdate: b.value,
|
|
152
|
+
canDrop: D.value
|
|
153
|
+
}) : (i(), p("span", ve, M(t.saveText), 1))
|
|
149
154
|
]),
|
|
150
155
|
_: 3
|
|
151
156
|
}, 8, ["disabled", "confirm-modal", "resource", "resource-data"]), [
|
|
152
|
-
[
|
|
157
|
+
[q, !l.value && c.value && n.value]
|
|
153
158
|
]),
|
|
154
|
-
|
|
159
|
+
B(H(X, {
|
|
155
160
|
modelValue: c.value,
|
|
156
|
-
"onUpdate:modelValue": u[0] || (u[0] = (
|
|
157
|
-
label:
|
|
161
|
+
"onUpdate:modelValue": u[0] || (u[0] = (m) => c.value = m),
|
|
162
|
+
label: t.editModeText
|
|
158
163
|
}, null, 8, ["modelValue", "label"]), [
|
|
159
|
-
[
|
|
164
|
+
[q, !l.value && n.value && !t.isCreate]
|
|
160
165
|
])
|
|
161
166
|
], 512), [
|
|
162
|
-
[
|
|
167
|
+
[q, n.value]
|
|
163
168
|
]),
|
|
164
|
-
l.value ? C("", !0) : (i(),
|
|
165
|
-
n.value ? (i(),
|
|
166
|
-
f.value ? (i(),
|
|
169
|
+
l.value ? C("", !0) : (i(), p("div", fe, [
|
|
170
|
+
n.value ? (i(), p("div", me, [
|
|
171
|
+
f.value ? (i(), _(U, {
|
|
167
172
|
key: 0,
|
|
168
173
|
code: s.value,
|
|
169
174
|
quick: "",
|
|
170
175
|
palette: s.value === 200 ? "success" : "danger",
|
|
171
176
|
"can-close": "",
|
|
172
|
-
onClose: u[1] || (u[1] = (
|
|
177
|
+
onClose: u[1] || (u[1] = (m) => f.value = !1)
|
|
173
178
|
}, null, 8, ["code", "palette"])) : C("", !0),
|
|
174
|
-
|
|
179
|
+
L(a.$slots, "item", {
|
|
175
180
|
item: r.value,
|
|
176
181
|
loading: l.value,
|
|
177
182
|
editMode: c.value,
|
|
178
|
-
isCreate:
|
|
179
|
-
canUpdate:
|
|
180
|
-
canDrop:
|
|
183
|
+
isCreate: t.isCreate,
|
|
184
|
+
canUpdate: b.value,
|
|
185
|
+
canDrop: D.value
|
|
181
186
|
})
|
|
182
|
-
])) : (i(),
|
|
187
|
+
])) : (i(), _(U, {
|
|
183
188
|
key: 1,
|
|
184
189
|
code: s.value
|
|
185
190
|
}, null, 8, ["code"]))
|
|
186
191
|
])),
|
|
187
|
-
l.value ? (i(),
|
|
192
|
+
l.value ? (i(), _(Y, { key: 2 })) : C("", !0)
|
|
188
193
|
]);
|
|
189
194
|
};
|
|
190
195
|
}
|
|
191
196
|
});
|
|
192
|
-
const
|
|
193
|
-
install: (
|
|
194
|
-
|
|
197
|
+
const Ve = {
|
|
198
|
+
install: (t, N = {}) => {
|
|
199
|
+
t.component("lkt-item-crud") === void 0 && t.component("lkt-item-crud", ke), t.component("lkt-button") === void 0 && t.use(le), t.component("lkt-http-info") === void 0 && t.use(ue), t.component("lkt-loader") === void 0 && t.use(re);
|
|
195
200
|
}
|
|
196
201
|
};
|
|
197
202
|
export {
|
|
198
|
-
|
|
203
|
+
Ve as default
|
|
199
204
|
};
|
|
@@ -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,
|
|
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,N,R,I,O){"use strict";const D=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},E=D(R),T=D(I),x=D(O),M={class:"lkt-item-crud"},j={key:0,class:"lkt-item-crud_header"},$={class:"lkt-item-crud_header-title"},U={class:"lkt-item-crud_header-slot"},H={class:"lkt-item-crud-buttons"},J={key:1},A={key:1},F={key:1,class:"lkt-item-crud_content"},P={key:0,class:"lkt-grid-1"},z={name:"LktItemCrud",inheritAttrs:!1},G=e.defineComponent({...z,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:!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(t,{expose:g,emit:K}){const a=t,B=e.useSlots(),n=K;let Q=[];const o=e.ref(!0),d=e.ref(a.modelValue),m=e.ref(Q),u=e.ref(!1),i=e.ref(!1),c=e.ref(!1),s=e.ref(200),v=e.ref(null),h=e.ref(null),k=e.ref(new N.DataState(d.value)),W=e.computed(()=>a.isCreate?a.createConfirm:a.updateConfirm),L=e.computed(()=>a.isCreate?a.createResource:a.updateResource),X=e.computed(()=>a.isCreate?{...a.createData,...JSON.parse(JSON.stringify(d.value))}:{...a.updateData,...JSON.parse(JSON.stringify(d.value))}),Y=e.computed(()=>a.isCreate?a.createDisabled:a.updateDisabled),C=e.computed(()=>!a.isCreate&&m.value.includes("update")),y=e.computed(()=>!a.isCreate&&m.value.includes("drop")),b=async()=>{o.value=!0,s.value=-1,c.value=!1;try{const l=await p.httpCall(a.readResource,a.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}},Z=e.computed(()=>o.value?!1:a.title||!!B["post-title"]);e.watch(()=>a.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 V=e.computed(()=>Y.value||!a.isCreate&&!C.value||typeof a.saveValidator=="function"&&!a.saveValidator(d.value)?!1:k.value.changed());e.watch(V,l=>n("modified-data",l)),a.readResource&&!a.isCreate?b():a.isCreate&&(i.value=!0,u.value=!0,o.value=!1);const ee=(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)},te=(l,r)=>{if(L.value){if(o.value=!1,s.value=r.httpStatus,!r.success){c.value=!0,n("error",r.httpStatus);return}c.value=!0}let S=a.isCreate?"create":"update";a.isCreate||k.value.turnStoredIntoOriginal(),r.autoReloadId&&(a.readData.id=r.autoReloadId,b()),n(S,r)},w=()=>{o.value=!0,s.value=-1},_=()=>{o.value=!1};return g({doDrop:()=>{h.value&&typeof h.value.click=="function"&&h.value.click()},doRefresh:b,doSave:()=>{v.value&&typeof v.value.click=="function"&&v.value.click()}}),(l,r)=>{const S=e.resolveComponent("lkt-button"),ae=e.resolveComponent("lkt-field-switch"),q=e.resolveComponent("lkt-http-info"),le=e.resolveComponent("lkt-loader");return e.openBlock(),e.createElementBlock("article",M,[Z.value?(e.openBlock(),e.createElementBlock("header",j,[e.createElementVNode("h1",$,e.toDisplayString(t.title),1),e.createElementVNode("div",U,[e.renderSlot(l.$slots,"post-title",{item:d.value,loading:o.value})])])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("div",H,[t.isCreate?e.createCommentVNode("",!0):e.withDirectives((e.openBlock(),e.createBlock(S,{key:0,ref:f=>h.value=f,palette:"danger",disabled:t.dropDisabled||!y.value,"confirm-modal":t.dropConfirm,resource:t.dropResource,"resource-data":t.dropData,onLoading:w,onLoaded:_,onClick:ee},{default:e.withCtx(()=>[e.unref(B)["button-drop"]?e.renderSlot(l.$slots,"button-drop",{key:0,item:d.value,editMode:u.value,isCreate:t.isCreate,canUpdate:C.value,canDrop:y.value}):(e.openBlock(),e.createElementBlock("span",J,e.toDisplayString(t.dropText),1))]),_:3},8,["disabled","confirm-modal","resource","resource-data"])),[[e.vShow,!o.value&&u.value&&i.value]]),e.withDirectives(e.createVNode(S,{ref:f=>v.value=f,palette:"success",disabled:!V.value,"confirm-modal":W.value,resource:L.value,"resource-data":X.value,onLoading:w,onLoaded:_,onClick:te},{default:e.withCtx(()=>[e.unref(B)["button-save"]?e.renderSlot(l.$slots,"button-save",{key:0,item:d.value,editMode:u.value,isCreate:t.isCreate,canUpdate:C.value,canDrop:y.value}):(e.openBlock(),e.createElementBlock("span",A,e.toDisplayString(t.saveText),1))]),_:3},8,["disabled","confirm-modal","resource","resource-data"]),[[e.vShow,!o.value&&u.value&&i.value]]),e.withDirectives(e.createVNode(ae,{modelValue:u.value,"onUpdate:modelValue":r[0]||(r[0]=f=>u.value=f),label:t.editModeText},null,8,["modelValue","label"]),[[e.vShow,!o.value&&i.value&&!t.isCreate]])],512),[[e.vShow,i.value]]),o.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",F,[i.value?(e.openBlock(),e.createElementBlock("div",P,[c.value?(e.openBlock(),e.createBlock(q,{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:t.isCreate,canUpdate:C.value,canDrop:y.value})])):(e.openBlock(),e.createBlock(q,{key:1,code:s.value},null,8,["code"]))])),o.value?(e.openBlock(),e.createBlock(le,{key:2})):e.createCommentVNode("",!0)])}}}),oe="";return{install:(t,g={})=>{t.component("lkt-item-crud")===void 0&&t.component("lkt-item-crud",G),t.component("lkt-button")===void 0&&t.use(E.default),t.component("lkt-http-info")===void 0&&t.use(T.default),t.component("lkt-loader")===void 0&&t.use(x.default)}}});
|
|
@@ -23,7 +23,7 @@ declare const _default: {
|
|
|
23
23
|
};
|
|
24
24
|
readResource: {
|
|
25
25
|
type: StringConstructor;
|
|
26
|
-
required:
|
|
26
|
+
required: false;
|
|
27
27
|
};
|
|
28
28
|
createResource: {
|
|
29
29
|
type: StringConstructor;
|
|
@@ -127,7 +127,7 @@ declare const _default: {
|
|
|
127
127
|
};
|
|
128
128
|
readResource: {
|
|
129
129
|
type: StringConstructor;
|
|
130
|
-
required:
|
|
130
|
+
required: false;
|
|
131
131
|
};
|
|
132
132
|
createResource: {
|
|
133
133
|
type: StringConstructor;
|
|
@@ -252,7 +252,7 @@ declare const _default: {
|
|
|
252
252
|
};
|
|
253
253
|
readResource: {
|
|
254
254
|
type: StringConstructor;
|
|
255
|
-
required:
|
|
255
|
+
required: false;
|
|
256
256
|
};
|
|
257
257
|
createResource: {
|
|
258
258
|
type: StringConstructor;
|
|
@@ -378,7 +378,7 @@ declare const _default: {
|
|
|
378
378
|
};
|
|
379
379
|
readResource: {
|
|
380
380
|
type: StringConstructor;
|
|
381
|
-
required:
|
|
381
|
+
required: false;
|
|
382
382
|
};
|
|
383
383
|
createResource: {
|
|
384
384
|
type: StringConstructor;
|
package/package.json
CHANGED
package/src/index.ts
CHANGED
|
@@ -2,10 +2,19 @@ import {App} from "vue";
|
|
|
2
2
|
import {default as itemCrud} from "./lib-components/LktItemCrud.vue";
|
|
3
3
|
|
|
4
4
|
import "./../lkt-item-crud.css";
|
|
5
|
+
import LktButton from "lkt-button";
|
|
6
|
+
import LktHttpInfo from "lkt-http-info";
|
|
7
|
+
import LktLoader from "lkt-loader";
|
|
5
8
|
|
|
6
9
|
const LktItemCrud = {
|
|
7
10
|
install: (app: App, options = {}) => {
|
|
8
|
-
|
|
11
|
+
// Register plugin components
|
|
12
|
+
if (app.component('lkt-item-crud') === undefined) app.component('lkt-item-crud', itemCrud);
|
|
13
|
+
|
|
14
|
+
// Register additional components
|
|
15
|
+
if (app.component('lkt-button') === undefined) app.use(LktButton);
|
|
16
|
+
if (app.component('lkt-http-info') === undefined) app.use(LktHttpInfo);
|
|
17
|
+
if (app.component('lkt-loader') === undefined) app.use(LktLoader);
|
|
9
18
|
},
|
|
10
19
|
};
|
|
11
20
|
export default LktItemCrud;
|
|
@@ -15,7 +15,7 @@ const props = defineProps({
|
|
|
15
15
|
saveText: {type: String, default: 'Save'},
|
|
16
16
|
dropText: {type: String, default: 'Delete'},
|
|
17
17
|
|
|
18
|
-
readResource: {type: String, required:
|
|
18
|
+
readResource: {type: String, required: false},
|
|
19
19
|
createResource: {type: String, required: false},
|
|
20
20
|
updateResource: {type: String, required: false},
|
|
21
21
|
dropResource: {type: String, required: false},
|
|
@@ -155,14 +155,16 @@ const onDrop = ($event: PointerEvent, r: HTTPResponse) => {
|
|
|
155
155
|
|
|
156
156
|
},
|
|
157
157
|
onSave = ($event: PointerEvent, r: HTTPResponse) => {
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
158
|
+
if (saveResource.value) {
|
|
159
|
+
isLoading.value = false;
|
|
160
|
+
httpStatus.value = r.httpStatus;
|
|
161
|
+
if (!r.success) {
|
|
162
|
+
showStoreMessage.value = true;
|
|
163
|
+
emit('error', r.httpStatus);
|
|
164
|
+
return;
|
|
165
|
+
}
|
|
161
166
|
showStoreMessage.value = true;
|
|
162
|
-
emit('error', r.httpStatus);
|
|
163
|
-
return;
|
|
164
167
|
}
|
|
165
|
-
showStoreMessage.value = true;
|
|
166
168
|
let emits: 'create' | 'update' = props.isCreate ? 'create' : 'update';
|
|
167
169
|
if (!props.isCreate) {
|
|
168
170
|
dataState.value.turnStoredIntoOriginal();
|
package/lkt-item-crud.css
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
.lkt-item-crud {
|
|
2
|
-
display: flex;
|
|
3
|
-
flex-direction: column;
|
|
4
|
-
gap: 15px;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.lkt-item-crud_content {
|
|
8
|
-
display: flex;
|
|
9
|
-
flex-direction: column;
|
|
10
|
-
gap: 15px;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.lkt-item-crud-buttons {
|
|
14
|
-
position: sticky;
|
|
15
|
-
top: calc(-1 * var(--gap));
|
|
16
|
-
display: flex;
|
|
17
|
-
align-items: center;
|
|
18
|
-
gap: var(--gap);
|
|
19
|
-
transition: all linear .150s;
|
|
20
|
-
background: #ffffff;
|
|
21
|
-
z-index: 2;
|
|
22
|
-
padding: var(--gap) 0;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.lkt-item-crud-buttons > :last-child {
|
|
26
|
-
margin-left: auto;
|
|
27
|
-
}
|