From b0c9c76fde6f6cfd7c384099def60a64b3ad2fcc Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Mon, 13 Feb 2023 14:02:51 +0100
Subject: [PATCH] Explain examples better
---
example/src/App.vue | 65 ++++++++++++++++++++++++++++++++++++++++++++-
1 file changed, 64 insertions(+), 1 deletion(-)
diff --git a/example/src/App.vue b/example/src/App.vue
index 311d66b..451cba0 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -6,7 +6,19 @@ import NumberCounter from "./components/NumberCounter.vue";
<template>
<div id="app">
- <DragGrid :rows="8" :cols="5" :pos-validation="blockField" v-model="items">
+ <h1><code>DragGrid</code> Examples</h1>
+ <h2>Example 1</h2>
+ <p>
+ Grid with two programmatically blocked cells and one programmatically
+ blocked item
+ </p>
+ <DragGrid
+ :rows="8"
+ :cols="5"
+ :pos-validation="blockField"
+ v-model="items"
+ class="bordered"
+ >
<div id="blocker">
This field is blocked because it's filled, the next one programmatically
</div>
@@ -14,6 +26,13 @@ import NumberCounter from "./components/NumberCounter.vue";
<div class="container">{{ item }}</div>
</template>
</DragGrid>
+
+ <h2>Example 2: "Tic-Tac-Toe"</h2>
+ <p>
+ A grid functioning as a playing field and another functioning as a
+ container for playing pieces. You can drag as many pieces as you want from
+ the container to the field.
+ </p>
<div class="ttt-container">
<DragGrid
:rows="3"
@@ -50,6 +69,15 @@ import NumberCounter from "./components/NumberCounter.vue";
</template>
</DragGrid>
</div>
+
+ <h2>Example 3: Counters</h2>
+ <p>
+ 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 <code>data</code> attribute
+ of each item and gets transferred as well. Both grids have also custom
+ highlights.
+ </p>
<div class="ttt-container">
<drag-grid
v-model="counters"
@@ -80,6 +108,16 @@ import NumberCounter from "./components/NumberCounter.vue";
</template>
</drag-grid>
</div>
+
+ <h2>Example 4: Dynamic lessons</h2>
+ <p>
+ These lessons are loaded from <code>computed</code> to simulate a
+ non-editable source like an API. they are changed using the method
+ <code>handleLessonMoved</code>. 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
+ <code>item3</code> back and forth!
+ </p>
<div class="ttt-container">
<div>
<label>
@@ -137,6 +175,17 @@ import NumberCounter from "./components/NumberCounter.vue";
</template>
</drag-grid>
</div>
+
+ <h2>Example 5: Dynamic colors</h2>
+ <p>
+ This example showcases the <code>rawItem</code> with the custom method
+ <code>getColor</code>. Both grids on the outside call the method with
+ <code>"red"</code> while the one in the middle uses <code>"green"</code>.
+ We use arrays called <code>placedA</code>, <code>placedB</code> and
+ <code>placedC</code> to save, which item is contained in which grid.
+ Notice: the third grid doesn't save the item position, they are always
+ positioned automatically.
+ </p>
<div class="ttt-container">
<drag-grid
:value="colorGrid"
@@ -549,4 +598,18 @@ export default {
line-height: 2em;
box-sizing: content-box;
}
+
+h2 {
+ padding-top: 1em;
+}
+
+h2 + p {
+ padding-bottom: 0.5em;
+}
+
+code {
+ background: lightgray;
+ padding: 0.2em;
+ border-radius: 3px;
+}
</style>
--
GitLab