Hover-Effekt für Drop angepasst

src/components/formDesigner/ComponentRenderer.vue

@@ -43,12 +43,8 @@ export default defineComponent({
       return componentMap[this.element.type] || null;
     },
   },
-  mounted() {
-    console.log("✅ ComponentRenderer geladen für:", this.element);
-  },
   methods: {
     updateSchema(newItems) {
-      console.log("🔥 `update-schema` Event empfangen (Component-Renderer)! Neue Items:", newItems);
       this.$emit("update-schema", newItems); // 🔥 Leitet die Änderung weiter
     },
   },

src/components/formDesigner/formRenderer/FlexLayoutRenderer.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="flex-layout" :class="computedDirection" @dragover.prevent="onDragOver" @drop="onDrop">
+    <div class="flex-layout" :class="[computedDirection, { 'drag-over': dragOverActive }]" @dragover.prevent="onDragOver" @dragleave="onDragLeave" @drop="onDrop">
       <component-renderer v-for="(item, key) in items" :key="key" :element="item" @update-schema="updateChildItems(key, $event)" />
     </div>
   </div>
@@ -13,6 +13,12 @@ import ComponentRenderer from "@/components/formDesigner/ComponentRenderer.vue";
 export default defineComponent({
   name: "FlexLayoutRenderer",
   components: { ComponentRenderer },
+  data() {
+    return {
+      dragOverActive: false,
+      hasParentFlexLayout: false,
+    };
+  },
   props: {
     direction: {
       type: String,
@@ -27,14 +33,18 @@ export default defineComponent({
     computedDirection() {
       return this.direction === "horizontal" ? "horizontal" : "vertical";
     },
+    isInnerMostLayout() {
+      return !this.items.some((item) => item.type === "FlexLayout") && this.hasParentFlexLayout;
+    },
+    isOuterLayout() {
+      return !this.hasParentFlexLayout;
+    },
   },
   methods: {
     /**
      * 🔄 Aktualisiert verschachtelte FlexLayouts
      */
     updateChildItems(index, newItems) {
-      console.log("✅ Event erhalten in updateChildItems! Index:", index, "Neue Items:", newItems);
-
       const updatedItems = [...this.items];
       updatedItems[index] = { ...updatedItems[index], items: newItems }; // ✅ Tiefere Rekursion möglich
       this.$emit("update-items", updatedItems); // 🔥 Weitergabe an Parent
@@ -46,7 +56,13 @@ export default defineComponent({
     onDragOver(event) {
       event.preventDefault();
       event.stopPropagation();
-      console.log("🚀 Drag over auf FlexLayout:", this.direction);
+      if (this.isInnerMostLayout) {
+        this.dragOverActive = true;
+      } else if (this.isOuterLayout) {
+        this.dragOverActive = true;
+      } else {
+        this.dragOverActive = false;
+      }
     },
 
     /**
@@ -55,18 +71,26 @@ export default defineComponent({
     onDrop(event) {
       event.preventDefault();
       event.stopPropagation();
+      this.dragOverActive = false;
 
       const droppedType = event.dataTransfer.getData("text/plain");
-      console.log("📦 Element auf FlexLayout gedroppt:", droppedType);
 
       const newElement = this.createElementByType(droppedType);
       if (newElement) {
         const updatedItems = [...this.items, newElement]; // ✅ Neue Liste mit Element
-        console.log("📌 🔥 `update-items` gesendet:", updatedItems);
         this.$emit("update-items", updatedItems); // 🔥 An Parent weiterleiten
       }
     },
 
+    /**
+     * ❌ Wenn das Drag das Layout verlässt
+     */
+    onDragLeave(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.dragOverActive = false;
+    },
+
     /**
      * 🔧 Erstellt das passende Element basierend auf dem Typ
      */
@@ -90,6 +114,16 @@ export default defineComponent({
       }
     },
   },
+  mounted() {
+    let parent = this.$parent;
+    while (parent) {
+      if (parent.$options.name === "FlexLayoutRenderer") {
+        this.hasParentFlexLayout = true;
+        break;
+      }
+      parent = parent.$parent;
+    }
+  },
 });
 </script>
 
@@ -98,7 +132,6 @@ export default defineComponent({
   display: flex;
   gap: 12px;
   min-height: 50px;
-  border: 2px dashed transparent;
 }
 
 .horizontal {
@@ -110,6 +143,7 @@ export default defineComponent({
 }
 
 .flex-layout.drag-over {
-  border: 2px dashed blue;
+  border-left: 5px solid var(--bs-primary);
+  background: rgba(0, 0, 255, 0.03);
 }
 </style>