@formio/js 5.2.3 → 5.2.4-rc.0

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,11 +26,13 @@ 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);
@@ -42,7 +44,12 @@ 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) {
@@ -59,7 +66,7 @@ export default class ButtonComponent extends Field {
     }
     get labelInfo() {
         return {
-            hidden: true
+            hidden: true,
         };
     }
     set loading(loading) {
@@ -132,7 +139,9 @@ 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;
@@ -187,7 +196,11 @@ 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);
@@ -236,9 +249,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);
             }
         }
@@ -250,13 +263,12 @@ 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);
@@ -283,7 +295,7 @@ 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':
@@ -293,7 +305,7 @@ export default class ButtonComponent extends Field {
                     type: this.interpolate(this.component.event),
                     component: this.component,
                     data: this.data,
-                    event: event
+                    event: event,
                 });
                 break;
             case 'custom': {
@@ -309,7 +321,7 @@ export default class ButtonComponent extends Field {
                 this.evaluate(this.component.custom, {
                     form,
                     flattened,
-                    components
+                    components,
                 });
                 this.triggerChange();
                 break;
@@ -318,11 +330,11 @@ export default class ButtonComponent extends Field {
                 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':
@@ -355,12 +367,13 @@ export default class ButtonComponent extends Field {
             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;
@@ -369,16 +382,17 @@ 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');
@@ -388,7 +402,10 @@ 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;
@@ -405,7 +422,8 @@ export default class ButtonComponent extends Field {
                     }
                     // 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
@@ -423,7 +441,8 @@ export default class ButtonComponent extends Field {
                         submission.oauth[settings.provider].triggeredBy = this.oauthComponentPath;
                         requestPromise = this.root.formio.saveSubmission(submission);
                     }
-                    requestPromise.then((result) => {
+                    requestPromise
+                        .then((result) => {
                         this.root.onSubmit(result, true);
                     })
                         .catch((err) => {
@@ -432,7 +451,8 @@ export default class ButtonComponent extends Field {
                 }
             }
             catch (error) {
-                if (error.name !== 'SecurityError' && (error.name !== 'Error' || error.message !== 'Permission denied')) {
+                if (error.name !== 'SecurityError' &&
+                    (error.name !== 'Error' || error.message !== 'Permission denied')) {
                     this.root.setAlert('danger', error.message || error);
                 }
             }
@@ -443,7 +463,10 @@ 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,7 +55,12 @@ export default [
             ],
         },
         conditional: {
-            json: { '===': [{ var: 'data.action' }, 'oauth'] },
+            json: {
+                '===': [
+                    { var: 'data.action' },
+                    'oauth',
+                ],
+            },
         },
     },
     {
@@ -67,7 +72,12 @@ export default [
         placeholder: 'submitted',
         input: true,
         conditional: {
-            json: { '===': [{ var: 'data.action' }, 'saveState'] },
+            json: {
+                '===': [
+                    { var: 'data.action' },
+                    'saveState',
+                ],
+            },
         },
     },
     {
@@ -79,7 +89,12 @@ export default [
         weight: 113,
         tooltip: 'Use the Enter key to submit form.',
         conditional: {
-            json: { '===': [{ var: 'data.action' }, 'submit'] },
+            json: {
+                '===': [
+                    { var: 'data.action' },
+                    'submit',
+                ],
+            },
         },
     },
     {
@@ -91,7 +106,12 @@ 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',
+                ],
+            },
         },
     },
     {
@@ -102,7 +122,12 @@ 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',
+                ],
+            },
         },
     },
     {
@@ -115,7 +140,12 @@ 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',
+                ],
+            },
         },
     },
     {
@@ -138,10 +168,15 @@ export default [
                 label: 'Value',
                 input: true,
                 type: 'textfield',
-            }
+            },
         ],
         conditional: {
-            json: { '===': [{ var: 'data.action' }, 'url'] },
+            json: {
+                '===': [
+                    { var: 'data.action' },
+                    'url',
+                ],
+            },
         },
     },
     {
@@ -155,7 +190,12 @@ 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 | null;
+    get emptyValue(): false | "";
     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,7 +30,9 @@ export default class CheckBoxComponent extends Field {
     static get conditionOperatorsSettings() {
         return {
             ...super.conditionOperatorsSettings,
-            operators: ['isEqual'],
+            operators: [
+                'isEqual',
+            ],
             valueComponent() {
                 return {
                     valueType: 'boolean',
@@ -38,11 +40,11 @@ export default class CheckBoxComponent extends Field {
                         values: [
                             { label: 'Checked', value: 'true' },
                             { label: 'Not Checked', value: 'false' },
-                        ]
+                        ],
                     },
-                    type: 'select'
+                    type: 'select',
                 };
-            }
+            },
         };
     }
     static savedValueTypes(schema) {
@@ -52,19 +54,23 @@ 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}`;
@@ -88,14 +94,16 @@ 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) {
@@ -103,7 +111,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);
         }
@@ -116,7 +124,7 @@ export default class CheckBoxComponent extends Field {
         super.detach();
     }
     get emptyValue() {
-        return this.component.inputType === 'radio' ? null : false;
+        return this.component.inputType === 'radio' ? '' : false;
     }
     isEmpty(value = this.dataValue) {
         return super.isEmpty(value) || value === false;
@@ -136,12 +144,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;
     }
@@ -150,8 +158,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;
@@ -191,7 +199,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,7 +57,12 @@ 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',
+                ],
+            },
         },
     },
     {
@@ -68,7 +73,12 @@ 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);
 }

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

@@ -8,13 +8,13 @@ export default class ColumnsComponent extends NestedComponent {
             type: 'columns',
             columns: [
                 { components: [], width: 6, offset: 0, push: 0, pull: 0, size: 'md' },
-                { components: [], width: 6, offset: 0, push: 0, pull: 0, size: 'md' }
+                { components: [], width: 6, offset: 0, push: 0, pull: 0, size: 'md' },
             ],
             clearOnHide: false,
             input: false,
             tableView: false,
             persistent: false,
-            autoAdjust: false
+            autoAdjust: false,
         }, ...extend);
     }
     static get builderInfo() {
@@ -25,7 +25,7 @@ export default class ColumnsComponent extends NestedComponent {
             documentation: '/userguide/form-building/layout-components#columns',
             showPreview: false,
             weight: 10,
-            schema: ColumnsComponent.schema()
+            schema: ColumnsComponent.schema(),
         };
     }
     static savedValueTypes() {
@@ -36,7 +36,9 @@ 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);
@@ -87,13 +89,13 @@ export default class ColumnsComponent extends NestedComponent {
     render() {
         return super.render(this.renderTemplate('columns', {
             columnKey: this.columnKey,
-            columnComponents: this.columns.map(column => this.renderComponents(column))
+            columnComponents: this.columns.map((column) => this.renderComponents(column)),
         }));
     }
     justifyColumn(items, index) {
-        const toAdjust = _.every(items, item => !item.visible);
+        const toAdjust = _.every(items, (item) => !item.visible);
         const column = this.component.columns[index];
-        const width = (toAdjust && items.length) ? 0 : column.width;
+        const width = toAdjust && items.length ? 0 : column.width;
         const shouldRedraw = !_.isEqual(width, column.currentWidth);
         column.currentWidth = width;
         return shouldRedraw;
@@ -118,20 +120,30 @@ export default class ColumnsComponent extends NestedComponent {
      */
     groupByRow() {
         const initVal = { stack: [], rows: [] };
-        const width = x => x.component.width;
+        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);