From 43cc5e59cb9acc178c4c8f9eb0c86b7614d20a11 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Sun, 26 Jul 2020 21:18:31 +0200
Subject: [PATCH] Able to disable button component with prop.

---
 frontend/components/ui/Button.vue | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/frontend/components/ui/Button.vue b/frontend/components/ui/Button.vue
index 5f85894..2439c81 100644
--- a/frontend/components/ui/Button.vue
+++ b/frontend/components/ui/Button.vue
@@ -1,5 +1,5 @@
 <template>
-  <button :class="computedClass" @click="$emit('click')"><slot></slot></button>
+  <button :class="computedClass" @click="$emit('click')" :disabled="disabled"><slot></slot></button>
 </template>
 
 <script>
@@ -23,13 +23,18 @@ export default {
     scaleRotate: {
       type: Boolean,
       default: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   computed: {
     computedClass() {
       let classNames= [];
 
-      if (this.scaleRotate)
+      if (this.scaleRotate && !this.disabled)
         classNames.push('scale-rotate')
       if (this.small)
         classNames.push('small');
@@ -94,9 +99,13 @@ button {
 }
 
 button .icon {
-  position: relative;
-  top: 2.5px;
-  right: -8px;
+  vertical-align: middle;
+  margin-left: 0.3rem;
+  font-size: 1.4em;
+}
+
+button[disabled], button:disabled {
+  cursor: not-allowed;
 }
 
 </style>