StepManager

A simple step manager.

We will be using the following options:

import { ref } from 'vue'

const stepManagerData = [
  { title: 'Profile data', description: 'Data settings' },
  { title: 'Interest data', description: 'Attribution and interest settings' },
  { title: 'User data', description: 'User settings' }
]
const step = ref(0)
const stepAhead = () => {
  step.value += 1
}
const stepBack = () => {
  step.value -= 1
}

Profile data

Data settings

Interest data

Attribution and interest settings

User data

User settings

html

<Card>
    <StepManager :steps="stepManagerData" :currentStep="step">
        <template v-slot:step1>
            <Form @submit="stepAhead">
                <InputText
                    class="mb-xs-4"
                    name="birthdate"
                    label="Enter your birthdate"
                    placeholder="MM/DD/YYYY"
                    :validations="['not-empty', 'date']"
                    inputType="tel"
                    customType="datetext"
                />
            </Form>
        </template>
        <template v-slot:step2>
            <Form @submit="stepAhead">
                <InputNumber
                    class="mb-xs-4"
                    name="money"
                    label="Yearly salary"
                    placeholder="Enter your salary in € gross per year"
                    :validations="moneyValidations"
                />
                <template v-slot:buttons>
                    <Button text="Back" type="tertiary" @click="stepBack" />
                </template>
            </Form>
        </template>
        <template v-slot:step3>
            <Form @submit="log">
                <InputText name="name" label="Name" :validations="['not-empty']" />
                <InputText name="lastName" label="Last name" :validations="['not-empty']" />
                <template v-slot:buttons>
                    <Button text="Back" type="tertiary" @click="stepBack" />
                </template>
            </Form>
        </template>
    </StepManager>
</Card>

StepManager ​

StepManager