@vaadin/crud 25.0.0-alpha20 → 25.0.0-alpha21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +15 -15
- package/src/styles/vaadin-crud-base-styles.js +15 -9
- package/src/styles/vaadin-crud-dialog-overlay-base-styles.js +5 -5
- package/src/styles/vaadin-crud-edit-base-styles.js +1 -1
- package/src/vaadin-crud-edit-column.js +4 -4
- package/web-types.json +17 -15
- package/web-types.lit.json +11 -11
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/crud",
|
|
3
|
-
"version": "25.0.0-
|
|
3
|
+
"version": "25.0.0-alpha21",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -34,23 +34,23 @@
|
|
|
34
34
|
],
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
37
|
-
"@vaadin/a11y-base": "25.0.0-
|
|
38
|
-
"@vaadin/button": "25.0.0-
|
|
39
|
-
"@vaadin/component-base": "25.0.0-
|
|
40
|
-
"@vaadin/confirm-dialog": "25.0.0-
|
|
41
|
-
"@vaadin/dialog": "25.0.0-
|
|
42
|
-
"@vaadin/form-layout": "25.0.0-
|
|
43
|
-
"@vaadin/grid": "25.0.0-
|
|
44
|
-
"@vaadin/overlay": "25.0.0-
|
|
45
|
-
"@vaadin/text-field": "25.0.0-
|
|
46
|
-
"@vaadin/vaadin-themable-mixin": "25.0.0-
|
|
37
|
+
"@vaadin/a11y-base": "25.0.0-alpha21",
|
|
38
|
+
"@vaadin/button": "25.0.0-alpha21",
|
|
39
|
+
"@vaadin/component-base": "25.0.0-alpha21",
|
|
40
|
+
"@vaadin/confirm-dialog": "25.0.0-alpha21",
|
|
41
|
+
"@vaadin/dialog": "25.0.0-alpha21",
|
|
42
|
+
"@vaadin/form-layout": "25.0.0-alpha21",
|
|
43
|
+
"@vaadin/grid": "25.0.0-alpha21",
|
|
44
|
+
"@vaadin/overlay": "25.0.0-alpha21",
|
|
45
|
+
"@vaadin/text-field": "25.0.0-alpha21",
|
|
46
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha21",
|
|
47
47
|
"lit": "^3.0.0"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
|
-
"@vaadin/chai-plugins": "25.0.0-
|
|
51
|
-
"@vaadin/test-runner-commands": "25.0.0-
|
|
50
|
+
"@vaadin/chai-plugins": "25.0.0-alpha21",
|
|
51
|
+
"@vaadin/test-runner-commands": "25.0.0-alpha21",
|
|
52
52
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
53
|
-
"@vaadin/vaadin-lumo-styles": "25.0.0-
|
|
53
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha21",
|
|
54
54
|
"sinon": "^21.0.0"
|
|
55
55
|
},
|
|
56
56
|
"cvdlName": "vaadin-crud",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"web-types.json",
|
|
59
59
|
"web-types.lit.json"
|
|
60
60
|
],
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "8fb9e9710c01449edf623a1aaac4655cdc11a933"
|
|
62
62
|
}
|
|
@@ -19,7 +19,7 @@ export const crudStyles = css`
|
|
|
19
19
|
--vaadin-crud-editor-max-width: 40%;
|
|
20
20
|
border: var(--vaadin-crud-border-width, 1px) solid
|
|
21
21
|
var(--vaadin-crud-border-color, var(--vaadin-border-color-secondary));
|
|
22
|
-
border-radius: var(--vaadin-crud-border-radius, var(--vaadin-radius-
|
|
22
|
+
border-radius: var(--vaadin-crud-border-radius, var(--vaadin-radius-m));
|
|
23
23
|
height: 400px;
|
|
24
24
|
width: 100%;
|
|
25
25
|
background: var(--vaadin-crud-background, var(--vaadin-background-color));
|
|
@@ -92,7 +92,7 @@ export const crudStyles = css`
|
|
|
92
92
|
display: flex;
|
|
93
93
|
flex-shrink: 0;
|
|
94
94
|
justify-content: flex-end;
|
|
95
|
-
padding: var(--vaadin-crud-toolbar-padding, var(--vaadin-padding-
|
|
95
|
+
padding: var(--vaadin-crud-toolbar-padding, var(--vaadin-dialog-padding, var(--vaadin-padding-l)));
|
|
96
96
|
}
|
|
97
97
|
|
|
98
98
|
:host([no-toolbar]) [part='toolbar'] {
|
|
@@ -131,11 +131,11 @@ export const crudStyles = css`
|
|
|
131
131
|
}
|
|
132
132
|
|
|
133
133
|
[part='header'] {
|
|
134
|
-
color: var(--vaadin-crud-header-color, var(--vaadin-text-color));
|
|
135
|
-
font-size: var(--vaadin-crud-header-font-size, 1em);
|
|
136
|
-
font-weight: var(--vaadin-crud-header-font-weight, 600);
|
|
137
|
-
line-height: var(--vaadin-crud-header-line-height, inherit);
|
|
138
|
-
padding: var(--vaadin-crud-header-padding, var(--vaadin-padding-
|
|
134
|
+
color: var(--vaadin-crud-header-color, var(--vaadin-dialog-title-color, var(--vaadin-text-color)));
|
|
135
|
+
font-size: var(--vaadin-crud-header-font-size, var(--vaadin-dialog-title-font-size, 1em));
|
|
136
|
+
font-weight: var(--vaadin-crud-header-font-weight, var(--vaadin-dialog-title-font-weight, 600));
|
|
137
|
+
line-height: var(--vaadin-crud-header-line-height, var(--vaadin-dialog-title-line-height, inherit));
|
|
138
|
+
padding: var(--vaadin-crud-header-padding, var(--vaadin-dialog-padding, var(--vaadin-padding-l)));
|
|
139
139
|
}
|
|
140
140
|
|
|
141
141
|
::slotted([slot='header']) {
|
|
@@ -146,7 +146,8 @@ export const crudStyles = css`
|
|
|
146
146
|
}
|
|
147
147
|
|
|
148
148
|
::slotted([slot='form']) {
|
|
149
|
-
padding: var(--vaadin-crud-form-padding, var(--vaadin-padding-
|
|
149
|
+
padding: var(--vaadin-crud-form-padding, var(--vaadin-dialog-padding, var(--vaadin-padding-l)));
|
|
150
|
+
padding-top: 0;
|
|
150
151
|
}
|
|
151
152
|
|
|
152
153
|
[part='footer'] {
|
|
@@ -156,10 +157,15 @@ export const crudStyles = css`
|
|
|
156
157
|
display: flex;
|
|
157
158
|
flex: none;
|
|
158
159
|
gap: var(--vaadin-crud-footer-gap, var(--vaadin-gap-s));
|
|
159
|
-
padding: var(--vaadin-crud-footer-padding, var(--vaadin-padding-
|
|
160
|
+
padding: var(--vaadin-crud-footer-padding, var(--vaadin-dialog-padding, var(--vaadin-padding-l)));
|
|
160
161
|
}
|
|
161
162
|
|
|
162
163
|
::slotted([slot='delete-button']) {
|
|
163
164
|
margin-inline-start: auto;
|
|
164
165
|
}
|
|
166
|
+
|
|
167
|
+
:host([theme~='no-border']) {
|
|
168
|
+
border: 0;
|
|
169
|
+
border-radius: 0;
|
|
170
|
+
}
|
|
165
171
|
`;
|
|
@@ -14,11 +14,11 @@ import { dialogOverlayStyles } from '@vaadin/dialog/src/styles/vaadin-dialog-ove
|
|
|
14
14
|
|
|
15
15
|
const crudDialogOverlay = css`
|
|
16
16
|
[part='header'] {
|
|
17
|
-
color: var(--vaadin-
|
|
18
|
-
font-size: var(--vaadin-
|
|
19
|
-
font-weight: var(--vaadin-
|
|
20
|
-
line-height: var(--vaadin-
|
|
21
|
-
padding: var(--vaadin-crud-header-padding, var(--vaadin-padding-l));
|
|
17
|
+
color: var(--vaadin-dialog-title-color, var(--vaadin-text-color));
|
|
18
|
+
font-size: var(--vaadin-dialog-title-font-size, 1em);
|
|
19
|
+
font-weight: var(--vaadin-dialog-title-font-weight, 600);
|
|
20
|
+
line-height: var(--vaadin-dialog-title-line-height, inherit);
|
|
21
|
+
padding: var(--vaadin-crud-header-padding, var(--vaadin-dialog-padding, var(--vaadin-padding-l)));
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
::slotted([slot='header']) {
|
|
@@ -16,7 +16,7 @@ export const crudEditStyles = css`
|
|
|
16
16
|
background: currentColor;
|
|
17
17
|
display: block;
|
|
18
18
|
height: var(--vaadin-icon-size, 1lh);
|
|
19
|
-
mask
|
|
19
|
+
mask: var(--_vaadin-icon-pen) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
|
|
20
20
|
width: var(--vaadin-icon-size, 1lh);
|
|
21
21
|
}
|
|
22
22
|
|
|
@@ -39,12 +39,12 @@ class CrudEditColumn extends GridColumn {
|
|
|
39
39
|
static get properties() {
|
|
40
40
|
return {
|
|
41
41
|
/**
|
|
42
|
-
*
|
|
42
|
+
* Automatically sets the width of the column based on the column contents when this is set to `true`.
|
|
43
43
|
* @private
|
|
44
44
|
*/
|
|
45
|
-
|
|
46
|
-
type:
|
|
47
|
-
value:
|
|
45
|
+
autoWidth: {
|
|
46
|
+
type: Boolean,
|
|
47
|
+
value: true,
|
|
48
48
|
},
|
|
49
49
|
|
|
50
50
|
/**
|
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.0.0-
|
|
4
|
+
"version": "25.0.0-alpha21",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -333,33 +333,35 @@
|
|
|
333
333
|
}
|
|
334
334
|
},
|
|
335
335
|
{
|
|
336
|
-
"name": "
|
|
337
|
-
"description": "
|
|
336
|
+
"name": "width",
|
|
337
|
+
"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.",
|
|
338
338
|
"value": {
|
|
339
339
|
"type": [
|
|
340
|
-
"
|
|
340
|
+
"string",
|
|
341
341
|
"null",
|
|
342
342
|
"undefined"
|
|
343
343
|
]
|
|
344
344
|
}
|
|
345
345
|
},
|
|
346
346
|
{
|
|
347
|
-
"name": "
|
|
348
|
-
"description": "
|
|
347
|
+
"name": "renderer",
|
|
348
|
+
"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.",
|
|
349
349
|
"value": {
|
|
350
350
|
"type": [
|
|
351
|
-
"
|
|
351
|
+
"GridBodyRenderer",
|
|
352
352
|
"null",
|
|
353
353
|
"undefined"
|
|
354
354
|
]
|
|
355
355
|
}
|
|
356
356
|
},
|
|
357
357
|
{
|
|
358
|
-
"name": "
|
|
359
|
-
"description": "
|
|
358
|
+
"name": "path",
|
|
359
|
+
"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.",
|
|
360
360
|
"value": {
|
|
361
361
|
"type": [
|
|
362
|
-
"
|
|
362
|
+
"string",
|
|
363
|
+
"null",
|
|
364
|
+
"undefined"
|
|
363
365
|
]
|
|
364
366
|
}
|
|
365
367
|
},
|
|
@@ -380,7 +382,7 @@
|
|
|
380
382
|
},
|
|
381
383
|
{
|
|
382
384
|
"name": "vaadin-crud",
|
|
383
|
-
"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.0.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.0.0-alpha21/#/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.0.0-alpha21/#/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.0.0-alpha21/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha21/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha21/#/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.",
|
|
384
386
|
"attributes": [
|
|
385
387
|
{
|
|
386
388
|
"name": "i18n",
|
|
@@ -444,7 +446,7 @@
|
|
|
444
446
|
},
|
|
445
447
|
{
|
|
446
448
|
"name": "include",
|
|
447
|
-
"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.0.0-
|
|
449
|
+
"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.0.0-alpha21/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
448
450
|
"value": {
|
|
449
451
|
"type": [
|
|
450
452
|
"string",
|
|
@@ -455,7 +457,7 @@
|
|
|
455
457
|
},
|
|
456
458
|
{
|
|
457
459
|
"name": "exclude",
|
|
458
|
-
"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.0.0-
|
|
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.0.0-alpha21/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
459
461
|
"value": {
|
|
460
462
|
"type": [
|
|
461
463
|
"string",
|
|
@@ -591,7 +593,7 @@
|
|
|
591
593
|
},
|
|
592
594
|
{
|
|
593
595
|
"name": "include",
|
|
594
|
-
"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.0.0-
|
|
596
|
+
"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.0.0-alpha21/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
595
597
|
"value": {
|
|
596
598
|
"type": [
|
|
597
599
|
"string",
|
|
@@ -602,7 +604,7 @@
|
|
|
602
604
|
},
|
|
603
605
|
{
|
|
604
606
|
"name": "exclude",
|
|
605
|
-
"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.0.0-
|
|
607
|
+
"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.0.0-alpha21/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
606
608
|
"value": {
|
|
607
609
|
"type": [
|
|
608
610
|
"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.0.0-
|
|
4
|
+
"version": "25.0.0-alpha21",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -75,13 +75,6 @@
|
|
|
75
75
|
"kind": "expression"
|
|
76
76
|
}
|
|
77
77
|
},
|
|
78
|
-
{
|
|
79
|
-
"name": "?autoWidth",
|
|
80
|
-
"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.",
|
|
81
|
-
"value": {
|
|
82
|
-
"kind": "expression"
|
|
83
|
-
}
|
|
84
|
-
},
|
|
85
78
|
{
|
|
86
79
|
"name": ".header",
|
|
87
80
|
"description": "Text content to display in the header cell of the column.",
|
|
@@ -124,6 +117,13 @@
|
|
|
124
117
|
"kind": "expression"
|
|
125
118
|
}
|
|
126
119
|
},
|
|
120
|
+
{
|
|
121
|
+
"name": ".width",
|
|
122
|
+
"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.",
|
|
123
|
+
"value": {
|
|
124
|
+
"kind": "expression"
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
127
|
{
|
|
128
128
|
"name": ".renderer",
|
|
129
129
|
"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.",
|
|
@@ -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.0.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.0.0-alpha21/#/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.0.0-alpha21/#/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.0.0-alpha21/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha21/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha21/#/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
|
{
|
|
@@ -231,14 +231,14 @@
|
|
|
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.0.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.0.0-alpha21/#/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
240
|
"name": ".exclude",
|
|
241
|
-
"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.0.0-
|
|
241
|
+
"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.0.0-alpha21/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
242
242
|
"value": {
|
|
243
243
|
"kind": "expression"
|
|
244
244
|
}
|