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

# ContextMenu

<Meta of={ContextMenuStories} />

<br />

## Overview

우클릭 또는 특정 인터랙션 시 나타나는 컨텍스트 메뉴 컴포넌트 입니다.

<Canvas of={ContextMenuStories.Default} />

<Controls />

<br />

## Usage

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

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

<template>
  <ContextMenuRoot>
    <ContextMenuTrigger />
    <ContextMenuContent>
      <ContextMenuLabel />
      <ContextMenuItem />

      <ContextMenuSeparator />

      <ContextMenuGroup>
        <ContextMenuItem />
        <ContextMenuItem />
      </ContextMenuGroup>

      <ContextMenuSubTrigger>
        <ContextMenuSubContent>
          <ContextMenuItem />
        </ContextMenuSubContent>
      </ContextMenuSubTrigger>
    </ContextMenuContent>
  </ContextMenuRoot>
</template>
```

메뉴 아이템에 `Checkbox`, `RadioItem`을 적용할 수 있습니다.

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

<template>
  <ContextMenuRoot>
    <ContextMenuTrigger />
    <ContextMenuContent>
      <ContextMenuCheckboxItem />
      <ContextMenuCheckboxItem />

      <ContextMenuRadioGroup>
        <ContextMenuRadioItem />
        <ContextMenuRadioItem />
      </ContextMenuRadioGroup>
    </ContextMenuContent>
  </ContextMenuRoot>
</template>
```

## API Reference

### Root

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

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>modal</td>
      <td>boolean</td>
      <td>
        드롭다운 메뉴의 모달 특성을 제어하는 속성입니다. true로 설정하면 드롭다운 메뉴 외부
        요소들과의 상호작용이 비활성화되며, 스크린 리더는 메뉴 내용만 읽을 수 있게 됩니다.
      </td>
      <td>true</td>
    </tr>
    <tr>
      <td>open</td>
      <td>boolean</td>
      <td>AlertDialog의의 제어된 열린 상태입니다. `v-model:open`으로 바인딩할 수 있습니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>

### Trigger

`ContextMenu`를 여는 영역으로 마우스 오른쪽 버튼 클릭 시 `ContextMenu`가 나타납니다.

<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>span</td>
    </tr>
    <tr>
      <td>asChild</td>
      <td>boolean</td>
      <td>자식으로 전달된 기본 렌더링 요소를 변경하여 해당 props와 동작을 병합합니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>disabled</td>
      <td>boolean</td>
      <td>true이면 마우스 오른쪽 버튼을 클릭해도 컨텍스트 메뉴가 열리지 않습니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>

### Content

`ContextMenu` 내부에 구성되는 영역을 포함합니다.

<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>avoidCollisions</td>
      <td>boolean</td>
      <td>true일 경우, 경계와의 충돌을 방지하기 위해 side와 align 설정을 재정의합니다.</td>
      <td>true</td>
    </tr>
    <tr>
      <td>collisionBoundary</td>
      <td>Element | (Element | null)[] | null</td>
      <td>충돌 감지에 사용되는 경계 요소입니다. 기본적으로 viewport이며, 추가 요소들을 포함시킬 수 있습니다.</td>
      <td>[]</td>
    </tr>
    <tr>
      <td>collisionPadding</td>
      <td>number | Partial\<Record\<'top' | 'right' | 'bottom' | 'left', number>></td>
      <td>충돌 감지가 발생해야 하는 경계 가장자리로부터의 픽셀 거리입니다.</td>
      <td>0</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></td>
    </tr>
    <tr>
      <td>prioritizePosition</td>
      <td>boolean</td>
      <td>콘텐츠를 viewport 내에 강제로 위치시킵니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>sticky</td>
      <td> 'partial' | 'always'</td>
      <td>align 축의 고정 동작을 정의합니다.
'partial': 트리거가 경계 내에 부분적으로라도 있는 한 콘텐츠를 경계 내에 유지
'always': 트리거의 위치와 관계없이 항상 콘텐츠를 경계 내에 유지</td>
      <td>partial</td>
    </tr>
  </tbody>
</table>

### Label

`Label` 렌더링 시 사용되며 선택이 불가능한 요소입니다.

<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>
  </tbody>
</table>

### Separator

구분선을 보여줄때 사용합니다.

<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>
  </tbody>
</table>

### Group

`Item`을 그룹화 할 때 사용합니다.

<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>
  </tbody>
</table>

### Item

기본 `Item` 요소입니다.

`shortcut` 속성을 통해 우측에 텍스트를 보여줄 수 있습니다.

```vue
<ContextMenuItem shortcut="⌘ T" />
```

`disabled` 속성을 통해 선택 비활성화를 지정합니다.

```vue
<ContextMenuItem disabled />
```

<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>disabled</td>
      <td>boolean</td>
      <td>true인 경우 사용자가 항목과 상호 작용할 수 없습니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>textValue</td>
      <td>string</td>
      <td>내용이 복잡하거나 텍스트가 아닌 내용이 있는 경우 이 옵션을 사용합니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>shortcut</td>
      <td>string</td>
      <td>아이템 우측의 단축키를 보여줍니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>shortcutClass</td>
      <td>string</td>
      <td>단축키에 대한 커스텀 클래스입니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>

### CheckboxItem

체크박스처럼 사용할 수 있는 `Item` 요소입니다.

<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>disabled</td>
      <td>boolean</td>
      <td>true인 경우 사용자가 항목과 상호 작용할 수 없습니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>textValue</td>
      <td>string</td>
      <td>내용이 복잡하거나 텍스트가 아닌 내용이 있는 경우 이 옵션을 사용합니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>checked</td>
      <td>false | true | 'indeterminate';</td>
      <td>항목의 제어된 체크 상태. v-model:checked로 사용할 수 있습니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>

### RadioGroup

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

`RadioItem`의 기본 선택 값은 `modelValue` props로 지정할 수 있습니다.

<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>disabled</td>
      <td>boolean</td>
      <td>true인 경우 사용자가 항목과 상호 작용할 수 없습니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>modelValue</td>
      <td>string</td>
      <td>그룹에서 선택한 항목의 값입니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>

### RadioItem

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

<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>disabled</td>
      <td>boolean</td>
      <td>true인 경우 사용자가 항목과 상호 작용할 수 없습니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>textValue</td>
      <td>string</td>
      <td>내용이 복잡하거나 텍스트가 아닌 내용이 있는 경우 이 옵션을 사용합니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>value*</td>
      <td>string</td>
      <td>라디오 아이템의 고유한 값입니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>

### SubTrigger

`ContextMenuItem`를 서브메뉴 트리거로 활용할 때 사용합니다.

<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>disabled</td>
      <td>boolean</td>
      <td>true인 경우 사용자가 항목과 상호 작용할 수 없습니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>textValue</td>
      <td>string</td>
      <td>내용이 복잡하거나 텍스트가 아닌 내용이 있는 경우 이 옵션을 사용합니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>

### SubContent

서브 메뉴가 나올때 열리는 아이템들을 포함합니다.

<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>avoidCollisions</td>
      <td>boolean</td>
      <td>true일 경우, 경계와의 충돌을 방지하기 위해 side와 align 설정을 재정의합니다.</td>
      <td>true</td>
    </tr>
    <tr>
      <td>collisionBoundary</td>
      <td>Element | (Element | null)[] | null</td>
      <td>충돌 감지에 사용되는 경계 요소입니다. 기본적으로 viewport이며, 추가 요소들을 포함시킬 수 있습니다.</td>
      <td>[]</td>
    </tr>
    <tr>
      <td>collisionPadding</td>
      <td>number | Partial\<Record\<'top' | 'right' | 'bottom' | 'left', number>></td>
      <td>충돌 감지가 발생해야 하는 경계 가장자리로부터의 픽셀 거리입니다.</td>
      <td>0</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></td>
    </tr>
    <tr>
      <td>prioritizePosition</td>
      <td>boolean</td>
      <td>콘텐츠를 viewport 내에 강제로 위치시킵니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>sticky</td>
      <td> 'partial' | 'always'</td>
      <td>align 축의 고정 동작을 정의합니다.
'partial': 트리거가 경계 내에 부분적으로라도 있는 한 콘텐츠를 경계 내에 유지
'always': 트리거의 위치와 관계없이 항상 콘텐츠를 경계 내에 유지</td>
      <td>partial</td>
    </tr>
  </tbody>
</table>

<br />

## Variant

### Radius

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

기본 값은 `medium` 입니다.

<Canvas of={ContextMenuStories.Radius} />

### Appearance

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

기본 값은 `solid` 입니다.

<Canvas of={ContextMenuStories.Appearance} />

### Size

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

기본 값은 `medium` 입니다.

<Canvas of={ContextMenuStories.Size} />