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

# Menubar

<Meta of={MenubarStories} />

<br />

## Overview

리스트 형태의 선택할 수 있는 항목들이 나열된 인터페이스 요소 컴포넌트입니다.

<Canvas of={MenubarStories.Default} />

<Controls />

<br />

## Usage

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

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

<template>
  <MenubarRoot>
    <MenubarMenu>
      <MenubarTrigger />
      <MenubarContent>
        <MenubarItem />
        <MenubarItem />

        <MenubarCheckboxItem />

        <MenubarRadioGroup>
          <MenubarRadioItem />
          <MenubarRadioItem />
        </MenubarRadioGroup>

        <MenubarSub>
          <MenubarSubTrigger />
          <MenubarSubContent>
            <MenubarItem />
          </MenubarSubContent>
        </MenubarSub>

        <MenubarSeparator />
      </MenubarContent>
    </MenubarMenu>
  </MenubarRoot>
</template>
```

## API Reference

### Root

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

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>defaultValue</td>
      <td>string</td>
      <td>
        초기 렌더링 시 열려있어야 하는 메뉴의 값입니다. 값의 상태를 제어할 필요가 없을 때
        사용합니다.
      </td>
      <td></td>
    </tr>
    <tr>
      <td>loop</td>
      <td>boolean</td>
      <td>
        `true`로 설정하면 키보드 탐색 시 마지막 항목에서 첫 번째 항목으로, 또는 그 반대로
        순환합니다.
      </td>
      <td></td>
    </tr>
    <tr>
      <td>modelValue</td>
      <td>string</td>
      <td>열 메뉴의 제어된 값입니다. `v-model`로 사용할 수 있습니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>

### Menu

최상위 메뉴 항목으로 트리거와 내용의 조합으로 이루어져 있습니다.

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>value</td>
      <td>string</td>
      <td>
        탐색 메뉴가 제어될 때 항목을 활성 값과 연결하는 고유한 값입니다. 이 prop은 제어되지 않을 때
        자동으로 관리됩니다.
      </td>
      <td></td>
    </tr>
  </tbody>
</table>

### Trigger

`Menubar`를 열고 닫는 트리거 버튼입니다.

<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>
    <tr>
      <td>disabled</td>
      <td>boolean</td>
      <td>true이면 마우스 오른쪽 버튼을 클릭해도 컨텍스트 메뉴가 열리지 않습니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>

### Content

`Menubar`가 열릴때 나오는 컴포넌트입니다.

<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>align</td>
      <td>'start' | 'center' | 'end'</td>
      <td>트리거에 대한 선호되는 정렬. 충돌이 발생하면 변경될 수 있습니다.</td>
      <td>start</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>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>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>align 축의 고정 동작을 정의합니다.
        'partial': 트리거가 경계 내에 부분적으로라도 있는 한 콘텐츠를 경계 내에 유지
        'always': 트리거의 위치와 관계없이 항상 콘텐츠를 경계 내에 유지</td>
        <td>partial</td>
    </tr>
    <tr>
      <td>updatePositionStrategy</td>
      <td>'always' | 'optimized'</td>
      <td>모든 애니메이션 프레임에서 플로팅 요소의 위치를 ​​업데이트하는 전략입니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>

### Item

`Menubar`의 아이템을 담당하는 컴포넌트입니다.

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

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

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

### Sub

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

### SubTrigger

`Menubar.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>
  </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>
    <tr>
      <td>updatePositionStrategy</td>
      <td>'always' | 'optimized'</td>
      <td>모든 애니메이션 프레임에서 플로팅 요소의 위치를 ​​업데이트하는 전략입니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>

<br />

## Variant

### Color

`color` props는 컴포넌트의 색상을 변경합니다.

기본 값은 `red` 입니다.

<Canvas of={MenubarStories.Color} />

### Radius

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

기본 값은 `medium` 입니다.

<Canvas of={MenubarStories.Radius} />

### Appearance

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

상단 메뉴는 `appearance`, 하단 메뉴는 `itemAppearance` props 설정으로 스타일을 다르게 지정할 수 있습니다.

`appearance` props 기본값은 `ghost`, `itemAppearance` props 기본값은 `solid` 입니다.

<Canvas of={MenubarStories.Appearance} />

### Size

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

기본 값은 `medium` 입니다.

<Canvas of={MenubarStories.Size} />