From 9374568aaaa2e8ac831a07f77ae45c8264223753 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Tue, 15 Aug 2023 00:23:52 +0200
Subject: [PATCH] Write docs for the multipleItemsY feature
---
docs/.vuepress/config.js | 1 +
docs/examples/MultipleItemsY.md | 14 ++++++++++++++
docs/guide/index.md | 14 ++++++++++++++
3 files changed, 29 insertions(+)
create mode 100644 docs/examples/MultipleItemsY.md
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index b644b97..a5c3784 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -15,6 +15,7 @@ module.exports = {
"/examples/Disabled.md",
"/examples/DisabledItems.md",
"/examples/Responsive.md",
+ "/examples/MultipleItemsY.md",
],
},
],
diff --git a/docs/examples/MultipleItemsY.md b/docs/examples/MultipleItemsY.md
new file mode 100644
index 0000000..718f2b0
--- /dev/null
+++ b/docs/examples/MultipleItemsY.md
@@ -0,0 +1,14 @@
+# Example 9: Multiple Items per field
+
+Grid with multiple items per slot (overlaps only in y direction possible,
+width of every item has to be `1`). The items are placed in the grid automatically.
+
+To allow this behaviour, the grid component has to receive the prop `multiple-items-y` with the value `true`.
+
+<ClientOnly>
+<script setup>
+import Example9MultipleItemsY from "../../example/src/Example9MultipleItemsY.vue";
+</script>
+
+<Example9MultipleItemsY />
+</ClientOnly>
diff --git a/docs/guide/index.md b/docs/guide/index.md
index 1932522..9b6d2f8 100644
--- a/docs/guide/index.md
+++ b/docs/guide/index.md
@@ -244,3 +244,17 @@ Examples for such a mechanism can be found in Examples 4 and 5.
:::
To handle movements from one grid to another, the attributes `gridId` and `originGridId` of the event will help.
+
+## Overlapping grid items
+
+If two items overlap, the one which is defined later in the array will be on top of the other one.
+They cannot be dragged.
+
+If you want to have overlapping items which can be dragged, there exists the `multipleItemsY` prop.
+If this is set to `true`, items can be dragged on top of each other. The items will be stacked horizontally.
+This is useful for e.g. a calendar-like frontend.
+
+::: danger
+If `multipleItemsY` is set to `true`, the `w` property of all items has to be set to `1`.
+Otherwise, this will lead to unexpected behaviour.
+:::
--
GitLab