@vaadin/popover 25.0.0-alpha5 → 25.0.0-alpha7
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/popover",
|
|
3
|
-
"version": "25.0.0-
|
|
3
|
+
"version": "25.0.0-alpha7",
|
|
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-alpha7",
|
|
41
|
+
"@vaadin/component-base": "25.0.0-alpha7",
|
|
42
|
+
"@vaadin/lit-renderer": "25.0.0-alpha7",
|
|
43
|
+
"@vaadin/overlay": "25.0.0-alpha7",
|
|
44
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha7",
|
|
45
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha7",
|
|
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-alpha7",
|
|
50
|
+
"@vaadin/test-runner-commands": "25.0.0-alpha7",
|
|
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": "87f72707ce6866892f8be5782fa0da008e87dcbc"
|
|
59
59
|
}
|
|
@@ -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. */
|
|
@@ -7,7 +7,7 @@ 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
12
|
import { popoverOverlayStyles } from './styles/vaadin-popover-overlay-core-styles.js';
|
|
13
13
|
import { PopoverOverlayMixin } from './vaadin-popover-overlay-mixin.js';
|
|
@@ -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 | null;
|
|
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 | null;
|
|
131
129
|
|
|
132
130
|
/**
|
|
133
131
|
* The delay in milliseconds before the popover is opened
|
package/src/vaadin-popover.js
CHANGED
|
@@ -18,7 +18,6 @@ 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 { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
|
|
22
21
|
import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
|
|
23
22
|
import { PopoverPositionMixin } from './vaadin-popover-position-mixin.js';
|
|
24
23
|
import { PopoverTargetMixin } from './vaadin-popover-target-mixin.js';
|
|
@@ -216,7 +215,7 @@ const isLastOverlay = (overlay) => {
|
|
|
216
215
|
* @mixes ThemePropertyMixin
|
|
217
216
|
*/
|
|
218
217
|
class Popover extends PopoverPositionMixin(
|
|
219
|
-
PopoverTargetMixin(OverlayClassMixin(ThemePropertyMixin(ElementMixin(
|
|
218
|
+
PopoverTargetMixin(OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolylitMixin(LitElement))))),
|
|
220
219
|
) {
|
|
221
220
|
static get is() {
|
|
222
221
|
return 'vaadin-popover';
|
|
@@ -259,20 +258,18 @@ class Popover extends PopoverPositionMixin(
|
|
|
259
258
|
},
|
|
260
259
|
|
|
261
260
|
/**
|
|
262
|
-
*
|
|
263
|
-
*
|
|
264
|
-
* @attr {string} content-height
|
|
261
|
+
* Set the height of the overlay.
|
|
262
|
+
* If a unitless number is provided, pixels are assumed.
|
|
265
263
|
*/
|
|
266
|
-
|
|
264
|
+
height: {
|
|
267
265
|
type: String,
|
|
268
266
|
},
|
|
269
267
|
|
|
270
268
|
/**
|
|
271
|
-
*
|
|
272
|
-
*
|
|
273
|
-
* @attr {string} content-width
|
|
269
|
+
* Set the width of the overlay.
|
|
270
|
+
* If a unitless number is provided, pixels are assumed.
|
|
274
271
|
*/
|
|
275
|
-
|
|
272
|
+
width: {
|
|
276
273
|
type: String,
|
|
277
274
|
},
|
|
278
275
|
|
|
@@ -427,11 +424,7 @@ class Popover extends PopoverPositionMixin(
|
|
|
427
424
|
}
|
|
428
425
|
|
|
429
426
|
static get observers() {
|
|
430
|
-
return [
|
|
431
|
-
'__updateContentHeight(contentHeight, _overlayElement)',
|
|
432
|
-
'__updateContentWidth(contentWidth, _overlayElement)',
|
|
433
|
-
'__updateAriaAttributes(opened, overlayRole, target)',
|
|
434
|
-
];
|
|
427
|
+
return ['__sizeChanged(width, height, _overlayElement)', '__updateAriaAttributes(opened, overlayRole, target)'];
|
|
435
428
|
}
|
|
436
429
|
|
|
437
430
|
/**
|
|
@@ -984,27 +977,9 @@ class Popover extends PopoverPositionMixin(
|
|
|
984
977
|
}
|
|
985
978
|
|
|
986
979
|
/** @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) {
|
|
980
|
+
__sizeChanged(width, height, overlay) {
|
|
1006
981
|
if (overlay) {
|
|
1007
|
-
|
|
982
|
+
requestAnimationFrame(() => overlay.setBounds({ width, height }, false));
|
|
1008
983
|
}
|
|
1009
984
|
}
|
|
1010
985
|
|
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-alpha7",
|
|
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-alpha7/#/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-alpha7",
|
|
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-alpha7/#/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
|
}
|