@formio/js 5.1.0-dev.5969.9a6e3f5 → 5.1.0-dev.5972.317ce89
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/dist/formio.form.js +74 -52
- package/dist/formio.form.min.js +1 -1
- package/dist/formio.full.js +77 -55
- package/dist/formio.full.min.js +1 -1
- package/dist/formio.js +3 -3
- package/dist/formio.min.js +1 -1
- package/dist/formio.utils.js +3 -3
- package/dist/formio.utils.min.js +1 -1
- package/lib/cjs/Form.js +4 -4
- package/lib/cjs/PDFBuilder.js +4 -4
- package/lib/cjs/Webform.d.ts +12 -12
- package/lib/cjs/Webform.js +132 -131
- package/lib/cjs/WebformBuilder.js +10 -10
- package/lib/cjs/Wizard.js +1 -1
- package/lib/cjs/WizardBuilder.js +1 -1
- package/lib/cjs/components/_classes/component/Component.js +12 -11
- package/lib/cjs/components/_classes/list/ListComponent.js +4 -4
- package/lib/cjs/components/_classes/multivalue/Multivalue.js +2 -2
- package/lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js +3 -3
- package/lib/cjs/components/address/Address.js +1 -1
- package/lib/cjs/components/button/Button.js +6 -6
- package/lib/cjs/components/checkbox/Checkbox.js +1 -1
- package/lib/cjs/components/datagrid/DataGrid.js +1 -1
- package/lib/cjs/components/datetime/DateTime.js +4 -0
- package/lib/cjs/components/day/Day.js +4 -20
- package/lib/cjs/components/editgrid/EditGrid.js +4 -4
- package/lib/cjs/components/file/File.js +15 -15
- package/lib/cjs/components/form/Form.js +4 -4
- package/lib/cjs/components/number/Number.js +1 -1
- package/lib/cjs/components/recaptcha/ReCaptcha.js +2 -2
- package/lib/cjs/components/select/Select.js +5 -5
- package/lib/cjs/components/selectboxes/SelectBoxes.js +2 -2
- package/lib/cjs/components/signature/Signature.d.ts +1 -1
- package/lib/cjs/components/signature/Signature.js +2 -2
- package/lib/cjs/components/survey/Survey.js +2 -2
- package/lib/cjs/components/textarea/TextArea.js +6 -6
- package/lib/cjs/components/textfield/TextField.js +3 -0
- package/lib/cjs/formio.form.js +4 -0
- package/lib/cjs/translations/en.d.ts +234 -81
- package/lib/cjs/translations/en.js +8 -81
- package/lib/cjs/utils/i18n.d.ts +5 -2
- package/lib/cjs/utils/i18n.js +32 -5
- package/lib/mjs/Form.js +4 -4
- package/lib/mjs/PDFBuilder.js +4 -4
- package/lib/mjs/Webform.d.ts +12 -12
- package/lib/mjs/Webform.js +142 -141
- package/lib/mjs/WebformBuilder.js +10 -10
- package/lib/mjs/Wizard.js +1 -1
- package/lib/mjs/WizardBuilder.js +1 -1
- package/lib/mjs/components/_classes/component/Component.js +12 -11
- package/lib/mjs/components/_classes/list/ListComponent.js +4 -4
- package/lib/mjs/components/_classes/multivalue/Multivalue.js +2 -2
- package/lib/mjs/components/_classes/nestedarray/NestedArrayComponent.js +3 -3
- package/lib/mjs/components/address/Address.js +1 -1
- package/lib/mjs/components/button/Button.js +6 -6
- package/lib/mjs/components/checkbox/Checkbox.js +1 -1
- package/lib/mjs/components/datagrid/DataGrid.js +1 -1
- package/lib/mjs/components/datetime/DateTime.js +5 -1
- package/lib/mjs/components/day/Day.js +4 -20
- package/lib/mjs/components/editgrid/EditGrid.js +4 -4
- package/lib/mjs/components/file/File.js +15 -15
- package/lib/mjs/components/form/Form.js +4 -4
- package/lib/mjs/components/number/Number.js +1 -1
- package/lib/mjs/components/recaptcha/ReCaptcha.js +2 -2
- package/lib/mjs/components/select/Select.js +7 -7
- package/lib/mjs/components/selectboxes/SelectBoxes.js +2 -2
- package/lib/mjs/components/signature/Signature.d.ts +1 -1
- package/lib/mjs/components/signature/Signature.js +2 -2
- package/lib/mjs/components/survey/Survey.js +2 -2
- package/lib/mjs/components/textarea/TextArea.js +6 -6
- package/lib/mjs/components/textfield/TextField.js +3 -0
- package/lib/mjs/formio.form.js +4 -0
- package/lib/mjs/translations/en.d.ts +234 -81
- package/lib/mjs/translations/en.js +89 -3
- package/lib/mjs/utils/i18n.d.ts +5 -2
- package/lib/mjs/utils/i18n.js +32 -5
- package/package.json +3 -3
package/lib/cjs/Webform.js
CHANGED
@@ -27,10 +27,10 @@ Formio_1.Formio.registerComponent = Components_1.default.setComponent;
|
|
27
27
|
* @returns {any} - The icon set.
|
28
28
|
*/
|
29
29
|
function getIconSet(icons) {
|
30
|
-
if (icons ===
|
31
|
-
return
|
30
|
+
if (icons === 'fontawesome') {
|
31
|
+
return 'fa';
|
32
32
|
}
|
33
|
-
return icons ||
|
33
|
+
return icons || '';
|
34
34
|
}
|
35
35
|
/**
|
36
36
|
*
|
@@ -45,7 +45,7 @@ function getOptions(options) {
|
|
45
45
|
saveDraft: false,
|
46
46
|
alwaysDirty: false,
|
47
47
|
saveDraftThrottle: 5000,
|
48
|
-
display:
|
48
|
+
display: 'form',
|
49
49
|
cdnUrl: Formio_1.Formio.cdn.baseUrl,
|
50
50
|
});
|
51
51
|
if (!options.events) {
|
@@ -89,10 +89,10 @@ function getOptions(options) {
|
|
89
89
|
*/
|
90
90
|
/**
|
91
91
|
* @typedef {object} ButtonSettings
|
92
|
-
* @property {boolean} [showPrevious] - Show the
|
93
|
-
* @property {boolean} [showNext] - Show the
|
94
|
-
* @property {boolean} [showCancel] - Show the
|
95
|
-
* @property {boolean} [showSubmit] - Show the
|
92
|
+
* @property {boolean} [showPrevious] - Show the 'Previous' button.
|
93
|
+
* @property {boolean} [showNext] - Show the 'Next' button.
|
94
|
+
* @property {boolean} [showCancel] - Show the 'Cancel' button.
|
95
|
+
* @property {boolean} [showSubmit] - Show the 'Submit' button.
|
96
96
|
*/
|
97
97
|
/**
|
98
98
|
* @typedef {object} FormOptions
|
@@ -161,15 +161,15 @@ class Webform extends NestedDataComponent_1.default {
|
|
161
161
|
}
|
162
162
|
const ctrl = event.ctrlKey || event.metaKey;
|
163
163
|
const keyCode = event.keyCode;
|
164
|
-
let char =
|
164
|
+
let char = '';
|
165
165
|
if (65 <= keyCode && keyCode <= 90) {
|
166
166
|
char = String.fromCharCode(keyCode);
|
167
167
|
}
|
168
168
|
else if (keyCode === 13) {
|
169
|
-
char =
|
169
|
+
char = 'Enter';
|
170
170
|
}
|
171
171
|
else if (keyCode === 27) {
|
172
|
-
char =
|
172
|
+
char = 'Esc';
|
173
173
|
}
|
174
174
|
lodash_1.default.each(this.shortcuts, (shortcut) => {
|
175
175
|
if (shortcut.ctrl && !ctrl) {
|
@@ -192,8 +192,8 @@ class Webform extends NestedDataComponent_1.default {
|
|
192
192
|
* The type of this element.
|
193
193
|
* @type {string}
|
194
194
|
*/
|
195
|
-
this.type =
|
196
|
-
this._src =
|
195
|
+
this.type = 'form';
|
196
|
+
this._src = '';
|
197
197
|
this._loading = false;
|
198
198
|
this._form = {};
|
199
199
|
this.draftEnabled = false;
|
@@ -341,7 +341,7 @@ class Webform extends NestedDataComponent_1.default {
|
|
341
341
|
return;
|
342
342
|
}
|
343
343
|
this.rebuild();
|
344
|
-
this.emit(
|
344
|
+
this.emit('languageChanged');
|
345
345
|
});
|
346
346
|
}
|
347
347
|
get componentComponents() {
|
@@ -359,18 +359,18 @@ class Webform extends NestedDataComponent_1.default {
|
|
359
359
|
addLanguage(code, lang, active = false) {
|
360
360
|
if (this.i18next) {
|
361
361
|
var translations = lodash_1.default.assign((0, utils_1.fastCloneDeep)(i18n_1.default.resources.en.translation), lang);
|
362
|
-
this.i18next.addResourceBundle(code,
|
362
|
+
this.i18next.addResourceBundle(code, 'translation', translations, true, true);
|
363
363
|
if (active) {
|
364
364
|
this.language = code;
|
365
365
|
}
|
366
366
|
}
|
367
367
|
}
|
368
368
|
keyboardCatchableElement(element) {
|
369
|
-
if (element.nodeName ===
|
369
|
+
if (element.nodeName === 'TEXTAREA') {
|
370
370
|
return false;
|
371
371
|
}
|
372
|
-
if (element.nodeName ===
|
373
|
-
return [
|
372
|
+
if (element.nodeName === 'INPUT') {
|
373
|
+
return ['text', 'email', 'password'].indexOf(element.type) === -1;
|
374
374
|
}
|
375
375
|
return true;
|
376
376
|
}
|
@@ -379,9 +379,9 @@ class Webform extends NestedDataComponent_1.default {
|
|
379
379
|
return;
|
380
380
|
}
|
381
381
|
shortcut = lodash_1.default.capitalize(shortcut);
|
382
|
-
if (shortcut ===
|
382
|
+
if (shortcut === 'Enter' || shortcut === 'Esc') {
|
383
383
|
// Restrict Enter and Esc only for buttons
|
384
|
-
if (element.tagName !==
|
384
|
+
if (element.tagName !== 'BUTTON') {
|
385
385
|
return;
|
386
386
|
}
|
387
387
|
this.shortcuts.push({
|
@@ -481,13 +481,13 @@ class Webform extends NestedDataComponent_1.default {
|
|
481
481
|
* @returns {boolean} - TRUE means the url was set, FALSE otherwise.
|
482
482
|
*/
|
483
483
|
setUrl(value, options) {
|
484
|
-
if (!value || typeof value !==
|
484
|
+
if (!value || typeof value !== 'string' || value === this._src) {
|
485
485
|
return false;
|
486
486
|
}
|
487
487
|
this._src = value;
|
488
488
|
this.nosubmit = true;
|
489
489
|
this.formio = this.options.formio = new Formio_1.Formio(value, options);
|
490
|
-
if (this.type ===
|
490
|
+
if (this.type === 'form') {
|
491
491
|
// Set the options source so this can be passed to other components.
|
492
492
|
this.options.src = value;
|
493
493
|
}
|
@@ -520,17 +520,17 @@ class Webform extends NestedDataComponent_1.default {
|
|
520
520
|
}
|
521
521
|
/**
|
522
522
|
* Set the loading state for this form, and also show the loader spinner.
|
523
|
-
* @param {boolean} loading - If this form should be
|
523
|
+
* @param {boolean} loading - If this form should be 'loading' or not.
|
524
524
|
*/
|
525
525
|
set loading(loading) {
|
526
526
|
if (this._loading !== loading) {
|
527
527
|
this._loading = loading;
|
528
528
|
if (!this.loader && loading) {
|
529
|
-
this.loader = this.ce(
|
530
|
-
class:
|
529
|
+
this.loader = this.ce('div', {
|
530
|
+
class: 'loader-wrapper',
|
531
531
|
});
|
532
|
-
const spinner = this.ce(
|
533
|
-
class:
|
532
|
+
const spinner = this.ce('div', {
|
533
|
+
class: 'loader text-center',
|
534
534
|
});
|
535
535
|
this.loader.appendChild(spinner);
|
536
536
|
}
|
@@ -615,18 +615,18 @@ class Webform extends NestedDataComponent_1.default {
|
|
615
615
|
// Use the sanitize config from the form settings or the global sanitize config if it is not provided in the options
|
616
616
|
if (!this.options.sanitizeConfig && !this.builderMode) {
|
617
617
|
this.options.sanitizeConfig =
|
618
|
-
lodash_1.default.get(form,
|
619
|
-
lodash_1.default.get(form,
|
618
|
+
lodash_1.default.get(form, 'settings.sanitizeConfig') ||
|
619
|
+
lodash_1.default.get(form, 'globalSettings.sanitizeConfig');
|
620
620
|
}
|
621
|
-
if (
|
621
|
+
if ('schema' in form && (0, compare_versions_1.compareVersions)(form.schema, '1.x') > 0) {
|
622
622
|
this.ready.then(() => {
|
623
|
-
this.setAlert(
|
623
|
+
this.setAlert('alert alert-danger', this.t('newFormSchema'));
|
624
624
|
});
|
625
625
|
}
|
626
626
|
// See if they pass a module, and evaluate it if so.
|
627
627
|
if (form && form.module) {
|
628
628
|
let formModule = null;
|
629
|
-
if (typeof form.module ===
|
629
|
+
if (typeof form.module === 'string') {
|
630
630
|
try {
|
631
631
|
formModule = this.evaluate(`return ${form.module}`);
|
632
632
|
}
|
@@ -648,7 +648,7 @@ class Webform extends NestedDataComponent_1.default {
|
|
648
648
|
this.initialized = false;
|
649
649
|
const rebuild = this.rebuild() || Promise.resolve();
|
650
650
|
return rebuild.then(() => {
|
651
|
-
this.emit(
|
651
|
+
this.emit('formLoad', form);
|
652
652
|
this.triggerCaptcha();
|
653
653
|
// Make sure to trigger onChange after a render event occurs to speed up form rendering.
|
654
654
|
setTimeout(() => {
|
@@ -720,7 +720,7 @@ class Webform extends NestedDataComponent_1.default {
|
|
720
720
|
* @returns {Promise} - The promise that is triggered when the submission is set.
|
721
721
|
*/
|
722
722
|
setSubmission(submission, flags = {}) {
|
723
|
-
flags = Object.assign(Object.assign({}, flags), { fromSubmission: lodash_1.default.has(flags,
|
723
|
+
flags = Object.assign(Object.assign({}, flags), { fromSubmission: lodash_1.default.has(flags, 'fromSubmission') ? flags.fromSubmission : true });
|
724
724
|
return (this.onSubmission = this.formReady
|
725
725
|
.then((resolveFlags) => {
|
726
726
|
if (resolveFlags) {
|
@@ -732,9 +732,9 @@ class Webform extends NestedDataComponent_1.default {
|
|
732
732
|
.catch((err) => this.submissionReadyReject(err)));
|
733
733
|
}
|
734
734
|
handleDraftError(errName, errDetails, restoreDraft) {
|
735
|
-
const errorMessage = lodash_1.default.trim(`${this.t(errName)} ${errDetails ||
|
735
|
+
const errorMessage = lodash_1.default.trim(`${this.t(errName)} ${errDetails || ''}`);
|
736
736
|
console.warn(errorMessage);
|
737
|
-
this.emit(restoreDraft ?
|
737
|
+
this.emit(restoreDraft ? 'restoreDraftError' : 'saveDraftError', errDetails || errorMessage);
|
738
738
|
}
|
739
739
|
saveDraft() {
|
740
740
|
var _a;
|
@@ -742,17 +742,17 @@ class Webform extends NestedDataComponent_1.default {
|
|
742
742
|
return;
|
743
743
|
}
|
744
744
|
if (!this.formio) {
|
745
|
-
this.handleDraftError(
|
745
|
+
this.handleDraftError('saveDraftInstanceError');
|
746
746
|
return;
|
747
747
|
}
|
748
748
|
if (!Formio_1.Formio.getUser()) {
|
749
|
-
this.handleDraftError(
|
749
|
+
this.handleDraftError('saveDraftAuthError');
|
750
750
|
return;
|
751
751
|
}
|
752
752
|
const draft = (0, utils_1.fastCloneDeep)(this.submission);
|
753
|
-
draft.state =
|
753
|
+
draft.state = 'draft';
|
754
754
|
if (!this.savingDraft && !this.submitting) {
|
755
|
-
this.emit(
|
755
|
+
this.emit('saveDraftBegin');
|
756
756
|
this.savingDraft = true;
|
757
757
|
this.formio
|
758
758
|
.saveSubmission(draft)
|
@@ -760,11 +760,11 @@ class Webform extends NestedDataComponent_1.default {
|
|
760
760
|
// Set id to submission to avoid creating new draft submission
|
761
761
|
this.submission._id = sub._id;
|
762
762
|
this.savingDraft = false;
|
763
|
-
this.emit(
|
763
|
+
this.emit('saveDraft', sub);
|
764
764
|
})
|
765
765
|
.catch((err) => {
|
766
766
|
this.savingDraft = false;
|
767
|
-
this.handleDraftError(
|
767
|
+
this.handleDraftError('saveDraftError', err);
|
768
768
|
});
|
769
769
|
}
|
770
770
|
}
|
@@ -775,7 +775,7 @@ class Webform extends NestedDataComponent_1.default {
|
|
775
775
|
restoreDraft(userId) {
|
776
776
|
const formio = this.formio || this.options.formio;
|
777
777
|
if (!formio) {
|
778
|
-
this.handleDraftError(
|
778
|
+
this.handleDraftError('restoreDraftInstanceError', null, true);
|
779
779
|
return;
|
780
780
|
}
|
781
781
|
this.savingDraft = true;
|
@@ -793,22 +793,22 @@ class Webform extends NestedDataComponent_1.default {
|
|
793
793
|
return this.setSubmission(draft).then(() => {
|
794
794
|
this.draftEnabled = true;
|
795
795
|
this.savingDraft = false;
|
796
|
-
this.emit(
|
796
|
+
this.emit('restoreDraft', draft);
|
797
797
|
});
|
798
798
|
}
|
799
799
|
// Enable drafts so that we can keep track of changes.
|
800
800
|
this.draftEnabled = true;
|
801
801
|
this.savingDraft = false;
|
802
|
-
this.emit(
|
802
|
+
this.emit('restoreDraft', null);
|
803
803
|
})
|
804
804
|
.catch((err) => {
|
805
805
|
this.draftEnabled = true;
|
806
806
|
this.savingDraft = false;
|
807
|
-
this.handleDraftError(
|
807
|
+
this.handleDraftError('restoreDraftError', err, true);
|
808
808
|
});
|
809
809
|
}
|
810
810
|
get schema() {
|
811
|
-
const schema = (0, utils_1.fastCloneDeep)(lodash_1.default.omit(this._form, [
|
811
|
+
const schema = (0, utils_1.fastCloneDeep)(lodash_1.default.omit(this._form, ['components']));
|
812
812
|
schema.components = [];
|
813
813
|
this.eachComponent((component) => schema.components.push(component.schema));
|
814
814
|
return schema;
|
@@ -883,10 +883,10 @@ class Webform extends NestedDataComponent_1.default {
|
|
883
883
|
else {
|
884
884
|
this.component = this.form;
|
885
885
|
}
|
886
|
-
this.component.type =
|
886
|
+
this.component.type = 'form';
|
887
887
|
this.component.input = false;
|
888
888
|
this.addComponents();
|
889
|
-
this.on(
|
889
|
+
this.on('submitButton', (options) => {
|
890
890
|
this.submit(false, options).catch((e) => {
|
891
891
|
if (options === null || options === void 0 ? void 0 : options.instance) {
|
892
892
|
options.instance.loading = false;
|
@@ -894,11 +894,11 @@ class Webform extends NestedDataComponent_1.default {
|
|
894
894
|
return e !== false && e !== undefined && console.log(e);
|
895
895
|
});
|
896
896
|
}, true);
|
897
|
-
this.on(
|
898
|
-
this.on(
|
899
|
-
this.on(
|
900
|
-
this.on(
|
901
|
-
this.on(
|
897
|
+
this.on('checkValidity', (data) => this.validate(data, { dirty: true, process: 'change' }), true);
|
898
|
+
this.on('requestUrl', (args) => this.submitUrl(args.url, args.headers), true);
|
899
|
+
this.on('resetForm', () => this.resetValue(), true);
|
900
|
+
this.on('deleteSubmission', () => this.deleteSubmission(), true);
|
901
|
+
this.on('refreshData', () => this.updateValue(), true);
|
902
902
|
this.executeFormController();
|
903
903
|
return this.formReady;
|
904
904
|
}
|
@@ -923,19 +923,19 @@ class Webform extends NestedDataComponent_1.default {
|
|
923
923
|
*
|
924
924
|
*/
|
925
925
|
teardown() {
|
926
|
-
this.emit(
|
926
|
+
this.emit('formDelete', this.id);
|
927
927
|
delete Formio_1.Formio.forms[this.id];
|
928
928
|
delete this.executeShortcuts;
|
929
929
|
delete this.triggerSaveDraft;
|
930
930
|
super.teardown();
|
931
931
|
}
|
932
932
|
destroy(all = false) {
|
933
|
-
this.off(
|
934
|
-
this.off(
|
935
|
-
this.off(
|
936
|
-
this.off(
|
937
|
-
this.off(
|
938
|
-
this.off(
|
933
|
+
this.off('submitButton');
|
934
|
+
this.off('checkValidity');
|
935
|
+
this.off('requestUrl');
|
936
|
+
this.off('resetForm');
|
937
|
+
this.off('deleteSubmission');
|
938
|
+
this.off('refreshData');
|
939
939
|
return super.destroy(all);
|
940
940
|
}
|
941
941
|
build(element) {
|
@@ -948,17 +948,17 @@ class Webform extends NestedDataComponent_1.default {
|
|
948
948
|
return this.ready;
|
949
949
|
}
|
950
950
|
getClassName() {
|
951
|
-
let classes =
|
951
|
+
let classes = 'formio-form';
|
952
952
|
if (this.options.readOnly) {
|
953
|
-
classes +=
|
953
|
+
classes += ' formio-read-only';
|
954
954
|
}
|
955
955
|
return classes;
|
956
956
|
}
|
957
957
|
render() {
|
958
|
-
return super.render(this.renderTemplate(
|
958
|
+
return super.render(this.renderTemplate('webform', {
|
959
959
|
classes: this.getClassName(),
|
960
960
|
children: this.renderComponents(),
|
961
|
-
}), this.builderMode ?
|
961
|
+
}), this.builderMode ? 'builder' : 'form', true);
|
962
962
|
}
|
963
963
|
redraw() {
|
964
964
|
// Don't bother if we have not built yet.
|
@@ -971,13 +971,13 @@ class Webform extends NestedDataComponent_1.default {
|
|
971
971
|
}
|
972
972
|
attach(element) {
|
973
973
|
this.setElement(element);
|
974
|
-
this.loadRefs(element, { webform:
|
974
|
+
this.loadRefs(element, { webform: 'single' });
|
975
975
|
const childPromise = this.attachComponents(this.refs.webform);
|
976
|
-
this.addEventListener(document,
|
976
|
+
this.addEventListener(document, 'keydown', this.executeShortcuts);
|
977
977
|
this.currentForm = this;
|
978
|
-
this.hook(
|
978
|
+
this.hook('attachWebform', element, this);
|
979
979
|
return childPromise.then(() => {
|
980
|
-
this.emit(
|
980
|
+
this.emit('render', this.element);
|
981
981
|
return this.setValue(this._submission, {
|
982
982
|
noUpdateEvent: true,
|
983
983
|
});
|
@@ -1000,7 +1000,7 @@ class Webform extends NestedDataComponent_1.default {
|
|
1000
1000
|
}
|
1001
1001
|
/**
|
1002
1002
|
* Sets a new alert to display in the error dialog of the form.
|
1003
|
-
* @param {string} type - The type of alert to display.
|
1003
|
+
* @param {string} type - The type of alert to display. 'danger', 'success', 'warning', etc.
|
1004
1004
|
* @param {string} message - The message to show in the alert.
|
1005
1005
|
* @param {object} options - The options for the alert.
|
1006
1006
|
*/
|
@@ -1009,8 +1009,8 @@ class Webform extends NestedDataComponent_1.default {
|
|
1009
1009
|
if (this.alert) {
|
1010
1010
|
if (this.refs.errorRef && this.refs.errorRef.length) {
|
1011
1011
|
this.refs.errorRef.forEach((el) => {
|
1012
|
-
this.removeEventListener(el,
|
1013
|
-
this.removeEventListener(el,
|
1012
|
+
this.removeEventListener(el, 'click');
|
1013
|
+
this.removeEventListener(el, 'keypress');
|
1014
1014
|
});
|
1015
1015
|
}
|
1016
1016
|
this.removeChild(this.alert);
|
@@ -1020,7 +1020,7 @@ class Webform extends NestedDataComponent_1.default {
|
|
1020
1020
|
}
|
1021
1021
|
if (this.options.noAlerts) {
|
1022
1022
|
if (!message) {
|
1023
|
-
this.emit(
|
1023
|
+
this.emit('error', false);
|
1024
1024
|
}
|
1025
1025
|
return;
|
1026
1026
|
}
|
@@ -1028,8 +1028,8 @@ class Webform extends NestedDataComponent_1.default {
|
|
1028
1028
|
try {
|
1029
1029
|
if (this.refs.errorRef && this.refs.errorRef.length) {
|
1030
1030
|
this.refs.errorRef.forEach((el) => {
|
1031
|
-
this.removeEventListener(el,
|
1032
|
-
this.removeEventListener(el,
|
1031
|
+
this.removeEventListener(el, 'click');
|
1032
|
+
this.removeEventListener(el, 'keypress');
|
1033
1033
|
});
|
1034
1034
|
}
|
1035
1035
|
this.removeChild(this.alert);
|
@@ -1049,19 +1049,19 @@ class Webform extends NestedDataComponent_1.default {
|
|
1049
1049
|
attrs: attrs,
|
1050
1050
|
type,
|
1051
1051
|
};
|
1052
|
-
this.alert = (0, utils_1.convertStringToHTMLElement)(this.renderTemplate(
|
1052
|
+
this.alert = (0, utils_1.convertStringToHTMLElement)(this.renderTemplate('alert', templateOptions), `#${attrs.id}`);
|
1053
1053
|
}
|
1054
1054
|
if (!this.alert) {
|
1055
1055
|
return;
|
1056
1056
|
}
|
1057
|
-
this.loadRefs(this.alert, { errorRef:
|
1057
|
+
this.loadRefs(this.alert, { errorRef: 'multiple' });
|
1058
1058
|
if (this.refs.errorRef && this.refs.errorRef.length) {
|
1059
1059
|
this.refs.errorRef.forEach((el) => {
|
1060
|
-
this.addEventListener(el,
|
1060
|
+
this.addEventListener(el, 'click', (e) => {
|
1061
1061
|
const key = e.currentTarget.dataset.componentKey;
|
1062
1062
|
this.focusOnComponent(key);
|
1063
1063
|
});
|
1064
|
-
this.addEventListener(el,
|
1064
|
+
this.addEventListener(el, 'keydown', (e) => {
|
1065
1065
|
if (e.keyCode === 13) {
|
1066
1066
|
e.preventDefault();
|
1067
1067
|
const key = e.currentTarget.dataset.componentKey;
|
@@ -1141,8 +1141,8 @@ class Webform extends NestedDataComponent_1.default {
|
|
1141
1141
|
(((_b = err.context) === null || _b === void 0 ? void 0 : _b.component) && ((_c = err.context) === null || _c === void 0 ? void 0 : _c.component.key)) ||
|
1142
1142
|
(err.component && err.component.key) ||
|
1143
1143
|
(err.fromServer && err.path);
|
1144
|
-
const formattedKeyOrPath = keyOrPath ? (0, utils_1.getStringFromComponentPath)(keyOrPath) :
|
1145
|
-
if (typeof err !==
|
1144
|
+
const formattedKeyOrPath = keyOrPath ? (0, utils_1.getStringFromComponentPath)(keyOrPath) : '';
|
1145
|
+
if (typeof err !== 'string' && !err.formattedKeyOrPath) {
|
1146
1146
|
err.formattedKeyOrPath = formattedKeyOrPath;
|
1147
1147
|
}
|
1148
1148
|
return {
|
@@ -1152,18 +1152,18 @@ class Webform extends NestedDataComponent_1.default {
|
|
1152
1152
|
};
|
1153
1153
|
errors.forEach(({ message, context, fromServer, component }, index) => {
|
1154
1154
|
const text = !(component === null || component === void 0 ? void 0 : component.label) || (context === null || context === void 0 ? void 0 : context.hasLabel) || fromServer
|
1155
|
-
? this.t(
|
1156
|
-
: this.t(
|
1155
|
+
? this.t('alertMessage', { message: this.t(message) })
|
1156
|
+
: this.t('alertMessageWithLabel', {
|
1157
1157
|
label: this.t(component === null || component === void 0 ? void 0 : component.label),
|
1158
1158
|
message: this.t(message),
|
1159
1159
|
});
|
1160
1160
|
displayedErrors.push(createListItem(text, index));
|
1161
1161
|
});
|
1162
1162
|
}
|
1163
|
-
const errorsList = this.renderTemplate(
|
1164
|
-
this.root.setAlert(
|
1163
|
+
const errorsList = this.renderTemplate('errorsList', { errors: displayedErrors });
|
1164
|
+
this.root.setAlert('danger', errorsList);
|
1165
1165
|
if (triggerEvent) {
|
1166
|
-
this.emit(
|
1166
|
+
this.emit('error', errors);
|
1167
1167
|
}
|
1168
1168
|
return errors;
|
1169
1169
|
}
|
@@ -1184,23 +1184,23 @@ class Webform extends NestedDataComponent_1.default {
|
|
1184
1184
|
noValidate: true,
|
1185
1185
|
noCheck: true,
|
1186
1186
|
});
|
1187
|
-
this.setAlert(
|
1187
|
+
this.setAlert('success', `<p>${this.t('complete')}</p>`);
|
1188
1188
|
// Cancel triggered saveDraft to prevent overriding the submitted state
|
1189
1189
|
if (this.draftEnabled && ((_a = this.triggerSaveDraft) === null || _a === void 0 ? void 0 : _a.cancel)) {
|
1190
1190
|
this.triggerSaveDraft.cancel();
|
1191
1191
|
}
|
1192
|
-
this.emit(
|
1192
|
+
this.emit('submit', submission, saved);
|
1193
1193
|
if (saved) {
|
1194
|
-
this.emit(
|
1194
|
+
this.emit('submitDone', submission);
|
1195
1195
|
}
|
1196
1196
|
return submission;
|
1197
1197
|
}
|
1198
1198
|
normalizeError(error) {
|
1199
1199
|
if (error) {
|
1200
|
-
if (typeof error ===
|
1200
|
+
if (typeof error === 'object' && 'details' in error) {
|
1201
1201
|
error = error.details;
|
1202
1202
|
}
|
1203
|
-
if (typeof error ===
|
1203
|
+
if (typeof error === 'string') {
|
1204
1204
|
error = { message: error };
|
1205
1205
|
}
|
1206
1206
|
}
|
@@ -1215,10 +1215,10 @@ class Webform extends NestedDataComponent_1.default {
|
|
1215
1215
|
error = this.normalizeError(error);
|
1216
1216
|
this.submitting = false;
|
1217
1217
|
this.setPristine(false);
|
1218
|
-
this.emit(
|
1218
|
+
this.emit('submitError', error || this.errors);
|
1219
1219
|
// Allow for silent cancellations (no error message, no submit button error state)
|
1220
1220
|
if (error && error.silent) {
|
1221
|
-
this.emit(
|
1221
|
+
this.emit('change', { isValid: true }, { silent: true });
|
1222
1222
|
return false;
|
1223
1223
|
}
|
1224
1224
|
const errors = this.showErrors(error, true);
|
@@ -1269,12 +1269,12 @@ class Webform extends NestedDataComponent_1.default {
|
|
1269
1269
|
this.triggerSaveDraft();
|
1270
1270
|
}
|
1271
1271
|
if (!flags || !flags.noEmit) {
|
1272
|
-
this.emit(
|
1272
|
+
this.emit('change', value, flags, modified);
|
1273
1273
|
isChangeEventEmitted = true;
|
1274
1274
|
}
|
1275
1275
|
// The form is initialized after the first change event occurs.
|
1276
1276
|
if (isChangeEventEmitted && !this.initialized) {
|
1277
|
-
this.emit(
|
1277
|
+
this.emit('initialized');
|
1278
1278
|
this.initialized = true;
|
1279
1279
|
}
|
1280
1280
|
}
|
@@ -1284,7 +1284,7 @@ class Webform extends NestedDataComponent_1.default {
|
|
1284
1284
|
*/
|
1285
1285
|
deleteSubmission() {
|
1286
1286
|
return this.formio.deleteSubmission().then(() => {
|
1287
|
-
this.emit(
|
1287
|
+
this.emit('submissionDeleted', this.submission);
|
1288
1288
|
this.resetValue();
|
1289
1289
|
});
|
1290
1290
|
}
|
@@ -1295,13 +1295,13 @@ class Webform extends NestedDataComponent_1.default {
|
|
1295
1295
|
* @returns {boolean} - TRUE means the submission was cancelled, FALSE otherwise.
|
1296
1296
|
*/
|
1297
1297
|
cancel(noconfirm) {
|
1298
|
-
const shouldReset = this.hook(
|
1299
|
-
if (shouldReset && (noconfirm || confirm(this.t(
|
1298
|
+
const shouldReset = this.hook('beforeCancel', true);
|
1299
|
+
if (shouldReset && (noconfirm || confirm(this.t('confirmCancel')))) {
|
1300
1300
|
this.resetValue();
|
1301
1301
|
return true;
|
1302
1302
|
}
|
1303
1303
|
else {
|
1304
|
-
this.emit(
|
1304
|
+
this.emit('cancelSubmit');
|
1305
1305
|
return false;
|
1306
1306
|
}
|
1307
1307
|
}
|
@@ -1309,8 +1309,8 @@ class Webform extends NestedDataComponent_1.default {
|
|
1309
1309
|
// Add in metadata about client submitting the form
|
1310
1310
|
submission.metadata = submission.metadata || {};
|
1311
1311
|
lodash_1.default.defaults(submission.metadata, {
|
1312
|
-
timezone: lodash_1.default.get(this,
|
1313
|
-
offset: parseInt(lodash_1.default.get(this,
|
1312
|
+
timezone: lodash_1.default.get(this, '_submission.metadata.timezone', (0, utils_1.currentTimezone)()),
|
1313
|
+
offset: parseInt(lodash_1.default.get(this, '_submission.metadata.offset', (0, moment_1.default)().utcOffset()), 10),
|
1314
1314
|
origin: document.location.origin,
|
1315
1315
|
referrer: document.referrer,
|
1316
1316
|
browserName: navigator.appName,
|
@@ -1331,27 +1331,27 @@ class Webform extends NestedDataComponent_1.default {
|
|
1331
1331
|
}
|
1332
1332
|
const submission = (0, utils_1.fastCloneDeep)(this.submission || {});
|
1333
1333
|
this.setMetadata(submission);
|
1334
|
-
submission.state = options.state || submission.state ||
|
1335
|
-
const isDraft = submission.state ===
|
1336
|
-
this.hook(
|
1334
|
+
submission.state = options.state || submission.state || 'submitted';
|
1335
|
+
const isDraft = submission.state === 'draft';
|
1336
|
+
this.hook('beforeSubmit', Object.assign(Object.assign({}, submission), { component: options.component }), (err, data) => {
|
1337
1337
|
var _a;
|
1338
1338
|
if (err) {
|
1339
1339
|
return reject(err);
|
1340
1340
|
}
|
1341
|
-
submission._vnote = data && data._vnote ? data._vnote :
|
1341
|
+
submission._vnote = data && data._vnote ? data._vnote : '';
|
1342
1342
|
try {
|
1343
1343
|
if (!isDraft && !options.noValidate) {
|
1344
1344
|
if (!submission.data) {
|
1345
|
-
return reject(
|
1345
|
+
return reject('Invalid Submission');
|
1346
1346
|
}
|
1347
1347
|
const errors = this.validate(submission.data, {
|
1348
1348
|
local,
|
1349
1349
|
dirty: true,
|
1350
1350
|
silentCheck: false,
|
1351
|
-
process:
|
1351
|
+
process: 'submit',
|
1352
1352
|
});
|
1353
1353
|
if (errors.length ||
|
1354
|
-
((_a = options.beforeSubmitResults) === null || _a === void 0 ? void 0 : _a.some((result) => result.status ===
|
1354
|
+
((_a = options.beforeSubmitResults) === null || _a === void 0 ? void 0 : _a.some((result) => result.status === 'rejected'))) {
|
1355
1355
|
return reject(errors);
|
1356
1356
|
}
|
1357
1357
|
}
|
@@ -1361,18 +1361,18 @@ class Webform extends NestedDataComponent_1.default {
|
|
1361
1361
|
}
|
1362
1362
|
this.everyComponent((comp) => {
|
1363
1363
|
var _a, _b;
|
1364
|
-
if (submission._vnote && comp.type ===
|
1364
|
+
if (submission._vnote && comp.type === 'form' && comp.component.reference) {
|
1365
1365
|
lodash_1.default.get(submission.data, local ? (_a = comp.paths) === null || _a === void 0 ? void 0 : _a.localDataPath : comp.path, {})._vnote = submission._vnote;
|
1366
1366
|
}
|
1367
1367
|
const { persistent } = comp.component;
|
1368
|
-
if (persistent ===
|
1368
|
+
if (persistent === 'client-only') {
|
1369
1369
|
lodash_1.default.unset(submission.data, local ? (_b = comp.paths) === null || _b === void 0 ? void 0 : _b.localDataPath : comp.path);
|
1370
1370
|
}
|
1371
1371
|
});
|
1372
|
-
this.hook(
|
1372
|
+
this.hook('customValidation', Object.assign(Object.assign({}, submission), { component: options.component }), (err) => {
|
1373
1373
|
if (err) {
|
1374
1374
|
// If string is returned, cast to object.
|
1375
|
-
if (typeof err ===
|
1375
|
+
if (typeof err === 'string') {
|
1376
1376
|
err = {
|
1377
1377
|
message: err,
|
1378
1378
|
};
|
@@ -1386,8 +1386,8 @@ class Webform extends NestedDataComponent_1.default {
|
|
1386
1386
|
if (this._form && this._form.action) {
|
1387
1387
|
const method = submission.data._id &&
|
1388
1388
|
this._form.action.includes(submission.data._id)
|
1389
|
-
?
|
1390
|
-
:
|
1389
|
+
? 'PUT'
|
1390
|
+
: 'POST';
|
1391
1391
|
return Formio_1.Formio.makeStaticRequest(this._form.action, method, submission, this.formio ? this.formio.options : {})
|
1392
1392
|
.then((result) => resolve({
|
1393
1393
|
submission: result,
|
@@ -1407,8 +1407,8 @@ class Webform extends NestedDataComponent_1.default {
|
|
1407
1407
|
}
|
1408
1408
|
// If this is an actionUrl, then make sure to save the action and not the submission.
|
1409
1409
|
const submitMethod = submitFormio.actionUrl
|
1410
|
-
?
|
1411
|
-
:
|
1410
|
+
? 'saveAction'
|
1411
|
+
: 'saveSubmission';
|
1412
1412
|
submitFormio[submitMethod](submission)
|
1413
1413
|
.then((result) => resolve({
|
1414
1414
|
submission: result,
|
@@ -1425,14 +1425,14 @@ class Webform extends NestedDataComponent_1.default {
|
|
1425
1425
|
setServerErrors(error) {
|
1426
1426
|
if (error.details) {
|
1427
1427
|
this.serverErrors = error.details
|
1428
|
-
.filter((err) => (err.level ? err.level ===
|
1428
|
+
.filter((err) => (err.level ? err.level === 'error' : err))
|
1429
1429
|
.map((err) => {
|
1430
1430
|
err.fromServer = true;
|
1431
1431
|
return err;
|
1432
1432
|
});
|
1433
1433
|
}
|
1434
|
-
else if (typeof error ===
|
1435
|
-
this.serverErrors = [{ fromServer: true, level:
|
1434
|
+
else if (typeof error === 'string') {
|
1435
|
+
this.serverErrors = [{ fromServer: true, level: 'error', message: error }];
|
1436
1436
|
}
|
1437
1437
|
}
|
1438
1438
|
executeSubmit(options) {
|
@@ -1491,17 +1491,17 @@ class Webform extends NestedDataComponent_1.default {
|
|
1491
1491
|
}
|
1492
1492
|
submitUrl(URL, headers) {
|
1493
1493
|
if (!URL) {
|
1494
|
-
return console.warn(
|
1494
|
+
return console.warn(this.t('missingUrl'));
|
1495
1495
|
}
|
1496
1496
|
const submission = this.submission || {};
|
1497
1497
|
const API_URL = URL;
|
1498
1498
|
const settings = {
|
1499
|
-
method:
|
1499
|
+
method: 'POST',
|
1500
1500
|
headers: {},
|
1501
1501
|
};
|
1502
1502
|
if (headers && headers.length > 0) {
|
1503
1503
|
headers.map((e) => {
|
1504
|
-
if (e.header !==
|
1504
|
+
if (e.header !== '' && e.value !== '') {
|
1505
1505
|
settings.headers[e.header] = this.interpolate(e.value, submission);
|
1506
1506
|
}
|
1507
1507
|
});
|
@@ -1511,21 +1511,22 @@ class Webform extends NestedDataComponent_1.default {
|
|
1511
1511
|
headers: settings.headers,
|
1512
1512
|
})
|
1513
1513
|
.then(() => {
|
1514
|
-
this.emit(
|
1515
|
-
this.setAlert(
|
1514
|
+
this.emit('requestDone');
|
1515
|
+
this.setAlert('success', `<p> ${this.t('success')} </p>`);
|
1516
1516
|
})
|
1517
1517
|
.catch((e) => {
|
1518
|
-
const message = `${e.statusText ? e.statusText :
|
1519
|
-
this.emit(
|
1518
|
+
const message = `${e.statusText ? e.statusText : ''} ${e.status ? e.status : e}`;
|
1519
|
+
this.emit('error', message);
|
1520
1520
|
console.error(message);
|
1521
|
-
this.setAlert(
|
1521
|
+
this.setAlert('danger', `<p> ${message} </p>`);
|
1522
1522
|
return Promise.reject(this.onSubmissionError(e));
|
1523
1523
|
});
|
1524
1524
|
}
|
1525
1525
|
else {
|
1526
|
-
|
1527
|
-
this.
|
1528
|
-
|
1526
|
+
const message = this.t('urlNotAttachedToBtn');
|
1527
|
+
this.emit('error', message);
|
1528
|
+
this.setAlert('warning', message);
|
1529
|
+
return console.warn(message);
|
1529
1530
|
}
|
1530
1531
|
}
|
1531
1532
|
triggerCaptcha() {
|
@@ -1544,7 +1545,7 @@ class Webform extends NestedDataComponent_1.default {
|
|
1544
1545
|
}
|
1545
1546
|
set nosubmit(value) {
|
1546
1547
|
this._nosubmit = !!value;
|
1547
|
-
this.emit(
|
1548
|
+
this.emit('nosubmit', this._nosubmit);
|
1548
1549
|
}
|
1549
1550
|
get nosubmit() {
|
1550
1551
|
return this._nosubmit || false;
|