@litforge/step-indicator

A step indicator component for displaying progress through multi-step processes like wizards, onboarding flows, and forms.

Installation

npm install @litforge/step-indicator
# or
pnpm add @litforge/step-indicator
# or
yarn add @litforge/step-indicator

Usage

import '@litforge/step-indicator';

<step-indicator
  .steps="${steps}"
  current-step="${currentStep}"
  variant="default"
  ?clickable="${true}"
  @step-click="${handleStepClick}"
></step-indicator>

Props

| Property | Type | Default | Description | |----------|------|---------|-------------| | steps | Step[] | [] | Array of step objects | | currentStep | number | 0 | Index of the current step (0-based) | | variant | 'default' \| 'compact' \| 'vertical' | 'default' | Visual variant | | clickable | boolean | false | Allow clicking steps to navigate |

Step Interface

interface Step {
  id: string;
  label: string;
  description?: string;
  completed?: boolean;
  disabled?: boolean;
}

Events

step-click

Fired when a step is clicked (only if clickable is true and step is not disabled/current).

interface StepClickDetail {
  stepId: string;
  stepIndex: number;
}

Variants

• default: Horizontal layout with descriptions
• compact: Horizontal layout without descriptions, smaller numbers
• vertical: Vertical layout with descriptions

Examples

Basic Usage

<step-indicator
  .steps="${[
    { id: 'step1', label: 'Step 1', description: 'First step' },
    { id: 'step2', label: 'Step 2', description: 'Second step' },
    { id: 'step3', label: 'Step 3', description: 'Third step' }
  ]}"
  current-step="${1}"
></step-indicator>

With Completed Steps

<step-indicator
  .steps="${[
    { id: 'step1', label: 'Step 1', completed: true },
    { id: 'step2', label: 'Step 2', completed: true },
    { id: 'step3', label: 'Step 3' }
  ]}"
  current-step="${2}"
></step-indicator>

Clickable Steps

<step-indicator
  .steps="${steps}"
  current-step="${currentStep}"
  clickable
  @step-click="${(e) => {
    console.log('Clicked:', e.detail.stepId);
  }}"
></step-indicator>

CSS Variables

The component uses CSS variables for theming:

• --lf-step-indicator-font-family
• --lf-step-indicator-gap
• --lf-step-number-size
• --lf-step-number-bg
• --lf-step-number-color
• --lf-step-number-current-bg
• --lf-step-number-completed-bg
• --lf-step-label-color
• --lf-step-description-color
• --lf-step-connector-bg

Framework Integration

Vue 3 / Nuxt

<script setup>
import '@litforge/step-indicator';
import { ref } from 'vue';

const steps = ref([
  { id: 'step1', label: 'Step 1' },
  { id: 'step2', label: 'Step 2' },
]);
const currentStep = ref(0);
</script>

<template>
  <step-indicator
    :steps="steps"
    :current-step="currentStep"
  />
</template>

Register in nuxt.config.ts:

vue: {
  compilerOptions: {
    isCustomElement: (tag) => tag === 'step-indicator'
  }
}