PersonaSteps
Headless Wizard
Usage
Simple Usage
Step 1
vue
<template>
<p-steps>
<p-step>
<template #default="{ next, prev }">
<p-card>
<div class="flex flex-col h-52">
<div class="flex-grow">Step 1</div>
<div class="space-gap-2">
<p-button disabled color="info">Prev</p-button>
<p-button @click="next" color="info">Next</p-button>
</div>
</div>
</p-card>
</template>
</p-step>
<p-step>
<template #default="{ next, prev }">
<p-card>
<div class="flex flex-col h-52">
<div class="flex-grow">Step 2</div>
<div class="space-gap-2">
<p-button @click="prev" color="info">Prev</p-button>
<p-button @click="next" color="info">Next</p-button>
</div>
</div>
</p-card>
</template>
</p-step>
<p-step>
<template #default="{ next, prev, toStep }">
<p-card>
<div class="flex flex-col h-52">
<div class="flex-grow">Step 3</div>
<div class="space-gap-2">
<p-button @click="prev" color="info">Prev</p-button>
<p-button @click="next" color="info">Finish</p-button>
<p-button @click="toStep(1)" color="info">To Step 1</p-button>
</div>
</div>
</p-card>
</template>
</p-step>
</p-steps>
</template>Vertical Mode
Set direction to vertical to enable Vertical mode.
Step 1
vue
<template>
<p-steps direction="vertical">
<p-step>
<template #default="{ next, prev }">
<p-card>
<div class="flex flex-col h-52">
<div class="flex-grow">Step 1</div>
<div class="space-gap-2">
<p-button disabled color="info">Prev</p-button>
<p-button @click="next" color="info">Next</p-button>
</div>
</div>
</p-card>
</template>
</p-step>
<p-step>
<template #default="{ next, prev }">
<p-card>
<div class="flex flex-col h-52">
<div class="flex-grow">Step 2</div>
<div class="space-gap-2">
<p-button @click="prev" color="info">Prev</p-button>
<p-button @click="next" color="info">Next</p-button>
</div>
</div>
</p-card>
</template>
</p-step>
<p-step>
<template #default="{ next, prev, toStep }">
<p-card>
<div class="flex flex-col h-52">
<div class="flex-grow">Step 3</div>
<div class="space-gap-2">
<p-button @click="prev" color="info">Prev</p-button>
<p-button @click="next" color="info">Finish</p-button>
<p-button @click="toStep(1)" color="info">To Step 1</p-button>
</div>
</div>
</p-card>
</template>
</p-step>
</p-steps>
</template>Loop Over
Add prop loop to enable Loop mode, it will loop over the steps and never finished.
Step 1
vue
<template>
<p-steps loop>
<p-step>
<template #default="{ next, prev }">
<p-card>
<div class="flex flex-col h-52">
<div class="flex-grow">Step 1</div>
<div class="space-gap-2">
<p-button disabled color="info">Prev</p-button>
<p-button @click="next" color="info">Next</p-button>
</div>
</div>
</p-card>
</template>
</p-step>
<p-step>
<template #default="{ next, prev }">
<p-card>
<div class="flex flex-col h-52">
<div class="flex-grow">Step 2</div>
<div class="space-gap-2">
<p-button @click="prev" color="info">Prev</p-button>
<p-button @click="next" color="info">Next</p-button>
</div>
</div>
</p-card>
</template>
</p-step>
<p-step>
<template #default="{ next, prev, toStep }">
<p-card>
<div class="flex flex-col h-52">
<div class="flex-grow">Step 3</div>
<div class="space-gap-2">
<p-button @click="prev" color="info">Prev</p-button>
<p-button @click="next" color="info">Finish</p-button>
<p-button @click="toStep(1)" color="info">To Step 1</p-button>
</div>
</div>
</p-card>
</template>
</p-step>
</p-steps>
</template>Hooks
on-before-next hook
This hook ran when next function was called, suit for form validation.
vue
<template>
<p-steps :on-before-next="validate">
<p-step>
<template #default="{ next, prev }">
<p-card>
<div class="flex flex-col h-52">
<div class="flex-grow">
<label>Name</label>
<p-input v-model="form.name" placeholder="Fill to next" />
</div>
<div class="space-x-2">
<p-button disabled color="info">Prev</p-button>
<p-button @click="next" color="info">Next</p-button>
</div>
</div>
</p-card>
</template>
</p-step>
<p-step>
<template #default="{ next, prev }">
<p-card>
<div class="flex flex-col h-52">
<div class="flex-grow">
<label>Email</label>
<p-input v-model="form.email" placeholder="Fill to next" />
</div>
<div class="space-gap-2">
<p-button @click="prev" color="info">Prev</p-button>
<p-button @click="next" color="info">Next</p-button>
</div>
</div>
</p-card>
</template>
</p-step>
</p-steps>
</template>
<script setup>
import { reactive } from 'vue-demi'
import { dialog } from '@privyid/persona/core/'
const form = reactive({
name : '',
email: '',
})
function validate (to, from) {
if (from === 1) {
if (!name.value) {
dialog.alert({ text: 'Name is required' })
return false // return false to prevent navigate to next step
}
}
if (from === 2) {
if (!form.email || !form.email.includes('@')) {
dialog.alert({ text: 'Email must be valid email' })
return false
}
}
return true
}
</script>on-before-prev hook
Similar to on-before-next, but run when prev function called.
on-finished hook
This hook run when next function called in last step, and after on-before-next resolved. It's suit for handle save form, or sending POST to API.
vue
<template>
<p-steps
:on-before-next="validate"
:on-finished="save">
<p-step>
<template #default="{ next, prev }">
<p-card>
<div class="flex flex-col h-52">
<div class="flex-grow">
<label>Name</label>
<p-input v-model="form.name" placeholder="Fill to next" />
</div>
<div class="space-gap-2">
<p-button disabled color="info">Prev</p-button>
<p-button @click="next" color="info">Next</p-button>
</div>
</div>
</p-card>
</template>
</p-step>
<p-step>
<template #default="{ next, prev }">
<p-card>
<div class="flex flex-col h-52">
<div class="flex-grow">
<label>Email</label>
<p-input v-model="form.email" placeholder="Fill to next" />
</div>
<div class="space-gap-2">
<p-button @click="prev" color="info">Prev</p-button>
<p-button @click="next" color="info">Next</p-button>
</div>
</div>
</p-card>
</template>
</p-step>
</p-steps>
</template>
<script setup>
import { reactive } from 'vue-demi'
import { dialog } from '@privyid/persona/core/'
const form = reactive({
name : '',
email: '',
})
function validate (to, from) { /* Example above */ }
function save() {
dialog.alert({ text: 'Success' })
}
</script>Binding v-model
You can binding current step with v-model
Step 1
Step :
1API
Props <p-steps>
| Props | Type | Default | Description |
|---|---|---|---|
direction | String | horizontal | Slide direction, valid values is horizontal, vertical |
loop | Boolean | false | Enable loop mode |
on-before-next | Function | - | Hook which run before navigate to next page |
on-before-prev | Function | - | Hook which run before navigate to previous page |
on-finished | Function | - | Hook which run on last step, after on-before-next hook resolved |
keep-alive | Boolean | false | Enable KeepAlive |
modelValue | Number | 1 | Binding v-model |
Slot <p-steps>
| Name | Description |
|---|---|
default | Content to place <p-step> |
Events <p-steps>
| Name | Arguments | Description |
|---|---|---|
| There no event here | ||
Props <p-step>
| Props | Type | Default | Description |
|---|---|---|---|
on-before-next | Function | - | Hook which run before navigate to next page |
on-before-prev | Function | - | Hook which run before navigate to previous page |
Slots <p-step>
| Name | Description |
|---|---|
default | Step content |
default slot contains scoped slots
| Scoped | Type | Default | Description |
|---|---|---|---|
canNext | Boolean | false | Hook which indicate whether there is next step |
canPrev | Boolean | false | Hook which indicate whether there is previous step |
toStep | Function | - | Hook to jump to another step toStep(stepIndex), the argument use number type |
next | Function | - | Hook to jump to the next step |
prev | Function | - | Hook to jump to the previous step |
total | Number | 1 | Show total steps |
step | Number | 1 | Show current step |
Events <p-step>
| Name | Arguments | Description |
|---|---|---|
| There no event here | ||