Steppy

<h1 align="center">Steppy</h1>

<h4 align="center">A customizable Stepper component for Vue 3</h4>

<p align="center">
  <a href="https://badge.fury.io/js/vue3-steppy"><img src="https://badge.fury.io/js/vue3-steppy.svg" alt="npm version" height="18"></a>
</p>

<p align="center">
  <a href="#demo">Demo</a> •
  <a href="#key-features">Key Features</a> •
  <a href="#how-to-use">How To Use</a> •
  <a href="#dependencies">Dependencies</a> •
  <a href="#license">License</a>
</p>

## Demo

You can try a live demo [here](https://laximas.github.io/vue3-steppy/)

## Key Features

* Keep track of current step
* Change step content
* Configure finalization
* Show loading spinner
* Step descriptions/subtitles
* Typescript support
* Customizable
  - Colors
  - Titles
  - Descriptions
  - Icons
  - Button text
  - Circle size
  - Content spacing

## How To Use
Install
```bash
$ npm install vue3-steppy
```
Import
```js
import {Steppy} from 'vue3-steppy'
```

For an implementation example, see the [App.vue](./src/App.vue) file in the repository.

## Props

| Prop               | Type     | Default    | Description                                                                                  |
|--------------------|----------|------------|----------------------------------------------------------------------------------------------|
| `step`             | Number   | `1`        | The current step number.                                                                     |
| `tabs`             | Array    | `[]`       | Array of step objects with titles, descriptions, and flags for validity and success icons.   |
| `finalize`         | Function | `() => {}` | Function to call when the final step is completed.                                           |
| `backText`         | String   | `"Back"`   | Text displayed on the back button.                                                           |
| `nextText`         | String   | `"Next"`   | Text displayed on the next button.                                                           |
| `doneText`         | String   | `"Done"`   | Text displayed on the done button.                                                           |
| `loading`          | Boolean  | `false`    | Indicates whether the final step is in a loading state.                                      |
| `primaryColor1`    | String   | `"orange"` | Primary color for the stepper's theme.                                                       |
| `primaryColor2`    | String   | `"#fff"`   | Secondary color for the stepper's theme.                                                     |
| `backgroundColor`  | String   | `"#fff"`   | Background color for the stepper.                                                            |
| `circleSize`       | Number   | `68`       | Size of the circles in the step indicators.                                                  |
| `contentMarginTop` | Number   | `60`       | Top margin of the content area in pixels. Controls spacing between descriptions and content. |


## Tab Object Structure

Each tab object in the `tabs` array should have the following properties:

| Property      | Type     | Required | Description                                      |
|---------------|----------|----------|--------------------------------------------------|
| `title`       | String   | Yes      | The title of the step.                           |
| `description` | String   | No       | Optional subtitle/description text below title.  |
| `isValid`     | Boolean  | Yes      | Whether the step is valid and can proceed.       |
| `iconSuccess` | String   | No       | Optional custom icon URL for completed steps.    |

### Example Tab Object

```javascript
{
  title: 'Personal Information',
  description: 'Enter your details',
  isValid: true,
  iconSuccess: null
}
```

This software uses the following open source packages:

- [Vue 3](https://vuejs.org)

#### Dev Dependencies
- [Vite](https://vitejs.dev)
- [Typescript](https://www.typescriptlang.org/)
- [sass](https://www.npmjs.com/package/sass)
- [Eslint](https://eslint.org)
- [Prettier](https://prettier.io)
- [gh-pages](https://www.npmjs.com/package/gh-pages)
- [CssInjectedByJs](https://www.npmjs.com/package/vite-plugin-css-injected-by-js)

## License

[MIT](https://github.com/Laximas/vue3-steppy/blob/main/LICENSE.md)

---

> GitHub [Laximas](https://github.com/Laximas) &nbsp;&middot;&nbsp;