Create more examples

example/src/App.vue

 <script setup>
 import DragGrid from "../../src/DragGrid.vue";
 import CircularCard from "./components/CircularCard.vue";
+import NumberCounter from "./components/NumberCounter.vue";
 </script>
 
 <template>
@@ -24,12 +25,14 @@ import CircularCard from "./components/CircularCard.vue";
       >
         <template #item="item">
           <CircularCard>
-            {{ item.key.startsWith("a") ? "X" : "O" }}</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>
+          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
@@ -42,11 +45,31 @@ import CircularCard from "./components/CircularCard.vue";
       >
         <template #item="item">
           <CircularCard>
-            {{ item.data.text }}</CircularCard
-          >
+            {{ item.data.text }}
+          </CircularCard>
         </template>
       </DragGrid>
     </div>
+    <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>
+      </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>
+      </drag-grid>
+    </div>
   </div>
 </template>
 
@@ -65,7 +88,10 @@ export default {
     },
     randomKey(element) {
       if (element.key.length !== 1) return;
-      element.key += Math.random().toString(36).replace('0.', '');
+      element.key += Math.random().toString(36).replace("0.", "");
+    },
+    logInput(input) {
+      console.log("New movement detected:", input);
     },
   },
   data() {
@@ -89,12 +115,21 @@ export default {
         { 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"} },
+        { 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"} },
+        { 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 } },
+        { 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 } },
       ],
     };
   },

example/src/components/NumberCounter.vue

+<template>
+  <div>
+    <p>External counter:</p>
+    <div class="row">
+      <button @click="$emit('input', value - 1)">-</button>
+      {{ value }}
+      <button @click="$emit('input', value + 1)">+</button>
+    </div>
+
+    <p>Internal counter:</p>
+    <div class="row">
+      <button @click="count--">-</button>
+      {{ count }}
+      <button @click="count++">+</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "NumberCounter",
+  props: {
+    value: Number,
+  },
+  emits: ["input"],
+  data() {
+    return {
+      count: 0,
+    };
+  },
+};
+</script>
+
+<style scoped>
+div {
+  background: #2c3e50;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1em;
+  gap: 3px;
+}
+div.row {
+  flex-direction: row;
+  gap: 1em;
+}
+</style>