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

fix: prevent page zoom while tapping carousel buttons (#274)

Browse Source 
* 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
This commit is contained in:
Sadegh Barati 2024-01-15 18:55:22 +03:30 committed by GitHub
parent 72857b6a56
commit c33acba4ff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 221 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/www/.vitepress/theme/components/ComponentPreview.vue
View File

@ -52,7 +52,7 @@ const { style } = useConfigStore()
</div>
</div>
<div
:class="cn('preview flex min-h-[350px] w-full justify-center p-6 lg:p-10', {
:class="cn('preview flex min-h-[350px] w-full justify-center p-10 items-center', {
'items-center': align === 'center',
'items-start': align === 'start',
'items-end': align === 'end',

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

@ -48,18 +48,6 @@ import {
## Examples
### Orientation
Use the `orientation` prop to set the orientation of the carousel.
<ComponentPreview name="CarouselOrientation" />
```vue
<Carousel orientation="vertical | horizontal">
...
</Carousel>
```
### Sizes
To set the size of the items, you can use the `basis` utility class on the `<CarouselItem />`.
@ -151,6 +139,17 @@ Responsive
</template>
```
### Orientation
Use the `orientation` prop to set the orientation of the carousel.
<ComponentPreview name="CarouselOrientation" />
```vue
<Carousel orientation="vertical | horizontal">
...
</Carousel>
```
## Options
@ -280,4 +279,4 @@ 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.
See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on using plugins.

4
apps/www/src/lib/registry/default/example/CarouselApi.vue
View File

@ -27,8 +27,8 @@ watchOnce(api, (api) => {
</script>
<template>
<div class="flex flex-col items-center space-x-2">
<Carousel class="w-full max-w-xs" @init-api="setApi">
<div class="w-full sm:w-auto">
<Carousel class="relative w-full max-w-xs" @init-api="setApi">
<CarouselContent>
<CarouselItem v-for="(_, index) in 5" :key="index">
<div class="p-1">

32
apps/www/src/lib/registry/default/example/CarouselDemo.vue
View File

@ -4,21 +4,19 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
</script>
<template>
<div class="flex items-center space-x-2">
<Carousel class="w-full max-w-xs">
<CarouselContent>
<CarouselItem v-for="(_, index) in 5" :key="index">
<div class="p-1">
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</div>
<Carousel class="relative w-full max-w-xs">
<CarouselContent>
<CarouselItem v-for="(_, index) in 5" :key="index">
<div class="p-1">
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</template>

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

@ -4,27 +4,25 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
</script>
<template>
<div class="w-1/2">
<Carousel
orientation="vertical"
class="w-full max-w-xs"
:opts="{
align: 'start',
}"
>
<CarouselContent class="-mt-1 h-[200px]">
<CarouselItem v-for="(_, index) in 5" :key="index" class="p-1 md:basis-1/2">
<div class="p-1">
<Card>
<CardContent class="flex items-center justify-center p-6">
<span class="text-3xl font-semibold">{{ index + 1 }}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</div>
<Carousel
orientation="vertical"
class="relative w-full max-w-xsw-full max-w-xs"
:opts="{
align: 'start',
}"
>
<CarouselContent class="-mt-1 h-[200px]">
<CarouselItem v-for="(_, index) in 5" :key="index" class="p-1 md:basis-1/2">
<div class="p-1">
<Card>
<CardContent class="flex items-center justify-center p-6">
<span class="text-3xl font-semibold">{{ index + 1 }}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</template>

42
apps/www/src/lib/registry/default/example/CarouselPlugin.vue
View File

@ -11,26 +11,24 @@ const plugin = Autoplay({
</script>
<template>
<div class="flex items-center space-x-2">
<Carousel
class="w-full max-w-xs"
:plugins="[plugin]"
@mouseenter="plugin.stop"
@mouseleave="[plugin.reset(), plugin.play(), console.log('Runing')];"
>
<CarouselContent>
<CarouselItem v-for="(_, index) in 5" :key="index">
<div class="p-1">
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</div>
<Carousel
class="relative w-full max-w-xs"
:plugins="[plugin]"
@mouseenter="plugin.stop"
@mouseleave="[plugin.reset(), plugin.play(), console.log('Runing')];"
>
<CarouselContent>
<CarouselItem v-for="(_, index) in 5" :key="index">
<div class="p-1">
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</template>

42
apps/www/src/lib/registry/default/example/CarouselSize.vue
View File

@ -4,26 +4,24 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
</script>
<template>
<div class="flex items-center space-x-2">
<Carousel
class="w-full max-w-xs"
:opts="{
align: 'start',
}"
>
<CarouselContent>
<CarouselItem v-for="(_, index) in 5" :key="index" class="md:basis-1/2 lg:basis-1/3">
<div class="p-1">
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
<span class="text-3xl font-semibold">{{ index + 1 }}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</div>
<Carousel
class="relative w-full max-w-sm"
:opts="{
align: 'start',
}"
>
<CarouselContent>
<CarouselItem v-for="(_, index) in 5" :key="index" class="md:basis-1/2 lg:basis-1/3">
<div class="p-1">
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
<span class="text-3xl font-semibold">{{ index + 1 }}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</template>

42
apps/www/src/lib/registry/default/example/CarouselSpacing.vue
View File

@ -4,26 +4,24 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
</script>
<template>
<div class="flex items-center space-x-2">
<Carousel
class="w-full max-w-sm"
:opts="{
align: 'start',
}"
>
<CarouselContent class="-ml-1">
<CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3">
<div class="p-1">
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
<span class="text-2xl font-semibold">{{ index + 1 }}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</div>
<Carousel
class="relative w-full max-w-sm"
:opts="{
align: 'start',
}"
>
<CarouselContent class="-ml-1">
<CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3">
<div class="p-1">
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
<span class="text-2xl font-semibold">{{ index + 1 }}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</template>

6
apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ChevronRight } from 'lucide-vue-next'
import { ArrowRight } from 'lucide-vue-next'
import { useCarousel } from './useCarousel'
import type { WithClassAsProps } from './interface'
import { cn } from '@/lib/utils'
@ -14,7 +14,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
<Button
:disabled="!canScrollNext"
:class="cn(
'absolute h-10 w-10 rounded-full p-0',
'touch-manipulation absolute h-8 w-8 rounded-full p-0',
orientation === 'horizontal'
? '-right-12 top-1/2 -translate-y-1/2'
: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
@ -24,7 +24,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
@click="scrollNext"
>
<slot>
<ChevronRight class="h-4 w-4 text-current" />
<ArrowRight class="h-4 w-4 text-current" />
</slot>
</Button>
</template>

6
apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ChevronLeft } from 'lucide-vue-next'
import { ArrowLeft } from 'lucide-vue-next'
import { useCarousel } from './useCarousel'
import type { WithClassAsProps } from './interface'
import { cn } from '@/lib/utils'
@ -14,7 +14,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
<Button
:disabled="!canScrollPrev"
:class="cn(
'absolute h-10 w-10 rounded-full p-0',
'touch-manipulation absolute h-8 w-8 rounded-full p-0',
orientation === 'horizontal'
? '-left-12 top-1/2 -translate-y-1/2'
: '-top-12 left-1/2 -translate-x-1/2 rotate-90',
@ -24,7 +24,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
@click="scrollPrev"
>
<slot>
<ChevronLeft class="h-4 w-4 text-current" />
<ArrowLeft class="h-4 w-4 text-current" />
</slot>
</Button>
</template>

4
apps/www/src/lib/registry/new-york/example/CarouselApi.vue
View File

@ -27,8 +27,8 @@ watchOnce(api, (api) => {
</script>
<template>
<div class="flex flex-col items-center space-x-2">
<Carousel class="w-full max-w-xs" @init-api="setApi">
<div class="w-full sm:w-auto">
<Carousel class="relative w-full max-w-xs" @init-api="setApi">
<CarouselContent>
<CarouselItem v-for="(_, index) in 5" :key="index">
<div class="p-1">

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

@ -4,21 +4,19 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
</script>
<template>
<div class="flex items-center space-x-2">
<Carousel class="w-full max-w-xs">
<CarouselContent>
<CarouselItem v-for="(_, index) in 5" :key="index">
<div class="p-1">
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</div>
<Carousel class="relative w-full max-w-xs">
<CarouselContent>
<CarouselItem v-for="(_, index) in 5" :key="index">
<div class="p-1">
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</template>

44
apps/www/src/lib/registry/new-york/example/CarouselOrientation.vue
View File

@ -4,27 +4,25 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
</script>
<template>
<div class="w-1/2">
<Carousel
orientation="vertical"
class="w-full max-w-xs"
:opts="{
align: 'start',
}"
>
<CarouselContent class="-mt-1 h-[200px]">
<CarouselItem v-for="(_, index) in 5" :key="index" class="p-1 md:basis-1/2">
<div class="p-1">
<Card>
<CardContent class="flex items-center justify-center p-6">
<span class="text-3xl font-semibold">{{ index + 1 }}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</div>
<Carousel
orientation="vertical"
class="relative w-full max-w-xs"
:opts="{
align: 'start',
}"
>
<CarouselContent class="-mt-1 h-[200px]">
<CarouselItem v-for="(_, index) in 5" :key="index" class="p-1 md:basis-1/2">
<div class="p-1">
<Card>
<CardContent class="flex items-center justify-center p-6">
<span class="text-3xl font-semibold">{{ index + 1 }}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</template>

42
apps/www/src/lib/registry/new-york/example/CarouselPlugin.vue
View File

@ -11,26 +11,24 @@ const plugin = Autoplay({
</script>
<template>
<div class="flex items-center space-x-2">
<Carousel
class="w-full max-w-xs"
:plugins="[plugin]"
@mouseenter="plugin.stop"
@mouseleave="[plugin.reset(), plugin.play(), console.log('Runing')];"
>
<CarouselContent>
<CarouselItem v-for="(_, index) in 5" :key="index">
<div class="p-1">
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</div>
<Carousel
class="relative w-full max-w-xs"
:plugins="[plugin]"
@mouseenter="plugin.stop"
@mouseleave="[plugin.reset(), plugin.play(), console.log('Runing')];"
>
<CarouselContent>
<CarouselItem v-for="(_, index) in 5" :key="index">
<div class="p-1">
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</template>

42
apps/www/src/lib/registry/new-york/example/CarouselSize.vue
View File

@ -4,26 +4,24 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
</script>
<template>
<div class="flex items-center space-x-2">
<Carousel
class="w-full max-w-xs"
:opts="{
align: 'start',
}"
>
<CarouselContent>
<CarouselItem v-for="(_, index) in 5" :key="index" class="md:basis-1/2 lg:basis-1/3">
<div class="p-1">
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
<span class="text-3xl font-semibold">{{ index + 1 }}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</div>
<Carousel
class="relative w-full max-w-xs"
:opts="{
align: 'start',
}"
>
<CarouselContent>
<CarouselItem v-for="(_, index) in 5" :key="index" class="md:basis-1/2 lg:basis-1/3">
<div class="p-1">
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
<span class="text-3xl font-semibold">{{ index + 1 }}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</template>

42
apps/www/src/lib/registry/new-york/example/CarouselSpacing.vue
View File

@ -4,26 +4,24 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
</script>
<template>
<div class="flex items-center space-x-2">
<Carousel
class="w-full max-w-sm"
:opts="{
align: 'start',
}"
>
<CarouselContent class="-ml-1">
<CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3">
<div class="p-1">
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
<span class="text-2xl font-semibold">{{ index + 1 }}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</div>
<Carousel
class="w-full max-w-sm"
:opts="{
align: 'start',
}"
>
<CarouselContent class="-ml-1">
<CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3">
<div class="p-1">
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
<span class="text-2xl font-semibold">{{ index + 1 }}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</template>

6
apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ChevronRightIcon } from '@radix-icons/vue'
import { ArrowRightIcon } from '@radix-icons/vue'
import { useCarousel } from './useCarousel'
import type { WithClassAsProps } from './interface'
import { cn } from '@/lib/utils'
@ -14,7 +14,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
<Button
:disabled="!canScrollNext"
:class="cn(
'absolute h-10 w-10 rounded-full p-0',
'touch-manipulation absolute h-8 w-8 rounded-full p-0',
orientation === 'horizontal'
? '-right-12 top-1/2 -translate-y-1/2'
: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
@ -24,7 +24,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
@click="scrollNext"
>
<slot>
<ChevronRightIcon class="h-4 w-4 text-current" />
<ArrowRightIcon class="h-4 w-4 text-current" />
</slot>
</Button>
</template>

6
apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ChevronLeftIcon } from '@radix-icons/vue'
import { ArrowLeftIcon } from '@radix-icons/vue'
import { useCarousel } from './useCarousel'
import type { WithClassAsProps } from './interface'
import { cn } from '@/lib/utils'
@ -14,7 +14,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
<Button
:disabled="!canScrollPrev"
:class="cn(
'absolute h-10 w-10 rounded-full p-0',
'touch-manipulation absolute h-8 w-8 rounded-full p-0',
orientation === 'horizontal'
? '-left-12 top-1/2 -translate-y-1/2'
: '-top-12 left-1/2 -translate-x-1/2 rotate-90',
@ -24,7 +24,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
@click="scrollPrev"
>
<slot>
<ChevronLeftIcon class="h-4 w-4 text-current" />
<ArrowLeftIcon class="h-4 w-4 text-current" />
</slot>
</Button>
</template>