@vergelijkdirect/comparison-forms 2.0.0-rc.2 → 2.0.0-rc.4
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 +69 -57
- package/dist/vue/comparison-forms.css +2 -4
- package/dist/vue/comparison-forms.d.ts +219 -238
- package/dist/vue/comparison-forms.js +5769 -5601
- package/dist/wc/comparison-forms.css +2 -4
- package/dist/wc/comparison-forms.js +18424 -28970
- package/package.json +79 -67
package/README.md
CHANGED
|
@@ -8,58 +8,67 @@ 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 |
|
|
12
|
-
|
|
13
|
-
| Page address |
|
|
14
|
-
| link |
|
|
15
|
-
| title |
|
|
16
|
-
| full-form-width |
|
|
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 |
|
|
17
17
|
|
|
18
18
|
Example: <iframe src="localhost:3000/motor-form?link=http://google.com"&has-new-design=1&title=Motorverzekering vergelijken&full-form-width=true"></iframe>
|
|
19
19
|
|
|
20
|
-
|
|
21
20
|
### Embedded mode
|
|
22
21
|
|
|
23
22
|
1.Install package @vergelijkdirect/comparison-forms (Strongly recommend to use exact version of package)
|
|
23
|
+
|
|
24
24
|
```
|
|
25
25
|
npm i @vergelijkdirect/comparison-forms --save-exact
|
|
26
26
|
```
|
|
27
|
+
|
|
27
28
|
2.Ensure, that version of Vue is >2.7.14, and version of Node is 20.6.1
|
|
28
29
|
3.In entry js file (for example vd-partner.ts in partner-front) import comparisonFormsPlugin
|
|
30
|
+
|
|
29
31
|
```
|
|
30
32
|
import comparisonFormsPlugin from '@vergelijkdirect/comparison-forms';
|
|
31
33
|
```
|
|
34
|
+
|
|
32
35
|
4.Make Vue use plugin
|
|
36
|
+
|
|
33
37
|
```
|
|
34
38
|
Vue.use(comparisonFormsPlugin);
|
|
35
39
|
```
|
|
40
|
+
|
|
36
41
|
5.During creating vue-instance of app, add property:
|
|
42
|
+
|
|
37
43
|
```
|
|
38
44
|
provide: { 'ITC': Vue.prototype.$transmissionClient },
|
|
39
45
|
```
|
|
46
|
+
|
|
40
47
|
6.For correct work of styles add globally or in correspond component styles import
|
|
48
|
+
|
|
41
49
|
```
|
|
42
50
|
import '@vergelijkdirect/comparison-forms/styles';
|
|
43
51
|
```
|
|
52
|
+
|
|
44
53
|
7.Use component <embedded-comparison-forms> to render appropriate form. Below indicated props types:
|
|
45
54
|
|
|
46
|
-
|
|
|
47
|
-
|
|
48
|
-
| form-component
|
|
49
|
-
| link
|
|
50
|
-
| has-new-design
|
|
51
|
-
|
|
|
52
|
-
|
|
|
53
|
-
| user-information
|
|
54
|
-
| base-url
|
|
55
|
-
|
|
|
56
|
-
| show-title
|
|
57
|
-
| form-orientation
|
|
58
|
-
|
|
|
59
|
-
| additional-options
|
|
60
|
-
|
|
|
61
|
-
| @redirect-page
|
|
62
|
-
|
|
|
55
|
+
| Props | Type/required | Meaning | Example |
|
|
56
|
+
| :----------------: | :-----------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------: |
|
|
57
|
+
| form-component | String/Yes | Corresponds to type of form | motor-form |
|
|
58
|
+
| link | String/No | Indicate address, where user should be redirected after forms submit | &link=verzekeringen/results-page |
|
|
59
|
+
| 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 |
|
|
60
|
+
| classes | String/No | Indicate which classes should be implemented for root element (vd-form-card) | vd-form-flat |
|
|
61
|
+
| 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 |
|
|
62
|
+
| 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 |
|
|
63
|
+
| base-url | String/No | Base url should be used only for loans create forms, specify base url | / |
|
|
64
|
+
| title | String/No | Specify title of form (by default has value <insurance name> vergelijken) | Motorverzekering vergelijken |
|
|
65
|
+
| 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 |
|
|
66
|
+
| form-orientation | String/No | Specify form orientation (Vertical or Horizontal) Should be used only for create loan form | Vertical |
|
|
67
|
+
| form-location | String/No | String, that indicate, where form is located. Can be before flow, on result, coverages,family page. | IS_BEFORE_FLOW/IS_ON_RESULT_PAGE/IS_ON_COVERAGES_PAGE/IS_ON_FAMILY_PAGE |
|
|
68
|
+
| additional-options | Object/No | Props that contains all special data, for separate form. E.g. qustionnary data for only Risk scanner/business car forms. | { qa_id: 'some value' } |
|
|
69
|
+
| @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 |
|
|
70
|
+
| @redirect-page | Function/No | Function, that should be called, when user submit form, and should be redirected to page, indicated in link props with necessary data in queries. | Any function, that should be called after form submit |
|
|
71
|
+
| @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 }) |
|
|
63
72
|
|
|
64
73
|
Example
|
|
65
74
|
|
|
@@ -83,42 +92,45 @@ Example
|
|
|
83
92
|
```
|
|
84
93
|
|
|
85
94
|
### THE LIST OF AVAILABLE FORMS
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
95
|
+
|
|
96
|
+
- bike-form
|
|
97
|
+
- bike-form-horizontal
|
|
98
|
+
- business-car-form
|
|
99
|
+
- business-car-form-horizontal
|
|
100
|
+
- business-liability-form
|
|
101
|
+
- car-form
|
|
102
|
+
- car-form-horizontal
|
|
103
|
+
- caravan-form
|
|
104
|
+
- caravan-form-horizontal
|
|
105
|
+
- default-form
|
|
106
|
+
- house-form
|
|
107
|
+
- house-form-horizontal
|
|
108
|
+
- legal-assistance-form
|
|
109
|
+
- legal-assistance-form-horizontal
|
|
110
|
+
- liability-form
|
|
111
|
+
- liability-form-horizontal
|
|
112
|
+
- loan-form
|
|
113
|
+
- loan-form-horizontal
|
|
114
|
+
- moped-form
|
|
115
|
+
- moped-form-horizontal
|
|
116
|
+
- motor-form
|
|
117
|
+
- motor-form-horizontal
|
|
118
|
+
- package-form
|
|
119
|
+
- pet-form
|
|
120
|
+
- pet-form-horizontal
|
|
121
|
+
- questionnaire-form
|
|
122
|
+
- risk-scanner-form
|
|
123
|
+
- travel-form
|
|
124
|
+
- travel-form-horizontal
|
|
114
125
|
|
|
115
126
|
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. If there is a need to get old horizontal form, formComponent should include: form-type-horizontal-old, or form-type-old-horizontal. E.g. motor-form-horizontal-old.
|
|
116
127
|
|
|
117
128
|
NOTICE: If there is :link prop, user will be redirected to this address with appropriate queryparams.
|
|
118
129
|
|
|
119
130
|
### Embedded mode Comparison forms commands
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
131
|
+
|
|
132
|
+
- npm run watch - launch dev mode SSR app
|
|
133
|
+
- npm run serve - launch prod mode SSR app
|
|
134
|
+
- npm run test - launch test mode app
|
|
135
|
+
- npm run build - make build
|
|
136
|
+
- npm run rollup - make rollup of comparison forms
|