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

# PinInput

<Meta of={PinInputStories} />

<br />

## Overview

Pin 텍스트를 직접 입력할 수 있는 필드입니다.

<Canvas of={PinInputStories.Default} />

<Controls />

<br />

## Usage

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

```javascript
<script>
const modelValue = ref(['Apple', 'Banana']);
return { args, modelValue };
</script>
<template>
  <div>
    <TagsInputRoot v-model="modelValue" v-bind="args">
      <TagsInputItem v-for="item in modelValue" :key="item" :value="item"> </TagsInputItem>
      <TagsInputInput placeholder="Fruits..." />
    </TagsInputRoot>
  </div>
</template>
```

<br />

## API Reference

### Root

<table>
  <tr>
    <th>Props</th>
    <th>Type</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>defaultValue</td>
    <td>`string[]`</td>
    <td>defaultValue를 나타냅니다.</td>
  </tr>
  <tr>
    <td>id</td>
    <td>`string`</td>
    <td>id를 나타냅니다.</td>
  </tr>
  <tr>
    <td>mask</td>
    <td>`boolean`</td>
    <td>true 인 경우 pin 입력값이 비밀번호로 처리됩니다.</td>
  </tr>
  <tr>
    <td>modelValue</td>
    <td>`string[]`</td>
    <td></td>
  </tr>
  <tr>
    <td>name</td>
    <td>`string`</td>
    <td></td>
  </tr>
  <tr>
    <td>otp</td>
    <td>`boolean`</td>
    <td></td>
  </tr>
  <tr>
    <td>placeholder</td>
    <td>`string`</td>
    <td></td>
  </tr>
  <tr>
    <td>required</td>
    <td>`boolean`</td>
    <td></td>
  </tr>
  <tr>
    <td>type</td>
    <td>`'number' | 'text'`</td>
    <td></td>
  </tr>
</table>

### Input

TagsInput의 Input 컴포넌트 입니다.

<table>
  <tr>
    <th>Props</th>
    <th>Type</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>disabled</td>
    <td>`boolean`</td>
    <td>input 창의 활성화 상태입니다.</td>
  </tr>
  <tr>
    <td>index</td>
    <td>`number`</td>
    <td>input 창이 바인딩되는 위치를 나타냅니다. 필수값입니다.</td>
  </tr>
</table>

## Variant

### Scaling Props

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

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

<Canvas of={PinInputStories.Scaling} />

### Radius Props

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

기본 값은 `medium` 입니다.

<Canvas of={PinInputStories.Radius} />

### Size Props

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

기본 값은 `medium` 입니다.

<Canvas of={PinInputStories.Size} />