[beast: 14/47] EBEAST: vc/button.vue: add <vc-button/>, support hotkey and .click()

[Tim Janik <timj src gnome org>]

commit f01ba916c8b1a0de66cfe7be9f37a666e9a90bb8
Author: Tim Janik <timj gnu org>
Date:   Tue Apr 11 01:15:01 2017 +0200

    EBEAST: vc/button.vue: add <vc-button/>, support hotkey and .click()
    
    Signed-off-by: Tim Janik <timj gnu org>

 ebeast/vc/button.vue |   46 ++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 46 insertions(+), 0 deletions(-)
---
diff --git a/ebeast/vc/button.vue b/ebeast/vc/button.vue
new file mode 100644
index 0000000..5fbc88c
--- /dev/null
+++ b/ebeast/vc/button.vue
@@ -0,0 +1,46 @@
+<!-- GNU LGPL v2.1+: http://www.gnu.org/licenses/lgpl.html -->
+
+<docs>
+  ## vc-button - A button element that responds to clicks
+  ### Props:
+  - **hotkey** - Keyboard accelerator to trigger a ''click'' event.
+  ### Events:
+  - **click** - A ''click'' event is emitted for activation through mouse buttons, Space or Enter keys.
+  ### Slots:
+  - **slot** - All contents passed into this element will be rendered as contents of the button.
+</docs>
+
+<style lang="less">
+  @import 'styles.less';
+  .vc-button                   { .vc-buttonshade; display: inline-flex; text-align: center; margin: 0; 
padding: 3px 1em; }
+  .vc-button:focus             { outline: @vc-focus-outline; }
+  .vc-button:hover             { .vc-buttonhover; }
+  .vc-button.vc-fakeactive,
+  .vc-button:active            { .vc-buttonactive; }
+  .vc-button, .vc-button *     { color: @vc-button-foreground; fill: @vc-button-foreground !important; }
+  .vc-button.vc-fakeactive *,  /* use '*' + fill!important to include svg elements in buttons */
+  .vc-button:active *          { color: @vc-button-active-fg;  fill: @vc-button-active-fg !important; }
+</style>
+
+<template>
+  <button ref="btn"
+         class="vc-button"
+         @click="emit ('click', $event)"
+  ><slot class="vc-slot"></slot></button>
+</template>
+
+<script>
+module.exports = {
+  name: 'vc-button',
+  props: [ 'hotkey' ],
+  methods: {
+    emit (what, ev) {
+      this.$emit (what, ev);
+    },
+  },
+  mounted: function () { // `this` points to the Vue instance
+    if (this.hotkey)
+      $(this.$refs.btn).click_hotkey (this.hotkey);
+  },
+};
+</script>