@vaadin/tooltip 23.3.3 → 24.0.0-alpha10
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 +7 -7
- package/src/vaadin-tooltip-overlay.js +1 -1
- package/src/vaadin-tooltip.d.ts +3 -2
- package/src/vaadin-tooltip.js +27 -28
- package/web-types.json +24 -2
- package/web-types.lit.json +9 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/tooltip",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "24.0.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,11 +35,11 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@polymer/polymer": "^3.0.0",
|
|
38
|
-
"@vaadin/component-base": "
|
|
39
|
-
"@vaadin/overlay": "
|
|
40
|
-
"@vaadin/vaadin-lumo-styles": "
|
|
41
|
-
"@vaadin/vaadin-material-styles": "
|
|
42
|
-
"@vaadin/vaadin-themable-mixin": "
|
|
38
|
+
"@vaadin/component-base": "24.0.0-alpha10",
|
|
39
|
+
"@vaadin/overlay": "24.0.0-alpha10",
|
|
40
|
+
"@vaadin/vaadin-lumo-styles": "24.0.0-alpha10",
|
|
41
|
+
"@vaadin/vaadin-material-styles": "24.0.0-alpha10",
|
|
42
|
+
"@vaadin/vaadin-themable-mixin": "24.0.0-alpha10"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@esm-bundle/chai": "^4.3.4",
|
|
@@ -50,5 +50,5 @@
|
|
|
50
50
|
"web-types.json",
|
|
51
51
|
"web-types.lit.json"
|
|
52
52
|
],
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "2e04534d8b47bcd216f89b5f849bafef1a73b174"
|
|
54
54
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2022 Vaadin Ltd.
|
|
3
|
+
* Copyright (c) 2022 - 2023 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
|
package/src/vaadin-tooltip.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2022 Vaadin Ltd.
|
|
3
|
+
* Copyright (c) 2022 - 2023 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
7
|
+
import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
|
|
7
8
|
import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
|
|
8
9
|
|
|
9
10
|
export type TooltipPosition =
|
|
@@ -58,7 +59,7 @@ export type TooltipPosition =
|
|
|
58
59
|
*
|
|
59
60
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
|
|
60
61
|
*/
|
|
61
|
-
declare class Tooltip extends ThemePropertyMixin(ElementMixin(HTMLElement)) {
|
|
62
|
+
declare class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(HTMLElement))) {
|
|
62
63
|
/**
|
|
63
64
|
* Sets the default focus delay to be used by all tooltip instances,
|
|
64
65
|
* except for those that have focus delay configured using property.
|
package/src/vaadin-tooltip.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2022 Vaadin Ltd.
|
|
3
|
+
* Copyright (c) 2022 - 2023 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import './vaadin-tooltip-overlay.js';
|
|
@@ -8,6 +8,7 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
|
8
8
|
import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
|
|
9
9
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
10
10
|
import { isKeyboardActive } from '@vaadin/component-base/src/focus-utils.js';
|
|
11
|
+
import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
|
|
11
12
|
import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
|
|
12
13
|
import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
|
|
13
14
|
|
|
@@ -31,6 +32,29 @@ class TooltipStateController {
|
|
|
31
32
|
this.host = host;
|
|
32
33
|
}
|
|
33
34
|
|
|
35
|
+
/** @private */
|
|
36
|
+
get openedProp() {
|
|
37
|
+
return this.host.manual ? 'opened' : '_autoOpened';
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/** @private */
|
|
41
|
+
get focusDelay() {
|
|
42
|
+
const tooltip = this.host;
|
|
43
|
+
return tooltip.focusDelay != null && tooltip.focusDelay > 0 ? tooltip.focusDelay : defaultFocusDelay;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/** @private */
|
|
47
|
+
get hoverDelay() {
|
|
48
|
+
const tooltip = this.host;
|
|
49
|
+
return tooltip.hoverDelay != null && tooltip.hoverDelay > 0 ? tooltip.hoverDelay : defaultHoverDelay;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/** @private */
|
|
53
|
+
get hideDelay() {
|
|
54
|
+
const tooltip = this.host;
|
|
55
|
+
return tooltip.hideDelay != null && tooltip.hideDelay > 0 ? tooltip.hideDelay : defaultHideDelay;
|
|
56
|
+
}
|
|
57
|
+
|
|
34
58
|
/**
|
|
35
59
|
* Schedule opening the tooltip.
|
|
36
60
|
* @param {Object} options
|
|
@@ -68,29 +92,6 @@ class TooltipStateController {
|
|
|
68
92
|
}
|
|
69
93
|
}
|
|
70
94
|
|
|
71
|
-
/** @private */
|
|
72
|
-
get openedProp() {
|
|
73
|
-
return this.host.manual ? 'opened' : '_autoOpened';
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
/** @private */
|
|
77
|
-
get focusDelay() {
|
|
78
|
-
const tooltip = this.host;
|
|
79
|
-
return tooltip.focusDelay != null && tooltip.focusDelay > 0 ? tooltip.focusDelay : defaultFocusDelay;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
/** @private */
|
|
83
|
-
get hoverDelay() {
|
|
84
|
-
const tooltip = this.host;
|
|
85
|
-
return tooltip.hoverDelay != null && tooltip.hoverDelay > 0 ? tooltip.hoverDelay : defaultHoverDelay;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
/** @private */
|
|
89
|
-
get hideDelay() {
|
|
90
|
-
const tooltip = this.host;
|
|
91
|
-
return tooltip.hideDelay != null && tooltip.hideDelay > 0 ? tooltip.hideDelay : defaultHideDelay;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
95
|
/** @private */
|
|
95
96
|
_isOpened() {
|
|
96
97
|
return this.host[this.openedProp];
|
|
@@ -231,9 +232,10 @@ class TooltipStateController {
|
|
|
231
232
|
*
|
|
232
233
|
* @extends HTMLElement
|
|
233
234
|
* @mixes ElementMixin
|
|
235
|
+
* @mixes OverlayClassMixin
|
|
234
236
|
* @mixes ThemePropertyMixin
|
|
235
237
|
*/
|
|
236
|
-
class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
|
|
238
|
+
class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolymerElement))) {
|
|
237
239
|
static get is() {
|
|
238
240
|
return 'vaadin-tooltip';
|
|
239
241
|
}
|
|
@@ -410,9 +412,6 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
|
|
|
410
412
|
computed: '__computePosition(position, _position)',
|
|
411
413
|
},
|
|
412
414
|
|
|
413
|
-
/** @protected */
|
|
414
|
-
_overlayElement: Object,
|
|
415
|
-
|
|
416
415
|
/** @private */
|
|
417
416
|
__isTargetHidden: {
|
|
418
417
|
type: Boolean,
|
package/web-types.json
CHANGED
|
@@ -1,15 +1,26 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/tooltip",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "24.0.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-tooltip",
|
|
11
|
-
"description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\n`<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/
|
|
11
|
+
"description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\n`<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-overlay) documentation\nfor `<vaadin-tooltip-overlay>` parts.\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-tooltip>` is\npropagated to the internal `<vaadin-tooltip-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-tooltip>` element:\n\nCustom CSS property | Description\n---------------------------------|-------------\n`--vaadin-tooltip-offset-top` | Used as an offset when the tooltip is aligned vertically below the target\n`--vaadin-tooltip-offset-bottom` | Used as an offset when the tooltip is aligned vertically above the target\n`--vaadin-tooltip-offset-start` | Used as an offset when the tooltip is aligned horizontally after the target\n`--vaadin-tooltip-offset-end` | Used as an offset when the tooltip is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/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
|
+
},
|
|
13
24
|
{
|
|
14
25
|
"name": "focus-delay",
|
|
15
26
|
"description": "The delay in milliseconds before the tooltip\nis opened on keyboard focus, when not in manual mode.",
|
|
@@ -112,6 +123,17 @@
|
|
|
112
123
|
],
|
|
113
124
|
"js": {
|
|
114
125
|
"properties": [
|
|
126
|
+
{
|
|
127
|
+
"name": "overlayClass",
|
|
128
|
+
"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.",
|
|
129
|
+
"value": {
|
|
130
|
+
"type": [
|
|
131
|
+
"string",
|
|
132
|
+
"null",
|
|
133
|
+
"undefined"
|
|
134
|
+
]
|
|
135
|
+
}
|
|
136
|
+
},
|
|
115
137
|
{
|
|
116
138
|
"name": "context",
|
|
117
139
|
"description": "Object with properties passed to `generator` and\n`shouldShow` functions for generating tooltip text\nor detecting whether to show the tooltip or not.",
|
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/tooltip",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "24.0.0-alpha10",
|
|
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-tooltip",
|
|
19
|
-
"description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\n`<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/
|
|
19
|
+
"description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\n`<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-overlay) documentation\nfor `<vaadin-tooltip-overlay>` parts.\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-tooltip>` is\npropagated to the internal `<vaadin-tooltip-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-tooltip>` element:\n\nCustom CSS property | Description\n---------------------------------|-------------\n`--vaadin-tooltip-offset-top` | Used as an offset when the tooltip is aligned vertically below the target\n`--vaadin-tooltip-offset-bottom` | Used as an offset when the tooltip is aligned vertically above the target\n`--vaadin-tooltip-offset-start` | Used as an offset when the tooltip is aligned horizontally after the target\n`--vaadin-tooltip-offset-end` | Used as an offset when the tooltip is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -33,6 +33,13 @@
|
|
|
33
33
|
"kind": "expression"
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
|
+
{
|
|
37
|
+
"name": ".overlayClass",
|
|
38
|
+
"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.",
|
|
39
|
+
"value": {
|
|
40
|
+
"kind": "expression"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
36
43
|
{
|
|
37
44
|
"name": ".context",
|
|
38
45
|
"description": "Object with properties passed to `generator` and\n`shouldShow` functions for generating tooltip text\nor detecting whether to show the tooltip or not.",
|