Many thanks for the great project! Is there a possibility to create steps dynamically? I am working on an application where the steps should be loaded dynamically from an API. However, the number and title of the steps is always different.

Maybe I'm missing something, but I can't get this to run using Alpine.plugin().

import Alpine from "alpinejs";
import * as wizard from "@glhd/alpine-wizard";

Alpine.plugin(wizard);

window.Alpine = Alpine;
Alpine.start();

Doesn't seem to work.

Hey, awesome project! Is it possible to send data as a request body, instead of all inputs being used as query params?

I have a scenario where I'm using a textarea input, which could have tens of thousands of words of free text. And in the future, I'd like my form to support file uploads. Possible to do Multipart requests?

Cheers Ryan

<template x-for="step in configuratorData.steps">
    <div x-wizard:step>
        <span x-text="step.name"></span>
    </div>
</template>

<div x-wizard:step>
    step outside for loop
</div>

I want to display steps dynamic based on configurator data. But it makes 3 steps but with all the step data in each step. The step outside the loop works fine. I made a gif to make it more clear. In the screenshot is the html output. Am I doing something wrong.

Hey there,

first off, this is an amazing package, thanks a lot for this. :)

Now, I am unsure if this is an AlpineJs issue, or if I'm just using it wrong, or if this has something to do with the wizard itself. But I thought I'd ask here.

I have a form with x-init like so:

<form 
            x-cloak
            x-data="leadForm()"
            class="border rounded overflow-hidden">

I initialize the leadForm() using alpine.data() in a js file, like so:

import Alpine from "alpinejs";
import "./modules/alpine/dynamic-keyword-insertion";
import wizard from "@glhd/alpine-wizard";
import data from "./modules/alpine/form-data/index";

window.Alpine = Alpine;

Alpine.plugin(wizard);
Alpine.data("leadForm", data);

Alpine.start();

./modules/alpine/form-data/index

export default () => ({
  step: 1,
  formData: {
    zip: null,
    fname: null,
    lname: null,
    email: null,
    address: null,
    phone: null,
    metaData: {},
  },
  init() {
    // Prepopulate formData from url query string params,
    // to hide wizard steps that have formData set.
    const queryParams = new URLSearchParams(location.search);

    // Go over all available options
    Object.keys(this.formData).forEach((key) => {
      // Check if obj has key, otherwise use default option
      this.formData[key] = queryParams.get(key);
    });

    console.log(this.formData);
  },
});

In my form, I'd like to write a custom Validatorjs rule that will make an API call to check if the entered zip code is valid, but I am unable to reference the formData zip code property in the validator directive, like so:

<div
              x-wizard:step="formData.zip != null;"
              x-wizard:if="formData.zip == null"
              x-wizard:title="Enter Your Zip Code"
              x-wizard:step.rules="{ formData.zip: 'required|numeric|min:10|max:120' }"
              class="flex items-center space-x-6">
              <label for="zip-input">
                Your Zip:
              </label>
              <input
                x-model="formData.zip"
                id="zip-input"
                class="px-2 py-3 border border-gray-300 shadow-sm rounded-md sm:text-sm focus:ring-indigo-500 focus:border-indigo-500"
              />

results in SyntaxError: Unexpected token '.'. Expected a ':' following the property name 'formData'.

Also wrapping the property name in quotes/double quotes does not work.

The following should only show the third step, but always shows the first step. The second step is skipped.

        <div x-data="{ errors: true }">

            <div x-wizard:step x-wizard:if="errors == false">
                First
                <x-buttons.standard-a @click="$wizard.forward()"
                                      ::disabled="$wizard.cannotGoForward()"
                                      x-show="$wizard.isNotLast()">Confirm & continue...</x-buttons.standard-a>
            </div>

            <div x-wizard:step x-wizard:if="errors == false">
                Second
                <x-buttons.standard-a @click="$wizard.forward()"
                                      ::disabled="$wizard.cannotGoForward()"
                                      x-show="$wizard.isNotLast()">Confirm & continue...</x-buttons.standard-a>
            </div>

            <div x-wizard:step>
                Third
            </div>
        </div>