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

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

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

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

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

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

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