Add: Remove option in FormBuilder

resources/js/views/formtemplate/CheckboxesField.vue

@@ -1,20 +1,30 @@
 <template>
     <div class="space-y-1">
         <span class="text-xs font-semibold text-gray-400">Optionen</span>
+        <div v-for="(option, index) in modelValue.options" :key="index" class="flex space-x-2">
             <f-text
-            v-for="(option, index) in modelValue.options"
                 :id="`options-${index}`"
-            :key="index"
                 size="sm"
+                class="grow"
                 :name="`options-${index}`"
                 :model-value="option"
-            @update:modelValue="$emit('update:modelValue', {...props.modelValue, options: props.modelValue.options.toSpliced(index, 1, $event)})"
+                @update:modelValue="$emit('update:modelValue', {...props.modelValue, options: setOption(props.modelValue.options, index, $event)})"
             ></f-text>
-        <ui-icon-button icon="plus" @click="$emit('update:modelValue', {...modelValue, options: [...modelValue.options, '']})">Option einfügen</ui-icon-button>
+            <ui-action-button
+                tooltip="Löschen"
+                icon="trash"
+                class="btn-danger"
+                @click="$emit('update:modelValue', {...modelValue, options: removeOption(modelValue.options, index)})"
+            ></ui-action-button>
+        </div>
+        <ui-icon-button icon="plus" @click="$emit('update:modelValue', {...modelValue, options: addOption(modelValue.options)})">Option einfügen</ui-icon-button>
     </div>
 </template>
 
 <script setup>
+import useElements from './useElements.js';
+const {addOption, setOption, removeOption} = useElements();
+
 const props = defineProps({
     modelValue: {},
     meta: {},

resources/js/views/formtemplate/RadioField.vue

@@ -1,16 +1,23 @@
 <template>
     <div class="space-y-1">
         <span class="text-xs font-semibold text-gray-400">Optionen</span>
+        <div v-for="(option, index) in modelValue.options" :key="index" class="flex space-x-2">
             <f-text
-            v-for="(option, index) in modelValue.options"
                 :id="`options-${index}`"
-            :key="index"
                 size="sm"
+                class="grow"
                 :name="`options-${index}`"
                 :model-value="option"
-            @update:modelValue="$emit('update:modelValue', {...props.modelValue, options: props.modelValue.options.toSpliced(index, 1, $event)})"
+                @update:modelValue="$emit('update:modelValue', {...props.modelValue, options: setOption(props.modelValue.options, index, $event)})"
             ></f-text>
-        <ui-icon-button icon="plus" @click="$emit('update:modelValue', {...modelValue, options: [...modelValue.options, '']})">Option einfügen</ui-icon-button>
+            <ui-action-button
+                tooltip="Löschen"
+                icon="trash"
+                class="btn-danger"
+                @click="$emit('update:modelValue', {...modelValue, options: removeOption(modelValue.options, index)})"
+            ></ui-action-button>
+        </div>
+        <ui-icon-button icon="plus" @click="$emit('update:modelValue', {...modelValue, options: addOption(modelValue.options)})">Option einfügen</ui-icon-button>
     </div>
     <f-switch
         id="fieldrequired"
@@ -24,6 +31,9 @@
 </template>
 
 <script setup>
+import useElements from './useElements.js';
+const {addOption, setOption, removeOption} = useElements();
+
 const props = defineProps({
     modelValue: {},
     meta: {},

resources/js/views/formtemplate/useElements.js

@@ -0,0 +1,15 @@
+export default function useElements() {
+    function addOption(options) {
+        return [...options, ''];
+    }
+
+    function setOption(options, index, $event) {
+        return options.toSpliced(index, 1, $event);
+    }
+
+    function removeOption(options, index) {
+        return options.toSpliced(index, 1);
+    }
+
+    return {addOption, setOption, removeOption};
+}