@formio/js 5.4.1 → 5.4.2

package/lib/mjs/components/_classes/multivalue/Multivalue.js

@@ -17,26 +17,16 @@ export default class Multivalue extends Field {
             if (Array.isArray(value)) {
                 if (underlyingValueShouldBeArray) {
                     if (value.length === 0 || !Array.isArray(value[0])) {
-                        return [
-                            value,
-                        ];
+                        return [value];
                     }
                 }
                 if (value.length === 0) {
-                    return [
-                        emptyValue,
-                    ];
+                    return [emptyValue];
                 }
                 return super.normalizeValue(value, flags);
             }
             else {
-                return super.normalizeValue(value == null
-                    ? [
-                        emptyValue,
-                    ]
-                    : [
-                        value,
-                    ], flags);
+                return super.normalizeValue(value == null ? [emptyValue] : [value], flags);
             }
         }
         else {
@@ -64,22 +54,16 @@ export default class Multivalue extends Field {
         let value = super.defaultValue;
         if (this.component.multiple) {
             if (_.isArray(value)) {
-                value = !value.length
-                    ? [
-                        super.emptyValue,
-                    ]
-                    : value;
+                value = !value.length ? [super.emptyValue] : value;
             }
             else {
-                value = [
-                    value,
-                ];
+                value = [value];
             }
         }
         return value;
     }
     get addAnother() {
-        return this.t(this.component.addAnother || 'Add Another');
+        return this.t(this.component.addAnother || 'addAnother');
     }
     /**
      * @returns {Field} - The created field.
@@ -198,7 +182,7 @@ export default class Multivalue extends Field {
                 this.saveCaretPosition(element, index);
             }
             catch (err) {
-                console.warn('An error occurred while trying to save caret position', err);
+                console.warn(this.t('caretPositionSavingError'), err);
             }
             // If a mask is present, delay the update to allow mask to update first.
             if (element.mask) {
@@ -300,9 +284,7 @@ export default class Multivalue extends Field {
         }
         let dataValue = this.dataValue || [];
         if (!Array.isArray(dataValue)) {
-            dataValue = [
-                dataValue,
-            ];
+            dataValue = [dataValue];
         }
         if (Array.isArray(value)) {
             dataValue = dataValue.concat(value);

package/lib/mjs/components/_classes/nested/NestedComponent.js

@@ -511,10 +511,7 @@ export default class NestedComponent extends Field {
                 }
             });
         }
-        return Promise.all([
-            superPromise,
-            childPromise,
-        ]);
+        return Promise.all([superPromise, childPromise]);
     }
     /**
      * Attach the logic to the components.

package/lib/mjs/components/_classes/nestedarray/NestedArrayComponent.js

@@ -12,15 +12,13 @@ export default class NestedArrayComponent extends NestedDataComponent {
         }, ...extend);
     }
     static savedValueTypes() {
-        return [
-            componentValueTypes.array,
-        ];
+        return [componentValueTypes.array];
     }
     componentContext(component) {
         return this.iteratableRows[component.rowIndex].data;
     }
     get iteratableRows() {
-        throw new Error('Getter #iteratableRows() is not implemented');
+        throw new Error(this.t('iteratableRowsError'));
     }
     get rowIndex() {
         return this._rowIndex;
@@ -62,12 +60,10 @@ export default class NestedArrayComponent extends NestedDataComponent {
     }
     validate(data, flags = {}) {
         data = data || this.data;
-        return this.validateComponents([
-            this.component,
-        ], data, flags);
+        return this.validateComponents([this.component], data, flags);
     }
     checkRow(...args) {
-        console.log('Deprecation Warning: checkRow method has been replaced with processRow');
+        console.log(this.t('checkRowDeprecation'));
         return this.processRow.call(this, ...args);
     }
     processRow(method, data, opts, row, components, silentCheck) {
@@ -124,7 +120,7 @@ export default class NestedArrayComponent extends NestedDataComponent {
       `;
             this.component.components?.forEach((component) => {
                 const label = component.label || component.key;
-                result += `<th style="padding: 5px 10px;">${label}</th>`;
+                result += `<th style="padding: 5px 10px;">${this.t(label, { _userInput: true })}</th>`;
             });
             result += `
           </tr>

package/lib/mjs/components/_classes/nesteddata/NestedDataComponent.js

@@ -12,9 +12,7 @@ export default class NestedDataComponent extends NestedComponent {
         return !_.isEqual(newValue, oldValue);
     }
     static savedValueTypes(schema) {
-        return (getComponentSavedTypes(schema) || [
-            componentValueTypes.object,
-        ]);
+        return getComponentSavedTypes(schema) || [componentValueTypes.object];
     }
     get allowData() {
         return true;

package/lib/mjs/components/address/Address.js

@@ -78,9 +78,7 @@ export default class AddressComponent extends ContainerComponent {
     }
     static savedValueTypes(schema) {
         schema = schema || {};
-        return (getComponentSavedTypes(schema) || [
-            componentValueTypes.object,
-        ]);
+        return getComponentSavedTypes(schema) || [componentValueTypes.object];
     }
     static get builderInfo() {
         return {
@@ -98,10 +96,7 @@ export default class AddressComponent extends ContainerComponent {
     static get conditionOperatorsSettings() {
         return {
             ...super.conditionOperatorsSettings,
-            operators: [
-                'isEmpty',
-                'isNotEmpty',
-            ],
+            operators: ['isEmpty', 'isNotEmpty'],
         };
     }
     mergeSchema(component = {}) {
@@ -201,11 +196,7 @@ export default class AddressComponent extends ContainerComponent {
     }
     get address() {
         if (this.isMultiple) {
-            return _.isArray(this.dataValue)
-                ? this.dataValue
-                : [
-                    this.dataValue,
-                ];
+            return _.isArray(this.dataValue) ? this.dataValue : [this.dataValue];
         }
         // Manual mode is not implementing for multiple value
         return this.manualModeEnabled && this.dataValue ? this.dataValue.address : this.dataValue;
@@ -221,11 +212,7 @@ export default class AddressComponent extends ContainerComponent {
     get defaultValue() {
         let defaultValue = super.defaultValue;
         if (this.isMultiple) {
-            defaultValue = _.isArray(defaultValue)
-                ? defaultValue
-                : [
-                    defaultValue,
-                ];
+            defaultValue = _.isArray(defaultValue) ? defaultValue : [defaultValue];
         }
         return defaultValue;
     }
@@ -241,9 +228,7 @@ export default class AddressComponent extends ContainerComponent {
     get dataValue() {
         const resultValue = _.get(this._data, this.path);
         if (!_.isArray(resultValue) && this.component.multiple) {
-            return [
-                resultValue,
-            ];
+            return [resultValue];
         }
         return super.dataValue;
     }
@@ -341,7 +326,7 @@ export default class AddressComponent extends ContainerComponent {
         return !this.isMultiple && (this.builderMode || this.manualModeEnabled);
     }
     get addAnother() {
-        return this.t(this.component.addAnother || 'Add Another');
+        return this.t(this.component.addAnother || 'addAnother');
     }
     renderElement(value) {
         return this.renderTemplate(this.templateName, {
@@ -383,9 +368,7 @@ export default class AddressComponent extends ContainerComponent {
     onSelectAddress(address, element, index) {
         if (this.isMultiple) {
             this.address[index] = address;
-            this.address = [
-                ...this.address,
-            ];
+            this.address = [...this.address];
         }
         else {
             this.address = address;
@@ -597,12 +580,9 @@ export default class AddressComponent extends ContainerComponent {
             }
             return this.getComponents()
                 .filter((component) => component.hasValue(address))
-                .map((component) => [
-                component,
-                _.get(address, component.key),
-            ])
-                .filter(([component, componentValue,]) => !component.isEmpty(componentValue))
-                .map(([component, componentValue,]) => component.getValueAsString(componentValue, options))
+                .map((component) => [component, _.get(address, component.key)])
+                .filter(([component, componentValue]) => !component.isEmpty(componentValue))
+                .map(([component, componentValue]) => component.getValueAsString(componentValue, options))
                 .join(', ');
         }
         return super.getValueAsString(address, options);

package/lib/mjs/components/address/editForm/Address.edit.provider.js

@@ -38,10 +38,7 @@ export default [
         },
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'azure',
-                ],
+                '===': [{ var: 'data.provider' }, 'azure'],
             },
         },
     },
@@ -58,10 +55,7 @@ export default [
         },
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'custom',
-                ],
+                '===': [{ var: 'data.provider' }, 'custom'],
             },
         },
     },
@@ -76,10 +70,7 @@ export default [
         tooltip: 'Which query param should be used to pass as a search string. Default is `query`.',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'custom',
-                ],
+                '===': [{ var: 'data.provider' }, 'custom'],
             },
         },
     },
@@ -93,10 +84,7 @@ export default [
         tooltip: 'The property within the response data, where iterable addresses reside. For example: results.',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'custom',
-                ],
+                '===': [{ var: 'data.provider' }, 'custom'],
             },
         },
     },
@@ -110,10 +98,7 @@ export default [
         tooltip: 'The property of each address in the response to use as the display value.',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'custom',
-                ],
+                '===': [{ var: 'data.provider' }, 'custom'],
             },
         },
     },
@@ -130,10 +115,7 @@ export default [
         tooltip: 'Additional query params can be specified here in a way of JSON object.',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'custom',
-                ],
+                '===': [{ var: 'data.provider' }, 'custom'],
             },
         },
     },
@@ -150,10 +132,7 @@ export default [
         },
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'google',
-                ],
+                '===': [{ var: 'data.provider' }, 'google'],
             },
         },
     },
@@ -171,10 +150,7 @@ export default [
         tooltip: "Specify Google Maps Autocomplete options used for address searching as JSON object. Follow the <a href ='https://developers.google.com/maps/documentation/javascript/places-autocomplete' target='_blank'>link</a> for available options",
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'google',
-                ],
+                '===': [{ var: 'data.provider' }, 'google'],
             },
         },
     },

package/lib/mjs/components/alert/Alert.js

@@ -22,11 +22,7 @@ export default class Alert {
         };
     }
     showErrors(errors = [], triggerEvent = false, options = {}) {
-        errors = _.isArray(errors)
-            ? errors
-            : [
-                errors,
-            ];
+        errors = _.isArray(errors) ? errors : [errors];
         const messagesList = this.createMessagesList('error', errors);
         this.showAlert('error', messagesList, options);
         if (triggerEvent) {
@@ -112,7 +108,7 @@ export default class Alert {
         };
         if (this.refs.messageRef?.length) {
             this.refs.messageRef.forEach((el) => {
-                Object.entries(customEvents).forEach(([event, listeners,]) => {
+                Object.entries(customEvents).forEach(([event, listeners]) => {
                     listeners.forEach((listener) => this.parentComponent.addEventListener(el, event, listener));
                     this.eventListenersKeys.push(event);
                 });
@@ -142,6 +138,7 @@ export default class Alert {
             const component = this.parentComponent.root?.getComponent(path, null, keyOrPath);
             if (component && _.isFunction(component.focus)) {
                 component.focus();
+                component.scrollIntoView();
             }
         }
     }

package/lib/mjs/components/button/Button.js

@@ -30,9 +30,7 @@ export default class ButtonComponent extends Field {
         };
     }
     static savedValueTypes(schema) {
-        return (getComponentSavedTypes(schema) || [
-            componentValueTypes.boolean,
-        ]);
+        return getComponentSavedTypes(schema) || [componentValueTypes.boolean];
     }
     constructor(component, options, data) {
         super(component, options, data);
@@ -44,12 +42,7 @@ export default class ButtonComponent extends Field {
     get inputInfo() {
         const info = super.elementInfo();
         info.type = 'button';
-        info.attr.type = [
-            'submit',
-            'saveState',
-        ].includes(this.component.action)
-            ? 'submit'
-            : 'button';
+        info.attr.type = ['submit', 'saveState'].includes(this.component.action) ? 'submit' : 'button';
         this.component.theme = this.component.theme || 'default';
         info.attr.class = `btn btn-${this.component.theme}`;
         if (this.component.size) {
@@ -345,17 +338,17 @@ export default class ButtonComponent extends Field {
                 break;
             case 'oauth':
                 if (this.root === this) {
-                    console.warn('You must add the OAuth button to a form for it to function properly');
+                    console.warn(this.t('noOAuthBtn'));
                     return;
                 }
                 // Display Alert if OAuth config is missing
                 if (!this.oauthConfig) {
-                    this.root?.setAlert('danger', 'OAuth not configured. You must configure oauth for your project before it will work.');
+                    this.root.setAlert('danger', this.t('noOAuthConfiguration'));
                     break;
                 }
                 // Display Alert if oAuth has an error is missing
                 if (this.oauthConfig.error) {
-                    this.root?.setAlert('danger', `The Following Error Has Occured ${this.oauthConfig.error}`);
+                    this.root?.setAlert('danger', `${this.t('oAuthErrorsTitle')} ${this.t(this.oauthConfig.error)}`);
                     break;
                 }
                 this.openOauth(this.oauthConfig);
@@ -363,14 +356,14 @@ export default class ButtonComponent extends Field {
         }
     }
     openOauth(settings) {
-        // this is if the temp session (storing the state and code verifiers) expires in the db 
+        // this is if the temp session (storing the state and code verifiers) expires in the db
         // and we need to fetch new oauth state
         if (settings.sessionExpireAt && Date.now() >= settings.sessionExpireAt) {
             this._handleOauthSessionExpired();
             return;
         }
         if (!this.root?.formio) {
-            console.warn('You must attach a Form API url to your form in order to use OAuth buttons.');
+            console.warn(this.t('noOAuthFormUrl'));
             return;
         }
         let params = {
@@ -424,7 +417,7 @@ export default class ButtonComponent extends Field {
                     }
                     // TODO: check for error response here
                     if (settings.state !== params.state) {
-                        this.root?.setAlert('danger', 'OAuth state does not match. Please try logging in again.');
+                        this.root?.setAlert('danger', this.t('oAuthStateError'));
                         return;
                     }
                     if (settings.sessionId) {
@@ -468,7 +461,7 @@ export default class ButtonComponent extends Field {
             catch (error) {
                 if (error.name !== 'SecurityError' &&
                     (error.name !== 'Error' || error.message !== 'Permission denied')) {
-                    this.root?.setAlert('danger', error.message || error);
+                    this.root?.setAlert('danger', this.t(`${error.message || error}`));
                 }
             }
             if (!popup || popup.closed || popup.closed === undefined) {

package/lib/mjs/components/button/editForm/Button.edit.display.js

@@ -56,10 +56,7 @@ export default [
         },
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.action' },
-                    'oauth',
-                ],
+                '===': [{ var: 'data.action' }, 'oauth'],
             },
         },
     },
@@ -73,10 +70,7 @@ export default [
         input: true,
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.action' },
-                    'saveState',
-                ],
+                '===': [{ var: 'data.action' }, 'saveState'],
             },
         },
     },
@@ -90,10 +84,7 @@ export default [
         tooltip: 'Use the Enter key to submit form.',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.action' },
-                    'submit',
-                ],
+                '===': [{ var: 'data.action' }, 'submit'],
             },
         },
     },
@@ -107,10 +98,7 @@ export default [
         tooltip: 'When the button is pressed, show any validation errors on the form.',
         conditional: {
             json: {
-                '!==': [
-                    { var: 'data.action' },
-                    'submit',
-                ],
+                '!==': [{ var: 'data.action' }, 'submit'],
             },
         },
     },
@@ -123,10 +111,7 @@ export default [
         tooltip: 'The event to fire when the button is clicked.',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.action' },
-                    'event',
-                ],
+                '===': [{ var: 'data.action' }, 'event'],
             },
         },
     },
@@ -141,10 +126,7 @@ export default [
         placeholder: 'https://example.form.io',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.action' },
-                    'url',
-                ],
+                '===': [{ var: 'data.action' }, 'url'],
             },
         },
     },
@@ -172,10 +154,7 @@ export default [
         ],
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.action' },
-                    'url',
-                ],
+                '===': [{ var: 'data.action' }, 'url'],
             },
         },
     },
@@ -191,10 +170,7 @@ export default [
         placeholder: "data['mykey'] = data['anotherKey'];",
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.action' },
-                    'custom',
-                ],
+                '===': [{ var: 'data.action' }, 'custom'],
             },
         },
     },

package/lib/mjs/components/checkbox/Checkbox.js

@@ -30,9 +30,7 @@ export default class CheckBoxComponent extends Field {
     static get conditionOperatorsSettings() {
         return {
             ...super.conditionOperatorsSettings,
-            operators: [
-                'isEqual',
-            ],
+            operators: ['isEqual'],
             valueComponent() {
                 return {
                     valueType: 'boolean',
@@ -54,13 +52,9 @@ export default class CheckBoxComponent extends Field {
             return types;
         }
         if (schema.inputType === 'radio') {
-            return [
-                componentValueTypes.string,
-            ];
+            return [componentValueTypes.string];
         }
-        return [
-            componentValueTypes.boolean,
-        ];
+        return [componentValueTypes.boolean];
     }
     get defaultSchema() {
         return CheckBoxComponent.schema();
@@ -195,7 +189,7 @@ export default class CheckBoxComponent extends Field {
         if (_.isUndefined(value) && this.inDataTable) {
             return '';
         }
-        return this.t(hasValue ? 'Yes' : 'No');
+        return this.t(hasValue ? 'yes' : 'no');
     }
     updateValue(value, flags) {
         // If this is a radio and is alredy checked, uncheck it.

package/lib/mjs/components/checkbox/editForm/Checkbox.edit.display.js

@@ -58,10 +58,7 @@ export default [
         weight: 420,
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.inputType' },
-                    'radio',
-                ],
+                '===': [{ var: 'data.inputType' }, 'radio'],
             },
         },
     },
@@ -74,10 +71,7 @@ export default [
         weight: 430,
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.inputType' },
-                    'radio',
-                ],
+                '===': [{ var: 'data.inputType' }, 'radio'],
             },
         },
     },

package/lib/mjs/components/columns/Columns.js

@@ -36,9 +36,7 @@ export default class ColumnsComponent extends NestedComponent {
         this.rows = [];
     }
     get schema() {
-        const schema = _.omit(super.schema, [
-            'components',
-        ]);
+        const schema = _.omit(super.schema, ['components']);
         schema.columns?.map((column, colIndex) => {
             column.components.map((comp, compIndex) => {
                 const clonedComp = _.clone(comp);
@@ -122,28 +120,18 @@ export default class ColumnsComponent extends NestedComponent {
         const initVal = { stack: [], rows: [] };
         const width = (x) => x.component.width;
         const result = _.reduce(this.components, (acc, next) => {
-            const stack = [
-                ...acc.stack,
-                next,
-            ];
+            const stack = [...acc.stack, next];
             if (_.sumBy(stack, width) <= this.gridSize) {
                 acc.stack = stack;
                 return acc;
             }
             else {
-                acc.rows = [
-                    ...acc.rows,
-                    acc.stack,
-                ];
-                acc.stack = [
-                    next,
-                ];
+                acc.rows = [...acc.rows, acc.stack];
+                acc.stack = [next];
                 return acc;
             }
         }, initVal);
-        return _.concat(result.rows, [
-            result.stack,
-        ]);
+        return _.concat(result.rows, [result.stack]);
     }
     checkData(data, flags, row, components) {
         super.checkData(data, flags, row, components);

package/lib/mjs/components/container/Container.js

@@ -32,9 +32,7 @@ export default class ContainerComponent extends NestedDataComponent {
         this.type = 'container';
     }
     static savedValueTypes(schema) {
-        return (getComponentSavedTypes(schema) || [
-            componentValueTypes.object,
-        ]);
+        return getComponentSavedTypes(schema) || [componentValueTypes.object];
     }
     addComponents(data, options) {
         return super.addComponents(this.dataValue, options);

package/lib/mjs/components/currency/Currency.js

@@ -104,13 +104,8 @@ export default class CurrencyComponent extends NumberComponent {
         const isNegative = value.includes(negativeValueSymbol) || false;
         value = this.stripPrefixSuffix(isNegative ? value.replace(negativeValueSymbol, '') : value);
         if (value.includes(this.decimalSeparator)) {
-            [
-                integerPart,
-                decimalPart,
-            ] = value.split(this.decimalSeparator);
-            decimalPartNumbers = [
-                ...decimalPart.split(''),
-            ];
+            [integerPart, decimalPart] = value.split(this.decimalSeparator);
+            decimalPartNumbers = [...decimalPart.split('')];
         }
         else {
             integerPart = value;