@formio/js 5.2.3 → 5.2.4-rc.0

package/lib/mjs/components/editgrid/editForm/EditGrid.edit.validation.js

@@ -10,7 +10,7 @@ export default [
         placeholder: 'Minimum Length',
         type: 'number',
         tooltip: 'The minimum length requirement this field must meet.',
-        input: true
+        input: true,
     },
     {
         weight: 120,
@@ -19,7 +19,7 @@ export default [
         placeholder: 'Maximum Length',
         type: 'number',
         tooltip: 'The maximum length requirement this field must meet.',
-        input: true
+        input: true,
     },
     {
         type: 'checkbox',
@@ -28,5 +28,5 @@ export default [
         key: 'rowDrafts',
         label: 'Enable Row Drafts',
         tooltip: 'Allow save rows even if their data is invalid. Errors will occur when try to submit with invalid rows.',
-    }
+    },
 ];

package/lib/mjs/components/email/Email.js

@@ -7,8 +7,8 @@ export default class EmailComponent extends TextFieldComponent {
             key: 'email',
             inputType: 'email',
             kickbox: {
-                enabled: false
-            }
+                enabled: false,
+            },
         }, ...extend);
     }
     static get builderInfo() {
@@ -18,7 +18,7 @@ export default class EmailComponent extends TextFieldComponent {
             icon: 'at',
             documentation: '/userguide/form-building/advanced-components#email',
             weight: 10,
-            schema: EmailComponent.schema()
+            schema: EmailComponent.schema(),
         };
     }
     init() {
@@ -36,7 +36,7 @@ export default class EmailComponent extends TextFieldComponent {
         value = super.normalizeValue(value, flags);
         if (this.options.server && !!value) {
             if (Array.isArray(value)) {
-                value = value.map(val => val.toLowerCase());
+                value = value.map((val) => val.toLowerCase());
             }
             else {
                 value = value.toLowerCase();

package/lib/mjs/components/email/editForm/Email.edit.display.js

@@ -9,10 +9,10 @@ export default [
     },
     {
         key: 'showWordCount',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'showCharCount',
-        ignore: true
-    }
+        ignore: true,
+    },
 ];

package/lib/mjs/components/email/editForm/Email.edit.validation.js

@@ -1,11 +1,11 @@
 export default [
     {
         key: 'validate.minWords',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'validate.maxWords',
-        ignore: true
+        ignore: true,
     },
     {
         type: 'panel',
@@ -19,8 +19,8 @@ export default [
                 label: 'Enable',
                 tooltip: 'Enable Kickbox validation for this email field.',
                 description: 'Validate this email using the Kickbox email validation service.',
-                key: 'kickbox.enabled'
-            }
-        ]
-    }
+                key: 'kickbox.enabled',
+            },
+        ],
+    },
 ];

package/lib/mjs/components/fieldset/Fieldset.form.js

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

package/lib/mjs/components/fieldset/Fieldset.js

@@ -8,7 +8,7 @@ export default class FieldsetComponent extends NestedComponent {
             legend: '',
             components: [],
             input: false,
-            persistent: false
+            persistent: false,
         }, ...extend);
     }
     static get builderInfo() {
@@ -19,7 +19,7 @@ export default class FieldsetComponent extends NestedComponent {
             documentation: '/userguide/form-building/layout-components#field-set',
             showPreview: false,
             weight: 20,
-            schema: FieldsetComponent.schema()
+            schema: FieldsetComponent.schema(),
         };
     }
     static savedValueTypes() {

package/lib/mjs/components/fieldset/editForm/Fieldset.edit.display.js

@@ -1,34 +1,34 @@
 export default [
     {
         key: 'labelPosition',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'placeholder',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'description',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'hideLabel',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'autofocus',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'tableView',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'label',
         hidden: true,
         calculateValue(context) {
             return context.data.legend;
-        }
+        },
     },
     {
         weight: 1,
@@ -37,6 +37,6 @@ export default [
         key: 'legend',
         label: 'Legend',
         placeholder: 'Legend',
-        tooltip: 'The legend for this Fieldset.'
+        tooltip: 'The legend for this Fieldset.',
     },
 ];

package/lib/mjs/components/file/File.form.js

@@ -12,21 +12,21 @@ export default function (...extend) {
     return Components.baseEditForm([
         {
             key: 'display',
-            components: FileEditDisplay
+            components: FileEditDisplay,
         },
         {
             key: 'data',
-            components: FileEditData
+            components: FileEditData,
         },
         {
             label: 'File',
             key: 'file',
             weight: 5,
-            components: FileEditFile
+            components: FileEditFile,
         },
         {
             key: 'validation',
-            components: FileEditValidation
+            components: FileEditValidation,
         },
     ], ...extend);
 }

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

@@ -11,11 +11,11 @@ let htmlCanvasElement;
 if (typeof window !== 'undefined') {
     htmlCanvasElement = window.HTMLCanvasElement;
 }
-else if (typeof global !== 'undefined') {
-    htmlCanvasElement = global.HTMLCanvasElement;
+else if (typeof globalThis !== 'undefined') {
+    htmlCanvasElement = globalThis.HTMLCanvasElement;
 }
 if (htmlCanvasElement && !htmlCanvasElement.prototype.toBlob) {
-    Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
+    Object.defineProperty(htmlCanvasElement.prototype, 'toBlob', {
         value: function (callback, type, quality) {
             var canvas = this;
             setTimeout(function () {
@@ -23,9 +23,11 @@ if (htmlCanvasElement && !htmlCanvasElement.prototype.toBlob) {
                 for (var i = 0; i < len; i++) {
                     arr[i] = binStr.charCodeAt(i);
                 }
-                callback(new Blob([arr], { type: type || 'image/png' }));
+                callback(new Blob([
+                    arr,
+                ], { type: type || 'image/png' }));
             });
-        }
+        },
     });
 }
 const createRandomString = () => Math.random().toString(36).substring(2, 15);
@@ -60,19 +62,26 @@ export default class FileComponent extends Field {
     static get conditionOperatorsSettings() {
         return {
             ...super.conditionOperatorsSettings,
-            operators: ['isEmpty', 'isNotEmpty'],
+            operators: [
+                'isEmpty',
+                'isNotEmpty',
+            ],
         };
     }
     static savedValueTypes(schema) {
         schema = schema || {};
-        return getComponentSavedTypes(schema) || [componentValueTypes.object];
+        return (getComponentSavedTypes(schema) || [
+            componentValueTypes.object,
+        ]);
     }
     init() {
         super.init();
         webViewCamera = navigator.camera || Camera;
-        const fileReaderSupported = (typeof FileReader !== 'undefined');
+        const fileReaderSupported = typeof FileReader !== 'undefined';
         const formDataSupported = typeof window !== 'undefined' ? Boolean(window.FormData) : false;
-        const progressSupported = (typeof window !== 'undefined' && window.XMLHttpRequest) ? ('upload' in new XMLHttpRequest) : false;
+        const progressSupported = typeof window !== 'undefined' && window.XMLHttpRequest
+            ? 'upload' in new XMLHttpRequest()
+            : false;
         this.support = {
             filereader: fileReaderSupported,
             formdata: formDataSupported,
@@ -123,10 +132,10 @@ export default class FileComponent extends Field {
         return Array.isArray(value) ? value : [];
     }
     get hasTypes() {
-        return this.component.fileTypes &&
+        return (this.component.fileTypes &&
             Array.isArray(this.component.fileTypes) &&
             this.component.fileTypes.length !== 0 &&
-            (this.component.fileTypes[0].label !== '' || this.component.fileTypes[0].value !== '');
+            (this.component.fileTypes[0].label !== '' || this.component.fileTypes[0].value !== ''));
     }
     get fileDropHidden() {
         return this._fileBrowseHidden;
@@ -232,10 +241,11 @@ export default class FileComponent extends Field {
             this.redraw();
             return;
         }
-        this.getFrame(videoPlayer)
-            .then((frame) => {
+        this.getFrame(videoPlayer).then((frame) => {
             frame.name = `photo-${Date.now()}.png`;
-            this.handleFilesToUpload([frame]);
+            this.handleFilesToUpload([
+                frame,
+            ]);
             this.cameraMode = false;
             this.redraw();
         });
@@ -369,8 +379,7 @@ export default class FileComponent extends Field {
         if (this.refs.fileBrowse) {
             this.addEventListener(this.refs.fileBrowse, 'click', (event) => {
                 event.preventDefault();
-                this.browseFiles(this.browseOptions)
-                    .then((files) => {
+                this.browseFiles(this.browseOptions).then((files) => {
                     this.handleFilesToUpload(files);
                 });
             });
@@ -415,9 +424,13 @@ export default class FileComponent extends Field {
                         fileEntry.file((file) => {
                             const reader = new FileReader();
                             reader.onloadend = (evt) => {
-                                const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });
+                                const blob = new Blob([
+                                    new Uint8Array(evt.target.result),
+                                ], { type: file.type });
                                 blob.name = file.name;
-                                this.handleFilesToUpload([blob]);
+                                this.handleFilesToUpload([
+                                    blob,
+                                ]);
                             };
                             reader.readAsArrayBuffer(file);
                         });
@@ -437,9 +450,13 @@ export default class FileComponent extends Field {
                         fileEntry.file((file) => {
                             const reader = new FileReader();
                             reader.onloadend = (evt) => {
-                                const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });
+                                const blob = new Blob([
+                                    new Uint8Array(evt.target.result),
+                                ], { type: file.type });
                                 blob.name = file.name;
-                                this.handleFilesToUpload([blob]);
+                                this.handleFilesToUpload([
+                                    blob,
+                                ]);
                             };
                             reader.readAsArrayBuffer(file);
                         });
@@ -472,7 +489,8 @@ export default class FileComponent extends Field {
             if (!this.dataValue[index]) {
                 return;
             }
-            this.dataValue[index].fileType = this.dataValue[index].fileType || this.component.fileTypes[0].label;
+            this.dataValue[index].fileType =
+                this.dataValue[index].fileType || this.component.fileTypes[0].label;
             this.addEventListener(fileType, 'change', (event) => {
                 event.preventDefault();
                 const fileType = this.component.fileTypes.find((typeObj) => typeObj.value === event.target.value);
@@ -494,9 +512,11 @@ export default class FileComponent extends Field {
                 loadingImages.push(this.loadImage(this.dataValue[index]).then((url) => (image.src = url)));
             });
             if (loadingImages.length) {
-                Promise.all(loadingImages).then(() => {
+                Promise.all(loadingImages)
+                    .then(() => {
                     this.filesReadyResolve();
-                }).catch(() => this.filesReadyReject());
+                })
+                    .catch(() => this.filesReadyReject());
             }
             else {
                 this.filesReadyResolve();
@@ -504,12 +524,9 @@ export default class FileComponent extends Field {
         }
         return superAttach;
     }
-    /* eslint-disable max-len */
     fileSize(a, b, c, d, e) {
-        return `${(b = Math, c = b.log, d = 1024, e = c(a) / c(d) | 0, a / b.pow(d, e)).toFixed(2)} ${e ? `${'kMGTPEZY'[--e]}B` : 'Bytes'}`;
+        return `${((b = Math), (c = b.log), (d = 1024), (e = (c(a) / c(d)) | 0), a / b.pow(d, e)).toFixed(2)} ${e ? `${'kMGTPEZY'[--e]}B` : 'Bytes'}`;
     }
-    /* eslint-enable max-len */
-    /* eslint-disable max-depth */
     globStringToRegex(str) {
         str = str.replace(/\s/g, '');
         let regexp = '', excludes = [];
@@ -547,7 +564,6 @@ export default class FileComponent extends Field {
         }
         return { regexp, excludes };
     }
-    /* eslint-enable max-depth */
     translateScalars(str) {
         if (typeof str === 'string') {
             if (str.search(/kb/i) === str.length - 2) {
@@ -582,13 +598,15 @@ export default class FileComponent extends Field {
         let valid = true;
         if (pattern.regexp && pattern.regexp.length) {
             const regexp = new RegExp(pattern.regexp, 'i');
-            valid = (!_.isNil(file.type) && regexp.test(file.type)) ||
-                (!_.isNil(file.name) && regexp.test(file.name));
+            valid =
+                (!_.isNil(file.type) && regexp.test(file.type)) ||
+                    (!_.isNil(file.name) && regexp.test(file.name));
         }
         valid = pattern.excludes.reduce((result, excludePattern) => {
             const exclude = new RegExp(excludePattern, 'i');
-            return result && (_.isNil(file.type) || exclude.test(file.type)) &&
-                (_.isNil(file.name) || exclude.test(file.name));
+            return (result &&
+                (_.isNil(file.type) || exclude.test(file.type)) &&
+                (_.isNil(file.name) || exclude.test(file.name)));
         }, valid);
         return valid;
     }
@@ -599,7 +617,7 @@ export default class FileComponent extends Field {
         return file.size - 0.1 <= this.translateScalars(val);
     }
     abortRequest(id) {
-        const abortUpload = this.abortUploads.find(abortUpload => abortUpload.id === id);
+        const abortUpload = this.abortUploads.find((abortUpload) => abortUpload.id === id);
         if (abortUpload) {
             abortUpload.abort();
         }
@@ -609,7 +627,7 @@ export default class FileComponent extends Field {
         if (!target.id) {
             return;
         }
-        const [action, id] = target.id.split('-');
+        const [action, id,] = target.id.split('-');
         if (!action || !id || !this.actions[action]) {
             return;
         }
@@ -619,7 +637,9 @@ export default class FileComponent extends Field {
         return uniqueName(file.name, this.component.fileNameTemplate, this.evalContext());
     }
     getInitFileToSync(file) {
-        const escapedFileName = file.name ? file.name.replaceAll('<', '&lt;').replaceAll('>', '&gt;') : file.name;
+        const escapedFileName = file.name
+            ? file.name.replaceAll('<', '&lt;').replaceAll('>', '&gt;')
+            : file.name;
         return {
             id: createRandomString(),
             // Get a unique name for this file to keep file collisions from occurring.
@@ -655,9 +675,8 @@ export default class FileComponent extends Field {
     }
     validateFileName(file) {
         // Check if file with the same name is being uploaded
-        const fileWithSameNameUploading = this.filesToSync.filesToUpload
-            .some(fileToSync => fileToSync.file?.name === file.name);
-        const fileWithSameNameUploaded = _.some(this.dataValue, fileStatus => fileStatus.originalName === file.name);
+        const fileWithSameNameUploading = this.filesToSync.filesToUpload.some((fileToSync) => fileToSync.file?.name === file.name);
+        const fileWithSameNameUploaded = _.some(this.dataValue, (fileStatus) => fileStatus.originalName === file.name);
         return fileWithSameNameUploaded || fileWithSameNameUploading
             ? {
                 status: 'error',
@@ -721,14 +740,22 @@ export default class FileComponent extends Field {
         //Iterate through form components to find group resource if one exists
         this.root.everyComponent((element) => {
             if (element.component?.submissionAccess || element.component?.defaultPermission) {
-                groupPermissions = !element.component.submissionAccess ? [
-                    {
-                        type: element.component.defaultPermission,
-                        roles: [],
-                    },
-                ] : element.component.submissionAccess;
+                groupPermissions = !element.component.submissionAccess
+                    ? [
+                        {
+                            type: element.component.defaultPermission,
+                            roles: [],
+                        },
+                    ]
+                    : element.component.submissionAccess;
                 groupPermissions.forEach((permission) => {
-                    groupKey = ['admin', 'write', 'create'].includes(permission.type) ? element.component.key : null;
+                    groupKey = [
+                        'admin',
+                        'write',
+                        'create',
+                    ].includes(permission.type)
+                        ? element.component.key
+                        : null;
                 });
             }
         });
@@ -744,7 +771,7 @@ export default class FileComponent extends Field {
                 const fileProcessorHandler = fileProcessor(this.fileService, this.root.options.fileProcessor);
                 processedFile = await fileProcessorHandler(file, this.component.properties);
             }
-            catch (err) {
+            catch (ignoreErr) {
                 this.fileDropHidden = false;
                 return {
                     status: 'error',
@@ -800,7 +827,9 @@ export default class FileComponent extends Field {
         }
         if (this.component.storage && files && files.length) {
             this.fileDropHidden = true;
-            return Promise.all([...files].map(async (file) => {
+            return Promise.all([
+                ...files,
+            ].map(async (file) => {
                 await this.prepareFileToUpload(file);
                 this.redraw();
             }));
@@ -823,7 +852,7 @@ export default class FileComponent extends Field {
                 ? this.t('Ready to be removed from storage')
                 : this.t('Preparing file to remove'),
         });
-        const index = this.dataValue.findIndex(file => file.name === fileInfo.name);
+        const index = this.dataValue.findIndex((file) => file.name === fileInfo.name);
         this.splice(index);
         this.redraw();
     }
@@ -835,7 +864,14 @@ export default class FileComponent extends Field {
     }
     async deleteFile(fileInfo) {
         const { options = {} } = this.component;
-        if (fileInfo && (['url', 'indexeddb', 's3', 'azure', 'googledrive'].includes(this.component.storage))) {
+        if (fileInfo &&
+            [
+                'url',
+                'indexeddb',
+                's3',
+                'azure',
+                'googledrive',
+            ].includes(this.component.storage)) {
             const { fileService } = this;
             if (fileService && typeof fileService.deleteFile === 'function') {
                 return await fileService.deleteFile(fileInfo, options);
@@ -872,14 +908,14 @@ export default class FileComponent extends Field {
         }));
     }
     updateProgress(fileInfo, progressEvent) {
-        fileInfo.progress = parseInt(100.0 * progressEvent.loaded / progressEvent.total);
+        fileInfo.progress = parseInt((100.0 * progressEvent.loaded) / progressEvent.total);
         if (fileInfo.status !== 'progress') {
             fileInfo.status = 'progress';
             delete fileInfo.message;
             this.redraw();
         }
         else {
-            const progress = Array.prototype.find.call(this.refs.progress, progressElement => progressElement.id === fileInfo.id);
+            const progress = Array.prototype.find.call(this.refs.progress, (progressElement) => progressElement.id === fileInfo.id);
             progress.innerHTML = `<span class="visually-hidden">${fileInfo.progress}% ${this.t('Complete')}</span>`;
             progress.style.width = `${fileInfo.progress}%`;
             progress.ariaValueNow = fileInfo.progress.toString();
@@ -887,20 +923,22 @@ export default class FileComponent extends Field {
     }
     getMultipartOptions(fileToSync) {
         let count = 0;
-        return this.component.useMultipartUpload && this.component.multipart ? {
-            ...this.component.multipart,
-            progressCallback: (total) => {
-                count++;
-                fileToSync.status = 'progress';
-                fileToSync.progress = parseInt(100 * count / total);
-                delete fileToSync.message;
-                this.redraw();
-            },
-            changeMessage: (message) => {
-                fileToSync.message = message;
-                this.redraw();
-            },
-        } : false;
+        return this.component.useMultipartUpload && this.component.multipart
+            ? {
+                ...this.component.multipart,
+                progressCallback: (total) => {
+                    count++;
+                    fileToSync.status = 'progress';
+                    fileToSync.progress = parseInt((100 * count) / total);
+                    delete fileToSync.message;
+                    this.redraw();
+                },
+                changeMessage: (message) => {
+                    fileToSync.message = message;
+                    this.redraw();
+                },
+            }
+            : false;
     }
     async uploadFile(fileToSync) {
         return await this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, 
@@ -937,11 +975,12 @@ export default class FileComponent extends Field {
             catch (response) {
                 fileToSync.status = 'error';
                 delete fileToSync.progress;
-                fileToSync.message = typeof response === 'string'
-                    ? response
-                    : response.type === 'abort'
-                        ? this.t('Request was aborted')
-                        : response.toString();
+                fileToSync.message =
+                    typeof response === 'string'
+                        ? response
+                        : response.type === 'abort'
+                            ? this.t('Request was aborted')
+                            : response.toString();
                 this.emit('fileUploadingEnd');
                 this.emit('fileUploadError', {
                     fileToSync,
@@ -963,24 +1002,29 @@ export default class FileComponent extends Field {
         this.fileDropHidden = true;
         this.redraw();
         try {
-            const [filesToDelete = [], filesToUpload = []] = await Promise.all([this.delete(), this.upload()]);
+            const [filesToDelete = [], filesToUpload = [],] = await Promise.all([
+                this.delete(),
+                this.upload(),
+            ]);
             this.filesToSync.filesToDelete = filesToDelete
-                .filter(file => file.fileToSync?.status === 'error')
-                .map(file => file.fileToSync);
+                .filter((file) => file.fileToSync?.status === 'error')
+                .map((file) => file.fileToSync);
             this.filesToSync.filesToUpload = filesToUpload
-                .filter(file => file.fileToSync?.status === 'error')
-                .map(file => file.fileToSync);
+                .filter((file) => file.fileToSync?.status === 'error')
+                .map((file) => file.fileToSync);
             if (!this.hasValue()) {
                 this.dataValue = [];
             }
             const data = filesToUpload
-                .filter(file => file.fileToSync?.status === 'success')
-                .map(file => file.fileInfo);
+                .filter((file) => file.fileToSync?.status === 'success')
+                .map((file) => file.fileInfo);
             this.dataValue.push(...data);
-            this.triggerChange();
+            this.triggerChange({
+                modified: true,
+            });
             return Promise.resolve();
         }
-        catch (err) {
+        catch (ignoreErr) {
             return Promise.reject();
         }
         finally {
@@ -999,9 +1043,14 @@ export default class FileComponent extends Field {
         if (this.component.privateDownload) {
             fileInfo.private = true;
         }
-        fileService.downloadFile(fileInfo, options).then((file) => {
+        fileService
+            .downloadFile(fileInfo, options)
+            .then((file) => {
             if (file) {
-                if (['base64', 'indexeddb'].includes(file.storage)) {
+                if ([
+                    'base64',
+                    'indexeddb',
+                ].includes(file.storage)) {
                     download(file.url, file.originalName || file.name, file.type);
                 }
                 else {
@@ -1029,9 +1078,7 @@ export default class FileComponent extends Field {
                 return Promise.resolve();
             }
             await this.syncFiles();
-            return this.shouldSyncFiles
-                ? Promise.reject('Synchronization is failed')
-                : Promise.resolve();
+            return this.shouldSyncFiles ? Promise.reject('Synchronization is failed') : Promise.resolve();
         }
         catch (error) {
             return Promise.reject(error.message);