@formio/js 5.2.3 → 5.2.4-rc.0

package/lib/mjs/components/_classes/component/editForm/Component.edit.validation.js

@@ -1,6 +1,5 @@
 import EditFormUtils from './utils';
 import { Evaluator } from '../../../../utils/Evaluator';
-/* eslint-disable quotes, max-len */
 export default [
     {
         weight: 10,
@@ -8,7 +7,7 @@ export default [
         label: 'Required',
         tooltip: 'A required field must be filled in before the form can be submitted.',
         key: 'validate.required',
-        input: true
+        input: true,
     },
     {
         weight: 100,
@@ -16,7 +15,7 @@ export default [
         label: 'Unique',
         tooltip: 'Makes sure the data submitted for this field is unique, and has not been submitted before.',
         key: 'unique',
-        input: true
+        input: true,
     },
     {
         weight: 100,
@@ -24,7 +23,7 @@ export default [
         label: 'Validate When Hidden',
         tooltip: 'Validates the component when it is hidden/conditionally hidden. Vaildation errors are displayed in the error alert on the form submission. Use caution when enabling this setting, as it can cause a hidden component to be invalid with no way for the form user to correct it.',
         key: 'validateWhenHidden',
-        input: true
+        input: true,
     },
     {
         weight: 0,
@@ -38,9 +37,9 @@ export default [
         data: {
             values: [
                 { label: 'Change', value: 'change' },
-                { label: 'Blur', value: 'blur' }
-            ]
-        }
+                { label: 'Blur', value: 'blur' },
+            ],
+        },
     },
     {
         weight: 190,
@@ -49,7 +48,7 @@ export default [
         key: 'errorLabel',
         label: 'Error Label',
         placeholder: 'Error Label',
-        tooltip: 'The label for this field when an error occurs.'
+        tooltip: 'The label for this field when an error occurs.',
     },
     {
         weight: 200,
@@ -58,7 +57,7 @@ export default [
         placeholder: 'Custom Error Message',
         type: 'textfield',
         tooltip: 'Error message displayed if any error occurred.',
-        input: true
+        input: true,
     },
     {
         type: 'panel',
@@ -80,7 +79,7 @@ export default [
                 editor: 'ace',
                 hideLabel: true,
                 as: 'javascript',
-                input: true
+                input: true,
             },
             {
                 type: 'htmlelement',
@@ -91,7 +90,7 @@ export default [
             <p>You must assign the <strong>valid</strong> variable as either <strong>true</strong> or an error message if validation fails.</p>
             <h5>Example:</h5>
             <pre>valid = (input === 'Joe') ? true : 'Your name must be "Joe"';</pre>
-          </small>`
+          </small>`,
             },
             {
                 type: 'well',
@@ -103,11 +102,11 @@ export default [
                         tooltip: 'Check this if you wish to perform the validation ONLY on the server side. This keeps your validation logic private and secret.',
                         description: 'Check this if you wish to perform the validation ONLY on the server side. This keeps your validation logic private and secret.',
                         key: 'validate.customPrivate',
-                        input: true
-                    }
-                ]
-            }
-        ]
+                        input: true,
+                    },
+                ],
+            },
+        ],
     },
     {
         type: 'panel',
@@ -120,17 +119,22 @@ export default [
             {
                 type: 'htmlelement',
                 tag: 'div',
-                /* eslint-disable prefer-template */
                 content: '<p>Execute custom logic using <a href="http://jsonlogic.com/" target="_blank" rel="noopener noreferrer">JSONLogic</a>.</p>' +
                     '<h5>Example:</h5>' +
-                    '<pre>' + JSON.stringify({
-                    "if": [
-                        { "===": [{ "var": "input" }, "Bob"] },
-                        true,
-                        "Your name must be 'Bob'!"
-                    ]
-                }, null, 2) + '</pre>'
-                /* eslint-enable prefer-template */
+                    '<pre>' +
+                    JSON.stringify({
+                        if: [
+                            {
+                                '===': [
+                                    { var: 'input' },
+                                    'Bob',
+                                ],
+                            },
+                            true,
+                            "Your name must be 'Bob'!",
+                        ],
+                    }, null, 2) +
+                    '</pre>',
             },
             {
                 type: 'textarea',
@@ -139,9 +143,9 @@ export default [
                 rows: 5,
                 editor: 'ace',
                 as: 'json',
-                input: true
-            }
-        ]
+                input: true,
+            },
+        ],
     },
     {
         type: 'panel',
@@ -158,7 +162,7 @@ export default [
                 rows: 5,
                 editor: 'ace',
                 as: 'json',
-                input: true
+                input: true,
             },
             {
                 type: 'htmlelement',
@@ -204,9 +208,8 @@ export default [
            <li><code>{<span/>{ m<span/>axYear }}</code></li>
            <li><code>{<span/>{ r<span/>egex }}</code></li>
           </ul>
-        `
-            }
-        ]
-    }
+        `,
+            },
+        ],
+    },
 ];
-/* eslint-enable quotes, max-len */

package/lib/mjs/components/_classes/component/editForm/utils.js

@@ -37,7 +37,6 @@ const EditFormUtils = {
         return {
             type: 'htmlelement',
             tag: 'div',
-            /* eslint-disable prefer-template */
             content: '<p>The following variables are available in all scripts.</p>' +
                 '<table class="table table-bordered table-condensed table-striped">' +
                 additional +
@@ -52,8 +51,7 @@ const EditFormUtils = {
                 '<tr><th>_</th><td>An instance of <a href="https://lodash.com/docs/" target="_blank" rel="noopener noreferrer">Lodash</a>.</td></tr>' +
                 '<tr><th>utils</th><td>An instance of the <a href="https://help.form.io/developers/javascript-development/javascript-utilities" target="_blank" rel="noopener noreferrer">FormioUtils</a> object.</td></tr>' +
                 '<tr><th>util</th><td>An alias for "utils".</td></tr>' +
-                '</table><br/>'
-            /* eslint-enable prefer-template */
+                '</table><br/>',
         };
     },
     javaScriptValue(title, property, propertyJSON, weight, exampleHTML, exampleJSON, additionalParams = '', excludeJSONLogic) {
@@ -77,14 +75,14 @@ const EditFormUtils = {
                         editor: 'ace',
                         hideLabel: true,
                         as: 'javascript',
-                        input: true
+                        input: true,
                     },
                     {
                         type: 'htmlelement',
                         tag: 'div',
-                        content: `<p>Enter custom javascript code.</p>${exampleHTML}`
-                    }
-                ]
+                        content: `<p>Enter custom javascript code.</p>${exampleHTML}`,
+                    },
+                ],
             },
             {
                 type: 'panel',
@@ -96,11 +94,9 @@ const EditFormUtils = {
                     {
                         type: 'htmlelement',
                         tag: 'div',
-                        /* eslint-disable prefer-template */
                         content: '<p>Execute custom logic using <a href="http://jsonlogic.com/" target="_blank" rel="noopener noreferrer">JSONLogic</a>.</p>' +
                             '<p>Full <a href="https://lodash.com/docs" target="_blank" rel="noopener noreferrer">Lodash</a> support is provided using an "_" before each operation, such as <code>{"_sum": {var: "data.a"}}</code></p>' +
-                            exampleJSON
-                        /* eslint-enable prefer-template */
+                            exampleJSON,
                     },
                     {
                         type: 'textarea',
@@ -109,10 +105,10 @@ const EditFormUtils = {
                         editor: 'ace',
                         hideLabel: true,
                         as: 'json',
-                        input: true
-                    }
-                ]
-            }
+                        input: true,
+                    },
+                ],
+            },
         ];
         if (excludeJSONLogic) {
             components.splice(2, 1);
@@ -125,8 +121,8 @@ const EditFormUtils = {
             collapsed: true,
             key: `${property}Panel`,
             weight: weight,
-            components
+            components,
         };
-    }
+    },
 };
 export default EditFormUtils;

package/lib/mjs/components/_classes/componentModal/ComponentModal.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { fastCloneDeep } from '../../../utils';
+import { fastCloneDeep } from '../../../utils/index';
 export default class ComponentModal {
     static render(component, data, topLevel) {
         const children = component.renderTemplate('component', data, topLevel);
@@ -97,7 +97,7 @@ export default class ComponentModal {
     setOpenEventListener() {
         this.component.removeEventListener(this.refs.openModal, 'click', this.openModalListener);
         this.component.loadRefs(this.refs.openModalWrapper ?? this.element, {
-            'openModal': 'single',
+            openModal: 'single',
         });
         this.component.addEventListener(this.refs.openModal, 'click', this.openModalListener);
     }

package/lib/mjs/components/_classes/field/Field.js

@@ -16,7 +16,7 @@ export default class Field extends Component {
             return super.render(this.renderTemplate('field', {
                 ...this.getLabelInfo(this.options.condensedMode),
                 labelMarkup: this.renderTemplate('label'),
-                element: element
+                element: element,
             }, 'align'));
         }
         else {
@@ -34,7 +34,13 @@ export default class Field extends Component {
     saveCaretPosition(element, index) {
         if (this.root?.focusedComponent?.path === this.path) {
             try {
-                this.root.currentSelection = { selection: [element.selectionStart, element.selectionEnd], index };
+                this.root.currentSelection = {
+                    selection: [
+                        element.selectionStart,
+                        element.selectionEnd,
+                    ],
+                    index,
+                };
             }
             catch (e) {
                 if (!(e instanceof DOMException)) {

package/lib/mjs/components/_classes/input/Input.js

@@ -1,6 +1,6 @@
 import Multivalue from '../multivalue/Multivalue';
-import { convertStringToHTMLElement } from '../../../utils';
-import Widgets from '../../../widgets';
+import { convertStringToHTMLElement } from '../../../utils/index';
+import Widgets from '../../../widgets/index';
 import _ from 'lodash';
 export default class Input extends Multivalue {
     constructor(component, options, data) {
@@ -10,8 +10,8 @@ export default class Input extends Multivalue {
     static schema(...extend) {
         return Multivalue.schema({
             widget: {
-                type: 'input'
-            }
+                type: 'input',
+            },
         }, ...extend);
     }
     get inputInfo() {
@@ -19,9 +19,11 @@ export default class Input extends Multivalue {
             name: this.options.name,
             type: this.component.inputType || 'text',
             class: 'form-control',
-            lang: this.options.language
+            lang: this.options.language,
         };
-        if (this.options.attachMode === 'builder' || this.options.building || _.get(this.root, 'form.settings.disableAutocomplete')) {
+        if (this.options.attachMode === 'builder' ||
+            this.options.building ||
+            _.get(this.root, 'form.settings.disableAutocomplete')) {
             attr.autocomplete = this.autocompleteDisableAttrName;
         }
         if (this.component.inputMode) {
@@ -45,22 +47,24 @@ export default class Input extends Multivalue {
             type: 'input',
             changeEvent: 'input',
             content: '',
-            attr
+            attr,
         };
     }
     get autocompleteDisableAttrName() {
         return 'off';
     }
     get maskOptions() {
-        return _.map(this.component.inputMasks, mask => {
+        return _.map(this.component.inputMasks, (mask) => {
             return {
                 label: mask.label,
-                value: mask.label
+                value: mask.label,
             };
         });
     }
     get isMultipleMasksField() {
-        return this.component.allowMultipleMasks && !!this.component.inputMasks && !!this.component.inputMasks.length;
+        return (this.component.allowMultipleMasks &&
+            !!this.component.inputMasks &&
+            !!this.component.inputMasks.length);
     }
     getMaskByName(maskName) {
         const inputMask = _.find(this.component.inputMasks, (inputMask) => {
@@ -73,8 +77,7 @@ export default class Input extends Multivalue {
         return super.setInputMask(input, mask, !this.component.placeholder);
     }
     getMaskOptions() {
-        return this.component.inputMasks
-            .map(mask => ({
+        return this.component.inputMasks.map((mask) => ({
             label: mask.label,
             value: mask.label,
         }));
@@ -97,7 +100,7 @@ export default class Input extends Multivalue {
                 // After font-awesome would be updated to v5.x, "clock-o" should be replaced with "clock"
                 className: this.iconClass(this.component.enableDate || this.component.widget.enableDate ? 'calendar' : 'clock-o'),
                 styles: '',
-                content: ''
+                content: '',
             }).trim();
             if (this.component.prefix !== calendarIcon) {
                 // converting string to HTML markup to render correctly DateTime component in portal.form.io
@@ -113,8 +116,7 @@ export default class Input extends Multivalue {
         }
         const info = this.inputInfo;
         info.attr = info.attr || {};
-        info.attr.value = this.getValueAsString(this.formatValue(this.parseValue(value)))
-            .replace(/"/g, '"');
+        info.attr.value = this.getValueAsString(this.formatValue(this.parseValue(value))).replace(/"/g, '"');
         const valueMask = this.component.inputMask;
         const displayMask = this.component.displayMask;
         const hasDifferentDisplayAndSaveFormats = valueMask && displayMask && valueMask !== displayMask;
@@ -134,7 +136,7 @@ export default class Input extends Multivalue {
                 input: info,
                 value: this.formatValue(this.parseValue(value)),
                 hasValueMaskInput: hasDifferentDisplayAndSaveFormats,
-                index
+                index,
             }, this.isHtmlRenderMode() ? 'html' : null);
     }
     setCounter(type, element, count, max) {
@@ -148,13 +150,13 @@ export default class Input extends Multivalue {
             }
             this.setContent(element, this.t(`typeRemaining`, {
                 remaining: remaining,
-                type: type
+                type: type,
             }));
         }
         else {
             this.setContent(element, this.t(`typeCount`, {
                 count: count,
-                type: type
+                type: type,
             }));
         }
     }
@@ -197,7 +199,7 @@ export default class Input extends Multivalue {
             charcount: 'multiple',
             wordcount: 'multiple',
             prefix: 'multiple',
-            suffix: 'multiple'
+            suffix: 'multiple',
         });
         return super.attach(element);
     }
@@ -250,9 +252,11 @@ export default class Input extends Multivalue {
             return null;
         }
         // Get the widget settings.
-        const settings = (typeof this.component.widget === 'string') ? {
-            type: this.component.widget
-        } : this.component.widget;
+        const settings = typeof this.component.widget === 'string'
+            ? {
+                type: this.component.widget,
+            }
+            : this.component.widget;
         if (this.root?.shadowRoot) {
             settings.shadowRoot = this.root?.shadowRoot;
         }
@@ -263,7 +267,7 @@ export default class Input extends Multivalue {
         // Create the widget.
         const widget = new Widgets[settings.type](settings, this.component, this, index);
         widget.on('update', () => this.updateValue(this.getValue(), {
-            modified: true
+            modified: true,
         }, index), true);
         widget.on('redraw', () => this.redraw(), true);
         return widget;

package/lib/mjs/components/_classes/list/ListComponent.form.js

@@ -9,7 +9,7 @@ export default function (...extend) {
     return Components.baseEditForm([
         {
             key: 'data',
-            components: ListEditData
+            components: ListEditData,
         },
     ], ...extend);
 }

package/lib/mjs/components/_classes/list/ListComponent.js

@@ -1,7 +1,7 @@
 import Field from '../field/Field';
 import { Formio } from '../../../Formio';
 import _ from 'lodash';
-import { getItemTemplateKeys } from '../../../utils';
+import { getItemTemplateKeys } from '../../../utils/index';
 export default class ListComponent extends Field {
     static schema(...extend) {
         return Field.schema({
@@ -10,7 +10,7 @@ export default class ListComponent extends Field {
             ignoreCache: false,
             template: '<span>{{ item.label }}</span>',
             validate: {
-                onlyAvailableItems: false
+                onlyAvailableItems: false,
             },
         }, ...extend);
     }
@@ -24,9 +24,7 @@ export default class ListComponent extends Field {
     get dataReady() {
         // If the root submission has been set, and we are still not attached, then assume
         // that our data is ready.
-        if ((this.root &&
-            this.root.submissionSet &&
-            !this.attached) || !this.visible) {
+        if ((this.root && this.root.submissionSet && !this.attached) || !this.visible) {
             return Promise.resolve();
         }
         return this.itemsLoaded;
@@ -46,7 +44,9 @@ export default class ListComponent extends Field {
             const selectData = this.selectData;
             return this.templateKeys.reduce((shouldLoad, key) => {
                 const hasValue = _.has(dataValue, key) ||
-                    (_.isArray(selectData) ? selectData.every((data) => _.has(data, key)) : _.has(selectData, key));
+                    (_.isArray(selectData)
+                        ? selectData.every((data) => _.has(data, key))
+                        : _.has(selectData, key));
                 return shouldLoad || !hasValue;
             }, false);
         }
@@ -55,9 +55,7 @@ export default class ListComponent extends Field {
     }
     getTemplateKeys() {
         const template = this.component.template;
-        this.templateKeys = this.options.readOnly && template
-            ? getItemTemplateKeys(template)
-            : [];
+        this.templateKeys = this.options.readOnly && template ? getItemTemplateKeys(template) : [];
     }
     get requestHeaders() {
         // Create the headers object.
@@ -87,7 +85,7 @@ export default class ListComponent extends Field {
         }
         const options = {
             noeval: true,
-            data: {}
+            data: {},
         };
         const template = this.sanitize(this.component.template
             ? this.interpolate(this.component.template, { item: data }, options)
@@ -135,7 +133,6 @@ export default class ListComponent extends Field {
         });
         console.warn(`Unable to load resources for ${this.key}`);
     }
-    /* eslint-disable max-statements */
     updateItems(searchInput, forceUpdate) {
         if (!this.component.data) {
             console.warn(`Select component ${this.key} does not have data configuration.`);
@@ -163,13 +160,15 @@ export default class ListComponent extends Field {
                     this.itemsLoadedResolve();
                     return;
                 }
-                let resourceUrl = this.options.formio ? this.options.formio.formsUrl : `${Formio.getProjectUrl()}/form`;
-                resourceUrl += (`/${this.component.data.resource}/submission`);
+                let resourceUrl = this.options.formio
+                    ? this.options.formio.formsUrl
+                    : `${Formio.getProjectUrl()}/form`;
+                resourceUrl += `/${this.component.data.resource}/submission`;
                 if (forceUpdate || this.additionalResourcesAvailable || !this.serverCount) {
                     try {
                         this.loadItems(resourceUrl, searchInput, this.requestHeaders);
                     }
-                    catch (err) {
+                    catch (ignoreErr) {
                         console.warn(`Unable to load resources for ${this.key}`);
                     }
                 }
@@ -179,7 +178,10 @@ export default class ListComponent extends Field {
                 break;
             }
             case 'url': {
-                if (!forceUpdate && !this.active && !this.calculatedValue && this.component.type === 'select') {
+                if (!forceUpdate &&
+                    !this.active &&
+                    !this.calculatedValue &&
+                    this.component.type === 'select') {
                     // If we are lazyLoading, wait until activated.
                     this.itemsLoadedResolve();
                     return;
@@ -190,7 +192,9 @@ export default class ListComponent extends Field {
                 let body;
                 if (url.startsWith('/')) {
                     // if URL starts with '/project', we should use base URL to avoid issues with URL formed like <base_url>/<project_name>/project/<project_id>/...
-                    const baseUrl = url.startsWith('/project') ? Formio.getBaseUrl() : Formio.getProjectUrl() || Formio.getBaseUrl();
+                    const baseUrl = url.startsWith('/project')
+                        ? Formio.getBaseUrl()
+                        : Formio.getProjectUrl() || Formio.getBaseUrl();
                     url = baseUrl + url;
                 }
                 if (!this.component.data.method) {
@@ -216,12 +220,17 @@ export default class ListComponent extends Field {
                 if (!window.indexedDB) {
                     window.alert("Your browser doesn't support current version of indexedDB");
                 }
-                if (this.component.indexeddb && this.component.indexeddb.database && this.component.indexeddb.table) {
+                if (this.component.indexeddb &&
+                    this.component.indexeddb.database &&
+                    this.component.indexeddb.table) {
                     const request = window.indexedDB.open(this.component.indexeddb.database);
                     request.onupgradeneeded = (event) => {
                         if (this.component.customOptions) {
                             const db = event.target.result;
-                            const objectStore = db.createObjectStore(this.component.indexeddb.table, { keyPath: 'myKey', autoIncrement: true });
+                            const objectStore = db.createObjectStore(this.component.indexeddb.table, {
+                                keyPath: 'myKey',
+                                autoIncrement: true,
+                            });
                             objectStore.transaction.oncomplete = () => {
                                 const transaction = db.transaction(this.component.indexeddb.table, 'readwrite');
                                 this.component.customOptions.forEach((item) => {

package/lib/mjs/components/_classes/list/editForm/ListComponent.edit.data.js

@@ -18,7 +18,12 @@ export default [
         placeholder: 'Data Source URL',
         tooltip: 'A URL that returns a JSON array to use as the data source.',
         conditional: {
-            json: { '===': [{ var: 'data.dataSrc' }, 'url'] },
+            json: {
+                '===': [
+                    { var: 'data.dataSrc' },
+                    'url',
+                ],
+            },
         },
     },
     {
@@ -43,7 +48,12 @@ export default [
             },
         ],
         conditional: {
-            json: { '===': [{ var: 'data.dataSrc' }, 'url'] },
+            json: {
+                '===': [
+                    { var: 'data.dataSrc' },
+                    'url',
+                ],
+            },
         },
     },
     {
@@ -63,7 +73,7 @@ export default [
                     [
                         'json',
                         'url',
-                        'custom'
+                        'custom',
                     ],
                 ],
             },
@@ -97,7 +107,12 @@ export default [
         label: 'Formio Authenticate',
         tooltip: 'Check this if you would like to use Formio Authentication with the request.',
         conditional: {
-            json: { '===': [{ var: 'data.dataSrc' }, 'url'] },
+            json: {
+                '===': [
+                    { var: 'data.dataSrc' },
+                    'url',
+                ],
+            },
         },
     },
     {
@@ -106,12 +121,24 @@ export default [
         weight: 29,
         key: 'ignoreCache',
         label: 'Disables Storing Request Result in the Cache',
-        tooltip: 'Check it if you don\'t want the requests and its results to be stored in the cache. By default, it is stored and if the Select tries to make the request to the same URL with the same paremetrs, the cached data will be returned. It allows to increase performance, but if the remote source\'s data is changing quite often and you always need to keep it up-to-date, uncheck this option.',
+        tooltip: "Check it if you don't want the requests and its results to be stored in the cache. By default, it is stored and if the Select tries to make the request to the same URL with the same paremetrs, the cached data will be returned. It allows to increase performance, but if the remote source's data is changing quite often and you always need to keep it up-to-date, uncheck this option.",
         conditional: {
-            json: { 'or': [
-                    { '===': [{ var: 'data.dataSrc' }, 'url'] },
-                    { '===': [{ var: 'data.dataSrc' }, 'resource'] },
-                ] },
+            json: {
+                or: [
+                    {
+                        '===': [
+                            { var: 'data.dataSrc' },
+                            'url',
+                        ],
+                    },
+                    {
+                        '===': [
+                            { var: 'data.dataSrc' },
+                            'resource',
+                        ],
+                    },
+                ],
+            },
         },
     },
 ];