From 79ec1b9dc1227ff5dfc6a45016867ea96041dbc2 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Mon, 20 Feb 2023 14:29:13 +0100
Subject: [PATCH] Create example 8 to show responsiveness
---
docs/.vuepress/config.js | 1 +
docs/examples/Responsive.md | 12 ++++++++
example/src/App.vue | 7 ++++-
example/src/Example8Responsive.vue | 46 ++++++++++++++++++++++++++++++
4 files changed, 65 insertions(+), 1 deletion(-)
create mode 100644 docs/examples/Responsive.md
create mode 100644 example/src/Example8Responsive.vue
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index e800988..16b55c3 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -14,6 +14,7 @@ module.exports = {
'/examples/Colors.md',
'/examples/Disabled.md',
'/examples/DisabledItems.md',
+ '/examples/Responsive.md',
]
}
],
diff --git a/docs/examples/Responsive.md b/docs/examples/Responsive.md
new file mode 100644
index 0000000..3d87a0a
--- /dev/null
+++ b/docs/examples/Responsive.md
@@ -0,0 +1,12 @@
+# Example 8: Responsive
+
+The grid is responsive. Try resizing it below:
+
+<ClientOnly>
+<script setup>
+import Example8Responsive from "../../example/src/Example8Responsive.vue";
+</script>
+
+
+<Example8Responsive />
+</ClientOnly>
\ No newline at end of file
diff --git a/example/src/App.vue b/example/src/App.vue
index a1c4b3e..e0f7b1e 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -6,6 +6,7 @@ import Example4Lessons from "./Example4Lessons.vue";
import Example5Colors from "./Example5Colors.vue";
import Example6Disabled from "./Example6Disabled.vue";
import Example7DisabledItems from "./Example7DisabledItems.vue";
+import Example8Responsive from "./Example8Responsive.vue";
</script>
<template>
@@ -73,7 +74,7 @@ import Example7DisabledItems from "./Example7DisabledItems.vue";
<example6-disabled></example6-disabled>
</div>
- <div>
+ <div style="height: 100%">
<h2>Example 7: Disabled fields and items with props</h2>
<p>
This is a grid with disabled fields and items. Red items are disabled
@@ -83,6 +84,10 @@ import Example7DisabledItems from "./Example7DisabledItems.vue";
<example7-disabled-items></example7-disabled-items>
</div>
</div>
+
+ <h2>Example 8:</h2>
+ <p>The grid is responsive. Try resizing it below:</p>
+ <example8-responsive></example8-responsive>
</div>
</template>
diff --git a/example/src/Example8Responsive.vue b/example/src/Example8Responsive.vue
new file mode 100644
index 0000000..ebf5419
--- /dev/null
+++ b/example/src/Example8Responsive.vue
@@ -0,0 +1,46 @@
+<template>
+ <div class="parent">
+ <drag-grid v-model="items" :cols="4" :rows="4" class="grid">
+ <template #item="{ key }">
+ <div class="banana">
+ {{ key }}
+ </div>
+ </template>
+ </drag-grid>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "Example8Responsive",
+ data() {
+ return {
+ items: [
+ { x: 1, y: 1, w: 1, h: 3, key: "item 1" },
+ { x: 4, y: 3, w: 1, h: 1, key: "item 2" },
+ { x: 2, y: 4, w: 2, h: 1, key: "item 3" },
+ ],
+ };
+ },
+};
+</script>
+
+<style scoped>
+.parent {
+ min-height: 600px;
+}
+
+.grid {
+ resize: both;
+ overflow: auto;
+ aspect-ratio: 1;
+ border: #edd85f 2px solid;
+ width: 400px;
+}
+
+.banana {
+ background: #edd85f;
+ width: 100%;
+ height: 100%;
+}
+</style>
--
GitLab