@formio/js 5.4.1 → 5.4.3

package/lib/mjs/components/file/editForm/File.edit.file.js

@@ -28,10 +28,7 @@ export default [
         tooltip: "The <a href='https://docs.aws.amazon.com/AmazonS3/latest/userguide/mpuoverview.html'>S3 Multipart Upload API</a> is designed to improve the upload experience for larger objects (> 5GB).",
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.storage' },
-                    's3',
-                ],
+                '===': [{ var: 'data.storage' }, 's3'],
             },
         },
     },
@@ -63,10 +60,7 @@ export default [
         ],
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.useMultipartUpload' },
-                    true,
-                ],
+                '===': [{ var: 'data.useMultipartUpload' }, true],
             },
         },
     },
@@ -80,56 +74,46 @@ export default [
         tooltip: "See <a href='https://github.com/danialfarid/ng-file-upload#server-side' target='_blank'>https://github.com/danialfarid/ng-file-upload#server-side</a> for how to set up the server.",
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.storage' },
-                    'url',
-                ],
+                '===': [{ var: 'data.storage' }, 'url'],
             },
         },
     },
     {
-        type: 'textfield',
-        input: true,
-        key: 'options.indexeddb',
-        label: 'Database',
+        type: 'container',
+        key: 'options',
+        label: 'IndexedDB options',
         weight: 10,
-        placeholder: 'Enter the indexeddb database name',
-        conditional: {
-            json: {
-                in: [
-                    {
-                        var: 'data.storage',
-                    },
-                    [
-                        'indexeddb',
-                    ],
-                ],
-            },
-        },
-    },
-    {
-        type: 'textfield',
         input: true,
-        label: 'Table',
-        key: 'options.indexeddbTable',
-        weight: 10,
-        placeholder: 'Enter the name for indexeddb table',
         conditional: {
             json: {
                 in: [
                     {
                         var: 'data.storage',
                     },
-                    [
-                        'indexeddb',
-                    ],
+                    ['indexeddb'],
                 ],
             },
         },
+        components: [
+            {
+                type: 'textfield',
+                input: true,
+                key: 'indexeddb',
+                label: 'Database',
+                placeholder: 'Enter the indexeddb database name',
+            },
+            {
+                type: 'textfield',
+                input: true,
+                key: 'indexeddbTable',
+                label: 'Table',
+                placeholder: 'Enter the name for indexeddb table',
+            },
+        ],
     },
     {
         type: 'textarea',
-        key: 'options',
+        key: 'urlRequestOptions',
         label: 'Custom request options',
         tooltip: 'Pass your custom xhr options(optional)',
         rows: 5,
@@ -296,10 +280,7 @@ export default [
         weight: 31,
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.storage' },
-                    'url',
-                ],
+                '===': [{ var: 'data.storage' }, 'url'],
             },
         },
     },
@@ -313,10 +294,7 @@ export default [
         weight: 40,
         conditional: {
             json: {
-                '==': [
-                    { var: 'data.image' },
-                    true,
-                ],
+                '==': [{ var: 'data.image' }, true],
             },
         },
     },
@@ -338,10 +316,7 @@ export default [
         weight: 38,
         conditional: {
             json: {
-                '==': [
-                    { var: 'data.webcam' },
-                    true,
-                ],
+                '==': [{ var: 'data.webcam' }, true],
             },
         },
     },

package/lib/mjs/components/form/Form.js

@@ -29,9 +29,7 @@ export default class FormComponent extends Component {
         };
     }
     static savedValueTypes() {
-        return [
-            componentValueTypes.object,
-        ];
+        return [componentValueTypes.object];
     }
     init() {
         super.init();
@@ -215,7 +213,7 @@ export default class FormComponent extends Component {
     }
     render() {
         if (this.builderMode) {
-            return super.render(this.component.label || 'Nested form');
+            return super.render(this.t(this.component.label || 'nestedForm'));
         }
         const subform = this.subForm ? this.subForm.render() : this.renderTemplate('loading');
         return super.render(subform);
@@ -228,13 +226,13 @@ export default class FormComponent extends Component {
      */
     getValueAsString(value, options) {
         if (!value) {
-            return 'No data provided';
+            return this.t('noDataProvided');
         }
         if (!value.data && value._id) {
             return value._id;
         }
         if (!value.data || !Object.keys(value.data).length) {
-            return 'No data provided';
+            return this.t('noDataProvided');
         }
         if (options?.email) {
             let result = `
@@ -696,7 +694,7 @@ export default class FormComponent extends Component {
                 : {};
             this.subForm.setUrl(submissionUrl, { ...this.options, ...options });
             this.subForm.loadSubmission().catch((err) => {
-                console.error(`Unable to load subform submission ${submission._id}:`, err);
+                console.error(this.t('subformSubmissionLoadingError', { submissionId: submission._id }), err);
             });
         }
         else {

package/lib/mjs/components/html/HTML.d.ts

@@ -12,7 +12,7 @@ export default class HTMLComponent extends Component {
     get content(): any;
     get singleTags(): string[];
     checkRefreshOn(changed: any): void;
-    renderContent(): any;
+    renderContent(content?: any): any;
     render(): string;
     get dataReady(): any;
     attach(element: any): Promise<void>;

package/lib/mjs/components/html/HTML.js

@@ -49,11 +49,7 @@ export default class HTMLComponent extends Component {
         return content;
     }
     get singleTags() {
-        return [
-            'br',
-            'img',
-            'hr',
-        ];
+        return ['br', 'img', 'hr'];
     }
     checkRefreshOn(changed) {
         super.checkRefreshOn(changed);
@@ -70,7 +66,7 @@ export default class HTMLComponent extends Component {
             this.setContent(this.element, this.renderContent());
         }
     }
-    renderContent() {
+    renderContent(content = this.content) {
         const submission = _.get(this.root, 'submission', {});
         return this.renderTemplate('html', {
             component: this.component,
@@ -86,23 +82,25 @@ export default class HTMLComponent extends Component {
                     }),
                 };
             }),
-            content: this.content,
+            content,
             singleTags: this.singleTags,
         });
     }
     render() {
-        return super.render(this.renderContent());
+        return super.render(this.renderContent(''));
     }
     get dataReady() {
         return this.root?.submissionReady || Promise.resolve();
     }
     attach(element) {
         this.loadRefs(element, { html: 'single' });
-        this.dataReady.then(() => {
+        const setHtmlContent = () => {
             if (this.refs.html) {
                 this.setContent(this.refs.html, this.content);
             }
-        });
+        };
+        setHtmlContent();
+        this.dataReady.then(setHtmlContent);
         return super.attach(element);
     }
 }

package/lib/mjs/components/number/Number.js

@@ -47,9 +47,7 @@ export default class NumberComponent extends Input {
     }
     static savedValueTypes(schema) {
         schema = schema || {};
-        return (getComponentSavedTypes(schema) || [
-            componentValueTypes.number,
-        ]);
+        return getComponentSavedTypes(schema) || [componentValueTypes.number];
     }
     constructor(...args) {
         super(...args);
@@ -70,7 +68,7 @@ export default class NumberComponent extends Input {
             if (this.component.thousandsSeparator ||
                 this.options.properties?.thousandsSeparator ||
                 this.options.thousandsSeparator) {
-                console.warn('In order for thousands separator to work properly, you must set the delimiter to true in the component json');
+                console.warn(this.t('noDelimiterSet'));
             }
             this.delimiter = '';
         }
@@ -187,7 +185,11 @@ export default class NumberComponent extends Input {
             return null;
         }
         const val = this.refs.input[index].value;
-        return val && val !== '-_' ? this.parseNumber(val) : null;
+        const result = val && val !== '-_' ? this.parseNumber(val) : null;
+        if (_.isNaN(result)) {
+            return null;
+        }
+        return result;
     }
     setValueAt(index, value, flags = {}) {
         return super.setValueAt(index, this.formatValue(this.parseValue(value)), flags);

package/lib/mjs/components/panel/editForm/Panel.edit.display.js

@@ -87,10 +87,7 @@ export default [
                 defaultValue: true,
                 customConditional({ data = {}, buildingForm = {} }) {
                     const formSettings = buildingForm.settings || {};
-                    return ![
-                        data.breadcrumb,
-                        formSettings.wizardBreadcrumbsType,
-                    ].includes('none');
+                    return ![data.breadcrumb, formSettings.wizardBreadcrumbsType].includes('none');
                 },
             },
             {
@@ -102,10 +99,7 @@ export default [
                 tooltip: 'Determines if the breadcrumb bar is clickable or not for visited tabs.',
                 conditional: {
                     json: {
-                        '===': [
-                            { var: 'data.breadcrumbClickable' },
-                            false,
-                        ],
+                        '===': [{ var: 'data.breadcrumbClickable' }, false],
                     },
                 },
             },
@@ -211,10 +205,7 @@ export default [
         input: true,
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.collapsible' },
-                    true,
-                ],
+                '===': [{ var: 'data.collapsible' }, true],
             },
         },
     },

package/lib/mjs/components/password/Password.js

@@ -21,10 +21,7 @@ export default class PasswordComponent extends TextFieldComponent {
         };
     }
     get defaultSchema() {
-        return _.omit(PasswordComponent.schema(), [
-            'protected',
-            'tableView',
-        ]);
+        return _.omit(PasswordComponent.schema(), ['protected', 'tableView']);
     }
     get inputInfo() {
         const info = super.inputInfo;

package/lib/mjs/components/radio/Radio.js

@@ -9,9 +9,7 @@ export default class RadioComponent extends ListComponent {
             inputType: 'radio',
             label: 'Radio',
             key: 'radio',
-            values: [
-                { label: '', value: '' },
-            ],
+            values: [{ label: '', value: '' }],
             data: {
                 url: '',
             },
@@ -61,23 +59,12 @@ export default class RadioComponent extends ListComponent {
             return types;
         }
         if (dataType === 'object') {
-            return [
-                object,
-                array,
-            ];
+            return [object, array];
         }
         if (componentValueTypes[dataType]) {
-            return [
-                componentValueTypes[dataType],
-            ];
+            return [componentValueTypes[dataType]];
         }
-        return [
-            boolean,
-            string,
-            number,
-            object,
-            array,
-        ];
+        return [boolean, string, number, object, array];
     }
     constructor(component, options, data) {
         super(component, options, data);
@@ -356,6 +343,16 @@ export default class RadioComponent extends ListComponent {
     }
     setItems(items) {
         const listData = [];
+        // If the items is a string, then parse as JSON.
+        if (typeof items == 'string') {
+            try {
+                items = JSON.parse(items);
+            }
+            catch (err) {
+                console.warn(err.message);
+                items = [];
+            }
+        }
         items?.forEach((item, i) => {
             const valueAtProperty = _.get(item, this.component.valueProperty);
             this.loadedOptions[i] = {
@@ -415,6 +412,9 @@ export default class RadioComponent extends ListComponent {
             if (changed) {
                 this.previousValue = this.dataValue;
             }
+            if (!this.visible) {
+                this.previousValue = this.emptyValue;
+            }
             return changed;
         }
         // If they clicked on the radio that is currently selected, it needs to reset the value.

package/lib/mjs/components/radio/editForm/Radio.edit.data.js

@@ -18,9 +18,7 @@ export default [
         },
         onChange(context) {
             if (context && context.flags && context.flags && context.flags.modified) {
-                context.data.values = [
-                    { label: '', value: '' },
-                ];
+                context.data.values = [{ label: '', value: '' }];
             }
         },
     },
@@ -32,9 +30,7 @@ export default [
         tooltip: 'The radio button values that can be picked for this field. Values are text submitted with the form data. Labels are text that appears next to the radio buttons on the form.',
         weight: 10,
         reorder: true,
-        defaultValue: [
-            { label: '', value: '' },
-        ],
+        defaultValue: [{ label: '', value: '' }],
         components: [
             {
                 label: 'Label',
@@ -73,10 +69,7 @@ export default [
         ],
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.dataSrc' },
-                    'values',
-                ],
+                '===': [{ var: 'data.dataSrc' }, 'values'],
             },
         },
     },
@@ -104,10 +97,7 @@ export default [
         key: 'template',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.dataSrc' },
-                    'url',
-                ],
+                '===': [{ var: 'data.dataSrc' }, 'url'],
             },
         },
     },

package/lib/mjs/components/recaptcha/ReCaptcha.js

@@ -20,10 +20,7 @@ export default class ReCaptchaComponent extends Component {
     static get conditionOperatorsSettings() {
         return {
             ...super.conditionOperatorsSettings,
-            operators: [
-                'isEmpty',
-                'isNotEmpty',
-            ],
+            operators: ['isEmpty', 'isNotEmpty'],
         };
     }
     static get serverConditionSettings() {
@@ -50,7 +47,7 @@ export default class ReCaptchaComponent extends Component {
                 this.recaptchaApiReady = Formio.requireLibrary('googleRecaptcha', 'grecaptcha', recaptchaApiScriptUrl, true);
             }
             else {
-                console.warn('There is no Site Key specified in settings in form JSON');
+                console.warn(this.t('noSiteKey'));
             }
         }
     }
@@ -63,7 +60,7 @@ export default class ReCaptchaComponent extends Component {
     async verify(actionName) {
         const siteKey = _get(this.root?.form, 'settings.recaptcha.siteKey');
         if (!siteKey) {
-            console.warn('There is no Site Key specified in settings in form JSON');
+            console.warn(this.t('noSiteKey'));
             return;
         }
         if (!this.recaptchaApiReady) {