feat(components): add carousel dot buttons

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

@@ -24,6 +24,7 @@ npx shadcn-vue@latest add carousel
 import {
   Carousel,
   CarouselContent,
+  CarouselDotButtons,
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
@@ -39,6 +40,8 @@ import {
     </CarouselContent>
     <CarouselPrevious />
     <CarouselNext />
+
+    <CarouselDotButtons />
   </Carousel>
 </template>
 ```

apps/www/src/lib/registry/default/example/CarouselDemo.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
+import { Carousel, CarouselContent, CarouselDotButtons, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
 import { Card, CardContent } from '@/lib/registry/default/ui/card'
 </script>
 
@@ -18,5 +18,7 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
     </CarouselContent>
     <CarouselPrevious />
     <CarouselNext />
+
+    <CarouselDotButtons class="mt-4" />
   </Carousel>
 </template>

apps/www/src/lib/registry/default/example/CarouselOrientation.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
+import { Carousel, CarouselContent, CarouselDotButtons, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
 import { Card, CardContent } from '@/lib/registry/default/ui/card'
 </script>
 
 <template>
   <Carousel
     orientation="vertical"
-    class="relative w-full max-w-xsw-full max-w-xs"
+    class="relative w-full max-w-xsw-full max-w-xs h-[90px] mb-20"
     :opts="{
       align: 'start',
     }"
   >
-    <CarouselContent class="-mt-1 h-[200px]">
-      <CarouselItem v-for="(_, index) in 5" :key="index" class="p-1 md:basis-1/2">
+    <CarouselContent class="-mt-1 h-[100px]">
+      <CarouselItem v-for="(_, index) in 5" :key="index" class="p-1">
         <div class="p-1">
           <Card>
             <CardContent class="flex items-center justify-center p-6">
@@ -24,5 +24,6 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
     </CarouselContent>
     <CarouselPrevious />
     <CarouselNext />
+    <CarouselDotButtons class="mt-4" />
   </Carousel>
 </template>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useCarousel } from './useCarousel'
+import type { WithClassAsProps } from './interface'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<WithClassAsProps>()
+const { scrollTo, selectedIndex, scrollSnaps, orientation } = useCarousel()
+</script>
+
+<template>
+  <div
+    :class="cn('flex gap-2 justify-center relative -translate-x-1/2 left-1/2', { 'top-10': orientation === 'vertical' }, props.class)"
+  >
+    <div
+      v-for="(_, index) in scrollSnaps" :key="index" class="w-2 h-2 rounded-full"
+      :class="cn(index === selectedIndex ? 'border-transparent bg-primary' : 'bg-border')" @click="scrollTo(index)"
+    />
+  </div>
+</template>

apps/www/src/lib/registry/default/ui/carousel/index.ts

@@ -3,6 +3,7 @@ export { default as CarouselContent } from './CarouselContent.vue'
 export { default as CarouselItem } from './CarouselItem.vue'
 export { default as CarouselPrevious } from './CarouselPrevious.vue'
 export { default as CarouselNext } from './CarouselNext.vue'
+export { default as CarouselDotButtons } from './CarouselDotButtons.vue'
 export { useCarousel } from './useCarousel'
 
 export type {

apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts

@@ -20,13 +20,20 @@ const [useProvideCarousel, useInjectCarousel] = createInjectionState(
     function scrollNext() {
       emblaApi.value?.scrollNext()
     }
+    function scrollTo(index: number) {
+      emblaApi.value?.scrollTo(index)
+    }
 
     const canScrollNext = ref(false)
     const canScrollPrev = ref(false)
+    const selectedIndex = ref(0)
+    const scrollSnaps = ref<number[]>([])
 
     function onSelect(api: CarouselApi) {
       canScrollNext.value = api?.canScrollNext() || false
       canScrollPrev.value = api?.canScrollPrev() || false
+      selectedIndex.value = api?.selectedScrollSnap() || 0
+      scrollSnaps.value = api?.scrollSnapList() || []
     }
 
     onMounted(() => {
@@ -40,7 +47,7 @@ const [useProvideCarousel, useInjectCarousel] = createInjectionState(
       emits('init-api', emblaApi.value)
     })
 
-    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }
+    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, scrollTo, scrollSnaps, selectedIndex, orientation }
   },
 )
 

apps/www/src/lib/registry/new-york/example/CarouselDemo.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
+import { Carousel, CarouselContent, CarouselDotButtons, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
 import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
 </script>
 
@@ -18,5 +18,7 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
     </CarouselContent>
     <CarouselPrevious />
     <CarouselNext />
+
+    <CarouselDotButtons class="mt-4" />
   </Carousel>
 </template>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useCarousel } from './useCarousel'
+import type { WithClassAsProps } from './interface'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<WithClassAsProps>()
+const { scrollTo, selectedIndex, scrollSnaps, orientation } = useCarousel()
+</script>
+
+<template>
+  <div
+    :class="cn('flex gap-2 justify-center relative -translate-x-1/2 left-1/2', { 'top-10': orientation === 'vertical' }, props.class)"
+  >
+    <div
+      v-for="(_, index) in scrollSnaps" :key="index" class="w-2 h-2 rounded-full"
+      :class="cn(index === selectedIndex ? 'border-transparent bg-primary' : 'bg-border')" @click="scrollTo(index)"
+    />
+  </div>
+</template>

apps/www/src/lib/registry/new-york/ui/carousel/index.ts

@@ -3,6 +3,7 @@ export { default as CarouselContent } from './CarouselContent.vue'
 export { default as CarouselItem } from './CarouselItem.vue'
 export { default as CarouselPrevious } from './CarouselPrevious.vue'
 export { default as CarouselNext } from './CarouselNext.vue'
+export { default as CarouselDotButtons } from './CarouselDotButtons.vue'
 export { useCarousel } from './useCarousel'
 
 export type {

apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts

@@ -20,13 +20,20 @@ const [useProvideCarousel, useInjectCarousel] = createInjectionState(
     function scrollNext() {
       emblaApi.value?.scrollNext()
     }
+    function scrollTo(index: number) {
+      emblaApi.value?.scrollTo(index)
+    }
 
     const canScrollNext = ref(false)
     const canScrollPrev = ref(false)
+    const selectedIndex = ref(0)
+    const scrollSnaps = ref<number[]>([])
 
     function onSelect(api: CarouselApi) {
       canScrollNext.value = api?.canScrollNext() || false
       canScrollPrev.value = api?.canScrollPrev() || false
+      selectedIndex.value = api?.selectedScrollSnap() || 0
+      scrollSnaps.value = api?.scrollSnapList() || []
     }
 
     onMounted(() => {
@@ -40,7 +47,7 @@ const [useProvideCarousel, useInjectCarousel] = createInjectionState(
       emits('init-api', emblaApi.value)
     })
 
-    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }
+    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, scrollTo, scrollSnaps, selectedIndex, orientation }
   },
 )