import { Canvas, Controls, Meta } from '@storybook/addon-docs';
import * as ScrollAreaStories from './ScrollArea.stories';

# ScrollArea

<Meta of={ScrollAreaStories} />

<br />

## Overview

스크롤이 가능한 영역입니다.

<Canvas of={ScrollAreaStories.Default} />

<Controls />

<br />

## Usage

기본적인 <strong>ScrollArea</strong> 컴포넌트 사용방법 입니다.

```javascript
import { ScrollArea } from '@lotte-innovate/lui-vue';

<template>
  <ScrollArea />
</template>;
```

<br />

## API Reference

### Root

스크롤 가능한 영역의 루트 컴포넌트입니다.

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Default</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>scrollHideDelay</td>
      <td>number</td>
      <td>600</td>
      <td>
        타입이 <code>scroll</code> 또는 <code>hover</code>로 설정된 경우, 사용자가 스크롤바와
        상호작용을 멈춘 후 스크롤바가 숨겨지기까지의 시간을 밀리초 단위로 결정합니다.
      </td>
    </tr>
    <tr>
      <td>type</td>
      <td>'always' | 'scroll' | 'hover' | 'auto'</td>
      <td>'hover'</td>
      <td>
        <p>always: 스크롤바가 항상 표시됩니다.</p>
        <p>scroll: 콘텐츠가 스크롤 가능할 때만 스크롤바가 표시됩니다.</p>
        <p>hover: 사용자가 스크롤 영역 위에 마우스를 올려놓을 때만 스크롤바가 표시됩니다.</p>
        <p>auto: 브라우저의 기본 동작을 따릅니다.</p>
      </td>
    </tr>
  </tbody>
</table>

### Scrollbar

스크롤바를 나타내는 컴포넌트입니다.

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Default</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>orientation</td>
      <td>'horizontal' | 'vertical'</td>
      <td>'vertical'</td>
      <td>스크롤바의 방향</td>
    </tr>
    <tr>
      <td>forceMount</td>
      <td>boolean</td>
      <td>false</td>
      <td>스크롤바를 항상 마운트할지 여부 지정</td>
    </tr>
  </tbody>
</table>

<br />

## Variant

### Horizontal

`orientation` props는 컴포넌트의 스크롤 가능한 축을 제어합니다.

`vertical` | `horizontal` 중 하나로 기본 값은 `vertical` 입니다.

`orientation="horizontal"`인 경우, `<Scrollbar />`를 직접 명시해야 합니다. 예제는 다음과 같습니다.

```javascript
<template>
  <ScrollArea class="border rounded-md w-96 whitespace-nowrap">
      <div class="flex p-4 space-x-4 w-max">
        <div v-for="artwork in works" :key="artwork.id">
          <figure class="shrink-0">
            <div class="overflow-hidden rounded-md">
              <img
                :src="artwork.art"
                :alt="\`Photo by \${artwork.artist}\`"
                class="aspect-[3/4] w-36 h-56 object-cover"
              >
            </div>
            <figcaption class="pt-2 text-xs text-muted-foreground">
              Photo by
              <span class="font-semibold text-foreground">
                {{ artwork.artist }}
              </span>
            </figcaption>
          </figure>
        </div>
      </div>
      <Scrollbar orientation="horizontal" />
  </ScrollArea>
</template>

<script setup>
  const works = [{ id: '1', artist: 'artist', art: 'art_url' }, ...];
</script>
```

<Canvas of={ScrollAreaStories.Horizontal} />