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

# DropdownMenu

<Meta of={DropdownMenuStories} />

<br />

## Overview

버튼을 클릭하여 세부항목을 확인하고 하나의 항목을 선택하는 기능을 가진 컴포넌트 입니다.

<Canvas of={DropdownMenuStories.Default} />

<Controls />

<br />

## Usage

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

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

<template>
  <DropdownMenuRoot>
    <DropdownMenuTrigger />
    <DropdownMenuContent>
      <DropdownMenuLabel />
      <DropdownMenuItem />

      <DropdownMenuCheckboxItem />

      <DropdownMenuRadioGroup>
        <DropdownMenuRadioItem />
      </DropdownMenuRadioGroup>

      <DropdownMenuSub>
        <DropdownMenuSubTrigger />
        <DropdownMenuSubContent />
      </DropdownMenuSub>

      <DropdownMenuSeparator />
    </DropdownMenuContent>
  </DropdownMenuRoot>
</template>;
```

<br />

## API Reference

### Root

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

`defaultOpen`는 `dropdownMenu`의 초기 열림 상태를 설정합니다.

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

`modal`은 `dialog`가 모달인지 여부를 결정합니다. `true`로 설정하면 드롭다운 메뉴가 열렸을 때 다른 요소와의 상호작용이 차단됩니다.

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

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

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

```javascript
<DropdownMenuRoot :open="isOpen" @update:open="handleUpdateOpen">
  ...
</DropdownMenuRoot>
```

### Trigger

`DropdownMenu`을 여는 버튼입니다.

### Content

`DropdownMenu` 내부에 렌더링되는 구성요소를 포함합니다.

<table>
  <thead>
    <tr>
      <th>Prop</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>align</td>
      <td>'start' | 'center' | 'end'</td>
      <td>트리거에 대한 기본 정렬입니다. 충돌이 발생하면 변경될 수 있습니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>alignOffset</td>
      <td>number</td>
      <td>시작 또는 끝 정렬 옵션으로부터의 오프셋(픽셀)입니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>arrowPadding</td>
      <td>number</td>
      <td>
        화살표와 콘텐츠 가장자리 사이의 패딩입니다. 콘텐츠에 border-radius가 있으면 모서리가 넘치는
        것을 방지할 수 있습니다.
      </td>
      <td></td>
    </tr>
    <tr>
      <td>asChild</td>
      <td>boolean</td>
      <td>자식으로 전달된 기본 렌더링 요소를 변경하여 해당 props와 동작을 병합합니다.</td>
      <td>false</td>
    </tr>
    <tr>
      <td>avoidCollisions</td>
      <td>boolean</td>
      <td>true인 경우, 경계 가장자리와의 충돌을 방지하기 위해 side 및 align 설정을 무시합니다.</td>
      <td>false</td>
    </tr>
    <tr>
      <td>forceMount</td>
      <td>boolean</td>
      <td>더 많은 제어가 필요할 때 마운팅을 강제합니다.</td>
      <td>false</td>
    </tr>
    <tr>
      <td>hideWhenDetached</td>
      <td>boolean</td>
      <td>트리거가 완전히 가려질 때 콘텐츠를 숨길지 여부를 결정합니다.</td>
      <td>false</td>
    </tr>
    <tr>
      <td>loop</td>
      <td>boolean</td>
      <td>
        true인 경우, 키보드 탐색이 마지막 항목에서 첫 번째 항목으로, 그리고 그 반대로 순환합니다.
      </td>
      <td>false</td>
    </tr>
    <tr>
      <td>prioritizePosition</td>
      <td>boolean</td>
      <td>콘텐츠를 뷰포트 내에 위치하도록 강제함합니다.</td>
      <td>false</td>
    </tr>
    <tr>
      <td>side</td>
      <td>'top' | 'right' | 'bottom' | 'left'</td>
      <td>
        열릴 때 렌더링할 트리거의 기본 측면입니다. 충돌이 발생하고 avoidCollisions이 활성화되면
        되돌려집니다.
      </td>
      <td></td>
    </tr>
    <tr>
      <td>sideOffset</td>
      <td>number</td>
      <td>트리거로부터의 거리(픽셀)입니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>sticky</td>
      <td>'partial' | 'always'</td>
      <td>
        partial은 트리거가 경계 내에 부분적으로 있는 한 콘텐츠를 경계 내에 유지하고, "always"는
        트리거가 경계 내에 있는지 여부에 관계없이 콘텐츠를 경계 내에 유지합니다.
      </td>
      <td></td>
    </tr>
    <tr>
      <td>updatePositionStrategy</td>
      <td>'always' | 'optimized'</td>
      <td>플로팅 요소의 위치를 매 애니메이션 프레임마다 업데이트하는 전략입니다.</td>
      <td>'optimized'</td>
    </tr>
  </tbody>
</table>

### Item

`DropdownMenu`에 들어갈 `Item` 요소입니다.

`shortcut` 속성으로 우측에 바로가기 키를 표시할 수 있습니다.

```javascript
<DropdownMenuItem shortcut="⌘ E" />
```

`disabled` 속성을 통해 항목을 비활성화할 수 있습니다.

```javascript
<DropdownMenuItem disabled />
```

`select` 이벤트 핸들러는 사용자가 항목을 선택할 때 호출되는 이벤트 핸들러입니다.

이 핸들러에서 `event.preventDefault`를 호출하면 해당 항목을 선택할 때 `DropdownMenu`이 닫히지 않습니다.

```javascript
<DropdownMenuItem @select="handleSelect('Item 1')">Item 1</DropdownMenuItem>
```

### Label

라벨을 렌더링하는 데 사용됩니다.

### CheckboxItem

`Checkbox`처럼 사용할 수 있는 `Item` 요소입니다.

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>checked</td>
      <td>boolean | 'indeterminate'</td>
      <td>
        체크 상태입니다. <code>v-model:checked</code>로 사용할 수 있습니다.
      </td>
    </tr>
    <tr>
      <td>disabled</td>
      <td>boolean</td>
      <td>true로 설정되면, 사용자가 해당 항목과 상호작용할 수 없게 합니다.</td>
    </tr>
    <tr>
      <td>select</td>
      <td>function</td>
      <td>
        사용자가 항목을 선택할 때 호출되는 이벤트 핸들러입니다. 이 핸들러에서{' '}
        <code>event.preventDefault</code>를 호출하면 해당 항목을 선택할 때 메뉴가 닫히는 것을 방지할
        수 있습니다.
      </td>
    </tr>
    <tr>
      <td>update:checked</td>
      <td>function</td>
      <td>체크 상태가 변경될 때 호출되는 이벤트 핸들러입니다.</td>
    </tr>
  </tbody>
</table>

```javascript
<DropdownMenuContent>
  <DropdownMenuCheckboxItem
    :checked="isChecked"
    @update:checked="handleUpdateChecked"
  >
    체크박스 아이템
  </DropdownMenuCheckboxItem>
</DropdownMenuContent>
```

### RadioGroup

`RadioItem`를 그룹화하는 데 사용됩니다.

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>modelValue</td>
      <td>string</td>
      <td>그룹 내에서 선택된 항목의 값입니다.</td>
    </tr>
    <tr>
      <td>update:modelValue</td>
      <td>function</td>
      <td>값이 변경될 때 호출되는 이벤트 핸들러입니다.</td>
    </tr>
  </tbody>
</table>

### RadioGroupItem

라디오처럼 사용할 수 있는 `Item` 요소입니다.

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>value*</td>
      <td>string</td>
      <td>항목의 고유한 값입니다.</td>
    </tr>
    <tr>
      <td>disabled</td>
      <td>boolean</td>
      <td>true로 설정되면, 사용자가 해당 항목과 상호작용할 수 없게 합니다.</td>
    </tr>
    <tr>
      <td>select</td>
      <td>function</td>
      <td>
        사용자가 항목을 선택할 때 호출되는 이벤트 핸들러입니다. 이 핸들러에서{' '}
        <code>event.preventDefault</code>를 호출하면 해당 항목을 선택할 때 메뉴가 닫히는 것을 방지할
        수 있습니다.
      </td>
    </tr>
  </tbody>
</table>

```javascript
<DropdownMenuContent>
  <DropdownMenuRadioGroup v-model="selectedValue">
    <DropdownMenuRadioItem value="option1">Option 1</DropdownMenuRadioItem>
    <DropdownMenuRadioItem value="option2">Option 2</DropdownMenuRadioItem>
  </DropdownMenuRadioGroup>
</DropdownMenuContent>

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

const selectedValue = ref('option1');
</script>
```

### Separator

`DropdownMenu`의 항목을 구분하는데 사용됩니다.

### Sub

하위 메뉴의 모든 부분을 포함합니다.

<table>
  <thead>
    <tr>
      <th>Prop</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>defaultOpen</td>
      <td>boolean</td>
      <td>
        드롭다운 메뉴가 처음 렌더링될 때의 열림 상태입니다. 열림 상태를 제어할 필요가 없을 때
        사용합니다.
      </td>
    </tr>
    <tr>
      <td>open</td>
      <td>boolean</td>
      <td>
        제어된 열린 상태입니다. <code>v-model:open</code>으로 사용할 수 있습니다.
      </td>
    </tr>
    <tr>
      <td>update:open</td>
      <td>function</td>
      <td>서브메뉴의 열림 상태가 변경될 때 호출되는 이벤트 핸들러입니다.</td>
    </tr>
  </tbody>
</table>

### SubTrigger

서브 메뉴를 여는 항목입니다. `DropdownMenuSub` 내부에서 렌더링되어야 합니다.

### SubContent

서브 메뉴가 나올때 열리는 아이템들을 포함합니다. `DropdownMenuSub` 내부에서 렌더링되어야 합니다.

<br />

## Variant

### Radius Props

`radius` props는 컴포넌트의 둥글기를 변경합니다.

기본 값은 `medium` 입니다.

<Canvas of={DropdownMenuStories.Radius} />

### Size Props

`size` props는 컴포넌트의 크기를 변경합니다.

기본 값은 `medium` 입니다.

<Canvas of={DropdownMenuStories.Size} />

### Appearance Props

`appearance` props는 컴포넌트의 스타일을 변경합니다.

기본 값은 `solid` 입니다.

<Canvas of={DropdownMenuStories.Appearance} />