Skip to content

Commit c33acba

Browse files
sadeghbaratisadeghbarati
authored
fix: prevent page zoom while tapping carousel buttons (#274)
* fix: prevent page zoom while tapping carousel buttons choose shadcn-ui icons and sizes for buttons * docs: fix carousel page responsive issues and ordering docs as shadcn-ui
1 parent 72857b6 commit c33acba

File tree

18 files changed

+221
-242
lines changed

18 files changed

+221
-242
lines changed

‎apps/www/.vitepress/theme/components/ComponentPreview.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const { style } = useConfigStore()
5252
</div>
5353
</div>
5454
<div
55-
:class="cn('preview flex min-h-[350px] w-full justify-center p-6 lg:p-10', {
55+
:class="cn('preview flex min-h-[350px] w-full justify-center p-10 items-center', {
5656
'items-center': align === 'center',
5757
'items-start': align === 'start',
5858
'items-end': align === 'end',

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

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -48,18 +48,6 @@ import {
4848

4949
## Examples
5050

51-
### Orientation
52-
53-
Use the `orientation` prop to set the orientation of the carousel.
54-
55-
<ComponentPreview name="CarouselOrientation" />
56-
57-
```vue
58-
<Carousel orientation="vertical | horizontal">
59-
...
60-
</Carousel>
61-
```
62-
6351
### Sizes
6452

6553
To set the size of the items, you can use the `basis` utility class on the `<CarouselItem />`.
@@ -151,6 +139,17 @@ Responsive
151139
</template>
152140
```
153141

142+
### Orientation
143+
144+
Use the `orientation` prop to set the orientation of the carousel.
145+
146+
<ComponentPreview name="CarouselOrientation" />
147+
148+
```vue
149+
<Carousel orientation="vertical | horizontal">
150+
...
151+
</Carousel>
152+
```
154153

155154
## Options
156155

@@ -280,4 +279,4 @@ import Autoplay from 'embla-carousel-autoplay'
280279

281280
<ComponentPreview name="CarouselPlugin" />
282281

283-
See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on using plugins.
282+
See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on using plugins.

‎apps/www/src/lib/registry/default/example/CarouselApi.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ watchOnce(api, (api) => {
2727
</script>
2828

2929
<template>
30-
<div class="flex flex-col items-center space-x-2">
31-
<Carousel class="w-full max-w-xs" @init-api="setApi">
30+
<div class="w-full sm:w-auto">
31+
<Carousel class="relative w-full max-w-xs" @init-api="setApi">
3232
<CarouselContent>
3333
<CarouselItem v-for="(_, index) in 5" :key="index">
3434
<div class="p-1">

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

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,19 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
44
</script>
55

66
<template>
7-
<div class="flex items-center space-x-2">
8-
<Carousel class="w-full max-w-xs">
9-
<CarouselContent>
10-
<CarouselItem v-for="(_, index) in 5" :key="index">
11-
<div class="p-1">
12-
<Card>
13-
<CardContent class="flex aspect-square items-center justify-center p-6">
14-
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
15-
</CardContent>
16-
</Card>
17-
</div>
18-
</CarouselItem>
19-
</CarouselContent>
20-
<CarouselPrevious />
21-
<CarouselNext />
22-
</Carousel>
23-
</div>
7+
<Carousel class="relative w-full max-w-xs">
8+
<CarouselContent>
9+
<CarouselItem v-for="(_, index) in 5" :key="index">
10+
<div class="p-1">
11+
<Card>
12+
<CardContent class="flex aspect-square items-center justify-center p-6">
13+
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
14+
</CardContent>
15+
</Card>
16+
</div>
17+
</CarouselItem>
18+
</CarouselContent>
19+
<CarouselPrevious />
20+
<CarouselNext />
21+
</Carousel>
2422
</template>

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

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,25 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
44
</script>
55

66
<template>
7-
<div class="w-1/2">
8-
<Carousel
9-
orientation="vertical"
10-
class="w-full max-w-xs"
11-
:opts="{
12-
align: 'start',
13-
}"
14-
>
15-
<CarouselContent class="-mt-1 h-[200px]">
16-
<CarouselItem v-for="(_, index) in 5" :key="index" class="p-1 md:basis-1/2">
17-
<div class="p-1">
18-
<Card>
19-
<CardContent class="flex items-center justify-center p-6">
20-
<span class="text-3xl font-semibold">{{ index + 1 }}</span>
21-
</CardContent>
22-
</Card>
23-
</div>
24-
</CarouselItem>
25-
</CarouselContent>
26-
<CarouselPrevious />
27-
<CarouselNext />
28-
</Carousel>
29-
</div>
7+
<Carousel
8+
orientation="vertical"
9+
class="relative w-full max-w-xsw-full max-w-xs"
10+
:opts="{
11+
align: 'start',
12+
}"
13+
>
14+
<CarouselContent class="-mt-1 h-[200px]">
15+
<CarouselItem v-for="(_, index) in 5" :key="index" class="p-1 md:basis-1/2">
16+
<div class="p-1">
17+
<Card>
18+
<CardContent class="flex items-center justify-center p-6">
19+
<span class="text-3xl font-semibold">{{ index + 1 }}</span>
20+
</CardContent>
21+
</Card>
22+
</div>
23+
</CarouselItem>
24+
</CarouselContent>
25+
<CarouselPrevious />
26+
<CarouselNext />
27+
</Carousel>
3028
</template>

‎apps/www/src/lib/registry/default/example/CarouselPlugin.vue

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -11,26 +11,24 @@ const plugin = Autoplay({
1111
</script>
1212

1313
<template>
14-
<div class="flex items-center space-x-2">
15-
<Carousel
16-
class="w-full max-w-xs"
17-
:plugins="[plugin]"
18-
@mouseenter="plugin.stop"
19-
@mouseleave="[plugin.reset(), plugin.play(), console.log('Runing')];"
20-
>
21-
<CarouselContent>
22-
<CarouselItem v-for="(_, index) in 5" :key="index">
23-
<div class="p-1">
24-
<Card>
25-
<CardContent class="flex aspect-square items-center justify-center p-6">
26-
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
27-
</CardContent>
28-
</Card>
29-
</div>
30-
</CarouselItem>
31-
</CarouselContent>
32-
<CarouselPrevious />
33-
<CarouselNext />
34-
</Carousel>
35-
</div>
14+
<Carousel
15+
class="relative w-full max-w-xs"
16+
:plugins="[plugin]"
17+
@mouseenter="plugin.stop"
18+
@mouseleave="[plugin.reset(), plugin.play(), console.log('Runing')];"
19+
>
20+
<CarouselContent>
21+
<CarouselItem v-for="(_, index) in 5" :key="index">
22+
<div class="p-1">
23+
<Card>
24+
<CardContent class="flex aspect-square items-center justify-center p-6">
25+
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
26+
</CardContent>
27+
</Card>
28+
</div>
29+
</CarouselItem>
30+
</CarouselContent>
31+
<CarouselPrevious />
32+
<CarouselNext />
33+
</Carousel>
3634
</template>

‎apps/www/src/lib/registry/default/example/CarouselSize.vue

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,24 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
44
</script>
55

66
<template>
7-
<div class="flex items-center space-x-2">
8-
<Carousel
9-
class="w-full max-w-xs"
10-
:opts="{
11-
align: 'start',
12-
}"
13-
>
14-
<CarouselContent>
15-
<CarouselItem v-for="(_, index) in 5" :key="index" class="md:basis-1/2 lg:basis-1/3">
16-
<div class="p-1">
17-
<Card>
18-
<CardContent class="flex aspect-square items-center justify-center p-6">
19-
<span class="text-3xl font-semibold">{{ index + 1 }}</span>
20-
</CardContent>
21-
</Card>
22-
</div>
23-
</CarouselItem>
24-
</CarouselContent>
25-
<CarouselPrevious />
26-
<CarouselNext />
27-
</Carousel>
28-
</div>
7+
<Carousel
8+
class="relative w-full max-w-sm"
9+
:opts="{
10+
align: 'start',
11+
}"
12+
>
13+
<CarouselContent>
14+
<CarouselItem v-for="(_, index) in 5" :key="index" class="md:basis-1/2 lg:basis-1/3">
15+
<div class="p-1">
16+
<Card>
17+
<CardContent class="flex aspect-square items-center justify-center p-6">
18+
<span class="text-3xl font-semibold">{{ index + 1 }}</span>
19+
</CardContent>
20+
</Card>
21+
</div>
22+
</CarouselItem>
23+
</CarouselContent>
24+
<CarouselPrevious />
25+
<CarouselNext />
26+
</Carousel>
2927
</template>

‎apps/www/src/lib/registry/default/example/CarouselSpacing.vue

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,24 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
44
</script>
55

66
<template>
7-
<div class="flex items-center space-x-2">
8-
<Carousel
9-
class="w-full max-w-sm"
10-
:opts="{
11-
align: 'start',
12-
}"
13-
>
14-
<CarouselContent class="-ml-1">
15-
<CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3">
16-
<div class="p-1">
17-
<Card>
18-
<CardContent class="flex aspect-square items-center justify-center p-6">
19-
<span class="text-2xl font-semibold">{{ index + 1 }}</span>
20-
</CardContent>
21-
</Card>
22-
</div>
23-
</CarouselItem>
24-
</CarouselContent>
25-
<CarouselPrevious />
26-
<CarouselNext />
27-
</Carousel>
28-
</div>
7+
<Carousel
8+
class="relative w-full max-w-sm"
9+
:opts="{
10+
align: 'start',
11+
}"
12+
>
13+
<CarouselContent class="-ml-1">
14+
<CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3">
15+
<div class="p-1">
16+
<Card>
17+
<CardContent class="flex aspect-square items-center justify-center p-6">
18+
<span class="text-2xl font-semibold">{{ index + 1 }}</span>
19+
</CardContent>
20+
</Card>
21+
</div>
22+
</CarouselItem>
23+
</CarouselContent>
24+
<CarouselPrevious />
25+
<CarouselNext />
26+
</Carousel>
2927
</template>

‎apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import { ChevronRight } from 'lucide-vue-next'
2+
import { ArrowRight } from 'lucide-vue-next'
33
import { useCarousel } from './useCarousel'
44
import type { WithClassAsProps } from './interface'
55
import { cn } from '@/lib/utils'
@@ -14,7 +14,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
1414
<Button
1515
:disabled="!canScrollNext"
1616
:class="cn(
17-
'absolute h-10 w-10 rounded-full p-0',
17+
'touch-manipulation absolute h-8 w-8 rounded-full p-0',
1818
orientation === 'horizontal'
1919
? '-right-12 top-1/2 -translate-y-1/2'
2020
: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
@@ -24,7 +24,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
2424
@click="scrollNext"
2525
>
2626
<slot>
27-
<ChevronRight class="h-4 w-4 text-current" />
27+
<ArrowRight class="h-4 w-4 text-current" />
2828
</slot>
2929
</Button>
3030
</template>

‎apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import { ChevronLeft } from 'lucide-vue-next'
2+
import { ArrowLeft } from 'lucide-vue-next'
33
import { useCarousel } from './useCarousel'
44
import type { WithClassAsProps } from './interface'
55
import { cn } from '@/lib/utils'
@@ -14,7 +14,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
1414
<Button
1515
:disabled="!canScrollPrev"
1616
:class="cn(
17-
'absolute h-10 w-10 rounded-full p-0',
17+
'touch-manipulation absolute h-8 w-8 rounded-full p-0',
1818
orientation === 'horizontal'
1919
? '-left-12 top-1/2 -translate-y-1/2'
2020
: '-top-12 left-1/2 -translate-x-1/2 rotate-90',
@@ -24,7 +24,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
2424
@click="scrollPrev"
2525
>
2626
<slot>
27-
<ChevronLeft class="h-4 w-4 text-current" />
27+
<ArrowLeft class="h-4 w-4 text-current" />
2828
</slot>
2929
</Button>
3030
</template>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ watchOnce(api, (api) => {
2727
</script>
2828

2929
<template>
30-
<div class="flex flex-col items-center space-x-2">
31-
<Carousel class="w-full max-w-xs" @init-api="setApi">
30+
<div class="w-full sm:w-auto">
31+
<Carousel class="relative w-full max-w-xs" @init-api="setApi">
3232
<CarouselContent>
3333
<CarouselItem v-for="(_, index) in 5" :key="index">
3434
<div class="p-1">

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

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,19 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
44
</script>
55

66
<template>
7-
<div class="flex items-center space-x-2">
8-
<Carousel class="w-full max-w-xs">
9-
<CarouselContent>
10-
<CarouselItem v-for="(_, index) in 5" :key="index">
11-
<div class="p-1">
12-
<Card>
13-
<CardContent class="flex aspect-square items-center justify-center p-6">
14-
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
15-
</CardContent>
16-
</Card>
17-
</div>
18-
</CarouselItem>
19-
</CarouselContent>
20-
<CarouselPrevious />
21-
<CarouselNext />
22-
</Carousel>
23-
</div>
7+
<Carousel class="relative w-full max-w-xs">
8+
<CarouselContent>
9+
<CarouselItem v-for="(_, index) in 5" :key="index">
10+
<div class="p-1">
11+
<Card>
12+
<CardContent class="flex aspect-square items-center justify-center p-6">
13+
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
14+
</CardContent>
15+
</Card>
16+
</div>
17+
</CarouselItem>
18+
</CarouselContent>
19+
<CarouselPrevious />
20+
<CarouselNext />
21+
</Carousel>
2422
</template>

0 commit comments

Comments
 (0)