@uniquedj95/vform 3.5.2 → 3.6.0

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.0-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.
@@ -433,13 +436,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 +530,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, defineProps, 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,20 +834,14 @@ 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 */
-  },
 };
 ```
 

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":"AA+BA;AA0EA,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;;;;;;;;;;;;;;;;;;;;AAgKhB,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":"AAeA;AAwDA,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;;;;;;;;;;;;;;;;;;;AAqFhB,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":"AA0BA;AAkFA,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;;;;;;;;;;;;;;;;;;;AA+HhB,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":"AAqCA;AA4HA,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;;;;;;;;;;;;AA2LhB,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":"AAwDA;AAgeA,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;;YAuamB,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":"AA6BA;AAiEA,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;;;;;;;;;;;;;;;;;;;AAyHhB,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"}