carousel

1<script setup lang="ts">
2import type { CarouselEmits, CarouselProps, WithClassAsProps } from "./interface"
3import { cn } from "@/lib/utils"
4import { useProvideCarousel } from "./useCarousel"
5 
6const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
7  orientation: "horizontal",
8})
9 
10const emits = defineEmits<CarouselEmits>()
11 
12const { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)
13 
14defineExpose({
15  canScrollNext,
16  canScrollPrev,
17  carouselApi,
18  carouselRef,
19  orientation,
20  scrollNext,
21  scrollPrev,
22})
23 
24function onKeyDown(event: KeyboardEvent) {
25  const prevKey = props.orientation === "vertical" ? "ArrowUp" : "ArrowLeft"
26  const nextKey = props.orientation === "vertical" ? "ArrowDown" : "ArrowRight"
27 
28  if (event.key === prevKey) {
29    event.preventDefault()
30    scrollPrev()
31 
32    return
33  }
34 
35  if (event.key === nextKey) {
36    event.preventDefault()
37    scrollNext()
38  }
39}
40</script>
41 
42<template>
43  <div
44    :class="cn('relative', props.class)"
45    role="region"
46    aria-roledescription="carousel"
47    tabindex="0"
48    @keydown="onKeyDown"
49  >
50    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />
51  </div>
52</template>