The main idea of the State Machine pattern described here: https://firstaml.dev/blog/2ldc7qgkjwbg7h2bm3xryc3so6eqb1

FormBuilder.vue component

Props:

Events:

StateMachine object specifications

State Machine is the object describes all form steps, fields and user's flow;

const STATE_MACHINE = {
    // Required. Form id
    id: "create-app",

    // Required. The main step showed after mounting
    initialStep: "step-one",

    // Required. Context stores the current state of the form.
    // By changing this object you can set default field values or dynamically change it.
    context: {
      // Required. Current step
      currentStep: "step-one",

      // Required. Current field values
      formData: {
        name: "Default App Name",
        subdomain: "",
      },
    },

    // Required. Form steps
    steps: {
      "step-one": {
	  	// Required. Link to the next step contains target, and actions to perfome (_nextStep is default action from state machine mixin)
        NEXT: { target: "step-two", actions: ["_nextStep"] },

		// Required. The same as NEXT
        BACK: {},

		// Required. Step options described lower
        options: STEP_OPTIONS,
      },
      "step-two": {
        NEXT: {},
        BACK: { target: "step-one", actions: ["_prevStep"] },
        options: STEP_OPTIONS,
      },
    },
  },

STEP_OPTIONS object specifications

Step options contains data for building form UI

const STEP_OPTIONS = {
		headline: "header",
		// Required. Types: Array | Function. Array of fields. You can use the function to change
        // fields options depending on current state of the state machine.
        // For example: change "Cities" select depending on "Country" select
		fields: (stateMachine) => {
            const list = [
              {
			  	//Required. Component name from "componentsList"
                componentName: "Select",

				//Required. Field name from
                name: "age",

				// Required. List of validators. Strings or objects
                validators: ["required", {name: "between", payload: [18, 100], error: "Wrong age"}],

				// Required. Field label
                label: "Your age",

				// Any other attributes for field component
                attributes: {
                  maxValue: 1000,
                },
              },
            ];
            return list;
          },
        },