From 38288332c5e7dd00d662379db7ac8df80c56143f Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Wed, 15 Jan 2020 17:43:28 +0100
Subject: [PATCH] New vuejs Button component

---
 resources/js/app.js                |  2 ++
 resources/js/components/Button.vue | 41 ++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 resources/js/components/Button.vue

diff --git a/resources/js/app.js b/resources/js/app.js
index 837b9565..e42d2db3 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -15,6 +15,7 @@ import Edit             from './views/Edit'
 import PasswordRequest  from './views/auth/password/Request'
 import PasswordReset    from './views/auth/password/Reset'
 import NotFound         from './views/Error'
+import Button           from './components/Button'
 
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -24,6 +25,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 library.add(faPlus, faQrcode, faImage, faTrash, faEdit, faCheck, faLock, faLockOpen, faSearch);
 
 Vue.component('font-awesome-icon', FontAwesomeIcon)
+Vue.component('VButton', Button)
 
 // const lang = document.documentElement.lang.substr(0, 2);
 const lang = 'en';
diff --git a/resources/js/components/Button.vue b/resources/js/components/Button.vue
new file mode 100644
index 00000000..5df075f7
--- /dev/null
+++ b/resources/js/components/Button.vue
@@ -0,0 +1,41 @@
+<template>
+    <button 
+        :type="nativeType" 
+        :class="{
+            [`${color}`]: true,
+            'is-large': isLarge,
+            'is-focused': isFocused,
+          }" 
+        class="button">
+        <slot />
+    </button>
+</template>
+
+<script>
+    export default {
+        name: 'VButton',
+
+        props: {
+            color: {
+                type: String,
+                default: 'is-link'
+            },
+
+            nativeType: {
+                type: String,
+                default: 'submit'
+            },
+
+            isFocused: {
+                type: Boolean,
+                default: false
+            },
+
+            isLarge: {
+                type: Boolean,
+                default: false
+            }
+        }
+    }
+
+</script>