From d345c80d4d07300a5cc1a337791b027345db27e5 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Thu, 27 Feb 2020 16:27:14 +0100
Subject: [PATCH] New FormSwitch vue component

---
 resources/js/components/FormSwitch.vue | 43 ++++++++++++++++++++++++++
 resources/js/components/index.js       |  2 ++
 resources/sass/app.scss                |  1 +
 3 files changed, 46 insertions(+)
 create mode 100644 resources/js/components/FormSwitch.vue

diff --git a/resources/js/components/FormSwitch.vue b/resources/js/components/FormSwitch.vue
new file mode 100644
index 00000000..265bce52
--- /dev/null
+++ b/resources/js/components/FormSwitch.vue
@@ -0,0 +1,43 @@
+<template>
+    <div class="field">
+        <label for="fieldName" class="label" v-html="label"></label>
+        <input id="fieldName" type="checkbox" name="fieldName" class="switch is-thin is-info" v-model="form[fieldName]">
+        <label for="fieldName" class="label"></label>
+        <p class="help" v-html="help" v-if="help"></p>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'FormSwitch',
+        
+        data() {
+            return {
+
+            }
+        },
+
+        props: {
+            label: {
+                type: String,
+                default: ''
+            },
+
+            fieldName: {
+                type: String,
+                default: '',
+                required: true
+            },
+
+            form: {
+                type: Object,
+                required: true
+            },
+
+            help: {
+                type: String,
+                default: ''
+            },
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/resources/js/components/index.js b/resources/js/components/index.js
index b2cd7d31..173d43de 100644
--- a/resources/js/components/index.js
+++ b/resources/js/components/index.js
@@ -4,6 +4,7 @@ import FieldError from './FieldError'
 import FormWrapper from './FormWrapper'
 import FormField from './FormField'
 import FormSelect from './FormSelect'
+import FormSwitch from './FormSwitch'
 import FormButtons from './FormButtons'
 import VueFooter from './Footer'
 
@@ -14,6 +15,7 @@ import VueFooter from './Footer'
     FormWrapper,
     FormField,
     FormSelect,
+    FormSwitch,
     FormButtons,
     VueFooter,
 ].forEach(Component => {
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index e2e5fd0e..de219be4 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -8,6 +8,7 @@
 //@import '~bootstrap/scss/bootstrap';
 @import '~bulma';
 @import '~bulma-checkradio';
+@import '~bulma-switch';
 
 a:hover {
   color: hsl(204, 86%, 53%);