@blaze/atoms
Version:
Open Source UI Toolkit - Atoms
179 lines (178 loc) • 4.05 kB
JavaScript
import { h, Component, Event, Prop, Method, State } from '@stencil/core';
export class Drawer {
constructor() {
this.open = false;
this.dismissible = false;
this.position = 'bottom';
this._isOpen = false;
}
async close() {
if (!this.shouldClose || this.shouldClose()) {
this._isOpen = false;
this.onClose.emit();
}
}
async show() {
this._isOpen = true;
}
async isOpen() {
return this._isOpen;
}
componentWillLoad() {
this._isOpen = this.open;
}
dismiss() {
if (this.dismissible)
this.close();
}
render() {
const drawerIsOpenClass = this._isOpen ? 'o-drawer--visible' : '';
const overlayIsOpenClass = this._isOpen ? 'c-overlay--visible' : '';
return [
h("div", { "aria-hidden": "true", onClick: () => this.dismiss(), class: `c-overlay c-overlay--fullpage ${overlayIsOpenClass}` }),
h("aside", { "aria-expanded": this.isOpen.toString(), class: `o-drawer o-drawer--${this.position} ${drawerIsOpenClass}` },
h("slot", null)),
];
}
static get is() { return "blaze-drawer"; }
static get properties() { return {
"open": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "open",
"reflect": false,
"defaultValue": "false"
},
"dismissible": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "dismissible",
"reflect": false,
"defaultValue": "false"
},
"position": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "position",
"reflect": false,
"defaultValue": "'bottom'"
},
"shouldClose": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "() => boolean",
"resolved": "() => boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
}
}
}; }
static get states() { return {
"_isOpen": {}
}; }
static get events() { return [{
"method": "onClose",
"name": "close",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}]; }
static get methods() { return {
"close": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
},
"show": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
},
"isOpen": {
"complexType": {
"signature": "() => Promise<boolean>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<boolean>"
},
"docs": {
"text": "",
"tags": []
}
}
}; }
}