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

# Select

<Meta of={SelectStories} />

<br />

## Overview

제공된 목록에서 하나 이상의 목록을 선택할 수 있는 기능입니다.

<Canvas of={SelectStories.Default} />

<Controls />

<br />

## Usage

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

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

<template>
  <SelectRoot v-bind="args" v-model="selectedValue">
    <SelectTrigger placeholder="select.." />
    <SelectContent>
      <SelectLabel>Fruits</SelectLabel>
      <SelectGroup>
        <SelectItem value="Apple">Apple</SelectItem>
        <SelectItem value="Banana">Banana</SelectItem>
        <SelectItem value="Cherry">Cherry</SelectItem>
        <SelectSeparator />
        <SelectItem value="Blueberry" disabled>Blueberry</SelectItem>
      </SelectGroup>
    </SelectContent>
  </SelectRoot>
</template>
```

<br />

## API Reference

### Root

Select 의 요소를 포함합니다.

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>autocomplete</td>
      <td>string</td>
      <td>기본 HTML 입력 자동 완성 속성입니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>defaultOpen</td>
      <td>boolean</td>
      <td>
        처음 렌더링될 때 선택 항목의 열린 상태입니다. 열린 상태를 제어할 필요가 없을 때 사용합니다.
      </td>
      <td></td>
    </tr>
    <tr>
      <td>defaultValue</td>
      <td>string</td>
      <td>처음 렌더링될 때 선택 항목의 값입니다. 선택 상태를 제어할 필요가 없을 때 사용합니다.</td>
      <td>''</td>
    </tr>
    <tr>
      <td>dir</td>
      <td>'ltr' | 'rtl'</td>
      <td>
        해당되는 경우 콤보박스의 읽기 방향입니다. 생략하면 ConfigProvider에서 전역적으로 상속되거나
        LTR(왼쪽에서 오른쪽) 읽기 모드를 가정합니다.
      </td>
      <td></td>
    </tr>
    <tr>
      <td>disabled</td>
      <td>boolean</td>
      <td>true인 경우 사용자가 Select와 상호작용할 수 없습니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>modelValue</td>
      <td>string</td>
      <td>Select의 제어된 값입니다. v-model로 바인딩할 수 있습니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>name</td>
      <td>string</td>
      <td>선택의 이름입니다. 이름/값 쌍의 일부로 자체 양식과 함께 제출됩니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>open</td>
      <td>boolean</td>
      <td>Select의 제어된 개방 상태입니다. v-model:open으로 바인딩할 수 있습니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>required</td>
      <td>boolean</td>
      <td>true인 경우 소유 양식을 제출하기 전에 사용자가 값을 선택해야 함을 나타냅니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>

### Trigger

SelectContent를 토글하는 버튼입니다.

<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인 경우 사용자가 Select와 상호작용할 수 없습니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>placeholder</td>
      <td>string</td>
      <td>값이 없거나 defaultValue가 설정되지 않은 경우 내부에 렌더링될 콘텐츠입니다.</td>
      <td>''</td>
    </tr>
  </tbody>
</table>

### Content

Select 항목이 열렸을 때 나오는 컨텐츠입니다.

<table>
  <thead>
    <tr>
      <th>Props</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>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인 경우 측면 및 정렬 기본 설정을 재정의하여 경계 가장자리와의 충돌을 방지합니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>bodyLock</td>
      <td>boolean</td>
      <td>document.body가 잠기고 스크롤이 비활성화됩니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>position</td>
      <td>'popper' | 'item-aligned'</td>
      <td>
        사용할 포지셔닝 모드 항목 정렬(기본값) - 활성 항목을 기준으로 콘텐츠의 위치를 ​​지정하여
        기본 MacOS 메뉴와 유사하게 동작합니다. popper - Popover 또는 DropdownMenu와 같은 다른
        프리미티브와 동일한 방식으로 콘텐츠를 배치합니다.
      </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>
  </tbody>
</table>

### 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>
    <tr>
      <td>for</td>
      <td>string</td>
      <td>label의 for 속성입니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>

### Group

여러 항목을 그룹화하는 데 사용됩니다. 자동 라벨링을 통해 접근성을 보장하려면 SelectLabel과 함께 사용하세요.

<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

Select 항목을 포함하는 구성요소입니다.

<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>
        자동 완성 목적으로 사용되는 선택적 텍스트입니다. 기본적으로 자동 완성 동작은 SelectItemText
        부분의 .textContent를 사용합니다. 내용이 복잡하거나 내부에 텍스트가 아닌 내용이 있는 경우 이
        기능을 사용하세요.
      </td>
      <td></td>
    </tr>
    <tr>
      <td>value*</td>
      <td>string</td>
      <td>name과 함께 제출 시 데이터로 주어지는 값입니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>

### Separator

Select에서 항목을 시각적으로 구분하는 데 사용됩니다.

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

## Variant

### Size Props

`size` props는 컴포넌트의 크기입니다.

기본 값은 `medium` 입니다.

<Canvas of={SelectStories.Size} />

### Radius Props

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

기본 값은 `medium` 입니다.

<Canvas of={SelectStories.Radius} />

### Appearance Props

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

기본 값은 `surface` 입니다.

<Canvas of={SelectStories.Appearance} />

### With Icon

Select 요소의 항목에 아이콘을 추가할 수 있습니다.

<Canvas of={SelectStories.WithIcon} />

### Group Items

Select 요소의 항목을 그룹화 할 수 있습니다.

<Canvas of={SelectStories.Group} />