Merge pull request #136 from Zboru/tab-pane-click

Add @click for TabPane component

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.
+```vue
+<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>
+```

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>