From 18b1cb4eb7be8c7e317fdb7cb91139aa880eeacd Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Mon, 13 Feb 2023 23:15:14 +0100
Subject: [PATCH] Move example 7 to separate component and docs
---
docs/.vuepress/config.js | 1 +
docs/examples/DisabledItems.md | 14 +++++++
example/src/App.vue | 45 ++------------------
example/src/Example7DisabledItems.vue | 59 +++++++++++++++++++++++++++
4 files changed, 77 insertions(+), 42 deletions(-)
create mode 100644 docs/examples/DisabledItems.md
create mode 100644 example/src/Example7DisabledItems.vue
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index ab4113a..e800988 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -13,6 +13,7 @@ module.exports = {
'/examples/Lessons.md',
'/examples/Colors.md',
'/examples/Disabled.md',
+ '/examples/DisabledItems.md',
]
}
],
diff --git a/docs/examples/DisabledItems.md b/docs/examples/DisabledItems.md
new file mode 100644
index 0000000..423e5fb
--- /dev/null
+++ b/docs/examples/DisabledItems.md
@@ -0,0 +1,14 @@
+# Example 7: Disabled items and fields
+
+This is a grid with disabled fields and items. Red items are disabled
+and cannot be moved. Pink fields are disabled and items cannot be moved
+to them. Green items are normal and enabled.
+
+<ClientOnly>
+<script setup>
+import Example7DisabledItems from "../../example/src/Example7DisabledItems.vue";
+</script>
+
+
+<Example7DisabledItems />
+</ClientOnly>
\ No newline at end of file
diff --git a/example/src/App.vue b/example/src/App.vue
index 92f030b..a1c4b3e 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -1,11 +1,11 @@
<script setup>
-import DragGrid from "../../src/DragGrid.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";
+import Example7DisabledItems from "./Example7DisabledItems.vue";
</script>
<template>
@@ -79,23 +79,8 @@ import Example6Disabled from "./Example6Disabled.vue";
This is a grid with disabled fields and items. Red items are disabled
and cannot be moved.
</p>
- <drag-grid
- v-model="someDisabledItems"
- :cols="4"
- :rows="4"
- class="tic-tac-toe"
- :disabled-fields="disabledFields"
- >
- <template #item="{ rawItem }">
- <div
- class="container"
- :style="{ background: rawItem.disabled ? 'red' : 'green' }"
- ></div>
- </template>
- <template #disabledField
- ><div class="container">This field is disabled!</div></template
- >
- </drag-grid>
+
+ <example7-disabled-items></example7-disabled-items>
</div>
</div>
</div>
@@ -104,34 +89,10 @@ import Example6Disabled from "./Example6Disabled.vue";
<script>
export default {
name: "App",
- data() {
- return {
- someDisabledItems: [
- { key: "key1", x: 1, y: 3, w: 1, h: 1, data: {} },
- { key: "key2", x: 2, y: 2, w: 1, h: 1, data: {} },
- { key: "key3", x: 3, y: 1, w: 1, h: 1, data: {}, disabled: true },
- { key: "key4", x: 1, y: 2, w: 1, h: 1, data: {}, disabled: true },
- ],
- disabledFields: [
- { x: 1, y: 1 },
- { x: 2, y: 3 },
- ],
- };
- },
};
</script>
<style scoped>
-.container {
- background: lightcoral;
- width: 100%;
- height: 100%;
-}
-
-.tic-tac-toe {
- max-width: 400px;
-}
-
.row {
display: flex;
justify-content: space-between;
diff --git a/example/src/Example7DisabledItems.vue b/example/src/Example7DisabledItems.vue
new file mode 100644
index 0000000..dff2a1d
--- /dev/null
+++ b/example/src/Example7DisabledItems.vue
@@ -0,0 +1,59 @@
+<script setup>
+import DragGrid from "../../src/DragGrid.vue";
+</script>
+
+<template>
+ <drag-grid
+ v-model="someDisabledItems"
+ :cols="4"
+ :rows="4"
+ class="size"
+ :disabled-fields="disabledFields"
+ >
+ <template #item="{ rawItem }">
+ <div
+ class="container"
+ :style="{ background: rawItem.disabled ? 'red' : 'green' }"
+ ></div>
+ </template>
+ <template #disabledField
+ ><div class="container">This field is disabled!</div></template
+ >
+ </drag-grid>
+</template>
+
+<script>
+export default {
+ name: "Example7DisabledItems",
+ data() {
+ return {
+ someDisabledItems: [
+ { key: "key1", x: 1, y: 3, w: 1, h: 1, data: {} },
+ { key: "key2", x: 2, y: 2, w: 1, h: 1, data: {} },
+ { key: "key3", x: 3, y: 4, w: 1, h: 1, data: {} },
+ { key: "key4", x: 3, y: 1, w: 1, h: 1, data: {}, disabled: true },
+ { key: "key5", x: 1, y: 2, w: 1, h: 1, data: {}, disabled: true },
+ { key: "key6", x: 4, y: 3, w: 1, h: 1, data: {}, disabled: true },
+ ],
+ disabledFields: [
+ { x: 1, y: 1 },
+ { x: 2, y: 3 },
+ { x: 4, y: 2 },
+ ],
+ };
+ },
+};
+</script>
+
+<style scoped>
+.container {
+ background: lightcoral;
+ width: 100%;
+ height: 100%;
+ user-select: none;
+ text-align: center;
+}
+.size {
+ aspect-ratio: 1;
+}
+</style>
--
GitLab