fix: Lieferantenfenster direkt steuerbar machen

frontend/components/EntityEdit.vue

@@ -22,7 +22,7 @@ const props = defineProps({
   inModal: {
     type: Boolean,
   },
-  draggable: {
+  floatingWindow: {
     type: Boolean,
     default: false,
   },
@@ -531,9 +531,8 @@ const updateItem = async () => {
   >
     <template #center>
       <h1
-          v-if="item"
-          :data-draggable-handle="props.draggable ? '' : undefined"
-          :class="['text-xl', 'font-medium', props.draggable ? 'cursor-move select-none' : '']"
+          v-if="item && !props.floatingWindow"
+          :class="['text-xl', 'font-medium']"
       >{{ item.id ? `${dataType.labelSingle} bearbeiten` : `${dataType.labelSingle} erstellen` }}</h1>
     </template>
     <template #right>
@@ -552,8 +551,8 @@ const updateItem = async () => {
         Erstellen
       </UButton>
       <UButton
-          @pointerdown.stop
-          @click.stop="modal.close()"
+          v-if="!props.floatingWindow"
+          @click="modal.close()"
           color="red"
           class="ml-2"
           icon="i-heroicons-x-mark"

frontend/components/StandardEntityModal.vue

@@ -33,7 +33,9 @@ const items = ref([])
 const item = ref({})
 
 const isDraggableVendorCreate = computed(() => props.type === "vendors" && props.mode === "create")
+const isDraggableWindowOpen = ref(true)
 const draggableWindow = ref(null)
+const draggableWindowHandle = ref(null)
 const initialWindowPosition = import.meta.client
   ? {
       x: Math.max(16, (window.innerWidth - Math.min(1024, window.innerWidth - 32)) / 2),
@@ -43,12 +45,14 @@ const initialWindowPosition = import.meta.client
 
 const { style: draggableWindowStyle } = useDraggable(draggableWindow, {
   initialValue: initialWindowPosition,
-  onStart: (_position, event) => {
-    const target = event.target
-    return target instanceof Element && Boolean(target.closest('[data-draggable-handle]'))
-  },
+  handle: draggableWindowHandle,
 })
 
+const closeDraggableWindow = () => {
+  isDraggableWindowOpen.value = false
+  modal.close()
+}
+
 const setupPage = async () => {
   if(props.mode === "show") {
     //Load Data for Show
@@ -79,17 +83,36 @@ setupPage()
 
 <template>
   <div
-      v-if="isDraggableVendorCreate"
+      v-if="isDraggableVendorCreate && isDraggableWindowOpen"
       ref="draggableWindow"
       :style="draggableWindowStyle"
       class="fixed z-[999] flex h-[80vh] max-h-[calc(100vh-2rem)] w-[calc(100vw-2rem)] max-w-5xl flex-col overflow-hidden resize rounded-xl border border-gray-200 bg-white shadow-2xl dark:border-gray-800 dark:bg-gray-900"
   >
+    <div
+        ref="draggableWindowHandle"
+        class="flex cursor-move items-center justify-between border-b border-gray-200 bg-gray-50 p-3 select-none dark:border-gray-800 dark:bg-gray-800/50"
+    >
+      <div class="flex items-center gap-2 text-gray-500">
+        <UIcon name="i-heroicons-building-storefront" />
+        <span class="text-xs font-bold uppercase tracking-wider">Lieferant erstellen</span>
+      </div>
+      <UTooltip text="Schließen">
+        <UButton
+            color="gray"
+            variant="ghost"
+            icon="i-heroicons-x-mark"
+            size="xs"
+            @pointerdown.stop
+            @click.stop="closeDraggableWindow"
+        />
+      </UTooltip>
+    </div>
     <EntityEdit
         v-if="loaded"
         :type="props.type"
         :item="item"
         :inModal="true"
-        :draggable="true"
+        :floating-window="true"
         @return-data="(data) => emit('returnData', data)"
         :createQuery="props.createQuery"
         :mode="props.mode"
@@ -101,7 +124,7 @@ setupPage()
     />
   </div>
 
-  <UModal v-else :fullscreen="props.mode === 'show'">
+  <UModal v-else-if="!isDraggableVendorCreate" :fullscreen="props.mode === 'show'">
     <template #content>
       <EntityShow
           v-if="loaded && props.mode === 'show'"