Skip to content
On this page

Wizard

Fancy form wizard

Usage

Simple Usage

Step 1
Step 2
Step 3
Step 1
preview
vue
<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="flex-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="flex-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="flex-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
vue
<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="flex-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="flex-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="flex-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
preview
vue
<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="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>
      </template>
    </p-wizard-step>
    <p-wizard-step title="Step 2">
      <template #default="{ next, prev }">
        <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-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-demi'
  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>

PropsTypeDefaultDescription
variantStringdotWizard's progress point variant, valid value is dot, counter
titleVariantStringspecificWizard's progress title variant, valid value is specific, general
on-before-nextFunction-Hook which run before navigate to next page
on-before-prevFunction-Hook which run before navigate to previous page
on-finishedFunction-Hook which run on last step, after on-before-next hook resolved
keep-aliveBooleanfalseEnable KeepAlive
modelValueNumber1Binding v-model

Slot <p-wizard>

NameDescription
defaultContent to place <p-wizard-step>

Events <p-wizard>

NameArgumentsDescription
There no event here

Props <p-wizard-step>

PropsTypeDefaultDescription
titleString-Step title
on-before-nextFunction-Hook which run before navigate to next page
on-before-prevFunction-Hook which run before navigate to previous page

Slots <p-wizard-step>

NameDescription
defaultStep content
titleContent to use as title
iconContent to place as progress point icon

Events <p-wizard-step>

NameArgumentsDescription
There no event here

See Also

Released under the MIT License.