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

# Popover

<Meta of={PopoverStories} />

<br />

## Overview

특정 개체 위에 포인트를 클릭했을 때 제공되는 컨테이너 요소입니다.

<Canvas of={PopoverStories.Default} />

<Controls />

<br />

## Usage

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

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

<template>
  <PopoverRoot>
    <PopoverTrigger />
    <PopoverContent>
      <PopoverClose />
    </PopoverContent>
  </PopoverRoot>
</template>;
```

<br />

## API Reference

### Root

`Popover`의 모든 부분을 포함합니다.

### defaultOpen

`defaultOpen` props는 처음 렌더링될 때 열려 있는지 여부를 결정합니다.

```javascript
<PopoverRoot :defaultOpen="true">
  <PopoverTrigger>
    <button>Open Popover</button>
  </PopoverTrigger>
  <PopoverContent>
    <p>This is the popover content.</p>
  </PopoverContent>
</PopoverRoot>
```

### modal

`modal` props는 Popover를 모달로 설정합니다. 모달인 경우, 열려 있는 동안 다른 요소와의 상호작용을 차단합니다.

```javascript
<PopoverRoot :modal="true">
  <PopoverTrigger asChild>
    <button>Open Modal Popover</button>
  </PopoverTrigger>
  <PopoverContent>
    <p>This is the modal popover content.</p>
    <PopoverClose asChild>
      <button>Close</button>
    </PopoverClose>
  </PopoverContent>
</PopoverRoot>
```

### open

`open` props는 열린 상태를 나타내며 `update:open`과 함께 사용합니다.

### update:open

`update:open`는 열린 상태가 변경되면 호출되는 이벤트 핸들러입니다.

```javascript
<template>
  <PopoverRoot :open="isOpen" @update:open="handleOpenChange">
    <PopoverTrigger asChild>
      <button>Open Popover</button>
    </PopoverTrigger>
    <PopoverContent>
      <p>This is the popover content.</p>
      <PopoverClose asChild>
        <button>Close</button>
      </PopoverClose>
    </PopoverContent>
  </PopoverRoot>
</template>

<script setup>
import { ref } from 'vue';

const isOpen = ref(false);

const handleOpenChange = (newOpenState) => {
  isOpen.value = newOpenState;
};
</script>
```

### Trigger

`Popover`를 여는 버튼입니다.

### Content

`Popover` 내부에 렌더링되는 콘텐츠를 포함합니다. 아래는 props에 대한 설명입니다.

<table>
  <thead>
    <tr>
      <th>Prop</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>align</td>
      <td>'start' | 'center' | 'end'</td>
      <td>정렬을 설정합니다.</td>
    </tr>
    <tr>
      <td>alignOffset</td>
      <td>number</td>
      <td>시작 또는 끝 정렬 옵션으로부터의 오프셋(픽셀)입니다.</td>
    </tr>
    <tr>
      <td>avoidCollisions</td>
      <td>boolean</td>
      <td>true인 경우 측면 및 정렬 기본 설정을 재정의하여 경계 가장자리와의 충돌을 방지합니다.</td>
    </tr>
    <tr>
      <td>collisionBoundary</td>
      <td>Element | (Element | null)[] | null</td>
      <td>충돌 감지를 위한 경계 요소를 설정합니다.</td>
    </tr>
    <tr>
      <td>collisionPadding</td>
      <td>Number | Object</td>
      <td>충돌 감지를 위한 패딩을 설정합니다. 객체 형태로 각 방향별 패딩을 설정할 수 있습니다.</td>
    </tr>
    <tr>
      <td>forceMount</td>
      <td>boolean</td>
      <td>강제로 마운팅하는 데 사용됩니다.</td>
    </tr>
    <tr>
      <td>hideWhenDetached</td>
      <td>boolean</td>
      <td>트리거가 완전히 가려졌을 때 콘텐츠를 숨길지 여부를 결정합니다.</td>
    </tr>
    <tr>
      <td>side</td>
      <td>'top' | 'right' | 'bottom' | 'left'</td>
      <td>트리거 요소의 어느 쪽에 나타날지 설정합니다.</td>
    </tr>
    <tr>
      <td>sideOffset</td>
      <td>number</td>
      <td>트리거로부터의 거리(픽셀)입니다.</td>
    </tr>
    <tr>
      <td>sticky</td>
      <td>'partial' | 'always'</td>
      <td>위치를 고정합니다.</td>
    </tr>
    <tr>
      <td>trapFocus</td>
      <td>boolean</td>
      <td>내부에 포커스를 가둘지 여부를 결정합니다.</td>
    </tr>
  </tbody>
</table>

### Close

`Popover`를 닫는 버튼입니다.

기본 색상은 `red` 입니다.

```javascript
<PopoverRoot>
  <PopoverTrigger>
    <Button>Open popover</Button>
  </PopoverTrigger>
  <PopoverContent>
    ...
    <PopoverClose>
      <Button>Comment</Button>
    </PopoverClose>
  </PopoverContent>
</PopoverRoot>
```

<Canvas of={PopoverStories.WithClose} />