@vaadin/popover 25.0.0-alpha2 → 25.0.0-alpha20
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 +11 -12
- package/src/lit/renderer-directives.d.ts +2 -1
- package/src/lit/renderer-directives.js +2 -1
- package/src/styles/vaadin-popover-overlay-base-styles.d.ts +8 -0
- package/src/styles/vaadin-popover-overlay-base-styles.js +211 -0
- package/src/vaadin-popover-overlay-mixin.js +0 -58
- package/src/vaadin-popover-overlay.js +71 -71
- package/src/vaadin-popover.d.ts +31 -38
- package/src/vaadin-popover.js +161 -132
- package/vaadin-popover.js +1 -1
- package/web-types.json +50 -50
- package/web-types.lit.json +23 -23
- package/theme/lumo/vaadin-popover-styles.d.ts +0 -4
- package/theme/lumo/vaadin-popover-styles.js +0 -111
- package/theme/lumo/vaadin-popover.d.ts +0 -2
- package/theme/lumo/vaadin-popover.js +0 -2
package/web-types.json
CHANGED
|
@@ -1,26 +1,15 @@
|
|
|
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-alpha20",
|
|
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\
|
|
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\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\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\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
|
-
{
|
|
14
|
-
"name": "overlay-class",
|
|
15
|
-
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
16
|
-
"value": {
|
|
17
|
-
"type": [
|
|
18
|
-
"string",
|
|
19
|
-
"null",
|
|
20
|
-
"undefined"
|
|
21
|
-
]
|
|
22
|
-
}
|
|
23
|
-
},
|
|
24
13
|
{
|
|
25
14
|
"name": "position",
|
|
26
15
|
"description": "Position of the overlay with respect to the target.\nSupported values: `top-start`, `top`, `top-end`,\n`bottom-start`, `bottom`, `bottom-end`, `start-top`,\n`start`, `start-bottom`, `end-top`, `end`, `end-bottom`.",
|
|
@@ -45,7 +34,7 @@
|
|
|
45
34
|
},
|
|
46
35
|
{
|
|
47
36
|
"name": "accessible-name",
|
|
48
|
-
"description": "String used to label the
|
|
37
|
+
"description": "String used to label the popover to screen reader users.",
|
|
49
38
|
"value": {
|
|
50
39
|
"type": [
|
|
51
40
|
"string",
|
|
@@ -56,7 +45,7 @@
|
|
|
56
45
|
},
|
|
57
46
|
{
|
|
58
47
|
"name": "accessible-name-ref",
|
|
59
|
-
"description": "Id of the element used as label of the
|
|
48
|
+
"description": "Id of the element used as label of the popover to screen reader users.",
|
|
60
49
|
"value": {
|
|
61
50
|
"type": [
|
|
62
51
|
"string",
|
|
@@ -77,8 +66,8 @@
|
|
|
77
66
|
}
|
|
78
67
|
},
|
|
79
68
|
{
|
|
80
|
-
"name": "
|
|
81
|
-
"description": "
|
|
69
|
+
"name": "height",
|
|
70
|
+
"description": "Set the height of the popover.\nIf a unitless number is provided, pixels are assumed.",
|
|
82
71
|
"value": {
|
|
83
72
|
"type": [
|
|
84
73
|
"string",
|
|
@@ -88,8 +77,8 @@
|
|
|
88
77
|
}
|
|
89
78
|
},
|
|
90
79
|
{
|
|
91
|
-
"name": "
|
|
92
|
-
"description": "
|
|
80
|
+
"name": "width",
|
|
81
|
+
"description": "Set the width of the popover.\nIf a unitless number is provided, pixels are assumed.",
|
|
93
82
|
"value": {
|
|
94
83
|
"type": [
|
|
95
84
|
"string",
|
|
@@ -133,7 +122,7 @@
|
|
|
133
122
|
},
|
|
134
123
|
{
|
|
135
124
|
"name": "opened",
|
|
136
|
-
"description": "True if the popover
|
|
125
|
+
"description": "True if the popover is visible and available for interaction.",
|
|
137
126
|
"value": {
|
|
138
127
|
"type": [
|
|
139
128
|
"boolean",
|
|
@@ -142,9 +131,20 @@
|
|
|
142
131
|
]
|
|
143
132
|
}
|
|
144
133
|
},
|
|
134
|
+
{
|
|
135
|
+
"name": "role",
|
|
136
|
+
"description": "The `role` attribute value to be set on the popover.\nWhen not specified, defaults to 'dialog'.",
|
|
137
|
+
"value": {
|
|
138
|
+
"type": [
|
|
139
|
+
"string",
|
|
140
|
+
"null",
|
|
141
|
+
"undefined"
|
|
142
|
+
]
|
|
143
|
+
}
|
|
144
|
+
},
|
|
145
145
|
{
|
|
146
146
|
"name": "overlay-role",
|
|
147
|
-
"description": "The `role` attribute value to be set on the
|
|
147
|
+
"description": "The `role` attribute value to be set on the popover.",
|
|
148
148
|
"value": {
|
|
149
149
|
"type": [
|
|
150
150
|
"string",
|
|
@@ -155,7 +155,7 @@
|
|
|
155
155
|
},
|
|
156
156
|
{
|
|
157
157
|
"name": "modal",
|
|
158
|
-
"description": "When true, the popover prevents interacting with background elements\nby setting `pointer-events` style on the document body to `none`.\nThis also enables trapping focus inside the
|
|
158
|
+
"description": "When true, the popover prevents interacting with background elements\nby setting `pointer-events` style on the document body to `none`.\nThis also enables trapping focus inside the popover.",
|
|
159
159
|
"value": {
|
|
160
160
|
"type": [
|
|
161
161
|
"boolean",
|
|
@@ -166,7 +166,7 @@
|
|
|
166
166
|
},
|
|
167
167
|
{
|
|
168
168
|
"name": "no-close-on-outside-click",
|
|
169
|
-
"description": "Set to true to disable closing popover
|
|
169
|
+
"description": "Set to true to disable closing popover on outside click.",
|
|
170
170
|
"value": {
|
|
171
171
|
"type": [
|
|
172
172
|
"boolean",
|
|
@@ -177,7 +177,7 @@
|
|
|
177
177
|
},
|
|
178
178
|
{
|
|
179
179
|
"name": "no-close-on-esc",
|
|
180
|
-
"description": "Set to true to disable closing popover
|
|
180
|
+
"description": "Set to true to disable closing popover on Escape press.",
|
|
181
181
|
"value": {
|
|
182
182
|
"type": [
|
|
183
183
|
"boolean",
|
|
@@ -188,7 +188,7 @@
|
|
|
188
188
|
},
|
|
189
189
|
{
|
|
190
190
|
"name": "with-backdrop",
|
|
191
|
-
"description": "When true, the
|
|
191
|
+
"description": "When true, the popover has a backdrop (modality curtain) on top of the\nunderlying page content, covering the whole viewport.",
|
|
192
192
|
"value": {
|
|
193
193
|
"type": [
|
|
194
194
|
"boolean",
|
|
@@ -211,17 +211,6 @@
|
|
|
211
211
|
],
|
|
212
212
|
"js": {
|
|
213
213
|
"properties": [
|
|
214
|
-
{
|
|
215
|
-
"name": "overlayClass",
|
|
216
|
-
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
217
|
-
"value": {
|
|
218
|
-
"type": [
|
|
219
|
-
"string",
|
|
220
|
-
"null",
|
|
221
|
-
"undefined"
|
|
222
|
-
]
|
|
223
|
-
}
|
|
224
|
-
},
|
|
225
214
|
{
|
|
226
215
|
"name": "position",
|
|
227
216
|
"description": "Position of the overlay with respect to the target.\nSupported values: `top-start`, `top`, `top-end`,\n`bottom-start`, `bottom`, `bottom-end`, `start-top`,\n`start`, `start-bottom`, `end-top`, `end`, `end-bottom`.",
|
|
@@ -257,7 +246,7 @@
|
|
|
257
246
|
},
|
|
258
247
|
{
|
|
259
248
|
"name": "accessibleName",
|
|
260
|
-
"description": "String used to label the
|
|
249
|
+
"description": "String used to label the popover to screen reader users.",
|
|
261
250
|
"value": {
|
|
262
251
|
"type": [
|
|
263
252
|
"string",
|
|
@@ -268,7 +257,7 @@
|
|
|
268
257
|
},
|
|
269
258
|
{
|
|
270
259
|
"name": "accessibleNameRef",
|
|
271
|
-
"description": "Id of the element used as label of the
|
|
260
|
+
"description": "Id of the element used as label of the popover to screen reader users.",
|
|
272
261
|
"value": {
|
|
273
262
|
"type": [
|
|
274
263
|
"string",
|
|
@@ -289,8 +278,8 @@
|
|
|
289
278
|
}
|
|
290
279
|
},
|
|
291
280
|
{
|
|
292
|
-
"name": "
|
|
293
|
-
"description": "
|
|
281
|
+
"name": "height",
|
|
282
|
+
"description": "Set the height of the popover.\nIf a unitless number is provided, pixels are assumed.",
|
|
294
283
|
"value": {
|
|
295
284
|
"type": [
|
|
296
285
|
"string",
|
|
@@ -300,8 +289,8 @@
|
|
|
300
289
|
}
|
|
301
290
|
},
|
|
302
291
|
{
|
|
303
|
-
"name": "
|
|
304
|
-
"description": "
|
|
292
|
+
"name": "width",
|
|
293
|
+
"description": "Set the width of the popover.\nIf a unitless number is provided, pixels are assumed.",
|
|
305
294
|
"value": {
|
|
306
295
|
"type": [
|
|
307
296
|
"string",
|
|
@@ -345,7 +334,7 @@
|
|
|
345
334
|
},
|
|
346
335
|
{
|
|
347
336
|
"name": "opened",
|
|
348
|
-
"description": "True if the popover
|
|
337
|
+
"description": "True if the popover is visible and available for interaction.",
|
|
349
338
|
"value": {
|
|
350
339
|
"type": [
|
|
351
340
|
"boolean",
|
|
@@ -354,9 +343,20 @@
|
|
|
354
343
|
]
|
|
355
344
|
}
|
|
356
345
|
},
|
|
346
|
+
{
|
|
347
|
+
"name": "role",
|
|
348
|
+
"description": "The `role` attribute value to be set on the popover.\nWhen not specified, defaults to 'dialog'.",
|
|
349
|
+
"value": {
|
|
350
|
+
"type": [
|
|
351
|
+
"string",
|
|
352
|
+
"null",
|
|
353
|
+
"undefined"
|
|
354
|
+
]
|
|
355
|
+
}
|
|
356
|
+
},
|
|
357
357
|
{
|
|
358
358
|
"name": "overlayRole",
|
|
359
|
-
"description": "The `role` attribute value to be set on the
|
|
359
|
+
"description": "The `role` attribute value to be set on the popover.",
|
|
360
360
|
"value": {
|
|
361
361
|
"type": [
|
|
362
362
|
"string",
|
|
@@ -367,7 +367,7 @@
|
|
|
367
367
|
},
|
|
368
368
|
{
|
|
369
369
|
"name": "renderer",
|
|
370
|
-
"description": "Custom function for rendering the content of the
|
|
370
|
+
"description": "Custom function for rendering the content of the popover.\nReceives two arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `popover` The reference to the `vaadin-popover` element.",
|
|
371
371
|
"value": {
|
|
372
372
|
"type": [
|
|
373
373
|
"Object",
|
|
@@ -378,7 +378,7 @@
|
|
|
378
378
|
},
|
|
379
379
|
{
|
|
380
380
|
"name": "modal",
|
|
381
|
-
"description": "When true, the popover prevents interacting with background elements\nby setting `pointer-events` style on the document body to `none`.\nThis also enables trapping focus inside the
|
|
381
|
+
"description": "When true, the popover prevents interacting with background elements\nby setting `pointer-events` style on the document body to `none`.\nThis also enables trapping focus inside the popover.",
|
|
382
382
|
"value": {
|
|
383
383
|
"type": [
|
|
384
384
|
"boolean",
|
|
@@ -389,7 +389,7 @@
|
|
|
389
389
|
},
|
|
390
390
|
{
|
|
391
391
|
"name": "noCloseOnOutsideClick",
|
|
392
|
-
"description": "Set to true to disable closing popover
|
|
392
|
+
"description": "Set to true to disable closing popover on outside click.",
|
|
393
393
|
"value": {
|
|
394
394
|
"type": [
|
|
395
395
|
"boolean",
|
|
@@ -400,7 +400,7 @@
|
|
|
400
400
|
},
|
|
401
401
|
{
|
|
402
402
|
"name": "noCloseOnEsc",
|
|
403
|
-
"description": "Set to true to disable closing popover
|
|
403
|
+
"description": "Set to true to disable closing popover on Escape press.",
|
|
404
404
|
"value": {
|
|
405
405
|
"type": [
|
|
406
406
|
"boolean",
|
|
@@ -411,7 +411,7 @@
|
|
|
411
411
|
},
|
|
412
412
|
{
|
|
413
413
|
"name": "trigger",
|
|
414
|
-
"description": "Popover trigger mode, used to configure how the
|
|
414
|
+
"description": "Popover trigger mode, used to configure how the popover is opened or closed.\nCould be set to multiple by providing an array, e.g. `trigger = ['hover', 'focus']`.\n\nSupported values:\n- `click` (default) - opens and closes on target click.\n- `hover` - opens on target mouseenter, closes on target mouseleave. Moving mouse\nto the popover content keeps the popover opened.\n- `focus` - opens on target focus, closes on target blur. Moving focus to the\npopover content keeps the popover opened.\n\nIn addition to the behavior specified by `trigger`, the popover can be closed by:\n- pressing Escape key (unless `noCloseOnEsc` property is true)\n- outside click (unless `noCloseOnOutsideClick` property is true)\n\nWhen setting `trigger` property to `null`, `undefined` or empty array, the popover\ncan be only opened programmatically by changing `opened` property. Note, closing\non Escape press or outside click is still allowed unless explicitly disabled.",
|
|
415
415
|
"value": {
|
|
416
416
|
"type": [
|
|
417
417
|
"Array",
|
|
@@ -422,7 +422,7 @@
|
|
|
422
422
|
},
|
|
423
423
|
{
|
|
424
424
|
"name": "withBackdrop",
|
|
425
|
-
"description": "When true, the
|
|
425
|
+
"description": "When true, the popover has a backdrop (modality curtain) on top of the\nunderlying page content, covering the whole viewport.",
|
|
426
426
|
"value": {
|
|
427
427
|
"type": [
|
|
428
428
|
"boolean",
|
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-alpha20",
|
|
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\
|
|
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\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\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\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
|
{
|
|
@@ -28,42 +28,35 @@
|
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
30
|
"name": "?opened",
|
|
31
|
-
"description": "True if the popover
|
|
31
|
+
"description": "True if the popover is visible and available for interaction.",
|
|
32
32
|
"value": {
|
|
33
33
|
"kind": "expression"
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
36
|
{
|
|
37
37
|
"name": "?modal",
|
|
38
|
-
"description": "When true, the popover prevents interacting with background elements\nby setting `pointer-events` style on the document body to `none`.\nThis also enables trapping focus inside the
|
|
38
|
+
"description": "When true, the popover prevents interacting with background elements\nby setting `pointer-events` style on the document body to `none`.\nThis also enables trapping focus inside the popover.",
|
|
39
39
|
"value": {
|
|
40
40
|
"kind": "expression"
|
|
41
41
|
}
|
|
42
42
|
},
|
|
43
43
|
{
|
|
44
44
|
"name": "?noCloseOnOutsideClick",
|
|
45
|
-
"description": "Set to true to disable closing popover
|
|
45
|
+
"description": "Set to true to disable closing popover on outside click.",
|
|
46
46
|
"value": {
|
|
47
47
|
"kind": "expression"
|
|
48
48
|
}
|
|
49
49
|
},
|
|
50
50
|
{
|
|
51
51
|
"name": "?noCloseOnEsc",
|
|
52
|
-
"description": "Set to true to disable closing popover
|
|
52
|
+
"description": "Set to true to disable closing popover on Escape press.",
|
|
53
53
|
"value": {
|
|
54
54
|
"kind": "expression"
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
58
|
"name": "?withBackdrop",
|
|
59
|
-
"description": "When true, the
|
|
60
|
-
"value": {
|
|
61
|
-
"kind": "expression"
|
|
62
|
-
}
|
|
63
|
-
},
|
|
64
|
-
{
|
|
65
|
-
"name": ".overlayClass",
|
|
66
|
-
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
59
|
+
"description": "When true, the popover has a backdrop (modality curtain) on top of the\nunderlying page content, covering the whole viewport.",
|
|
67
60
|
"value": {
|
|
68
61
|
"kind": "expression"
|
|
69
62
|
}
|
|
@@ -91,28 +84,28 @@
|
|
|
91
84
|
},
|
|
92
85
|
{
|
|
93
86
|
"name": ".accessibleName",
|
|
94
|
-
"description": "String used to label the
|
|
87
|
+
"description": "String used to label the popover to screen reader users.",
|
|
95
88
|
"value": {
|
|
96
89
|
"kind": "expression"
|
|
97
90
|
}
|
|
98
91
|
},
|
|
99
92
|
{
|
|
100
93
|
"name": ".accessibleNameRef",
|
|
101
|
-
"description": "Id of the element used as label of the
|
|
94
|
+
"description": "Id of the element used as label of the popover to screen reader users.",
|
|
102
95
|
"value": {
|
|
103
96
|
"kind": "expression"
|
|
104
97
|
}
|
|
105
98
|
},
|
|
106
99
|
{
|
|
107
|
-
"name": ".
|
|
108
|
-
"description": "
|
|
100
|
+
"name": ".height",
|
|
101
|
+
"description": "Set the height of the popover.\nIf a unitless number is provided, pixels are assumed.",
|
|
109
102
|
"value": {
|
|
110
103
|
"kind": "expression"
|
|
111
104
|
}
|
|
112
105
|
},
|
|
113
106
|
{
|
|
114
|
-
"name": ".
|
|
115
|
-
"description": "
|
|
107
|
+
"name": ".width",
|
|
108
|
+
"description": "Set the width of the popover.\nIf a unitless number is provided, pixels are assumed.",
|
|
116
109
|
"value": {
|
|
117
110
|
"kind": "expression"
|
|
118
111
|
}
|
|
@@ -138,23 +131,30 @@
|
|
|
138
131
|
"kind": "expression"
|
|
139
132
|
}
|
|
140
133
|
},
|
|
134
|
+
{
|
|
135
|
+
"name": ".role",
|
|
136
|
+
"description": "The `role` attribute value to be set on the popover.\nWhen not specified, defaults to 'dialog'.",
|
|
137
|
+
"value": {
|
|
138
|
+
"kind": "expression"
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
141
|
{
|
|
142
142
|
"name": ".overlayRole",
|
|
143
|
-
"description": "The `role` attribute value to be set on the
|
|
143
|
+
"description": "The `role` attribute value to be set on the popover.",
|
|
144
144
|
"value": {
|
|
145
145
|
"kind": "expression"
|
|
146
146
|
}
|
|
147
147
|
},
|
|
148
148
|
{
|
|
149
149
|
"name": ".renderer",
|
|
150
|
-
"description": "Custom function for rendering the content of the
|
|
150
|
+
"description": "Custom function for rendering the content of the popover.\nReceives two arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `popover` The reference to the `vaadin-popover` element.",
|
|
151
151
|
"value": {
|
|
152
152
|
"kind": "expression"
|
|
153
153
|
}
|
|
154
154
|
},
|
|
155
155
|
{
|
|
156
156
|
"name": ".trigger",
|
|
157
|
-
"description": "Popover trigger mode, used to configure how the
|
|
157
|
+
"description": "Popover trigger mode, used to configure how the popover is opened or closed.\nCould be set to multiple by providing an array, e.g. `trigger = ['hover', 'focus']`.\n\nSupported values:\n- `click` (default) - opens and closes on target click.\n- `hover` - opens on target mouseenter, closes on target mouseleave. Moving mouse\nto the popover content keeps the popover opened.\n- `focus` - opens on target focus, closes on target blur. Moving focus to the\npopover content keeps the popover opened.\n\nIn addition to the behavior specified by `trigger`, the popover can be closed by:\n- pressing Escape key (unless `noCloseOnEsc` property is true)\n- outside click (unless `noCloseOnOutsideClick` property is true)\n\nWhen setting `trigger` property to `null`, `undefined` or empty array, the popover\ncan be only opened programmatically by changing `opened` property. Note, closing\non Escape press or outside click is still allowed unless explicitly disabled.",
|
|
158
158
|
"value": {
|
|
159
159
|
"kind": "expression"
|
|
160
160
|
}
|
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
import '@vaadin/vaadin-lumo-styles/color.js';
|
|
2
|
-
import '@vaadin/vaadin-lumo-styles/spacing.js';
|
|
3
|
-
import '@vaadin/vaadin-lumo-styles/style.js';
|
|
4
|
-
import '@vaadin/vaadin-lumo-styles/typography.js';
|
|
5
|
-
import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
|
|
6
|
-
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
7
|
-
|
|
8
|
-
const popoverOverlay = css`
|
|
9
|
-
:host {
|
|
10
|
-
--vaadin-popover-offset-top: var(--_vaadin-popover-default-offset);
|
|
11
|
-
--vaadin-popover-offset-bottom: var(--_vaadin-popover-default-offset);
|
|
12
|
-
--vaadin-popover-offset-start: var(--_vaadin-popover-default-offset);
|
|
13
|
-
--vaadin-popover-offset-end: var(--_vaadin-popover-default-offset);
|
|
14
|
-
--vaadin-popover-arrow-size: 0.5rem;
|
|
15
|
-
--_vaadin-popover-default-offset: var(--lumo-space-xs);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
[part='overlay'] {
|
|
19
|
-
outline: none;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
[part='content'] {
|
|
23
|
-
padding: var(--lumo-space-xs) var(--lumo-space-s);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
:host([theme~='no-padding']) [part='content'] {
|
|
27
|
-
padding: 0;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
:host([theme~='arrow']) {
|
|
31
|
-
--_vaadin-popover-default-offset: calc(var(--lumo-space-s) + var(--vaadin-popover-arrow-size) / 2);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
/* top / bottom position */
|
|
35
|
-
:host([theme~='arrow'][position^='top']) [part='arrow'],
|
|
36
|
-
:host([theme~='arrow'][position^='bottom']) [part='arrow'] {
|
|
37
|
-
border-left: var(--vaadin-popover-arrow-size) solid transparent;
|
|
38
|
-
border-right: var(--vaadin-popover-arrow-size) solid transparent;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
:host([theme~='arrow'][position^='bottom'][bottom-aligned]) [part='arrow'],
|
|
42
|
-
:host([theme~='arrow'][position^='top'][bottom-aligned]) [part='arrow'] {
|
|
43
|
-
bottom: calc(var(--vaadin-popover-arrow-size) * -1);
|
|
44
|
-
border-top: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
|
|
45
|
-
filter: drop-shadow(0 2px 1px var(--lumo-shade-10pct));
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
:host([theme~='arrow'][position^='bottom'][top-aligned]) [part='arrow'],
|
|
49
|
-
:host([theme~='arrow'][position^='top'][top-aligned]) [part='arrow'] {
|
|
50
|
-
top: calc(var(--vaadin-popover-arrow-size) * -1);
|
|
51
|
-
border-bottom: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
|
|
52
|
-
filter: drop-shadow(0 -2px 1px var(--lumo-shade-10pct));
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
:host([theme~='arrow'][position^='bottom'][start-aligned]) [part='arrow'],
|
|
56
|
-
:host([theme~='arrow'][position^='top'][start-aligned]) [part='arrow'] {
|
|
57
|
-
transform: translateX(-50%);
|
|
58
|
-
inset-inline-start: 1.5rem;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
:host([theme~='arrow'][position^='bottom'][end-aligned]) [part='arrow'],
|
|
62
|
-
:host([theme~='arrow'][position^='top'][end-aligned]) [part='arrow'] {
|
|
63
|
-
transform: translateX(50%);
|
|
64
|
-
inset-inline-end: 1.5rem;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
:host([theme~='arrow'][position^='bottom'][arrow-centered]) [part='arrow'],
|
|
68
|
-
:host([theme~='arrow'][position^='top'][arrow-centered]) [part='arrow'] {
|
|
69
|
-
transform: translateX(-50%);
|
|
70
|
-
inset-inline-start: 50%;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
/* start / end position */
|
|
74
|
-
:host([theme~='arrow'][position^='start']) [part='arrow'],
|
|
75
|
-
:host([theme~='arrow'][position^='end']) [part='arrow'] {
|
|
76
|
-
border-top: var(--vaadin-popover-arrow-size) solid transparent;
|
|
77
|
-
border-bottom: var(--vaadin-popover-arrow-size) solid transparent;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
:host([theme~='arrow'][position^='start'][start-aligned]) [part='arrow'],
|
|
81
|
-
:host([theme~='arrow'][position^='end'][start-aligned]) [part='arrow'] {
|
|
82
|
-
inset-inline-start: calc(var(--vaadin-popover-arrow-size) * -1);
|
|
83
|
-
border-right: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
|
|
84
|
-
filter: drop-shadow(-2px 0 1px var(--lumo-shade-10pct));
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
:host([theme~='arrow'][position^='start'][end-aligned]) [part='arrow'],
|
|
88
|
-
:host([theme~='arrow'][position^='end'][end-aligned]) [part='arrow'] {
|
|
89
|
-
inset-inline-end: calc(var(--vaadin-popover-arrow-size) * -1);
|
|
90
|
-
border-left: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
|
|
91
|
-
filter: drop-shadow(2px 0 1px var(--lumo-shade-10pct));
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
:host([theme~='arrow'][position^='start'][top-aligned]) [part='arrow'],
|
|
95
|
-
:host([theme~='arrow'][position^='end'][top-aligned]) [part='arrow'] {
|
|
96
|
-
top: 0.5rem;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
:host([theme~='arrow'][position='start'][top-aligned]) [part='arrow'],
|
|
100
|
-
:host([theme~='arrow'][position='end'][top-aligned]) [part='arrow'] {
|
|
101
|
-
top: 50%;
|
|
102
|
-
transform: translateY(-50%);
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
:host([theme~='arrow'][position^='start'][bottom-aligned]) [part='arrow'],
|
|
106
|
-
:host([theme~='arrow'][position^='end'][bottom-aligned]) [part='arrow'] {
|
|
107
|
-
bottom: 0.5rem;
|
|
108
|
-
}
|
|
109
|
-
`;
|
|
110
|
-
|
|
111
|
-
registerStyles('vaadin-popover-overlay', [overlay, popoverOverlay], { moduleId: 'lumo-popover-overlay' });
|