@vaadin/tooltip
Advanced tools
Comparing version 23.3.0-alpha1 to 23.3.0-alpha2
{ | ||
"name": "@vaadin/tooltip", | ||
"version": "23.3.0-alpha1", | ||
"version": "23.3.0-alpha2", | ||
"publishConfig": { | ||
@@ -38,7 +38,7 @@ "access": "public" | ||
"@polymer/polymer": "^3.0.0", | ||
"@vaadin/component-base": "23.3.0-alpha1", | ||
"@vaadin/vaadin-lumo-styles": "23.3.0-alpha1", | ||
"@vaadin/vaadin-material-styles": "23.3.0-alpha1", | ||
"@vaadin/vaadin-overlay": "23.3.0-alpha1", | ||
"@vaadin/vaadin-themable-mixin": "23.3.0-alpha1" | ||
"@vaadin/component-base": "23.3.0-alpha2", | ||
"@vaadin/vaadin-lumo-styles": "23.3.0-alpha2", | ||
"@vaadin/vaadin-material-styles": "23.3.0-alpha2", | ||
"@vaadin/vaadin-overlay": "23.3.0-alpha2", | ||
"@vaadin/vaadin-themable-mixin": "23.3.0-alpha2" | ||
}, | ||
@@ -54,3 +54,3 @@ "devDependencies": { | ||
], | ||
"gitHead": "beabc527d4b1274eb798ff701d406fed45cfe638" | ||
"gitHead": "ae61027c62ffa7f7d70cfc50e43f333addfc74b6" | ||
} |
@@ -67,2 +67,13 @@ /** | ||
/** @protected */ | ||
ready() { | ||
super.ready(); | ||
// When setting `manual` and `opened` attributes, the overlay is already moved to body | ||
// by the time when `ready()` callback of the `vaadin-tooltip` is executed by Polymer, | ||
// so querySelector() would return null. So we use this workaround to set properties. | ||
this.owner = this.__dataHost; | ||
this.owner._overlayElement = this; | ||
} | ||
requestContentUpdate() { | ||
@@ -69,0 +80,0 @@ super.requestContentUpdate(); |
@@ -81,4 +81,5 @@ /** | ||
/** | ||
* Object with properties passed to `textGenerator` | ||
* function to be used for generating tooltip text. | ||
* Object with properties passed to `generator` and | ||
* `shouldShow` functions for generating tooltip text | ||
* or detecting whether to show the tooltip or not. | ||
*/ | ||
@@ -139,6 +140,7 @@ context: Record<string, unknown>; | ||
* called every time the tooltip is about to be shown on hover and focus. | ||
* The function accepts a reference to the target element as a parameter. | ||
* The function takes two parameters: `target` and `context`, which contain | ||
* values of the corresponding tooltip properties at the time of calling. | ||
* The tooltip is only shown when the function invocation returns `true`. | ||
*/ | ||
shouldShow: (target: HTMLElement) => boolean; | ||
shouldShow: (target: HTMLElement, context?: Record<string, unknown>) => boolean; | ||
@@ -163,3 +165,3 @@ /** | ||
*/ | ||
textGenerator: (context: Record<string, unknown>) => string; | ||
generator: (context: Record<string, unknown>) => string; | ||
} | ||
@@ -166,0 +168,0 @@ |
@@ -92,2 +92,3 @@ /** | ||
vertical-align="[[__computeVerticalAlign(position)]]" | ||
on-mouseleave="__onOverlayMouseLeave" | ||
modeless | ||
@@ -101,4 +102,5 @@ ></vaadin-tooltip-overlay> | ||
/** | ||
* Object with properties passed to `textGenerator` | ||
* function to be used for generating tooltip text. | ||
* Object with properties passed to `generator` and | ||
* `shouldShow` functions for generating tooltip text | ||
* or detecting whether to show the tooltip or not. | ||
*/ | ||
@@ -182,3 +184,4 @@ context: { | ||
* called every time the tooltip is about to be shown on hover and focus. | ||
* The function accepts a reference to the target element as a parameter. | ||
* The function takes two parameters: `target` and `context`, which contain | ||
* values of the corresponding tooltip properties at the time of calling. | ||
* The tooltip is only shown when the function invocation returns `true`. | ||
@@ -189,3 +192,3 @@ */ | ||
value: () => { | ||
return (_target) => true; | ||
return (_target, _context) => true; | ||
}, | ||
@@ -218,3 +221,3 @@ }, | ||
*/ | ||
textGenerator: { | ||
generator: { | ||
type: Object, | ||
@@ -245,3 +248,3 @@ }, | ||
static get observers() { | ||
return ['__textGeneratorChanged(_overlayElement, textGenerator, context)']; | ||
return ['__generatorChanged(_overlayElement, generator, context)']; | ||
} | ||
@@ -301,10 +304,2 @@ | ||
/** @protected */ | ||
ready() { | ||
super.ready(); | ||
this._overlayElement = this.shadowRoot.querySelector('vaadin-tooltip-overlay'); | ||
this._overlayElement.owner = this; | ||
} | ||
/** @protected */ | ||
disconnectedCallback() { | ||
@@ -345,3 +340,3 @@ super.disconnectedCallback(); | ||
__tooltipRenderer(root) { | ||
root.textContent = typeof this.textGenerator === 'function' ? this.textGenerator(this.context) : this.text; | ||
root.textContent = typeof this.generator === 'function' ? this.generator(this.context) : this.text; | ||
} | ||
@@ -392,3 +387,6 @@ | ||
this.__targetVisibilityObserver.observe(target); | ||
// Wait before observing to avoid Chrome issue. | ||
requestAnimationFrame(() => { | ||
this.__targetVisibilityObserver.observe(target); | ||
}); | ||
@@ -401,2 +399,6 @@ addValueToAttribute(target, 'aria-describedby', this._uniqueId); | ||
__onFocusin(event) { | ||
if (this.manual) { | ||
return; | ||
} | ||
// Only open on keyboard focus. | ||
@@ -412,3 +414,3 @@ if (!isKeyboardActive()) { | ||
if (typeof this.shouldShow === 'function' && this.shouldShow(this.target) !== true) { | ||
if (!this.__isShouldShow()) { | ||
return; | ||
@@ -426,2 +428,6 @@ } | ||
__onFocusout(event) { | ||
if (this.manual) { | ||
return; | ||
} | ||
// Do not close when moving focus within a component. | ||
@@ -454,6 +460,10 @@ if (this.target.contains(event.relatedTarget)) { | ||
__onMouseEnter() { | ||
if (typeof this.shouldShow === 'function' && this.shouldShow(this.target) !== true) { | ||
if (this.manual) { | ||
return; | ||
} | ||
if (!this.__isShouldShow()) { | ||
return; | ||
} | ||
if (this.__hoverInside) { | ||
@@ -472,3 +482,21 @@ // Already hovering inside the element, do nothing. | ||
/** @private */ | ||
__onMouseLeave() { | ||
__onMouseLeave(event) { | ||
if (event.relatedTarget !== this._overlayElement) { | ||
this.__handleMouseLeave(); | ||
} | ||
} | ||
/** @private */ | ||
__onOverlayMouseLeave(event) { | ||
if (event.relatedTarget !== this.target) { | ||
this.__handleMouseLeave(); | ||
} | ||
} | ||
/** @private */ | ||
__handleMouseLeave() { | ||
if (this.manual) { | ||
return; | ||
} | ||
this.__hoverInside = false; | ||
@@ -498,2 +526,11 @@ | ||
/** @private */ | ||
__isShouldShow() { | ||
if (typeof this.shouldShow === 'function' && this.shouldShow(this.target, this.context) !== true) { | ||
return false; | ||
} | ||
return true; | ||
} | ||
/** | ||
@@ -650,9 +687,9 @@ * Schedule opening the tooltip. | ||
/** @private */ | ||
__textGeneratorChanged(overlayElement, textGenerator, context) { | ||
__generatorChanged(overlayElement, generator, context) { | ||
if (overlayElement) { | ||
if (textGenerator !== this.__oldTextGenerator || context !== this.__oldContext) { | ||
if (generator !== this.__oldTextGenerator || context !== this.__oldContext) { | ||
overlayElement.requestContentUpdate(); | ||
} | ||
this.__oldTextGenerator = textGenerator; | ||
this.__oldTextGenerator = generator; | ||
this.__oldContext = context; | ||
@@ -659,0 +696,0 @@ } |
{ | ||
"$schema": "https://json.schemastore.org/web-types", | ||
"name": "@vaadin/tooltip", | ||
"version": "23.3.0-alpha1", | ||
"version": "23.3.0-alpha2", | ||
"description-markup": "markdown", | ||
@@ -11,3 +11,3 @@ "contributions": { | ||
"name": "vaadin-tooltip", | ||
"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/23.3.0-alpha1/#/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.", | ||
"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/23.3.0-alpha2/#/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.", | ||
"attributes": [ | ||
@@ -118,3 +118,3 @@ { | ||
"name": "context", | ||
"description": "Object with properties passed to `textGenerator`\nfunction to be used for generating tooltip text.", | ||
"description": "Object with properties passed to `generator` and\n`shouldShow` functions for generating tooltip text\nor detecting whether to show the tooltip or not.", | ||
"value": { | ||
@@ -207,3 +207,3 @@ "type": [ | ||
"name": "shouldShow", | ||
"description": "Function used to detect whether to show the tooltip based on a condition,\ncalled every time the tooltip is about to be shown on hover and focus.\nThe function accepts a reference to the target element as a parameter.\nThe tooltip is only shown when the function invocation returns `true`.", | ||
"description": "Function used to detect whether to show the tooltip based on a condition,\ncalled every time the tooltip is about to be shown on hover and focus.\nThe function takes two parameters: `target` and `context`, which contain\nvalues of the corresponding tooltip properties at the time of calling.\nThe tooltip is only shown when the function invocation returns `true`.", | ||
"value": { | ||
@@ -240,3 +240,3 @@ "type": [ | ||
{ | ||
"name": "textGenerator", | ||
"name": "generator", | ||
"description": "Function used to generate the tooltip content.\nWhen provided, it overrides the `text` property.\nUse the `context` property to provide argument\nthat can be passed to the generator function.", | ||
@@ -243,0 +243,0 @@ "value": { |
{ | ||
"$schema": "https://json.schemastore.org/web-types", | ||
"name": "@vaadin/tooltip", | ||
"version": "23.3.0-alpha1", | ||
"version": "23.3.0-alpha2", | ||
"description-markup": "markdown", | ||
@@ -19,3 +19,3 @@ "framework": "lit", | ||
"name": "vaadin-tooltip", | ||
"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/23.3.0-alpha1/#/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.", | ||
"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/23.3.0-alpha2/#/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.", | ||
"extension": true, | ||
@@ -39,3 +39,3 @@ "attributes": [ | ||
"name": ".context", | ||
"description": "Object with properties passed to `textGenerator`\nfunction to be used for generating tooltip text.", | ||
"description": "Object with properties passed to `generator` and\n`shouldShow` functions for generating tooltip text\nor detecting whether to show the tooltip or not.", | ||
"value": { | ||
@@ -82,3 +82,3 @@ "kind": "expression" | ||
"name": ".shouldShow", | ||
"description": "Function used to detect whether to show the tooltip based on a condition,\ncalled every time the tooltip is about to be shown on hover and focus.\nThe function accepts a reference to the target element as a parameter.\nThe tooltip is only shown when the function invocation returns `true`.", | ||
"description": "Function used to detect whether to show the tooltip based on a condition,\ncalled every time the tooltip is about to be shown on hover and focus.\nThe function takes two parameters: `target` and `context`, which contain\nvalues of the corresponding tooltip properties at the time of calling.\nThe tooltip is only shown when the function invocation returns `true`.", | ||
"value": { | ||
@@ -103,3 +103,3 @@ "kind": "expression" | ||
{ | ||
"name": ".textGenerator", | ||
"name": ".generator", | ||
"description": "Function used to generate the tooltip content.\nWhen provided, it overrides the `text` property.\nUse the `context` property to provide argument\nthat can be passed to the generator function.", | ||
@@ -106,0 +106,0 @@ "value": { |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
60576
1282
+ Added@vaadin/component-base@23.3.0-alpha2(transitive)
+ Added@vaadin/icon@23.3.0-alpha2(transitive)
+ Added@vaadin/vaadin-lumo-styles@23.3.0-alpha2(transitive)
+ Added@vaadin/vaadin-material-styles@23.3.0-alpha2(transitive)
+ Added@vaadin/vaadin-overlay@23.3.0-alpha2(transitive)
+ Added@vaadin/vaadin-themable-mixin@23.3.0-alpha2(transitive)
- Removed@vaadin/component-base@23.3.0-alpha1(transitive)
- Removed@vaadin/icon@23.3.0-alpha1(transitive)
- Removed@vaadin/vaadin-lumo-styles@23.3.0-alpha1(transitive)
- Removed@vaadin/vaadin-material-styles@23.3.0-alpha1(transitive)
- Removed@vaadin/vaadin-overlay@23.3.0-alpha1(transitive)
- Removed@vaadin/vaadin-themable-mixin@23.3.0-alpha1(transitive)