Create example for multipleItemsY

example/src/App.vue

@@ -7,6 +7,7 @@ import Example5Colors from "./Example5Colors.vue";
 import Example6Disabled from "./Example6Disabled.vue";
 import Example7DisabledItems from "./Example7DisabledItems.vue";
 import Example8Responsive from "./Example8Responsive.vue";
+import Example9MultipleItemsY from "./Example9MultipleItemsY.vue";
 </script>
 
 <template>
@@ -88,6 +89,13 @@ import Example8Responsive from "./Example8Responsive.vue";
     <h2>Example 8:</h2>
     <p>The grid is responsive. Try resizing it below:</p>
     <example8-responsive></example8-responsive>
+
+    <h2>Example 9:</h2>
+    <p>
+      Grid with multiple items per slot (overlaps only in y direction possible,
+      width of every item has to be <kbd>1</kbd>)
+    </p>
+    <example9-multiple-items-y />
   </div>
 </template>
 

example/src/Example9MultipleItemsY.vue

+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "Example9MultipleItemsY",
+  data() {
+    return {
+      items: [
+        { x: 1, y: 4, w: 1, h: 1, key: "item 1" },
+        { x: 1, y: 1, w: 1, h: 1, key: "item 2" },
+        { x: 1, y: 2, w: 1, h: 2, key: "item 3" },
+        { x: 1, y: 3, w: 1, h: 1, key: "item 4" },
+        { x: 1, y: 4, w: 1, h: 2, key: "item 5" },
+        { x: 1, y: 2, w: 1, h: 3, key: "item 6" },
+        { x: 2, y: 2, w: 1, h: 3, key: "item 7" },
+        { x: 2, y: 1, w: 1, h: 3, key: "item 8" },
+        { x: 2, y: 4, w: 1, h: 2, key: "item 9" },
+        { x: 2, y: 7, w: 1, h: 3, key: "item 10" },
+        { x: 2, y: 3, w: 1, h: 1, key: "item 11" },
+      ],
+    };
+  },
+});
+</script>
+
+<template>
+  <div class="parent">
+    <drag-grid
+      v-model="items"
+      :cols="2"
+      :rows="8"
+      class="grid"
+      multiple-items-y
+    >
+      <template #item="{ key }">
+        <div class="item">
+          {{ key }}
+        </div>
+      </template>
+    </drag-grid>
+  </div>
+</template>
+
+<style scoped>
+.parent {
+  min-height: 600px;
+}
+
+.grid {
+  border: #97fa56 2px solid;
+  width: clamp(20vw, 500px, 80vw);
+  aspect-ratio: 1;
+}
+
+.item {
+  background: #325442;
+  color: #97fa56;
+  border: #97fa56 2px dotted;
+  width: 100%;
+  height: 100%;
+}
+</style>