@vaadin/crud 24.2.0-alpha4 → 24.2.0-alpha6
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-controllers.d.ts +32 -0
- package/src/vaadin-crud-controllers.js +114 -0
- package/src/vaadin-crud-dialog.js +92 -83
- package/src/vaadin-crud.js +6 -81
- 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-alpha6",
|
|
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-alpha6",
|
|
41
|
+
"@vaadin/component-base": "24.2.0-alpha6",
|
|
42
|
+
"@vaadin/confirm-dialog": "24.2.0-alpha6",
|
|
43
|
+
"@vaadin/dialog": "24.2.0-alpha6",
|
|
44
|
+
"@vaadin/form-layout": "24.2.0-alpha6",
|
|
45
|
+
"@vaadin/grid": "24.2.0-alpha6",
|
|
46
|
+
"@vaadin/text-field": "24.2.0-alpha6",
|
|
47
|
+
"@vaadin/vaadin-lumo-styles": "24.2.0-alpha6",
|
|
48
|
+
"@vaadin/vaadin-material-styles": "24.2.0-alpha6",
|
|
49
|
+
"@vaadin/vaadin-themable-mixin": "24.2.0-alpha6"
|
|
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": "3ef6e6cd66919b3ef7637e42916e4c54656beb51"
|
|
62
62
|
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2000 - 2023 Vaadin Ltd.
|
|
4
|
+
*
|
|
5
|
+
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
|
+
*
|
|
7
|
+
*
|
|
8
|
+
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
|
+
* license.
|
|
10
|
+
*/
|
|
11
|
+
import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* A controller for initializing slotted button.
|
|
15
|
+
*/
|
|
16
|
+
export class ButtonSlotController extends SlotController {
|
|
17
|
+
constructor(host: HTMLElement);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* A controller for initializing slotted form.
|
|
22
|
+
*/
|
|
23
|
+
export class FormSlotController extends SlotController {
|
|
24
|
+
constructor(host: HTMLElement);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* A controller for initializing slotted grid.
|
|
29
|
+
*/
|
|
30
|
+
export class GridSlotController extends SlotController {
|
|
31
|
+
constructor(host: HTMLElement);
|
|
32
|
+
}
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2000 - 2023 Vaadin Ltd.
|
|
4
|
+
*
|
|
5
|
+
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
|
+
*
|
|
7
|
+
*
|
|
8
|
+
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
|
+
* license.
|
|
10
|
+
*/
|
|
11
|
+
import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* A controller for initializing slotted button.
|
|
15
|
+
* @protected
|
|
16
|
+
*/
|
|
17
|
+
export class ButtonSlotController extends SlotController {
|
|
18
|
+
constructor(host, type, theme) {
|
|
19
|
+
super(host, `${type}-button`, 'vaadin-button');
|
|
20
|
+
|
|
21
|
+
this.type = type;
|
|
22
|
+
this.theme = theme;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* Override method inherited from `SlotController`
|
|
27
|
+
* to mark custom slotted button as the default.
|
|
28
|
+
*
|
|
29
|
+
* @param {Node} node
|
|
30
|
+
* @protected
|
|
31
|
+
* @override
|
|
32
|
+
*/
|
|
33
|
+
initNode(node) {
|
|
34
|
+
// Needed by Flow counterpart to apply i18n to custom button
|
|
35
|
+
if (node._isDefault) {
|
|
36
|
+
this.defaultNode = node;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
if (node === this.defaultNode) {
|
|
40
|
+
node.setAttribute('theme', this.theme);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
const { host, type } = this;
|
|
44
|
+
const property = `_${type}Button`;
|
|
45
|
+
const listener = `__${type}`;
|
|
46
|
+
|
|
47
|
+
// TODO: restore default button when a corresponding slotted button is removed.
|
|
48
|
+
// This would require us to detect where to insert a button after teleporting it,
|
|
49
|
+
// which happens after opening a dialog and closing it (default editor position).
|
|
50
|
+
if (host[property] && host[property] !== node) {
|
|
51
|
+
host[property].remove();
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
node.addEventListener('click', host[listener]);
|
|
55
|
+
host[property] = node;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* A controller for initializing slotted form.
|
|
61
|
+
* @protected
|
|
62
|
+
*/
|
|
63
|
+
export class FormSlotController extends SlotController {
|
|
64
|
+
constructor(host) {
|
|
65
|
+
super(host, 'form', 'vaadin-crud-form');
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/**
|
|
69
|
+
* Override method inherited from `SlotController`
|
|
70
|
+
* to move slotted form to the overlay if needed.
|
|
71
|
+
*
|
|
72
|
+
* @param {Node} node
|
|
73
|
+
* @protected
|
|
74
|
+
* @override
|
|
75
|
+
*/
|
|
76
|
+
initNode(node) {
|
|
77
|
+
this.host._form = node;
|
|
78
|
+
|
|
79
|
+
if (this.host.editorOpened) {
|
|
80
|
+
this.host.__ensureChildren();
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* A controller for initializing slotted grid.
|
|
87
|
+
* @protected
|
|
88
|
+
*/
|
|
89
|
+
export class GridSlotController extends SlotController {
|
|
90
|
+
constructor(host) {
|
|
91
|
+
super(host, 'grid', 'vaadin-crud-grid');
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/**
|
|
95
|
+
* Override method inherited from `SlotController`
|
|
96
|
+
* to initialize `active-item-changed` listener.
|
|
97
|
+
*
|
|
98
|
+
* @param {Node} node
|
|
99
|
+
* @protected
|
|
100
|
+
* @override
|
|
101
|
+
*/
|
|
102
|
+
initNode(node) {
|
|
103
|
+
const { host } = this;
|
|
104
|
+
|
|
105
|
+
// Wait for all the properties e.g. `noFilter` and `noSort`
|
|
106
|
+
// to be set, to ensure columns are configured correctly.
|
|
107
|
+
queueMicrotask(() => {
|
|
108
|
+
// Force to remove listener on previous grid first
|
|
109
|
+
host.__editOnClickChanged(false, host._grid);
|
|
110
|
+
host._grid = node;
|
|
111
|
+
host.__editOnClickChanged(host.editOnClick, host._grid);
|
|
112
|
+
});
|
|
113
|
+
}
|
|
114
|
+
}
|
|
@@ -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
|
@@ -14,7 +14,6 @@ import '@vaadin/confirm-dialog/src/vaadin-confirm-dialog.js';
|
|
|
14
14
|
import './vaadin-crud-dialog.js';
|
|
15
15
|
import './vaadin-crud-grid.js';
|
|
16
16
|
import './vaadin-crud-form.js';
|
|
17
|
-
import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
|
|
18
17
|
import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
|
|
19
18
|
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
20
19
|
import { FocusRestorationController } from '@vaadin/a11y-base/src/focus-restoration-controller.js';
|
|
@@ -23,54 +22,9 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
|
23
22
|
import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
|
|
24
23
|
import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
|
|
25
24
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
25
|
+
import { ButtonSlotController, FormSlotController, GridSlotController } from './vaadin-crud-controllers.js';
|
|
26
26
|
import { getProperty, setProperty } from './vaadin-crud-helpers.js';
|
|
27
27
|
|
|
28
|
-
/**
|
|
29
|
-
* A controller for initializing slotted button.
|
|
30
|
-
* @private
|
|
31
|
-
*/
|
|
32
|
-
class ButtonSlotController extends SlotController {
|
|
33
|
-
constructor(host, type, theme) {
|
|
34
|
-
super(host, `${type}-button`, 'vaadin-button');
|
|
35
|
-
|
|
36
|
-
this.type = type;
|
|
37
|
-
this.theme = theme;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
/**
|
|
41
|
-
* Override method inherited from `SlotController`
|
|
42
|
-
* to mark custom slotted button as the default.
|
|
43
|
-
*
|
|
44
|
-
* @param {Node} node
|
|
45
|
-
* @protected
|
|
46
|
-
* @override
|
|
47
|
-
*/
|
|
48
|
-
initNode(node) {
|
|
49
|
-
// Needed by Flow counterpart to apply i18n to custom button
|
|
50
|
-
if (node._isDefault) {
|
|
51
|
-
this.defaultNode = node;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
if (node === this.defaultNode) {
|
|
55
|
-
node.setAttribute('theme', this.theme);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
const { host, type } = this;
|
|
59
|
-
const property = `_${type}Button`;
|
|
60
|
-
const listener = `__${type}`;
|
|
61
|
-
|
|
62
|
-
// TODO: restore default button when a corresponding slotted button is removed.
|
|
63
|
-
// This would require us to detect where to insert a button after teleporting it,
|
|
64
|
-
// which happens after opening a dialog and closing it (default editor position).
|
|
65
|
-
if (host[property] && host[property] !== node) {
|
|
66
|
-
host[property].remove();
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
node.addEventListener('click', host[listener]);
|
|
70
|
-
host[property] = node;
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
|
|
74
28
|
/**
|
|
75
29
|
* `<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.
|
|
76
30
|
*
|
|
@@ -338,7 +292,8 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
|
|
|
338
292
|
<vaadin-crud-dialog
|
|
339
293
|
id="dialog"
|
|
340
294
|
opened="[[__computeDialogOpened(editorOpened, _fullscreen, editorPosition)]]"
|
|
341
|
-
|
|
295
|
+
fullscreen="[[_fullscreen]]"
|
|
296
|
+
aria-label="[[__dialogAriaLabel]]"
|
|
342
297
|
no-close-on-outside-click="[[__isDirty]]"
|
|
343
298
|
no-close-on-esc="[[__isDirty]]"
|
|
344
299
|
theme$="[[_theme]]"
|
|
@@ -646,7 +601,7 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
|
|
|
646
601
|
},
|
|
647
602
|
|
|
648
603
|
/** @private */
|
|
649
|
-
|
|
604
|
+
__dialogAriaLabel: String,
|
|
650
605
|
|
|
651
606
|
/** @private */
|
|
652
607
|
__isDirty: Boolean,
|
|
@@ -710,10 +665,6 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
|
|
|
710
665
|
this._deleteButtonController = new ButtonSlotController(this, 'delete', 'tertiary error');
|
|
711
666
|
|
|
712
667
|
this.__focusRestorationController = new FocusRestorationController();
|
|
713
|
-
|
|
714
|
-
this._observer = new FlattenedNodesObserver(this, (info) => {
|
|
715
|
-
this.__onDomChange(info.addedNodes);
|
|
716
|
-
});
|
|
717
668
|
}
|
|
718
669
|
|
|
719
670
|
/** @protected */
|
|
@@ -747,10 +698,10 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
|
|
|
747
698
|
});
|
|
748
699
|
this.addController(this._headerController);
|
|
749
700
|
|
|
750
|
-
this._gridController = new
|
|
701
|
+
this._gridController = new GridSlotController(this);
|
|
751
702
|
this.addController(this._gridController);
|
|
752
703
|
|
|
753
|
-
this.addController(new
|
|
704
|
+
this.addController(new FormSlotController(this));
|
|
754
705
|
|
|
755
706
|
this.addController(this._newButtonController);
|
|
756
707
|
|
|
@@ -851,7 +802,6 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
|
|
|
851
802
|
this.__ensureChildren();
|
|
852
803
|
|
|
853
804
|
this.toggleAttribute('fullscreen', fullscreen);
|
|
854
|
-
this.$.dialog.$.overlay.toggleAttribute('fullscreen', fullscreen);
|
|
855
805
|
}
|
|
856
806
|
}
|
|
857
807
|
|
|
@@ -919,31 +869,6 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
|
|
|
919
869
|
this.editorOpened = event.detail.value;
|
|
920
870
|
}
|
|
921
871
|
|
|
922
|
-
/** @private */
|
|
923
|
-
__onDomChange(addedNodes) {
|
|
924
|
-
addedNodes
|
|
925
|
-
.filter((node) => node.nodeType === Node.ELEMENT_NODE)
|
|
926
|
-
.forEach((node) => {
|
|
927
|
-
const slotAttributeValue = node.getAttribute('slot');
|
|
928
|
-
if (!slotAttributeValue) {
|
|
929
|
-
return;
|
|
930
|
-
}
|
|
931
|
-
|
|
932
|
-
if (slotAttributeValue === 'grid') {
|
|
933
|
-
// Force to remove listener on previous grid first
|
|
934
|
-
this.__editOnClickChanged(false, this._grid);
|
|
935
|
-
this._grid = node;
|
|
936
|
-
this.__editOnClickChanged(this.editOnClick, this._grid);
|
|
937
|
-
} else if (slotAttributeValue === 'form') {
|
|
938
|
-
this._form = node;
|
|
939
|
-
}
|
|
940
|
-
});
|
|
941
|
-
|
|
942
|
-
if (this.editorOpened) {
|
|
943
|
-
this.__ensureChildren();
|
|
944
|
-
}
|
|
945
|
-
}
|
|
946
|
-
|
|
947
872
|
/** @private */
|
|
948
873
|
__onGridEdit(event) {
|
|
949
874
|
event.stopPropagation();
|
|
@@ -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-alpha6",
|
|
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-alpha6/#/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-alpha6/#/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-alpha6/#/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-alpha6/#/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-alpha6/#/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-alpha6/#/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-alpha6/#/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-alpha6/#/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-alpha6/#/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-alpha6",
|
|
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-alpha6/#/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-alpha6/#/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-alpha6/#/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-alpha6/#/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-alpha6/#/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-alpha6/#/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-alpha6/#/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
|
}
|