From a09acece3ffc28cf9a05be4a87e2a8478d37b721 Mon Sep 17 00:00:00 2001
From: wasimTQ <wasimthoufiq21@gmail.com>
Date: Fri, 29 Dec 2023 21:55:15 +0530
Subject: [PATCH] refactor: change ways to better pass the data to parent

---
 .../lib/registry/default/ui/carousel/Carousel.vue   | 13 +++++++------
 .../lib/registry/default/ui/carousel/interface.ts   | 11 ++++++++---
 .../lib/registry/default/ui/carousel/useCarousel.ts |  6 ++++--
 .../lib/registry/new-york/ui/carousel/Carousel.vue  | 13 +++++++------
 .../lib/registry/new-york/ui/carousel/interface.ts  | 11 ++++++++---
 .../registry/new-york/ui/carousel/useCarousel.ts    |  6 ++++--
 6 files changed, 38 insertions(+), 22 deletions(-)

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