feat(#13): Show form elements depending on other form element values

legalconsenthub/app/components/FormStepperWithNavigation.vue

@@ -8,25 +8,31 @@
       {{ currentFormElementSection.title }}
     </h1>
 
-    <template v-if="currentFormElementSection?.formElementSubSections">
-      <UCard
-        v-for="subsection in currentFormElementSection.formElementSubSections"
-        :key="subsection.id"
-        variant="subtle"
-        class="mb-6"
-      >
-        <div class="mb-4">
-          <h2 class="text-lg font-semibold text-highlighted">{{ subsection.title }}</h2>
-          <p v-if="subsection.subtitle" class="text-sm text-dimmed">{{ subsection.subtitle }}</p>
-        </div>
+    <UCard
+      v-for="subsection in visibleSubsections"
+      :key="subsection.id"
+      variant="subtle"
+      class="mb-6"
+    >
+      <div class="mb-4">
+        <h2 class="text-lg font-semibold text-highlighted">{{ subsection.title }}</h2>
+        <p v-if="subsection.subtitle" class="text-sm text-dimmed">{{ subsection.subtitle }}</p>
+      </div>
         <FormEngine
           v-model="subsection.formElements"
+          :visibility-map="visibilityMap"
           :application-form-id="applicationFormId"
           :disabled="disabled"
           @add:input-form="(position) => handleAddInputForm(position, subsection.id)"
         />
-      </UCard>
-    </template>
+    </UCard>
+
+    <UCard v-if="visibleSubsections.length === 0" variant="subtle" class="mb-6">
+      <div class="text-center py-8 text-dimmed">
+        <UIcon name="i-lucide-eye-off" class="w-12 h-12 mx-auto mb-3 opacity-50" />
+        <p>{{ $t('applicationForms.noVisibleElements') }}</p>
+      </div>
+    </UCard>
 
     <div class="flex gap-2 justify-between">
       <UButton leading-icon="i-lucide-arrow-left" :disabled="!stepper?.hasPrev" @click="handleNavigate('backward')">
@@ -76,6 +82,30 @@ const { stepper, activeStepperItemIndex, stepperItems, currentFormElementSection
   computed(() => props.formElementSections)
 )
 
+const allFormElements = computed(() => {
+  return props.formElementSections.flatMap(section =>
+    section.formElementSubSections?.flatMap(subsection =>
+      subsection.formElements
+    ) ?? []
+  )
+})
+
+const { evaluateVisibility } = useFormElementVisibility()
+
+const visibilityMap = computed(() => {
+  return evaluateVisibility(allFormElements.value)
+})
+
+const visibleSubsections = computed(() => {
+  if (!currentFormElementSection.value?.formElementSubSections) {
+    return []
+  }
+  
+  return currentFormElementSection.value.formElementSubSections.filter(subsection => {
+    return subsection.formElements.some(element => visibilityMap.value.get(element.id) !== false)
+  })
+})
+
 onMounted(() => {
   if (props.initialSectionIndex !== undefined) {
     activeStepperItemIndex.value = props.initialSectionIndex