feat: Make stepper draggable and take up more width

This commit is contained in:
2026-01-23 17:24:03 +01:00
parent 312aa0efbc
commit 24bb0f220f
4 changed files with 315 additions and 105 deletions

View File

@@ -15,26 +15,24 @@
</template>
<template #body>
<div class="flex flex-col gap-4 sm:gap-6 lg:gap-12 w-full lg:max-w-4xl mx-auto">
<div v-if="!canWriteApplicationForms" class="text-center py-12">
<UIcon name="i-lucide-shield-x" class="w-16 h-16 mx-auto text-red-400 mb-4" />
<h2 class="text-2xl font-semibold text-gray-700 mb-2">{{ $t('applicationForms.noPermission') }}</h2>
<p class="text-gray-500 mb-4">{{ $t('applicationForms.noPermissionDescription') }}</p>
<UButton to="/" class="mt-4"> {{ $t('applicationForms.backToOverview') }} </UButton>
</div>
<div v-else-if="applicationFormTemplate">
<FormStepperWithNavigation
:form-element-sections="applicationFormTemplate.formElementSections"
@save="onSave"
@submit="onSubmit"
@add-input-form="handleAddInputForm"
@update:form-element-sections="handleFormElementSectionsUpdate"
>
<UFormField :label="$t('common.name')" class="mb-4">
<UInput v-model="applicationFormTemplate.name" class="w-full" />
</UFormField>
</FormStepperWithNavigation>
</div>
<div v-if="!canWriteApplicationForms" class="text-center py-12">
<UIcon name="i-lucide-shield-x" class="w-16 h-16 mx-auto text-red-400 mb-4" />
<h2 class="text-2xl font-semibold text-gray-700 mb-2">{{ $t('applicationForms.noPermission') }}</h2>
<p class="text-gray-500 mb-4">{{ $t('applicationForms.noPermissionDescription') }}</p>
<UButton to="/" class="mt-4"> {{ $t('applicationForms.backToOverview') }} </UButton>
</div>
<div v-else-if="applicationFormTemplate">
<FormStepperWithNavigation
:form-element-sections="applicationFormTemplate.formElementSections"
@save="onSave"
@submit="onSubmit"
@add-input-form="handleAddInputForm"
@update:form-element-sections="handleFormElementSectionsUpdate"
>
<UFormField :label="$t('common.name')" class="mb-4">
<UInput v-model="applicationFormTemplate.name" class="w-full" />
</UFormField>
</FormStepperWithNavigation>
</div>
</template>
</UDashboardPanel>