refactor: change ways to better pass the data to parent

apps/www/src/lib/registry/default/ui/carousel/Carousel.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
 import { useForwardPropsEmits } from 'radix-vue'
 import { useProvideCarousel } from './useCarousel'
-import type { CarouselProps } from './interface'
+import type { CarouselEmits, CarouselProps } from './interface'
 import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<CarouselProps>(), {
   orientation: 'horizontal',
 })
 
-const forwarded = useForwardPropsEmits(props)
+const emits = defineEmits<CarouselEmits>()
 
-const { scrollNext, scrollPrev } = useProvideCarousel(props)
+const forwarded = useForwardPropsEmits(props)
+const carouselArgs = useProvideCarousel(props, emits)
 
 function onKeyDown(event: KeyboardEvent) {
   event.preventDefault()
@@ -19,10 +20,10 @@ function onKeyDown(event: KeyboardEvent) {
   const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
 
   if (event.key === prevKey)
-    scrollPrev()
+    carouselArgs.scrollPrev()
 
   else if (event.key === nextKey)
-    scrollNext()
+    carouselArgs.scrollNext()
 }
 </script>
 
@@ -34,6 +35,6 @@ function onKeyDown(event: KeyboardEvent) {
     v-bind="forwarded"
     @keydown="onKeyDown"
   >
-    <slot />
+    <slot v-bind="carouselArgs" />
   </div>
 </template>

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
+}

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 }

apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
 import { useForwardPropsEmits } from 'radix-vue'
 import { useProvideCarousel } from './useCarousel'
-import type { CarouselProps } from './interface'
+import type { CarouselEmits, CarouselProps } from './interface'
 import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<CarouselProps>(), {
   orientation: 'horizontal',
 })
 
-const forwarded = useForwardPropsEmits(props)
+const emits = defineEmits<CarouselEmits>()
 
-const { scrollNext, scrollPrev } = useProvideCarousel(props)
+const forwarded = useForwardPropsEmits(props)
+const carouselArgs = useProvideCarousel(props, emits)
 
 function onKeyDown(event: KeyboardEvent) {
   event.preventDefault()
@@ -19,10 +20,10 @@ function onKeyDown(event: KeyboardEvent) {
   const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
 
   if (event.key === prevKey)
-    scrollPrev()
+    carouselArgs.scrollPrev()
 
   else if (event.key === nextKey)
-    scrollNext()
+    carouselArgs.scrollNext()
 }
 </script>
 
@@ -34,6 +35,6 @@ function onKeyDown(event: KeyboardEvent) {
     v-bind="forwarded"
     @keydown="onKeyDown"
   >
-    <slot />
+    <slot v-bind="carouselArgs" />
   </div>
 </template>

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
+}

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 }