@uniquedj95/vform 3.5.2 → 3.6.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.5.2-blue.svg)](https://github.com/uniquedj95/vform/releases)
+[![Version](https://img.shields.io/badge/version-3.6.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/)
@@ -31,6 +31,7 @@ A dynamic form builder for Vue.js with Ionic components
   - [Basic Multi-Step Setup](#basic-multi-step-setup)
   - [Step Configuration](#step-configuration)
   - [Step Indicator Positioning](#step-indicator-positioning)
+  - [Custom Components in Steps](#custom-components-in-steps)
   - [Step Validation](#step-validation)
 - [Form Sections](#form-sections)
   - [Basic Section Usage](#basic-section-usage)
@@ -71,6 +72,7 @@ The demo showcases:
 - **Basic Forms**: All input types and basic functionality
 - **Form Sections**: Organized forms with section headers and titles
 - **Multi-Step Forms**: Step indicators, validation, and smart navigation
+- **Custom Components**: Integration of custom Vue components within multi-step workflows
 - **Advanced Features**: Masking, computed fields, custom buttons
 - **Validation Examples**: Custom validators and error handling
 - **Dependent Fields**: Dynamic field behavior and cascading options
@@ -90,6 +92,7 @@ npm run demo:update
 ## Features
 
 - **Multi-Step Forms**: Create guided, step-by-step forms with configurable step indicators, validation, and smart navigation.
+- **Custom Components**: Integrate custom Vue components directly into multi-step forms for advanced visualizations and workflows.
 - **Form Sections**: Organize forms into logical sections with titles and subtitles for better user experience.
 - **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.
@@ -100,7 +103,7 @@ npm run demo:update
 - **Repeatable Field Groups**: Create dynamic, repeatable sets of form fields.
 - **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.
+- **Customizable Styling**: Complete control over appearance with `className` property support across all input components and sections.
 - **Form Actions**: Customizable buttons with support for additional custom actions.
 - **Rich Text Areas**: Textarea inputs with auto-grow capability and character counting.
 - **Form Field Dependencies**: Create relationships between fields that react to changes.
@@ -255,18 +258,18 @@ const formSchema: FormSchema = {
 
 The following input types are supported:
 
-| Type            | Description                                  |
-| --------------- | -------------------------------------------- |
-| `TextInput`     | Standard text input field                    |
-| `DateInput`     | Date picker with customizable format         |
-| `NumberInput`   | Numeric input field                          |
-| `EmailInput`    | Input field with email validation            |
-| `PasswordInput` | Secure password input with toggle visibility |
-| `TextAreaInput` | Multi-line text input                        |
-| `SelectInput`   | Dropdown selection                           |
-| `CheckboxInput` | Toggle on/off input                          |
-| `RepeatInput`   | Repeatable group of fields                   |
-| `FormSection`   | Section header with title and subtitle       |
+| Type            | Description                                                     |
+| --------------- | --------------------------------------------------------------- |
+| `TextInput`     | Standard text input field                                       |
+| `DateInput`     | Date picker with customizable format                            |
+| `NumberInput`   | Numeric input field                                             |
+| `EmailInput`    | Input field with email validation                               |
+| `PasswordInput` | Secure password input with toggle visibility                    |
+| `TextAreaInput` | Multi-line text input                                           |
+| `SelectInput`   | Dropdown selection                                              |
+| `CheckboxInput` | Toggle on/off input                                             |
+| `RepeatInput`   | Repeatable group of fields                                      |
+| `FormSection`   | Section header with title and subtitle (unified with FormField) |
 
 #### Common Properties
 
@@ -284,12 +287,13 @@ The following input types are supported:
 
 #### Layout Properties
 
-| Property | Type       | Description                                                   |
-| -------- | ---------- | ------------------------------------------------------------- |
-| `grid`   | `GridSize` | Specifies responsive grid sizes: `xs`, `sm`, `md`, `lg`, `xl` |
-| `icon`   | `string`   | Icon to display within the input field                        |
-| `prefix` | `string`   | Text to display before the input value                        |
-| `suffix` | `string`   | Text to display after the input value                         |
+| Property    | Type       | Description                                                   |
+| ----------- | ---------- | ------------------------------------------------------------- |
+| `grid`      | `GridSize` | Specifies responsive grid sizes: `xs`, `sm`, `md`, `lg`, `xl` |
+| `className` | `string`   | Custom CSS class for styling input fields and sections        |
+| `icon`      | `string`   | Icon to display within the input field                        |
+| `prefix`    | `string`   | Text to display before the input value                        |
+| `suffix`    | `string`   | Text to display after the input value                         |
 
 #### Validation and Dynamic Behavior
 
@@ -346,6 +350,84 @@ The following input types are supported:
 | ---------- | ------------ | ------------------------------------- |
 | `children` | `FormSchema` | Schema for the repeatable field group |
 
+### Custom Styling with className
+
+All form input components now support the `className` property for custom styling. This allows you to apply CSS classes to individual input fields and form sections for complete visual customization.
+
+#### Usage Examples
+
+```typescript
+const formSchema: FormSchema = {
+  // Custom styled text input
+  customInput: {
+    type: 'TextInput',
+    label: 'Styled Input',
+    className: 'my-custom-input',
+    placeholder: 'Enter text here',
+  },
+
+  // Custom styled section
+  styledSection: {
+    type: 'FormSection',
+    title: 'Custom Section',
+    subtitle: 'This section has custom styling',
+    className: 'my-custom-section',
+  },
+
+  // Custom styled select input
+  styledSelect: {
+    type: 'SelectInput',
+    label: 'Styled Select',
+    className: 'my-custom-select',
+    options: [
+      { label: 'Option 1', value: '1' },
+      { label: 'Option 2', value: '2' },
+    ],
+  },
+};
+```
+
+#### CSS Implementation
+
+```css
+/* Custom input styling */
+.my-custom-input {
+  --background: #f8f9fa;
+  --border-color: #007bff;
+  --color: #333;
+}
+
+/* Custom section styling */
+.my-custom-section .form-section-title {
+  color: #007bff;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.my-custom-section .form-section-subtitle {
+  color: #6c757d;
+  font-style: italic;
+}
+
+/* Custom select styling */
+.my-custom-select {
+  --background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --color: white;
+}
+```
+
+#### Component Support
+
+The `className` property is supported across all input components:
+
+- **BaseInput**: Applied to `ion-input` element (covers TextInput, EmailInput, NumberInput, PasswordInput, DateInput)
+- **TextAreaInput**: Applied to `ion-textarea` element
+- **SelectInput**: Applied to the wrapper container
+- **CheckboxInput**: Applied to `ion-checkbox` element
+- **RadioInput**: Applied to `ion-radio-group` element
+- **RepeatInput**: Applied to each repeat group wrapper
+- **FormSection**: Applied to the section container
+
 ## 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.
@@ -433,13 +515,79 @@ function handleStepChange(stepIndex: number, stepId: string) {
 
 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       |
+| 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                            | No       |
+| `component`      | `Component`  | Custom Vue component to render instead of a schema                       | No       |
+| `componentProps` | `Object`     | Props to pass to the custom component                                    | No       |
+| `condition`      | `function`   | Function that determines if the step should be shown, based on form data | No       |
+| `validation`     | `function`   | Custom validation function for the step                                  | No       |
+
+\*Either `schema` or `component` must be provided.
+
+### Custom Components in Steps
+
+vForm allows you to use custom Vue components in multi-step forms instead of schema-defined fields. This is useful for complex steps that require custom layouts, visualizations, or integration with other components.
+
+```vue
+<template>
+  <v-form :multi-step-config="multiStepConfig" @multi-step-submit="handleSubmit" />
+</template>
+
+<script setup lang="ts">
+import { MultiStepConfig } from '@uniquedj95/vform';
+import PreviousResultsTable from './components/PreviousResultsTable.vue';
+
+const multiStepConfig: MultiStepConfig = {
+  steps: [
+    {
+      id: 'patient-info',
+      title: 'Patient Information',
+      schema: {
+        // Regular form schema for step 1
+        patientId: {
+          type: 'TextInput',
+          label: 'Patient ID',
+          required: true,
+        },
+      },
+    },
+    {
+      id: 'previous-results',
+      title: 'Previous ANC Results',
+      // Use a custom component instead of a schema
+      component: PreviousResultsTable,
+      componentProps: {
+        // Props to pass to your component
+        clinicId: 123,
+        showDetails: true,
+      },
+    },
+    {
+      id: 'new-visit',
+      title: 'New ANC Visit',
+      schema: {
+        // Back to regular schema for step 3
+        visitDate: {
+          type: 'DateInput',
+          label: 'Visit Date',
+          required: true,
+        },
+      },
+    },
+  ],
+};
+</script>
+```
+
+Custom components need to implement a `validate()` method that returns a boolean to integrate with the form validation workflow, and emit an `update:data` event to pass data back to the form.
+
+For detailed implementation examples and best practices, see the [Custom Components Guide](./docs/CUSTOM_COMPONENTS.md).
+
+A complete working example is available in the demo app under `demo/src/examples/CustomComponentExample.vue` that demonstrates a real-world ANC (Antenatal Care) workflow using a custom component to display previous visit history.
 
 ### Step Indicator Positioning
 
@@ -461,6 +609,254 @@ const multiStepConfig: MultiStepConfig = {
 - **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
 
+### Conditional Steps
+
+vForm allows you to conditionally show or hide steps based on the values entered in previous steps. This is useful for creating dynamic workflows that adapt to user input.
+
+```vue
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { MultiStepConfig } from '@uniquedj95/vform';
+
+const multiStepConfig = reactive<MultiStepConfig>({
+  steps: [
+    {
+      id: 'account-type',
+      title: 'Account Type',
+      schema: {
+        accountType: {
+          type: 'SelectInput',
+          label: 'Account Type',
+          options: [
+            { label: 'Personal', value: 'personal' },
+            { label: 'Business', value: 'business' },
+          ],
+          value: 'personal',
+          required: true,
+        },
+      },
+    },
+    {
+      id: 'business-details',
+      title: 'Business Details',
+      schema: {
+        businessName: {
+          type: 'TextInput',
+          label: 'Business Name',
+          required: true,
+        },
+      },
+      // Only show this step if accountType is 'business'
+      // Using stepData with step ID to avoid field name conflicts
+      condition: (stepData, stepComputedData) => {
+        return /business/i.test(stepData['account-type'].accountType.label);
+      },
+    },
+    {
+      id: 'review',
+      title: 'Review',
+      schema: {
+        // Review fields
+      },
+    },
+  ],
+});
+</script>
+```
+
+The `condition` function receives two arguments:
+
+- `stepData`: Form data organized by step ID to avoid key conflicts
+- `stepComputedData`: Computed data organized by step ID
+
+```typescript
+condition: (stepData, stepComputedData) => {
+  const firstStepData = stepData['first-step-id'];
+  return firstStepData.someField === 'expectedValue';
+};
+```
+
+When a step is hidden:
+
+- It won't be visible in the step indicator
+- Navigation will skip over it automatically
+- The step count and progress indicators will update accordingly
+- **Data behavior**: Form data from hidden steps is automatically cleared
+  - Hidden step data is not included in the final submission
+  - If a step becomes visible again, it starts with empty/default values
+  - This prevents processing of data that was meant to be skipped
+
+> **Note:** The data clearing happens whenever the visibility of steps changes. If you need
+> to preserve data from conditionally hidden steps for some specific use case, you can
+> store a backup of the data separately before the condition changes:
+>
+> ```typescript
+> // Save data before hiding a step
+> const backupData = { ...stepData.value['step-to-be-hidden'] };
+>
+> // Later, if you need to restore the data when the step becomes visible again
+> updateStepData('step-to-be-hidden', backupData);
+> ```
+
+### Custom Components in Steps
+
+vForm allows you to use custom Vue components in multi-step forms instead of schema-defined fields. This is useful for complex steps that require custom layouts, visualizations, or integration with other components.
+
+```vue
+<template>
+  <v-form
+    :multi-step-config="multiStepConfig"
+    @multi-step-submit="handleSubmit"
+    @step-change="handleStepChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { defineComponent, ref } from 'vue';
+import { MultiStepConfig } from '@uniquedj95/vform';
+import PreviousResultsTable from './PreviousResultsTable.vue';
+
+// Define your custom component
+const PreviousResultsTable = defineComponent({
+  props: {
+    data: Object,
+  },
+  setup(props, { emit }) {
+    // Implement your component logic
+    const tableData = ref([
+      /* your data */
+    ]);
+
+    // Custom validation function - will be called when clicking "Next"
+    function validate() {
+      // Add your validation logic here
+      return true; // Return true if valid, false if not
+    }
+
+    // Function to update data in the parent form
+    function updateData() {
+      emit('update:data', {
+        /* your component data */
+      });
+    }
+
+    return { tableData, validate, updateData };
+  },
+});
+
+const multiStepConfig: MultiStepConfig = {
+  steps: [
+    {
+      id: 'patient-info',
+      title: 'Patient Information',
+      schema: {
+        // Standard form schema
+        patientId: {
+          type: 'TextInput',
+          label: 'Patient ID',
+          required: true,
+        },
+        // More fields...
+      },
+    },
+    {
+      id: 'previous-results',
+      title: 'Previous ANC Results',
+      // Use a custom component instead of a schema
+      component: PreviousResultsTable,
+      componentProps: {
+        // Props to pass to your component
+        clinicId: 123,
+        showDetails: true,
+      },
+    },
+    {
+      id: 'new-visit',
+      title: 'New ANC Visit',
+      schema: {
+        // Back to standard form schema
+        visitDate: {
+          type: 'DateInput',
+          label: 'Visit Date',
+          required: true,
+        },
+        // More fields...
+      },
+    },
+  ],
+  stepPosition: 'top',
+  showProgress: true,
+  allowStepNavigation: true,
+};
+</script>
+```
+
+#### Custom Component Requirements
+
+To work properly with the multi-step form, your custom component should:
+
+1. **Accept Props**: Receive data and configuration through props
+2. **Emit Data Updates**: Use `emit('update:data', yourData)` to send data back to the form
+3. **Implement Validation**: Expose a `validate()` method that returns a boolean or promise resolving to boolean
+
+#### Component Interface Example
+
+```vue
+<template>
+  <div class="custom-step-component">
+    <!-- Your custom UI here -->
+    <data-table :data="tableData" @row-click="selectRow" />
+
+    <!-- You can still use Ionic components -->
+    <ion-button @click="handleSave">Save Selection</ion-button>
+  </div>
+</template>
+
+<script setup>
+import { ref, defineEmits, defineExpose } from 'vue';
+
+const props = defineProps({
+  // Your props here
+  initialData: Object,
+});
+
+const emits = defineEmits(['update:data']);
+
+const tableData = ref([]);
+const selectedRow = ref(null);
+
+function selectRow(row) {
+  selectedRow.value = row;
+  emitData();
+}
+
+function handleSave() {
+  // Your save logic
+  emitData();
+}
+
+function emitData() {
+  // Send data back to parent form
+  emits('update:data', {
+    selected: selectedRow.value,
+    // other data...
+  });
+}
+
+// This method will be called for validation
+function validate() {
+  // Return false if validation fails
+  if (!selectedRow.value) {
+    return false;
+  }
+  return true;
+}
+
+// Expose the validate method to the parent
+defineExpose({ validate });
+</script>
+```
+
 ### Step Validation
 
 Multi-step forms include built-in validation that prevents users from proceeding to the next step until the current step is valid:
@@ -517,30 +913,24 @@ The `submit` event provides both the combined data from all steps and the per-st
 ```typescript
 // multi-step data structure
 multiStepData: MultiStepFormData = {
-  steps: {
+  formData: {
     personal: { firstName: 'John', lastName: 'Doe' },
     contact: { email: 'john@example.com', phone: '...' },
     review: { comments: '...' },
   },
-  computedSteps: {
+  computedData: {
     /* computed values per step */
   },
-  allFormData: {
-    /* all form Data raw values */
-  },
-  allComputedData: {
-    /* all form data computed values */
-  },
 };
 ```
 
 ## Form Sections
 
-Form sections allow you to organize your forms into logical groups with titles and subtitles, making complex forms more readable and user-friendly. Sections are rendered as separate components within your form schema.
+Form sections allow you to organize your forms into logical groups with titles and subtitles, making complex forms more readable and user-friendly. Sections are now fully integrated into the FormField interface, providing a unified approach to form building.
 
 ### Basic Section Usage
 
-To create sections in your form, add `FormSection` items to your schema alongside regular form fields:
+To create sections in your form, add FormField items with `type: 'FormSection'` to your schema alongside regular form fields:
 
 ```vue
 <template>
@@ -621,7 +1011,7 @@ function handleSubmit(formData: FormData, computedData: ComputedData) {
 
 ### Section Configuration
 
-Form sections support the following configuration options:
+Form sections are FormField objects with `type: 'FormSection'` and support the following configuration options:
 
 | Property    | Type            | Description                                | Required |
 | ----------- | --------------- | ------------------------------------------ | -------- |
@@ -630,6 +1020,9 @@ Form sections support the following configuration options:
 | `subtitle`  | `string`        | Optional subtitle for additional context   |          |
 | `className` | `string`        | Optional CSS class for custom styling      |          |
 | `grid`      | `GridSize`      | Grid layout configuration for the section  |          |
+| `label`     | `string`        | Alternative to `title` for section header  |          |
+
+> **Note**: For sections, you can use either `title` or `label` for the section header. The `title` property is recommended for clarity, but `label` is supported for consistency with other form fields.
 
 #### Grid Configuration
 
@@ -676,11 +1069,13 @@ You can customize section appearance using the `className` property and your own
 
 #### Important Notes
 
+- **Unified Interface**: Form sections are now part of the FormField interface, providing a consistent API for all form elements
 - **Data Handling**: Form sections are display-only components and do not contribute to form data
 - **Validation**: Sections cannot have validation rules as they don't hold values
 - **Order**: Sections will appear in the form in the order they're defined in your schema
 - **Multi-Step Compatibility**: Sections work seamlessly within multi-step forms
 - **Responsive**: Sections automatically adapt to different screen sizes using Ionic's grid system
+- **Custom Styling**: Use the `className` property to apply custom CSS classes to sections
 
 ## Form Events
 

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

@@ -1 +1 @@
-{"version":3,"file":"BaseInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/BaseInput.vue"],"names":[],"mappings":"AA8BA;AAyEA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAMhE,KAAK,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,UAAU,CAAC;IAAC,IAAI,CAAC,EAAE,cAAc,CAAA;CAAE,CAAC;AAElE,QAAA,MAAM,KAAK,iEAAoE,CAAC;AAwChF,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC;CAClC,GAAG,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;AA8JhB,wBAUG"}
+{"version":3,"file":"BaseInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/BaseInput.vue"],"names":[],"mappings":"AAgCA;AA2EA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAMhE,KAAK,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,UAAU,CAAC;IAAC,IAAI,CAAC,EAAE,cAAc,CAAA;CAAE,CAAC;AAElE,QAAA,MAAM,KAAK,iEAAoE,CAAC;AAwChF,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC;CAClC,GAAG,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;AAkKhB,wBAUG"}

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/CheckboxInput.vue"],"names":[],"mappings":"AAcA;AAuDA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAKhD,KAAK,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,UAAU,CAAA;CAAE,CAAC;AAE3C,QAAA,MAAM,KAAK,iEAAoE,CAAC;AAYhF,iBAAS,OAAO,SAIf;AAsBD,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC;CAClC,GAAG,WAAW,CAAC;;;;;;;;;;;;;;;;;;;AAmFhB,wBAUG"}
+{"version":3,"file":"CheckboxInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/CheckboxInput.vue"],"names":[],"mappings":"AAgBA;AAyDA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAKhD,KAAK,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,UAAU,CAAA;CAAE,CAAC;AAE3C,QAAA,MAAM,KAAK,iEAAoE,CAAC;AAYhF,iBAAS,OAAO,SAIf;AAsBD,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC;CAClC,GAAG,WAAW,CAAC;;;;;;;;;;;;;;;;;;;AAuFhB,wBAUG"}

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

@@ -1 +1 @@
-{"version":3,"file":"RadioInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/RadioInput.vue"],"names":[],"mappings":"AAyBA;AAiFA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAU,MAAM,SAAS,CAAC;AAKxD,KAAK,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,UAAU,CAAA;CAAE,CAAC;AAE3C,QAAA,MAAM,KAAK,iEAAoE,CAAC;AAYhF,iBAAS,OAAO,SAIf;AAqCD,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC;CAClC,GAAG,WAAW,CAAC;;;;;;;;;;;;;;;;;;;AA6HhB,wBAUG"}
+{"version":3,"file":"RadioInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/RadioInput.vue"],"names":[],"mappings":"AA2BA;AAmFA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAU,MAAM,SAAS,CAAC;AAKxD,KAAK,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,UAAU,CAAA;CAAE,CAAC;AAE3C,QAAA,MAAM,KAAK,iEAAoE,CAAC;AAYhF,iBAAS,OAAO,SAIf;AAqCD,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC;CAClC,GAAG,WAAW,CAAC;;;;;;;;;;;;;;;;;;;AAiIhB,wBAUG"}

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

@@ -1 +1 @@
-{"version":3,"file":"RepeatInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/RepeatInput.vue"],"names":[],"mappings":"AAoCA;AA2HA,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAU,MAAM,SAAS,CAAC;AAOhF,UAAU,MAAM;IACd,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,IAAI,EAAE,QAAQ,CAAC;IACf,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,KAAK,WAAW,GAAG,MAAM,CAAC;AAE1B,QAAA,MAAM,KAAK,iEAAoE,CAAC;AA2ChF,iBAAS,OAAO,SAEf;AAED,iBAAS,SAAS,aAEjB;AAED,iBAAe,aAAa,kBAE3B;AAiBD,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC;CAClC,GAAG,WAAW,CAAC;;;;;;;;;;;;AAyLhB,wBASG"}
+{"version":3,"file":"RepeatInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/RepeatInput.vue"],"names":[],"mappings":"AAwDA;AAgLA,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAU,MAAM,SAAS,CAAC;AAOhF,UAAU,MAAM;IACd,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,IAAI,EAAE,QAAQ,CAAC;IACf,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,KAAK,WAAW,GAAG,MAAM,CAAC;AAE1B,QAAA,MAAM,KAAK,iEAAoE,CAAC;AA2ChF,iBAAS,OAAO,SAEf;AAED,iBAAS,SAAS,aAEjB;AAED,iBAAe,aAAa,kBAE3B;AAiBD,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC;CAClC,GAAG,WAAW,CAAC;;;;;;;;;;;;AA0OhB,wBASG"}

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":"AAuDA;AA+dA,OAAO,EAAiB,QAAQ,EAA6C,MAAM,KAAK,CAAC;AAEzF,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,SAAS,EAAU,MAAM,SAAS,CAAC;AAwFxE,iBAAS,OAAO,SAMf;AAkJD,iBAAe,aAAa,CAAC,GAAG,CAAC,EAAE,GAAG,iBAgBrC;;YAqamB,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":"AA6DA;AAqeA,OAAO,EAAiB,QAAQ,EAA6C,MAAM,KAAK,CAAC;AAEzF,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,SAAS,EAAU,MAAM,SAAS,CAAC;AAwFxE,iBAAS,OAAO,SAMf;AAkJD,iBAAe,aAAa,CAAC,GAAG,CAAC,EAAE,GAAG,iBAgBrC;;YAwamB,QAAQ,CAAC,UAAU,CAAC;UACtB,QAAQ,CAAC,cAAc,CAAC;;;;;;;;;;;;YADtB,QAAQ,CAAC,UAAU,CAAC;UACtB,QAAQ,CAAC,cAAc,CAAC;;;;;;;;;;;;;;;;;;AAX1C,wBAiBG"}

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

@@ -1 +1 @@
-{"version":3,"file":"TextAreaInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/TextAreaInput.vue"],"names":[],"mappings":"AA4BA;AAgEA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAKhD,KAAK,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,UAAU,CAAA;CAAE,CAAC;AAE3C,QAAA,MAAM,KAAK,iEAAoE,CAAC;AAiChF,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC;CAClC,GAAG,WAAW,CAAC;;;;;;;;;;;;;;;;;;;AAuHhB,wBAUG"}
+{"version":3,"file":"TextAreaInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/TextAreaInput.vue"],"names":[],"mappings":"AA8BA;AAkEA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAKhD,KAAK,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,UAAU,CAAA;CAAE,CAAC;AAE3C,QAAA,MAAM,KAAK,iEAAoE,CAAC;AAiChF,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC;CAClC,GAAG,WAAW,CAAC;;;;;;;;;;;;;;;;;;;AA2HhB,wBAUG"}

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

@@ -50,6 +50,7 @@ declare const _default: import('vue').DefineComponent<FormProps, {
     cancelButtonText: string;
     hideButtons: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    customComponentRef: unknown;
     dynamicRefs: unknown[];
 }, HTMLDivElement>;
 export default _default;

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":"AAmLA;AAukBA,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;AAwGD,iBAAS,iBAAiB,SAOzB;AAiBD,iBAAe,cAAc,kBAe5B;AAED,iBAAe,kBAAkB,kBAOhC;AAED,iBAAe,eAAe,CAAC,SAAS,EAAE,MAAM,iBAiB/C;;;;;;;;;;;;;;;;;;;;;;;;;;gBApLc,OAAO;qBACF,OAAO;sBACN,OAAO;qBACR,OAAO,GAAG,QAAQ,GAAG,KAAK;sBACzB,MAAM;qBACP,MAAM;sBACL,MAAM;iBACX,OAAO;;;;AAu2BvB,wBAWG"}
+{"version":3,"file":"vForm.vue.d.ts","sourceRoot":"","sources":["../../src/components/vForm.vue"],"names":[],"mappings":"AA6LA;AA2nBA,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;AAqHD,iBAAS,iBAAiB,SAOzB;AAiBD,iBAAe,cAAc,kBAyB5B;AAED,iBAAe,kBAAkB,kBAOhC;AAED,iBAAe,eAAe,CAAC,SAAS,EAAE,MAAM,iBA2B/C;;;;;;;;;;;;;;;;;;;;;;;;;;gBArNc,OAAO;qBACF,OAAO;sBACN,OAAO;qBACR,OAAO,GAAG,QAAQ,GAAG,KAAK;sBACzB,MAAM;qBACP,MAAM;sBACL,MAAM;iBACX,OAAO;;;;;AAi7BvB,wBAWG"}

package/dist/composables/useMultiStepForm.d.ts

@@ -5,14 +5,13 @@ export declare function useMultiStepForm(config: MultiStepConfig): {
     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[]>>;
+    visibleSteps: import('vue').ComputedRef<FormStep[]>;
     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;

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

@@ -1 +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;AAGpG,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,eAAe;;;;;;;;;;;;;;6BAwDtB,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"}
+{"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;AAGpG,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,eAAe;;;;;;;;;;;;;6BAoFtB,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;wBAQZ,OAAO,CAAC,OAAO,CAAC;;4BAiBZ,OAAO,CAAC,OAAO,CAAC;gCAoBlB,iBAAiB;EAoCnD"}