@uniquedj95/vform 3.3.0 → 3.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  A dynamic form builder for Vue.js with Ionic components
8
8
 
9
- [![Version](https://img.shields.io/badge/version-3.3.0-blue.svg)](https://github.com/uniquedj95/vform/releases)
9
+ [![Version](https://img.shields.io/badge/version-3.4.0-blue.svg)](https://github.com/uniquedj95/vform/releases)
10
10
  [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
11
11
  [![Vue Version](https://img.shields.io/badge/vue-3.5+-brightgreen.svg)](https://vuejs.org/)
12
12
  [![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
20
20
  ## Table of Contents
21
21
 
22
22
  - [Overview](#overview)
23
- - [🎯 Demo](#demo)
23
+ - [Demo](#demo)
24
24
  - [Features](#features)
25
25
  - [Installation](#installation)
26
26
  - [Usage](#usage)
27
27
  - [Schema Structure](#schema-structure)
28
28
  - [Example Schema](#example-schema)
29
29
  - [Field Configuration Options](#field-configuration-options)
30
+ - [Multi-Step Forms](#multi-step-forms)
31
+ - [Basic Multi-Step Setup](#basic-multi-step-setup)
32
+ - [Step Configuration](#step-configuration)
33
+ - [Step Indicator Positioning](#step-indicator-positioning)
34
+ - [Step Validation](#step-validation)
30
35
  - [Form Events](#form-events)
31
36
  - [Form Methods](#form-methods)
32
37
  - [Input Dependencies](#input-dependencies)
@@ -37,7 +42,6 @@ A dynamic form builder for Vue.js with Ionic components
37
42
  - [Custom Buttons](#custom-buttons)
38
43
  - [RepeatInput](#repeatinput)
39
44
  - [Option Descriptions](#option-descriptions)
40
- - [Date Pattern Formatting](#date-pattern-formatting)
41
45
  - [Issue Reporting and Feedback](#issue-reporting-and-feedback)
42
46
  - [Contributors](#contributors)
43
47
 
@@ -45,7 +49,7 @@ A dynamic form builder for Vue.js with Ionic components
45
49
 
46
50
  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.
47
51
 
48
- ## 🎯 Demo
52
+ ## Demo
49
53
 
50
54
  Explore all VForm features with our comprehensive interactive demo:
51
55
 
@@ -62,6 +66,7 @@ npm run demo:dev
62
66
  The demo showcases:
63
67
 
64
68
  - **Basic Forms**: All input types and basic functionality
69
+ - **Multi-Step Forms**: Step indicators, validation, and smart navigation
65
70
  - **Advanced Features**: Masking, computed fields, custom buttons
66
71
  - **Validation Examples**: Custom validators and error handling
67
72
  - **Dependent Fields**: Dynamic field behavior and cascading options
@@ -80,14 +85,15 @@ npm run demo:update
80
85
 
81
86
  ## Features
82
87
 
88
+ - **Multi-Step Forms**: Create guided, step-by-step forms with configurable step indicators, validation, and smart navigation.
83
89
  - **Dynamic Form Generation**: Create forms dynamically based on a schema definition.
84
90
  - **Conditional Field Rendering**: Fields can be shown or hidden based on other form values.
85
91
  - **Dependent Options**: Load options for select inputs based on the values of other fields.
86
92
  - **Responsive Grid Layout**: Utilizes Ionic Grid for a responsive design that works across different screen sizes.
87
- - **Enhanced Date Input Field**: Custom date formatting and handling with integrated date picker.
93
+ - **Enhanced Date Input Field**: Built-in date and datetime picker support with Ionic components.
88
94
  - **Multiple Selection Interfaces**: Three different interfaces for select inputs (popover, action sheet, alert).
89
95
  - **Repeatable Field Groups**: Create dynamic, repeatable sets of form fields.
90
- - **Advanced Validation**: Built-in validation with support for custom validation functions.
96
+ - **Advanced Validation**: Built-in validation with support for custom validation functions and step-by-step validation.
91
97
  - **Computed Values**: Generate and transform values based on other form fields.
92
98
  - **Customizable Styling**: Control appearance with flexible styling options.
93
99
  - **Form Actions**: Customizable buttons with support for additional custom actions.
@@ -334,7 +340,216 @@ The following input types are supported:
334
340
  | ---------- | ------------ | ------------------------------------- |
335
341
  | `children` | `FormSchema` | Schema for the repeatable field group |
336
342
 
337
- ### Form Events
343
+ ## Multi-Step Forms
344
+
345
+ 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.
346
+
347
+ ### Basic Multi-Step Setup
348
+
349
+ To create a multi-step form, define a `multiStepConfig` prop:
350
+
351
+ ```vue
352
+ <template>
353
+ <v-form
354
+ :schema="formSchema"
355
+ :multi-step-config="multiStepConfig"
356
+ @submit="handleSubmit"
357
+ @step-change="handleStepChange"
358
+ />
359
+ </template>
360
+
361
+ <script setup lang="ts">
362
+ import { reactive } from 'vue';
363
+ import { FormSchema, MultiStepConfig } from '@uniquedj95/vform';
364
+
365
+ const formSchema = reactive<FormSchema>({
366
+ // Personal Information Step
367
+ firstName: {
368
+ type: 'TextInput',
369
+ label: 'First Name',
370
+ required: true,
371
+ },
372
+ lastName: {
373
+ type: 'TextInput',
374
+ label: 'Last Name',
375
+ required: true,
376
+ },
377
+ // Contact Information Step
378
+ email: {
379
+ type: 'EmailInput',
380
+ label: 'Email',
381
+ required: true,
382
+ },
383
+ phone: {
384
+ type: 'TextInput',
385
+ label: 'Phone Number',
386
+ },
387
+ // Review Step
388
+ comments: {
389
+ type: 'TextAreaInput',
390
+ label: 'Additional Comments',
391
+ },
392
+ });
393
+
394
+ const multiStepConfig: MultiStepConfig = {
395
+ steps: [
396
+ {
397
+ id: 'personal',
398
+ title: 'Personal Information',
399
+ subtitle: 'Basic details about you',
400
+ schema: {
401
+ firstName: formSchema.firstName,
402
+ lastName: formSchema.lastName,
403
+ },
404
+ },
405
+ {
406
+ id: 'contact',
407
+ title: 'Contact Details',
408
+ subtitle: 'How we can reach you',
409
+ schema: {
410
+ email: formSchema.email,
411
+ phone: formSchema.phone,
412
+ },
413
+ },
414
+ {
415
+ id: 'review',
416
+ title: 'Review & Submit',
417
+ subtitle: 'Final review of your information',
418
+ schema: {
419
+ comments: formSchema.comments,
420
+ },
421
+ },
422
+ ],
423
+ stepPosition: 'top',
424
+ showProgress: true,
425
+ allowStepNavigation: true,
426
+ };
427
+
428
+ function handleSubmit(allData: FormData, perStepData: MultiStepFormData) {
429
+ console.log('All form data:', allData);
430
+ console.log('Per-step data:', perStepData);
431
+ }
432
+
433
+ function handleStepChange(stepIndex: number, stepId: string) {
434
+ console.log(`Moved to step ${stepIndex + 1}: ${stepId}`);
435
+ }
436
+ </script>
437
+ ```
438
+
439
+ ### Step Configuration
440
+
441
+ Each step in the multi-step configuration supports the following properties:
442
+
443
+ | Property | Type | Description | Required |
444
+ | ------------ | ------------ | --------------------------------------------- | -------- |
445
+ | `id` | `string` | Unique identifier for the step | Yes |
446
+ | `title` | `string` | Display title for the step | Yes |
447
+ | `subtitle` | `string` | Optional subtitle/description for the step | No |
448
+ | `schema` | `FormSchema` | Schema object containing fields for this step | Yes |
449
+ | `validation` | `function` | Custom validation function for the step | No |
450
+
451
+ ### Step Indicator Positioning
452
+
453
+ The step indicator can be positioned in four different locations:
454
+
455
+ ```typescript
456
+ const multiStepConfig: MultiStepConfig = {
457
+ stepPosition: 'top', // Above the form content (default)
458
+ // stepPosition: 'bottom', // Below the form content
459
+ // stepPosition: 'left', // Left side of the form content
460
+ // stepPosition: 'right', // Right side of the form content
461
+ // ... other config
462
+ };
463
+ ```
464
+
465
+ #### Position Behaviors
466
+
467
+ - **Top/Bottom**: Step indicators display horizontally with connecting lines
468
+ - **Left**: Step indicators display vertically with titles to the right of numbered markers
469
+ - **Right**: Step indicators display vertically with titles to the left of numbered markers
470
+
471
+ ### Step Validation
472
+
473
+ Multi-step forms include built-in validation that prevents users from proceeding to the next step until the current step is valid:
474
+
475
+ - **Next Step**: Validates all fields in the current step before advancing
476
+ - **Step Navigation**: When clicking step indicators, validates current step if moving forward
477
+ - **Submit**: Validates all steps before final submission
478
+
479
+ ```typescript
480
+ const multiStepConfig: MultiStepConfig = {
481
+ steps: [
482
+ {
483
+ id: 'personal',
484
+ title: 'Personal Information',
485
+ schema: {
486
+ /* fields */
487
+ },
488
+ // Optional custom validation for this step
489
+ validation: async (stepData, computedData) => {
490
+ const errors: string[] = [];
491
+
492
+ // Custom validation logic
493
+ if (stepData.firstName && stepData.lastName && stepData.firstName === stepData.lastName) {
494
+ errors.push('First and last name cannot be the same');
495
+ }
496
+
497
+ return errors;
498
+ },
499
+ },
500
+ // ... other steps
501
+ ],
502
+ // ... other config
503
+ };
504
+ ```
505
+
506
+ ### Multi-Step Configuration Options
507
+
508
+ | Property | Type | Description | Default |
509
+ | --------------------- | ---------------------------------------- | --------------------------------------------- | -------- |
510
+ | `steps` | `FormStep[]` | Array of step configurations | Required |
511
+ | `stepPosition` | `'top' \| 'bottom' \| 'left' \| 'right'` | Position of the step indicator | `'top'` |
512
+ | `showProgress` | `boolean` | Show progress bar and step counter | `true` |
513
+ | `allowStepNavigation` | `boolean` | Allow clicking on step indicators to navigate | `false` |
514
+
515
+ ### Multi-Step Events
516
+
517
+ | Event | Description | Signature |
518
+ | ------------- | ----------------------------------------- | --------------------------------------------------------------- |
519
+ | `step-change` | Emitted when user navigates between steps | `(stepIndex: number, stepId: string) => void` |
520
+ | `submit` | Emitted when multi-step form is submitted | `(allData: FormData, multiStepData: MultiStepFormData) => void` |
521
+
522
+ The `submit` event provides both the combined data from all steps and the per-step data structure:
523
+
524
+ ```typescript
525
+ // Combined data from all steps
526
+ allData: FormData = {
527
+ firstName: 'John',
528
+ lastName: 'Doe',
529
+ email: 'john@example.com',
530
+ // ...
531
+ };
532
+
533
+ // Per-step data structure
534
+ multiStepData: MultiStepFormData = {
535
+ steps: {
536
+ personal: { firstName: 'John', lastName: 'Doe' },
537
+ contact: { email: 'john@example.com', phone: '...' },
538
+ review: { comments: '...' },
539
+ },
540
+ computedSteps: {
541
+ /* computed values per step */
542
+ },
543
+ allFormData: {
544
+ /* same as allData */
545
+ },
546
+ allComputedData: {
547
+ /* all computed values */
548
+ },
549
+ };
550
+ ```
551
+
552
+ ## Form Events
338
553
 
339
554
  | Event | Description | Signature |
340
555
  | -------- | ---------------------------------------------------------------- | -------------------------------------------------------------- |
@@ -609,40 +824,21 @@ When using SelectInput or CheckboxInput, you can add descriptions to options:
609
824
  }
610
825
  ```
611
826
 
612
- #### Date Pattern Formatting
613
-
614
- The DateInput component supports various date pattern formats:
615
-
616
- | Pattern | Description | Example |
617
- | ------- | ----------------------------------------------- | ----------------------- |
618
- | DD | Day of the month, two digits with leading zeros | 01 to 31 |
619
- | D | Day of the month without leading zeros | 1 to 31 |
620
- | MMM | Month name, abbreviated | Jan, Feb, Mar, etc. |
621
- | MMMM | Month name, full | January, February, etc. |
622
- | MM | Month as a number, with leading zeros | 01 to 12 |
623
- | M | Month as a number, without leading zeros | 1 to 12 |
624
- | YYYY | Year, four digits | 2025 |
625
- | YY | Year, two digits | 25 |
626
- | HH | Hour, two digits with leading zeros (24-hour) | 00 to 23 |
627
- | mm | Minutes, two digits with leading zeros | 00 to 59 |
628
- | ss | Seconds, two digits with leading zeros | 00 to 59 |
629
-
630
- Example: `DD/MMM/YYYY HH:mm:ss` would format as `07/Jun/2025 14:30:00`
631
-
632
827
  ### Form Props
633
828
 
634
- | Property | Type | Description | Default |
635
- | ------------------ | ------------------------------ | ---------------------------------------------------------------------- | ---------- |
636
- | `schema` | `FormSchema` | The schema object defining the form structure and field configurations | _Required_ |
637
- | `showLabels` | `boolean` | Determines if labels are displayed for each field | `true` |
638
- | `showClearButton` | `boolean` | Controls the visibility of the clear/reset button | `true` |
639
- | `showCancelButton` | `boolean` | Controls the visibility of the cancel button | `true` |
640
- | `buttonPlacement` | `'start' \| 'middle' \| 'end'` | Specifies the alignment of action buttons within the form | `'start'` |
641
- | `submitButtonText` | `string` | Custom text for the submit button | `"Submit"` |
642
- | `clearButtonText` | `string` | Custom text for the clear/reset button | `"Reset"` |
643
- | `cancelButtonText` | `string` | Custom text for the cancel button | `"Cancel"` |
644
- | `hideButtons` | `boolean` | When true, hides all action buttons | `false` |
645
- | `customButtons` | `Array<CustomButton>` | Array of custom buttons to add to the form | `[]` |
829
+ | Property | Type | Description | Default |
830
+ | ------------------ | ------------------------------ | ---------------------------------------------------------------------- | ----------- |
831
+ | `schema` | `FormSchema` | The schema object defining the form structure and field configurations | _Required_ |
832
+ | `multiStepConfig` | `MultiStepConfig` | Configuration for multi-step forms (optional) | `undefined` |
833
+ | `showLabels` | `boolean` | Determines if labels are displayed for each field | `true` |
834
+ | `showClearButton` | `boolean` | Controls the visibility of the clear/reset button | `true` |
835
+ | `showCancelButton` | `boolean` | Controls the visibility of the cancel button | `true` |
836
+ | `buttonPlacement` | `'start' \| 'middle' \| 'end'` | Specifies the alignment of action buttons within the form | `'start'` |
837
+ | `submitButtonText` | `string` | Custom text for the submit button | `"Submit"` |
838
+ | `clearButtonText` | `string` | Custom text for the clear/reset button | `"Reset"` |
839
+ | `cancelButtonText` | `string` | Custom text for the cancel button | `"Cancel"` |
840
+ | `hideButtons` | `boolean` | When true, hides all action buttons | `false` |
841
+ | `customButtons` | `Array<CustomButton>` | Array of custom buttons to add to the form | `[]` |
646
842
 
647
843
  ## Issue Reporting and Feedback
648
844
 
@@ -676,6 +872,11 @@ import {
676
872
  FormOptions,
677
873
  GridSize,
678
874
  CustomButton,
875
+ // Multi-step types
876
+ MultiStepConfig,
877
+ MultiStepFormData,
878
+ FormStep,
879
+ StepPosition,
679
880
  } from '@uniquedj95/vform';
680
881
  ```
681
882
 
@@ -0,0 +1,18 @@
1
+ import { FormStep, StepPosition } from '../../types';
2
+ interface StepIndicatorProps {
3
+ steps: FormStep[];
4
+ activeStepIndex: number;
5
+ position: StepPosition;
6
+ showProgress?: boolean;
7
+ allowNavigation?: boolean;
8
+ }
9
+ declare const _default: import('vue').DefineComponent<StepIndicatorProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
10
+ "step-click": (stepIndex: number) => any;
11
+ }, string, import('vue').PublicProps, Readonly<StepIndicatorProps> & Readonly<{
12
+ "onStep-click"?: ((stepIndex: number) => any) | undefined;
13
+ }>, {
14
+ showProgress: boolean;
15
+ allowNavigation: boolean;
16
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
17
+ export default _default;
18
+ //# sourceMappingURL=StepIndicator.vue.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -1,6 +1,7 @@
1
- import { FormData, ComputedData, FormSchema, CustomButton } from '../types';
1
+ import { FormData, ComputedData, FormSchema, CustomButton, MultiStepConfig, MultiStepFormData } from '../types';
2
2
  interface FormProps {
3
- schema: FormSchema;
3
+ schema?: FormSchema;
4
+ multiStepConfig?: MultiStepConfig;
4
5
  showLabels?: boolean;
5
6
  showClearButton?: boolean;
6
7
  showCancelButton?: boolean;
@@ -11,21 +12,34 @@ interface FormProps {
11
12
  hideButtons?: boolean;
12
13
  customButtons?: Array<CustomButton>;
13
14
  }
15
+ declare function handleClearAction(): void;
16
+ declare function handleNextStep(): Promise<void>;
17
+ declare function handlePreviousStep(): Promise<void>;
18
+ declare function handleStepClick(stepIndex: number): Promise<void>;
14
19
  declare const _default: import('vue').DefineComponent<FormProps, {
15
- resetForm: () => void;
20
+ resetForm: typeof handleClearAction;
16
21
  isFormValid: () => Promise<boolean>;
17
- resolveData: () => {
22
+ resolveData: () => MultiStepFormData | {
18
23
  formData: FormData;
19
24
  computedData: ComputedData;
20
25
  };
26
+ nextStep: typeof handleNextStep;
27
+ previousStep: typeof handlePreviousStep;
28
+ goToStep: typeof handleStepClick;
29
+ getCurrentStep: () => import('../types').FormStep | undefined;
30
+ getCurrentStepIndex: () => number;
21
31
  }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
22
32
  clear: () => any;
23
- submit: (formData: FormData, computedFormData: ComputedData) => any;
24
33
  cancel: () => any;
34
+ submit: (formData: FormData, computedFormData: ComputedData) => any;
35
+ "multi-step-submit": (data: MultiStepFormData) => any;
36
+ "step-change": (stepIndex: number, stepId: string) => any;
25
37
  }, string, import('vue').PublicProps, Readonly<FormProps> & Readonly<{
26
38
  onClear?: (() => any) | undefined;
27
- onSubmit?: ((formData: FormData, computedFormData: ComputedData) => any) | undefined;
28
39
  onCancel?: (() => any) | undefined;
40
+ onSubmit?: ((formData: FormData, computedFormData: ComputedData) => any) | undefined;
41
+ "onMulti-step-submit"?: ((data: MultiStepFormData) => any) | undefined;
42
+ "onStep-change"?: ((stepIndex: number, stepId: string) => any) | undefined;
29
43
  }>, {
30
44
  showLabels: boolean;
31
45
  showClearButton: boolean;
@@ -37,6 +51,6 @@ declare const _default: import('vue').DefineComponent<FormProps, {
37
51
  hideButtons: boolean;
38
52
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
39
53
  dynamicRefs: unknown[];
40
- }, any>;
54
+ }, HTMLDivElement>;
41
55
  export default _default;
42
56
  //# sourceMappingURL=vForm.vue.d.ts.map
@@ -1 +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"}
1
+ {"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"}
@@ -0,0 +1,27 @@
1
+ import { MultiStepConfig, MultiStepFormData, FormData, ComputedData, FormStep } from '../types';
2
+ export declare function useMultiStepForm(config: MultiStepConfig): {
3
+ currentStepIndex: import('vue').Ref<number, number>;
4
+ currentStep: import('vue').ComputedRef<FormStep>;
5
+ stepData: import('vue').Ref<Record<string, FormData>, Record<string, FormData>>;
6
+ stepComputedData: import('vue').Ref<Record<string, ComputedData>, Record<string, ComputedData>>;
7
+ stepValidationErrors: import('vue').Ref<Record<string, string[]>, Record<string, string[]>>;
8
+ isFirstStep: import('vue').ComputedRef<boolean>;
9
+ isLastStep: import('vue').ComputedRef<boolean>;
10
+ canGoNext: import('vue').ComputedRef<boolean>;
11
+ canGoPrevious: import('vue').ComputedRef<boolean>;
12
+ totalSteps: import('vue').ComputedRef<number>;
13
+ progressPercentage: import('vue').ComputedRef<number>;
14
+ allFormData: import('vue').ComputedRef<FormData>;
15
+ allComputedData: import('vue').ComputedRef<ComputedData>;
16
+ updateStepData: (stepId: string, data: FormData) => void;
17
+ updateStepComputedData: (stepId: string, data: ComputedData) => void;
18
+ clearStepData: (stepId: string) => void;
19
+ validateCurrentStep: () => Promise<boolean>;
20
+ goToStep: (stepIndex: number) => Promise<boolean>;
21
+ nextStep: () => Promise<boolean>;
22
+ previousStep: () => Promise<boolean>;
23
+ resetForm: () => void;
24
+ validateAllSteps: () => Promise<boolean>;
25
+ getMultiStepFormData: () => MultiStepFormData;
26
+ };
27
+ //# sourceMappingURL=useMultiStepForm.d.ts.map
@@ -0,0 +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;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"}