holakit
Version:
Yet another design-driven UI component set.
60 lines (59 loc) • 1.92 kB
JavaScript
export class HolaButton {
constructor() {
/**
* When you need this to be a link, specify this as a url.
*/
this.href = '#';
/**
* The type of button when this element acts as `<button>`.
*/
this.type = 'button';
/**
* Add this if you want this acts like a form submit.
*/
this.submit = false;
}
onClick(event) {
// To make form events work, this method is stole from
// https://github.com/ionic-team/ionic/blob/0fec72255bb99611cfe67ea70152400ec7f8b762/core/src/components/button/button.tsx#L118-L139
const form = this.el.closest('form');
if (form) {
event.preventDefault();
if (this.submit)
return form.submit();
const fakeButton = document.createElement('button');
fakeButton.type = this.type;
fakeButton.style.display = 'none';
form.appendChild(fakeButton);
fakeButton.click();
fakeButton.remove();
}
}
render() {
if (this.href)
h("a", { href: this.href, class: "button" },
h("slot", null));
return h("button", { onClick: this.onClick, type: this.type, class: "button" },
h("slot", null));
}
static get is() { return "hola-button"; }
static get encapsulation() { return "shadow"; }
static get properties() { return {
"el": {
"elementRef": true
},
"href": {
"type": String,
"attr": "href"
},
"submit": {
"type": Boolean,
"attr": "submit"
},
"type": {
"type": String,
"attr": "type"
}
}; }
static get style() { return "/**style-placeholder:hola-button:**/"; }
}