update fields

src/Eventform.ce.vue

@@ -4,56 +4,48 @@
             <div x-ref="eventFormContainer" class="bg-white rounded-lg shadow-lg" x-show="finished === false">
                 <div class="sticky top-0 z-10 hidden sm:flex overflow-hidden rounded-t-lg">
                     <template v-for="(section, index) in v.sections">
-                        <a
+                        <a href="#"
-                            href="#"
                             class="flex flex-col md:flex-row items-center justify-center md:justify-start px-2 flex-auto md:pl-6 h-12 md:h-16 transition duration-300 relative"
-                            :class="{'bg-primary': index <= active, 'bg-secondary': index > active}"
+                            :class="{ 'bg-primary': index <= active, 'bg-secondary': index > active }"
-                            @click.prevent="active = index"
+                            @click.prevent="active = index">
-                        >
+                            <svg preserveAspectRatio="none"
-                            <svg
-                                preserveAspectRatio="none"
                                 class="h-full w-3 absolute left-0 text-primary transition duration-300"
                                 viewBox="0 0 100 100"
-                                :class="{'opacity-100': index !== 0 && index - 1 <= active, 'opacity-0': !(index !== 0 && index - 1 <= active)}"
+                                :class="{ 'opacity-100': index !== 0 && index - 1 <= active, 'opacity-0': !(index !== 0 && index - 1 <= active) }">
-                            >
                                 <path d="M0,0 100,50 0,100" fill="currentColor"></path>
                             </svg>
-                            <span class="flex items-center justify-center w-4 md:w-6 h-4 md:h-6 rounded-full bg-circle text-font font-goudy transition duration-300" v-html="index + 1"></span>
+                            <span
+                                class="flex items-center justify-center w-4 md:w-6 h-4 md:h-6 rounded-full bg-circle text-font font-goudy transition duration-300"
+                                v-html="index + 1"></span>
                             <span class="text-sm text-font ml-2" v-html="section.name"></span>
                         </a>
                     </template>
                 </div>
                 <div class="flex items-center justify-between px-4 overflow-hidden rounded-t-lg sm:hidden bg-secondary">
-                    <a
+                    <a @click.prevent="back" href="#"
-                        @click.prevent="back"
-                        href="#"
                         class="flex items-center justify-center w-7 h-7 flex-none rounded-full bg-circle text-font transition duration-300 flex-none"
-                        :class="{'opacity-40': !backable}"
+                        :class="{ 'opacity-40': !backable }">
-                    >
                         <svg class="text-sm text-font fill-current rotate-90 w-3 h-3" viewBox="0 0 11.314 7.0710001">
                             <path d="M 4.95,6.364 5.657,7.071 11.314,1.414 9.9,0 5.657,4.242 1.414,0 0,1.414 Z" />
                         </svg>
                     </a>
                     <carousel v-model="active" class="grow">
-                        <slide v-for="(section, index) in v.sections" class="relative flex flex-no-wrap overflow-hidden" :key="index">
+                        <slide v-for="(section, index) in v.sections" class="relative flex flex-no-wrap overflow-hidden"
+                            :key="index">
                             <div class="flex-none w-full">
-                                <div
+                                <div @click="active = index" href="#"
-                                    @click="active = index"
+                                    class="flex flex-col md:flex-row items-center justify-center md:justify-start px-2 flex-auto md:pl-6 h-12 md:h-16 transition duration-300 relative">
-                                    href="#"
+                                    <span
-                                    class="flex flex-col md:flex-row items-center justify-center md:justify-start px-2 flex-auto md:pl-6 h-12 md:h-16 transition duration-300 relative"
+                                        class="flex items-center justify-center w-4 md:w-6 h-4 md:h-6 rounded-full bg-circle text-font transition duration-300"
-                                >
+                                        v-html="index + 1"></span>
-                                    <span class="flex items-center justify-center w-4 md:w-6 h-4 md:h-6 rounded-full bg-circle text-font transition duration-300" v-html="index + 1"></span>
                                     <span class="text-sm text-font" v-html="section.name"></span>
                                 </div>
                             </div>
                         </slide>
                     </carousel>
-                    <a
+                    <a @click.prevent="next" href="#"
-                        @click.prevent="next"
-                        href="#"
                         class="flex items-center justify-center w-7 h-7 flex-none rounded-full bg-circle text-font transition duration-300 flex-none"
-                        :class="{'opacity-40': !nextable}"
+                        :class="{ 'opacity-40': !nextable }">
-                    >
                         <svg class="text-sm text-font fill-current -rotate-90 w-3 h-3" viewBox="0 0 11.314 7.0710001">
                             <path d="M 4.95,6.364 5.657,7.071 11.314,1.414 9.9,0 5.657,4.242 1.414,0 0,1.414 Z" />
                         </svg>
@@ -64,9 +56,12 @@
                     <carousel v-model="active">
                         <slide :key="index" v-for="(section, index) in v.sections">
                             <div class="w-full flex-none px-3 xs:px-6">
-                                <div class="text-sm sm_text-base text-gray-800 leading-tight mb-5" v-text="section.intro"></div>
+                                <div class="text-sm sm_text-base text-gray-800 leading-tight mb-5" v-text="section.intro">
+                                </div>
                                 <div class="grid grid-cols-2 gap-4 mt-6">
-                                    <component :is="resolveComponentName(field)" :field="field" v-for="(field, findex) in section.fields" :key="findex" v-model="payload[field.key]"></component>
+                                    <component :is="resolveComponentName(field)" :field="field"
+                                        v-for="(field, findex) in section.fields" :key="findex"
+                                        v-model="payload[field.key]"></component>
                                 </div>
                             </div>
 
@@ -80,12 +75,13 @@
 </template>
 
 <script setup>
-import {computed, ref} from 'vue';
+import { computed, ref } from 'vue';
-import {Carousel, Slide} from 'vue3-carousel';
+import { Carousel, Slide } from 'vue3-carousel';
-import {camelCase} from 'change-case';
+import { camelCase } from 'change-case';
 import Navigation from './components/Navigation.vue';
 import useNav from './composables/useNav.js';
 import FieldText from './components/fields/Text.vue';
+import FieldSelect from './components/fields/Select.vue';
 
 const props = defineProps({
     eventId: {
@@ -104,7 +100,7 @@ const loaded = ref(false);
 
 const v = computed(() => JSON.parse(props.value));
 
-const {back, next, backable, nextable} = useNav(active, v.value.sections.length);
+const { back, next, backable, nextable } = useNav(active, v.value.sections.length);
 
 function resolveComponentName(field) {
     return {

src/components/FieldLabel.vue

@@ -0,0 +1,12 @@
+<template>
+    <span class="absolute text-gray-600 left-2 flex bg-white items-center -top-3 px-1 text-xs xs:text-sm">
+        <span v-text="name"></span> <span v-show="required" class="text-red-800 ml-1">*</span>
+    </span>
+</template>
+
+<script setup>
+defineProps({
+    name: {},
+    required: {},
+});
+</script>

src/components/fields/Select.vue

@@ -0,0 +1,39 @@
+<template>
+    <label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex" :for="field.key">
+        <select :name="field.key" :id="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" v-model="inner">
+            <option :value="null">-- kein --</option>
+            <option v-for="(option, index) in field.options" :key="index" :value="option" v-text="option"></option>
+        </select>
+        <field-label :name="field.name" :required="field.required"></field-label>
+    </label>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+import FieldLabel from '../FieldLabel.vue';
+
+const emit = defineEmits(['update:modelValue']);
+const props = defineProps({
+    modelValue: {
+        required: true,
+        validator: (value) => value === null || typeof value === 'string',
+    },
+    field: {
+        required: true,
+        validator: (value) =>
+            hasKeys(value, ['required', 'type', 'key', 'columns', 'name', 'default', 'options']) &&
+            typeof value.required === 'boolean' &&
+            typeof value.key === 'string' &&
+            value.key.length > 0 &&
+            typeof value.name === 'string' &&
+            value.name.length > 0 &&
+            hasKeys(value.columns, ['mobile', 'desktop', 'tablet']) &&
+            typeof value.options === 'object',
+    },
+});
+
+const inner = computed({
+    get: () => props.modelValue,
+    set: (v) => emit('update:modelValue', v),
+});
+</script>

src/components/fields/Text.vue

@@ -5,18 +5,17 @@
             v-model="inner"
             :name="field.key"
             type="text"
-            placeholder=" "
+            placeholder=""
-            class="bg-white rounded-lg focus:outline-none text-gray-600 text-left placeholder-white peer py-1 px-2 sm:py-2 text-sm sm:text-base sm:px-3 w-full"
+            class="bg-white rounded-lg focus:outline-none text-gray-600 text-left py-1 px-2 sm:py-2 text-sm sm:text-base sm:px-3 w-full"
         />
-        <span
+        <field-label :name="field.name" :required="field.required"></field-label>
-            class="transition-all duration-200 absolute text-gray-600 left-2 flex bg-white items-center -top-3 px-1 peer-placeholder-shown:bottom-0 peer-placeholder-shown:-top-0 text-xs xs:text-sm peer-placeholder-shown:text-sm xs:peer-placeholder-shown:text-base peer-focus:text-xs xs:peer-focus:text-sm peer-focus:-top-3 peer-focus:bottom-auto"
-            ><span v-text="field.name"></span> <span v-if="field.required" class="text-red-800 ml-1">*</span></span
-        >
     </label>
 </template>
 
 <script setup>
 import {computed} from 'vue';
+import FieldLabel from '../FieldLabel.vue';
+
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
     modelValue: {
@@ -26,7 +25,7 @@ const props = defineProps({
     field: {
         required: true,
         validator: (value) =>
-            hasKeys(value, ['required', 'key', 'columns', 'name', 'default']) &&
+            hasKeys(value, ['required', 'type', 'key', 'columns', 'name', 'default']) &&
             typeof value.required === 'boolean' &&
             typeof value.key === 'string' &&
             value.key.length > 0 &&