@uniquedj95/vform 3.1.4 → 3.3.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 +187 -2
- package/dist/components/inputs/BaseInput.vue.d.ts.map +1 -1
- package/dist/components/inputs/CheckboxInput.vue.d.ts +1 -1
- package/dist/components/inputs/CheckboxInput.vue.d.ts.map +1 -1
- package/dist/components/inputs/DateInput.vue.d.ts.map +1 -1
- package/dist/components/inputs/EmailInput.vue.d.ts +3 -3
- package/dist/components/inputs/EmailInput.vue.d.ts.map +1 -1
- package/dist/components/inputs/NumberInput.vue.d.ts +3 -3
- package/dist/components/inputs/NumberInput.vue.d.ts.map +1 -1
- package/dist/components/inputs/PasswordInput.vue.d.ts +3 -3
- package/dist/components/inputs/PasswordInput.vue.d.ts.map +1 -1
- package/dist/components/inputs/RadioInput.vue.d.ts.map +1 -1
- package/dist/components/inputs/RepeatInput.vue.d.ts +1 -1
- package/dist/components/inputs/RepeatInput.vue.d.ts.map +1 -1
- package/dist/components/inputs/SelectInput.vue.d.ts +19 -12
- package/dist/components/inputs/SelectInput.vue.d.ts.map +1 -1
- package/dist/components/inputs/TextAreaInput.vue.d.ts +1 -1
- package/dist/components/inputs/TextAreaInput.vue.d.ts.map +1 -1
- package/dist/components/inputs/TextInput.vue.d.ts +3 -3
- package/dist/components/inputs/TextInput.vue.d.ts.map +1 -1
- package/dist/components/shared/InputLabel.vue.d.ts.map +1 -1
- package/dist/components/vForm.vue.d.ts.map +1 -1
- package/dist/composables/useDataTransformation.d.ts +1 -1
- package/dist/composables/useDataTransformation.d.ts.map +1 -1
- package/dist/composables/useDependentOptions.d.ts +11 -0
- package/dist/composables/useDependentOptions.d.ts.map +1 -0
- package/dist/composables/useInputProps.d.ts.map +1 -1
- package/dist/composables/useInputValidation.d.ts.map +1 -1
- package/dist/composables/useLabelTemplate.d.ts.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +5 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.es.js +594 -510
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/dist/types/index.d.ts +17 -4
- package/dist/types/index.d.ts.map +1 -1
- package/dist/utils/index.d.ts +7 -1
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/vform.css +1 -1
- package/package.json +5 -1
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
|
-
[](https://github.com/uniquedj95/vform/releases)
|
10
10
|
[](https://opensource.org/licenses/MIT)
|
11
11
|
[](https://vuejs.org/)
|
12
12
|
[](https://www.typescriptlang.org/)
|
@@ -20,6 +20,7 @@ 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
24
|
- [Features](#features)
|
24
25
|
- [Installation](#installation)
|
25
26
|
- [Usage](#usage)
|
@@ -28,7 +29,9 @@ A dynamic form builder for Vue.js with Ionic components
|
|
28
29
|
- [Field Configuration Options](#field-configuration-options)
|
29
30
|
- [Form Events](#form-events)
|
30
31
|
- [Form Methods](#form-methods)
|
31
|
-
- [
|
32
|
+
- [Input Dependencies](#input-dependencies)
|
33
|
+
- [Dynamic Options](#dynamic-options)
|
34
|
+
- [Resetting Dependent Fields](#resetting-dependent-fields)
|
32
35
|
- [Advanced Components](#advanced-components)
|
33
36
|
- [SelectInput](#selectinput)
|
34
37
|
- [Custom Buttons](#custom-buttons)
|
@@ -42,10 +45,44 @@ A dynamic form builder for Vue.js with Ionic components
|
|
42
45
|
|
43
46
|
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.
|
44
47
|
|
48
|
+
## 🎯 Demo
|
49
|
+
|
50
|
+
Explore all VForm features with our comprehensive interactive demo:
|
51
|
+
|
52
|
+
```bash
|
53
|
+
# Clone the repository
|
54
|
+
git clone https://github.com/uniquedj95/vform.git
|
55
|
+
cd vform
|
56
|
+
|
57
|
+
# Setup and run the demo
|
58
|
+
npm run demo:setup
|
59
|
+
npm run demo:dev
|
60
|
+
```
|
61
|
+
|
62
|
+
The demo showcases:
|
63
|
+
|
64
|
+
- **Basic Forms**: All input types and basic functionality
|
65
|
+
- **Advanced Features**: Masking, computed fields, custom buttons
|
66
|
+
- **Validation Examples**: Custom validators and error handling
|
67
|
+
- **Dependent Fields**: Dynamic field behavior and cascading options
|
68
|
+
- **Custom Styles**: Theming and visual customization
|
69
|
+
|
70
|
+
Visit the displayed URL (usually `http://localhost:3000`) to explore the interactive examples.
|
71
|
+
|
72
|
+
### Development Workflow
|
73
|
+
|
74
|
+
When working on the library and wanting to test changes in the demo:
|
75
|
+
|
76
|
+
```bash
|
77
|
+
# Update demo with latest library changes
|
78
|
+
npm run demo:update
|
79
|
+
```
|
80
|
+
|
45
81
|
## Features
|
46
82
|
|
47
83
|
- **Dynamic Form Generation**: Create forms dynamically based on a schema definition.
|
48
84
|
- **Conditional Field Rendering**: Fields can be shown or hidden based on other form values.
|
85
|
+
- **Dependent Options**: Load options for select inputs based on the values of other fields.
|
49
86
|
- **Responsive Grid Layout**: Utilizes Ionic Grid for a responsive design that works across different screen sizes.
|
50
87
|
- **Enhanced Date Input Field**: Custom date formatting and handling with integrated date picker.
|
51
88
|
- **Multiple Selection Interfaces**: Three different interfaces for select inputs (popover, action sheet, alert).
|
@@ -315,6 +352,154 @@ When accessing the VForm via a template ref, you can utilize these methods:
|
|
315
352
|
| `isFormValid()` | Validates all form fields and returns validation state | `Promise<boolean>` |
|
316
353
|
| `resolveData()` | Returns the current form data and computed data | `{ formData: FormData, computedData: ComputedData }` |
|
317
354
|
|
355
|
+
### Input Dependencies
|
356
|
+
|
357
|
+
vForm provides a powerful system for creating dependent form inputs, where the options displayed in one input depend on the values selected in another. This is especially useful for hierarchical selections like country → state → city or category → subcategory.
|
358
|
+
|
359
|
+
#### Dynamic Options
|
360
|
+
|
361
|
+
To create dependent select inputs, use the `dependsOn` property and the extended `options` function:
|
362
|
+
|
363
|
+
```javascript
|
364
|
+
const formSchema = {
|
365
|
+
country: {
|
366
|
+
type: 'SelectInput',
|
367
|
+
label: 'Country',
|
368
|
+
value: '',
|
369
|
+
options: [
|
370
|
+
{ label: 'Malawi', value: 'malawi' },
|
371
|
+
{ label: 'Zambia', value: 'zambia' },
|
372
|
+
],
|
373
|
+
required: true,
|
374
|
+
},
|
375
|
+
district: {
|
376
|
+
type: 'SelectInput',
|
377
|
+
label: 'District',
|
378
|
+
value: '',
|
379
|
+
dependsOn: 'country', // This field depends on the country field
|
380
|
+
options: async (filter, dependencyValues) => {
|
381
|
+
// Get the country value
|
382
|
+
if (!dependencyValues?.country) return [];
|
383
|
+
|
384
|
+
const countryId =
|
385
|
+
typeof dependencyValues.country === 'object'
|
386
|
+
? dependencyValues.country.value
|
387
|
+
: dependencyValues.country;
|
388
|
+
|
389
|
+
// In a real app, you would make an API call here
|
390
|
+
if (countryId === 'malawi') {
|
391
|
+
return [
|
392
|
+
{ label: 'Lilongwe', value: 'lilongwe' },
|
393
|
+
{ label: 'Blantyre', value: 'blantyre' },
|
394
|
+
];
|
395
|
+
}
|
396
|
+
return []; // Return empty options for unknown countries
|
397
|
+
},
|
398
|
+
required: true,
|
399
|
+
},
|
400
|
+
};
|
401
|
+
```
|
402
|
+
|
403
|
+
#### Multiple Dependencies
|
404
|
+
|
405
|
+
An input can also depend on multiple other inputs:
|
406
|
+
|
407
|
+
```javascript
|
408
|
+
{
|
409
|
+
locality: {
|
410
|
+
type: 'SelectInput',
|
411
|
+
label: 'Locality',
|
412
|
+
dependsOn: ['country', 'region'], // Array of field IDs this depends on
|
413
|
+
options: async (filter, dependencyValues) => {
|
414
|
+
// Access to all dependency values
|
415
|
+
if (!dependencyValues) return [];
|
416
|
+
|
417
|
+
const country = dependencyValues.country;
|
418
|
+
const region = dependencyValues.region;
|
419
|
+
|
420
|
+
// Return options based on both dependencies
|
421
|
+
// ...
|
422
|
+
}
|
423
|
+
}
|
424
|
+
}
|
425
|
+
```
|
426
|
+
|
427
|
+
For more details and examples, see the [Dependencies Documentation](./docs/DEPENDENCIES.md).
|
428
|
+
|
429
|
+
#### Resetting Dependent Fields
|
430
|
+
|
431
|
+
When a dependency changes, you often want to reset the dependent field's value to prevent invalid combinations (e.g., when changing from "USA" to "Canada", the previously selected "California" state should be cleared).
|
432
|
+
|
433
|
+
**Method 1: Automatic Reset (Built-in)**
|
434
|
+
|
435
|
+
The SelectInput component automatically detects dependency changes and resets the field value when using the `dependsOn` property:
|
436
|
+
|
437
|
+
```javascript
|
438
|
+
const formSchema = {
|
439
|
+
country: {
|
440
|
+
type: 'SelectInput',
|
441
|
+
label: 'Country',
|
442
|
+
options: [
|
443
|
+
{ label: 'United States', value: 'us' },
|
444
|
+
{ label: 'Canada', value: 'ca' },
|
445
|
+
],
|
446
|
+
},
|
447
|
+
state: {
|
448
|
+
type: 'SelectInput',
|
449
|
+
label: 'State/Province',
|
450
|
+
dependsOn: 'country',
|
451
|
+
options: (filter, dependencyValues) => {
|
452
|
+
const country = dependencyValues?.country?.value;
|
453
|
+
return getStatesForCountry(country);
|
454
|
+
},
|
455
|
+
},
|
456
|
+
};
|
457
|
+
```
|
458
|
+
|
459
|
+
When the country changes, the state field automatically resets to empty and reloads options.
|
460
|
+
|
461
|
+
**Method 2: Manual Reset (Workaround)**
|
462
|
+
|
463
|
+
If the automatic reset doesn't work as expected, you can manually reset dependent fields using the `onChange` callback:
|
464
|
+
|
465
|
+
```javascript
|
466
|
+
{
|
467
|
+
country: {
|
468
|
+
type: 'SelectInput',
|
469
|
+
label: 'Country',
|
470
|
+
options: [...],
|
471
|
+
onChange: (value, schema) => {
|
472
|
+
// Manual reset as workaround
|
473
|
+
schema.state.value = '';
|
474
|
+
return value;
|
475
|
+
},
|
476
|
+
}
|
477
|
+
}
|
478
|
+
```
|
479
|
+
|
480
|
+
**Method 3: Multiple Field Reset**
|
481
|
+
|
482
|
+
You can reset multiple dependent fields at once using onChange:
|
483
|
+
|
484
|
+
```javascript
|
485
|
+
{
|
486
|
+
country: {
|
487
|
+
type: 'SelectInput',
|
488
|
+
label: 'Country',
|
489
|
+
options: [...],
|
490
|
+
onChange: (value, schema) => {
|
491
|
+
// Reset all location-dependent fields
|
492
|
+
schema.state.value = '';
|
493
|
+
schema.city.value = '';
|
494
|
+
schema.zipCode.value = '';
|
495
|
+
return value;
|
496
|
+
},
|
497
|
+
}
|
498
|
+
}
|
499
|
+
```
|
500
|
+
|
501
|
+
**Note:** Use the onChange approach as a workaround when the automatic reset doesn't work properly, or when you need to reset multiple fields or perform additional logic when dependencies change.
|
502
|
+
|
318
503
|
### Advanced Components
|
319
504
|
|
320
505
|
#### SelectInput
|
@@ -1 +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,
|
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"}
|
@@ -1 +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,
|
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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"DateInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/DateInput.vue"],"names":[],"mappings":"AAQA;AA0BA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,
|
1
|
+
{"version":3,"file":"DateInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/DateInput.vue"],"names":[],"mappings":"AAQA;AA0BA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrD,KAAK,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,UAAU,CAAA;CAAE,CAAC;AAE3C,QAAA,MAAM,KAAK,iEAAoE,CAAC;AAkBhF,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC;CAClC,GAAG,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DhB,wBAUG"}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { FormField, FormSchema } from 'types';
|
1
|
+
import { FormField, FormSchema } from '../../types';
|
2
2
|
type __VLS_Props = {
|
3
3
|
schema?: FormSchema;
|
4
4
|
};
|
@@ -19,7 +19,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
|
|
19
19
|
modelValue?: FormField;
|
20
20
|
} & {
|
21
21
|
schema?: FormSchema;
|
22
|
-
type?: import('types').BaseFieldTypes;
|
22
|
+
type?: import('../../types').BaseFieldTypes;
|
23
23
|
}> & Readonly<{
|
24
24
|
"onUpdate:modelValue"?: ((value: FormField) => any) | undefined;
|
25
25
|
}>, {
|
@@ -49,7 +49,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
|
|
49
49
|
modelValue?: FormField;
|
50
50
|
} & {
|
51
51
|
schema?: FormSchema;
|
52
|
-
type?: import('types').BaseFieldTypes;
|
52
|
+
type?: import('../../types').BaseFieldTypes;
|
53
53
|
}> & Readonly<{
|
54
54
|
"onUpdate:modelValue"?: ((value: FormField) => any) | undefined;
|
55
55
|
}>, {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"EmailInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/EmailInput.vue"],"names":[],"mappings":"AAGA;AAsBA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,
|
1
|
+
{"version":3,"file":"EmailInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/EmailInput.vue"],"names":[],"mappings":"AAGA;AAsBA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAGhD,KAAK,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,UAAU,CAAA;CAAE,CAAC;AAE3C,QAAA,MAAM,KAAK,iEAAoE,CAAC;AAkBhF,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC;CAClC,GAAG,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DhB,wBAUG"}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { FormField, FormSchema } from 'types';
|
1
|
+
import { FormField, FormSchema } from '../../types';
|
2
2
|
type __VLS_Props = {
|
3
3
|
schema?: FormSchema;
|
4
4
|
};
|
@@ -19,7 +19,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
|
|
19
19
|
modelValue?: FormField;
|
20
20
|
} & {
|
21
21
|
schema?: FormSchema;
|
22
|
-
type?: import('types').BaseFieldTypes;
|
22
|
+
type?: import('../../types').BaseFieldTypes;
|
23
23
|
}> & Readonly<{
|
24
24
|
"onUpdate:modelValue"?: ((value: FormField) => any) | undefined;
|
25
25
|
}>, {
|
@@ -49,7 +49,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
|
|
49
49
|
modelValue?: FormField;
|
50
50
|
} & {
|
51
51
|
schema?: FormSchema;
|
52
|
-
type?: import('types').BaseFieldTypes;
|
52
|
+
type?: import('../../types').BaseFieldTypes;
|
53
53
|
}> & Readonly<{
|
54
54
|
"onUpdate:modelValue"?: ((value: FormField) => any) | undefined;
|
55
55
|
}>, {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"NumberInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/NumberInput.vue"],"names":[],"mappings":"AAGA;AAsBA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,
|
1
|
+
{"version":3,"file":"NumberInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/NumberInput.vue"],"names":[],"mappings":"AAGA;AAsBA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAGhD,KAAK,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,UAAU,CAAA;CAAE,CAAC;AAE3C,QAAA,MAAM,KAAK,iEAAoE,CAAC;AAkBhF,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC;CAClC,GAAG,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DhB,wBAUG"}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { FormField, FormSchema } from 'types';
|
1
|
+
import { FormField, FormSchema } from '../../types';
|
2
2
|
type __VLS_Props = {
|
3
3
|
schema?: FormSchema;
|
4
4
|
};
|
@@ -19,7 +19,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
|
|
19
19
|
modelValue?: FormField;
|
20
20
|
} & {
|
21
21
|
schema?: FormSchema;
|
22
|
-
type?: import('types').BaseFieldTypes;
|
22
|
+
type?: import('../../types').BaseFieldTypes;
|
23
23
|
}> & Readonly<{
|
24
24
|
"onUpdate:modelValue"?: ((value: FormField) => any) | undefined;
|
25
25
|
}>, {
|
@@ -49,7 +49,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
|
|
49
49
|
modelValue?: FormField;
|
50
50
|
} & {
|
51
51
|
schema?: FormSchema;
|
52
|
-
type?: import('types').BaseFieldTypes;
|
52
|
+
type?: import('../../types').BaseFieldTypes;
|
53
53
|
}> & Readonly<{
|
54
54
|
"onUpdate:modelValue"?: ((value: FormField) => any) | undefined;
|
55
55
|
}>, {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"PasswordInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/PasswordInput.vue"],"names":[],"mappings":"AAGA;AAsBA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,
|
1
|
+
{"version":3,"file":"PasswordInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/PasswordInput.vue"],"names":[],"mappings":"AAGA;AAsBA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAGhD,KAAK,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,UAAU,CAAA;CAAE,CAAC;AAE3C,QAAA,MAAM,KAAK,iEAAoE,CAAC;AAkBhF,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC;CAClC,GAAG,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DhB,wBAUG"}
|
@@ -1 +1 @@
|
|
1
|
-
{"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,
|
1
|
+
{"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;;;;;;;;;;;;;;;;;;;AAiHhB,wBAUG"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"RepeatInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/RepeatInput.vue"],"names":[],"mappings":"AAoCA;AAwHA,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAU,MAAM,
|
1
|
+
{"version":3,"file":"RepeatInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/RepeatInput.vue"],"names":[],"mappings":"AAoCA;AAwHA,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;AAwChF,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"}
|
@@ -1,23 +1,30 @@
|
|
1
|
-
import {
|
2
|
-
|
3
|
-
schema?: FormSchema;
|
4
|
-
type?: BaseFieldTypes;
|
5
|
-
};
|
6
|
-
declare const model: import('vue').ModelRef<FormField, string, FormField, FormField>;
|
1
|
+
import { PropType } from 'vue';
|
2
|
+
import { FormSchema, BaseFieldTypes, FormField } from '../../types';
|
7
3
|
declare function onReset(): void;
|
8
4
|
declare function onValueUpdate(evt?: any): Promise<void>;
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
5
|
+
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
6
|
+
schema: PropType<FormSchema>;
|
7
|
+
type: PropType<BaseFieldTypes>;
|
8
|
+
formId: StringConstructor;
|
9
|
+
modelValue: {
|
10
|
+
type: PropType<FormField>;
|
11
|
+
};
|
12
|
+
}>, {
|
13
13
|
onValueUpdate: typeof onValueUpdate;
|
14
14
|
onReset: typeof onReset;
|
15
15
|
getErrors: () => string[];
|
16
16
|
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
17
17
|
"update:modelValue": (value: FormField) => any;
|
18
|
-
}, string, import('vue').PublicProps, Readonly<
|
18
|
+
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
19
|
+
schema: PropType<FormSchema>;
|
20
|
+
type: PropType<BaseFieldTypes>;
|
21
|
+
formId: StringConstructor;
|
22
|
+
modelValue: {
|
23
|
+
type: PropType<FormField>;
|
24
|
+
};
|
25
|
+
}>> & Readonly<{
|
19
26
|
"onUpdate:modelValue"?: ((value: FormField) => any) | undefined;
|
20
|
-
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions,
|
27
|
+
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
|
21
28
|
containerRef: HTMLDivElement;
|
22
29
|
inputRef: import('vue').CreateComponentPublicInstanceWithMixins<import("@ionic/core").JSX.IonInput & import('@stencil/vue-output-target/runtime').InputProps<string | number | null | undefined> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, false, {}, {}, {}, {}, string, {}, any, import('vue').ComponentProvideOptions, {
|
23
30
|
P: {};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SelectInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/SelectInput.vue"],"names":[],"mappings":"AAiDA;
|
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"}
|
@@ -1 +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,
|
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"}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { FormField, FormSchema } from 'types';
|
1
|
+
import { FormField, FormSchema } from '../../types';
|
2
2
|
type __VLS_Props = {
|
3
3
|
schema?: FormSchema;
|
4
4
|
};
|
@@ -19,7 +19,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
|
|
19
19
|
modelValue?: FormField;
|
20
20
|
} & {
|
21
21
|
schema?: FormSchema;
|
22
|
-
type?: import('types').BaseFieldTypes;
|
22
|
+
type?: import('../../types').BaseFieldTypes;
|
23
23
|
}> & Readonly<{
|
24
24
|
"onUpdate:modelValue"?: ((value: FormField) => any) | undefined;
|
25
25
|
}>, {
|
@@ -49,7 +49,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
|
|
49
49
|
modelValue?: FormField;
|
50
50
|
} & {
|
51
51
|
schema?: FormSchema;
|
52
|
-
type?: import('types').BaseFieldTypes;
|
52
|
+
type?: import('../../types').BaseFieldTypes;
|
53
53
|
}> & Readonly<{
|
54
54
|
"onUpdate:modelValue"?: ((value: FormField) => any) | undefined;
|
55
55
|
}>, {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"TextInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/TextInput.vue"],"names":[],"mappings":"AAGA;AAsBA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,
|
1
|
+
{"version":3,"file":"TextInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/TextInput.vue"],"names":[],"mappings":"AAGA;AAsBA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAGhD,KAAK,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,UAAU,CAAA;CAAE,CAAC;AAE3C,QAAA,MAAM,KAAK,iEAAoE,CAAC;AAkBhF,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC;CAClC,GAAG,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DhB,wBAUG"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"InputLabel.vue.d.ts","sourceRoot":"","sources":["../../../src/components/shared/InputLabel.vue"],"names":[],"mappings":"AAMA;AAsBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,
|
1
|
+
{"version":3,"file":"InputLabel.vue.d.ts","sourceRoot":"","sources":["../../../src/components/shared/InputLabel.vue"],"names":[],"mappings":"AAMA;AAsBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIzC,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;;AAyEF,wBAMG"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"vForm.vue.d.ts","sourceRoot":"","sources":["../../src/components/vForm.vue"],"names":[],"mappings":"
|
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 +1 @@
|
|
1
|
-
{"version":3,"file":"useDataTransformation.d.ts","sourceRoot":"","sources":["../../src/composables/useDataTransformation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,GAAG,EAAS,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,EAAU,MAAM,
|
1
|
+
{"version":3,"file":"useDataTransformation.d.ts","sourceRoot":"","sources":["../../src/composables/useDataTransformation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,GAAG,EAAS,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,EAAU,MAAM,SAAS,CAAC;AAGrE;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,YAAY,EAAE,GAAG,CAAC,UAAU,CAAC;;;EAwJlE"}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import { Ref } from 'vue';
|
2
|
+
import { FormSchema, Option, FormData, ComputedData } from '../types';
|
3
|
+
/**
|
4
|
+
* This composable manages dependent options for select inputs.
|
5
|
+
* It allows options for a select input to depend on the value of other inputs.
|
6
|
+
*/
|
7
|
+
export declare function useDependentOptions(schema: Ref<FormSchema>, data: Ref<FormData>, computedData: Ref<ComputedData>): {
|
8
|
+
registerDependency: (fieldId: string, dependsOn: string[], loader: (filter?: string, dependencyValues?: Record<string, any>) => Promise<Option[]>) => void;
|
9
|
+
updateOptions: (fieldId: string, filterValue?: string) => Promise<void>;
|
10
|
+
};
|
11
|
+
//# sourceMappingURL=useDependentOptions.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"useDependentOptions.d.ts","sourceRoot":"","sources":["../../src/composables/useDependentOptions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,GAAG,EAAE,MAAM,KAAK,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE1E;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,GAAG,CAAC,UAAU,CAAC,EACvB,IAAI,EAAE,GAAG,CAAC,QAAQ,CAAC,EACnB,YAAY,EAAE,GAAG,CAAC,YAAY,CAAC;kCAiBpB,MAAM,aACJ,MAAM,EAAE,UACX,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC;6BAoElD,MAAM,gBAAgB,MAAM;EAgEnE"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useInputProps.d.ts","sourceRoot":"","sources":["../../src/composables/useInputProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,
|
1
|
+
{"version":3,"file":"useInputProps.d.ts","sourceRoot":"","sources":["../../src/composables/useInputProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,GAAG,CAAC,SAAS,CAAC;;;;;;;;;;;;;;;;;EA2DlD"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useInputValidation.d.ts","sourceRoot":"","sources":["../../src/composables/useInputValidation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,
|
1
|
+
{"version":3,"file":"useInputValidation.d.ts","sourceRoot":"","sources":["../../src/composables/useInputValidation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAEhD,OAAO,EAAE,uBAAuB,EAAE,MAAM,KAAK,CAAC;AAE9C;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,GAAG,CAAC,uBAAuB,GAAG,IAAI,CAAC,EAC7C,KAAK,EAAE,GAAG,CAAC,SAAS,CAAC,EACrB,UAAU,EAAE,GAAG,CAAC,GAAG,CAAC,EACpB,MAAM,CAAC,EAAE,GAAG,CAAC,UAAU,GAAG,SAAS,CAAC,EACpC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC;mBAOlC,OAAO,CAAC,OAAO,CAAC;yBAkCV,OAAO,CAAC,IAAI,CAAC;mBAczB,IAAI;6BAQO,GAAG,KAAQ,IAAI;qBASxB,MAAM,EAAE;;;EAa/B"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useLabelTemplate.d.ts","sourceRoot":"","sources":["../../src/composables/useLabelTemplate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,
|
1
|
+
{"version":3,"file":"useLabelTemplate.d.ts","sourceRoot":"","sources":["../../src/composables/useLabelTemplate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,GAAG,CAAC,SAAS,CAAC;;;;EAqBrD"}
|