@vaadin/confirm-dialog 24.8.5 → 24.9.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/package.json +12 -12
- package/web-types.json +2 -2
- package/web-types.lit.json +2 -2
- package/src/vaadin-lit-confirm-dialog-overlay.js +0 -122
- package/src/vaadin-lit-confirm-dialog.js +0 -78
- package/theme/lumo/vaadin-lit-confirm-dialog.d.ts +0 -3
- package/theme/lumo/vaadin-lit-confirm-dialog.js +0 -3
- package/theme/material/vaadin-lit-confirm-dialog.d.ts +0 -3
- package/theme/material/vaadin-lit-confirm-dialog.js +0 -3
- package/vaadin-lit-confirm-dialog.d.ts +0 -1
- package/vaadin-lit-confirm-dialog.js +0 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/confirm-dialog",
|
|
3
|
-
"version": "24.
|
|
3
|
+
"version": "24.9.0-alpha1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,19 +37,19 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
39
39
|
"@polymer/polymer": "^3.0.0",
|
|
40
|
-
"@vaadin/button": "
|
|
41
|
-
"@vaadin/component-base": "
|
|
42
|
-
"@vaadin/dialog": "
|
|
43
|
-
"@vaadin/overlay": "
|
|
44
|
-
"@vaadin/vaadin-lumo-styles": "
|
|
45
|
-
"@vaadin/vaadin-material-styles": "
|
|
46
|
-
"@vaadin/vaadin-themable-mixin": "
|
|
40
|
+
"@vaadin/button": "24.9.0-alpha1",
|
|
41
|
+
"@vaadin/component-base": "24.9.0-alpha1",
|
|
42
|
+
"@vaadin/dialog": "24.9.0-alpha1",
|
|
43
|
+
"@vaadin/overlay": "24.9.0-alpha1",
|
|
44
|
+
"@vaadin/vaadin-lumo-styles": "24.9.0-alpha1",
|
|
45
|
+
"@vaadin/vaadin-material-styles": "24.9.0-alpha1",
|
|
46
|
+
"@vaadin/vaadin-themable-mixin": "24.9.0-alpha1",
|
|
47
47
|
"lit": "^3.0.0"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
|
-
"@vaadin/a11y-base": "
|
|
51
|
-
"@vaadin/chai-plugins": "
|
|
52
|
-
"@vaadin/test-runner-commands": "
|
|
50
|
+
"@vaadin/a11y-base": "24.9.0-alpha1",
|
|
51
|
+
"@vaadin/chai-plugins": "24.9.0-alpha1",
|
|
52
|
+
"@vaadin/test-runner-commands": "24.9.0-alpha1",
|
|
53
53
|
"@vaadin/testing-helpers": "^1.1.0",
|
|
54
54
|
"sinon": "^18.0.0"
|
|
55
55
|
},
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"web-types.json",
|
|
58
58
|
"web-types.lit.json"
|
|
59
59
|
],
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "cc13d59f0e3cd1a3b0c19c1a900a5308446fe7ac"
|
|
61
61
|
}
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/confirm-dialog",
|
|
4
|
-
"version": "24.
|
|
4
|
+
"version": "24.9.0-alpha1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-confirm-dialog",
|
|
11
|
-
"description": "`<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.\n\n```\n<vaadin-confirm-dialog cancel-button-visible>\n There are unsaved changes. Do you really want to leave?\n</vaadin-confirm-dialog>\n```\n\n### Styling\n\nThe `<vaadin-confirm-dialog>` is not themable. Apply styles to `<vaadin-confirm-dialog-overlay>`\ncomponent and use its shadow parts for styling.\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.
|
|
11
|
+
"description": "`<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.\n\n```\n<vaadin-confirm-dialog cancel-button-visible>\n There are unsaved changes. Do you really want to leave?\n</vaadin-confirm-dialog>\n```\n\n### Styling\n\nThe `<vaadin-confirm-dialog>` is not themable. Apply styles to `<vaadin-confirm-dialog-overlay>`\ncomponent and use its shadow parts for styling.\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.9.0-alpha1/#/elements/vaadin-overlay) for the overlay styling documentation.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for theming:\n\nPart name | Description\n-----------------|-------------------------------------------\n`header` | The header element wrapper\n`message` | The message element wrapper\n`footer` | The footer element that wraps the buttons\n`cancel-button` | The \"Cancel\" button wrapper\n`confirm-button` | The \"Confirm\" button wrapper\n`reject-button` | The \"Reject\" button wrapper\n\nUse `confirmTheme`, `cancelTheme` and `rejectTheme` properties to customize buttons theme.\nAlso, the `theme` attribute value set on `<vaadin-confirm-dialog>` is propagated to the\n`<vaadin-confirm-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Custom content\n\nThe following slots are available for providing custom content:\n\nSlot name | Description\n------------------|---------------------------\n`header` | Slot for header element\n`cancel-button` | Slot for \"Cancel\" button\n`confirm-button` | Slot for \"Confirm\" button\n`reject-button` | Slot for \"Reject\" button",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "accessible-description-ref",
|
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/confirm-dialog",
|
|
4
|
-
"version": "24.
|
|
4
|
+
"version": "24.9.0-alpha1",
|
|
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-confirm-dialog",
|
|
19
|
-
"description": "`<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.\n\n```\n<vaadin-confirm-dialog cancel-button-visible>\n There are unsaved changes. Do you really want to leave?\n</vaadin-confirm-dialog>\n```\n\n### Styling\n\nThe `<vaadin-confirm-dialog>` is not themable. Apply styles to `<vaadin-confirm-dialog-overlay>`\ncomponent and use its shadow parts for styling.\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.
|
|
19
|
+
"description": "`<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.\n\n```\n<vaadin-confirm-dialog cancel-button-visible>\n There are unsaved changes. Do you really want to leave?\n</vaadin-confirm-dialog>\n```\n\n### Styling\n\nThe `<vaadin-confirm-dialog>` is not themable. Apply styles to `<vaadin-confirm-dialog-overlay>`\ncomponent and use its shadow parts for styling.\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.9.0-alpha1/#/elements/vaadin-overlay) for the overlay styling documentation.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for theming:\n\nPart name | Description\n-----------------|-------------------------------------------\n`header` | The header element wrapper\n`message` | The message element wrapper\n`footer` | The footer element that wraps the buttons\n`cancel-button` | The \"Cancel\" button wrapper\n`confirm-button` | The \"Confirm\" button wrapper\n`reject-button` | The \"Reject\" button wrapper\n\nUse `confirmTheme`, `cancelTheme` and `rejectTheme` properties to customize buttons theme.\nAlso, the `theme` attribute value set on `<vaadin-confirm-dialog>` is propagated to the\n`<vaadin-confirm-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Custom content\n\nThe following slots are available for providing custom content:\n\nSlot name | Description\n------------------|---------------------------\n`header` | Slot for header element\n`cancel-button` | Slot for \"Cancel\" button\n`confirm-button` | Slot for \"Confirm\" button\n`reject-button` | Slot for \"Reject\" button",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -1,122 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2018 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import { css, html, LitElement } from 'lit';
|
|
7
|
-
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
8
|
-
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
9
|
-
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
|
|
10
|
-
import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
|
|
11
|
-
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
12
|
-
import { DialogBaseMixin } from '@vaadin/dialog/src/vaadin-dialog-base-mixin.js';
|
|
13
|
-
import { dialogOverlay } from '@vaadin/dialog/src/vaadin-dialog-styles.js';
|
|
14
|
-
import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
|
|
15
|
-
import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
|
|
16
|
-
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
17
|
-
import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
|
|
18
|
-
import { ConfirmDialogBaseMixin } from './vaadin-confirm-dialog-base-mixin.js';
|
|
19
|
-
import { confirmDialogOverlay } from './vaadin-confirm-dialog-overlay-styles.js';
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* An element used internally by `<vaadin-confirm-dialog>`. Not intended to be used separately.
|
|
23
|
-
*
|
|
24
|
-
* @customElement
|
|
25
|
-
* @extends HTMLElement
|
|
26
|
-
* @mixes DirMixin
|
|
27
|
-
* @mixes OverlayMixin
|
|
28
|
-
* @mixes ThemableMixin
|
|
29
|
-
* @private
|
|
30
|
-
*/
|
|
31
|
-
class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
|
|
32
|
-
static get is() {
|
|
33
|
-
return 'vaadin-confirm-dialog-overlay';
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
static get styles() {
|
|
37
|
-
return [overlayStyles, dialogOverlay, confirmDialogOverlay];
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
/** @protected */
|
|
41
|
-
render() {
|
|
42
|
-
return html`
|
|
43
|
-
<div part="backdrop" id="backdrop" ?hidden="${!this.withBackdrop}"></div>
|
|
44
|
-
<div part="overlay" id="overlay" tabindex="0">
|
|
45
|
-
<section id="resizerContainer" class="resizer-container">
|
|
46
|
-
<header part="header"><slot name="header"></slot></header>
|
|
47
|
-
<div part="content" id="content">
|
|
48
|
-
<div part="message"><slot></slot></div>
|
|
49
|
-
</div>
|
|
50
|
-
<footer part="footer" role="toolbar">
|
|
51
|
-
<div part="cancel-button">
|
|
52
|
-
<slot name="cancel-button"></slot>
|
|
53
|
-
</div>
|
|
54
|
-
<div part="reject-button">
|
|
55
|
-
<slot name="reject-button"></slot>
|
|
56
|
-
</div>
|
|
57
|
-
<div part="confirm-button">
|
|
58
|
-
<slot name="confirm-button"></slot>
|
|
59
|
-
</div>
|
|
60
|
-
</footer>
|
|
61
|
-
</section>
|
|
62
|
-
</div>
|
|
63
|
-
`;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
/**
|
|
67
|
-
* @protected
|
|
68
|
-
* @override
|
|
69
|
-
*/
|
|
70
|
-
ready() {
|
|
71
|
-
super.ready();
|
|
72
|
-
|
|
73
|
-
// ConfirmDialog has header and footer but does not use renderers
|
|
74
|
-
this.setAttribute('has-header', '');
|
|
75
|
-
this.setAttribute('has-footer', '');
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
defineCustomElement(ConfirmDialogOverlay);
|
|
80
|
-
|
|
81
|
-
/**
|
|
82
|
-
* An element used internally by `<vaadin-confirm-dialog>`. Not intended to be used separately.
|
|
83
|
-
* @private
|
|
84
|
-
*/
|
|
85
|
-
class ConfirmDialogDialog extends ConfirmDialogBaseMixin(
|
|
86
|
-
DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(PolylitMixin(LitElement)))),
|
|
87
|
-
) {
|
|
88
|
-
static get is() {
|
|
89
|
-
return 'vaadin-confirm-dialog-dialog';
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
static get styles() {
|
|
93
|
-
return css`
|
|
94
|
-
:host {
|
|
95
|
-
display: none;
|
|
96
|
-
}
|
|
97
|
-
`;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
/** @protected */
|
|
101
|
-
render() {
|
|
102
|
-
return html`
|
|
103
|
-
<vaadin-confirm-dialog-overlay
|
|
104
|
-
id="overlay"
|
|
105
|
-
.owner="${this}"
|
|
106
|
-
.opened="${this.opened}"
|
|
107
|
-
@opened-changed="${this._onOverlayOpened}"
|
|
108
|
-
@mousedown="${this._bringOverlayToFront}"
|
|
109
|
-
@touchstart="${this._bringOverlayToFront}"
|
|
110
|
-
theme="${ifDefined(this._theme)}"
|
|
111
|
-
.modeless="${this.modeless}"
|
|
112
|
-
.withBackdrop="${!this.modeless}"
|
|
113
|
-
?resizable="${this.resizable}"
|
|
114
|
-
aria-label="${this.ariaLabel}"
|
|
115
|
-
restore-focus-on-close
|
|
116
|
-
focus-trap
|
|
117
|
-
></vaadin-confirm-dialog-overlay>
|
|
118
|
-
`;
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
defineCustomElement(ConfirmDialogDialog);
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2018 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import '@vaadin/button/src/vaadin-lit-button.js';
|
|
7
|
-
import './vaadin-lit-confirm-dialog-overlay.js';
|
|
8
|
-
import { css, html, LitElement } from 'lit';
|
|
9
|
-
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
10
|
-
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
11
|
-
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
12
|
-
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
13
|
-
import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
|
|
14
|
-
import { ConfirmDialogMixin } from './vaadin-confirm-dialog-mixin.js';
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* LitElement based version of `<vaadin-confirm-dialog>` web component.
|
|
18
|
-
*
|
|
19
|
-
* ## Disclaimer
|
|
20
|
-
*
|
|
21
|
-
* This component is an experiment and not yet a part of Vaadin platform.
|
|
22
|
-
* There is no ETA regarding specific Vaadin version where it'll land.
|
|
23
|
-
* Feel free to try this code in your apps as per Apache 2.0 license.
|
|
24
|
-
*
|
|
25
|
-
* @extends HTMLElement
|
|
26
|
-
* @mixes ConfirmDialogMixin
|
|
27
|
-
* @mixes ElementMixin
|
|
28
|
-
* @mixes ThemePropertyMixin
|
|
29
|
-
*/
|
|
30
|
-
class ConfirmDialog extends ConfirmDialogMixin(ElementMixin(ThemePropertyMixin(PolylitMixin(LitElement)))) {
|
|
31
|
-
static get is() {
|
|
32
|
-
return 'vaadin-confirm-dialog';
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
static get styles() {
|
|
36
|
-
return css`
|
|
37
|
-
:host,
|
|
38
|
-
[hidden] {
|
|
39
|
-
display: none !important;
|
|
40
|
-
}
|
|
41
|
-
`;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
/** @protected */
|
|
45
|
-
render() {
|
|
46
|
-
return html`
|
|
47
|
-
<vaadin-confirm-dialog-dialog
|
|
48
|
-
id="dialog"
|
|
49
|
-
.opened="${this.opened}"
|
|
50
|
-
.overlayClass="${this.overlayClass}"
|
|
51
|
-
aria-label="${this.header || 'confirmation'}"
|
|
52
|
-
theme="${ifDefined(this._theme)}"
|
|
53
|
-
no-close-on-outside-click
|
|
54
|
-
.noCloseOnEsc="${this.noCloseOnEsc}"
|
|
55
|
-
.contentHeight="${this._contentHeight}"
|
|
56
|
-
.contentWidth="${this._contentWidth}"
|
|
57
|
-
@opened-changed="${this._onOpenedChanged}"
|
|
58
|
-
></vaadin-confirm-dialog-dialog>
|
|
59
|
-
|
|
60
|
-
<div hidden>
|
|
61
|
-
<slot name="header"></slot>
|
|
62
|
-
<slot></slot>
|
|
63
|
-
<slot name="cancel-button"></slot>
|
|
64
|
-
<slot name="reject-button"></slot>
|
|
65
|
-
<slot name="confirm-button"></slot>
|
|
66
|
-
</div>
|
|
67
|
-
`;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
/** @private */
|
|
71
|
-
_onOpenedChanged(event) {
|
|
72
|
-
this.opened = event.detail.value;
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
defineCustomElement(ConfirmDialog);
|
|
77
|
-
|
|
78
|
-
export { ConfirmDialog };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './src/vaadin-confirm-dialog.js';
|