Merge branch 'main' of edugit.org:AlekSIS/libs/vue-draggable-grid

5f3332e1 · Jonathan Weth · c3a7cd30 · dcf0047b · 5f3332e1 · 5f3332e1
Verified Commit 5f3332e1 authored 1 year ago by Jonathan Weth
--- a/docs/guide/index.md
+++ b/docs/guide/index.md
@@ -77,6 +77,10 @@ disabledFields: [
 ];
 ```
+To highlight, which fields are disabled, the `disabledField` slot can be used. It receives the slot prop `isDraggedOver`,
+which is a boolean indicating whether something is currently dragged over the grid. This can be used to only show the
+disabled fields when something is dragging. An example for this can be found in Example number 7.
 ## Prevent items from being dragged
 To disable dragging of a specific item, simply set the attribute `disabled` of the item to `true`.

--- a/example/index.html
+++ b/example/index.html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />

--- a/example/src/Example5Colors.vue
+++ b/example/src/Example5Colors.vue
@@ -91,7 +91,7 @@ export default {
          // Moved to gridA
          this.findAndRemove(
            item.originGridId === "gridB" ? this.placedB : this.placedC,
-            item.key
+            item.key,
          );
          this.placedA.push(item.key);
          break;
@@ -99,7 +99,7 @@ export default {
          // Moved to gridB
          this.findAndRemove(
            item.originGridId === "gridA" ? this.placedA : this.placedC,
-            item.key
+            item.key,
          );
          this.placedB.push(item.key);
          break;
@@ -107,7 +107,7 @@ export default {
          // Moved to gridC
          this.findAndRemove(
            item.originGridId === "gridB" ? this.placedB : this.placedA,
-            item.key
+            item.key,
          );
          this.placedC.push(item.key);
          break;

--- a/example/src/Example7DisabledItems.vue
+++ b/example/src/Example7DisabledItems.vue
@@ -3,23 +3,31 @@ import DragGrid from "../../src/DragGrid.vue";
 </script>
 <template>
-  <drag-grid
+  <div>
-    v-model="someDisabledItems"
+    <label>
-    :cols="4"
+      <input type="checkbox" v-model="showDisabled" />
-    :rows="4"
+      Show disabled fields even when not dragged over?
-    class="size"
+    </label>
-    :disabled-fields="disabledFields"
+    <drag-grid
-  >
+      v-model="someDisabledItems"
-    <template #item="{ rawItem }">
+      :cols="4"
-      <div
+      :rows="4"
-        class="container"
+      class="size"
-        :style="{ background: rawItem.disabled ? 'red' : 'green' }"
+      :disabled-fields="disabledFields"
-      ></div>
-    </template>
-    <template #disabledField
-      ><div class="container">This field is disabled!</div></template
    >
-  </drag-grid>
+      <template #item="{ rawItem }">
+        <div
+          class="container"
+          :style="{ background: rawItem.disabled ? 'red' : 'green' }"
+        ></div>
+      </template>
+      <template #disabledField="{ isDraggedOver }">
+        <div class="container" v-show="showDisabled || isDraggedOver">
+          This field is disabled!
+        </div>
+      </template>
+    </drag-grid>
+  </div>
 </template>
 <script>
@@ -40,6 +48,7 @@ export default {
        { x: 2, y: 3 },
        { x: 4, y: 2 },
      ],
+      showDisabled: false,
    };
  },
 };

--- a/src/DragGrid.vue
+++ b/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,
@@ -174,7 +179,7 @@ export default {
      let element = JSON.parse(data);
      let coords = this.getCoords(
        event.dragEvent.client.x - element.mouseX,
-        event.dragEvent.client.y - element.mouseY
+        event.dragEvent.client.y - element.mouseY,
      );
      if (element.context !== this.context || this.noHighlight) {
@@ -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;
@@ -217,7 +225,7 @@ export default {
      let coords = this.getCoords(
        event.dragEvent.client.x - element.mouseX,
-        event.dragEvent.client.y - element.mouseY
+        event.dragEvent.client.y - element.mouseY,
      );
      let newPositionValid = true;
@@ -256,7 +264,7 @@ export default {
        if (e.code === DOMException.DATA_CLONE_ERR) {
          // We use functions for properties → we can't clone; only emit `item-changed` event
          console.debug(
-            "Grid couldn't be cloned, please listen to the `item-changed` event and handle changes yourself."
+            "Grid couldn't be cloned, please listen to the `item-changed` event and handle changes yourself.",
          );
        } else {
          throw e;
@@ -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();
@@ -274,12 +286,12 @@ export default {
        x: this.clamp(
          1,
          Math.ceil((x - rect.x) / (rect.width / this.cols)),
-          this.cols
+          this.cols,
        ),
        y: this.clamp(
          1,
          Math.ceil((y - rect.y) / (rect.height / this.rows)),
-          this.rows
+          this.rows,
        ),
      };
    },
@@ -314,7 +326,7 @@ export default {
      if (this.value.some((item) => item.w > 1)) {
        console.warn(
          "You are using multipleItemsY but some items have a width greater than 1.",
-          "This is not supported and will lead to unexpected behaviour."
+          "This is not supported and will lead to unexpected behaviour.",
        );
      }