Add custom value

index.html

@@ -86,7 +86,8 @@
             "a",
             "v"
           ],
-          "key": "dropdown"
+          "key": "dropdown",
+          "allowcustom": false
         },
         {
           "name": "radio",
@@ -106,7 +107,8 @@
             "a",
             "v"
           ],
-          "key": "radio"
+          "key": "radio",
+          "allowcustom": false
         },
         {
           "name": "text",
@@ -157,7 +159,7 @@
           "special_type": null,
           "key": "numerisch",
           "min": null,
-          "max": 7
+          "max": "7"
         }
       ]
     }

src/components/fields/Dropdown.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-dropdown v-model="inner" :label="field.name" :id="innerId" :name="innerId" :options="innerOptions" :required="field.required" :hint="field.hint"></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"></v-dropdown>
 </template>
 
 <script setup>
@@ -15,7 +15,7 @@ const props = defineProps({
     field: {
         required: true,
         validator: (value) =>
-            hasKeys(value, [...globalFieldRules(), 'required', 'options']) &&
+            hasKeys(value, [...globalFieldRules(), 'required', 'options', 'allowcustom']) &&
             typeof value.required === 'boolean' &&
             typeof value.key === 'string' &&
             value.key.length > 0 &&

src/components/fields/VDropdown.vue

@@ -1,23 +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'"
             :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="inner"
+            v-model="selected"
         >
             <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>
         <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} from 'vue';
+import {computed, ref, watch} from 'vue';
 import FieldLabel from '../FieldLabel.vue';
 import Hint from '../Hint.vue';
 
@@ -53,10 +64,27 @@ const props = defineProps({
         validator: (value) => value === null || typeof value === 'string',
         default: () => null,
     },
+    allowcustom: {
+        required: true,
+        validator: (value) => typeof value === 'boolean',
+    },
 });
 
-const inner = computed({
+const selected = ref(props.modelValue === null || props.field.options.includes(props.modelValue) ? props.modelValue : 'custom-value-selected');
-    get: () => props.modelValue,
+watch(selected, (newValue) => {
-    set: (v) => emit('update:modelValue', v),
+    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);
+    },
 });
 </script>