tethys.backend/resources/js/Components/FormCheckRadioGroup.vue

<script setup>
import { computed } from 'vue';
import FormCheckRadio from '@/Components/FormCheckRadio.vue';
const props = defineProps({
    options: {
        type: Object,
        default: () => {},
    },
    name: {
        type: String,
        required: true,
    },
    type: {
        type: String,
        default: 'checkbox',
        validator: (value) => ['checkbox', 'radio', 'switch'].includes(value),
    },
    componentClass: {
        type: String,
        default: null,
    },
    isColumn: Boolean,
    modelValue: {
        type: [Array, String, Number, Boolean, Object],
        default: null,
    },
});
const emit = defineEmits(['update:modelValue']);
const computedValue = computed({
    get: () => props.modelValue,
    set: (value) => {
        emit('update:modelValue', value);
    },
});
</script>

<template>
    <div class="flex justify-start flex-wrap -mb-3" :class="{ 'flex-col': isColumn }">
        <!-- :input-value="key" -->
        <!-- :label="value" -->
        <!-- :input-value="value.id"
      :label="value.name" -->
        <FormCheckRadio
            v-for="(value, key) in options"
            :key="key"
            v-model="computedValue"
            :type="type"
            :name="name"
            :input-value="key"
            :label="value"
            :class="componentClass"
        />
    </div>
</template>