Create example 8 to show responsiveness

docs/.vuepress/config.js

@@ -14,6 +14,7 @@ module.exports = {
                     '/examples/Colors.md',
                     '/examples/Disabled.md',
                     '/examples/DisabledItems.md',
+                    '/examples/Responsive.md',
                 ]
             }
         ],

docs/examples/Responsive.md

+# 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

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>
 

example/src/Example8Responsive.vue

+<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>