From e427ef90b1f2a929f9573be3db7c05da2018b347 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Mon, 9 Nov 2020 01:24:19 +0100
Subject: [PATCH] Add new FormToggle vue component

---
 resources/js/components/FormToggle.vue | 55 ++++++++++++++++++++++++++
 resources/js/components/index.js       |  2 +
 resources/sass/app.scss                |  5 +++
 3 files changed, 62 insertions(+)
 create mode 100644 resources/js/components/FormToggle.vue

diff --git a/resources/js/components/FormToggle.vue b/resources/js/components/FormToggle.vue
new file mode 100644
index 00000000..39f54b09
--- /dev/null
+++ b/resources/js/components/FormToggle.vue
@@ -0,0 +1,55 @@
+<template>
+    <div class="field" :class="{ 'with-offset' : hasOffset }">
+        <label class="label" v-html="label"></label>
+        <div class="is-toggle buttons">
+            <a class="button is-dark" v-for="choice in choices" :class="{ 'is-link' : form[fieldName] === choice }" @click="form[fieldName] = choice">{{ choice }}</a>
+        </div>
+        <field-error :form="form" :field="fieldName" />
+        <p class="help" v-html="help" v-if="help"></p>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'FormToggle',
+        
+        data() {
+            return {
+
+            }
+        },
+
+        props: {
+            label: {
+                type: String,
+                default: ''
+            },
+
+            fieldName: {
+                type: String,
+                default: '',
+                required: true
+            },
+
+            choices: {
+                type: Array,
+                required: true
+            },
+
+            form: {
+                type: Object,
+                required: true
+            },
+
+            help: {
+                type: String,
+                default: ''
+            },
+
+            hasOffset: {
+                type: Boolean,
+                default: false
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/resources/js/components/index.js b/resources/js/components/index.js
index 3712f26f..68f69b4b 100644
--- a/resources/js/components/index.js
+++ b/resources/js/components/index.js
@@ -6,6 +6,7 @@ import FormWrapper      from './FormWrapper'
 import FormField        from './FormField'
 import FormSelect       from './FormSelect'
 import FormSwitch       from './FormSwitch'
+import FormToggle       from './FormToggle'
 import FormCheckbox     from './FormCheckbox'
 import FormButtons      from './FormButtons'
 import VueFooter        from './Footer'
@@ -20,6 +21,7 @@ import Kicker           from './Kicker'
     FormField,
     FormSelect,
     FormSwitch,
+    FormToggle,
     FormCheckbox,
     FormButtons,
     VueFooter,
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index ecf717af..817e99fa 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -366,6 +366,11 @@ figure.no-icon {
   color: hsl(0, 0%, 48%);
 }
 
+.is-toggle.buttons,
+.is-toggle.buttons a.button {
+  margin-bottom: 0 !important;
+}
+
 .control.has-icons-left .icon, .control.has-icons-right .icon {
   color: inherit;
 }