@vaadin/popover 25.0.0-alpha3 → 25.0.0-alpha4
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-alpha4",
|
|
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-alpha4",
|
|
41
|
+
"@vaadin/component-base": "25.0.0-alpha4",
|
|
42
|
+
"@vaadin/lit-renderer": "25.0.0-alpha4",
|
|
43
|
+
"@vaadin/overlay": "25.0.0-alpha4",
|
|
44
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha4",
|
|
45
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha4",
|
|
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-alpha4",
|
|
50
|
+
"@vaadin/test-runner-commands": "25.0.0-alpha4",
|
|
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": "ce4421f0daf26027b863b91787a474e4cc264344"
|
|
59
59
|
}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2024 - 2025 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import { css } from 'lit';
|
|
7
|
+
import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-core-styles.js';
|
|
8
|
+
|
|
9
|
+
const popoverOverlay = css`
|
|
10
|
+
:host {
|
|
11
|
+
--_vaadin-popover-content-width: auto;
|
|
12
|
+
--_vaadin-popover-content-height: auto;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
:host([modeless][with-backdrop]) [part='backdrop'] {
|
|
16
|
+
pointer-events: none;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
:host([position^='top'][top-aligned]) [part='overlay'],
|
|
20
|
+
:host([position^='bottom'][top-aligned]) [part='overlay'] {
|
|
21
|
+
margin-top: var(--vaadin-popover-offset-top, 0);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
[part='overlay'] {
|
|
25
|
+
position: relative;
|
|
26
|
+
overflow: visible;
|
|
27
|
+
max-height: 100%;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
[part='content'] {
|
|
31
|
+
overflow: auto;
|
|
32
|
+
box-sizing: border-box;
|
|
33
|
+
max-height: 100%;
|
|
34
|
+
width: var(--_vaadin-popover-content-width);
|
|
35
|
+
height: var(--_vaadin-popover-content-height);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* Increase the area of the popover so the pointer can go from the target directly to it. */
|
|
39
|
+
[part='overlay']::before {
|
|
40
|
+
position: absolute;
|
|
41
|
+
content: '';
|
|
42
|
+
inset-block: calc(var(--vaadin-popover-offset-top, 0) * -1) calc(var(--vaadin-popover-offset-bottom, 0) * -1);
|
|
43
|
+
inset-inline: calc(var(--vaadin-popover-offset-start, 0) * -1) calc(var(--vaadin-popover-offset-end, 0) * -1);
|
|
44
|
+
z-index: -1;
|
|
45
|
+
pointer-events: auto;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
:host([position^='top'][bottom-aligned]) [part='overlay'],
|
|
49
|
+
:host([position^='bottom'][bottom-aligned]) [part='overlay'] {
|
|
50
|
+
margin-bottom: var(--vaadin-popover-offset-bottom, 0);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
:host([position^='start'][start-aligned]) [part='overlay'],
|
|
54
|
+
:host([position^='end'][start-aligned]) [part='overlay'] {
|
|
55
|
+
margin-inline-start: var(--vaadin-popover-offset-start, 0);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
:host([position^='start'][end-aligned]) [part='overlay'],
|
|
59
|
+
:host([position^='end'][end-aligned]) [part='overlay'] {
|
|
60
|
+
margin-inline-end: var(--vaadin-popover-offset-end, 0);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
[part='arrow'] {
|
|
64
|
+
display: none;
|
|
65
|
+
position: absolute;
|
|
66
|
+
height: 0;
|
|
67
|
+
width: 0;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
:host([theme~='arrow']) [part='arrow'] {
|
|
71
|
+
display: block;
|
|
72
|
+
}
|
|
73
|
+
`;
|
|
74
|
+
|
|
75
|
+
export const popoverOverlayStyles = [overlayStyles, popoverOverlay];
|
|
@@ -3,12 +3,13 @@
|
|
|
3
3
|
* Copyright (c) 2024 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import {
|
|
6
|
+
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 { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-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
13
|
import { PopoverOverlayMixin } from './vaadin-popover-overlay-mixin.js';
|
|
13
14
|
|
|
14
15
|
/**
|
|
@@ -21,80 +22,13 @@ import { PopoverOverlayMixin } from './vaadin-popover-overlay-mixin.js';
|
|
|
21
22
|
* @mixes ThemableMixin
|
|
22
23
|
* @private
|
|
23
24
|
*/
|
|
24
|
-
class PopoverOverlay extends PopoverOverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
|
|
25
|
+
class PopoverOverlay extends PopoverOverlayMixin(DirMixin(ThemableMixin(CSSInjectionMixin(PolylitMixin(LitElement))))) {
|
|
25
26
|
static get is() {
|
|
26
27
|
return 'vaadin-popover-overlay';
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
static get styles() {
|
|
30
|
-
return
|
|
31
|
-
overlayStyles,
|
|
32
|
-
css`
|
|
33
|
-
:host {
|
|
34
|
-
--_vaadin-popover-content-width: auto;
|
|
35
|
-
--_vaadin-popover-content-height: auto;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
:host([modeless][with-backdrop]) [part='backdrop'] {
|
|
39
|
-
pointer-events: none;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
:host([position^='top'][top-aligned]) [part='overlay'],
|
|
43
|
-
:host([position^='bottom'][top-aligned]) [part='overlay'] {
|
|
44
|
-
margin-top: var(--vaadin-popover-offset-top, 0);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
[part='overlay'] {
|
|
48
|
-
position: relative;
|
|
49
|
-
overflow: visible;
|
|
50
|
-
max-height: 100%;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
[part='content'] {
|
|
54
|
-
overflow: auto;
|
|
55
|
-
box-sizing: border-box;
|
|
56
|
-
max-height: 100%;
|
|
57
|
-
width: var(--_vaadin-popover-content-width);
|
|
58
|
-
height: var(--_vaadin-popover-content-height);
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
/* Increase the area of the popover so the pointer can go from the target directly to it. */
|
|
62
|
-
[part='overlay']::before {
|
|
63
|
-
position: absolute;
|
|
64
|
-
content: '';
|
|
65
|
-
inset-block: calc(var(--vaadin-popover-offset-top, 0) * -1) calc(var(--vaadin-popover-offset-bottom, 0) * -1);
|
|
66
|
-
inset-inline: calc(var(--vaadin-popover-offset-start, 0) * -1) calc(var(--vaadin-popover-offset-end, 0) * -1);
|
|
67
|
-
z-index: -1;
|
|
68
|
-
pointer-events: auto;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
:host([position^='top'][bottom-aligned]) [part='overlay'],
|
|
72
|
-
:host([position^='bottom'][bottom-aligned]) [part='overlay'] {
|
|
73
|
-
margin-bottom: var(--vaadin-popover-offset-bottom, 0);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
:host([position^='start'][start-aligned]) [part='overlay'],
|
|
77
|
-
:host([position^='end'][start-aligned]) [part='overlay'] {
|
|
78
|
-
margin-inline-start: var(--vaadin-popover-offset-start, 0);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
:host([position^='start'][end-aligned]) [part='overlay'],
|
|
82
|
-
:host([position^='end'][end-aligned]) [part='overlay'] {
|
|
83
|
-
margin-inline-end: var(--vaadin-popover-offset-end, 0);
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
[part='arrow'] {
|
|
87
|
-
display: none;
|
|
88
|
-
position: absolute;
|
|
89
|
-
height: 0;
|
|
90
|
-
width: 0;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
:host([theme~='arrow']) [part='arrow'] {
|
|
94
|
-
display: block;
|
|
95
|
-
}
|
|
96
|
-
`,
|
|
97
|
-
];
|
|
31
|
+
return popoverOverlayStyles;
|
|
98
32
|
}
|
|
99
33
|
|
|
100
34
|
/** @protected */
|
package/src/vaadin-popover.js
CHANGED
|
@@ -17,7 +17,8 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
|
17
17
|
import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
|
|
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
|
-
import { isLastOverlay } from '@vaadin/overlay/src/vaadin-overlay-stack-mixin.js';
|
|
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';
|
|
21
22
|
import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
|
|
22
23
|
import { PopoverPositionMixin } from './vaadin-popover-position-mixin.js';
|
|
23
24
|
import { PopoverTargetMixin } from './vaadin-popover-target-mixin.js';
|
|
@@ -148,6 +149,18 @@ class PopoverOpenedStateController {
|
|
|
148
149
|
}
|
|
149
150
|
}
|
|
150
151
|
|
|
152
|
+
/**
|
|
153
|
+
* Returns true if the popover overlay is the last one in the opened overlays stack, ignoring tooltips.
|
|
154
|
+
* @param {HTMLElement} overlay
|
|
155
|
+
* @return {boolean}
|
|
156
|
+
* @protected
|
|
157
|
+
*/
|
|
158
|
+
const isLastOverlay = (overlay) => {
|
|
159
|
+
// Ignore tooltips, popovers should still close when a tooltip is present
|
|
160
|
+
const filter = (o) => o.localName !== 'vaadin-tooltip-overlay';
|
|
161
|
+
return isLastOverlayBase(overlay, filter);
|
|
162
|
+
};
|
|
163
|
+
|
|
151
164
|
/**
|
|
152
165
|
* `<vaadin-popover>` is a Web Component for creating overlays
|
|
153
166
|
* that are positioned next to specified DOM element (target).
|
|
@@ -203,7 +216,7 @@ class PopoverOpenedStateController {
|
|
|
203
216
|
* @mixes ThemePropertyMixin
|
|
204
217
|
*/
|
|
205
218
|
class Popover extends PopoverPositionMixin(
|
|
206
|
-
PopoverTargetMixin(OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolylitMixin(LitElement))))),
|
|
219
|
+
PopoverTargetMixin(OverlayClassMixin(ThemePropertyMixin(ElementMixin(CSSInjectionMixin(PolylitMixin(LitElement)))))),
|
|
207
220
|
) {
|
|
208
221
|
static get is() {
|
|
209
222
|
return 'vaadin-popover';
|
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-alpha4",
|
|
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-alpha4/#/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",
|
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-alpha4",
|
|
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-alpha4/#/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
|
{
|