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

# Checkbox

<Meta of={CheckboxStories} />

<br />

## Overview

옵션을 끄거나 켤 수 있는 입력 요소로 선택지 중 다중 선택할 수 있는 기능을 가진 컴포넌트 입니다.

<Canvas of={CheckboxStories.Default} />

<Controls />

<br />

## Usage

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

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

<template>
  <Checkbox>체크박스</Checkbox>
</template>
```

<br />

## API Reference

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>checked</td>
      <td>boolean | 'indeterminate'</td>
      <td>체크박스의 제어된 체크 상태. v-model로 바인딩 가능.</td>
      <td></td>
    </tr>
    <tr>
      <td>defaultChecked</td>
      <td>boolean</td>
      <td>
        체크박스가 처음 렌더링될 때 체크된 상태입니다. 체크된 상태를 제어할 필요가 없을 때
        사용합니다.
      </td>
      <td></td>
    </tr>
    <tr>
      <td>indeterminate</td>
      <td>boolean</td>
      <td>체크박스의 상태를 불확정 상태로 설정하는데 사용됩니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>disabled</td>
      <td>boolean</td>
      <td>true인 경우 사용자가 체크박스와 상호 작용하지 못하게 합니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>id</td>
      <td>string</td>
      <td>요소의 ID</td>
      <td></td>
    </tr>
    <tr>
      <td>name</td>
      <td>string</td>
      <td>체크박스의 이름입니다. 이름/값 쌍의 일부로 form과 함께 제출됩니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>required</td>
      <td>boolean</td>
      <td>true인 경우, form을 제출하기 전에 사용자가 확인란을 선택해야 함을 나타냅니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>value</td>
      <td>string</td>
      <td>이름과 함께 제출했을 때 데이터로 주어지는 값입니다.</td>
      <td>on</td>
    </tr>
    <tr>
      <td>labelClass</td>
      <td>string</td>
      <td>체크박스 라벨의 스타일을 커스텀할 때 사용합니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>

### defaultChecked

`boolean` 타입으로 체크박스의 초기 체크 상태를 설정하는데 사용됩니다.

`defaultChecked` 속성 지정 시 기본적으로 체크된 상태가 됩니다.

이 속성은 컴포넌트가 처음 렌더링될 때만 적용되며, 이후 상태 변경에는 영향을 미치지 않습니다.

```vue
<Checkbox defaultChecked />
```

### indeterminate

`boolean` 타입으로 체크박스의 상태를 불확정 상태로 설정하는데 사용됩니다.

- 불확정 상태: 체크박스가 체크되었거나, 체크되지 않은 상태가 아닌 중간 상태를 나타냄
- 사용 예시: 트리구조에서 부모 체크박스가 자식 체크박스의 상태를 부분적으로 반영할때 사용함

`indeterminate` 속성 지정 시 체크박스의 Indicator가 '-' 모양으로 지정됩니다.

이 속성은 컴포넌트가 처음 렌더링될 때만 적용되며, 이후 상태 변경에는 영향을 미치지 않습니다.

```vue
<Checkbox indeterminate />
```

<Canvas of={CheckboxStories.Indeterminate} />

### disabled

체크박스를 비활성화하는 `boolean` 타입 속성입니다.

이 속성이 설정된 체크박스는 회색으로 스타일이 지정되며 사용자가 선택할 수 없습니다.

`defaultChecked` 속성과 함께 사용 시 체크박스가 표시된 채로 비활성화처리 됩니다.

```vue
<Checkbox disabled />
```

<Canvas of={CheckboxStories.Disabled} />

### checked

`checked` 속성은 체크박스의 현재 상태를 나타냅니다. `true`이면 체크박스가 선택된 상태를, `false`이면 선택되지 않은 상태를 나타냅니다.

- **타입**: `boolean`

```vue
<Checkbox :checked="true" />

<Checkbox checked />
```

<Canvas of={CheckboxStories.Checked} />

### `@update:checked="handleCheckedChange"`

`@update:checked="handleCheckedChange"` 속성은 체크박스의 상태가 변경될 때 호출되는 콜백 함수입니다. 이 함수는 체크박스의 새로운 상태를 인자로 받습니다.

- **타입**: `(checked: boolean) => void`

```vue
<template>
  <div class="flex items-center gap-5">
    <Checkbox
      v-bind="args"
      id="checkbox"
      :checked="checkboxOne"
      @update:checked="handleCheckedChange"
    >
      checked
    </Checkbox>
    <Checkbox
      v-bind="args"
      id="checkbox-unchecked"
      :checked="checkboxTwo"
      @update:checked="handleCheckedChange"
    >
      unchecked
    </Checkbox>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Checkbox from './Checkbox.vue';

const checkboxOne = ref(true);
const checkboxTwo = ref(false);

const handleCheckedChange = (checked) => {
  console.log('Checkbox checked state:', checked);
};
</script>
```

## Variant

### Color Props

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

기본 값은 `red` 입니다.

<Canvas of={CheckboxStories.Color} />

### Radius Props

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

기본 값은 `medium` 입니다.

<Canvas of={CheckboxStories.Radius} />

### Scaling Props

`scaling` props는 컴포넌트의 비율을 변경합니다.

기본 값은 `100%` 입니다.

<Canvas of={CheckboxStories.Scaling} />

### Appearance Props

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

기본 값은 `surface` 입니다.

<Canvas of={CheckboxStories.Appearance} />

### Size Props

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

기본 값은 `medium` 입니다.

<Canvas of={CheckboxStories.Size} />