adrema/resources/js/views/formtemplate/CheckboxesField.vue

<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
                :id="`options-${index}`"
                size="sm"
                class="grow"
                :model-value="option"
                @update:modelValue="$emit('update:modelValue', {...props.modelValue, options: setOption(props.modelValue.options, index, $event)})"
            ></f-text>
            <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>
        <f-text id="min" type="number" size="sm" label="Minimale Anzahl Elemente" :model-value="modelValue.min" @update:model-value="$emit('update:modelValue', {...modelValue, min: $event})"></f-text>
        <f-text
            id="max"
            type="number"
            size="sm"
            name="max"
            label="Maximale Anzahl Elemente"
            :model-value="modelValue.max"
            @update:model-value="$emit('update:modelValue', {...modelValue, max: $event})"
        ></f-text>
    </div>
</template>

<script lang="js" setup>
import useElements from './useElements.js';
const { addOption, setOption, removeOption } = useElements();

const props = defineProps({
    modelValue: {},
    meta: {},
    payload: {},
});

const emit = defineEmits(['update:modelValue']);
</script>