add field meta

app/Form/Fields/CheckboxesField.php

@@ -14,7 +14,7 @@ class CheckboxesField extends Field
     public static function meta(): array
     {
         return [
-            ['key' => 'options', 'default' => [], 'rules' => ['options' => 'array', 'options.*' => 'string'], 'label' => 'Optionen'],
+            ['key' => 'options', 'default' => [], 'rules' => ['options' => 'array', 'options.*' => 'required|string'], 'label' => 'Optionen'],
         ];
     }
 

resources/js/views/formtemplate/CheckboxField.vue

@@ -1,14 +1,21 @@
 <template>
-    <div>
-        <f-textarea
-            id="description"
-            label="Beschreibung"
-            size="sm"
-            name="description"
-            :model-value="modelValue.description"
-            @update:modelValue="$emit('update:modelValue', {...modelValue, description: $event})"
-        ></f-textarea>
-    </div>
+    <f-switch
+        id="fieldrequired"
+        v-model="modelValue.required"
+        label="Erforderlich"
+        size="sm"
+        name="fieldrequired"
+        inline
+        @update:modelValue="$emit('update:modelValue', {...modelValue, required: $event})"
+    ></f-switch>
+    <f-textarea
+        id="description"
+        label="Beschreibung"
+        size="sm"
+        name="description"
+        :model-value="modelValue.description"
+        @update:modelValue="$emit('update:modelValue', {...modelValue, description: $event})"
+    ></f-textarea>
 </template>
 
 <script setup>

resources/js/views/formtemplate/FormBuilder.vue

@@ -26,7 +26,6 @@
                     @submit="storeField"
                 >
                     <f-text id="fieldname" v-model="singleField.model.name" label="Name" size="sm" name="fieldname"></f-text>
-                    <f-switch id="fieldrequired" v-model="singleField.model.required" label="Erforderlich" size="sm" name="fieldrequired" inline></f-switch>
                     <component :is="fields[singleField.model.type]" v-model="singleField.model"></component>
                 </asideform>
             </div>
@@ -52,10 +51,11 @@ import {snakeCase} from 'change-case';
 import '!/eventform/dist/main.js';
 import Asideform from './Asideform.vue';
 import TextareaField from './TextareaField.vue';
-import DropdownField from './DropdownField.vue';
+import TextField from './TextField.vue';
+import DropdownField from './RadioField.vue';
 import RadioField from './RadioField.vue';
 import CheckboxField from './CheckboxField.vue';
-import CheckboxesField from './DropdownField.vue';
+import CheckboxesField from './CheckboxesField.vue';
 
 const sectionVisible = ref(-1);
 const singleSection = ref(null);
@@ -69,6 +69,7 @@ const emit = defineEmits(['submit', 'cancel']);
 
 const fields = {
     TextareaField: TextareaField,
+    TextField: TextField,
     DropdownField: DropdownField,
     RadioField: RadioField,
     CheckboxField: CheckboxField,

resources/js/views/formtemplate/RadioField.vue

@@ -12,6 +12,15 @@
         ></f-text>
         <ui-icon-button icon="plus" @click="$emit('update:modelValue', {...modelValue, options: [...modelValue.options, '']})">Option einfügen</ui-icon-button>
     </div>
+    <f-switch
+        id="fieldrequired"
+        v-model="modelValue.required"
+        label="Erforderlich"
+        size="sm"
+        name="fieldrequired"
+        inline
+        @update:modelValue="$emit('update:modelValue', {...modelValue, required: $event})"
+    ></f-switch>
 </template>
 
 <script setup>

resources/js/views/formtemplate/TextField.vue

@@ -0,0 +1,21 @@
+<template>
+    <f-switch
+        id="fieldrequired"
+        v-model="modelValue.required"
+        label="Erforderlich"
+        size="sm"
+        name="fieldrequired"
+        inline
+        @update:modelValue="$emit('update:modelValue', {...modelValue, required: $event})"
+    ></f-switch>
+</template>
+
+<script setup>
+const props = defineProps({
+    modelValue: {
+        validator: (v) => v === true || v === false,
+    },
+});
+
+const emit = defineEmits(['update:modelValue']);
+</script>

resources/js/views/formtemplate/TextareaField.vue

@@ -1,16 +1,14 @@
 <template>
-    <div>
-        <f-text
-            id="rows"
-            label="Zeilen"
-            size="sm"
-            name="rows"
-            :model-value="modelValue.rows"
-            type="number"
-            min="1"
-            @update:modelValue="$emit('update:modelValue', {...modelValue, rows: $event})"
-        ></f-text>
-    </div>
+    <f-text id="rows" label="Zeilen" size="sm" name="rows" :model-value="modelValue.rows" type="number" min="1" @update:modelValue="$emit('update:modelValue', {...modelValue, rows: $event})"></f-text>
+    <f-switch
+        id="fieldrequired"
+        v-model="modelValue.required"
+        label="Erforderlich"
+        size="sm"
+        name="fieldrequired"
+        inline
+        @update:modelValue="$emit('update:modelValue', {...modelValue, required: $event})"
+    ></f-switch>
 </template>
 
 <script setup>