@vaadin/crud 25.1.2 → 25.2.0-alpha10
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 +7 -7
- package/package.json +16 -16
- package/src/vaadin-crud-edit.js +1 -8
- package/src/vaadin-crud-grid-mixin.js +1 -1
- package/src/vaadin-crud-mixin.js +1 -42
- package/src/vaadin-crud.d.ts +5 -5
- package/src/vaadin-crud.js +5 -5
- package/web-types.json +116 -210
- package/web-types.lit.json +79 -72
package/web-types.json
CHANGED
|
@@ -1,60 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/crud",
|
|
4
|
-
"version": "25.
|
|
4
|
+
"version": "25.2.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
|
-
{
|
|
10
|
-
"name": "vaadin-crud-edit",
|
|
11
|
-
"description": "`<vaadin-crud-edit>` is a helper element for `<vaadin-grid-column>` that provides\nan easily themable button that fires an `edit` event with the row item as detail\nwhen clicked.\n\nTypical usage is in a `<vaadin-grid-column>` of a custom `<vaadin-grid>` inside\na `<vaadin-crud>` to enable editing.",
|
|
12
|
-
"attributes": [
|
|
13
|
-
{
|
|
14
|
-
"name": "disabled",
|
|
15
|
-
"description": "When disabled, the button is rendered as \"dimmed\" and prevents all\nuser interactions (mouse and keyboard).\n\nSince disabled buttons are not focusable and cannot react to hover\nevents by default, it can cause accessibility issues by making them\nentirely invisible to assistive technologies, and prevents the use\nof Tooltips to explain why the action is not available. This can be\naddressed by enabling the feature flag `accessibleDisabledButtons`,\nwhich makes disabled buttons focusable and hoverable, while still\npreventing them from being triggered:\n\n```js\n// Set before any button is attached to the DOM.\nwindow.Vaadin.featureFlags.accessibleDisabledButtons = true\n```",
|
|
16
|
-
"value": {
|
|
17
|
-
"type": [
|
|
18
|
-
"boolean",
|
|
19
|
-
"null",
|
|
20
|
-
"undefined"
|
|
21
|
-
]
|
|
22
|
-
}
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
"name": "theme",
|
|
26
|
-
"description": "The theme variants to apply to the component.",
|
|
27
|
-
"value": {
|
|
28
|
-
"type": [
|
|
29
|
-
"string",
|
|
30
|
-
"null",
|
|
31
|
-
"undefined"
|
|
32
|
-
]
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
],
|
|
36
|
-
"js": {
|
|
37
|
-
"properties": [
|
|
38
|
-
{
|
|
39
|
-
"name": "disabled",
|
|
40
|
-
"description": "When disabled, the button is rendered as \"dimmed\" and prevents all\nuser interactions (mouse and keyboard).\n\nSince disabled buttons are not focusable and cannot react to hover\nevents by default, it can cause accessibility issues by making them\nentirely invisible to assistive technologies, and prevents the use\nof Tooltips to explain why the action is not available. This can be\naddressed by enabling the feature flag `accessibleDisabledButtons`,\nwhich makes disabled buttons focusable and hoverable, while still\npreventing them from being triggered:\n\n```js\n// Set before any button is attached to the DOM.\nwindow.Vaadin.featureFlags.accessibleDisabledButtons = true\n```",
|
|
41
|
-
"value": {
|
|
42
|
-
"type": [
|
|
43
|
-
"boolean",
|
|
44
|
-
"null",
|
|
45
|
-
"undefined"
|
|
46
|
-
]
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
],
|
|
50
|
-
"events": [
|
|
51
|
-
{
|
|
52
|
-
"name": "edit",
|
|
53
|
-
"description": "Fired when user on the icon."
|
|
54
|
-
}
|
|
55
|
-
]
|
|
56
|
-
}
|
|
57
|
-
},
|
|
58
9
|
{
|
|
59
10
|
"name": "vaadin-crud-edit-column",
|
|
60
11
|
"description": "`<vaadin-crud-edit-column>` is a helper element for the `<vaadin-grid>`\nthat provides a clickable and themable edit icon.\n\nTypical usage is in a custom `<vaadin-grid>` inside a `<vaadin-crud>`.\n\n#### Example:\n```html\n<vaadin-grid>\n <vaadin-crud-edit-column></vaadin-crud-edit-column>\n\n <vaadin-grid-column>\n ...\n```",
|
|
@@ -64,20 +15,16 @@
|
|
|
64
15
|
"description": "The arial-label for the edit button",
|
|
65
16
|
"value": {
|
|
66
17
|
"type": [
|
|
67
|
-
"string"
|
|
68
|
-
"null",
|
|
69
|
-
"undefined"
|
|
18
|
+
"string"
|
|
70
19
|
]
|
|
71
20
|
}
|
|
72
21
|
},
|
|
73
22
|
{
|
|
74
23
|
"name": "auto-width",
|
|
75
|
-
"description": "Automatically sets the width of the column based on the column contents when this is set to `true
|
|
24
|
+
"description": "Automatically sets the width of the column based on the column contents when this is set to `true`.",
|
|
76
25
|
"value": {
|
|
77
26
|
"type": [
|
|
78
|
-
"boolean"
|
|
79
|
-
"null",
|
|
80
|
-
"undefined"
|
|
27
|
+
"boolean"
|
|
81
28
|
]
|
|
82
29
|
}
|
|
83
30
|
},
|
|
@@ -86,9 +33,7 @@
|
|
|
86
33
|
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
87
34
|
"value": {
|
|
88
35
|
"type": [
|
|
89
|
-
"number"
|
|
90
|
-
"null",
|
|
91
|
-
"undefined"
|
|
36
|
+
"number"
|
|
92
37
|
]
|
|
93
38
|
}
|
|
94
39
|
},
|
|
@@ -97,9 +42,7 @@
|
|
|
97
42
|
"description": "Custom part name for the footer cell.",
|
|
98
43
|
"value": {
|
|
99
44
|
"type": [
|
|
100
|
-
"string"
|
|
101
|
-
"null",
|
|
102
|
-
"undefined"
|
|
45
|
+
"string"
|
|
103
46
|
]
|
|
104
47
|
}
|
|
105
48
|
},
|
|
@@ -108,9 +51,7 @@
|
|
|
108
51
|
"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.",
|
|
109
52
|
"value": {
|
|
110
53
|
"type": [
|
|
111
|
-
"boolean"
|
|
112
|
-
"null",
|
|
113
|
-
"undefined"
|
|
54
|
+
"boolean"
|
|
114
55
|
]
|
|
115
56
|
}
|
|
116
57
|
},
|
|
@@ -119,9 +60,7 @@
|
|
|
119
60
|
"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.",
|
|
120
61
|
"value": {
|
|
121
62
|
"type": [
|
|
122
|
-
"boolean"
|
|
123
|
-
"null",
|
|
124
|
-
"undefined"
|
|
63
|
+
"boolean"
|
|
125
64
|
]
|
|
126
65
|
}
|
|
127
66
|
},
|
|
@@ -130,9 +69,7 @@
|
|
|
130
69
|
"description": "Text content to display in the header cell of the column.",
|
|
131
70
|
"value": {
|
|
132
71
|
"type": [
|
|
133
|
-
"string"
|
|
134
|
-
"null",
|
|
135
|
-
"undefined"
|
|
72
|
+
"string"
|
|
136
73
|
]
|
|
137
74
|
}
|
|
138
75
|
},
|
|
@@ -141,9 +78,7 @@
|
|
|
141
78
|
"description": "Custom part name for the header cell.",
|
|
142
79
|
"value": {
|
|
143
80
|
"type": [
|
|
144
|
-
"string"
|
|
145
|
-
"null",
|
|
146
|
-
"undefined"
|
|
81
|
+
"string"
|
|
147
82
|
]
|
|
148
83
|
}
|
|
149
84
|
},
|
|
@@ -152,9 +87,7 @@
|
|
|
152
87
|
"description": "When set to true, the cells for this column are hidden.",
|
|
153
88
|
"value": {
|
|
154
89
|
"type": [
|
|
155
|
-
"boolean"
|
|
156
|
-
"null",
|
|
157
|
-
"undefined"
|
|
90
|
+
"boolean"
|
|
158
91
|
]
|
|
159
92
|
}
|
|
160
93
|
},
|
|
@@ -163,9 +96,7 @@
|
|
|
163
96
|
"description": "Path to an item sub-property whose value gets displayed in the column body cells.\nThe property name is also shown in the column header if an explicit header or renderer isn't defined.",
|
|
164
97
|
"value": {
|
|
165
98
|
"type": [
|
|
166
|
-
"string"
|
|
167
|
-
"null",
|
|
168
|
-
"undefined"
|
|
99
|
+
"string"
|
|
169
100
|
]
|
|
170
101
|
}
|
|
171
102
|
},
|
|
@@ -174,9 +105,7 @@
|
|
|
174
105
|
"description": "When set to true, the column is user-resizable.",
|
|
175
106
|
"value": {
|
|
176
107
|
"type": [
|
|
177
|
-
"boolean"
|
|
178
|
-
"null",
|
|
179
|
-
"undefined"
|
|
108
|
+
"boolean"
|
|
180
109
|
]
|
|
181
110
|
}
|
|
182
111
|
},
|
|
@@ -185,9 +114,7 @@
|
|
|
185
114
|
"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.",
|
|
186
115
|
"value": {
|
|
187
116
|
"type": [
|
|
188
|
-
"boolean"
|
|
189
|
-
"null",
|
|
190
|
-
"undefined"
|
|
117
|
+
"boolean"
|
|
191
118
|
]
|
|
192
119
|
}
|
|
193
120
|
},
|
|
@@ -196,9 +123,7 @@
|
|
|
196
123
|
"description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
|
|
197
124
|
"value": {
|
|
198
125
|
"type": [
|
|
199
|
-
"string"
|
|
200
|
-
"null",
|
|
201
|
-
"undefined"
|
|
126
|
+
"string"
|
|
202
127
|
]
|
|
203
128
|
}
|
|
204
129
|
},
|
|
@@ -218,9 +143,7 @@
|
|
|
218
143
|
"description": "Width of the cells for this column.\n\nPlease note that using the `em` length unit is discouraged as\nit might lead to misalignment issues if the header, body, and footer\ncells have different font sizes. Instead, use `rem` if you need\na length unit relative to the font size.",
|
|
219
144
|
"value": {
|
|
220
145
|
"type": [
|
|
221
|
-
"string"
|
|
222
|
-
"null",
|
|
223
|
-
"undefined"
|
|
146
|
+
"string"
|
|
224
147
|
]
|
|
225
148
|
}
|
|
226
149
|
}
|
|
@@ -232,9 +155,25 @@
|
|
|
232
155
|
"description": "The arial-label for the edit button",
|
|
233
156
|
"value": {
|
|
234
157
|
"type": [
|
|
235
|
-
"string"
|
|
236
|
-
|
|
237
|
-
|
|
158
|
+
"string"
|
|
159
|
+
]
|
|
160
|
+
}
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
"name": "autoWidth",
|
|
164
|
+
"description": "Automatically sets the width of the column based on the column contents when this is set to `true`.",
|
|
165
|
+
"value": {
|
|
166
|
+
"type": [
|
|
167
|
+
"boolean"
|
|
168
|
+
]
|
|
169
|
+
}
|
|
170
|
+
},
|
|
171
|
+
{
|
|
172
|
+
"name": "flexGrow",
|
|
173
|
+
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
174
|
+
"value": {
|
|
175
|
+
"type": [
|
|
176
|
+
"number"
|
|
238
177
|
]
|
|
239
178
|
}
|
|
240
179
|
},
|
|
@@ -243,9 +182,7 @@
|
|
|
243
182
|
"description": "Custom part name for the footer cell.",
|
|
244
183
|
"value": {
|
|
245
184
|
"type": [
|
|
246
|
-
"string"
|
|
247
|
-
"null",
|
|
248
|
-
"undefined"
|
|
185
|
+
"string"
|
|
249
186
|
]
|
|
250
187
|
}
|
|
251
188
|
},
|
|
@@ -265,9 +202,7 @@
|
|
|
265
202
|
"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.",
|
|
266
203
|
"value": {
|
|
267
204
|
"type": [
|
|
268
|
-
"boolean"
|
|
269
|
-
"null",
|
|
270
|
-
"undefined"
|
|
205
|
+
"boolean"
|
|
271
206
|
]
|
|
272
207
|
}
|
|
273
208
|
},
|
|
@@ -276,9 +211,7 @@
|
|
|
276
211
|
"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.",
|
|
277
212
|
"value": {
|
|
278
213
|
"type": [
|
|
279
|
-
"boolean"
|
|
280
|
-
"null",
|
|
281
|
-
"undefined"
|
|
214
|
+
"boolean"
|
|
282
215
|
]
|
|
283
216
|
}
|
|
284
217
|
},
|
|
@@ -287,9 +220,7 @@
|
|
|
287
220
|
"description": "Text content to display in the header cell of the column.",
|
|
288
221
|
"value": {
|
|
289
222
|
"type": [
|
|
290
|
-
"string"
|
|
291
|
-
"null",
|
|
292
|
-
"undefined"
|
|
223
|
+
"string"
|
|
293
224
|
]
|
|
294
225
|
}
|
|
295
226
|
},
|
|
@@ -298,9 +229,7 @@
|
|
|
298
229
|
"description": "Custom part name for the header cell.",
|
|
299
230
|
"value": {
|
|
300
231
|
"type": [
|
|
301
|
-
"string"
|
|
302
|
-
"null",
|
|
303
|
-
"undefined"
|
|
232
|
+
"string"
|
|
304
233
|
]
|
|
305
234
|
}
|
|
306
235
|
},
|
|
@@ -320,9 +249,7 @@
|
|
|
320
249
|
"description": "When set to true, the cells for this column are hidden.",
|
|
321
250
|
"value": {
|
|
322
251
|
"type": [
|
|
323
|
-
"boolean"
|
|
324
|
-
"null",
|
|
325
|
-
"undefined"
|
|
252
|
+
"boolean"
|
|
326
253
|
]
|
|
327
254
|
}
|
|
328
255
|
},
|
|
@@ -331,9 +258,7 @@
|
|
|
331
258
|
"description": "Path to an item sub-property whose value gets displayed in the column body cells.\nThe property name is also shown in the column header if an explicit header or renderer isn't defined.",
|
|
332
259
|
"value": {
|
|
333
260
|
"type": [
|
|
334
|
-
"string"
|
|
335
|
-
"null",
|
|
336
|
-
"undefined"
|
|
261
|
+
"string"
|
|
337
262
|
]
|
|
338
263
|
}
|
|
339
264
|
},
|
|
@@ -353,9 +278,7 @@
|
|
|
353
278
|
"description": "When set to true, the column is user-resizable.",
|
|
354
279
|
"value": {
|
|
355
280
|
"type": [
|
|
356
|
-
"boolean"
|
|
357
|
-
"null",
|
|
358
|
-
"undefined"
|
|
281
|
+
"boolean"
|
|
359
282
|
]
|
|
360
283
|
}
|
|
361
284
|
},
|
|
@@ -364,9 +287,7 @@
|
|
|
364
287
|
"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.",
|
|
365
288
|
"value": {
|
|
366
289
|
"type": [
|
|
367
|
-
"boolean"
|
|
368
|
-
"null",
|
|
369
|
-
"undefined"
|
|
290
|
+
"boolean"
|
|
370
291
|
]
|
|
371
292
|
}
|
|
372
293
|
},
|
|
@@ -375,9 +296,7 @@
|
|
|
375
296
|
"description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
|
|
376
297
|
"value": {
|
|
377
298
|
"type": [
|
|
378
|
-
"string"
|
|
379
|
-
"null",
|
|
380
|
-
"undefined"
|
|
299
|
+
"string"
|
|
381
300
|
]
|
|
382
301
|
}
|
|
383
302
|
},
|
|
@@ -386,9 +305,7 @@
|
|
|
386
305
|
"description": "Width of the cells for this column.\n\nPlease note that using the `em` length unit is discouraged as\nit might lead to misalignment issues if the header, body, and footer\ncells have different font sizes. Instead, use `rem` if you need\na length unit relative to the font size.",
|
|
387
306
|
"value": {
|
|
388
307
|
"type": [
|
|
389
|
-
"string"
|
|
390
|
-
"null",
|
|
391
|
-
"undefined"
|
|
308
|
+
"string"
|
|
392
309
|
]
|
|
393
310
|
}
|
|
394
311
|
}
|
|
@@ -397,72 +314,91 @@
|
|
|
397
314
|
}
|
|
398
315
|
},
|
|
399
316
|
{
|
|
400
|
-
"name": "vaadin-crud",
|
|
401
|
-
"description": "`<vaadin-crud>` is a
|
|
317
|
+
"name": "vaadin-crud-edit",
|
|
318
|
+
"description": "`<vaadin-crud-edit>` is a helper element for `<vaadin-grid-column>` that provides\nan easily themable button that fires an `edit` event with the row item as detail\nwhen clicked.\n\nTypical usage is in a `<vaadin-grid-column>` of a custom `<vaadin-grid>` inside\na `<vaadin-crud>` to enable editing.",
|
|
402
319
|
"attributes": [
|
|
403
320
|
{
|
|
404
|
-
"name": "
|
|
405
|
-
"description": "
|
|
321
|
+
"name": "disabled",
|
|
322
|
+
"description": "When disabled, the button is rendered as \"dimmed\".\n\nBy default, disabled buttons are not focusable and don't react to hover.\nAs a result, they are hidden from assistive technologies, and it's not\npossible to show a tooltip to explain why they are disabled. This can\nbe addressed by enabling the feature flag `accessibleDisabledButtons`,\nwhich makes disabled buttons focusable and hoverable, while still\npreventing them from being activated:\n\n```js\n// Set before any button is attached to the DOM.\nwindow.Vaadin.featureFlags.accessibleDisabledButtons = true\n```",
|
|
406
323
|
"value": {
|
|
407
324
|
"type": [
|
|
408
|
-
"boolean"
|
|
409
|
-
"null",
|
|
410
|
-
"undefined"
|
|
325
|
+
"boolean"
|
|
411
326
|
]
|
|
412
327
|
}
|
|
413
328
|
},
|
|
414
329
|
{
|
|
415
|
-
"name": "
|
|
416
|
-
"description": "
|
|
330
|
+
"name": "theme",
|
|
331
|
+
"description": "The theme variants to apply to the component.",
|
|
417
332
|
"value": {
|
|
418
333
|
"type": [
|
|
419
|
-
"
|
|
334
|
+
"string",
|
|
420
335
|
"null",
|
|
421
336
|
"undefined"
|
|
422
337
|
]
|
|
423
338
|
}
|
|
339
|
+
}
|
|
340
|
+
],
|
|
341
|
+
"js": {
|
|
342
|
+
"properties": [
|
|
343
|
+
{
|
|
344
|
+
"name": "disabled",
|
|
345
|
+
"description": "When disabled, the button is rendered as \"dimmed\".\n\nBy default, disabled buttons are not focusable and don't react to hover.\nAs a result, they are hidden from assistive technologies, and it's not\npossible to show a tooltip to explain why they are disabled. This can\nbe addressed by enabling the feature flag `accessibleDisabledButtons`,\nwhich makes disabled buttons focusable and hoverable, while still\npreventing them from being activated:\n\n```js\n// Set before any button is attached to the DOM.\nwindow.Vaadin.featureFlags.accessibleDisabledButtons = true\n```",
|
|
346
|
+
"value": {
|
|
347
|
+
"type": [
|
|
348
|
+
"boolean"
|
|
349
|
+
]
|
|
350
|
+
}
|
|
351
|
+
}
|
|
352
|
+
],
|
|
353
|
+
"events": []
|
|
354
|
+
}
|
|
355
|
+
},
|
|
356
|
+
{
|
|
357
|
+
"name": "vaadin-crud",
|
|
358
|
+
"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.2.0-alpha10/#/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.2.0-alpha10/#/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.2.0-alpha10/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/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 CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------|\n| `--vaadin-crud-background` |\n| `--vaadin-crud-border-color` |\n| `--vaadin-crud-border-radius` |\n| `--vaadin-crud-border-width` |\n| `--vaadin-crud-editor-max-height` |\n| `--vaadin-crud-editor-max-width` |\n| `--vaadin-crud-footer-background` |\n| `--vaadin-crud-footer-gap` |\n| `--vaadin-crud-footer-padding` |\n| `--vaadin-crud-form-padding` |\n| `--vaadin-crud-header-color` |\n| `--vaadin-crud-header-font-size` |\n| `--vaadin-crud-header-font-weight` |\n| `--vaadin-crud-header-line-height` |\n| `--vaadin-crud-header-padding` |\n| `--vaadin-crud-toolbar-background` |\n| `--vaadin-crud-toolbar-padding` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
359
|
+
"attributes": [
|
|
360
|
+
{
|
|
361
|
+
"name": "edit-on-click",
|
|
362
|
+
"description": "Enables user to click on row to edit it.\nNote: When enabled, auto-generated grid won't show the edit column.",
|
|
363
|
+
"value": {
|
|
364
|
+
"type": [
|
|
365
|
+
"boolean"
|
|
366
|
+
]
|
|
367
|
+
}
|
|
424
368
|
},
|
|
425
369
|
{
|
|
426
|
-
"name": "editor-
|
|
427
|
-
"description": "
|
|
370
|
+
"name": "editor-opened",
|
|
371
|
+
"description": "Reflects the opened status of the editor.",
|
|
428
372
|
"value": {
|
|
429
373
|
"type": [
|
|
430
|
-
"
|
|
431
|
-
"null",
|
|
432
|
-
"undefined"
|
|
374
|
+
"boolean"
|
|
433
375
|
]
|
|
434
376
|
}
|
|
435
377
|
},
|
|
436
378
|
{
|
|
437
|
-
"name": "
|
|
438
|
-
"description": "
|
|
379
|
+
"name": "editor-position",
|
|
380
|
+
"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)",
|
|
439
381
|
"value": {
|
|
440
382
|
"type": [
|
|
441
|
-
"string"
|
|
442
|
-
"null",
|
|
443
|
-
"undefined"
|
|
383
|
+
"string"
|
|
444
384
|
]
|
|
445
385
|
}
|
|
446
386
|
},
|
|
447
387
|
{
|
|
448
|
-
"name": "
|
|
449
|
-
"description": "
|
|
388
|
+
"name": "exclude",
|
|
389
|
+
"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.2.0-alpha10/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
450
390
|
"value": {
|
|
451
391
|
"type": [
|
|
452
|
-
"
|
|
453
|
-
"null",
|
|
454
|
-
"undefined"
|
|
392
|
+
"string"
|
|
455
393
|
]
|
|
456
394
|
}
|
|
457
395
|
},
|
|
458
396
|
{
|
|
459
397
|
"name": "include",
|
|
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.
|
|
398
|
+
"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.2.0-alpha10/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
461
399
|
"value": {
|
|
462
400
|
"type": [
|
|
463
|
-
"string"
|
|
464
|
-
"null",
|
|
465
|
-
"undefined"
|
|
401
|
+
"string"
|
|
466
402
|
]
|
|
467
403
|
}
|
|
468
404
|
},
|
|
@@ -471,9 +407,7 @@
|
|
|
471
407
|
"description": "Disable filtering when grid is autoconfigured.",
|
|
472
408
|
"value": {
|
|
473
409
|
"type": [
|
|
474
|
-
"boolean"
|
|
475
|
-
"null",
|
|
476
|
-
"undefined"
|
|
410
|
+
"boolean"
|
|
477
411
|
]
|
|
478
412
|
}
|
|
479
413
|
},
|
|
@@ -482,9 +416,7 @@
|
|
|
482
416
|
"description": "Remove grid headers when it is autoconfigured.",
|
|
483
417
|
"value": {
|
|
484
418
|
"type": [
|
|
485
|
-
"boolean"
|
|
486
|
-
"null",
|
|
487
|
-
"undefined"
|
|
419
|
+
"boolean"
|
|
488
420
|
]
|
|
489
421
|
}
|
|
490
422
|
},
|
|
@@ -493,9 +425,7 @@
|
|
|
493
425
|
"description": "Disable sorting when grid is autoconfigured.",
|
|
494
426
|
"value": {
|
|
495
427
|
"type": [
|
|
496
|
-
"boolean"
|
|
497
|
-
"null",
|
|
498
|
-
"undefined"
|
|
428
|
+
"boolean"
|
|
499
429
|
]
|
|
500
430
|
}
|
|
501
431
|
},
|
|
@@ -504,9 +434,7 @@
|
|
|
504
434
|
"description": "Controls visibility state of toolbar.\nWhen set to false toolbar is hidden and shown when set to true.",
|
|
505
435
|
"value": {
|
|
506
436
|
"type": [
|
|
507
|
-
"boolean"
|
|
508
|
-
"null",
|
|
509
|
-
"undefined"
|
|
437
|
+
"boolean"
|
|
510
438
|
]
|
|
511
439
|
}
|
|
512
440
|
},
|
|
@@ -539,9 +467,7 @@
|
|
|
539
467
|
"description": "The item being edited in the dialog.",
|
|
540
468
|
"value": {
|
|
541
469
|
"type": [
|
|
542
|
-
"
|
|
543
|
-
"null",
|
|
544
|
-
"undefined"
|
|
470
|
+
"object"
|
|
545
471
|
]
|
|
546
472
|
}
|
|
547
473
|
},
|
|
@@ -550,9 +476,7 @@
|
|
|
550
476
|
"description": "Enables user to click on row to edit it.\nNote: When enabled, auto-generated grid won't show the edit column.",
|
|
551
477
|
"value": {
|
|
552
478
|
"type": [
|
|
553
|
-
"boolean"
|
|
554
|
-
"null",
|
|
555
|
-
"undefined"
|
|
479
|
+
"boolean"
|
|
556
480
|
]
|
|
557
481
|
}
|
|
558
482
|
},
|
|
@@ -561,9 +485,7 @@
|
|
|
561
485
|
"description": "Reflects the opened status of the editor.",
|
|
562
486
|
"value": {
|
|
563
487
|
"type": [
|
|
564
|
-
"boolean"
|
|
565
|
-
"null",
|
|
566
|
-
"undefined"
|
|
488
|
+
"boolean"
|
|
567
489
|
]
|
|
568
490
|
}
|
|
569
491
|
},
|
|
@@ -572,20 +494,16 @@
|
|
|
572
494
|
"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)",
|
|
573
495
|
"value": {
|
|
574
496
|
"type": [
|
|
575
|
-
"string"
|
|
576
|
-
"null",
|
|
577
|
-
"undefined"
|
|
497
|
+
"string"
|
|
578
498
|
]
|
|
579
499
|
}
|
|
580
500
|
},
|
|
581
501
|
{
|
|
582
502
|
"name": "exclude",
|
|
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.
|
|
503
|
+
"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.2.0-alpha10/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
584
504
|
"value": {
|
|
585
505
|
"type": [
|
|
586
|
-
"string"
|
|
587
|
-
"null",
|
|
588
|
-
"undefined"
|
|
506
|
+
"string"
|
|
589
507
|
]
|
|
590
508
|
}
|
|
591
509
|
},
|
|
@@ -594,18 +512,16 @@
|
|
|
594
512
|
"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```",
|
|
595
513
|
"value": {
|
|
596
514
|
"type": [
|
|
597
|
-
"
|
|
515
|
+
"Object"
|
|
598
516
|
]
|
|
599
517
|
}
|
|
600
518
|
},
|
|
601
519
|
{
|
|
602
520
|
"name": "include",
|
|
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.
|
|
521
|
+
"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.2.0-alpha10/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
604
522
|
"value": {
|
|
605
523
|
"type": [
|
|
606
|
-
"string"
|
|
607
|
-
"null",
|
|
608
|
-
"undefined"
|
|
524
|
+
"string"
|
|
609
525
|
]
|
|
610
526
|
}
|
|
611
527
|
},
|
|
@@ -614,9 +530,7 @@
|
|
|
614
530
|
"description": "An array containing the items which will be stamped to the column template instances.",
|
|
615
531
|
"value": {
|
|
616
532
|
"type": [
|
|
617
|
-
"
|
|
618
|
-
"null",
|
|
619
|
-
"undefined"
|
|
533
|
+
"array"
|
|
620
534
|
]
|
|
621
535
|
}
|
|
622
536
|
},
|
|
@@ -625,9 +539,7 @@
|
|
|
625
539
|
"description": "Disable filtering when grid is autoconfigured.",
|
|
626
540
|
"value": {
|
|
627
541
|
"type": [
|
|
628
|
-
"boolean"
|
|
629
|
-
"null",
|
|
630
|
-
"undefined"
|
|
542
|
+
"boolean"
|
|
631
543
|
]
|
|
632
544
|
}
|
|
633
545
|
},
|
|
@@ -636,9 +548,7 @@
|
|
|
636
548
|
"description": "Remove grid headers when it is autoconfigured.",
|
|
637
549
|
"value": {
|
|
638
550
|
"type": [
|
|
639
|
-
"boolean"
|
|
640
|
-
"null",
|
|
641
|
-
"undefined"
|
|
551
|
+
"boolean"
|
|
642
552
|
]
|
|
643
553
|
}
|
|
644
554
|
},
|
|
@@ -647,9 +557,7 @@
|
|
|
647
557
|
"description": "Disable sorting when grid is autoconfigured.",
|
|
648
558
|
"value": {
|
|
649
559
|
"type": [
|
|
650
|
-
"boolean"
|
|
651
|
-
"null",
|
|
652
|
-
"undefined"
|
|
560
|
+
"boolean"
|
|
653
561
|
]
|
|
654
562
|
}
|
|
655
563
|
},
|
|
@@ -658,9 +566,7 @@
|
|
|
658
566
|
"description": "Controls visibility state of toolbar.\nWhen set to false toolbar is hidden and shown when set to true.",
|
|
659
567
|
"value": {
|
|
660
568
|
"type": [
|
|
661
|
-
"boolean"
|
|
662
|
-
"null",
|
|
663
|
-
"undefined"
|
|
569
|
+
"boolean"
|
|
664
570
|
]
|
|
665
571
|
}
|
|
666
572
|
}
|
|
@@ -668,15 +574,15 @@
|
|
|
668
574
|
"events": [
|
|
669
575
|
{
|
|
670
576
|
"name": "cancel",
|
|
671
|
-
"description": "Fired when user discards edition. If the default is prevented,
|
|
577
|
+
"description": "Fired when user discards edition. If the default is prevented, no action is performed; the listener is responsible for closing the dialog and resetting the item and grid."
|
|
672
578
|
},
|
|
673
579
|
{
|
|
674
580
|
"name": "delete",
|
|
675
|
-
"description": "Fired when user wants to delete item. If the default is prevented,
|
|
581
|
+
"description": "Fired when user wants to delete item. If the default is prevented, no action is performed: the items array is not modified and the dialog is not closed."
|
|
676
582
|
},
|
|
677
583
|
{
|
|
678
584
|
"name": "edit",
|
|
679
|
-
"description": "Fired when user wants to edit an existing item. If the default is prevented,
|
|
585
|
+
"description": "Fired when user wants to edit an existing item. If the default is prevented, a new item is not assigned to the form, but the dialog is still opened."
|
|
680
586
|
},
|
|
681
587
|
{
|
|
682
588
|
"name": "edited-item-changed",
|
|
@@ -696,7 +602,7 @@
|
|
|
696
602
|
},
|
|
697
603
|
{
|
|
698
604
|
"name": "save",
|
|
699
|
-
"description": "Fired when user wants to save a new or an existing item. If the default is prevented,
|
|
605
|
+
"description": "Fired when user wants to save a new or an existing item. If the default is prevented, no action is performed: the items array is not modified and the dialog is not closed."
|
|
700
606
|
},
|
|
701
607
|
{
|
|
702
608
|
"name": "size-changed",
|