From 823b4a0fdaec7f5d78c00faea9ba278ef7131f61 Mon Sep 17 00:00:00 2001
From: Stefan Peters <stefandesu@exo.pm>
Date: Thu, 30 May 2024 10:43:19 +0200
Subject: [PATCH] ItemDetails: Add additional slots

---
 docs/components/ItemDetails.md | 4 ++++
 src/components/ItemDetails.vue | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/docs/components/ItemDetails.md b/docs/components/ItemDetails.md
index 90f4977..1003fda 100644
--- a/docs/components/ItemDetails.md
+++ b/docs/components/ItemDetails.md
@@ -23,8 +23,12 @@ Uses [ItemName](./ItemName), [ItemList](./ItemList), [LicenseInfo](./LicenseInfo
   - This will also set `itemListOptions.draggable` if it's not set separately.
 
 ## Slots
+- `before`: Content shown above the component (same as `beforeName`).
 - `beforeName`: Content shown before the item's name.
 - `afterName`: Content shown after the item's name.
+- `beforeTabs`: Content shown right before detail tabs (below ancestors and broader)
+- `afterTabs`: Content shown right after detail tabs (above narrower)
+- `after`: Content shown below the component.
 - `additionalTabs`: Slot to add additional tabs (via [jskos-vue-tabs](https://github.com/gbv/jskos-vue-tabs)) or absolutely positioned content for all tabs.
 
 ## Events
diff --git a/src/components/ItemDetails.vue b/src/components/ItemDetails.vue
index 5071e63..7f59d08 100644
--- a/src/components/ItemDetails.vue
+++ b/src/components/ItemDetails.vue
@@ -12,6 +12,7 @@
       {{ t("dropzone") }}
     </div>
     <div class="jskos-vue-itemDetails-name">
+      <slot name="before" />
       <slot name="beforeName" />
       <item-name
         :item="item"
@@ -39,6 +40,7 @@
       :items="(item.broader || []).filter(i => !jskos.isContainedIn(i, item.ancestors || []))"
       class="jskos-vue-itemDetails-broader"
       @select="$emit('select', { item: $event.item })" />
+    <slot name="beforeTabs" />
     <item-details-tabs
       v-if="showTabs"
       :item="item">
@@ -46,6 +48,7 @@
         <slot name="additionalTabs" />
       </template>
     </item-details-tabs>
+    <slot name="afterTabs" />
     <!-- Narrower -->
     <item-list
       v-if="showNarrower"
@@ -53,6 +56,7 @@
       :items="item.narrower || []"
       class="jskos-vue-itemDetails-narrower"
       @select="$emit('select', { item: $event.item })" />
+    <slot name="after" />
   </div>
 </template>