From 4dbe3cc315357e9a348736d3b20ee0b465064bba Mon Sep 17 00:00:00 2001
From: Sebastian Zborowski <zboru99@gmail.com>
Date: Fri, 31 Mar 2023 12:01:09 +0200
Subject: [PATCH 1/4] feat: add @click for tab pane

---
 src/components/Tabs/Tabs.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Tabs/Tabs.vue b/src/components/Tabs/Tabs.vue
index ce49979..c958e3a 100644
--- a/src/components/Tabs/Tabs.vue
+++ b/src/components/Tabs/Tabs.vue
@@ -9,6 +9,7 @@
             :name="item.props?.name"
             :disabled="item.props?.disabled"
             :title="item.props?.title"
+            @click="emitClick"
         />
       </ul>
     </div>
@@ -46,7 +47,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'click:pane'])
 
 const { ulClasses, divClasses } = useTabsClasses(props)
 
@@ -71,11 +72,14 @@ const modelValueRef = computed({
 provide(TAB_ACTIVE_NAME_INJECTION_KEY, modelValueRef)
 provide(TAB_VISIBILITY_DIRECTIVE_INJECTION_KEY, toRef(props, 'directive'))
 
-
 const onActivate = (value: string) => {
   modelValueRef.value = value
 }
 
+function emitClick(): void {
+  emit('click:pane')
+}
+
 provide(TAB_ACTIVATE_INJECTION_KEY, onActivate)
 </script>
 

From 7a7fabd9f8658b07eb18eb7c0b7bcc583640a003 Mon Sep 17 00:00:00 2001
From: Sebastian Zborowski <zboru99@gmail.com>
Date: Fri, 31 Mar 2023 12:09:50 +0200
Subject: [PATCH 2/4] feat: update docs

---
 docs/components/tabs.md | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/docs/components/tabs.md b/docs/components/tabs.md
index 8fa5c33..cd764d0 100644
--- a/docs/components/tabs.md
+++ b/docs/components/tabs.md
@@ -127,3 +127,32 @@ defineProps({
     },
 })
 ```
+
+## Tab pane interaction
+
+You can add @click:pane to Tabs component to intercept click on tab pane.
+```typescript
+<script setup>
+import { ref } from 'vue'
+import { Tabs, Tab } from 'flowbite-vue'
+function handlePaneClick(): void {
+    console.log("Click!")
+}
+</script>
+<template>
+  <tabs variant="pills" v-model="activeTab" class="p-5" @click:pane="handlePaneClick">
+    <tab name="first" title="First">
+      Lorem...
+    </tab>
+    <tab name="second" title="Second">
+      Lorem...
+    </tab>
+    <tab name="third" title="Third">
+      Lorem...
+    </tab>
+    <tab name="fourth" title="Fourth" :disabled="true">
+      Lorem...
+    </tab>
+  </tabs>
+</template>
+```
\ No newline at end of file

From c51253addba8f74c8deafdc1275bb7e21d2397be Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Sun, 4 Jun 2023 12:46:16 +0300
Subject: [PATCH 3/4] Update docs/components/tabs.md

---
 docs/components/tabs.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/tabs.md b/docs/components/tabs.md
index cd764d0..acab45e 100644
--- a/docs/components/tabs.md
+++ b/docs/components/tabs.md
@@ -130,7 +130,7 @@ defineProps({
 
 ## Tab pane interaction
 
-You can add @click:pane to Tabs component to intercept click on tab pane.
+You can add `@click:pane` to Tabs component to intercept click on tab pane.
 ```typescript
 <script setup>
 import { ref } from 'vue'

From 6ca1bf4f23c87a071a832a79a15b4de58f4e8576 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Sun, 4 Jun 2023 12:46:22 +0300
Subject: [PATCH 4/4] Update docs/components/tabs.md

---
 docs/components/tabs.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/tabs.md b/docs/components/tabs.md
index acab45e..5d6c20b 100644
--- a/docs/components/tabs.md
+++ b/docs/components/tabs.md
@@ -131,7 +131,7 @@ defineProps({
 ## Tab pane interaction
 
 You can add `@click:pane` to Tabs component to intercept click on tab pane.
-```typescript
+```vue
 <script setup>
 import { ref } from 'vue'
 import { Tabs, Tab } from 'flowbite-vue'