Start UI Change

frontend/components/DocumentUploadModal.vue

@@ -78,84 +78,86 @@ const fileNames = computed(() => {
 
 <template>
   <UModal>
-    <div ref="dropZoneRef" class="relative h-full flex flex-col">
+    <template #content>
+      <div ref="dropZoneRef" class="relative h-full flex flex-col">
 
-      <div
-          v-if="isOverDropZone"
-          class="absolute inset-0 z-50 flex items-center justify-center bg-primary-500/10 border-2 border-primary-500 border-dashed rounded-lg backdrop-blur-sm transition-all"
-      >
-        <span class="text-xl font-bold text-primary-600 bg-white/80 px-4 py-2 rounded shadow-sm">
-          Dateien hier ablegen
-        </span>
-      </div>
-
-      <UCard :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
-        <template #header>
-          <div class="flex items-center justify-between">
-            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-              Datei hochladen
-            </h3>
-            <UButton
-                color="gray"
-                variant="ghost"
-                icon="i-heroicons-x-mark-20-solid"
-                class="-my-1"
-                @click="modal.close()"
-                :disabled="uploadInProgress"
-            />
-          </div>
-        </template>
-
-        <UFormGroup
-            label="Datei:"
-            :help="selectedFiles.length > 0 ? `${selectedFiles.length} Datei(en) ausgewählt` : 'Ziehen Sie Dateien hierher oder klicken Sie'"
+        <div
+            v-if="isOverDropZone"
+            class="absolute inset-0 z-50 flex items-center justify-center bg-primary-500/10 border-2 border-primary-500 border-dashed rounded-lg backdrop-blur-sm transition-all"
         >
-          <UInput
-              v-if="selectedFiles.length === 0"
-              type="file"
-              id="fileUploadInput"
-              multiple
-              accept="image/jpeg, image/png, image/gif, application/pdf"
-              @change="onFileInputChange"
-          />
+          <span class="text-xl font-bold text-primary-600 bg-white/80 px-4 py-2 rounded shadow-sm">
+            Dateien hier ablegen
+          </span>
+        </div>
 
-          <div v-if="selectedFiles.length > 0" class="mt-2 text-sm text-gray-500">
-            Ausgewählt: <span class="font-medium text-gray-700 dark:text-gray-300">{{ fileNames }}</span>
-          </div>
-        </UFormGroup>
+        <UCard :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+          <template #header>
+            <div class="flex items-center justify-between">
+              <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+                Datei hochladen
+              </h3>
+              <UButton
+                  color="gray"
+                  variant="ghost"
+                  icon="i-heroicons-x-mark-20-solid"
+                  class="-my-1"
+                  @click="modal.close()"
+                  :disabled="uploadInProgress"
+              />
+            </div>
+          </template>
 
-        <UFormGroup
-            label="Typ:"
-            class="mt-3"
-        >
-          <USelectMenu
-              option-attribute="name"
-              value-attribute="id"
-              searchable
-              searchable-placeholder="Suchen..."
-              :options="availableFiletypes"
-              v-model="props.fileData.type"
-              :disabled="!props.fileData.typeEnabled"
+          <UFormGroup
+              label="Datei:"
+              :help="selectedFiles.length > 0 ? `${selectedFiles.length} Datei(en) ausgewählt` : 'Ziehen Sie Dateien hierher oder klicken Sie'"
           >
-            <template #label>
-              <span v-if="availableFiletypes.find(x => x.id === props.fileData.type)">{{availableFiletypes.find(x => x.id === props.fileData.type).name}}</span>
-              <span v-else>Kein Typ ausgewählt</span>
-            </template>
-          </USelectMenu>
-        </UFormGroup>
+            <UInput
+                v-if="selectedFiles.length === 0"
+                type="file"
+                id="fileUploadInput"
+                multiple
+                accept="image/jpeg, image/png, image/gif, application/pdf"
+                @change="onFileInputChange"
+            />
 
-        <template #footer>
-          <UButton
-              @click="uploadFiles"
-              :loading="uploadInProgress"
-              :disabled="uploadInProgress || selectedFiles.length === 0"
-          >Hochladen</UButton>
-        </template>
-      </UCard>
-    </div>
+            <div v-if="selectedFiles.length > 0" class="mt-2 text-sm text-gray-500">
+              Ausgewählt: <span class="font-medium text-gray-700 dark:text-gray-300">{{ fileNames }}</span>
+            </div>
+          </UFormGroup>
+
+          <UFormGroup
+              label="Typ:"
+              class="mt-3"
+          >
+            <USelectMenu
+                option-attribute="name"
+                value-attribute="id"
+                searchable
+                searchable-placeholder="Suchen..."
+                :options="availableFiletypes"
+                v-model="props.fileData.type"
+                :disabled="!props.fileData.typeEnabled"
+            >
+              <template #label>
+                <span v-if="availableFiletypes.find(x => x.id === props.fileData.type)">{{availableFiletypes.find(x => x.id === props.fileData.type).name}}</span>
+                <span v-else>Kein Typ ausgewählt</span>
+              </template>
+            </USelectMenu>
+          </UFormGroup>
+
+          <template #footer>
+            <UButton
+                @click="uploadFiles"
+                :loading="uploadInProgress"
+                :disabled="uploadInProgress || selectedFiles.length === 0"
+            >Hochladen</UButton>
+          </template>
+        </UCard>
+      </div>
+    </template>
   </UModal>
 </template>
 
 <style scoped>
 /* Optional: Animationen für das Overlay */
-</style>
+</style>