@vaadin/crud 24.2.0-alpha4 → 24.2.0-dev.538d07bdf
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 +0 -586
- package/web-types.lit.json +0 -286
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-dev.538d07bdf",
|
|
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-dev.538d07bdf",
|
|
41
|
+
"@vaadin/component-base": "24.2.0-dev.538d07bdf",
|
|
42
|
+
"@vaadin/confirm-dialog": "24.2.0-dev.538d07bdf",
|
|
43
|
+
"@vaadin/dialog": "24.2.0-dev.538d07bdf",
|
|
44
|
+
"@vaadin/form-layout": "24.2.0-dev.538d07bdf",
|
|
45
|
+
"@vaadin/grid": "24.2.0-dev.538d07bdf",
|
|
46
|
+
"@vaadin/text-field": "24.2.0-dev.538d07bdf",
|
|
47
|
+
"@vaadin/vaadin-lumo-styles": "24.2.0-dev.538d07bdf",
|
|
48
|
+
"@vaadin/vaadin-material-styles": "24.2.0-dev.538d07bdf",
|
|
49
|
+
"@vaadin/vaadin-themable-mixin": "24.2.0-dev.538d07bdf"
|
|
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": "86c2fd5f37cf1240af98f7c7d752518c8d701db2"
|
|
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
DELETED
|
@@ -1,586 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
-
"name": "@vaadin/crud",
|
|
4
|
-
"version": "24.2.0-alpha4",
|
|
5
|
-
"description-markup": "markdown",
|
|
6
|
-
"contributions": {
|
|
7
|
-
"html": {
|
|
8
|
-
"elements": [
|
|
9
|
-
{
|
|
10
|
-
"name": "vaadin-crud-edit",
|
|
11
|
-
"description": "`<vaadin-crud-edit>` is a helper element for `<vaadin-grid-column>` that provides\nan easily themable button that fires an `edit` event with the row item as detail\nwhen clicked.\n\nTypical usage is in a `<vaadin-grid-column>` of a custom `<vaadin-grid>` inside\na `<vaadin-crud>` to enable editing.",
|
|
12
|
-
"attributes": [
|
|
13
|
-
{
|
|
14
|
-
"name": "theme",
|
|
15
|
-
"description": "The theme variants to apply to the component.",
|
|
16
|
-
"value": {
|
|
17
|
-
"type": [
|
|
18
|
-
"string",
|
|
19
|
-
"null",
|
|
20
|
-
"undefined"
|
|
21
|
-
]
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
],
|
|
25
|
-
"js": {
|
|
26
|
-
"properties": [],
|
|
27
|
-
"events": [
|
|
28
|
-
{
|
|
29
|
-
"name": "edit",
|
|
30
|
-
"description": "Fired when user on the icon."
|
|
31
|
-
}
|
|
32
|
-
]
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
"name": "vaadin-crud-edit-column",
|
|
37
|
-
"description": "`<vaadin-crud-edit-column>` is a helper element for the `<vaadin-grid>`\nthat provides a clickable and themable edit icon.\n\nTypical usage is in a custom `<vaadin-grid>` inside a `<vaadin-crud>`.\n\n#### Example:\n```html\n<vaadin-grid items=\"[[items]]\">\n <vaadin-crud-edit-column></vaadin-crud-edit-column>\n\n <vaadin-grid-column>\n ...\n```",
|
|
38
|
-
"attributes": [
|
|
39
|
-
{
|
|
40
|
-
"name": "resizable",
|
|
41
|
-
"description": "When set to true, the column is user-resizable.",
|
|
42
|
-
"value": {
|
|
43
|
-
"type": [
|
|
44
|
-
"boolean",
|
|
45
|
-
"null",
|
|
46
|
-
"undefined"
|
|
47
|
-
]
|
|
48
|
-
}
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
"name": "frozen",
|
|
52
|
-
"description": "When true, the column is frozen. When a column inside of a column group is frozen,\nall of the sibling columns inside the group will get frozen also.",
|
|
53
|
-
"value": {
|
|
54
|
-
"type": [
|
|
55
|
-
"boolean"
|
|
56
|
-
]
|
|
57
|
-
}
|
|
58
|
-
},
|
|
59
|
-
{
|
|
60
|
-
"name": "frozen-to-end",
|
|
61
|
-
"description": "When true, the column is frozen to end of grid.\n\nWhen a column inside of a column group is frozen to end, all of the sibling columns\ninside the group will get frozen to end also.\n\nColumn can not be set as `frozen` and `frozenToEnd` at the same time.",
|
|
62
|
-
"value": {
|
|
63
|
-
"type": [
|
|
64
|
-
"boolean"
|
|
65
|
-
]
|
|
66
|
-
}
|
|
67
|
-
},
|
|
68
|
-
{
|
|
69
|
-
"name": "hidden",
|
|
70
|
-
"description": "When set to true, the cells for this column are hidden.",
|
|
71
|
-
"value": {
|
|
72
|
-
"type": [
|
|
73
|
-
"boolean",
|
|
74
|
-
"null",
|
|
75
|
-
"undefined"
|
|
76
|
-
]
|
|
77
|
-
}
|
|
78
|
-
},
|
|
79
|
-
{
|
|
80
|
-
"name": "header",
|
|
81
|
-
"description": "Text content to display in the header cell of the column.",
|
|
82
|
-
"value": {
|
|
83
|
-
"type": [
|
|
84
|
-
"string",
|
|
85
|
-
"null",
|
|
86
|
-
"undefined"
|
|
87
|
-
]
|
|
88
|
-
}
|
|
89
|
-
},
|
|
90
|
-
{
|
|
91
|
-
"name": "text-align",
|
|
92
|
-
"description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
|
|
93
|
-
"value": {
|
|
94
|
-
"type": [
|
|
95
|
-
"GridColumnTextAlign",
|
|
96
|
-
"null",
|
|
97
|
-
"undefined"
|
|
98
|
-
]
|
|
99
|
-
}
|
|
100
|
-
},
|
|
101
|
-
{
|
|
102
|
-
"name": "width",
|
|
103
|
-
"description": "Width of the cells for this column.",
|
|
104
|
-
"value": {
|
|
105
|
-
"type": [
|
|
106
|
-
"string",
|
|
107
|
-
"null",
|
|
108
|
-
"undefined"
|
|
109
|
-
]
|
|
110
|
-
}
|
|
111
|
-
},
|
|
112
|
-
{
|
|
113
|
-
"name": "flex-grow",
|
|
114
|
-
"description": "Flex grow ratio for the cell widths. When set to 0, cell width is fixed.",
|
|
115
|
-
"value": {
|
|
116
|
-
"type": [
|
|
117
|
-
"number"
|
|
118
|
-
]
|
|
119
|
-
}
|
|
120
|
-
},
|
|
121
|
-
{
|
|
122
|
-
"name": "path",
|
|
123
|
-
"description": "Path to an item sub-property whose value gets displayed in the column body cells.\nThe property name is also shown in the column header if an explicit header or renderer isn't defined.",
|
|
124
|
-
"value": {
|
|
125
|
-
"type": [
|
|
126
|
-
"string",
|
|
127
|
-
"null",
|
|
128
|
-
"undefined"
|
|
129
|
-
]
|
|
130
|
-
}
|
|
131
|
-
},
|
|
132
|
-
{
|
|
133
|
-
"name": "auto-width",
|
|
134
|
-
"description": "Automatically sets the width of the column based on the column contents when this is set to `true`.\n\nFor performance reasons the column width is calculated automatically only once when the grid items\nare rendered for the first time and the calculation only considers the rows which are currently\nrendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell\ncontent changes, the column width might not match the contents anymore.\n\nHidden columns are ignored in the calculation and their widths are not automatically updated when\nyou show a column that was initially hidden.\n\nYou can manually trigger the auto sizing behavior again by calling `grid.recalculateColumnWidths()`.\n\nThe column width may still grow larger when `flexGrow` is not 0.",
|
|
135
|
-
"value": {
|
|
136
|
-
"type": [
|
|
137
|
-
"boolean"
|
|
138
|
-
]
|
|
139
|
-
}
|
|
140
|
-
},
|
|
141
|
-
{
|
|
142
|
-
"name": "aria-label",
|
|
143
|
-
"description": "The arial-label for the edit button",
|
|
144
|
-
"value": {
|
|
145
|
-
"type": [
|
|
146
|
-
"string",
|
|
147
|
-
"null",
|
|
148
|
-
"undefined"
|
|
149
|
-
]
|
|
150
|
-
}
|
|
151
|
-
},
|
|
152
|
-
{
|
|
153
|
-
"name": "theme",
|
|
154
|
-
"description": "The theme variants to apply to the component.",
|
|
155
|
-
"value": {
|
|
156
|
-
"type": [
|
|
157
|
-
"string",
|
|
158
|
-
"null",
|
|
159
|
-
"undefined"
|
|
160
|
-
]
|
|
161
|
-
}
|
|
162
|
-
}
|
|
163
|
-
],
|
|
164
|
-
"js": {
|
|
165
|
-
"properties": [
|
|
166
|
-
{
|
|
167
|
-
"name": "resizable",
|
|
168
|
-
"description": "When set to true, the column is user-resizable.",
|
|
169
|
-
"value": {
|
|
170
|
-
"type": [
|
|
171
|
-
"boolean",
|
|
172
|
-
"null",
|
|
173
|
-
"undefined"
|
|
174
|
-
]
|
|
175
|
-
}
|
|
176
|
-
},
|
|
177
|
-
{
|
|
178
|
-
"name": "frozen",
|
|
179
|
-
"description": "When true, the column is frozen. When a column inside of a column group is frozen,\nall of the sibling columns inside the group will get frozen also.",
|
|
180
|
-
"value": {
|
|
181
|
-
"type": [
|
|
182
|
-
"boolean"
|
|
183
|
-
]
|
|
184
|
-
}
|
|
185
|
-
},
|
|
186
|
-
{
|
|
187
|
-
"name": "frozenToEnd",
|
|
188
|
-
"description": "When true, the column is frozen to end of grid.\n\nWhen a column inside of a column group is frozen to end, all of the sibling columns\ninside the group will get frozen to end also.\n\nColumn can not be set as `frozen` and `frozenToEnd` at the same time.",
|
|
189
|
-
"value": {
|
|
190
|
-
"type": [
|
|
191
|
-
"boolean"
|
|
192
|
-
]
|
|
193
|
-
}
|
|
194
|
-
},
|
|
195
|
-
{
|
|
196
|
-
"name": "hidden",
|
|
197
|
-
"description": "When set to true, the cells for this column are hidden.",
|
|
198
|
-
"value": {
|
|
199
|
-
"type": [
|
|
200
|
-
"boolean",
|
|
201
|
-
"null",
|
|
202
|
-
"undefined"
|
|
203
|
-
]
|
|
204
|
-
}
|
|
205
|
-
},
|
|
206
|
-
{
|
|
207
|
-
"name": "header",
|
|
208
|
-
"description": "Text content to display in the header cell of the column.",
|
|
209
|
-
"value": {
|
|
210
|
-
"type": [
|
|
211
|
-
"string",
|
|
212
|
-
"null",
|
|
213
|
-
"undefined"
|
|
214
|
-
]
|
|
215
|
-
}
|
|
216
|
-
},
|
|
217
|
-
{
|
|
218
|
-
"name": "textAlign",
|
|
219
|
-
"description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
|
|
220
|
-
"value": {
|
|
221
|
-
"type": [
|
|
222
|
-
"GridColumnTextAlign",
|
|
223
|
-
"null",
|
|
224
|
-
"undefined"
|
|
225
|
-
]
|
|
226
|
-
}
|
|
227
|
-
},
|
|
228
|
-
{
|
|
229
|
-
"name": "headerRenderer",
|
|
230
|
-
"description": "Custom function for rendering the header content.\nReceives two arguments:\n\n- `root` The header cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.",
|
|
231
|
-
"value": {
|
|
232
|
-
"type": [
|
|
233
|
-
"GridHeaderFooterRenderer",
|
|
234
|
-
"null",
|
|
235
|
-
"undefined"
|
|
236
|
-
]
|
|
237
|
-
}
|
|
238
|
-
},
|
|
239
|
-
{
|
|
240
|
-
"name": "footerRenderer",
|
|
241
|
-
"description": "Custom function for rendering the footer content.\nReceives two arguments:\n\n- `root` The footer cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.",
|
|
242
|
-
"value": {
|
|
243
|
-
"type": [
|
|
244
|
-
"GridHeaderFooterRenderer",
|
|
245
|
-
"null",
|
|
246
|
-
"undefined"
|
|
247
|
-
]
|
|
248
|
-
}
|
|
249
|
-
},
|
|
250
|
-
{
|
|
251
|
-
"name": "renderer",
|
|
252
|
-
"description": "Custom function for rendering the cell content.\nReceives three arguments:\n\n- `root` The cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.\n- `model` The object with the properties related with\n the rendered item, contains:\n - `model.index` The index of the item.\n - `model.item` The item.\n - `model.expanded` Sublevel toggle state.\n - `model.level` Level of the tree represented with a horizontal offset of the toggle button.\n - `model.selected` Selected state.\n - `model.detailsOpened` Details opened state.",
|
|
253
|
-
"value": {
|
|
254
|
-
"type": [
|
|
255
|
-
"GridBodyRenderer",
|
|
256
|
-
"null",
|
|
257
|
-
"undefined"
|
|
258
|
-
]
|
|
259
|
-
}
|
|
260
|
-
},
|
|
261
|
-
{
|
|
262
|
-
"name": "path",
|
|
263
|
-
"description": "Path to an item sub-property whose value gets displayed in the column body cells.\nThe property name is also shown in the column header if an explicit header or renderer isn't defined.",
|
|
264
|
-
"value": {
|
|
265
|
-
"type": [
|
|
266
|
-
"string",
|
|
267
|
-
"null",
|
|
268
|
-
"undefined"
|
|
269
|
-
]
|
|
270
|
-
}
|
|
271
|
-
},
|
|
272
|
-
{
|
|
273
|
-
"name": "autoWidth",
|
|
274
|
-
"description": "Automatically sets the width of the column based on the column contents when this is set to `true`.\n\nFor performance reasons the column width is calculated automatically only once when the grid items\nare rendered for the first time and the calculation only considers the rows which are currently\nrendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell\ncontent changes, the column width might not match the contents anymore.\n\nHidden columns are ignored in the calculation and their widths are not automatically updated when\nyou show a column that was initially hidden.\n\nYou can manually trigger the auto sizing behavior again by calling `grid.recalculateColumnWidths()`.\n\nThe column width may still grow larger when `flexGrow` is not 0.",
|
|
275
|
-
"value": {
|
|
276
|
-
"type": [
|
|
277
|
-
"boolean"
|
|
278
|
-
]
|
|
279
|
-
}
|
|
280
|
-
},
|
|
281
|
-
{
|
|
282
|
-
"name": "ariaLabel",
|
|
283
|
-
"description": "The arial-label for the edit button",
|
|
284
|
-
"value": {
|
|
285
|
-
"type": [
|
|
286
|
-
"string",
|
|
287
|
-
"null",
|
|
288
|
-
"undefined"
|
|
289
|
-
]
|
|
290
|
-
}
|
|
291
|
-
}
|
|
292
|
-
],
|
|
293
|
-
"events": []
|
|
294
|
-
}
|
|
295
|
-
},
|
|
296
|
-
{
|
|
297
|
-
"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-alpha4/#/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-alpha4/#/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-alpha4/#/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-alpha4/#/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-alpha4/#/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
|
-
"attributes": [
|
|
300
|
-
{
|
|
301
|
-
"name": "editor-position",
|
|
302
|
-
"description": "Sets how editor will be presented on desktop screen.\n\nAccepted values are:\n - `` (default) - form will open as overlay\n - `bottom` - form will open below the grid\n - `aside` - form will open on the grid side (_right_, if lft and _left_ if rtl)",
|
|
303
|
-
"value": {
|
|
304
|
-
"type": [
|
|
305
|
-
"CrudEditorPosition"
|
|
306
|
-
]
|
|
307
|
-
}
|
|
308
|
-
},
|
|
309
|
-
{
|
|
310
|
-
"name": "edit-on-click",
|
|
311
|
-
"description": "Enables user to click on row to edit it.\nNote: When enabled, auto-generated grid won't show the edit column.",
|
|
312
|
-
"value": {
|
|
313
|
-
"type": [
|
|
314
|
-
"boolean"
|
|
315
|
-
]
|
|
316
|
-
}
|
|
317
|
-
},
|
|
318
|
-
{
|
|
319
|
-
"name": "no-filter",
|
|
320
|
-
"description": "Disable filtering when grid is autoconfigured.",
|
|
321
|
-
"value": {
|
|
322
|
-
"type": [
|
|
323
|
-
"boolean",
|
|
324
|
-
"null",
|
|
325
|
-
"undefined"
|
|
326
|
-
]
|
|
327
|
-
}
|
|
328
|
-
},
|
|
329
|
-
{
|
|
330
|
-
"name": "no-sort",
|
|
331
|
-
"description": "Disable sorting when grid is autoconfigured.",
|
|
332
|
-
"value": {
|
|
333
|
-
"type": [
|
|
334
|
-
"boolean",
|
|
335
|
-
"null",
|
|
336
|
-
"undefined"
|
|
337
|
-
]
|
|
338
|
-
}
|
|
339
|
-
},
|
|
340
|
-
{
|
|
341
|
-
"name": "no-head",
|
|
342
|
-
"description": "Remove grid headers when it is autoconfigured.",
|
|
343
|
-
"value": {
|
|
344
|
-
"type": [
|
|
345
|
-
"boolean",
|
|
346
|
-
"null",
|
|
347
|
-
"undefined"
|
|
348
|
-
]
|
|
349
|
-
}
|
|
350
|
-
},
|
|
351
|
-
{
|
|
352
|
-
"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-alpha4/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
354
|
-
"value": {
|
|
355
|
-
"type": [
|
|
356
|
-
"string",
|
|
357
|
-
"null",
|
|
358
|
-
"undefined"
|
|
359
|
-
]
|
|
360
|
-
}
|
|
361
|
-
},
|
|
362
|
-
{
|
|
363
|
-
"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-alpha4/#/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
|
-
"value": {
|
|
366
|
-
"type": [
|
|
367
|
-
"string",
|
|
368
|
-
"null",
|
|
369
|
-
"undefined"
|
|
370
|
-
]
|
|
371
|
-
}
|
|
372
|
-
},
|
|
373
|
-
{
|
|
374
|
-
"name": "editor-opened",
|
|
375
|
-
"description": "Reflects the opened status of the editor.",
|
|
376
|
-
"value": {
|
|
377
|
-
"type": [
|
|
378
|
-
"boolean",
|
|
379
|
-
"null",
|
|
380
|
-
"undefined"
|
|
381
|
-
]
|
|
382
|
-
}
|
|
383
|
-
},
|
|
384
|
-
{
|
|
385
|
-
"name": "no-toolbar",
|
|
386
|
-
"description": "Controls visibility state of toolbar.\nWhen set to false toolbar is hidden and shown when set to true.",
|
|
387
|
-
"value": {
|
|
388
|
-
"type": [
|
|
389
|
-
"boolean",
|
|
390
|
-
"null",
|
|
391
|
-
"undefined"
|
|
392
|
-
]
|
|
393
|
-
}
|
|
394
|
-
},
|
|
395
|
-
{
|
|
396
|
-
"name": "theme",
|
|
397
|
-
"description": "The theme variants to apply to the component.",
|
|
398
|
-
"value": {
|
|
399
|
-
"type": [
|
|
400
|
-
"string",
|
|
401
|
-
"null",
|
|
402
|
-
"undefined"
|
|
403
|
-
]
|
|
404
|
-
}
|
|
405
|
-
}
|
|
406
|
-
],
|
|
407
|
-
"js": {
|
|
408
|
-
"properties": [
|
|
409
|
-
{
|
|
410
|
-
"name": "items",
|
|
411
|
-
"description": "An array containing the items which will be stamped to the column template instances.",
|
|
412
|
-
"value": {
|
|
413
|
-
"type": [
|
|
414
|
-
"Array.<unknown>",
|
|
415
|
-
"undefined"
|
|
416
|
-
]
|
|
417
|
-
}
|
|
418
|
-
},
|
|
419
|
-
{
|
|
420
|
-
"name": "editedItem",
|
|
421
|
-
"description": "The item being edited in the dialog.",
|
|
422
|
-
"value": {
|
|
423
|
-
"type": [
|
|
424
|
-
"unknown"
|
|
425
|
-
]
|
|
426
|
-
}
|
|
427
|
-
},
|
|
428
|
-
{
|
|
429
|
-
"name": "editorPosition",
|
|
430
|
-
"description": "Sets how editor will be presented on desktop screen.\n\nAccepted values are:\n - `` (default) - form will open as overlay\n - `bottom` - form will open below the grid\n - `aside` - form will open on the grid side (_right_, if lft and _left_ if rtl)",
|
|
431
|
-
"value": {
|
|
432
|
-
"type": [
|
|
433
|
-
"CrudEditorPosition"
|
|
434
|
-
]
|
|
435
|
-
}
|
|
436
|
-
},
|
|
437
|
-
{
|
|
438
|
-
"name": "editOnClick",
|
|
439
|
-
"description": "Enables user to click on row to edit it.\nNote: When enabled, auto-generated grid won't show the edit column.",
|
|
440
|
-
"value": {
|
|
441
|
-
"type": [
|
|
442
|
-
"boolean"
|
|
443
|
-
]
|
|
444
|
-
}
|
|
445
|
-
},
|
|
446
|
-
{
|
|
447
|
-
"name": "dataProvider",
|
|
448
|
-
"description": "Function that provides items lazily. Receives arguments `params`, `callback`\n\n`params.page` Requested page index\n`params.pageSize` Current page size\n`params.filters` Currently applied filters\n`params.sortOrders` Currently applied sorting orders\n\n`callback(items, size)` Callback function with arguments:\n - `items` Current page of items\n - `size` Total number of items",
|
|
449
|
-
"value": {
|
|
450
|
-
"type": [
|
|
451
|
-
"CrudDataProvider",
|
|
452
|
-
"undefined"
|
|
453
|
-
]
|
|
454
|
-
}
|
|
455
|
-
},
|
|
456
|
-
{
|
|
457
|
-
"name": "noFilter",
|
|
458
|
-
"description": "Disable filtering when grid is autoconfigured.",
|
|
459
|
-
"value": {
|
|
460
|
-
"type": [
|
|
461
|
-
"boolean",
|
|
462
|
-
"null",
|
|
463
|
-
"undefined"
|
|
464
|
-
]
|
|
465
|
-
}
|
|
466
|
-
},
|
|
467
|
-
{
|
|
468
|
-
"name": "noSort",
|
|
469
|
-
"description": "Disable sorting when grid is autoconfigured.",
|
|
470
|
-
"value": {
|
|
471
|
-
"type": [
|
|
472
|
-
"boolean",
|
|
473
|
-
"null",
|
|
474
|
-
"undefined"
|
|
475
|
-
]
|
|
476
|
-
}
|
|
477
|
-
},
|
|
478
|
-
{
|
|
479
|
-
"name": "noHead",
|
|
480
|
-
"description": "Remove grid headers when it is autoconfigured.",
|
|
481
|
-
"value": {
|
|
482
|
-
"type": [
|
|
483
|
-
"boolean",
|
|
484
|
-
"null",
|
|
485
|
-
"undefined"
|
|
486
|
-
]
|
|
487
|
-
}
|
|
488
|
-
},
|
|
489
|
-
{
|
|
490
|
-
"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-alpha4/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
492
|
-
"value": {
|
|
493
|
-
"type": [
|
|
494
|
-
"string",
|
|
495
|
-
"null",
|
|
496
|
-
"undefined"
|
|
497
|
-
]
|
|
498
|
-
}
|
|
499
|
-
},
|
|
500
|
-
{
|
|
501
|
-
"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-alpha4/#/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
|
-
"value": {
|
|
504
|
-
"type": [
|
|
505
|
-
"string",
|
|
506
|
-
"null",
|
|
507
|
-
"undefined"
|
|
508
|
-
]
|
|
509
|
-
}
|
|
510
|
-
},
|
|
511
|
-
{
|
|
512
|
-
"name": "editorOpened",
|
|
513
|
-
"description": "Reflects the opened status of the editor.",
|
|
514
|
-
"value": {
|
|
515
|
-
"type": [
|
|
516
|
-
"boolean",
|
|
517
|
-
"null",
|
|
518
|
-
"undefined"
|
|
519
|
-
]
|
|
520
|
-
}
|
|
521
|
-
},
|
|
522
|
-
{
|
|
523
|
-
"name": "noToolbar",
|
|
524
|
-
"description": "Controls visibility state of toolbar.\nWhen set to false toolbar is hidden and shown when set to true.",
|
|
525
|
-
"value": {
|
|
526
|
-
"type": [
|
|
527
|
-
"boolean",
|
|
528
|
-
"null",
|
|
529
|
-
"undefined"
|
|
530
|
-
]
|
|
531
|
-
}
|
|
532
|
-
},
|
|
533
|
-
{
|
|
534
|
-
"name": "i18n",
|
|
535
|
-
"description": "The object used to localize this component.\nFor changing the default localization, change the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n\n```\n{\n newItem: 'New item',\n editItem: 'Edit item',\n saveItem: 'Save',\n cancel: 'Cancel',\n deleteItem: 'Delete...',\n editLabel: 'Edit',\n confirm: {\n delete: {\n title: 'Confirm delete',\n content: 'Are you sure you want to delete the selected item? This action cannot be undone.',\n button: {\n confirm: 'Delete',\n dismiss: 'Cancel'\n }\n },\n cancel: {\n title: 'Unsaved changes',\n content: 'There are unsaved modifications to the item.',\n button: {\n confirm: 'Discard',\n dismiss: 'Continue editing'\n }\n }\n }\n}\n```",
|
|
536
|
-
"value": {
|
|
537
|
-
"type": [
|
|
538
|
-
"CrudI18n"
|
|
539
|
-
]
|
|
540
|
-
}
|
|
541
|
-
}
|
|
542
|
-
],
|
|
543
|
-
"events": [
|
|
544
|
-
{
|
|
545
|
-
"name": "cancel",
|
|
546
|
-
"description": "Fired when user discards edition. If the default is prevented, then\nno action is performed, user is responsible to close dialog and reset\nitem and grid."
|
|
547
|
-
},
|
|
548
|
-
{
|
|
549
|
-
"name": "delete",
|
|
550
|
-
"description": "Fired when user wants to delete item. If the default is prevented, then\nno action is performed, items array is not modified nor dialog closed"
|
|
551
|
-
},
|
|
552
|
-
{
|
|
553
|
-
"name": "edit",
|
|
554
|
-
"description": "Fired when user wants to edit an existing item. If the default is prevented, then\na new item is not assigned to the form, giving that responsibility to the app, though\ndialog is always opened."
|
|
555
|
-
},
|
|
556
|
-
{
|
|
557
|
-
"name": "new",
|
|
558
|
-
"description": "Fired when user wants to create a new item."
|
|
559
|
-
},
|
|
560
|
-
{
|
|
561
|
-
"name": "save",
|
|
562
|
-
"description": "Fired when user wants to save a new or an existing item. If the default is prevented, then\nno action is performed, items array is not modified nor dialog closed"
|
|
563
|
-
},
|
|
564
|
-
{
|
|
565
|
-
"name": "items-changed",
|
|
566
|
-
"description": "Fired when the `items` property changes."
|
|
567
|
-
},
|
|
568
|
-
{
|
|
569
|
-
"name": "edited-item-changed",
|
|
570
|
-
"description": "Fired when the `editedItem` property changes."
|
|
571
|
-
},
|
|
572
|
-
{
|
|
573
|
-
"name": "editor-opened-changed",
|
|
574
|
-
"description": "Fired when the `editorOpened` property changes."
|
|
575
|
-
},
|
|
576
|
-
{
|
|
577
|
-
"name": "size-changed",
|
|
578
|
-
"description": "Fired when the `size` property changes."
|
|
579
|
-
}
|
|
580
|
-
]
|
|
581
|
-
}
|
|
582
|
-
}
|
|
583
|
-
]
|
|
584
|
-
}
|
|
585
|
-
}
|
|
586
|
-
}
|
package/web-types.lit.json
DELETED
|
@@ -1,286 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
-
"name": "@vaadin/crud",
|
|
4
|
-
"version": "24.2.0-alpha4",
|
|
5
|
-
"description-markup": "markdown",
|
|
6
|
-
"framework": "lit",
|
|
7
|
-
"framework-config": {
|
|
8
|
-
"enable-when": {
|
|
9
|
-
"node-packages": [
|
|
10
|
-
"lit"
|
|
11
|
-
]
|
|
12
|
-
}
|
|
13
|
-
},
|
|
14
|
-
"contributions": {
|
|
15
|
-
"html": {
|
|
16
|
-
"elements": [
|
|
17
|
-
{
|
|
18
|
-
"name": "vaadin-crud-edit",
|
|
19
|
-
"description": "`<vaadin-crud-edit>` is a helper element for `<vaadin-grid-column>` that provides\nan easily themable button that fires an `edit` event with the row item as detail\nwhen clicked.\n\nTypical usage is in a `<vaadin-grid-column>` of a custom `<vaadin-grid>` inside\na `<vaadin-crud>` to enable editing.",
|
|
20
|
-
"extension": true,
|
|
21
|
-
"attributes": [
|
|
22
|
-
{
|
|
23
|
-
"name": "@edit",
|
|
24
|
-
"description": "Fired when user on the icon.",
|
|
25
|
-
"value": {
|
|
26
|
-
"kind": "expression"
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
]
|
|
30
|
-
},
|
|
31
|
-
{
|
|
32
|
-
"name": "vaadin-crud-edit-column",
|
|
33
|
-
"description": "`<vaadin-crud-edit-column>` is a helper element for the `<vaadin-grid>`\nthat provides a clickable and themable edit icon.\n\nTypical usage is in a custom `<vaadin-grid>` inside a `<vaadin-crud>`.\n\n#### Example:\n```html\n<vaadin-grid items=\"[[items]]\">\n <vaadin-crud-edit-column></vaadin-crud-edit-column>\n\n <vaadin-grid-column>\n ...\n```",
|
|
34
|
-
"extension": true,
|
|
35
|
-
"attributes": [
|
|
36
|
-
{
|
|
37
|
-
"name": "?resizable",
|
|
38
|
-
"description": "When set to true, the column is user-resizable.",
|
|
39
|
-
"value": {
|
|
40
|
-
"kind": "expression"
|
|
41
|
-
}
|
|
42
|
-
},
|
|
43
|
-
{
|
|
44
|
-
"name": "?frozen",
|
|
45
|
-
"description": "When true, the column is frozen. When a column inside of a column group is frozen,\nall of the sibling columns inside the group will get frozen also.",
|
|
46
|
-
"value": {
|
|
47
|
-
"kind": "expression"
|
|
48
|
-
}
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
"name": "?frozenToEnd",
|
|
52
|
-
"description": "When true, the column is frozen to end of grid.\n\nWhen a column inside of a column group is frozen to end, all of the sibling columns\ninside the group will get frozen to end also.\n\nColumn can not be set as `frozen` and `frozenToEnd` at the same time.",
|
|
53
|
-
"value": {
|
|
54
|
-
"kind": "expression"
|
|
55
|
-
}
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
"name": "?hidden",
|
|
59
|
-
"description": "When set to true, the cells for this column are hidden.",
|
|
60
|
-
"value": {
|
|
61
|
-
"kind": "expression"
|
|
62
|
-
}
|
|
63
|
-
},
|
|
64
|
-
{
|
|
65
|
-
"name": "?autoWidth",
|
|
66
|
-
"description": "Automatically sets the width of the column based on the column contents when this is set to `true`.\n\nFor performance reasons the column width is calculated automatically only once when the grid items\nare rendered for the first time and the calculation only considers the rows which are currently\nrendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell\ncontent changes, the column width might not match the contents anymore.\n\nHidden columns are ignored in the calculation and their widths are not automatically updated when\nyou show a column that was initially hidden.\n\nYou can manually trigger the auto sizing behavior again by calling `grid.recalculateColumnWidths()`.\n\nThe column width may still grow larger when `flexGrow` is not 0.",
|
|
67
|
-
"value": {
|
|
68
|
-
"kind": "expression"
|
|
69
|
-
}
|
|
70
|
-
},
|
|
71
|
-
{
|
|
72
|
-
"name": ".header",
|
|
73
|
-
"description": "Text content to display in the header cell of the column.",
|
|
74
|
-
"value": {
|
|
75
|
-
"kind": "expression"
|
|
76
|
-
}
|
|
77
|
-
},
|
|
78
|
-
{
|
|
79
|
-
"name": ".textAlign",
|
|
80
|
-
"description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
|
|
81
|
-
"value": {
|
|
82
|
-
"kind": "expression"
|
|
83
|
-
}
|
|
84
|
-
},
|
|
85
|
-
{
|
|
86
|
-
"name": ".headerRenderer",
|
|
87
|
-
"description": "Custom function for rendering the header content.\nReceives two arguments:\n\n- `root` The header cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.",
|
|
88
|
-
"value": {
|
|
89
|
-
"kind": "expression"
|
|
90
|
-
}
|
|
91
|
-
},
|
|
92
|
-
{
|
|
93
|
-
"name": ".footerRenderer",
|
|
94
|
-
"description": "Custom function for rendering the footer content.\nReceives two arguments:\n\n- `root` The footer cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.",
|
|
95
|
-
"value": {
|
|
96
|
-
"kind": "expression"
|
|
97
|
-
}
|
|
98
|
-
},
|
|
99
|
-
{
|
|
100
|
-
"name": ".renderer",
|
|
101
|
-
"description": "Custom function for rendering the cell content.\nReceives three arguments:\n\n- `root` The cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.\n- `model` The object with the properties related with\n the rendered item, contains:\n - `model.index` The index of the item.\n - `model.item` The item.\n - `model.expanded` Sublevel toggle state.\n - `model.level` Level of the tree represented with a horizontal offset of the toggle button.\n - `model.selected` Selected state.\n - `model.detailsOpened` Details opened state.",
|
|
102
|
-
"value": {
|
|
103
|
-
"kind": "expression"
|
|
104
|
-
}
|
|
105
|
-
},
|
|
106
|
-
{
|
|
107
|
-
"name": ".path",
|
|
108
|
-
"description": "Path to an item sub-property whose value gets displayed in the column body cells.\nThe property name is also shown in the column header if an explicit header or renderer isn't defined.",
|
|
109
|
-
"value": {
|
|
110
|
-
"kind": "expression"
|
|
111
|
-
}
|
|
112
|
-
},
|
|
113
|
-
{
|
|
114
|
-
"name": ".ariaLabel",
|
|
115
|
-
"description": "The arial-label for the edit button",
|
|
116
|
-
"value": {
|
|
117
|
-
"kind": "expression"
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
]
|
|
121
|
-
},
|
|
122
|
-
{
|
|
123
|
-
"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-alpha4/#/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-alpha4/#/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-alpha4/#/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-alpha4/#/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-alpha4/#/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
|
-
"extension": true,
|
|
126
|
-
"attributes": [
|
|
127
|
-
{
|
|
128
|
-
"name": "?editOnClick",
|
|
129
|
-
"description": "Enables user to click on row to edit it.\nNote: When enabled, auto-generated grid won't show the edit column.",
|
|
130
|
-
"value": {
|
|
131
|
-
"kind": "expression"
|
|
132
|
-
}
|
|
133
|
-
},
|
|
134
|
-
{
|
|
135
|
-
"name": "?noFilter",
|
|
136
|
-
"description": "Disable filtering when grid is autoconfigured.",
|
|
137
|
-
"value": {
|
|
138
|
-
"kind": "expression"
|
|
139
|
-
}
|
|
140
|
-
},
|
|
141
|
-
{
|
|
142
|
-
"name": "?noSort",
|
|
143
|
-
"description": "Disable sorting when grid is autoconfigured.",
|
|
144
|
-
"value": {
|
|
145
|
-
"kind": "expression"
|
|
146
|
-
}
|
|
147
|
-
},
|
|
148
|
-
{
|
|
149
|
-
"name": "?noHead",
|
|
150
|
-
"description": "Remove grid headers when it is autoconfigured.",
|
|
151
|
-
"value": {
|
|
152
|
-
"kind": "expression"
|
|
153
|
-
}
|
|
154
|
-
},
|
|
155
|
-
{
|
|
156
|
-
"name": "?editorOpened",
|
|
157
|
-
"description": "Reflects the opened status of the editor.",
|
|
158
|
-
"value": {
|
|
159
|
-
"kind": "expression"
|
|
160
|
-
}
|
|
161
|
-
},
|
|
162
|
-
{
|
|
163
|
-
"name": "?noToolbar",
|
|
164
|
-
"description": "Controls visibility state of toolbar.\nWhen set to false toolbar is hidden and shown when set to true.",
|
|
165
|
-
"value": {
|
|
166
|
-
"kind": "expression"
|
|
167
|
-
}
|
|
168
|
-
},
|
|
169
|
-
{
|
|
170
|
-
"name": ".items",
|
|
171
|
-
"description": "An array containing the items which will be stamped to the column template instances.",
|
|
172
|
-
"value": {
|
|
173
|
-
"kind": "expression"
|
|
174
|
-
}
|
|
175
|
-
},
|
|
176
|
-
{
|
|
177
|
-
"name": ".editedItem",
|
|
178
|
-
"description": "The item being edited in the dialog.",
|
|
179
|
-
"value": {
|
|
180
|
-
"kind": "expression"
|
|
181
|
-
}
|
|
182
|
-
},
|
|
183
|
-
{
|
|
184
|
-
"name": ".editorPosition",
|
|
185
|
-
"description": "Sets how editor will be presented on desktop screen.\n\nAccepted values are:\n - `` (default) - form will open as overlay\n - `bottom` - form will open below the grid\n - `aside` - form will open on the grid side (_right_, if lft and _left_ if rtl)",
|
|
186
|
-
"value": {
|
|
187
|
-
"kind": "expression"
|
|
188
|
-
}
|
|
189
|
-
},
|
|
190
|
-
{
|
|
191
|
-
"name": ".dataProvider",
|
|
192
|
-
"description": "Function that provides items lazily. Receives arguments `params`, `callback`\n\n`params.page` Requested page index\n`params.pageSize` Current page size\n`params.filters` Currently applied filters\n`params.sortOrders` Currently applied sorting orders\n\n`callback(items, size)` Callback function with arguments:\n - `items` Current page of items\n - `size` Total number of items",
|
|
193
|
-
"value": {
|
|
194
|
-
"kind": "expression"
|
|
195
|
-
}
|
|
196
|
-
},
|
|
197
|
-
{
|
|
198
|
-
"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-alpha4/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
200
|
-
"value": {
|
|
201
|
-
"kind": "expression"
|
|
202
|
-
}
|
|
203
|
-
},
|
|
204
|
-
{
|
|
205
|
-
"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-alpha4/#/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
|
-
"value": {
|
|
208
|
-
"kind": "expression"
|
|
209
|
-
}
|
|
210
|
-
},
|
|
211
|
-
{
|
|
212
|
-
"name": ".i18n",
|
|
213
|
-
"description": "The object used to localize this component.\nFor changing the default localization, change the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n\n```\n{\n newItem: 'New item',\n editItem: 'Edit item',\n saveItem: 'Save',\n cancel: 'Cancel',\n deleteItem: 'Delete...',\n editLabel: 'Edit',\n confirm: {\n delete: {\n title: 'Confirm delete',\n content: 'Are you sure you want to delete the selected item? This action cannot be undone.',\n button: {\n confirm: 'Delete',\n dismiss: 'Cancel'\n }\n },\n cancel: {\n title: 'Unsaved changes',\n content: 'There are unsaved modifications to the item.',\n button: {\n confirm: 'Discard',\n dismiss: 'Continue editing'\n }\n }\n }\n}\n```",
|
|
214
|
-
"value": {
|
|
215
|
-
"kind": "expression"
|
|
216
|
-
}
|
|
217
|
-
},
|
|
218
|
-
{
|
|
219
|
-
"name": "@cancel",
|
|
220
|
-
"description": "Fired when user discards edition. If the default is prevented, then\nno action is performed, user is responsible to close dialog and reset\nitem and grid.",
|
|
221
|
-
"value": {
|
|
222
|
-
"kind": "expression"
|
|
223
|
-
}
|
|
224
|
-
},
|
|
225
|
-
{
|
|
226
|
-
"name": "@delete",
|
|
227
|
-
"description": "Fired when user wants to delete item. If the default is prevented, then\nno action is performed, items array is not modified nor dialog closed",
|
|
228
|
-
"value": {
|
|
229
|
-
"kind": "expression"
|
|
230
|
-
}
|
|
231
|
-
},
|
|
232
|
-
{
|
|
233
|
-
"name": "@edit",
|
|
234
|
-
"description": "Fired when user wants to edit an existing item. If the default is prevented, then\na new item is not assigned to the form, giving that responsibility to the app, though\ndialog is always opened.",
|
|
235
|
-
"value": {
|
|
236
|
-
"kind": "expression"
|
|
237
|
-
}
|
|
238
|
-
},
|
|
239
|
-
{
|
|
240
|
-
"name": "@new",
|
|
241
|
-
"description": "Fired when user wants to create a new item.",
|
|
242
|
-
"value": {
|
|
243
|
-
"kind": "expression"
|
|
244
|
-
}
|
|
245
|
-
},
|
|
246
|
-
{
|
|
247
|
-
"name": "@save",
|
|
248
|
-
"description": "Fired when user wants to save a new or an existing item. If the default is prevented, then\nno action is performed, items array is not modified nor dialog closed",
|
|
249
|
-
"value": {
|
|
250
|
-
"kind": "expression"
|
|
251
|
-
}
|
|
252
|
-
},
|
|
253
|
-
{
|
|
254
|
-
"name": "@items-changed",
|
|
255
|
-
"description": "Fired when the `items` property changes.",
|
|
256
|
-
"value": {
|
|
257
|
-
"kind": "expression"
|
|
258
|
-
}
|
|
259
|
-
},
|
|
260
|
-
{
|
|
261
|
-
"name": "@edited-item-changed",
|
|
262
|
-
"description": "Fired when the `editedItem` property changes.",
|
|
263
|
-
"value": {
|
|
264
|
-
"kind": "expression"
|
|
265
|
-
}
|
|
266
|
-
},
|
|
267
|
-
{
|
|
268
|
-
"name": "@editor-opened-changed",
|
|
269
|
-
"description": "Fired when the `editorOpened` property changes.",
|
|
270
|
-
"value": {
|
|
271
|
-
"kind": "expression"
|
|
272
|
-
}
|
|
273
|
-
},
|
|
274
|
-
{
|
|
275
|
-
"name": "@size-changed",
|
|
276
|
-
"description": "Fired when the `size` property changes.",
|
|
277
|
-
"value": {
|
|
278
|
-
"kind": "expression"
|
|
279
|
-
}
|
|
280
|
-
}
|
|
281
|
-
]
|
|
282
|
-
}
|
|
283
|
-
]
|
|
284
|
-
}
|
|
285
|
-
}
|
|
286
|
-
}
|