feat: Lieferantenanlage verschiebbar machen

frontend/components/EntityEdit.vue

@@ -22,6 +22,10 @@ const props = defineProps({
   inModal: {
     type: Boolean,
   },
+  draggable: {
+    type: Boolean,
+    default: false,
+  },
   platform: {
     type: String,
   }
@@ -523,6 +527,8 @@ const updateItem = async () => {
   </UDashboardNavbar>
   <UDashboardNavbar
       v-else
+      :data-draggable-handle="props.draggable ? '' : undefined"
+      :class="props.draggable ? 'cursor-move select-none' : undefined"
       :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
   >
     <template #center>

frontend/components/StandardEntityModal.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { useDraggable } from '@vueuse/core'
 
 const toast = useToast()
 const dataStore = useDataStore()
@@ -31,6 +32,23 @@ const loaded = ref(false)
 const items = ref([])
 const item = ref({})
 
+const isDraggableVendorCreate = computed(() => props.type === "vendors" && props.mode === "create")
+const draggableWindow = ref(null)
+const initialWindowPosition = import.meta.client
+  ? {
+      x: Math.max(16, (window.innerWidth - Math.min(1024, window.innerWidth - 32)) / 2),
+      y: Math.max(16, Math.min(96, window.innerHeight * 0.1)),
+    }
+  : { x: 16, y: 16 }
+
+const { style: draggableWindowStyle } = useDraggable(draggableWindow, {
+  initialValue: initialWindowPosition,
+  onStart: (_position, event) => {
+    const target = event.target
+    return target instanceof Element && Boolean(target.closest('[data-draggable-handle]'))
+  },
+})
+
 const setupPage = async () => {
   if(props.mode === "show") {
     //Load Data for Show
@@ -60,7 +78,30 @@ setupPage()
 </script>
 
 <template>
-  <UModal :fullscreen="props.mode === 'show'">
+  <div
+      v-if="isDraggableVendorCreate"
+      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"
+  >
+    <EntityEdit
+        v-if="loaded"
+        :type="props.type"
+        :item="item"
+        :inModal="true"
+        :draggable="true"
+        @return-data="(data) => emit('returnData', data)"
+        :createQuery="props.createQuery"
+        :mode="props.mode"
+    />
+    <UProgress
+        v-else
+        animation="carousel"
+        class="m-5 mt-10"
+    />
+  </div>
+
+  <UModal v-else :fullscreen="props.mode === 'show'">
     <template #content>
       <EntityShow
           v-if="loaded && props.mode === 'show'"