web-component-stencil-test
Version:
Stencil Component Starter
90 lines (89 loc) • 2.7 kB
JavaScript
import { h } from "@stencil/core";
export class SimpleButton {
constructor() {
/**
* Show number of clicks
*/
this.showNbOfClick = false;
/**
* theme
*/
this.theme = 'primary';
/**
* Number of clicks
*/
this.nbOfClicks = 0;
this.handleClick = () => {
this.nbOfClicks += 1;
};
}
validateTheme(newValue) {
const themes = ['primary', 'secondary'];
const themeIsValidate = themes.indexOf(newValue) > -1;
if (!themeIsValidate) {
throw new Error('theme: not a valide theme');
}
}
componentWillLoad() {
this.validateTheme(this.theme);
}
render() {
return h("button", { class: `simple-button ${this.theme}`, onClick: this.handleClick },
h("span", { class: "label" },
h("slot", null)),
this.showNbOfClick && this.nbOfClicks > 0 && (h("span", { class: "nb-of-clicks" }, ` - ${this.nbOfClicks}`)));
}
static get is() { return "simple-button"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["simple-button.scss"]
}; }
static get styleUrls() { return {
"$": ["simple-button.css"]
}; }
static get properties() { return {
"showNbOfClick": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Show number of clicks"
},
"attribute": "show-click",
"reflect": false,
"defaultValue": "false"
},
"theme": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "theme"
},
"attribute": "theme",
"reflect": false,
"defaultValue": "'primary'"
}
}; }
static get states() { return {
"nbOfClicks": {}
}; }
static get watchers() { return [{
"propName": "theme",
"methodName": "validateTheme"
}]; }
}