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

feat: add focusability on carousel element

Browse Source
This commit is contained in:
wasimTQ 2023-12-30 14:33:01 +05:30
parent 0ec5604b31
commit b39ba5127b
2 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
View File

@ -1,5 +1,4 @@
<script setup lang="ts">
import { useForwardPropsEmits } from 'radix-vue'
import { useProvideCarousel } from './useCarousel'
import type { CarouselEmits, CarouselProps } from './interface'
import { cn } from '@/lib/utils'
@ -10,21 +9,24 @@ const props = withDefaults(defineProps<CarouselProps>(), {
const emits = defineEmits<CarouselEmits>()
const forwarded = useForwardPropsEmits(props)
const carouselArgs = useProvideCarousel(props, emits)
function onKeyDown(event: KeyboardEvent) {
event.preventDefault()
const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
if (event.key === prevKey)
if (event.key === prevKey) {
event.preventDefault()
carouselArgs.scrollPrev()
else if (event.key === nextKey)
return
}
if (event.key === nextKey) {
event.preventDefault()
carouselArgs.scrollNext()
}
}
</script>
<template>
@ -32,7 +34,7 @@ function onKeyDown(event: KeyboardEvent) {
:class="cn('relative', $attrs.class ?? '')"
role="region"
aria-roledescription="carousel"
v-bind="forwarded"
tabindex="0"
@keydown="onKeyDown"
>
<slot v-bind="carouselArgs" />

16
apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
View File

@ -1,5 +1,4 @@
<script setup lang="ts">
import { useForwardPropsEmits } from 'radix-vue'
import { useProvideCarousel } from './useCarousel'
import type { CarouselEmits, CarouselProps } from './interface'
import { cn } from '@/lib/utils'
@ -10,21 +9,24 @@ const props = withDefaults(defineProps<CarouselProps>(), {
const emits = defineEmits<CarouselEmits>()
const forwarded = useForwardPropsEmits(props)
const carouselArgs = useProvideCarousel(props, emits)
function onKeyDown(event: KeyboardEvent) {
event.preventDefault()
const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
if (event.key === prevKey)
if (event.key === prevKey) {
event.preventDefault()
carouselArgs.scrollPrev()
else if (event.key === nextKey)
return
}
if (event.key === nextKey) {
event.preventDefault()
carouselArgs.scrollNext()
}
}
</script>
<template>
@ -32,7 +34,7 @@ function onKeyDown(event: KeyboardEvent) {
:class="cn('relative', $attrs.class ?? '')"
role="region"
aria-roledescription="carousel"
v-bind="forwarded"
tabindex="0"
@keydown="onKeyDown"
>
<slot v-bind="carouselArgs" />