@vaadin/crud 25.4.0-alpha2 → 25.4.0-alpha4
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 +20 -234
- package/package.json +16 -16
- package/src/styles/vaadin-crud-dialog-overlay-base-styles.js +3 -1
- package/src/vaadin-crud-dialog-overlay.js +2 -2
- package/src/vaadin-crud-edit.js +6 -2
- package/src/vaadin-crud-mixin.js +1 -1
- package/web-types.json +19 -53
- package/web-types.lit.json +9 -23
package/custom-elements.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "vaadin-crud.js",
|
|
7
|
+
"path": "vaadin-crud-edit-column.js",
|
|
8
8
|
"declarations": [],
|
|
9
9
|
"exports": [
|
|
10
10
|
{
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"name": "*",
|
|
13
13
|
"declaration": {
|
|
14
14
|
"name": "*",
|
|
15
|
-
"module": "src/vaadin-crud.js"
|
|
15
|
+
"module": "src/vaadin-crud-edit-column.js"
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
]
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
36
|
"kind": "javascript-module",
|
|
37
|
-
"path": "vaadin-crud
|
|
37
|
+
"path": "vaadin-crud.js",
|
|
38
38
|
"declarations": [],
|
|
39
39
|
"exports": [
|
|
40
40
|
{
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"name": "*",
|
|
43
43
|
"declaration": {
|
|
44
44
|
"name": "*",
|
|
45
|
-
"module": "src/vaadin-crud
|
|
45
|
+
"module": "src/vaadin-crud.js"
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
48
|
]
|
|
@@ -66,34 +66,6 @@
|
|
|
66
66
|
"description": "The arial-label for the edit button",
|
|
67
67
|
"attribute": "aria-label"
|
|
68
68
|
},
|
|
69
|
-
{
|
|
70
|
-
"kind": "field",
|
|
71
|
-
"name": "autoWidth",
|
|
72
|
-
"privacy": "public",
|
|
73
|
-
"type": {
|
|
74
|
-
"text": "boolean"
|
|
75
|
-
},
|
|
76
|
-
"description": "Automatically sets the width of the column based on the column contents when this is set to `true`.",
|
|
77
|
-
"attribute": "auto-width",
|
|
78
|
-
"inheritedFrom": {
|
|
79
|
-
"name": "GridColumnMixin",
|
|
80
|
-
"package": "@vaadin/grid/src/vaadin-grid-column-mixin.js"
|
|
81
|
-
}
|
|
82
|
-
},
|
|
83
|
-
{
|
|
84
|
-
"kind": "field",
|
|
85
|
-
"name": "flexGrow",
|
|
86
|
-
"privacy": "public",
|
|
87
|
-
"type": {
|
|
88
|
-
"text": "number"
|
|
89
|
-
},
|
|
90
|
-
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
91
|
-
"attribute": "flex-grow",
|
|
92
|
-
"inheritedFrom": {
|
|
93
|
-
"name": "GridColumnMixin",
|
|
94
|
-
"package": "@vaadin/grid/src/vaadin-grid-column-mixin.js"
|
|
95
|
-
}
|
|
96
|
-
},
|
|
97
69
|
{
|
|
98
70
|
"kind": "field",
|
|
99
71
|
"name": "footerPartName",
|
|
@@ -116,7 +88,6 @@
|
|
|
116
88
|
"text": "GridHeaderFooterRenderer | null | undefined"
|
|
117
89
|
},
|
|
118
90
|
"description": "Custom function for rendering the footer content.\nReceives two arguments:\n\n- `root` The footer cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.",
|
|
119
|
-
"attribute": "footer-renderer",
|
|
120
91
|
"inheritedFrom": {
|
|
121
92
|
"name": "ColumnBaseMixin",
|
|
122
93
|
"package": "@vaadin/grid/src/vaadin-grid-column-mixin.js"
|
|
@@ -186,7 +157,6 @@
|
|
|
186
157
|
"text": "GridHeaderFooterRenderer | null | undefined"
|
|
187
158
|
},
|
|
188
159
|
"description": "Custom function for rendering the header content.\nReceives two arguments:\n\n- `root` The header cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.",
|
|
189
|
-
"attribute": "header-renderer",
|
|
190
160
|
"inheritedFrom": {
|
|
191
161
|
"name": "ColumnBaseMixin",
|
|
192
162
|
"package": "@vaadin/grid/src/vaadin-grid-column-mixin.js"
|
|
@@ -228,7 +198,6 @@
|
|
|
228
198
|
"text": "GridBodyRenderer | null | undefined"
|
|
229
199
|
},
|
|
230
200
|
"description": "Custom function for rendering the cell content.\nReceives three arguments:\n\n- `root` The cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.\n- `model` The object with the properties related with\n the rendered item, contains:\n - `model.index` The index of the item.\n - `model.item` The item.\n - `model.expanded` Sublevel toggle state.\n - `model.level` Level of the tree represented with a horizontal offset of the toggle button.\n - `model.selected` Selected state.\n - `model.detailsOpened` Details opened state.\n - `model.hasChildren` Whether the item has children.",
|
|
231
|
-
"attribute": "renderer",
|
|
232
201
|
"inheritedFrom": {
|
|
233
202
|
"name": "GridColumnMixin",
|
|
234
203
|
"package": "@vaadin/grid/src/vaadin-grid-column-mixin.js"
|
|
@@ -284,7 +253,7 @@
|
|
|
284
253
|
"type": {
|
|
285
254
|
"text": "string"
|
|
286
255
|
},
|
|
287
|
-
"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.",
|
|
256
|
+
"description": "Width of the cells for this column.\nSetting the property to `null` or `undefined` restores the default width.\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.",
|
|
288
257
|
"attribute": "width",
|
|
289
258
|
"inheritedFrom": {
|
|
290
259
|
"name": "GridColumnMixin",
|
|
@@ -301,30 +270,6 @@
|
|
|
301
270
|
"description": "The arial-label for the edit button",
|
|
302
271
|
"fieldName": "ariaLabel"
|
|
303
272
|
},
|
|
304
|
-
{
|
|
305
|
-
"name": "auto-width",
|
|
306
|
-
"type": {
|
|
307
|
-
"text": "boolean"
|
|
308
|
-
},
|
|
309
|
-
"description": "Automatically sets the width of the column based on the column contents when this is set to `true`.",
|
|
310
|
-
"fieldName": "autoWidth",
|
|
311
|
-
"inheritedFrom": {
|
|
312
|
-
"name": "GridColumnMixin",
|
|
313
|
-
"package": "@vaadin/grid/src/vaadin-grid-column-mixin.js"
|
|
314
|
-
}
|
|
315
|
-
},
|
|
316
|
-
{
|
|
317
|
-
"name": "flex-grow",
|
|
318
|
-
"type": {
|
|
319
|
-
"text": "number"
|
|
320
|
-
},
|
|
321
|
-
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
322
|
-
"fieldName": "flexGrow",
|
|
323
|
-
"inheritedFrom": {
|
|
324
|
-
"name": "GridColumnMixin",
|
|
325
|
-
"package": "@vaadin/grid/src/vaadin-grid-column-mixin.js"
|
|
326
|
-
}
|
|
327
|
-
},
|
|
328
273
|
{
|
|
329
274
|
"name": "footer-part-name",
|
|
330
275
|
"type": {
|
|
@@ -337,18 +282,6 @@
|
|
|
337
282
|
"package": "@vaadin/grid/src/vaadin-grid-column-mixin.js"
|
|
338
283
|
}
|
|
339
284
|
},
|
|
340
|
-
{
|
|
341
|
-
"name": "footer-renderer",
|
|
342
|
-
"type": {
|
|
343
|
-
"text": "GridHeaderFooterRenderer | null | undefined"
|
|
344
|
-
},
|
|
345
|
-
"description": "Custom function for rendering the footer content.\nReceives two arguments:\n\n- `root` The footer cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.",
|
|
346
|
-
"fieldName": "footerRenderer",
|
|
347
|
-
"inheritedFrom": {
|
|
348
|
-
"name": "ColumnBaseMixin",
|
|
349
|
-
"package": "@vaadin/grid/src/vaadin-grid-column-mixin.js"
|
|
350
|
-
}
|
|
351
|
-
},
|
|
352
285
|
{
|
|
353
286
|
"name": "frozen",
|
|
354
287
|
"type": {
|
|
@@ -397,18 +330,6 @@
|
|
|
397
330
|
"package": "@vaadin/grid/src/vaadin-grid-column-mixin.js"
|
|
398
331
|
}
|
|
399
332
|
},
|
|
400
|
-
{
|
|
401
|
-
"name": "header-renderer",
|
|
402
|
-
"type": {
|
|
403
|
-
"text": "GridHeaderFooterRenderer | null | undefined"
|
|
404
|
-
},
|
|
405
|
-
"description": "Custom function for rendering the header content.\nReceives two arguments:\n\n- `root` The header cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.",
|
|
406
|
-
"fieldName": "headerRenderer",
|
|
407
|
-
"inheritedFrom": {
|
|
408
|
-
"name": "ColumnBaseMixin",
|
|
409
|
-
"package": "@vaadin/grid/src/vaadin-grid-column-mixin.js"
|
|
410
|
-
}
|
|
411
|
-
},
|
|
412
333
|
{
|
|
413
334
|
"name": "hidden",
|
|
414
335
|
"type": {
|
|
@@ -433,18 +354,6 @@
|
|
|
433
354
|
"package": "@vaadin/grid/src/vaadin-grid-column-mixin.js"
|
|
434
355
|
}
|
|
435
356
|
},
|
|
436
|
-
{
|
|
437
|
-
"name": "renderer",
|
|
438
|
-
"type": {
|
|
439
|
-
"text": "GridBodyRenderer | null | undefined"
|
|
440
|
-
},
|
|
441
|
-
"description": "Custom function for rendering the cell content.\nReceives three arguments:\n\n- `root` The cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.\n- `model` The object with the properties related with\n the rendered item, contains:\n - `model.index` The index of the item.\n - `model.item` The item.\n - `model.expanded` Sublevel toggle state.\n - `model.level` Level of the tree represented with a horizontal offset of the toggle button.\n - `model.selected` Selected state.\n - `model.detailsOpened` Details opened state.\n - `model.hasChildren` Whether the item has children.",
|
|
442
|
-
"fieldName": "renderer",
|
|
443
|
-
"inheritedFrom": {
|
|
444
|
-
"name": "GridColumnMixin",
|
|
445
|
-
"package": "@vaadin/grid/src/vaadin-grid-column-mixin.js"
|
|
446
|
-
}
|
|
447
|
-
},
|
|
448
357
|
{
|
|
449
358
|
"name": "resizable",
|
|
450
359
|
"type": {
|
|
@@ -487,7 +396,7 @@
|
|
|
487
396
|
"type": {
|
|
488
397
|
"text": "string"
|
|
489
398
|
},
|
|
490
|
-
"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.",
|
|
399
|
+
"description": "Width of the cells for this column.\nSetting the property to `null` or `undefined` restores the default width.\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.",
|
|
491
400
|
"fieldName": "width",
|
|
492
401
|
"inheritedFrom": {
|
|
493
402
|
"name": "GridColumnMixin",
|
|
@@ -601,7 +510,6 @@
|
|
|
601
510
|
"text": "string | RegExp"
|
|
602
511
|
},
|
|
603
512
|
"description": "A list of item fields that should not be mapped to form fields.\n\nWhen [`include`](#/elements/vaadin-crud-form#property-include) is defined, this property is ignored.\n\nDefault is to exclude any private property.",
|
|
604
|
-
"attribute": "exclude",
|
|
605
513
|
"inheritedFrom": {
|
|
606
514
|
"name": "IncludedMixin",
|
|
607
515
|
"module": "src/vaadin-crud-include-mixin.js"
|
|
@@ -625,7 +533,6 @@
|
|
|
625
533
|
"text": "string | !Array<string> | undefined"
|
|
626
534
|
},
|
|
627
535
|
"description": "A list of item properties that should be mapped to form fields.\n\nWhen it is defined [`exclude`](#/elements/vaadin-crud-form#property-exclude) is ignored.",
|
|
628
|
-
"attribute": "include",
|
|
629
536
|
"inheritedFrom": {
|
|
630
537
|
"name": "IncludedMixin",
|
|
631
538
|
"module": "src/vaadin-crud-include-mixin.js"
|
|
@@ -663,18 +570,6 @@
|
|
|
663
570
|
}
|
|
664
571
|
],
|
|
665
572
|
"attributes": [
|
|
666
|
-
{
|
|
667
|
-
"name": "exclude",
|
|
668
|
-
"type": {
|
|
669
|
-
"text": "string | RegExp"
|
|
670
|
-
},
|
|
671
|
-
"description": "A list of item fields that should not be mapped to form fields.\n\nWhen [`include`](#/elements/vaadin-crud-form#property-include) is defined, this property is ignored.\n\nDefault is to exclude any private property.",
|
|
672
|
-
"fieldName": "exclude",
|
|
673
|
-
"inheritedFrom": {
|
|
674
|
-
"name": "IncludedMixin",
|
|
675
|
-
"module": "src/vaadin-crud-include-mixin.js"
|
|
676
|
-
}
|
|
677
|
-
},
|
|
678
573
|
{
|
|
679
574
|
"name": "hide-edit-column",
|
|
680
575
|
"type": {
|
|
@@ -933,8 +828,7 @@
|
|
|
933
828
|
"type": {
|
|
934
829
|
"text": "string | RegExp"
|
|
935
830
|
},
|
|
936
|
-
"description": "A list of item fields that should not be mapped to form fields.\n\nWhen [`include`](#/elements/vaadin-crud-form#property-include) is defined, this property is ignored.\n\nDefault is to exclude any private property."
|
|
937
|
-
"attribute": "exclude"
|
|
831
|
+
"description": "A list of item fields that should not be mapped to form fields.\n\nWhen [`include`](#/elements/vaadin-crud-form#property-include) is defined, this property is ignored.\n\nDefault is to exclude any private property."
|
|
938
832
|
},
|
|
939
833
|
{
|
|
940
834
|
"kind": "field",
|
|
@@ -943,20 +837,10 @@
|
|
|
943
837
|
"type": {
|
|
944
838
|
"text": "string | !Array<string> | undefined"
|
|
945
839
|
},
|
|
946
|
-
"description": "A list of item properties that should be mapped to form fields.\n\nWhen it is defined [`exclude`](#/elements/vaadin-crud-form#property-exclude) is ignored."
|
|
947
|
-
"attribute": "include"
|
|
948
|
-
}
|
|
949
|
-
],
|
|
950
|
-
"attributes": [
|
|
951
|
-
{
|
|
952
|
-
"name": "exclude",
|
|
953
|
-
"type": {
|
|
954
|
-
"text": "string | RegExp"
|
|
955
|
-
},
|
|
956
|
-
"description": "A list of item fields that should not be mapped to form fields.\n\nWhen [`include`](#/elements/vaadin-crud-form#property-include) is defined, this property is ignored.\n\nDefault is to exclude any private property.",
|
|
957
|
-
"fieldName": "exclude"
|
|
840
|
+
"description": "A list of item properties that should be mapped to form fields.\n\nWhen it is defined [`exclude`](#/elements/vaadin-crud-form#property-exclude) is ignored."
|
|
958
841
|
}
|
|
959
842
|
],
|
|
843
|
+
"attributes": [],
|
|
960
844
|
"parameters": [
|
|
961
845
|
{
|
|
962
846
|
"name": "superClass"
|
|
@@ -991,8 +875,7 @@
|
|
|
991
875
|
"type": {
|
|
992
876
|
"text": "CrudDataProvider | undefined"
|
|
993
877
|
},
|
|
994
|
-
"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"
|
|
995
|
-
"attribute": "data-provider"
|
|
878
|
+
"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"
|
|
996
879
|
},
|
|
997
880
|
{
|
|
998
881
|
"kind": "field",
|
|
@@ -1001,8 +884,7 @@
|
|
|
1001
884
|
"type": {
|
|
1002
885
|
"text": "object"
|
|
1003
886
|
},
|
|
1004
|
-
"description": "The item being edited in the dialog."
|
|
1005
|
-
"attribute": "edited-item"
|
|
887
|
+
"description": "The item being edited in the dialog."
|
|
1006
888
|
},
|
|
1007
889
|
{
|
|
1008
890
|
"kind": "field",
|
|
@@ -1047,16 +929,11 @@
|
|
|
1047
929
|
{
|
|
1048
930
|
"kind": "field",
|
|
1049
931
|
"name": "i18n",
|
|
1050
|
-
"
|
|
932
|
+
"description": "The object used to localize this component. To change the default\nlocalization, set this to an object that provides all properties, or\njust the individual properties you want to change.\n\nWhen not set, defaults to `undefined`.\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```",
|
|
1051
933
|
"type": {
|
|
1052
|
-
"text": "
|
|
934
|
+
"text": "CrudI18n | undefined"
|
|
1053
935
|
},
|
|
1054
|
-
"
|
|
1055
|
-
"attribute": "i18n",
|
|
1056
|
-
"inheritedFrom": {
|
|
1057
|
-
"name": "I18nMixin",
|
|
1058
|
-
"package": "@vaadin/component-base/src/i18n-mixin.js"
|
|
1059
|
-
}
|
|
936
|
+
"privacy": "public"
|
|
1060
937
|
},
|
|
1061
938
|
{
|
|
1062
939
|
"kind": "field",
|
|
@@ -1075,8 +952,7 @@
|
|
|
1075
952
|
"type": {
|
|
1076
953
|
"text": "array"
|
|
1077
954
|
},
|
|
1078
|
-
"description": "An array containing the items which will be stamped to the column template instances."
|
|
1079
|
-
"attribute": "items"
|
|
955
|
+
"description": "An array containing the items which will be stamped to the column template instances."
|
|
1080
956
|
},
|
|
1081
957
|
{
|
|
1082
958
|
"kind": "field",
|
|
@@ -1126,19 +1002,10 @@
|
|
|
1126
1002
|
"text": "number"
|
|
1127
1003
|
},
|
|
1128
1004
|
"description": "Number of items in the data set which is reported by the grid.\nTypically it reflects the number of filtered items displayed in the grid.\n\nNote: As with `<vaadin-grid>`, this property updates automatically only\nif `items` is used for data.",
|
|
1129
|
-
"attribute": "size",
|
|
1130
1005
|
"readonly": true
|
|
1131
1006
|
}
|
|
1132
1007
|
],
|
|
1133
1008
|
"attributes": [
|
|
1134
|
-
{
|
|
1135
|
-
"name": "data-provider",
|
|
1136
|
-
"type": {
|
|
1137
|
-
"text": "CrudDataProvider | undefined"
|
|
1138
|
-
},
|
|
1139
|
-
"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",
|
|
1140
|
-
"fieldName": "dataProvider"
|
|
1141
|
-
},
|
|
1142
1009
|
{
|
|
1143
1010
|
"name": "edit-on-click",
|
|
1144
1011
|
"type": {
|
|
@@ -1171,18 +1038,6 @@
|
|
|
1171
1038
|
"description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
1172
1039
|
"fieldName": "exclude"
|
|
1173
1040
|
},
|
|
1174
|
-
{
|
|
1175
|
-
"name": "i18n",
|
|
1176
|
-
"type": {
|
|
1177
|
-
"text": "Object | undefined"
|
|
1178
|
-
},
|
|
1179
|
-
"description": "The object used to localize this component. To change the default\nlocalization, set this to an object that provides all properties, or\njust the individual properties you want to change.\n\nWhen not set, defaults to `undefined`.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
|
|
1180
|
-
"fieldName": "i18n",
|
|
1181
|
-
"inheritedFrom": {
|
|
1182
|
-
"name": "I18nMixin",
|
|
1183
|
-
"package": "@vaadin/component-base/src/i18n-mixin.js"
|
|
1184
|
-
}
|
|
1185
|
-
},
|
|
1186
1041
|
{
|
|
1187
1042
|
"name": "include",
|
|
1188
1043
|
"type": {
|
|
@@ -1191,14 +1046,6 @@
|
|
|
1191
1046
|
"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`](#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
1192
1047
|
"fieldName": "include"
|
|
1193
1048
|
},
|
|
1194
|
-
{
|
|
1195
|
-
"name": "items",
|
|
1196
|
-
"type": {
|
|
1197
|
-
"text": "array"
|
|
1198
|
-
},
|
|
1199
|
-
"description": "An array containing the items which will be stamped to the column template instances.",
|
|
1200
|
-
"fieldName": "items"
|
|
1201
|
-
},
|
|
1202
1049
|
{
|
|
1203
1050
|
"name": "no-filter",
|
|
1204
1051
|
"type": {
|
|
@@ -1230,14 +1077,6 @@
|
|
|
1230
1077
|
},
|
|
1231
1078
|
"description": "Controls visibility state of toolbar.\nWhen set to false toolbar is hidden and shown when set to true.",
|
|
1232
1079
|
"fieldName": "noToolbar"
|
|
1233
|
-
},
|
|
1234
|
-
{
|
|
1235
|
-
"name": "size",
|
|
1236
|
-
"type": {
|
|
1237
|
-
"text": "number"
|
|
1238
|
-
},
|
|
1239
|
-
"description": "Number of items in the data set which is reported by the grid.\nTypically it reflects the number of filtered items displayed in the grid.\n\nNote: As with `<vaadin-grid>`, this property updates automatically only\nif `items` is used for data.",
|
|
1240
|
-
"fieldName": "size"
|
|
1241
1080
|
}
|
|
1242
1081
|
],
|
|
1243
1082
|
"mixins": [
|
|
@@ -1281,7 +1120,6 @@
|
|
|
1281
1120
|
"text": "CrudDataProvider | undefined"
|
|
1282
1121
|
},
|
|
1283
1122
|
"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",
|
|
1284
|
-
"attribute": "data-provider",
|
|
1285
1123
|
"inheritedFrom": {
|
|
1286
1124
|
"name": "CrudMixin",
|
|
1287
1125
|
"module": "src/vaadin-crud-mixin.js"
|
|
@@ -1295,7 +1133,6 @@
|
|
|
1295
1133
|
"text": "object"
|
|
1296
1134
|
},
|
|
1297
1135
|
"description": "The item being edited in the dialog.",
|
|
1298
|
-
"attribute": "edited-item",
|
|
1299
1136
|
"inheritedFrom": {
|
|
1300
1137
|
"name": "CrudMixin",
|
|
1301
1138
|
"module": "src/vaadin-crud-mixin.js"
|
|
@@ -1360,15 +1197,14 @@
|
|
|
1360
1197
|
{
|
|
1361
1198
|
"kind": "field",
|
|
1362
1199
|
"name": "i18n",
|
|
1363
|
-
"
|
|
1200
|
+
"description": "The object used to localize this component. To change the default\nlocalization, set this to an object that provides all properties, or\njust the individual properties you want to change.\n\nWhen not set, defaults to `undefined`.\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```",
|
|
1364
1201
|
"type": {
|
|
1365
|
-
"text": "
|
|
1202
|
+
"text": "CrudI18n | undefined"
|
|
1366
1203
|
},
|
|
1367
|
-
"
|
|
1368
|
-
"attribute": "i18n",
|
|
1204
|
+
"privacy": "public",
|
|
1369
1205
|
"inheritedFrom": {
|
|
1370
|
-
"name": "
|
|
1371
|
-
"
|
|
1206
|
+
"name": "CrudMixin",
|
|
1207
|
+
"module": "src/vaadin-crud-mixin.js"
|
|
1372
1208
|
}
|
|
1373
1209
|
},
|
|
1374
1210
|
{
|
|
@@ -1393,7 +1229,6 @@
|
|
|
1393
1229
|
"text": "array"
|
|
1394
1230
|
},
|
|
1395
1231
|
"description": "An array containing the items which will be stamped to the column template instances.",
|
|
1396
|
-
"attribute": "items",
|
|
1397
1232
|
"inheritedFrom": {
|
|
1398
1233
|
"name": "CrudMixin",
|
|
1399
1234
|
"module": "src/vaadin-crud-mixin.js"
|
|
@@ -1463,7 +1298,6 @@
|
|
|
1463
1298
|
"text": "number"
|
|
1464
1299
|
},
|
|
1465
1300
|
"description": "Number of items in the data set which is reported by the grid.\nTypically it reflects the number of filtered items displayed in the grid.\n\nNote: As with `<vaadin-grid>`, this property updates automatically only\nif `items` is used for data.",
|
|
1466
|
-
"attribute": "size",
|
|
1467
1301
|
"readonly": true,
|
|
1468
1302
|
"inheritedFrom": {
|
|
1469
1303
|
"name": "CrudMixin",
|
|
@@ -1537,18 +1371,6 @@
|
|
|
1537
1371
|
}
|
|
1538
1372
|
],
|
|
1539
1373
|
"attributes": [
|
|
1540
|
-
{
|
|
1541
|
-
"name": "data-provider",
|
|
1542
|
-
"type": {
|
|
1543
|
-
"text": "CrudDataProvider | undefined"
|
|
1544
|
-
},
|
|
1545
|
-
"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",
|
|
1546
|
-
"fieldName": "dataProvider",
|
|
1547
|
-
"inheritedFrom": {
|
|
1548
|
-
"name": "CrudMixin",
|
|
1549
|
-
"module": "src/vaadin-crud-mixin.js"
|
|
1550
|
-
}
|
|
1551
|
-
},
|
|
1552
1374
|
{
|
|
1553
1375
|
"name": "edit-on-click",
|
|
1554
1376
|
"type": {
|
|
@@ -1597,18 +1419,6 @@
|
|
|
1597
1419
|
"module": "src/vaadin-crud-mixin.js"
|
|
1598
1420
|
}
|
|
1599
1421
|
},
|
|
1600
|
-
{
|
|
1601
|
-
"name": "i18n",
|
|
1602
|
-
"type": {
|
|
1603
|
-
"text": "Object | undefined"
|
|
1604
|
-
},
|
|
1605
|
-
"description": "The object used to localize this component. To change the default\nlocalization, set this to an object that provides all properties, or\njust the individual properties you want to change.\n\nWhen not set, defaults to `undefined`.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
|
|
1606
|
-
"fieldName": "i18n",
|
|
1607
|
-
"inheritedFrom": {
|
|
1608
|
-
"name": "I18nMixin",
|
|
1609
|
-
"package": "@vaadin/component-base/src/i18n-mixin.js"
|
|
1610
|
-
}
|
|
1611
|
-
},
|
|
1612
1422
|
{
|
|
1613
1423
|
"name": "include",
|
|
1614
1424
|
"type": {
|
|
@@ -1621,18 +1431,6 @@
|
|
|
1621
1431
|
"module": "src/vaadin-crud-mixin.js"
|
|
1622
1432
|
}
|
|
1623
1433
|
},
|
|
1624
|
-
{
|
|
1625
|
-
"name": "items",
|
|
1626
|
-
"type": {
|
|
1627
|
-
"text": "array"
|
|
1628
|
-
},
|
|
1629
|
-
"description": "An array containing the items which will be stamped to the column template instances.",
|
|
1630
|
-
"fieldName": "items",
|
|
1631
|
-
"inheritedFrom": {
|
|
1632
|
-
"name": "CrudMixin",
|
|
1633
|
-
"module": "src/vaadin-crud-mixin.js"
|
|
1634
|
-
}
|
|
1635
|
-
},
|
|
1636
1434
|
{
|
|
1637
1435
|
"name": "no-filter",
|
|
1638
1436
|
"type": {
|
|
@@ -1681,18 +1479,6 @@
|
|
|
1681
1479
|
"module": "src/vaadin-crud-mixin.js"
|
|
1682
1480
|
}
|
|
1683
1481
|
},
|
|
1684
|
-
{
|
|
1685
|
-
"name": "size",
|
|
1686
|
-
"type": {
|
|
1687
|
-
"text": "number"
|
|
1688
|
-
},
|
|
1689
|
-
"description": "Number of items in the data set which is reported by the grid.\nTypically it reflects the number of filtered items displayed in the grid.\n\nNote: As with `<vaadin-grid>`, this property updates automatically only\nif `items` is used for data.",
|
|
1690
|
-
"fieldName": "size",
|
|
1691
|
-
"inheritedFrom": {
|
|
1692
|
-
"name": "CrudMixin",
|
|
1693
|
-
"module": "src/vaadin-crud-mixin.js"
|
|
1694
|
-
}
|
|
1695
|
-
},
|
|
1696
1482
|
{
|
|
1697
1483
|
"type": {
|
|
1698
1484
|
"text": "string"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/crud",
|
|
3
|
-
"version": "25.4.0-
|
|
3
|
+
"version": "25.4.0-alpha4",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,24 +35,24 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/a11y-base": "25.4.0-
|
|
39
|
-
"@vaadin/button": "25.4.0-
|
|
40
|
-
"@vaadin/component-base": "25.4.0-
|
|
41
|
-
"@vaadin/confirm-dialog": "25.4.0-
|
|
42
|
-
"@vaadin/dialog": "25.4.0-
|
|
43
|
-
"@vaadin/form-layout": "25.4.0-
|
|
44
|
-
"@vaadin/grid": "25.4.0-
|
|
45
|
-
"@vaadin/overlay": "25.4.0-
|
|
46
|
-
"@vaadin/text-field": "25.4.0-
|
|
47
|
-
"@vaadin/vaadin-themable-mixin": "25.4.0-
|
|
38
|
+
"@vaadin/a11y-base": "25.4.0-alpha4",
|
|
39
|
+
"@vaadin/button": "25.4.0-alpha4",
|
|
40
|
+
"@vaadin/component-base": "25.4.0-alpha4",
|
|
41
|
+
"@vaadin/confirm-dialog": "25.4.0-alpha4",
|
|
42
|
+
"@vaadin/dialog": "25.4.0-alpha4",
|
|
43
|
+
"@vaadin/form-layout": "25.4.0-alpha4",
|
|
44
|
+
"@vaadin/grid": "25.4.0-alpha4",
|
|
45
|
+
"@vaadin/overlay": "25.4.0-alpha4",
|
|
46
|
+
"@vaadin/text-field": "25.4.0-alpha4",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "25.4.0-alpha4",
|
|
48
48
|
"lit": "^3.0.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
|
-
"@vaadin/aura": "25.4.0-
|
|
52
|
-
"@vaadin/chai-plugins": "25.4.0-
|
|
53
|
-
"@vaadin/test-runner-commands": "25.4.0-
|
|
51
|
+
"@vaadin/aura": "25.4.0-alpha4",
|
|
52
|
+
"@vaadin/chai-plugins": "25.4.0-alpha4",
|
|
53
|
+
"@vaadin/test-runner-commands": "25.4.0-alpha4",
|
|
54
54
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
55
|
-
"@vaadin/vaadin-lumo-styles": "25.4.0-
|
|
55
|
+
"@vaadin/vaadin-lumo-styles": "25.4.0-alpha4",
|
|
56
56
|
"sinon": "^22.0.0"
|
|
57
57
|
},
|
|
58
58
|
"cvdlName": "vaadin-crud",
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"web-types.json",
|
|
62
62
|
"web-types.lit.json"
|
|
63
63
|
],
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "7809e4c099538333a6dbd11d8da18a0c6ec30dad"
|
|
65
65
|
}
|
|
@@ -32,7 +32,9 @@ const crudDialogOverlay = css`
|
|
|
32
32
|
overflow: auto;
|
|
33
33
|
overscroll-behavior: contain;
|
|
34
34
|
padding: var(--vaadin-crud-form-padding, var(--vaadin-padding-l));
|
|
35
|
-
padding-top:
|
|
35
|
+
padding-top: calc(var(--vaadin-focus-ring-width, 2px) + 2px);
|
|
36
|
+
margin-top: calc(var(--vaadin-focus-ring-width, 2px) * -1 - 2px);
|
|
37
|
+
margin-bottom: 0;
|
|
36
38
|
}
|
|
37
39
|
|
|
38
40
|
::slotted([slot='form']) {
|
|
@@ -55,11 +55,11 @@ class CrudDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin
|
|
|
55
55
|
<div part="content" id="content">
|
|
56
56
|
<slot name="form"></slot>
|
|
57
57
|
</div>
|
|
58
|
-
<
|
|
58
|
+
<div part="footer" role="toolbar">
|
|
59
59
|
<slot name="save-button"></slot>
|
|
60
60
|
<slot name="cancel-button"></slot>
|
|
61
61
|
<slot name="delete-button"></slot>
|
|
62
|
-
</
|
|
62
|
+
</div>
|
|
63
63
|
</section>
|
|
64
64
|
</div>
|
|
65
65
|
`;
|
package/src/vaadin-crud-edit.js
CHANGED
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
import { html } from 'lit';
|
|
12
12
|
import { Button } from '@vaadin/button/src/vaadin-button.js';
|
|
13
13
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
14
|
+
import { getClosestCell } from '@vaadin/grid/src/vaadin-grid-helpers.js';
|
|
14
15
|
import { crudEditStyles } from './styles/vaadin-crud-edit-base-styles.js';
|
|
15
16
|
|
|
16
17
|
/**
|
|
@@ -49,8 +50,11 @@ class CrudEdit extends Button {
|
|
|
49
50
|
}
|
|
50
51
|
|
|
51
52
|
/** @private */
|
|
52
|
-
__onClick(
|
|
53
|
-
const tr =
|
|
53
|
+
__onClick() {
|
|
54
|
+
const tr = getClosestCell(this)?.__parentRow;
|
|
55
|
+
if (!tr) {
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
54
58
|
/** @internal to not document it in CEM */
|
|
55
59
|
tr.dispatchEvent(
|
|
56
60
|
new CustomEvent('edit', { detail: { item: tr._item, index: tr.index }, bubbles: true, composed: true }),
|
package/src/vaadin-crud-mixin.js
CHANGED
|
@@ -522,7 +522,7 @@ export const CrudMixin = (superClass) =>
|
|
|
522
522
|
|
|
523
523
|
// Wait to set label until header node has updated (observer seems to run after this one)
|
|
524
524
|
setTimeout(() => {
|
|
525
|
-
this.__dialogAriaLabel = this._headerNode
|
|
525
|
+
this.__dialogAriaLabel = this._headerNode?.textContent.trim();
|
|
526
526
|
});
|
|
527
527
|
}
|
|
528
528
|
|
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.4.0-
|
|
4
|
+
"version": "25.4.0-alpha4",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -19,24 +19,6 @@
|
|
|
19
19
|
]
|
|
20
20
|
}
|
|
21
21
|
},
|
|
22
|
-
{
|
|
23
|
-
"name": "auto-width",
|
|
24
|
-
"description": "Automatically sets the width of the column based on the column contents when this is set to `true`.",
|
|
25
|
-
"value": {
|
|
26
|
-
"type": [
|
|
27
|
-
"boolean"
|
|
28
|
-
]
|
|
29
|
-
}
|
|
30
|
-
},
|
|
31
|
-
{
|
|
32
|
-
"name": "flex-grow",
|
|
33
|
-
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
34
|
-
"value": {
|
|
35
|
-
"type": [
|
|
36
|
-
"number"
|
|
37
|
-
]
|
|
38
|
-
}
|
|
39
|
-
},
|
|
40
22
|
{
|
|
41
23
|
"name": "footer-part-name",
|
|
42
24
|
"description": "Custom part name for the footer cell.",
|
|
@@ -107,7 +89,8 @@
|
|
|
107
89
|
"type": [
|
|
108
90
|
"boolean"
|
|
109
91
|
]
|
|
110
|
-
}
|
|
92
|
+
},
|
|
93
|
+
"default": "false"
|
|
111
94
|
},
|
|
112
95
|
{
|
|
113
96
|
"name": "row-header",
|
|
@@ -129,7 +112,7 @@
|
|
|
129
112
|
},
|
|
130
113
|
{
|
|
131
114
|
"name": "width",
|
|
132
|
-
"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.",
|
|
115
|
+
"description": "Width of the cells for this column.\nSetting the property to `null` or `undefined` restores the default width.\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.",
|
|
133
116
|
"value": {
|
|
134
117
|
"type": [
|
|
135
118
|
"string"
|
|
@@ -148,24 +131,6 @@
|
|
|
148
131
|
]
|
|
149
132
|
}
|
|
150
133
|
},
|
|
151
|
-
{
|
|
152
|
-
"name": "autoWidth",
|
|
153
|
-
"description": "Automatically sets the width of the column based on the column contents when this is set to `true`.",
|
|
154
|
-
"value": {
|
|
155
|
-
"type": [
|
|
156
|
-
"boolean"
|
|
157
|
-
]
|
|
158
|
-
}
|
|
159
|
-
},
|
|
160
|
-
{
|
|
161
|
-
"name": "flexGrow",
|
|
162
|
-
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
163
|
-
"value": {
|
|
164
|
-
"type": [
|
|
165
|
-
"number"
|
|
166
|
-
]
|
|
167
|
-
}
|
|
168
|
-
},
|
|
169
134
|
{
|
|
170
135
|
"name": "footerPartName",
|
|
171
136
|
"description": "Custom part name for the footer cell.",
|
|
@@ -269,7 +234,8 @@
|
|
|
269
234
|
"type": [
|
|
270
235
|
"boolean"
|
|
271
236
|
]
|
|
272
|
-
}
|
|
237
|
+
},
|
|
238
|
+
"default": "false"
|
|
273
239
|
},
|
|
274
240
|
{
|
|
275
241
|
"name": "rowHeader",
|
|
@@ -291,7 +257,7 @@
|
|
|
291
257
|
},
|
|
292
258
|
{
|
|
293
259
|
"name": "width",
|
|
294
|
-
"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.",
|
|
260
|
+
"description": "Width of the cells for this column.\nSetting the property to `null` or `undefined` restores the default width.\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.",
|
|
295
261
|
"value": {
|
|
296
262
|
"type": [
|
|
297
263
|
"string"
|
|
@@ -342,7 +308,7 @@
|
|
|
342
308
|
},
|
|
343
309
|
{
|
|
344
310
|
"name": "vaadin-crud",
|
|
345
|
-
"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.4.0-
|
|
311
|
+
"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.4.0-alpha4/#/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.4.0-alpha4/#/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.4.0-alpha4/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha4/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha4/#/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.",
|
|
346
312
|
"attributes": [
|
|
347
313
|
{
|
|
348
314
|
"name": "edit-on-click",
|
|
@@ -373,7 +339,7 @@
|
|
|
373
339
|
},
|
|
374
340
|
{
|
|
375
341
|
"name": "exclude",
|
|
376
|
-
"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.4.0-
|
|
342
|
+
"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.4.0-alpha4/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
377
343
|
"value": {
|
|
378
344
|
"type": [
|
|
379
345
|
"string"
|
|
@@ -382,7 +348,7 @@
|
|
|
382
348
|
},
|
|
383
349
|
{
|
|
384
350
|
"name": "include",
|
|
385
|
-
"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.4.0-
|
|
351
|
+
"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.4.0-alpha4/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
386
352
|
"value": {
|
|
387
353
|
"type": [
|
|
388
354
|
"string"
|
|
@@ -448,20 +414,20 @@
|
|
|
448
414
|
}
|
|
449
415
|
},
|
|
450
416
|
{
|
|
451
|
-
"name": "
|
|
452
|
-
"description": "
|
|
417
|
+
"name": "editOnClick",
|
|
418
|
+
"description": "Enables user to click on row to edit it.\nNote: When enabled, auto-generated grid won't show the edit column.",
|
|
453
419
|
"value": {
|
|
454
420
|
"type": [
|
|
455
|
-
"
|
|
421
|
+
"boolean"
|
|
456
422
|
]
|
|
457
423
|
}
|
|
458
424
|
},
|
|
459
425
|
{
|
|
460
|
-
"name": "
|
|
461
|
-
"description": "
|
|
426
|
+
"name": "editedItem",
|
|
427
|
+
"description": "The item being edited in the dialog.",
|
|
462
428
|
"value": {
|
|
463
429
|
"type": [
|
|
464
|
-
"
|
|
430
|
+
"object"
|
|
465
431
|
]
|
|
466
432
|
}
|
|
467
433
|
},
|
|
@@ -485,7 +451,7 @@
|
|
|
485
451
|
},
|
|
486
452
|
{
|
|
487
453
|
"name": "exclude",
|
|
488
|
-
"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.4.0-
|
|
454
|
+
"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.4.0-alpha4/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
489
455
|
"value": {
|
|
490
456
|
"type": [
|
|
491
457
|
"string"
|
|
@@ -497,14 +463,14 @@
|
|
|
497
463
|
"description": "The object used to localize this component. To change the default\nlocalization, set this to an object that provides all properties, or\njust the individual properties you want to change.\n\nWhen not set, defaults to `undefined`.\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```",
|
|
498
464
|
"value": {
|
|
499
465
|
"type": [
|
|
500
|
-
"
|
|
466
|
+
"CrudI18n",
|
|
501
467
|
"undefined"
|
|
502
468
|
]
|
|
503
469
|
}
|
|
504
470
|
},
|
|
505
471
|
{
|
|
506
472
|
"name": "include",
|
|
507
|
-
"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.4.0-
|
|
473
|
+
"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.4.0-alpha4/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
508
474
|
"value": {
|
|
509
475
|
"type": [
|
|
510
476
|
"string"
|
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.4.0-
|
|
4
|
+
"version": "25.4.0-alpha4",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -26,20 +26,6 @@
|
|
|
26
26
|
"kind": "expression"
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
|
-
{
|
|
30
|
-
"name": "?autoWidth",
|
|
31
|
-
"description": "Automatically sets the width of the column based on the column contents when this is set to `true`.",
|
|
32
|
-
"value": {
|
|
33
|
-
"kind": "expression"
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
{
|
|
37
|
-
"name": ".flexGrow",
|
|
38
|
-
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
39
|
-
"value": {
|
|
40
|
-
"kind": "expression"
|
|
41
|
-
}
|
|
42
|
-
},
|
|
43
29
|
{
|
|
44
30
|
"name": ".footerPartName",
|
|
45
31
|
"description": "Custom part name for the footer cell.",
|
|
@@ -133,7 +119,7 @@
|
|
|
133
119
|
},
|
|
134
120
|
{
|
|
135
121
|
"name": ".width",
|
|
136
|
-
"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.",
|
|
122
|
+
"description": "Width of the cells for this column.\nSetting the property to `null` or `undefined` restores the default width.\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.",
|
|
137
123
|
"value": {
|
|
138
124
|
"kind": "expression"
|
|
139
125
|
}
|
|
@@ -156,7 +142,7 @@
|
|
|
156
142
|
},
|
|
157
143
|
{
|
|
158
144
|
"name": "vaadin-crud",
|
|
159
|
-
"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.4.0-
|
|
145
|
+
"description": "`<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha4/#/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.4.0-alpha4/#/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.4.0-alpha4/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha4/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha4/#/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.",
|
|
160
146
|
"extension": true,
|
|
161
147
|
"attributes": [
|
|
162
148
|
{
|
|
@@ -167,15 +153,15 @@
|
|
|
167
153
|
}
|
|
168
154
|
},
|
|
169
155
|
{
|
|
170
|
-
"name": "
|
|
171
|
-
"description": "
|
|
156
|
+
"name": "?editOnClick",
|
|
157
|
+
"description": "Enables user to click on row to edit it.\nNote: When enabled, auto-generated grid won't show the edit column.",
|
|
172
158
|
"value": {
|
|
173
159
|
"kind": "expression"
|
|
174
160
|
}
|
|
175
161
|
},
|
|
176
162
|
{
|
|
177
|
-
"name": "
|
|
178
|
-
"description": "
|
|
163
|
+
"name": ".editedItem",
|
|
164
|
+
"description": "The item being edited in the dialog.",
|
|
179
165
|
"value": {
|
|
180
166
|
"kind": "expression"
|
|
181
167
|
}
|
|
@@ -196,7 +182,7 @@
|
|
|
196
182
|
},
|
|
197
183
|
{
|
|
198
184
|
"name": ".exclude",
|
|
199
|
-
"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.4.0-
|
|
185
|
+
"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.4.0-alpha4/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
200
186
|
"value": {
|
|
201
187
|
"kind": "expression"
|
|
202
188
|
}
|
|
@@ -210,7 +196,7 @@
|
|
|
210
196
|
},
|
|
211
197
|
{
|
|
212
198
|
"name": ".include",
|
|
213
|
-
"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.4.0-
|
|
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/25.4.0-alpha4/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
214
200
|
"value": {
|
|
215
201
|
"kind": "expression"
|
|
216
202
|
}
|