Move example 1 to different component

example/src/App.vue

@@ -2,6 +2,7 @@
 import DragGrid from "../../src/DragGrid.vue";
 import CircularCard from "./components/CircularCard.vue";
 import NumberCounter from "./components/NumberCounter.vue";
+import Example1Generic from "./Example1Generic.vue";
 </script>
 
 <template>
@@ -12,20 +13,7 @@ import NumberCounter from "./components/NumberCounter.vue";
       Grid with two programmatically blocked cells and one programmatically
       blocked item
     </p>
-    <DragGrid
-      :rows="8"
-      :cols="5"
-      :pos-validation="blockField"
-      v-model="items"
-      class="bordered"
-    >
-      <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>
-    </DragGrid>
+    <example1-generic></example1-generic>
 
     <h2>Example 2: "Tic-Tac-Toe"</h2>
     <p>
@@ -311,12 +299,6 @@ import NumberCounter from "./components/NumberCounter.vue";
 export default {
   name: "App",
   methods: {
-    blockField(x, y, key) {
-      // We won't move fields with ID 'obj8' and nothing into (3, 3) and (4, 3)
-      if (x === 3 && y === 3) return false;
-      if (x === 4 && y === 3) return false;
-      return key !== "obj8";
-    },
     blockAllMoving() {
       return false;
     },
@@ -395,24 +377,6 @@ export default {
   },
   data() {
     return {
-      items: [
-        { x: 1, y: 3, w: 1, h: 1, key: "obj1", data: {} },
-        { x: 2, y: 1, w: 1, h: 1, key: "obj2", data: {} },
-        { x: 3, y: 1, w: 2, h: 2, key: "obj3", data: {} },
-        { x: 5, y: 2, w: 1, h: 1, key: "obj4", data: {} },
-        { x: 1, y: 1, w: 1, h: 2, key: "obj5", data: {} },
-        { x: 5, y: 1, w: 1, h: 1, key: "obj6", data: {} },
-        { x: 2, y: 2, w: 1, h: 3, key: "obj7", data: {} },
-        {
-          x: 1,
-          y: 4,
-          w: 1,
-          h: 1,
-          key: "obj8",
-          data: { title: "I'm blocked from moving!" },
-        },
-        { x: 5, y: 3, w: 1, h: 1, key: "obj9", data: {} },
-      ],
       ticTacToe1: [
         { 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" } },
@@ -612,26 +576,6 @@ export default {
 </script>
 
 <style scoped>
-#blocker {
-  grid-row: 3 / span 1;
-  grid-column: 3 / span 1;
-  background-image: linear-gradient(
-    45deg,
-    #edd85f 25%,
-    #0f2b3d 25%,
-    #0f2b3d 50%,
-    #edd85f 50%,
-    #edd85f 75%,
-    #0f2b3d 75%,
-    #0f2b3d 100%
-  );
-  background-size: 56.57px 56.57px;
-  color: white;
-  font-size: large;
-  font-weight: bold;
-  text-shadow: 4px 4px 4px #2c3e50;
-}
-
 .container {
   background: lightcoral;
   width: 100%;

example/src/Example1Generic.vue

+<script setup>
+import DragGrid from "../../src/DragGrid.vue";
+</script>
+
+<template>
+  <DragGrid
+    :rows="8"
+    :cols="5"
+    :pos-validation="blockField"
+    v-model="items"
+    class="bordered"
+  >
+    <div id="blocker">
+      This field is blocked and it's filled, the next one only programmatically
+    </div>
+    <template #item="item">
+      <div class="container">{{ item }}</div>
+    </template>
+  </DragGrid>
+</template>
+
+<script>
+export default {
+  name: "Example1Generic",
+  methods: {
+    blockField(x, y, key) {
+      // We won't move fields with ID 'obj8' and nothing into (3, 3) and (4, 3)
+      if (x === 3 && y === 3) return false;
+      if (x === 4 && y === 3) return false;
+      return key !== "obj8";
+    },
+  },
+  data() {
+    return {
+      items: [
+        { x: 1, y: 3, w: 1, h: 1, key: "obj1", data: {} },
+        { x: 2, y: 1, w: 1, h: 1, key: "obj2", data: {} },
+        { x: 3, y: 1, w: 2, h: 2, key: "obj3", data: {} },
+        { x: 5, y: 2, w: 1, h: 1, key: "obj4", data: {} },
+        { x: 1, y: 1, w: 1, h: 2, key: "obj5", data: {} },
+        { x: 5, y: 1, w: 1, h: 1, key: "obj6", data: {} },
+        { x: 2, y: 2, w: 1, h: 3, key: "obj7", data: {} },
+        {
+          x: 1,
+          y: 4,
+          w: 1,
+          h: 1,
+          key: "obj8",
+          data: { title: "I'm blocked from moving!" },
+        },
+        { x: 5, y: 3, w: 1, h: 1, key: "obj9", data: {} },
+      ],
+    };
+  },
+};
+</script>
+
+<style scoped>
+#blocker {
+  grid-row: 3 / span 1;
+  grid-column: 3 / span 1;
+  background-image: linear-gradient(
+    45deg,
+    #edd85f 25%,
+    #0f2b3d 25%,
+    #0f2b3d 50%,
+    #edd85f 50%,
+    #edd85f 75%,
+    #0f2b3d 75%,
+    #0f2b3d 100%
+  );
+  background-size: 56.57px 56.57px;
+  color: white;
+  font-size: large;
+  font-weight: bold;
+  text-shadow: 4px 4px 4px #2c3e50;
+}
+
+.container {
+  background: lightcoral;
+  width: 100%;
+  height: 100%;
+}
+
+.bordered {
+  border: 2px solid grey;
+}
+</style>