<script setup>
import { computed } from 'vue';

const model = defineModel({ type: [Number, Boolean] });
const $props = defineProps({
    info: {
        type: String,
        default: null,
    },
});

const checkboxModel = computed({
    get() {
        if (typeof model.value === 'number') {
            return model.value !== 0;
        }
        return model.value;
    },
    set(value) {
        if (typeof model.value === 'number') {
            model.value = value ? 1 : 0;
        } else {
            model.value = value;
        }
    },
});
</script>
<template>
    <div>
        <QCheckbox v-bind="$attrs" v-model="checkboxModel" />
        <QIcon
            v-if="info"
            v-bind="$attrs"
            class="cursor-info q-ml-sm"
            name="info"
            size="sm"
        >
            <QTooltip>
                {{ info }}
            </QTooltip>
        </QIcon>
    </div>
</template>
