@vaadin/crud 25.1.0-alpha8 → 25.1.0-beta1
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 +58 -0
- package/package.json +16 -16
- package/web-types.json +161 -170
- package/web-types.lit.json +57 -57
package/custom-elements.json
CHANGED
|
@@ -2605,6 +2605,28 @@
|
|
|
2605
2605
|
"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)",
|
|
2606
2606
|
"attribute": "exclude"
|
|
2607
2607
|
},
|
|
2608
|
+
{
|
|
2609
|
+
"kind": "field",
|
|
2610
|
+
"name": "i18n",
|
|
2611
|
+
"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```",
|
|
2612
|
+
"return": {
|
|
2613
|
+
"type": {
|
|
2614
|
+
"text": "!CrudI18n"
|
|
2615
|
+
}
|
|
2616
|
+
},
|
|
2617
|
+
"parameters": [
|
|
2618
|
+
{
|
|
2619
|
+
"name": "value",
|
|
2620
|
+
"type": {
|
|
2621
|
+
"text": "Object"
|
|
2622
|
+
}
|
|
2623
|
+
}
|
|
2624
|
+
],
|
|
2625
|
+
"inheritedFrom": {
|
|
2626
|
+
"name": "I18nMixin",
|
|
2627
|
+
"package": "@vaadin/component-base/src/i18n-mixin.js"
|
|
2628
|
+
}
|
|
2629
|
+
},
|
|
2608
2630
|
{
|
|
2609
2631
|
"kind": "field",
|
|
2610
2632
|
"name": "include",
|
|
@@ -2702,6 +2724,13 @@
|
|
|
2702
2724
|
"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)",
|
|
2703
2725
|
"fieldName": "exclude"
|
|
2704
2726
|
},
|
|
2727
|
+
{
|
|
2728
|
+
"name": "i18n",
|
|
2729
|
+
"inheritedFrom": {
|
|
2730
|
+
"name": "I18nMixin",
|
|
2731
|
+
"package": "@vaadin/component-base/src/i18n-mixin.js"
|
|
2732
|
+
}
|
|
2733
|
+
},
|
|
2705
2734
|
{
|
|
2706
2735
|
"name": "include",
|
|
2707
2736
|
"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.",
|
|
@@ -2853,6 +2882,28 @@
|
|
|
2853
2882
|
"module": "src/vaadin-crud-mixin.js"
|
|
2854
2883
|
}
|
|
2855
2884
|
},
|
|
2885
|
+
{
|
|
2886
|
+
"kind": "field",
|
|
2887
|
+
"name": "i18n",
|
|
2888
|
+
"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```",
|
|
2889
|
+
"return": {
|
|
2890
|
+
"type": {
|
|
2891
|
+
"text": "!CrudI18n"
|
|
2892
|
+
}
|
|
2893
|
+
},
|
|
2894
|
+
"parameters": [
|
|
2895
|
+
{
|
|
2896
|
+
"name": "value",
|
|
2897
|
+
"type": {
|
|
2898
|
+
"text": "Object"
|
|
2899
|
+
}
|
|
2900
|
+
}
|
|
2901
|
+
],
|
|
2902
|
+
"inheritedFrom": {
|
|
2903
|
+
"name": "I18nMixin",
|
|
2904
|
+
"package": "@vaadin/component-base/src/i18n-mixin.js"
|
|
2905
|
+
}
|
|
2906
|
+
},
|
|
2856
2907
|
{
|
|
2857
2908
|
"kind": "field",
|
|
2858
2909
|
"name": "include",
|
|
@@ -3091,6 +3142,13 @@
|
|
|
3091
3142
|
"module": "src/vaadin-crud-mixin.js"
|
|
3092
3143
|
}
|
|
3093
3144
|
},
|
|
3145
|
+
{
|
|
3146
|
+
"name": "i18n",
|
|
3147
|
+
"inheritedFrom": {
|
|
3148
|
+
"name": "I18nMixin",
|
|
3149
|
+
"package": "@vaadin/component-base/src/i18n-mixin.js"
|
|
3150
|
+
}
|
|
3151
|
+
},
|
|
3094
3152
|
{
|
|
3095
3153
|
"name": "include",
|
|
3096
3154
|
"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.",
|
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-beta1",
|
|
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.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-beta1",
|
|
39
|
+
"@vaadin/button": "25.1.0-beta1",
|
|
40
|
+
"@vaadin/component-base": "25.1.0-beta1",
|
|
41
|
+
"@vaadin/confirm-dialog": "25.1.0-beta1",
|
|
42
|
+
"@vaadin/dialog": "25.1.0-beta1",
|
|
43
|
+
"@vaadin/form-layout": "25.1.0-beta1",
|
|
44
|
+
"@vaadin/grid": "25.1.0-beta1",
|
|
45
|
+
"@vaadin/overlay": "25.1.0-beta1",
|
|
46
|
+
"@vaadin/text-field": "25.1.0-beta1",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "25.1.0-beta1",
|
|
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-beta1",
|
|
52
|
+
"@vaadin/chai-plugins": "25.1.0-beta1",
|
|
53
|
+
"@vaadin/test-runner-commands": "25.1.0-beta1",
|
|
54
54
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
55
|
-
"@vaadin/vaadin-lumo-styles": "25.1.0-
|
|
55
|
+
"@vaadin/vaadin-lumo-styles": "25.1.0-beta1",
|
|
56
56
|
"sinon": "^21.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": "0ccf77c385fc6a92ac2a6344ce8804b94956226d"
|
|
65
65
|
}
|
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-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -60,19 +60,19 @@
|
|
|
60
60
|
"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```",
|
|
61
61
|
"attributes": [
|
|
62
62
|
{
|
|
63
|
-
"name": "
|
|
64
|
-
"description": "
|
|
63
|
+
"name": "aria-label",
|
|
64
|
+
"description": "The arial-label for the edit button",
|
|
65
65
|
"value": {
|
|
66
66
|
"type": [
|
|
67
|
-
"
|
|
67
|
+
"string",
|
|
68
68
|
"null",
|
|
69
69
|
"undefined"
|
|
70
70
|
]
|
|
71
71
|
}
|
|
72
72
|
},
|
|
73
73
|
{
|
|
74
|
-
"name": "
|
|
75
|
-
"description": "
|
|
74
|
+
"name": "auto-width",
|
|
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
78
|
"boolean"
|
|
@@ -80,51 +80,49 @@
|
|
|
80
80
|
}
|
|
81
81
|
},
|
|
82
82
|
{
|
|
83
|
-
"name": "
|
|
84
|
-
"description": "
|
|
83
|
+
"name": "flex-grow",
|
|
84
|
+
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
85
85
|
"value": {
|
|
86
86
|
"type": [
|
|
87
|
-
"
|
|
87
|
+
"number"
|
|
88
88
|
]
|
|
89
89
|
}
|
|
90
90
|
},
|
|
91
91
|
{
|
|
92
|
-
"name": "
|
|
93
|
-
"description": "
|
|
92
|
+
"name": "footer-part-name",
|
|
93
|
+
"description": "Custom part name for the footer cell.",
|
|
94
94
|
"value": {
|
|
95
95
|
"type": [
|
|
96
|
-
"
|
|
96
|
+
"string",
|
|
97
|
+
"null",
|
|
98
|
+
"undefined"
|
|
97
99
|
]
|
|
98
100
|
}
|
|
99
101
|
},
|
|
100
102
|
{
|
|
101
|
-
"name": "
|
|
102
|
-
"description": "When
|
|
103
|
+
"name": "frozen",
|
|
104
|
+
"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.",
|
|
103
105
|
"value": {
|
|
104
106
|
"type": [
|
|
105
|
-
"boolean"
|
|
106
|
-
"null",
|
|
107
|
-
"undefined"
|
|
107
|
+
"boolean"
|
|
108
108
|
]
|
|
109
109
|
}
|
|
110
110
|
},
|
|
111
111
|
{
|
|
112
|
-
"name": "
|
|
113
|
-
"description": "
|
|
112
|
+
"name": "frozen-to-end",
|
|
113
|
+
"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
114
|
"value": {
|
|
115
115
|
"type": [
|
|
116
|
-
"
|
|
117
|
-
"null",
|
|
118
|
-
"undefined"
|
|
116
|
+
"boolean"
|
|
119
117
|
]
|
|
120
118
|
}
|
|
121
119
|
},
|
|
122
120
|
{
|
|
123
|
-
"name": "
|
|
124
|
-
"description": "
|
|
121
|
+
"name": "header",
|
|
122
|
+
"description": "Text content to display in the header cell of the column.",
|
|
125
123
|
"value": {
|
|
126
124
|
"type": [
|
|
127
|
-
"
|
|
125
|
+
"string",
|
|
128
126
|
"null",
|
|
129
127
|
"undefined"
|
|
130
128
|
]
|
|
@@ -142,19 +140,19 @@
|
|
|
142
140
|
}
|
|
143
141
|
},
|
|
144
142
|
{
|
|
145
|
-
"name": "
|
|
146
|
-
"description": "
|
|
143
|
+
"name": "hidden",
|
|
144
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
147
145
|
"value": {
|
|
148
146
|
"type": [
|
|
149
|
-
"
|
|
147
|
+
"boolean",
|
|
150
148
|
"null",
|
|
151
149
|
"undefined"
|
|
152
150
|
]
|
|
153
151
|
}
|
|
154
152
|
},
|
|
155
153
|
{
|
|
156
|
-
"name": "
|
|
157
|
-
"description": "
|
|
154
|
+
"name": "path",
|
|
155
|
+
"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.",
|
|
158
156
|
"value": {
|
|
159
157
|
"type": [
|
|
160
158
|
"string",
|
|
@@ -164,37 +162,39 @@
|
|
|
164
162
|
}
|
|
165
163
|
},
|
|
166
164
|
{
|
|
167
|
-
"name": "
|
|
168
|
-
"description": "
|
|
165
|
+
"name": "resizable",
|
|
166
|
+
"description": "When set to true, the column is user-resizable.",
|
|
169
167
|
"value": {
|
|
170
168
|
"type": [
|
|
171
|
-
"
|
|
169
|
+
"boolean",
|
|
170
|
+
"null",
|
|
171
|
+
"undefined"
|
|
172
172
|
]
|
|
173
173
|
}
|
|
174
174
|
},
|
|
175
175
|
{
|
|
176
|
-
"name": "
|
|
177
|
-
"description": "
|
|
176
|
+
"name": "row-header",
|
|
177
|
+
"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
178
|
"value": {
|
|
179
179
|
"type": [
|
|
180
|
-
"
|
|
181
|
-
"null",
|
|
182
|
-
"undefined"
|
|
180
|
+
"boolean"
|
|
183
181
|
]
|
|
184
182
|
}
|
|
185
183
|
},
|
|
186
184
|
{
|
|
187
|
-
"name": "
|
|
188
|
-
"description": "
|
|
185
|
+
"name": "text-align",
|
|
186
|
+
"description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
|
|
189
187
|
"value": {
|
|
190
188
|
"type": [
|
|
191
|
-
"
|
|
189
|
+
"GridColumnTextAlign",
|
|
190
|
+
"null",
|
|
191
|
+
"undefined"
|
|
192
192
|
]
|
|
193
193
|
}
|
|
194
194
|
},
|
|
195
195
|
{
|
|
196
|
-
"name": "
|
|
197
|
-
"description": "The
|
|
196
|
+
"name": "theme",
|
|
197
|
+
"description": "The theme variants to apply to the component.",
|
|
198
198
|
"value": {
|
|
199
199
|
"type": [
|
|
200
200
|
"string",
|
|
@@ -204,8 +204,8 @@
|
|
|
204
204
|
}
|
|
205
205
|
},
|
|
206
206
|
{
|
|
207
|
-
"name": "
|
|
208
|
-
"description": "
|
|
207
|
+
"name": "width",
|
|
208
|
+
"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.",
|
|
209
209
|
"value": {
|
|
210
210
|
"type": [
|
|
211
211
|
"string",
|
|
@@ -218,37 +218,41 @@
|
|
|
218
218
|
"js": {
|
|
219
219
|
"properties": [
|
|
220
220
|
{
|
|
221
|
-
"name": "
|
|
222
|
-
"description": "
|
|
221
|
+
"name": "ariaLabel",
|
|
222
|
+
"description": "The arial-label for the edit button",
|
|
223
223
|
"value": {
|
|
224
224
|
"type": [
|
|
225
|
-
"
|
|
225
|
+
"string",
|
|
226
226
|
"null",
|
|
227
227
|
"undefined"
|
|
228
228
|
]
|
|
229
229
|
}
|
|
230
230
|
},
|
|
231
231
|
{
|
|
232
|
-
"name": "
|
|
233
|
-
"description": "
|
|
232
|
+
"name": "footerPartName",
|
|
233
|
+
"description": "Custom part name for the footer cell.",
|
|
234
234
|
"value": {
|
|
235
235
|
"type": [
|
|
236
|
-
"
|
|
236
|
+
"string",
|
|
237
|
+
"null",
|
|
238
|
+
"undefined"
|
|
237
239
|
]
|
|
238
240
|
}
|
|
239
241
|
},
|
|
240
242
|
{
|
|
241
|
-
"name": "
|
|
242
|
-
"description": "
|
|
243
|
+
"name": "footerRenderer",
|
|
244
|
+
"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.",
|
|
243
245
|
"value": {
|
|
244
246
|
"type": [
|
|
245
|
-
"
|
|
247
|
+
"GridHeaderFooterRenderer",
|
|
248
|
+
"null",
|
|
249
|
+
"undefined"
|
|
246
250
|
]
|
|
247
251
|
}
|
|
248
252
|
},
|
|
249
253
|
{
|
|
250
|
-
"name": "
|
|
251
|
-
"description": "When true, the
|
|
254
|
+
"name": "frozen",
|
|
255
|
+
"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.",
|
|
252
256
|
"value": {
|
|
253
257
|
"type": [
|
|
254
258
|
"boolean"
|
|
@@ -256,13 +260,11 @@
|
|
|
256
260
|
}
|
|
257
261
|
},
|
|
258
262
|
{
|
|
259
|
-
"name": "
|
|
260
|
-
"description": "When
|
|
263
|
+
"name": "frozenToEnd",
|
|
264
|
+
"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.",
|
|
261
265
|
"value": {
|
|
262
266
|
"type": [
|
|
263
|
-
"boolean"
|
|
264
|
-
"null",
|
|
265
|
-
"undefined"
|
|
267
|
+
"boolean"
|
|
266
268
|
]
|
|
267
269
|
}
|
|
268
270
|
},
|
|
@@ -278,96 +280,94 @@
|
|
|
278
280
|
}
|
|
279
281
|
},
|
|
280
282
|
{
|
|
281
|
-
"name": "
|
|
282
|
-
"description": "
|
|
283
|
+
"name": "headerPartName",
|
|
284
|
+
"description": "Custom part name for the header cell.",
|
|
283
285
|
"value": {
|
|
284
286
|
"type": [
|
|
285
|
-
"
|
|
287
|
+
"string",
|
|
286
288
|
"null",
|
|
287
289
|
"undefined"
|
|
288
290
|
]
|
|
289
291
|
}
|
|
290
292
|
},
|
|
291
293
|
{
|
|
292
|
-
"name": "
|
|
293
|
-
"description": "Custom
|
|
294
|
+
"name": "headerRenderer",
|
|
295
|
+
"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.",
|
|
294
296
|
"value": {
|
|
295
297
|
"type": [
|
|
296
|
-
"
|
|
298
|
+
"GridHeaderFooterRenderer",
|
|
297
299
|
"null",
|
|
298
300
|
"undefined"
|
|
299
301
|
]
|
|
300
302
|
}
|
|
301
303
|
},
|
|
302
304
|
{
|
|
303
|
-
"name": "
|
|
304
|
-
"description": "
|
|
305
|
+
"name": "hidden",
|
|
306
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
305
307
|
"value": {
|
|
306
308
|
"type": [
|
|
307
|
-
"
|
|
309
|
+
"boolean",
|
|
308
310
|
"null",
|
|
309
311
|
"undefined"
|
|
310
312
|
]
|
|
311
313
|
}
|
|
312
314
|
},
|
|
313
315
|
{
|
|
314
|
-
"name": "
|
|
315
|
-
"description": "
|
|
316
|
+
"name": "path",
|
|
317
|
+
"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.",
|
|
316
318
|
"value": {
|
|
317
319
|
"type": [
|
|
318
|
-
"
|
|
320
|
+
"string",
|
|
319
321
|
"null",
|
|
320
322
|
"undefined"
|
|
321
323
|
]
|
|
322
324
|
}
|
|
323
325
|
},
|
|
324
326
|
{
|
|
325
|
-
"name": "
|
|
326
|
-
"description": "Custom function for rendering the
|
|
327
|
+
"name": "renderer",
|
|
328
|
+
"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.",
|
|
327
329
|
"value": {
|
|
328
330
|
"type": [
|
|
329
|
-
"
|
|
331
|
+
"GridBodyRenderer",
|
|
330
332
|
"null",
|
|
331
333
|
"undefined"
|
|
332
334
|
]
|
|
333
335
|
}
|
|
334
336
|
},
|
|
335
337
|
{
|
|
336
|
-
"name": "
|
|
337
|
-
"description": "
|
|
338
|
+
"name": "resizable",
|
|
339
|
+
"description": "When set to true, the column is user-resizable.",
|
|
338
340
|
"value": {
|
|
339
341
|
"type": [
|
|
340
|
-
"
|
|
342
|
+
"boolean",
|
|
341
343
|
"null",
|
|
342
344
|
"undefined"
|
|
343
345
|
]
|
|
344
346
|
}
|
|
345
347
|
},
|
|
346
348
|
{
|
|
347
|
-
"name": "
|
|
348
|
-
"description": "
|
|
349
|
+
"name": "rowHeader",
|
|
350
|
+
"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.",
|
|
349
351
|
"value": {
|
|
350
352
|
"type": [
|
|
351
|
-
"
|
|
352
|
-
"null",
|
|
353
|
-
"undefined"
|
|
353
|
+
"boolean"
|
|
354
354
|
]
|
|
355
355
|
}
|
|
356
356
|
},
|
|
357
357
|
{
|
|
358
|
-
"name": "
|
|
359
|
-
"description": "
|
|
358
|
+
"name": "textAlign",
|
|
359
|
+
"description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
|
|
360
360
|
"value": {
|
|
361
361
|
"type": [
|
|
362
|
-
"
|
|
362
|
+
"GridColumnTextAlign",
|
|
363
363
|
"null",
|
|
364
364
|
"undefined"
|
|
365
365
|
]
|
|
366
366
|
}
|
|
367
367
|
},
|
|
368
368
|
{
|
|
369
|
-
"name": "
|
|
370
|
-
"description": "
|
|
369
|
+
"name": "width",
|
|
370
|
+
"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.",
|
|
371
371
|
"value": {
|
|
372
372
|
"type": [
|
|
373
373
|
"string",
|
|
@@ -382,60 +382,62 @@
|
|
|
382
382
|
},
|
|
383
383
|
{
|
|
384
384
|
"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-
|
|
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-beta1/#/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-beta1/#/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-beta1/#/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-beta1/#/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-beta1/#/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
386
|
"attributes": [
|
|
387
387
|
{
|
|
388
|
-
"name": "
|
|
389
|
-
"description": "
|
|
388
|
+
"name": "edit-on-click",
|
|
389
|
+
"description": "Enables user to click on row to edit it.\nNote: When enabled, auto-generated grid won't show the edit column.",
|
|
390
390
|
"value": {
|
|
391
391
|
"type": [
|
|
392
|
-
"
|
|
392
|
+
"boolean"
|
|
393
393
|
]
|
|
394
394
|
}
|
|
395
395
|
},
|
|
396
396
|
{
|
|
397
|
-
"name": "editor-
|
|
398
|
-
"description": "
|
|
397
|
+
"name": "editor-opened",
|
|
398
|
+
"description": "Reflects the opened status of the editor.",
|
|
399
399
|
"value": {
|
|
400
400
|
"type": [
|
|
401
|
-
"
|
|
401
|
+
"boolean",
|
|
402
|
+
"null",
|
|
403
|
+
"undefined"
|
|
402
404
|
]
|
|
403
405
|
}
|
|
404
406
|
},
|
|
405
407
|
{
|
|
406
|
-
"name": "
|
|
407
|
-
"description": "
|
|
408
|
+
"name": "editor-position",
|
|
409
|
+
"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)",
|
|
408
410
|
"value": {
|
|
409
411
|
"type": [
|
|
410
|
-
"
|
|
412
|
+
"CrudEditorPosition"
|
|
411
413
|
]
|
|
412
414
|
}
|
|
413
415
|
},
|
|
414
416
|
{
|
|
415
|
-
"name": "
|
|
416
|
-
"description": "
|
|
417
|
+
"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-beta1/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
417
419
|
"value": {
|
|
418
420
|
"type": [
|
|
419
|
-
"
|
|
421
|
+
"string",
|
|
420
422
|
"null",
|
|
421
423
|
"undefined"
|
|
422
424
|
]
|
|
423
425
|
}
|
|
424
426
|
},
|
|
425
427
|
{
|
|
426
|
-
"name": "
|
|
427
|
-
"description": "
|
|
428
|
+
"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-beta1/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
428
430
|
"value": {
|
|
429
431
|
"type": [
|
|
430
|
-
"
|
|
432
|
+
"string",
|
|
431
433
|
"null",
|
|
432
434
|
"undefined"
|
|
433
435
|
]
|
|
434
436
|
}
|
|
435
437
|
},
|
|
436
438
|
{
|
|
437
|
-
"name": "no-
|
|
438
|
-
"description": "
|
|
439
|
+
"name": "no-filter",
|
|
440
|
+
"description": "Disable filtering when grid is autoconfigured.",
|
|
439
441
|
"value": {
|
|
440
442
|
"type": [
|
|
441
443
|
"boolean",
|
|
@@ -445,30 +447,19 @@
|
|
|
445
447
|
}
|
|
446
448
|
},
|
|
447
449
|
{
|
|
448
|
-
"name": "
|
|
449
|
-
"description": "
|
|
450
|
-
"value": {
|
|
451
|
-
"type": [
|
|
452
|
-
"string",
|
|
453
|
-
"null",
|
|
454
|
-
"undefined"
|
|
455
|
-
]
|
|
456
|
-
}
|
|
457
|
-
},
|
|
458
|
-
{
|
|
459
|
-
"name": "exclude",
|
|
460
|
-
"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-alpha8/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
450
|
+
"name": "no-head",
|
|
451
|
+
"description": "Remove grid headers when it is autoconfigured.",
|
|
461
452
|
"value": {
|
|
462
453
|
"type": [
|
|
463
|
-
"
|
|
454
|
+
"boolean",
|
|
464
455
|
"null",
|
|
465
456
|
"undefined"
|
|
466
457
|
]
|
|
467
458
|
}
|
|
468
459
|
},
|
|
469
460
|
{
|
|
470
|
-
"name": "
|
|
471
|
-
"description": "
|
|
461
|
+
"name": "no-sort",
|
|
462
|
+
"description": "Disable sorting when grid is autoconfigured.",
|
|
472
463
|
"value": {
|
|
473
464
|
"type": [
|
|
474
465
|
"boolean",
|
|
@@ -503,119 +494,119 @@
|
|
|
503
494
|
"js": {
|
|
504
495
|
"properties": [
|
|
505
496
|
{
|
|
506
|
-
"name": "
|
|
507
|
-
"description": "
|
|
497
|
+
"name": "dataProvider",
|
|
498
|
+
"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",
|
|
508
499
|
"value": {
|
|
509
500
|
"type": [
|
|
510
|
-
"
|
|
501
|
+
"CrudDataProvider",
|
|
502
|
+
"undefined"
|
|
511
503
|
]
|
|
512
504
|
}
|
|
513
505
|
},
|
|
514
506
|
{
|
|
515
|
-
"name": "
|
|
516
|
-
"description": "
|
|
507
|
+
"name": "editedItem",
|
|
508
|
+
"description": "The item being edited in the dialog.",
|
|
517
509
|
"value": {
|
|
518
510
|
"type": [
|
|
519
|
-
"
|
|
520
|
-
"undefined"
|
|
511
|
+
"unknown"
|
|
521
512
|
]
|
|
522
513
|
}
|
|
523
514
|
},
|
|
524
515
|
{
|
|
525
|
-
"name": "
|
|
526
|
-
"description": "
|
|
516
|
+
"name": "editOnClick",
|
|
517
|
+
"description": "Enables user to click on row to edit it.\nNote: When enabled, auto-generated grid won't show the edit column.",
|
|
527
518
|
"value": {
|
|
528
519
|
"type": [
|
|
529
|
-
"
|
|
520
|
+
"boolean"
|
|
530
521
|
]
|
|
531
522
|
}
|
|
532
523
|
},
|
|
533
524
|
{
|
|
534
|
-
"name": "
|
|
535
|
-
"description": "
|
|
525
|
+
"name": "editorOpened",
|
|
526
|
+
"description": "Reflects the opened status of the editor.",
|
|
536
527
|
"value": {
|
|
537
528
|
"type": [
|
|
538
|
-
"
|
|
529
|
+
"boolean",
|
|
530
|
+
"null",
|
|
531
|
+
"undefined"
|
|
539
532
|
]
|
|
540
533
|
}
|
|
541
534
|
},
|
|
542
535
|
{
|
|
543
|
-
"name": "
|
|
544
|
-
"description": "
|
|
536
|
+
"name": "editorPosition",
|
|
537
|
+
"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)",
|
|
545
538
|
"value": {
|
|
546
539
|
"type": [
|
|
547
|
-
"
|
|
540
|
+
"CrudEditorPosition"
|
|
548
541
|
]
|
|
549
542
|
}
|
|
550
543
|
},
|
|
551
544
|
{
|
|
552
|
-
"name": "
|
|
553
|
-
"description": "
|
|
545
|
+
"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-beta1/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
554
547
|
"value": {
|
|
555
548
|
"type": [
|
|
556
|
-
"
|
|
549
|
+
"string",
|
|
550
|
+
"null",
|
|
557
551
|
"undefined"
|
|
558
552
|
]
|
|
559
553
|
}
|
|
560
554
|
},
|
|
561
555
|
{
|
|
562
|
-
"name": "
|
|
563
|
-
"description": "
|
|
556
|
+
"name": "i18n",
|
|
557
|
+
"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```",
|
|
564
558
|
"value": {
|
|
565
559
|
"type": [
|
|
566
|
-
"
|
|
567
|
-
"null",
|
|
568
|
-
"undefined"
|
|
560
|
+
"CrudI18n"
|
|
569
561
|
]
|
|
570
562
|
}
|
|
571
563
|
},
|
|
572
564
|
{
|
|
573
|
-
"name": "
|
|
574
|
-
"description": "
|
|
565
|
+
"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-beta1/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
575
567
|
"value": {
|
|
576
568
|
"type": [
|
|
577
|
-
"
|
|
569
|
+
"string",
|
|
578
570
|
"null",
|
|
579
571
|
"undefined"
|
|
580
572
|
]
|
|
581
573
|
}
|
|
582
574
|
},
|
|
583
575
|
{
|
|
584
|
-
"name": "
|
|
585
|
-
"description": "
|
|
576
|
+
"name": "items",
|
|
577
|
+
"description": "An array containing the items which will be stamped to the column template instances.",
|
|
586
578
|
"value": {
|
|
587
579
|
"type": [
|
|
588
|
-
"
|
|
589
|
-
"null",
|
|
580
|
+
"Array.<unknown>",
|
|
590
581
|
"undefined"
|
|
591
582
|
]
|
|
592
583
|
}
|
|
593
584
|
},
|
|
594
585
|
{
|
|
595
|
-
"name": "
|
|
596
|
-
"description": "
|
|
586
|
+
"name": "noFilter",
|
|
587
|
+
"description": "Disable filtering when grid is autoconfigured.",
|
|
597
588
|
"value": {
|
|
598
589
|
"type": [
|
|
599
|
-
"
|
|
590
|
+
"boolean",
|
|
600
591
|
"null",
|
|
601
592
|
"undefined"
|
|
602
593
|
]
|
|
603
594
|
}
|
|
604
595
|
},
|
|
605
596
|
{
|
|
606
|
-
"name": "
|
|
607
|
-
"description": "
|
|
597
|
+
"name": "noHead",
|
|
598
|
+
"description": "Remove grid headers when it is autoconfigured.",
|
|
608
599
|
"value": {
|
|
609
600
|
"type": [
|
|
610
|
-
"
|
|
601
|
+
"boolean",
|
|
611
602
|
"null",
|
|
612
603
|
"undefined"
|
|
613
604
|
]
|
|
614
605
|
}
|
|
615
606
|
},
|
|
616
607
|
{
|
|
617
|
-
"name": "
|
|
618
|
-
"description": "
|
|
608
|
+
"name": "noSort",
|
|
609
|
+
"description": "Disable sorting when grid is autoconfigured.",
|
|
619
610
|
"value": {
|
|
620
611
|
"type": [
|
|
621
612
|
"boolean",
|
|
@@ -650,24 +641,24 @@
|
|
|
650
641
|
"description": "Fired when user wants to edit an existing item. If the default is prevented, then\na new item is not assigned to the form, giving that responsibility to the app, though\ndialog is always opened."
|
|
651
642
|
},
|
|
652
643
|
{
|
|
653
|
-
"name": "
|
|
654
|
-
"description": "Fired when
|
|
644
|
+
"name": "edited-item-changed",
|
|
645
|
+
"description": "Fired when the `editedItem` property changes."
|
|
655
646
|
},
|
|
656
647
|
{
|
|
657
|
-
"name": "
|
|
658
|
-
"description": "Fired when
|
|
648
|
+
"name": "editor-opened-changed",
|
|
649
|
+
"description": "Fired when the `editorOpened` property changes."
|
|
659
650
|
},
|
|
660
651
|
{
|
|
661
652
|
"name": "items-changed",
|
|
662
653
|
"description": "Fired when the `items` property changes."
|
|
663
654
|
},
|
|
664
655
|
{
|
|
665
|
-
"name": "
|
|
666
|
-
"description": "Fired when
|
|
656
|
+
"name": "new",
|
|
657
|
+
"description": "Fired when user wants to create a new item."
|
|
667
658
|
},
|
|
668
659
|
{
|
|
669
|
-
"name": "
|
|
670
|
-
"description": "Fired when the
|
|
660
|
+
"name": "save",
|
|
661
|
+
"description": "Fired when user wants to save a new or an existing item. If the default is prevented, then\nno action is performed, items array is not modified nor dialog closed"
|
|
671
662
|
},
|
|
672
663
|
{
|
|
673
664
|
"name": "size-changed",
|
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-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -41,85 +41,85 @@
|
|
|
41
41
|
"extension": true,
|
|
42
42
|
"attributes": [
|
|
43
43
|
{
|
|
44
|
-
"name": "?
|
|
45
|
-
"description": "When
|
|
44
|
+
"name": "?frozen",
|
|
45
|
+
"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.",
|
|
46
46
|
"value": {
|
|
47
47
|
"kind": "expression"
|
|
48
48
|
}
|
|
49
49
|
},
|
|
50
50
|
{
|
|
51
|
-
"name": "?
|
|
52
|
-
"description": "When true, the column is frozen
|
|
51
|
+
"name": "?frozenToEnd",
|
|
52
|
+
"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.",
|
|
53
53
|
"value": {
|
|
54
54
|
"kind": "expression"
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
|
-
"name": "?
|
|
59
|
-
"description": "When
|
|
58
|
+
"name": "?hidden",
|
|
59
|
+
"description": "When set to true, the cells for this column are hidden.",
|
|
60
60
|
"value": {
|
|
61
61
|
"kind": "expression"
|
|
62
62
|
}
|
|
63
63
|
},
|
|
64
64
|
{
|
|
65
|
-
"name": "?
|
|
66
|
-
"description": "When true, the
|
|
65
|
+
"name": "?resizable",
|
|
66
|
+
"description": "When set to true, the column is user-resizable.",
|
|
67
67
|
"value": {
|
|
68
68
|
"kind": "expression"
|
|
69
69
|
}
|
|
70
70
|
},
|
|
71
71
|
{
|
|
72
|
-
"name": "?
|
|
73
|
-
"description": "When
|
|
72
|
+
"name": "?rowHeader",
|
|
73
|
+
"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.",
|
|
74
74
|
"value": {
|
|
75
75
|
"kind": "expression"
|
|
76
76
|
}
|
|
77
77
|
},
|
|
78
78
|
{
|
|
79
|
-
"name": ".
|
|
80
|
-
"description": "
|
|
79
|
+
"name": ".ariaLabel",
|
|
80
|
+
"description": "The arial-label for the edit button",
|
|
81
81
|
"value": {
|
|
82
82
|
"kind": "expression"
|
|
83
83
|
}
|
|
84
84
|
},
|
|
85
85
|
{
|
|
86
|
-
"name": ".
|
|
87
|
-
"description": "
|
|
86
|
+
"name": ".footerPartName",
|
|
87
|
+
"description": "Custom part name for the footer cell.",
|
|
88
88
|
"value": {
|
|
89
89
|
"kind": "expression"
|
|
90
90
|
}
|
|
91
91
|
},
|
|
92
92
|
{
|
|
93
|
-
"name": ".
|
|
94
|
-
"description": "Custom
|
|
93
|
+
"name": ".footerRenderer",
|
|
94
|
+
"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.",
|
|
95
95
|
"value": {
|
|
96
96
|
"kind": "expression"
|
|
97
97
|
}
|
|
98
98
|
},
|
|
99
99
|
{
|
|
100
|
-
"name": ".
|
|
101
|
-
"description": "
|
|
100
|
+
"name": ".header",
|
|
101
|
+
"description": "Text content to display in the header cell of the column.",
|
|
102
102
|
"value": {
|
|
103
103
|
"kind": "expression"
|
|
104
104
|
}
|
|
105
105
|
},
|
|
106
106
|
{
|
|
107
|
-
"name": ".
|
|
108
|
-
"description": "Custom
|
|
107
|
+
"name": ".headerPartName",
|
|
108
|
+
"description": "Custom part name for the header cell.",
|
|
109
109
|
"value": {
|
|
110
110
|
"kind": "expression"
|
|
111
111
|
}
|
|
112
112
|
},
|
|
113
113
|
{
|
|
114
|
-
"name": ".
|
|
115
|
-
"description": "Custom function for rendering the
|
|
114
|
+
"name": ".headerRenderer",
|
|
115
|
+
"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.",
|
|
116
116
|
"value": {
|
|
117
117
|
"kind": "expression"
|
|
118
118
|
}
|
|
119
119
|
},
|
|
120
120
|
{
|
|
121
|
-
"name": ".
|
|
122
|
-
"description": "
|
|
121
|
+
"name": ".path",
|
|
122
|
+
"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.",
|
|
123
123
|
"value": {
|
|
124
124
|
"kind": "expression"
|
|
125
125
|
}
|
|
@@ -132,15 +132,15 @@
|
|
|
132
132
|
}
|
|
133
133
|
},
|
|
134
134
|
{
|
|
135
|
-
"name": ".
|
|
136
|
-
"description": "
|
|
135
|
+
"name": ".textAlign",
|
|
136
|
+
"description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
|
|
137
137
|
"value": {
|
|
138
138
|
"kind": "expression"
|
|
139
139
|
}
|
|
140
140
|
},
|
|
141
141
|
{
|
|
142
|
-
"name": ".
|
|
143
|
-
"description": "
|
|
142
|
+
"name": ".width",
|
|
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.",
|
|
144
144
|
"value": {
|
|
145
145
|
"kind": "expression"
|
|
146
146
|
}
|
|
@@ -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-beta1/#/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-beta1/#/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-beta1/#/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-beta1/#/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-beta1/#/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
|
{
|
|
@@ -160,15 +160,15 @@
|
|
|
160
160
|
}
|
|
161
161
|
},
|
|
162
162
|
{
|
|
163
|
-
"name": "?
|
|
164
|
-
"description": "
|
|
163
|
+
"name": "?editorOpened",
|
|
164
|
+
"description": "Reflects the opened status of the editor.",
|
|
165
165
|
"value": {
|
|
166
166
|
"kind": "expression"
|
|
167
167
|
}
|
|
168
168
|
},
|
|
169
169
|
{
|
|
170
|
-
"name": "?
|
|
171
|
-
"description": "Disable
|
|
170
|
+
"name": "?noFilter",
|
|
171
|
+
"description": "Disable filtering when grid is autoconfigured.",
|
|
172
172
|
"value": {
|
|
173
173
|
"kind": "expression"
|
|
174
174
|
}
|
|
@@ -181,8 +181,8 @@
|
|
|
181
181
|
}
|
|
182
182
|
},
|
|
183
183
|
{
|
|
184
|
-
"name": "?
|
|
185
|
-
"description": "
|
|
184
|
+
"name": "?noSort",
|
|
185
|
+
"description": "Disable sorting when grid is autoconfigured.",
|
|
186
186
|
"value": {
|
|
187
187
|
"kind": "expression"
|
|
188
188
|
}
|
|
@@ -195,50 +195,50 @@
|
|
|
195
195
|
}
|
|
196
196
|
},
|
|
197
197
|
{
|
|
198
|
-
"name": ".
|
|
199
|
-
"description": "
|
|
198
|
+
"name": ".dataProvider",
|
|
199
|
+
"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",
|
|
200
200
|
"value": {
|
|
201
201
|
"kind": "expression"
|
|
202
202
|
}
|
|
203
203
|
},
|
|
204
204
|
{
|
|
205
|
-
"name": ".
|
|
206
|
-
"description": "
|
|
205
|
+
"name": ".editedItem",
|
|
206
|
+
"description": "The item being edited in the dialog.",
|
|
207
207
|
"value": {
|
|
208
208
|
"kind": "expression"
|
|
209
209
|
}
|
|
210
210
|
},
|
|
211
211
|
{
|
|
212
|
-
"name": ".
|
|
213
|
-
"description": "
|
|
212
|
+
"name": ".editorPosition",
|
|
213
|
+
"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)",
|
|
214
214
|
"value": {
|
|
215
215
|
"kind": "expression"
|
|
216
216
|
}
|
|
217
217
|
},
|
|
218
218
|
{
|
|
219
|
-
"name": ".
|
|
220
|
-
"description": "
|
|
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-beta1/#/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
|
}
|
|
224
224
|
},
|
|
225
225
|
{
|
|
226
|
-
"name": ".
|
|
227
|
-
"description": "
|
|
226
|
+
"name": ".i18n",
|
|
227
|
+
"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```",
|
|
228
228
|
"value": {
|
|
229
229
|
"kind": "expression"
|
|
230
230
|
}
|
|
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-beta1/#/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
|
}
|
|
238
238
|
},
|
|
239
239
|
{
|
|
240
|
-
"name": ".
|
|
241
|
-
"description": "
|
|
240
|
+
"name": ".items",
|
|
241
|
+
"description": "An array containing the items which will be stamped to the column template instances.",
|
|
242
242
|
"value": {
|
|
243
243
|
"kind": "expression"
|
|
244
244
|
}
|
|
@@ -265,15 +265,15 @@
|
|
|
265
265
|
}
|
|
266
266
|
},
|
|
267
267
|
{
|
|
268
|
-
"name": "@
|
|
269
|
-
"description": "Fired when
|
|
268
|
+
"name": "@edited-item-changed",
|
|
269
|
+
"description": "Fired when the `editedItem` property changes.",
|
|
270
270
|
"value": {
|
|
271
271
|
"kind": "expression"
|
|
272
272
|
}
|
|
273
273
|
},
|
|
274
274
|
{
|
|
275
|
-
"name": "@
|
|
276
|
-
"description": "Fired when
|
|
275
|
+
"name": "@editor-opened-changed",
|
|
276
|
+
"description": "Fired when the `editorOpened` property changes.",
|
|
277
277
|
"value": {
|
|
278
278
|
"kind": "expression"
|
|
279
279
|
}
|
|
@@ -286,15 +286,15 @@
|
|
|
286
286
|
}
|
|
287
287
|
},
|
|
288
288
|
{
|
|
289
|
-
"name": "@
|
|
290
|
-
"description": "Fired when
|
|
289
|
+
"name": "@new",
|
|
290
|
+
"description": "Fired when user wants to create a new item.",
|
|
291
291
|
"value": {
|
|
292
292
|
"kind": "expression"
|
|
293
293
|
}
|
|
294
294
|
},
|
|
295
295
|
{
|
|
296
|
-
"name": "@
|
|
297
|
-
"description": "Fired when the
|
|
296
|
+
"name": "@save",
|
|
297
|
+
"description": "Fired when user wants to save a new or an existing item. If the default is prevented, then\nno action is performed, items array is not modified nor dialog closed",
|
|
298
298
|
"value": {
|
|
299
299
|
"kind": "expression"
|
|
300
300
|
}
|