From 3848b79d0817067468f311a3b58e050c5f1a3473 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Mon, 10 Jun 2024 16:51:21 +0200
Subject: [PATCH] Add intro for dropdown

---
 src/components/fields/Dropdown.vue  | 12 +++++-
 src/components/fields/VDropdown.vue | 59 ++++++++++++++++-------------
 2 files changed, 44 insertions(+), 27 deletions(-)

diff --git a/src/components/fields/Dropdown.vue b/src/components/fields/Dropdown.vue
index 572a47d..b8ed63c 100644
--- a/src/components/fields/Dropdown.vue
+++ b/src/components/fields/Dropdown.vue
@@ -1,5 +1,15 @@
 <template>
-    <v-dropdown v-model="inner" :label="field.name" :id="innerId" :name="innerId" :options="innerOptions" :required="field.required" :hint="field.hint" :allowcustom="field.allowcustom"></v-dropdown>
+    <v-dropdown
+        v-model="inner"
+        :label="field.name"
+        :id="innerId"
+        :name="innerId"
+        :options="innerOptions"
+        :required="field.required"
+        :hint="field.hint"
+        :allowcustom="field.allowcustom"
+        :intro="field.intro"
+    ></v-dropdown>
 </template>
 
 <script setup>
diff --git a/src/components/fields/VDropdown.vue b/src/components/fields/VDropdown.vue
index be1e786..c889d89 100644
--- a/src/components/fields/VDropdown.vue
+++ b/src/components/fields/VDropdown.vue
@@ -1,30 +1,33 @@
 <template>
-    <label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex" :for="id">
-        <select
-            v-if="!allowcustom"
-            :id="id"
-            v-model="inner"
-            :name="name"
-            class="bg-white group-[.info]:bg-blue-200 rounded-lg focus:outline-none text-gray-600 text-left py-1 px-2 @sm:py-2 @sm:group-[.info]:py-1 text-sm @sm:text-base @sm:group-[.info]:text-sm @sm:px-3 @sm:group-[.info]:px-2 w-full"
-        >
-            <option :value="null">-- keine Angabe --</option>
-            <option v-for="(option, index) in options" :key="index" :value="option.id" v-text="option.name"></option>
-        </select>
-        <input
-            v-if="allowcustom"
-            v-model="inner"
-            class="bg-white group-[.info]:bg-blue-200 rounded-lg focus:outline-none text-gray-600 text-left py-1 px-2 @sm:py-2 @sm:group-[.info]:py-1 text-sm @sm:text-base @sm:group-[.info]:text-sm @sm:px-3 @sm:group-[.info]:px-2 w-full"
-            type="text"
-            :list="`${id}-list`"
-        />
-        <datalist v-if="allowcustom" :id="`${id}-list`">
-            <option v-for="(option, index) in options" :key="index" :value="option.id" v-text="option.name"></option>
-        </datalist>
-        <div v-if="hint" class="absolute right-0 mr-2 flex items-center h-full">
-            <hint :value="hint"></hint>
-        </div>
-        <field-label :name="label" class="group-[.info]:bg-blue-200" :required="required"></field-label>
-    </label>
+    <div>
+        <div class="text-sm text-gray-600 pb-3" v-text="intro" v-if="intro"></div>
+        <label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex" :for="id">
+            <select
+                v-if="!allowcustom"
+                :id="id"
+                v-model="inner"
+                :name="name"
+                class="bg-white group-[.info]:bg-blue-200 rounded-lg focus:outline-none text-gray-600 text-left py-1 px-2 @sm:py-2 @sm:group-[.info]:py-1 text-sm @sm:text-base @sm:group-[.info]:text-sm @sm:px-3 @sm:group-[.info]:px-2 w-full"
+            >
+                <option :value="null">-- keine Angabe --</option>
+                <option v-for="(option, index) in options" :key="index" :value="option.id" v-text="option.name"></option>
+            </select>
+            <input
+                v-if="allowcustom"
+                v-model="inner"
+                class="bg-white group-[.info]:bg-blue-200 rounded-lg focus:outline-none text-gray-600 text-left py-1 px-2 @sm:py-2 @sm:group-[.info]:py-1 text-sm @sm:text-base @sm:group-[.info]:text-sm @sm:px-3 @sm:group-[.info]:px-2 w-full"
+                type="text"
+                :list="`${id}-list`"
+            />
+            <datalist v-if="allowcustom" :id="`${id}-list`">
+                <option v-for="(option, index) in options" :key="index" :value="option.id" v-text="option.name"></option>
+            </datalist>
+            <div v-if="hint" class="absolute right-0 mr-2 flex items-center h-full">
+                <hint :value="hint"></hint>
+            </div>
+            <field-label :name="label" class="group-[.info]:bg-blue-200" :required="required"></field-label>
+        </label>
+    </div>
 </template>
 
 <script setup>
@@ -68,6 +71,10 @@ const props = defineProps({
         required: true,
         type: Boolean,
     },
+    intro: {
+        required: false,
+        default: () => '',
+    },
 });
 
 const inner = computed({