# Components

## StepFlow

`StepFlow` is a reusable multi-step container with:
- next/previous navigation buttons
- dot indicators (one per step)
- visited/current state styling
- static and dynamic content modes

### Props

- `mode`: `'static' | 'dynamic'` (default: `'dynamic'`)
- `items`: `Array` (used in dynamic mode)
- `stepCount`: `Number` (fallback count when `items` is empty)
- `nextLabel`: `String` (default: `'Next'`)
- `previousLabel`: `String` (default: `'Previous'`)
- `showPrevious`: `Boolean` (default: `false`)
- `dotMode`: `'free' | 'visited-only' | 'locked'` (default: `'free'`)

`dotMode` behavior:
- `free`: any dot can be clicked
- `visited-only`: only already visited dots are clickable
- `locked`: dots are not clickable

### Events

- `step-change`: emitted with the new step index whenever the active step changes

## StepFlowStep

`StepFlowStep` is used only for static mode and lets each step define independent HTML/components plus its title.

Props:
- `title`: `String`

## Usage

### Static mode (different content per step)

```vue
<StepFlow mode="static" :show-previous="true" dot-mode="visited-only">
  <StepFlowStep title="Install dependencies">
    Install dependencies first: <button type="button">Do it!</button>
  </StepFlowStep>

  <StepFlowStep title="Run server">
    <input value="password" /> <button type="button">Run now!</button>
  </StepFlowStep>
</StepFlow>
```

### Dynamic mode (same template, changing data)

```vue
<StepFlow mode="dynamic" :items="quizItems" dot-mode="free" v-slot="{ currentStep }">
  {{ currentStep.question }}
  <small>{{ currentStep.hint }}</small>
  <input value="answer here" />
</StepFlow>
```