Move example 2 to separate component and docs

docs/.vuepress/config.js

@@ -4,10 +4,11 @@ module.exports = {
     themeConfig: {
         sidebar: [
             {
-                title: 'Components',
+                title: 'Examples',
                 collapsable: false,
                 children: [
                     '/examples/Generic.md',
+                    '/examples/TicTacToe.md',
                 ]
             }
         ],

docs/examples/TicTacToe.md

+# Example 2: Tic-Tac-Toe
+
+A grid functioning as a playing field and another functioning as a container for playing pieces. You can drag as many pieces as you want from the container to the field.
+
+<ClientOnly>
+<script setup>
+import Example2TicTacToe from "../../example/src/Example2TicTacToe.vue";
+</script>
+
+
+<Example2TicTacToe />
+</ClientOnly>
\ No newline at end of file

example/src/App.vue

@@ -3,6 +3,7 @@ import DragGrid from "../../src/DragGrid.vue";
 import CircularCard from "./components/CircularCard.vue";
 import NumberCounter from "./components/NumberCounter.vue";
 import Example1Generic from "./Example1Generic.vue";
+import Example2TicTacToe from "./Example2TicTacToe.vue";
 </script>
 
 <template>
@@ -21,42 +22,8 @@ import Example1Generic from "./Example1Generic.vue";
       container for playing pieces. You can drag as many pieces as you want from
       the container to the field.
     </p>
-    <div class="ttt-container">
-      <DragGrid
-        :rows="3"
-        :cols="3"
-        v-model="ticTacToe1"
-        class="tic-tac-toe"
-        context="ticTacToe"
-        :validate-element="randomKey"
-      >
-        <template #item="item">
-          <CircularCard>
-            {{ item.key.startsWith("a") ? "X" : "O" }}
-          </CircularCard>
-        </template>
-      </DragGrid>
-      <div>
-        <p>
-          These two are two different grids but we can drag from right to left!
-        </p>
-        <p>Drag items from the container on the right to play on the left.</p>
-      </div>
-      <DragGrid
-        :rows="1"
-        :cols="2"
-        v-model="ticTacToe2"
-        class="tic-tac-toe"
-        context="ticTacToe"
-        :pos-validation="blockAllMoving"
-      >
-        <template #item="item">
-          <CircularCard>
-            {{ item.data.text }}
-          </CircularCard>
-        </template>
-      </DragGrid>
-    </div>
+
+    <example2-tic-tac-toe></example2-tic-tac-toe>
 
     <h2>Example 3: Counters</h2>
     <p>
@@ -252,13 +219,12 @@ import Example1Generic from "./Example1Generic.vue";
         </label>
 
         <drag-grid
-          v-model="ticTacToe1"
+          v-model="ticTacToe"
           :cols="3"
           :rows="3"
           :disabled="gridDisabled"
           class="tic-tac-toe"
           context="ticTacToe"
-          :validate-element="randomKey"
         >
           <template #item="item">
             <CircularCard>
@@ -299,13 +265,6 @@ import Example1Generic from "./Example1Generic.vue";
 export default {
   name: "App",
   methods: {
-    blockAllMoving() {
-      return false;
-    },
-    randomKey(element) {
-      if (element.key.length !== 1) return;
-      element.key += Math.random().toString(36).replace("0.", "");
-    },
     logInput(input) {
       console.log("New movement detected:", input);
     },
@@ -377,14 +336,10 @@ export default {
   },
   data() {
     return {
-      ticTacToe1: [
+      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" } },
       ],
-      ticTacToe2: [
-        { x: 1, y: 1, w: 1, h: 1, key: "a", data: { text: "X" } },
-        { x: 2, y: 1, w: 1, h: 1, key: "b", data: { text: "O" } },
-      ],
       counters: [
         { x: 1, y: 1, w: 1, h: 1, key: "a", data: { num: 1 } },
         { x: 2, y: 1, w: 1, h: 1, key: "b", data: { num: 4 } },

example/src/Example2TicTacToe.vue

+<script setup>
+import CircularCard from "./components/CircularCard.vue";
+import DragGrid from "../../src/DragGrid.vue";
+</script>
+
+<template>
+  <div class="ttt-container">
+    <DragGrid
+      :rows="3"
+      :cols="3"
+      v-model="ticTacToe1"
+      class="tic-tac-toe"
+      context="ticTacToe"
+      :validate-element="randomKey"
+    >
+      <template #item="item">
+        <CircularCard>
+          {{ item.key.startsWith("a") ? "X" : "O" }}
+        </CircularCard>
+      </template>
+    </DragGrid>
+    <div>
+      <p>
+        These two are two different grids but we can drag from right to left!
+      </p>
+      <p>Drag items from the container on the right to play on the left.</p>
+    </div>
+    <DragGrid
+      :rows="1"
+      :cols="2"
+      v-model="ticTacToe2"
+      class="tic-tac-toe"
+      context="ticTacToe"
+      :pos-validation="blockAllMoving"
+    >
+      <template #item="item">
+        <CircularCard>
+          {{ item.data.text }}
+        </CircularCard>
+      </template>
+    </DragGrid>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Example2TicTacToe",
+  methods: {
+    blockAllMoving() {
+      return false;
+    },
+    randomKey(element) {
+      if (element.key.length !== 1) return;
+      element.key += Math.random().toString(36).replace("0.", "");
+    },
+  },
+  data() {
+    return {
+      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" } },
+      ],
+      ticTacToe2: [
+        { x: 1, y: 1, w: 1, h: 1, key: "a", data: { text: "X" } },
+        { x: 2, y: 1, w: 1, h: 1, key: "b", data: { text: "O" } },
+      ],
+    };
+  },
+};
+</script>
+
+<style scoped>
+.tic-tac-toe {
+  max-width: 400px;
+}
+
+.ttt-container {
+  display: flex;
+  justify-content: space-between;
+}
+</style>