@vaadin/crud 25.3.0-alpha7 → 25.3.0-alpha8
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 +49 -31
- package/package.json +16 -16
- package/src/vaadin-crud-dialog-overlay.js +1 -0
- package/src/vaadin-crud-dialog.js +1 -0
- package/src/vaadin-crud.js +1 -0
- package/web-types.json +10 -25
- package/web-types.lit.json +5 -5
package/custom-elements.json
CHANGED
|
@@ -270,7 +270,7 @@
|
|
|
270
270
|
"type": {
|
|
271
271
|
"text": "string"
|
|
272
272
|
},
|
|
273
|
-
"description": "Aligns the columns cell content horizontally
|
|
273
|
+
"description": "Aligns the columns cell content horizontally.",
|
|
274
274
|
"attribute": "text-align",
|
|
275
275
|
"inheritedFrom": {
|
|
276
276
|
"name": "ColumnBaseMixin",
|
|
@@ -475,7 +475,7 @@
|
|
|
475
475
|
"type": {
|
|
476
476
|
"text": "string"
|
|
477
477
|
},
|
|
478
|
-
"description": "Aligns the columns cell content horizontally
|
|
478
|
+
"description": "Aligns the columns cell content horizontally.",
|
|
479
479
|
"fieldName": "textAlign",
|
|
480
480
|
"inheritedFrom": {
|
|
481
481
|
"name": "ColumnBaseMixin",
|
|
@@ -557,6 +557,17 @@
|
|
|
557
557
|
"name": "Button",
|
|
558
558
|
"package": "@vaadin/button/src/vaadin-button.js"
|
|
559
559
|
}
|
|
560
|
+
},
|
|
561
|
+
{
|
|
562
|
+
"type": {
|
|
563
|
+
"text": "string"
|
|
564
|
+
},
|
|
565
|
+
"description": "The theme variants to apply to the component.",
|
|
566
|
+
"name": "theme",
|
|
567
|
+
"inheritedFrom": {
|
|
568
|
+
"name": "Button",
|
|
569
|
+
"package": "@vaadin/button/src/vaadin-button.js"
|
|
570
|
+
}
|
|
560
571
|
}
|
|
561
572
|
],
|
|
562
573
|
"events": []
|
|
@@ -1525,34 +1536,6 @@
|
|
|
1525
1536
|
"name": "size-changed"
|
|
1526
1537
|
}
|
|
1527
1538
|
],
|
|
1528
|
-
"mixins": [
|
|
1529
|
-
{
|
|
1530
|
-
"name": "CrudMixin",
|
|
1531
|
-
"module": "src/vaadin-crud-mixin.js"
|
|
1532
|
-
},
|
|
1533
|
-
{
|
|
1534
|
-
"name": "ElementMixin",
|
|
1535
|
-
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
1536
|
-
},
|
|
1537
|
-
{
|
|
1538
|
-
"name": "ThemableMixin",
|
|
1539
|
-
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
1540
|
-
},
|
|
1541
|
-
{
|
|
1542
|
-
"name": "PolylitMixin",
|
|
1543
|
-
"package": "@vaadin/component-base/src/polylit-mixin.js"
|
|
1544
|
-
},
|
|
1545
|
-
{
|
|
1546
|
-
"name": "LumoInjectionMixin",
|
|
1547
|
-
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
1548
|
-
}
|
|
1549
|
-
],
|
|
1550
|
-
"superclass": {
|
|
1551
|
-
"name": "LitElement",
|
|
1552
|
-
"package": "lit"
|
|
1553
|
-
},
|
|
1554
|
-
"tagName": "vaadin-crud",
|
|
1555
|
-
"customElement": true,
|
|
1556
1539
|
"attributes": [
|
|
1557
1540
|
{
|
|
1558
1541
|
"name": "data-provider",
|
|
@@ -1709,8 +1692,43 @@
|
|
|
1709
1692
|
"name": "CrudMixin",
|
|
1710
1693
|
"module": "src/vaadin-crud-mixin.js"
|
|
1711
1694
|
}
|
|
1695
|
+
},
|
|
1696
|
+
{
|
|
1697
|
+
"type": {
|
|
1698
|
+
"text": "string"
|
|
1699
|
+
},
|
|
1700
|
+
"description": "The theme variants to apply to the component.",
|
|
1701
|
+
"name": "theme"
|
|
1712
1702
|
}
|
|
1713
|
-
]
|
|
1703
|
+
],
|
|
1704
|
+
"mixins": [
|
|
1705
|
+
{
|
|
1706
|
+
"name": "CrudMixin",
|
|
1707
|
+
"module": "src/vaadin-crud-mixin.js"
|
|
1708
|
+
},
|
|
1709
|
+
{
|
|
1710
|
+
"name": "ElementMixin",
|
|
1711
|
+
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
1712
|
+
},
|
|
1713
|
+
{
|
|
1714
|
+
"name": "ThemableMixin",
|
|
1715
|
+
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
1716
|
+
},
|
|
1717
|
+
{
|
|
1718
|
+
"name": "PolylitMixin",
|
|
1719
|
+
"package": "@vaadin/component-base/src/polylit-mixin.js"
|
|
1720
|
+
},
|
|
1721
|
+
{
|
|
1722
|
+
"name": "LumoInjectionMixin",
|
|
1723
|
+
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
1724
|
+
}
|
|
1725
|
+
],
|
|
1726
|
+
"superclass": {
|
|
1727
|
+
"name": "LitElement",
|
|
1728
|
+
"package": "lit"
|
|
1729
|
+
},
|
|
1730
|
+
"tagName": "vaadin-crud",
|
|
1731
|
+
"customElement": true
|
|
1714
1732
|
}
|
|
1715
1733
|
],
|
|
1716
1734
|
"exports": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/crud",
|
|
3
|
-
"version": "25.3.0-
|
|
3
|
+
"version": "25.3.0-alpha8",
|
|
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.3.0-
|
|
39
|
-
"@vaadin/button": "25.3.0-
|
|
40
|
-
"@vaadin/component-base": "25.3.0-
|
|
41
|
-
"@vaadin/confirm-dialog": "25.3.0-
|
|
42
|
-
"@vaadin/dialog": "25.3.0-
|
|
43
|
-
"@vaadin/form-layout": "25.3.0-
|
|
44
|
-
"@vaadin/grid": "25.3.0-
|
|
45
|
-
"@vaadin/overlay": "25.3.0-
|
|
46
|
-
"@vaadin/text-field": "25.3.0-
|
|
47
|
-
"@vaadin/vaadin-themable-mixin": "25.3.0-
|
|
38
|
+
"@vaadin/a11y-base": "25.3.0-alpha8",
|
|
39
|
+
"@vaadin/button": "25.3.0-alpha8",
|
|
40
|
+
"@vaadin/component-base": "25.3.0-alpha8",
|
|
41
|
+
"@vaadin/confirm-dialog": "25.3.0-alpha8",
|
|
42
|
+
"@vaadin/dialog": "25.3.0-alpha8",
|
|
43
|
+
"@vaadin/form-layout": "25.3.0-alpha8",
|
|
44
|
+
"@vaadin/grid": "25.3.0-alpha8",
|
|
45
|
+
"@vaadin/overlay": "25.3.0-alpha8",
|
|
46
|
+
"@vaadin/text-field": "25.3.0-alpha8",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "25.3.0-alpha8",
|
|
48
48
|
"lit": "^3.0.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
|
-
"@vaadin/aura": "25.3.0-
|
|
52
|
-
"@vaadin/chai-plugins": "25.3.0-
|
|
53
|
-
"@vaadin/test-runner-commands": "25.3.0-
|
|
51
|
+
"@vaadin/aura": "25.3.0-alpha8",
|
|
52
|
+
"@vaadin/chai-plugins": "25.3.0-alpha8",
|
|
53
|
+
"@vaadin/test-runner-commands": "25.3.0-alpha8",
|
|
54
54
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
55
|
-
"@vaadin/vaadin-lumo-styles": "25.3.0-
|
|
55
|
+
"@vaadin/vaadin-lumo-styles": "25.3.0-alpha8",
|
|
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": "ccbb4aaffb63c745c6da0426b532d4d05e47af29"
|
|
65
65
|
}
|
|
@@ -20,6 +20,7 @@ import { crudDialogOverlayStyles } from './styles/vaadin-crud-dialog-overlay-bas
|
|
|
20
20
|
/**
|
|
21
21
|
* An element used internally by `<vaadin-crud>`. Not intended to be used separately.
|
|
22
22
|
*
|
|
23
|
+
* @attr {string} theme - The theme variants to apply to the component.
|
|
23
24
|
* @customElement vaadin-crud-dialog-overlay
|
|
24
25
|
* @extends HTMLElement
|
|
25
26
|
* @private
|
|
@@ -18,6 +18,7 @@ import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-p
|
|
|
18
18
|
/**
|
|
19
19
|
* An element used internally by `<vaadin-crud>`. Not intended to be used separately.
|
|
20
20
|
* @private
|
|
21
|
+
* @attr {string} theme - The theme variants to apply to the component.
|
|
21
22
|
*/
|
|
22
23
|
class CrudDialog extends DialogBaseMixin(ThemePropertyMixin(PolylitMixin(LitElement))) {
|
|
23
24
|
static get is() {
|
package/src/vaadin-crud.js
CHANGED
|
@@ -194,6 +194,7 @@ import { CrudMixin } from './vaadin-crud-mixin.js';
|
|
|
194
194
|
* @fires {CustomEvent} save - Fired when user wants to save a new or an existing item. If the default is prevented, no action is performed: the items array is not modified and the dialog is not closed.
|
|
195
195
|
* @fires {CustomEvent} cancel - Fired when user discards edition. If the default is prevented, no action is performed; the listener is responsible for closing the dialog and resetting the item and grid.
|
|
196
196
|
*
|
|
197
|
+
* @attr {string} theme - The theme variants to apply to the component.
|
|
197
198
|
* @customElement vaadin-crud
|
|
198
199
|
* @extends HTMLElement
|
|
199
200
|
*/
|
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.3.0-
|
|
4
|
+
"version": "25.3.0-alpha8",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -120,24 +120,13 @@
|
|
|
120
120
|
},
|
|
121
121
|
{
|
|
122
122
|
"name": "text-align",
|
|
123
|
-
"description": "Aligns the columns cell content horizontally
|
|
123
|
+
"description": "Aligns the columns cell content horizontally.",
|
|
124
124
|
"value": {
|
|
125
125
|
"type": [
|
|
126
126
|
"string"
|
|
127
127
|
]
|
|
128
128
|
}
|
|
129
129
|
},
|
|
130
|
-
{
|
|
131
|
-
"name": "theme",
|
|
132
|
-
"description": "The theme variants to apply to the component.",
|
|
133
|
-
"value": {
|
|
134
|
-
"type": [
|
|
135
|
-
"string",
|
|
136
|
-
"null",
|
|
137
|
-
"undefined"
|
|
138
|
-
]
|
|
139
|
-
}
|
|
140
|
-
},
|
|
141
130
|
{
|
|
142
131
|
"name": "width",
|
|
143
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.",
|
|
@@ -293,7 +282,7 @@
|
|
|
293
282
|
},
|
|
294
283
|
{
|
|
295
284
|
"name": "textAlign",
|
|
296
|
-
"description": "Aligns the columns cell content horizontally
|
|
285
|
+
"description": "Aligns the columns cell content horizontally.",
|
|
297
286
|
"value": {
|
|
298
287
|
"type": [
|
|
299
288
|
"string"
|
|
@@ -331,9 +320,7 @@
|
|
|
331
320
|
"description": "The theme variants to apply to the component.",
|
|
332
321
|
"value": {
|
|
333
322
|
"type": [
|
|
334
|
-
"string"
|
|
335
|
-
"null",
|
|
336
|
-
"undefined"
|
|
323
|
+
"string"
|
|
337
324
|
]
|
|
338
325
|
}
|
|
339
326
|
}
|
|
@@ -355,7 +342,7 @@
|
|
|
355
342
|
},
|
|
356
343
|
{
|
|
357
344
|
"name": "vaadin-crud",
|
|
358
|
-
"description": "`<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-
|
|
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.3.0-alpha8/#/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.3.0-alpha8/#/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.3.0-alpha8/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha8/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha8/#/elements/vaadin-form-layout)\n\n### Styling\n\nThe following shadow DOM parts are available for styling when the editor is rendered next to, or below, the grid:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom of the grid. By default, it contains the `new` button\n`editor` | The editor container\n`scroller` | The wrapper for the header and the form\n`header` | The header of the editor\n`footer` | The footer of the editor\n\nThe following shadow DOM parts are available for styling when the editor renders as a dialog:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom of the grid. By default, it contains the `new` button\n`overlay` | The dialog overlay\n`backdrop` | The dialog backdrop\n`header` | The header of the dialog\n`footer` | The footer of the dialog\n`content` | The wrapper for the form\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------|\n| `--vaadin-crud-background` |\n| `--vaadin-crud-border-color` |\n| `--vaadin-crud-border-radius` |\n| `--vaadin-crud-border-width` |\n| `--vaadin-crud-editor-max-height` |\n| `--vaadin-crud-editor-max-width` |\n| `--vaadin-crud-footer-background` |\n| `--vaadin-crud-footer-gap` |\n| `--vaadin-crud-footer-padding` |\n| `--vaadin-crud-form-padding` |\n| `--vaadin-crud-header-color` |\n| `--vaadin-crud-header-font-size` |\n| `--vaadin-crud-header-font-weight` |\n| `--vaadin-crud-header-line-height` |\n| `--vaadin-crud-header-padding` |\n| `--vaadin-crud-toolbar-background` |\n| `--vaadin-crud-toolbar-padding` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
359
346
|
"attributes": [
|
|
360
347
|
{
|
|
361
348
|
"name": "edit-on-click",
|
|
@@ -386,7 +373,7 @@
|
|
|
386
373
|
},
|
|
387
374
|
{
|
|
388
375
|
"name": "exclude",
|
|
389
|
-
"description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-
|
|
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.3.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)",
|
|
390
377
|
"value": {
|
|
391
378
|
"type": [
|
|
392
379
|
"string"
|
|
@@ -395,7 +382,7 @@
|
|
|
395
382
|
},
|
|
396
383
|
{
|
|
397
384
|
"name": "include",
|
|
398
|
-
"description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-
|
|
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.3.0-alpha8/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
399
386
|
"value": {
|
|
400
387
|
"type": [
|
|
401
388
|
"string"
|
|
@@ -443,9 +430,7 @@
|
|
|
443
430
|
"description": "The theme variants to apply to the component.",
|
|
444
431
|
"value": {
|
|
445
432
|
"type": [
|
|
446
|
-
"string"
|
|
447
|
-
"null",
|
|
448
|
-
"undefined"
|
|
433
|
+
"string"
|
|
449
434
|
]
|
|
450
435
|
}
|
|
451
436
|
}
|
|
@@ -500,7 +485,7 @@
|
|
|
500
485
|
},
|
|
501
486
|
{
|
|
502
487
|
"name": "exclude",
|
|
503
|
-
"description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-
|
|
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.3.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)",
|
|
504
489
|
"value": {
|
|
505
490
|
"type": [
|
|
506
491
|
"string"
|
|
@@ -518,7 +503,7 @@
|
|
|
518
503
|
},
|
|
519
504
|
{
|
|
520
505
|
"name": "include",
|
|
521
|
-
"description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-
|
|
506
|
+
"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.3.0-alpha8/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
522
507
|
"value": {
|
|
523
508
|
"type": [
|
|
524
509
|
"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.3.0-
|
|
4
|
+
"version": "25.3.0-alpha8",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -126,7 +126,7 @@
|
|
|
126
126
|
},
|
|
127
127
|
{
|
|
128
128
|
"name": ".textAlign",
|
|
129
|
-
"description": "Aligns the columns cell content horizontally
|
|
129
|
+
"description": "Aligns the columns cell content horizontally.",
|
|
130
130
|
"value": {
|
|
131
131
|
"kind": "expression"
|
|
132
132
|
}
|
|
@@ -156,7 +156,7 @@
|
|
|
156
156
|
},
|
|
157
157
|
{
|
|
158
158
|
"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.3.0-
|
|
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.3.0-alpha8/#/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.3.0-alpha8/#/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.3.0-alpha8/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha8/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha8/#/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
160
|
"extension": true,
|
|
161
161
|
"attributes": [
|
|
162
162
|
{
|
|
@@ -196,7 +196,7 @@
|
|
|
196
196
|
},
|
|
197
197
|
{
|
|
198
198
|
"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.3.0-
|
|
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.3.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)",
|
|
200
200
|
"value": {
|
|
201
201
|
"kind": "expression"
|
|
202
202
|
}
|
|
@@ -210,7 +210,7 @@
|
|
|
210
210
|
},
|
|
211
211
|
{
|
|
212
212
|
"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.3.0-
|
|
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.3.0-alpha8/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
214
214
|
"value": {
|
|
215
215
|
"kind": "expression"
|
|
216
216
|
}
|