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

# AlertDialog

<Meta of={AlertDialogStories} />

<br />

## Overview

사용자에게 결정을 내리거나 추가 정보를 입력하라는 프롬프트를 보내는 작은 창 입니다.

<Canvas of={AlertDialogStories.Default} />

<Controls />

<br />

## Usage

<strong>AlertDialog</strong> 아래 조합으로 이루어져 있습니다.

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

<template>
  <AlertDialogRoot v-bind="args">
    <AlertDialogTrigger>Open Dialog</AlertDialogTrigger>
    <AlertDialogContent>
      <AlertDialogTitle>AlertDialog 제목</AlertDialogTitle>
      <AlertDialogDescription>AlertDialog 내용이 들어갈 공간입니다.</AlertDialogDescription>
      <div className="flex justify-end">
        <AlertDialogCancel>취소</AlertDialogCancel>
        <AlertDialogAction>확인</AlertDialogAction>
      </div>
    </AlertDialogContent>
  </AlertDialogRoot>
</template>
```

<br />

## API Reference

### Root

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

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>defaultOpen</td>
      <td>boolean</td>
      <td>
        처음 렌더링될 때 AlertDialog의 열린 상태입니다. 열린 상태를 제어할 필요가 없을 때
        사용합니다.
      </td>
      <td></td>
    </tr>
    <tr>
      <td>open</td>
      <td>boolean</td>
      <td>AlertDialog의의 제어된 열린 상태입니다. `v-model:open`으로 바인딩할 수 있습니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>

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

```vue
<script>
function handleDialogOpen(isOpen: boolean) {
  console.log('isOpen', isOpen);
}
</script>

<template>
  <AlertDialogRoot @update:open="handleDialogOpen">
    <AlertDialogTrigger>Open Dialog</AlertDialogTrigger>
    <AlertDialogContent>
      <AlertDialogTitle>AlertDialog 제목</AlertDialogTitle>
      <AlertDialogDescription>AlertDialog 내용이 들어갈 공간입니다.</AlertDialogDescription>
      <div className="flex justify-end">
        <AlertDialogCancel>취소</AlertDialogCancel>
        <AlertDialogAction>확인</AlertDialogAction>
      </div>
    </AlertDialogContent>
  </AlertDialogRoot>
</template>
```

### Trigger

AlertDialog를 호출하는 버튼입니다.

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>as</td>
      <td>AsTag | Component</td>
      <td>
        이 구성 요소가 렌더링되어야 하는 요소 또는 구성 요소입니다. asChild로 덮어쓸 수 있습니다.
      </td>
      <td>button</td>
    </tr>
    <tr>
      <td>asChild</td>
      <td>boolean</td>
      <td>자식으로 전달된 기본 렌더링 요소를 변경하여 해당 props와 동작을 병합합니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>

### Content

AlertDialog 내부에 렌더링되는 제목, 내용, 버튼 등을 포함합니다.

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>as</td>
      <td>AsTag | Component</td>
      <td>
        이 구성 요소가 렌더링되어야 하는 요소 또는 구성 요소입니다. asChild로 덮어쓸 수 있습니다.
      </td>
      <td>div</td>
    </tr>
    <tr>
      <td>asChild</td>
      <td>boolean</td>
      <td>자식으로 전달된 기본 렌더링 요소를 변경하여 해당 props와 동작을 병합합니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>disableOutsidePointerEvents</td>
      <td>boolean</td>
      <td>
        `true`인 경우 `DismissableLayer` 외부 요소에서 마우스 오버/포커스/클릭 상호 작용이
        비활성화됩니다. 사용자는 외부 요소와 상호 작용하려면 두 번 클릭해야 합니다. 한 번은
        `DismissableLayer`를 닫고 다시 한 번 요소를 트리거해야 합니다.
      </td>
      <td></td>
    </tr>
    <tr>
      <td>trapFocus</td>
      <td>boolean</td>
      <td>
        `true`인 경우 포커스는 키보드, 포인터 또는 프로그래밍 포커스를 통해 콘텐츠를 벗어날 수
        없습니다.
      </td>
      <td></td>
    </tr>
  </tbody>
</table>

### Title

AlertDialog의 제목이 굵은 폰트로 표시됩니다.

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>as</td>
      <td>AsTag | Component</td>
      <td>
        이 구성 요소가 렌더링되어야 하는 요소 또는 구성 요소입니다. asChild로 덮어쓸 수 있습니다.
      </td>
      <td>h2</td>
    </tr>
    <tr>
      <td>asChild</td>
      <td>boolean</td>
      <td>자식으로 전달된 기본 렌더링 요소를 변경하여 해당 props와 동작을 병합합니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>

### Description

AlertDialog의 내용이 표시됩니다.

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>as</td>
      <td>AsTag | Component</td>
      <td>
        이 구성 요소가 렌더링되어야 하는 요소 또는 구성 요소입니다. asChild로 덮어쓸 수 있습니다.
      </td>
      <td>p</td>
    </tr>
    <tr>
      <td>asChild</td>
      <td>boolean</td>
      <td>자식으로 전달된 기본 렌더링 요소를 변경하여 해당 props와 동작을 병합합니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>

### Cancel

AlertDialog를 닫는 버튼입니다.

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>as</td>
      <td>AsTag | Component</td>
      <td>
        이 구성 요소가 렌더링되어야 하는 요소 또는 구성 요소입니다. asChild로 덮어쓸 수 있습니다.
      </td>
      <td>button</td>
    </tr>
    <tr>
      <td>asChild</td>
      <td>boolean</td>
      <td>자식으로 전달된 기본 렌더링 요소를 변경하여 해당 props와 동작을 병합합니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>

### Action

AlertDialog를 닫는 버튼입니다.

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>as</td>
      <td>AsTag | Component</td>
      <td>
        이 구성 요소가 렌더링되어야 하는 요소 또는 구성 요소입니다. asChild로 덮어쓸 수 있습니다.
      </td>
      <td>button</td>
    </tr>
    <tr>
      <td>asChild</td>
      <td>boolean</td>
      <td>자식으로 전달된 기본 렌더링 요소를 변경하여 해당 props와 동작을 병합합니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>

`click`을 통해 닫기 버튼 클릭 시 이벤트를 처리합니다.

```vue
<script>
function handleAction() {
  // action 이벤트 처리
}
</script>

<template>
  <AlertDialogRoot>
    <AlertDialogTrigger>Open Dialog</AlertDialogTrigger>
    <AlertDialogContent>
      <AlertDialogTitle>AlertDialog 제목</AlertDialogTitle>
      <AlertDialogDescription>AlertDialog 내용이 들어갈 공간입니다.</AlertDialogDescription>
      <div className="flex justify-end">
        <AlertDialogCancel>취소</AlertDialogCancel>
        <AlertDialogAction @click="handleAction">확인</AlertDialogAction>
      </div>
    </AlertDialogContent>
  </AlertDialogRoot>
</template>
```