lkt-item-crud 2.0.18 → 2.0.20
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.css +1 -1
- package/dist/build.d.ts +6 -6
- package/dist/build.js +696 -613
- package/dist/components/ButtonNav.vue.d.ts +24 -89
- package/dist/functions/modifications-functions.d.ts +4 -0
- package/dist/lib-components/LktItemCrud.vue.d.ts +15 -6
- package/package.json +1 -1
- package/src/components/ButtonNav.vue +208 -83
- package/src/lib-components/LktItemCrud.vue +108 -14
|
@@ -1,11 +1,20 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import { computed, ref, SetupContext, useSlots, watch } from 'vue';
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
ButtonConfig,
|
|
5
|
+
ButtonType,
|
|
6
|
+
ItemCrudButtonNavVisibility,
|
|
7
|
+
ItemCrudMode,
|
|
8
|
+
ItemCrudView,
|
|
9
|
+
LktObject,
|
|
10
|
+
ModificationView,
|
|
11
|
+
} from 'lkt-vue-kernel';
|
|
4
12
|
import { HTTPResponse } from 'lkt-http-client';
|
|
5
13
|
|
|
6
14
|
const emit = defineEmits([
|
|
7
15
|
'update:loading',
|
|
8
16
|
'update:editing',
|
|
17
|
+
'update:pickedModificationView',
|
|
9
18
|
'create',
|
|
10
19
|
'save',
|
|
11
20
|
'drop',
|
|
@@ -13,6 +22,7 @@
|
|
|
13
22
|
|
|
14
23
|
const props = withDefaults(defineProps<{
|
|
15
24
|
item: LktObject,
|
|
25
|
+
modifications: LktObject,
|
|
16
26
|
editing?: boolean
|
|
17
27
|
loading?: boolean
|
|
18
28
|
grouped?: boolean
|
|
@@ -20,11 +30,11 @@
|
|
|
20
30
|
view: ItemCrudView
|
|
21
31
|
mode: ItemCrudMode
|
|
22
32
|
|
|
23
|
-
createButton?: ButtonConfig|false
|
|
24
|
-
updateButton?: ButtonConfig|false
|
|
25
|
-
dropButton?: ButtonConfig|false
|
|
26
|
-
editModeButton?: ButtonConfig|false
|
|
27
|
-
groupButton?: ButtonConfig|boolean
|
|
33
|
+
createButton?: ButtonConfig | false
|
|
34
|
+
updateButton?: ButtonConfig | false
|
|
35
|
+
dropButton?: ButtonConfig | false
|
|
36
|
+
editModeButton?: ButtonConfig | false
|
|
37
|
+
groupButton?: ButtonConfig | boolean
|
|
28
38
|
groupButtonAsModalActions?: boolean
|
|
29
39
|
|
|
30
40
|
dataChanged: boolean
|
|
@@ -40,12 +50,21 @@
|
|
|
40
50
|
httpSuccessRead?: boolean
|
|
41
51
|
|
|
42
52
|
buttonNavVisibility: ItemCrudButtonNavVisibility
|
|
53
|
+
modificationView?: boolean | Array<ModificationView>
|
|
54
|
+
pickedModificationView: string
|
|
55
|
+
editableView: ModificationView
|
|
43
56
|
}>(), {
|
|
44
57
|
item: () => ({}),
|
|
58
|
+
modifications: () => ({}),
|
|
45
59
|
editing: false,
|
|
46
60
|
isLoading: false,
|
|
47
61
|
});
|
|
48
62
|
|
|
63
|
+
const selectedModificationView = ref(props.pickedModificationView);
|
|
64
|
+
|
|
65
|
+
watch(() => props.pickedModificationView, v => selectedModificationView.value = v);
|
|
66
|
+
watch(selectedModificationView, v => emit('update:pickedModificationView', v));
|
|
67
|
+
|
|
49
68
|
const slots: SetupContext['slots'] = useSlots();
|
|
50
69
|
|
|
51
70
|
const saveButtonRef = ref(<HTMLButtonElement | null>null);
|
|
@@ -65,19 +84,24 @@
|
|
|
65
84
|
onButtonLoaded = () => {
|
|
66
85
|
isLoading.value = false;
|
|
67
86
|
},
|
|
68
|
-
onCreate = ($event: Event|undefined, r: HTTPResponse) => {
|
|
87
|
+
onCreate = ($event: Event | undefined, r: HTTPResponse) => {
|
|
69
88
|
if (typeof $event === 'undefined') return;
|
|
70
89
|
emit('create', $event, r);
|
|
71
90
|
},
|
|
72
|
-
onSave = ($event: Event|undefined, r: HTTPResponse) => {
|
|
91
|
+
onSave = ($event: Event | undefined, r: HTTPResponse) => {
|
|
73
92
|
if (typeof $event === 'undefined') return;
|
|
74
93
|
emit('save', $event, r);
|
|
75
94
|
},
|
|
76
|
-
onDrop = ($event: Event|undefined, r: HTTPResponse) => {
|
|
95
|
+
onDrop = ($event: Event | undefined, r: HTTPResponse) => {
|
|
77
96
|
if (typeof $event === 'undefined') return;
|
|
78
97
|
emit('drop', $event, r);
|
|
79
98
|
};
|
|
80
99
|
|
|
100
|
+
const computedUpdateData = computed(() => {
|
|
101
|
+
if (props.editableView === ModificationView.Modifications) return props.modifications;
|
|
102
|
+
return props.item;
|
|
103
|
+
})
|
|
104
|
+
|
|
81
105
|
const doSave = () => {
|
|
82
106
|
if (saveButtonRef.value && typeof saveButtonRef.value.click === 'function') saveButtonRef.value.click();
|
|
83
107
|
},
|
|
@@ -124,6 +148,77 @@
|
|
|
124
148
|
return showSaveButton.value || showDropButton.value || showSwitchButton.value;
|
|
125
149
|
});
|
|
126
150
|
|
|
151
|
+
const computedModificationView = computed(() => {
|
|
152
|
+
if (props.modificationView === false) return [];
|
|
153
|
+
if (props.modificationView === true) return [
|
|
154
|
+
ModificationView.Current,
|
|
155
|
+
ModificationView.Modifications,
|
|
156
|
+
ModificationView.SplitView,
|
|
157
|
+
ModificationView.Differences,
|
|
158
|
+
];
|
|
159
|
+
if (Array.isArray(props.modificationView)) return props.modificationView;
|
|
160
|
+
return [];
|
|
161
|
+
}),
|
|
162
|
+
computedModificationSplitButtons = computed(() => {
|
|
163
|
+
|
|
164
|
+
let r = [];
|
|
165
|
+
|
|
166
|
+
if (computedModificationView.value.includes(ModificationView.Current)) {
|
|
167
|
+
r.push({
|
|
168
|
+
text: 'Current',
|
|
169
|
+
icon: 'lkt-icn-see',
|
|
170
|
+
disabled: selectedModificationView.value === ModificationView.Current,
|
|
171
|
+
events: {
|
|
172
|
+
click: () => {
|
|
173
|
+
selectedModificationView.value = ModificationView.Current;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
});
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
if (computedModificationView.value.includes(ModificationView.Modifications)) {
|
|
180
|
+
r.push({
|
|
181
|
+
text: 'Modifications',
|
|
182
|
+
icon: 'lkt-icn-edit',
|
|
183
|
+
disabled: selectedModificationView.value === ModificationView.Modifications,
|
|
184
|
+
events: {
|
|
185
|
+
click: () => {
|
|
186
|
+
selectedModificationView.value = ModificationView.Modifications;
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
});
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
if (computedModificationView.value.includes(ModificationView.SplitView)) {
|
|
193
|
+
r.push({
|
|
194
|
+
text: 'Split View',
|
|
195
|
+
icon: 'lkt-icn-columns',
|
|
196
|
+
disabled: selectedModificationView.value === ModificationView.SplitView,
|
|
197
|
+
events: {
|
|
198
|
+
click: () => {
|
|
199
|
+
selectedModificationView.value = ModificationView.SplitView;
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
});
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
if (computedModificationView.value.includes(ModificationView.Differences)) {
|
|
206
|
+
|
|
207
|
+
r.push({
|
|
208
|
+
text: 'Differences',
|
|
209
|
+
icon: 'lkt-icn-balance',
|
|
210
|
+
disabled: selectedModificationView.value === ModificationView.Differences,
|
|
211
|
+
events: {
|
|
212
|
+
click: () => {
|
|
213
|
+
selectedModificationView.value = ModificationView.Differences;
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
});
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
return r;
|
|
220
|
+
});
|
|
221
|
+
|
|
127
222
|
</script>
|
|
128
223
|
|
|
129
224
|
<template>
|
|
@@ -136,6 +231,19 @@
|
|
|
136
231
|
v-model:checked="isEditing"
|
|
137
232
|
class="lkt-item-crud--switch-mode-button" />
|
|
138
233
|
|
|
234
|
+
<lkt-button
|
|
235
|
+
v-if="computedModificationView.length > 0"
|
|
236
|
+
v-bind="<ButtonConfig>{
|
|
237
|
+
type: ButtonType.Tooltip,
|
|
238
|
+
icon: 'lkt-icn-cross-arrows',
|
|
239
|
+
class: 'lkt-item-crud--modifications-button',
|
|
240
|
+
splitButtons: computedModificationSplitButtons,
|
|
241
|
+
tooltip: {
|
|
242
|
+
contentClass: 'lkt-flex-column',
|
|
243
|
+
}
|
|
244
|
+
}"
|
|
245
|
+
/>
|
|
246
|
+
|
|
139
247
|
|
|
140
248
|
<template v-if="slots['prev-buttons-ever']" v-show="!isLoading">
|
|
141
249
|
<slot name="prev-buttons-ever"
|
|
@@ -156,32 +264,34 @@
|
|
|
156
264
|
<lkt-button
|
|
157
265
|
ref="saveButtonRef"
|
|
158
266
|
v-show="mode === ItemCrudMode.Update && showSaveButton"
|
|
159
|
-
v-bind="
|
|
160
|
-
|
|
267
|
+
v-bind="{
|
|
268
|
+
...updateButton,
|
|
269
|
+
resourceData: {
|
|
270
|
+
...updateButton?.resourceData,
|
|
271
|
+
...computedUpdateData
|
|
272
|
+
},
|
|
273
|
+
disabled: !ableToUpdate
|
|
274
|
+
}"
|
|
161
275
|
@loading="onButtonLoading"
|
|
162
276
|
@loaded="onButtonLoaded"
|
|
163
|
-
@click="onSave"
|
|
164
|
-
|
|
165
|
-
:edit-mode="isEditing"
|
|
166
|
-
:is-create="false"
|
|
167
|
-
:can-update="canUpdate"
|
|
168
|
-
:can-drop="canDrop" />
|
|
169
|
-
</lkt-button>
|
|
277
|
+
@click="onSave"
|
|
278
|
+
/>
|
|
170
279
|
|
|
171
280
|
<lkt-button
|
|
172
281
|
ref="saveButtonRef"
|
|
173
282
|
v-show="mode === ItemCrudMode.Create && showSaveButton"
|
|
174
|
-
v-bind="
|
|
175
|
-
|
|
283
|
+
v-bind="{
|
|
284
|
+
...createButton,
|
|
285
|
+
resourceData: {
|
|
286
|
+
...createButton?.resourceData,
|
|
287
|
+
...computedUpdateData
|
|
288
|
+
},
|
|
289
|
+
disabled: !ableToCreate
|
|
290
|
+
}"
|
|
176
291
|
@loading="onButtonLoading"
|
|
177
292
|
@loaded="onButtonLoaded"
|
|
178
|
-
@click="onCreate"
|
|
179
|
-
|
|
180
|
-
:edit-mode="isEditing"
|
|
181
|
-
:is-create="true"
|
|
182
|
-
:can-update="canUpdate"
|
|
183
|
-
:can-drop="canDrop" />
|
|
184
|
-
</lkt-button>
|
|
293
|
+
@click="onCreate"
|
|
294
|
+
/>
|
|
185
295
|
|
|
186
296
|
<lkt-button
|
|
187
297
|
ref="dropButtonRef"
|
|
@@ -190,13 +300,8 @@
|
|
|
190
300
|
:disabled="!ableToDrop"
|
|
191
301
|
@loading="onButtonLoading"
|
|
192
302
|
@loaded="onButtonLoaded"
|
|
193
|
-
@click="onDrop"
|
|
194
|
-
|
|
195
|
-
:edit-mode="isEditing"
|
|
196
|
-
:is-create="false"
|
|
197
|
-
:can-update="canUpdate"
|
|
198
|
-
:can-drop="canDrop" />
|
|
199
|
-
</lkt-button>
|
|
303
|
+
@click="onDrop"
|
|
304
|
+
/>
|
|
200
305
|
|
|
201
306
|
<template v-if="slots.buttons" v-show="isEditing && !isLoading">
|
|
202
307
|
<slot name="buttons" />
|
|
@@ -215,6 +320,18 @@
|
|
|
215
320
|
v-model:checked="isEditing"
|
|
216
321
|
class="lkt-item-crud--switch-mode-button" />
|
|
217
322
|
|
|
323
|
+
<lkt-button
|
|
324
|
+
v-if="computedModificationView.length > 0"
|
|
325
|
+
v-bind="<ButtonConfig>{
|
|
326
|
+
type: ButtonType.Tooltip,
|
|
327
|
+
icon: 'lkt-icn-cross-arrows',
|
|
328
|
+
class: 'lkt-item-crud--modifications-button',
|
|
329
|
+
splitButtons: computedModificationSplitButtons,
|
|
330
|
+
tooltip: {
|
|
331
|
+
contentClass: 'lkt-flex-column',
|
|
332
|
+
}
|
|
333
|
+
}"
|
|
334
|
+
/>
|
|
218
335
|
|
|
219
336
|
<template v-if="slots['prev-buttons-ever']" v-show="!isLoading">
|
|
220
337
|
<slot name="prev-buttons-ever"
|
|
@@ -235,32 +352,35 @@
|
|
|
235
352
|
<lkt-button
|
|
236
353
|
ref="saveButtonRef"
|
|
237
354
|
v-show="mode === ItemCrudMode.Update && showSaveButton"
|
|
238
|
-
v-bind="
|
|
239
|
-
|
|
355
|
+
v-bind="{
|
|
356
|
+
...updateButton,
|
|
357
|
+
resourceData: {
|
|
358
|
+
...updateButton?.resourceData,
|
|
359
|
+
...computedUpdateData
|
|
360
|
+
},
|
|
361
|
+
disabled: !ableToUpdate
|
|
362
|
+
}"
|
|
240
363
|
@loading="onButtonLoading"
|
|
241
364
|
@loaded="onButtonLoaded"
|
|
242
|
-
@click="onSave"
|
|
243
|
-
|
|
244
|
-
:edit-mode="isEditing"
|
|
245
|
-
:is-create="false"
|
|
246
|
-
:can-update="canUpdate"
|
|
247
|
-
:can-drop="canDrop" />
|
|
248
|
-
</lkt-button>
|
|
365
|
+
@click="onSave"
|
|
366
|
+
/>
|
|
249
367
|
|
|
250
368
|
<lkt-button
|
|
251
369
|
ref="saveButtonRef"
|
|
252
370
|
v-show="mode === ItemCrudMode.Create && showSaveButton"
|
|
253
|
-
v-bind="
|
|
371
|
+
v-bind="{
|
|
372
|
+
...createButton,
|
|
373
|
+
resourceData: {
|
|
374
|
+
...createButton?.resourceData,
|
|
375
|
+
...computedUpdateData
|
|
376
|
+
},
|
|
377
|
+
disabled: !ableToCreate
|
|
378
|
+
}"
|
|
254
379
|
:disabled="!ableToCreate"
|
|
255
380
|
@loading="onButtonLoading"
|
|
256
381
|
@loaded="onButtonLoaded"
|
|
257
|
-
@click="onCreate"
|
|
258
|
-
|
|
259
|
-
:edit-mode="isEditing"
|
|
260
|
-
:is-create="true"
|
|
261
|
-
:can-update="canUpdate"
|
|
262
|
-
:can-drop="canDrop" />
|
|
263
|
-
</lkt-button>
|
|
382
|
+
@click="onCreate"
|
|
383
|
+
/>
|
|
264
384
|
|
|
265
385
|
<lkt-button
|
|
266
386
|
ref="dropButtonRef"
|
|
@@ -269,13 +389,8 @@
|
|
|
269
389
|
:disabled="!ableToDrop"
|
|
270
390
|
@loading="onButtonLoading"
|
|
271
391
|
@loaded="onButtonLoaded"
|
|
272
|
-
@click="onDrop"
|
|
273
|
-
|
|
274
|
-
:edit-mode="isEditing"
|
|
275
|
-
:is-create="false"
|
|
276
|
-
:can-update="canUpdate"
|
|
277
|
-
:can-drop="canDrop" />
|
|
278
|
-
</lkt-button>
|
|
392
|
+
@click="onDrop"
|
|
393
|
+
/>
|
|
279
394
|
|
|
280
395
|
<template v-if="slots.buttons" v-show="isEditing && !isLoading">
|
|
281
396
|
<slot name="buttons" />
|
|
@@ -305,32 +420,34 @@
|
|
|
305
420
|
<lkt-button
|
|
306
421
|
ref="saveButtonRef"
|
|
307
422
|
v-show="mode === ItemCrudMode.Update && showSaveButton"
|
|
308
|
-
v-bind="
|
|
309
|
-
|
|
423
|
+
v-bind="{
|
|
424
|
+
...updateButton,
|
|
425
|
+
resourceData: {
|
|
426
|
+
...updateButton?.resourceData,
|
|
427
|
+
...computedUpdateData
|
|
428
|
+
},
|
|
429
|
+
disabled: !ableToUpdate
|
|
430
|
+
}"
|
|
310
431
|
@loading="onButtonLoading"
|
|
311
432
|
@loaded="onButtonLoaded"
|
|
312
|
-
@click="onSave"
|
|
313
|
-
|
|
314
|
-
:edit-mode="isEditing"
|
|
315
|
-
:is-create="false"
|
|
316
|
-
:can-update="canUpdate"
|
|
317
|
-
:can-drop="canDrop" />
|
|
318
|
-
</lkt-button>
|
|
433
|
+
@click="onSave"
|
|
434
|
+
/>
|
|
319
435
|
|
|
320
436
|
<lkt-button
|
|
321
437
|
ref="saveButtonRef"
|
|
322
438
|
v-show="mode === ItemCrudMode.Create && showSaveButton"
|
|
323
|
-
v-bind="
|
|
324
|
-
|
|
439
|
+
v-bind="{
|
|
440
|
+
...createButton,
|
|
441
|
+
resourceData: {
|
|
442
|
+
...createButton?.resourceData,
|
|
443
|
+
...computedUpdateData
|
|
444
|
+
},
|
|
445
|
+
disabled: !ableToCreate
|
|
446
|
+
}"
|
|
325
447
|
@loading="onButtonLoading"
|
|
326
448
|
@loaded="onButtonLoaded"
|
|
327
|
-
@click="onCreate"
|
|
328
|
-
|
|
329
|
-
:edit-mode="isEditing"
|
|
330
|
-
:is-create="true"
|
|
331
|
-
:can-update="canUpdate"
|
|
332
|
-
:can-drop="false" />
|
|
333
|
-
</lkt-button>
|
|
449
|
+
@click="onCreate"
|
|
450
|
+
/>
|
|
334
451
|
|
|
335
452
|
<lkt-button
|
|
336
453
|
ref="dropButtonRef"
|
|
@@ -339,18 +456,26 @@
|
|
|
339
456
|
:disabled="!ableToDrop"
|
|
340
457
|
@loading="onButtonLoading"
|
|
341
458
|
@loaded="onButtonLoaded"
|
|
342
|
-
@click="onDrop"
|
|
343
|
-
|
|
344
|
-
:edit-mode="isEditing"
|
|
345
|
-
:is-create="false"
|
|
346
|
-
:can-update="canUpdate"
|
|
347
|
-
:can-drop="canDrop" />
|
|
348
|
-
</lkt-button>
|
|
459
|
+
@click="onDrop"
|
|
460
|
+
/>
|
|
349
461
|
|
|
350
462
|
<div class="lkt-item-crud-buttons" v-if="slots.buttons" v-show="isEditing && !isLoading">
|
|
351
463
|
<slot name="buttons" />
|
|
352
464
|
</div>
|
|
353
465
|
|
|
466
|
+
<lkt-button
|
|
467
|
+
v-if="computedModificationView.length > 0"
|
|
468
|
+
v-bind="<ButtonConfig>{
|
|
469
|
+
type: ButtonType.Tooltip,
|
|
470
|
+
icon: 'lkt-icn-cross-arrows',
|
|
471
|
+
class: 'lkt-item-crud--modifications-button',
|
|
472
|
+
splitButtons: computedModificationSplitButtons,
|
|
473
|
+
tooltip: {
|
|
474
|
+
contentClass: 'lkt-flex-column',
|
|
475
|
+
}
|
|
476
|
+
}"
|
|
477
|
+
/>
|
|
478
|
+
|
|
354
479
|
<lkt-button
|
|
355
480
|
v-if="showSwitchButton"
|
|
356
481
|
v-bind="editModeButton"
|