ItemDetails: Add additional slots

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

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,20 +40,23 @@
       :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">
       <template #additionalTabs>
         <slot name="additionalTabs" />
       </template>
     </item-details-tabs>
+    <slot name="afterTabs" />
     <!-- Narrower -->
     <item-list
       v-if="showNarrower"
       v-bind="itemListOptions_"
       :items="item.narrower || []"
       class="jskos-vue-itemDetails-narrower"
       @select="$emit('select', { item: $event.item })" />
+    <slot name="after" />
   </div>
 </template>