# hostinger/trunk/vue-frontend/src/components/Stepper.vue

Hostinger Tools, version trunk. 68 lines.

- Page: https://pluginprobe.com/plugins/hostinger/trunk/code/vue-frontend/src/components/Stepper.vue
- Raw: https://pluginprobe.com/plugins/hostinger/trunk/raw/vue-frontend/src/components/Stepper.vue
- Modified: 2025-09-09T07:18:12+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/hostinger/trunk/code/vue-frontend/src/components/Stepper.vue#L10-L20`.

```vue
<script setup lang="ts">
interface Props {
	stepsCount?: number;
	isClickable?: boolean;
	wide?: boolean;
	step?: number;
}

type Emits = {
	"on-click": [index: number];
};

const props = withDefaults(defineProps<Props>(), {
	stepsCount: 0,
	isClickable: false,
	wide: false,
	step: 0
});

const emit = defineEmits<Emits>();

const getIsActive = (index: number, step: number) =>
	(!props.isClickable && index <= step) ||
	(props.isClickable && index === step);
</script>

<template>
  <div class="stepper">
    <div
      v-for="(_, index) in stepsCount"
      :key="index"
      class="stepper__indicator"
      :class="{
        'stepper__indicator--active': getIsActive(index, step),
        'stepper__indicator--clickable': isClickable,
        'stepper__indicator--wide': wide,
      }"
      @click="emit('on-click', index)"
    />
  </div>
</template>

<style lang="scss" scoped>
.stepper {
	display: flex;
	justify-content: center;
	margin-top: 24px;

	&__indicator {
		width: 8px;
		height: 8px;
		margin-left: 4px;
		border-radius: 50%;
		background-color: rgba(114, 117, 134, 0.3);

		&--wide {
			margin: 0 8px;
		}
		&--active {
			background-color: var(--primary);
		}
		&--clickable {
			cursor: pointer;
		}
	}
}
</style>

```