97c7417352
* feat: create new carousel component with embala-carousel * feat: create demos for the carousel component * feat: add the default carousel component to the docs * feat: add new-york styling for carousels * feat: add more examples for spacing, size and options * refactor: change ways to better pass the data to parent * feat: add examples for carousel api handling * feat: add example for using embla plugin * chore: add carousel component doc to the table of contents * feat: add focusability on carousel element * fix: update docs * chore: add docs for slot props * feat: expose api for the parent component * chore: include missing filenames * chore: update embla carousel dependency versions * chore: fix typescript error by getting the types from core package * chore: prevent duplicate classes by using class as prop * feat: use slot fallback content so user could change navigation button icons * fix: change attribute inheritance element * chore: update www package.json `scripts` update tsconfig exclude for the strict registry build * refactor: fix embla-carousel types after v8.0.0-rc18 update embla deps * chore: update @vue/tsconfig * chore: run registry * refactor: remove uneended ref * fix: dependencies for embla missing * docs: update carousel for optional plugin installation --------- Co-authored-by: sadeghbarati <sadeghbaratiwork@gmail.com> Co-authored-by: zernonia <zernonia@gmail.com>
46 lines
1.1 KiB
Vue
46 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import emblaCarouselVue from 'embla-carousel-vue'
|
|
import { useProvideCarousel } from './useCarousel'
|
|
import type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
|
|
orientation: 'horizontal',
|
|
})
|
|
|
|
const emits = defineEmits<CarouselEmits>()
|
|
|
|
const carouselArgs = useProvideCarousel(props, emits)
|
|
|
|
defineExpose(carouselArgs)
|
|
|
|
function onKeyDown(event: KeyboardEvent) {
|
|
const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
|
|
const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
|
|
|
|
if (event.key === prevKey) {
|
|
event.preventDefault()
|
|
carouselArgs.scrollPrev()
|
|
|
|
return
|
|
}
|
|
|
|
if (event.key === nextKey) {
|
|
event.preventDefault()
|
|
carouselArgs.scrollNext()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="cn('relative', props.class)"
|
|
role="region"
|
|
aria-roledescription="carousel"
|
|
tabindex="0"
|
|
@keydown="onKeyDown"
|
|
>
|
|
<slot v-bind="carouselArgs" />
|
|
</div>
|
|
</template>
|