Download the PHP package sjwatts119/livewire-wizard without Composer

A Simple Headless Livewire Wizard Component.

View Package Demo

Installation

Install the package via composer:

Creating Your First Wizard

To make your first wizard component, run the following command:

This command supports any arguments used in the Livewire Make Command.

A new wizard class and a corresponding step view will have been created. The class will look like this:

Creating Wizard Steps

To create a new Wizard Step, you can add a new WizardStep instance in the wizardSteps() array.

A WizardStep accepts:

• title: The name of the step. This must be unique from your other steps.
• view: The view to be rendered when the step is active.
• canNavigate (Optional): A boolean closure, prevents access to a step unless the closure evaluates to true. For more information, see Defining Step Rules.

Here is an example of a contact form wizard with two steps:

Defining Step Rules

As mentioned previously, a WizardStep can accept a canNavigate closure. This closure will be called when the step is rendered, and should return a boolean value.

The wizard class exposes a helpful method validatePropertiesForStep() which can be used to validate any number of class properties. Internally, this uses Livewire's Validation to validate the properties, and returns a boolean value indicating whether the validation passed for all provided properties.

This validation also works with Livewire Form Object Properties. These should be referenced using dot notation, e.g. form.name.

For example, the following step will only be accessible if the validation rules defined on the name and message properties pass:

Rendering The Wizard

If you'd like to retrieve the view for the current step, you can call:

If any of your steps have canNavigate closures, you can run these before rendering the view:

The authorise() method will abort with a 403 response if the closure returns false.

Optionally, you can pass a false boolean value to the aborts parameter of authorise().

This will cause a StepNotAuthorisedException to be thrown when the canNavigate closure returns false instead of aborting the request. You could then gracefully handle this exception using Livewire's Exception Lifecycle Hook. For example:

Navigation

In your step views, you likely want to add some navigation buttons to allow the user to move between steps.

You could use the wire:click directive to call any of the navigation methods on the wizard class. For example:

Wizard Methods

The wizard component has a number of public methods which can be used to get information about the current state of the wizard. These methods are:

Wizard Navigation Methods

You can use the following methods to navigate between steps in the wizard:

WizardStep Methods

The WizardStep class has a number of methods which can be used to render the step in your view. These methods are:

Running Tests

To run the tests, install dependencies:

Then run the tests using:

Credits

• Sam Watts
• All Contributors

License

The MIT License (MIT). Please see License File for more information.