@vaadin/confirm-dialog 23.0.6 → 23.1.0-alpha3
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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/confirm-dialog",
|
|
3
|
-
"version": "23.0
|
|
3
|
+
"version": "23.1.0-alpha3",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -34,19 +34,19 @@
|
|
|
34
34
|
],
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@polymer/polymer": "^3.0.0",
|
|
37
|
-
"@vaadin/button": "
|
|
38
|
-
"@vaadin/component-base": "
|
|
39
|
-
"@vaadin/dialog": "
|
|
37
|
+
"@vaadin/button": "23.1.0-alpha3",
|
|
38
|
+
"@vaadin/component-base": "23.1.0-alpha3",
|
|
39
|
+
"@vaadin/dialog": "23.1.0-alpha3",
|
|
40
40
|
"@vaadin/vaadin-license-checker": "^2.1.0",
|
|
41
|
-
"@vaadin/vaadin-lumo-styles": "
|
|
42
|
-
"@vaadin/vaadin-material-styles": "
|
|
43
|
-
"@vaadin/vaadin-overlay": "
|
|
44
|
-
"@vaadin/vaadin-themable-mixin": "
|
|
41
|
+
"@vaadin/vaadin-lumo-styles": "23.1.0-alpha3",
|
|
42
|
+
"@vaadin/vaadin-material-styles": "23.1.0-alpha3",
|
|
43
|
+
"@vaadin/vaadin-overlay": "23.1.0-alpha3",
|
|
44
|
+
"@vaadin/vaadin-themable-mixin": "23.1.0-alpha3"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@esm-bundle/chai": "^4.3.4",
|
|
48
48
|
"@vaadin/testing-helpers": "^0.3.2",
|
|
49
|
-
"sinon": "^
|
|
49
|
+
"sinon": "^13.0.2"
|
|
50
50
|
},
|
|
51
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "8c9e64e8dfa158dd52a9bf6da351ff038c88ca85"
|
|
52
52
|
}
|
|
@@ -15,16 +15,19 @@ registerStyles(
|
|
|
15
15
|
--_vaadin-confirm-dialog-content-height: auto;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
[part='
|
|
18
|
+
[part='overlay'] {
|
|
19
19
|
width: var(--_vaadin-confirm-dialog-content-width);
|
|
20
|
-
display: flex;
|
|
21
|
-
flex-direction: column;
|
|
22
20
|
height: var(--_vaadin-confirm-dialog-content-height);
|
|
23
|
-
box-sizing: content-box;
|
|
24
21
|
}
|
|
25
22
|
|
|
26
|
-
|
|
27
|
-
|
|
23
|
+
/* Override display: contents */
|
|
24
|
+
:host([has-header]) ::slotted([slot='header']) {
|
|
25
|
+
display: block;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/* Make buttons clickable */
|
|
29
|
+
[part='footer'] > * {
|
|
30
|
+
pointer-events: all;
|
|
28
31
|
}
|
|
29
32
|
`,
|
|
30
33
|
{ moduleId: 'vaadin-confirm-dialog-overlay-styles' }
|
|
@@ -32,25 +35,15 @@ registerStyles(
|
|
|
32
35
|
|
|
33
36
|
let memoizedTemplate;
|
|
34
37
|
|
|
35
|
-
const
|
|
36
|
-
<div part="
|
|
37
|
-
<slot name="
|
|
38
|
+
const footerTemplate = html`
|
|
39
|
+
<div part="cancel-button">
|
|
40
|
+
<slot name="cancel-button"></slot>
|
|
38
41
|
</div>
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
<slot></slot>
|
|
42
|
+
<div part="reject-button">
|
|
43
|
+
<slot name="reject-button"></slot>
|
|
42
44
|
</div>
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
<div part="cancel-button">
|
|
46
|
-
<slot name="cancel-button"></slot>
|
|
47
|
-
</div>
|
|
48
|
-
<div part="reject-button">
|
|
49
|
-
<slot name="reject-button"></slot>
|
|
50
|
-
</div>
|
|
51
|
-
<div part="confirm-button">
|
|
52
|
-
<slot name="confirm-button"></slot>
|
|
53
|
-
</div>
|
|
45
|
+
<div part="confirm-button">
|
|
46
|
+
<slot name="confirm-button"></slot>
|
|
54
47
|
</div>
|
|
55
48
|
`;
|
|
56
49
|
|
|
@@ -67,10 +60,28 @@ class ConfirmDialogOverlay extends DialogOverlay {
|
|
|
67
60
|
static get template() {
|
|
68
61
|
if (!memoizedTemplate) {
|
|
69
62
|
memoizedTemplate = super.template.cloneNode(true);
|
|
63
|
+
|
|
64
|
+
// Replace two header slots with a single one
|
|
65
|
+
const headerPart = memoizedTemplate.content.querySelector('[part="header"]');
|
|
66
|
+
headerPart.innerHTML = '';
|
|
67
|
+
const headerSlot = document.createElement('slot');
|
|
68
|
+
headerSlot.setAttribute('name', 'header');
|
|
69
|
+
headerPart.appendChild(headerSlot);
|
|
70
|
+
|
|
71
|
+
// Place default slot inside a "message" part
|
|
70
72
|
const contentPart = memoizedTemplate.content.querySelector('[part="content"]');
|
|
71
73
|
const defaultSlot = contentPart.querySelector('slot:not([name])');
|
|
72
|
-
|
|
73
|
-
|
|
74
|
+
const messagePart = document.createElement('div');
|
|
75
|
+
messagePart.setAttribute('part', 'message');
|
|
76
|
+
contentPart.appendChild(messagePart);
|
|
77
|
+
messagePart.appendChild(defaultSlot);
|
|
78
|
+
|
|
79
|
+
// Replace footer slot with button named slots
|
|
80
|
+
const footerPart = memoizedTemplate.content.querySelector('[part="footer"]');
|
|
81
|
+
footerPart.setAttribute('role', 'toolbar');
|
|
82
|
+
const footerSlot = footerPart.querySelector('slot');
|
|
83
|
+
footerPart.removeChild(footerSlot);
|
|
84
|
+
footerPart.appendChild(footerTemplate.content.cloneNode(true));
|
|
74
85
|
}
|
|
75
86
|
return memoizedTemplate;
|
|
76
87
|
}
|
|
@@ -86,6 +97,18 @@ class ConfirmDialogOverlay extends DialogOverlay {
|
|
|
86
97
|
|
|
87
98
|
this.dispatchEvent(new CustomEvent('vaadin-confirm-dialog-close'));
|
|
88
99
|
}
|
|
100
|
+
|
|
101
|
+
/**
|
|
102
|
+
* @protected
|
|
103
|
+
* @override
|
|
104
|
+
*/
|
|
105
|
+
_headerFooterRendererChange(headerRenderer, footerRenderer, opened) {
|
|
106
|
+
super._headerFooterRendererChange(headerRenderer, footerRenderer, opened);
|
|
107
|
+
|
|
108
|
+
// ConfirmDialog has header and footer but does not use renderers
|
|
109
|
+
this.setAttribute('has-header', '');
|
|
110
|
+
this.setAttribute('has-footer', '');
|
|
111
|
+
}
|
|
89
112
|
}
|
|
90
113
|
|
|
91
114
|
customElements.define(ConfirmDialogOverlay.is, ConfirmDialogOverlay);
|
|
@@ -116,7 +139,7 @@ class ConfirmDialogDialog extends Dialog {
|
|
|
116
139
|
on-opened-changed="_onOverlayOpened"
|
|
117
140
|
on-mousedown="_bringOverlayToFront"
|
|
118
141
|
on-touchstart="_bringOverlayToFront"
|
|
119
|
-
theme$="[[
|
|
142
|
+
theme$="[[_theme]]"
|
|
120
143
|
modeless="[[modeless]]"
|
|
121
144
|
with-backdrop="[[!modeless]]"
|
|
122
145
|
resizable$="[[resizable]]"
|
|
@@ -68,10 +68,7 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
|
|
|
68
68
|
static get template() {
|
|
69
69
|
return html`
|
|
70
70
|
<style>
|
|
71
|
-
:host
|
|
72
|
-
display: none;
|
|
73
|
-
}
|
|
74
|
-
|
|
71
|
+
:host,
|
|
75
72
|
[hidden] {
|
|
76
73
|
display: none !important;
|
|
77
74
|
}
|
|
@@ -81,7 +78,7 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
|
|
|
81
78
|
id="dialog"
|
|
82
79
|
opened="{{opened}}"
|
|
83
80
|
aria-label="[[_getAriaLabel(header)]]"
|
|
84
|
-
theme$="[[
|
|
81
|
+
theme$="[[_theme]]"
|
|
85
82
|
no-close-on-outside-click
|
|
86
83
|
no-close-on-esc="[[noCloseOnEsc]]"
|
|
87
84
|
></vaadin-confirm-dialog-dialog>
|
|
@@ -5,8 +5,10 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
|
|
|
5
5
|
registerStyles(
|
|
6
6
|
'vaadin-confirm-dialog-overlay',
|
|
7
7
|
css`
|
|
8
|
-
[part='header'] ::slotted(h3) {
|
|
8
|
+
:host([has-header]) [part='header'] ::slotted(h3) {
|
|
9
9
|
margin-top: 0 !important;
|
|
10
|
+
margin-bottom: 0 !important;
|
|
11
|
+
margin-inline-start: calc(var(--lumo-space-l) - var(--lumo-space-m));
|
|
10
12
|
}
|
|
11
13
|
|
|
12
14
|
[part='message'] {
|
|
@@ -15,23 +17,6 @@ registerStyles(
|
|
|
15
17
|
max-width: 100%;
|
|
16
18
|
}
|
|
17
19
|
|
|
18
|
-
[part='footer'] {
|
|
19
|
-
display: flex;
|
|
20
|
-
flex-wrap: wrap;
|
|
21
|
-
justify-content: flex-end;
|
|
22
|
-
margin: calc(var(--lumo-space-l) * -1);
|
|
23
|
-
margin-top: var(--lumo-space-l);
|
|
24
|
-
padding: 0 var(--lumo-space-l);
|
|
25
|
-
background-color: var(--lumo-contrast-5pct);
|
|
26
|
-
border-bottom-left-radius: var(--lumo-border-radius-l);
|
|
27
|
-
border-bottom-right-radius: var(--lumo-border-radius-l);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
[part='footer'] > * {
|
|
31
|
-
margin-top: var(--lumo-space-s);
|
|
32
|
-
margin-bottom: var(--lumo-space-s);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
20
|
::slotted([slot$='button'][theme~='tertiary']) {
|
|
36
21
|
padding-left: var(--lumo-space-s);
|
|
37
22
|
padding-right: var(--lumo-space-s);
|
|
@@ -42,55 +27,17 @@ registerStyles(
|
|
|
42
27
|
}
|
|
43
28
|
|
|
44
29
|
@media (max-width: 360px) {
|
|
45
|
-
[part='footer'] {
|
|
30
|
+
:host([has-footer]) [part='footer'] {
|
|
46
31
|
flex-direction: column-reverse;
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
margin: var(--lumo-space-xs) calc(var(--lumo-space-l) / -2) calc(var(--lumo-space-xs) * -1);
|
|
32
|
+
align-items: stretch;
|
|
33
|
+
padding: var(--lumo-space-s) var(--lumo-space-l);
|
|
34
|
+
gap: var(--lumo-space-s);
|
|
51
35
|
}
|
|
52
36
|
|
|
53
37
|
::slotted([slot$='button']) {
|
|
54
38
|
width: 100%;
|
|
55
|
-
margin
|
|
56
|
-
margin-bottom: var(--lumo-space-xs);
|
|
39
|
+
margin: 0;
|
|
57
40
|
}
|
|
58
|
-
|
|
59
|
-
[part='confirm-button'] {
|
|
60
|
-
margin-top: var(--lumo-space-s);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
[part='cancel-button'] {
|
|
64
|
-
margin-bottom: var(--lumo-space-s);
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
/* LTR styles */
|
|
69
|
-
:host(:not([dir='rtl'])) [part='cancel-button'] {
|
|
70
|
-
margin-left: calc(var(--lumo-space-s) * -1);
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
:host(:not([dir='rtl'])) [part='confirm-button'] {
|
|
74
|
-
margin-right: calc(var(--lumo-space-s) * -1);
|
|
75
|
-
margin-left: var(--lumo-space-s);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
:host(:not([dir='rtl'])) [part='reject-button'] {
|
|
79
|
-
margin-left: var(--lumo-space-s);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
/* RTL styles */
|
|
83
|
-
:host([dir='rtl']) [part='cancel-button'] {
|
|
84
|
-
margin-right: calc(var(--lumo-space-s) * -1);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
:host([dir='rtl']) [part='confirm-button'] {
|
|
88
|
-
margin-right: var(--lumo-space-s);
|
|
89
|
-
margin-left: calc(var(--lumo-space-s) * -1);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
:host([dir='rtl']) [part='reject-button'] {
|
|
93
|
-
margin-right: var(--lumo-space-s);
|
|
94
41
|
}
|
|
95
42
|
`,
|
|
96
43
|
{ moduleId: 'lumo-confirm-dialog-overlay' }
|
|
@@ -9,46 +9,19 @@ registerStyles(
|
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
[part='content'] {
|
|
12
|
-
padding: 8px 24px;
|
|
13
12
|
min-width: 0;
|
|
14
13
|
}
|
|
15
14
|
|
|
16
15
|
[part='header'] ::slotted(h3) {
|
|
17
|
-
margin-top: 0
|
|
16
|
+
margin-top: 0 !important;
|
|
17
|
+
margin-bottom: 0 !important;
|
|
18
|
+
margin-inline-start: 8px;
|
|
18
19
|
}
|
|
19
20
|
|
|
20
21
|
[part='message'] {
|
|
21
22
|
width: 25em;
|
|
22
23
|
max-width: 100%;
|
|
23
|
-
margin-
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
[part='footer'] {
|
|
27
|
-
display: flex;
|
|
28
|
-
flex-wrap: wrap;
|
|
29
|
-
justify-content: flex-end;
|
|
30
|
-
margin-top: 28px;
|
|
31
|
-
margin-right: -16px;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
/* LTR styles */
|
|
35
|
-
:host(:not([dir='rtl'])) ::slotted([slot$='button']:not([slot^='confirm'])) {
|
|
36
|
-
margin-right: 8px;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
/* RTL styles */
|
|
40
|
-
:host([dir='rtl']) [part='message'] {
|
|
41
|
-
margin-left: 24px;
|
|
42
|
-
margin-right: 0;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
:host([dir='rtl']) [part='footer'] {
|
|
46
|
-
margin-left: -16px;
|
|
47
|
-
margin-right: 0;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
:host([dir='rtl']) ::slotted([slot$='button']:not([slot^='confirm'])) {
|
|
51
|
-
margin-left: 8px;
|
|
24
|
+
margin-inline-end: 24px;
|
|
52
25
|
}
|
|
53
26
|
|
|
54
27
|
@media (max-width: 360px) {
|
|
@@ -56,18 +29,6 @@ registerStyles(
|
|
|
56
29
|
flex-direction: column-reverse;
|
|
57
30
|
align-items: flex-end;
|
|
58
31
|
}
|
|
59
|
-
|
|
60
|
-
::slotted([slot$='button']:not([slot^='confirm'])) {
|
|
61
|
-
margin-top: 8px;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
:host(:not([dir='rtl'])) ::slotted([slot$='button']:not([slot^='confirm'])) {
|
|
65
|
-
margin-right: 0;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
:host([dir='rtl']) ::slotted([slot$='button']:not([slot^='confirm'])) {
|
|
69
|
-
margin-left: 0;
|
|
70
|
-
}
|
|
71
32
|
}
|
|
72
33
|
`,
|
|
73
34
|
{ moduleId: 'material-confirm-dialog-overlay' }
|