From 3591dae16e5f59fe53882d5c44101e133ed6be8f Mon Sep 17 00:00:00 2001
From: Patrizio Bekerle <patrizio.bekerle@tugraz.at>
Date: Mon, 2 Sep 2019 15:25:44 +0200
Subject: [PATCH] Add vpu-button web component
---
packages/common/vpu-button.js | 49 +++++++++++++++++++++++++++++++++++
1 file changed, 49 insertions(+)
create mode 100644 packages/common/vpu-button.js
diff --git a/packages/common/vpu-button.js b/packages/common/vpu-button.js
new file mode 100644
index 00000000..5e69a4fd
--- /dev/null
+++ b/packages/common/vpu-button.js
@@ -0,0 +1,49 @@
+import {html, LitElement, css} from 'lit-element';
+import * as commonUtils from './utils.js';
+import bulmaCSSPath from 'bulma/css/bulma.min.css';
+import * as utils from "../../src/utils";
+
+
+class Button extends LitElement {
+ constructor() {
+ super();
+ this.value = "";
+ this.type = "primary";
+ this.spinner = false;
+ this.spinnerOnClick = true;
+ }
+
+ static get properties() {
+ return {
+ value: { type: String },
+ type: { type: String },
+ spinner: { type: Boolean },
+ spinnerOnClick: { type: Boolean, attribute: 'spinner-on-click' },
+ };
+ }
+
+ static get styles() {
+ return css`vpu-mini-spinner { margin-left: 0.5em; }`;
+ }
+
+ clickHandler() {
+ if (this.spinnerOnClick) {
+ this.spinner = true;
+ }
+ }
+
+ stop() {
+ this.spinner = false;
+ }
+
+ render() {
+ const bulmaCSS = utils.getAssetURL(bulmaCSSPath);
+
+ return html`
+ <link rel="stylesheet" href="${bulmaCSS}">
+ <button @click="${this.clickHandler}" class="button is-${this.type}">${this.value} <vpu-mini-spinner style="display: ${this.spinner ? "inline" : "none"}"></vpu-mini-spinner></button>
+ `;
+ }
+}
+
+commonUtils.defineCustomElement('vpu-button', Button);
--
GitLab