@vaadin/crud 25.0.0-alpha9 → 25.0.0-beta1
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 +16 -19
- package/src/styles/vaadin-crud-base-styles.js +25 -16
- package/src/styles/vaadin-crud-dialog-overlay-base-styles.js +10 -8
- package/src/styles/vaadin-crud-edit-base-styles.js +2 -2
- package/src/styles/vaadin-crud-grid-base-styles.js +1 -1
- package/src/vaadin-crud-dialog.js +13 -8
- package/src/vaadin-crud-edit-column.js +4 -4
- package/src/vaadin-crud-edit.js +2 -3
- package/src/vaadin-crud-grid.js +1 -1
- package/src/vaadin-crud-mixin.d.ts +1 -1
- package/src/vaadin-crud-mixin.js +1 -1
- package/src/vaadin-crud.js +1 -1
- package/vaadin-crud.js +1 -1
- package/web-types.json +42 -17
- package/web-types.lit.json +20 -13
- package/src/styles/vaadin-crud-core-styles.d.ts +0 -13
- package/src/styles/vaadin-crud-core-styles.js +0 -93
- package/src/styles/vaadin-crud-dialog-overlay-core-styles.d.ts +0 -13
- package/src/styles/vaadin-crud-dialog-overlay-core-styles.js +0 -54
- package/src/styles/vaadin-crud-edit-core-styles.js +0 -17
- package/src/styles/vaadin-crud-grid-core-styles.d.ts +0 -13
- package/src/styles/vaadin-crud-grid-core-styles.js +0 -13
- package/theme/lumo/vaadin-crud-styles.d.ts +0 -4
- package/theme/lumo/vaadin-crud-styles.js +0 -155
- package/theme/lumo/vaadin-crud.d.ts +0 -8
- package/theme/lumo/vaadin-crud.js +0 -8
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/crud",
|
|
3
|
-
"version": "25.0.0-
|
|
3
|
+
"version": "25.0.0-beta1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -21,9 +21,6 @@
|
|
|
21
21
|
"type": "module",
|
|
22
22
|
"files": [
|
|
23
23
|
"src",
|
|
24
|
-
"!src/styles/*-base-styles.d.ts",
|
|
25
|
-
"!src/styles/*-base-styles.js",
|
|
26
|
-
"theme",
|
|
27
24
|
"vaadin-*.d.ts",
|
|
28
25
|
"vaadin-*.js",
|
|
29
26
|
"web-types.json",
|
|
@@ -37,29 +34,29 @@
|
|
|
37
34
|
],
|
|
38
35
|
"dependencies": {
|
|
39
36
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
|
-
"@vaadin/a11y-base": "25.0.0-
|
|
41
|
-
"@vaadin/button": "25.0.0-
|
|
42
|
-
"@vaadin/component-base": "25.0.0-
|
|
43
|
-
"@vaadin/confirm-dialog": "25.0.0-
|
|
44
|
-
"@vaadin/dialog": "25.0.0-
|
|
45
|
-
"@vaadin/form-layout": "25.0.0-
|
|
46
|
-
"@vaadin/grid": "25.0.0-
|
|
47
|
-
"@vaadin/overlay": "25.0.0-
|
|
48
|
-
"@vaadin/text-field": "25.0.0-
|
|
49
|
-
"@vaadin/vaadin-
|
|
50
|
-
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha9",
|
|
37
|
+
"@vaadin/a11y-base": "25.0.0-beta1",
|
|
38
|
+
"@vaadin/button": "25.0.0-beta1",
|
|
39
|
+
"@vaadin/component-base": "25.0.0-beta1",
|
|
40
|
+
"@vaadin/confirm-dialog": "25.0.0-beta1",
|
|
41
|
+
"@vaadin/dialog": "25.0.0-beta1",
|
|
42
|
+
"@vaadin/form-layout": "25.0.0-beta1",
|
|
43
|
+
"@vaadin/grid": "25.0.0-beta1",
|
|
44
|
+
"@vaadin/overlay": "25.0.0-beta1",
|
|
45
|
+
"@vaadin/text-field": "25.0.0-beta1",
|
|
46
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-beta1",
|
|
51
47
|
"lit": "^3.0.0"
|
|
52
48
|
},
|
|
53
49
|
"devDependencies": {
|
|
54
|
-
"@vaadin/chai-plugins": "25.0.0-
|
|
55
|
-
"@vaadin/test-runner-commands": "25.0.0-
|
|
50
|
+
"@vaadin/chai-plugins": "25.0.0-beta1",
|
|
51
|
+
"@vaadin/test-runner-commands": "25.0.0-beta1",
|
|
56
52
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
57
|
-
"
|
|
53
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-beta1",
|
|
54
|
+
"sinon": "^21.0.0"
|
|
58
55
|
},
|
|
59
56
|
"cvdlName": "vaadin-crud",
|
|
60
57
|
"web-types": [
|
|
61
58
|
"web-types.json",
|
|
62
59
|
"web-types.lit.json"
|
|
63
60
|
],
|
|
64
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "1d20cf54e582d1f2e209126d4586f8b4c01c50e0"
|
|
65
62
|
}
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
9
|
* license.
|
|
10
10
|
*/
|
|
11
|
-
import '@vaadin/component-base/src/style-props.js';
|
|
11
|
+
import '@vaadin/component-base/src/styles/style-props.js';
|
|
12
12
|
import { css } from 'lit';
|
|
13
13
|
|
|
14
14
|
export const crudStyles = css`
|
|
@@ -17,8 +17,9 @@ export const crudStyles = css`
|
|
|
17
17
|
--vaadin-grid-border-radius: var(--vaadin-crud-border-radius, var(--vaadin-radius-l));
|
|
18
18
|
--vaadin-crud-editor-max-height: 40%;
|
|
19
19
|
--vaadin-crud-editor-max-width: 40%;
|
|
20
|
-
border: var(--vaadin-crud-border-width, 1px) solid
|
|
21
|
-
|
|
20
|
+
border: var(--vaadin-crud-border-width, 1px) solid
|
|
21
|
+
var(--vaadin-crud-border-color, var(--vaadin-border-color-secondary));
|
|
22
|
+
border-radius: var(--vaadin-crud-border-radius, var(--vaadin-radius-m));
|
|
22
23
|
height: 400px;
|
|
23
24
|
width: 100%;
|
|
24
25
|
background: var(--vaadin-crud-background, var(--vaadin-background-color));
|
|
@@ -60,7 +61,7 @@ export const crudStyles = css`
|
|
|
60
61
|
|
|
61
62
|
:host([editor-position='aside'][editor-opened]) #main {
|
|
62
63
|
border-inline-end: var(--vaadin-crud-border-width, 1px) solid
|
|
63
|
-
var(--vaadin-crud-border-color, var(--vaadin-border-color));
|
|
64
|
+
var(--vaadin-crud-border-color, var(--vaadin-border-color-secondary));
|
|
64
65
|
}
|
|
65
66
|
|
|
66
67
|
:host([editor-position='aside'][editor-opened]) ::slotted(vaadin-crud-grid) {
|
|
@@ -75,7 +76,7 @@ export const crudStyles = css`
|
|
|
75
76
|
|
|
76
77
|
:host([editor-position='bottom'][editor-opened]) #main {
|
|
77
78
|
border-bottom: var(--vaadin-crud-border-width, 1px) solid
|
|
78
|
-
var(--vaadin-crud-border-color, var(--vaadin-border-color));
|
|
79
|
+
var(--vaadin-crud-border-color, var(--vaadin-border-color-secondary));
|
|
79
80
|
}
|
|
80
81
|
|
|
81
82
|
:host([editor-position='bottom'][editor-opened]) :is(#container, [part='editor']) {
|
|
@@ -86,11 +87,12 @@ export const crudStyles = css`
|
|
|
86
87
|
[part='toolbar'] {
|
|
87
88
|
align-items: baseline;
|
|
88
89
|
background: var(--vaadin-crud-toolbar-background, transparent);
|
|
89
|
-
border-top: var(--vaadin-crud-border-width, 1px) solid
|
|
90
|
+
border-top: var(--vaadin-crud-border-width, 1px) solid
|
|
91
|
+
var(--vaadin-crud-border-color, var(--vaadin-border-color-secondary));
|
|
90
92
|
display: flex;
|
|
91
93
|
flex-shrink: 0;
|
|
92
94
|
justify-content: flex-end;
|
|
93
|
-
padding: var(--vaadin-crud-toolbar-padding, var(--vaadin-padding));
|
|
95
|
+
padding: var(--vaadin-crud-toolbar-padding, var(--vaadin-dialog-padding, var(--vaadin-padding-l)));
|
|
94
96
|
}
|
|
95
97
|
|
|
96
98
|
:host([no-toolbar]) [part='toolbar'] {
|
|
@@ -129,11 +131,11 @@ export const crudStyles = css`
|
|
|
129
131
|
}
|
|
130
132
|
|
|
131
133
|
[part='header'] {
|
|
132
|
-
color: var(--vaadin-crud-header-color, var(--vaadin-color));
|
|
133
|
-
font-size: var(--vaadin-crud-header-font-size, 1em);
|
|
134
|
-
font-weight: var(--vaadin-crud-header-font-weight, 600);
|
|
135
|
-
line-height: var(--vaadin-crud-header-line-height, inherit);
|
|
136
|
-
padding: var(--vaadin-crud-header-padding, var(--vaadin-padding));
|
|
134
|
+
color: var(--vaadin-crud-header-color, var(--vaadin-dialog-title-color, var(--vaadin-text-color)));
|
|
135
|
+
font-size: var(--vaadin-crud-header-font-size, var(--vaadin-dialog-title-font-size, 1em));
|
|
136
|
+
font-weight: var(--vaadin-crud-header-font-weight, var(--vaadin-dialog-title-font-weight, 600));
|
|
137
|
+
line-height: var(--vaadin-crud-header-line-height, var(--vaadin-dialog-title-line-height, inherit));
|
|
138
|
+
padding: var(--vaadin-crud-header-padding, var(--vaadin-dialog-padding, var(--vaadin-padding-l)));
|
|
137
139
|
}
|
|
138
140
|
|
|
139
141
|
::slotted([slot='header']) {
|
|
@@ -144,19 +146,26 @@ export const crudStyles = css`
|
|
|
144
146
|
}
|
|
145
147
|
|
|
146
148
|
::slotted([slot='form']) {
|
|
147
|
-
padding: var(--vaadin-crud-form-padding, var(--vaadin-padding));
|
|
149
|
+
padding: var(--vaadin-crud-form-padding, var(--vaadin-dialog-padding, var(--vaadin-padding-l)));
|
|
150
|
+
padding-top: 0;
|
|
148
151
|
}
|
|
149
152
|
|
|
150
153
|
[part='footer'] {
|
|
151
154
|
background: var(--vaadin-crud-footer-background, transparent);
|
|
152
|
-
border-top: var(--vaadin-crud-border-width, 1px) solid
|
|
155
|
+
border-top: var(--vaadin-crud-border-width, 1px) solid
|
|
156
|
+
var(--vaadin-crud-border-color, var(--vaadin-border-color-secondary));
|
|
153
157
|
display: flex;
|
|
154
158
|
flex: none;
|
|
155
|
-
gap: var(--vaadin-crud-footer-gap, var(--vaadin-gap-
|
|
156
|
-
padding: var(--vaadin-crud-footer-padding, var(--vaadin-padding));
|
|
159
|
+
gap: var(--vaadin-crud-footer-gap, var(--vaadin-gap-s));
|
|
160
|
+
padding: var(--vaadin-crud-footer-padding, var(--vaadin-dialog-padding, var(--vaadin-padding-l)));
|
|
157
161
|
}
|
|
158
162
|
|
|
159
163
|
::slotted([slot='delete-button']) {
|
|
160
164
|
margin-inline-start: auto;
|
|
161
165
|
}
|
|
166
|
+
|
|
167
|
+
:host([theme~='no-border']) {
|
|
168
|
+
border: 0;
|
|
169
|
+
border-radius: 0;
|
|
170
|
+
}
|
|
162
171
|
`;
|
|
@@ -8,17 +8,17 @@
|
|
|
8
8
|
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
9
|
* license.
|
|
10
10
|
*/
|
|
11
|
-
import '@vaadin/component-base/src/style-props.js';
|
|
11
|
+
import '@vaadin/component-base/src/styles/style-props.js';
|
|
12
12
|
import { css } from 'lit';
|
|
13
13
|
import { dialogOverlayStyles } from '@vaadin/dialog/src/styles/vaadin-dialog-overlay-base-styles.js';
|
|
14
14
|
|
|
15
15
|
const crudDialogOverlay = css`
|
|
16
16
|
[part='header'] {
|
|
17
|
-
color: var(--vaadin-
|
|
18
|
-
font-size: var(--vaadin-
|
|
19
|
-
font-weight: var(--vaadin-
|
|
20
|
-
line-height: var(--vaadin-
|
|
21
|
-
padding: var(--vaadin-crud-header-padding, var(--vaadin-padding));
|
|
17
|
+
color: var(--vaadin-dialog-title-color, var(--vaadin-text-color));
|
|
18
|
+
font-size: var(--vaadin-dialog-title-font-size, 1em);
|
|
19
|
+
font-weight: var(--vaadin-dialog-title-font-weight, 600);
|
|
20
|
+
line-height: var(--vaadin-dialog-title-line-height, inherit);
|
|
21
|
+
padding: var(--vaadin-crud-header-padding, var(--vaadin-dialog-padding, var(--vaadin-padding-l)));
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
::slotted([slot='header']) {
|
|
@@ -31,7 +31,8 @@ const crudDialogOverlay = css`
|
|
|
31
31
|
:host(:is(*, #id)) [part='content'] {
|
|
32
32
|
overflow: auto;
|
|
33
33
|
overscroll-behavior: contain;
|
|
34
|
-
padding: var(--vaadin-crud-form-padding, var(--vaadin-padding));
|
|
34
|
+
padding: var(--vaadin-crud-form-padding, var(--vaadin-padding-l));
|
|
35
|
+
padding-top: 0;
|
|
35
36
|
}
|
|
36
37
|
|
|
37
38
|
::slotted([slot='form']) {
|
|
@@ -41,7 +42,8 @@ const crudDialogOverlay = css`
|
|
|
41
42
|
[part='footer'] {
|
|
42
43
|
justify-content: normal;
|
|
43
44
|
background: var(--vaadin-crud-footer-background, transparent);
|
|
44
|
-
border-top: var(--vaadin-crud-border-width, 1px) solid
|
|
45
|
+
border-top: var(--vaadin-crud-border-width, 1px) solid
|
|
46
|
+
var(--vaadin-crud-border-color, var(--vaadin-border-color-secondary));
|
|
45
47
|
}
|
|
46
48
|
`;
|
|
47
49
|
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
9
|
* license.
|
|
10
10
|
*/
|
|
11
|
-
import '@vaadin/component-base/src/style-props.js';
|
|
11
|
+
import '@vaadin/component-base/src/styles/style-props.js';
|
|
12
12
|
import { css } from 'lit';
|
|
13
13
|
|
|
14
14
|
export const crudEditStyles = css`
|
|
@@ -16,7 +16,7 @@ export const crudEditStyles = css`
|
|
|
16
16
|
background: currentColor;
|
|
17
17
|
display: block;
|
|
18
18
|
height: var(--vaadin-icon-size, 1lh);
|
|
19
|
-
mask
|
|
19
|
+
mask: var(--_vaadin-icon-pen) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
|
|
20
20
|
width: var(--vaadin-icon-size, 1lh);
|
|
21
21
|
}
|
|
22
22
|
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
9
|
* license.
|
|
10
10
|
*/
|
|
11
|
-
import '@vaadin/component-base/src/style-props.js';
|
|
11
|
+
import '@vaadin/component-base/src/styles/style-props.js';
|
|
12
12
|
import { css } from 'lit';
|
|
13
13
|
import { gridStyles } from '@vaadin/grid/src/styles/vaadin-grid-base-styles.js';
|
|
14
14
|
|
|
@@ -12,14 +12,13 @@ import { css, html, LitElement } from 'lit';
|
|
|
12
12
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
13
13
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
14
14
|
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
|
|
15
|
-
import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
|
|
16
15
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
17
16
|
import { DialogBaseMixin } from '@vaadin/dialog/src/vaadin-dialog-base-mixin.js';
|
|
18
17
|
import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
|
|
19
18
|
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
|
|
20
19
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
21
20
|
import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
|
|
22
|
-
import { crudDialogOverlayStyles } from './styles/vaadin-crud-dialog-overlay-
|
|
21
|
+
import { crudDialogOverlayStyles } from './styles/vaadin-crud-dialog-overlay-base-styles.js';
|
|
23
22
|
|
|
24
23
|
/**
|
|
25
24
|
* An element used internally by `<vaadin-crud>`. Not intended to be used separately.
|
|
@@ -41,19 +40,20 @@ class CrudDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin
|
|
|
41
40
|
}
|
|
42
41
|
|
|
43
42
|
/**
|
|
44
|
-
* Override method from OverlayFocusMixin to use
|
|
43
|
+
* Override method from OverlayFocusMixin to use dialog as focus trap root
|
|
45
44
|
* @protected
|
|
46
45
|
* @override
|
|
47
46
|
*/
|
|
48
|
-
get
|
|
49
|
-
|
|
47
|
+
get _focusTrapRoot() {
|
|
48
|
+
// Do not use `owner` since that points to `vaadin-crud`
|
|
49
|
+
return this.getRootNode().host;
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
/** @protected */
|
|
53
53
|
render() {
|
|
54
54
|
return html`
|
|
55
55
|
<div part="backdrop" id="backdrop" ?hidden="${!this.withBackdrop}"></div>
|
|
56
|
-
<div part="overlay" id="overlay"
|
|
56
|
+
<div part="overlay" id="overlay">
|
|
57
57
|
<section id="resizerContainer" class="resizer-container">
|
|
58
58
|
<header part="header">
|
|
59
59
|
<slot name="header"></slot>
|
|
@@ -90,7 +90,7 @@ defineCustomElement(CrudDialogOverlay);
|
|
|
90
90
|
* An element used internally by `<vaadin-crud>`. Not intended to be used separately.
|
|
91
91
|
* @private
|
|
92
92
|
*/
|
|
93
|
-
class CrudDialog extends DialogBaseMixin(
|
|
93
|
+
class CrudDialog extends DialogBaseMixin(ThemePropertyMixin(PolylitMixin(LitElement))) {
|
|
94
94
|
static get is() {
|
|
95
95
|
return 'vaadin-crud-dialog';
|
|
96
96
|
}
|
|
@@ -100,13 +100,18 @@ class CrudDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(Po
|
|
|
100
100
|
:host([opened]),
|
|
101
101
|
:host([opening]),
|
|
102
102
|
:host([closing]) {
|
|
103
|
-
display:
|
|
103
|
+
display: block !important;
|
|
104
|
+
position: absolute;
|
|
104
105
|
}
|
|
105
106
|
|
|
106
107
|
:host,
|
|
107
108
|
:host([hidden]) {
|
|
108
109
|
display: none !important;
|
|
109
110
|
}
|
|
111
|
+
|
|
112
|
+
:host(:focus-visible) ::part(overlay) {
|
|
113
|
+
outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
|
|
114
|
+
}
|
|
110
115
|
`;
|
|
111
116
|
}
|
|
112
117
|
|
|
@@ -39,12 +39,12 @@ class CrudEditColumn extends GridColumn {
|
|
|
39
39
|
static get properties() {
|
|
40
40
|
return {
|
|
41
41
|
/**
|
|
42
|
-
*
|
|
42
|
+
* Automatically sets the width of the column based on the column contents when this is set to `true`.
|
|
43
43
|
* @private
|
|
44
44
|
*/
|
|
45
|
-
|
|
46
|
-
type:
|
|
47
|
-
value:
|
|
45
|
+
autoWidth: {
|
|
46
|
+
type: Boolean,
|
|
47
|
+
value: true,
|
|
48
48
|
},
|
|
49
49
|
|
|
50
50
|
/**
|
package/src/vaadin-crud-edit.js
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
import { html } from 'lit';
|
|
12
12
|
import { Button } from '@vaadin/button/src/vaadin-button.js';
|
|
13
13
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
14
|
-
import { crudEditStyles } from './styles/vaadin-crud-edit-
|
|
14
|
+
import { crudEditStyles } from './styles/vaadin-crud-edit-base-styles.js';
|
|
15
15
|
|
|
16
16
|
/**
|
|
17
17
|
* `<vaadin-crud-edit>` is a helper element for `<vaadin-grid-column>` that provides
|
|
@@ -22,8 +22,7 @@ import { crudEditStyles } from './styles/vaadin-crud-edit-core-styles.js';
|
|
|
22
22
|
* a `<vaadin-crud>` to enable editing.
|
|
23
23
|
*
|
|
24
24
|
* @customElement
|
|
25
|
-
* @extends
|
|
26
|
-
* @mixes ThemableMixin
|
|
25
|
+
* @extends Button
|
|
27
26
|
*/
|
|
28
27
|
class CrudEdit extends Button {
|
|
29
28
|
static get is() {
|
package/src/vaadin-crud-grid.js
CHANGED
|
@@ -15,7 +15,7 @@ import '@vaadin/grid/src/vaadin-grid-sorter.js';
|
|
|
15
15
|
import './vaadin-crud-edit-column.js';
|
|
16
16
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
17
17
|
import { Grid } from '@vaadin/grid/src/vaadin-grid.js';
|
|
18
|
-
import { crudGridStyles } from './styles/vaadin-crud-grid-
|
|
18
|
+
import { crudGridStyles } from './styles/vaadin-crud-grid-base-styles.js';
|
|
19
19
|
import { CrudGridMixin } from './vaadin-crud-grid-mixin.js';
|
|
20
20
|
|
|
21
21
|
/**
|
package/src/vaadin-crud-mixin.js
CHANGED
package/src/vaadin-crud.js
CHANGED
|
@@ -20,7 +20,7 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
|
20
20
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
21
21
|
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
|
|
22
22
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
23
|
-
import { crudStyles } from './styles/vaadin-crud-
|
|
23
|
+
import { crudStyles } from './styles/vaadin-crud-base-styles.js';
|
|
24
24
|
import { CrudMixin } from './vaadin-crud-mixin.js';
|
|
25
25
|
|
|
26
26
|
/**
|
package/vaadin-crud.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import './
|
|
1
|
+
import './src/vaadin-crud.js';
|
|
2
2
|
export * from './src/vaadin-crud.js';
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/crud",
|
|
4
|
-
"version": "25.0.0-
|
|
4
|
+
"version": "25.0.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -10,6 +10,17 @@
|
|
|
10
10
|
"name": "vaadin-crud-edit",
|
|
11
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
12
|
"attributes": [
|
|
13
|
+
{
|
|
14
|
+
"name": "disabled",
|
|
15
|
+
"description": "When disabled, the button is rendered as \"dimmed\" and prevents all\nuser interactions (mouse and keyboard).\n\nSince disabled buttons are not focusable and cannot react to hover\nevents by default, it can cause accessibility issues by making them\nentirely invisible to assistive technologies, and prevents the use\nof Tooltips to explain why the action is not available. This can be\naddressed by enabling the feature flag `accessibleDisabledButtons`,\nwhich makes disabled buttons focusable and hoverable, while still\npreventing them from being triggered:\n\n```js\n// Set before any button is attached to the DOM.\nwindow.Vaadin.featureFlags.accessibleDisabledButtons = true\n```",
|
|
16
|
+
"value": {
|
|
17
|
+
"type": [
|
|
18
|
+
"boolean",
|
|
19
|
+
"null",
|
|
20
|
+
"undefined"
|
|
21
|
+
]
|
|
22
|
+
}
|
|
23
|
+
},
|
|
13
24
|
{
|
|
14
25
|
"name": "theme",
|
|
15
26
|
"description": "The theme variants to apply to the component.",
|
|
@@ -23,7 +34,19 @@
|
|
|
23
34
|
}
|
|
24
35
|
],
|
|
25
36
|
"js": {
|
|
26
|
-
"properties": [
|
|
37
|
+
"properties": [
|
|
38
|
+
{
|
|
39
|
+
"name": "disabled",
|
|
40
|
+
"description": "When disabled, the button is rendered as \"dimmed\" and prevents all\nuser interactions (mouse and keyboard).\n\nSince disabled buttons are not focusable and cannot react to hover\nevents by default, it can cause accessibility issues by making them\nentirely invisible to assistive technologies, and prevents the use\nof Tooltips to explain why the action is not available. This can be\naddressed by enabling the feature flag `accessibleDisabledButtons`,\nwhich makes disabled buttons focusable and hoverable, while still\npreventing them from being triggered:\n\n```js\n// Set before any button is attached to the DOM.\nwindow.Vaadin.featureFlags.accessibleDisabledButtons = true\n```",
|
|
41
|
+
"value": {
|
|
42
|
+
"type": [
|
|
43
|
+
"boolean",
|
|
44
|
+
"null",
|
|
45
|
+
"undefined"
|
|
46
|
+
]
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
],
|
|
27
50
|
"events": [
|
|
28
51
|
{
|
|
29
52
|
"name": "edit",
|
|
@@ -310,33 +333,35 @@
|
|
|
310
333
|
}
|
|
311
334
|
},
|
|
312
335
|
{
|
|
313
|
-
"name": "
|
|
314
|
-
"description": "
|
|
336
|
+
"name": "width",
|
|
337
|
+
"description": "Width of the cells for this column.\n\nPlease note that using the `em` length unit is discouraged as\nit might lead to misalignment issues if the header, body, and footer\ncells have different font sizes. Instead, use `rem` if you need\na length unit relative to the font size.",
|
|
315
338
|
"value": {
|
|
316
339
|
"type": [
|
|
317
|
-
"
|
|
340
|
+
"string",
|
|
318
341
|
"null",
|
|
319
342
|
"undefined"
|
|
320
343
|
]
|
|
321
344
|
}
|
|
322
345
|
},
|
|
323
346
|
{
|
|
324
|
-
"name": "
|
|
325
|
-
"description": "
|
|
347
|
+
"name": "renderer",
|
|
348
|
+
"description": "Custom function for rendering the cell content.\nReceives three arguments:\n\n- `root` The cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.\n- `model` The object with the properties related with\n the rendered item, contains:\n - `model.index` The index of the item.\n - `model.item` The item.\n - `model.expanded` Sublevel toggle state.\n - `model.level` Level of the tree represented with a horizontal offset of the toggle button.\n - `model.selected` Selected state.\n - `model.detailsOpened` Details opened state.\n - `model.hasChildren` Whether the item has children.",
|
|
326
349
|
"value": {
|
|
327
350
|
"type": [
|
|
328
|
-
"
|
|
351
|
+
"GridBodyRenderer",
|
|
329
352
|
"null",
|
|
330
353
|
"undefined"
|
|
331
354
|
]
|
|
332
355
|
}
|
|
333
356
|
},
|
|
334
357
|
{
|
|
335
|
-
"name": "
|
|
336
|
-
"description": "
|
|
358
|
+
"name": "path",
|
|
359
|
+
"description": "Path to an item sub-property whose value gets displayed in the column body cells.\nThe property name is also shown in the column header if an explicit header or renderer isn't defined.",
|
|
337
360
|
"value": {
|
|
338
361
|
"type": [
|
|
339
|
-
"
|
|
362
|
+
"string",
|
|
363
|
+
"null",
|
|
364
|
+
"undefined"
|
|
340
365
|
]
|
|
341
366
|
}
|
|
342
367
|
},
|
|
@@ -357,7 +382,7 @@
|
|
|
357
382
|
},
|
|
358
383
|
{
|
|
359
384
|
"name": "vaadin-crud",
|
|
360
|
-
"description": "`<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-
|
|
385
|
+
"description": "`<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta1/#/elements/vaadin-crud#property-items) property.\n\nA grid and an editor will be automatically generated and configured based on the data structure provided.\n\n```html\n<vaadin-crud></vaadin-crud>\n```\n```js\nconst crud = document.querySelector('vaadin-crud');\n\ncrud.items = [\n { name: 'John', surname: 'Lennon', role: 'singer' },\n { name: 'Ringo', surname: 'Starr', role: 'drums' },\n // ... more items\n];\n```\n\n### Data Provider Function\n\nOtherwise, you can provide a [`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta1/#/elements/vaadin-crud#property-dataProvider) function.\n\n```js\nconst crud = document.querySelector('vaadin-crud');\n\nconst users = [\n { name: 'John', surname: 'Lennon', role: 'singer' },\n { name: 'Ringo', surname: 'Starr', role: 'drums' },\n // ... more items\n];\n\ncrud.dataProvider = (params, callback) => {\n const chunk = users.slice(params.page * params.pageSize, params.page * params.pageSize + params.pageSize);\n callback(chunk, people.length);\n};\n```\n\nNOTE: The auto-generated editor only supports string types. If you need to handle special cases\ncustomizing the editor is discussed below.\n\n### Customization\n\nAlternatively you can fully configure the component by using `slot` names.\n\nSlot name | Description\n---------------|----------------\n`grid` | To replace the auto-generated grid with a custom one.\n`form` | To replace the auto-generated form.\n`save-button` | To replace the \"Save\" button.\n`cancel-button`| To replace the \"Cancel\" button.\n`delete-button`| To replace the \"Delete\" button.\n`toolbar` | To provide the toolbar content (by default, it's empty).\n`new-button` | To replace the \"New item\" button.\n\n#### Example:\n\n```html\n<vaadin-crud id=\"crud\">\n <vaadin-grid slot=\"grid\">\n <vaadin-crud-edit-column></vaadin-crud-edit-column>\n <vaadin-grid-column id=\"column1\"></vaadin-grid-column>\n <vaadin-grid-column id=\"column2\"></vaadin-grid-column>\n </vaadin-grid>\n\n <vaadin-form-layout slot=\"form\">\n <vaadin-text-field label=\"First\" path=\"name\"></vaadin-text-field>\n <vaadin-text-field label=\"Surname\" path=\"surname\"></vaadin-text-field>\n </vaadin-form-layout>\n\n <div slot=\"toolbar\">Total singers: 2</div>\n <button slot=\"new-button\">New singer</button>\n\n <button slot=\"save-button\">Save changes</button>\n <button slot=\"cancel-button\">Discard changes</button>\n <button slot=\"delete-button\">Delete singer</button>\n</vaadin-crud>\n```\n```js\nconst crud = document.querySelector('#crud');\n\nconst column1 = document.querySelector('#column1');\ncolumn1.headerRenderer = (root, column) => {\n root.textContent = 'Name';\n};\ncolumn1.renderer = (root, column, model) => {\n root.textContent = model.item.name;\n};\n\nconst column2 = document.querySelector('#column2');\ncolumn2.headerRenderer = (root, column) => {\n root.textContent = 'Surname';\n};\ncolumn2.renderer = (root, column, model) => {\n root.textContent = model.item.surname;\n};\n\ncrud.items = [\n { name: 'John', surname: 'Lennon', role: 'singer' },\n { name: 'Ringo', surname: 'Starr', role: 'drums' },\n // ... more items\n];\n```\n\n### Helpers\n\nThe following elements are used to auto-configure the grid and the editor\n- [`<vaadin-crud-edit-column>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta1/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta1/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta1/#/elements/vaadin-form-layout)\n\n### Styling\n\nThe following shadow DOM parts are available for styling when the editor is rendered next to, or below, the grid:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom of the grid. By default, it contains the `new` button\n`editor` | The editor container\n`scroller` | The wrapper for the header and the form\n`header` | The header of the editor\n`footer` | The footer of the editor\n\nThe following shadow DOM parts are available for styling when the editor renders as a dialog:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom of the grid. By default, it contains the `new` button\n`overlay` | The dialog overlay\n`backdrop` | The dialog backdrop\n`header` | The header of the dialog\n`footer` | The footer of the dialog\n`content` | The wrapper for the form\n\nThe following custom properties are available:\n\nCustom Property | Description | Default\n----------------|----------------\n--vaadin-crud-editor-max-height | max height of editor when opened on the bottom | 40%\n--vaadin-crud-editor-max-width | max width of editor when opened on the side | 40%\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
361
386
|
"attributes": [
|
|
362
387
|
{
|
|
363
388
|
"name": "i18n",
|
|
@@ -421,7 +446,7 @@
|
|
|
421
446
|
},
|
|
422
447
|
{
|
|
423
448
|
"name": "include",
|
|
424
|
-
"description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-
|
|
449
|
+
"description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta1/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
425
450
|
"value": {
|
|
426
451
|
"type": [
|
|
427
452
|
"string",
|
|
@@ -432,7 +457,7 @@
|
|
|
432
457
|
},
|
|
433
458
|
{
|
|
434
459
|
"name": "exclude",
|
|
435
|
-
"description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-
|
|
460
|
+
"description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta1/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
436
461
|
"value": {
|
|
437
462
|
"type": [
|
|
438
463
|
"string",
|
|
@@ -479,7 +504,7 @@
|
|
|
479
504
|
"properties": [
|
|
480
505
|
{
|
|
481
506
|
"name": "i18n",
|
|
482
|
-
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n\n
|
|
507
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n\n```js\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```",
|
|
483
508
|
"value": {
|
|
484
509
|
"type": [
|
|
485
510
|
"CrudI18n"
|
|
@@ -568,7 +593,7 @@
|
|
|
568
593
|
},
|
|
569
594
|
{
|
|
570
595
|
"name": "include",
|
|
571
|
-
"description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-
|
|
596
|
+
"description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta1/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
572
597
|
"value": {
|
|
573
598
|
"type": [
|
|
574
599
|
"string",
|
|
@@ -579,7 +604,7 @@
|
|
|
579
604
|
},
|
|
580
605
|
{
|
|
581
606
|
"name": "exclude",
|
|
582
|
-
"description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-
|
|
607
|
+
"description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta1/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
583
608
|
"value": {
|
|
584
609
|
"type": [
|
|
585
610
|
"string",
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/crud",
|
|
4
|
-
"version": "25.0.0-
|
|
4
|
+
"version": "25.0.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -19,6 +19,13 @@
|
|
|
19
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
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
|
+
{
|
|
23
|
+
"name": "?disabled",
|
|
24
|
+
"description": "When disabled, the button is rendered as \"dimmed\" and prevents all\nuser interactions (mouse and keyboard).\n\nSince disabled buttons are not focusable and cannot react to hover\nevents by default, it can cause accessibility issues by making them\nentirely invisible to assistive technologies, and prevents the use\nof Tooltips to explain why the action is not available. This can be\naddressed by enabling the feature flag `accessibleDisabledButtons`,\nwhich makes disabled buttons focusable and hoverable, while still\npreventing them from being triggered:\n\n```js\n// Set before any button is attached to the DOM.\nwindow.Vaadin.featureFlags.accessibleDisabledButtons = true\n```",
|
|
25
|
+
"value": {
|
|
26
|
+
"kind": "expression"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
22
29
|
{
|
|
23
30
|
"name": "@edit",
|
|
24
31
|
"description": "Fired when user on the icon.",
|
|
@@ -68,13 +75,6 @@
|
|
|
68
75
|
"kind": "expression"
|
|
69
76
|
}
|
|
70
77
|
},
|
|
71
|
-
{
|
|
72
|
-
"name": "?autoWidth",
|
|
73
|
-
"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.",
|
|
74
|
-
"value": {
|
|
75
|
-
"kind": "expression"
|
|
76
|
-
}
|
|
77
|
-
},
|
|
78
78
|
{
|
|
79
79
|
"name": ".header",
|
|
80
80
|
"description": "Text content to display in the header cell of the column.",
|
|
@@ -117,9 +117,16 @@
|
|
|
117
117
|
"kind": "expression"
|
|
118
118
|
}
|
|
119
119
|
},
|
|
120
|
+
{
|
|
121
|
+
"name": ".width",
|
|
122
|
+
"description": "Width of the cells for this column.\n\nPlease note that using the `em` length unit is discouraged as\nit might lead to misalignment issues if the header, body, and footer\ncells have different font sizes. Instead, use `rem` if you need\na length unit relative to the font size.",
|
|
123
|
+
"value": {
|
|
124
|
+
"kind": "expression"
|
|
125
|
+
}
|
|
126
|
+
},
|
|
120
127
|
{
|
|
121
128
|
"name": ".renderer",
|
|
122
|
-
"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.",
|
|
129
|
+
"description": "Custom function for rendering the cell content.\nReceives three arguments:\n\n- `root` The cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.\n- `model` The object with the properties related with\n the rendered item, contains:\n - `model.index` The index of the item.\n - `model.item` The item.\n - `model.expanded` Sublevel toggle state.\n - `model.level` Level of the tree represented with a horizontal offset of the toggle button.\n - `model.selected` Selected state.\n - `model.detailsOpened` Details opened state.\n - `model.hasChildren` Whether the item has children.",
|
|
123
130
|
"value": {
|
|
124
131
|
"kind": "expression"
|
|
125
132
|
}
|
|
@@ -142,7 +149,7 @@
|
|
|
142
149
|
},
|
|
143
150
|
{
|
|
144
151
|
"name": "vaadin-crud",
|
|
145
|
-
"description": "`<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-
|
|
152
|
+
"description": "`<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta1/#/elements/vaadin-crud#property-items) property.\n\nA grid and an editor will be automatically generated and configured based on the data structure provided.\n\n```html\n<vaadin-crud></vaadin-crud>\n```\n```js\nconst crud = document.querySelector('vaadin-crud');\n\ncrud.items = [\n { name: 'John', surname: 'Lennon', role: 'singer' },\n { name: 'Ringo', surname: 'Starr', role: 'drums' },\n // ... more items\n];\n```\n\n### Data Provider Function\n\nOtherwise, you can provide a [`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta1/#/elements/vaadin-crud#property-dataProvider) function.\n\n```js\nconst crud = document.querySelector('vaadin-crud');\n\nconst users = [\n { name: 'John', surname: 'Lennon', role: 'singer' },\n { name: 'Ringo', surname: 'Starr', role: 'drums' },\n // ... more items\n];\n\ncrud.dataProvider = (params, callback) => {\n const chunk = users.slice(params.page * params.pageSize, params.page * params.pageSize + params.pageSize);\n callback(chunk, people.length);\n};\n```\n\nNOTE: The auto-generated editor only supports string types. If you need to handle special cases\ncustomizing the editor is discussed below.\n\n### Customization\n\nAlternatively you can fully configure the component by using `slot` names.\n\nSlot name | Description\n---------------|----------------\n`grid` | To replace the auto-generated grid with a custom one.\n`form` | To replace the auto-generated form.\n`save-button` | To replace the \"Save\" button.\n`cancel-button`| To replace the \"Cancel\" button.\n`delete-button`| To replace the \"Delete\" button.\n`toolbar` | To provide the toolbar content (by default, it's empty).\n`new-button` | To replace the \"New item\" button.\n\n#### Example:\n\n```html\n<vaadin-crud id=\"crud\">\n <vaadin-grid slot=\"grid\">\n <vaadin-crud-edit-column></vaadin-crud-edit-column>\n <vaadin-grid-column id=\"column1\"></vaadin-grid-column>\n <vaadin-grid-column id=\"column2\"></vaadin-grid-column>\n </vaadin-grid>\n\n <vaadin-form-layout slot=\"form\">\n <vaadin-text-field label=\"First\" path=\"name\"></vaadin-text-field>\n <vaadin-text-field label=\"Surname\" path=\"surname\"></vaadin-text-field>\n </vaadin-form-layout>\n\n <div slot=\"toolbar\">Total singers: 2</div>\n <button slot=\"new-button\">New singer</button>\n\n <button slot=\"save-button\">Save changes</button>\n <button slot=\"cancel-button\">Discard changes</button>\n <button slot=\"delete-button\">Delete singer</button>\n</vaadin-crud>\n```\n```js\nconst crud = document.querySelector('#crud');\n\nconst column1 = document.querySelector('#column1');\ncolumn1.headerRenderer = (root, column) => {\n root.textContent = 'Name';\n};\ncolumn1.renderer = (root, column, model) => {\n root.textContent = model.item.name;\n};\n\nconst column2 = document.querySelector('#column2');\ncolumn2.headerRenderer = (root, column) => {\n root.textContent = 'Surname';\n};\ncolumn2.renderer = (root, column, model) => {\n root.textContent = model.item.surname;\n};\n\ncrud.items = [\n { name: 'John', surname: 'Lennon', role: 'singer' },\n { name: 'Ringo', surname: 'Starr', role: 'drums' },\n // ... more items\n];\n```\n\n### Helpers\n\nThe following elements are used to auto-configure the grid and the editor\n- [`<vaadin-crud-edit-column>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta1/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta1/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta1/#/elements/vaadin-form-layout)\n\n### Styling\n\nThe following shadow DOM parts are available for styling when the editor is rendered next to, or below, the grid:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom of the grid. By default, it contains the `new` button\n`editor` | The editor container\n`scroller` | The wrapper for the header and the form\n`header` | The header of the editor\n`footer` | The footer of the editor\n\nThe following shadow DOM parts are available for styling when the editor renders as a dialog:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom of the grid. By default, it contains the `new` button\n`overlay` | The dialog overlay\n`backdrop` | The dialog backdrop\n`header` | The header of the dialog\n`footer` | The footer of the dialog\n`content` | The wrapper for the form\n\nThe following custom properties are available:\n\nCustom Property | Description | Default\n----------------|----------------\n--vaadin-crud-editor-max-height | max height of editor when opened on the bottom | 40%\n--vaadin-crud-editor-max-width | max width of editor when opened on the side | 40%\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
146
153
|
"extension": true,
|
|
147
154
|
"attributes": [
|
|
148
155
|
{
|
|
@@ -189,7 +196,7 @@
|
|
|
189
196
|
},
|
|
190
197
|
{
|
|
191
198
|
"name": ".i18n",
|
|
192
|
-
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n\n
|
|
199
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n\n```js\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```",
|
|
193
200
|
"value": {
|
|
194
201
|
"kind": "expression"
|
|
195
202
|
}
|
|
@@ -224,14 +231,14 @@
|
|
|
224
231
|
},
|
|
225
232
|
{
|
|
226
233
|
"name": ".include",
|
|
227
|
-
"description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-
|
|
234
|
+
"description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta1/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
228
235
|
"value": {
|
|
229
236
|
"kind": "expression"
|
|
230
237
|
}
|
|
231
238
|
},
|
|
232
239
|
{
|
|
233
240
|
"name": ".exclude",
|
|
234
|
-
"description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-
|
|
241
|
+
"description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta1/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
235
242
|
"value": {
|
|
236
243
|
"kind": "expression"
|
|
237
244
|
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2000 - 2025 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 type { CSSResult } from 'lit';
|
|
12
|
-
|
|
13
|
-
export const crudStyles: CSSResult;
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2000 - 2025 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 { css } from 'lit';
|
|
12
|
-
|
|
13
|
-
export const crudStyles = css`
|
|
14
|
-
:host {
|
|
15
|
-
width: 100%;
|
|
16
|
-
height: 400px;
|
|
17
|
-
--vaadin-crud-editor-max-height: 40%;
|
|
18
|
-
--vaadin-crud-editor-max-width: 40%;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
:host,
|
|
22
|
-
#main {
|
|
23
|
-
display: flex;
|
|
24
|
-
flex-direction: column;
|
|
25
|
-
align-self: stretch;
|
|
26
|
-
position: relative;
|
|
27
|
-
overflow: hidden;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
#main {
|
|
31
|
-
flex: 1 1 100%;
|
|
32
|
-
height: 100%;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
:host([hidden]),
|
|
36
|
-
[hidden] {
|
|
37
|
-
display: none !important;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
[part='toolbar'] {
|
|
41
|
-
display: flex;
|
|
42
|
-
flex-shrink: 0;
|
|
43
|
-
align-items: baseline;
|
|
44
|
-
justify-content: flex-end;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
:host([no-toolbar]) [part='toolbar'] {
|
|
48
|
-
display: none;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
#container {
|
|
52
|
-
display: flex;
|
|
53
|
-
height: 100%;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
:host([editor-position='bottom']) #container {
|
|
57
|
-
flex-direction: column;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
[part='editor'] {
|
|
61
|
-
z-index: 1;
|
|
62
|
-
display: flex;
|
|
63
|
-
flex-direction: column;
|
|
64
|
-
height: 100%;
|
|
65
|
-
outline: none;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
:host(:not([editor-position=''])[editor-opened]:not([fullscreen])) [part='editor'] {
|
|
69
|
-
flex: 1 0 100%;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
:host([editor-position='bottom'][editor-opened]:not([fullscreen])) [part='editor'] {
|
|
73
|
-
max-height: var(--vaadin-crud-editor-max-height);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
:host([editor-position='aside'][editor-opened]:not([fullscreen])) [part='editor'] {
|
|
77
|
-
min-width: 300px;
|
|
78
|
-
max-width: var(--vaadin-crud-editor-max-width);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
[part='scroller'] {
|
|
82
|
-
display: flex;
|
|
83
|
-
flex-direction: column;
|
|
84
|
-
overflow: auto;
|
|
85
|
-
flex: auto;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
[part='footer'] {
|
|
89
|
-
display: flex;
|
|
90
|
-
flex: none;
|
|
91
|
-
flex-direction: row-reverse;
|
|
92
|
-
}
|
|
93
|
-
`;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2000 - 2025 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 type { CSSResult } from 'lit';
|
|
12
|
-
|
|
13
|
-
export declare const crudDialogOverlayStyles: CSSResult;
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2000 - 2025 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 { css } from 'lit';
|
|
12
|
-
import { dialogOverlayBase } from '@vaadin/dialog/src/styles/vaadin-dialog-overlay-core-styles.js';
|
|
13
|
-
import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-core-styles.js';
|
|
14
|
-
|
|
15
|
-
const crudDialogOverlay = css`
|
|
16
|
-
[part='overlay'] {
|
|
17
|
-
max-width: 54em;
|
|
18
|
-
min-width: 20em;
|
|
19
|
-
display: flex;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.resizer-container {
|
|
23
|
-
display: flex;
|
|
24
|
-
flex-direction: column;
|
|
25
|
-
flex-grow: 1;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
[part='footer'] {
|
|
29
|
-
justify-content: flex-start;
|
|
30
|
-
flex-direction: row-reverse;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
/* Make buttons clickable */
|
|
34
|
-
[part='footer'] ::slotted(:not([disabled])) {
|
|
35
|
-
pointer-events: all;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
:host([fullscreen]) {
|
|
39
|
-
inset: 0;
|
|
40
|
-
padding: 0;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
:host([fullscreen]) [part='overlay'] {
|
|
44
|
-
height: 100vh;
|
|
45
|
-
width: 100vw;
|
|
46
|
-
border-radius: 0 !important;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
:host([fullscreen]) [part='content'] {
|
|
50
|
-
flex: 1;
|
|
51
|
-
}
|
|
52
|
-
`;
|
|
53
|
-
|
|
54
|
-
export const crudDialogOverlayStyles = [overlayStyles, dialogOverlayBase, crudDialogOverlay];
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2000 - 2025 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 { css } from 'lit';
|
|
12
|
-
|
|
13
|
-
export const crudEditStyles = css`
|
|
14
|
-
:host {
|
|
15
|
-
display: block;
|
|
16
|
-
}
|
|
17
|
-
`;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2000 - 2025 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 type { CSSResult } from 'lit';
|
|
12
|
-
|
|
13
|
-
export const crudGridStyles: CSSResult;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2000 - 2025 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 { gridStyles } from '@vaadin/grid/src/styles/vaadin-grid-core-styles.js';
|
|
12
|
-
|
|
13
|
-
export const crudGridStyles = [gridStyles];
|
|
@@ -1,155 +0,0 @@
|
|
|
1
|
-
import '@vaadin/vaadin-lumo-styles/typography.js';
|
|
2
|
-
import '@vaadin/vaadin-lumo-styles/color.js';
|
|
3
|
-
import '@vaadin/vaadin-lumo-styles/font-icons.js';
|
|
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';
|
|
7
|
-
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
8
|
-
|
|
9
|
-
registerStyles(
|
|
10
|
-
'vaadin-crud-edit',
|
|
11
|
-
css`
|
|
12
|
-
:host {
|
|
13
|
-
min-width: auto;
|
|
14
|
-
margin: 0;
|
|
15
|
-
font-family: 'lumo-icons', var(--lumo-font-family);
|
|
16
|
-
font-size: var(--lumo-icon-size-m);
|
|
17
|
-
line-height: 1;
|
|
18
|
-
position: relative;
|
|
19
|
-
width: var(--lumo-size-s);
|
|
20
|
-
height: var(--lumo-size-s);
|
|
21
|
-
outline: none;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
[part='icon']::before {
|
|
25
|
-
content: var(--lumo-icons-edit);
|
|
26
|
-
width: var(--lumo-size-m);
|
|
27
|
-
height: var(--lumo-size-m);
|
|
28
|
-
line-height: var(--lumo-size-m);
|
|
29
|
-
text-align: center;
|
|
30
|
-
position: absolute;
|
|
31
|
-
top: calc((var(--lumo-size-m) - var(--lumo-size-s)) / -2);
|
|
32
|
-
left: calc((var(--lumo-size-m) - var(--lumo-size-s)) / -2);
|
|
33
|
-
}
|
|
34
|
-
`,
|
|
35
|
-
{ moduleId: 'lumo-crud-grid-edit' },
|
|
36
|
-
);
|
|
37
|
-
|
|
38
|
-
/**
|
|
39
|
-
* Shared styles used for the CRUD editor content and buttons regardless of `editorPosition`.
|
|
40
|
-
* They are applied to both `vaadin-crud` and `vaadin-crud-dialog-overlay` components.
|
|
41
|
-
*/
|
|
42
|
-
const editorStyles = css`
|
|
43
|
-
[part='header'] ::slotted(h3) {
|
|
44
|
-
margin-top: 0 !important;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
:host(:not([dir='rtl'])) ::slotted([slot='delete-button']) {
|
|
48
|
-
margin-right: auto;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
:host([dir='rtl']) ::slotted([slot='delete-button']) {
|
|
52
|
-
margin-left: auto;
|
|
53
|
-
}
|
|
54
|
-
`;
|
|
55
|
-
|
|
56
|
-
registerStyles(
|
|
57
|
-
'vaadin-crud',
|
|
58
|
-
[
|
|
59
|
-
editorStyles,
|
|
60
|
-
css`
|
|
61
|
-
:host {
|
|
62
|
-
font-family: var(--lumo-font-family);
|
|
63
|
-
--_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
|
|
64
|
-
--_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
[part='scroller'] {
|
|
68
|
-
padding: var(--lumo-space-l);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
[part='toolbar'] {
|
|
72
|
-
padding: var(--lumo-space-s) var(--lumo-space-m);
|
|
73
|
-
background-color: var(--lumo-contrast-5pct);
|
|
74
|
-
border: 1px solid var(--lumo-contrast-10pct);
|
|
75
|
-
border-top: none;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
:host(:not([dir='rtl'])) [part='toolbar'] ::slotted(*:not(:first-child)) {
|
|
79
|
-
margin-left: var(--lumo-space-s);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
:host([dir='rtl']) [part='toolbar'] ::slotted(*:not(:first-child)) {
|
|
83
|
-
margin-right: var(--lumo-space-s);
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
:host([theme~='no-border']) [part='toolbar'] {
|
|
87
|
-
border: 0;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
[part='footer'] {
|
|
91
|
-
background-color: var(--lumo-contrast-5pct);
|
|
92
|
-
padding: var(--lumo-space-s);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
[part='footer'] ::slotted(*) {
|
|
96
|
-
margin-left: var(--lumo-space-s);
|
|
97
|
-
margin-right: var(--lumo-space-s);
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
[part='editor'] {
|
|
101
|
-
background: var(--lumo-base-color);
|
|
102
|
-
box-sizing: border-box;
|
|
103
|
-
position: relative;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
[part='editor']:focus::before {
|
|
107
|
-
position: absolute;
|
|
108
|
-
inset: 0;
|
|
109
|
-
content: '';
|
|
110
|
-
box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
|
|
111
|
-
pointer-events: none;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
:host(:not([editor-position=''])) [part='editor']:not([hidden]) {
|
|
115
|
-
box-shadow: var(--lumo-box-shadow-m);
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
:host(:not([theme~='no-border']):not([editor-position=''])) [part='editor']:not([hidden]) {
|
|
119
|
-
border: 1px solid var(--lumo-contrast-20pct);
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
:host(:not([theme~='no-border'])[editor-position='bottom']) [part='editor']:not([hidden]) {
|
|
123
|
-
border-top: 0;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
:host(:not([dir='rtl'])[editor-position='aside']) [part='editor']:not([hidden]) {
|
|
127
|
-
border-left: 0;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
:host([dir='rtl']:not([theme~='no-border'])[editor-position='aside']) [part='editor']:not([hidden]) {
|
|
131
|
-
border-right: 0;
|
|
132
|
-
}
|
|
133
|
-
`,
|
|
134
|
-
],
|
|
135
|
-
{ moduleId: 'lumo-crud' },
|
|
136
|
-
);
|
|
137
|
-
|
|
138
|
-
registerStyles(
|
|
139
|
-
'vaadin-crud-dialog-overlay',
|
|
140
|
-
[
|
|
141
|
-
overlay,
|
|
142
|
-
dialogOverlay,
|
|
143
|
-
editorStyles,
|
|
144
|
-
css`
|
|
145
|
-
[part='header'] ::slotted(h3) {
|
|
146
|
-
margin-top: 0 !important;
|
|
147
|
-
margin-bottom: 0 !important;
|
|
148
|
-
margin-inline-start: var(--lumo-space-s);
|
|
149
|
-
}
|
|
150
|
-
`,
|
|
151
|
-
],
|
|
152
|
-
{
|
|
153
|
-
moduleId: 'lumo-crud-dialog-overlay',
|
|
154
|
-
},
|
|
155
|
-
);
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import '@vaadin/button/theme/lumo/vaadin-button.js';
|
|
2
|
-
import '@vaadin/confirm-dialog/theme/lumo/vaadin-confirm-dialog.js';
|
|
3
|
-
import '@vaadin/form-layout/theme/lumo/vaadin-form-layout.js';
|
|
4
|
-
import '@vaadin/grid/theme/lumo/vaadin-grid.js';
|
|
5
|
-
import '@vaadin/grid/theme/lumo/vaadin-grid-sorter.js';
|
|
6
|
-
import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
|
|
7
|
-
import './vaadin-crud-styles.js';
|
|
8
|
-
import '../../src/vaadin-crud.js';
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import '@vaadin/button/theme/lumo/vaadin-button.js';
|
|
2
|
-
import '@vaadin/confirm-dialog/theme/lumo/vaadin-confirm-dialog.js';
|
|
3
|
-
import '@vaadin/form-layout/theme/lumo/vaadin-form-layout.js';
|
|
4
|
-
import '@vaadin/grid/theme/lumo/vaadin-grid.js';
|
|
5
|
-
import '@vaadin/grid/theme/lumo/vaadin-grid-sorter.js';
|
|
6
|
-
import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
|
|
7
|
-
import './vaadin-crud-styles.js';
|
|
8
|
-
import '../../src/vaadin-crud.js';
|