From a4a2a2b3fd7a099cf1e5a9360d5d5450030bf673 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Thu, 12 Sep 2024 11:10:01 +0200
Subject: [PATCH] Add intro for text field

---
 src/components/fields/Text.vue  |  2 +-
 src/components/fields/VText.vue | 42 ++++++++++++++++++++-------------
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/components/fields/Text.vue b/src/components/fields/Text.vue
index 411ea94..eba3ae3 100644
--- a/src/components/fields/Text.vue
+++ b/src/components/fields/Text.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-text type="text" :required="field.required" :name="field.key" :label="field.name" :id="field.key" :hint="field.hint" v-model="inner"></v-text>
+    <v-text type="text" :required="field.required" :name="field.key" :label="field.name" :id="field.key" :hint="field.hint" :intro="field.intro" v-model="inner"></v-text>
 </template>
 
 <script setup>
diff --git a/src/components/fields/VText.vue b/src/components/fields/VText.vue
index 38bdfb8..2e49e6f 100644
--- a/src/components/fields/VText.vue
+++ b/src/components/fields/VText.vue
@@ -1,21 +1,24 @@
 <template>
-    <label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex">
-        <input
-            :id="id"
-            v-model="inner"
-            :name="name"
-            :min="min"
-            :max="presentMax"
-            :type="type"
-            placeholder=""
-            class="bg-white group-[.info]:bg-blue-200 rounded-lg focus:outline-none text-gray-600 text-left w-full py-1 @sm:py-2 @sm:group-[.box]:py-1 px-2 @sm:px-3 @sm:group-[.box]:px-2 text-sm @sm:text-base @sm:group-[.box]:text-sm"
-            @keypress="$emit('keypress', $event)"
-        />
-        <div v-if="hint" class="absolute right-0 mr-2 flex items-center h-full">
-            <hint :value="hint"></hint>
-        </div>
-        <field-label :name="label" :required="required"></field-label>
-    </label>
+    <div>
+        <div class="text-sm text-gray-600 mb-4" 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">
+            <input
+                :id="id"
+                v-model="inner"
+                :name="name"
+                :min="min"
+                :max="presentMax"
+                :type="type"
+                placeholder=""
+                class="bg-white group-[.info]:bg-blue-200 rounded-lg focus:outline-none text-gray-600 text-left w-full py-1 @sm:py-2 @sm:group-[.box]:py-1 px-2 @sm:px-3 @sm:group-[.box]:px-2 text-sm @sm:text-base @sm:group-[.box]:text-sm"
+                @keypress="$emit('keypress', $event)"
+            />
+            <div v-if="hint" class="absolute right-0 mr-2 flex items-center h-full">
+                <hint :value="hint"></hint>
+            </div>
+            <field-label :name="label" :required="required"></field-label>
+        </label>
+    </div>
 </template>
 
 <script setup>
@@ -70,6 +73,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 presentMax = computed(() => {