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

Browse Source 
choose shadcn-ui icons and sizes for buttons
This commit is contained in:
Sadegh Barati 2024-01-15 18:45:41 +03:30
parent 72857b6a56
commit 7dfab6a6e2
4 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>

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>