@uniquedj95/vform 3.3.0 → 3.4.1

package/README.md

@@ -6,7 +6,7 @@
 
 A dynamic form builder for Vue.js with Ionic components
 
-[![Version](https://img.shields.io/badge/version-3.3.0-blue.svg)](https://github.com/uniquedj95/vform/releases)
+[![Version](https://img.shields.io/badge/version-3.4.1-blue.svg)](https://github.com/uniquedj95/vform/releases)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 [![Vue Version](https://img.shields.io/badge/vue-3.5+-brightgreen.svg)](https://vuejs.org/)
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.5-blue)](https://www.typescriptlang.org/)
@@ -20,13 +20,18 @@ A dynamic form builder for Vue.js with Ionic components
 ## Table of Contents
 
 - [Overview](#overview)
-- [🎯 Demo](#demo)
+- [Demo](#demo)
 - [Features](#features)
 - [Installation](#installation)
 - [Usage](#usage)
 - [Schema Structure](#schema-structure)
   - [Example Schema](#example-schema)
   - [Field Configuration Options](#field-configuration-options)
+- [Multi-Step Forms](#multi-step-forms)
+  - [Basic Multi-Step Setup](#basic-multi-step-setup)
+  - [Step Configuration](#step-configuration)
+  - [Step Indicator Positioning](#step-indicator-positioning)
+  - [Step Validation](#step-validation)
 - [Form Events](#form-events)
 - [Form Methods](#form-methods)
 - [Input Dependencies](#input-dependencies)
@@ -37,7 +42,6 @@ A dynamic form builder for Vue.js with Ionic components
   - [Custom Buttons](#custom-buttons)
   - [RepeatInput](#repeatinput)
   - [Option Descriptions](#option-descriptions)
-  - [Date Pattern Formatting](#date-pattern-formatting)
 - [Issue Reporting and Feedback](#issue-reporting-and-feedback)
 - [Contributors](#contributors)
 
@@ -45,7 +49,7 @@ A dynamic form builder for Vue.js with Ionic components
 
 vForm is a Vue.js component that dynamically generates forms based on a provided schema. It leverages Ionic components for a responsive and mobile-friendly design, supporting complex forms with conditional rendering and validation logic. It provides a robust and flexible form-building solution for Vue.js applications, allowing for a high degree of customization and control over the form behavior and appearance.
 
-## 🎯 Demo
+## Demo
 
 Explore all VForm features with our comprehensive interactive demo:
 
@@ -62,6 +66,7 @@ npm run demo:dev
 The demo showcases:
 
 - **Basic Forms**: All input types and basic functionality
+- **Multi-Step Forms**: Step indicators, validation, and smart navigation
 - **Advanced Features**: Masking, computed fields, custom buttons
 - **Validation Examples**: Custom validators and error handling
 - **Dependent Fields**: Dynamic field behavior and cascading options
@@ -80,14 +85,15 @@ npm run demo:update
 
 ## Features
 
+- **Multi-Step Forms**: Create guided, step-by-step forms with configurable step indicators, validation, and smart navigation.
 - **Dynamic Form Generation**: Create forms dynamically based on a schema definition.
 - **Conditional Field Rendering**: Fields can be shown or hidden based on other form values.
 - **Dependent Options**: Load options for select inputs based on the values of other fields.
 - **Responsive Grid Layout**: Utilizes Ionic Grid for a responsive design that works across different screen sizes.
-- **Enhanced Date Input Field**: Custom date formatting and handling with integrated date picker.
+- **Enhanced Date Input Field**: Built-in date and datetime picker support with Ionic components.
 - **Multiple Selection Interfaces**: Three different interfaces for select inputs (popover, action sheet, alert).
 - **Repeatable Field Groups**: Create dynamic, repeatable sets of form fields.
-- **Advanced Validation**: Built-in validation with support for custom validation functions.
+- **Advanced Validation**: Built-in validation with support for custom validation functions and step-by-step validation.
 - **Computed Values**: Generate and transform values based on other form fields.
 - **Customizable Styling**: Control appearance with flexible styling options.
 - **Form Actions**: Customizable buttons with support for additional custom actions.
@@ -334,7 +340,195 @@ The following input types are supported:
 | ---------- | ------------ | ------------------------------------- |
 | `children` | `FormSchema` | Schema for the repeatable field group |
 
-### Form Events
+## Multi-Step Forms
+
+vForm supports multi-step forms with configurable step indicators, validation, and smart navigation. Multi-step forms break complex forms into manageable sections, improving user experience and data collection.
+
+### Basic Multi-Step Setup
+
+To create a multi-step form, define a `multiStepConfig` prop:
+
+```vue
+<template>
+  <v-form
+    :multi-step-config="multiStepConfig"
+    @multi-step-submit="handleSubmit"
+    @step-change="handleStepChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { FormSchema, MultiStepConfig } from '@uniquedj95/vform';
+
+const multiStepConfig: MultiStepConfig = {
+  steps: [
+    {
+      id: 'personal',
+      title: 'Personal Information',
+      subtitle: 'Basic details about you',
+      schema: {
+        firstName: {
+          type: 'TextInput',
+          label: 'First Name',
+          required: true,
+        },
+        lastName: {
+          type: 'TextInput',
+          label: 'Last Name',
+          required: true,
+        },
+      },
+    },
+    {
+      id: 'contact',
+      title: 'Contact Details',
+      subtitle: 'How we can reach you',
+      schema: {
+        email: {
+          type: 'EmailInput',
+          label: 'Email',
+          required: true,
+        },
+        phone: {
+          type: 'TextInput',
+          label: 'Phone Number',
+        },
+      },
+    },
+    {
+      id: 'review',
+      title: 'Review & Submit',
+      subtitle: 'Final review of your information',
+      schema: {
+        comments: {
+          type: 'TextAreaInput',
+          label: 'Additional Comments',
+        },
+      },
+    },
+  ],
+  stepPosition: 'top',
+  showProgress: true,
+  allowStepNavigation: true,
+};
+
+function handleSubmit(allData: MultiStepFormData) {
+  console.log('All form data:', allData);
+}
+
+function handleStepChange(stepIndex: number, stepId: string) {
+  console.log(`Moved to step ${stepIndex + 1}: ${stepId}`);
+}
+</script>
+```
+
+### Step Configuration
+
+Each step in the multi-step configuration supports the following properties:
+
+| Property     | Type         | Description                                   | Required |
+| ------------ | ------------ | --------------------------------------------- | -------- |
+| `id`         | `string`     | Unique identifier for the step                | Yes      |
+| `title`      | `string`     | Display title for the step                    | Yes      |
+| `subtitle`   | `string`     | Optional subtitle/description for the step    | No       |
+| `schema`     | `FormSchema` | Schema object containing fields for this step | Yes      |
+| `validation` | `function`   | Custom validation function for the step       | No       |
+
+### Step Indicator Positioning
+
+The step indicator can be positioned in four different locations:
+
+```typescript
+const multiStepConfig: MultiStepConfig = {
+  stepPosition: 'top', // Above the form content (default)
+  // stepPosition: 'bottom', // Below the form content
+  // stepPosition: 'left',   // Left side of the form content
+  // stepPosition: 'right',  // Right side of the form content
+  // ... other config
+};
+```
+
+#### Position Behaviors
+
+- **Top/Bottom**: Step indicators display horizontally with connecting lines
+- **Left**: Step indicators display vertically with titles to the right of numbered markers
+- **Right**: Step indicators display vertically with titles to the left of numbered markers
+
+### Step Validation
+
+Multi-step forms include built-in validation that prevents users from proceeding to the next step until the current step is valid:
+
+- **Next Step**: Validates all fields in the current step before advancing
+- **Step Navigation**: When clicking step indicators, validates current step if moving forward
+- **Submit**: Validates all steps before final submission
+
+```typescript
+const multiStepConfig: MultiStepConfig = {
+  steps: [
+    {
+      id: 'personal',
+      title: 'Personal Information',
+      schema: {
+        /* fields */
+      },
+      // Optional custom validation for this step
+      validation: async (stepData, computedData) => {
+        const errors: string[] = [];
+
+        // Custom validation logic
+        if (stepData.firstName && stepData.lastName && stepData.firstName === stepData.lastName) {
+          errors.push('First and last name cannot be the same');
+        }
+
+        return errors;
+      },
+    },
+    // ... other steps
+  ],
+  // ... other config
+};
+```
+
+### Multi-Step Configuration Options
+
+| Property              | Type                                     | Description                                   | Default  |
+| --------------------- | ---------------------------------------- | --------------------------------------------- | -------- |
+| `steps`               | `FormStep[]`                             | Array of step configurations                  | Required |
+| `stepPosition`        | `'top' \| 'bottom' \| 'left' \| 'right'` | Position of the step indicator                | `'top'`  |
+| `showProgress`        | `boolean`                                | Show progress bar and step counter            | `true`   |
+| `allowStepNavigation` | `boolean`                                | Allow clicking on step indicators to navigate | `false`  |
+
+### Multi-Step Events
+
+| Event         | Description                               | Signature                                                       |
+| ------------- | ----------------------------------------- | --------------------------------------------------------------- |
+| `step-change` | Emitted when user navigates between steps | `(stepIndex: number, stepId: string) => void`                   |
+| `submit`      | Emitted when multi-step form is submitted | `(allData: FormData, multiStepData: MultiStepFormData) => void` |
+
+The `submit` event provides both the combined data from all steps and the per-step data structure:
+
+```typescript
+// multi-step data structure
+multiStepData: MultiStepFormData = {
+  steps: {
+    personal: { firstName: 'John', lastName: 'Doe' },
+    contact: { email: 'john@example.com', phone: '...' },
+    review: { comments: '...' },
+  },
+  computedSteps: {
+    /* computed values per step */
+  },
+  allFormData: {
+    /* all form Data raw values */
+  },
+  allComputedData: {
+    /* all form data computed values */
+  },
+};
+```
+
+## Form Events
 
 | Event    | Description                                                      | Signature                                                      |
 | -------- | ---------------------------------------------------------------- | -------------------------------------------------------------- |
@@ -609,40 +803,21 @@ When using SelectInput or CheckboxInput, you can add descriptions to options:
 }
 ```
 
-#### Date Pattern Formatting
-
-The DateInput component supports various date pattern formats:
-
-| Pattern | Description                                     | Example                 |
-| ------- | ----------------------------------------------- | ----------------------- |
-| DD      | Day of the month, two digits with leading zeros | 01 to 31                |
-| D       | Day of the month without leading zeros          | 1 to 31                 |
-| MMM     | Month name, abbreviated                         | Jan, Feb, Mar, etc.     |
-| MMMM    | Month name, full                                | January, February, etc. |
-| MM      | Month as a number, with leading zeros           | 01 to 12                |
-| M       | Month as a number, without leading zeros        | 1 to 12                 |
-| YYYY    | Year, four digits                               | 2025                    |
-| YY      | Year, two digits                                | 25                      |
-| HH      | Hour, two digits with leading zeros (24-hour)   | 00 to 23                |
-| mm      | Minutes, two digits with leading zeros          | 00 to 59                |
-| ss      | Seconds, two digits with leading zeros          | 00 to 59                |
-
-Example: `DD/MMM/YYYY HH:mm:ss` would format as `07/Jun/2025 14:30:00`
-
 ### Form Props
 
-| Property           | Type                           | Description                                                            | Default    |
-| ------------------ | ------------------------------ | ---------------------------------------------------------------------- | ---------- |
-| `schema`           | `FormSchema`                   | The schema object defining the form structure and field configurations | _Required_ |
-| `showLabels`       | `boolean`                      | Determines if labels are displayed for each field                      | `true`     |
-| `showClearButton`  | `boolean`                      | Controls the visibility of the clear/reset button                      | `true`     |
-| `showCancelButton` | `boolean`                      | Controls the visibility of the cancel button                           | `true`     |
-| `buttonPlacement`  | `'start' \| 'middle' \| 'end'` | Specifies the alignment of action buttons within the form              | `'start'`  |
-| `submitButtonText` | `string`                       | Custom text for the submit button                                      | `"Submit"` |
-| `clearButtonText`  | `string`                       | Custom text for the clear/reset button                                 | `"Reset"`  |
-| `cancelButtonText` | `string`                       | Custom text for the cancel button                                      | `"Cancel"` |
-| `hideButtons`      | `boolean`                      | When true, hides all action buttons                                    | `false`    |
-| `customButtons`    | `Array<CustomButton>`          | Array of custom buttons to add to the form                             | `[]`       |
+| Property           | Type                           | Description                                                            | Default     |
+| ------------------ | ------------------------------ | ---------------------------------------------------------------------- | ----------- |
+| `schema`           | `FormSchema`                   | The schema object defining the form structure and field configurations | _Required_  |
+| `multiStepConfig`  | `MultiStepConfig`              | Configuration for multi-step forms (optional)                          | `undefined` |
+| `showLabels`       | `boolean`                      | Determines if labels are displayed for each field                      | `true`      |
+| `showClearButton`  | `boolean`                      | Controls the visibility of the clear/reset button                      | `true`      |
+| `showCancelButton` | `boolean`                      | Controls the visibility of the cancel button                           | `true`      |
+| `buttonPlacement`  | `'start' \| 'middle' \| 'end'` | Specifies the alignment of action buttons within the form              | `'start'`   |
+| `submitButtonText` | `string`                       | Custom text for the submit button                                      | `"Submit"`  |
+| `clearButtonText`  | `string`                       | Custom text for the clear/reset button                                 | `"Reset"`   |
+| `cancelButtonText` | `string`                       | Custom text for the cancel button                                      | `"Cancel"`  |
+| `hideButtons`      | `boolean`                      | When true, hides all action buttons                                    | `false`     |
+| `customButtons`    | `Array<CustomButton>`          | Array of custom buttons to add to the form                             | `[]`        |
 
 ## Issue Reporting and Feedback
 
@@ -676,6 +851,11 @@ import {
   FormOptions,
   GridSize,
   CustomButton,
+  // Multi-step types
+  MultiStepConfig,
+  MultiStepFormData,
+  FormStep,
+  StepPosition,
 } from '@uniquedj95/vform';
 ```
 

package/dist/components/inputs/SelectInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/SelectInput.vue"],"names":[],"mappings":"AAiDA;AA0aA,OAAO,EAAiB,QAAQ,EAA6C,MAAM,KAAK,CAAC;AAEzF,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,SAAS,EAAU,MAAM,SAAS,CAAC;AAmFxE,iBAAS,OAAO,SAMf;AA6ID,iBAAe,aAAa,CAAC,GAAG,CAAC,EAAE,GAAG,iBAgBrC;;YA8XmB,QAAQ,CAAC,UAAU,CAAC;UACtB,QAAQ,CAAC,cAAc,CAAC;;;;;;;;;;;;YADtB,QAAQ,CAAC,UAAU,CAAC;UACtB,QAAQ,CAAC,cAAc,CAAC;;;;;;;;;;;;;;;;;;AAX1C,wBAiBG"}
+{"version":3,"file":"SelectInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/SelectInput.vue"],"names":[],"mappings":"AAiDA;AAodA,OAAO,EAAiB,QAAQ,EAA6C,MAAM,KAAK,CAAC;AAEzF,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,SAAS,EAAU,MAAM,SAAS,CAAC;AAoFxE,iBAAS,OAAO,SAMf;AAkJD,iBAAe,aAAa,CAAC,GAAG,CAAC,EAAE,GAAG,iBAgBrC;;YAkamB,QAAQ,CAAC,UAAU,CAAC;UACtB,QAAQ,CAAC,cAAc,CAAC;;;;;;;;;;;;YADtB,QAAQ,CAAC,UAAU,CAAC;UACtB,QAAQ,CAAC,cAAc,CAAC;;;;;;;;;;;;;;;;;;AAX1C,wBAiBG"}

package/dist/components/shared/StepIndicator.vue.d.ts

@@ -0,0 +1,18 @@
+import { FormStep, StepPosition } from '../../types';
+interface StepIndicatorProps {
+    steps: FormStep[];
+    activeStepIndex: number;
+    position: StepPosition;
+    showProgress?: boolean;
+    allowNavigation?: boolean;
+}
+declare const _default: import('vue').DefineComponent<StepIndicatorProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "step-click": (stepIndex: number) => any;
+}, string, import('vue').PublicProps, Readonly<StepIndicatorProps> & Readonly<{
+    "onStep-click"?: ((stepIndex: number) => any) | undefined;
+}>, {
+    showProgress: boolean;
+    allowNavigation: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=StepIndicator.vue.d.ts.map

package/dist/components/shared/StepIndicator.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepIndicator.vue.d.ts","sourceRoot":"","sources":["../../../src/components/shared/StepIndicator.vue"],"names":[],"mappings":"AAoDA;AA2SA,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEtD,UAAU,kBAAkB;IAC1B,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,YAAY,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;;;;;;kBAFgB,OAAO;qBACJ,OAAO;;AA6J3B,wBASG"}

package/dist/components/vForm.vue.d.ts

@@ -1,6 +1,7 @@
-import { FormData, ComputedData, FormSchema, CustomButton } from '../types';
+import { FormData, ComputedData, FormSchema, CustomButton, MultiStepConfig, MultiStepFormData } from '../types';
 interface FormProps {
-    schema: FormSchema;
+    schema?: FormSchema;
+    multiStepConfig?: MultiStepConfig;
     showLabels?: boolean;
     showClearButton?: boolean;
     showCancelButton?: boolean;
@@ -11,21 +12,34 @@ interface FormProps {
     hideButtons?: boolean;
     customButtons?: Array<CustomButton>;
 }
+declare function handleClearAction(): void;
+declare function handleNextStep(): Promise<void>;
+declare function handlePreviousStep(): Promise<void>;
+declare function handleStepClick(stepIndex: number): Promise<void>;
 declare const _default: import('vue').DefineComponent<FormProps, {
-    resetForm: () => void;
+    resetForm: typeof handleClearAction;
     isFormValid: () => Promise<boolean>;
-    resolveData: () => {
+    resolveData: () => MultiStepFormData | {
         formData: FormData;
         computedData: ComputedData;
     };
+    nextStep: typeof handleNextStep;
+    previousStep: typeof handlePreviousStep;
+    goToStep: typeof handleStepClick;
+    getCurrentStep: () => import('../types').FormStep | undefined;
+    getCurrentStepIndex: () => number;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     clear: () => any;
-    submit: (formData: FormData, computedFormData: ComputedData) => any;
     cancel: () => any;
+    submit: (formData: FormData, computedFormData: ComputedData) => any;
+    "multi-step-submit": (data: MultiStepFormData) => any;
+    "step-change": (stepIndex: number, stepId: string) => any;
 }, string, import('vue').PublicProps, Readonly<FormProps> & Readonly<{
     onClear?: (() => any) | undefined;
-    onSubmit?: ((formData: FormData, computedFormData: ComputedData) => any) | undefined;
     onCancel?: (() => any) | undefined;
+    onSubmit?: ((formData: FormData, computedFormData: ComputedData) => any) | undefined;
+    "onMulti-step-submit"?: ((data: MultiStepFormData) => any) | undefined;
+    "onStep-change"?: ((stepIndex: number, stepId: string) => any) | undefined;
 }>, {
     showLabels: boolean;
     showClearButton: boolean;
@@ -37,6 +51,6 @@ declare const _default: import('vue').DefineComponent<FormProps, {
     hideButtons: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     dynamicRefs: unknown[];
-}, any>;
+}, HTMLDivElement>;
 export default _default;
 //# sourceMappingURL=vForm.vue.d.ts.map

package/dist/components/vForm.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vForm.vue.d.ts","sourceRoot":"","sources":["../../src/components/vForm.vue"],"names":[],"mappings":"AA6CA;AA+JA,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAKhF,UAAU,SAAS;IACjB,MAAM,EAAE,UAAU,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;CACrC;;;;;;;;;;;;;;;;;gBATc,OAAO;qBACF,OAAO;sBACN,OAAO;qBACR,OAAO,GAAG,QAAQ,GAAG,KAAK;sBACzB,MAAM;qBACP,MAAM;sBACL,MAAM;iBACX,OAAO;;;;AAoUvB,wBAWG"}
+{"version":3,"file":"vForm.vue.d.ts","sourceRoot":"","sources":["../../src/components/vForm.vue"],"names":[],"mappings":"AAqLA;AA+jBA,OAAO,KAAK,EACV,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,eAAe,EACf,iBAAiB,EAClB,MAAM,SAAS,CAAC;AAOjB,UAAU,SAAS;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;CACrC;AAuGD,iBAAS,iBAAiB,SAOzB;AAiBD,iBAAe,cAAc,kBAe5B;AAED,iBAAe,kBAAkB,kBAOhC;AAED,iBAAe,eAAe,CAAC,SAAS,EAAE,MAAM,iBAiB/C;;;;;;;;;;;;;;;;;;;;;;;;;;gBAnLc,OAAO;qBACF,OAAO;sBACN,OAAO;qBACR,OAAO,GAAG,QAAQ,GAAG,KAAK;sBACzB,MAAM;qBACP,MAAM;sBACL,MAAM;iBACX,OAAO;;;;AA+1BvB,wBAWG"}

package/dist/composables/useMultiStepForm.d.ts

@@ -0,0 +1,27 @@
+import { MultiStepConfig, MultiStepFormData, FormData, ComputedData, FormStep } from '../types';
+export declare function useMultiStepForm(config: MultiStepConfig): {
+    currentStepIndex: import('vue').Ref<number, number>;
+    currentStep: import('vue').ComputedRef<FormStep>;
+    stepData: import('vue').Ref<Record<string, FormData>, Record<string, FormData>>;
+    stepComputedData: import('vue').Ref<Record<string, ComputedData>, Record<string, ComputedData>>;
+    stepValidationErrors: import('vue').Ref<Record<string, string[]>, Record<string, string[]>>;
+    isFirstStep: import('vue').ComputedRef<boolean>;
+    isLastStep: import('vue').ComputedRef<boolean>;
+    canGoNext: import('vue').ComputedRef<boolean>;
+    canGoPrevious: import('vue').ComputedRef<boolean>;
+    totalSteps: import('vue').ComputedRef<number>;
+    progressPercentage: import('vue').ComputedRef<number>;
+    allFormData: import('vue').ComputedRef<FormData>;
+    allComputedData: import('vue').ComputedRef<ComputedData>;
+    updateStepData: (stepId: string, data: FormData) => void;
+    updateStepComputedData: (stepId: string, data: ComputedData) => void;
+    clearStepData: (stepId: string) => void;
+    validateCurrentStep: () => Promise<boolean>;
+    goToStep: (stepIndex: number) => Promise<boolean>;
+    nextStep: () => Promise<boolean>;
+    previousStep: () => Promise<boolean>;
+    resetForm: () => void;
+    validateAllSteps: () => Promise<boolean>;
+    getMultiStepFormData: () => MultiStepFormData;
+};
+//# sourceMappingURL=useMultiStepForm.d.ts.map

package/dist/composables/useMultiStepForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMultiStepForm.d.ts","sourceRoot":"","sources":["../../src/composables/useMultiStepForm.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,iBAAiB,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEpG,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,eAAe;;;;;;;;;;;;;;6BAmDtB,MAAM,QAAQ,QAAQ;qCAId,MAAM,QAAQ,YAAY;4BAInC,MAAM;+BASC,OAAO,CAAC,OAAO,CAAC;0BAqBnB,MAAM,KAAG,OAAO,CAAC,OAAO,CAAC;oBAiBjC,OAAO,CAAC,OAAO,CAAC;wBAOZ,OAAO,CAAC,OAAO,CAAC;;4BAgBZ,OAAO,CAAC,OAAO,CAAC;gCAmBlB,iBAAiB;EAuCnD"}