@vaadin/confirm-dialog 25.0.0-alpha5 → 25.0.0-alpha6
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 +13 -11
- package/src/styles/vaadin-confirm-dialog-overlay-base-styles.d.ts +8 -0
- package/src/styles/vaadin-confirm-dialog-overlay-base-styles.js +46 -0
- package/src/styles/vaadin-confirm-dialog-overlay-core-styles.js +7 -1
- package/src/vaadin-confirm-dialog-overlay.js +28 -21
- package/src/vaadin-confirm-dialog.js +2 -0
- package/theme/lumo/vaadin-confirm-dialog-styles.js +5 -3
- package/web-types.json +2 -2
- package/web-types.lit.json +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/confirm-dialog",
|
|
3
|
-
"version": "25.0.0-
|
|
3
|
+
"version": "25.0.0-alpha6",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -21,6 +21,8 @@
|
|
|
21
21
|
"type": "module",
|
|
22
22
|
"files": [
|
|
23
23
|
"src",
|
|
24
|
+
"!src/styles/*-base-styles.d.ts",
|
|
25
|
+
"!src/styles/*-base-styles.js",
|
|
24
26
|
"theme",
|
|
25
27
|
"vaadin-*.d.ts",
|
|
26
28
|
"vaadin-*.js",
|
|
@@ -35,18 +37,18 @@
|
|
|
35
37
|
],
|
|
36
38
|
"dependencies": {
|
|
37
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/button": "25.0.0-
|
|
39
|
-
"@vaadin/component-base": "25.0.0-
|
|
40
|
-
"@vaadin/dialog": "25.0.0-
|
|
41
|
-
"@vaadin/overlay": "25.0.0-
|
|
42
|
-
"@vaadin/vaadin-lumo-styles": "25.0.0-
|
|
43
|
-
"@vaadin/vaadin-themable-mixin": "25.0.0-
|
|
40
|
+
"@vaadin/button": "25.0.0-alpha6",
|
|
41
|
+
"@vaadin/component-base": "25.0.0-alpha6",
|
|
42
|
+
"@vaadin/dialog": "25.0.0-alpha6",
|
|
43
|
+
"@vaadin/overlay": "25.0.0-alpha6",
|
|
44
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha6",
|
|
45
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha6",
|
|
44
46
|
"lit": "^3.0.0"
|
|
45
47
|
},
|
|
46
48
|
"devDependencies": {
|
|
47
|
-
"@vaadin/a11y-base": "25.0.0-
|
|
48
|
-
"@vaadin/chai-plugins": "25.0.0-
|
|
49
|
-
"@vaadin/test-runner-commands": "25.0.0-
|
|
49
|
+
"@vaadin/a11y-base": "25.0.0-alpha6",
|
|
50
|
+
"@vaadin/chai-plugins": "25.0.0-alpha6",
|
|
51
|
+
"@vaadin/test-runner-commands": "25.0.0-alpha6",
|
|
50
52
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
51
53
|
"sinon": "^18.0.0"
|
|
52
54
|
},
|
|
@@ -54,5 +56,5 @@
|
|
|
54
56
|
"web-types.json",
|
|
55
57
|
"web-types.lit.json"
|
|
56
58
|
],
|
|
57
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "cd1d084198d2b326c58d44bb39fa4845b71ce551"
|
|
58
60
|
}
|
|
@@ -0,0 +1,46 @@
|
|
|
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 } from 'lit';
|
|
7
|
+
import { dialogOverlayBase } from '@vaadin/dialog/src/styles/vaadin-dialog-overlay-base-styles.js';
|
|
8
|
+
import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-base-styles.js';
|
|
9
|
+
|
|
10
|
+
const confirmDialogOverlay = css`
|
|
11
|
+
@layer base {
|
|
12
|
+
:host {
|
|
13
|
+
--vaadin-dialog-min-width: var(--vaadin-confirm-dialog-min-width, 15em);
|
|
14
|
+
--vaadin-dialog-max-width: var(--vaadin-confirm-dialog-max-width, 25em);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
::slotted([slot='header']) {
|
|
18
|
+
display: contents;
|
|
19
|
+
font: inherit !important;
|
|
20
|
+
color: inherit !important;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
[part='header'] {
|
|
24
|
+
color: var(--vaadin-dialog-title-color, var(--vaadin-color));
|
|
25
|
+
font-weight: var(--vaadin-dialog-title-font-weight, 600);
|
|
26
|
+
font-size: var(--vaadin-dialog-title-font-size, 1em);
|
|
27
|
+
line-height: var(--vaadin-dialog-title-line-height, inherit);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
[part='overlay'] {
|
|
31
|
+
display: flex;
|
|
32
|
+
flex-direction: column;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
[part='content'] {
|
|
36
|
+
flex: 1;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* TODO remove this wrapper element */
|
|
40
|
+
#resizerContainer {
|
|
41
|
+
display: contents;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
`;
|
|
45
|
+
|
|
46
|
+
export const confirmDialogOverlayStyles = [overlayStyles, dialogOverlayBase, confirmDialogOverlay];
|
|
@@ -12,10 +12,16 @@ const confirmDialogOverlay = css`
|
|
|
12
12
|
height: 100%;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
[part='header'] {
|
|
16
16
|
pointer-events: auto;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
+
::slotted([slot='header']) {
|
|
20
|
+
display: contents !important;
|
|
21
|
+
font: inherit !important;
|
|
22
|
+
color: inherit !important;
|
|
23
|
+
}
|
|
24
|
+
|
|
19
25
|
/* Make buttons clickable */
|
|
20
26
|
[part='footer'] > * {
|
|
21
27
|
pointer-events: all;
|
|
@@ -11,7 +11,7 @@ import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixi
|
|
|
11
11
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
12
12
|
import { DialogBaseMixin } from '@vaadin/dialog/src/vaadin-dialog-base-mixin.js';
|
|
13
13
|
import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
|
|
14
|
-
import {
|
|
14
|
+
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
|
|
15
15
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
16
16
|
import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
|
|
17
17
|
import { confirmDialogOverlayStyles } from './styles/vaadin-confirm-dialog-overlay-core-styles.js';
|
|
@@ -26,7 +26,7 @@ import { confirmDialogOverlayStyles } from './styles/vaadin-confirm-dialog-overl
|
|
|
26
26
|
* @mixes ThemableMixin
|
|
27
27
|
* @private
|
|
28
28
|
*/
|
|
29
|
-
class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(
|
|
29
|
+
class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(LumoInjectionMixin(PolylitMixin(LitElement))))) {
|
|
30
30
|
static get is() {
|
|
31
31
|
return 'vaadin-confirm-dialog-overlay';
|
|
32
32
|
}
|
|
@@ -35,6 +35,20 @@ class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(CSSInject
|
|
|
35
35
|
return confirmDialogOverlayStyles;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
+
static get properties() {
|
|
39
|
+
return {
|
|
40
|
+
cancelButtonVisible: {
|
|
41
|
+
type: Boolean,
|
|
42
|
+
value: false,
|
|
43
|
+
},
|
|
44
|
+
|
|
45
|
+
rejectButtonVisible: {
|
|
46
|
+
type: Boolean,
|
|
47
|
+
value: false,
|
|
48
|
+
},
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
|
|
38
52
|
/** @protected */
|
|
39
53
|
render() {
|
|
40
54
|
return html`
|
|
@@ -46,10 +60,10 @@ class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(CSSInject
|
|
|
46
60
|
<div part="message"><slot></slot></div>
|
|
47
61
|
</div>
|
|
48
62
|
<footer part="footer" role="toolbar">
|
|
49
|
-
<div part="cancel-button">
|
|
63
|
+
<div part="cancel-button" ?hidden="${!this.cancelButtonVisible}">
|
|
50
64
|
<slot name="cancel-button"></slot>
|
|
51
65
|
</div>
|
|
52
|
-
<div part="reject-button">
|
|
66
|
+
<div part="reject-button" ?hidden="${!this.rejectButtonVisible}">
|
|
53
67
|
<slot name="reject-button"></slot>
|
|
54
68
|
</div>
|
|
55
69
|
<div part="confirm-button">
|
|
@@ -72,23 +86,6 @@ class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(CSSInject
|
|
|
72
86
|
this.setAttribute('has-header', '');
|
|
73
87
|
this.setAttribute('has-footer', '');
|
|
74
88
|
}
|
|
75
|
-
|
|
76
|
-
/**
|
|
77
|
-
* Updates the coordinates of the overlay.
|
|
78
|
-
*/
|
|
79
|
-
setBounds(bounds) {
|
|
80
|
-
const overlay = this.$.overlay;
|
|
81
|
-
const parsedBounds = { ...bounds };
|
|
82
|
-
|
|
83
|
-
Object.keys(parsedBounds).forEach((arg) => {
|
|
84
|
-
// Allow setting width or height to `null`
|
|
85
|
-
if (parsedBounds[arg] !== null && !isNaN(parsedBounds[arg])) {
|
|
86
|
-
parsedBounds[arg] = `${parsedBounds[arg]}px`;
|
|
87
|
-
}
|
|
88
|
-
});
|
|
89
|
-
|
|
90
|
-
Object.assign(overlay.style, parsedBounds);
|
|
91
|
-
}
|
|
92
89
|
}
|
|
93
90
|
|
|
94
91
|
defineCustomElement(ConfirmDialogOverlay);
|
|
@@ -121,6 +118,14 @@ class ConfirmDialogDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropert
|
|
|
121
118
|
type: String,
|
|
122
119
|
value: '',
|
|
123
120
|
},
|
|
121
|
+
|
|
122
|
+
cancelButtonVisible: {
|
|
123
|
+
type: Boolean,
|
|
124
|
+
},
|
|
125
|
+
|
|
126
|
+
rejectButtonVisible: {
|
|
127
|
+
type: Boolean,
|
|
128
|
+
},
|
|
124
129
|
};
|
|
125
130
|
}
|
|
126
131
|
|
|
@@ -139,6 +144,8 @@ class ConfirmDialogDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropert
|
|
|
139
144
|
.withBackdrop="${!this.modeless}"
|
|
140
145
|
?resizable="${this.resizable}"
|
|
141
146
|
aria-label="${this.ariaLabel}"
|
|
147
|
+
.cancelButtonVisible="${this.cancelButtonVisible}"
|
|
148
|
+
.rejectButtonVisible="${this.rejectButtonVisible}"
|
|
142
149
|
restore-focus-on-close
|
|
143
150
|
focus-trap
|
|
144
151
|
></vaadin-confirm-dialog-overlay>
|
|
@@ -89,6 +89,8 @@ class ConfirmDialog extends ConfirmDialogMixin(ElementMixin(ThemePropertyMixin(P
|
|
|
89
89
|
id="dialog"
|
|
90
90
|
.opened="${this.opened}"
|
|
91
91
|
.overlayClass="${this.overlayClass}"
|
|
92
|
+
.cancelButtonVisible="${this.cancelButtonVisible}"
|
|
93
|
+
.rejectButtonVisible="${this.rejectButtonVisible}"
|
|
92
94
|
aria-label="${this.header || 'confirmation'}"
|
|
93
95
|
theme="${ifDefined(this._theme)}"
|
|
94
96
|
no-close-on-outside-click
|
|
@@ -10,10 +10,12 @@ registerStyles(
|
|
|
10
10
|
overlay,
|
|
11
11
|
dialogOverlay,
|
|
12
12
|
css`
|
|
13
|
-
[part='header']
|
|
14
|
-
margin-top: 0 !important;
|
|
15
|
-
margin-bottom: 0 !important;
|
|
13
|
+
[part='header'] {
|
|
16
14
|
margin-inline-start: calc(var(--lumo-space-l) - var(--lumo-space-m));
|
|
15
|
+
font-weight: 600;
|
|
16
|
+
line-height: var(--lumo-line-height-xs);
|
|
17
|
+
font-size: var(--lumo-font-size-xl);
|
|
18
|
+
color: var(--lumo-header-text-color);
|
|
17
19
|
}
|
|
18
20
|
|
|
19
21
|
[part='message'] {
|
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": "25.0.0-
|
|
4
|
+
"version": "25.0.0-alpha6",
|
|
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/25.0.0-
|
|
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/25.0.0-alpha6/#/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": "25.0.0-
|
|
4
|
+
"version": "25.0.0-alpha6",
|
|
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/25.0.0-
|
|
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/25.0.0-alpha6/#/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
|
{
|