@vaadin/crud 24.7.0-alpha7 → 24.7.0-alpha9
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/package.json +17 -15
- package/src/vaadin-crud-mixin.d.ts +7 -6
- package/src/vaadin-crud-mixin.js +99 -98
- package/src/vaadin-crud.js +8 -8
- package/src/vaadin-lit-crud.js +8 -8
- package/web-types.json +15 -15
- package/web-types.lit.json +11 -11
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/crud",
|
|
3
|
-
"version": "24.7.0-
|
|
3
|
+
"version": "24.7.0-alpha9",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,21 +37,23 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
39
39
|
"@polymer/polymer": "^3.0.0",
|
|
40
|
-
"@vaadin/a11y-base": "24.7.0-
|
|
41
|
-
"@vaadin/button": "24.7.0-
|
|
42
|
-
"@vaadin/component-base": "24.7.0-
|
|
43
|
-
"@vaadin/confirm-dialog": "24.7.0-
|
|
44
|
-
"@vaadin/dialog": "24.7.0-
|
|
45
|
-
"@vaadin/form-layout": "24.7.0-
|
|
46
|
-
"@vaadin/grid": "24.7.0-
|
|
47
|
-
"@vaadin/overlay": "24.7.0-
|
|
48
|
-
"@vaadin/text-field": "24.7.0-
|
|
49
|
-
"@vaadin/vaadin-lumo-styles": "24.7.0-
|
|
50
|
-
"@vaadin/vaadin-material-styles": "24.7.0-
|
|
51
|
-
"@vaadin/vaadin-themable-mixin": "24.7.0-
|
|
40
|
+
"@vaadin/a11y-base": "24.7.0-alpha9",
|
|
41
|
+
"@vaadin/button": "24.7.0-alpha9",
|
|
42
|
+
"@vaadin/component-base": "24.7.0-alpha9",
|
|
43
|
+
"@vaadin/confirm-dialog": "24.7.0-alpha9",
|
|
44
|
+
"@vaadin/dialog": "24.7.0-alpha9",
|
|
45
|
+
"@vaadin/form-layout": "24.7.0-alpha9",
|
|
46
|
+
"@vaadin/grid": "24.7.0-alpha9",
|
|
47
|
+
"@vaadin/overlay": "24.7.0-alpha9",
|
|
48
|
+
"@vaadin/text-field": "24.7.0-alpha9",
|
|
49
|
+
"@vaadin/vaadin-lumo-styles": "24.7.0-alpha9",
|
|
50
|
+
"@vaadin/vaadin-material-styles": "24.7.0-alpha9",
|
|
51
|
+
"@vaadin/vaadin-themable-mixin": "24.7.0-alpha9",
|
|
52
|
+
"lit": "^3.0.0"
|
|
52
53
|
},
|
|
53
54
|
"devDependencies": {
|
|
54
|
-
"@vaadin/chai-plugins": "24.7.0-
|
|
55
|
+
"@vaadin/chai-plugins": "24.7.0-alpha9",
|
|
56
|
+
"@vaadin/test-runner-commands": "24.7.0-alpha9",
|
|
55
57
|
"@vaadin/testing-helpers": "^1.1.0",
|
|
56
58
|
"sinon": "^18.0.0"
|
|
57
59
|
},
|
|
@@ -60,5 +62,5 @@
|
|
|
60
62
|
"web-types.json",
|
|
61
63
|
"web-types.lit.json"
|
|
62
64
|
],
|
|
63
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "b0a16c6ed7fc50a22a42dcab0649d74f4c300485"
|
|
64
66
|
}
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
* license.
|
|
10
10
|
*/
|
|
11
11
|
import type { Constructor } from '@open-wc/dedupe-mixin';
|
|
12
|
+
import type { I18nMixinClass, PartialI18n } from '@vaadin/component-base/src/i18n-mixin.js';
|
|
12
13
|
import type { GridFilterDefinition, GridSorterDefinition } from '@vaadin/grid/src/vaadin-grid.js';
|
|
13
14
|
|
|
14
15
|
export type CrudDataProviderCallback<T> = (items: T[], size?: number) => void;
|
|
@@ -24,7 +25,7 @@ export type CrudDataProvider<T> = (params: CrudDataProviderParams, callback: Cru
|
|
|
24
25
|
|
|
25
26
|
export type CrudEditorPosition = '' | 'aside' | 'bottom';
|
|
26
27
|
|
|
27
|
-
export
|
|
28
|
+
export type CrudI18n = PartialI18n<{
|
|
28
29
|
newItem: string;
|
|
29
30
|
editItem: string;
|
|
30
31
|
saveItem: string;
|
|
@@ -49,7 +50,7 @@ export interface CrudI18n {
|
|
|
49
50
|
};
|
|
50
51
|
};
|
|
51
52
|
};
|
|
52
|
-
}
|
|
53
|
+
}>;
|
|
53
54
|
|
|
54
55
|
/**
|
|
55
56
|
* Fired when the `editorOpened` property changes.
|
|
@@ -123,7 +124,7 @@ export type CrudEventMap<T> = CrudCustomEventMap<T> & HTMLElementEventMap;
|
|
|
123
124
|
*/
|
|
124
125
|
export declare function CrudMixin<Item, T extends Constructor<HTMLElement> = Constructor<HTMLElement>>(
|
|
125
126
|
base: T,
|
|
126
|
-
): Constructor<CrudMixinClass<Item>> & T;
|
|
127
|
+
): Constructor<CrudMixinClass<Item>> & Constructor<I18nMixinClass<CrudI18n>> & T;
|
|
127
128
|
|
|
128
129
|
export declare class CrudMixinClass<Item> {
|
|
129
130
|
/**
|
|
@@ -225,9 +226,9 @@ export declare class CrudMixinClass<Item> {
|
|
|
225
226
|
noToolbar: boolean;
|
|
226
227
|
|
|
227
228
|
/**
|
|
228
|
-
* The object used to localize this component.
|
|
229
|
-
*
|
|
230
|
-
*
|
|
229
|
+
* The object used to localize this component. To change the default
|
|
230
|
+
* localization, replace this with an object that provides all properties, or
|
|
231
|
+
* just the individual properties you want to change.
|
|
231
232
|
*
|
|
232
233
|
* The object has the following JSON structure and default values:
|
|
233
234
|
*
|
package/src/vaadin-crud-mixin.js
CHANGED
|
@@ -10,18 +10,47 @@
|
|
|
10
10
|
*/
|
|
11
11
|
import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
|
|
12
12
|
import { FocusRestorationController } from '@vaadin/a11y-base/src/focus-restoration-controller.js';
|
|
13
|
+
import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
|
|
13
14
|
import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
|
|
14
15
|
import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
|
|
15
16
|
import { ButtonSlotController, FormSlotController, GridSlotController } from './vaadin-crud-controllers.js';
|
|
16
17
|
import { getProperty, isValidEditorPosition, setProperty } from './vaadin-crud-helpers.js';
|
|
17
18
|
|
|
19
|
+
const DEFAULT_I18N = {
|
|
20
|
+
newItem: 'New item',
|
|
21
|
+
editItem: 'Edit item',
|
|
22
|
+
saveItem: 'Save',
|
|
23
|
+
cancel: 'Cancel',
|
|
24
|
+
deleteItem: 'Delete...',
|
|
25
|
+
editLabel: 'Edit',
|
|
26
|
+
confirm: {
|
|
27
|
+
delete: {
|
|
28
|
+
title: 'Delete item',
|
|
29
|
+
content: 'Are you sure you want to delete this item? This action cannot be undone.',
|
|
30
|
+
button: {
|
|
31
|
+
confirm: 'Delete',
|
|
32
|
+
dismiss: 'Cancel',
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
cancel: {
|
|
36
|
+
title: 'Discard changes',
|
|
37
|
+
content: 'There are unsaved changes to this item.',
|
|
38
|
+
button: {
|
|
39
|
+
confirm: 'Discard',
|
|
40
|
+
dismiss: 'Cancel',
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
},
|
|
44
|
+
};
|
|
45
|
+
|
|
18
46
|
/**
|
|
19
47
|
* A mixin providing common crud functionality.
|
|
20
48
|
*
|
|
21
49
|
* @polymerMixin
|
|
50
|
+
* @mixes I18nMixin
|
|
22
51
|
*/
|
|
23
52
|
export const CrudMixin = (superClass) =>
|
|
24
|
-
class extends superClass {
|
|
53
|
+
class extends I18nMixin(DEFAULT_I18N, superClass) {
|
|
25
54
|
static get properties() {
|
|
26
55
|
return {
|
|
27
56
|
/**
|
|
@@ -225,78 +254,6 @@ export const CrudMixin = (superClass) =>
|
|
|
225
254
|
sync: true,
|
|
226
255
|
},
|
|
227
256
|
|
|
228
|
-
/**
|
|
229
|
-
* The object used to localize this component.
|
|
230
|
-
* For changing the default localization, change the entire
|
|
231
|
-
* _i18n_ object or just the property you want to modify.
|
|
232
|
-
*
|
|
233
|
-
* The object has the following JSON structure and default values:
|
|
234
|
-
*
|
|
235
|
-
* ```
|
|
236
|
-
* {
|
|
237
|
-
* newItem: 'New item',
|
|
238
|
-
* editItem: 'Edit item',
|
|
239
|
-
* saveItem: 'Save',
|
|
240
|
-
* cancel: 'Cancel',
|
|
241
|
-
* deleteItem: 'Delete...',
|
|
242
|
-
* editLabel: 'Edit',
|
|
243
|
-
* confirm: {
|
|
244
|
-
* delete: {
|
|
245
|
-
* title: 'Confirm delete',
|
|
246
|
-
* content: 'Are you sure you want to delete the selected item? This action cannot be undone.',
|
|
247
|
-
* button: {
|
|
248
|
-
* confirm: 'Delete',
|
|
249
|
-
* dismiss: 'Cancel'
|
|
250
|
-
* }
|
|
251
|
-
* },
|
|
252
|
-
* cancel: {
|
|
253
|
-
* title: 'Unsaved changes',
|
|
254
|
-
* content: 'There are unsaved modifications to the item.',
|
|
255
|
-
* button: {
|
|
256
|
-
* confirm: 'Discard',
|
|
257
|
-
* dismiss: 'Continue editing'
|
|
258
|
-
* }
|
|
259
|
-
* }
|
|
260
|
-
* }
|
|
261
|
-
* }
|
|
262
|
-
* ```
|
|
263
|
-
*
|
|
264
|
-
* @type {!CrudI18n}
|
|
265
|
-
* @default {English/US}
|
|
266
|
-
*/
|
|
267
|
-
i18n: {
|
|
268
|
-
type: Object,
|
|
269
|
-
sync: true,
|
|
270
|
-
value() {
|
|
271
|
-
return {
|
|
272
|
-
newItem: 'New item',
|
|
273
|
-
editItem: 'Edit item',
|
|
274
|
-
saveItem: 'Save',
|
|
275
|
-
cancel: 'Cancel',
|
|
276
|
-
deleteItem: 'Delete...',
|
|
277
|
-
editLabel: 'Edit',
|
|
278
|
-
confirm: {
|
|
279
|
-
delete: {
|
|
280
|
-
title: 'Delete item',
|
|
281
|
-
content: 'Are you sure you want to delete this item? This action cannot be undone.',
|
|
282
|
-
button: {
|
|
283
|
-
confirm: 'Delete',
|
|
284
|
-
dismiss: 'Cancel',
|
|
285
|
-
},
|
|
286
|
-
},
|
|
287
|
-
cancel: {
|
|
288
|
-
title: 'Discard changes',
|
|
289
|
-
content: 'There are unsaved changes to this item.',
|
|
290
|
-
button: {
|
|
291
|
-
confirm: 'Discard',
|
|
292
|
-
dismiss: 'Cancel',
|
|
293
|
-
},
|
|
294
|
-
},
|
|
295
|
-
},
|
|
296
|
-
};
|
|
297
|
-
},
|
|
298
|
-
},
|
|
299
|
-
|
|
300
257
|
/** @private */
|
|
301
258
|
__dialogAriaLabel: String,
|
|
302
259
|
|
|
@@ -331,18 +288,63 @@ export const CrudMixin = (superClass) =>
|
|
|
331
288
|
|
|
332
289
|
static get observers() {
|
|
333
290
|
return [
|
|
334
|
-
'__headerPropsChanged(_defaultHeader, __isNew,
|
|
291
|
+
'__headerPropsChanged(_defaultHeader, __isNew, __effectiveI18n)',
|
|
335
292
|
'__formPropsChanged(_form, _theme, include, exclude)',
|
|
336
293
|
'__gridPropsChanged(_grid, _theme, include, exclude, noFilter, noHead, noSort, items)',
|
|
337
|
-
'__i18nChanged(
|
|
294
|
+
'__i18nChanged(__effectiveI18n, _grid)',
|
|
338
295
|
'__editOnClickChanged(editOnClick, _grid)',
|
|
339
|
-
'__saveButtonPropsChanged(_saveButton,
|
|
340
|
-
'__cancelButtonPropsChanged(_cancelButton,
|
|
341
|
-
'__deleteButtonPropsChanged(_deleteButton,
|
|
342
|
-
'__newButtonPropsChanged(_newButton,
|
|
296
|
+
'__saveButtonPropsChanged(_saveButton, __effectiveI18n, __isDirty)',
|
|
297
|
+
'__cancelButtonPropsChanged(_cancelButton, __effectiveI18n)',
|
|
298
|
+
'__deleteButtonPropsChanged(_deleteButton, __effectiveI18n, __isNew)',
|
|
299
|
+
'__newButtonPropsChanged(_newButton, __effectiveI18n)',
|
|
343
300
|
];
|
|
344
301
|
}
|
|
345
302
|
|
|
303
|
+
/**
|
|
304
|
+
* The object used to localize this component. To change the default
|
|
305
|
+
* localization, replace this with an object that provides all properties, or
|
|
306
|
+
* just the individual properties you want to change.
|
|
307
|
+
*
|
|
308
|
+
* The object has the following JSON structure and default values:
|
|
309
|
+
*
|
|
310
|
+
* ```
|
|
311
|
+
* {
|
|
312
|
+
* newItem: 'New item',
|
|
313
|
+
* editItem: 'Edit item',
|
|
314
|
+
* saveItem: 'Save',
|
|
315
|
+
* cancel: 'Cancel',
|
|
316
|
+
* deleteItem: 'Delete...',
|
|
317
|
+
* editLabel: 'Edit',
|
|
318
|
+
* confirm: {
|
|
319
|
+
* delete: {
|
|
320
|
+
* title: 'Confirm delete',
|
|
321
|
+
* content: 'Are you sure you want to delete the selected item? This action cannot be undone.',
|
|
322
|
+
* button: {
|
|
323
|
+
* confirm: 'Delete',
|
|
324
|
+
* dismiss: 'Cancel'
|
|
325
|
+
* }
|
|
326
|
+
* },
|
|
327
|
+
* cancel: {
|
|
328
|
+
* title: 'Unsaved changes',
|
|
329
|
+
* content: 'There are unsaved modifications to the item.',
|
|
330
|
+
* button: {
|
|
331
|
+
* confirm: 'Discard',
|
|
332
|
+
* dismiss: 'Continue editing'
|
|
333
|
+
* }
|
|
334
|
+
* }
|
|
335
|
+
* }
|
|
336
|
+
* }
|
|
337
|
+
* ```
|
|
338
|
+
* @return {!CrudI18n}
|
|
339
|
+
*/
|
|
340
|
+
get i18n() {
|
|
341
|
+
return super.i18n;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
set i18n(value) {
|
|
345
|
+
super.i18n = value;
|
|
346
|
+
}
|
|
347
|
+
|
|
346
348
|
constructor() {
|
|
347
349
|
super();
|
|
348
350
|
|
|
@@ -429,29 +431,28 @@ export const CrudMixin = (superClass) =>
|
|
|
429
431
|
/**
|
|
430
432
|
* @param {HTMLElement | undefined} headerNode
|
|
431
433
|
* @param {boolean} isNew
|
|
432
|
-
* @param {
|
|
433
|
-
* @param {string} i18nEditItem
|
|
434
|
+
* @param {CrudI18n} effectiveI18n
|
|
434
435
|
* @private
|
|
435
436
|
*/
|
|
436
|
-
__headerPropsChanged(headerNode, isNew,
|
|
437
|
+
__headerPropsChanged(headerNode, isNew, effectiveI18n) {
|
|
437
438
|
if (headerNode) {
|
|
438
|
-
headerNode.textContent = isNew ?
|
|
439
|
+
headerNode.textContent = isNew ? effectiveI18n.newItem : effectiveI18n.editItem;
|
|
439
440
|
}
|
|
440
441
|
}
|
|
441
442
|
|
|
442
443
|
/**
|
|
443
|
-
* @param {CrudI18n}
|
|
444
|
+
* @param {CrudI18n} effectiveI18n
|
|
444
445
|
* @param {CrudGrid | Grid} grid
|
|
445
446
|
* @private
|
|
446
447
|
*/
|
|
447
|
-
__i18nChanged(
|
|
448
|
+
__i18nChanged(effectiveI18n, grid) {
|
|
448
449
|
if (!grid) {
|
|
449
450
|
return;
|
|
450
451
|
}
|
|
451
452
|
|
|
452
453
|
afterNextRender(grid, () => {
|
|
453
454
|
Array.from(grid.querySelectorAll('vaadin-crud-edit-column')).forEach((column) => {
|
|
454
|
-
column.ariaLabel =
|
|
455
|
+
column.ariaLabel = effectiveI18n.editLabel;
|
|
455
456
|
});
|
|
456
457
|
});
|
|
457
458
|
}
|
|
@@ -684,55 +685,55 @@ export const CrudMixin = (superClass) =>
|
|
|
684
685
|
|
|
685
686
|
/**
|
|
686
687
|
* @param {HTMLElement | undefined} saveButton
|
|
687
|
-
* @param {
|
|
688
|
+
* @param {CrudI18n} effectiveI18n
|
|
688
689
|
* @param {boolean} isDirty
|
|
689
690
|
* @private
|
|
690
691
|
*/
|
|
691
|
-
__saveButtonPropsChanged(saveButton,
|
|
692
|
+
__saveButtonPropsChanged(saveButton, effectiveI18n, isDirty) {
|
|
692
693
|
if (saveButton) {
|
|
693
694
|
saveButton.toggleAttribute('disabled', this.__isSaveBtnDisabled(isDirty));
|
|
694
695
|
|
|
695
696
|
if (saveButton === this._saveButtonController.defaultNode) {
|
|
696
|
-
saveButton.textContent =
|
|
697
|
+
saveButton.textContent = effectiveI18n.saveItem;
|
|
697
698
|
}
|
|
698
699
|
}
|
|
699
700
|
}
|
|
700
701
|
|
|
701
702
|
/**
|
|
702
703
|
* @param {HTMLElement | undefined} deleteButton
|
|
703
|
-
* @param {
|
|
704
|
+
* @param {CrudI18n} effectiveI18n
|
|
704
705
|
* @param {boolean} isNew
|
|
705
706
|
* @private
|
|
706
707
|
*/
|
|
707
|
-
__deleteButtonPropsChanged(deleteButton,
|
|
708
|
+
__deleteButtonPropsChanged(deleteButton, effectiveI18n, isNew) {
|
|
708
709
|
if (deleteButton) {
|
|
709
710
|
deleteButton.toggleAttribute('hidden', isNew);
|
|
710
711
|
|
|
711
712
|
if (deleteButton === this._deleteButtonController.defaultNode) {
|
|
712
|
-
deleteButton.textContent =
|
|
713
|
+
deleteButton.textContent = effectiveI18n.deleteItem;
|
|
713
714
|
}
|
|
714
715
|
}
|
|
715
716
|
}
|
|
716
717
|
|
|
717
718
|
/**
|
|
718
719
|
* @param {HTMLElement | undefined} cancelButton
|
|
719
|
-
* @param {
|
|
720
|
+
* @param {CrudI18n} effectiveI18n
|
|
720
721
|
* @private
|
|
721
722
|
*/
|
|
722
|
-
__cancelButtonPropsChanged(cancelButton,
|
|
723
|
+
__cancelButtonPropsChanged(cancelButton, effectiveI18n) {
|
|
723
724
|
if (cancelButton && cancelButton === this._cancelButtonController.defaultNode) {
|
|
724
|
-
cancelButton.textContent =
|
|
725
|
+
cancelButton.textContent = effectiveI18n.cancel;
|
|
725
726
|
}
|
|
726
727
|
}
|
|
727
728
|
|
|
728
729
|
/**
|
|
729
730
|
* @param {HTMLElement | undefined} newButton
|
|
730
|
-
* @param {
|
|
731
|
+
* @param {CrudI18n} effectiveI18n
|
|
731
732
|
* @private
|
|
732
733
|
*/
|
|
733
|
-
__newButtonPropsChanged(newButton,
|
|
734
|
+
__newButtonPropsChanged(newButton, effectiveI18n) {
|
|
734
735
|
if (newButton && newButton === this._newButtonController.defaultNode) {
|
|
735
|
-
newButton.textContent =
|
|
736
|
+
newButton.textContent = effectiveI18n.newItem;
|
|
736
737
|
}
|
|
737
738
|
}
|
|
738
739
|
|
package/src/vaadin-crud.js
CHANGED
|
@@ -223,10 +223,10 @@ class Crud extends CrudMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
|
|
|
223
223
|
id="confirmCancel"
|
|
224
224
|
on-confirm="__confirmCancel"
|
|
225
225
|
cancel-button-visible
|
|
226
|
-
confirm-text="[[
|
|
227
|
-
cancel-text="[[
|
|
228
|
-
header="[[
|
|
229
|
-
message="[[
|
|
226
|
+
confirm-text="[[__effectiveI18n.confirm.cancel.button.confirm]]"
|
|
227
|
+
cancel-text="[[__effectiveI18n.confirm.cancel.button.dismiss]]"
|
|
228
|
+
header="[[__effectiveI18n.confirm.cancel.title]]"
|
|
229
|
+
message="[[__effectiveI18n.confirm.cancel.content]]"
|
|
230
230
|
confirm-theme="primary"
|
|
231
231
|
></vaadin-confirm-dialog>
|
|
232
232
|
|
|
@@ -235,10 +235,10 @@ class Crud extends CrudMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
|
|
|
235
235
|
id="confirmDelete"
|
|
236
236
|
on-confirm="__confirmDelete"
|
|
237
237
|
cancel-button-visible
|
|
238
|
-
confirm-text="[[
|
|
239
|
-
cancel-text="[[
|
|
240
|
-
header="[[
|
|
241
|
-
message="[[
|
|
238
|
+
confirm-text="[[__effectiveI18n.confirm.delete.button.confirm]]"
|
|
239
|
+
cancel-text="[[__effectiveI18n.confirm.delete.button.dismiss]]"
|
|
240
|
+
header="[[__effectiveI18n.confirm.delete.title]]"
|
|
241
|
+
message="[[__effectiveI18n.confirm.delete.content]]"
|
|
242
242
|
confirm-theme="primary error"
|
|
243
243
|
></vaadin-confirm-dialog>
|
|
244
244
|
`;
|
package/src/vaadin-lit-crud.js
CHANGED
|
@@ -87,10 +87,10 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(CrudMixin(PolylitM
|
|
|
87
87
|
id="confirmCancel"
|
|
88
88
|
@confirm="${this.__confirmCancel}"
|
|
89
89
|
cancel-button-visible
|
|
90
|
-
.confirmText="${this.
|
|
91
|
-
.cancelText="${this.
|
|
92
|
-
.header="${this.
|
|
93
|
-
.message="${this.
|
|
90
|
+
.confirmText="${this.__effectiveI18n.confirm.cancel.button.confirm}"
|
|
91
|
+
.cancelText="${this.__effectiveI18n.confirm.cancel.button.dismiss}"
|
|
92
|
+
.header="${this.__effectiveI18n.confirm.cancel.title}"
|
|
93
|
+
.message="${this.__effectiveI18n.confirm.cancel.content}"
|
|
94
94
|
confirm-theme="primary"
|
|
95
95
|
></vaadin-confirm-dialog>
|
|
96
96
|
|
|
@@ -99,10 +99,10 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(CrudMixin(PolylitM
|
|
|
99
99
|
id="confirmDelete"
|
|
100
100
|
@confirm="${this.__confirmDelete}"
|
|
101
101
|
cancel-button-visible
|
|
102
|
-
.confirmText="${this.
|
|
103
|
-
.cancelText="${this.
|
|
104
|
-
.header="${this.
|
|
105
|
-
.message="${this.
|
|
102
|
+
.confirmText="${this.__effectiveI18n.confirm.delete.button.confirm}"
|
|
103
|
+
.cancelText="${this.__effectiveI18n.confirm.delete.button.dismiss}"
|
|
104
|
+
.header="${this.__effectiveI18n.confirm.delete.title}"
|
|
105
|
+
.message="${this.__effectiveI18n.confirm.delete.content}"
|
|
106
106
|
confirm-theme="primary error"
|
|
107
107
|
></vaadin-confirm-dialog>
|
|
108
108
|
`;
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/crud",
|
|
4
|
-
"version": "24.7.0-
|
|
4
|
+
"version": "24.7.0-alpha9",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -357,7 +357,7 @@
|
|
|
357
357
|
},
|
|
358
358
|
{
|
|
359
359
|
"name": "vaadin-crud",
|
|
360
|
-
"description": "`<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-
|
|
360
|
+
"description": "`<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha9/#/elements/vaadin-crud#property-items) property.\n\nA grid and an editor will be automatically generated and configured based on the data structure provided.\n\n```html\n<vaadin-crud></vaadin-crud>\n```\n```js\nconst crud = document.querySelector('vaadin-crud');\n\ncrud.items = [\n { name: 'John', surname: 'Lennon', role: 'singer' },\n { name: 'Ringo', surname: 'Starr', role: 'drums' },\n // ... more items\n];\n```\n\n### Data Provider Function\n\nOtherwise, you can provide a [`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha9/#/elements/vaadin-crud#property-dataProvider) function.\n\n```js\nconst crud = document.querySelector('vaadin-crud');\n\nconst users = [\n { name: 'John', surname: 'Lennon', role: 'singer' },\n { name: 'Ringo', surname: 'Starr', role: 'drums' },\n // ... more items\n];\n\ncrud.dataProvider = (params, callback) => {\n const chunk = users.slice(params.page * params.pageSize, params.page * params.pageSize + params.pageSize);\n callback(chunk, people.length);\n};\n```\n\nNOTE: The auto-generated editor only supports string types. If you need to handle special cases\ncustomizing the editor is discussed below.\n\n### Customization\n\nAlternatively you can fully configure the component by using `slot` names.\n\nSlot name | Description\n---------------|----------------\n`grid` | To replace the auto-generated grid with a custom one.\n`form` | To replace the auto-generated form.\n`save-button` | To replace the \"Save\" button.\n`cancel-button`| To replace the \"Cancel\" button.\n`delete-button`| To replace the \"Delete\" button.\n`toolbar` | To provide the toolbar content (by default, it's empty).\n`new-button` | To replace the \"New item\" button.\n\n#### Example:\n\n```html\n<vaadin-crud id=\"crud\">\n <vaadin-grid slot=\"grid\">\n <vaadin-crud-edit-column></vaadin-crud-edit-column>\n <vaadin-grid-column id=\"column1\"></vaadin-grid-column>\n <vaadin-grid-column id=\"column2\"></vaadin-grid-column>\n </vaadin-grid>\n\n <vaadin-form-layout slot=\"form\">\n <vaadin-text-field label=\"First\" path=\"name\"></vaadin-text-field>\n <vaadin-text-field label=\"Surname\" path=\"surname\"></vaadin-text-field>\n </vaadin-form-layout>\n\n <div slot=\"toolbar\">Total singers: 2</div>\n <button slot=\"new-button\">New singer</button>\n\n <button slot=\"save-button\">Save changes</button>\n <button slot=\"cancel-button\">Discard changes</button>\n <button slot=\"delete-button\">Delete singer</button>\n</vaadin-crud>\n```\n```js\nconst crud = document.querySelector('#crud');\n\nconst column1 = document.querySelector('#column1');\ncolumn1.headerRenderer = (root, column) => {\n root.textContent = 'Name';\n};\ncolumn1.renderer = (root, column, model) => {\n root.textContent = model.item.name;\n};\n\nconst column2 = document.querySelector('#column2');\ncolumn2.headerRenderer = (root, column) => {\n root.textContent = 'Surname';\n};\ncolumn2.renderer = (root, column, model) => {\n root.textContent = model.item.surname;\n};\n\ncrud.items = [\n { name: 'John', surname: 'Lennon', role: 'singer' },\n { name: 'Ringo', surname: 'Starr', role: 'drums' },\n // ... more items\n];\n```\n\n### Helpers\n\nThe following elements are used to auto-configure the grid and the editor\n- [`<vaadin-crud-edit-column>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha9/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha9/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha9/#/elements/vaadin-form-layout)\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom. By default it contains the the `new` button\n\nThe following custom properties are available:\n\nCustom Property | Description | Default\n----------------|----------------\n--vaadin-crud-editor-max-height | max height of editor when opened on the bottom | 40%\n--vaadin-crud-editor-max-width | max width of editor when opened on the side | 40%\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
361
361
|
"attributes": [
|
|
362
362
|
{
|
|
363
363
|
"name": "editor-position",
|
|
@@ -412,7 +412,7 @@
|
|
|
412
412
|
},
|
|
413
413
|
{
|
|
414
414
|
"name": "include",
|
|
415
|
-
"description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-
|
|
415
|
+
"description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha9/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
416
416
|
"value": {
|
|
417
417
|
"type": [
|
|
418
418
|
"string",
|
|
@@ -423,7 +423,7 @@
|
|
|
423
423
|
},
|
|
424
424
|
{
|
|
425
425
|
"name": "exclude",
|
|
426
|
-
"description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-
|
|
426
|
+
"description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha9/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
427
427
|
"value": {
|
|
428
428
|
"type": [
|
|
429
429
|
"string",
|
|
@@ -468,6 +468,15 @@
|
|
|
468
468
|
],
|
|
469
469
|
"js": {
|
|
470
470
|
"properties": [
|
|
471
|
+
{
|
|
472
|
+
"name": "i18n",
|
|
473
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n\n```\n{\n newItem: 'New item',\n editItem: 'Edit item',\n saveItem: 'Save',\n cancel: 'Cancel',\n deleteItem: 'Delete...',\n editLabel: 'Edit',\n confirm: {\n delete: {\n title: 'Confirm delete',\n content: 'Are you sure you want to delete the selected item? This action cannot be undone.',\n button: {\n confirm: 'Delete',\n dismiss: 'Cancel'\n }\n },\n cancel: {\n title: 'Unsaved changes',\n content: 'There are unsaved modifications to the item.',\n button: {\n confirm: 'Discard',\n dismiss: 'Continue editing'\n }\n }\n }\n}\n```",
|
|
474
|
+
"value": {
|
|
475
|
+
"type": [
|
|
476
|
+
"CrudI18n"
|
|
477
|
+
]
|
|
478
|
+
}
|
|
479
|
+
},
|
|
471
480
|
{
|
|
472
481
|
"name": "items",
|
|
473
482
|
"description": "An array containing the items which will be stamped to the column template instances.",
|
|
@@ -550,7 +559,7 @@
|
|
|
550
559
|
},
|
|
551
560
|
{
|
|
552
561
|
"name": "include",
|
|
553
|
-
"description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-
|
|
562
|
+
"description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha9/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
554
563
|
"value": {
|
|
555
564
|
"type": [
|
|
556
565
|
"string",
|
|
@@ -561,7 +570,7 @@
|
|
|
561
570
|
},
|
|
562
571
|
{
|
|
563
572
|
"name": "exclude",
|
|
564
|
-
"description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-
|
|
573
|
+
"description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha9/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
565
574
|
"value": {
|
|
566
575
|
"type": [
|
|
567
576
|
"string",
|
|
@@ -591,15 +600,6 @@
|
|
|
591
600
|
"undefined"
|
|
592
601
|
]
|
|
593
602
|
}
|
|
594
|
-
},
|
|
595
|
-
{
|
|
596
|
-
"name": "i18n",
|
|
597
|
-
"description": "The object used to localize this component.\nFor changing the default localization, change the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n\n```\n{\n newItem: 'New item',\n editItem: 'Edit item',\n saveItem: 'Save',\n cancel: 'Cancel',\n deleteItem: 'Delete...',\n editLabel: 'Edit',\n confirm: {\n delete: {\n title: 'Confirm delete',\n content: 'Are you sure you want to delete the selected item? This action cannot be undone.',\n button: {\n confirm: 'Delete',\n dismiss: 'Cancel'\n }\n },\n cancel: {\n title: 'Unsaved changes',\n content: 'There are unsaved modifications to the item.',\n button: {\n confirm: 'Discard',\n dismiss: 'Continue editing'\n }\n }\n }\n}\n```",
|
|
598
|
-
"value": {
|
|
599
|
-
"type": [
|
|
600
|
-
"CrudI18n"
|
|
601
|
-
]
|
|
602
|
-
}
|
|
603
603
|
}
|
|
604
604
|
],
|
|
605
605
|
"events": [
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/crud",
|
|
4
|
-
"version": "24.7.0-
|
|
4
|
+
"version": "24.7.0-alpha9",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -142,7 +142,7 @@
|
|
|
142
142
|
},
|
|
143
143
|
{
|
|
144
144
|
"name": "vaadin-crud",
|
|
145
|
-
"description": "`<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-
|
|
145
|
+
"description": "`<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha9/#/elements/vaadin-crud#property-items) property.\n\nA grid and an editor will be automatically generated and configured based on the data structure provided.\n\n```html\n<vaadin-crud></vaadin-crud>\n```\n```js\nconst crud = document.querySelector('vaadin-crud');\n\ncrud.items = [\n { name: 'John', surname: 'Lennon', role: 'singer' },\n { name: 'Ringo', surname: 'Starr', role: 'drums' },\n // ... more items\n];\n```\n\n### Data Provider Function\n\nOtherwise, you can provide a [`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha9/#/elements/vaadin-crud#property-dataProvider) function.\n\n```js\nconst crud = document.querySelector('vaadin-crud');\n\nconst users = [\n { name: 'John', surname: 'Lennon', role: 'singer' },\n { name: 'Ringo', surname: 'Starr', role: 'drums' },\n // ... more items\n];\n\ncrud.dataProvider = (params, callback) => {\n const chunk = users.slice(params.page * params.pageSize, params.page * params.pageSize + params.pageSize);\n callback(chunk, people.length);\n};\n```\n\nNOTE: The auto-generated editor only supports string types. If you need to handle special cases\ncustomizing the editor is discussed below.\n\n### Customization\n\nAlternatively you can fully configure the component by using `slot` names.\n\nSlot name | Description\n---------------|----------------\n`grid` | To replace the auto-generated grid with a custom one.\n`form` | To replace the auto-generated form.\n`save-button` | To replace the \"Save\" button.\n`cancel-button`| To replace the \"Cancel\" button.\n`delete-button`| To replace the \"Delete\" button.\n`toolbar` | To provide the toolbar content (by default, it's empty).\n`new-button` | To replace the \"New item\" button.\n\n#### Example:\n\n```html\n<vaadin-crud id=\"crud\">\n <vaadin-grid slot=\"grid\">\n <vaadin-crud-edit-column></vaadin-crud-edit-column>\n <vaadin-grid-column id=\"column1\"></vaadin-grid-column>\n <vaadin-grid-column id=\"column2\"></vaadin-grid-column>\n </vaadin-grid>\n\n <vaadin-form-layout slot=\"form\">\n <vaadin-text-field label=\"First\" path=\"name\"></vaadin-text-field>\n <vaadin-text-field label=\"Surname\" path=\"surname\"></vaadin-text-field>\n </vaadin-form-layout>\n\n <div slot=\"toolbar\">Total singers: 2</div>\n <button slot=\"new-button\">New singer</button>\n\n <button slot=\"save-button\">Save changes</button>\n <button slot=\"cancel-button\">Discard changes</button>\n <button slot=\"delete-button\">Delete singer</button>\n</vaadin-crud>\n```\n```js\nconst crud = document.querySelector('#crud');\n\nconst column1 = document.querySelector('#column1');\ncolumn1.headerRenderer = (root, column) => {\n root.textContent = 'Name';\n};\ncolumn1.renderer = (root, column, model) => {\n root.textContent = model.item.name;\n};\n\nconst column2 = document.querySelector('#column2');\ncolumn2.headerRenderer = (root, column) => {\n root.textContent = 'Surname';\n};\ncolumn2.renderer = (root, column, model) => {\n root.textContent = model.item.surname;\n};\n\ncrud.items = [\n { name: 'John', surname: 'Lennon', role: 'singer' },\n { name: 'Ringo', surname: 'Starr', role: 'drums' },\n // ... more items\n];\n```\n\n### Helpers\n\nThe following elements are used to auto-configure the grid and the editor\n- [`<vaadin-crud-edit-column>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha9/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha9/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha9/#/elements/vaadin-form-layout)\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom. By default it contains the the `new` button\n\nThe following custom properties are available:\n\nCustom Property | Description | Default\n----------------|----------------\n--vaadin-crud-editor-max-height | max height of editor when opened on the bottom | 40%\n--vaadin-crud-editor-max-width | max width of editor when opened on the side | 40%\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
146
146
|
"extension": true,
|
|
147
147
|
"attributes": [
|
|
148
148
|
{
|
|
@@ -187,6 +187,13 @@
|
|
|
187
187
|
"kind": "expression"
|
|
188
188
|
}
|
|
189
189
|
},
|
|
190
|
+
{
|
|
191
|
+
"name": ".i18n",
|
|
192
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n\n```\n{\n newItem: 'New item',\n editItem: 'Edit item',\n saveItem: 'Save',\n cancel: 'Cancel',\n deleteItem: 'Delete...',\n editLabel: 'Edit',\n confirm: {\n delete: {\n title: 'Confirm delete',\n content: 'Are you sure you want to delete the selected item? This action cannot be undone.',\n button: {\n confirm: 'Delete',\n dismiss: 'Cancel'\n }\n },\n cancel: {\n title: 'Unsaved changes',\n content: 'There are unsaved modifications to the item.',\n button: {\n confirm: 'Discard',\n dismiss: 'Continue editing'\n }\n }\n }\n}\n```",
|
|
193
|
+
"value": {
|
|
194
|
+
"kind": "expression"
|
|
195
|
+
}
|
|
196
|
+
},
|
|
190
197
|
{
|
|
191
198
|
"name": ".items",
|
|
192
199
|
"description": "An array containing the items which will be stamped to the column template instances.",
|
|
@@ -217,21 +224,14 @@
|
|
|
217
224
|
},
|
|
218
225
|
{
|
|
219
226
|
"name": ".include",
|
|
220
|
-
"description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-
|
|
227
|
+
"description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha9/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
221
228
|
"value": {
|
|
222
229
|
"kind": "expression"
|
|
223
230
|
}
|
|
224
231
|
},
|
|
225
232
|
{
|
|
226
233
|
"name": ".exclude",
|
|
227
|
-
"description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-
|
|
228
|
-
"value": {
|
|
229
|
-
"kind": "expression"
|
|
230
|
-
}
|
|
231
|
-
},
|
|
232
|
-
{
|
|
233
|
-
"name": ".i18n",
|
|
234
|
-
"description": "The object used to localize this component.\nFor changing the default localization, change the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n\n```\n{\n newItem: 'New item',\n editItem: 'Edit item',\n saveItem: 'Save',\n cancel: 'Cancel',\n deleteItem: 'Delete...',\n editLabel: 'Edit',\n confirm: {\n delete: {\n title: 'Confirm delete',\n content: 'Are you sure you want to delete the selected item? This action cannot be undone.',\n button: {\n confirm: 'Delete',\n dismiss: 'Cancel'\n }\n },\n cancel: {\n title: 'Unsaved changes',\n content: 'There are unsaved modifications to the item.',\n button: {\n confirm: 'Discard',\n dismiss: 'Continue editing'\n }\n }\n }\n}\n```",
|
|
234
|
+
"description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha9/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
235
235
|
"value": {
|
|
236
236
|
"kind": "expression"
|
|
237
237
|
}
|