Add radio file

src/EventForm.ce.vue

@@ -133,19 +133,7 @@
                             <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                         </svg>
                     </div>
-                    <div class="isolate self-center justify-self-end row-span-2 sm:pt-8 sm:pb-8 relative -right-3">
+                    <div class="isolate self-center justify-self-end row-span-2 sm:pt-8 sm:pb-8 relative -right-3"></div>
-                        <!--
-                                                        <div class="absolute right-0 top-0 h-full flex items-center justify-end">
-                                                            <div class="bg-primary w-96 h-96 flex [clip-path:circle(50%_at_110%_50%)] sm:[clip-path:circle(50%_at_80%_50%)]"></div>
-                                                        </div>
-                                                            <div class="overflow-hidden rounded-l-lg rotate-2 shadow relative z-10 -left-2">
-                                                                <img class="w-64 h-32 object-cover" src="" />
-                                                            </div>
-                                                            <div class="overflow-hidden rounded-l-lg -rotate-2 shadow relative left-2">
-                                                                <img class="w-64 h-32 object-cover" src="" />
-                                                            </div>
-                                                            -->
-                    </div>
                     <div class="self-end flex-grow pb-8 pl-8 pr-8 sm:pr-0 pt-6 sm:pt-0">
                         <div class="font-bold text-xl">Vielen Dank für deine Anmeldung.</div>
                     </div>

src/components/fields/Radio.vue

@@ -1,36 +1,10 @@
 <template>
-    <div class="relative">
+    <v-radio :label="field.name" :options="field.options" :allowcustom="field.allowcustom" :intro="field.intro" v-model="inner" :hint="field.hint" :id="field.key" :required="field.required"></v-radio>
-        <field-label :name="field.name" :required="field.required" :hint="field.hint" :button="modelValue === null ? '' : 'Auswahl löschen'" @buttonclick="selected = null" inline></field-label>
-        <div class="grid grid-cols-1 gap-2 pt-1">
-            <div class="text-sm text-gray-600" v-text="field.intro" v-if="field.intro"></div>
-            <label v-for="(option, index) in field.options" :key="index" :for="`${innerId}-${index}`" class="block relative flex items-center">
-                <input :id="`${innerId}-${index}`" v-model="selected" type="radio" :name="field.key" :value="option" class="peer absolute invisible" />
-                <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded-full block"></span>
-                <span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded-full block"></span>
-                <span class="pl-8 text-gray-600 text-sm @sm:text-base" v-text="option"></span>
-            </label>
-            <label v-if="field.allowcustom" :for="`${innerId}-custom-value-selected`" class="block relative flex items-center">
-                <input :id="`${innerId}-custom-value-selected`" v-model="selected" type="radio" :name="field.key" value="custom-value-selected" class="peer absolute invisible" />
-                <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded-full block"></span>
-                <span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded-full block"></span>
-
-                <span class="ml-8 w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex h-6">
-                    <input
-                        :id="`${innerId}-custom-value`"
-                        v-model="customValue"
-                        :name="`${innerId}-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-[.box]:py-1 px-2 @sm:px-3 @sm:group-[.box]:px-2 text-sm @sm:text-base @sm:group-[.box]:text-sm"
-                    />
-                </span>
-            </label>
-        </div>
-    </div>
 </template>
 
 <script setup>
-import {computed, ref, watch} from 'vue';
+import {computed} from 'vue';
-import FieldLabel from '../FieldLabel.vue';
+import VRadio from './VRadio.vue';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
@@ -51,28 +25,10 @@ const props = defineProps({
             hasKeys(value.columns, ['mobile', 'desktop', 'tablet']) &&
             typeof value.options === 'object',
     },
-    id: {
-        required: false,
-    },
 });
 
-const innerId = computed(() => (props.id ? props.id : props.field.key));
+const inner = computed({
-
+    get: () => props.modelValue,
-const selected = ref(props.modelValue === null || props.field.options.includes(props.modelValue) ? props.modelValue : 'custom-value-selected');
+    set: (v) => emit('update:modelValue', v),
-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);
-    },
 });
 </script>

src/components/fields/VRadio.vue

@@ -0,0 +1,83 @@
+<template>
+    <div class="relative">
+        <field-label :name="label" :required="required" :hint="hint" :button="modelValue === null ? '' : 'Auswahl löschen'" @buttonclick="selected = null" inline></field-label>
+        <div class="grid grid-cols-1 gap-2 pt-1">
+            <div class="text-sm text-gray-600" v-text="intro" v-if="intro"></div>
+            <label v-for="(option, index) in innerOptions" :key="index" :for="`${id}-${index}`" class="block relative flex items-center">
+                <input :id="`${id}-${index}`" v-model="selected" type="radio" :name="id" :value="option.id" class="peer absolute invisible" />
+                <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded-full block"></span>
+                <span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded-full block"></span>
+                <span v-if="option.iscustom" class="ml-8 w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex h-6">
+                    <input
+                        :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-[.box]:py-1 px-2 @sm:px-3 @sm:group-[.box]:px-2 text-sm @sm:text-base @sm:group-[.box]:text-sm"
+                    />
+                </span>
+                <span v-else class="pl-8 text-gray-600 text-sm @sm:text-base" v-text="option.name"></span>
+            </label>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import {computed, ref, watch} from 'vue';
+import FieldLabel from '../FieldLabel.vue';
+
+const emit = defineEmits(['update:modelValue']);
+const props = defineProps({
+    label: {
+        required: true,
+    },
+    required: {
+        required: true,
+    },
+    hint: {
+        required: true,
+    },
+    modelValue: {
+        required: true,
+        validator: (value) => value === null || typeof value === 'string',
+    },
+    intro: {
+        required: true,
+    },
+    options: {
+        required: true,
+    },
+    allowcustom: {
+        required: true,
+    },
+    id: {
+        required: true,
+    },
+});
+
+const innerOptions = computed(() => {
+    var fieldValues = props.options.map(function (option) {
+        return {id: option, name: option, iscustom: false};
+    });
+
+    if (props.allowcustom) {
+        fieldValues.push({id: 'custom-value-selected', iscustom: true});
+    }
+
+    return fieldValues;
+});
+
+const optionIds = computed(() => innerOptions.value.map((option) => option.id));
+
+const selected = ref(props.modelValue === null || optionIds.value.includes(props.modelValue) ? props.modelValue : 'custom-value-selected');
+watch(selected, (newValue) => {
+    customValue.value = newValue === 'custom-value-selected' ? '' : newValue;
+});
+
+const customValue = computed({
+    get: () => (selected.value === 'custom-value-selected' ? props.modelValue : ''),
+    set: (v) => {
+        return emit('update:modelValue', v);
+    },
+});
+</script>