@vaadin/confirm-dialog 24.0.0-alpha7 → 24.0.0-alpha8

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.
Files changed (6) hide show
  1. package/package.json +9 -9
  2. package/src/vaadin-confirm-dialog-overlay.js +63 -1
  3. package/src/vaadin-confirm-dialog.d.ts +1 -1
  4. package/src/vaadin-confirm-dialog.js +19 -32
  5. package/web-types.json +262 -2
  6. package/web-types.lit.json +122 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/confirm-dialog",
3
- "version": "24.0.0-alpha7",
3
+ "version": "24.0.0-alpha8",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -36,13 +36,13 @@
36
36
  ],
37
37
  "dependencies": {
38
38
  "@polymer/polymer": "^3.0.0",
39
- "@vaadin/button": "24.0.0-alpha7",
40
- "@vaadin/component-base": "24.0.0-alpha7",
41
- "@vaadin/dialog": "24.0.0-alpha7",
42
- "@vaadin/overlay": "24.0.0-alpha7",
43
- "@vaadin/vaadin-lumo-styles": "24.0.0-alpha7",
44
- "@vaadin/vaadin-material-styles": "24.0.0-alpha7",
45
- "@vaadin/vaadin-themable-mixin": "24.0.0-alpha7"
39
+ "@vaadin/button": "24.0.0-alpha8",
40
+ "@vaadin/component-base": "24.0.0-alpha8",
41
+ "@vaadin/dialog": "24.0.0-alpha8",
42
+ "@vaadin/overlay": "24.0.0-alpha8",
43
+ "@vaadin/vaadin-lumo-styles": "24.0.0-alpha8",
44
+ "@vaadin/vaadin-material-styles": "24.0.0-alpha8",
45
+ "@vaadin/vaadin-themable-mixin": "24.0.0-alpha8"
46
46
  },
47
47
  "devDependencies": {
48
48
  "@esm-bundle/chai": "^4.3.4",
@@ -53,5 +53,5 @@
53
53
  "web-types.json",
54
54
  "web-types.lit.json"
55
55
  ],
56
- "gitHead": "aeb4535336813636736759e0a5de148b26bfc3b6"
56
+ "gitHead": "476752249bb12295c500980d98a3256ad3b22b73"
57
57
  }
package/src/vaadin-confirm-dialog-overlay.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
3
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { html } from '@polymer/polymer/lib/utils/html-tag.js';
@@ -142,6 +142,68 @@ class ConfirmDialogDialog extends Dialog {
142
142
  ></vaadin-confirm-dialog-overlay>
143
143
  `;
144
144
  }
145
+
146
+ static get properties() {
147
+ return {
148
+ /**
149
+ * Height to be set on the overlay content.
150
+ */
151
+ contentHeight: {
152
+ type: String,
153
+ },
154
+
155
+ /**
156
+ * Width to be set on the overlay content.
157
+ */
158
+ contentWidth: {
159
+ type: String,
160
+ },
161
+
162
+ /** @private */
163
+ _overlayElement: {
164
+ type: Object,
165
+ },
166
+ };
167
+ }
168
+
169
+ static get observers() {
170
+ return [
171
+ '__updateContentHeight(contentHeight, _overlayElement)',
172
+ '__updateContentWidth(contentWidth, _overlayElement)',
173
+ ];
174
+ }
175
+
176
+ /** @protected */
177
+ ready() {
178
+ super.ready();
179
+
180
+ this._overlayElement = this.$.overlay;
181
+ }
182
+
183
+ /** @private */
184
+ __updateDimension(overlay, dimension, value) {
185
+ const prop = `--_vaadin-confirm-dialog-content-${dimension}`;
186
+
187
+ if (value) {
188
+ overlay.style.setProperty(prop, value);
189
+ } else {
190
+ overlay.style.removeProperty(prop);
191
+ }
192
+ }
193
+
194
+ /** @private */
195
+ __updateContentHeight(height, overlay) {
196
+ if (overlay) {
197
+ this.__updateDimension(overlay, 'height', height);
198
+ }
199
+ }
200
+
201
+ /** @private */
202
+ __updateContentWidth(width, overlay) {
203
+ if (overlay) {
204
+ this.__updateDimension(overlay, 'width', width);
205
+ }
206
+ }
145
207
  }
146
208
 
147
209
  customElements.define(ConfirmDialogDialog.is, ConfirmDialogDialog);
package/src/vaadin-confirm-dialog.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
3
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
package/src/vaadin-confirm-dialog.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
3
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import './vaadin-confirm-dialog-overlay.js';
@@ -80,6 +80,8 @@ class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(Poly
80
80
  theme$="[[_theme]]"
81
81
  no-close-on-outside-click
82
82
  no-close-on-esc="[[noCloseOnEsc]]"
83
+ content-height="[[_contentHeight]]"
84
+ content-width="[[_contentWidth]]"
83
85
  ></vaadin-confirm-dialog-dialog>
84
86
 
85
87
  <div hidden>
@@ -263,6 +265,22 @@ class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(Poly
263
265
  _rejectButton: {
264
266
  type: Object,
265
267
  },
268
+
269
+ /**
270
+ * Height to be set on the overlay content.
271
+ * @protected
272
+ */
273
+ _contentHeight: {
274
+ type: String,
275
+ },
276
+
277
+ /**
278
+ * Width to be set on the overlay content.
279
+ * @protected
280
+ */
281
+ _contentWidth: {
282
+ type: String,
283
+ },
266
284
  };
267
285
  }
268
286
 
@@ -297,12 +315,6 @@ class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(Poly
297
315
  this._overlayElement.addEventListener('vaadin-overlay-open', () => this.__onDialogOpened());
298
316
  this._overlayElement.addEventListener('vaadin-confirm-dialog-close', () => this.__onDialogClosed());
299
317
 
300
- if (this._dimensions) {
301
- Object.keys(this._dimensions).forEach((name) => {
302
- this._setDimension(name, this._dimensions[name]);
303
- });
304
- }
305
-
306
318
  this._headerController = new SlotController(this, 'header', 'h3', {
307
319
  initializer: (node) => {
308
320
  this._headerNode = node;
@@ -457,31 +469,6 @@ class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(Poly
457
469
  return header || 'confirmation';
458
470
  }
459
471
 
460
- /** @private */
461
- _setWidth(width) {
462
- this._setDimensionIfAttached('width', width);
463
- }
464
-
465
- /** @private */
466
- _setHeight(height) {
467
- this._setDimensionIfAttached('height', height);
468
- }
469
-
470
- /** @private */
471
- _setDimensionIfAttached(name, value) {
472
- if (this._overlayElement) {
473
- this._setDimension(name, value);
474
- } else {
475
- this._dimensions ||= {};
476
- this._dimensions[name] = value;
477
- }
478
- }
479
-
480
- /** @private */
481
- _setDimension(name, value) {
482
- this._overlayElement.style.setProperty(`--_vaadin-confirm-dialog-content-${name}`, value);
483
- }
484
-
485
472
  /**
486
473
  * @event confirm
487
474
  * fired when Confirm button was pressed.
package/web-types.json CHANGED
@@ -1,11 +1,271 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/confirm-dialog",
4
- "version": "24.0.0-alpha7",
4
+ "version": "24.0.0-alpha8",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
- "elements": []
8
+ "elements": [
9
+ {
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.0.0-alpha8/#/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/custom-theme/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
+ "attributes": [
13
+ {
14
+ "name": "opened",
15
+ "description": "True if the overlay is currently displayed.",
16
+ "value": {
17
+ "type": [
18
+ "boolean"
19
+ ]
20
+ }
21
+ },
22
+ {
23
+ "name": "header",
24
+ "description": "Set the confirmation dialog title.",
25
+ "value": {
26
+ "type": [
27
+ "string"
28
+ ]
29
+ }
30
+ },
31
+ {
32
+ "name": "message",
33
+ "description": "Set the message or confirmation question.",
34
+ "value": {
35
+ "type": [
36
+ "string",
37
+ "null",
38
+ "undefined"
39
+ ]
40
+ }
41
+ },
42
+ {
43
+ "name": "confirm-text",
44
+ "description": "Text displayed on confirm-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
45
+ "value": {
46
+ "type": [
47
+ "string"
48
+ ]
49
+ }
50
+ },
51
+ {
52
+ "name": "confirm-theme",
53
+ "description": "Theme for a confirm-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
54
+ "value": {
55
+ "type": [
56
+ "string"
57
+ ]
58
+ }
59
+ },
60
+ {
61
+ "name": "no-close-on-esc",
62
+ "description": "Set to true to disable closing dialog on Escape press",
63
+ "value": {
64
+ "type": [
65
+ "boolean"
66
+ ]
67
+ }
68
+ },
69
+ {
70
+ "name": "reject-button-visible",
71
+ "description": "Whether to show reject button or not.",
72
+ "value": {
73
+ "type": [
74
+ "boolean"
75
+ ]
76
+ }
77
+ },
78
+ {
79
+ "name": "reject-text",
80
+ "description": "Text displayed on reject-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
81
+ "value": {
82
+ "type": [
83
+ "string"
84
+ ]
85
+ }
86
+ },
87
+ {
88
+ "name": "reject-theme",
89
+ "description": "Theme for a reject-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
90
+ "value": {
91
+ "type": [
92
+ "string"
93
+ ]
94
+ }
95
+ },
96
+ {
97
+ "name": "cancel-button-visible",
98
+ "description": "Whether to show cancel button or not.",
99
+ "value": {
100
+ "type": [
101
+ "boolean"
102
+ ]
103
+ }
104
+ },
105
+ {
106
+ "name": "cancel-text",
107
+ "description": "Text displayed on cancel-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
108
+ "value": {
109
+ "type": [
110
+ "string"
111
+ ]
112
+ }
113
+ },
114
+ {
115
+ "name": "cancel-theme",
116
+ "description": "Theme for a cancel-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
117
+ "value": {
118
+ "type": [
119
+ "string"
120
+ ]
121
+ }
122
+ },
123
+ {
124
+ "name": "theme",
125
+ "description": "The theme variants to apply to the component.",
126
+ "value": {
127
+ "type": [
128
+ "string",
129
+ "null",
130
+ "undefined"
131
+ ]
132
+ }
133
+ }
134
+ ],
135
+ "js": {
136
+ "properties": [
137
+ {
138
+ "name": "opened",
139
+ "description": "True if the overlay is currently displayed.",
140
+ "value": {
141
+ "type": [
142
+ "boolean"
143
+ ]
144
+ }
145
+ },
146
+ {
147
+ "name": "header",
148
+ "description": "Set the confirmation dialog title.",
149
+ "value": {
150
+ "type": [
151
+ "string"
152
+ ]
153
+ }
154
+ },
155
+ {
156
+ "name": "message",
157
+ "description": "Set the message or confirmation question.",
158
+ "value": {
159
+ "type": [
160
+ "string",
161
+ "null",
162
+ "undefined"
163
+ ]
164
+ }
165
+ },
166
+ {
167
+ "name": "confirmText",
168
+ "description": "Text displayed on confirm-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
169
+ "value": {
170
+ "type": [
171
+ "string"
172
+ ]
173
+ }
174
+ },
175
+ {
176
+ "name": "confirmTheme",
177
+ "description": "Theme for a confirm-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
178
+ "value": {
179
+ "type": [
180
+ "string"
181
+ ]
182
+ }
183
+ },
184
+ {
185
+ "name": "noCloseOnEsc",
186
+ "description": "Set to true to disable closing dialog on Escape press",
187
+ "value": {
188
+ "type": [
189
+ "boolean"
190
+ ]
191
+ }
192
+ },
193
+ {
194
+ "name": "rejectButtonVisible",
195
+ "description": "Whether to show reject button or not.",
196
+ "value": {
197
+ "type": [
198
+ "boolean"
199
+ ]
200
+ }
201
+ },
202
+ {
203
+ "name": "rejectText",
204
+ "description": "Text displayed on reject-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
205
+ "value": {
206
+ "type": [
207
+ "string"
208
+ ]
209
+ }
210
+ },
211
+ {
212
+ "name": "rejectTheme",
213
+ "description": "Theme for a reject-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
214
+ "value": {
215
+ "type": [
216
+ "string"
217
+ ]
218
+ }
219
+ },
220
+ {
221
+ "name": "cancelButtonVisible",
222
+ "description": "Whether to show cancel button or not.",
223
+ "value": {
224
+ "type": [
225
+ "boolean"
226
+ ]
227
+ }
228
+ },
229
+ {
230
+ "name": "cancelText",
231
+ "description": "Text displayed on cancel-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
232
+ "value": {
233
+ "type": [
234
+ "string"
235
+ ]
236
+ }
237
+ },
238
+ {
239
+ "name": "cancelTheme",
240
+ "description": "Theme for a cancel-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
241
+ "value": {
242
+ "type": [
243
+ "string"
244
+ ]
245
+ }
246
+ }
247
+ ],
248
+ "events": [
249
+ {
250
+ "name": "cancel",
251
+ "description": "cancel\nfired when Cancel button or Escape key was pressed."
252
+ },
253
+ {
254
+ "name": "confirm",
255
+ "description": "confirm\nfired when Confirm button was pressed."
256
+ },
257
+ {
258
+ "name": "reject",
259
+ "description": "reject\nfired when Reject button was pressed."
260
+ },
261
+ {
262
+ "name": "opened-changed",
263
+ "description": "Fired when the `opened` property changes."
264
+ }
265
+ ]
266
+ }
267
+ }
268
+ ]
9
269
  }
10
270
  }
11
271
  }
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.0.0-alpha7",
4
+ "version": "24.0.0-alpha8",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -13,7 +13,127 @@
13
13
  },
14
14
  "contributions": {
15
15
  "html": {
16
- "elements": []
16
+ "elements": [
17
+ {
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.0.0-alpha8/#/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/custom-theme/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
+ "extension": true,
21
+ "attributes": [
22
+ {
23
+ "name": "?opened",
24
+ "description": "True if the overlay is currently displayed.",
25
+ "value": {
26
+ "kind": "expression"
27
+ }
28
+ },
29
+ {
30
+ "name": "?noCloseOnEsc",
31
+ "description": "Set to true to disable closing dialog on Escape press",
32
+ "value": {
33
+ "kind": "expression"
34
+ }
35
+ },
36
+ {
37
+ "name": "?rejectButtonVisible",
38
+ "description": "Whether to show reject button or not.",
39
+ "value": {
40
+ "kind": "expression"
41
+ }
42
+ },
43
+ {
44
+ "name": "?cancelButtonVisible",
45
+ "description": "Whether to show cancel button or not.",
46
+ "value": {
47
+ "kind": "expression"
48
+ }
49
+ },
50
+ {
51
+ "name": ".header",
52
+ "description": "Set the confirmation dialog title.",
53
+ "value": {
54
+ "kind": "expression"
55
+ }
56
+ },
57
+ {
58
+ "name": ".message",
59
+ "description": "Set the message or confirmation question.",
60
+ "value": {
61
+ "kind": "expression"
62
+ }
63
+ },
64
+ {
65
+ "name": ".confirmText",
66
+ "description": "Text displayed on confirm-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
67
+ "value": {
68
+ "kind": "expression"
69
+ }
70
+ },
71
+ {
72
+ "name": ".confirmTheme",
73
+ "description": "Theme for a confirm-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
74
+ "value": {
75
+ "kind": "expression"
76
+ }
77
+ },
78
+ {
79
+ "name": ".rejectText",
80
+ "description": "Text displayed on reject-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
81
+ "value": {
82
+ "kind": "expression"
83
+ }
84
+ },
85
+ {
86
+ "name": ".rejectTheme",
87
+ "description": "Theme for a reject-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
88
+ "value": {
89
+ "kind": "expression"
90
+ }
91
+ },
92
+ {
93
+ "name": ".cancelText",
94
+ "description": "Text displayed on cancel-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
95
+ "value": {
96
+ "kind": "expression"
97
+ }
98
+ },
99
+ {
100
+ "name": ".cancelTheme",
101
+ "description": "Theme for a cancel-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
102
+ "value": {
103
+ "kind": "expression"
104
+ }
105
+ },
106
+ {
107
+ "name": "@cancel",
108
+ "description": "cancel\nfired when Cancel button or Escape key was pressed.",
109
+ "value": {
110
+ "kind": "expression"
111
+ }
112
+ },
113
+ {
114
+ "name": "@confirm",
115
+ "description": "confirm\nfired when Confirm button was pressed.",
116
+ "value": {
117
+ "kind": "expression"
118
+ }
119
+ },
120
+ {
121
+ "name": "@reject",
122
+ "description": "reject\nfired when Reject button was pressed.",
123
+ "value": {
124
+ "kind": "expression"
125
+ }
126
+ },
127
+ {
128
+ "name": "@opened-changed",
129
+ "description": "Fired when the `opened` property changes.",
130
+ "value": {
131
+ "kind": "expression"
132
+ }
133
+ }
134
+ ]
135
+ }
136
+ ]
17
137
  }
18
138
  }
19
139
  }