From d7d4ae95622abc9d80d32e168525479b70d45f39 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Mon, 13 Feb 2023 23:05:48 +0100
Subject: [PATCH] Move example 6 to separate component and docs
---
docs/.vuepress/config.js | 1 +
docs/examples/Disabled.md | 14 +++++++++
example/src/App.vue | 31 +++-----------------
example/src/Example6Disabled.vue | 49 ++++++++++++++++++++++++++++++++
4 files changed, 68 insertions(+), 27 deletions(-)
create mode 100644 docs/examples/Disabled.md
create mode 100644 example/src/Example6Disabled.vue
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 72b6a86..ab4113a 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -12,6 +12,7 @@ module.exports = {
'/examples/Counters.md',
'/examples/Lessons.md',
'/examples/Colors.md',
+ '/examples/Disabled.md',
]
}
],
diff --git a/docs/examples/Disabled.md b/docs/examples/Disabled.md
new file mode 100644
index 0000000..12bd131
--- /dev/null
+++ b/docs/examples/Disabled.md
@@ -0,0 +1,14 @@
+# Example 6: Disabled grid
+
+This uses the same data as the tic-tac-toe but is completely disabled.
+Notice how the items still move if the tic-tac-toe data would
+change. Uncheck the checkbox to enable:
+
+<ClientOnly>
+<script setup>
+import Example6Disabled from "../../example/src/Example6Disabled.vue";
+</script>
+
+
+<Example6Disabled />
+</ClientOnly>
\ No newline at end of file
diff --git a/example/src/App.vue b/example/src/App.vue
index 2280db8..92f030b 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -1,11 +1,11 @@
<script setup>
import DragGrid from "../../src/DragGrid.vue";
-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";
import Example5Colors from "./Example5Colors.vue";
+import Example6Disabled from "./Example6Disabled.vue";
</script>
<template>
@@ -62,7 +62,7 @@ import Example5Colors from "./Example5Colors.vue";
</p>
<example5-colors></example5-colors>
- <div class="ttt-container">
+ <div class="row">
<div>
<h2>Example 6: Disabled grid</h2>
<p>
@@ -71,25 +71,7 @@ import Example5Colors from "./Example5Colors.vue";
changed. Uncheck the checkbox to enable:
</p>
- <label>
- <input type="checkbox" v-model="gridDisabled" />
- Grid disabled?
- </label>
-
- <drag-grid
- v-model="ticTacToe"
- :cols="3"
- :rows="3"
- :disabled="gridDisabled"
- class="tic-tac-toe"
- context="ticTacToe"
- >
- <template #item="item">
- <CircularCard>
- {{ item.key.startsWith("a") ? "X" : "O" }}
- </CircularCard>
- </template>
- </drag-grid>
+ <example6-disabled></example6-disabled>
</div>
<div>
<h2>Example 7: Disabled fields and items with props</h2>
@@ -124,11 +106,6 @@ export default {
name: "App",
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" } },
- ],
- gridDisabled: true,
someDisabledItems: [
{ key: "key1", x: 1, y: 3, w: 1, h: 1, data: {} },
{ key: "key2", x: 2, y: 2, w: 1, h: 1, data: {} },
@@ -155,7 +132,7 @@ export default {
max-width: 400px;
}
-.ttt-container {
+.row {
display: flex;
justify-content: space-between;
}
diff --git a/example/src/Example6Disabled.vue b/example/src/Example6Disabled.vue
new file mode 100644
index 0000000..d2267db
--- /dev/null
+++ b/example/src/Example6Disabled.vue
@@ -0,0 +1,49 @@
+<script setup>
+import CircularCard from "./components/CircularCard.vue";
+import DragGrid from "../../src/DragGrid.vue";
+</script>
+
+<template>
+ <div>
+ <label>
+ <input type="checkbox" v-model="gridDisabled" />
+ Grid disabled?
+ </label>
+
+ <drag-grid
+ v-model="ticTacToe"
+ :cols="3"
+ :rows="3"
+ :disabled="gridDisabled"
+ class="tic-tac-toe"
+ context="ticTacToe"
+ >
+ <template #item="item">
+ <CircularCard>
+ {{ item.key.startsWith("a") ? "X" : "O" }}
+ </CircularCard>
+ </template>
+ </drag-grid>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "Example6Disabled",
+ 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" } },
+ ],
+ gridDisabled: true,
+ };
+ },
+};
+</script>
+
+<style scoped>
+.tic-tac-toe {
+ max-width: 400px;
+}
+</style>
--
GitLab