Move example 3 to separate component and docs

docs/.vuepress/config.js

@@ -9,6 +9,7 @@ module.exports = {
                 children: [
                     '/examples/Generic.md',
                     '/examples/TicTacToe.md',
+                    '/examples/Counters.md',
                 ]
             }
         ],

docs/examples/Counters.md

+# Example 3: Counters
+
+Showcasing local and global state: The local state of the counter
+components doesn't change when moved inside one grid, but is cleared when
+moved to the other. The global state is in the `data` attribute
+of each item and gets transferred as well. Both grids have also custom
+highlights.
+
+<ClientOnly>
+<script setup>
+import Example3Counters from "../../example/src/Example3Counters.vue";
+</script>
+
+<Example3Counters />
+</ClientOnly>
\ No newline at end of file

example/src/App.vue

 <script setup>
 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";
+import Example3Counters from "./Example3Counters.vue";
 </script>
 
 <template>
@@ -33,36 +33,8 @@ import Example2TicTacToe from "./Example2TicTacToe.vue";
       of each item and gets transferred as well. Both grids have also custom
       highlights.
     </p>
-    <div class="ttt-container">
-      <drag-grid
-        v-model="counters"
-        :cols="3"
-        :rows="2"
-        id="c-grid"
-        @input="logInput"
-        context="counter"
-      >
-        <template #item="item">
-          <number-counter v-model="item.data.num"></number-counter>
-        </template>
-        <template #highlight>
-          <div ref="highlight" class="custom-highlight">
-            Das hier ist das Highlight
-          </div>
-        </template>
-      </drag-grid>
-      <span>← Drag here please →</span>
-      <drag-grid v-model="counters2" :cols="3" :rows="2" context="counter">
-        <template #item="item">
-          <number-counter v-model="item.data.num"></number-counter>
-        </template>
-        <template #highlight>
-          <div ref="highlight" class="custom-highlight">
-            Das hier ist das Highlight
-          </div>
-        </template>
-      </drag-grid>
-    </div>
+
+    <example3-counters></example3-counters>
 
     <h2>Example 4: Dynamic lessons</h2>
     <p>
@@ -265,9 +237,6 @@ import Example2TicTacToe from "./Example2TicTacToe.vue";
 export default {
   name: "App",
   methods: {
-    logInput(input) {
-      console.log("New movement detected:", input);
-    },
     handleLessonMoved(lesson) {
       this.logInput(lesson);
       switch (lesson.key) {
@@ -340,15 +309,6 @@ export default {
         { 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" } },
       ],
-      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 } },
-        { x: 3, y: 2, w: 1, h: 1, key: "c", data: { num: -1 } },
-      ],
-      counters2: [
-        { x: 1, y: 2, w: 1, h: 1, key: "d", data: { num: 30 } },
-        { x: 3, y: 1, w: 1, h: 1, key: "e", data: { num: 3 } },
-      ],
       lesson1Length: 1,
       lesson1Cols: 4,
       lesson1Rows: 6,
@@ -546,15 +506,6 @@ export default {
   justify-content: space-between;
 }
 
-.custom-highlight {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: aquamarine;
-  width: 100%;
-  height: 100%;
-}
-
 .bordered {
   border: 2px solid grey;
 }

example/src/Example3Counters.vue

+<script setup>
+import NumberCounter from "./components/NumberCounter.vue";
+import DragGrid from "../../src/DragGrid.vue";
+</script>
+
+<template>
+  <div class="row">
+    <drag-grid
+      v-model="counters"
+      :cols="3"
+      :rows="2"
+      id="c-grid"
+      @input="logInput"
+      context="counter"
+    >
+      <template #item="item">
+        <number-counter v-model="item.data.num"></number-counter>
+      </template>
+      <template #highlight>
+        <div ref="highlight" class="custom-highlight">
+          This is a custom highlight!
+        </div>
+      </template>
+    </drag-grid>
+    <span>← Drag here please →</span>
+    <drag-grid v-model="counters2" :cols="3" :rows="2" context="counter">
+      <template #item="item">
+        <number-counter v-model="item.data.num"></number-counter>
+      </template>
+      <template #highlight>
+        <div ref="highlight" class="custom-highlight">
+          This is a custom highlight!
+        </div>
+      </template>
+    </drag-grid>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Example3Counters",
+  methods: {
+    logInput(input) {
+      console.log("New movement detected:", input);
+    },
+  },
+  data() {
+    return {
+      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 } },
+        { x: 3, y: 2, w: 1, h: 1, key: "c", data: { num: -1 } },
+      ],
+      counters2: [
+        { x: 1, y: 2, w: 1, h: 1, key: "d", data: { num: 30 } },
+        { x: 3, y: 1, w: 1, h: 1, key: "e", data: { num: 3 } },
+      ],
+    };
+  },
+};
+</script>
+
+<style scoped>
+.row {
+  display: flex;
+  justify-content: space-between;
+}
+.custom-highlight {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background: aquamarine;
+  width: 100%;
+  height: 100%;
+}
+</style>

example/src/components/NumberCounter.vue

@@ -41,7 +41,8 @@ div {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 1em;
+  text-align: center;
+  padding: 0.2em;
   gap: 3px;
 }
 div.row {