@kelvininc/ui-components
Version:
Kelvin UI Components
336 lines (335 loc) • 14.1 kB
JavaScript
import { autoPlacement } from "@floating-ui/dom";
import { Host, h } from "@stencil/core";
import { isEmpty } from "lodash-es";
import { DEFAULT_AUTO_PLACEMENT_CONFIG, DEFAULT_TOOLTIP_CONFIG } from "./toggle-tip.config";
import { getClassMap } from "../../utils/css-class.helper";
import { didClickOnElement } from "../../utils/mouse-event.helper";
import { TOGGLE_TIP_Z_INDEX } from "../../globals/config";
import { mergeComputePositionConfigs } from "../../utils/floating-ui.helper";
export class KvToggleTip {
constructor() {
/** @inheritdoc */
this.options = DEFAULT_TOOLTIP_CONFIG;
/** @inheritdoc */
this.isOpen = false;
/** @inheritdoc */
this.isFixed = false;
/** @inheritdoc */
this.withArrow = false;
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.customClass = '';
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.onButtonClick = () => {
if (this.disabled) {
return;
}
this.isOpen = !this.isOpen;
this.openStateChange.emit(this.isOpen);
};
}
checkForClickOutside(event) {
if (!this.isFixed) {
// Check if clicked inside the toggle tip
if (didClickOnElement(this.portal, event) || didClickOnElement(this.openElement, event)) {
return;
}
if (this.isOpen) {
this.isOpen = false;
this.openStateChange.emit(false);
}
}
}
disconnectedCallback() {
// Requires deleting portal from outside KvPortal because KvPortal is moved to global context
// and would only be destroyed when the global context is destroyed.
this.portal.remove();
}
render() {
return (h(Host, { key: 'b1f906d3722e716415d2d3c28947b741f0999e01' }, h("div", { key: '33f70fe3397750231db9c2e8150a88d3dae1ef56', ref: el => (this.openElement = el), onClick: this.onButtonClick, class: "toggle-tip-open-element-container" }, h("slot", { key: '19dc8d6cc5fb8a7d2fcb6aa27017d0d31adaa76c', name: "open-element-slot" })), h("kv-portal", { key: 'de8fc57324a0a7aae3226cadc576e8ba26007330', zIndex: TOGGLE_TIP_Z_INDEX, ref: el => (this.portal = el), withArrow: this.withArrow, animated: true, show: this.isOpen, reference: this.openElement, options: this.getOptions() }, h("kv-tooltip-text", { key: '07935d0ff814c5abb81867e29eb20a7078fc3fa4', class: Object.assign({ 'toggle-tip-container': true }, getClassMap(this.customClass)), text: this.text }, h("div", { key: 'b25195d4018c74a6e4b65e12a85e80d96beffbe7' }, h("slot", { key: 'f8b33d9087b0d9e956d302b8023fd9af695f1af8', name: "content-slot" }))))));
}
static get is() { return "kv-toggle-tip"; }
static get originalStyleUrls() {
return {
"$": ["toggle-tip.scss"]
};
}
static get styleUrls() {
return {
"$": ["toggle-tip.css"]
};
}
static get properties() {
return {
"text": {
"type": "string",
"attribute": "text",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Text of toggletip"
},
"getter": false,
"setter": false,
"reflect": true
},
"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": "../../utils/types/components",
"id": "src/utils/types/components.ts::ETooltipPosition"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Position of toggletip"
},
"getter": false,
"setter": false,
"reflect": true
},
"allowedPositions": {
"type": "unknown",
"attribute": "allowed-positions",
"mutable": false,
"complexType": {
"original": "ETooltipPosition[]",
"resolved": "ETooltipPosition[]",
"references": {
"ETooltipPosition": {
"location": "import",
"path": "../../utils/types/components",
"id": "src/utils/types/components.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_TOOLTIP_CONFIG"
},
"isOpen": {
"type": "boolean",
"attribute": "is-open",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Set open state of toggle tip, default false"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"isFixed": {
"type": "boolean",
"attribute": "is-fixed",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) if true it will ignore outside clicks to close the toggle tip"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"withArrow": {
"type": "boolean",
"attribute": "with-arrow",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) if true it will render an arrow pointing to the opening element"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"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) if true it will disable clicks to open toggle tip"
},
"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": "../../utils/types/components",
"id": "src/utils/types/components.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": "''"
}
};
}
static get events() {
return [{
"method": "openStateChange",
"name": "openStateChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when the dropdown opens state changes"
},
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
static get listeners() {
return [{
"name": "click",
"method": "checkForClickOutside",
"target": "window",
"capture": false,
"passive": false
}];
}
}