@vaadin/dialog 25.3.0-alpha8 → 25.3.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/custom-elements.json +81 -7
- package/package.json +11 -11
- package/src/vaadin-dialog-base-mixin.d.ts +14 -1
- package/src/vaadin-dialog-base-mixin.js +19 -6
- package/src/vaadin-dialog-overlay.js +3 -3
- package/src/vaadin-dialog.d.ts +1 -0
- package/src/vaadin-dialog.js +3 -1
- package/web-types.json +22 -4
- package/web-types.lit.json +10 -3
package/custom-elements.json
CHANGED
|
@@ -56,6 +56,16 @@
|
|
|
56
56
|
"description": "Set to true to remove backdrop and allow click events on background elements.",
|
|
57
57
|
"attribute": "modeless"
|
|
58
58
|
},
|
|
59
|
+
{
|
|
60
|
+
"kind": "field",
|
|
61
|
+
"name": "noAutofocus",
|
|
62
|
+
"privacy": "public",
|
|
63
|
+
"type": {
|
|
64
|
+
"text": "boolean"
|
|
65
|
+
},
|
|
66
|
+
"description": "Set to true to prevent focus from moving into the dialog on open.\n\nThis property only works for non-modal dialogs and is ignored\nfor modal ones, where focus must always stay inside.",
|
|
67
|
+
"attribute": "no-autofocus"
|
|
68
|
+
},
|
|
59
69
|
{
|
|
60
70
|
"kind": "field",
|
|
61
71
|
"name": "noCloseOnEsc",
|
|
@@ -83,7 +93,8 @@
|
|
|
83
93
|
"type": {
|
|
84
94
|
"text": "boolean"
|
|
85
95
|
},
|
|
86
|
-
"description": "Set to true to
|
|
96
|
+
"description": "Set to true to prevent the dialog from receiving focus\non open and trapping it inside.",
|
|
97
|
+
"deprecated": "This property is deprecated and will be removed in Vaadin 26.",
|
|
87
98
|
"attribute": "no-focus-trap"
|
|
88
99
|
},
|
|
89
100
|
{
|
|
@@ -151,6 +162,14 @@
|
|
|
151
162
|
"description": "Set to true to remove backdrop and allow click events on background elements.",
|
|
152
163
|
"fieldName": "modeless"
|
|
153
164
|
},
|
|
165
|
+
{
|
|
166
|
+
"name": "no-autofocus",
|
|
167
|
+
"type": {
|
|
168
|
+
"text": "boolean"
|
|
169
|
+
},
|
|
170
|
+
"description": "Set to true to prevent focus from moving into the dialog on open.\n\nThis property only works for non-modal dialogs and is ignored\nfor modal ones, where focus must always stay inside.",
|
|
171
|
+
"fieldName": "noAutofocus"
|
|
172
|
+
},
|
|
154
173
|
{
|
|
155
174
|
"name": "no-close-on-esc",
|
|
156
175
|
"type": {
|
|
@@ -172,7 +191,8 @@
|
|
|
172
191
|
"type": {
|
|
173
192
|
"text": "boolean"
|
|
174
193
|
},
|
|
175
|
-
"description": "Set to true to
|
|
194
|
+
"description": "Set to true to prevent the dialog from receiving focus\non open and trapping it inside.",
|
|
195
|
+
"deprecated": "This property is deprecated and will be removed in Vaadin 26.",
|
|
176
196
|
"fieldName": "noFocusTrap"
|
|
177
197
|
},
|
|
178
198
|
{
|
|
@@ -326,6 +346,20 @@
|
|
|
326
346
|
"description": "",
|
|
327
347
|
"name": "DialogOverlayMixin",
|
|
328
348
|
"members": [
|
|
349
|
+
{
|
|
350
|
+
"kind": "field",
|
|
351
|
+
"name": "autofocus",
|
|
352
|
+
"privacy": "public",
|
|
353
|
+
"type": {
|
|
354
|
+
"text": "boolean"
|
|
355
|
+
},
|
|
356
|
+
"description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
|
|
357
|
+
"attribute": "autofocus",
|
|
358
|
+
"inheritedFrom": {
|
|
359
|
+
"name": "OverlayFocusMixin",
|
|
360
|
+
"package": "@vaadin/overlay/src/vaadin-overlay-focus-mixin.js"
|
|
361
|
+
}
|
|
362
|
+
},
|
|
329
363
|
{
|
|
330
364
|
"kind": "method",
|
|
331
365
|
"name": "bringToFront",
|
|
@@ -358,7 +392,7 @@
|
|
|
358
392
|
"type": {
|
|
359
393
|
"text": "boolean"
|
|
360
394
|
},
|
|
361
|
-
"description": "
|
|
395
|
+
"description": "Set to true to move focus into the overlay automatically on open\nand keep it inside: Tab and Shift+Tab cycle through the overlay's\ncontent until the overlay is closed.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
|
|
362
396
|
"attribute": "focus-trap",
|
|
363
397
|
"inheritedFrom": {
|
|
364
398
|
"name": "OverlayFocusMixin",
|
|
@@ -570,12 +604,24 @@
|
|
|
570
604
|
}
|
|
571
605
|
],
|
|
572
606
|
"attributes": [
|
|
607
|
+
{
|
|
608
|
+
"name": "autofocus",
|
|
609
|
+
"type": {
|
|
610
|
+
"text": "boolean"
|
|
611
|
+
},
|
|
612
|
+
"description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
|
|
613
|
+
"fieldName": "autofocus",
|
|
614
|
+
"inheritedFrom": {
|
|
615
|
+
"name": "OverlayFocusMixin",
|
|
616
|
+
"package": "@vaadin/overlay/src/vaadin-overlay-focus-mixin.js"
|
|
617
|
+
}
|
|
618
|
+
},
|
|
573
619
|
{
|
|
574
620
|
"name": "focus-trap",
|
|
575
621
|
"type": {
|
|
576
622
|
"text": "boolean"
|
|
577
623
|
},
|
|
578
|
-
"description": "
|
|
624
|
+
"description": "Set to true to move focus into the overlay automatically on open\nand keep it inside: Tab and Shift+Tab cycle through the overlay's\ncontent until the overlay is closed.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
|
|
579
625
|
"fieldName": "focusTrap",
|
|
580
626
|
"inheritedFrom": {
|
|
581
627
|
"name": "OverlayFocusMixin",
|
|
@@ -989,7 +1035,7 @@
|
|
|
989
1035
|
"declarations": [
|
|
990
1036
|
{
|
|
991
1037
|
"kind": "class",
|
|
992
|
-
"description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n```html\n<vaadin-dialog header-title=\"Title\">\n <div>Dialog content</div>\n <div slot=\"footer\">Footer</div>\n</vaadin-dialog>\n```\n\n### Slots\n\nDialog supports following slots for providing content:\n\nName | Description\n-----------------|-------------\n(none) | Default slot for the content\n`header-content` | Slot for the header content\n`footer` | Slot for the footer content\n\n#### Renderer (deprecated)\n\nThe content of the dialog can also be populated by using the renderer callback functions,\nalthough this approach is deprecated in favor of slotted content.\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 content\n`has-footer` | Set when the element has footer content\n`overflow` | Set to `top`, `bottom`, none or both\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------|\n|`--vaadin-dialog-background` |\n|`--vaadin-dialog-border-color` |\n|`--vaadin-dialog-border-radius` |\n|`--vaadin-dialog-border-width` |\n|`--vaadin-dialog-max-width` |\n|`--vaadin-dialog-min-width` |\n|`--vaadin-dialog-overflow-indicator-color` |\n|`--vaadin-dialog-overflow-indicator-height` |\n|`--vaadin-dialog-padding` |\n|`--vaadin-dialog-shadow` |\n|`--vaadin-dialog-text-color` |\n|`--vaadin-dialog-title-color` |\n|`--vaadin-dialog-title-font-size` |\n|`--vaadin-dialog-title-font-weight` |\n|`--vaadin-dialog-title-line-height` |\n|`--vaadin-overlay-backdrop-background` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
1038
|
+
"description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n```html\n<vaadin-dialog header-title=\"Title\">\n <div>Dialog content</div>\n <div slot=\"footer\">Footer</div>\n</vaadin-dialog>\n```\n\n### Slots\n\nDialog supports following slots for providing content:\n\nName | Description\n-----------------|-------------\n(none) | Default slot for the content\n`header-content` | Slot for the header content\n`footer` | Slot for the footer content\n\n#### Renderer (deprecated)\n\nThe content of the dialog can also be populated by using the renderer callback functions,\nalthough this approach is deprecated in favor of slotted content.\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 content\n`has-footer` | Set when the element has footer content\n`overflow` | Set to `top`, `bottom`, none or both\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------|\n|`--vaadin-dialog-background` |\n|`--vaadin-dialog-border-color` |\n|`--vaadin-dialog-border-radius` |\n|`--vaadin-dialog-border-width` |\n|`--vaadin-dialog-max-width` |\n|`--vaadin-dialog-min-width` |\n|`--vaadin-dialog-overflow-indicator-color` |\n|`--vaadin-dialog-overflow-indicator-height` |\n|`--vaadin-dialog-padding` |\n|`--vaadin-dialog-shadow` |\n|`--vaadin-dialog-text-color` |\n|`--vaadin-dialog-title-color` |\n|`--vaadin-dialog-title-font-size` |\n|`--vaadin-dialog-title-font-weight` |\n|`--vaadin-dialog-title-line-height` |\n|`--vaadin-dialog-toolbar-gap` |\n|`--vaadin-overlay-backdrop-background` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
993
1039
|
"name": "Dialog",
|
|
994
1040
|
"members": [
|
|
995
1041
|
{
|
|
@@ -1106,6 +1152,20 @@
|
|
|
1106
1152
|
"module": "src/vaadin-dialog-base-mixin.js"
|
|
1107
1153
|
}
|
|
1108
1154
|
},
|
|
1155
|
+
{
|
|
1156
|
+
"kind": "field",
|
|
1157
|
+
"name": "noAutofocus",
|
|
1158
|
+
"privacy": "public",
|
|
1159
|
+
"type": {
|
|
1160
|
+
"text": "boolean"
|
|
1161
|
+
},
|
|
1162
|
+
"description": "Set to true to prevent focus from moving into the dialog on open.\n\nThis property only works for non-modal dialogs and is ignored\nfor modal ones, where focus must always stay inside.",
|
|
1163
|
+
"attribute": "no-autofocus",
|
|
1164
|
+
"inheritedFrom": {
|
|
1165
|
+
"name": "DialogBaseMixin",
|
|
1166
|
+
"module": "src/vaadin-dialog-base-mixin.js"
|
|
1167
|
+
}
|
|
1168
|
+
},
|
|
1109
1169
|
{
|
|
1110
1170
|
"kind": "field",
|
|
1111
1171
|
"name": "noCloseOnEsc",
|
|
@@ -1141,7 +1201,8 @@
|
|
|
1141
1201
|
"type": {
|
|
1142
1202
|
"text": "boolean"
|
|
1143
1203
|
},
|
|
1144
|
-
"description": "Set to true to
|
|
1204
|
+
"description": "Set to true to prevent the dialog from receiving focus\non open and trapping it inside.",
|
|
1205
|
+
"deprecated": "This property is deprecated and will be removed in Vaadin 26.",
|
|
1145
1206
|
"attribute": "no-focus-trap",
|
|
1146
1207
|
"inheritedFrom": {
|
|
1147
1208
|
"name": "DialogBaseMixin",
|
|
@@ -1408,6 +1469,18 @@
|
|
|
1408
1469
|
"module": "src/vaadin-dialog-base-mixin.js"
|
|
1409
1470
|
}
|
|
1410
1471
|
},
|
|
1472
|
+
{
|
|
1473
|
+
"name": "no-autofocus",
|
|
1474
|
+
"type": {
|
|
1475
|
+
"text": "boolean"
|
|
1476
|
+
},
|
|
1477
|
+
"description": "Set to true to prevent focus from moving into the dialog on open.\n\nThis property only works for non-modal dialogs and is ignored\nfor modal ones, where focus must always stay inside.",
|
|
1478
|
+
"fieldName": "noAutofocus",
|
|
1479
|
+
"inheritedFrom": {
|
|
1480
|
+
"name": "DialogBaseMixin",
|
|
1481
|
+
"module": "src/vaadin-dialog-base-mixin.js"
|
|
1482
|
+
}
|
|
1483
|
+
},
|
|
1411
1484
|
{
|
|
1412
1485
|
"name": "no-close-on-esc",
|
|
1413
1486
|
"type": {
|
|
@@ -1437,7 +1510,8 @@
|
|
|
1437
1510
|
"type": {
|
|
1438
1511
|
"text": "boolean"
|
|
1439
1512
|
},
|
|
1440
|
-
"description": "Set to true to
|
|
1513
|
+
"description": "Set to true to prevent the dialog from receiving focus\non open and trapping it inside.",
|
|
1514
|
+
"deprecated": "This property is deprecated and will be removed in Vaadin 26.",
|
|
1441
1515
|
"fieldName": "noFocusTrap",
|
|
1442
1516
|
"inheritedFrom": {
|
|
1443
1517
|
"name": "DialogBaseMixin",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/dialog",
|
|
3
|
-
"version": "25.3.0-
|
|
3
|
+
"version": "25.3.0-beta1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,19 +37,19 @@
|
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
|
-
"@vaadin/component-base": "25.3.0-
|
|
41
|
-
"@vaadin/lit-renderer": "25.3.0-
|
|
42
|
-
"@vaadin/overlay": "25.3.0-
|
|
43
|
-
"@vaadin/vaadin-themable-mixin": "25.3.0-
|
|
40
|
+
"@vaadin/component-base": "25.3.0-beta1",
|
|
41
|
+
"@vaadin/lit-renderer": "25.3.0-beta1",
|
|
42
|
+
"@vaadin/overlay": "25.3.0-beta1",
|
|
43
|
+
"@vaadin/vaadin-themable-mixin": "25.3.0-beta1",
|
|
44
44
|
"lit": "^3.0.0"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@vaadin/a11y-base": "25.3.0-
|
|
48
|
-
"@vaadin/aura": "25.3.0-
|
|
49
|
-
"@vaadin/chai-plugins": "25.3.0-
|
|
50
|
-
"@vaadin/test-runner-commands": "25.3.0-
|
|
47
|
+
"@vaadin/a11y-base": "25.3.0-beta1",
|
|
48
|
+
"@vaadin/aura": "25.3.0-beta1",
|
|
49
|
+
"@vaadin/chai-plugins": "25.3.0-beta1",
|
|
50
|
+
"@vaadin/test-runner-commands": "25.3.0-beta1",
|
|
51
51
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
52
|
-
"@vaadin/vaadin-lumo-styles": "25.3.0-
|
|
52
|
+
"@vaadin/vaadin-lumo-styles": "25.3.0-beta1",
|
|
53
53
|
"sinon": "^22.0.0"
|
|
54
54
|
},
|
|
55
55
|
"customElements": "custom-elements.json",
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"web-types.json",
|
|
58
58
|
"web-types.lit.json"
|
|
59
59
|
],
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "295432e44a6967e1aff36462b2e3e1d0e64eb8cc"
|
|
61
61
|
}
|
|
@@ -33,11 +33,24 @@ export declare class DialogBaseMixinClass {
|
|
|
33
33
|
modeless: boolean;
|
|
34
34
|
|
|
35
35
|
/**
|
|
36
|
-
* Set to true to
|
|
36
|
+
* Set to true to prevent the dialog from receiving focus
|
|
37
|
+
* on open and trapping it inside.
|
|
38
|
+
*
|
|
37
39
|
* @attr {boolean} no-focus-trap
|
|
40
|
+
* @deprecated This property is deprecated and will be removed in Vaadin 26.
|
|
38
41
|
*/
|
|
39
42
|
noFocusTrap: boolean;
|
|
40
43
|
|
|
44
|
+
/**
|
|
45
|
+
* Set to true to prevent focus from moving into the dialog on open.
|
|
46
|
+
*
|
|
47
|
+
* This property only works for non-modal dialogs and is ignored
|
|
48
|
+
* for modal ones, where focus must always stay inside.
|
|
49
|
+
*
|
|
50
|
+
* @attr {boolean} no-autofocus
|
|
51
|
+
*/
|
|
52
|
+
noAutofocus: boolean;
|
|
53
|
+
|
|
41
54
|
/**
|
|
42
55
|
* The `role` attribute value to be set on the dialog. Defaults to "dialog".
|
|
43
56
|
*
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
* Copyright (c) 2017 - 2026 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
+
import { setOrRemoveAttribute } from '@vaadin/component-base/src/dom-utils.js';
|
|
6
7
|
|
|
7
8
|
export const DialogBaseMixin = (superClass) =>
|
|
8
9
|
class DialogBaseMixin extends superClass {
|
|
@@ -46,14 +47,30 @@ export const DialogBaseMixin = (superClass) =>
|
|
|
46
47
|
},
|
|
47
48
|
|
|
48
49
|
/**
|
|
49
|
-
* Set to true to
|
|
50
|
+
* Set to true to prevent the dialog from receiving focus
|
|
51
|
+
* on open and trapping it inside.
|
|
52
|
+
*
|
|
50
53
|
* @attr {boolean} no-focus-trap
|
|
54
|
+
* @deprecated This property is deprecated and will be removed in Vaadin 26.
|
|
51
55
|
*/
|
|
52
56
|
noFocusTrap: {
|
|
53
57
|
type: Boolean,
|
|
54
58
|
value: false,
|
|
55
59
|
},
|
|
56
60
|
|
|
61
|
+
/**
|
|
62
|
+
* Set to true to prevent focus from moving into the dialog on open.
|
|
63
|
+
*
|
|
64
|
+
* This property only works for non-modal dialogs and is ignored
|
|
65
|
+
* for modal ones, where focus must always stay inside.
|
|
66
|
+
*
|
|
67
|
+
* @attr {boolean} no-autofocus
|
|
68
|
+
*/
|
|
69
|
+
noAutofocus: {
|
|
70
|
+
type: Boolean,
|
|
71
|
+
value: false,
|
|
72
|
+
},
|
|
73
|
+
|
|
57
74
|
/**
|
|
58
75
|
* Set the distance of the dialog from the top of the viewport.
|
|
59
76
|
* If a unitless number is provided, pixels are assumed.
|
|
@@ -134,11 +151,7 @@ export const DialogBaseMixin = (superClass) =>
|
|
|
134
151
|
}
|
|
135
152
|
|
|
136
153
|
if (props.has('modeless')) {
|
|
137
|
-
|
|
138
|
-
this.setAttribute('aria-modal', 'true');
|
|
139
|
-
} else {
|
|
140
|
-
this.removeAttribute('aria-modal');
|
|
141
|
-
}
|
|
154
|
+
setOrRemoveAttribute(this, 'aria-modal', !this.modeless);
|
|
142
155
|
}
|
|
143
156
|
}
|
|
144
157
|
|
|
@@ -21,9 +21,7 @@ import { DialogOverlayMixin } from './vaadin-dialog-overlay-mixin.js';
|
|
|
21
21
|
* @extends HTMLElement
|
|
22
22
|
* @private
|
|
23
23
|
*/
|
|
24
|
-
|
|
25
|
-
DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
|
|
26
|
-
) {
|
|
24
|
+
class DialogOverlay extends DialogOverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
|
|
27
25
|
static get is() {
|
|
28
26
|
return 'vaadin-dialog-overlay';
|
|
29
27
|
}
|
|
@@ -83,3 +81,5 @@ export class DialogOverlay extends DialogOverlayMixin(
|
|
|
83
81
|
}
|
|
84
82
|
|
|
85
83
|
defineCustomElement(DialogOverlay);
|
|
84
|
+
|
|
85
|
+
export { DialogOverlay };
|
package/src/vaadin-dialog.d.ts
CHANGED
|
@@ -162,6 +162,7 @@ export type DialogEventMap = DialogCustomEventMap & HTMLElementEventMap;
|
|
|
162
162
|
* |`--vaadin-dialog-title-font-size` |
|
|
163
163
|
* |`--vaadin-dialog-title-font-weight` |
|
|
164
164
|
* |`--vaadin-dialog-title-line-height` |
|
|
165
|
+
* |`--vaadin-dialog-toolbar-gap` |
|
|
165
166
|
* |`--vaadin-overlay-backdrop-background` |
|
|
166
167
|
*
|
|
167
168
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
package/src/vaadin-dialog.js
CHANGED
|
@@ -105,6 +105,7 @@ export { DialogOverlay } from './vaadin-dialog-overlay.js';
|
|
|
105
105
|
* |`--vaadin-dialog-title-font-size` |
|
|
106
106
|
* |`--vaadin-dialog-title-font-weight` |
|
|
107
107
|
* |`--vaadin-dialog-title-line-height` |
|
|
108
|
+
* |`--vaadin-dialog-toolbar-gap` |
|
|
108
109
|
* |`--vaadin-overlay-backdrop-background` |
|
|
109
110
|
*
|
|
110
111
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
@@ -172,7 +173,8 @@ class Dialog extends DialogSizeMixin(
|
|
|
172
173
|
.withBackdrop="${!this.modeless}"
|
|
173
174
|
?resizable="${this.resizable}"
|
|
174
175
|
restore-focus-on-close
|
|
175
|
-
?focus-trap="${!this.noFocusTrap}"
|
|
176
|
+
?focus-trap="${!this.noFocusTrap && !this.modeless}"
|
|
177
|
+
?autofocus="${this.modeless ? !this.noAutofocus && !this.noFocusTrap : !this.noFocusTrap}"
|
|
176
178
|
exportparts="backdrop, overlay, header, title, header-content, content, footer"
|
|
177
179
|
>
|
|
178
180
|
<slot name="title" slot="title"></slot>
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/dialog",
|
|
4
|
-
"version": "25.3.0-
|
|
4
|
+
"version": "25.3.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```html\n<vaadin-dialog header-title=\"Title\">\n <div>Dialog content</div>\n <div slot=\"footer\">Footer</div>\n</vaadin-dialog>\n```\n\n### Slots\n\nDialog supports following slots for providing content:\n\nName | Description\n-----------------|-------------\n(none) | Default slot for the content\n`header-content` | Slot for the header content\n`footer` | Slot for the footer content\n\n#### Renderer (deprecated)\n\nThe content of the dialog can also be populated by using the renderer callback functions,\nalthough this approach is deprecated in favor of slotted content.\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 content\n`has-footer` | Set when the element has footer content\n`overflow` | Set to `top`, `bottom`, none or both\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------|\n|`--vaadin-dialog-background` |\n|`--vaadin-dialog-border-color` |\n|`--vaadin-dialog-border-radius` |\n|`--vaadin-dialog-border-width` |\n|`--vaadin-dialog-max-width` |\n|`--vaadin-dialog-min-width` |\n|`--vaadin-dialog-overflow-indicator-color` |\n|`--vaadin-dialog-overflow-indicator-height` |\n|`--vaadin-dialog-padding` |\n|`--vaadin-dialog-shadow` |\n|`--vaadin-dialog-text-color` |\n|`--vaadin-dialog-title-color` |\n|`--vaadin-dialog-title-font-size` |\n|`--vaadin-dialog-title-font-weight` |\n|`--vaadin-dialog-title-line-height` |\n|`--vaadin-overlay-backdrop-background` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
11
|
+
"description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n```html\n<vaadin-dialog header-title=\"Title\">\n <div>Dialog content</div>\n <div slot=\"footer\">Footer</div>\n</vaadin-dialog>\n```\n\n### Slots\n\nDialog supports following slots for providing content:\n\nName | Description\n-----------------|-------------\n(none) | Default slot for the content\n`header-content` | Slot for the header content\n`footer` | Slot for the footer content\n\n#### Renderer (deprecated)\n\nThe content of the dialog can also be populated by using the renderer callback functions,\nalthough this approach is deprecated in favor of slotted content.\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 content\n`has-footer` | Set when the element has footer content\n`overflow` | Set to `top`, `bottom`, none or both\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------|\n|`--vaadin-dialog-background` |\n|`--vaadin-dialog-border-color` |\n|`--vaadin-dialog-border-radius` |\n|`--vaadin-dialog-border-width` |\n|`--vaadin-dialog-max-width` |\n|`--vaadin-dialog-min-width` |\n|`--vaadin-dialog-overflow-indicator-color` |\n|`--vaadin-dialog-overflow-indicator-height` |\n|`--vaadin-dialog-padding` |\n|`--vaadin-dialog-shadow` |\n|`--vaadin-dialog-text-color` |\n|`--vaadin-dialog-title-color` |\n|`--vaadin-dialog-title-font-size` |\n|`--vaadin-dialog-title-font-weight` |\n|`--vaadin-dialog-title-line-height` |\n|`--vaadin-dialog-toolbar-gap` |\n|`--vaadin-overlay-backdrop-background` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "draggable",
|
|
@@ -64,6 +64,15 @@
|
|
|
64
64
|
]
|
|
65
65
|
}
|
|
66
66
|
},
|
|
67
|
+
{
|
|
68
|
+
"name": "no-autofocus",
|
|
69
|
+
"description": "Set to true to prevent focus from moving into the dialog on open.\n\nThis property only works for non-modal dialogs and is ignored\nfor modal ones, where focus must always stay inside.",
|
|
70
|
+
"value": {
|
|
71
|
+
"type": [
|
|
72
|
+
"boolean"
|
|
73
|
+
]
|
|
74
|
+
}
|
|
75
|
+
},
|
|
67
76
|
{
|
|
68
77
|
"name": "no-close-on-esc",
|
|
69
78
|
"description": "Set to true to disable closing dialog on Escape press",
|
|
@@ -84,7 +93,7 @@
|
|
|
84
93
|
},
|
|
85
94
|
{
|
|
86
95
|
"name": "no-focus-trap",
|
|
87
|
-
"description": "Set to true to
|
|
96
|
+
"description": "Set to true to prevent the dialog from receiving focus\non open and trapping it inside.",
|
|
88
97
|
"value": {
|
|
89
98
|
"type": [
|
|
90
99
|
"boolean"
|
|
@@ -222,6 +231,15 @@
|
|
|
222
231
|
]
|
|
223
232
|
}
|
|
224
233
|
},
|
|
234
|
+
{
|
|
235
|
+
"name": "noAutofocus",
|
|
236
|
+
"description": "Set to true to prevent focus from moving into the dialog on open.\n\nThis property only works for non-modal dialogs and is ignored\nfor modal ones, where focus must always stay inside.",
|
|
237
|
+
"value": {
|
|
238
|
+
"type": [
|
|
239
|
+
"boolean"
|
|
240
|
+
]
|
|
241
|
+
}
|
|
242
|
+
},
|
|
225
243
|
{
|
|
226
244
|
"name": "noCloseOnEsc",
|
|
227
245
|
"description": "Set to true to disable closing dialog on Escape press",
|
|
@@ -242,7 +260,7 @@
|
|
|
242
260
|
},
|
|
243
261
|
{
|
|
244
262
|
"name": "noFocusTrap",
|
|
245
|
-
"description": "Set to true to
|
|
263
|
+
"description": "Set to true to prevent the dialog from receiving focus\non open and trapping it inside.",
|
|
246
264
|
"value": {
|
|
247
265
|
"type": [
|
|
248
266
|
"boolean"
|
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.3.0-
|
|
4
|
+
"version": "25.3.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
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```html\n<vaadin-dialog header-title=\"Title\">\n <div>Dialog content</div>\n <div slot=\"footer\">Footer</div>\n</vaadin-dialog>\n```\n\n### Slots\n\nDialog supports following slots for providing content:\n\nName | Description\n-----------------|-------------\n(none) | Default slot for the content\n`header-content` | Slot for the header content\n`footer` | Slot for the footer content\n\n#### Renderer (deprecated)\n\nThe content of the dialog can also be populated by using the renderer callback functions,\nalthough this approach is deprecated in favor of slotted content.\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 content\n`has-footer` | Set when the element has footer content\n`overflow` | Set to `top`, `bottom`, none or both\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------|\n|`--vaadin-dialog-background` |\n|`--vaadin-dialog-border-color` |\n|`--vaadin-dialog-border-radius` |\n|`--vaadin-dialog-border-width` |\n|`--vaadin-dialog-max-width` |\n|`--vaadin-dialog-min-width` |\n|`--vaadin-dialog-overflow-indicator-color` |\n|`--vaadin-dialog-overflow-indicator-height` |\n|`--vaadin-dialog-padding` |\n|`--vaadin-dialog-shadow` |\n|`--vaadin-dialog-text-color` |\n|`--vaadin-dialog-title-color` |\n|`--vaadin-dialog-title-font-size` |\n|`--vaadin-dialog-title-font-weight` |\n|`--vaadin-dialog-title-line-height` |\n|`--vaadin-overlay-backdrop-background` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
19
|
+
"description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n```html\n<vaadin-dialog header-title=\"Title\">\n <div>Dialog content</div>\n <div slot=\"footer\">Footer</div>\n</vaadin-dialog>\n```\n\n### Slots\n\nDialog supports following slots for providing content:\n\nName | Description\n-----------------|-------------\n(none) | Default slot for the content\n`header-content` | Slot for the header content\n`footer` | Slot for the footer content\n\n#### Renderer (deprecated)\n\nThe content of the dialog can also be populated by using the renderer callback functions,\nalthough this approach is deprecated in favor of slotted content.\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 content\n`has-footer` | Set when the element has footer content\n`overflow` | Set to `top`, `bottom`, none or both\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------|\n|`--vaadin-dialog-background` |\n|`--vaadin-dialog-border-color` |\n|`--vaadin-dialog-border-radius` |\n|`--vaadin-dialog-border-width` |\n|`--vaadin-dialog-max-width` |\n|`--vaadin-dialog-min-width` |\n|`--vaadin-dialog-overflow-indicator-color` |\n|`--vaadin-dialog-overflow-indicator-height` |\n|`--vaadin-dialog-padding` |\n|`--vaadin-dialog-shadow` |\n|`--vaadin-dialog-text-color` |\n|`--vaadin-dialog-title-color` |\n|`--vaadin-dialog-title-font-size` |\n|`--vaadin-dialog-title-font-weight` |\n|`--vaadin-dialog-title-line-height` |\n|`--vaadin-dialog-toolbar-gap` |\n|`--vaadin-overlay-backdrop-background` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -75,6 +75,13 @@
|
|
|
75
75
|
"kind": "expression"
|
|
76
76
|
}
|
|
77
77
|
},
|
|
78
|
+
{
|
|
79
|
+
"name": "?noAutofocus",
|
|
80
|
+
"description": "Set to true to prevent focus from moving into the dialog on open.\n\nThis property only works for non-modal dialogs and is ignored\nfor modal ones, where focus must always stay inside.",
|
|
81
|
+
"value": {
|
|
82
|
+
"kind": "expression"
|
|
83
|
+
}
|
|
84
|
+
},
|
|
78
85
|
{
|
|
79
86
|
"name": "?noCloseOnEsc",
|
|
80
87
|
"description": "Set to true to disable closing dialog on Escape press",
|
|
@@ -91,7 +98,7 @@
|
|
|
91
98
|
},
|
|
92
99
|
{
|
|
93
100
|
"name": "?noFocusTrap",
|
|
94
|
-
"description": "Set to true to
|
|
101
|
+
"description": "Set to true to prevent the dialog from receiving focus\non open and trapping it inside.",
|
|
95
102
|
"value": {
|
|
96
103
|
"kind": "expression"
|
|
97
104
|
}
|