feat: Add visibilityConditions for checkboxes and radio gorups, update seeds

legalconsenthub/app/components/formelements/TheCheckbox.vue

@@ -3,20 +3,40 @@
 </template>
 
 <script setup lang="ts">
-import type { FormOptionDto } from '~~/.api-client'
+import type { FormElementDto, FormOptionDto } from '~~/.api-client'
+import { useFormElementVisibility } from '~/composables/useFormElementVisibility'
 
 const props = defineProps<{
   formOptions: FormOptionDto[]
+  allFormElements?: FormElementDto[]
 }>()
 
 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 })))
+const { isFormOptionVisible } = useFormElementVisibility()
+
+const visibleOptions = computed(() => {
+  if (!props.allFormElements) return props.formOptions
+  return props.formOptions.filter((opt) => isFormOptionVisible(opt.visibilityConditions, props.allFormElements!))
+})
+
+// Auto-clear hidden options that are still selected
+watchEffect(() => {
+  if (!props.allFormElements) return
+  const hiddenSelected = props.formOptions.filter(
+    (opt) => opt.value === 'true' && !isFormOptionVisible(opt.visibilityConditions, props.allFormElements!)
+  )
+  if (hiddenSelected.length === 0) return
+  emit(
+    'update:formOptions',
+    props.formOptions.map((opt) => (hiddenSelected.includes(opt) ? { ...opt, value: 'false' } : opt))
+  )
+})
+
+const items = computed(() => visibleOptions.value.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[]) => {

legalconsenthub/app/components/formelements/TheRadioGroup.vue

@@ -3,19 +3,41 @@
 </template>
 
 <script setup lang="ts">
-import type { FormOptionDto } from '~~/.api-client'
+import type { FormElementDto, FormOptionDto } from '~~/.api-client'
+import { useFormElementVisibility } from '~/composables/useFormElementVisibility'
 
 const props = defineProps<{
   label?: string
   formOptions: FormOptionDto[]
+  allFormElements?: FormElementDto[]
 }>()
 
 const emit = defineEmits<{
   (e: 'update:formOptions', value: FormOptionDto[]): void
 }>()
 
+const { isFormOptionVisible } = useFormElementVisibility()
+
+const visibleOptions = computed(() => {
+  if (!props.allFormElements) return props.formOptions
+  return props.formOptions.filter((opt) => isFormOptionVisible(opt.visibilityConditions, props.allFormElements!))
+})
+
+// Auto-clear selected option if it becomes hidden
+watchEffect(() => {
+  if (!props.allFormElements) return
+  const selectedOption = props.formOptions.find((opt) => opt.value === 'true')
+  if (!selectedOption) return
+  if (!isFormOptionVisible(selectedOption.visibilityConditions, props.allFormElements!)) {
+    emit(
+      'update:formOptions',
+      props.formOptions.map((opt) => ({ ...opt, value: 'false' }))
+    )
+  }
+})
+
 // Our "label" is the "value" of the radio button
-const items = computed(() => props.formOptions.map((option) => ({ label: option.label, value: option.label })))
+const items = computed(() => visibleOptions.value.map((option) => ({ label: option.label, value: option.label })))
 
 const modelValue = computed({
   get: () => props.formOptions.find((option) => option.value === 'true')?.label,