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

<script setup lang="ts">
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: string) => ['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,
    get: () => {
        // const ids = props.modelValue.map((obj) => obj.id);
        // return ids;
        if (Array.isArray(props.modelValue)) {
            if (props.modelValue.every((item) => typeof item === 'number')) {
                return props.modelValue;
            } else if (props.modelValue.every((item) => hasIdAttribute(item))) {
                const ids = props.modelValue.map((obj) => obj.id.toString());
                return ids;
            }
            return props.modelValue;
        }
        // return props.modelValue;
    },
    set: (value) => {
        emit('update:modelValue', value);
    },
});

// Define a type guard to check if an object has an 'id' attribute
// function hasIdAttribute(obj: any): obj is { id: any } {
//   return typeof obj === 'object' && 'id' in obj;
// }

const hasIdAttribute = (obj: any): obj is { id: any } => {
    return typeof obj === 'object' && 'id' in obj;
};
</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>