@vaadin/popover 25.0.0-alpha4 → 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 +10 -10
- package/src/styles/{vaadin-popover-overlay-styles.js → vaadin-popover-overlay-core-styles.js} +0 -7
- package/src/vaadin-popover-overlay-mixin.js +9 -15
- package/src/vaadin-popover-overlay.js +5 -3
- package/src/vaadin-popover.d.ts +6 -8
- package/src/vaadin-popover.js +11 -35
- package/web-types.json +10 -10
- package/web-types.lit.json +6 -6
- /package/src/styles/{vaadin-popover-overlay-styles.d.ts → vaadin-popover-overlay-core-styles.d.ts} +0 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/popover",
|
|
3
|
-
"version": "25.0.0-
|
|
3
|
+
"version": "25.0.0-alpha6",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,17 +37,17 @@
|
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
|
-
"@vaadin/a11y-base": "25.0.0-
|
|
41
|
-
"@vaadin/component-base": "25.0.0-
|
|
42
|
-
"@vaadin/lit-renderer": "25.0.0-
|
|
43
|
-
"@vaadin/overlay": "25.0.0-
|
|
44
|
-
"@vaadin/vaadin-lumo-styles": "25.0.0-
|
|
45
|
-
"@vaadin/vaadin-themable-mixin": "25.0.0-
|
|
40
|
+
"@vaadin/a11y-base": "25.0.0-alpha6",
|
|
41
|
+
"@vaadin/component-base": "25.0.0-alpha6",
|
|
42
|
+
"@vaadin/lit-renderer": "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",
|
|
46
46
|
"lit": "^3.0.0"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@vaadin/chai-plugins": "25.0.0-
|
|
50
|
-
"@vaadin/test-runner-commands": "25.0.0-
|
|
49
|
+
"@vaadin/chai-plugins": "25.0.0-alpha6",
|
|
50
|
+
"@vaadin/test-runner-commands": "25.0.0-alpha6",
|
|
51
51
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
52
52
|
"sinon": "^18.0.0"
|
|
53
53
|
},
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"web-types.json",
|
|
56
56
|
"web-types.lit.json"
|
|
57
57
|
],
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "cd1d084198d2b326c58d44bb39fa4845b71ce551"
|
|
59
59
|
}
|
package/src/styles/{vaadin-popover-overlay-styles.js → vaadin-popover-overlay-core-styles.js}
RENAMED
|
@@ -7,11 +7,6 @@ import { css } from 'lit';
|
|
|
7
7
|
import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-core-styles.js';
|
|
8
8
|
|
|
9
9
|
const popoverOverlay = css`
|
|
10
|
-
:host {
|
|
11
|
-
--_vaadin-popover-content-width: auto;
|
|
12
|
-
--_vaadin-popover-content-height: auto;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
10
|
:host([modeless][with-backdrop]) [part='backdrop'] {
|
|
16
11
|
pointer-events: none;
|
|
17
12
|
}
|
|
@@ -31,8 +26,6 @@ const popoverOverlay = css`
|
|
|
31
26
|
overflow: auto;
|
|
32
27
|
box-sizing: border-box;
|
|
33
28
|
max-height: 100%;
|
|
34
|
-
width: var(--_vaadin-popover-content-width);
|
|
35
|
-
height: var(--_vaadin-popover-content-height);
|
|
36
29
|
}
|
|
37
30
|
|
|
38
31
|
/* Increase the area of the popover so the pointer can go from the target directly to it. */
|
|
@@ -57,21 +57,6 @@ export const PopoverOverlayMixin = (superClass) =>
|
|
|
57
57
|
return 'vaadin-popover';
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
-
requestContentUpdate() {
|
|
61
|
-
super.requestContentUpdate();
|
|
62
|
-
|
|
63
|
-
// Copy custom properties from the owner
|
|
64
|
-
if (this.positionTarget && this.owner) {
|
|
65
|
-
const style = getComputedStyle(this.owner);
|
|
66
|
-
['top', 'bottom', 'start', 'end'].forEach((prop) => {
|
|
67
|
-
this.style.setProperty(
|
|
68
|
-
`--${this._tagNamePrefix}-offset-${prop}`,
|
|
69
|
-
style.getPropertyValue(`--${this._tagNamePrefix}-offset-${prop}`),
|
|
70
|
-
);
|
|
71
|
-
});
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
|
|
75
60
|
/**
|
|
76
61
|
* @protected
|
|
77
62
|
* @override
|
|
@@ -83,6 +68,15 @@ export const PopoverOverlayMixin = (superClass) =>
|
|
|
83
68
|
return;
|
|
84
69
|
}
|
|
85
70
|
|
|
71
|
+
// Copy custom properties from the owner
|
|
72
|
+
if (this.owner) {
|
|
73
|
+
const style = getComputedStyle(this.owner);
|
|
74
|
+
['top', 'bottom', 'start', 'end'].forEach((prop) => {
|
|
75
|
+
const propertyName = `--${this._tagNamePrefix}-offset-${prop}`;
|
|
76
|
+
this.style.setProperty(propertyName, style.getPropertyValue(propertyName));
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
|
|
86
80
|
this.removeAttribute('arrow-centered');
|
|
87
81
|
|
|
88
82
|
// Center the overlay horizontally
|
|
@@ -7,9 +7,9 @@ import { html, LitElement } from 'lit';
|
|
|
7
7
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
8
8
|
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
|
|
9
9
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
10
|
-
import {
|
|
10
|
+
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
|
|
11
11
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
12
|
-
import { popoverOverlayStyles } from './styles/vaadin-popover-overlay-styles.js';
|
|
12
|
+
import { popoverOverlayStyles } from './styles/vaadin-popover-overlay-core-styles.js';
|
|
13
13
|
import { PopoverOverlayMixin } from './vaadin-popover-overlay-mixin.js';
|
|
14
14
|
|
|
15
15
|
/**
|
|
@@ -22,7 +22,9 @@ import { PopoverOverlayMixin } from './vaadin-popover-overlay-mixin.js';
|
|
|
22
22
|
* @mixes ThemableMixin
|
|
23
23
|
* @private
|
|
24
24
|
*/
|
|
25
|
-
class PopoverOverlay extends PopoverOverlayMixin(
|
|
25
|
+
class PopoverOverlay extends PopoverOverlayMixin(
|
|
26
|
+
DirMixin(ThemableMixin(LumoInjectionMixin(PolylitMixin(LitElement)))),
|
|
27
|
+
) {
|
|
26
28
|
static get is() {
|
|
27
29
|
return 'vaadin-popover-overlay';
|
|
28
30
|
}
|
package/src/vaadin-popover.d.ts
CHANGED
|
@@ -116,18 +116,16 @@ declare class Popover extends PopoverPositionMixin(
|
|
|
116
116
|
autofocus: boolean;
|
|
117
117
|
|
|
118
118
|
/**
|
|
119
|
-
*
|
|
120
|
-
*
|
|
121
|
-
* @attr {string} content-height
|
|
119
|
+
* Set the height of the overlay.
|
|
120
|
+
* If a unitless number is provided, pixels are assumed.
|
|
122
121
|
*/
|
|
123
|
-
|
|
122
|
+
height: string;
|
|
124
123
|
|
|
125
124
|
/**
|
|
126
|
-
*
|
|
127
|
-
*
|
|
128
|
-
* @attr {string} content-width
|
|
125
|
+
* Set the width of the overlay.
|
|
126
|
+
* If a unitless number is provided, pixels are assumed.
|
|
129
127
|
*/
|
|
130
|
-
|
|
128
|
+
width: string;
|
|
131
129
|
|
|
132
130
|
/**
|
|
133
131
|
* The delay in milliseconds before the popover is opened
|
package/src/vaadin-popover.js
CHANGED
|
@@ -18,7 +18,7 @@ import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixi
|
|
|
18
18
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
19
19
|
import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
|
|
20
20
|
import { isLastOverlay as isLastOverlayBase } from '@vaadin/overlay/src/vaadin-overlay-stack-mixin.js';
|
|
21
|
-
import {
|
|
21
|
+
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
|
|
22
22
|
import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
|
|
23
23
|
import { PopoverPositionMixin } from './vaadin-popover-position-mixin.js';
|
|
24
24
|
import { PopoverTargetMixin } from './vaadin-popover-target-mixin.js';
|
|
@@ -216,7 +216,7 @@ const isLastOverlay = (overlay) => {
|
|
|
216
216
|
* @mixes ThemePropertyMixin
|
|
217
217
|
*/
|
|
218
218
|
class Popover extends PopoverPositionMixin(
|
|
219
|
-
PopoverTargetMixin(OverlayClassMixin(ThemePropertyMixin(ElementMixin(
|
|
219
|
+
PopoverTargetMixin(OverlayClassMixin(ThemePropertyMixin(ElementMixin(LumoInjectionMixin(PolylitMixin(LitElement)))))),
|
|
220
220
|
) {
|
|
221
221
|
static get is() {
|
|
222
222
|
return 'vaadin-popover';
|
|
@@ -259,20 +259,18 @@ class Popover extends PopoverPositionMixin(
|
|
|
259
259
|
},
|
|
260
260
|
|
|
261
261
|
/**
|
|
262
|
-
*
|
|
263
|
-
*
|
|
264
|
-
* @attr {string} content-height
|
|
262
|
+
* Set the height of the overlay.
|
|
263
|
+
* If a unitless number is provided, pixels are assumed.
|
|
265
264
|
*/
|
|
266
|
-
|
|
265
|
+
height: {
|
|
267
266
|
type: String,
|
|
268
267
|
},
|
|
269
268
|
|
|
270
269
|
/**
|
|
271
|
-
*
|
|
272
|
-
*
|
|
273
|
-
* @attr {string} content-width
|
|
270
|
+
* Set the width of the overlay.
|
|
271
|
+
* If a unitless number is provided, pixels are assumed.
|
|
274
272
|
*/
|
|
275
|
-
|
|
273
|
+
width: {
|
|
276
274
|
type: String,
|
|
277
275
|
},
|
|
278
276
|
|
|
@@ -427,11 +425,7 @@ class Popover extends PopoverPositionMixin(
|
|
|
427
425
|
}
|
|
428
426
|
|
|
429
427
|
static get observers() {
|
|
430
|
-
return [
|
|
431
|
-
'__updateContentHeight(contentHeight, _overlayElement)',
|
|
432
|
-
'__updateContentWidth(contentWidth, _overlayElement)',
|
|
433
|
-
'__updateAriaAttributes(opened, overlayRole, target)',
|
|
434
|
-
];
|
|
428
|
+
return ['__sizeChanged(width, height, _overlayElement)', '__updateAriaAttributes(opened, overlayRole, target)'];
|
|
435
429
|
}
|
|
436
430
|
|
|
437
431
|
/**
|
|
@@ -984,27 +978,9 @@ class Popover extends PopoverPositionMixin(
|
|
|
984
978
|
}
|
|
985
979
|
|
|
986
980
|
/** @private */
|
|
987
|
-
|
|
988
|
-
const prop = `--_vaadin-popover-content-${dimension}`;
|
|
989
|
-
|
|
990
|
-
if (value) {
|
|
991
|
-
overlay.style.setProperty(prop, value);
|
|
992
|
-
} else {
|
|
993
|
-
overlay.style.removeProperty(prop);
|
|
994
|
-
}
|
|
995
|
-
}
|
|
996
|
-
|
|
997
|
-
/** @private */
|
|
998
|
-
__updateContentHeight(height, overlay) {
|
|
999
|
-
if (overlay) {
|
|
1000
|
-
this.__updateDimension(overlay, 'height', height);
|
|
1001
|
-
}
|
|
1002
|
-
}
|
|
1003
|
-
|
|
1004
|
-
/** @private */
|
|
1005
|
-
__updateContentWidth(width, overlay) {
|
|
981
|
+
__sizeChanged(width, height, overlay) {
|
|
1006
982
|
if (overlay) {
|
|
1007
|
-
|
|
983
|
+
requestAnimationFrame(() => overlay.setBounds({ width, height }, false));
|
|
1008
984
|
}
|
|
1009
985
|
}
|
|
1010
986
|
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/popover",
|
|
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-popover",
|
|
11
|
-
"description": "`<vaadin-popover>` is a Web Component for creating overlays\nthat are positioned next to specified DOM element (target).\n\nUnlike `<vaadin-tooltip>`, the popover supports rich content\nthat can be provided by using `renderer` function.\n\n### Styling\n\n`<vaadin-popover>` uses `<vaadin-popover-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-
|
|
11
|
+
"description": "`<vaadin-popover>` is a Web Component for creating overlays\nthat are positioned next to specified DOM element (target).\n\nUnlike `<vaadin-tooltip>`, the popover supports rich content\nthat can be provided by using `renderer` function.\n\n### Styling\n\n`<vaadin-popover>` uses `<vaadin-popover-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha6/#/elements/vaadin-overlay) documentation\nfor `<vaadin-popover-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`arrow` | Optional arrow pointing to the target when using `theme=\"arrow\"`\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|----------------------------------------\n`position` | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-popover>` is\npropagated to the internal `<vaadin-popover-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-popover>` element:\n\nCustom CSS property | Description\n---------------------------------|-------------\n`--vaadin-popover-offset-top` | Used as an offset when the popover is aligned vertically below the target\n`--vaadin-popover-offset-bottom` | Used as an offset when the popover is aligned vertically above the target\n`--vaadin-popover-offset-start` | Used as an offset when the popover is aligned horizontally after the target\n`--vaadin-popover-offset-end` | Used as an offset when the popover is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "overlay-class",
|
|
@@ -77,8 +77,8 @@
|
|
|
77
77
|
}
|
|
78
78
|
},
|
|
79
79
|
{
|
|
80
|
-
"name": "
|
|
81
|
-
"description": "
|
|
80
|
+
"name": "height",
|
|
81
|
+
"description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
|
|
82
82
|
"value": {
|
|
83
83
|
"type": [
|
|
84
84
|
"string",
|
|
@@ -88,8 +88,8 @@
|
|
|
88
88
|
}
|
|
89
89
|
},
|
|
90
90
|
{
|
|
91
|
-
"name": "
|
|
92
|
-
"description": "
|
|
91
|
+
"name": "width",
|
|
92
|
+
"description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
|
|
93
93
|
"value": {
|
|
94
94
|
"type": [
|
|
95
95
|
"string",
|
|
@@ -289,8 +289,8 @@
|
|
|
289
289
|
}
|
|
290
290
|
},
|
|
291
291
|
{
|
|
292
|
-
"name": "
|
|
293
|
-
"description": "
|
|
292
|
+
"name": "height",
|
|
293
|
+
"description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
|
|
294
294
|
"value": {
|
|
295
295
|
"type": [
|
|
296
296
|
"string",
|
|
@@ -300,8 +300,8 @@
|
|
|
300
300
|
}
|
|
301
301
|
},
|
|
302
302
|
{
|
|
303
|
-
"name": "
|
|
304
|
-
"description": "
|
|
303
|
+
"name": "width",
|
|
304
|
+
"description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
|
|
305
305
|
"value": {
|
|
306
306
|
"type": [
|
|
307
307
|
"string",
|
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/popover",
|
|
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-popover",
|
|
19
|
-
"description": "`<vaadin-popover>` is a Web Component for creating overlays\nthat are positioned next to specified DOM element (target).\n\nUnlike `<vaadin-tooltip>`, the popover supports rich content\nthat can be provided by using `renderer` function.\n\n### Styling\n\n`<vaadin-popover>` uses `<vaadin-popover-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-
|
|
19
|
+
"description": "`<vaadin-popover>` is a Web Component for creating overlays\nthat are positioned next to specified DOM element (target).\n\nUnlike `<vaadin-tooltip>`, the popover supports rich content\nthat can be provided by using `renderer` function.\n\n### Styling\n\n`<vaadin-popover>` uses `<vaadin-popover-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha6/#/elements/vaadin-overlay) documentation\nfor `<vaadin-popover-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`arrow` | Optional arrow pointing to the target when using `theme=\"arrow\"`\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|----------------------------------------\n`position` | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-popover>` is\npropagated to the internal `<vaadin-popover-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-popover>` element:\n\nCustom CSS property | Description\n---------------------------------|-------------\n`--vaadin-popover-offset-top` | Used as an offset when the popover is aligned vertically below the target\n`--vaadin-popover-offset-bottom` | Used as an offset when the popover is aligned vertically above the target\n`--vaadin-popover-offset-start` | Used as an offset when the popover is aligned horizontally after the target\n`--vaadin-popover-offset-end` | Used as an offset when the popover is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -104,15 +104,15 @@
|
|
|
104
104
|
}
|
|
105
105
|
},
|
|
106
106
|
{
|
|
107
|
-
"name": ".
|
|
108
|
-
"description": "
|
|
107
|
+
"name": ".height",
|
|
108
|
+
"description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
|
|
109
109
|
"value": {
|
|
110
110
|
"kind": "expression"
|
|
111
111
|
}
|
|
112
112
|
},
|
|
113
113
|
{
|
|
114
|
-
"name": ".
|
|
115
|
-
"description": "
|
|
114
|
+
"name": ".width",
|
|
115
|
+
"description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
|
|
116
116
|
"value": {
|
|
117
117
|
"kind": "expression"
|
|
118
118
|
}
|
/package/src/styles/{vaadin-popover-overlay-styles.d.ts → vaadin-popover-overlay-core-styles.d.ts}
RENAMED
|
File without changes
|