@vergelijkdirect/comparison-forms 1.0.178 → 1.0.181

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.
Files changed (5) hide show
  1. package/README.md +43 -26
  2. package/dist-rollup/comparison-forms.js +18037 -15369
  3. package/dist-rollup/comparison-forms.umd.cjs +22 -17
  4. package/dist-rollup/style.css +3 -3
  5. package/package.json +4 -3
package/README.md CHANGED
@@ -8,15 +8,14 @@ This project designed to provide single source of true for insurances forms. It
8
8
 
9
9
  1.Insert i-frame tag anywhere in your project, with next data:
10
10
 
11
- | Queryparams | Meaning | Example |
12
- |:---------------:|:----------------------------------------------------------------------------------------------------------:|:-----------------------------------:|
13
- | Page address | Corresponds to type of form | /motor-form |
14
- | link | Indicate address, where user should be redirected after forms submit | &link=verzekeringen/results-page |
15
- | vd-form-version | Indicate which version of form styles implemented. Missing value or 0 mean old form, 1 - new redesign form | &vd-form-version=1 |
16
- | title | Specify forms title | &title=Motorverzekering vergelijken |
17
- | full-form-width | Specify, should form has 100% width of parent component, or should has strong standard borders | &full-form-width=true |
11
+ | Queryparams | Meaning | Example |
12
+ |:---------------:|:-----------------------------------------------------------------------------------------------------------------:|:-----------------------------------:|
13
+ | Page address | Corresponds to type of form | /motor-form |
14
+ | link | Indicate address, where user should be redirected after forms submit | &link=verzekeringen/results-page | |
15
+ | title | Specify forms title | &title=Motorverzekering vergelijken |
16
+ | full-form-width | Specify, should form has 100% width of parent component, or should has strong standard borders | &full-form-width=true |
18
17
 
19
- Example: <iframe src="localhost:3000/motor-form?link=http://google.com"&vd-form-version=1&title=Motorverzekering vergelijken&full-form-width=true"></iframe>
18
+ Example: <iframe src="localhost:3000/motor-form?link=http://google.com"&has-new-design=1&title=Motorverzekering vergelijken&full-form-width=true"></iframe>
20
19
 
21
20
 
22
21
  ### Embedded mode
@@ -44,23 +43,24 @@ import '@vergelijkdirect/comparison-forms/styles';
44
43
  ```
45
44
  7.Use component <embedded-comparison-forms> to render appropriate form. Below indicated props types:
46
45
 
47
- | Props | Type/required | Meaning | Example |
48
- |:--------------------------:|:-------------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------:|
49
- | form-component | String/Yes | Corresponds to type of form | motor-form |
50
- | link | String/No | Indicate address, where user should be redirected after forms submit | &link=verzekeringen/results-page |
51
- | vd-form-version | String/No | Indicate which version of form styles implemented. Missing value or 0 mean old form, 1 - new redesign form (non-required) | 1 |
52
- | is-on-result-page | Boolean/No | Indicate is form used for aanvragen flow (result page, coverages page etc), or for starting landing page (for exampple VD project) | true |
53
- | is-on-coverage-page | Boolean/No | Indicate is form used for aanvragen flow (coverages page), or for starting landing page (for exampple VD project) | true |
54
- | classes | String/No | Indicate which classes should be implemented for root element (vd-form-card) | vd-form-flat |
55
- | insurance-state | Object/No | There should be indicated object with data for insurance. Used to show data in inputs, if user already filled in form. | for motor insurance can be included object motorState from store |
56
- | user-information | Object/No | There should be indicated object with user's data. Used to show data in inputs, if user already filled in form. | Usually it's userInformation object from store |
57
- | base-url | String/No | Base url should be used only for loans create forms, specify base url | / |
58
- | title | String/No | Specify title of form (by default has value <insurance name> vergelijken) | Motorverzekering vergelijken |
59
- | show-title | Boolean/No | Boolean, that specify should title, in title prop be showed (Use value false, if there is external modal title, to prevent double titles) | false |
60
- | form-orientation | String/No | Specify form orientation (Vertical or Horizontal) Should be used only for create loan form | Vertical |
61
- | comparison | Comparison/No | Pass existing comparison for update actions in form. Required value for loans upgrade form | Comparison instance object |
62
- | @change | Function/No | Function, that should be called, when user submit form. Has parameters ({ insuranceState: {...}, userInformation: {...} }), that can be used for furtner actions with this data | Any function, that should be called after form submit |
63
- | @emit-event-hub | Function/No | Function, that should be called, when user want to use external emit event. Has parameters ({ event: String, data: {...}}) | emit('emit-event-hub', { event: 'call-some-external-event', data: { ...any data }) |
46
+ | Props | Type/required | Meaning | Example |
47
+ |:-------------------:|:-------------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------:|
48
+ | form-component | String/Yes | Corresponds to type of form | motor-form |
49
+ | link | String/No | Indicate address, where user should be redirected after forms submit | &link=verzekeringen/results-page |
50
+ | has-new-design | Boolean/No | Indicate which version of form styles implemented. Missing value or false mean old form, true - new redesign form (non-required) | true |
51
+ | is-on-result-page | Boolean/No | Indicate is form used for aanvragen flow (result page, coverages page etc), or for starting landing page (for exampple VD project) | true |
52
+ | is-on-coverage-page | Boolean/No | Indicate is form used for aanvragen flow (coverages page), or for starting landing page (for exampple VD project) | true |
53
+ | classes | String/No | Indicate which classes should be implemented for root element (vd-form-card) | vd-form-flat |
54
+ | insurance-state | Object/No | There should be indicated object with data for insurance. Used to show data in inputs, if user already filled in form. | for motor insurance can be included object motorState from store |
55
+ | user-information | Object/No | There should be indicated object with user's data. Used to show data in inputs, if user already filled in form. | Usually it's userInformation object from store |
56
+ | base-url | String/No | Base url should be used only for loans create forms, specify base url | / |
57
+ | title | String/No | Specify title of form (by default has value <insurance name> vergelijken) | Motorverzekering vergelijken |
58
+ | show-title | Boolean/No | Boolean, that specify should title, in title prop be showed (Use value false, if there is external modal title, to prevent double titles) | false |
59
+ | form-orientation | String/No | Specify form orientation (Vertical or Horizontal) Should be used only for create loan form | Vertical |
60
+ | comparison | Comparison/No | Pass existing comparison for update actions in form. Required value for loans upgrade form | Comparison instance object |
61
+ | status | String/No | Now used only for travels, but will be implement instead of is-on-result/coverage page. Indicate location of form. | IS_ON_FAMILY_PAGE |
62
+ | @change | Function/No | Function, that should be called, when user submit form. Has parameters ({ insuranceState: {...}, userInformation: {...} }), that can be used for furtner actions with this data | Any function, that should be called after form submit |
63
+ | @emit-event-hub | Function/No | Function, that should be called, when user want to use external emit event. Has parameters ({ event: String, data: {...}}) | emit('emit-event-hub', { event: 'call-some-external-event', data: { ...any data }) |
64
64
 
65
65
  Example
66
66
 
@@ -72,7 +72,7 @@ Example
72
72
  :form-component="'motor-form'"
73
73
  :user-information="userInformation"
74
74
  :insurance-state="motorState"
75
- :vd-form-version="'1'"
75
+ :has-new-design="true"
76
76
  :is-on-result-page="true"
77
77
  :classes="'w-100 vd-form-card--flat'"
78
78
  :link="'/'"
@@ -87,6 +87,23 @@ Example
87
87
  * update-loan-comparison-form
88
88
  * car-form
89
89
  * car-form-horizontal
90
+ * moped-form
91
+ * moped-form-horizontal
92
+ * pet-form
93
+ * pet-form-horizontal
94
+ * bike-form
95
+ * bike-form-horizontal
96
+ * caravan-form
97
+ * caravan-form-horizontal
98
+ * liability-form
99
+ * liability-form-horizontal
100
+ * travel-form
101
+ * travel-form-horizontal
102
+ * legal-assistance-form
103
+ * legal-assistance-form-horizontal
104
+ * house-form
105
+ * house-form-horizontal
106
+ * package-form
90
107
 
91
108
  Those names should be used in form-component prop for embedded mode, or for link address for standalone version, and should be exact as in this list.
92
109