From 78a32f03e6f1dc7de142fae6ac366b624cb35a25 Mon Sep 17 00:00:00 2001
From: Quan Khuc <Quan.Khuc@wwt.com>
Date: Tue, 4 Jun 2024 16:03:17 -0500
Subject: [PATCH] fix: dot buttons work with orientation

---
 apps/www/src/content/docs/components/carousel.md       |  3 ---
 .../registry/default/example/CarouselOrientation.vue   |  9 +++++----
 .../default/ui/carousel/CarouselDotButtons.vue         | 10 +++++-----
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/apps/www/src/content/docs/components/carousel.md b/apps/www/src/content/docs/components/carousel.md
index 8283c076..947e11f6 100644
--- a/apps/www/src/content/docs/components/carousel.md
+++ b/apps/www/src/content/docs/components/carousel.md
@@ -281,6 +281,3 @@ import Autoplay from 'embla-carousel-autoplay'
 <ComponentPreview name="CarouselPlugin" />
 
 See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on using plugins.
-```
-
-##
diff --git a/apps/www/src/lib/registry/default/example/CarouselOrientation.vue b/apps/www/src/lib/registry/default/example/CarouselOrientation.vue
index dcf06bd6..cd27a9a4 100644
--- a/apps/www/src/lib/registry/default/example/CarouselOrientation.vue
+++ b/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>
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselDotButtons.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselDotButtons.vue
index 866e44b4..7617d62b 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/CarouselDotButtons.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselDotButtons.vue
@@ -4,15 +4,15 @@ import type { WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<WithClassAsProps>()
-const { scrollTo, selectedIndex, scrollSnaps } = useCarousel()
+const { scrollTo, selectedIndex, scrollSnaps, orientation } = useCarousel()
 </script>
 
 <template>
-  <div class="flex gap-2 justify-center">
+  <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="border-1 w-2 h-2 rounded-full"
+      v-for="(_, index) in scrollSnaps" :key="index" class="border-1 w-4 h-4 rounded-full"
       :class="cn(index === selectedIndex ? 'border-transparent bg-primary' : 'bg-border', props.class)"
       @click="scrollTo(index)"
     />