diff --git a/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue b/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
index 56be5281..f83cc530 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
@@ -1,16 +1,17 @@
@@ -34,6 +35,6 @@ function onKeyDown(event: KeyboardEvent) {
v-bind="forwarded"
@keydown="onKeyDown"
>
-
+
diff --git a/apps/www/src/lib/registry/default/ui/carousel/interface.ts b/apps/www/src/lib/registry/default/ui/carousel/interface.ts
index 328d90a5..9b2281ff 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/interface.ts
+++ b/apps/www/src/lib/registry/default/ui/carousel/interface.ts
@@ -1,6 +1,7 @@
-import {
- type EmblaOptionsType as CarouselOptions,
- type EmblaPluginType as CarouselPlugin,
+import type {
+ EmblaCarouselType as CarouselApi,
+ EmblaOptionsType as CarouselOptions,
+ EmblaPluginType as CarouselPlugin,
} from 'embla-carousel-vue'
export interface CarouselProps {
@@ -8,3 +9,7 @@ export interface CarouselProps {
plugins?: CarouselPlugin[]
orientation?: 'horizontal' | 'vertical'
}
+
+export interface CarouselEmits {
+ (e: 'init-api', payload: CarouselApi): void
+}
diff --git a/apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts b/apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts
index 84a2e1e9..643a9fd7 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts
+++ b/apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts
@@ -3,12 +3,12 @@ import emblaCarouselVue, {
type EmblaCarouselType as CarouselApi,
} from 'embla-carousel-vue'
import { onMounted, ref } from 'vue'
-import type { CarouselProps } from './interface'
+import type { CarouselEmits, CarouselProps } from './interface'
const [useProvideCarousel, useInjectCarousel] = createInjectionState(
({
opts, orientation, plugins,
- }: CarouselProps) => {
+ }: CarouselProps, emits: CarouselEmits) => {
const [emblaNode, emblaApi] = emblaCarouselVue({
...opts,
axis: orientation === 'horizontal' ? 'x' : 'y',
@@ -36,6 +36,8 @@ const [useProvideCarousel, useInjectCarousel] = createInjectionState(
emblaApi.value?.on('init', onSelect)
emblaApi.value?.on('reInit', onSelect)
emblaApi.value?.on('select', onSelect)
+
+ emits('init-api', emblaApi.value)
})
return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue b/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
index 56be5281..f83cc530 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
@@ -1,16 +1,17 @@
@@ -34,6 +35,6 @@ function onKeyDown(event: KeyboardEvent) {
v-bind="forwarded"
@keydown="onKeyDown"
>
-
+
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts b/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts
index 328d90a5..9b2281ff 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts
@@ -1,6 +1,7 @@
-import {
- type EmblaOptionsType as CarouselOptions,
- type EmblaPluginType as CarouselPlugin,
+import type {
+ EmblaCarouselType as CarouselApi,
+ EmblaOptionsType as CarouselOptions,
+ EmblaPluginType as CarouselPlugin,
} from 'embla-carousel-vue'
export interface CarouselProps {
@@ -8,3 +9,7 @@ export interface CarouselProps {
plugins?: CarouselPlugin[]
orientation?: 'horizontal' | 'vertical'
}
+
+export interface CarouselEmits {
+ (e: 'init-api', payload: CarouselApi): void
+}
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts b/apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts
index 84a2e1e9..643a9fd7 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts
@@ -3,12 +3,12 @@ import emblaCarouselVue, {
type EmblaCarouselType as CarouselApi,
} from 'embla-carousel-vue'
import { onMounted, ref } from 'vue'
-import type { CarouselProps } from './interface'
+import type { CarouselEmits, CarouselProps } from './interface'
const [useProvideCarousel, useInjectCarousel] = createInjectionState(
({
opts, orientation, plugins,
- }: CarouselProps) => {
+ }: CarouselProps, emits: CarouselEmits) => {
const [emblaNode, emblaApi] = emblaCarouselVue({
...opts,
axis: orientation === 'horizontal' ? 'x' : 'y',
@@ -36,6 +36,8 @@ const [useProvideCarousel, useInjectCarousel] = createInjectionState(
emblaApi.value?.on('init', onSelect)
emblaApi.value?.on('reInit', onSelect)
emblaApi.value?.on('select', onSelect)
+
+ emits('init-api', emblaApi.value)
})
return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }