Add VDropdown for Group

src/components/fields/Group.vue

@@ -1,23 +1,19 @@
 <template>
-    <label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex" :for="field.key">
-        <select
-            :id="innerId"
-            v-model="inner"
-            :disabled="disabled"
-            :name="field.key"
-            class="bg-white rounded-lg focus:outline-none text-gray-600 text-left peer py-1 px-2 @sm:py-2 text-sm @sm:text-base @sm:px-3 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>
-            <option v-if="field.has_empty_option" :value="-1" v-text="field.empty_option_value"></option>
-        </select>
-        <field-label :name="field.name" :required="field.required"></field-label>
-    </label>
+    <v-dropdown
+        v-model="inner"
+        :label="field.name"
+        :id="field.key"
+        :name="field.key"
+        :options="options"
+        :required="field.required"
+        :allowcustom="false"
+        :empty-option-value="field.empty_option_value"
+    ></v-dropdown>
 </template>
 
 <script setup>
 import {computed, ref, watch} from 'vue';
-import FieldLabel from '../FieldLabel.vue';
+import VDropdown from './VDropdown.vue';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
@@ -44,8 +40,6 @@ const props = defineProps({
     },
 });
 
-const innerId = computed(() => (props.id ? props.id : props.field.key));
-
 const inner = computed({
     get: () => props.modelValue,
     set: (v) => emit('update:modelValue', v),

src/components/fields/VDropdown.vue

@@ -11,6 +11,7 @@
             >
                 <option :value="null">-- keine Angabe --</option>
                 <option v-for="(option, index) in options" :key="index" :value="option.id" v-text="option.name"></option>
+                <option v-if="emptyOptionValue" :value="-1" v-text="emptyOptionValue"></option>
             </select>
             <input
                 v-if="allowcustom"
@@ -25,7 +26,7 @@
             <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>
+            <field-label :name="label" :required="required"></field-label>
         </label>
     </div>
 </template>
@@ -39,7 +40,7 @@ const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
     modelValue: {
         required: true,
-        validator: (value) => value === null || typeof value === 'string',
+        validator: (value) => value === null || typeof value === 'string' || typeof value === 'number',
     },
     required: {
         required: false,
@@ -50,6 +51,10 @@ const props = defineProps({
         required: true,
         type: String,
     },
+    emptyOptionValue: {
+        required: false,
+        default: () => '',
+    },
     id: {
         required: true,
         type: String,