Add payload from field keys

index.html

@@ -10,12 +10,12 @@
             style="--primary: hsl(181, 75%, 26%); --secondary: hsl(181, 75%, 35%); --font: hsl(181, 84%, 78%); --circle: hsl(181, 86%, 16%)"
             value='{"sections": [
             {"name": "Personal", "intro": "Jaöaöd", "fields": [
-                {"name": "Vorname", "type": "TextField", "columns": {"mobile": 2, "tablet": 2, "desktop": 3}, "default": "", "required": true},
-                {"name": "Essen", "type": "CheckboxesField", "columns": {"mobile": 2, "tablet": 2, "desktop": 3}, "default": [], "required": true, "options": ["lal", "fff", "ccc"]},
-                {"name": "Datenschutz", "description": "Ich akzeptire das abfghg", "type": "CheckboxField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": false, "required": true},
-                {"name": "Geschlecht", "type": "DropdownField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": null, "required": true, "options": ["A","Bb","Cc"]},
-                {"name": "Essgewohnheiten", "type": "RadioField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": null, "required": true, "options": ["A","Bb","Cc"]},
-                {"name": "Nachname", "type": "TextField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": "", "required": true}
+                {"key": "vorname", "name": "Vorname", "type": "TextField", "columns": {"mobile": 2, "tablet": 2, "desktop": 3}, "default": "", "required": true},
+                {"key": "essen", "name": "Essen", "type": "CheckboxesField", "columns": {"mobile": 2, "tablet": 2, "desktop": 3}, "default": [], "required": true, "options": ["lal", "fff", "ccc"]},
+                {"key": "datenschutz", "name": "Datenschutz", "description": "Ich akzeptire das abfghg", "type": "CheckboxField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": false, "required": true},
+                {"key": "geschlecht", "name": "Geschlecht", "type": "DropdownField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": null, "required": true, "options": ["A","Bb","Cc"]},
+                {"key": "essg", "name": "Essgewohnheiten", "type": "RadioField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": null, "required": true, "options": ["A","Bb","Cc"]},
+                {"key": "nachn", "name": "Nachname", "type": "TextField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": "", "required": true}
             ]},
             {"name": "Veranstaltung", "intro": "Jaöaöd", "fields": [
             ]},

package.json

@@ -14,7 +14,6 @@
     "devDependencies": {
         "@tailwindcss/container-queries": "^0.1.1",
         "@vitejs/plugin-vue": "^4.5.2",
-    "change-case": "^5.3.0",
         "vite": "^5.0.8",
         "vue3-carousel": "^0.3.1"
     }

src/Eventform.ce.vue

@@ -128,7 +128,6 @@
 <script setup>
 import {computed, ref} from 'vue';
 import {Carousel, Slide} from 'vue3-carousel';
-import {camelCase} from 'change-case';
 import Navigation from './components/Navigation.vue';
 import useNav from './composables/useNav.js';
 import FieldText from './components/fields/Text.vue';
@@ -184,14 +183,25 @@ const props = defineProps({
     fields: {},
 });
 
-const finished = ref(false);
 const active = ref(0);
 const payload = ref({});
 const loaded = ref(false);
 
-const v = computed(() => JSON.parse(props.value));
+const v = computed(() => {
+    loaded.value = false;
+    var values = JSON.parse(props.value);
+    var p = {};
+
+    values.sections.forEach(function (section) {
+        section.fields.forEach(function (field) {
+            p[field.key] = field.default;
+        });
+    });
+    payload.value = p;
+    loaded.value = true;
+    return values;
+});
 const f = computed(() => JSON.parse(props.fields));
-const addingFields = ref(false);
 
 const {back, next, backable, nextable} = useNav(active, v.value.sections.length);
 
@@ -206,26 +216,7 @@ function resolveComponentName(field) {
     }[field.type];
 }
 
-function generateDefaultValues() {
-    payload.value = {};
-    v.value.sections = v.value.sections.map(function (section) {
-        return {
-            ...section,
-            fields: section.fields.map(function (field) {
-                payload.value[camelCase(field.name)] = field.default;
-                return {
-                    ...field,
-                    key: camelCase(field.name),
-                };
-            }),
-        };
-    });
-}
-
 function submit() {
     console.log(payload.value);
 }
-
-generateDefaultValues();
-loaded.value = true;
 </script>

src/components/fields/Checkbox.vue

@@ -6,10 +6,9 @@
                 <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-2 w-2 h-2 absolute rounded block"></span>
                 <span class="pl-8 text-gray-600 text-sm @sm:text-base" v-text="field.description"></span>
+                <span v-show="field.required" class="text-red-800 ml-1">*</span>
             </label>
         </div>
-
-        <field-label :name="field.name" :required="field.required" inline></field-label>
     </div>
 </template>