From 846f2697d3a91d47232240b9dc95ed74f5420506 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Wed, 17 Apr 2024 20:23:42 +0200
Subject: [PATCH] Add datalist for dropdown

---
 src/components/fields/VDropdown.vue | 49 +++++++++++------------------
 1 file changed, 18 insertions(+), 31 deletions(-)

diff --git a/src/components/fields/VDropdown.vue b/src/components/fields/VDropdown.vue
index 0e21e14..dae04cb 100644
--- a/src/components/fields/VDropdown.vue
+++ b/src/components/fields/VDropdown.vue
@@ -1,34 +1,34 @@
 <template>
     <label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex" :for="id">
         <select
-            v-if="selected !== 'custom-value-selected'"
+            v-if="!allowcustom"
             :name="name"
             :id="id"
-            class="bg-white group-[.info]:bg-blue-200 rounded-lg focus:outline-none text-gray-600 text-left peer 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"
-            v-model="selected"
+            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"
+            v-model="inner"
         >
             <option :value="null">-- kein --</option>
             <option v-for="(option, index) in options" :key="index" :value="option.id" v-text="option.name"></option>
-            <option v-if="allowcustom" value="custom-value-selected">eigene Eingabe</option>
         </select>
+        <input
+            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"
+            v-if="allowcustom"
+            type="text"
+            :list="`${id}-list`"
+            v-model="inner"
+        />
+        <datalist v-if="allowcustom" :id="`${id}-list`">
+            <option>lala</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>
-
-        <input
-            v-if="selected === 'custom-value-selected'"
-            :id="`${id}-custom-value`"
-            v-model="customValue"
-            :name="`${id}-custom-value`"
-            placeholder="eigener Wert"
-            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-[.info]:py-1 px-2 @sm:px-3 @sm:group-[.info]:px-2 text-sm @sm:text-base @sm:group-[.info]:text-sm"
-        />
     </label>
 </template>
 
 <script setup>
-import {computed, ref, watch} from 'vue';
+import {computed} from 'vue';
 import FieldLabel from '../FieldLabel.vue';
 import Hint from '../Hint.vue';
 
@@ -66,25 +66,12 @@ const props = defineProps({
     },
     allowcustom: {
         required: true,
-        validator: (value) => typeof value === 'boolean',
+        type: Boolean,
     },
 });
 
-const selected = ref(props.modelValue === null || props.field.options.includes(props.modelValue) ? props.modelValue : 'custom-value-selected');
-watch(selected, (newValue) => {
-    customValue.value = newValue === 'custom-value-selected' ? '' : newValue;
-});
-
-const customValue = computed({
-    get: () => {
-        if (selected.value === 'custom-value-selected') {
-            return props.modelValue;
-        }
-
-        return '';
-    },
-    set: (v) => {
-        return emit('update:modelValue', v);
-    },
+const inner = computed({
+    get: () => props.modelValue,
+    set: (v) => emit('update:modelValue', v),
 });
 </script>