@vaadin/dialog 23.2.0-dev.8a7678b70 → 23.3.0-alpha1
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/README.md +4 -4
- package/package.json +17 -11
- package/src/lit/renderer-directives.d.ts +4 -4
- package/src/vaadin-dialog-draggable-mixin.d.ts +2 -2
- package/src/vaadin-dialog-resizable-mixin.d.ts +2 -2
- package/src/vaadin-dialog.d.ts +9 -9
- package/src/vaadin-dialog.js +13 -4
- package/web-types.json +221 -0
- package/web-types.lit.json +111 -0
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
A web component for presenting information and user interface elements in an overlay.
|
|
4
4
|
|
|
5
|
-
[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/
|
|
5
|
+
[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/dialog)
|
|
6
6
|
|
|
7
7
|
[](https://www.npmjs.com/package/@vaadin/dialog)
|
|
8
8
|
[](https://discord.gg/PHmkCKC)
|
|
@@ -18,7 +18,7 @@ A web component for presenting information and user interface elements in an ove
|
|
|
18
18
|
</script>
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/dialog/screenshot.png" width="264" alt="Screenshot of vaadin-dialog">](https://vaadin.com/docs/latest/
|
|
21
|
+
[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/dialog/screenshot.png" width="264" alt="Screenshot of vaadin-dialog">](https://vaadin.com/docs/latest/components/dialog)
|
|
22
22
|
|
|
23
23
|
## Installation
|
|
24
24
|
|
|
@@ -36,7 +36,7 @@ import '@vaadin/dialog';
|
|
|
36
36
|
|
|
37
37
|
## Themes
|
|
38
38
|
|
|
39
|
-
Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/
|
|
39
|
+
Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
|
|
40
40
|
The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/dialog/vaadin-dialog.js) of the package uses the Lumo theme.
|
|
41
41
|
|
|
42
42
|
To use the Material theme, import the component from the `theme/material` folder:
|
|
@@ -59,7 +59,7 @@ import '@vaadin/dialog/src/vaadin-dialog.js';
|
|
|
59
59
|
|
|
60
60
|
## Contributing
|
|
61
61
|
|
|
62
|
-
Read the [contributing guide](https://vaadin.com/docs/latest/
|
|
62
|
+
Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
|
|
63
63
|
|
|
64
64
|
## License
|
|
65
65
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/dialog",
|
|
3
|
-
"version": "23.
|
|
3
|
+
"version": "23.3.0-alpha1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -25,7 +25,9 @@
|
|
|
25
25
|
"src",
|
|
26
26
|
"theme",
|
|
27
27
|
"vaadin-*.d.ts",
|
|
28
|
-
"vaadin-*.js"
|
|
28
|
+
"vaadin-*.js",
|
|
29
|
+
"web-types.json",
|
|
30
|
+
"web-types.lit.json"
|
|
29
31
|
],
|
|
30
32
|
"keywords": [
|
|
31
33
|
"Vaadin",
|
|
@@ -37,19 +39,23 @@
|
|
|
37
39
|
"dependencies": {
|
|
38
40
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
39
41
|
"@polymer/polymer": "^3.0.0",
|
|
40
|
-
"@vaadin/component-base": "23.
|
|
41
|
-
"@vaadin/lit-renderer": "23.
|
|
42
|
-
"@vaadin/vaadin-lumo-styles": "23.
|
|
43
|
-
"@vaadin/vaadin-material-styles": "23.
|
|
44
|
-
"@vaadin/vaadin-overlay": "23.
|
|
45
|
-
"@vaadin/vaadin-themable-mixin": "23.
|
|
42
|
+
"@vaadin/component-base": "23.3.0-alpha1",
|
|
43
|
+
"@vaadin/lit-renderer": "23.3.0-alpha1",
|
|
44
|
+
"@vaadin/vaadin-lumo-styles": "23.3.0-alpha1",
|
|
45
|
+
"@vaadin/vaadin-material-styles": "23.3.0-alpha1",
|
|
46
|
+
"@vaadin/vaadin-overlay": "23.3.0-alpha1",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "23.3.0-alpha1"
|
|
46
48
|
},
|
|
47
49
|
"devDependencies": {
|
|
48
50
|
"@esm-bundle/chai": "^4.3.4",
|
|
49
|
-
"@vaadin/polymer-legacy-adapter": "23.
|
|
51
|
+
"@vaadin/polymer-legacy-adapter": "23.3.0-alpha1",
|
|
50
52
|
"@vaadin/testing-helpers": "^0.3.2",
|
|
51
|
-
"@vaadin/text-area": "23.
|
|
53
|
+
"@vaadin/text-area": "23.3.0-alpha1",
|
|
52
54
|
"sinon": "^13.0.2"
|
|
53
55
|
},
|
|
54
|
-
"
|
|
56
|
+
"web-types": [
|
|
57
|
+
"web-types.json",
|
|
58
|
+
"web-types.lit.json"
|
|
59
|
+
],
|
|
60
|
+
"gitHead": "beabc527d4b1274eb798ff701d406fed45cfe638"
|
|
55
61
|
}
|
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
/* eslint-disable max-classes-per-file */
|
|
7
|
-
import { TemplateResult } from 'lit';
|
|
8
|
-
import { DirectiveResult } from 'lit/directive.js';
|
|
7
|
+
import type { TemplateResult } from 'lit';
|
|
8
|
+
import type { DirectiveResult } from 'lit/directive.js';
|
|
9
9
|
import { LitRendererDirective } from '@vaadin/lit-renderer';
|
|
10
|
-
import { Dialog } from '../vaadin-dialog.js';
|
|
10
|
+
import type { Dialog } from '../vaadin-dialog.js';
|
|
11
11
|
|
|
12
12
|
export type DialogLitRenderer = (dialog: Dialog) => TemplateResult;
|
|
13
13
|
|
|
@@ -15,7 +15,7 @@ declare abstract class AbstractDialogRendererDirective extends LitRendererDirect
|
|
|
15
15
|
/**
|
|
16
16
|
* A property to that the renderer callback will be assigned.
|
|
17
17
|
*/
|
|
18
|
-
abstract rendererProperty: '
|
|
18
|
+
abstract rendererProperty: 'footerRenderer' | 'headerRenderer' | 'renderer';
|
|
19
19
|
|
|
20
20
|
/**
|
|
21
21
|
* Adds the renderer callback to the dialog.
|
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
* Copyright (c) 2017 - 2022 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import { Constructor } from '@open-wc/dedupe-mixin';
|
|
6
|
+
import type { Constructor } from '@open-wc/dedupe-mixin';
|
|
7
7
|
|
|
8
8
|
export declare function DialogDraggableMixin<T extends Constructor<HTMLElement>>(
|
|
9
9
|
base: T,
|
|
10
|
-
):
|
|
10
|
+
): Constructor<DialogDraggableMixinClass> & T;
|
|
11
11
|
|
|
12
12
|
export declare class DialogDraggableMixinClass {
|
|
13
13
|
/**
|
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
* Copyright (c) 2017 - 2022 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import { Constructor } from '@open-wc/dedupe-mixin';
|
|
6
|
+
import type { Constructor } from '@open-wc/dedupe-mixin';
|
|
7
7
|
|
|
8
8
|
export declare function DialogResizableMixin<T extends Constructor<HTMLElement>>(
|
|
9
9
|
base: T,
|
|
10
|
-
):
|
|
10
|
+
): Constructor<DialogResizableMixinClass> & T;
|
|
11
11
|
|
|
12
12
|
export declare class DialogResizableMixinClass {
|
|
13
13
|
/**
|
package/src/vaadin-dialog.d.ts
CHANGED
|
@@ -16,7 +16,7 @@ export class DialogOverlay extends OverlayElement {}
|
|
|
16
16
|
|
|
17
17
|
export type DialogRenderer = (root: HTMLElement, dialog?: Dialog) => void;
|
|
18
18
|
|
|
19
|
-
export type DialogResizableDirection = '
|
|
19
|
+
export type DialogResizableDirection = 'e' | 'n' | 'ne' | 'nw' | 's' | 'se' | 'sw' | 'w';
|
|
20
20
|
|
|
21
21
|
export type DialogResizeDimensions = {
|
|
22
22
|
width: string;
|
|
@@ -35,10 +35,10 @@ export type DialogOverlayBounds = {
|
|
|
35
35
|
export type DialogOverlayBoundsParam =
|
|
36
36
|
| DialogOverlayBounds
|
|
37
37
|
| {
|
|
38
|
-
top?:
|
|
39
|
-
left?:
|
|
40
|
-
width?:
|
|
41
|
-
height?:
|
|
38
|
+
top?: number | string;
|
|
39
|
+
left?: number | string;
|
|
40
|
+
width?: number | string;
|
|
41
|
+
height?: number | string;
|
|
42
42
|
};
|
|
43
43
|
|
|
44
44
|
/**
|
|
@@ -57,7 +57,7 @@ export interface DialogCustomEventMap {
|
|
|
57
57
|
resize: DialogResizeEvent;
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
-
export type DialogEventMap =
|
|
60
|
+
export type DialogEventMap = DialogCustomEventMap & HTMLElementEventMap;
|
|
61
61
|
|
|
62
62
|
/**
|
|
63
63
|
* `<vaadin-dialog>` is a Web Component for creating customized modal dialogs.
|
|
@@ -115,7 +115,7 @@ export type DialogEventMap = HTMLElementEventMap & DialogCustomEventMap;
|
|
|
115
115
|
* Note: the `theme` attribute value set on `<vaadin-dialog>` is
|
|
116
116
|
* propagated to the internal `<vaadin-dialog-overlay>` component.
|
|
117
117
|
*
|
|
118
|
-
* See [Styling Components](https://vaadin.com/docs/latest/
|
|
118
|
+
* See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
|
|
119
119
|
*
|
|
120
120
|
* @fires {CustomEvent} resize - Fired when the dialog resize is finished.
|
|
121
121
|
* @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
|
|
@@ -208,13 +208,13 @@ declare class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixi
|
|
|
208
208
|
addEventListener<K extends keyof DialogEventMap>(
|
|
209
209
|
type: K,
|
|
210
210
|
listener: (this: Dialog, ev: DialogEventMap[K]) => void,
|
|
211
|
-
options?:
|
|
211
|
+
options?: AddEventListenerOptions | boolean,
|
|
212
212
|
): void;
|
|
213
213
|
|
|
214
214
|
removeEventListener<K extends keyof DialogEventMap>(
|
|
215
215
|
type: K,
|
|
216
216
|
listener: (this: Dialog, ev: DialogEventMap[K]) => void,
|
|
217
|
-
options?:
|
|
217
|
+
options?: EventListenerOptions | boolean,
|
|
218
218
|
): void;
|
|
219
219
|
}
|
|
220
220
|
|
package/src/vaadin-dialog.js
CHANGED
|
@@ -26,6 +26,10 @@ registerStyles(
|
|
|
26
26
|
z-index: 1;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
+
[part='header'] {
|
|
30
|
+
flex-wrap: nowrap;
|
|
31
|
+
}
|
|
32
|
+
|
|
29
33
|
::slotted([slot='header-content']),
|
|
30
34
|
::slotted([slot='title']),
|
|
31
35
|
::slotted([slot='footer']) {
|
|
@@ -33,6 +37,11 @@ registerStyles(
|
|
|
33
37
|
pointer-events: auto;
|
|
34
38
|
}
|
|
35
39
|
|
|
40
|
+
::slotted([slot='title']) {
|
|
41
|
+
font: inherit !important;
|
|
42
|
+
overflow-wrap: anywhere;
|
|
43
|
+
}
|
|
44
|
+
|
|
36
45
|
[part='header-content'] {
|
|
37
46
|
flex: 1;
|
|
38
47
|
}
|
|
@@ -260,7 +269,7 @@ export class DialogOverlay extends OverlayElement {
|
|
|
260
269
|
_headerTitleRenderer() {
|
|
261
270
|
if (this.headerTitle) {
|
|
262
271
|
if (!this.headerTitleElement) {
|
|
263
|
-
this.headerTitleElement = document.createElement('
|
|
272
|
+
this.headerTitleElement = document.createElement('h2');
|
|
264
273
|
this.headerTitleElement.setAttribute('slot', 'title');
|
|
265
274
|
this.headerTitleElement.classList.add('draggable');
|
|
266
275
|
}
|
|
@@ -318,11 +327,11 @@ export class DialogOverlay extends OverlayElement {
|
|
|
318
327
|
this.__forceSafariReflow();
|
|
319
328
|
}
|
|
320
329
|
|
|
321
|
-
|
|
330
|
+
Object.keys(parsedBounds).forEach((arg) => {
|
|
322
331
|
if (typeof parsedBounds[arg] === 'number') {
|
|
323
332
|
parsedBounds[arg] = `${parsedBounds[arg]}px`;
|
|
324
333
|
}
|
|
325
|
-
}
|
|
334
|
+
});
|
|
326
335
|
|
|
327
336
|
Object.assign(overlay.style, parsedBounds);
|
|
328
337
|
}
|
|
@@ -442,7 +451,7 @@ customElements.define(DialogOverlay.is, DialogOverlay);
|
|
|
442
451
|
* Note: the `theme` attribute value set on `<vaadin-dialog>` is
|
|
443
452
|
* propagated to the internal `<vaadin-dialog-overlay>` component.
|
|
444
453
|
*
|
|
445
|
-
* See [Styling Components](https://vaadin.com/docs/latest/
|
|
454
|
+
* See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
|
|
446
455
|
*
|
|
447
456
|
* @fires {CustomEvent} resize - Fired when the dialog resize is finished.
|
|
448
457
|
* @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
|
package/web-types.json
ADDED
|
@@ -0,0 +1,221 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/dialog",
|
|
4
|
+
"version": "23.3.0-alpha1",
|
|
5
|
+
"description-markup": "markdown",
|
|
6
|
+
"contributions": {
|
|
7
|
+
"html": {
|
|
8
|
+
"elements": [
|
|
9
|
+
{
|
|
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\n`<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal\nthemable component as the actual visible dialog overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-overlay) documentation.\nfor `<vaadin-dialog-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\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\nNote: the `theme` attribute value set on `<vaadin-dialog>` is\npropagated to the internal `<vaadin-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
|
|
12
|
+
"attributes": [
|
|
13
|
+
{
|
|
14
|
+
"name": "draggable",
|
|
15
|
+
"description": "Set to true to enable repositioning the dialog by clicking and dragging.\n\nBy default, only the overlay area can be used to drag the element. But,\na child element can be marked as a draggable area by adding a\n\"`draggable`\" class to it, this will by default make all of its children draggable also.\nIf you want a child element to be draggable\nbut still have its children non-draggable (by default), mark it with\n\"`draggable-leaf-only`\" class name.",
|
|
16
|
+
"value": {
|
|
17
|
+
"type": [
|
|
18
|
+
"boolean"
|
|
19
|
+
]
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"name": "resizable",
|
|
24
|
+
"description": "Set to true to enable resizing the dialog by dragging the corners and edges.",
|
|
25
|
+
"value": {
|
|
26
|
+
"type": [
|
|
27
|
+
"boolean"
|
|
28
|
+
]
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"name": "opened",
|
|
33
|
+
"description": "True if the overlay is currently displayed.",
|
|
34
|
+
"value": {
|
|
35
|
+
"type": [
|
|
36
|
+
"boolean"
|
|
37
|
+
]
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"name": "no-close-on-outside-click",
|
|
42
|
+
"description": "Set to true to disable closing dialog on outside click",
|
|
43
|
+
"value": {
|
|
44
|
+
"type": [
|
|
45
|
+
"boolean"
|
|
46
|
+
]
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"name": "no-close-on-esc",
|
|
51
|
+
"description": "Set to true to disable closing dialog on Escape press",
|
|
52
|
+
"value": {
|
|
53
|
+
"type": [
|
|
54
|
+
"boolean"
|
|
55
|
+
]
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"name": "aria-label",
|
|
60
|
+
"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.",
|
|
61
|
+
"value": {
|
|
62
|
+
"type": [
|
|
63
|
+
"string",
|
|
64
|
+
"null",
|
|
65
|
+
"undefined"
|
|
66
|
+
]
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"name": "header-title",
|
|
71
|
+
"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 added to the overlay element.",
|
|
72
|
+
"value": {
|
|
73
|
+
"type": [
|
|
74
|
+
"string",
|
|
75
|
+
"null",
|
|
76
|
+
"undefined"
|
|
77
|
+
]
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"name": "modeless",
|
|
82
|
+
"description": "Set to true to remove backdrop and allow click events on background elements.",
|
|
83
|
+
"value": {
|
|
84
|
+
"type": [
|
|
85
|
+
"boolean"
|
|
86
|
+
]
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"name": "theme",
|
|
91
|
+
"description": "The theme variants to apply to the component.",
|
|
92
|
+
"value": {
|
|
93
|
+
"type": [
|
|
94
|
+
"string",
|
|
95
|
+
"null",
|
|
96
|
+
"undefined"
|
|
97
|
+
]
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
],
|
|
101
|
+
"js": {
|
|
102
|
+
"properties": [
|
|
103
|
+
{
|
|
104
|
+
"name": "draggable",
|
|
105
|
+
"description": "Set to true to enable repositioning the dialog by clicking and dragging.\n\nBy default, only the overlay area can be used to drag the element. But,\na child element can be marked as a draggable area by adding a\n\"`draggable`\" class to it, this will by default make all of its children draggable also.\nIf you want a child element to be draggable\nbut still have its children non-draggable (by default), mark it with\n\"`draggable-leaf-only`\" class name.",
|
|
106
|
+
"value": {
|
|
107
|
+
"type": [
|
|
108
|
+
"boolean"
|
|
109
|
+
]
|
|
110
|
+
}
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"name": "resizable",
|
|
114
|
+
"description": "Set to true to enable resizing the dialog by dragging the corners and edges.",
|
|
115
|
+
"value": {
|
|
116
|
+
"type": [
|
|
117
|
+
"boolean"
|
|
118
|
+
]
|
|
119
|
+
}
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"name": "opened",
|
|
123
|
+
"description": "True if the overlay is currently displayed.",
|
|
124
|
+
"value": {
|
|
125
|
+
"type": [
|
|
126
|
+
"boolean"
|
|
127
|
+
]
|
|
128
|
+
}
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
"name": "noCloseOnOutsideClick",
|
|
132
|
+
"description": "Set to true to disable closing dialog on outside click",
|
|
133
|
+
"value": {
|
|
134
|
+
"type": [
|
|
135
|
+
"boolean"
|
|
136
|
+
]
|
|
137
|
+
}
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
"name": "noCloseOnEsc",
|
|
141
|
+
"description": "Set to true to disable closing dialog on Escape press",
|
|
142
|
+
"value": {
|
|
143
|
+
"type": [
|
|
144
|
+
"boolean"
|
|
145
|
+
]
|
|
146
|
+
}
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"name": "ariaLabel",
|
|
150
|
+
"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.",
|
|
151
|
+
"value": {
|
|
152
|
+
"type": [
|
|
153
|
+
"string",
|
|
154
|
+
"null",
|
|
155
|
+
"undefined"
|
|
156
|
+
]
|
|
157
|
+
}
|
|
158
|
+
},
|
|
159
|
+
{
|
|
160
|
+
"name": "renderer",
|
|
161
|
+
"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.",
|
|
162
|
+
"value": {
|
|
163
|
+
"type": [
|
|
164
|
+
"DialogRenderer",
|
|
165
|
+
"undefined"
|
|
166
|
+
]
|
|
167
|
+
}
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
"name": "headerTitle",
|
|
171
|
+
"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 added to the overlay element.",
|
|
172
|
+
"value": {
|
|
173
|
+
"type": [
|
|
174
|
+
"string",
|
|
175
|
+
"null",
|
|
176
|
+
"undefined"
|
|
177
|
+
]
|
|
178
|
+
}
|
|
179
|
+
},
|
|
180
|
+
{
|
|
181
|
+
"name": "headerRenderer",
|
|
182
|
+
"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 added to the overlay element.",
|
|
183
|
+
"value": {
|
|
184
|
+
"type": [
|
|
185
|
+
"DialogRenderer",
|
|
186
|
+
"undefined"
|
|
187
|
+
]
|
|
188
|
+
}
|
|
189
|
+
},
|
|
190
|
+
{
|
|
191
|
+
"name": "footerRenderer",
|
|
192
|
+
"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 added to the overlay element.",
|
|
193
|
+
"value": {
|
|
194
|
+
"type": [
|
|
195
|
+
"DialogRenderer",
|
|
196
|
+
"undefined"
|
|
197
|
+
]
|
|
198
|
+
}
|
|
199
|
+
},
|
|
200
|
+
{
|
|
201
|
+
"name": "modeless",
|
|
202
|
+
"description": "Set to true to remove backdrop and allow click events on background elements.",
|
|
203
|
+
"value": {
|
|
204
|
+
"type": [
|
|
205
|
+
"boolean"
|
|
206
|
+
]
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
],
|
|
210
|
+
"events": [
|
|
211
|
+
{
|
|
212
|
+
"name": "opened-changed",
|
|
213
|
+
"description": "Fired when the `opened` property changes."
|
|
214
|
+
}
|
|
215
|
+
]
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
]
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
}
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/dialog",
|
|
4
|
+
"version": "23.3.0-alpha1",
|
|
5
|
+
"description-markup": "markdown",
|
|
6
|
+
"framework": "lit",
|
|
7
|
+
"framework-config": {
|
|
8
|
+
"enable-when": {
|
|
9
|
+
"node-packages": [
|
|
10
|
+
"lit"
|
|
11
|
+
]
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
"contributions": {
|
|
15
|
+
"html": {
|
|
16
|
+
"elements": [
|
|
17
|
+
{
|
|
18
|
+
"name": "vaadin-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\n`<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal\nthemable component as the actual visible dialog overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-overlay) documentation.\nfor `<vaadin-dialog-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\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\nNote: the `theme` attribute value set on `<vaadin-dialog>` is\npropagated to the internal `<vaadin-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
|
|
20
|
+
"extension": true,
|
|
21
|
+
"attributes": [
|
|
22
|
+
{
|
|
23
|
+
"name": "?draggable",
|
|
24
|
+
"description": "Set to true to enable repositioning the dialog by clicking and dragging.\n\nBy default, only the overlay area can be used to drag the element. But,\na child element can be marked as a draggable area by adding a\n\"`draggable`\" class to it, this will by default make all of its children draggable also.\nIf you want a child element to be draggable\nbut still have its children non-draggable (by default), mark it with\n\"`draggable-leaf-only`\" class name.",
|
|
25
|
+
"value": {
|
|
26
|
+
"kind": "expression"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"name": "?resizable",
|
|
31
|
+
"description": "Set to true to enable resizing the dialog by dragging the corners and edges.",
|
|
32
|
+
"value": {
|
|
33
|
+
"kind": "expression"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"name": "?opened",
|
|
38
|
+
"description": "True if the overlay is currently displayed.",
|
|
39
|
+
"value": {
|
|
40
|
+
"kind": "expression"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"name": "?noCloseOnOutsideClick",
|
|
45
|
+
"description": "Set to true to disable closing dialog on outside click",
|
|
46
|
+
"value": {
|
|
47
|
+
"kind": "expression"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"name": "?noCloseOnEsc",
|
|
52
|
+
"description": "Set to true to disable closing dialog on Escape press",
|
|
53
|
+
"value": {
|
|
54
|
+
"kind": "expression"
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"name": "?modeless",
|
|
59
|
+
"description": "Set to true to remove backdrop and allow click events on background elements.",
|
|
60
|
+
"value": {
|
|
61
|
+
"kind": "expression"
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"name": ".ariaLabel",
|
|
66
|
+
"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.",
|
|
67
|
+
"value": {
|
|
68
|
+
"kind": "expression"
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"name": ".renderer",
|
|
73
|
+
"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.",
|
|
74
|
+
"value": {
|
|
75
|
+
"kind": "expression"
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"name": ".headerTitle",
|
|
80
|
+
"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 added to the overlay element.",
|
|
81
|
+
"value": {
|
|
82
|
+
"kind": "expression"
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"name": ".headerRenderer",
|
|
87
|
+
"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 added to the overlay element.",
|
|
88
|
+
"value": {
|
|
89
|
+
"kind": "expression"
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"name": ".footerRenderer",
|
|
94
|
+
"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 added to the overlay element.",
|
|
95
|
+
"value": {
|
|
96
|
+
"kind": "expression"
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"name": "@opened-changed",
|
|
101
|
+
"description": "Fired when the `opened` property changes.",
|
|
102
|
+
"value": {
|
|
103
|
+
"kind": "expression"
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
]
|
|
107
|
+
}
|
|
108
|
+
]
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|