lkt-item-crud 2.0.3 → 2.0.5
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/build.d.ts +6 -6
- package/dist/build.js +279 -235
- package/dist/components/ButtonNav.vue.d.ts +1638 -0
- package/dist/lib-components/LktItemCrud.vue.d.ts +161 -0
- package/package.json +5 -4
- package/src/components/ButtonNav.vue +6 -3
- package/src/lib-components/LktItemCrud.vue +70 -7
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
import { SetupContext } from 'vue';
|
|
2
|
+
import { HTTPResponse } from 'lkt-http-client';
|
|
3
|
+
import { ItemCrudButtonNavPosition, ItemCrudConfig, ItemCrudMode, ItemCrudView, LktObject, NotificationType } from 'lkt-vue-kernel';
|
|
4
|
+
import ButtonNav from '../components/ButtonNav.vue';
|
|
5
|
+
declare const slots: SetupContext['slots'];
|
|
6
|
+
declare const isLoading: import("vue").Ref<boolean, boolean>, item: import("vue").Ref<LktObject, LktObject>, editMode: import("vue").Ref<boolean, boolean>, httpSuccessRead: import("vue").Ref<boolean, boolean>, showStoreMessage: import("vue").Ref<boolean, boolean>, httpStatus: import("vue").Ref<number, number>, dataChanged: import("vue").Ref<boolean, boolean>, createMode: import("vue").Ref<boolean, boolean>, itemBeingEdited: import("vue").Ref<boolean, boolean>, buttonNav: import("vue").Ref<null, null>, canUpdate: import("vue").ComputedRef<boolean>, canDrop: import("vue").ComputedRef<boolean>, canSwitchEditMode: import("vue").ComputedRef<boolean>;
|
|
7
|
+
declare const onCreate: ($event: PointerEvent, r: HTTPResponse) => void, onUpdate: ($event: PointerEvent, r: HTTPResponse) => void, onDrop: ($event: PointerEvent, r: HTTPResponse) => void;
|
|
8
|
+
declare const computedTitle: import("vue").ComputedRef<string>, displayHeader: import("vue").ComputedRef<boolean>, computedInsideModal: import("vue").ComputedRef<boolean>, computedContainerTag: import("vue").ComputedRef<"lkt-modal" | "section">, computedContainerAttrs: import("vue").ComputedRef<{}>;
|
|
9
|
+
declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
|
|
10
|
+
declare var __VLS_6: {
|
|
11
|
+
item: LktObject;
|
|
12
|
+
loading: boolean;
|
|
13
|
+
}, __VLS_8: {
|
|
14
|
+
item: LktObject;
|
|
15
|
+
loading: boolean;
|
|
16
|
+
}, __VLS_21: {}, __VLS_23: {}, __VLS_33: {
|
|
17
|
+
item: LktObject;
|
|
18
|
+
loading: false;
|
|
19
|
+
editMode: boolean;
|
|
20
|
+
isCreate: boolean;
|
|
21
|
+
canUpdate: boolean;
|
|
22
|
+
canDrop: boolean;
|
|
23
|
+
itemBeingEdited: boolean;
|
|
24
|
+
}, __VLS_54: {}, __VLS_56: {};
|
|
25
|
+
type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
|
|
26
|
+
'pre-title'?: (props: typeof __VLS_6) => any;
|
|
27
|
+
} & {
|
|
28
|
+
'post-title'?: (props: typeof __VLS_8) => any;
|
|
29
|
+
} & {
|
|
30
|
+
'prev-buttons-ever'?: (props: typeof __VLS_21) => any;
|
|
31
|
+
} & {
|
|
32
|
+
'prev-buttons'?: (props: typeof __VLS_23) => any;
|
|
33
|
+
} & {
|
|
34
|
+
item?: (props: typeof __VLS_33) => any;
|
|
35
|
+
} & {
|
|
36
|
+
'prev-buttons-ever'?: (props: typeof __VLS_54) => any;
|
|
37
|
+
} & {
|
|
38
|
+
'prev-buttons'?: (props: typeof __VLS_56) => any;
|
|
39
|
+
}>;
|
|
40
|
+
declare const __VLS_self: import("vue").DefineComponent<ItemCrudConfig, {
|
|
41
|
+
ItemCrudButtonNavPosition: typeof ItemCrudButtonNavPosition;
|
|
42
|
+
NotificationType: typeof NotificationType;
|
|
43
|
+
ButtonNav: typeof ButtonNav;
|
|
44
|
+
slots: typeof slots;
|
|
45
|
+
isLoading: typeof isLoading;
|
|
46
|
+
item: typeof item;
|
|
47
|
+
editMode: typeof editMode;
|
|
48
|
+
httpSuccessRead: typeof httpSuccessRead;
|
|
49
|
+
showStoreMessage: typeof showStoreMessage;
|
|
50
|
+
httpStatus: typeof httpStatus;
|
|
51
|
+
dataChanged: typeof dataChanged;
|
|
52
|
+
createMode: typeof createMode;
|
|
53
|
+
itemBeingEdited: typeof itemBeingEdited;
|
|
54
|
+
buttonNav: typeof buttonNav;
|
|
55
|
+
canUpdate: typeof canUpdate;
|
|
56
|
+
canDrop: typeof canDrop;
|
|
57
|
+
canSwitchEditMode: typeof canSwitchEditMode;
|
|
58
|
+
onCreate: typeof onCreate;
|
|
59
|
+
onUpdate: typeof onUpdate;
|
|
60
|
+
onDrop: typeof onDrop;
|
|
61
|
+
computedTitle: typeof computedTitle;
|
|
62
|
+
displayHeader: typeof displayHeader;
|
|
63
|
+
computedInsideModal: typeof computedInsideModal;
|
|
64
|
+
computedContainerTag: typeof computedContainerTag;
|
|
65
|
+
computedContainerAttrs: typeof computedContainerAttrs;
|
|
66
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
67
|
+
error: (...args: any[]) => void;
|
|
68
|
+
drop: (...args: any[]) => void;
|
|
69
|
+
update: (...args: any[]) => void;
|
|
70
|
+
create: (...args: any[]) => void;
|
|
71
|
+
read: (...args: any[]) => void;
|
|
72
|
+
perms: (...args: any[]) => void;
|
|
73
|
+
"update:editing": (...args: any[]) => void;
|
|
74
|
+
"update:modelValue": (...args: any[]) => void;
|
|
75
|
+
"before-save": (...args: any[]) => void;
|
|
76
|
+
"modified-data": (...args: any[]) => void;
|
|
77
|
+
}, string, import("vue").PublicProps, Readonly<ItemCrudConfig> & Readonly<{
|
|
78
|
+
onError?: ((...args: any[]) => any) | undefined;
|
|
79
|
+
onDrop?: ((...args: any[]) => any) | undefined;
|
|
80
|
+
onUpdate?: ((...args: any[]) => any) | undefined;
|
|
81
|
+
onCreate?: ((...args: any[]) => any) | undefined;
|
|
82
|
+
onRead?: ((...args: any[]) => any) | undefined;
|
|
83
|
+
onPerms?: ((...args: any[]) => any) | undefined;
|
|
84
|
+
"onUpdate:editing"?: ((...args: any[]) => any) | undefined;
|
|
85
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
86
|
+
"onBefore-save"?: ((...args: any[]) => any) | undefined;
|
|
87
|
+
"onModified-data"?: ((...args: any[]) => any) | undefined;
|
|
88
|
+
}>, {
|
|
89
|
+
view: ItemCrudView;
|
|
90
|
+
title: string;
|
|
91
|
+
mode: ItemCrudMode;
|
|
92
|
+
modelValue: LktObject;
|
|
93
|
+
editing: boolean;
|
|
94
|
+
editModeButton: import("lkt-vue-kernel").ButtonConfig;
|
|
95
|
+
dropButton: import("lkt-vue-kernel").ButtonConfig;
|
|
96
|
+
createButton: import("lkt-vue-kernel").ButtonConfig;
|
|
97
|
+
updateButton: import("lkt-vue-kernel").ButtonConfig;
|
|
98
|
+
buttonNavPosition: ItemCrudButtonNavPosition;
|
|
99
|
+
buttonNavVisibility: import("lkt-vue-kernel").ItemCrudButtonNavVisibility;
|
|
100
|
+
modalConfig: import("lkt-vue-kernel").ModalConfig;
|
|
101
|
+
saveConfig: import("lkt-vue-kernel").SaveConfig;
|
|
102
|
+
dataStateConfig: import("lkt-data-state").DataStateConfig;
|
|
103
|
+
readResource: string;
|
|
104
|
+
readData: LktObject;
|
|
105
|
+
beforeEmitUpdate: Function;
|
|
106
|
+
notificationType: NotificationType;
|
|
107
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
108
|
+
declare const __VLS_component: import("vue").DefineComponent<ItemCrudConfig, {
|
|
109
|
+
doDrop: () => void;
|
|
110
|
+
doRefresh: () => Promise<void>;
|
|
111
|
+
doSave: () => void;
|
|
112
|
+
hasModifiedData: () => boolean;
|
|
113
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
114
|
+
error: (...args: any[]) => void;
|
|
115
|
+
drop: (...args: any[]) => void;
|
|
116
|
+
update: (...args: any[]) => void;
|
|
117
|
+
create: (...args: any[]) => void;
|
|
118
|
+
read: (...args: any[]) => void;
|
|
119
|
+
perms: (...args: any[]) => void;
|
|
120
|
+
"update:editing": (...args: any[]) => void;
|
|
121
|
+
"update:modelValue": (...args: any[]) => void;
|
|
122
|
+
"before-save": (...args: any[]) => void;
|
|
123
|
+
"modified-data": (...args: any[]) => void;
|
|
124
|
+
}, string, import("vue").PublicProps, Readonly<ItemCrudConfig> & Readonly<{
|
|
125
|
+
onError?: ((...args: any[]) => any) | undefined;
|
|
126
|
+
onDrop?: ((...args: any[]) => any) | undefined;
|
|
127
|
+
onUpdate?: ((...args: any[]) => any) | undefined;
|
|
128
|
+
onCreate?: ((...args: any[]) => any) | undefined;
|
|
129
|
+
onRead?: ((...args: any[]) => any) | undefined;
|
|
130
|
+
onPerms?: ((...args: any[]) => any) | undefined;
|
|
131
|
+
"onUpdate:editing"?: ((...args: any[]) => any) | undefined;
|
|
132
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
133
|
+
"onBefore-save"?: ((...args: any[]) => any) | undefined;
|
|
134
|
+
"onModified-data"?: ((...args: any[]) => any) | undefined;
|
|
135
|
+
}>, {
|
|
136
|
+
view: ItemCrudView;
|
|
137
|
+
title: string;
|
|
138
|
+
mode: ItemCrudMode;
|
|
139
|
+
modelValue: LktObject;
|
|
140
|
+
editing: boolean;
|
|
141
|
+
editModeButton: import("lkt-vue-kernel").ButtonConfig;
|
|
142
|
+
dropButton: import("lkt-vue-kernel").ButtonConfig;
|
|
143
|
+
createButton: import("lkt-vue-kernel").ButtonConfig;
|
|
144
|
+
updateButton: import("lkt-vue-kernel").ButtonConfig;
|
|
145
|
+
buttonNavPosition: ItemCrudButtonNavPosition;
|
|
146
|
+
buttonNavVisibility: import("lkt-vue-kernel").ItemCrudButtonNavVisibility;
|
|
147
|
+
modalConfig: import("lkt-vue-kernel").ModalConfig;
|
|
148
|
+
saveConfig: import("lkt-vue-kernel").SaveConfig;
|
|
149
|
+
dataStateConfig: import("lkt-data-state").DataStateConfig;
|
|
150
|
+
readResource: string;
|
|
151
|
+
readData: LktObject;
|
|
152
|
+
beforeEmitUpdate: Function;
|
|
153
|
+
notificationType: NotificationType;
|
|
154
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
155
|
+
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
|
|
156
|
+
export default _default;
|
|
157
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
158
|
+
new (): {
|
|
159
|
+
$slots: S;
|
|
160
|
+
};
|
|
161
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "lkt-item-crud",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.5",
|
|
4
4
|
"description": "",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"module": "./dist/build.js",
|
|
@@ -37,6 +37,8 @@
|
|
|
37
37
|
"vue-tsc": "^2.2.0"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
+
},
|
|
41
|
+
"peerDependencies": {
|
|
40
42
|
"lkt-button": "^2.0.4",
|
|
41
43
|
"lkt-data-state": "^1.0.9",
|
|
42
44
|
"lkt-http-client": "^1.0.12",
|
|
@@ -45,9 +47,8 @@
|
|
|
45
47
|
"lkt-loader": "^1.0.2",
|
|
46
48
|
"lkt-modal": "^2.0.2",
|
|
47
49
|
"lkt-string-tools": "^1.0.2",
|
|
48
|
-
"lkt-
|
|
49
|
-
|
|
50
|
-
"peerDependencies": {
|
|
50
|
+
"lkt-toast": "^1.0.1",
|
|
51
|
+
"lkt-vue-kernel": "^1.0.27",
|
|
51
52
|
"vue": "^3.3.0"
|
|
52
53
|
}
|
|
53
54
|
}
|
|
@@ -87,13 +87,16 @@
|
|
|
87
87
|
onButtonLoaded = () => {
|
|
88
88
|
isLoading.value = false;
|
|
89
89
|
},
|
|
90
|
-
onCreate = ($event: Event, r: HTTPResponse) => {
|
|
90
|
+
onCreate = ($event: Event|undefined, r: HTTPResponse) => {
|
|
91
|
+
if (typeof $event === 'undefined') return;
|
|
91
92
|
emit('create', $event, r);
|
|
92
93
|
},
|
|
93
|
-
onSave = ($event: Event, r: HTTPResponse) => {
|
|
94
|
+
onSave = ($event: Event|undefined, r: HTTPResponse) => {
|
|
95
|
+
if (typeof $event === 'undefined') return;
|
|
94
96
|
emit('save', $event, r);
|
|
95
97
|
},
|
|
96
|
-
onDrop = ($event: Event, r: HTTPResponse) => {
|
|
98
|
+
onDrop = ($event: Event|undefined, r: HTTPResponse) => {
|
|
99
|
+
if (typeof $event === 'undefined') return;
|
|
97
100
|
emit('drop', $event, r);
|
|
98
101
|
};
|
|
99
102
|
|
|
@@ -11,11 +11,16 @@
|
|
|
11
11
|
ItemCrudMode,
|
|
12
12
|
ItemCrudView,
|
|
13
13
|
LktObject,
|
|
14
|
+
LktSettings,
|
|
15
|
+
NotificationType,
|
|
14
16
|
TablePermission,
|
|
17
|
+
ToastConfig,
|
|
18
|
+
ToastPositionX,
|
|
15
19
|
} from 'lkt-vue-kernel';
|
|
16
20
|
import { closeModal } from 'lkt-modal';
|
|
17
21
|
import { __ } from 'lkt-i18n';
|
|
18
22
|
import ButtonNav from '../components/ButtonNav.vue';
|
|
23
|
+
import { openToast } from 'lkt-toast';
|
|
19
24
|
|
|
20
25
|
|
|
21
26
|
const props = withDefaults(defineProps<ItemCrudConfig>(), getDefaultValues(ItemCrud));
|
|
@@ -168,24 +173,78 @@
|
|
|
168
173
|
},
|
|
169
174
|
onCreate = ($event: PointerEvent, r: HTTPResponse) => {
|
|
170
175
|
debug('onCreate');
|
|
171
|
-
if (!ensureValidResourceSave(r, props.createButton.resource))
|
|
176
|
+
if (!ensureValidResourceSave(r, props.createButton.resource)) {
|
|
177
|
+
if (props.notificationType === NotificationType.Toast) {
|
|
178
|
+
openToast(<ToastConfig>{
|
|
179
|
+
text: LktSettings.defaultCreateErrorText,
|
|
180
|
+
details: LktSettings.defaultCreateErrorDetails,
|
|
181
|
+
icon: LktSettings.defaultCreateErrorIcon,
|
|
182
|
+
positionX: ToastPositionX.Right,
|
|
183
|
+
});
|
|
184
|
+
}
|
|
185
|
+
return;
|
|
186
|
+
}
|
|
172
187
|
itemCreated.value = true;
|
|
173
188
|
debug('onCreate -> turn stored data into original');
|
|
174
189
|
dataState.value.increment(item.value).turnStoredIntoOriginal();
|
|
190
|
+
if (props.notificationType === NotificationType.Toast) {
|
|
191
|
+
openToast(<ToastConfig>{
|
|
192
|
+
text: LktSettings.defaultCreateSuccessText,
|
|
193
|
+
details: LktSettings.defaultCreateSuccessDetails,
|
|
194
|
+
icon: LktSettings.defaultCreateSuccessIcon,
|
|
195
|
+
positionX: ToastPositionX.Right,
|
|
196
|
+
});
|
|
197
|
+
}
|
|
175
198
|
doAutoReloadId(r);
|
|
176
199
|
emit('create', r);
|
|
177
200
|
},
|
|
178
201
|
onUpdate = ($event: PointerEvent, r: HTTPResponse) => {
|
|
179
202
|
debug('onUpdate');
|
|
180
|
-
if (!ensureValidResourceSave(r, props.updateButton.resource))
|
|
203
|
+
if (!ensureValidResourceSave(r, props.updateButton.resource)) {
|
|
204
|
+
if (props.notificationType === NotificationType.Toast) {
|
|
205
|
+
openToast(<ToastConfig>{
|
|
206
|
+
text: LktSettings.defaultUpdateErrorText,
|
|
207
|
+
details: LktSettings.defaultUpdateErrorDetails,
|
|
208
|
+
icon: LktSettings.defaultUpdateErrorIcon,
|
|
209
|
+
positionX: ToastPositionX.Right,
|
|
210
|
+
});
|
|
211
|
+
}
|
|
212
|
+
return;
|
|
213
|
+
}
|
|
181
214
|
debug('onUpdate -> turn stored data into original');
|
|
182
215
|
dataState.value.turnStoredIntoOriginal();
|
|
216
|
+
if (props.notificationType === NotificationType.Toast) {
|
|
217
|
+
openToast(<ToastConfig>{
|
|
218
|
+
text: LktSettings.defaultUpdateSuccessText,
|
|
219
|
+
details: LktSettings.defaultUpdateSuccessDetails,
|
|
220
|
+
icon: LktSettings.defaultUpdateSuccessIcon,
|
|
221
|
+
positionX: ToastPositionX.Right,
|
|
222
|
+
});
|
|
223
|
+
}
|
|
183
224
|
doAutoReloadId(r);
|
|
184
225
|
emit('update', r);
|
|
185
226
|
},
|
|
186
227
|
onDrop = ($event: PointerEvent, r: HTTPResponse) => {
|
|
187
228
|
debug('onDrop');
|
|
188
|
-
if (!ensureValidResourceSave(r, props.dropButton.resource))
|
|
229
|
+
if (!ensureValidResourceSave(r, props.dropButton.resource)) {
|
|
230
|
+
if (props.notificationType === NotificationType.Toast) {
|
|
231
|
+
openToast(<ToastConfig>{
|
|
232
|
+
text: LktSettings.defaultDropErrorText,
|
|
233
|
+
details: LktSettings.defaultDropErrorDetails,
|
|
234
|
+
icon: LktSettings.defaultDropErrorIcon,
|
|
235
|
+
positionX: ToastPositionX.Right,
|
|
236
|
+
});
|
|
237
|
+
}
|
|
238
|
+
return;
|
|
239
|
+
}
|
|
240
|
+
if (props.notificationType === NotificationType.Toast) {
|
|
241
|
+
openToast(<ToastConfig>{
|
|
242
|
+
text: LktSettings.defaultDropSuccessText,
|
|
243
|
+
details: LktSettings.defaultDropSuccessDetails,
|
|
244
|
+
icon: LktSettings.defaultDropSuccessIcon,
|
|
245
|
+
positionX: ToastPositionX.Right,
|
|
246
|
+
});
|
|
247
|
+
}
|
|
189
248
|
emit('drop', r);
|
|
190
249
|
if (props.view === ItemCrudView.Modal) {
|
|
191
250
|
debug('onDrop -> close modal');
|
|
@@ -308,16 +367,20 @@
|
|
|
308
367
|
|
|
309
368
|
<div class="lkt-item-crud_content" v-if="!isLoading">
|
|
310
369
|
<div v-if="httpSuccessRead" class="lkt-grid-1">
|
|
311
|
-
<lkt-http-info
|
|
312
|
-
|
|
313
|
-
|
|
370
|
+
<lkt-http-info
|
|
371
|
+
v-if="showStoreMessage && notificationType === NotificationType.Inline"
|
|
372
|
+
:code="httpStatus"
|
|
373
|
+
:palette="httpStatus === 200 ? 'success' : 'danger'"
|
|
374
|
+
quick
|
|
375
|
+
can-close
|
|
376
|
+
v-on:close="showStoreMessage = false" />
|
|
314
377
|
<slot name="item" :item="item" :loading="isLoading" :edit-mode="editMode"
|
|
315
378
|
:is-create="createMode"
|
|
316
379
|
:can-update="canUpdate"
|
|
317
380
|
:can-drop="canDrop"
|
|
318
381
|
:item-being-edited="itemBeingEdited"></slot>
|
|
319
382
|
</div>
|
|
320
|
-
<lkt-http-info :code="httpStatus" v-else />
|
|
383
|
+
<lkt-http-info :code="httpStatus" v-else-if="notificationType === NotificationType.Inline" />
|
|
321
384
|
</div>
|
|
322
385
|
<lkt-loader v-if="isLoading" />
|
|
323
386
|
|