@vaadin/vaadin-dialog 2.5.0-beta1 → 2.6.0

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 (7) hide show
  1. package/README.md +11 -11
  2. package/package.json +8 -6
  3. package/src/vaadin-dialog-draggable-mixin.js +15 -1
  4. package/src/vaadin-dialog.d.ts +4 -1
  5. package/src/vaadin-dialog.js +11 -3
  6. package/theme/lumo/vaadin-dialog-styles.js +5 -0
  7. package/theme/material/vaadin-dialog-styles.js +5 -0
package/README.md CHANGED
@@ -1,21 +1,21 @@
1
- [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-dialog)](https://www.npmjs.com/package/@vaadin/vaadin-dialog)
2
- [![Bower version](https://badgen.net/github/release/vaadin/vaadin-dialog)](https://github.com/vaadin/vaadin-dialog/releases)
3
- [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-dialog)
4
- [![Build Status](https://travis-ci.org/vaadin/vaadin-dialog.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-dialog)
5
- [![Coverage Status](https://coveralls.io/repos/github/vaadin/vaadin-dialog/badge.svg?branch=master)](https://coveralls.io/github/vaadin/vaadin-dialog?branch=master)
6
- [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
1
+ # <vaadin-dialog>
7
2
 
8
- [![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-dialog)
9
- [![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadinvaadin-dialog.svg)](https://vaadin.com/directory/component/vaadinvaadin-dialog)
3
+ > ⚠️ Starting from Vaadin 20, the source code and issues for this component are migrated to the [`vaadin/web-components`](https://github.com/vaadin/web-components/tree/master/packages/vaadin-dialog) monorepository.
4
+ > This repository contains the source code and releases of `<vaadin-dialog>` for the Vaadin versions 10 to 19.
10
5
 
11
- # &lt;vaadin-dialog&gt;
6
+ [&lt;vaadin-dialog&gt;](https://vaadin.com/components/vaadin-dialog) is a Web Component for customized modal dialogs, part of the [Vaadin components](https://vaadin.com/components).
12
7
 
13
8
  [Live Demo ↗](https://vaadin.com/components/vaadin-dialog/html-examples/dialog-basic-demos)
14
9
  |
15
10
  [API documentation ↗](https://vaadin.com/components/vaadin-dialog/html-api)
16
11
 
17
-
18
- [&lt;vaadin-dialog&gt;](https://vaadin.com/components/vaadin-dialog) is a Web Component for customized modal dialogs, part of the [Vaadin components](https://vaadin.com/components).
12
+ [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-dialog)](https://www.npmjs.com/package/@vaadin/vaadin-dialog)
13
+ [![Bower version](https://badgen.net/github/release/vaadin/vaadin-dialog)](https://github.com/vaadin/vaadin-dialog/releases)
14
+ [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-dialog)
15
+ [![Build Status](https://travis-ci.org/vaadin/vaadin-dialog.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-dialog)
16
+ [![Coverage Status](https://coveralls.io/repos/github/vaadin/vaadin-dialog/badge.svg?branch=master)](https://coveralls.io/github/vaadin/vaadin-dialog?branch=master)
17
+ [![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-dialog)
18
+ [![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadinvaadin-dialog.svg)](https://vaadin.com/directory/component/vaadinvaadin-dialog)
19
19
 
20
20
  <!--
21
21
  ```
package/package.json CHANGED
@@ -10,7 +10,7 @@
10
10
  "repository": "vaadin/vaadin-dialog",
11
11
  "homepage": "https://vaadin.com/components",
12
12
  "name": "@vaadin/vaadin-dialog",
13
- "version": "2.5.0-beta1",
13
+ "version": "2.6.0",
14
14
  "main": "vaadin-dialog.js",
15
15
  "author": "Vaadin Ltd",
16
16
  "license": "Apache-2.0",
@@ -25,6 +25,8 @@
25
25
  "theme"
26
26
  ],
27
27
  "resolutions": {
28
+ "es-abstract": "1.17.6",
29
+ "@types/doctrine": "0.0.3",
28
30
  "inherits": "2.0.3",
29
31
  "samsam": "1.1.3",
30
32
  "supports-color": "3.1.2",
@@ -40,13 +42,13 @@
40
42
  "@vaadin/vaadin-element-mixin": "^2.4.1"
41
43
  },
42
44
  "scripts": {
43
- "generate-typings": "gen-typescript-declarations --outDir . --verify"
44
- },
45
- "devDependencies": {
45
+ "generate-typings": "gen-typescript-declarations --outDir . --verify"
46
+ },
47
+ "devDependencies": {
46
48
  "@polymer/iron-component-page": "^4.0.0",
47
49
  "@polymer/iron-test-helpers": "^3.0.0",
48
- "@vaadin/vaadin-button": "^2.4.0-beta1",
49
- "@vaadin/vaadin-text-field": "~2.7.0-beta1",
50
+ "@vaadin/vaadin-button": "^2.4.0",
51
+ "@vaadin/vaadin-text-field": "^2.7.0",
50
52
  "@webcomponents/webcomponentsjs": "^2.0.0",
51
53
  "wct-browser-legacy": "^1.0.1",
52
54
  "@vaadin/vaadin-demo-helpers": "^3.1.0"
package/src/vaadin-dialog-draggable-mixin.js CHANGED
@@ -18,6 +18,11 @@ export const DialogDraggableMixin = (superClass) =>
18
18
  _touchDevice: {
19
19
  type: Boolean,
20
20
  value: TOUCH_DEVICE
21
+ },
22
+
23
+ /* TODO: Expose as a public property (check naming) */
24
+ __dragHandleClassName: {
25
+ type: String
21
26
  }
22
27
  };
23
28
  }
@@ -46,7 +51,16 @@ export const DialogDraggableMixin = (superClass) =>
46
51
  const isResizerContainer = e.target === resizerContainer;
47
52
  const isResizerContainerScrollbar = e.offsetX > resizerContainer.clientWidth || e.offsetY > resizerContainer.clientHeight;
48
53
  const isContentPart = e.target === this.$.overlay.$.content;
49
- const isDraggable = e.target.classList.contains('draggable');
54
+
55
+ const isDraggable = e.composedPath().some((node, index) => {
56
+ if (node.classList) {
57
+ const isDraggableNode = node.classList.contains(this.__dragHandleClassName || 'draggable');
58
+ const isDraggableLeafOnly = node.classList.contains('draggable-leaf-only');
59
+ const isLeafNode = index === 0;
60
+ return (isDraggableLeafOnly && isLeafNode) || (isDraggableNode && (!isDraggableLeafOnly || isLeafNode));
61
+ }
62
+ });
63
+
50
64
  if ((isResizerContainer && !isResizerContainerScrollbar) || isContentPart || isDraggable) {
51
65
  !isDraggable && e.preventDefault();
52
66
  this._originalBounds = this._getOverlayBounds();
package/src/vaadin-dialog.d.ts CHANGED
@@ -136,7 +136,10 @@ declare class DialogElement extends
136
136
  *
137
137
  * By default, only the overlay area can be used to drag the element. But,
138
138
  * a child element can be marked as a draggable area by adding a
139
- * "`draggable`" class to it.
139
+ * "`draggable`" class to it, this will by default make all of its children draggable also.
140
+ * If you want a child element to be draggable
141
+ * but still have its children non-draggable (by default), mark it with
142
+ * "`draggable-leaf-only`" class name.
140
143
  */
141
144
  draggable: boolean;
142
145
 
package/src/vaadin-dialog.js CHANGED
@@ -27,6 +27,10 @@ $_documentContainer.innerHTML = `<dom-module id="vaadin-dialog-overlay-styles" t
27
27
  [part="content"] {
28
28
  min-width: 12em; /* matches the default <vaadin-text-field> width */
29
29
  }
30
+
31
+ :host([has-bounds-set]) [part="overlay"] {
32
+ max-width: none;
33
+ }
30
34
  </style>
31
35
  </template>
32
36
  </dom-module>`;
@@ -161,7 +165,7 @@ class DialogElement extends
161
165
  }
162
166
 
163
167
  static get version() {
164
- return '2.5.0-beta1';
168
+ return '2.5.2';
165
169
  }
166
170
 
167
171
  static get properties() {
@@ -236,7 +240,11 @@ class DialogElement extends
236
240
  *
237
241
  * By default, only the overlay area can be used to drag the element. But,
238
242
  * a child element can be marked as a draggable area by adding a
239
- * "`draggable`" class to it.
243
+ * "`draggable`" class to it, this will by default make all of its children draggable also.
244
+ * If you want a child element to be draggable
245
+ * but still have its children non-draggable (by default), mark it with
246
+ * "`draggable-leaf-only`" class name.
247
+ *
240
248
  * @type {boolean}
241
249
  */
242
250
  draggable: {
@@ -382,7 +390,7 @@ class DialogElement extends
382
390
 
383
391
  if (overlay.style.position !== 'absolute') {
384
392
  overlay.style.position = 'absolute';
385
- overlay.style.maxWidth = 'none';
393
+ this.$.overlay.setAttribute('has-bounds-set', '');
386
394
  this.__forceSafariReflow();
387
395
  }
388
396
 
package/theme/lumo/vaadin-dialog-styles.js CHANGED
@@ -28,6 +28,11 @@ const $_documentContainer = html`<dom-module id="lumo-dialog" theme-for="vaadin-
28
28
  padding: var(--lumo-space-l);
29
29
  }
30
30
 
31
+ /* No padding */
32
+ :host([theme~='no-padding']) [part='content'] {
33
+ padding: 0;
34
+ }
35
+
31
36
  /* Animations */
32
37
 
33
38
  :host([opening]),
package/theme/material/vaadin-dialog-styles.js CHANGED
@@ -16,6 +16,11 @@ const $_documentContainer = html`<dom-module id="material-dialog" theme-for="vaa
16
16
  [part="content"] {
17
17
  padding: 24px;
18
18
  }
19
+
20
+ /* No padding */
21
+ :host([theme~='no-padding']) [part='content'] {
22
+ padding: 0;
23
+ }
19
24
  </style>
20
25
  </template>
21
26
  </dom-module>`;