Files
gremiumhub/legalconsenthub/app/components/formelements/TheCheckbox.vue

31 lines
965 B
Vue

<template>
<UCheckboxGroup v-model="modelValue" :items="items" />
</template>
<script setup lang="ts">
import type { FormOptionDto } from '~~/.api-client'
const props = defineProps<{
formOptions: FormOptionDto[]
}>()
const emit = defineEmits<{
(e: 'update:formOptions', value: FormOptionDto[]): void
}>()
// Map options to items format expected by UCheckboxGroup
const items = computed(() => props.formOptions.map((option) => ({ label: option.label, value: option.label })))
// Model value is an array of labels for checkboxes where value === 'true'
const modelValue = computed({
get: () => props.formOptions.filter((option) => option.value === 'true').map((option) => option.label),
set: (selectedLabels: string[]) => {
const updatedModelValue = props.formOptions.map((option) => ({
...option,
value: selectedLabels.includes(option.label) ? 'true' : 'false'
}))
emit('update:formOptions', updatedModelValue)
}
})
</script>