scroll-area

1<script setup lang="ts">
2import type { ScrollAreaRootProps } from "reka-ui"
3import type { HTMLAttributes } from "vue"
4import { reactiveOmit } from "@vueuse/core"
5import {
6  ScrollAreaCorner,
7  ScrollAreaRoot,
8  ScrollAreaViewport,
9} from "reka-ui"
10import { cn } from "@/lib/utils"
11import ScrollBar from "./ScrollBar.vue"
12 
13const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes["class"] }>()
14 
15const delegatedProps = reactiveOmit(props, "class")
16</script>
17 
18<template>
19  <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
20    <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
21      <slot />
22    </ScrollAreaViewport>
23    <ScrollBar />
24    <ScrollAreaCorner />
25  </ScrollAreaRoot>
26</template>