@vaadin/crud 25.1.0-beta1 → 25.1.0-beta3
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/custom-elements.json +245 -1744
- package/package.json +17 -17
- package/src/vaadin-crud-edit-column.js +6 -2
- package/src/vaadin-crud-grid-mixin.js +9 -3
- package/src/vaadin-crud-include-mixin.js +2 -0
- package/src/vaadin-crud-mixin.js +16 -12
- package/web-types.json +61 -23
- package/web-types.lit.json +4 -4
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/crud",
|
|
3
|
-
"version": "25.1.0-
|
|
3
|
+
"version": "25.1.0-beta3",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,25 +35,25 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/a11y-base": "25.1.0-
|
|
39
|
-
"@vaadin/button": "25.1.0-
|
|
40
|
-
"@vaadin/component-base": "25.1.0-
|
|
41
|
-
"@vaadin/confirm-dialog": "25.1.0-
|
|
42
|
-
"@vaadin/dialog": "25.1.0-
|
|
43
|
-
"@vaadin/form-layout": "25.1.0-
|
|
44
|
-
"@vaadin/grid": "25.1.0-
|
|
45
|
-
"@vaadin/overlay": "25.1.0-
|
|
46
|
-
"@vaadin/text-field": "25.1.0-
|
|
47
|
-
"@vaadin/vaadin-themable-mixin": "25.1.0-
|
|
38
|
+
"@vaadin/a11y-base": "25.1.0-beta3",
|
|
39
|
+
"@vaadin/button": "25.1.0-beta3",
|
|
40
|
+
"@vaadin/component-base": "25.1.0-beta3",
|
|
41
|
+
"@vaadin/confirm-dialog": "25.1.0-beta3",
|
|
42
|
+
"@vaadin/dialog": "25.1.0-beta3",
|
|
43
|
+
"@vaadin/form-layout": "25.1.0-beta3",
|
|
44
|
+
"@vaadin/grid": "25.1.0-beta3",
|
|
45
|
+
"@vaadin/overlay": "25.1.0-beta3",
|
|
46
|
+
"@vaadin/text-field": "25.1.0-beta3",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "25.1.0-beta3",
|
|
48
48
|
"lit": "^3.0.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
|
-
"@vaadin/aura": "25.1.0-
|
|
52
|
-
"@vaadin/chai-plugins": "25.1.0-
|
|
53
|
-
"@vaadin/test-runner-commands": "25.1.0-
|
|
51
|
+
"@vaadin/aura": "25.1.0-beta3",
|
|
52
|
+
"@vaadin/chai-plugins": "25.1.0-beta3",
|
|
53
|
+
"@vaadin/test-runner-commands": "25.1.0-beta3",
|
|
54
54
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
55
|
-
"@vaadin/vaadin-lumo-styles": "25.1.0-
|
|
56
|
-
"sinon": "^21.0.
|
|
55
|
+
"@vaadin/vaadin-lumo-styles": "25.1.0-beta3",
|
|
56
|
+
"sinon": "^21.0.2"
|
|
57
57
|
},
|
|
58
58
|
"cvdlName": "vaadin-crud",
|
|
59
59
|
"customElements": "custom-elements.json",
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"web-types.json",
|
|
62
62
|
"web-types.lit.json"
|
|
63
63
|
],
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "4251850231a42298fda23b83928da588831cdb5d"
|
|
65
65
|
}
|
|
@@ -25,19 +25,25 @@ export const CrudGridMixin = (superClass) =>
|
|
|
25
25
|
* Disable filtering in the generated columns.
|
|
26
26
|
* @attr {boolean} no-filter
|
|
27
27
|
*/
|
|
28
|
-
noFilter:
|
|
28
|
+
noFilter: {
|
|
29
|
+
type: Boolean,
|
|
30
|
+
},
|
|
29
31
|
|
|
30
32
|
/**
|
|
31
33
|
* Disable sorting in the generated columns.
|
|
32
34
|
* @attr {boolean} no-sort
|
|
33
35
|
*/
|
|
34
|
-
noSort:
|
|
36
|
+
noSort: {
|
|
37
|
+
type: Boolean,
|
|
38
|
+
},
|
|
35
39
|
|
|
36
40
|
/**
|
|
37
41
|
* Do not add headers to columns.
|
|
38
42
|
* @attr {boolean} no-head
|
|
39
43
|
*/
|
|
40
|
-
noHead:
|
|
44
|
+
noHead: {
|
|
45
|
+
type: Boolean,
|
|
46
|
+
},
|
|
41
47
|
|
|
42
48
|
/**
|
|
43
49
|
* Determines whether the edit column should be hidden.
|
|
@@ -27,6 +27,7 @@ export const IncludedMixin = (superClass) =>
|
|
|
27
27
|
* @type {string | RegExp}
|
|
28
28
|
*/
|
|
29
29
|
exclude: {
|
|
30
|
+
type: String,
|
|
30
31
|
value: '^_',
|
|
31
32
|
observer: '__onExcludeChange',
|
|
32
33
|
sync: true,
|
|
@@ -40,6 +41,7 @@ export const IncludedMixin = (superClass) =>
|
|
|
40
41
|
* @type {string | !Array<string> | undefined}
|
|
41
42
|
*/
|
|
42
43
|
include: {
|
|
44
|
+
type: String,
|
|
43
45
|
observer: '__onIncludeChange',
|
|
44
46
|
sync: true,
|
|
45
47
|
},
|
package/src/vaadin-crud-mixin.js
CHANGED
|
@@ -112,7 +112,6 @@ export const CrudMixin = (superClass) =>
|
|
|
112
112
|
|
|
113
113
|
/**
|
|
114
114
|
* An array containing the items which will be stamped to the column template instances.
|
|
115
|
-
* @type {Array<unknown> | undefined}
|
|
116
115
|
*/
|
|
117
116
|
items: {
|
|
118
117
|
type: Array,
|
|
@@ -123,7 +122,6 @@ export const CrudMixin = (superClass) =>
|
|
|
123
122
|
|
|
124
123
|
/**
|
|
125
124
|
* The item being edited in the dialog.
|
|
126
|
-
* @type {unknown}
|
|
127
125
|
*/
|
|
128
126
|
editedItem: {
|
|
129
127
|
type: Object,
|
|
@@ -140,7 +138,6 @@ export const CrudMixin = (superClass) =>
|
|
|
140
138
|
* - `bottom` - form will open below the grid
|
|
141
139
|
* - `aside` - form will open on the grid side (_right_, if lft and _left_ if rtl)
|
|
142
140
|
* @attr {bottom|aside} editor-position
|
|
143
|
-
* @type {!CrudEditorPosition}
|
|
144
141
|
*/
|
|
145
142
|
editorPosition: {
|
|
146
143
|
type: String,
|
|
@@ -154,7 +151,6 @@ export const CrudMixin = (superClass) =>
|
|
|
154
151
|
* Enables user to click on row to edit it.
|
|
155
152
|
* Note: When enabled, auto-generated grid won't show the edit column.
|
|
156
153
|
* @attr {boolean} edit-on-click
|
|
157
|
-
* @type {boolean}
|
|
158
154
|
*/
|
|
159
155
|
editOnClick: {
|
|
160
156
|
type: Boolean,
|
|
@@ -184,19 +180,25 @@ export const CrudMixin = (superClass) =>
|
|
|
184
180
|
* Disable filtering when grid is autoconfigured.
|
|
185
181
|
* @attr {boolean} no-filter
|
|
186
182
|
*/
|
|
187
|
-
noFilter:
|
|
183
|
+
noFilter: {
|
|
184
|
+
type: Boolean,
|
|
185
|
+
},
|
|
188
186
|
|
|
189
187
|
/**
|
|
190
188
|
* Disable sorting when grid is autoconfigured.
|
|
191
189
|
* @attr {boolean} no-sort
|
|
192
190
|
*/
|
|
193
|
-
noSort:
|
|
191
|
+
noSort: {
|
|
192
|
+
type: Boolean,
|
|
193
|
+
},
|
|
194
194
|
|
|
195
195
|
/**
|
|
196
196
|
* Remove grid headers when it is autoconfigured.
|
|
197
197
|
* @attr {boolean} no-head
|
|
198
198
|
*/
|
|
199
|
-
noHead:
|
|
199
|
+
noHead: {
|
|
200
|
+
type: Boolean,
|
|
201
|
+
},
|
|
200
202
|
|
|
201
203
|
/**
|
|
202
204
|
* A comma-separated list of fields to include in the generated grid and the generated editor.
|
|
@@ -207,7 +209,9 @@ export const CrudMixin = (superClass) =>
|
|
|
207
209
|
*
|
|
208
210
|
* Default is undefined meaning that all properties in the object should be mapped to fields.
|
|
209
211
|
*/
|
|
210
|
-
include:
|
|
212
|
+
include: {
|
|
213
|
+
type: String,
|
|
214
|
+
},
|
|
211
215
|
|
|
212
216
|
/**
|
|
213
217
|
* A comma-separated list of fields to be excluded from the generated grid and the generated editor.
|
|
@@ -216,7 +220,9 @@ export const CrudMixin = (superClass) =>
|
|
|
216
220
|
*
|
|
217
221
|
* Default is to exclude all private fields (those properties starting with underscore)
|
|
218
222
|
*/
|
|
219
|
-
exclude:
|
|
223
|
+
exclude: {
|
|
224
|
+
type: String,
|
|
225
|
+
},
|
|
220
226
|
|
|
221
227
|
/**
|
|
222
228
|
* Reflects the opened status of the editor.
|
|
@@ -267,7 +273,6 @@ export const CrudMixin = (superClass) =>
|
|
|
267
273
|
__isNew: Boolean,
|
|
268
274
|
|
|
269
275
|
/**
|
|
270
|
-
* @type {boolean}
|
|
271
276
|
* @protected
|
|
272
277
|
*/
|
|
273
278
|
_fullscreen: {
|
|
@@ -277,7 +282,6 @@ export const CrudMixin = (superClass) =>
|
|
|
277
282
|
},
|
|
278
283
|
|
|
279
284
|
/**
|
|
280
|
-
* @type {string}
|
|
281
285
|
* @protected
|
|
282
286
|
*/
|
|
283
287
|
_fullscreenMediaQuery: {
|
|
@@ -335,7 +339,7 @@ export const CrudMixin = (superClass) =>
|
|
|
335
339
|
* }
|
|
336
340
|
* }
|
|
337
341
|
* ```
|
|
338
|
-
* @
|
|
342
|
+
* @type {!CrudI18n}
|
|
339
343
|
*/
|
|
340
344
|
get i18n() {
|
|
341
345
|
return super.i18n;
|
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": "25.1.0-
|
|
4
|
+
"version": "25.1.0-beta3",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -75,7 +75,9 @@
|
|
|
75
75
|
"description": "Automatically sets the width of the column based on the column contents when this is set to `true`.\n\nFor performance reasons the column width is calculated automatically only once when the grid items\nare rendered for the first time and the calculation only considers the rows which are currently\nrendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell\ncontent changes, the column width might not match the contents anymore.\n\nHidden columns are ignored in the calculation and their widths are not automatically updated when\nyou show a column that was initially hidden.\n\nYou can manually trigger the auto sizing behavior again by calling `grid.recalculateColumnWidths()`.\n\nThe column width may still grow larger when `flexGrow` is not 0.",
|
|
76
76
|
"value": {
|
|
77
77
|
"type": [
|
|
78
|
-
"boolean"
|
|
78
|
+
"boolean",
|
|
79
|
+
"null",
|
|
80
|
+
"undefined"
|
|
79
81
|
]
|
|
80
82
|
}
|
|
81
83
|
},
|
|
@@ -84,7 +86,9 @@
|
|
|
84
86
|
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
85
87
|
"value": {
|
|
86
88
|
"type": [
|
|
87
|
-
"number"
|
|
89
|
+
"number",
|
|
90
|
+
"null",
|
|
91
|
+
"undefined"
|
|
88
92
|
]
|
|
89
93
|
}
|
|
90
94
|
},
|
|
@@ -104,7 +108,9 @@
|
|
|
104
108
|
"description": "When true, the column is frozen. When a column inside of a column group is frozen,\nall of the sibling columns inside the group will get frozen also.",
|
|
105
109
|
"value": {
|
|
106
110
|
"type": [
|
|
107
|
-
"boolean"
|
|
111
|
+
"boolean",
|
|
112
|
+
"null",
|
|
113
|
+
"undefined"
|
|
108
114
|
]
|
|
109
115
|
}
|
|
110
116
|
},
|
|
@@ -113,7 +119,9 @@
|
|
|
113
119
|
"description": "When true, the column is frozen to end of grid.\n\nWhen a column inside of a column group is frozen to end, all of the sibling columns\ninside the group will get frozen to end also.\n\nColumn can not be set as `frozen` and `frozenToEnd` at the same time.",
|
|
114
120
|
"value": {
|
|
115
121
|
"type": [
|
|
116
|
-
"boolean"
|
|
122
|
+
"boolean",
|
|
123
|
+
"null",
|
|
124
|
+
"undefined"
|
|
117
125
|
]
|
|
118
126
|
}
|
|
119
127
|
},
|
|
@@ -177,7 +185,9 @@
|
|
|
177
185
|
"description": "When true, the cells for this column will be rendered with the `role` attribute\nset as `rowheader`, instead of the `gridcell` role value used by default.\n\nWhen a column is set as row header, its cells will be announced by screen readers\nwhile navigating to help user identify the current row as uniquely as possible.",
|
|
178
186
|
"value": {
|
|
179
187
|
"type": [
|
|
180
|
-
"boolean"
|
|
188
|
+
"boolean",
|
|
189
|
+
"null",
|
|
190
|
+
"undefined"
|
|
181
191
|
]
|
|
182
192
|
}
|
|
183
193
|
},
|
|
@@ -186,7 +196,7 @@
|
|
|
186
196
|
"description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
|
|
187
197
|
"value": {
|
|
188
198
|
"type": [
|
|
189
|
-
"
|
|
199
|
+
"string",
|
|
190
200
|
"null",
|
|
191
201
|
"undefined"
|
|
192
202
|
]
|
|
@@ -255,7 +265,9 @@
|
|
|
255
265
|
"description": "When true, the column is frozen. When a column inside of a column group is frozen,\nall of the sibling columns inside the group will get frozen also.",
|
|
256
266
|
"value": {
|
|
257
267
|
"type": [
|
|
258
|
-
"boolean"
|
|
268
|
+
"boolean",
|
|
269
|
+
"null",
|
|
270
|
+
"undefined"
|
|
259
271
|
]
|
|
260
272
|
}
|
|
261
273
|
},
|
|
@@ -264,7 +276,9 @@
|
|
|
264
276
|
"description": "When true, the column is frozen to end of grid.\n\nWhen a column inside of a column group is frozen to end, all of the sibling columns\ninside the group will get frozen to end also.\n\nColumn can not be set as `frozen` and `frozenToEnd` at the same time.",
|
|
265
277
|
"value": {
|
|
266
278
|
"type": [
|
|
267
|
-
"boolean"
|
|
279
|
+
"boolean",
|
|
280
|
+
"null",
|
|
281
|
+
"undefined"
|
|
268
282
|
]
|
|
269
283
|
}
|
|
270
284
|
},
|
|
@@ -350,7 +364,9 @@
|
|
|
350
364
|
"description": "When true, the cells for this column will be rendered with the `role` attribute\nset as `rowheader`, instead of the `gridcell` role value used by default.\n\nWhen a column is set as row header, its cells will be announced by screen readers\nwhile navigating to help user identify the current row as uniquely as possible.",
|
|
351
365
|
"value": {
|
|
352
366
|
"type": [
|
|
353
|
-
"boolean"
|
|
367
|
+
"boolean",
|
|
368
|
+
"null",
|
|
369
|
+
"undefined"
|
|
354
370
|
]
|
|
355
371
|
}
|
|
356
372
|
},
|
|
@@ -359,7 +375,7 @@
|
|
|
359
375
|
"description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
|
|
360
376
|
"value": {
|
|
361
377
|
"type": [
|
|
362
|
-
"
|
|
378
|
+
"string",
|
|
363
379
|
"null",
|
|
364
380
|
"undefined"
|
|
365
381
|
]
|
|
@@ -382,14 +398,16 @@
|
|
|
382
398
|
},
|
|
383
399
|
{
|
|
384
400
|
"name": "vaadin-crud",
|
|
385
|
-
"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/25.1.0-
|
|
401
|
+
"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/25.1.0-beta3/#/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/25.1.0-beta3/#/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/25.1.0-beta3/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta3/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta3/#/elements/vaadin-form-layout)\n\n### Styling\n\nThe following shadow DOM parts are available for styling when the editor is rendered next to, or below, the grid:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom of the grid. By default, it contains the `new` button\n`editor` | The editor container\n`scroller` | The wrapper for the header and the form\n`header` | The header of the editor\n`footer` | The footer of the editor\n\nThe following shadow DOM parts are available for styling when the editor renders as a dialog:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom of the grid. By default, it contains the `new` button\n`overlay` | The dialog overlay\n`backdrop` | The dialog backdrop\n`header` | The header of the dialog\n`footer` | The footer of the dialog\n`content` | The wrapper for the form\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.",
|
|
386
402
|
"attributes": [
|
|
387
403
|
{
|
|
388
404
|
"name": "edit-on-click",
|
|
389
405
|
"description": "Enables user to click on row to edit it.\nNote: When enabled, auto-generated grid won't show the edit column.",
|
|
390
406
|
"value": {
|
|
391
407
|
"type": [
|
|
392
|
-
"boolean"
|
|
408
|
+
"boolean",
|
|
409
|
+
"null",
|
|
410
|
+
"undefined"
|
|
393
411
|
]
|
|
394
412
|
}
|
|
395
413
|
},
|
|
@@ -409,13 +427,15 @@
|
|
|
409
427
|
"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)",
|
|
410
428
|
"value": {
|
|
411
429
|
"type": [
|
|
412
|
-
"
|
|
430
|
+
"string",
|
|
431
|
+
"null",
|
|
432
|
+
"undefined"
|
|
413
433
|
]
|
|
414
434
|
}
|
|
415
435
|
},
|
|
416
436
|
{
|
|
417
437
|
"name": "exclude",
|
|
418
|
-
"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/25.1.0-
|
|
438
|
+
"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/25.1.0-beta3/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
419
439
|
"value": {
|
|
420
440
|
"type": [
|
|
421
441
|
"string",
|
|
@@ -424,9 +444,20 @@
|
|
|
424
444
|
]
|
|
425
445
|
}
|
|
426
446
|
},
|
|
447
|
+
{
|
|
448
|
+
"name": "i18n",
|
|
449
|
+
"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\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
|
|
450
|
+
"value": {
|
|
451
|
+
"type": [
|
|
452
|
+
"Object",
|
|
453
|
+
"null",
|
|
454
|
+
"undefined"
|
|
455
|
+
]
|
|
456
|
+
}
|
|
457
|
+
},
|
|
427
458
|
{
|
|
428
459
|
"name": "include",
|
|
429
|
-
"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/25.1.0-
|
|
460
|
+
"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/25.1.0-beta3/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
430
461
|
"value": {
|
|
431
462
|
"type": [
|
|
432
463
|
"string",
|
|
@@ -508,7 +539,9 @@
|
|
|
508
539
|
"description": "The item being edited in the dialog.",
|
|
509
540
|
"value": {
|
|
510
541
|
"type": [
|
|
511
|
-
"
|
|
542
|
+
"Object",
|
|
543
|
+
"null",
|
|
544
|
+
"undefined"
|
|
512
545
|
]
|
|
513
546
|
}
|
|
514
547
|
},
|
|
@@ -517,7 +550,9 @@
|
|
|
517
550
|
"description": "Enables user to click on row to edit it.\nNote: When enabled, auto-generated grid won't show the edit column.",
|
|
518
551
|
"value": {
|
|
519
552
|
"type": [
|
|
520
|
-
"boolean"
|
|
553
|
+
"boolean",
|
|
554
|
+
"null",
|
|
555
|
+
"undefined"
|
|
521
556
|
]
|
|
522
557
|
}
|
|
523
558
|
},
|
|
@@ -537,13 +572,15 @@
|
|
|
537
572
|
"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)",
|
|
538
573
|
"value": {
|
|
539
574
|
"type": [
|
|
540
|
-
"
|
|
575
|
+
"string",
|
|
576
|
+
"null",
|
|
577
|
+
"undefined"
|
|
541
578
|
]
|
|
542
579
|
}
|
|
543
580
|
},
|
|
544
581
|
{
|
|
545
582
|
"name": "exclude",
|
|
546
|
-
"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/25.1.0-
|
|
583
|
+
"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/25.1.0-beta3/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
547
584
|
"value": {
|
|
548
585
|
"type": [
|
|
549
586
|
"string",
|
|
@@ -557,13 +594,13 @@
|
|
|
557
594
|
"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```js\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```",
|
|
558
595
|
"value": {
|
|
559
596
|
"type": [
|
|
560
|
-
"
|
|
597
|
+
"?"
|
|
561
598
|
]
|
|
562
599
|
}
|
|
563
600
|
},
|
|
564
601
|
{
|
|
565
602
|
"name": "include",
|
|
566
|
-
"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/25.1.0-
|
|
603
|
+
"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/25.1.0-beta3/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
567
604
|
"value": {
|
|
568
605
|
"type": [
|
|
569
606
|
"string",
|
|
@@ -577,7 +614,8 @@
|
|
|
577
614
|
"description": "An array containing the items which will be stamped to the column template instances.",
|
|
578
615
|
"value": {
|
|
579
616
|
"type": [
|
|
580
|
-
"Array
|
|
617
|
+
"Array",
|
|
618
|
+
"null",
|
|
581
619
|
"undefined"
|
|
582
620
|
]
|
|
583
621
|
}
|
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": "25.1.0-
|
|
4
|
+
"version": "25.1.0-beta3",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -149,7 +149,7 @@
|
|
|
149
149
|
},
|
|
150
150
|
{
|
|
151
151
|
"name": "vaadin-crud",
|
|
152
|
-
"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/25.1.0-
|
|
152
|
+
"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/25.1.0-beta3/#/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/25.1.0-beta3/#/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/25.1.0-beta3/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta3/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta3/#/elements/vaadin-form-layout)\n\n### Styling\n\nThe following shadow DOM parts are available for styling when the editor is rendered next to, or below, the grid:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom of the grid. By default, it contains the `new` button\n`editor` | The editor container\n`scroller` | The wrapper for the header and the form\n`header` | The header of the editor\n`footer` | The footer of the editor\n\nThe following shadow DOM parts are available for styling when the editor renders as a dialog:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom of the grid. By default, it contains the `new` button\n`overlay` | The dialog overlay\n`backdrop` | The dialog backdrop\n`header` | The header of the dialog\n`footer` | The footer of the dialog\n`content` | The wrapper for the form\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.",
|
|
153
153
|
"extension": true,
|
|
154
154
|
"attributes": [
|
|
155
155
|
{
|
|
@@ -217,7 +217,7 @@
|
|
|
217
217
|
},
|
|
218
218
|
{
|
|
219
219
|
"name": ".exclude",
|
|
220
|
-
"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/25.1.0-
|
|
220
|
+
"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/25.1.0-beta3/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
221
221
|
"value": {
|
|
222
222
|
"kind": "expression"
|
|
223
223
|
}
|
|
@@ -231,7 +231,7 @@
|
|
|
231
231
|
},
|
|
232
232
|
{
|
|
233
233
|
"name": ".include",
|
|
234
|
-
"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/25.1.0-
|
|
234
|
+
"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/25.1.0-beta3/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
235
235
|
"value": {
|
|
236
236
|
"kind": "expression"
|
|
237
237
|
}
|