@vaadin/dialog 24.6.0-alpha4 → 24.6.0-alpha5

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 (9) hide show
  1. package/package.json +11 -11
  2. package/src/vaadin-dialog-base-mixin.d.ts +12 -0
  3. package/src/vaadin-dialog-base-mixin.js +23 -2
  4. package/src/vaadin-dialog-draggable-mixin.js +9 -0
  5. package/src/vaadin-dialog-resizable-mixin.js +9 -7
  6. package/src/vaadin-dialog.d.ts +15 -0
  7. package/src/vaadin-dialog.js +1 -0
  8. package/web-types.json +50 -2
  9. package/web-types.lit.json +23 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/dialog",
3
- "version": "24.6.0-alpha4",
3
+ "version": "24.6.0-alpha5",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -39,24 +39,24 @@
39
39
  "dependencies": {
40
40
  "@open-wc/dedupe-mixin": "^1.3.0",
41
41
  "@polymer/polymer": "^3.0.0",
42
- "@vaadin/component-base": "24.6.0-alpha4",
43
- "@vaadin/lit-renderer": "24.6.0-alpha4",
44
- "@vaadin/overlay": "24.6.0-alpha4",
45
- "@vaadin/vaadin-lumo-styles": "24.6.0-alpha4",
46
- "@vaadin/vaadin-material-styles": "24.6.0-alpha4",
47
- "@vaadin/vaadin-themable-mixin": "24.6.0-alpha4",
42
+ "@vaadin/component-base": "24.6.0-alpha5",
43
+ "@vaadin/lit-renderer": "24.6.0-alpha5",
44
+ "@vaadin/overlay": "24.6.0-alpha5",
45
+ "@vaadin/vaadin-lumo-styles": "24.6.0-alpha5",
46
+ "@vaadin/vaadin-material-styles": "24.6.0-alpha5",
47
+ "@vaadin/vaadin-themable-mixin": "24.6.0-alpha5",
48
48
  "lit": "^3.0.0"
49
49
  },
50
50
  "devDependencies": {
51
- "@vaadin/a11y-base": "24.6.0-alpha4",
52
- "@vaadin/chai-plugins": "24.6.0-alpha4",
51
+ "@vaadin/a11y-base": "24.6.0-alpha5",
52
+ "@vaadin/chai-plugins": "24.6.0-alpha5",
53
53
  "@vaadin/testing-helpers": "^1.0.0",
54
- "@vaadin/text-area": "24.6.0-alpha4",
54
+ "@vaadin/text-area": "24.6.0-alpha5",
55
55
  "sinon": "^18.0.0"
56
56
  },
57
57
  "web-types": [
58
58
  "web-types.json",
59
59
  "web-types.lit.json"
60
60
  ],
61
- "gitHead": "78967d4f3bb46f58f43c2cc621802554acb2efaf"
61
+ "gitHead": "cbfa46fe276f254dcaa99a622710d56df7f0a539"
62
62
  }
package/src/vaadin-dialog-base-mixin.d.ts CHANGED
@@ -58,4 +58,16 @@ export declare class DialogBaseMixinClass {
58
58
  * overlay from stretching all the way to the left of the viewport).
59
59
  */
60
60
  left: string;
61
+
62
+ /**
63
+ * Set the width of the overlay.
64
+ * If a unitless number is provided, pixels are assumed.
65
+ */
66
+ width: string;
67
+
68
+ /**
69
+ * Set the height of the overlay.
70
+ * If a unitless number is provided, pixels are assumed.
71
+ */
72
+ height: string;
61
73
  }
package/src/vaadin-dialog-base-mixin.js CHANGED
@@ -74,6 +74,22 @@ export const DialogBaseMixin = (superClass) =>
74
74
  type: String,
75
75
  },
76
76
 
77
+ /**
78
+ * Set the width of the overlay.
79
+ * If a unitless number is provided, pixels are assumed.
80
+ */
81
+ width: {
82
+ type: String,
83
+ },
84
+
85
+ /**
86
+ * Set the height of the overlay.
87
+ * If a unitless number is provided, pixels are assumed.
88
+ */
89
+ height: {
90
+ type: String,
91
+ },
92
+
77
93
  /**
78
94
  * The `role` attribute value to be set on the overlay. Defaults to "dialog".
79
95
  *
@@ -87,7 +103,7 @@ export const DialogBaseMixin = (superClass) =>
87
103
  }
88
104
 
89
105
  static get observers() {
90
- return ['__positionChanged(top, left)'];
106
+ return ['__positionChanged(top, left)', '__sizeChanged(width, height)'];
91
107
  }
92
108
 
93
109
  /** @protected */
@@ -167,7 +183,12 @@ export const DialogBaseMixin = (superClass) =>
167
183
 
168
184
  /** @private */
169
185
  __positionChanged(top, left) {
170
- this.$.overlay.setBounds({ top, left });
186
+ requestAnimationFrame(() => this.$.overlay.setBounds({ top, left }));
187
+ }
188
+
189
+ /** @private */
190
+ __sizeChanged(width, height) {
191
+ requestAnimationFrame(() => this.$.overlay.setBounds({ width, height }));
171
192
  }
172
193
 
173
194
  /**
package/src/vaadin-dialog-draggable-mixin.js CHANGED
@@ -116,9 +116,18 @@ export const DialogDraggableMixin = (superClass) =>
116
116
 
117
117
  /** @private */
118
118
  _stopDrag() {
119
+ this.dispatchEvent(
120
+ new CustomEvent('dragged', { bubbles: true, composed: true, detail: { top: this.top, left: this.left } }),
121
+ );
119
122
  window.removeEventListener('mouseup', this._stopDrag);
120
123
  window.removeEventListener('touchend', this._stopDrag);
121
124
  window.removeEventListener('mousemove', this._drag);
122
125
  window.removeEventListener('touchmove', this._drag);
123
126
  }
127
+
128
+ /**
129
+ * Fired when the dialog drag is finished.
130
+ *
131
+ * @event dragged
132
+ */
124
133
  };
package/src/vaadin-dialog-resizable-mixin.js CHANGED
@@ -75,7 +75,7 @@ export const DialogResizableMixin = (superClass) =>
75
75
  window.addEventListener('touchmove', this._resizeListeners.resize[direction]);
76
76
  window.addEventListener('mouseup', this._resizeListeners.stop[direction]);
77
77
  window.addEventListener('touchend', this._resizeListeners.stop[direction]);
78
- if (this.$.overlay.$.overlay.style.position !== 'absolute') {
78
+ if (this.$.overlay.$.overlay.style.position !== 'absolute' || this.width || this.height) {
79
79
  this.$.overlay.setBounds(this._originalBounds);
80
80
  }
81
81
  }
@@ -96,21 +96,22 @@ export const DialogResizableMixin = (superClass) =>
96
96
  const height = this._originalBounds.height - (event.pageY - this._originalMouseCoords.top);
97
97
  const top = this._originalBounds.top + (event.pageY - this._originalMouseCoords.top);
98
98
  if (height > minimumSize) {
99
- this.$.overlay.setBounds({ top, height });
99
+ this.top = top;
100
+ this.height = height;
100
101
  }
101
102
  break;
102
103
  }
103
104
  case 'e': {
104
105
  const width = this._originalBounds.width + (event.pageX - this._originalMouseCoords.left);
105
106
  if (width > minimumSize) {
106
- this.$.overlay.setBounds({ width });
107
+ this.width = width;
107
108
  }
108
109
  break;
109
110
  }
110
111
  case 's': {
111
112
  const height = this._originalBounds.height + (event.pageY - this._originalMouseCoords.top);
112
113
  if (height > minimumSize) {
113
- this.$.overlay.setBounds({ height });
114
+ this.height = height;
114
115
  }
115
116
  break;
116
117
  }
@@ -118,7 +119,8 @@ export const DialogResizableMixin = (superClass) =>
118
119
  const width = this._originalBounds.width - (event.pageX - this._originalMouseCoords.left);
119
120
  const left = this._originalBounds.left + (event.pageX - this._originalMouseCoords.left);
120
121
  if (width > minimumSize) {
121
- this.$.overlay.setBounds({ left, width });
122
+ this.left = left;
123
+ this.width = width;
122
124
  }
123
125
  break;
124
126
  }
@@ -147,7 +149,7 @@ export const DialogResizableMixin = (superClass) =>
147
149
  */
148
150
  _getResizeDimensions() {
149
151
  const scrollPosition = this.$.overlay.$.resizerContainer.scrollTop;
150
- const { width, height } = getComputedStyle(this.$.overlay.$.overlay);
152
+ const { width, height, top, left } = getComputedStyle(this.$.overlay.$.overlay);
151
153
  const content = this.$.overlay.$.content;
152
154
  content.setAttribute(
153
155
  'style',
@@ -156,7 +158,7 @@ export const DialogResizableMixin = (superClass) =>
156
158
  const { width: contentWidth, height: contentHeight } = getComputedStyle(content);
157
159
  content.removeAttribute('style');
158
160
  this.$.overlay.$.resizerContainer.scrollTop = scrollPosition;
159
- return { width, height, contentWidth, contentHeight };
161
+ return { width, height, contentWidth, contentHeight, top, left };
160
162
  }
161
163
 
162
164
  /**
package/src/vaadin-dialog.d.ts CHANGED
@@ -22,6 +22,13 @@ export type DialogResizeDimensions = {
22
22
  height: string;
23
23
  contentWidth: string;
24
24
  contentHeight: string;
25
+ top: string;
26
+ left: string;
27
+ };
28
+
29
+ export type DialogPosition = {
30
+ top: string;
31
+ left: string;
25
32
  };
26
33
 
27
34
  /**
@@ -34,6 +41,11 @@ export type DialogOpenedChangedEvent = CustomEvent<{ value: boolean }>;
34
41
  */
35
42
  export type DialogResizeEvent = CustomEvent<DialogResizeDimensions>;
36
43
 
44
+ /**
45
+ * Fired when the dialog drag is finished.
46
+ */
47
+ export type DialogDraggedEvent = CustomEvent<DialogPosition>;
48
+
37
49
  /**
38
50
  * Fired when the dialog is closed.
39
51
  */
@@ -45,6 +57,8 @@ export interface DialogCustomEventMap {
45
57
  closed: DialogClosedEvent;
46
58
 
47
59
  resize: DialogResizeEvent;
60
+
61
+ dragged: DialogDraggedEvent;
48
62
  }
49
63
 
50
64
  export type DialogEventMap = DialogCustomEventMap & HTMLElementEventMap;
@@ -108,6 +122,7 @@ export type DialogEventMap = DialogCustomEventMap & HTMLElementEventMap;
108
122
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
109
123
  *
110
124
  * @fires {CustomEvent} resize - Fired when the dialog resize is finished.
125
+ * @fires {CustomEvent} dragged - Fired when the dialog drag is finished.
111
126
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
112
127
  * @fires {CustomEvent} closed - Fired when the dialog is closed.
113
128
  */
package/src/vaadin-dialog.js CHANGED
@@ -76,6 +76,7 @@ export { DialogOverlay } from './vaadin-dialog-overlay.js';
76
76
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
77
77
  *
78
78
  * @fires {CustomEvent} resize - Fired when the dialog resize is finished.
79
+ * @fires {CustomEvent} dragged - Fired when the dialog drag is finished.
79
80
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
80
81
  * @fires {CustomEvent} closed - Fired when the dialog is closed.
81
82
  *
package/web-types.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/dialog",
4
- "version": "24.6.0-alpha4",
4
+ "version": "24.6.0-alpha5",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
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/24.6.0-alpha4/#/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/styling-components) documentation.",
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/24.6.0-alpha5/#/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/styling-components) documentation.",
12
12
  "attributes": [
13
13
  {
14
14
  "name": "opened",
@@ -68,6 +68,28 @@
68
68
  ]
69
69
  }
70
70
  },
71
+ {
72
+ "name": "width",
73
+ "description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
74
+ "value": {
75
+ "type": [
76
+ "string",
77
+ "null",
78
+ "undefined"
79
+ ]
80
+ }
81
+ },
82
+ {
83
+ "name": "height",
84
+ "description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
85
+ "value": {
86
+ "type": [
87
+ "string",
88
+ "null",
89
+ "undefined"
90
+ ]
91
+ }
92
+ },
71
93
  {
72
94
  "name": "overlay-role",
73
95
  "description": "The `role` attribute value to be set on the overlay. Defaults to \"dialog\".",
@@ -202,6 +224,28 @@
202
224
  ]
203
225
  }
204
226
  },
227
+ {
228
+ "name": "width",
229
+ "description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
230
+ "value": {
231
+ "type": [
232
+ "string",
233
+ "null",
234
+ "undefined"
235
+ ]
236
+ }
237
+ },
238
+ {
239
+ "name": "height",
240
+ "description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
241
+ "value": {
242
+ "type": [
243
+ "string",
244
+ "null",
245
+ "undefined"
246
+ ]
247
+ }
248
+ },
205
249
  {
206
250
  "name": "overlayRole",
207
251
  "description": "The `role` attribute value to be set on the overlay. Defaults to \"dialog\".",
@@ -300,6 +344,10 @@
300
344
  "name": "closed",
301
345
  "description": "Fired when the dialog is closed."
302
346
  },
347
+ {
348
+ "name": "dragged",
349
+ "description": "Fired when the dialog drag is finished."
350
+ },
303
351
  {
304
352
  "name": "resize",
305
353
  "description": "Fired when the dialog resize is finished."
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/dialog",
4
- "version": "24.6.0-alpha4",
4
+ "version": "24.6.0-alpha5",
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-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/24.6.0-alpha4/#/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/styling-components) documentation.",
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/24.6.0-alpha5/#/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/styling-components) documentation.",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {
@@ -75,6 +75,20 @@
75
75
  "kind": "expression"
76
76
  }
77
77
  },
78
+ {
79
+ "name": ".width",
80
+ "description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
81
+ "value": {
82
+ "kind": "expression"
83
+ }
84
+ },
85
+ {
86
+ "name": ".height",
87
+ "description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
88
+ "value": {
89
+ "kind": "expression"
90
+ }
91
+ },
78
92
  {
79
93
  "name": ".overlayRole",
80
94
  "description": "The `role` attribute value to be set on the overlay. Defaults to \"dialog\".",
@@ -131,6 +145,13 @@
131
145
  "kind": "expression"
132
146
  }
133
147
  },
148
+ {
149
+ "name": "@dragged",
150
+ "description": "Fired when the dialog drag is finished.",
151
+ "value": {
152
+ "kind": "expression"
153
+ }
154
+ },
134
155
  {
135
156
  "name": "@resize",
136
157
  "description": "Fired when the dialog resize is finished.",