comand-component-library 4.1.12 → 4.1.14

Sign up to get free protection for your applications and to get access to all the features.
Files changed (8) hide show
  1. package/dist/comand-component-library.js +1659 -1630
  2. package/dist/comand-component-library.umd.cjs +27 -27
  3. package/dist/style.css +1 -1
  4. package/package.json +1 -1
  5. package/src/ComponentLibrary.vue +1 -0
  6. package/src/components/CmdBasicForm.vue +46 -31
  7. package/src/components/CmdForm.vue +15 -1
  8. package/src/utils/ContactFormValidation.js +3 -3
package/src/components/CmdBasicForm.vue CHANGED
@@ -12,6 +12,7 @@
12
12
  :legend="legend"
13
13
  :submitButton="submitButtonProperties"
14
14
  :formAction="formAction"
15
+ ref="form"
15
16
  >
16
17
  <div v-if="configuration.salutation" class="flex-container no-flex order-male-female">
17
18
  <!-- begin cmd-form-element -->
@@ -19,7 +20,7 @@
19
20
  element="input"
20
21
  type="radio"
21
22
  :labelText="getMessage('basic_form.labeltext.salutation_male')"
22
- :name="configuration.salutation?.name || 'salutation'"
23
+ :name="configuration.salutation?.name"
23
24
  inputValue="m"
24
25
  :replaceInputType="configuration.salutation?.replaceInputType"
25
26
  v-model="formData.salutation.value"
@@ -33,7 +34,7 @@
33
34
  element="input"
34
35
  type="radio"
35
36
  :labelText="getMessage('basic_form.labeltext.salutation_female')"
36
- :name="configuration.salutation?.name || 'salutation'"
37
+ :name="configuration.salutation?.name"
37
38
  inputValue="f"
38
39
  :replaceInputType="configuration.salutation?.replaceInputType"
39
40
  v-model="formData.salutation.value"
@@ -56,7 +57,7 @@
56
57
  iconClass="icon-user-profile"
57
58
  :labelText="getMessage('basic_form.labeltext.last_name')"
58
59
  :required="configuration.lastName?.required"
59
- :name="configuration.lastName?.name || 'last-name'"
60
+ :name="configuration.lastName?.name"
60
61
  :placeholder="getMessage('basic_form.placeholder.last_name')"
61
62
  v-model="formData.lastName.value"
62
63
  :status="formData.lastName.error ? 'error' : ''"
@@ -74,7 +75,7 @@
74
75
  :labelText="getMessage('basic_form.labeltext.first_name')"
75
76
  :placeholder="getMessage('basic_form.placeholder.first_name')"
76
77
  :required="configuration.firstName?.required"
77
- :name="configuration.firstName?.name || 'first-name'"
78
+ :name="configuration.firstName?.name"
78
79
  v-model="formData.firstName.value"
79
80
  :status="formData.firstName.error ? 'error' : ''"
80
81
  :i18n="i18n"
@@ -92,7 +93,7 @@
92
93
  :labelText="getMessage('basic_form.labeltext.email')"
93
94
  :placeholder="getMessage('basic_form.placeholder.email')"
94
95
  :required="configuration.email?.required"
95
- :name="configuration.email?.name || 'email'"
96
+ :name="configuration.email?.name"
96
97
  v-model="formData.email.value"
97
98
  :status="formData.email.error ? 'error' : ''"
98
99
  :i18n="i18n"
@@ -110,7 +111,7 @@
110
111
  :placeholder="getMessage('basic_form.placeholder.phone')"
111
112
  v-model="formData.phone.value"
112
113
  :required="configuration.phone?.required"
113
- :name="configuration.phone?.name || 'phone'"
114
+ :name="configuration.phone?.name"
114
115
  :status="formData.phone.error ? 'error' : ''"
115
116
  :i18n="i18n"
116
117
  @validate="onValidate"
@@ -126,7 +127,7 @@
126
127
  :labelText="getMessage('basic_form.labeltext.country')"
127
128
  :selectOptions="configuration.country?.selectOptions"
128
129
  :required="configuration.country?.required"
129
- :name="configuration.country?.name || 'country'"
130
+ :name="configuration.country?.name"
130
131
  v-model="formData.country.value"
131
132
  :status="formData.country.error ? 'error' : ''"
132
133
  :i18n="i18n"
@@ -143,7 +144,7 @@
143
144
  :labelText="getMessage('basic_form.labeltext.street_no')"
144
145
  :placeholder="getMessage('basic_form.placeholder.street_no')"
145
146
  :required="configuration.streetNo?.required"
146
- :name="configuration.streetNo?.name || 'street-no'"
147
+ :name="configuration.streetNo?.name"
147
148
  v-model="formData.streetNo.value"
148
149
  :status="formData.streetNo.error ? 'error' : ''"
149
150
  :i18n="i18n"
@@ -159,7 +160,7 @@
159
160
  :labelText="getMessage('basic_form.labeltext.pobox')"
160
161
  :placeholder="getMessage('basic_form.placeholder.pobox')"
161
162
  :required="configuration.pobox?.required"
162
- :name="configuration.pobox?.name || 'pobox'"
163
+ :name="configuration.pobox?.name"
163
164
  v-model="formData.pobox.value"
164
165
  :status="formData.pobox.error ? 'error' : ''"
165
166
  :i18n="i18n"
@@ -177,7 +178,7 @@
177
178
  :labelText="getMessage('basic_form.labeltext.zip')"
178
179
  :placeholder="getMessage('basic_form.placeholder.zip')"
179
180
  :required="configuration.zip?.required"
180
- :name="configuration.zip?.name || 'zip'"
181
+ :name="configuration.zip?.name"
181
182
  v-model="formData.zip.value"
182
183
  :status="formData.zip.error ? 'error' : ''"
183
184
  :i18n="i18n"
@@ -193,7 +194,7 @@
193
194
  :labelText="getMessage('basic_form.labeltext.city')"
194
195
  :placeholder="getMessage('basic_form.placeholder.city')"
195
196
  :required="configuration.city?.required"
196
- :name="configuration.city?.name || 'city'"
197
+ :name="configuration.city?.name"
197
198
  v-model="formData.city.value"
198
199
  :status="formData.city.error ? 'error' : ''"
199
200
  :i18n="i18n"
@@ -210,7 +211,7 @@
210
211
  :labelText="getMessage('basic_form.labeltext.additional_address_info')"
211
212
  :placeholder="getMessage('basic_form.placeholder.additional_address_info')"
212
213
  :required="configuration.additionalAddressInfo?.required"
213
- :name="configuration.additionalAddressInfo?.name || 'additional-address-info'"
214
+ :name="configuration.additionalAddressInfo?.name"
214
215
  v-model="formData.additionalAddressInfo.value"
215
216
  :status="formData.additionalAddressInfo.error ? 'error' : ''"
216
217
  :i18n="i18n"
@@ -226,7 +227,7 @@
226
227
  :labelText="getMessage('basic_form.labeltext.user_message')"
227
228
  :placeholder="getMessage('basic_form.placeholder.user_message')"
228
229
  :required="configuration.userMessage?.required"
229
- :name="configuration.userMessage?.name || 'user-message'"
230
+ :name="configuration.userMessage?.name"
230
231
  :textCharactersLeft="getMessage('basic_form.text.characters_left')"
231
232
  :maxlength="configuration.userMessage?.maxLength"
232
233
  v-model="formData.userMessage.value"
@@ -246,7 +247,7 @@
246
247
  element="input"
247
248
  type="checkbox"
248
249
  :required="configuration.acceptPrivacy?.required"
249
- :name="configuration.acceptPrivacy?.name || 'accept-privacy'"
250
+ :name="configuration.acceptPrivacy?.name"
250
251
  :replaceInputType="configuration.acceptPrivacy?.replaceInputType"
251
252
  v-model="formData.acceptPrivacy.value"
252
253
  :status="formData.acceptPrivacy.error ? 'error' : ''"
@@ -343,27 +344,33 @@ export default {
343
344
  return {
344
345
  salutation: {
345
346
  default: "m",
346
- replaceInputType: true
347
+ replaceInputType: true,
348
+ name: "salutation"
347
349
  },
348
350
  lastName: {
349
351
  required: true,
350
- type: "text"
352
+ type: "text",
353
+ name: "last-name"
351
354
  },
352
355
  firstName: {
353
356
  required: false,
354
- type: "text"
357
+ type: "text",
358
+ name: "first-name"
355
359
  },
356
360
  email: {
357
361
  required: true,
358
- type: "email"
362
+ type: "email",
363
+ name: "email"
359
364
  },
360
365
  phone: {
361
366
  required: false,
362
- type: "phone"
367
+ type: "phone",
368
+ name: "phone"
363
369
  },
364
370
  country: {
365
371
  required: false,
366
372
  element: "select",
373
+ name: "country",
367
374
  selectOptions: [
368
375
  {
369
376
  text: "Please select...",
@@ -381,27 +388,33 @@ export default {
381
388
  },
382
389
  streetNo: {
383
390
  required: false,
384
- type: "text"
391
+ type: "text",
392
+ name: "street-no"
385
393
  },
386
394
  zip: {
387
395
  required: false,
388
- type: "number"
396
+ type: "number",
397
+ name: "zip"
389
398
  },
390
399
  city: {
391
400
  required: false,
392
- type: "text"
401
+ type: "text",
402
+ name: "city"
393
403
  },
394
404
  additionalAddressInfo: {
395
405
  required: false,
396
- type: "text"
406
+ type: "text",
407
+ name: "additional-address-info"
397
408
  },
398
409
  userMessage: {
399
- required: false,
400
- element: "textarea"
410
+ required: true,
411
+ element: "textarea",
412
+ name: "user-message"
401
413
  },
402
414
  acceptPrivacy: {
403
415
  required: true,
404
- replaceInputType: true
416
+ replaceInputType: true,
417
+ name: "accept-privacy"
405
418
  }
406
419
  }
407
420
  }
@@ -481,21 +494,23 @@ export default {
481
494
 
482
495
  for(let i = 0; i < configurationEntries.length; i++) {
483
496
  // assign formData values to form-element key
484
- customSubmitFormData.set(configurationEntries[i], this.formData[configurationEntries[i]].value)
497
+ customSubmitFormData.set(this.configuration[configurationEntries[i]].name, this.formData[configurationEntries[i]].value)
485
498
  }
486
499
 
487
- fetch(this.formAction, {method: "POST", body: customSubmitFormData}).then((response) => {
500
+ fetch(this.formAction, {method: this.cmdForm?.formMethod || "POST", body: customSubmitFormData}).then((response) => {
488
501
  if(response.ok) {
489
- console.log("CmdBasicForm", "ok")
502
+ this.$refs.form.showMessage("success", "Message sent successfully!")
503
+
490
504
  } else {
491
- console.log("CmdBasicForm", "fail")
505
+ this.$refs.form.showMessage("error", "Message could not be sent!")
492
506
  }
493
507
  }).catch((error) => {
508
+ this.$refs.form.showMessage("error", "Message could not be sent!")
494
509
  console.error(error)
495
510
  })
496
511
 
497
512
  // prevent original levent form CmdForm (to avoid submit and reload)
498
- event.originalEvent.preventDefault()
513
+ event.originalEvent.preventDefault()
499
514
  },
500
515
  onCountrySelect(event) {
501
516
  this.cityBeforeZip = event === 'us' || event === 'uk';
package/src/components/CmdForm.vue CHANGED
@@ -7,6 +7,7 @@
7
7
  legend.text
8
8
  }}
9
9
  </legend>
10
+ <CmdSystemMessage v-if="systemMessage.show && systemMessage.message" :validationStatus="systemMessage.validationStatus" :system-message="systemMessage.message"/>
10
11
  <!-- begin default-slot-content -->
11
12
  <slot v-if="useSlot"></slot>
12
13
  <!-- end default-slot-content -->
@@ -71,14 +72,22 @@
71
72
 
72
73
  <script>
73
74
  import {createHtmlId} from "@"
75
+ import CmdSystemMessage from "@/components/CmdSystemMessage.vue";
74
76
 
75
77
  export default {
76
78
  name: "CmdForm",
79
+ components: {CmdSystemMessage},
77
80
  emits: ["submit"],
78
81
  data() {
79
82
  return {
80
83
  errorOccurred: false,
81
- formValues: {}
84
+ formValues: {},
85
+ showSystemMessage: false,
86
+ systemMessage: {
87
+ show: false,
88
+ validationStatus: "",
89
+ message: ""
90
+ }
82
91
  }
83
92
  },
84
93
  props: {
@@ -177,6 +186,11 @@ export default {
177
186
  },
178
187
  methods: {
179
188
  createHtmlId,
189
+ showMessage(validationStatus, message) {
190
+ this.systemMessage.show = true
191
+ this.systemMessage.validationStatus = validationStatus
192
+ this.systemMessage.message = message
193
+ },
180
194
  submitFormData(event) {
181
195
  // fill form-data with names and value
182
196
  let formdata = {}
package/src/utils/ContactFormValidation.js CHANGED
@@ -15,12 +15,12 @@ class ContactFormValidator {
15
15
  formData.lastName.value, ContactFormValidator.PATTERN_SURNAME, this.label('form_error_invalid_surname'))
16
16
  [formData.email.error, formData.email.errorMessage] = this.validateRequired(
17
17
  formData.email.value, ContactFormValidator.PATTERN_EMAIL, this.label('form_error_invalid_email'))
18
- [formData.additionalText.error, formData.additionalText.errorMessage] = this.validateRequired(
19
- formData.additionalText.value, ContactFormValidator.PATTERN_MESSAGE, this.label('form_error_invalid_message'))
18
+ [formData.userMessage.error, formData.userMessage.errorMessage] = this.validateRequired(
19
+ formData.userMessage.value, ContactFormValidator.PATTERN_MESSAGE, this.label('form_error_invalid_message'))
20
20
  formData.acceptPrivacy.error = false
21
21
  formData.error = formData.lastName.error
22
22
  || formData.email.error
23
- || formData.additionalText.error
23
+ || formData.userMessage.error
24
24
  return formData
25
25
  }
26
26