denis/gremiumhub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): Add animations for form elements

Browse Source
This commit is contained in:
Denis Lugowski
2026-02-15 12:23:30 +01:00
parent 05b89778cf
commit a931275d09
3 changed files with 177 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
legalconsenthub/app/components/FormStepperWithNavigation.vue
View File

@@ -57,40 +57,45 @@
{{ currentFormElementSection.title }}
</h1>
<UCard
v-for="{ subsection, sectionIndex } in visibleSubsections"
:key="getSubsectionKey(currentFormElementSection, sectionIndex, subsection)"
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
:model-value="subsection.formElements"
:visibility-map="visibilityMap"
:application-form-id="applicationFormId"
:disabled="disabled"
:all-form-elements="allFormElements"
@update:model-value="
(elements) =>
handleFormElementUpdate(elements, getSubsectionKey(currentFormElementSection, sectionIndex, subsection))
"
@add:input-form="
(position) =>
handleAddInputForm(position, getSubsectionKey(currentFormElementSection, sectionIndex, subsection))
"
@clone:element="
(element, position) =>
handleCloneElement(
element,
position,
getSubsectionKey(currentFormElementSection, sectionIndex, subsection)
)
"
/>
</UCard>
<TransitionGroup name="form-element" tag="div" class="relative">
<UCard
v-for="{ subsection, sectionIndex } in visibleSubsections"
:key="getSubsectionKey(currentFormElementSection, sectionIndex, subsection)"
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
:model-value="subsection.formElements"
:visibility-map="visibilityMap"
:application-form-id="applicationFormId"
:disabled="disabled"
:all-form-elements="allFormElements"
@update:model-value="
(elements) =>
handleFormElementUpdate(
elements,
getSubsectionKey(currentFormElementSection, sectionIndex, subsection)
)
"
@add:input-form="
(position) =>
handleAddInputForm(position, getSubsectionKey(currentFormElementSection, sectionIndex, subsection))
"
@clone:element="
(element, position) =>
handleCloneElement(
element,
position,
getSubsectionKey(currentFormElementSection, sectionIndex, subsection)
)
"
/>
</UCard>
</TransitionGroup>
<UCard v-if="visibleSubsections.length === 0" variant="subtle" class="mb-6">
<div class="text-center py-8 text-dimmed">