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

# Dialog

<Meta of={DialogStories} />

<br />

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

<Canvas of={DialogStories.Default} />

<Controls />

<br />

## Usage

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

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

<template>
  <DialogRoot>
    <DialogTrigger />
    <DialogContent>
      <DialogTitle />
      <DialogDescription />
      <DialogSlot />
      <DialogCancel />
      <DialogAction />
    </DialogContent>
  </DialogRoot>
</template>;
```

<br />

## API Reference

### Root

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

`defaultOpen`는 처음 렌더링 시 `dialog`를 열린 상태로 설정합니다. 이는 열린 상태를 제어할 필요가 없을 경우 사용합니다.

```javascript
<DialogRoot defaultOpen={true}>...</DialogRoot>
```

`modal`은 `dialog`가 모달인지 여부를 결정합니다. 기본값은 `true`로, `false`인 경우 `dialog`는 비모달로 작동하여 사용자가 대화 상자를 열어둔 상태에서도 다른 인터페이스의 요소와 상호작용할 수 있습니다.

```javascript
<DialogRoot modal={false}>...</DialogRoot>
```

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

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

```javascript
<template>
  <DialogRoot :open="isOpen" @update:open="(newOpenState) => (isOpen = newOpenState)">
    ...
  </DialogRoot>
</template>

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

const isOpen = ref(false);
</script>
```

### Trigger

dialog를 열기 위한 트리거 요소입니다. 이 요소는 사용자가 클릭하거나 상호작용할 때 대화 상자를 표시하는 역할을 합니다.

### Content

dialog의 주요 콘텐츠를 포함하는 요소입니다.

<table>
  <thead>
    <tr>
      <th>Prop</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>disableOutsidePointerEvents</td>
      <td>boolean</td>
      <td>
        true로 설정되면, DismissableLayer 외부의 요소에 대한 호버/포커스/클릭 상호작용이
        비활성화됩니다. 사용자는 외부 요소와 상호작용하기 위해 두 번 클릭해야 합니다: 한 번은
        DismissableLayer를 닫기 위해, 그리고 다시 한 번은 요소를 트리거하기 위해.
      </td>
    </tr>
    <tr>
      <td>forceMount</td>
      <td>boolean</td>
      <td>
        더 많은 제어가 필요할 때 마운트를 강제하는 데 사용됩니다. Vue 애니메이션 라이브러리로
        애니메이션을 제어할 때 유용합니다.
      </td>
    </tr>
    <tr>
      <td>trapFocus</td>
      <td>boolean</td>
      <td>
        true로 설정되면, 키보드, 포인터 또는 프로그래밍적 포커스를 통해 Content에서 포커스가 벗어날
        수 없습니다.
      </td>
    </tr>
  </tbody>
</table>

### Title

Dialog의 제목이 표시됩니다.

### Description

Dialog의 내용이 표시됩니다.

만약 이 부분을 완전히 제거하려면 `DialogDescription`을 제거한 뒤, `DialogContent`에 `:aria-describedby="undefined"`를 추가해주세요.

### Slot

Dialog 내에서 사용자 정의 콘텐츠를 삽입할 수 있는 영역입니다.

### Cancel

Dialog를 닫는 버튼입니다.

<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

Dialog를 닫는 버튼입니다. 기본 색상은 `red` 입니다.

<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>

```javascript
<script>
function handleSave() {
  // 실행할 함수 작성
}
</script>

<template>
  <DialogRoot>
    <DialogTrigger>
      <Button>Edit profile</Button>
    </DialogTrigger>
    <DialogContent>
      <DialogTitle>Edit profile</DialogTitle>
      <DialogDescription>Make changes to your profile.</DialogDescription>
      <DialogSlot />
        <Label>Name</Label>
        <input placeholder="Enter your full name" />
        <Label>Email</Label>
        <input placeholder="Enter your email" />
      </DialogSlot>
      <div class="flex justify-end">
        <DialogCancel>Cancel</DialogCancel>
        <DialogAction @click="handleSave">Save</DialogAction>
      </div>
    </DialogContent>
  </DialogRoot>
</template>
```