@vaadin/dialog 25.0.0-alpha8 → 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 +11 -14
- package/src/styles/vaadin-dialog-overlay-base-styles.js +13 -10
- package/src/vaadin-dialog-base-mixin.d.ts +9 -10
- package/src/vaadin-dialog-base-mixin.js +33 -11
- package/src/vaadin-dialog-draggable-mixin.js +2 -1
- package/src/vaadin-dialog-overlay-mixin.js +32 -19
- package/src/vaadin-dialog-overlay.js +11 -2
- package/src/vaadin-dialog-renderer-mixin.d.ts +3 -3
- package/src/vaadin-dialog-renderer-mixin.js +3 -3
- package/src/vaadin-dialog-size-mixin.d.ts +2 -2
- package/src/vaadin-dialog-size-mixin.js +2 -2
- package/src/vaadin-dialog.d.ts +5 -21
- package/src/vaadin-dialog.js +35 -33
- package/vaadin-dialog.js +1 -1
- package/web-types.json +18 -62
- package/web-types.lit.json +11 -25
- package/src/styles/vaadin-dialog-overlay-core-styles.d.ts +0 -10
- package/src/styles/vaadin-dialog-overlay-core-styles.js +0 -184
- package/theme/lumo/vaadin-dialog-styles.d.ts +0 -3
- package/theme/lumo/vaadin-dialog-styles.js +0 -109
- package/theme/lumo/vaadin-dialog.d.ts +0 -2
- package/theme/lumo/vaadin-dialog.js +0 -2
package/src/vaadin-dialog.js
CHANGED
|
@@ -8,7 +8,6 @@ import { css, html, LitElement } from 'lit';
|
|
|
8
8
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
9
9
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
10
10
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
11
|
-
import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
|
|
12
11
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
13
12
|
import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
|
|
14
13
|
import { DialogBaseMixin } from './vaadin-dialog-base-mixin.js';
|
|
@@ -48,16 +47,13 @@ export { DialogOverlay } from './vaadin-dialog-overlay.js';
|
|
|
48
47
|
*
|
|
49
48
|
* ### Styling
|
|
50
49
|
*
|
|
51
|
-
*
|
|
52
|
-
* themable component as the actual visible dialog overlay.
|
|
53
|
-
*
|
|
54
|
-
* See [`<vaadin-overlay>`](#/elements/vaadin-overlay) documentation.
|
|
55
|
-
* for `<vaadin-dialog-overlay>` parts.
|
|
56
|
-
*
|
|
57
|
-
* In addition to `<vaadin-overlay>` parts, the following parts are available for styling:
|
|
50
|
+
* The following shadow DOM parts are available for styling:
|
|
58
51
|
*
|
|
59
52
|
* Part name | Description
|
|
60
53
|
* -----------------|-------------------------------------------
|
|
54
|
+
* `backdrop` | Backdrop of the overlay
|
|
55
|
+
* `overlay` | The overlay container
|
|
56
|
+
* `content` | The overlay content
|
|
61
57
|
* `header` | Element wrapping title and header content
|
|
62
58
|
* `header-content` | Element wrapping the header content slot
|
|
63
59
|
* `title` | Element wrapping the title slot
|
|
@@ -72,9 +68,6 @@ export { DialogOverlay } from './vaadin-dialog-overlay.js';
|
|
|
72
68
|
* `has-footer` | Set when the element has footer renderer
|
|
73
69
|
* `overflow` | Set to `top`, `bottom`, none or both
|
|
74
70
|
*
|
|
75
|
-
* Note: the `theme` attribute value set on `<vaadin-dialog>` is
|
|
76
|
-
* propagated to the internal `<vaadin-dialog-overlay>` component.
|
|
77
|
-
*
|
|
78
71
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
79
72
|
*
|
|
80
73
|
* @fires {CustomEvent} resize - Fired when the dialog resize is finished.
|
|
@@ -91,14 +84,11 @@ export { DialogOverlay } from './vaadin-dialog-overlay.js';
|
|
|
91
84
|
* @mixes DialogRendererMixin
|
|
92
85
|
* @mixes DialogResizableMixin
|
|
93
86
|
* @mixes DialogSizeMixin
|
|
94
|
-
* @mixes OverlayClassMixin
|
|
95
87
|
*/
|
|
96
88
|
class Dialog extends DialogSizeMixin(
|
|
97
89
|
DialogDraggableMixin(
|
|
98
90
|
DialogResizableMixin(
|
|
99
|
-
DialogRendererMixin(
|
|
100
|
-
DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolylitMixin(LitElement))))),
|
|
101
|
-
),
|
|
91
|
+
DialogRendererMixin(DialogBaseMixin(ThemePropertyMixin(ElementMixin(PolylitMixin(LitElement))))),
|
|
102
92
|
),
|
|
103
93
|
),
|
|
104
94
|
) {
|
|
@@ -108,24 +98,23 @@ class Dialog extends DialogSizeMixin(
|
|
|
108
98
|
|
|
109
99
|
static get styles() {
|
|
110
100
|
return css`
|
|
111
|
-
:host
|
|
101
|
+
:host([opened]),
|
|
102
|
+
:host([opening]),
|
|
103
|
+
:host([closing]) {
|
|
104
|
+
display: block !important;
|
|
105
|
+
position: absolute;
|
|
106
|
+
outline: none;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
:host,
|
|
110
|
+
:host([hidden]) {
|
|
112
111
|
display: none !important;
|
|
113
112
|
}
|
|
114
|
-
`;
|
|
115
|
-
}
|
|
116
113
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
* screen readers. An empty string value for this property (the
|
|
122
|
-
* default) means that the `aria-label` attribute is not present.
|
|
123
|
-
*/
|
|
124
|
-
ariaLabel: {
|
|
125
|
-
type: String,
|
|
126
|
-
value: '',
|
|
127
|
-
},
|
|
128
|
-
};
|
|
114
|
+
:host(:focus-visible) ::part(overlay) {
|
|
115
|
+
outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
|
|
116
|
+
}
|
|
117
|
+
`;
|
|
129
118
|
}
|
|
130
119
|
|
|
131
120
|
/** @protected */
|
|
@@ -133,7 +122,6 @@ class Dialog extends DialogSizeMixin(
|
|
|
133
122
|
return html`
|
|
134
123
|
<vaadin-dialog-overlay
|
|
135
124
|
id="overlay"
|
|
136
|
-
role="${this.overlayRole}"
|
|
137
125
|
.owner="${this}"
|
|
138
126
|
.opened="${this.opened}"
|
|
139
127
|
.headerTitle="${this.headerTitle}"
|
|
@@ -144,15 +132,29 @@ class Dialog extends DialogSizeMixin(
|
|
|
144
132
|
@mousedown="${this._bringOverlayToFront}"
|
|
145
133
|
@touchstart="${this._bringOverlayToFront}"
|
|
146
134
|
theme="${ifDefined(this._theme)}"
|
|
147
|
-
aria-label="${ifDefined(this.ariaLabel || this.headerTitle)}"
|
|
148
135
|
.modeless="${this.modeless}"
|
|
149
136
|
.withBackdrop="${!this.modeless}"
|
|
150
137
|
?resizable="${this.resizable}"
|
|
151
138
|
restore-focus-on-close
|
|
152
139
|
focus-trap
|
|
153
|
-
|
|
140
|
+
exportparts="backdrop, overlay, header, title, header-content, content, footer"
|
|
141
|
+
>
|
|
142
|
+
<slot name="title" slot="title"></slot>
|
|
143
|
+
<slot name="header-content" slot="header-content"></slot>
|
|
144
|
+
<slot name="footer" slot="footer"></slot>
|
|
145
|
+
<slot></slot>
|
|
146
|
+
</vaadin-dialog-overlay>
|
|
154
147
|
`;
|
|
155
148
|
}
|
|
149
|
+
|
|
150
|
+
/** @protected */
|
|
151
|
+
updated(props) {
|
|
152
|
+
super.updated(props);
|
|
153
|
+
|
|
154
|
+
if (props.has('headerTitle')) {
|
|
155
|
+
this.ariaLabel = this.headerTitle;
|
|
156
|
+
}
|
|
157
|
+
}
|
|
156
158
|
}
|
|
157
159
|
|
|
158
160
|
defineCustomElement(Dialog);
|
package/vaadin-dialog.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import './
|
|
1
|
+
import './src/vaadin-dialog.js';
|
|
2
2
|
export * from './src/vaadin-dialog.js';
|
package/web-types.json
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/dialog",
|
|
4
|
-
"version": "25.0.0-
|
|
4
|
+
"version": "25.0.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-dialog",
|
|
11
|
-
"description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\
|
|
11
|
+
"description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n`header` | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title` | Element wrapping the title slot\n`footer` | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|--------------------------------------------\n`has-title` | Set when the element has a title\n`has-header` | Set when the element has header renderer\n`has-footer` | Set when the element has footer renderer\n`overflow` | Set to `top`, `bottom`, none or both\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "opened",
|
|
15
|
-
"description": "True if the
|
|
15
|
+
"description": "True if the dialog is visible and available for interaction.",
|
|
16
16
|
"value": {
|
|
17
17
|
"type": [
|
|
18
18
|
"boolean"
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
},
|
|
49
49
|
{
|
|
50
50
|
"name": "top",
|
|
51
|
-
"description": "Set the distance of the
|
|
51
|
+
"description": "Set the distance of the dialog from the top of the viewport.\nIf a unitless number is provided, pixels are assumed.\n\nNote that the dialog uses an internal container that has some\nadditional spacing, which can be overridden by the theme.",
|
|
52
52
|
"value": {
|
|
53
53
|
"type": [
|
|
54
54
|
"string",
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
},
|
|
60
60
|
{
|
|
61
61
|
"name": "left",
|
|
62
|
-
"description": "Set the distance of the
|
|
62
|
+
"description": "Set the distance of the dialog from the left of the viewport.\nIf a unitless number is provided, pixels are assumed.\n\nNote that the dialog uses an internal container that has some\nadditional spacing, which can be overridden by the theme.",
|
|
63
63
|
"value": {
|
|
64
64
|
"type": [
|
|
65
65
|
"string",
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
},
|
|
71
71
|
{
|
|
72
72
|
"name": "overlay-role",
|
|
73
|
-
"description": "The `role` attribute value to be set on the
|
|
73
|
+
"description": "The `role` attribute value to be set on the dialog. Defaults to \"dialog\".",
|
|
74
74
|
"value": {
|
|
75
75
|
"type": [
|
|
76
76
|
"string",
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
},
|
|
91
91
|
{
|
|
92
92
|
"name": "header-title",
|
|
93
|
-
"description": "String used for rendering a dialog title.\n\nIf both `headerTitle` and `headerRenderer` are defined, the title\nand the elements created by the renderer will be placed next to\neach other, with the title coming first.\n\nWhen `headerTitle` is set, the attribute `has-title` is
|
|
93
|
+
"description": "String used for rendering a dialog title.\n\nIf both `headerTitle` and `headerRenderer` are defined, the title\nand the elements created by the renderer will be placed next to\neach other, with the title coming first.\n\nWhen `headerTitle` is set, the attribute `has-title` is set on the dialog.",
|
|
94
94
|
"value": {
|
|
95
95
|
"type": [
|
|
96
96
|
"string",
|
|
@@ -110,7 +110,7 @@
|
|
|
110
110
|
},
|
|
111
111
|
{
|
|
112
112
|
"name": "width",
|
|
113
|
-
"description": "Set the width of the
|
|
113
|
+
"description": "Set the width of the dialog.\nIf a unitless number is provided, pixels are assumed.",
|
|
114
114
|
"value": {
|
|
115
115
|
"type": [
|
|
116
116
|
"string",
|
|
@@ -121,29 +121,7 @@
|
|
|
121
121
|
},
|
|
122
122
|
{
|
|
123
123
|
"name": "height",
|
|
124
|
-
"description": "Set the height of the
|
|
125
|
-
"value": {
|
|
126
|
-
"type": [
|
|
127
|
-
"string",
|
|
128
|
-
"null",
|
|
129
|
-
"undefined"
|
|
130
|
-
]
|
|
131
|
-
}
|
|
132
|
-
},
|
|
133
|
-
{
|
|
134
|
-
"name": "overlay-class",
|
|
135
|
-
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
136
|
-
"value": {
|
|
137
|
-
"type": [
|
|
138
|
-
"string",
|
|
139
|
-
"null",
|
|
140
|
-
"undefined"
|
|
141
|
-
]
|
|
142
|
-
}
|
|
143
|
-
},
|
|
144
|
-
{
|
|
145
|
-
"name": "aria-label",
|
|
146
|
-
"description": "Set the `aria-label` attribute for assistive technologies like\nscreen readers. An empty string value for this property (the\ndefault) means that the `aria-label` attribute is not present.",
|
|
124
|
+
"description": "Set the height of the dialog.\nIf a unitless number is provided, pixels are assumed.",
|
|
147
125
|
"value": {
|
|
148
126
|
"type": [
|
|
149
127
|
"string",
|
|
@@ -168,7 +146,7 @@
|
|
|
168
146
|
"properties": [
|
|
169
147
|
{
|
|
170
148
|
"name": "opened",
|
|
171
|
-
"description": "True if the
|
|
149
|
+
"description": "True if the dialog is visible and available for interaction.",
|
|
172
150
|
"value": {
|
|
173
151
|
"type": [
|
|
174
152
|
"boolean"
|
|
@@ -204,7 +182,7 @@
|
|
|
204
182
|
},
|
|
205
183
|
{
|
|
206
184
|
"name": "top",
|
|
207
|
-
"description": "Set the distance of the
|
|
185
|
+
"description": "Set the distance of the dialog from the top of the viewport.\nIf a unitless number is provided, pixels are assumed.\n\nNote that the dialog uses an internal container that has some\nadditional spacing, which can be overridden by the theme.",
|
|
208
186
|
"value": {
|
|
209
187
|
"type": [
|
|
210
188
|
"string",
|
|
@@ -215,7 +193,7 @@
|
|
|
215
193
|
},
|
|
216
194
|
{
|
|
217
195
|
"name": "left",
|
|
218
|
-
"description": "Set the distance of the
|
|
196
|
+
"description": "Set the distance of the dialog from the left of the viewport.\nIf a unitless number is provided, pixels are assumed.\n\nNote that the dialog uses an internal container that has some\nadditional spacing, which can be overridden by the theme.",
|
|
219
197
|
"value": {
|
|
220
198
|
"type": [
|
|
221
199
|
"string",
|
|
@@ -226,7 +204,7 @@
|
|
|
226
204
|
},
|
|
227
205
|
{
|
|
228
206
|
"name": "overlayRole",
|
|
229
|
-
"description": "The `role` attribute value to be set on the
|
|
207
|
+
"description": "The `role` attribute value to be set on the dialog. Defaults to \"dialog\".",
|
|
230
208
|
"value": {
|
|
231
209
|
"type": [
|
|
232
210
|
"string",
|
|
@@ -256,7 +234,7 @@
|
|
|
256
234
|
},
|
|
257
235
|
{
|
|
258
236
|
"name": "headerTitle",
|
|
259
|
-
"description": "String used for rendering a dialog title.\n\nIf both `headerTitle` and `headerRenderer` are defined, the title\nand the elements created by the renderer will be placed next to\neach other, with the title coming first.\n\nWhen `headerTitle` is set, the attribute `has-title` is
|
|
237
|
+
"description": "String used for rendering a dialog title.\n\nIf both `headerTitle` and `headerRenderer` are defined, the title\nand the elements created by the renderer will be placed next to\neach other, with the title coming first.\n\nWhen `headerTitle` is set, the attribute `has-title` is set on the dialog.",
|
|
260
238
|
"value": {
|
|
261
239
|
"type": [
|
|
262
240
|
"string",
|
|
@@ -267,7 +245,7 @@
|
|
|
267
245
|
},
|
|
268
246
|
{
|
|
269
247
|
"name": "headerRenderer",
|
|
270
|
-
"description": "Custom function for rendering the dialog header.\nReceives two arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `dialog` The reference to the `<vaadin-dialog>` element.\n\nIf both `headerTitle` and `headerRenderer` are defined, the title\nand the elements created by the renderer will be placed next to\neach other, with the title coming first.\n\nWhen `headerRenderer` is set, the attribute `has-header` is
|
|
248
|
+
"description": "Custom function for rendering the dialog header.\nReceives two arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `dialog` The reference to the `<vaadin-dialog>` element.\n\nIf both `headerTitle` and `headerRenderer` are defined, the title\nand the elements created by the renderer will be placed next to\neach other, with the title coming first.\n\nWhen `headerRenderer` is set, the attribute `has-header` is set on the dialog.",
|
|
271
249
|
"value": {
|
|
272
250
|
"type": [
|
|
273
251
|
"DialogRenderer",
|
|
@@ -277,7 +255,7 @@
|
|
|
277
255
|
},
|
|
278
256
|
{
|
|
279
257
|
"name": "footerRenderer",
|
|
280
|
-
"description": "Custom function for rendering the dialog footer.\nReceives two arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `dialog` The reference to the `<vaadin-dialog>` element.\n\nWhen `footerRenderer` is set, the attribute `has-footer` is
|
|
258
|
+
"description": "Custom function for rendering the dialog footer.\nReceives two arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `dialog` The reference to the `<vaadin-dialog>` element.\n\nWhen `footerRenderer` is set, the attribute `has-footer` is set on the dialog.",
|
|
281
259
|
"value": {
|
|
282
260
|
"type": [
|
|
283
261
|
"DialogRenderer",
|
|
@@ -296,7 +274,7 @@
|
|
|
296
274
|
},
|
|
297
275
|
{
|
|
298
276
|
"name": "width",
|
|
299
|
-
"description": "Set the width of the
|
|
277
|
+
"description": "Set the width of the dialog.\nIf a unitless number is provided, pixels are assumed.",
|
|
300
278
|
"value": {
|
|
301
279
|
"type": [
|
|
302
280
|
"string",
|
|
@@ -307,29 +285,7 @@
|
|
|
307
285
|
},
|
|
308
286
|
{
|
|
309
287
|
"name": "height",
|
|
310
|
-
"description": "Set the height of the
|
|
311
|
-
"value": {
|
|
312
|
-
"type": [
|
|
313
|
-
"string",
|
|
314
|
-
"null",
|
|
315
|
-
"undefined"
|
|
316
|
-
]
|
|
317
|
-
}
|
|
318
|
-
},
|
|
319
|
-
{
|
|
320
|
-
"name": "overlayClass",
|
|
321
|
-
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
322
|
-
"value": {
|
|
323
|
-
"type": [
|
|
324
|
-
"string",
|
|
325
|
-
"null",
|
|
326
|
-
"undefined"
|
|
327
|
-
]
|
|
328
|
-
}
|
|
329
|
-
},
|
|
330
|
-
{
|
|
331
|
-
"name": "ariaLabel",
|
|
332
|
-
"description": "Set the `aria-label` attribute for assistive technologies like\nscreen readers. An empty string value for this property (the\ndefault) means that the `aria-label` attribute is not present.",
|
|
288
|
+
"description": "Set the height of the dialog.\nIf a unitless number is provided, pixels are assumed.",
|
|
333
289
|
"value": {
|
|
334
290
|
"type": [
|
|
335
291
|
"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/dialog",
|
|
4
|
-
"version": "25.0.0-
|
|
4
|
+
"version": "25.0.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,12 +16,12 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-dialog",
|
|
19
|
-
"description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\
|
|
19
|
+
"description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n`header` | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title` | Element wrapping the title slot\n`footer` | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|--------------------------------------------\n`has-title` | Set when the element has a title\n`has-header` | Set when the element has header renderer\n`has-footer` | Set when the element has footer renderer\n`overflow` | Set to `top`, `bottom`, none or both\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
23
23
|
"name": "?opened",
|
|
24
|
-
"description": "True if the
|
|
24
|
+
"description": "True if the dialog is visible and available for interaction.",
|
|
25
25
|
"value": {
|
|
26
26
|
"kind": "expression"
|
|
27
27
|
}
|
|
@@ -63,21 +63,21 @@
|
|
|
63
63
|
},
|
|
64
64
|
{
|
|
65
65
|
"name": ".top",
|
|
66
|
-
"description": "Set the distance of the
|
|
66
|
+
"description": "Set the distance of the dialog from the top of the viewport.\nIf a unitless number is provided, pixels are assumed.\n\nNote that the dialog uses an internal container that has some\nadditional spacing, which can be overridden by the theme.",
|
|
67
67
|
"value": {
|
|
68
68
|
"kind": "expression"
|
|
69
69
|
}
|
|
70
70
|
},
|
|
71
71
|
{
|
|
72
72
|
"name": ".left",
|
|
73
|
-
"description": "Set the distance of the
|
|
73
|
+
"description": "Set the distance of the dialog from the left of the viewport.\nIf a unitless number is provided, pixels are assumed.\n\nNote that the dialog uses an internal container that has some\nadditional spacing, which can be overridden by the theme.",
|
|
74
74
|
"value": {
|
|
75
75
|
"kind": "expression"
|
|
76
76
|
}
|
|
77
77
|
},
|
|
78
78
|
{
|
|
79
79
|
"name": ".overlayRole",
|
|
80
|
-
"description": "The `role` attribute value to be set on the
|
|
80
|
+
"description": "The `role` attribute value to be set on the dialog. Defaults to \"dialog\".",
|
|
81
81
|
"value": {
|
|
82
82
|
"kind": "expression"
|
|
83
83
|
}
|
|
@@ -91,49 +91,35 @@
|
|
|
91
91
|
},
|
|
92
92
|
{
|
|
93
93
|
"name": ".headerTitle",
|
|
94
|
-
"description": "String used for rendering a dialog title.\n\nIf both `headerTitle` and `headerRenderer` are defined, the title\nand the elements created by the renderer will be placed next to\neach other, with the title coming first.\n\nWhen `headerTitle` is set, the attribute `has-title` is
|
|
94
|
+
"description": "String used for rendering a dialog title.\n\nIf both `headerTitle` and `headerRenderer` are defined, the title\nand the elements created by the renderer will be placed next to\neach other, with the title coming first.\n\nWhen `headerTitle` is set, the attribute `has-title` is set on the dialog.",
|
|
95
95
|
"value": {
|
|
96
96
|
"kind": "expression"
|
|
97
97
|
}
|
|
98
98
|
},
|
|
99
99
|
{
|
|
100
100
|
"name": ".headerRenderer",
|
|
101
|
-
"description": "Custom function for rendering the dialog header.\nReceives two arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `dialog` The reference to the `<vaadin-dialog>` element.\n\nIf both `headerTitle` and `headerRenderer` are defined, the title\nand the elements created by the renderer will be placed next to\neach other, with the title coming first.\n\nWhen `headerRenderer` is set, the attribute `has-header` is
|
|
101
|
+
"description": "Custom function for rendering the dialog header.\nReceives two arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `dialog` The reference to the `<vaadin-dialog>` element.\n\nIf both `headerTitle` and `headerRenderer` are defined, the title\nand the elements created by the renderer will be placed next to\neach other, with the title coming first.\n\nWhen `headerRenderer` is set, the attribute `has-header` is set on the dialog.",
|
|
102
102
|
"value": {
|
|
103
103
|
"kind": "expression"
|
|
104
104
|
}
|
|
105
105
|
},
|
|
106
106
|
{
|
|
107
107
|
"name": ".footerRenderer",
|
|
108
|
-
"description": "Custom function for rendering the dialog footer.\nReceives two arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `dialog` The reference to the `<vaadin-dialog>` element.\n\nWhen `footerRenderer` is set, the attribute `has-footer` is
|
|
108
|
+
"description": "Custom function for rendering the dialog footer.\nReceives two arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `dialog` The reference to the `<vaadin-dialog>` element.\n\nWhen `footerRenderer` is set, the attribute `has-footer` is set on the dialog.",
|
|
109
109
|
"value": {
|
|
110
110
|
"kind": "expression"
|
|
111
111
|
}
|
|
112
112
|
},
|
|
113
113
|
{
|
|
114
114
|
"name": ".width",
|
|
115
|
-
"description": "Set the width of the
|
|
115
|
+
"description": "Set the width of the dialog.\nIf a unitless number is provided, pixels are assumed.",
|
|
116
116
|
"value": {
|
|
117
117
|
"kind": "expression"
|
|
118
118
|
}
|
|
119
119
|
},
|
|
120
120
|
{
|
|
121
121
|
"name": ".height",
|
|
122
|
-
"description": "Set the height of the
|
|
123
|
-
"value": {
|
|
124
|
-
"kind": "expression"
|
|
125
|
-
}
|
|
126
|
-
},
|
|
127
|
-
{
|
|
128
|
-
"name": ".overlayClass",
|
|
129
|
-
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
130
|
-
"value": {
|
|
131
|
-
"kind": "expression"
|
|
132
|
-
}
|
|
133
|
-
},
|
|
134
|
-
{
|
|
135
|
-
"name": ".ariaLabel",
|
|
136
|
-
"description": "Set the `aria-label` attribute for assistive technologies like\nscreen readers. An empty string value for this property (the\ndefault) means that the `aria-label` attribute is not present.",
|
|
122
|
+
"description": "Set the height of the dialog.\nIf a unitless number is provided, pixels are assumed.",
|
|
137
123
|
"value": {
|
|
138
124
|
"kind": "expression"
|
|
139
125
|
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2021 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import type { CSSResult } from 'lit';
|
|
7
|
-
|
|
8
|
-
export const dialogOverlayBase: CSSResult;
|
|
9
|
-
|
|
10
|
-
export const dialogOverlayStyles: CSSResult;
|
|
@@ -1,184 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2017 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import { css } from 'lit';
|
|
7
|
-
import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-core-styles.js';
|
|
8
|
-
|
|
9
|
-
export const dialogOverlayBase = css`
|
|
10
|
-
[part='header'],
|
|
11
|
-
[part='header-content'],
|
|
12
|
-
[part='footer'] {
|
|
13
|
-
display: flex;
|
|
14
|
-
align-items: center;
|
|
15
|
-
flex-wrap: wrap;
|
|
16
|
-
flex: none;
|
|
17
|
-
pointer-events: none;
|
|
18
|
-
z-index: 1;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
[part='header'] {
|
|
22
|
-
flex-wrap: nowrap;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
::slotted([slot='header-content']),
|
|
26
|
-
::slotted([slot='title']),
|
|
27
|
-
::slotted([slot='footer']) {
|
|
28
|
-
display: contents;
|
|
29
|
-
pointer-events: auto;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
::slotted([slot='title']) {
|
|
33
|
-
font: inherit !important;
|
|
34
|
-
overflow-wrap: anywhere;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
[part='header-content'] {
|
|
38
|
-
flex: 1;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
:host([has-title]) [part='header-content'],
|
|
42
|
-
[part='footer'] {
|
|
43
|
-
justify-content: flex-end;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
:host(:not([has-title]):not([has-header])) [part='header'],
|
|
47
|
-
:host(:not([has-header])) [part='header-content'],
|
|
48
|
-
:host(:not([has-title])) [part='title'],
|
|
49
|
-
:host(:not([has-footer])) [part='footer'] {
|
|
50
|
-
display: none !important;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
:host(:is([has-title], [has-header], [has-footer])) [part='content'] {
|
|
54
|
-
height: auto;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
@media (min-height: 320px) {
|
|
58
|
-
:host(:is([has-title], [has-header], [has-footer])) .resizer-container {
|
|
59
|
-
overflow: hidden;
|
|
60
|
-
display: flex;
|
|
61
|
-
flex-direction: column;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
:host(:is([has-title], [has-header], [has-footer])) [part='content'] {
|
|
65
|
-
flex: 1;
|
|
66
|
-
overflow: auto;
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
/*
|
|
71
|
-
NOTE(platosha): Make some min-width to prevent collapsing of the content
|
|
72
|
-
taking the parent width, e. g., <vaadin-grid> and such.
|
|
73
|
-
*/
|
|
74
|
-
[part='content'] {
|
|
75
|
-
min-width: 12em; /* matches the default <vaadin-text-field> width */
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
:host([has-bounds-set]) [part='overlay'] {
|
|
79
|
-
max-width: none;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
@media (forced-colors: active) {
|
|
83
|
-
[part='overlay'] {
|
|
84
|
-
outline: 3px solid !important;
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
`;
|
|
88
|
-
|
|
89
|
-
const dialogResizableOverlay = css`
|
|
90
|
-
[part='overlay'] {
|
|
91
|
-
position: relative;
|
|
92
|
-
overflow: visible;
|
|
93
|
-
max-height: 100%;
|
|
94
|
-
display: flex;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
[part='content'] {
|
|
98
|
-
box-sizing: border-box;
|
|
99
|
-
height: 100%;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
.resizer-container {
|
|
103
|
-
overflow: auto;
|
|
104
|
-
flex-grow: 1;
|
|
105
|
-
border-radius: inherit; /* prevent child elements being drawn outside part=overlay */
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
[part='overlay'][style] .resizer-container {
|
|
109
|
-
min-height: 100%;
|
|
110
|
-
width: 100%;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
:host(:not([resizable])) .resizer {
|
|
114
|
-
display: none;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
:host([resizable]) [part='title'] {
|
|
118
|
-
cursor: move;
|
|
119
|
-
-webkit-user-select: none;
|
|
120
|
-
user-select: none;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
.resizer {
|
|
124
|
-
position: absolute;
|
|
125
|
-
height: 16px;
|
|
126
|
-
width: 16px;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.resizer.edge {
|
|
130
|
-
height: 8px;
|
|
131
|
-
width: 8px;
|
|
132
|
-
inset: -4px;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
.resizer.edge.n {
|
|
136
|
-
width: auto;
|
|
137
|
-
bottom: auto;
|
|
138
|
-
cursor: ns-resize;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
.resizer.ne {
|
|
142
|
-
top: -4px;
|
|
143
|
-
right: -4px;
|
|
144
|
-
cursor: nesw-resize;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
.resizer.edge.e {
|
|
148
|
-
height: auto;
|
|
149
|
-
left: auto;
|
|
150
|
-
cursor: ew-resize;
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
.resizer.se {
|
|
154
|
-
bottom: -4px;
|
|
155
|
-
right: -4px;
|
|
156
|
-
cursor: nwse-resize;
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
.resizer.edge.s {
|
|
160
|
-
width: auto;
|
|
161
|
-
top: auto;
|
|
162
|
-
cursor: ns-resize;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
.resizer.sw {
|
|
166
|
-
bottom: -4px;
|
|
167
|
-
left: -4px;
|
|
168
|
-
cursor: nesw-resize;
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
.resizer.edge.w {
|
|
172
|
-
height: auto;
|
|
173
|
-
right: auto;
|
|
174
|
-
cursor: ew-resize;
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
.resizer.nw {
|
|
178
|
-
top: -4px;
|
|
179
|
-
left: -4px;
|
|
180
|
-
cursor: nwse-resize;
|
|
181
|
-
}
|
|
182
|
-
`;
|
|
183
|
-
|
|
184
|
-
export const dialogOverlayStyles = [overlayStyles, dialogOverlayBase, dialogResizableOverlay];
|