comand-component-library 4.1.12 → 4.1.14

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 (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