Add nami fields

src/EventForm.ce.vue

@@ -4,77 +4,81 @@
             <div class="bg-white @container rounded-lg shadow-lg" x-show="finished === false">
                 <div class="sticky top-0 z-10 hidden @sm:flex overflow-hidden rounded-t-lg h-12 @md:h-16">
                     <template v-for="(section, index) in v.sections">
-                        <a href="#"
+                        <a
+                            href="#"
                             class="flex flex-col @md:flex-row items-center justify-center @md:justify-start px-2 flex-auto @md:pl-6 h-full transition duration-300 relative"
                             :class="{
                                 'bg-primary': index <= active,
                                 'bg-secondary': index > active,
-                            }" @click.prevent="active = index">
-                            <svg preserveAspectRatio="none"
+                            }"
+                            @click.prevent="active = index"
+                        >
+                            <svg
+                                preserveAspectRatio="none"
                                 class="h-full w-3 absolute left-0 text-primary transition duration-300"
-                                viewBox="0 0 100 100" :class="{
+                                viewBox="0 0 100 100"
+                                :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>
                             <div v-if="editable" class="hidden @md:flex items-center h-full">
-                                <a href="#"
-                                    class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2"
-                                    @click.prevent.stop="$emit('editSection', index)">
+                                <a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('editSection', index)">
                                     <edit-icon class="w-3 h-3 fill-current"></edit-icon>
                                 </a>
-                                <a href="#"
-                                    class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2"
-                                    @click.prevent.stop="$emit('deleteSection', index)">
+                                <a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('deleteSection', index)">
                                     <delete-icon class="w-3 h-3 fill-current"></delete-icon>
                                 </a>
                             </div>
                         </a>
                     </template>
                     <div v-if="editable" class="hidden @md:flex items-center h-full absolute right-0 mr-6">
-                        <a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font"
-                            @click.prevent.stop="$emit('addSection')">
-                            <svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt"
-                                xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 fill-current">
+                        <a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font" @click.prevent.stop="$emit('addSection')">
+                            <svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 fill-current">
                                 <path
-                                    d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0" />
+                                    d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0"
+                                />
                             </svg>
                         </a>
                     </div>
                 </div>
                 <div class="flex items-center justify-between px-4 overflow-hidden rounded-t-lg @sm:hidden bg-secondary">
-                    <a href="#"
+                    <a
+                        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 }" @click.prevent="back">
+                        :class="{'opacity-40': !backable}"
+                        @click.prevent="back"
+                    >
                         <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>
                     <div class="overflow-hidden">
                         <carousel v-model="active">
-                            <slide v-for="(section, index) in v.sections" :key="index"
-                                class="relative flex flex-no-wrap overflow-hidden">
+                            <slide v-for="(section, index) in v.sections" :key="index" class="relative flex flex-no-wrap overflow-hidden">
                                 <div class="flex-none w-full">
-                                    <div href="#"
+                                    <div
+                                        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"
-                                        @click="active = index">
-                                        <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>
+                                        @click="active = index"
+                                    >
+                                        <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>
                     </div>
-                    <a href="#"
+                    <a
+                        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 }" @click.prevent="next">
+                        :class="{'opacity-40': !nextable}"
+                        @click.prevent="next"
+                    >
                         <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>
@@ -85,28 +89,25 @@
                     <carousel v-model="active">
                         <slide v-for="(section, index) in v.sections" :key="index">
                             <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 @sm:grid-cols-4 @lg:grid-cols-6 gap-4 mt-6 items-start">
-                                    <div v-for="(field, findex) in section.fields" :key="findex"
-                                        class="flex justify-stretch relative group" :class="{
+                                    <div
+                                        v-for="(field, findex) in section.fields"
+                                        :key="findex"
+                                        class="flex justify-stretch relative group"
+                                        :class="{
                                             'hover:ring-edit hover:ring-4': editable,
                                             [colClasses.mobile[field.columns.mobile]]: true,
                                             [colClasses.tablet[field.columns.tablet]]: true,
                                             [colClasses.desktop[field.columns.desktop]]: true,
-                                        }">
-                                        <component :is="resolveComponentName(field)" v-model="payload[field.key]"
-                                            :payload="payload" :field="field"></component>
-                                        <div v-if="editable"
-                                            class="right-0 top-0 -mr-2 -mt-2 absolute hidden space-x-2 group-hover:flex">
-                                            <a href="#"
-                                                class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2"
-                                                @click.prevent.stop="$emit('editField', index, findex)">
+                                        }"
+                                    >
+                                        <component :is="resolveComponentName(field)" v-model="payload[field.key]" :fields="allFields" :payload="payload" :field="field"></component>
+                                        <div v-if="editable" class="right-0 top-0 -mr-2 -mt-2 absolute hidden space-x-2 group-hover:flex">
+                                            <a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('editField', index, findex)">
                                                 <edit-icon class="w-3 h-3 fill-current"></edit-icon>
                                             </a>
-                                            <a href="#"
-                                                class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2"
-                                                @click.prevent.stop="$emit('deleteField', index, findex)">
+                                            <a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('deleteField', index, findex)">
                                                 <delete-icon class="w-3 h-3 fill-current"></delete-icon>
                                             </a>
                                         </div>
@@ -114,13 +115,11 @@
                                 </div>
 
                                 <div v-if="editable" class="flex justify-center mt-6 relative">
-                                    <a href="#"
-                                        class="bg-edit rounded-full flex w-8 h-8 items-center justify-center text-font"
-                                        @click.prevent="$emit('addField', index)">
-                                        <svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt"
-                                            xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-current">
+                                    <a href="#" class="bg-edit rounded-full flex w-8 h-8 items-center justify-center text-font" @click.prevent="$emit('addField', index)">
+                                        <svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-current">
                                             <path
-                                                d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0" />
+                                                d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0"
+                                            />
                                         </svg>
                                     </a>
                                 </div>
@@ -136,24 +135,16 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue';
-import { Carousel, Slide } from 'vue3-carousel';
+import {computed, ref, watch} from 'vue';
+import {Carousel, Slide} from 'vue3-carousel';
 import Navigation from './components/Navigation.vue';
 import useNav from './composables/useNav.js';
-import FieldText from './components/fields/Text.vue';
-import FieldDate from './components/fields/Date.vue';
-import FieldTextarea from './components/fields/Textarea.vue';
-import FieldDropdown from './components/fields/Dropdown.vue';
-import FieldGroup from './components/fields/Group.vue';
-import FieldCheckboxes from './components/fields/Checkboxes.vue';
-import FieldCheckbox from './components/fields/Checkbox.vue';
-import FieldNami from './components/fields/Nami.vue';
-import FieldRadio from './components/fields/Radio.vue';
 import EditIcon from './components/icons/EditIcon.vue';
 import DeleteIcon from './components/icons/DeleteIcon.vue';
 import useToastify from './composables/useToastify.js';
+import useFields from './composables/useFields.js';
 
-const { success, errorFromResponse } = useToastify();
+const {success, errorFromResponse} = useToastify();
 
 const emits = defineEmits(['addSection', 'editSection', 'deleteSection', 'addField', 'editField', 'deleteField', 'active']);
 
@@ -212,6 +203,13 @@ watch(active, function (newValue) {
     emits('active', v.value.sections.length ? active.value : null);
 });
 
+const allFields = computed(() => {
+    var fields = [];
+    v.value.sections.forEach((section) => section.fields.forEach((field) => fields.push(field)));
+
+    return fields;
+});
+
 function reload() {
     loaded.value = false;
     var values = window[props.configVarName] ? window[props.configVarName] : JSON.parse(props.value);
@@ -235,21 +233,8 @@ watch(
     (value) => reload(),
 );
 
-const { back, next, backable, nextable } = useNav(active, v.value.sections.length);
-
-function resolveComponentName(field) {
-    return {
-        TextField: FieldText,
-        DateField: FieldDate,
-        TextareaField: FieldTextarea,
-        DropdownField: FieldDropdown,
-        GroupField: FieldGroup,
-        RadioField: FieldRadio,
-        CheckboxesField: FieldCheckboxes,
-        CheckboxField: FieldCheckbox,
-        NamiField: FieldNami,
-    }[field.type];
-}
+const {back, next, backable, nextable} = useNav(active, v.value.sections.length);
+const {resolveComponentName} = useFields();
 
 async function submit() {
     try {

src/EventIndex.ce.vue

@@ -24,14 +24,14 @@
             </a>
         </div>
 
-        <popup v-if="visibleEvent !== null" :event="visibleEvent" :register-url="props.registerUrl" @close="hideEvent"> </popup>
+        <detail-popup v-if="visibleEvent !== null" :event="visibleEvent" :register-url="props.registerUrl" @close="hideEvent"> </detail-popup>
     </div>
 </template>
 
 <script setup>
 import {ref} from 'vue';
 import CalendarIcon from './components/icons/CalendarIcon.vue';
-import Popup from './components/Popup.vue';
+import DetailPopup from './components/DetailPopup.vue';
 
 const props = defineProps({
     indexUrl: {

src/components/DetailPopup.vue

@@ -0,0 +1,38 @@
+<template>
+    <popup :heading="event.name" @close="$emit('close')">
+        <div class="flex items-baseline text-sm">
+            <calendar-icon class="w-3 h-3 flex-none text-secondary"></calendar-icon>
+            <span class="text-sm font-semibold font-nunito text-gray-800 ml-2" v-text="event.dates"></span>
+        </div>
+
+        <div class="mt-3">
+            <img :src="event.image" class="hidden sm:block w-24 float-left h-24 rounded-full border-secondary border-4 shape-circle" />
+            <content class="text-gray-800 font-nunito" :modelValue="event.description"></content>
+        </div>
+        <div class="flex mt-3">
+            <a
+                :href="registerUrl.replace(':slug', event.slug)"
+                class="px-3 py-2 text-xs font-nunito font-semibold rounded sm:px-4 sm:py-2 sm:text-sm sm:rounded focus:ring-2 focus:ring-offset-1 focus:ring-primaryfg focus:outline-none bg-primary text-primaryfg"
+            >
+                Zur Anmeldung
+            </a>
+        </div>
+    </popup>
+</template>
+
+<script setup>
+import CalendarIcon from './icons/CalendarIcon.vue';
+import Content from './Content.vue';
+import Popup from './Popup.vue';
+
+const emit = defineEmits(['close']);
+const props = defineProps({
+    event: {
+        required: true,
+    },
+    registerUrl: {
+        required: true,
+        type: String,
+    },
+});
+</script>

src/components/Popup.vue

@@ -1,25 +1,8 @@
 <template>
-  <div class="flex fixed top-0 left-0 w-full h-full items-center justify-center p-6 z-40 bg-black/40"
-    @click.self="emit('close')">
-    <div
-      class="rounded bg-white p-4 shadow-2xl ring-1 ring-gray-900/5 relative text-gray-600 max-w-2xl max-h-full overflow-auto">
-      <h2 class="font-arvo text-primary text-sm md:text-base" v-text="event.name"></h2>
-      <div class="flex items-baseline text-sm">
-        <calendar-icon class="w-3 h-3 flex-none text-secondary"></calendar-icon>
-        <span class="text-sm font-semibold font-nunito text-gray-800 ml-2" v-text="event.dates"></span>
-      </div>
-
-      <div class="mt-3">
-        <img :src="event.image"
-          class="hidden sm:block w-24 float-left h-24 rounded-full border-secondary border-4 shape-circle" />
-        <content class="text-gray-800 font-nunito" :modelValue="event.description"></content>
-      </div>
-      <div class="flex mt-3">
-        <a :href="registerUrl.replace(':slug', event.slug)"
-          class="px-3 py-2 text-xs font-nunito font-semibold rounded sm:px-4 sm:py-2 sm:text-sm sm:rounded focus:ring-2 focus:ring-offset-1 focus:ring-primaryfg focus:outline-none bg-primary text-primaryfg">
-          Zur Anmeldung
-        </a>
-      </div>
+    <div class="flex fixed top-0 left-0 w-full h-full items-center justify-center p-6 z-40 bg-black/40" @click.self="emit('close')">
+        <div class="rounded bg-white p-4 shadow-2xl ring-1 ring-gray-900/5 relative text-gray-600 max-w-2xl max-h-full overflow-auto">
+            <h2 class="font-arvo text-primary text-sm md:text-base" v-if="heading" v-text="heading"></h2>
+            <slot></slot>
             <a class="absolute block mt-3 mr-3 right-0 top-0" href="#" @click.prevent="emit('close')">
                 <close-icon class="text-gray-700 w-5 h-5"></close-icon>
             </a>
@@ -28,18 +11,13 @@
 </template>
 
 <script setup>
-import CalendarIcon from "./icons/CalendarIcon.vue";
-import CloseIcon from "./icons/CloseIcon.vue";
-import Content from "./Content.vue";
+import CloseIcon from './icons/CloseIcon.vue';
 
-const emit = defineEmits(["close"]);
+const emit = defineEmits(['close']);
 const props = defineProps({
-  event: {
-    required: true,
-  },
-  registerUrl: {
-    required: true,
-    type: String,
+    heading: {
+        required: false,
+        default: () => '',
     },
 });
 </script>

src/components/fields/Checkbox.vue

@@ -1,12 +1,10 @@
 <template>
     <div class="relative">
         <div class="grid grid-cols-1 gap-2">
-            <label :for="field.key" class="p-0 block leading-none relative flex items-start">
-                <input :id="field.key" v-model="inner" type="checkbox" :name="field.key" 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 block top-0"></span>
-                <span
-                    class="peer-checked:bg-primary left-[0.5rem] top-[0.5rem] w-2 h-2 absolute rounded block top-0"></span>
+            <label :for="innerId" class="p-0 block leading-none relative flex items-start">
+                <input :id="innerId" v-model="inner" type="checkbox" :name="field.key" 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 block top-0"></span>
+                <span class="peer-checked:bg-primary left-[0.5rem] top-[0.5rem] w-2 h-2 absolute rounded block top-0"></span>
                 <span class="pl-8 pt-1 @sm:pt-0 text-gray-600 text-sm @sm:text-base">
                     <span v-text="field.description"></span>
                     <span v-show="field.required" class="text-red-800">*</span>
@@ -17,7 +15,7 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import {computed} from 'vue';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
@@ -36,8 +34,13 @@ const props = defineProps({
             typeof value.description === 'string' &&
             value.name.length > 0,
     },
+    id: {
+        required: false,
+    },
 });
 
+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/Checkboxes.vue

@@ -1,12 +1,9 @@
 <template>
     <div class="relative">
-        <div class="grid grid-cols-1 gap-2 mt-3">
-            <label v-for="(option, index) in field.options" :key="index" :for="`${field.key}-${index}`"
-                class="block relative flex items-start">
-                <input :id="`${field.key}-${index}`" v-model="inner" type="checkbox" :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 block"></span>
+        <div class="grid grid-cols-1 gap-2 pt-3">
+            <label v-for="(option, index) in field.options" :key="index" :for="`${innerId}-${index}`" class="block relative flex items-start">
+                <input :id="`${innerId}-${index}`" v-model="inner" type="checkbox" :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 block"></span>
                 <span class="peer-checked:bg-primary left-[0.5rem] top-[0.5rem] w-2 h-2 absolute rounded block"></span>
                 <span class="pl-8 pt-1 @sm:pt-0 text-gray-600 text-sm @sm:text-base" v-text="option"></span>
             </label>
@@ -17,7 +14,7 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import {computed} from 'vue';
 import FieldLabel from '../FieldLabel.vue';
 
 const emit = defineEmits(['update:modelValue']);
@@ -38,8 +35,13 @@ 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,
     set: (v) => emit('update:modelValue', v),

src/components/fields/Date.vue

@@ -1,13 +1,20 @@
 <template>
     <label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex">
-        <input :id="field.key" v-model="inner" :name="field.key" type="date" :max="max" placeholder=""
-            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" />
+        <input
+            :id="innerId"
+            v-model="inner"
+            :name="field.key"
+            type="date"
+            :max="max"
+            placeholder=""
+            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"
+        />
         <field-label :name="field.name" :required="field.required"></field-label>
     </label>
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import {computed} from 'vue';
 import FieldLabel from '../FieldLabel.vue';
 import dayjs from 'dayjs';
 
@@ -29,8 +36,13 @@ const props = defineProps({
             value.name.length > 0 &&
             hasKeys(value.columns, ['mobile', 'desktop', 'tablet']),
     },
+    id: {
+        required: false,
+    },
 });
 
+const innerId = computed(() => (props.id ? props.id : props.field.key));
+
 const max = computed(() => {
     return props.field.max_today ? dayjs().format('YYYY-MM-DD') : null;
 });

src/components/fields/Dropdown.vue

@@ -1,9 +1,6 @@
 <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">
+    <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="innerId" 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>
@@ -12,7 +9,7 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import {computed} from 'vue';
 import FieldLabel from '../FieldLabel.vue';
 
 const emit = defineEmits(['update:modelValue']);
@@ -33,8 +30,13 @@ 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,
     set: (v) => emit('update:modelValue', v),

src/components/fields/Group.vue

@@ -1,8 +1,12 @@
 <template>
-    <label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex"
-        :for="field.key">
-        <select :id="field.key" 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">
+    <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">-- kein --</option>
             <option v-for="(option, index) in options" :key="index" :value="option.id" v-text="option.name"></option>
         </select>
@@ -11,7 +15,7 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue';
+import {computed, ref, watch} from 'vue';
 import FieldLabel from '../FieldLabel.vue';
 
 const emit = defineEmits(['update:modelValue']);
@@ -32,8 +36,13 @@ const props = defineProps({
             hasKeys(value.columns, ['mobile', 'desktop', 'tablet']),
     },
     payload: {},
+    id: {
+        required: false,
+    },
 });
 
+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/Nami.vue

@@ -1,22 +1,35 @@
 <template>
-    <div class="relative w-full flex flex-col items-center">
+    <div class="relative w-full flex flex-col">
         <field-label :name="field.name" :required="false"></field-label>
-        <div v-for="(member, index) in inner" :key="index">
-            <label
-                class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex mt-2">
-                <input :id="`${field.key}-${index}`" v-model="member.id" :name="`${field.key}-${index}`" type="text"
+        <div v-for="(member, index) in inner" class="flex space-x-2 mt-6" :key="index">
+            <!--
+                            <label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex mt-2">
+                                <input
+                                    :id="`${field.key}-${index}`"
+                                    v-model="member.id"
+                                    :name="`${field.key}-${index}`"
+                                    type="text"
                                     placeholder=""
-                    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" />
+                                    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"
+                                />
+                                <field-label name="Mitgliedsnr" :required="true"></field-label>
                             </label>
+                -->
+            <div class="w-full" v-for="(memberField, memberIndex) in memberFields" :key="field.key">
+                <component :is="resolveComponentName(memberField)" :id="`${field.key}-${memberIndex}`" v-model="member[memberField.key]" :fields="fields" :payload="member" :field="memberField">
+                </component>
             </div>
-        <div class="bg-primary hover:bg-secondary px-4 py-2 shadow text-font leading-none cursor-pointer rounded-lg mt-5"
-            @click.prevent="addMember">Mitglied hinzufügen</div>
+        </div>
+        <button type="button" class="bg-primary hover:bg-secondary px-4 py-2 shadow text-font leading-none rounded-lg mt-5" @click.prevent="addMember">Mitglieder hinzufügen</button>
     </div>
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import {computed, ref} from 'vue';
 import FieldLabel from '../FieldLabel.vue';
+import useFields from '../../composables/useFields.js';
+
+const {resolveComponentName} = useFields();
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
@@ -28,10 +41,24 @@ const props = defineProps({
         required: true,
         validator: (value) => true,
     },
+    fields: {
+        required: true,
+    },
 });
 
+const model = ref(null);
+
+const defaultMember = computed(() => {
+    var fields = {};
+    memberFields.value.forEach((field) => (fields[field.key] = field.default));
+
+    return fields;
+});
+
+const memberFields = computed(() => props.fields.filter((field) => field.for_members === true && field.nami_type === null));
+
 function addMember() {
-    inner.value.push({ id: '' });
+    inner.value.push({id: '', ...defaultMember.value});
 }
 
 const inner = computed(
@@ -39,6 +66,6 @@ const inner = computed(
         get: () => props.modelValue,
         set: (v) => emit('update:modelValue', v),
     },
-    { deep: true }
+    {deep: true},
 );
 </script>

src/components/fields/Radio.vue

@@ -1,12 +1,9 @@
 <template>
     <div class="relative">
         <div class="grid grid-cols-1 gap-2 mt-3">
-            <label v-for="(option, index) in field.options" :key="index" :for="`${field.key}-${index}`"
-                class="block relative flex items-center">
-                <input :id="`${field.key}-${index}`" v-model="inner" 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>
+            <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="inner" 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>
@@ -17,7 +14,7 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import {computed} from 'vue';
 import FieldLabel from '../FieldLabel.vue';
 
 const emit = defineEmits(['update:modelValue']);
@@ -38,8 +35,13 @@ 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,
     set: (v) => emit('update:modelValue', v),

src/components/fields/Text.vue

@@ -1,13 +1,19 @@
 <template>
     <label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex">
-        <input :id="field.key" v-model="inner" :name="field.key" type="text" placeholder=""
-            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" />
+        <input
+            :id="innerId"
+            v-model="inner"
+            :name="field.key"
+            type="text"
+            placeholder=""
+            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"
+        />
         <field-label :name="field.name" :required="field.required"></field-label>
     </label>
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import {computed} from 'vue';
 import FieldLabel from '../FieldLabel.vue';
 
 const emit = defineEmits(['update:modelValue']);
@@ -27,8 +33,13 @@ const props = defineProps({
             value.name.length > 0 &&
             hasKeys(value.columns, ['mobile', 'desktop', 'tablet']),
     },
+    id: {
+        required: false,
+    },
 });
 
+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/Textarea.vue

@@ -1,13 +1,18 @@
 <template>
     <label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex">
-        <textarea :id="field.key" v-model="inner" :name="field.key" :rows="field.rows"
-            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" />
+        <textarea
+            :id="innerId"
+            v-model="inner"
+            :name="field.key"
+            :rows="field.rows"
+            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"
+        />
         <field-label :name="field.name" :required="field.required"></field-label>
     </label>
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import {computed} from 'vue';
 import FieldLabel from '../FieldLabel.vue';
 
 const emit = defineEmits(['update:modelValue']);
@@ -27,8 +32,13 @@ const props = defineProps({
             value.name.length > 0 &&
             hasKeys(value.columns, ['mobile', 'desktop', 'tablet']),
     },
+    id: {
+        required: false,
+    },
 });
 
+const innerId = computed(() => (props.id ? props.id : props.field.key));
+
 const inner = computed({
     get: () => props.modelValue,
     set: (v) => emit('update:modelValue', v),

src/composables/useFields.js

@@ -0,0 +1,27 @@
+import FieldText from '../components/fields/Text.vue';
+import FieldDate from '../components/fields/Date.vue';
+import FieldTextarea from '../components/fields/Textarea.vue';
+import FieldDropdown from '../components/fields/Dropdown.vue';
+import FieldGroup from '../components/fields/Group.vue';
+import FieldCheckboxes from '../components/fields/Checkboxes.vue';
+import FieldCheckbox from '../components/fields/Checkbox.vue';
+import FieldNami from '../components/fields/Nami.vue';
+import FieldRadio from '../components/fields/Radio.vue';
+
+export default function useFields(active, last) {
+    function resolveComponentName(field) {
+        return {
+            TextField: FieldText,
+            DateField: FieldDate,
+            TextareaField: FieldTextarea,
+            DropdownField: FieldDropdown,
+            GroupField: FieldGroup,
+            RadioField: FieldRadio,
+            CheckboxesField: FieldCheckboxes,
+            CheckboxField: FieldCheckbox,
+            NamiField: FieldNami,
+        }[field.type];
+    }
+
+    return {resolveComponentName};
+}