Move example 5 to separate component and docs

docs/.vuepress/config.js

@@ -11,6 +11,7 @@ module.exports = {
                     '/examples/TicTacToe.md',
                     '/examples/Counters.md',
                     '/examples/Lessons.md',
+                    '/examples/Colors.md',
                 ]
             }
         ],

docs/examples/Colors.md

+# Example 5: Dynamic colors
+
+This example showcases the `rawItem` with the custom method
+`getColor`. Both grids on the outside call the method with
+`"red"` while the one in the middle uses `"green"`.
+We use arrays called `placedA`, `placedB` and
+`placedC` to save, which item is contained in which grid.
+
+Notice: the third grid doesn't save the item position, they are always
+positioned automatically.
+
+<ClientOnly>
+<script setup>
+import Example5Colors from "../../example/src/Example5Colors.vue";
+</script>
+
+
+<Example5Colors />
+</ClientOnly>
\ No newline at end of file

example/src/App.vue

@@ -5,6 +5,7 @@ import Example1Generic from "./Example1Generic.vue";
 import Example2TicTacToe from "./Example2TicTacToe.vue";
 import Example3Counters from "./Example3Counters.vue";
 import Example4Lessons from "./Example4Lessons.vue";
+import Example5Colors from "./Example5Colors.vue";
 </script>
 
 <template>
@@ -59,68 +60,7 @@ import Example4Lessons from "./Example4Lessons.vue";
       Notice: the third grid doesn't save the item position, they are always
       positioned automatically.
     </p>
-    <div class="ttt-container">
-      <drag-grid
-        :value="colorGrid"
-        :cols="4"
-        :rows="4"
-        grid-id="gridA"
-        context="colors"
-        class="bordered color-grid"
-        @itemChanged="handleColorItemChange"
-      >
-        <template #item="item">
-          <div
-            :style="{
-              background: item.rawItem.getColor('red'),
-              color: 'white',
-            }"
-          >
-            {{ item.data.name }}
-          </div>
-        </template>
-      </drag-grid>
-      <drag-grid
-        :value="colorGrid"
-        :cols="4"
-        :rows="4"
-        grid-id="gridB"
-        context="colors"
-        class="bordered color-grid"
-        @itemChanged="handleColorItemChange"
-      >
-        <template #item="item">
-          <div
-            :style="{
-              background: item.rawItem.getColor('green'),
-              color: 'black',
-            }"
-          >
-            {{ item.data.name }}
-          </div>
-        </template>
-      </drag-grid>
-      <drag-grid
-        :value="colorGrid"
-        :cols="4"
-        :rows="4"
-        grid-id="gridC"
-        context="colors"
-        class="bordered color-grid"
-        @itemChanged="handleColorItemChange"
-      >
-        <template #item="item">
-          <div
-            :style="{
-              background: item.rawItem.getColor('red'),
-              color: 'white',
-            }"
-          >
-            {{ item.data.name }}
-          </div>
-        </template>
-      </drag-grid>
-    </div>
+    <example5-colors></example5-colors>
 
     <div class="ttt-container">
       <div>
@@ -182,83 +122,12 @@ import Example4Lessons from "./Example4Lessons.vue";
 <script>
 export default {
   name: "App",
-  methods: {
-    contains(array, search) {
-      return array.filter((obj) => obj === search).length > 0;
-    },
-    findAndRemove(array, element) {
-      let index = array.findIndex((i) => {
-        return i === element;
-      });
-      if (index >= 0) array.splice(index, 1);
-    },
-    handleColorItemChange(item) {
-      this[item.key].x = item.x;
-      this[item.key].y = item.y;
-
-      if (item.gridId === item.originGridId) return;
-
-      switch (item.gridId) {
-        case "gridA":
-          // Moved to gridA
-          this.findAndRemove(
-            item.originGridId === "gridB" ? this.placedB : this.placedC,
-            item.key
-          );
-          this.placedA.push(item.key);
-          break;
-        case "gridB":
-          // Moved to gridB
-          this.findAndRemove(
-            item.originGridId === "gridA" ? this.placedA : this.placedC,
-            item.key
-          );
-          this.placedB.push(item.key);
-          break;
-        case "gridC":
-          // Moved to gridC
-          this.findAndRemove(
-            item.originGridId === "gridB" ? this.placedB : this.placedA,
-            item.key
-          );
-          this.placedC.push(item.key);
-          break;
-      }
-    },
-  },
   data() {
     return {
       ticTacToe: [
         { x: 1, y: 1, w: 1, h: 1, key: "a1", data: { text: "X" } },
         { x: 3, y: 3, w: 1, h: 1, key: "b1", data: { text: "O" } },
       ],
-      placedA: ["item1", "item2"],
-      placedB: ["item3", "item4"],
-      placedC: ["item5", "item6"],
-      item1: {
-        x: 1,
-        y: 1,
-      },
-      item2: {
-        x: 2,
-        y: 2,
-      },
-      item3: {
-        x: 1,
-        y: 1,
-      },
-      item4: {
-        x: 3,
-        y: 3,
-      },
-      item5: {
-        x: 2,
-        y: 4,
-      },
-      item6: {
-        x: 4,
-        y: 2,
-      },
       gridDisabled: true,
       someDisabledItems: [
         { key: "key1", x: 1, y: 3, w: 1, h: 1, data: {} },
@@ -272,69 +141,6 @@ export default {
       ],
     };
   },
-  computed: {
-    colorGrid() {
-      let items = ["item1", "item2", "item3", "item4", "item5", "item6"];
-      let greens = [
-        "green",
-        "seagreen",
-        "greenyellow",
-        "darkolivegreen",
-        "limegreen",
-        "palegreen",
-      ];
-      let reds = [
-        "darkred",
-        "indianred",
-        "orangered",
-        "red",
-        "maroon",
-        "firebrick",
-      ];
-      return items.map((itemName) => {
-        return {
-          key: itemName,
-          x: (grid) => {
-            if (grid.gridId === "gridA") {
-              return this.contains(this.placedA, itemName)
-                ? this[itemName].x
-                : -1;
-            } else if (grid.gridId === "gridB") {
-              return this.contains(this.placedB, itemName)
-                ? this[itemName].x
-                : -1;
-            } else {
-              // gridC
-              return this.contains(this.placedC, itemName) ? 0 : -1;
-            }
-          },
-          y: (grid) => {
-            if (grid.gridId === "gridA") {
-              return this.contains(this.placedA, itemName)
-                ? this[itemName].y
-                : -1;
-            } else if (grid.gridId === "gridB") {
-              return this.contains(this.placedB, itemName)
-                ? this[itemName].y
-                : -1;
-            } else {
-              // gridC
-              return this.contains(this.placedC, itemName) ? 0 : -1;
-            }
-          },
-          w: 1,
-          h: 1,
-          data: {
-            name: itemName,
-          },
-          getColor: (a) =>
-            a === "red"
-              ? reds[parseInt(itemName[4]) - 1]
-              : greens[parseInt(itemName[4]) - 1],
-        };
-      });
-    },
-  },
 };
 </script>
 
@@ -354,16 +160,6 @@ export default {
   justify-content: space-between;
 }
 
-.bordered {
-  border: 2px solid grey;
-}
-
-.color-grid {
-  min-height: 11em;
-  line-height: 2em;
-  box-sizing: content-box;
-}
-
 h2 {
   padding-top: 1em;
 }

example/src/Example5Colors.vue

+<script setup>
+import DragGrid from "../../src/DragGrid.vue";
+</script>
+
+<template>
+  <div class="row">
+    <drag-grid
+      :value="colorGrid"
+      :cols="4"
+      :rows="4"
+      grid-id="gridA"
+      context="colors"
+      class="bordered color-grid"
+      @itemChanged="handleColorItemChange"
+    >
+      <template #item="item">
+        <div
+          :style="{
+            background: item.rawItem.getColor('red'),
+            color: 'white',
+          }"
+        >
+          {{ item.data.name }}
+        </div>
+      </template>
+    </drag-grid>
+    <drag-grid
+      :value="colorGrid"
+      :cols="4"
+      :rows="4"
+      grid-id="gridB"
+      context="colors"
+      class="bordered color-grid"
+      @itemChanged="handleColorItemChange"
+    >
+      <template #item="item">
+        <div
+          :style="{
+            background: item.rawItem.getColor('green'),
+            color: 'black',
+          }"
+        >
+          {{ item.data.name }}
+        </div>
+      </template>
+    </drag-grid>
+    <drag-grid
+      :value="colorGrid"
+      :cols="4"
+      :rows="4"
+      grid-id="gridC"
+      context="colors"
+      class="bordered color-grid"
+      @itemChanged="handleColorItemChange"
+    >
+      <template #item="item">
+        <div
+          :style="{
+            background: item.rawItem.getColor('red'),
+            color: 'white',
+          }"
+        >
+          {{ item.data.name }}
+        </div>
+      </template>
+    </drag-grid>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Example5Colors",
+  methods: {
+    contains(array, search) {
+      return array.filter((obj) => obj === search).length > 0;
+    },
+    findAndRemove(array, element) {
+      let index = array.findIndex((i) => {
+        return i === element;
+      });
+      if (index >= 0) array.splice(index, 1);
+    },
+    handleColorItemChange(item) {
+      this[item.key].x = item.x;
+      this[item.key].y = item.y;
+
+      if (item.gridId === item.originGridId) return;
+
+      switch (item.gridId) {
+        case "gridA":
+          // Moved to gridA
+          this.findAndRemove(
+            item.originGridId === "gridB" ? this.placedB : this.placedC,
+            item.key
+          );
+          this.placedA.push(item.key);
+          break;
+        case "gridB":
+          // Moved to gridB
+          this.findAndRemove(
+            item.originGridId === "gridA" ? this.placedA : this.placedC,
+            item.key
+          );
+          this.placedB.push(item.key);
+          break;
+        case "gridC":
+          // Moved to gridC
+          this.findAndRemove(
+            item.originGridId === "gridB" ? this.placedB : this.placedA,
+            item.key
+          );
+          this.placedC.push(item.key);
+          break;
+      }
+    },
+  },
+  data() {
+    return {
+      placedA: ["item1", "item2"],
+      placedB: ["item3", "item4"],
+      placedC: ["item5", "item6"],
+      item1: {
+        x: 1,
+        y: 1,
+      },
+      item2: {
+        x: 2,
+        y: 2,
+      },
+      item3: {
+        x: 1,
+        y: 1,
+      },
+      item4: {
+        x: 3,
+        y: 3,
+      },
+      item5: {
+        x: 2,
+        y: 4,
+      },
+      item6: {
+        x: 4,
+        y: 2,
+      },
+    };
+  },
+  computed: {
+    colorGrid() {
+      let items = ["item1", "item2", "item3", "item4", "item5", "item6"];
+      let greens = [
+        "green",
+        "seagreen",
+        "greenyellow",
+        "darkolivegreen",
+        "limegreen",
+        "palegreen",
+      ];
+      let reds = [
+        "darkred",
+        "indianred",
+        "orangered",
+        "red",
+        "maroon",
+        "firebrick",
+      ];
+      return items.map((itemName) => {
+        return {
+          key: itemName,
+          x: (grid) => {
+            if (grid.gridId === "gridA") {
+              return this.contains(this.placedA, itemName)
+                ? this[itemName].x
+                : -1;
+            } else if (grid.gridId === "gridB") {
+              return this.contains(this.placedB, itemName)
+                ? this[itemName].x
+                : -1;
+            } else {
+              // gridC
+              return this.contains(this.placedC, itemName) ? 0 : -1;
+            }
+          },
+          y: (grid) => {
+            if (grid.gridId === "gridA") {
+              return this.contains(this.placedA, itemName)
+                ? this[itemName].y
+                : -1;
+            } else if (grid.gridId === "gridB") {
+              return this.contains(this.placedB, itemName)
+                ? this[itemName].y
+                : -1;
+            } else {
+              // gridC
+              return this.contains(this.placedC, itemName) ? 0 : -1;
+            }
+          },
+          w: 1,
+          h: 1,
+          data: {
+            name: itemName,
+          },
+          getColor: (a) =>
+            a === "red"
+              ? reds[parseInt(itemName[4]) - 1]
+              : greens[parseInt(itemName[4]) - 1],
+        };
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.bordered {
+  border: 2px solid grey;
+}
+
+.color-grid {
+  min-height: 11em;
+  line-height: 2em;
+  box-sizing: content-box;
+}
+</style>