From 914368a0ec348cc053c251e031a6f91fba06a693 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Mon, 13 Feb 2023 22:58:25 +0100
Subject: [PATCH] Move example 5 to separate component and docs
---
docs/.vuepress/config.js | 1 +
docs/examples/Colors.md | 19 +++
example/src/App.vue | 208 +-----------------------------
example/src/Example5Colors.vue | 229 +++++++++++++++++++++++++++++++++
4 files changed, 251 insertions(+), 206 deletions(-)
create mode 100644 docs/examples/Colors.md
create mode 100644 example/src/Example5Colors.vue
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index b99a7d3..72b6a86 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -11,6 +11,7 @@ module.exports = {
'/examples/TicTacToe.md',
'/examples/Counters.md',
'/examples/Lessons.md',
+ '/examples/Colors.md',
]
}
],
diff --git a/docs/examples/Colors.md b/docs/examples/Colors.md
new file mode 100644
index 0000000..c6917ac
--- /dev/null
+++ b/docs/examples/Colors.md
@@ -0,0 +1,19 @@
+# Example 5: Dynamic colors
+
+This example showcases the `rawItem` with the custom method
+`getColor`. Both grids on the outside call the method with
+`"red"` while the one in the middle uses `"green"`.
+We use arrays called `placedA`, `placedB` and
+`placedC` to save, which item is contained in which grid.
+
+Notice: the third grid doesn't save the item position, they are always
+positioned automatically.
+
+<ClientOnly>
+<script setup>
+import Example5Colors from "../../example/src/Example5Colors.vue";
+</script>
+
+
+<Example5Colors />
+</ClientOnly>
\ No newline at end of file
diff --git a/example/src/App.vue b/example/src/App.vue
index 8d8be4b..2280db8 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -5,6 +5,7 @@ import Example1Generic from "./Example1Generic.vue";
import Example2TicTacToe from "./Example2TicTacToe.vue";
import Example3Counters from "./Example3Counters.vue";
import Example4Lessons from "./Example4Lessons.vue";
+import Example5Colors from "./Example5Colors.vue";
</script>
<template>
@@ -59,68 +60,7 @@ import Example4Lessons from "./Example4Lessons.vue";
Notice: the third grid doesn't save the item position, they are always
positioned automatically.
</p>
- <div class="ttt-container">
- <drag-grid
- :value="colorGrid"
- :cols="4"
- :rows="4"
- grid-id="gridA"
- context="colors"
- class="bordered color-grid"
- @itemChanged="handleColorItemChange"
- >
- <template #item="item">
- <div
- :style="{
- background: item.rawItem.getColor('red'),
- color: 'white',
- }"
- >
- {{ item.data.name }}
- </div>
- </template>
- </drag-grid>
- <drag-grid
- :value="colorGrid"
- :cols="4"
- :rows="4"
- grid-id="gridB"
- context="colors"
- class="bordered color-grid"
- @itemChanged="handleColorItemChange"
- >
- <template #item="item">
- <div
- :style="{
- background: item.rawItem.getColor('green'),
- color: 'black',
- }"
- >
- {{ item.data.name }}
- </div>
- </template>
- </drag-grid>
- <drag-grid
- :value="colorGrid"
- :cols="4"
- :rows="4"
- grid-id="gridC"
- context="colors"
- class="bordered color-grid"
- @itemChanged="handleColorItemChange"
- >
- <template #item="item">
- <div
- :style="{
- background: item.rawItem.getColor('red'),
- color: 'white',
- }"
- >
- {{ item.data.name }}
- </div>
- </template>
- </drag-grid>
- </div>
+ <example5-colors></example5-colors>
<div class="ttt-container">
<div>
@@ -182,83 +122,12 @@ import Example4Lessons from "./Example4Lessons.vue";
<script>
export default {
name: "App",
- methods: {
- contains(array, search) {
- return array.filter((obj) => obj === search).length > 0;
- },
- findAndRemove(array, element) {
- let index = array.findIndex((i) => {
- return i === element;
- });
- if (index >= 0) array.splice(index, 1);
- },
- handleColorItemChange(item) {
- this[item.key].x = item.x;
- this[item.key].y = item.y;
-
- if (item.gridId === item.originGridId) return;
-
- switch (item.gridId) {
- case "gridA":
- // Moved to gridA
- this.findAndRemove(
- item.originGridId === "gridB" ? this.placedB : this.placedC,
- item.key
- );
- this.placedA.push(item.key);
- break;
- case "gridB":
- // Moved to gridB
- this.findAndRemove(
- item.originGridId === "gridA" ? this.placedA : this.placedC,
- item.key
- );
- this.placedB.push(item.key);
- break;
- case "gridC":
- // Moved to gridC
- this.findAndRemove(
- item.originGridId === "gridB" ? this.placedB : this.placedA,
- item.key
- );
- this.placedC.push(item.key);
- break;
- }
- },
- },
data() {
return {
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" } },
],
- placedA: ["item1", "item2"],
- placedB: ["item3", "item4"],
- placedC: ["item5", "item6"],
- item1: {
- x: 1,
- y: 1,
- },
- item2: {
- x: 2,
- y: 2,
- },
- item3: {
- x: 1,
- y: 1,
- },
- item4: {
- x: 3,
- y: 3,
- },
- item5: {
- x: 2,
- y: 4,
- },
- item6: {
- x: 4,
- y: 2,
- },
gridDisabled: true,
someDisabledItems: [
{ key: "key1", x: 1, y: 3, w: 1, h: 1, data: {} },
@@ -272,69 +141,6 @@ export default {
],
};
},
- computed: {
- colorGrid() {
- let items = ["item1", "item2", "item3", "item4", "item5", "item6"];
- let greens = [
- "green",
- "seagreen",
- "greenyellow",
- "darkolivegreen",
- "limegreen",
- "palegreen",
- ];
- let reds = [
- "darkred",
- "indianred",
- "orangered",
- "red",
- "maroon",
- "firebrick",
- ];
- return items.map((itemName) => {
- return {
- key: itemName,
- x: (grid) => {
- if (grid.gridId === "gridA") {
- return this.contains(this.placedA, itemName)
- ? this[itemName].x
- : -1;
- } else if (grid.gridId === "gridB") {
- return this.contains(this.placedB, itemName)
- ? this[itemName].x
- : -1;
- } else {
- // gridC
- return this.contains(this.placedC, itemName) ? 0 : -1;
- }
- },
- y: (grid) => {
- if (grid.gridId === "gridA") {
- return this.contains(this.placedA, itemName)
- ? this[itemName].y
- : -1;
- } else if (grid.gridId === "gridB") {
- return this.contains(this.placedB, itemName)
- ? this[itemName].y
- : -1;
- } else {
- // gridC
- return this.contains(this.placedC, itemName) ? 0 : -1;
- }
- },
- w: 1,
- h: 1,
- data: {
- name: itemName,
- },
- getColor: (a) =>
- a === "red"
- ? reds[parseInt(itemName[4]) - 1]
- : greens[parseInt(itemName[4]) - 1],
- };
- });
- },
- },
};
</script>
@@ -354,16 +160,6 @@ export default {
justify-content: space-between;
}
-.bordered {
- border: 2px solid grey;
-}
-
-.color-grid {
- min-height: 11em;
- line-height: 2em;
- box-sizing: content-box;
-}
-
h2 {
padding-top: 1em;
}
diff --git a/example/src/Example5Colors.vue b/example/src/Example5Colors.vue
new file mode 100644
index 0000000..47c2d4e
--- /dev/null
+++ b/example/src/Example5Colors.vue
@@ -0,0 +1,229 @@
+<script setup>
+import DragGrid from "../../src/DragGrid.vue";
+</script>
+
+<template>
+ <div class="row">
+ <drag-grid
+ :value="colorGrid"
+ :cols="4"
+ :rows="4"
+ grid-id="gridA"
+ context="colors"
+ class="bordered color-grid"
+ @itemChanged="handleColorItemChange"
+ >
+ <template #item="item">
+ <div
+ :style="{
+ background: item.rawItem.getColor('red'),
+ color: 'white',
+ }"
+ >
+ {{ item.data.name }}
+ </div>
+ </template>
+ </drag-grid>
+ <drag-grid
+ :value="colorGrid"
+ :cols="4"
+ :rows="4"
+ grid-id="gridB"
+ context="colors"
+ class="bordered color-grid"
+ @itemChanged="handleColorItemChange"
+ >
+ <template #item="item">
+ <div
+ :style="{
+ background: item.rawItem.getColor('green'),
+ color: 'black',
+ }"
+ >
+ {{ item.data.name }}
+ </div>
+ </template>
+ </drag-grid>
+ <drag-grid
+ :value="colorGrid"
+ :cols="4"
+ :rows="4"
+ grid-id="gridC"
+ context="colors"
+ class="bordered color-grid"
+ @itemChanged="handleColorItemChange"
+ >
+ <template #item="item">
+ <div
+ :style="{
+ background: item.rawItem.getColor('red'),
+ color: 'white',
+ }"
+ >
+ {{ item.data.name }}
+ </div>
+ </template>
+ </drag-grid>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "Example5Colors",
+ methods: {
+ contains(array, search) {
+ return array.filter((obj) => obj === search).length > 0;
+ },
+ findAndRemove(array, element) {
+ let index = array.findIndex((i) => {
+ return i === element;
+ });
+ if (index >= 0) array.splice(index, 1);
+ },
+ handleColorItemChange(item) {
+ this[item.key].x = item.x;
+ this[item.key].y = item.y;
+
+ if (item.gridId === item.originGridId) return;
+
+ switch (item.gridId) {
+ case "gridA":
+ // Moved to gridA
+ this.findAndRemove(
+ item.originGridId === "gridB" ? this.placedB : this.placedC,
+ item.key
+ );
+ this.placedA.push(item.key);
+ break;
+ case "gridB":
+ // Moved to gridB
+ this.findAndRemove(
+ item.originGridId === "gridA" ? this.placedA : this.placedC,
+ item.key
+ );
+ this.placedB.push(item.key);
+ break;
+ case "gridC":
+ // Moved to gridC
+ this.findAndRemove(
+ item.originGridId === "gridB" ? this.placedB : this.placedA,
+ item.key
+ );
+ this.placedC.push(item.key);
+ break;
+ }
+ },
+ },
+ data() {
+ return {
+ placedA: ["item1", "item2"],
+ placedB: ["item3", "item4"],
+ placedC: ["item5", "item6"],
+ item1: {
+ x: 1,
+ y: 1,
+ },
+ item2: {
+ x: 2,
+ y: 2,
+ },
+ item3: {
+ x: 1,
+ y: 1,
+ },
+ item4: {
+ x: 3,
+ y: 3,
+ },
+ item5: {
+ x: 2,
+ y: 4,
+ },
+ item6: {
+ x: 4,
+ y: 2,
+ },
+ };
+ },
+ computed: {
+ colorGrid() {
+ let items = ["item1", "item2", "item3", "item4", "item5", "item6"];
+ let greens = [
+ "green",
+ "seagreen",
+ "greenyellow",
+ "darkolivegreen",
+ "limegreen",
+ "palegreen",
+ ];
+ let reds = [
+ "darkred",
+ "indianred",
+ "orangered",
+ "red",
+ "maroon",
+ "firebrick",
+ ];
+ return items.map((itemName) => {
+ return {
+ key: itemName,
+ x: (grid) => {
+ if (grid.gridId === "gridA") {
+ return this.contains(this.placedA, itemName)
+ ? this[itemName].x
+ : -1;
+ } else if (grid.gridId === "gridB") {
+ return this.contains(this.placedB, itemName)
+ ? this[itemName].x
+ : -1;
+ } else {
+ // gridC
+ return this.contains(this.placedC, itemName) ? 0 : -1;
+ }
+ },
+ y: (grid) => {
+ if (grid.gridId === "gridA") {
+ return this.contains(this.placedA, itemName)
+ ? this[itemName].y
+ : -1;
+ } else if (grid.gridId === "gridB") {
+ return this.contains(this.placedB, itemName)
+ ? this[itemName].y
+ : -1;
+ } else {
+ // gridC
+ return this.contains(this.placedC, itemName) ? 0 : -1;
+ }
+ },
+ w: 1,
+ h: 1,
+ data: {
+ name: itemName,
+ },
+ getColor: (a) =>
+ a === "red"
+ ? reds[parseInt(itemName[4]) - 1]
+ : greens[parseInt(itemName[4]) - 1],
+ };
+ });
+ },
+ },
+};
+</script>
+
+<style scoped>
+.row {
+ display: flex;
+ justify-content: space-between;
+}
+
+.bordered {
+ border: 2px solid grey;
+}
+
+.color-grid {
+ min-height: 11em;
+ line-height: 2em;
+ box-sizing: content-box;
+}
+</style>
--
GitLab