From aceb22a470533578672e9f4318ea0af920aa5124 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Mon, 13 Feb 2023 22:51:19 +0100
Subject: [PATCH] Move example 4 to separate component and docs
---
docs/.vuepress/config.js | 1 +
docs/examples/Lessons.md | 17 +++
example/src/App.vue | 156 +-----------------------
example/src/Example4Lessons.vue | 210 ++++++++++++++++++++++++++++++++
4 files changed, 230 insertions(+), 154 deletions(-)
create mode 100644 docs/examples/Lessons.md
create mode 100644 example/src/Example4Lessons.vue
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 2056ca8..b99a7d3 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -10,6 +10,7 @@ module.exports = {
'/examples/Generic.md',
'/examples/TicTacToe.md',
'/examples/Counters.md',
+ '/examples/Lessons.md',
]
}
],
diff --git a/docs/examples/Lessons.md b/docs/examples/Lessons.md
new file mode 100644
index 0000000..80c092c
--- /dev/null
+++ b/docs/examples/Lessons.md
@@ -0,0 +1,17 @@
+# Example 4: Dynamic lessons
+
+These lessons are loaded from `computed` to simulate a
+non-editable source like an API. they are changed using the method
+`handleLessonMoved`. Try changing the sizes of Lesson1, the
+grid and the texts of the items! The lesson container on the side doesn't
+have a highlight and doesn't keep track of the item position. Try moving
+`item3` back and forth, the text will change!
+
+<ClientOnly>
+<script setup>
+import Example4Lessons from "../../example/src/Example4Lessons.vue";
+</script>
+
+
+<Example4Lessons />
+</ClientOnly>
\ No newline at end of file
diff --git a/example/src/App.vue b/example/src/App.vue
index 6939b34..8d8be4b 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -4,6 +4,7 @@ import CircularCard from "./components/CircularCard.vue";
import Example1Generic from "./Example1Generic.vue";
import Example2TicTacToe from "./Example2TicTacToe.vue";
import Example3Counters from "./Example3Counters.vue";
+import Example4Lessons from "./Example4Lessons.vue";
</script>
<template>
@@ -45,63 +46,8 @@ import Example3Counters from "./Example3Counters.vue";
have a highlight and doesn't keep track of the item position. Try moving
<code>item3</code> back and forth!
</p>
- <div class="ttt-container">
- <div>
- <label>
- Lesson 1 has length: {{ lesson1Length }}
- <input
- type="range"
- v-model="lesson1Length"
- min="1"
- max="5"
- step="1"
- />
- </label>
- <input type="text" v-model="lessonData.lesson1" />
- </div>
- <div>
- <label>
- Lesson grid has width: {{ lesson1Cols }}
- <input type="range" v-model="lesson1Cols" min="2" max="5" step="1" />
- </label>
- <input type="text" v-model="lessonData.lesson2" />
- </div>
- <div>
- <label>
- Lesson grid has height: {{ lesson1Rows }}
- <input type="range" v-model="lesson1Rows" min="6" max="10" step="1" />
- <input type="text" v-model="lessonData.lesson3.inside" />
- <input type="text" v-model="lessonData.lesson3.outside" />
- </label>
- </div>
- <drag-grid
- :value="lessons1"
- :cols="parseInt(lesson1Cols)"
- :rows="parseInt(lesson1Rows)"
- class="bordered"
- context="lesson"
- grid-id="lesson-plan"
- @itemChanged="handleLessonMoved"
- >
- <template #item="item">
- <div class="container">{{ item }}</div>
- </template>
- </drag-grid>
- <drag-grid
- :value="lessons1"
- :cols="1"
- :rows="10"
- context="lesson"
- grid-id="lesson-storage"
- @itemChanged="handleLessonDropInContainer"
- no-highlight
- >
- <template #item="item">
- <div class="container">{{ item }}</div>
- </template>
- </drag-grid>
- </div>
+ <example4-lessons></example4-lessons>
<h2>Example 5: Dynamic colors</h2>
<p>
@@ -237,29 +183,6 @@ import Example3Counters from "./Example3Counters.vue";
export default {
name: "App",
methods: {
- handleLessonMoved(lesson) {
- this.logInput(lesson);
- switch (lesson.key) {
- case "lesson1":
- this.lesson1X = lesson.x;
- this.lesson1Y = lesson.y;
- break;
- case "lesson2":
- this.lesson2X = lesson.x;
- this.lesson2Y = lesson.y;
- break;
- case "lesson3":
- this.lesson3X = lesson.x;
- this.lesson3Y = lesson.y;
- this.lesson3inPlan = true;
- break;
- default:
- console.error("Something is wrong here!");
- }
- },
- handleLessonDropInContainer(lesson) {
- if (lesson.key === "lesson3") this.lesson3inPlan = false;
- },
contains(array, search) {
return array.filter((obj) => obj === search).length > 0;
},
@@ -309,24 +232,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" } },
],
- lesson1Length: 1,
- lesson1Cols: 4,
- lesson1Rows: 6,
- lesson1X: 1,
- lesson1Y: 1,
- lesson2X: 2,
- lesson2Y: 1,
- lesson3X: -1,
- lesson3Y: -1,
- lesson3inPlan: false,
- lessonData: {
- lesson1: "Nothing",
- lesson2: "Hallo",
- lesson3: {
- inside: "This is lesson 3 inside the plan",
- outside: "This is lesson3 outside of the plan",
- },
- },
placedA: ["item1", "item2"],
placedB: ["item3", "item4"],
placedC: ["item5", "item6"],
@@ -368,63 +273,6 @@ export default {
};
},
computed: {
- lessons1() {
- return [
- {
- x: (grid) => {
- return grid.gridId === "lesson-plan" ? this.lesson1X : 0;
- },
- y: (grid) => {
- return grid.gridId === "lesson-plan" ? this.lesson1Y : 0;
- },
- w: 1,
- h: this.lesson1Length,
- key: "lesson1",
- data: {
- text: this.lessonData.lesson1,
- },
- },
- {
- x: (grid) => {
- return grid.gridId === "lesson-plan" ? this.lesson2X : 0;
- },
- y: (grid) => {
- return grid.gridId === "lesson-plan" ? this.lesson2Y : 0;
- },
- w: 1,
- h: parseInt(this.lesson1Length) + 1,
- key: "lesson2",
- data: {
- text: this.lessonData.lesson2,
- },
- },
- {
- x: (grid) => {
- if (this.lesson3inPlan) {
- return grid.gridId === "lesson-plan" ? this.lesson3X : -1;
- }
- return grid.gridId === "lesson-plan" ? -1 : 0;
- },
- y: (grid) => {
- if (this.lesson3inPlan) {
- return grid.gridId === "lesson-plan" ? this.lesson3Y : -1;
- }
- return grid.gridId === "lesson-plan" ? -1 : 0;
- },
- w: 1,
- h: parseInt(this.lesson1Length) + 1,
- key: "lesson3",
- data: (grid) => {
- return {
- text:
- grid.gridId === "lesson-storage"
- ? this.lessonData.lesson3.outside
- : this.lessonData.lesson3.inside,
- };
- },
- },
- ];
- },
colorGrid() {
let items = ["item1", "item2", "item3", "item4", "item5", "item6"];
let greens = [
diff --git a/example/src/Example4Lessons.vue b/example/src/Example4Lessons.vue
new file mode 100644
index 0000000..f321a7e
--- /dev/null
+++ b/example/src/Example4Lessons.vue
@@ -0,0 +1,210 @@
+<script setup>
+import DragGrid from "../../src/DragGrid.vue";
+</script>
+
+<template>
+ <div>
+ <div class="row">
+ <div>
+ <label>
+ Lesson 1 has length: {{ lesson1Length }}
+ <input
+ type="range"
+ v-model="lesson1Length"
+ min="1"
+ max="5"
+ step="1"
+ />
+ </label>
+ <label for="lesson1">Text of Lesson 1:</label>
+ <input id="lesson1" type="text" v-model="lessonData.lesson1" />
+ </div>
+ <div>
+ <label>
+ Lesson grid has width: {{ lesson1Cols }}
+ <input type="range" v-model="lesson1Cols" min="2" max="5" step="1" />
+ </label>
+ <label for="lesson2">Text of Lesson 2:</label>
+ <input id="lesson2" type="text" v-model="lessonData.lesson2" />
+ </div>
+ <div>
+ <label>
+ Lesson grid has height: {{ lesson1Rows }}
+ <input type="range" v-model="lesson1Rows" min="6" max="10" step="1" />
+ </label>
+
+ <label for="lesson3">Texts of Lesson 3:</label>
+ <input id="lesson3" type="text" v-model="lessonData.lesson3.inside" />
+ <input type="text" v-model="lessonData.lesson3.outside" />
+ </div>
+ </div>
+
+ <div class="row">
+ <drag-grid
+ :value="lessons1"
+ :cols="parseInt(lesson1Cols)"
+ :rows="parseInt(lesson1Rows)"
+ class="bordered"
+ context="lesson"
+ grid-id="lesson-plan"
+ @itemChanged="handleLessonMoved"
+ >
+ <template #item="item">
+ <div class="container">{{ item }}</div>
+ </template>
+ </drag-grid>
+ <drag-grid
+ :value="lessons1"
+ :cols="1"
+ :rows="10"
+ context="lesson"
+ grid-id="lesson-storage"
+ @itemChanged="handleLessonDropInContainer"
+ no-highlight
+ class="bordered"
+ >
+ <template #item="item">
+ <div class="container">{{ item }}</div>
+ </template>
+ </drag-grid>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "Example4Lessons",
+ data() {
+ return {
+ lesson1Length: 1,
+ lesson1Cols: 4,
+ lesson1Rows: 6,
+ lesson1X: 1,
+ lesson1Y: 1,
+ lesson2X: 2,
+ lesson2Y: 1,
+ lesson3X: -1,
+ lesson3Y: -1,
+ lesson3inPlan: false,
+ lessonData: {
+ lesson1: "Nothing",
+ lesson2: "Hallo",
+ lesson3: {
+ inside: "This is lesson 3 inside the plan",
+ outside: "This is lesson3 outside of the plan",
+ },
+ },
+ };
+ },
+ methods: {
+ logInput(input) {
+ console.log("New movement detected:", input);
+ },
+ handleLessonMoved(lesson) {
+ this.logInput(lesson);
+ switch (lesson.key) {
+ case "lesson1":
+ this.lesson1X = lesson.x;
+ this.lesson1Y = lesson.y;
+ break;
+ case "lesson2":
+ this.lesson2X = lesson.x;
+ this.lesson2Y = lesson.y;
+ break;
+ case "lesson3":
+ this.lesson3X = lesson.x;
+ this.lesson3Y = lesson.y;
+ this.lesson3inPlan = true;
+ break;
+ default:
+ console.error("Something is wrong here!");
+ }
+ },
+ handleLessonDropInContainer(lesson) {
+ if (lesson.key === "lesson3") this.lesson3inPlan = false;
+ },
+ },
+ computed: {
+ lessons1() {
+ return [
+ {
+ x: (grid) => {
+ return grid.gridId === "lesson-plan" ? this.lesson1X : 0;
+ },
+ y: (grid) => {
+ return grid.gridId === "lesson-plan" ? this.lesson1Y : 0;
+ },
+ w: 1,
+ h: this.lesson1Length,
+ key: "lesson1",
+ data: {
+ text: this.lessonData.lesson1,
+ },
+ },
+ {
+ x: (grid) => {
+ return grid.gridId === "lesson-plan" ? this.lesson2X : 0;
+ },
+ y: (grid) => {
+ return grid.gridId === "lesson-plan" ? this.lesson2Y : 0;
+ },
+ w: 1,
+ h: parseInt(this.lesson1Length) + 1,
+ key: "lesson2",
+ data: {
+ text: this.lessonData.lesson2,
+ },
+ },
+ {
+ x: (grid) => {
+ if (this.lesson3inPlan) {
+ return grid.gridId === "lesson-plan" ? this.lesson3X : -1;
+ }
+ return grid.gridId === "lesson-plan" ? -1 : 0;
+ },
+ y: (grid) => {
+ if (this.lesson3inPlan) {
+ return grid.gridId === "lesson-plan" ? this.lesson3Y : -1;
+ }
+ return grid.gridId === "lesson-plan" ? -1 : 0;
+ },
+ w: 1,
+ h: parseInt(this.lesson1Length) + 1,
+ key: "lesson3",
+ data: (grid) => {
+ return {
+ text:
+ grid.gridId === "lesson-storage"
+ ? this.lessonData.lesson3.outside
+ : this.lessonData.lesson3.inside,
+ };
+ },
+ },
+ ];
+ },
+ },
+};
+</script>
+
+<style scoped>
+.row {
+ display: flex;
+ justify-content: space-between;
+}
+
+.row > div:not(.bordered) {
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+}
+
+.bordered {
+ border: 2px solid grey;
+}
+
+.container {
+ background: lightcoral;
+ width: 100%;
+ height: 100%;
+}
+</style>
--
GitLab