feat: expose api for the parent component

apps/www/src/content/docs/components/carousel.md

@@ -175,10 +175,32 @@ You can pass options to the carousel using the `opts` prop. See the [Embla Carou
 
 ## API
 
+### Method 1
+
 Use the `@init-api` emit method on `<Carousel />` component to set the instance of the API.
 
 <ComponentPreview name="CarouselApi" />
 
+### Method 2
+
+You can access it through setting a template ref on the `<Carousel />` component.
+
+```vue showLineNumbers {2,5,9}
+<script setup>
+const carouselContainerRef = ref<InstanceType<typeof Carousel> | null>(null)
+
+function accessApi() {
+  carouselContainerRef.value?.carouselApi.on('select', () => {})
+}
+</script>
+
+<template>
+  <Carousel ref="carouselContainerRef">
+    ...
+  </Carousel>
+</template>
+```
+
 ## Events
 
 You can listen to events using the API. To get the API instance use the `@init-api` emit method on the `<Carousel />` component

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

@@ -11,6 +11,8 @@ const emits = defineEmits<CarouselEmits>()
 
 const carouselArgs = useProvideCarousel(props, emits)
 
+defineExpose(carouselArgs)
+
 function onKeyDown(event: KeyboardEvent) {
   const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
   const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'

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

@@ -11,6 +11,8 @@ const emits = defineEmits<CarouselEmits>()
 
 const carouselArgs = useProvideCarousel(props, emits)
 
+defineExpose(carouselArgs)
+
 function onKeyDown(event: KeyboardEvent) {
   const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
   const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'