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