Scroll Area

<script setup lang="ts">
/**
 * Порт базового радикс-слоя (registry/bases/radix/ui/scroll-area.tsx, MIT).
 * Radix `ScrollArea.{Root,Viewport,Corner}` -> reka-ui
 * `ScrollAreaRoot`/`ScrollAreaViewport`/`ScrollAreaCorner`, один в один:
 * `data-slot` и Tailwind-строки перенесены дословно (правило 1,
 * docs/PORTING.md). `ScrollBar` живёт рядом в ScrollBar.vue.
 *
 * Единственный владелец этого примитива в порте `filters` (ADR-003):
 * `scroll-area` отсутствовал в базовом слое до этой задачи.
 */
import type { HTMLAttributes } from "vue"
import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaViewport } from "reka-ui"
import { cn } from "@/lib/utils"
import ScrollBar from "./ScrollBar.vue"

const props = defineProps<{
  class?: HTMLAttributes["class"]
}>()
</script>

<template>
  <ScrollAreaRoot data-slot="scroll-area" :class="cn('cn-scroll-area relative', props.class)">
    <ScrollAreaViewport
      data-slot="scroll-area-viewport"
      class="cn-scroll-area-viewport size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
    >
      <slot />
    </ScrollAreaViewport>
    <ScrollBar />
    <ScrollAreaCorner />
  </ScrollAreaRoot>
</template>

<script setup lang="ts">
/**
 * Порт базового радикс-слоя (registry/bases/radix/ui/scroll-area.tsx, MIT).
 * См. ScrollArea.vue.
 */
import type { HTMLAttributes } from "vue"
import { ScrollAreaScrollbar, ScrollAreaThumb } from "reka-ui"
import { cn } from "@/lib/utils"

const props = withDefaults(
  defineProps<{
    class?: HTMLAttributes["class"]
    orientation?: "vertical" | "horizontal"
  }>(),
  {
    orientation: "vertical",
  }
)
</script>

<template>
  <ScrollAreaScrollbar
    data-slot="scroll-area-scrollbar"
    :data-orientation="props.orientation"
    :orientation="props.orientation"
    :class="cn('cn-scroll-area-scrollbar flex touch-none p-px transition-colors select-none', props.class)"
  >
    <ScrollAreaThumb data-slot="scroll-area-thumb" class="cn-scroll-area-thumb relative flex-1 bg-border" />
  </ScrollAreaScrollbar>
</template>

export { default as ScrollArea } from "./ScrollArea.vue"
export { default as ScrollBar } from "./ScrollBar.vue"