<template>
  <bms-stepper :currentStep="currentStep" @stepClick="onStepClick">
    <bms-step
      stepLabel="Label"
      :stepComplete="true"
      previousLabel=""
      @next="currentStep = 1"
    >
      <div>coucou</div>
    </bms-step>
    <bms-step
      stepLabel="Label 2"
      :stepComplete="false"
      @previous="currentStep = 0"
      @next="currentStep = 2"
    >
      <div>toto</div>
    </bms-step>
    <bms-step
      stepLabel="Label 3"
      :stepComplete="false"
      nextLabel=""
      @previous="currentStep = 1"
    >
      <div>titi</div>
    </bms-step>
  </bms-stepper>
</template>

<script setup lang="ts">
import { Ref, ref } from 'vue';

const currentStep: Ref<number> = ref(0);
const onStepClick = (step: number) => {
  currentStep.value = step;
};
</script>
