From bee727f07aab118186d7bdf8b9b587450ed1c8f4 Mon Sep 17 00:00:00 2001
From: nknwns <andrejshaev@gmail.com>
Date: Wed, 11 Jun 2025 05:40:26 +0700
Subject: [PATCH] feat(slots): add additional slots in `Tabs`

---
 README.md               | 20 ++++++++++++++++++++
 src/components/Tabs.vue |  4 ++++
 2 files changed, 24 insertions(+)

diff --git a/README.md b/README.md
index 0a8ab51..621ede7 100644
--- a/README.md
+++ b/README.md
@@ -172,6 +172,26 @@ The title of the tab will now be `my prefix - First tab - my suffix`.
 
 The fragment that's added to the url when clicking the tab will only be based on the `name` of a tab, the `name-prefix` and `name-suffix` attributes will be ignored.
 
+### Additional slots
+
+You can add content using additional slots.
+
+Available slots: `before-list`, `before-tabs`, `after-tabs`, `after-list`
+
+```html
+<div>
+    <tabs>
+        <template #after-tabs>My requests</template>
+        <tab name="Active">
+            First tab content
+        </tab>
+        <tab name="Passive">
+            Second tab content
+        </tab>
+    </tabs>
+</div>
+```
+
 ### Customizing fragments
 
 When clicking on a tab it's name will be used as a fragment in the url. For example clicking on the `Second tab` will append `#second-tab` to the current url. 
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index 09e7160..d384acc 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -3,10 +3,12 @@
     :class="wrapperClass"
     :id="id"
   >
+    <slot name="before-list" />
     <ul
       role="tablist"
       :class="navClass"
     >
+      <slot name="before-tabs" />
       <li
         v-for="(tab, i) in state.tabs"
         :key="i"
@@ -32,7 +34,9 @@
           tabindex="0"
         />
       </li>
+      <slot name="after-tabs" />
     </ul>
+    <slot name="after-list" />
     <div :class="panelsWrapperClass">
       <slot />
     </div>