From 88aeb8adbbb91136896a525ff20252aec684d9cd Mon Sep 17 00:00:00 2001
From: Nikita Alexov <polarbeararmor@gmail.com>
Date: Sat, 8 Mar 2025 11:45:11 +0400
Subject: [PATCH 1/2] feat(Tabs): add before-change event

---
 .../examples/TabsExampleBeforeChange.vue      | 28 +++++++++++++++++++
 docs/content/2.components/tabs.md             | 14 ++++++++++
 src/runtime/components/navigation/Tabs.vue    | 14 ++++++++--
 3 files changed, 53 insertions(+), 3 deletions(-)
 create mode 100644 docs/components/content/examples/TabsExampleBeforeChange.vue

diff --git a/docs/components/content/examples/TabsExampleBeforeChange.vue b/docs/components/content/examples/TabsExampleBeforeChange.vue
new file mode 100644
index 0000000000..c41f3401dc
--- /dev/null
+++ b/docs/components/content/examples/TabsExampleBeforeChange.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const items = [{
+  label: 'Tab1',
+  icon: 'i-heroicons-information-circle',
+  content: 'This is the content shown for Tab1'
+}, {
+  label: 'Tab2',
+  icon: 'i-heroicons-arrow-down-tray',
+  content: 'And, this is the content for Tab2'
+}, {
+  label: 'Tab3',
+  icon: 'i-heroicons-eye-dropper',
+  content: 'Finally, this is the content for Tab3'
+}]
+
+function onBeforeChange(prevIndex, next) {
+  if (window.confirm('Do you want to change tab?')) {
+    const prevItem = items[prevIndex]
+    alert(`Tab was changed! Previous tab is ${prevItem.label}`)
+    return next()
+  }
+  alert('Tab was not changed!')
+}
+</script>
+
+<template>
+  <UTabs :items="items" @before-change="onBeforeChange" />
+</template>
diff --git a/docs/content/2.components/tabs.md b/docs/content/2.components/tabs.md
index 400edd059d..630f1c3ac6 100644
--- a/docs/content/2.components/tabs.md
+++ b/docs/content/2.components/tabs.md
@@ -66,6 +66,20 @@ componentProps:
 
 You can use the `content` prop and set it to `false` to avoid the rendering of the HTML content if you don't need it.
 
+#### Listen to @before-change event
+
+You can execute code before the `@change` event is triggered by using the `@before-change` event. This event emits the index of the previously selected item and provides a second `next()` argument, which you can use to continue handling the `@change` event.
+
+::component-example
+---
+component: 'tabs-example-before-change'
+componentProps:
+  class: 'w-full'
+---
+::
+
+This event is useful when you need to validate data before switching tabs or display a confirmation window with a relevant message to users.
+
 ### Control the selected index
 
 Use a `v-model` to control the selected index.
diff --git a/src/runtime/components/navigation/Tabs.vue b/src/runtime/components/navigation/Tabs.vue
index c19fc9a7b5..e19b251d2a 100644
--- a/src/runtime/components/navigation/Tabs.vue
+++ b/src/runtime/components/navigation/Tabs.vue
@@ -53,7 +53,7 @@
 </template>
 
 <script lang="ts">
-import { toRef, ref, watch, onMounted, defineComponent, nextTick } from 'vue'
+import { toRef, ref, watch, onMounted, defineComponent, nextTick, getCurrentInstance } from 'vue'
 import type { PropType } from 'vue'
 import { TabGroup as HTabGroup, TabList as HTabList, Tab as HTab, TabPanels as HTabPanels, TabPanel as HTabPanel, provideUseId } from '@headlessui/vue'
 import { useResizeObserver } from '@vueuse/core'
@@ -113,7 +113,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  emits: ['update:modelValue', 'change'],
+  emits: ['update:modelValue', 'change', 'beforeChange'],
   setup(props, { emit }) {
     const { ui, attrs } = useUI('tabs', toRef(props, 'ui'), config, toRef(props, 'class'))
 
@@ -122,6 +122,7 @@ export default defineComponent({
     const markerRef = ref<HTMLElement>()
 
     const selectedIndex = ref<number | undefined>(props.modelValue || props.defaultIndex)
+    const beforeChangeEventPassed = ref(!!getCurrentInstance()?.vnode.props?.onBeforeChange)
 
     // Methods
 
@@ -142,7 +143,13 @@ export default defineComponent({
       markerRef.value.style.height = `${tab.offsetHeight}px`
     }
 
-    function onChange(index: number) {
+    async function onChange(index: number) {
+      if (beforeChangeEventPassed.value) {
+        await new Promise((resolve) => {
+          emit('beforeChange', selectedIndex.value, resolve)
+        })
+      }
+
       selectedIndex.value = index
 
       emit('change', index)
@@ -185,6 +192,7 @@ export default defineComponent({
       markerRef,
       selectedIndex,
       onChange
+      // computedSelectedIndex
     }
   }
 })

From b1f6275345c64e9685e4824853e37d2b1ace9814 Mon Sep 17 00:00:00 2001
From: Nikita Alexov <polarbeararmor@gmail.com>
Date: Mon, 10 Mar 2025 11:29:02 +0400
Subject: [PATCH 2/2] refactor(Tabs): clean code after adding before-change
 event

---
 src/runtime/components/navigation/Tabs.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/runtime/components/navigation/Tabs.vue b/src/runtime/components/navigation/Tabs.vue
index e19b251d2a..be4c528188 100644
--- a/src/runtime/components/navigation/Tabs.vue
+++ b/src/runtime/components/navigation/Tabs.vue
@@ -192,7 +192,6 @@ export default defineComponent({
       markerRef,
       selectedIndex,
       onChange
-      // computedSelectedIndex
     }
   }
 })