From e0abb56bd5363683e0c059eab652bde84abe0a50 Mon Sep 17 00:00:00 2001
From: Frank <csskfaves@gmail.com>
Date: Tue, 1 Oct 2024 10:44:19 +0100
Subject: [PATCH 1/2] fix checkbox input

---
 client/components/forms/CheckboxInput.vue | 64 ++++++++++++++---------
 1 file changed, 39 insertions(+), 25 deletions(-)

diff --git a/client/components/forms/CheckboxInput.vue b/client/components/forms/CheckboxInput.vue
index fba1e6ca4..f925d3ab1 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,53 @@
       :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>
+      <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>
+  </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 +74,8 @@ export default {
   },
 
   mounted() {
-    if (!this.compVal) {
+    if (!this.compVal)
       this.compVal = false
-    }
   },
 }
 </script>

From c6a75fb98d6d8e809282c2ff7b678061ed53ee25 Mon Sep 17 00:00:00 2001
From: Frank <csskfaves@gmail.com>
Date: Thu, 10 Oct 2024 15:14:45 +0100
Subject: [PATCH 2/2] fix divs

---
 client/components/forms/CheckboxInput.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/client/components/forms/CheckboxInput.vue b/client/components/forms/CheckboxInput.vue
index f925d3ab1..c18df4b34 100644
--- a/client/components/forms/CheckboxInput.vue
+++ b/client/components/forms/CheckboxInput.vue
@@ -15,7 +15,6 @@
       :theme="theme"
     />
     <div>
-      <div>
         <slot name="label">
           <label
             :aria-label="id ? id : name"
@@ -41,7 +40,6 @@
         </slot>
       </div>
     </div>
-  </div>
 
     <template #help>
       <span class="hidden" />