Pass dragging information to slot for disabled fields

src/DragGrid.vue

@@ -3,7 +3,7 @@
     droppable
     @dropmove="disabled || loading ? undefined : handleDragOver($event)"
     @drop.prevent="disabled || loading ? undefined : handleDrop($event)"
-    @dragleave="$refs.highlightContainer.style.display = 'none'"
+    @dragleave="handleDragLeave"
     class="grid"
   >
     <template v-if="loading">
@@ -56,7 +56,7 @@
           :y="disabledField.y"
           :key="disabledField.x + '|' + disabledField.y"
         >
-          <slot name="disabledField"></slot>
+          <slot name="disabledField" :is-dragged-over="isDraggedOver"></slot>
         </GridItem>
       </template>
       <slot></slot>
@@ -76,6 +76,11 @@ export default {
     DragContainer,
   },
   emits: ["input", "itemChanged"],
+  data() {
+    return {
+      isDraggedOver: false,
+    };
+  },
   props: {
     rows: {
       type: Number,
@@ -182,6 +187,8 @@ export default {
         return;
       }
 
+      this.isDraggedOver = true;
+
       let newPositionValid = true;
 
       for (let x = coords.x; x < coords.x + element.w; x++) {
@@ -204,6 +211,7 @@ export default {
       this.$refs.highlightContainer.style.gridRowEnd = "span " + element.h;
     },
     handleDrop(event) {
+      this.isDraggedOver = false;
       this.$refs.highlightContainer.style.display = "none";
       let data = event.relatedTarget.dataset.transfer;
       if (!data) return;
@@ -267,6 +275,10 @@ export default {
 
       this.$emit("itemChanged", element);
     },
+    handleDragLeave() {
+      this.isDraggedOver = false;
+      this.$refs.highlightContainer.style.display = "none";
+    },
     clamp: (min, num, max) => Math.min(Math.max(num, min), max),
     getCoords(x, y) {
       let rect = this.$el.getBoundingClientRect();