fix checkbox input (#582)

* fix checkbox input * fix divs --------- Co-authored-by: Julien Nahum <[email protected]>
JhumanJ · Oct 19, 2024 · 0208b0c · 0208b0c
1 parent e737108
commit 0208b0c
Showing 1 changed file with 37 additions and 25 deletions.
diff --git a/client/components/forms/CheckboxInput.vue b/client/components/forms/CheckboxInput.vue
@@ -1,50 +1,63 @@
 <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"
       :disabled="disabled ? true : null"
       :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>