@vaadin/crud 24.0.0-alpha7 → 24.0.0-alpha8
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 +12 -12
- package/src/vaadin-crud-dialog.js +1 -1
- package/src/vaadin-crud-edit-column.d.ts +1 -1
- package/src/vaadin-crud-edit-column.js +1 -1
- package/src/vaadin-crud-edit.d.ts +1 -1
- package/src/vaadin-crud-edit.js +1 -1
- package/src/vaadin-crud-form.d.ts +1 -1
- package/src/vaadin-crud-form.js +3 -25
- package/src/vaadin-crud-grid.d.ts +1 -1
- package/src/vaadin-crud-grid.js +7 -29
- package/src/vaadin-crud-helpers.d.ts +29 -0
- package/src/vaadin-crud-helpers.js +64 -0
- package/src/vaadin-crud-include-mixin.d.ts +1 -1
- package/src/vaadin-crud-include-mixin.js +7 -4
- package/src/vaadin-crud.d.ts +1 -1
- package/src/vaadin-crud.js +7 -21
- package/web-types.json +288 -1
- package/web-types.lit.json +162 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/crud",
|
|
3
|
-
"version": "24.0.0-
|
|
3
|
+
"version": "24.0.0-alpha8",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,16 +37,16 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
39
39
|
"@polymer/polymer": "^3.0.0",
|
|
40
|
-
"@vaadin/button": "24.0.0-
|
|
41
|
-
"@vaadin/component-base": "24.0.0-
|
|
42
|
-
"@vaadin/confirm-dialog": "24.0.0-
|
|
43
|
-
"@vaadin/dialog": "24.0.0-
|
|
44
|
-
"@vaadin/form-layout": "24.0.0-
|
|
45
|
-
"@vaadin/grid": "24.0.0-
|
|
46
|
-
"@vaadin/text-field": "24.0.0-
|
|
47
|
-
"@vaadin/vaadin-lumo-styles": "24.0.0-
|
|
48
|
-
"@vaadin/vaadin-material-styles": "24.0.0-
|
|
49
|
-
"@vaadin/vaadin-themable-mixin": "24.0.0-
|
|
40
|
+
"@vaadin/button": "24.0.0-alpha8",
|
|
41
|
+
"@vaadin/component-base": "24.0.0-alpha8",
|
|
42
|
+
"@vaadin/confirm-dialog": "24.0.0-alpha8",
|
|
43
|
+
"@vaadin/dialog": "24.0.0-alpha8",
|
|
44
|
+
"@vaadin/form-layout": "24.0.0-alpha8",
|
|
45
|
+
"@vaadin/grid": "24.0.0-alpha8",
|
|
46
|
+
"@vaadin/text-field": "24.0.0-alpha8",
|
|
47
|
+
"@vaadin/vaadin-lumo-styles": "24.0.0-alpha8",
|
|
48
|
+
"@vaadin/vaadin-material-styles": "24.0.0-alpha8",
|
|
49
|
+
"@vaadin/vaadin-themable-mixin": "24.0.0-alpha8"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
52
|
"@esm-bundle/chai": "^4.3.4",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"web-types.json",
|
|
59
59
|
"web-types.lit.json"
|
|
60
60
|
],
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "476752249bb12295c500980d98a3256ad3b22b73"
|
|
62
62
|
}
|
package/src/vaadin-crud-edit.js
CHANGED
package/src/vaadin-crud-form.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2000 -
|
|
3
|
+
* Copyright (c) 2000 - 2023 Vaadin Ltd.
|
|
4
4
|
*
|
|
5
5
|
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
6
|
*
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
*/
|
|
11
11
|
import '@vaadin/text-field/src/vaadin-text-field.js';
|
|
12
12
|
import { FormLayout } from '@vaadin/form-layout/src/vaadin-form-layout.js';
|
|
13
|
+
import { capitalize } from './vaadin-crud-helpers.js';
|
|
13
14
|
import { IncludedMixin } from './vaadin-crud-include-mixin.js';
|
|
14
15
|
|
|
15
16
|
/**
|
|
@@ -62,7 +63,7 @@ class CrudForm extends IncludedMixin(FormLayout) {
|
|
|
62
63
|
/** @private */
|
|
63
64
|
__createField(parent, path) {
|
|
64
65
|
const field = document.createElement('vaadin-text-field');
|
|
65
|
-
field.label =
|
|
66
|
+
field.label = capitalize(path);
|
|
66
67
|
field.path = path;
|
|
67
68
|
field.required = true;
|
|
68
69
|
parent.appendChild(field);
|
|
@@ -87,29 +88,6 @@ class CrudForm extends IncludedMixin(FormLayout) {
|
|
|
87
88
|
this._fields = undefined;
|
|
88
89
|
}
|
|
89
90
|
}
|
|
90
|
-
|
|
91
|
-
/** @private */
|
|
92
|
-
__capitalize(path) {
|
|
93
|
-
return path
|
|
94
|
-
.toLowerCase()
|
|
95
|
-
.replace(/([^\w]+)/g, ' ')
|
|
96
|
-
.trim()
|
|
97
|
-
.replace(/^./, (c) => c.toUpperCase());
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
/** @private */
|
|
101
|
-
__set(path, val, obj) {
|
|
102
|
-
if (obj && path) {
|
|
103
|
-
path
|
|
104
|
-
.split('.')
|
|
105
|
-
.slice(0, -1)
|
|
106
|
-
.reduce((o, p) => {
|
|
107
|
-
o[p] ||= {};
|
|
108
|
-
return o[p];
|
|
109
|
-
}, obj);
|
|
110
|
-
this.set(path, val, obj);
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
91
|
}
|
|
114
92
|
|
|
115
93
|
customElements.define(CrudForm.is, CrudForm);
|
package/src/vaadin-crud-grid.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2000 -
|
|
3
|
+
* Copyright (c) 2000 - 2023 Vaadin Ltd.
|
|
4
4
|
*
|
|
5
5
|
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
6
|
*
|
|
@@ -14,6 +14,7 @@ import '@vaadin/grid/src/vaadin-grid-sorter.js';
|
|
|
14
14
|
import '@vaadin/grid/src/vaadin-grid-filter.js';
|
|
15
15
|
import './vaadin-crud-edit-column.js';
|
|
16
16
|
import { Grid } from '@vaadin/grid/src/vaadin-grid.js';
|
|
17
|
+
import { capitalize, getProperty } from './vaadin-crud-helpers.js';
|
|
17
18
|
import { IncludedMixin } from './vaadin-crud-include-mixin.js';
|
|
18
19
|
|
|
19
20
|
/**
|
|
@@ -148,10 +149,10 @@ class CrudGrid extends IncludedMixin(Grid) {
|
|
|
148
149
|
_generateHeader(path) {
|
|
149
150
|
return path
|
|
150
151
|
.substr(path.lastIndexOf('.') + 1)
|
|
151
|
-
.replace(/([A-Z])/
|
|
152
|
+
.replace(/([A-Z])/gu, '-$1')
|
|
152
153
|
.toLowerCase()
|
|
153
|
-
.replace(/-/
|
|
154
|
-
.replace(
|
|
154
|
+
.replace(/-/gu, ' ')
|
|
155
|
+
.replace(/^./u, (match) => match.toUpperCase());
|
|
155
156
|
}
|
|
156
157
|
|
|
157
158
|
/** @private */
|
|
@@ -169,7 +170,7 @@ class CrudGrid extends IncludedMixin(Grid) {
|
|
|
169
170
|
col = document.createElement('vaadin-grid-column');
|
|
170
171
|
parent.appendChild(col);
|
|
171
172
|
col.renderer = (root, _column, model) => {
|
|
172
|
-
root.textContent = path ?
|
|
173
|
+
root.textContent = path ? getProperty(path, model.item) : model.item;
|
|
173
174
|
};
|
|
174
175
|
}
|
|
175
176
|
|
|
@@ -267,34 +268,11 @@ class CrudGrid extends IncludedMixin(Grid) {
|
|
|
267
268
|
__createGroup(parent, header) {
|
|
268
269
|
const grp = document.createElement('vaadin-grid-column-group');
|
|
269
270
|
if (header) {
|
|
270
|
-
grp.header =
|
|
271
|
+
grp.header = capitalize(header);
|
|
271
272
|
}
|
|
272
273
|
parent.appendChild(grp);
|
|
273
274
|
return grp;
|
|
274
275
|
}
|
|
275
|
-
|
|
276
|
-
/** @private */
|
|
277
|
-
__capitalize(path) {
|
|
278
|
-
return path
|
|
279
|
-
.toLowerCase()
|
|
280
|
-
.replace(/([^\w]+)/g, ' ')
|
|
281
|
-
.trim()
|
|
282
|
-
.replace(/^./, (c) => c.toUpperCase());
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
/** @private */
|
|
286
|
-
__set(path, val, obj) {
|
|
287
|
-
if (obj && path) {
|
|
288
|
-
path
|
|
289
|
-
.split('.')
|
|
290
|
-
.slice(0, -1)
|
|
291
|
-
.reduce((o, p) => {
|
|
292
|
-
o[p] ||= {};
|
|
293
|
-
return o[p];
|
|
294
|
-
}, obj);
|
|
295
|
-
this.set(path, val, obj);
|
|
296
|
-
}
|
|
297
|
-
}
|
|
298
276
|
}
|
|
299
277
|
|
|
300
278
|
customElements.define(CrudGrid.is, CrudGrid);
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2000 - 2023 Vaadin Ltd.
|
|
4
|
+
*
|
|
5
|
+
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
|
+
*
|
|
7
|
+
*
|
|
8
|
+
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
|
+
* license.
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Convenience utility for capitalizing a string, with
|
|
14
|
+
* replacing non-alphanumeric characters with spaces.
|
|
15
|
+
*/
|
|
16
|
+
export function capitalize(path: string): string;
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* Convenience method for reading a value from a path.
|
|
20
|
+
*/
|
|
21
|
+
export function getProperty(path: string, obj: Record<string, unknown>): unknown;
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* Convenience utility for setting a value to a path.
|
|
25
|
+
*
|
|
26
|
+
* Note, if any part in the path is undefined, this
|
|
27
|
+
* function initializes it with an empty object.
|
|
28
|
+
*/
|
|
29
|
+
export function setProperty(path: string, value: unknown, obj: Record<string, unknown>): void;
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2000 - 2023 Vaadin Ltd.
|
|
4
|
+
*
|
|
5
|
+
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
|
+
*
|
|
7
|
+
*
|
|
8
|
+
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
|
+
* license.
|
|
10
|
+
*/
|
|
11
|
+
import { get, set } from '@polymer/polymer/lib/utils/path.js';
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* Convenience utility for capitalizing a string, with
|
|
15
|
+
* replacing non-alphanumeric characters with spaces.
|
|
16
|
+
*
|
|
17
|
+
* @param {string} path
|
|
18
|
+
* @return {string}
|
|
19
|
+
*/
|
|
20
|
+
export function capitalize(path) {
|
|
21
|
+
return path
|
|
22
|
+
.toLowerCase()
|
|
23
|
+
.replace(/([^\w]+)/gu, ' ')
|
|
24
|
+
.trim()
|
|
25
|
+
.replace(/^./u, (c) => c.toUpperCase());
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* Convenience utility for reading a value from a path.
|
|
30
|
+
*
|
|
31
|
+
* @param {string} path
|
|
32
|
+
* @param {Object} obj
|
|
33
|
+
* @return {*}
|
|
34
|
+
*/
|
|
35
|
+
export function getProperty(path, obj) {
|
|
36
|
+
return get(obj, path);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* Convenience utility for setting a value to a path.
|
|
41
|
+
*
|
|
42
|
+
* Note, if any part in the path is undefined, this
|
|
43
|
+
* function initializes it with an empty object.
|
|
44
|
+
*
|
|
45
|
+
* @param {string} path
|
|
46
|
+
* @param {*} value
|
|
47
|
+
* @param {Object} obj
|
|
48
|
+
*/
|
|
49
|
+
export function setProperty(path, value, obj) {
|
|
50
|
+
if (obj && path) {
|
|
51
|
+
path
|
|
52
|
+
.split('.')
|
|
53
|
+
.slice(0, -1)
|
|
54
|
+
.reduce((o, p) => {
|
|
55
|
+
// Create an object
|
|
56
|
+
if (!o[p]) {
|
|
57
|
+
o[p] = {};
|
|
58
|
+
}
|
|
59
|
+
return o[p];
|
|
60
|
+
}, obj);
|
|
61
|
+
|
|
62
|
+
set(obj, path, value);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2000 -
|
|
3
|
+
* Copyright (c) 2000 - 2023 Vaadin Ltd.
|
|
4
4
|
*
|
|
5
5
|
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
6
|
*
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
9
|
* license.
|
|
10
10
|
*/
|
|
11
|
+
import { setProperty } from './vaadin-crud-helpers.js';
|
|
11
12
|
|
|
12
13
|
/**
|
|
13
14
|
* @polymerMixin
|
|
@@ -46,17 +47,19 @@ export const IncludedMixin = (superClass) =>
|
|
|
46
47
|
/** @private */
|
|
47
48
|
__onExcludeChange(exclude) {
|
|
48
49
|
if (typeof exclude === 'string') {
|
|
49
|
-
this.exclude = exclude ? RegExp(exclude.replace(/, */
|
|
50
|
+
this.exclude = exclude ? RegExp(exclude.replace(/, */gu, '|'), 'iu') : undefined;
|
|
50
51
|
}
|
|
51
52
|
}
|
|
52
53
|
|
|
53
54
|
/** @private */
|
|
54
55
|
__onIncludeChange(include) {
|
|
55
56
|
if (typeof include === 'string') {
|
|
56
|
-
this.include = include ? include.split(/, */) : undefined;
|
|
57
|
+
this.include = include ? include.split(/, */u) : undefined;
|
|
57
58
|
} else if (!this._fields && Array.isArray(include)) {
|
|
58
59
|
const item = {};
|
|
59
|
-
this.include.forEach((path) =>
|
|
60
|
+
this.include.forEach((path) => {
|
|
61
|
+
setProperty(path, null, item);
|
|
62
|
+
});
|
|
60
63
|
this._configure(item);
|
|
61
64
|
}
|
|
62
65
|
}
|
package/src/vaadin-crud.d.ts
CHANGED
package/src/vaadin-crud.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2000 -
|
|
3
|
+
* Copyright (c) 2000 - 2023 Vaadin Ltd.
|
|
4
4
|
*
|
|
5
5
|
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
6
|
*
|
|
@@ -22,6 +22,7 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
|
22
22
|
import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
|
|
23
23
|
import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
|
|
24
24
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
25
|
+
import { getProperty, setProperty } from './vaadin-crud-helpers.js';
|
|
25
26
|
|
|
26
27
|
/**
|
|
27
28
|
* @private
|
|
@@ -1171,7 +1172,7 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
|
|
|
1171
1172
|
this._fields.forEach((e) => {
|
|
1172
1173
|
const path = e.path || e.getAttribute('path');
|
|
1173
1174
|
if (path) {
|
|
1174
|
-
e.value =
|
|
1175
|
+
e.value = getProperty(path, item);
|
|
1175
1176
|
}
|
|
1176
1177
|
});
|
|
1177
1178
|
|
|
@@ -1252,7 +1253,7 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
|
|
|
1252
1253
|
this._fields.forEach((e) => {
|
|
1253
1254
|
const path = e.path || e.getAttribute('path');
|
|
1254
1255
|
if (path) {
|
|
1255
|
-
|
|
1256
|
+
setProperty(path, e.value, item);
|
|
1256
1257
|
}
|
|
1257
1258
|
});
|
|
1258
1259
|
const evt = this.dispatchEvent(new CustomEvent('save', { detail: { item }, cancelable: true }));
|
|
@@ -1264,7 +1265,9 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
|
|
|
1264
1265
|
this.items.push(item);
|
|
1265
1266
|
}
|
|
1266
1267
|
} else {
|
|
1267
|
-
this.editedItem
|
|
1268
|
+
if (!this.editedItem) {
|
|
1269
|
+
this.editedItem = {};
|
|
1270
|
+
}
|
|
1268
1271
|
Object.assign(this.editedItem, item);
|
|
1269
1272
|
}
|
|
1270
1273
|
this._grid.clearCache();
|
|
@@ -1306,23 +1309,6 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
|
|
|
1306
1309
|
}
|
|
1307
1310
|
}
|
|
1308
1311
|
|
|
1309
|
-
/**
|
|
1310
|
-
* Utility method for setting nested values in JSON objects but initializing empty keys unless `Polymer.Base.set`
|
|
1311
|
-
* @private
|
|
1312
|
-
*/
|
|
1313
|
-
__set(path, val, obj) {
|
|
1314
|
-
if (obj && path) {
|
|
1315
|
-
path
|
|
1316
|
-
.split('.')
|
|
1317
|
-
.slice(0, -1)
|
|
1318
|
-
.reduce((o, p) => {
|
|
1319
|
-
o[p] ||= {};
|
|
1320
|
-
return o[p];
|
|
1321
|
-
}, obj);
|
|
1322
|
-
this.set(path, val, obj);
|
|
1323
|
-
}
|
|
1324
|
-
}
|
|
1325
|
-
|
|
1326
1312
|
/**
|
|
1327
1313
|
* Fired when user wants to edit an existing item. If the default is prevented, then
|
|
1328
1314
|
* a new item is not assigned to the form, giving that responsibility to the app, though
|
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.0.0-
|
|
4
|
+
"version": "24.0.0-alpha8",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -292,6 +292,293 @@
|
|
|
292
292
|
],
|
|
293
293
|
"events": []
|
|
294
294
|
}
|
|
295
|
+
},
|
|
296
|
+
{
|
|
297
|
+
"name": "vaadin-crud",
|
|
298
|
+
"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.0.0-alpha8/#/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.0.0-alpha8/#/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.0.0-alpha8/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha8/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha8/#/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/custom-theme/styling-components) documentation.",
|
|
299
|
+
"attributes": [
|
|
300
|
+
{
|
|
301
|
+
"name": "editor-position",
|
|
302
|
+
"description": "Sets how editor will be presented on desktop screen.\n\nAccepted values are:\n - `` (default) - form will open as overlay\n - `bottom` - form will open below the grid\n - `aside` - form will open on the grid side (_right_, if lft and _left_ if rtl)",
|
|
303
|
+
"value": {
|
|
304
|
+
"type": [
|
|
305
|
+
"CrudEditorPosition"
|
|
306
|
+
]
|
|
307
|
+
}
|
|
308
|
+
},
|
|
309
|
+
{
|
|
310
|
+
"name": "edit-on-click",
|
|
311
|
+
"description": "Enables user to click on row to edit it.\nNote: When enabled, auto-generated grid won't show the edit column.",
|
|
312
|
+
"value": {
|
|
313
|
+
"type": [
|
|
314
|
+
"boolean"
|
|
315
|
+
]
|
|
316
|
+
}
|
|
317
|
+
},
|
|
318
|
+
{
|
|
319
|
+
"name": "no-filter",
|
|
320
|
+
"description": "Disable filtering when grid is autoconfigured.",
|
|
321
|
+
"value": {
|
|
322
|
+
"type": [
|
|
323
|
+
"boolean",
|
|
324
|
+
"null",
|
|
325
|
+
"undefined"
|
|
326
|
+
]
|
|
327
|
+
}
|
|
328
|
+
},
|
|
329
|
+
{
|
|
330
|
+
"name": "no-sort",
|
|
331
|
+
"description": "Disable sorting when grid is autoconfigured.",
|
|
332
|
+
"value": {
|
|
333
|
+
"type": [
|
|
334
|
+
"boolean",
|
|
335
|
+
"null",
|
|
336
|
+
"undefined"
|
|
337
|
+
]
|
|
338
|
+
}
|
|
339
|
+
},
|
|
340
|
+
{
|
|
341
|
+
"name": "no-head",
|
|
342
|
+
"description": "Remove grid headers when it is autoconfigured.",
|
|
343
|
+
"value": {
|
|
344
|
+
"type": [
|
|
345
|
+
"boolean",
|
|
346
|
+
"null",
|
|
347
|
+
"undefined"
|
|
348
|
+
]
|
|
349
|
+
}
|
|
350
|
+
},
|
|
351
|
+
{
|
|
352
|
+
"name": "include",
|
|
353
|
+
"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.0.0-alpha8/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
354
|
+
"value": {
|
|
355
|
+
"type": [
|
|
356
|
+
"string",
|
|
357
|
+
"null",
|
|
358
|
+
"undefined"
|
|
359
|
+
]
|
|
360
|
+
}
|
|
361
|
+
},
|
|
362
|
+
{
|
|
363
|
+
"name": "exclude",
|
|
364
|
+
"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.0.0-alpha8/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
365
|
+
"value": {
|
|
366
|
+
"type": [
|
|
367
|
+
"string",
|
|
368
|
+
"null",
|
|
369
|
+
"undefined"
|
|
370
|
+
]
|
|
371
|
+
}
|
|
372
|
+
},
|
|
373
|
+
{
|
|
374
|
+
"name": "editor-opened",
|
|
375
|
+
"description": "Reflects the opened status of the editor.",
|
|
376
|
+
"value": {
|
|
377
|
+
"type": [
|
|
378
|
+
"boolean",
|
|
379
|
+
"null",
|
|
380
|
+
"undefined"
|
|
381
|
+
]
|
|
382
|
+
}
|
|
383
|
+
},
|
|
384
|
+
{
|
|
385
|
+
"name": "no-toolbar",
|
|
386
|
+
"description": "Controls visibility state of toolbar.\nWhen set to false toolbar is hidden and shown when set to true.",
|
|
387
|
+
"value": {
|
|
388
|
+
"type": [
|
|
389
|
+
"boolean",
|
|
390
|
+
"null",
|
|
391
|
+
"undefined"
|
|
392
|
+
]
|
|
393
|
+
}
|
|
394
|
+
},
|
|
395
|
+
{
|
|
396
|
+
"name": "theme",
|
|
397
|
+
"description": "The theme variants to apply to the component.",
|
|
398
|
+
"value": {
|
|
399
|
+
"type": [
|
|
400
|
+
"string",
|
|
401
|
+
"null",
|
|
402
|
+
"undefined"
|
|
403
|
+
]
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
],
|
|
407
|
+
"js": {
|
|
408
|
+
"properties": [
|
|
409
|
+
{
|
|
410
|
+
"name": "items",
|
|
411
|
+
"description": "An array containing the items which will be stamped to the column template instances.",
|
|
412
|
+
"value": {
|
|
413
|
+
"type": [
|
|
414
|
+
"Array.<unknown>",
|
|
415
|
+
"undefined"
|
|
416
|
+
]
|
|
417
|
+
}
|
|
418
|
+
},
|
|
419
|
+
{
|
|
420
|
+
"name": "editedItem",
|
|
421
|
+
"description": "The item being edited in the dialog.",
|
|
422
|
+
"value": {
|
|
423
|
+
"type": [
|
|
424
|
+
"unknown"
|
|
425
|
+
]
|
|
426
|
+
}
|
|
427
|
+
},
|
|
428
|
+
{
|
|
429
|
+
"name": "editorPosition",
|
|
430
|
+
"description": "Sets how editor will be presented on desktop screen.\n\nAccepted values are:\n - `` (default) - form will open as overlay\n - `bottom` - form will open below the grid\n - `aside` - form will open on the grid side (_right_, if lft and _left_ if rtl)",
|
|
431
|
+
"value": {
|
|
432
|
+
"type": [
|
|
433
|
+
"CrudEditorPosition"
|
|
434
|
+
]
|
|
435
|
+
}
|
|
436
|
+
},
|
|
437
|
+
{
|
|
438
|
+
"name": "editOnClick",
|
|
439
|
+
"description": "Enables user to click on row to edit it.\nNote: When enabled, auto-generated grid won't show the edit column.",
|
|
440
|
+
"value": {
|
|
441
|
+
"type": [
|
|
442
|
+
"boolean"
|
|
443
|
+
]
|
|
444
|
+
}
|
|
445
|
+
},
|
|
446
|
+
{
|
|
447
|
+
"name": "dataProvider",
|
|
448
|
+
"description": "Function that provides items lazily. Receives arguments `params`, `callback`\n\n`params.page` Requested page index\n`params.pageSize` Current page size\n`params.filters` Currently applied filters\n`params.sortOrders` Currently applied sorting orders\n\n`callback(items, size)` Callback function with arguments:\n - `items` Current page of items\n - `size` Total number of items",
|
|
449
|
+
"value": {
|
|
450
|
+
"type": [
|
|
451
|
+
"CrudDataProvider",
|
|
452
|
+
"undefined"
|
|
453
|
+
]
|
|
454
|
+
}
|
|
455
|
+
},
|
|
456
|
+
{
|
|
457
|
+
"name": "noFilter",
|
|
458
|
+
"description": "Disable filtering when grid is autoconfigured.",
|
|
459
|
+
"value": {
|
|
460
|
+
"type": [
|
|
461
|
+
"boolean",
|
|
462
|
+
"null",
|
|
463
|
+
"undefined"
|
|
464
|
+
]
|
|
465
|
+
}
|
|
466
|
+
},
|
|
467
|
+
{
|
|
468
|
+
"name": "noSort",
|
|
469
|
+
"description": "Disable sorting when grid is autoconfigured.",
|
|
470
|
+
"value": {
|
|
471
|
+
"type": [
|
|
472
|
+
"boolean",
|
|
473
|
+
"null",
|
|
474
|
+
"undefined"
|
|
475
|
+
]
|
|
476
|
+
}
|
|
477
|
+
},
|
|
478
|
+
{
|
|
479
|
+
"name": "noHead",
|
|
480
|
+
"description": "Remove grid headers when it is autoconfigured.",
|
|
481
|
+
"value": {
|
|
482
|
+
"type": [
|
|
483
|
+
"boolean",
|
|
484
|
+
"null",
|
|
485
|
+
"undefined"
|
|
486
|
+
]
|
|
487
|
+
}
|
|
488
|
+
},
|
|
489
|
+
{
|
|
490
|
+
"name": "include",
|
|
491
|
+
"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.0.0-alpha8/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
492
|
+
"value": {
|
|
493
|
+
"type": [
|
|
494
|
+
"string",
|
|
495
|
+
"null",
|
|
496
|
+
"undefined"
|
|
497
|
+
]
|
|
498
|
+
}
|
|
499
|
+
},
|
|
500
|
+
{
|
|
501
|
+
"name": "exclude",
|
|
502
|
+
"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.0.0-alpha8/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
503
|
+
"value": {
|
|
504
|
+
"type": [
|
|
505
|
+
"string",
|
|
506
|
+
"null",
|
|
507
|
+
"undefined"
|
|
508
|
+
]
|
|
509
|
+
}
|
|
510
|
+
},
|
|
511
|
+
{
|
|
512
|
+
"name": "editorOpened",
|
|
513
|
+
"description": "Reflects the opened status of the editor.",
|
|
514
|
+
"value": {
|
|
515
|
+
"type": [
|
|
516
|
+
"boolean",
|
|
517
|
+
"null",
|
|
518
|
+
"undefined"
|
|
519
|
+
]
|
|
520
|
+
}
|
|
521
|
+
},
|
|
522
|
+
{
|
|
523
|
+
"name": "noToolbar",
|
|
524
|
+
"description": "Controls visibility state of toolbar.\nWhen set to false toolbar is hidden and shown when set to true.",
|
|
525
|
+
"value": {
|
|
526
|
+
"type": [
|
|
527
|
+
"boolean",
|
|
528
|
+
"null",
|
|
529
|
+
"undefined"
|
|
530
|
+
]
|
|
531
|
+
}
|
|
532
|
+
},
|
|
533
|
+
{
|
|
534
|
+
"name": "i18n",
|
|
535
|
+
"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```",
|
|
536
|
+
"value": {
|
|
537
|
+
"type": [
|
|
538
|
+
"CrudI18n"
|
|
539
|
+
]
|
|
540
|
+
}
|
|
541
|
+
}
|
|
542
|
+
],
|
|
543
|
+
"events": [
|
|
544
|
+
{
|
|
545
|
+
"name": "cancel",
|
|
546
|
+
"description": "Fired when user discards edition. If the default is prevented, then\nno action is performed, user is responsible to close dialog and reset\nitem and grid."
|
|
547
|
+
},
|
|
548
|
+
{
|
|
549
|
+
"name": "delete",
|
|
550
|
+
"description": "Fired when user wants to delete item. If the default is prevented, then\nno action is performed, items array is not modified nor dialog closed"
|
|
551
|
+
},
|
|
552
|
+
{
|
|
553
|
+
"name": "edit",
|
|
554
|
+
"description": "Fired when user wants to edit an existing item. If the default is prevented, then\na new item is not assigned to the form, giving that responsibility to the app, though\ndialog is always opened."
|
|
555
|
+
},
|
|
556
|
+
{
|
|
557
|
+
"name": "new",
|
|
558
|
+
"description": "Fired when user wants to create a new item."
|
|
559
|
+
},
|
|
560
|
+
{
|
|
561
|
+
"name": "save",
|
|
562
|
+
"description": "Fired when user wants to save a new or an existing item. If the default is prevented, then\nno action is performed, items array is not modified nor dialog closed"
|
|
563
|
+
},
|
|
564
|
+
{
|
|
565
|
+
"name": "items-changed",
|
|
566
|
+
"description": "Fired when the `items` property changes."
|
|
567
|
+
},
|
|
568
|
+
{
|
|
569
|
+
"name": "edited-item-changed",
|
|
570
|
+
"description": "Fired when the `editedItem` property changes."
|
|
571
|
+
},
|
|
572
|
+
{
|
|
573
|
+
"name": "editor-opened-changed",
|
|
574
|
+
"description": "Fired when the `editorOpened` property changes."
|
|
575
|
+
},
|
|
576
|
+
{
|
|
577
|
+
"name": "size-changed",
|
|
578
|
+
"description": "Fired when the `size` property changes."
|
|
579
|
+
}
|
|
580
|
+
]
|
|
581
|
+
}
|
|
295
582
|
}
|
|
296
583
|
]
|
|
297
584
|
}
|
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.0.0-
|
|
4
|
+
"version": "24.0.0-alpha8",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -118,6 +118,167 @@
|
|
|
118
118
|
}
|
|
119
119
|
}
|
|
120
120
|
]
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
"name": "vaadin-crud",
|
|
124
|
+
"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.0.0-alpha8/#/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.0.0-alpha8/#/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.0.0-alpha8/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha8/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha8/#/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/custom-theme/styling-components) documentation.",
|
|
125
|
+
"extension": true,
|
|
126
|
+
"attributes": [
|
|
127
|
+
{
|
|
128
|
+
"name": "?editOnClick",
|
|
129
|
+
"description": "Enables user to click on row to edit it.\nNote: When enabled, auto-generated grid won't show the edit column.",
|
|
130
|
+
"value": {
|
|
131
|
+
"kind": "expression"
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
"name": "?noFilter",
|
|
136
|
+
"description": "Disable filtering when grid is autoconfigured.",
|
|
137
|
+
"value": {
|
|
138
|
+
"kind": "expression"
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
"name": "?noSort",
|
|
143
|
+
"description": "Disable sorting when grid is autoconfigured.",
|
|
144
|
+
"value": {
|
|
145
|
+
"kind": "expression"
|
|
146
|
+
}
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"name": "?noHead",
|
|
150
|
+
"description": "Remove grid headers when it is autoconfigured.",
|
|
151
|
+
"value": {
|
|
152
|
+
"kind": "expression"
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
"name": "?editorOpened",
|
|
157
|
+
"description": "Reflects the opened status of the editor.",
|
|
158
|
+
"value": {
|
|
159
|
+
"kind": "expression"
|
|
160
|
+
}
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
"name": "?noToolbar",
|
|
164
|
+
"description": "Controls visibility state of toolbar.\nWhen set to false toolbar is hidden and shown when set to true.",
|
|
165
|
+
"value": {
|
|
166
|
+
"kind": "expression"
|
|
167
|
+
}
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
"name": ".items",
|
|
171
|
+
"description": "An array containing the items which will be stamped to the column template instances.",
|
|
172
|
+
"value": {
|
|
173
|
+
"kind": "expression"
|
|
174
|
+
}
|
|
175
|
+
},
|
|
176
|
+
{
|
|
177
|
+
"name": ".editedItem",
|
|
178
|
+
"description": "The item being edited in the dialog.",
|
|
179
|
+
"value": {
|
|
180
|
+
"kind": "expression"
|
|
181
|
+
}
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
"name": ".editorPosition",
|
|
185
|
+
"description": "Sets how editor will be presented on desktop screen.\n\nAccepted values are:\n - `` (default) - form will open as overlay\n - `bottom` - form will open below the grid\n - `aside` - form will open on the grid side (_right_, if lft and _left_ if rtl)",
|
|
186
|
+
"value": {
|
|
187
|
+
"kind": "expression"
|
|
188
|
+
}
|
|
189
|
+
},
|
|
190
|
+
{
|
|
191
|
+
"name": ".dataProvider",
|
|
192
|
+
"description": "Function that provides items lazily. Receives arguments `params`, `callback`\n\n`params.page` Requested page index\n`params.pageSize` Current page size\n`params.filters` Currently applied filters\n`params.sortOrders` Currently applied sorting orders\n\n`callback(items, size)` Callback function with arguments:\n - `items` Current page of items\n - `size` Total number of items",
|
|
193
|
+
"value": {
|
|
194
|
+
"kind": "expression"
|
|
195
|
+
}
|
|
196
|
+
},
|
|
197
|
+
{
|
|
198
|
+
"name": ".include",
|
|
199
|
+
"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.0.0-alpha8/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
200
|
+
"value": {
|
|
201
|
+
"kind": "expression"
|
|
202
|
+
}
|
|
203
|
+
},
|
|
204
|
+
{
|
|
205
|
+
"name": ".exclude",
|
|
206
|
+
"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.0.0-alpha8/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
207
|
+
"value": {
|
|
208
|
+
"kind": "expression"
|
|
209
|
+
}
|
|
210
|
+
},
|
|
211
|
+
{
|
|
212
|
+
"name": ".i18n",
|
|
213
|
+
"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```",
|
|
214
|
+
"value": {
|
|
215
|
+
"kind": "expression"
|
|
216
|
+
}
|
|
217
|
+
},
|
|
218
|
+
{
|
|
219
|
+
"name": "@cancel",
|
|
220
|
+
"description": "Fired when user discards edition. If the default is prevented, then\nno action is performed, user is responsible to close dialog and reset\nitem and grid.",
|
|
221
|
+
"value": {
|
|
222
|
+
"kind": "expression"
|
|
223
|
+
}
|
|
224
|
+
},
|
|
225
|
+
{
|
|
226
|
+
"name": "@delete",
|
|
227
|
+
"description": "Fired when user wants to delete item. If the default is prevented, then\nno action is performed, items array is not modified nor dialog closed",
|
|
228
|
+
"value": {
|
|
229
|
+
"kind": "expression"
|
|
230
|
+
}
|
|
231
|
+
},
|
|
232
|
+
{
|
|
233
|
+
"name": "@edit",
|
|
234
|
+
"description": "Fired when user wants to edit an existing item. If the default is prevented, then\na new item is not assigned to the form, giving that responsibility to the app, though\ndialog is always opened.",
|
|
235
|
+
"value": {
|
|
236
|
+
"kind": "expression"
|
|
237
|
+
}
|
|
238
|
+
},
|
|
239
|
+
{
|
|
240
|
+
"name": "@new",
|
|
241
|
+
"description": "Fired when user wants to create a new item.",
|
|
242
|
+
"value": {
|
|
243
|
+
"kind": "expression"
|
|
244
|
+
}
|
|
245
|
+
},
|
|
246
|
+
{
|
|
247
|
+
"name": "@save",
|
|
248
|
+
"description": "Fired when user wants to save a new or an existing item. If the default is prevented, then\nno action is performed, items array is not modified nor dialog closed",
|
|
249
|
+
"value": {
|
|
250
|
+
"kind": "expression"
|
|
251
|
+
}
|
|
252
|
+
},
|
|
253
|
+
{
|
|
254
|
+
"name": "@items-changed",
|
|
255
|
+
"description": "Fired when the `items` property changes.",
|
|
256
|
+
"value": {
|
|
257
|
+
"kind": "expression"
|
|
258
|
+
}
|
|
259
|
+
},
|
|
260
|
+
{
|
|
261
|
+
"name": "@edited-item-changed",
|
|
262
|
+
"description": "Fired when the `editedItem` property changes.",
|
|
263
|
+
"value": {
|
|
264
|
+
"kind": "expression"
|
|
265
|
+
}
|
|
266
|
+
},
|
|
267
|
+
{
|
|
268
|
+
"name": "@editor-opened-changed",
|
|
269
|
+
"description": "Fired when the `editorOpened` property changes.",
|
|
270
|
+
"value": {
|
|
271
|
+
"kind": "expression"
|
|
272
|
+
}
|
|
273
|
+
},
|
|
274
|
+
{
|
|
275
|
+
"name": "@size-changed",
|
|
276
|
+
"description": "Fired when the `size` property changes.",
|
|
277
|
+
"value": {
|
|
278
|
+
"kind": "expression"
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
]
|
|
121
282
|
}
|
|
122
283
|
]
|
|
123
284
|
}
|