Multi-Step Form Implementation in Vue with TypeScript

Building multi-step forms is a common requirement in web applications, allowing users to complete complex processes in manageable chunks. This challenge asks you to implement a Vue component that handles a multi-step form, managing the current step, validating inputs, and navigating between steps. This is a practical exercise in state management, component communication, and form handling within a Vue application.

Problem Description

You need to create a Vue component called MultiStepForm that displays a form divided into multiple steps. Each step should contain a set of input fields and a validation mechanism. The component should allow users to navigate between steps using "Next" and "Previous" buttons. Upon successful validation of all fields in the final step, the form should emit an event with the complete form data.

Key Requirements:

Step Management: The component should track the current step and display the corresponding step's content.
Input Validation: Each step should have associated validation rules. The component should validate the input fields in the current step before allowing navigation to the next step. Invalid fields should be clearly indicated to the user (e.g., with error messages).
Navigation: "Next" and "Previous" buttons should be enabled/disabled based on the current step and validation status.
Data Collection: The component should collect the data entered by the user in each step.
Final Submission: Upon successful validation of the final step, the component should emit a submit event, passing the complete form data as an argument.
TypeScript: The entire component must be written in TypeScript, including type definitions for form data and validation rules.

Expected Behavior:

The component should render the first step of the form.
Users should be able to navigate to the next step only after all fields in the current step are valid.
Users should be able to navigate to the previous step from any step (except the first).
The "Next" button should be disabled on the last step.
The "Previous" button should be disabled on the first step.
When the final step is valid, the "Submit" button (or equivalent) should be enabled.
Upon submission, the component should emit the submit event with the complete form data.

Edge Cases to Consider:

Empty form data: Handle cases where the form data is incomplete.
Invalid input types: Ensure that input fields are validated against their expected types.
Error handling: Provide informative error messages to the user.
Dynamic steps: Consider how the component could be adapted to handle a variable number of steps. (This is not required for the base solution, but a good thought exercise).

Examples

Example 1:

Input: steps = [{id: 'step1', title: 'Personal Info', fields: [{name: 'firstName', type: 'text', required: true}, {name: 'lastName', type: 'text', required: true}]}, {id: 'step2', title: 'Address', fields: [{name: 'address', type: 'text', required: true}]}]
Output: A Vue component rendering a form with two steps. Step 1 displays fields for first and last name. Step 2 displays a field for address.  "Next" button is enabled on Step 1 if both name fields are filled. "Previous" button is enabled on Step 2.
Explanation: The component correctly renders the form based on the provided steps and fields.

Example 2:

Input: steps = [{id: 'step1', title: 'Contact', fields: [{name: 'email', type: 'email', required: true}]}, {id: 'step2', title: 'Preferences', fields: [{name: 'newsletter', type: 'checkbox', required: false}]}]
Output: A Vue component rendering a form with two steps. Step 1 displays an email field. Step 2 displays a checkbox for newsletter subscription.
Explanation: The component handles different input types (email, checkbox) correctly.

Example 3: (Edge Case)

Input: steps = [{id: 'step1', title: 'Details', fields: [{name: 'name', type: 'text', required: true}]}]
Output: A Vue component rendering a form with one step. The "Next" button is disabled.
Explanation: The component correctly handles the case where there is only one step.

Constraints

The component should be reusable and configurable via props (e.g., steps).
The component should use Vue's reactivity system for state management.
Validation rules should be defined as part of the steps data structure.
The component should emit a submit event when the form is successfully submitted.
The component should be well-structured and easy to understand.
The solution must be written in TypeScript.
No external libraries (e.g., form validation libraries) are allowed for this challenge. Implement your own basic validation logic.

Notes

Consider using a reactive object to store the form data.
Think about how to handle validation errors and display them to the user.
You can use Vue's v-model directive to bind input fields to the form data.
Focus on creating a clean and maintainable component.
The steps prop should be an array of objects, where each object represents a step and contains an id, title, and an array of fields. Each field object should have a name, type, and required property.
For simplicity, assume that the type property of a field can be 'text', 'email', or 'checkbox'. Implement validation logic accordingly.