Wizard

Fancy form wizard

Usage

Simple Usage

Step 1

Step 2

Step 3

Step 1

preview

<template>
  <p-wizard>
    <p-wizard-step title="Step 1">
      <template #icon>
        <IconDocument />
      </template>
      <template #default="{ next, prev }">
        <div class="flex flex-col h-52">
          <div class="grow">Step 1</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>
      </template>
    </p-wizard-step>
    <p-wizard-step title="Step 2">
      <template #default="{ next, prev }">
        <div class="flex flex-col h-52">
          <div class="grow">Step 2</div>
          <div class="space-x-2">
            <p-button @click="prev" color="info">Prev</p-button>
            <p-button @click="next" color="info">Next</p-button>
          </div>
        </div>
      </template>
    </p-wizard-step>
    <p-wizard-step title="Step 3">
      <template #default="{ next, prev }">
        <div class="flex flex-col h-52">
          <div class="grow">Step 3</div>
          <div class="space-x-2">
            <p-button @click="prev" color="info">Prev</p-button>
            <p-button disabled @click="next" color="info">Next</p-button>
          </div>
        </div>
      </template>
    </p-wizard-step>
  </p-wizard>
</template>

Variant

Inherit from Progress, you can set progress variant and title-variant in here.

Step 1

Step 2

Step 3

Step 1

Step 1

preview

<template>
  <p-wizard
    variant="counter"
    title-variant="general">
    <p-wizard-step title="Step 1">
      <template #default="{ next, prev }">
        <div class="flex flex-col h-52">
          <div class="grow">Step 1</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>
      </template>
    </p-wizard-step>
    <p-wizard-step title="Step 2">
      <template #default="{ next, prev }">
        <div class="flex flex-col h-52">
          <div class="grow">Step 2</div>
          <div class="space-x-2">
            <p-button @click="prev" color="info">Prev</p-button>
            <p-button @click="next" color="info">Next</p-button>
          </div>
        </div>
      </template>
    </p-wizard-step>
    <p-wizard-step title="Step 3">
      <template #default="{ next, prev }">
        <div class="flex flex-col h-52">
          <div class="grow">Step 3</div>
          <div class="space-x-2">
            <p-button @click="prev" color="info">Prev</p-button>
            <p-button @click="next" color="info">Next</p-button>
          </div>
        </div>
      </template>
    </p-wizard-step>
  </p-wizard>
</template>

Hooks

All hooks from Steps like on-before-next, on-before-prev and on-finished also work at here.

Step 1

Step 2

Name

preview

<template>
  <p-wizard
    :on-before-next="validate"
    :on-finished="save">
    <p-wizard-step title="Step 1">
      <template #default="{ next, prev }">
        <div class="flex flex-col h-52">
          <div class="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>
      </template>
    </p-wizard-step>
    <p-wizard-step title="Step 2">
      <template #default="{ next, prev }">
        <div class="flex flex-col h-52">
          <div class="grow">
            <label>Email</label>
            <p-input v-model="form.email" placeholder="Fill to next" />
          </div>
          <div class="space-x-2">
            <p-button @click="prev" color="info">Prev</p-button>
            <p-button @click="next" color="info">Next</p-button>
          </div>
        </div>
      </template>
    </p-wizard-step>
  </p-wizard>
</template>

<script setup>
  import { reactive } from 'vue'
  import { dialog } from '@privyid/persona/core/'

  const form = reactive({
    name : '',
    email: '',
  })

  function validate (to, currentStep) {
    if (currentStep === 1) {
      if (!form.name) {
        dialog.alert({ text: 'Name is required' })

        return false
      }
    }

    if (currentStep === 2) {
      if (!form.email || !form.email.includes('@')) {
        dialog.alert({ text: 'Email must be valid email' })

        return false
      }
    }

    return true
  }

  function save () {
    dialog.alert({ text: 'Success'})
  }
</script>

Go to Steps for more examples.

API

Props <p-wizard>

Props	Type	Default	Description
variant	String	dot	Wizard's progress point variant, valid value is dot, counter
titleVariant	String	specific	Wizard's progress title variant, valid value is specific, general
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-wizard>

Name	Description
default	Content to place <p-wizard-step>

Events <p-wizard>

Name	Arguments	Description
There no event here

Props <p-wizard-step>

Props	Type	Default	Description
title	String	-	Step title
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-wizard-step>

Name	Description
default	Step content
title	Content to use as title
icon	Content to place as progress point icon

Events <p-wizard-step>

Name	Arguments	Description
There no event here

See Also

• Steps
• Progress