@vaadin/crud 24.2.0-alpha3 → 24.2.0-alpha5
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 +13 -13
- package/src/vaadin-crud-dialog.js +92 -83
- package/src/vaadin-crud.js +3 -3
- package/theme/lumo/vaadin-crud-styles.js +4 -0
- package/theme/material/vaadin-crud-styles.js +9 -0
- package/web-types.json +24 -6
- package/web-types.lit.json +11 -4
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/crud",
|
|
3
|
-
"version": "24.2.0-
|
|
3
|
+
"version": "24.2.0-alpha5",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,20 +37,20 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
39
39
|
"@polymer/polymer": "^3.0.0",
|
|
40
|
-
"@vaadin/button": "24.2.0-
|
|
41
|
-
"@vaadin/component-base": "24.2.0-
|
|
42
|
-
"@vaadin/confirm-dialog": "24.2.0-
|
|
43
|
-
"@vaadin/dialog": "24.2.0-
|
|
44
|
-
"@vaadin/form-layout": "24.2.0-
|
|
45
|
-
"@vaadin/grid": "24.2.0-
|
|
46
|
-
"@vaadin/text-field": "24.2.0-
|
|
47
|
-
"@vaadin/vaadin-lumo-styles": "24.2.0-
|
|
48
|
-
"@vaadin/vaadin-material-styles": "24.2.0-
|
|
49
|
-
"@vaadin/vaadin-themable-mixin": "24.2.0-
|
|
40
|
+
"@vaadin/button": "24.2.0-alpha5",
|
|
41
|
+
"@vaadin/component-base": "24.2.0-alpha5",
|
|
42
|
+
"@vaadin/confirm-dialog": "24.2.0-alpha5",
|
|
43
|
+
"@vaadin/dialog": "24.2.0-alpha5",
|
|
44
|
+
"@vaadin/form-layout": "24.2.0-alpha5",
|
|
45
|
+
"@vaadin/grid": "24.2.0-alpha5",
|
|
46
|
+
"@vaadin/text-field": "24.2.0-alpha5",
|
|
47
|
+
"@vaadin/vaadin-lumo-styles": "24.2.0-alpha5",
|
|
48
|
+
"@vaadin/vaadin-material-styles": "24.2.0-alpha5",
|
|
49
|
+
"@vaadin/vaadin-themable-mixin": "24.2.0-alpha5"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
52
|
"@esm-bundle/chai": "^4.3.4",
|
|
53
|
-
"@vaadin/testing-helpers": "^0.4.
|
|
53
|
+
"@vaadin/testing-helpers": "^0.4.3",
|
|
54
54
|
"sinon": "^13.0.2"
|
|
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": "73db22a5e8993e3ce48d1e6540d30eff9cb5c257"
|
|
62
62
|
}
|
|
@@ -8,97 +8,91 @@
|
|
|
8
8
|
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
9
|
* license.
|
|
10
10
|
*/
|
|
11
|
-
import { html } from '@polymer/polymer/
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
:
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
:
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
:
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
let memoizedTemplate;
|
|
53
|
-
|
|
54
|
-
const footerTemplate = html`
|
|
55
|
-
<slot name="save-button"></slot>
|
|
56
|
-
<slot name="cancel-button"></slot>
|
|
57
|
-
<slot name="delete-button"></slot>
|
|
11
|
+
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
12
|
+
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
|
|
13
|
+
import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
|
|
14
|
+
import { DialogBaseMixin } from '@vaadin/dialog/src/vaadin-dialog-base-mixin.js';
|
|
15
|
+
import { dialogOverlay, resizableOverlay } from '@vaadin/dialog/src/vaadin-dialog-styles.js';
|
|
16
|
+
import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
|
|
17
|
+
import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
|
|
18
|
+
import { css, registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
19
|
+
import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
|
|
20
|
+
|
|
21
|
+
const crudDialogOverlay = css`
|
|
22
|
+
[part='overlay'] {
|
|
23
|
+
max-width: 54em;
|
|
24
|
+
min-width: 20em;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
[part='footer'] {
|
|
28
|
+
justify-content: flex-start;
|
|
29
|
+
flex-direction: row-reverse;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* Make buttons clickable */
|
|
33
|
+
[part='footer'] ::slotted(:not([disabled])) {
|
|
34
|
+
pointer-events: all;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
:host([fullscreen]) {
|
|
38
|
+
inset: 0;
|
|
39
|
+
padding: 0;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
:host([fullscreen]) [part='overlay'] {
|
|
43
|
+
height: 100vh;
|
|
44
|
+
width: 100vw;
|
|
45
|
+
border-radius: 0 !important;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
:host([fullscreen]) [part='content'] {
|
|
49
|
+
flex: 1;
|
|
50
|
+
}
|
|
58
51
|
`;
|
|
59
52
|
|
|
53
|
+
registerStyles('vaadin-crud-dialog-overlay', [overlayStyles, dialogOverlay, resizableOverlay, crudDialogOverlay], {
|
|
54
|
+
moduleId: 'vaadin-crud-dialog-overlay-styles',
|
|
55
|
+
});
|
|
56
|
+
|
|
60
57
|
/**
|
|
61
|
-
* An
|
|
62
|
-
*
|
|
58
|
+
* An element used internally by `<vaadin-crud>`. Not intended to be used separately.
|
|
59
|
+
*
|
|
60
|
+
* @extends HTMLElement
|
|
61
|
+
* @mixes DirMixin
|
|
62
|
+
* @mixes OverlayMixin
|
|
63
|
+
* @mixes ThemableMixin
|
|
63
64
|
* @private
|
|
64
65
|
*/
|
|
65
|
-
class CrudDialogOverlay extends
|
|
66
|
+
class CrudDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolymerElement))) {
|
|
66
67
|
static get is() {
|
|
67
68
|
return 'vaadin-crud-dialog-overlay';
|
|
68
69
|
}
|
|
69
70
|
|
|
70
71
|
static get template() {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
const footerPart = memoizedTemplate.content.querySelector('[part="footer"]');
|
|
88
|
-
footerPart.setAttribute('role', 'toolbar');
|
|
89
|
-
const footerSlot = footerPart.querySelector('slot');
|
|
90
|
-
footerPart.removeChild(footerSlot);
|
|
91
|
-
footerPart.appendChild(footerTemplate.content.cloneNode(true));
|
|
92
|
-
}
|
|
93
|
-
return memoizedTemplate;
|
|
72
|
+
return html`
|
|
73
|
+
<div part="backdrop" id="backdrop" hidden$="[[!withBackdrop]]"></div>
|
|
74
|
+
<div part="overlay" id="overlay" tabindex="0">
|
|
75
|
+
<section id="resizerContainer" class="resizer-container">
|
|
76
|
+
<header part="header"><slot name="header"></slot></header>
|
|
77
|
+
<div part="content" id="content">
|
|
78
|
+
<slot name="form"></slot>
|
|
79
|
+
</div>
|
|
80
|
+
<footer part="footer" role="toolbar">
|
|
81
|
+
<slot name="save-button"></slot>
|
|
82
|
+
<slot name="cancel-button"></slot>
|
|
83
|
+
<slot name="delete-button"></slot>
|
|
84
|
+
</footer>
|
|
85
|
+
</section>
|
|
86
|
+
</div>
|
|
87
|
+
`;
|
|
94
88
|
}
|
|
95
89
|
|
|
96
90
|
/**
|
|
97
91
|
* @protected
|
|
98
92
|
* @override
|
|
99
93
|
*/
|
|
100
|
-
|
|
101
|
-
super.
|
|
94
|
+
ready() {
|
|
95
|
+
super.ready();
|
|
102
96
|
|
|
103
97
|
// CRUD has header and footer but does not use renderers
|
|
104
98
|
this.setAttribute('has-header', '');
|
|
@@ -106,17 +100,29 @@ class CrudDialogOverlay extends DialogOverlay {
|
|
|
106
100
|
}
|
|
107
101
|
}
|
|
108
102
|
|
|
109
|
-
customElements.define(
|
|
103
|
+
customElements.define(CrudDialogOverlay.is, CrudDialogOverlay);
|
|
110
104
|
|
|
111
105
|
/**
|
|
112
|
-
* An
|
|
113
|
-
* Not intended to be used separately.
|
|
106
|
+
* An element used internally by `<vaadin-crud>`. Not intended to be used separately.
|
|
114
107
|
* @private
|
|
115
108
|
*/
|
|
116
|
-
class CrudDialog extends
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
109
|
+
class CrudDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(PolymerElement))) {
|
|
110
|
+
static get is() {
|
|
111
|
+
return 'vaadin-crud-dialog';
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
static get properties() {
|
|
115
|
+
return {
|
|
116
|
+
ariaLabel: {
|
|
117
|
+
type: String,
|
|
118
|
+
},
|
|
119
|
+
|
|
120
|
+
fullscreen: {
|
|
121
|
+
type: Boolean,
|
|
122
|
+
},
|
|
123
|
+
};
|
|
124
|
+
}
|
|
125
|
+
|
|
120
126
|
static get template() {
|
|
121
127
|
return html`
|
|
122
128
|
<style>
|
|
@@ -127,6 +133,8 @@ class CrudDialog extends Dialog {
|
|
|
127
133
|
|
|
128
134
|
<vaadin-crud-dialog-overlay
|
|
129
135
|
id="overlay"
|
|
136
|
+
opened="[[opened]]"
|
|
137
|
+
aria-label$="[[ariaLabel]]"
|
|
130
138
|
on-opened-changed="_onOverlayOpened"
|
|
131
139
|
on-mousedown="_bringOverlayToFront"
|
|
132
140
|
on-touchstart="_bringOverlayToFront"
|
|
@@ -134,10 +142,11 @@ class CrudDialog extends Dialog {
|
|
|
134
142
|
modeless="[[modeless]]"
|
|
135
143
|
with-backdrop="[[!modeless]]"
|
|
136
144
|
resizable$="[[resizable]]"
|
|
145
|
+
fullscreen$="[[fullscreen]]"
|
|
137
146
|
focus-trap
|
|
138
147
|
></vaadin-crud-dialog-overlay>
|
|
139
148
|
`;
|
|
140
149
|
}
|
|
141
150
|
}
|
|
142
151
|
|
|
143
|
-
customElements.define(
|
|
152
|
+
customElements.define(CrudDialog.is, CrudDialog);
|
package/src/vaadin-crud.js
CHANGED
|
@@ -338,7 +338,8 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
|
|
|
338
338
|
<vaadin-crud-dialog
|
|
339
339
|
id="dialog"
|
|
340
340
|
opened="[[__computeDialogOpened(editorOpened, _fullscreen, editorPosition)]]"
|
|
341
|
-
|
|
341
|
+
fullscreen="[[_fullscreen]]"
|
|
342
|
+
aria-label="[[__dialogAriaLabel]]"
|
|
342
343
|
no-close-on-outside-click="[[__isDirty]]"
|
|
343
344
|
no-close-on-esc="[[__isDirty]]"
|
|
344
345
|
theme$="[[_theme]]"
|
|
@@ -646,7 +647,7 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
|
|
|
646
647
|
},
|
|
647
648
|
|
|
648
649
|
/** @private */
|
|
649
|
-
|
|
650
|
+
__dialogAriaLabel: String,
|
|
650
651
|
|
|
651
652
|
/** @private */
|
|
652
653
|
__isDirty: Boolean,
|
|
@@ -851,7 +852,6 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
|
|
|
851
852
|
this.__ensureChildren();
|
|
852
853
|
|
|
853
854
|
this.toggleAttribute('fullscreen', fullscreen);
|
|
854
|
-
this.$.dialog.$.overlay.toggleAttribute('fullscreen', fullscreen);
|
|
855
855
|
}
|
|
856
856
|
}
|
|
857
857
|
|
|
@@ -2,6 +2,8 @@ import '@vaadin/vaadin-lumo-styles/typography.js';
|
|
|
2
2
|
import '@vaadin/vaadin-lumo-styles/color.js';
|
|
3
3
|
import '@vaadin/vaadin-lumo-styles/font-icons.js';
|
|
4
4
|
import '@vaadin/vaadin-lumo-styles/style.js';
|
|
5
|
+
import { dialogOverlay } from '@vaadin/dialog/theme/lumo/vaadin-dialog-styles.js';
|
|
6
|
+
import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
|
|
5
7
|
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
6
8
|
|
|
7
9
|
registerStyles(
|
|
@@ -133,6 +135,8 @@ registerStyles(
|
|
|
133
135
|
registerStyles(
|
|
134
136
|
'vaadin-crud-dialog-overlay',
|
|
135
137
|
[
|
|
138
|
+
overlay,
|
|
139
|
+
dialogOverlay,
|
|
136
140
|
editorStyles,
|
|
137
141
|
css`
|
|
138
142
|
[part='header'] ::slotted(h3) {
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import '@vaadin/vaadin-material-styles/typography.js';
|
|
2
2
|
import '@vaadin/vaadin-material-styles/color.js';
|
|
3
|
+
import { dialogOverlay } from '@vaadin/dialog/theme/material/vaadin-dialog-styles.js';
|
|
4
|
+
import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js';
|
|
3
5
|
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
4
6
|
|
|
5
7
|
registerStyles(
|
|
@@ -116,8 +118,15 @@ registerStyles(
|
|
|
116
118
|
registerStyles(
|
|
117
119
|
'vaadin-crud-dialog-overlay',
|
|
118
120
|
[
|
|
121
|
+
overlay,
|
|
122
|
+
dialogOverlay,
|
|
119
123
|
editorStyles,
|
|
120
124
|
css`
|
|
125
|
+
[part='overlay'] {
|
|
126
|
+
max-width: 54em;
|
|
127
|
+
min-width: 20em;
|
|
128
|
+
}
|
|
129
|
+
|
|
121
130
|
@keyframes material-overlay-dummy-animation {
|
|
122
131
|
0% {
|
|
123
132
|
opacity: 1;
|
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": "24.2.0-
|
|
4
|
+
"version": "24.2.0-alpha5",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -65,6 +65,15 @@
|
|
|
65
65
|
]
|
|
66
66
|
}
|
|
67
67
|
},
|
|
68
|
+
{
|
|
69
|
+
"name": "row-header",
|
|
70
|
+
"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.",
|
|
71
|
+
"value": {
|
|
72
|
+
"type": [
|
|
73
|
+
"boolean"
|
|
74
|
+
]
|
|
75
|
+
}
|
|
76
|
+
},
|
|
68
77
|
{
|
|
69
78
|
"name": "hidden",
|
|
70
79
|
"description": "When set to true, the cells for this column are hidden.",
|
|
@@ -192,6 +201,15 @@
|
|
|
192
201
|
]
|
|
193
202
|
}
|
|
194
203
|
},
|
|
204
|
+
{
|
|
205
|
+
"name": "rowHeader",
|
|
206
|
+
"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.",
|
|
207
|
+
"value": {
|
|
208
|
+
"type": [
|
|
209
|
+
"boolean"
|
|
210
|
+
]
|
|
211
|
+
}
|
|
212
|
+
},
|
|
195
213
|
{
|
|
196
214
|
"name": "hidden",
|
|
197
215
|
"description": "When set to true, the cells for this column are hidden.",
|
|
@@ -295,7 +313,7 @@
|
|
|
295
313
|
},
|
|
296
314
|
{
|
|
297
315
|
"name": "vaadin-crud",
|
|
298
|
-
"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/24.2.0-
|
|
316
|
+
"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/24.2.0-alpha5/#/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/24.2.0-alpha5/#/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/24.2.0-alpha5/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha5/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha5/#/elements/vaadin-form-layout)\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom. By default it contains the the `new` button\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.",
|
|
299
317
|
"attributes": [
|
|
300
318
|
{
|
|
301
319
|
"name": "editor-position",
|
|
@@ -350,7 +368,7 @@
|
|
|
350
368
|
},
|
|
351
369
|
{
|
|
352
370
|
"name": "include",
|
|
353
|
-
"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/24.2.0-
|
|
371
|
+
"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/24.2.0-alpha5/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
354
372
|
"value": {
|
|
355
373
|
"type": [
|
|
356
374
|
"string",
|
|
@@ -361,7 +379,7 @@
|
|
|
361
379
|
},
|
|
362
380
|
{
|
|
363
381
|
"name": "exclude",
|
|
364
|
-
"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/24.2.0-
|
|
382
|
+
"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/24.2.0-alpha5/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
365
383
|
"value": {
|
|
366
384
|
"type": [
|
|
367
385
|
"string",
|
|
@@ -488,7 +506,7 @@
|
|
|
488
506
|
},
|
|
489
507
|
{
|
|
490
508
|
"name": "include",
|
|
491
|
-
"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/24.2.0-
|
|
509
|
+
"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/24.2.0-alpha5/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
492
510
|
"value": {
|
|
493
511
|
"type": [
|
|
494
512
|
"string",
|
|
@@ -499,7 +517,7 @@
|
|
|
499
517
|
},
|
|
500
518
|
{
|
|
501
519
|
"name": "exclude",
|
|
502
|
-
"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/24.2.0-
|
|
520
|
+
"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/24.2.0-alpha5/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
503
521
|
"value": {
|
|
504
522
|
"type": [
|
|
505
523
|
"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": "24.2.0-
|
|
4
|
+
"version": "24.2.0-alpha5",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -54,6 +54,13 @@
|
|
|
54
54
|
"kind": "expression"
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
|
+
{
|
|
58
|
+
"name": "?rowHeader",
|
|
59
|
+
"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.",
|
|
60
|
+
"value": {
|
|
61
|
+
"kind": "expression"
|
|
62
|
+
}
|
|
63
|
+
},
|
|
57
64
|
{
|
|
58
65
|
"name": "?hidden",
|
|
59
66
|
"description": "When set to true, the cells for this column are hidden.",
|
|
@@ -121,7 +128,7 @@
|
|
|
121
128
|
},
|
|
122
129
|
{
|
|
123
130
|
"name": "vaadin-crud",
|
|
124
|
-
"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/24.2.0-
|
|
131
|
+
"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/24.2.0-alpha5/#/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/24.2.0-alpha5/#/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/24.2.0-alpha5/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha5/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha5/#/elements/vaadin-form-layout)\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom. By default it contains the the `new` button\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.",
|
|
125
132
|
"extension": true,
|
|
126
133
|
"attributes": [
|
|
127
134
|
{
|
|
@@ -196,14 +203,14 @@
|
|
|
196
203
|
},
|
|
197
204
|
{
|
|
198
205
|
"name": ".include",
|
|
199
|
-
"description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-
|
|
206
|
+
"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/24.2.0-alpha5/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
200
207
|
"value": {
|
|
201
208
|
"kind": "expression"
|
|
202
209
|
}
|
|
203
210
|
},
|
|
204
211
|
{
|
|
205
212
|
"name": ".exclude",
|
|
206
|
-
"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/24.2.0-
|
|
213
|
+
"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/24.2.0-alpha5/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
207
214
|
"value": {
|
|
208
215
|
"kind": "expression"
|
|
209
216
|
}
|