From f3d4992b8f43332b4fca01ad5e3f153de6f106dd Mon Sep 17 00:00:00 2001
From: wasimTQ <wasimthoufiq21@gmail.com>
Date: Sat, 30 Dec 2023 15:35:28 +0530
Subject: [PATCH] feat: expose api for the parent component

---
 .../src/content/docs/components/carousel.md   | 22 +++++++++++++++++++
 .../registry/default/ui/carousel/Carousel.vue |  2 ++
 .../new-york/ui/carousel/Carousel.vue         |  2 ++
 3 files changed, 26 insertions(+)

diff --git a/apps/www/src/content/docs/components/carousel.md b/apps/www/src/content/docs/components/carousel.md
index 679b21e9..83dc12c2 100644
--- a/apps/www/src/content/docs/components/carousel.md
+++ b/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
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 492a007a..969ae969 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
+++ b/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'
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 492a007a..969ae969 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
@@ -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'