From 22edfd708ae3eeadbd4ff6c830cdfd5632948286 Mon Sep 17 00:00:00 2001
From: Polly <39132307+itspolly@users.noreply.github.com>
Date: Tue, 22 Apr 2025 15:44:47 +0100
Subject: [PATCH] feat(Carousel): add `select` event (#3678)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 docs/content/3.components/carousel.md |  4 ++++
 src/runtime/components/Carousel.vue   | 10 ++++++++++
 2 files changed, 14 insertions(+)

diff --git a/docs/content/3.components/carousel.md b/docs/content/3.components/carousel.md
index 5f54ccfb..afb0f78e 100644
--- a/docs/content/3.components/carousel.md
+++ b/docs/content/3.components/carousel.md
@@ -252,6 +252,10 @@ class: 'p-8 px-16'
 
 :component-slots
 
+### Emits
+
+:component-emits
+
 ### Expose
 
 You can access the typed component instance using [`useTemplateRef`](https://vuejs.org/api/composition-api-helpers.html#usetemplateref).
diff --git a/src/runtime/components/Carousel.vue b/src/runtime/components/Carousel.vue
index 6014b262..a14695f2 100644
--- a/src/runtime/components/Carousel.vue
+++ b/src/runtime/components/Carousel.vue
@@ -99,6 +99,13 @@ export type CarouselSlots<T extends CarouselItem = CarouselItem> = {
   default(props: { item: T, index: number }): any
 }
 
+export interface CarouselEmits {
+  /**
+   * Emitted when the selected slide changes
+   * @param selectedIndex The index of the selected slide
+   */
+  select: [selectedIndex: number]
+}
 </script>
 
 <script setup lang="ts" generic="T extends CarouselItem">
@@ -141,6 +148,7 @@ const props = withDefaults(defineProps<CarouselProps<T>>(), {
   wheelGestures: false
 })
 defineSlots<CarouselSlots<T>>()
+const emits = defineEmits<CarouselEmits>()
 
 const { dir, t } = useLocale()
 const appConfig = useAppConfig() as Carousel['AppConfig']
@@ -242,6 +250,8 @@ function onSelect(api: EmblaCarouselType) {
   canScrollNext.value = api?.canScrollNext() || false
   canScrollPrev.value = api?.canScrollPrev() || false
   selectedIndex.value = api?.selectedScrollSnap() || 0
+
+  emits('select', selectedIndex.value)
 }
 
 onMounted(() => {