From 545908d3009794973aecd1bd896127772842904a Mon Sep 17 00:00:00 2001
From: Chirag <103994754+chiragnotionforms@users.noreply.github.com>
Date: Tue, 18 Oct 2022 12:19:00 +0530
Subject: [PATCH] Allow use of toggle switches for checkboxes (#13)

---
 app/Http/Requests/UserFormRequest.php         |  1 +
 .../js/components/forms/CheckboxInput.vue     |  2 +-
 .../js/components/forms/FlatSelectInput.vue   |  6 ++--
 .../js/components/forms/ToggleSwitchInput.vue | 31 +++++++++++++++++++
 resources/js/components/forms/index.js        |  4 ++-
 .../js/components/open/forms/OpenForm.vue     |  3 ++
 .../forms/fields/FormFieldOptionsModal.vue    | 18 +++++++++++
 7 files changed, 60 insertions(+), 5 deletions(-)
 create mode 100644 resources/js/components/forms/ToggleSwitchInput.vue

diff --git a/app/Http/Requests/UserFormRequest.php b/app/Http/Requests/UserFormRequest.php
index 8b3da44..e5fd267 100644
--- a/app/Http/Requests/UserFormRequest.php
+++ b/app/Http/Requests/UserFormRequest.php
@@ -84,6 +84,7 @@ abstract class UserFormRequest extends \Illuminate\Foundation\Http\FormRequest
             'properties.*.timezone' => 'sometimes|nullable',
             'properties.*.width' => ['sometimes', Rule::in(['full','1/2','1/3','2/3','1/3','3/4','1/4'])],
             'properties.*.allowed_file_types' => 'sometimes|nullable',
+            'properties.*.use_toggle_switch' => 'boolean|nullable',
 
             // Logic
             'properties.*.logic' => ['array', 'nullable', new FormPropertyLogicRule()],
diff --git a/resources/js/components/forms/CheckboxInput.vue b/resources/js/components/forms/CheckboxInput.vue
index d4ea11c..d6ba46b 100644
--- a/resources/js/components/forms/CheckboxInput.vue
+++ b/resources/js/components/forms/CheckboxInput.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="wrapperClass">
     <v-checkbox :id="id?id:name" v-model="compVal" :disabled="disabled" :name="name" @input="$emit('input',$event)">
-      {{ label }}
+      {{ label }} <span v-if="required" class="text-red-500 required-dot">*</span>
     </v-checkbox>
     <small v-if="help" :class="theme.default.help">
       <slot name="help">{{ help }}</slot>
diff --git a/resources/js/components/forms/FlatSelectInput.vue b/resources/js/components/forms/FlatSelectInput.vue
index 8361024..f5d3250 100644
--- a/resources/js/components/forms/FlatSelectInput.vue
+++ b/resources/js/components/forms/FlatSelectInput.vue
@@ -6,6 +6,9 @@
       {{ label }}
       <span v-if="required" class="text-red-500 required-dot">*</span>
     </label>
+    <small v-if="help" :class="theme.SelectInput.help" class="block mb-2">
+      <slot name="help">{{ help }}</slot>
+    </small>
 
     <loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" />
     <div v-for="(option, index) in options" v-else :key="option[optionKey]"
@@ -22,9 +25,6 @@
       </div>
     </div>
 
-    <small v-if="help" :class="theme.SelectInput.help">
-      <slot name="help">{{ help }}</slot>
-    </small>
     <has-error v-if="hasValidation" :form="form" :field="name" />
   </div>
 </template>
diff --git a/resources/js/components/forms/ToggleSwitchInput.vue b/resources/js/components/forms/ToggleSwitchInput.vue
new file mode 100644
index 0000000..21739bd
--- /dev/null
+++ b/resources/js/components/forms/ToggleSwitchInput.vue
@@ -0,0 +1,31 @@
+<template>
+    <div :class="wrapperClass">
+      <div class="flex">
+        <v-switch :id="id?id:name" v-model="compVal" class="inline-block mr-2" :disabled="disabled" :name="name" @input="$emit('input',$event)" />
+        <span>{{ label }} <span v-if="required" class="text-red-500 required-dot">*</span></span>
+      </div>
+      <small v-if="help" :class="theme.default.help">
+        <slot name="help">{{ help }}</slot>
+      </small>
+      <has-error v-if="hasValidation" :form="form" :field="name" />
+    </div>
+  </template>
+  
+  <script>
+  import inputMixin from '~/mixins/forms/input'
+  
+  import VSwitch from './components/VSwitch'
+  export default {
+    name: 'ToggleSwitchInput',
+  
+    components: { VSwitch },
+    mixins: [inputMixin],
+    props: {},
+  
+    mounted () {
+      this.compVal = !!this.compVal
+      this.$emit('input', !!this.compVal)
+    }
+  }
+  </script>
+  
\ No newline at end of file
diff --git a/resources/js/components/forms/index.js b/resources/js/components/forms/index.js
index bbb854e..70fad78 100644
--- a/resources/js/components/forms/index.js
+++ b/resources/js/components/forms/index.js
@@ -16,6 +16,7 @@ import ImageInput from './ImageInput'
 import DateInput from './DateInput';
 import RatingInput from './RatingInput';
 import FlatSelectInput from './FlatSelectInput';
+import ToggleSwitchInput from './ToggleSwitchInput';
 
 // Components that are registered globaly.
 [
@@ -34,7 +35,8 @@ import FlatSelectInput from './FlatSelectInput';
   RichTextAreaInput,
   DateInput,
   RatingInput,
-  FlatSelectInput
+  FlatSelectInput,
+  ToggleSwitchInput
 ].forEach(Component => {
   Vue.component(Component.name, Component)
 })
diff --git a/resources/js/components/open/forms/OpenForm.vue b/resources/js/components/open/forms/OpenForm.vue
index 427acb0..7cdba83 100644
--- a/resources/js/components/open/forms/OpenForm.vue
+++ b/resources/js/components/open/forms/OpenForm.vue
@@ -317,6 +317,9 @@ export default {
       if (['select', 'multi_select'].includes(field.type) && field.without_dropdown) {
         return 'FlatSelectInput'
       }
+      if (field.type === 'checkbox' && field.use_toggle_switch) {
+        return 'ToggleSwitchInput'
+      }
       return this.fieldComponents[field.type]
     },
     getFieldClasses (field) {
diff --git a/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue b/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue
index c0cf6f0..48bf09f 100644
--- a/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue
+++ b/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue
@@ -37,6 +37,24 @@
         </v-checkbox>
       </div>
 
+      <!-- Checkbox -->
+      <div v-if="field.type === 'checkbox'" class="-mx-4 sm:-mx-6 p-5 border-b">
+        <h3 class="font-semibold block text-lg">
+          Checkbox
+        </h3>
+        <p class="text-gray-400 mb-5">
+          Advanced options for checkbox.
+        </p>
+        <v-checkbox v-model="field.use_toggle_switch" class="mt-4"
+                    name="use_toggle_switch" help=""
+        >
+          Use toggle switch
+        </v-checkbox>
+        <p class="text-gray-400 mb-5">
+          If enabled, checkbox will be replaced with a toggle switch
+        </p>
+      </div>
+
       <!-- File Uploads -->
       <div v-if="field.type === 'files'" class="-mx-4 sm:-mx-6 p-5 border-b">
         <h3 class="font-semibold block text-lg">