@vaadin/dialog 25.3.0-alpha3 → 25.3.0-alpha5
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 +13 -1
- package/package.json +11 -11
- package/src/lit/renderer-directives.d.ts +3 -0
- package/src/lit/renderer-directives.js +3 -0
- package/src/vaadin-dialog-renderer-mixin.d.ts +6 -0
- package/src/vaadin-dialog-renderer-mixin.js +3 -0
- package/src/vaadin-dialog.d.ts +22 -4
- package/src/vaadin-dialog.js +22 -4
- package/web-types.json +2 -2
- package/web-types.lit.json +2 -2
package/custom-elements.json
CHANGED
|
@@ -758,6 +758,7 @@
|
|
|
758
758
|
"text": "DialogRenderer | undefined"
|
|
759
759
|
},
|
|
760
760
|
"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.",
|
|
761
|
+
"deprecated": "Add footer content as children of the dialog using `slot=\"footer\"` instead",
|
|
761
762
|
"attribute": "footer-renderer"
|
|
762
763
|
},
|
|
763
764
|
{
|
|
@@ -768,6 +769,7 @@
|
|
|
768
769
|
"text": "DialogRenderer | undefined"
|
|
769
770
|
},
|
|
770
771
|
"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.",
|
|
772
|
+
"deprecated": "Add header content as children of the dialog using `slot=\"header-content\"` instead",
|
|
771
773
|
"attribute": "header-renderer"
|
|
772
774
|
},
|
|
773
775
|
{
|
|
@@ -788,6 +790,7 @@
|
|
|
788
790
|
"text": "DialogRenderer | undefined"
|
|
789
791
|
},
|
|
790
792
|
"description": "Custom function for rendering the content of the dialog.\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.",
|
|
793
|
+
"deprecated": "Add content elements as children of the dialog instead",
|
|
791
794
|
"attribute": "renderer"
|
|
792
795
|
},
|
|
793
796
|
{
|
|
@@ -803,6 +806,7 @@
|
|
|
803
806
|
"text": "DialogRenderer | undefined"
|
|
804
807
|
},
|
|
805
808
|
"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.",
|
|
809
|
+
"deprecated": "Add footer content as children of the dialog using `slot=\"footer\"` instead",
|
|
806
810
|
"fieldName": "footerRenderer"
|
|
807
811
|
},
|
|
808
812
|
{
|
|
@@ -811,6 +815,7 @@
|
|
|
811
815
|
"text": "DialogRenderer | undefined"
|
|
812
816
|
},
|
|
813
817
|
"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.",
|
|
818
|
+
"deprecated": "Add header content as children of the dialog using `slot=\"header-content\"` instead",
|
|
814
819
|
"fieldName": "headerRenderer"
|
|
815
820
|
},
|
|
816
821
|
{
|
|
@@ -827,6 +832,7 @@
|
|
|
827
832
|
"text": "DialogRenderer | undefined"
|
|
828
833
|
},
|
|
829
834
|
"description": "Custom function for rendering the content of the dialog.\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.",
|
|
835
|
+
"deprecated": "Add content elements as children of the dialog instead",
|
|
830
836
|
"fieldName": "renderer"
|
|
831
837
|
}
|
|
832
838
|
],
|
|
@@ -982,7 +988,7 @@
|
|
|
982
988
|
"declarations": [
|
|
983
989
|
{
|
|
984
990
|
"kind": "class",
|
|
985
|
-
"description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n###
|
|
991
|
+
"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.",
|
|
986
992
|
"name": "Dialog",
|
|
987
993
|
"members": [
|
|
988
994
|
{
|
|
@@ -1007,6 +1013,7 @@
|
|
|
1007
1013
|
"text": "DialogRenderer | undefined"
|
|
1008
1014
|
},
|
|
1009
1015
|
"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.",
|
|
1016
|
+
"deprecated": "Add footer content as children of the dialog using `slot=\"footer\"` instead",
|
|
1010
1017
|
"attribute": "footer-renderer",
|
|
1011
1018
|
"inheritedFrom": {
|
|
1012
1019
|
"name": "DialogRendererMixin",
|
|
@@ -1021,6 +1028,7 @@
|
|
|
1021
1028
|
"text": "DialogRenderer | undefined"
|
|
1022
1029
|
},
|
|
1023
1030
|
"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.",
|
|
1031
|
+
"deprecated": "Add header content as children of the dialog using `slot=\"header-content\"` instead",
|
|
1024
1032
|
"attribute": "header-renderer",
|
|
1025
1033
|
"inheritedFrom": {
|
|
1026
1034
|
"name": "DialogRendererMixin",
|
|
@@ -1176,6 +1184,7 @@
|
|
|
1176
1184
|
"text": "DialogRenderer | undefined"
|
|
1177
1185
|
},
|
|
1178
1186
|
"description": "Custom function for rendering the content of the dialog.\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.",
|
|
1187
|
+
"deprecated": "Add content elements as children of the dialog instead",
|
|
1179
1188
|
"attribute": "renderer",
|
|
1180
1189
|
"inheritedFrom": {
|
|
1181
1190
|
"name": "DialogRendererMixin",
|
|
@@ -1357,6 +1366,7 @@
|
|
|
1357
1366
|
"text": "DialogRenderer | undefined"
|
|
1358
1367
|
},
|
|
1359
1368
|
"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.",
|
|
1369
|
+
"deprecated": "Add footer content as children of the dialog using `slot=\"footer\"` instead",
|
|
1360
1370
|
"fieldName": "footerRenderer",
|
|
1361
1371
|
"inheritedFrom": {
|
|
1362
1372
|
"name": "DialogRendererMixin",
|
|
@@ -1369,6 +1379,7 @@
|
|
|
1369
1379
|
"text": "DialogRenderer | undefined"
|
|
1370
1380
|
},
|
|
1371
1381
|
"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.",
|
|
1382
|
+
"deprecated": "Add header content as children of the dialog using `slot=\"header-content\"` instead",
|
|
1372
1383
|
"fieldName": "headerRenderer",
|
|
1373
1384
|
"inheritedFrom": {
|
|
1374
1385
|
"name": "DialogRendererMixin",
|
|
@@ -1502,6 +1513,7 @@
|
|
|
1502
1513
|
"text": "DialogRenderer | undefined"
|
|
1503
1514
|
},
|
|
1504
1515
|
"description": "Custom function for rendering the content of the dialog.\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.",
|
|
1516
|
+
"deprecated": "Add content elements as children of the dialog instead",
|
|
1505
1517
|
"fieldName": "renderer",
|
|
1506
1518
|
"inheritedFrom": {
|
|
1507
1519
|
"name": "DialogRendererMixin",
|
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-alpha5",
|
|
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-alpha5",
|
|
41
|
+
"@vaadin/lit-renderer": "25.3.0-alpha5",
|
|
42
|
+
"@vaadin/overlay": "25.3.0-alpha5",
|
|
43
|
+
"@vaadin/vaadin-themable-mixin": "25.3.0-alpha5",
|
|
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-alpha5",
|
|
48
|
+
"@vaadin/aura": "25.3.0-alpha5",
|
|
49
|
+
"@vaadin/chai-plugins": "25.3.0-alpha5",
|
|
50
|
+
"@vaadin/test-runner-commands": "25.3.0-alpha5",
|
|
51
51
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
52
|
-
"@vaadin/vaadin-lumo-styles": "25.3.0-
|
|
52
|
+
"@vaadin/vaadin-lumo-styles": "25.3.0-alpha5",
|
|
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": "0be2142cd8b95a562d58735033f947f7109103ab"
|
|
61
61
|
}
|
|
@@ -69,6 +69,7 @@ export class DialogFooterRendererDirective extends AbstractDialogRendererDirecti
|
|
|
69
69
|
* @param renderer the renderer callback that returns a Lit template.
|
|
70
70
|
* @param dependencies a single dependency or an array of dependencies
|
|
71
71
|
* which trigger a re-render when changed.
|
|
72
|
+
* @deprecated Add content elements as children of the dialog instead
|
|
72
73
|
*/
|
|
73
74
|
export declare function dialogRenderer(
|
|
74
75
|
renderer: DialogLitRenderer,
|
|
@@ -100,6 +101,7 @@ export declare function dialogRenderer(
|
|
|
100
101
|
* @param renderer the renderer callback.
|
|
101
102
|
* @param dependencies a single dependency or an array of dependencies
|
|
102
103
|
* which trigger a re-render when changed.
|
|
104
|
+
* @deprecated Add header content as children of the dialog using `slot="header-content"` instead
|
|
103
105
|
*/
|
|
104
106
|
export declare function dialogHeaderRenderer(
|
|
105
107
|
renderer: DialogLitRenderer,
|
|
@@ -131,6 +133,7 @@ export declare function dialogHeaderRenderer(
|
|
|
131
133
|
* @param renderer the renderer callback.
|
|
132
134
|
* @param dependencies a single dependency or an array of dependencies
|
|
133
135
|
* which trigger a re-render when changed.
|
|
136
|
+
* @deprecated Add footer content as children of the dialog using `slot="footer"` instead
|
|
134
137
|
*/
|
|
135
138
|
export declare function dialogFooterRenderer(
|
|
136
139
|
renderer: DialogLitRenderer,
|
|
@@ -95,6 +95,7 @@ export class DialogFooterRendererDirective extends AbstractDialogRendererDirecti
|
|
|
95
95
|
* @param renderer the renderer callback that returns a Lit template.
|
|
96
96
|
* @param dependencies a single dependency or an array of dependencies
|
|
97
97
|
* which trigger a re-render when changed.
|
|
98
|
+
* @deprecated Add content elements as children of the dialog instead
|
|
98
99
|
*/
|
|
99
100
|
export const dialogRenderer = directive(DialogRendererDirective);
|
|
100
101
|
|
|
@@ -123,6 +124,7 @@ export const dialogRenderer = directive(DialogRendererDirective);
|
|
|
123
124
|
* @param renderer the renderer callback.
|
|
124
125
|
* @param dependencies a single dependency or an array of dependencies
|
|
125
126
|
* which trigger a re-render when changed.
|
|
127
|
+
* @deprecated Add header content as children of the dialog using `slot="header-content"` instead
|
|
126
128
|
*/
|
|
127
129
|
export const dialogHeaderRenderer = directive(DialogHeaderRendererDirective);
|
|
128
130
|
|
|
@@ -151,5 +153,6 @@ export const dialogHeaderRenderer = directive(DialogHeaderRendererDirective);
|
|
|
151
153
|
* @param renderer the renderer callback.
|
|
152
154
|
* @param dependencies a single dependency or an array of dependencies
|
|
153
155
|
* which trigger a re-render when changed.
|
|
156
|
+
* @deprecated Add footer content as children of the dialog using `slot="footer"` instead
|
|
154
157
|
*/
|
|
155
158
|
export const dialogFooterRenderer = directive(DialogFooterRendererDirective);
|
|
@@ -17,6 +17,8 @@ export declare class DialogRendererMixinClass {
|
|
|
17
17
|
*
|
|
18
18
|
* - `root` The root container DOM element. Append your content to it.
|
|
19
19
|
* - `dialog` The reference to the `<vaadin-dialog>` element.
|
|
20
|
+
*
|
|
21
|
+
* @deprecated Add content elements as children of the dialog instead
|
|
20
22
|
*/
|
|
21
23
|
renderer: DialogRenderer | null | undefined;
|
|
22
24
|
|
|
@@ -44,6 +46,8 @@ export declare class DialogRendererMixinClass {
|
|
|
44
46
|
* each other, with the title coming first.
|
|
45
47
|
*
|
|
46
48
|
* When `headerRenderer` is set, the attribute `has-header` is set on the dialog.
|
|
49
|
+
*
|
|
50
|
+
* @deprecated Add header content as children of the dialog using `slot="header-content"` instead
|
|
47
51
|
*/
|
|
48
52
|
headerRenderer: DialogRenderer | null | undefined;
|
|
49
53
|
|
|
@@ -55,6 +59,8 @@ export declare class DialogRendererMixinClass {
|
|
|
55
59
|
* - `dialog` The reference to the `<vaadin-dialog>` element.
|
|
56
60
|
*
|
|
57
61
|
* When `footerRenderer` is set, the attribute `has-footer` is set on the dialog.
|
|
62
|
+
*
|
|
63
|
+
* @deprecated Add footer content as children of the dialog using `slot="footer"` instead
|
|
58
64
|
*/
|
|
59
65
|
footerRenderer: DialogRenderer | null | undefined;
|
|
60
66
|
|
|
@@ -15,6 +15,7 @@ export const DialogRendererMixin = (superClass) =>
|
|
|
15
15
|
* - `root` The root container DOM element. Append your content to it.
|
|
16
16
|
* - `dialog` The reference to the `<vaadin-dialog>` element.
|
|
17
17
|
* @type {DialogRenderer | undefined}
|
|
18
|
+
* @deprecated Add content elements as children of the dialog instead
|
|
18
19
|
*/
|
|
19
20
|
renderer: {
|
|
20
21
|
type: Object,
|
|
@@ -47,6 +48,7 @@ export const DialogRendererMixin = (superClass) =>
|
|
|
47
48
|
*
|
|
48
49
|
* When `headerRenderer` is set, the attribute `has-header` is set on the dialog.
|
|
49
50
|
* @type {DialogRenderer | undefined}
|
|
51
|
+
* @deprecated Add header content as children of the dialog using `slot="header-content"` instead
|
|
50
52
|
*/
|
|
51
53
|
headerRenderer: {
|
|
52
54
|
type: Object,
|
|
@@ -61,6 +63,7 @@ export const DialogRendererMixin = (superClass) =>
|
|
|
61
63
|
*
|
|
62
64
|
* When `footerRenderer` is set, the attribute `has-footer` is set on the dialog.
|
|
63
65
|
* @type {DialogRenderer | undefined}
|
|
66
|
+
* @deprecated Add footer content as children of the dialog using `slot="footer"` instead
|
|
64
67
|
*/
|
|
65
68
|
footerRenderer: {
|
|
66
69
|
type: Object,
|
package/src/vaadin-dialog.d.ts
CHANGED
|
@@ -78,9 +78,27 @@ export type DialogEventMap = DialogCustomEventMap & HTMLElementEventMap;
|
|
|
78
78
|
/**
|
|
79
79
|
* `<vaadin-dialog>` is a Web Component for creating customized modal dialogs.
|
|
80
80
|
*
|
|
81
|
-
*
|
|
81
|
+
* ```html
|
|
82
|
+
* <vaadin-dialog header-title="Title">
|
|
83
|
+
* <div>Dialog content</div>
|
|
84
|
+
* <div slot="footer">Footer</div>
|
|
85
|
+
* </vaadin-dialog>
|
|
86
|
+
* ```
|
|
87
|
+
*
|
|
88
|
+
* ### Slots
|
|
89
|
+
*
|
|
90
|
+
* Dialog supports following slots for providing content:
|
|
91
|
+
*
|
|
92
|
+
* Name | Description
|
|
93
|
+
* -----------------|-------------
|
|
94
|
+
* (none) | Default slot for the content
|
|
95
|
+
* `header-content` | Slot for the header content
|
|
96
|
+
* `footer` | Slot for the footer content
|
|
97
|
+
*
|
|
98
|
+
* #### Renderer (deprecated)
|
|
82
99
|
*
|
|
83
|
-
* The content of the dialog can be populated by using the renderer callback
|
|
100
|
+
* The content of the dialog can also be populated by using the renderer callback functions,
|
|
101
|
+
* although this approach is deprecated in favor of slotted content.
|
|
84
102
|
*
|
|
85
103
|
* The renderer function provides `root`, `dialog` arguments.
|
|
86
104
|
* Generate DOM content, append it to the `root` element and control the state
|
|
@@ -121,8 +139,8 @@ export type DialogEventMap = DialogCustomEventMap & HTMLElementEventMap;
|
|
|
121
139
|
* Attribute | Description
|
|
122
140
|
* -----------------|--------------------------------------------
|
|
123
141
|
* `has-title` | Set when the element has a title
|
|
124
|
-
* `has-header` | Set when the element has header
|
|
125
|
-
* `has-footer` | Set when the element has footer
|
|
142
|
+
* `has-header` | Set when the element has header content
|
|
143
|
+
* `has-footer` | Set when the element has footer content
|
|
126
144
|
* `overflow` | Set to `top`, `bottom`, none or both
|
|
127
145
|
*
|
|
128
146
|
* The following custom CSS properties are available for styling:
|
package/src/vaadin-dialog.js
CHANGED
|
@@ -21,9 +21,27 @@ export { DialogOverlay } from './vaadin-dialog-overlay.js';
|
|
|
21
21
|
/**
|
|
22
22
|
* `<vaadin-dialog>` is a Web Component for creating customized modal dialogs.
|
|
23
23
|
*
|
|
24
|
-
*
|
|
24
|
+
* ```html
|
|
25
|
+
* <vaadin-dialog header-title="Title">
|
|
26
|
+
* <div>Dialog content</div>
|
|
27
|
+
* <div slot="footer">Footer</div>
|
|
28
|
+
* </vaadin-dialog>
|
|
29
|
+
* ```
|
|
30
|
+
*
|
|
31
|
+
* ### Slots
|
|
32
|
+
*
|
|
33
|
+
* Dialog supports following slots for providing content:
|
|
34
|
+
*
|
|
35
|
+
* Name | Description
|
|
36
|
+
* -----------------|-------------
|
|
37
|
+
* (none) | Default slot for the content
|
|
38
|
+
* `header-content` | Slot for the header content
|
|
39
|
+
* `footer` | Slot for the footer content
|
|
40
|
+
*
|
|
41
|
+
* #### Renderer (deprecated)
|
|
25
42
|
*
|
|
26
|
-
* The content of the dialog can be populated by using the renderer callback
|
|
43
|
+
* The content of the dialog can also be populated by using the renderer callback functions,
|
|
44
|
+
* although this approach is deprecated in favor of slotted content.
|
|
27
45
|
*
|
|
28
46
|
* The renderer function provides `root`, `dialog` arguments.
|
|
29
47
|
* Generate DOM content, append it to the `root` element and control the state
|
|
@@ -64,8 +82,8 @@ export { DialogOverlay } from './vaadin-dialog-overlay.js';
|
|
|
64
82
|
* Attribute | Description
|
|
65
83
|
* -----------------|--------------------------------------------
|
|
66
84
|
* `has-title` | Set when the element has a title
|
|
67
|
-
* `has-header` | Set when the element has header
|
|
68
|
-
* `has-footer` | Set when the element has footer
|
|
85
|
+
* `has-header` | Set when the element has header content
|
|
86
|
+
* `has-footer` | Set when the element has footer content
|
|
69
87
|
* `overflow` | Set to `top`, `bottom`, none or both
|
|
70
88
|
*
|
|
71
89
|
* The following custom CSS properties are available for styling:
|
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-alpha5",
|
|
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###
|
|
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.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "draggable",
|
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-alpha5",
|
|
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###
|
|
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.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|