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

# Stepper

<Meta of={StepperStories} />

<br />

일련의 이벤트나 단계를 시간 순서대로 시각화하는 데 사용됩니다.

<Canvas of={StepperStories.Default} />

<Controls />

<br />

## Usage

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

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

<template>
  <StepperRoot>
    <StepperItem>
      <StepperTrigger />
      <StepperIndicator />

      <StepperTitle />
      <StepperDescription />

      <StepperSeparator />
    </StepperItem>
  </StepperRoot>
</template>;
```

<br />

## API Reference

### Root

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

### Item

`Stepper` 내의 각 항목을 나타냅니다.

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>step*</td>
      <td>number</td>
      <td>스테퍼 항목을 인덱스와 연결하는 고유한 값입니다.</td>
    </tr>
  </tbody>
</table>

```javascript
<template>
  <StepperRoot>
    <StepperItem
      v-for="item in steps"
      :key="item.step"
      :step="item.step"
    >
      <StepperTrigger />
      <StepperSeparator v-if="item.step !== steps[steps.length - 1].step" />
      <div class="absolute text-center top-full left-0 w-full mt-2">
        <StepperTitle>
          {{ item.title }}
        </StepperTitle>
        <StepperDescription>
          {{ item.description }}
        </StepperDescription>
      </div>
    </StepperItem>
  </StepperRoot>
</template>

<script setup>
  const steps = [{ step: 1, title: '제목', description: '설명', icon: '아이콘' }, ...];
</script>
```

### Indicator

각 항목에 아이콘을 함께 사용할 수 있습니다. `StepperTrigger` 내에서 사용해야 합니다.

```javascript
<StepperTrigger class='w-10 h-10'>
  <StepperIndicator>
    <Icon
      :icon="item.icon"
      class="w-5 h-5"
    />
  </StepperIndicator>
</StepperTrigger>
```

### Separator

각 항목을 연결하는 선을 나타냅니다.

```javascript
<StepperItem
  v-for="item in steps"
  :key="item.step"
>
  <StepperSeparator v-if="item.step !== steps[steps.length - 1].step" />
</StepperItem>
```

### Title

항목의 제목을 나타냅니다.

### Description

항목의 추가적인 설명을 포함합니다.

만약 이 부분을 완전히 제거하려면 `StepperDescription`을 제거한 뒤, `StepperTrigger`에 `:aria-describedby="undefined"`를 추가해주세요.

<br />

## Variant

### With Icon

아이콘과 함께 사용 수 있습니다.

```javascript
<StepperRoot>
  <StepperItem>
    <StepperTrigger>
      <StepperIndicator>
        <Icon />
      </StepperIndicator>
    </StepperTrigger>
  </StepperItem>
</StepperRoot>
```

<Canvas of={StepperStories.WithIcon} />

### Vertical

`orientation` props는 Stepper의 방향을 수직으로 설정할 수 있습니다.

```javascript
<StepperRoot orientation="vertical">
  <StepperItem>
    <StepperTrigger />
    <StepperIndicator />

    <StepperTitle />
    <StepperDescription />

    <Stepper.eparator />
  </StepperItem>
</StepperRoot>
```

<Canvas of={StepperStories.Vertical} />