@kelvininc/ui-components
Version:
Kelvin UI Components
280 lines (279 loc) • 11 kB
JavaScript
import { Host, h } from "@stencil/core";
import { DEFAULT_POSITION_CONFIG } from "./dropdown-base.config";
import { didClickOnElement } from "../../utils/mouse-event.helper";
import { DEFAULT_DROPDOWN_Z_INDEX } from "../../globals/config";
export class KvDropdownBase {
constructor() {
/** @inheritdoc */
this.isOpen = false;
/** @inheritdoc */
this.options = DEFAULT_POSITION_CONFIG;
/** @inheritdoc */
this.actionElement = null;
/** @inheritdoc */
this.listElement = null;
/** @inheritdoc */
this.clickOutsideClose = true;
/** @inheritdoc */
this.zIndex = DEFAULT_DROPDOWN_Z_INDEX;
this.getActionElement = () => {
var _a;
return (_a = this.actionElement) !== null && _a !== void 0 ? _a : this.action;
};
this.getListElement = () => {
var _a;
return (_a = this.listElement) !== null && _a !== void 0 ? _a : this.portal;
};
this.didClickOnDropdownAction = (event) => {
const dropdownActionElement = this.getActionElement();
return didClickOnElement(dropdownActionElement, event);
};
this.didClickOnDropdownList = (event) => {
const dropdownListElement = this.getListElement();
return didClickOnElement(dropdownListElement, event);
};
}
checkForClickOutside(event) {
// Check if clicked inside the dropdown
if (this.didClickOnDropdownAction(event) || this.didClickOnDropdownList(event)) {
return;
}
if (this.isOpen && this.clickOutsideClose) {
this.openStateChange.emit(!this.isOpen);
}
this.clickOutside.emit();
}
disconnectedCallback() {
var _a;
// Requires deleting portal from outside KvPortal because KvPortal is moved to global context
// and would only be destroyed when the global context is destroyed.
(_a = this.portal) === null || _a === void 0 ? void 0 : _a.remove();
}
render() {
return (h(Host, { key: '0df805faac4fa5b200785e30eeb45e03b5612fd8' }, h("div", { key: '6f6dac7aaa939ddf6bba101f6c303eac3a7c6be3', id: "dropdown-action", ref: el => (this.action = el) }, h("slot", { key: 'b08f14ce5c960d7de0d16e3287a31d9268e9d2e7', name: "action" })), h("kv-portal", { key: '5cde2f3bd5ae4c571e83805032d18f57d9d6f027', animated: true, ref: el => (this.portal = el), show: this.isOpen, reference: this.getActionElement(), options: this.options, zIndex: this.zIndex }, h("div", { key: '80a3955b6d774d819189af42f7806f81ec952c04', class: "dropdown-base-list" }, h("slot", { key: '836df702f17b000221222338b6bef3e1777a78a8', name: "list" })))));
}
static get is() { return "kv-dropdown-base"; }
static get originalStyleUrls() {
return {
"$": ["dropdown-base.scss"]
};
}
static get styleUrls() {
return {
"$": ["dropdown-base.css"]
};
}
static get properties() {
return {
"isOpen": {
"type": "boolean",
"attribute": "is-open",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the list is opened"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "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) The dropdown position config options"
},
"getter": false,
"setter": false,
"defaultValue": "DEFAULT_POSITION_CONFIG"
},
"actionElement": {
"type": "unknown",
"attribute": "action-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) A reference to the dropdown action element"
},
"getter": false,
"setter": false,
"defaultValue": "null"
},
"listElement": {
"type": "unknown",
"attribute": "list-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) A reference to the dropdown list element"
},
"getter": false,
"setter": false,
"defaultValue": "null"
},
"clickOutsideClose": {
"type": "boolean",
"attribute": "click-outside-close",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `false` clicking outside the dropdown will not trigger state change. Default: true"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "true"
},
"zIndex": {
"type": "number",
"attribute": "z-index",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) the dropdown list z-index (default: 9004)"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "DEFAULT_DROPDOWN_Z_INDEX"
}
};
}
static get states() {
return {
"action": {}
};
}
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": {}
}
}, {
"method": "clickOutside",
"name": "clickOutside",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when there's a click outside the dropdown's bondaries"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}];
}
static get elementRef() { return "element"; }
static get listeners() {
return [{
"name": "mousedown",
"method": "checkForClickOutside",
"target": "window",
"capture": false,
"passive": true
}];
}
}