@formio/js 5.2.4-rc.0 → 5.2.5

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

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import Field from '../_classes/field/Field';
 import Input from '../_classes/input/Input';
-import { componentValueTypes, eachComponent, getArrayFromComponentPath, getComponentSavedTypes, } from '../../utils';
+import { componentValueTypes, eachComponent, getArrayFromComponentPath, getComponentSavedTypes } from '../../utils';
 export default class ButtonComponent extends Field {
     static schema(...extend) {
         return Input.schema({
@@ -16,7 +16,7 @@ export default class ButtonComponent extends Field {
             persistent: false,
             disableOnInvalid: false,
             theme: 'primary',
-            dataGridLabel: true,
+            dataGridLabel: true
         }, ...extend);
     }
     static get builderInfo() {
@@ -26,13 +26,11 @@ export default class ButtonComponent extends Field {
             icon: 'stop',
             documentation: '/userguide/form-building/form-components#button',
             weight: 110,
-            schema: ButtonComponent.schema(),
+            schema: ButtonComponent.schema()
         };
     }
     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) {
@@ -66,7 +59,7 @@ export default class ButtonComponent extends Field {
     }
     get labelInfo() {
         return {
-            hidden: true,
+            hidden: true
         };
     }
     set loading(loading) {
@@ -139,9 +132,7 @@ export default class ButtonComponent extends Field {
                 this.setContent(this.refs.buttonMessage, resultMessage);
             }, true);
             this.on('submitError', (message) => {
-                const resultMessage = _.isString(message)
-                    ? this.t(message)
-                    : this.t(this.errorMessage('submitError'));
+                const resultMessage = _.isString(message) ? this.t(message) : this.t(this.errorMessage('submitError'));
                 this.loading = false;
                 this.disabled = false;
                 this.hasError = true;
@@ -196,11 +187,7 @@ export default class ButtonComponent extends Field {
             const isSilent = flags && flags.silent;
             //check root validity only if disableOnInvalid is set and when it is not possible to make submission because of validation errors
             if (flags && flags.noValidate && (this.component.disableOnInvalid || this.hasError)) {
-                isValid =
-                    flags.rootValidity ||
-                        (this.root
-                            ? this.root.validate(this.root.data, { dirty: false, silentCheck: true }).length === 0
-                            : true);
+                isValid = flags.rootValidity || (this.root ? (this.root.validate(this.root.data, { dirty: false, silentCheck: true }).length === 0) : true);
                 flags.rootValidity = isValid;
             }
             this.isDisabledOnInvalid = this.component.disableOnInvalid && (isSilent || !isValid);
@@ -218,7 +205,7 @@ export default class ButtonComponent extends Field {
             }
         }, true);
         if (this.component.saveOnEnter) {
-            this.root.addEventListener(this.root.element, 'keyup', (event) => {
+            this.root?.addEventListener(this.root.element, 'keyup', (event) => {
                 if (event.keyCode === 13) {
                     this.onClick.call(this, event);
                 }
@@ -249,9 +236,9 @@ export default class ButtonComponent extends Field {
             return decodeURIComponent(results[1].replace(/\+/g, ' '));
         }
         // If this is an OpenID Provider initiated login, perform the click event immediately
-        if (this.component.action === 'oauth' && this.oauthConfig && !this.oauthConfig.error) {
+        if ((this.component.action === 'oauth') && this.oauthConfig && !this.oauthConfig.error) {
             const iss = getUrlParameter('iss');
-            if (iss && this.oauthConfig.authURI.indexOf(iss) === 0) {
+            if (iss && (this.oauthConfig.authURI.indexOf(iss) === 0)) {
                 this.openOauth(this.oauthConfig);
             }
         }
@@ -263,12 +250,13 @@ export default class ButtonComponent extends Field {
         this.loadRefs(element, {
             button: 'single',
             buttonMessageContainer: 'single',
-            buttonMessage: 'single',
+            buttonMessage: 'single'
         });
         const superAttach = super.attach(element);
         this.attachButton();
         return superAttach;
     }
+    /* eslint-enable max-statements */
     detach(element) {
         if (element && this.refs.button) {
             this.removeShortcut(this.refs.button);
@@ -295,17 +283,17 @@ export default class ButtonComponent extends Field {
                     noValidate: this.component.state === 'draft',
                     state: this.component.state || 'submitted',
                     component: this.component,
-                    instance: this,
+                    instance: this
                 });
                 break;
             case 'event':
                 this.emit(this.interpolate(this.component.event), this.data);
-                this.events.emit(this.interpolate(this.component.event), this.data);
+                this.events?.emit(this.interpolate(this.component.event), this.data);
                 this.emit('customEvent', {
                     type: this.interpolate(this.component.event),
                     component: this.component,
                     data: this.data,
-                    event: event,
+                    event: event
                 });
                 break;
             case 'custom': {
@@ -321,20 +309,20 @@ export default class ButtonComponent extends Field {
                 this.evaluate(this.component.custom, {
                     form,
                     flattened,
-                    components,
+                    components
                 });
-                this.triggerChange();
+                this.triggerChange?.();
                 break;
             }
             case 'url':
                 this.loading = true;
                 this.emit('requestButton', {
                     component: this.component,
-                    instance: this,
+                    instance: this
                 });
                 this.emit('requestUrl', {
                     url: this.interpolate(this.component.url),
-                    headers: this.component.headers,
+                    headers: this.component.headers
                 });
                 break;
             case 'reset':
@@ -350,12 +338,12 @@ export default class ButtonComponent extends Field {
                 }
                 // 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', 'OAuth not configured. You must configure oauth for your project before it will work.');
                     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', `The Following Error Has Occured ${this.oauthConfig.error}`);
                     break;
                 }
                 this.openOauth(this.oauthConfig);
@@ -363,17 +351,16 @@ export default class ButtonComponent extends Field {
         }
     }
     openOauth(settings) {
-        if (!this.root.formio) {
+        if (!this.root?.formio) {
             console.warn('You must attach a Form API url to your form in order to use OAuth buttons.');
             return;
         }
+        /*eslint-disable camelcase */
         let params = {
             response_type: 'code',
             client_id: settings.clientId,
-            redirect_uri: (settings.redirectURI && this.interpolate(settings.redirectURI)) ||
-                window.location.origin ||
-                `${window.location.protocol}//${window.location.host}`,
-            scope: settings.scope,
+            redirect_uri: (settings.redirectURI && this.interpolate(settings.redirectURI)) || window.location.origin || `${window.location.protocol}//${window.location.host}`,
+            scope: settings.scope
         };
         if (settings.state) {
             params.state = settings.state;
@@ -382,17 +369,16 @@ export default class ButtonComponent extends Field {
             params.code_challenge = settings.code_challenge;
             params.code_challenge_method = 'S256';
         }
+        /*eslint-enable camelcase */
         // Needs for the correct redirection URI for the OpenID
         const originalRedirectUri = params.redirect_uri;
         // Make display optional.
         if (settings.display) {
             params.display = settings.display;
         }
-        params = Object.keys(params)
-            .map((key) => {
+        params = Object.keys(params).map(key => {
             return `${key}=${encodeURIComponent(params[key])}`;
-        })
-            .join('&');
+        }).join('&');
         const separator = settings.authURI.indexOf('?') !== -1 ? '&' : '?';
         const url = `${settings.authURI}${separator}${params}`;
         const popup = window.open(url, settings.provider, 'width=1020,height=618');
@@ -402,58 +388,52 @@ export default class ButtonComponent extends Field {
                 const currentHost = window.location.host;
                 if (popup && !popup.closed && popupHost === currentHost) {
                     popup.close();
-                    const params = popup.location.search
-                        .substr(1)
-                        .split('&')
-                        .reduce((params, param) => {
+                    const params = popup.location.search.substr(1).split('&').reduce((params, param) => {
                         const split = param.split('=');
                         params[split[0]] = split[1];
                         return params;
                     }, {});
                     if (params.error) {
                         alert(params.error_description || params.error);
-                        this.root.setAlert('danger', params.error_description || params.error);
+                        this.root?.setAlert('danger', params.error_description || params.error);
                         return;
                     }
                     // 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', 'OAuth state does not match. Please try logging in again.');
                         return;
                     }
                     // Depending on where the settings came from, submit to either the submission endpoint (old) or oauth endpoint (new).
                     let requestPromise = Promise.resolve();
-                    if (_.has(this, 'root.form.config.oauth') &&
-                        this.root.form.config.oauth[this.component.oauthProvider]) {
+                    if (_.has(this, 'root.form.config.oauth') && this.root?.form.config.oauth[this.component.oauthProvider]) {
                         params.provider = settings.provider;
                         params.redirectURI = originalRedirectUri;
                         // Needs for the exclude oAuth Actions that not related to this button
                         params.triggeredBy = this.oauthComponentPath;
-                        requestPromise = this.root.formio.makeRequest('oauth', `${this.root.formio.projectUrl}/oauth2`, 'POST', params);
+                        requestPromise = this.root?.formio.makeRequest('oauth', `${this.root?.formio.projectUrl}/oauth2`, 'POST', params);
                     }
                     else {
                         const submission = { data: {}, oauth: {} };
                         submission.oauth[settings.provider] = params;
                         submission.oauth[settings.provider].redirectURI = originalRedirectUri;
                         if (settings.logoutURI) {
-                            this.root.formio.oauthLogoutURI(settings.logoutURI);
+                            this.root?.formio.oauthLogoutURI(settings.logoutURI);
                         }
                         // Needs for the exclude oAuth Actions that not related to this button
                         submission.oauth[settings.provider].triggeredBy = this.oauthComponentPath;
-                        requestPromise = this.root.formio.saveSubmission(submission);
+                        requestPromise = this.root?.formio.saveSubmission(submission);
                     }
-                    requestPromise
-                        .then((result) => {
-                        this.root.onSubmit(result, true);
+                    requestPromise.then((result) => {
+                        this.root?.onSubmit(result, true);
                     })
                         .catch((err) => {
-                        this.root.onSubmissionError(err);
+                        this.root?.onSubmissionError(err);
                     });
                 }
             }
             catch (error) {
-                if (error.name !== 'SecurityError' &&
-                    (error.name !== 'Error' || error.message !== 'Permission denied')) {
-                    this.root.setAlert('danger', error.message || error);
+                if (error.name !== 'SecurityError' && (error.name !== 'Error' || error.message !== 'Permission denied')) {
+                    this.root?.setAlert('danger', error.message || error);
                 }
             }
             if (!popup || popup.closed || popup.closed === undefined) {
@@ -463,10 +443,7 @@ export default class ButtonComponent extends Field {
     }
     get oauthComponentPath() {
         const pathArray = getArrayFromComponentPath(this.path);
-        return _.chain(pathArray)
-            .filter((pathPart) => !_.isNumber(pathPart))
-            .join('.')
-            .value();
+        return _.chain(pathArray).filter(pathPart => !_.isNumber(pathPart)).join('.').value();
     }
     focus() {
         if (this.refs.button) {

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

@@ -55,12 +55,7 @@ export default [
             ],
         },
         conditional: {
-            json: {
-                '===': [
-                    { var: 'data.action' },
-                    'oauth',
-                ],
-            },
+            json: { '===': [{ var: 'data.action' }, 'oauth'] },
         },
     },
     {
@@ -72,12 +67,7 @@ export default [
         placeholder: 'submitted',
         input: true,
         conditional: {
-            json: {
-                '===': [
-                    { var: 'data.action' },
-                    'saveState',
-                ],
-            },
+            json: { '===': [{ var: 'data.action' }, 'saveState'] },
         },
     },
     {
@@ -89,12 +79,7 @@ export default [
         weight: 113,
         tooltip: 'Use the Enter key to submit form.',
         conditional: {
-            json: {
-                '===': [
-                    { var: 'data.action' },
-                    'submit',
-                ],
-            },
+            json: { '===': [{ var: 'data.action' }, 'submit'] },
         },
     },
     {
@@ -106,12 +91,7 @@ export default [
         weight: 115,
         tooltip: 'When the button is pressed, show any validation errors on the form.',
         conditional: {
-            json: {
-                '!==': [
-                    { var: 'data.action' },
-                    'submit',
-                ],
-            },
+            json: { '!==': [{ var: 'data.action' }, 'submit'] },
         },
     },
     {
@@ -122,12 +102,7 @@ export default [
         weight: 120,
         tooltip: 'The event to fire when the button is clicked.',
         conditional: {
-            json: {
-                '===': [
-                    { var: 'data.action' },
-                    'event',
-                ],
-            },
+            json: { '===': [{ var: 'data.action' }, 'event'] },
         },
     },
     {
@@ -140,12 +115,7 @@ export default [
         tooltip: 'The URL where the submission will be sent.',
         placeholder: 'https://example.form.io',
         conditional: {
-            json: {
-                '===': [
-                    { var: 'data.action' },
-                    'url',
-                ],
-            },
+            json: { '===': [{ var: 'data.action' }, 'url'] },
         },
     },
     {
@@ -168,15 +138,10 @@ export default [
                 label: 'Value',
                 input: true,
                 type: 'textfield',
-            },
+            }
         ],
         conditional: {
-            json: {
-                '===': [
-                    { var: 'data.action' },
-                    'url',
-                ],
-            },
+            json: { '===': [{ var: 'data.action' }, 'url'] },
         },
     },
     {
@@ -190,12 +155,7 @@ export default [
         weight: 120,
         placeholder: "data['mykey'] = data['anotherKey'];",
         conditional: {
-            json: {
-                '===': [
-                    { var: 'data.action' },
-                    'custom',
-                ],
-            },
+            json: { '===': [{ var: 'data.action' }, 'custom'] },
         },
     },
     {

package/lib/mjs/components/checkbox/Checkbox.d.ts

@@ -43,7 +43,7 @@ export default class CheckBoxComponent extends Field {
     attach(element: any): Promise<void>;
     input: any;
     detach(element: any): void;
-    get emptyValue(): false | "";
+    get emptyValue(): false | null;
     getValueAt(index: any): any;
     get checked(): boolean;
     setCheckedState(value: any): any;

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

@@ -11,15 +11,15 @@ export default function (...extend) {
     return Components.baseEditForm([
         {
             key: 'data',
-            components: CheckboxEditData,
+            components: CheckboxEditData
         },
         {
             key: 'display',
-            components: CheckboxEditDisplay,
+            components: CheckboxEditDisplay
         },
         {
             key: 'validation',
-            components: CheckboxEditValidation,
+            components: CheckboxEditValidation
         },
     ], ...extend);
 }

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

@@ -11,7 +11,7 @@ export default class CheckBoxComponent extends Field {
             dataGridLabel: true,
             labelPosition: 'right',
             value: '',
-            name: '',
+            name: ''
         }, ...extend);
     }
     static get builderInfo() {
@@ -21,7 +21,7 @@ export default class CheckBoxComponent extends Field {
             icon: 'check-square',
             documentation: '/userguide/form-building/form-components#check-box',
             weight: 50,
-            schema: CheckBoxComponent.schema(),
+            schema: CheckBoxComponent.schema()
         };
     }
     static get serverConditionSettings() {
@@ -30,9 +30,7 @@ export default class CheckBoxComponent extends Field {
     static get conditionOperatorsSettings() {
         return {
             ...super.conditionOperatorsSettings,
-            operators: [
-                'isEqual',
-            ],
+            operators: ['isEqual'],
             valueComponent() {
                 return {
                     valueType: 'boolean',
@@ -40,11 +38,11 @@ export default class CheckBoxComponent extends Field {
                         values: [
                             { label: 'Checked', value: 'true' },
                             { label: 'Not Checked', value: 'false' },
-                        ],
+                        ]
                     },
-                    type: 'select',
+                    type: 'select'
                 };
-            },
+            }
         };
     }
     static savedValueTypes(schema) {
@@ -54,23 +52,19 @@ 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();
     }
     get labelClass() {
         let className = '';
-        if (this.isInputComponent &&
-            !this.options.inputsOnly &&
-            this.component.validate &&
-            this.component.validate.required) {
+        if (this.isInputComponent
+            && !this.options.inputsOnly
+            && this.component.validate
+            && this.component.validate.required) {
             className += ' field-required';
         }
         return `${className}`;
@@ -94,16 +88,14 @@ export default class CheckBoxComponent extends Field {
     }
     get labelInfo() {
         return {
-            hidden: true,
+            hidden: true
         };
     }
     render() {
         return super.render(this.renderTemplate('checkbox', {
             input: this.inputInfo,
             checked: this.checked,
-            tooltip: this.interpolate(this.t(this.component.tooltip) || '', {
-                _userInput: true,
-            }).replace(/(?:\r\n|\r|\n)/g, '<br />'),
+            tooltip: this.interpolate(this.t(this.component.tooltip) || '', { _userInput: true }).replace(/(?:\r\n|\r|\n)/g, '<br />')
         }));
     }
     attach(element) {
@@ -111,7 +103,7 @@ export default class CheckBoxComponent extends Field {
         this.input = this.refs.input[0];
         if (this.refs.input) {
             this.addEventListener(this.input, this.inputInfo.changeEvent, () => this.updateValue(null, {
-                modified: true,
+                modified: true
             }));
             this.addShortcut(this.input);
         }
@@ -124,7 +116,7 @@ export default class CheckBoxComponent extends Field {
         super.detach();
     }
     get emptyValue() {
-        return this.component.inputType === 'radio' ? '' : false;
+        return this.component.inputType === 'radio' ? null : false;
     }
     isEmpty(value = this.dataValue) {
         return super.isEmpty(value) || value === false;
@@ -144,12 +136,12 @@ export default class CheckBoxComponent extends Field {
             return value ? this.setCheckedState(value) : this.setCheckedState(this.dataValue);
         }
         else {
-            return value === '' ? this.dataValue : !!value;
+            return (value === '') ? this.dataValue : !!value;
         }
     }
     get checked() {
         if (this.component.name) {
-            return this.dataValue === this.component.value;
+            return (this.dataValue === this.component.value);
         }
         return !!this.dataValue;
     }
@@ -158,8 +150,8 @@ export default class CheckBoxComponent extends Field {
             return;
         }
         if (this.component.name) {
-            this.input.value = value === this.component.value ? this.component.value : 0;
-            this.input.checked = value === this.component.value ? 1 : 0;
+            this.input.value = (value === this.component.value) ? this.component.value : 0;
+            this.input.checked = (value === this.component.value) ? 1 : 0;
         }
         else if (value === 'on') {
             this.input.value = 1;
@@ -199,7 +191,7 @@ export default class CheckBoxComponent extends Field {
     }
     updateValue(value, flags) {
         // If this is a radio and is alredy checked, uncheck it.
-        if (this.component.name && flags.modified && this.dataValue === this.component.value) {
+        if (this.component.name && flags.modified && (this.dataValue === this.component.value)) {
             this.input.checked = 0;
             this.input.value = 0;
             this.dataValue = '';

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

@@ -1,6 +1,6 @@
 export default [
     {
         key: 'multiple',
-        ignore: true,
+        ignore: true
     },
 ];

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

@@ -11,7 +11,7 @@ export default [
     },
     {
         key: 'labelMargin',
-        ignore: true,
+        ignore: true
     },
     {
         key: 'placeholder',
@@ -57,12 +57,7 @@ export default [
         tooltip: 'The key used to trigger the radio button toggle.',
         weight: 420,
         conditional: {
-            json: {
-                '===': [
-                    { var: 'data.inputType' },
-                    'radio',
-                ],
-            },
+            json: { '===': [{ var: 'data.inputType' }, 'radio'] },
         },
     },
     {
@@ -73,12 +68,7 @@ export default [
         tooltip: 'The value used with this radio button.',
         weight: 430,
         conditional: {
-            json: {
-                '===': [
-                    { var: 'data.inputType' },
-                    'radio',
-                ],
-            },
+            json: { '===': [{ var: 'data.inputType' }, 'radio'] },
         },
     },
 ];

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

@@ -1,10 +1,10 @@
 export default [
     {
         key: 'validateOn',
-        ignore: true,
+        ignore: true
     },
     {
         key: 'unique',
-        ignore: true,
+        ignore: true
     },
 ];

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

@@ -9,7 +9,7 @@ export default function (...extend) {
     return nestedComponentForm([
         {
             key: 'display',
-            components: ColumnsEditDisplay,
+            components: ColumnsEditDisplay
         },
     ], ...extend);
 }