From bf94349dca1c298de2a579217ba08c8e15ed902b Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Tue, 18 Jun 2024 21:48:41 +0200
Subject: [PATCH] Add label to checkbox

---
 src/components/fields/Checkbox.vue  |  2 +-
 src/components/fields/Nami.vue      |  4 ++--
 src/components/fields/VCheckbox.vue | 15 +++++++++------
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/fields/Checkbox.vue b/src/components/fields/Checkbox.vue
index 836d4da..61dd5e0 100644
--- a/src/components/fields/Checkbox.vue
+++ b/src/components/fields/Checkbox.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-checkbox :id="innerId" v-model="inner" :name="field.key" :label="field.description" :required="field.required" :intro="field.intro" :hint="field.hint"></v-checkbox>
+    <v-checkbox :id="innerId" v-model="inner" :label="field.name" :description="field.description" :name="field.key" :required="field.required" :intro="field.intro" :hint="field.hint"></v-checkbox>
 </template>
 
 <script setup>
diff --git a/src/components/fields/Nami.vue b/src/components/fields/Nami.vue
index 828a62f..4d999fb 100644
--- a/src/components/fields/Nami.vue
+++ b/src/components/fields/Nami.vue
@@ -57,7 +57,7 @@
                             @update:modelValue="toggleMember(member)"
                             :name="`${field.key}-memberselect-${member.id}`"
                             :id="`${field.key}-memberselect-${member.id}`"
-                            :label="member.name"
+                            :description="member.name"
                             intro=""
                             v-for="member in searchResults.data"
                         ></v-checkbox>
@@ -102,7 +102,7 @@
                                     v-model="member[memberField.key]"
                                     :name="`${field.key}-memberattr-${member.id}-${memberField.key}`"
                                     :id="`${field.key}-memberattr-${member.id}-${memberField.key}`"
-                                    :label="memberField.description"
+                                    :description="memberField.description"
                                     intro=""
                                     :required="memberField.required"
                                     :class="colClassesForField(memberField)"
diff --git a/src/components/fields/VCheckbox.vue b/src/components/fields/VCheckbox.vue
index 0b4d7de..7466e3f 100644
--- a/src/components/fields/VCheckbox.vue
+++ b/src/components/fields/VCheckbox.vue
@@ -1,6 +1,7 @@
 <template>
     <div class="relative">
-        <div class="grid grid-cols-1 gap-2">
+        <field-label v-if="label" :name="label" :required="required" :hint="hint" inline></field-label>
+        <div class="grid grid-cols-1 gap-2 pt-1">
             <div class="text-sm text-gray-600" v-text="intro" v-if="intro"></div>
             <label :for="id" class="p-0 block leading-none relative flex items-start">
                 <input :id="id" v-model="inner" type="checkbox" :name="name" class="peer absolute invisible" />
@@ -8,11 +9,9 @@
                     class="border-neutral-400 border-4 group-[.box]:border-2 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 group-[.box]:w-4 group-[.box]:h-4 group-[.box]:top-[5px] rounded block top-0"
                 ></span>
                 <span class="peer-checked:bg-primary left-[0.5rem] top-[0.5rem] group-[.box]:top-[0.58rem] group-[.box]:left-[0.25rem] w-2 h-2 absolute rounded block top-0"></span>
-                <span v-if="label" class="pl-8 group-[.box]:pl-6 pt-1 @sm:pt-0 @sm:group-[.box]:pt-1 text-gray-600 text-sm @sm:text-base @sm:group-[.box]:text-sm">
-                    <span v-text="label"></span>
-                    <span v-show="required" class="text-red-800"> *</span>
+                <span v-if="description" class="pl-8 group-[.box]:pl-6 pt-1 @sm:pt-0 @sm:group-[.box]:pt-1 text-gray-600 text-sm @sm:text-base @sm:group-[.box]:text-sm">
+                    <span v-text="description"></span>
                 </span>
-                <hint :value="hint" class="ml-2" v-if="hint"></hint>
             </label>
         </div>
     </div>
@@ -20,7 +19,7 @@
 
 <script setup>
 import {computed} from 'vue';
-import Hint from '../Hint.vue';
+import FieldLabel from '../FieldLabel.vue';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
@@ -41,6 +40,10 @@ const props = defineProps({
         type: String,
         default: () => '',
     },
+    description: {
+        required: false,
+        type: String,
+    },
     required: {
         required: false,
         type: Boolean,