@kelvininc/ui-components
Version:
Kelvin UI Components
285 lines (284 loc) • 11.3 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(event);
}
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: '4e4c7a224c21ed840cda7b25bcdf5291a011b5c0' }, h("div", { key: '3f34c6190639bbcd5a4764ee05938dfd01099428', id: "dropdown-action", ref: el => (this.action = el) }, h("slot", { key: '1a69edda08f5e8925edd72e46b33baacc6dbe0e5', name: "action" })), h("kv-portal", { key: '76662b19361907772abd2c5a112146b22367a5f2', animated: true, ref: el => (this.portal = el), show: this.isOpen, reference: this.getActionElement(), options: this.options, zIndex: this.zIndex }, h("div", { key: '3a2cf570844afd3b1e9b650308c8ea4c70c50fe6', class: "dropdown-base-list" }, h("slot", { key: '5150c2a047b5482c38a0904916859572d8021644', 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": "MouseEvent",
"resolved": "MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
}
}
}
}];
}
static get elementRef() { return "element"; }
static get listeners() {
return [{
"name": "mousedown",
"method": "checkForClickOutside",
"target": "window",
"capture": false,
"passive": true
}];
}
}