import { Canvas, Meta, Controls } from '@storybook/addon-docs';

import * as RadioGroupStories from './RadioGroup.stories';

# RadioGroup

<Meta of={RadioGroupStories} />

<br />

## Overview

선택 가능한 Radio가 그룹으로 구성되어 있습니다.

<Canvas of={RadioGroupStories.Default} />

<Controls />

<br />

## Usage

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

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

<template>
  <RadioGroupRoot>
    <RadioGroupItem />
    <RadioGroupItem />
  </RadioGroupRoot>
</template>;
```

<br />

## API Reference

### Root

`RadioGroupItem`을 그룹화하는 요소입니다.

<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>disabled</td>
      <td>boolean</td>
      <td>true인 경우, 사용자가 라디오 항목과 상호작용하지 못하도록 합니다.</td>
      <td>false</td>
    </tr>
    <tr>
      <td>loop</td>
      <td>boolean</td>
      <td>true인 경우, 키보드 탐색이 마지막 항목에서 첫 번째 항목으로, 그 반대로도 순환합니다.</td>
      <td>true</td>
    </tr>
    <tr>
      <td>modelValue</td>
      <td>string</td>
      <td>체크할 radioGroup의 제어된 값입니다. v-model로 바인딩할 수 있습니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>name</td>
      <td>string</td>
      <td>그룹의 이름입니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>orientation</td>
      <td>'vertical' | 'horizontal'</td>
      <td>컴포넌트의 방향입니다.</td>
      <td>'vertical'</td>
    </tr>
    <tr>
      <td>required</td>
      <td>boolean</td>
      <td>true인 경우, form을 제출하기 전에 사용자가 라디오 항목을 체크해야 함을 나타냅니다.</td>
      <td>false</td>
    </tr>
  </tbody>
</table>

<br />

`default-value` 속성은 처음 렌더링 시 체크할 항목을 지정할 수 있습니다.

- **타입**: `string`

```javascript
<RadioGroupRoot default-value="default">
  <RadioGroupItem value="default">Default</RadioGroupItem>
  <RadioGroupItem value="comfortable">Comfortable</RadioGroupItem>
</RadioGroupRoot>
```

`update:modelValue` 속성은 라디오의 상태가 변경될 때 호출되는 콜백 함수입니다. 이 함수는 선택된 라디오 값을 인자로 받습니다.

- **타입**: `(value: string) => void`

아래 예제 코드는 라디오 버튼이 선택될 때마다 콘솔에 선택된 값을 출력합니다.

```javascript
<RadioGroupRoot @update:modelValue="(newValue)=>{console.log(newValue);}">
  <RadioGroupItem value="default">Default</RadioGroupItem>
  <RadioGroupItem value="comfortable">Comfortable</RadioGroupItem>
</RadioGroupRoot>
```

### 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>'button'</td>
    </tr>
    <tr>
      <td>asChild</td>
      <td>boolean</td>
      <td>
        기본 렌더링 요소를 자식으로 전달된 요소로 변경하여, 그들의 속성과 동작을 병합합니다. 자세한
        내용은 우리의 구성 가이드를 참조하세요.
      </td>
      <td>false</td>
    </tr>
    <tr>
      <td>disabled</td>
      <td>boolean</td>
      <td>true일 때, 사용자가 라디오 항목과 상호작용하는 것을 방지합니다.</td>
      <td>false</td>
    </tr>
    <tr>
      <td>id</td>
      <td>string</td>
      <td>라디오 항목의 고유 식별자입니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>name</td>
      <td>string</td>
      <td></td>
      <td>라디오 항목의 이름입니다.</td>
    </tr>
    <tr>
      <td>required</td>
      <td>boolean</td>
      <td>true일 때, 사용자가 소유한 폼을 제출하기 전에 라디오 항목을 체크해야 함을 나타냅니다.</td>
      <td>false</td>
    </tr>
    <tr>
      <td>value</td>
      <td>string</td>
      <td>이름과 함께 제출될 때 데이터로 제공되는 값입니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>

<br />

`id` 속성은 각 라디오 버튼을 고유하게 식별하기 위해 사용됩니다. 라벨과 입력 요소를 연결하는 데 사용됩니다.

- **타입**: `string`

```javascript
<RadioGroupItem id="r1" value="default">
  Default
</RadioGroupItem>
```

`value` 속성은 라디오 버튼의 값을 나타냅니다. 사용자가 라디오 버튼을 선택할 때 이 값이 `RadioGroupRoot` 컴포넌트의 `modelValue`로 설정됩니다.

- **타입**: `string`

```javascript
<RadioGroupRoot>
  <RadioGroupItem value="default">Default</RadioGroupItem>
</RadioGroupRoot>
```

<br />

## Variant

### Appearance Props

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

기본 값은 `surface` 입니다.

<Canvas of={RadioGroupStories.Appearance} />

### Size Props

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

기본 값은 `medium` 입니다.

<Canvas of={RadioGroupStories.Size} />