@bolttech/form-engine 0.12.2 → 0.13.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/CHANGELOG.md +15 -0
- package/README.md +36 -33
- package/{asFormField-aa6bbdae.js → asFormField-41217c51.js} +2 -2
- package/asFormField-41217c51.js.map +1 -0
- package/index.js +1 -1
- package/package.json +1 -1
- package/react.js +1 -1
- package/src/adapters/react/asFormField.d.ts +1 -1
- package/src/adapters/react/types.d.ts +12 -0
- package/asFormField-aa6bbdae.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,21 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [0.13.0](http://bitbucket.org/gofrank/bolttech-frontend/compare/form-engine-0.12.2...form-engine-0.13.0) (2024-04-09)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* added optionList prop in asFormField - added visibilityConditions in ON_FIELD_CLEARED event ([28ffa7c](http://bitbucket.org/gofrank/bolttech-frontend/commit/28ffa7ce549cc6886233b8490acdd983388d281f))
|
|
11
|
+
* asFormField - onSelected prop function ([0f9c2ef](http://bitbucket.org/gofrank/bolttech-frontend/commit/0f9c2ef3624a18972f6176edd87149f270d9de19))
|
|
12
|
+
* readme ([1ed48b6](http://bitbucket.org/gofrank/bolttech-frontend/commit/1ed48b6fab5581ae4edab80532c260387c1aaab0))
|
|
13
|
+
* readme - version 0.13.0 ([6988236](http://bitbucket.org/gofrank/bolttech-frontend/commit/6988236baac06de09da3955f77c3a8747366994e))
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
### Bug Fixes
|
|
17
|
+
|
|
18
|
+
* merged ([d757613](http://bitbucket.org/gofrank/bolttech-frontend/commit/d757613f28bd2d346291d275cbb7dee06ce4c6cd))
|
|
19
|
+
|
|
5
20
|
## [0.12.2](http://bitbucket.org/gofrank/bolttech-frontend/compare/form-engine-0.12.1...form-engine-0.12.2) (2024-04-08)
|
|
6
21
|
|
|
7
22
|
|
package/README.md
CHANGED
|
@@ -2,9 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
Achieve form logic re-usage with forms expressed in json format.
|
|
4
4
|
|
|
5
|
-
> stable version 0.
|
|
5
|
+
> stable version 0.13.0
|
|
6
6
|
|
|
7
7
|
> Note: We do not recommend using versions 0.11.5 and 0.11.6 due to bugs in asFormField that unfortunately appeared with them.
|
|
8
|
+
|
|
8
9
|
---
|
|
9
10
|
|
|
10
11
|
1. [Basic setup](#markdown-header-basic-setup)
|
|
@@ -802,7 +803,7 @@ This options will allow you to force a give field to have the format you whant w
|
|
|
802
803
|
|
|
803
804
|
You have several formatters. THe following example shows splitter that is a more generic one, allowing you to split the input text
|
|
804
805
|
|
|
805
|
-
**BIG NOTE** - Formatters won't execute when a value is deleting (eg. user pressed backspace to delete a character), to execute on every
|
|
806
|
+
**BIG NOTE** - Formatters won't execute when a value is deleting (eg. user pressed backspace to delete a character), to execute on every
|
|
806
807
|
value change, use masks instead
|
|
807
808
|
|
|
808
809
|
```json
|
|
@@ -850,16 +851,16 @@ Specifies a function that will format the field
|
|
|
850
851
|
|
|
851
852
|
```typescript
|
|
852
853
|
const removeDots = (value: string | number): string | number => {
|
|
853
|
-
return value.split(
|
|
854
|
-
}
|
|
854
|
+
return value.split('.').join('');
|
|
855
|
+
};
|
|
855
856
|
|
|
856
857
|
const formatterInstance = {
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
}
|
|
861
|
-
}
|
|
862
|
-
}
|
|
858
|
+
formatters: {
|
|
859
|
+
ON_FIELD_CHANGE: {
|
|
860
|
+
callback: removeDots,
|
|
861
|
+
},
|
|
862
|
+
},
|
|
863
|
+
};
|
|
863
864
|
```
|
|
864
865
|
|
|
865
866
|
## Masks
|
|
@@ -894,16 +895,16 @@ Specifies a function that will format the field
|
|
|
894
895
|
|
|
895
896
|
```typescript
|
|
896
897
|
const removeDots = (value: string | number): string | number => {
|
|
897
|
-
return value.split(
|
|
898
|
-
}
|
|
898
|
+
return value.split('.').join('');
|
|
899
|
+
};
|
|
899
900
|
|
|
900
901
|
const formatterInstance = {
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
}
|
|
905
|
-
}
|
|
906
|
-
}
|
|
902
|
+
formatters: {
|
|
903
|
+
ON_FIELD_CHANGE: {
|
|
904
|
+
callback: removeDots,
|
|
905
|
+
},
|
|
906
|
+
},
|
|
907
|
+
};
|
|
907
908
|
```
|
|
908
909
|
|
|
909
910
|
## **Filters**
|
|
@@ -1905,21 +1906,23 @@ You can use the following arguments declare a component as a form field
|
|
|
1905
1906
|
|
|
1906
1907
|
And this will give you the following properties in addition to the native ones of your component
|
|
1907
1908
|
|
|
1908
|
-
| Prop | Type | Description
|
|
1909
|
-
| -------------------- | --------------------------- |
|
|
1910
|
-
| validations | TSchemaValidation | Setup validations to be used in the field.
|
|
1911
|
-
| masks | TSchemaMasks | Allows you to display the value of the masked component by events
|
|
1912
|
-
| clearFields | TSchemaClearFields | Will clear target fields in case they do not pass with the specified validations
|
|
1913
|
-
| api | TSchemaApi | Allows you to make api calls using events emitted by the component.
|
|
1914
|
-
| errorMessages | TErrorMessages | Field error messages in case any validation fails
|
|
1915
|
-
| filter | TSchemaValidation | Filters the component value based on a validation.
|
|
1916
|
-
| formatters | TSchemaFormatters | Allows you to format the value that the field will receive for each event issuance
|
|
1917
|
-
| visibilityConditions | TSchemaVisibilityConditions | Allows you to specify the conditions a given field will be visible what will run when this field meets the specified life-cycle
|
|
1918
|
-
| formId | string | Form id that you need to create and integrate the field.
|
|
1919
|
-
| visibility | boolean | It's a prop that you can use to hide the component and control this state outside the component.
|
|
1920
|
-
| name | string | Name of the component similar to name prop name on TComponent type. This name will be used later to correlate the field with the value, and you will be able to read it.
|
|
1921
|
-
| value | any | The value of the field that you can control outside the component.
|
|
1922
|
-
| disabled
|
|
1909
|
+
| Prop | Type | Description |
|
|
1910
|
+
| -------------------- | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
1911
|
+
| validations | TSchemaValidation | Setup validations to be used in the field. |
|
|
1912
|
+
| masks | TSchemaMasks | Allows you to display the value of the masked component by events |
|
|
1913
|
+
| clearFields | TSchemaClearFields | Will clear target fields in case they do not pass with the specified validations |
|
|
1914
|
+
| api | TSchemaApi | Allows you to make api calls using events emitted by the component. |
|
|
1915
|
+
| errorMessages | TErrorMessages | Field error messages in case any validation fails |
|
|
1916
|
+
| filter | TSchemaValidation | Filters the component value based on a validation. |
|
|
1917
|
+
| formatters | TSchemaFormatters | Allows you to format the value that the field will receive for each event issuance |
|
|
1918
|
+
| visibilityConditions | TSchemaVisibilityConditions | Allows you to specify the conditions a given field will be visible what will run when this field meets the specified life-cycle |
|
|
1919
|
+
| formId | string | Form id that you need to create and integrate the field. |
|
|
1920
|
+
| visibility | boolean | It's a prop that you can use to hide the component and control this state outside the component. |
|
|
1921
|
+
| name | string | Name of the component similar to name prop name on TComponent type. This name will be used later to correlate the field with the value, and you will be able to read it. |
|
|
1922
|
+
| value | any | The value of the field that you can control outside the component. |
|
|
1923
|
+
| disabled | boolean | The disabled of the field that you can control outside the component. |
|
|
1924
|
+
| optionList | any[] | The optionList of the field that you can control outside the component. This optionList will be used to manipulated a list of elements. For example, Dropdown optionList. |
|
|
1925
|
+
| onSelected | void | The onSelected of the field you can control outside the component by calling a custom function. onSelected makes the data available (TField) for manipulation. It is called when you mount and rehydrate the component at the first moment. Also, it is called every time the component changes (onChange). |
|
|
1923
1926
|
|
|
1924
1927
|
### Example
|
|
1925
1928
|
|