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

<script setup lang="ts">
import { computed, ref } from 'vue';
import FormCheckRadio from '@/Components/FormCheckRadio.vue';
import BaseButton from '@/Components/BaseButton.vue';
import FormControl from '@/Components/FormControl.vue';
import { mdiPlusCircle } from '@mdi/js';
const props = defineProps({
    options: {
        type: Object,
        default: () => { },
    },
    allowManualAdding: {
        type: Boolean,
        default: false,
    },
    manualAddingPlaceholder: {
        type: String,
        default: 'Add manually',
        required: false,
    },
    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;
};

const newOption = ref<string>('');
const addOption = () => {
    if (newOption.value && !props.options[newOption.value]) {
        props.options[newOption.value] = newOption.value;
        newOption.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" -->
        <div v-if="allowManualAdding && type === 'checkbox'" class="flex items-center mt-2 mb-2">
            <FormControl v-model="newOption" :placeholder="manualAddingPlaceholder" class="mr-2" />
            <BaseButton small rounded-full color="info" :icon="mdiPlusCircle" @click.prevent="addOption" />
        </div>
        <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>