@kelvininc/ui-components
Version:
Kelvin UI Components
356 lines (355 loc) • 14.9 kB
JavaScript
import { Host, h } from "@stencil/core";
import { autoPlacement } from "@floating-ui/dom";
import { DEFAULT_AUTO_PLACEMENT_CONFIG, DEFAULT_DELAY_CONFIG, DEFAULT_POSITION_CONFIG } from "./tooltip.config";
import { isElementCollapsed } from "./tooltip.utils";
import { isEmpty } from "lodash-es";
import { getClassMap } from "../../utils/css-class.helper";
import { mergeComputePositionConfigs } from "../../utils/floating-ui.helper";
import { TOOLTIP_Z_INDEX } from "../../globals/config";
/**
* @part content - The tooltip content.
*/
export class KvTooltip {
constructor() {
/** @inheritdoc */
this.text = '';
/** @inheritdoc */
this.options = DEFAULT_POSITION_CONFIG;
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.contentElement = null;
/** @inheritdoc */
this.truncate = false;
/** @inheritdoc */
this.delay = DEFAULT_DELAY_CONFIG;
/** @inheritdoc */
this.withArrow = false;
/** @inheritdoc */
this.customClass = '';
this.showTooltip = false;
this.getContentElement = () => {
var _a;
return (_a = this.contentElement) !== null && _a !== void 0 ? _a : this.tooltipContent;
};
this.getOptions = () => {
const placement = isEmpty(this.allowedPositions) ? this.position : undefined;
const middleware = [];
if (!isEmpty(this.allowedPositions) && isEmpty(placement)) {
middleware.push(autoPlacement(Object.assign(Object.assign({}, DEFAULT_AUTO_PLACEMENT_CONFIG), { allowedPlacements: this.allowedPositions })));
}
return mergeComputePositionConfigs({ placement, middleware }, this.options);
};
this.hideTooltipHandler = () => {
this.showTooltip = false;
};
this.showTooltipHandler = () => {
if (this.disabled || (this.truncate && !isElementCollapsed(this.el)))
return;
this.showTooltip = true;
};
}
disconnectedCallback() {
this.showTooltip = false;
}
render() {
return (h(Host, { key: '46c2baab0215c134191247cd20f89cf46d6f53ba' }, h("div", { key: '4320d2ac877236f4df38de8f450bb1a475e52cc2', id: "content", part: "content", ref: el => (this.tooltipContent = el), onMouseOver: this.showTooltipHandler, onMouseOut: this.hideTooltipHandler, onBlur: this.hideTooltipHandler, onClick: this.hideTooltipHandler }, h("slot", { key: 'a1e9525c645045b029b37ee8278cd06270328fb5' })), this.showTooltip && !isEmpty(this.text) && (h("kv-portal", { key: 'a900bbe7b1cbeb131fb34b02e0ac00a2514173c9', zIndex: TOOLTIP_Z_INDEX, show: true, delay: this.delay, withArrow: this.withArrow, animated: true, reference: this.getContentElement(), options: this.getOptions() }, h("kv-tooltip-text", { key: '479c0653ce129108e8e1a6c95d1fa43cb02d7cb2', class: Object.assign({}, getClassMap(this.customClass)), text: this.text, style: this.customStyle })))));
}
static get is() { return "kv-tooltip"; }
static get encapsulation() { return "shadow"; }
static get properties() {
return {
"text": {
"type": "string",
"attribute": "text",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Text of tooltip"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "''"
},
"position": {
"type": "string",
"attribute": "position",
"mutable": false,
"complexType": {
"original": "ETooltipPosition",
"resolved": "ETooltipPosition.Bottom | ETooltipPosition.BottomEnd | ETooltipPosition.BottomStart | ETooltipPosition.Left | ETooltipPosition.LeftEnd | ETooltipPosition.LeftStart | ETooltipPosition.Right | ETooltipPosition.RightEnd | ETooltipPosition.RightStart | ETooltipPosition.Top | ETooltipPosition.TopEnd | ETooltipPosition.TopStart",
"references": {
"ETooltipPosition": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::ETooltipPosition"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Position of tooltip"
},
"getter": false,
"setter": false,
"reflect": true
},
"allowedPositions": {
"type": "unknown",
"attribute": "allowed-positions",
"mutable": false,
"complexType": {
"original": "ETooltipPosition[]",
"resolved": "ETooltipPosition[]",
"references": {
"ETooltipPosition": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::ETooltipPosition"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Array of allowed positions of toggle tip (if defined the 'position' is ignored)"
},
"getter": false,
"setter": false
},
"options": {
"type": "unknown",
"attribute": "options",
"mutable": false,
"complexType": {
"original": "Partial<ComputePositionConfig>",
"resolved": "{ strategy?: Strategy; placement?: Placement; middleware?: (false | { name: string; options?: any; fn: (state: { x: number; y: number; initialPlacement: Placement; strategy: Strategy; platform: Platform; placement: Placement; middlewareData: MiddlewareData; rects: ElementRects; elements: Elements; }) => Promisable<MiddlewareReturn>; })[]; platform?: Platform; }",
"references": {
"Partial": {
"location": "global",
"id": "global::Partial"
},
"ComputePositionConfig": {
"location": "import",
"path": "@floating-ui/dom",
"id": "../../node_modules/.pnpm/@floating-ui+dom@1.6.11/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::ComputePositionConfig"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Object with tooltip position options"
},
"getter": false,
"setter": false,
"defaultValue": "DEFAULT_POSITION_CONFIG"
},
"disabled": {
"type": "boolean",
"attribute": "disabled",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Disables tooltip"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"contentElement": {
"type": "unknown",
"attribute": "content-element",
"mutable": false,
"complexType": {
"original": "HTMLElement",
"resolved": "HTMLElement",
"references": {
"HTMLElement": {
"location": "global",
"id": "global::HTMLElement"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Content element reference"
},
"getter": false,
"setter": false,
"defaultValue": "null"
},
"truncate": {
"type": "boolean",
"attribute": "truncate",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Set `true` to display tooltip only when the content is truncated"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"delay": {
"type": "number",
"attribute": "delay",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Delay to show tooltip in milliseconds."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "DEFAULT_DELAY_CONFIG"
},
"withArrow": {
"type": "boolean",
"attribute": "with-arrow",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) if true it will render an arrow pointing to the opening element (default false)"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"customClass": {
"type": "string",
"attribute": "custom-class",
"mutable": false,
"complexType": {
"original": "CustomCssClass",
"resolved": "CssClassMap | string | string[]",
"references": {
"CustomCssClass": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::CustomCssClass"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "''"
},
"customStyle": {
"type": "unknown",
"attribute": "custom-style",
"mutable": false,
"complexType": {
"original": "HostAttributes['style']",
"resolved": "{ [key: string]: string; }",
"references": {
"HostAttributes": {
"location": "import",
"path": "@stencil/core/internal",
"id": "../../node_modules/.pnpm/@stencil+core@4.29.2/node_modules/@stencil/core/internal/index.d.ts::HostAttributes"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Additional style to apply for custom CSS."
},
"getter": false,
"setter": false
}
};
}
static get states() {
return {
"showTooltip": {}
};
}
static get elementRef() { return "el"; }
}