diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index aadff8534573927ad854b9460d48f7cf292c86ee..2056ca825f2bea57577b7626b3c26aa053d3f095 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -9,6 +9,7 @@ module.exports = {
children: [
'/examples/Generic.md',
'/examples/TicTacToe.md',
+ '/examples/Counters.md',
]
}
],
diff --git a/docs/examples/Counters.md b/docs/examples/Counters.md
new file mode 100644
index 0000000000000000000000000000000000000000..af637d0c7337db48abc1814380e90987e973b0be
--- /dev/null
+++ b/docs/examples/Counters.md
@@ -0,0 +1,15 @@
+# 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
diff --git a/example/src/App.vue b/example/src/App.vue
index 43b9b57182fe78e31c5ffcac0fa49b534b229dfc..6939b34660cb10beb3fda60f6a21f5a703633ea8 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -1,9 +1,9 @@
<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;
}
diff --git a/example/src/Example3Counters.vue b/example/src/Example3Counters.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9f885516294398eecebd26775a4fd3c490f3dd75
--- /dev/null
+++ b/example/src/Example3Counters.vue
@@ -0,0 +1,77 @@
+<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>
diff --git a/example/src/components/NumberCounter.vue b/example/src/components/NumberCounter.vue
index 001068577abfec812951ae184ac1e78b26371c33..62cc6c1a0d92ab1de9943ffd6b4204b70afdacac 100644
--- a/example/src/components/NumberCounter.vue
+++ b/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 {