# 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`

## VocabularyDetail

`VocabularyDetail` loads and displays all non-null fields for a single
vocabulary entry.

Behavior:
- Loads backend data through `Vocabulary.loadVocabularyData(vocabId)`.
- Shows both base fields and type-specific fields.
- Orders type-specific fields depending on the vocabulary type.

Props:
- `vocabId`: `Number | String` (required to load data)

Events:
- `loaded`: emits normalized metadata object on success, or `null` on failure

Usage:

```vue
<VocabularyDetail :vocab-id="selectedVocabId" @loaded="onVocabLoaded" />
```

## 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>
```