Add intro for field

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" :hint="field.hint"></v-checkbox>
+    <v-checkbox :id="innerId" v-model="inner" :name="field.key" :label="field.description" :required="field.required" :intro="field.intro" :hint="field.hint"></v-checkbox>
 </template>
 
 <script setup>

src/components/fields/Checkboxes.vue

@@ -2,6 +2,7 @@
     <div class="relative">
         <field-label :name="field.name" :required="false" :hint="field.hint" inline></field-label>
         <div class="grid grid-cols-1 gap-2 pt-1">
+            <div class="text-sm text-gray-600" v-text="field.intro" v-if="field.intro"></div>
             <label v-for="(option, index) in field.options" :key="index" :for="`${innerId}-${index}`" class="block relative flex items-start">
                 <input :id="`${innerId}-${index}`" v-model="inner" type="checkbox" :name="field.key" :value="option" class="peer absolute invisible" />
                 <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block"></span>

src/components/fields/Nami.vue

@@ -50,6 +50,7 @@
                             :name="`${field.key}-memberselect-${member.id}`"
                             :id="`${field.key}-memberselect-${member.id}`"
                             :label="member.name"
+                            intro=""
                             v-for="member in searchResults.data"
                         ></v-checkbox>
                     </div>
@@ -89,6 +90,7 @@
                                 :name="`${field.key}-memberattr-${member.id}-${memberField.key}`"
                                 :id="`${field.key}-memberattr-${member.id}-${memberField.key}`"
                                 :label="memberField.name"
+                                intro=""
                             ></v-checkbox>
                             <v-dropdown
                                 v-if="memberField.type === 'DropdownField'"

src/components/fields/Radio.vue

@@ -2,6 +2,7 @@
     <div class="relative">
         <field-label :name="field.name" :required="field.required" :hint="field.hint" :button="modelValue === null ? '' : 'Option löschen'" @buttonclick="selected = null" inline></field-label>
         <div class="grid grid-cols-1 gap-2 pt-1">
+            <div class="text-sm text-gray-600" v-text="field.intro" v-if="field.intro"></div>
             <label v-for="(option, index) in field.options" :key="index" :for="`${innerId}-${index}`" class="block relative flex items-center">
                 <input :id="`${innerId}-${index}`" v-model="selected" type="radio" :name="field.key" :value="option" class="peer absolute invisible" />
                 <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded-full block"></span>

src/components/fields/VCheckbox.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="relative">
         <div class="grid grid-cols-1 gap-2">
+            <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" />
                 <span
@@ -50,6 +51,11 @@ const props = defineProps({
         validator: (value) => value === null || typeof value === 'string',
         default: () => null,
     },
+    intro: {
+        required: false,
+        validator: (value) => value === null || typeof value === 'string',
+        default: () => null,
+    },
 });
 
 const inner = computed({

src/main.js

@@ -33,7 +33,7 @@ window.hasKeys = function (object, expected) {
 };
 
 window.globalFieldRules = function () {
-    return ['value', 'special_type', 'nami_type', 'for_members', 'key', 'columns', 'name', 'type', 'hint'];
+    return ['value', 'special_type', 'nami_type', 'for_members', 'key', 'columns', 'name', 'type', 'hint', 'intro'];
 };
 
 EventForm.styles = [classes, carousel, carouselStyle];