comand-component-library 4.1.54 → 4.1.56
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.
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
<!-- begin CmdForm -->
|
|
8
8
|
<CmdForm
|
|
9
9
|
@submit="onSubmit"
|
|
10
|
+
:class="{'send-success': sendSuccessfully}"
|
|
10
11
|
novalidate="novalidate"
|
|
11
12
|
v-bind="cmdForm"
|
|
12
13
|
:legend="legend"
|
|
@@ -25,7 +26,6 @@
|
|
|
25
26
|
:replaceInputType="configuration.salutation?.replaceInputType"
|
|
26
27
|
v-model="formData.salutation.value"
|
|
27
28
|
:i18n="i18n"
|
|
28
|
-
@validate="onValidate"
|
|
29
29
|
/>
|
|
30
30
|
<!-- end cmd-form-element -->
|
|
31
31
|
|
|
@@ -39,7 +39,6 @@
|
|
|
39
39
|
:replaceInputType="configuration.salutation?.replaceInputType"
|
|
40
40
|
v-model="formData.salutation.value"
|
|
41
41
|
:i18n="i18n"
|
|
42
|
-
@validate="onValidate"
|
|
43
42
|
/>
|
|
44
43
|
<!-- end cmd-form-element -->
|
|
45
44
|
</div>
|
|
@@ -62,7 +61,7 @@
|
|
|
62
61
|
v-model="formData.lastName.value"
|
|
63
62
|
:status="formData.lastName.error ? 'error' : ''"
|
|
64
63
|
:i18n="i18n"
|
|
65
|
-
|
|
64
|
+
:showStatusIcon="false"
|
|
66
65
|
/>
|
|
67
66
|
<!-- end cmd-form-element -->
|
|
68
67
|
|
|
@@ -79,7 +78,6 @@
|
|
|
79
78
|
v-model="formData.firstName.value"
|
|
80
79
|
:status="formData.firstName.error ? 'error' : ''"
|
|
81
80
|
:i18n="i18n"
|
|
82
|
-
@validate="onValidate"
|
|
83
81
|
/>
|
|
84
82
|
<!-- end cmd-form-element -->
|
|
85
83
|
</div>
|
|
@@ -97,7 +95,7 @@
|
|
|
97
95
|
v-model="formData.email.value"
|
|
98
96
|
:status="formData.email.error ? 'error' : ''"
|
|
99
97
|
:i18n="i18n"
|
|
100
|
-
|
|
98
|
+
:showStatusIcon="false"
|
|
101
99
|
/>
|
|
102
100
|
<!-- end cmd-form-element -->
|
|
103
101
|
|
|
@@ -114,7 +112,6 @@
|
|
|
114
112
|
:name="configuration.phone?.name"
|
|
115
113
|
:status="formData.phone.error ? 'error' : ''"
|
|
116
114
|
:i18n="i18n"
|
|
117
|
-
@validate="onValidate"
|
|
118
115
|
/>
|
|
119
116
|
<!-- end cmd-form-element -->
|
|
120
117
|
</div>
|
|
@@ -131,7 +128,6 @@
|
|
|
131
128
|
v-model="formData.country.value"
|
|
132
129
|
:status="formData.country.error ? 'error' : ''"
|
|
133
130
|
:i18n="i18n"
|
|
134
|
-
@validate="onValidate"
|
|
135
131
|
@update:modelValue="onCountrySelect"
|
|
136
132
|
/>
|
|
137
133
|
<!-- end cmd-form-element -->
|
|
@@ -148,7 +144,6 @@
|
|
|
148
144
|
v-model="formData.streetNo.value"
|
|
149
145
|
:status="formData.streetNo.error ? 'error' : ''"
|
|
150
146
|
:i18n="i18n"
|
|
151
|
-
@validate="onValidate"
|
|
152
147
|
/>
|
|
153
148
|
<!-- end cmd-form-element -->
|
|
154
149
|
|
|
@@ -164,7 +159,6 @@
|
|
|
164
159
|
v-model="formData.pobox.value"
|
|
165
160
|
:status="formData.pobox.error ? 'error' : ''"
|
|
166
161
|
:i18n="i18n"
|
|
167
|
-
@validate="onValidate"
|
|
168
162
|
/>
|
|
169
163
|
<!-- end cmd-form-element -->
|
|
170
164
|
|
|
@@ -182,7 +176,6 @@
|
|
|
182
176
|
v-model="formData.zip.value"
|
|
183
177
|
:status="formData.zip.error ? 'error' : ''"
|
|
184
178
|
:i18n="i18n"
|
|
185
|
-
@validate="onValidate"
|
|
186
179
|
/>
|
|
187
180
|
<!-- end cmd-form-element -->
|
|
188
181
|
|
|
@@ -198,7 +191,6 @@
|
|
|
198
191
|
v-model="formData.city.value"
|
|
199
192
|
:status="formData.city.error ? 'error' : ''"
|
|
200
193
|
:i18n="i18n"
|
|
201
|
-
@validate="onValidate"
|
|
202
194
|
/>
|
|
203
195
|
<!-- end cmd-form-element -->
|
|
204
196
|
</div>
|
|
@@ -215,7 +207,6 @@
|
|
|
215
207
|
v-model="formData.additionalAddressInfo.value"
|
|
216
208
|
:status="formData.additionalAddressInfo.error ? 'error' : ''"
|
|
217
209
|
:i18n="i18n"
|
|
218
|
-
@validate="onValidate"
|
|
219
210
|
/>
|
|
220
211
|
<!-- end cmd-form-element -->
|
|
221
212
|
</div>
|
|
@@ -233,7 +224,7 @@
|
|
|
233
224
|
v-model="formData.userMessage.value"
|
|
234
225
|
:status="formData.userMessage.error ? 'error' : ''"
|
|
235
226
|
:i18n="i18n"
|
|
236
|
-
|
|
227
|
+
:showStatusIcon="false"
|
|
237
228
|
/>
|
|
238
229
|
<!-- end cmd-form-element -->
|
|
239
230
|
|
|
@@ -252,12 +243,17 @@
|
|
|
252
243
|
v-model="formData.acceptPrivacy.value"
|
|
253
244
|
:status="formData.acceptPrivacy.error ? 'error' : ''"
|
|
254
245
|
:i18n="i18n"
|
|
255
|
-
|
|
246
|
+
>
|
|
256
247
|
<template v-slot:labeltext>
|
|
257
248
|
<span ref="dataPrivacy" v-html="getMessage('basic_form.labeltext.data_privacy')"></span>
|
|
258
249
|
</template>
|
|
259
250
|
</CmdFormElement>
|
|
260
251
|
<!-- end cmd-form-element -->
|
|
252
|
+
|
|
253
|
+
<!-- button to test a successful sending
|
|
254
|
+
<button class="button" type="button" @click="onSuccess">On Success</button>
|
|
255
|
+
-->
|
|
256
|
+
|
|
261
257
|
</CmdForm>
|
|
262
258
|
<!-- end CmdForm -->
|
|
263
259
|
</div>
|
|
@@ -284,6 +280,7 @@ export default {
|
|
|
284
280
|
},
|
|
285
281
|
data() {
|
|
286
282
|
return {
|
|
283
|
+
sendSuccessfully: false,
|
|
287
284
|
validator: new ContactFormValidator(label => label),
|
|
288
285
|
formData: {
|
|
289
286
|
salutation: {value: this.configuration.salutation.default},
|
|
@@ -481,9 +478,37 @@ export default {
|
|
|
481
478
|
}
|
|
482
479
|
},
|
|
483
480
|
methods: {
|
|
481
|
+
/*
|
|
482
|
+
onSuccess() {
|
|
483
|
+
this.sendSuccessfully = true
|
|
484
|
+
try {
|
|
485
|
+
// reset global validation-status
|
|
486
|
+
this.formData.error = false
|
|
487
|
+
|
|
488
|
+
for (let key in this.formData) {
|
|
489
|
+
// reset field-validation-status
|
|
490
|
+
if(this.formData[key].error) {
|
|
491
|
+
this.formData[key].error = false
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
// reset field-values
|
|
495
|
+
if(typeof this.formData[key].value === "string") {
|
|
496
|
+
if(key === "salutation") {
|
|
497
|
+
this.formData[key].value = this.configuration.salutation.default
|
|
498
|
+
} else {
|
|
499
|
+
this.formData[key].value = ""
|
|
500
|
+
}
|
|
501
|
+
} else if(key === "acceptPrivacy") {
|
|
502
|
+
this.formData[key].value = false
|
|
503
|
+
}
|
|
504
|
+
}
|
|
505
|
+
} catch (error) {
|
|
506
|
+
console.error(error)
|
|
507
|
+
}
|
|
508
|
+
},
|
|
509
|
+
*/
|
|
484
510
|
onSubmit(event) {
|
|
485
511
|
this.onValidate()
|
|
486
|
-
|
|
487
512
|
this.formData = Object.assign({}, this.validator.validatePrivacy(this.formData));
|
|
488
513
|
|
|
489
514
|
if (this.formData.error || this.useNativeSubmit) {
|
|
@@ -506,6 +531,8 @@ export default {
|
|
|
506
531
|
}
|
|
507
532
|
},
|
|
508
533
|
submitForm(token) {
|
|
534
|
+
this.sendSuccessfully = false
|
|
535
|
+
|
|
509
536
|
// custom submit of form-data
|
|
510
537
|
const customSubmitFormData = new FormData()
|
|
511
538
|
|
|
@@ -523,6 +550,7 @@ export default {
|
|
|
523
550
|
|
|
524
551
|
fetch(this.formAction, {method: this.cmdForm?.formMethod || "POST", body: customSubmitFormData}).then((response) => {
|
|
525
552
|
if(response.ok) {
|
|
553
|
+
this.sendSuccessfully = true
|
|
526
554
|
this.$refs.form.showMessage("success", this.getMessage("basic_form.system_message.success.message_sent_successfully"))
|
|
527
555
|
try {
|
|
528
556
|
// reset global validation-status
|
|
@@ -541,7 +569,7 @@ export default {
|
|
|
541
569
|
} else {
|
|
542
570
|
this.formData[key].value = ""
|
|
543
571
|
}
|
|
544
|
-
} else if(key === "acceptPrivacy") {
|
|
572
|
+
} else if (key === "acceptPrivacy") {
|
|
545
573
|
this.formData[key].value = false
|
|
546
574
|
}
|
|
547
575
|
}
|
|
@@ -257,6 +257,22 @@ export default {
|
|
|
257
257
|
}
|
|
258
258
|
}
|
|
259
259
|
|
|
260
|
+
/* must be refactored */
|
|
261
|
+
&.send-success {
|
|
262
|
+
fieldset {
|
|
263
|
+
border-color: var(--default-border-color) !important;
|
|
264
|
+
|
|
265
|
+
:is(label, .label) :is(.label-text :is(span, a[class*="icon-"], a:has([class*="icon-"])), .place-inside[class*="icon-"], input, select, textarea) {
|
|
266
|
+
--status-color: var(--default-text-color) !important;
|
|
267
|
+
border-color: var(--default-border-color) !important;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
sup {
|
|
271
|
+
--status-color: var(--primary-color) !important;
|
|
272
|
+
}
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
|
|
260
276
|
legend.align-left {
|
|
261
277
|
left: 0;
|
|
262
278
|
right: auto;
|
|
@@ -11,12 +11,16 @@ class ContactFormValidator {
|
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
validate(formData) {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
14
|
+
const lastNameValidationResult = this.validateRequired(formData.lastName.value, ContactFormValidator.PATTERN_SURNAME, this.label('form_error_invalid_surname'))
|
|
15
|
+
const emailValidationResult = this.validateRequired(formData.email.value, ContactFormValidator.PATTERN_EMAIL, this.label('form_error_invalid_email'))
|
|
16
|
+
const userMessageValidationResult = this.validateRequired(formData.userMessage.value, ContactFormValidator.PATTERN_MESSAGE, this.label('form_error_invalid_message'))
|
|
17
|
+
formData.lastName.error = lastNameValidationResult[0]
|
|
18
|
+
formData.lastName.errorMessage = lastNameValidationResult[1]
|
|
19
|
+
formData.email.error = emailValidationResult[0]
|
|
20
|
+
formData.email.errorMessage = emailValidationResult[1]
|
|
21
|
+
formData.userMessage.error = userMessageValidationResult[0]
|
|
22
|
+
formData.userMessage.errorMessage = userMessageValidationResult[1]
|
|
23
|
+
console.log("validate", formData.email)
|
|
20
24
|
formData.acceptPrivacy.error = false
|
|
21
25
|
formData.error = formData.lastName.error
|
|
22
26
|
|| formData.email.error
|