Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: dot buttons work with orientation

Browse Source
This commit is contained in:
Quan Khuc 2024-06-04 16:03:17 -05:00
parent 6afa061aa3
commit 78a32f03e6
3 changed files with 10 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/www/src/content/docs/components/carousel.md
View File

@ -281,6 +281,3 @@ import Autoplay from 'embla-carousel-autoplay'
<ComponentPreview name="CarouselPlugin" /> <ComponentPreview name="CarouselPlugin" />
See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on using plugins. See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on using plugins.
```
##

9
apps/www/src/lib/registry/default/example/CarouselOrientation.vue
View File

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

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

@ -4,15 +4,15 @@ import type { WithClassAsProps } from './interface'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<WithClassAsProps>() const props = defineProps<WithClassAsProps>()
const { scrollTo, selectedIndex, scrollSnaps } = useCarousel() const { scrollTo, selectedIndex, scrollSnaps, orientation } = useCarousel()
</script> </script>
<template> <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 <div
v-for="(_, index) in scrollSnaps" v-for="(_, index) in scrollSnaps" :key="index" class="border-1 w-4 h-4 rounded-full"
:key="index"
class="border-1 w-2 h-2 rounded-full"
:class="cn(index === selectedIndex ? 'border-transparent bg-primary' : 'bg-border', props.class)" :class="cn(index === selectedIndex ? 'border-transparent bg-primary' : 'bg-border', props.class)"
@click="scrollTo(index)" @click="scrollTo(index)"
/> />