From 0208b0caa1730aa794835a1a537b2c9c3d3bee1a Mon Sep 17 00:00:00 2001
From: Favour Olayinka <csskfaves@gmail.com>
Date: Sat, 19 Oct 2024 10:04:47 +0100
Subject: [PATCH] fix checkbox input (#582)

* fix checkbox input

* fix divs

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
---
 client/components/forms/CheckboxInput.vue | 62 ++++++++++++++---------
 1 file changed, 37 insertions(+), 25 deletions(-)

diff --git a/client/components/forms/CheckboxInput.vue b/client/components/forms/CheckboxInput.vue
index fba1e6ca4..c18df4b34 100644
--- a/client/components/forms/CheckboxInput.vue
+++ b/client/components/forms/CheckboxInput.vue
@@ -1,10 +1,11 @@
 <template>
-  <input-wrapper v-bind="inputWrapperProps">
+  <InputWrapper v-bind="inputWrapperProps">
     <template #label>
       <span />
     </template>
 
-    <v-checkbox
+    <div class="flex space-x-2 items-center">
+    <VCheckbox
       :id="id ? id : name"
       v-model="compVal"
       :value="value"
@@ -12,39 +13,51 @@
       :name="name"
       :color="color"
       :theme="theme"
-    >
-      <slot
-        name="label"
-      >
-        <span
-          :class="[
-            theme.SelectInput.fontSize,
-          ]"
-        >{{ label }}</span>
-        <span
-          v-if="required"
-          class="text-red-500 required-dot"
-        >*</span>
-      </slot>
-    </v-checkbox>
+    />
+    <div>
+        <slot name="label">
+          <label
+            :aria-label="id ? id : name"
+            :for="id ? id : name"
+            :class="theme.default.fontSize"
+          >
+            {{ label }}
+            <span
+              v-if="required"
+              class="text-red-500 required-dot"
+            >*</span>
+          </label>
+        </slot>
+        <slot name="help">
+          <InputHelp
+            :help="help"
+            :help-classes="theme.default.help"
+          >
+            <template #after-help>
+              <slot name="bottom_after_help" />
+            </template>
+          </InputHelp>
+        </slot>
+      </div>
+    </div>
 
     <template #help>
-      <slot name="help" />
+      <span class="hidden" />
     </template>
 
     <template #error>
       <slot name="error" />
     </template>
-  </input-wrapper>
+  </InputWrapper>
 </template>
 
 <script>
-import { inputProps, useFormInput } from "./useFormInput.js"
-import VCheckbox from "./components/VCheckbox.vue"
-import InputWrapper from "./components/InputWrapper.vue"
+import { inputProps, useFormInput } from './useFormInput.js'
+import VCheckbox from './components/VCheckbox.vue'
+import InputWrapper from './components/InputWrapper.vue'
 
 export default {
-  name: "CheckboxInput",
+  name: 'CheckboxInput',
 
   components: { InputWrapper, VCheckbox },
   props: {
@@ -59,9 +72,8 @@ export default {
   },
 
   mounted() {
-    if (!this.compVal) {
+    if (!this.compVal)
       this.compVal = false
-    }
   },
 }
 </script>