From 4ca852020c9cbcbb1493682cf78cc2f19de66d4c Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Wed, 8 Feb 2023 18:19:58 +0100
Subject: [PATCH] Move backgrounds to example and to slot in grid

---
 example/src/App.vue   |  9 +++++++++
 src/DragContainer.vue | 21 +--------------------
 src/Grid.vue          | 16 ++++++++++++++--
 3 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/example/src/App.vue b/example/src/App.vue
index 50d6252..ed912d1 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -8,6 +8,9 @@ import Grid from "../../src/Grid.vue";
       <div id="blocker">
         This field is blocked because it's filled, the next one programmatically
       </div>
+      <template #item="item">
+        <div class="container">{{ item }}</div>
+      </template>
     </Grid>
   </div>
 </template>
@@ -67,4 +70,10 @@ export default {
   font-weight: bold;
   text-shadow: 4px 4px 4px #2c3e50;
 }
+
+.container {
+  background: lightcoral;
+  width: 100%;
+  height: 100%;
+}
 </style>
diff --git a/src/DragContainer.vue b/src/DragContainer.vue
index 49ee72a..0ac7a2e 100644
--- a/src/DragContainer.vue
+++ b/src/DragContainer.vue
@@ -1,19 +1,6 @@
 <template>
   <div @dragstart="handleDragStart" draggable="true" id="wrapper">
-    <slot>
-      <div id="container">
-        <dl>
-          <dt>Key</dt>
-          <dd>{{ dragID }}</dd>
-          <dt>Position</dt>
-          <dd>{{ x }}, {{ y }}</dd>
-          <dt>Size</dt>
-          <dd>{{ w }} × {{ h }}</dd>
-          <dt>Data</dt>
-          <dd>{{ data }}</dd>
-        </dl>
-      </div>
-    </slot>
+    <slot></slot>
   </div>
 </template>
 
@@ -51,10 +38,4 @@ export default {
   grid-column: v-bind(x) / span v-bind(w);
   grid-row: v-bind(y) / span v-bind(h);
 }
-
-#container {
-  background: lightcoral;
-  width: 100%;
-  height: 100%;
-}
 </style>
diff --git a/src/Grid.vue b/src/Grid.vue
index f8c6557..1a8512a 100644
--- a/src/Grid.vue
+++ b/src/Grid.vue
@@ -5,7 +5,7 @@
     class="grid"
   >
     <slot name="highlight">
-      <div id="highlight" ref="highlight"></div>
+      <div class="highlight" ref="highlight"></div>
     </slot>
     <DragContainer
       v-for="item in value"
@@ -17,6 +17,18 @@
       :h="item.h"
       :data="item.data"
     >
+      <slot v-bind="item" name="item">
+        <dl>
+          <dt>Key</dt>
+          <dd>{{ item.key }}</dd>
+          <dt>Position</dt>
+          <dd>{{ item.x }}, {{ item.y }}</dd>
+          <dt>Size</dt>
+          <dd>{{ item.w }} × {{ item.h }}</dd>
+          <dt>Data</dt>
+          <dd>{{ item.data }}</dd>
+        </dl>
+      </slot>
     </DragContainer>
     <slot></slot>
   </div>
@@ -136,7 +148,7 @@ export default {
 </script>
 
 <style scoped>
-#highlight {
+.highlight {
   background: darkgrey;
   border: grey dashed 2px;
   display: none;
-- 
GitLab