holakit
Version:
Yet another design-driven UI component set.
65 lines (62 loc) • 4.21 kB
JavaScript
/*! Built with http://stenciljs.com */
const { h } = window.HolakitCore;
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 ".button {\n display: inline-block;\n text-decoration: none;\n padding: 0.5em 1em;\n margin: 0.15em 0;\n font-size: 1em;\n line-height: 1.5;\n border: none;\n outline: none;\n -webkit-appearance: none;\n -webkit-box-shadow: 0 0 0 0 #fff inset;\n box-shadow: 0 0 0 0 #fff inset;\n background: transparent;\n cursor: pointer;\n -webkit-transition: 0.3s -webkit-box-shadow ease;\n transition: 0.3s -webkit-box-shadow ease;\n transition: 0.3s box-shadow ease;\n transition: 0.3s box-shadow ease, 0.3s -webkit-box-shadow ease;\n border-radius: 0;\n}\n.button:hover,\n.button:active {\n -webkit-box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0.5) inset;\n box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0.5) inset;\n}\n.button:focus {\n -webkit-box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.5);\n box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.5);\n -webkit-box-shadow: 0 0 0 3px var(--hola-focus-color);\n box-shadow: 0 0 0 3px var(--hola-focus-color);\n}\n\n:host([normal]) > .button {\n background: #eee;\n color: rgba(0, 0, 0, 0.8);\n color: var(--hola-text-dark-color);\n}\n\n:host([primary]) > .button {\n background: #3498db;\n background: var(--hola-primary-color);\n color: rgba(255, 255, 255, 0.97);\n color: var(--hola-text-light-color);\n}\n\n:host([ghost]) > .button {\n -webkit-box-shadow: 0 0 0 .2em #3498db inset;\n box-shadow: 0 0 0 .2em #3498db inset;\n -webkit-box-shadow: 0 0 0 .2em var(--hola-primary-color) inset;\n box-shadow: 0 0 0 .2em var(--hola-primary-color) inset;\n font-weight: bold;\n color: #3498db;\n color: var(--hola-primary-color);\n}\n:host([ghost]:host-context(hola-hero[dark-bg])) > .button {\n /* \n * For some reason this selector doesn't work on Safari. Due to the limited\n * functionality of Safari's DevTools, we will need further investigation on it.\n */\n font-size: 1rem;\n color: rgba(255, 255, 255, 0.97);\n color: var(--hola-text-light-color);\n -webkit-box-shadow: 0 0 0 .2em rgba(255, 255, 255, 0.97) inset;\n box-shadow: 0 0 0 .2em rgba(255, 255, 255, 0.97) inset;\n -webkit-box-shadow: 0 0 0 .2em var(--hola-text-light-color) inset;\n box-shadow: 0 0 0 .2em var(--hola-text-light-color) inset;\n}\n/* TODO: Hover/active effect for ghost buttons */"; }
}
export { HolaButton };