@formio/js 5.1.0-dev.6056.ba6432d → 5.1.0-dev.6059.845a6e3

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

@@ -2,7 +2,7 @@
 import _ from 'lodash';
 import { Utils } from '@formio/core/utils';
 const { getComponentPaths } = Utils;
-import { componentValueTypes, isLayoutComponent } from '../../../utils/utils';
+import { componentValueTypes } from '../../../utils/utils';
 import Component from '../component/Component';
 import NestedDataComponent from '../nesteddata/NestedDataComponent';
 export default class NestedArrayComponent extends NestedDataComponent {
@@ -18,7 +18,7 @@ export default class NestedArrayComponent extends NestedDataComponent {
         return this.iteratableRows[component.rowIndex].data;
     }
     get iteratableRows() {
-        throw new Error(this.t('iteratableRowsError'));
+        throw new Error('Getter #iteratableRows() is not implemented');
     }
     get rowIndex() {
         return this._rowIndex;
@@ -63,7 +63,7 @@ export default class NestedArrayComponent extends NestedDataComponent {
         return this.validateComponents([this.component], data, flags);
     }
     checkRow(...args) {
-        console.log(this.t('checkRowDeprecation'));
+        console.log('Deprecation Warning: checkRow method has been replaced with processRow');
         return this.processRow.call(this, ...args);
     }
     processRow(method, data, opts, row, components, silentCheck) {
@@ -110,60 +110,38 @@ export default class NestedArrayComponent extends NestedDataComponent {
             }
         });
     }
-    _getEmailTableHeader(options) {
-        let row = '';
-        const getHeaderCell = (component) => {
-            if (!component.isInputComponent || !component.visible || component.skipInEmail) {
-                return '';
-            }
-            const label = component.label || component.key;
-            return `<th style="padding: 5px 10px;">${this.t(label, { _userInput: true })}</th>`;
-        };
-        const components = this.getComponents(0);
-        for (const component of components) {
-            if (component.isInputComponent) {
-                row += getHeaderCell(component);
-            }
-            else if (isLayoutComponent(component) && typeof component.everyComponent === 'function') {
-                component.everyComponent((comp) => {
-                    row += getHeaderCell(comp);
-                }, options);
-            }
-        }
-        return `<thead><tr>${row}</tr></thead>`;
-    }
-    _getEmailTableBody(options) {
-        const getBodyCell = (component) => {
-            if (!component.isInputComponent || !component.visible || component.skipInEmail) {
-                return '';
-            }
-            return `<td style="padding: 5px 10px;">${component.getView(component.dataValue, options)}</td>`;
-        };
-        const rows = [];
-        for (const { components } of this.iteratableRows) {
-            let row = '';
-            for (const component of components) {
-                if (component.isInputComponent) {
-                    row += getBodyCell(component);
-                }
-                else if (isLayoutComponent(component) && typeof component.everyComponent === 'function') {
-                    component.everyComponent((comp) => {
-                        row += getBodyCell(comp);
-                    }, options);
-                }
-            }
-            rows.push(`<tr>${row}</tr>`);
-        }
-        return `<tbody>${rows.join('')}</tbody>`;
-    }
     getValueAsString(value, options) {
         if (options?.email) {
-            return `
+            let result = (`
         <table border="1" style="width:100%">
-          ${this._getEmailTableHeader(options)}
-          ${this._getEmailTableBody(options)}
+          <thead>
+            <tr>
+      `);
+            this.component.components?.forEach((component) => {
+                const label = component.label || component.key;
+                result += `<th style="padding: 5px 10px;">${label}</th>`;
+            });
+            result += (`
+          </tr>
+        </thead>
+        <tbody>
+      `);
+            this.iteratableRows.forEach(({ components }) => {
+                result += '<tr>';
+                _.each(components, (component) => {
+                    result += '<td style="padding:5px 10px;">';
+                    if (component.isInputComponent && component.visible && !component.skipInEmail) {
+                        result += component.getView(component.dataValue, options);
+                    }
+                    result += '</td>';
+                });
+                result += '</tr>';
+            });
+            result += (`
+          </tbody>
         </table>
-      `;
+      `);
+            return result;
         }
         if (!value || !value.length) {
             return '';

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

@@ -317,7 +317,7 @@ export default class AddressComponent extends ContainerComponent {
         return !this.isMultiple && (this.builderMode || this.manualModeEnabled);
     }
     get addAnother() {
-        return this.t(this.component.addAnother || 'addAnother');
+        return this.t(this.component.addAnother || 'Add Another');
     }
     renderElement(value) {
         return this.renderTemplate(this.templateName, {

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

@@ -336,17 +336,17 @@ export default class ButtonComponent extends Field {
                 break;
             case 'oauth':
                 if (this.root === this) {
-                    console.warn(this.t('noOAuthBtn'));
+                    console.warn('You must add the OAuth button to a form for it to function properly');
                     return;
                 }
                 // Display Alert if OAuth config is missing
                 if (!this.oauthConfig) {
-                    this.root.setAlert('danger', this.t('noOAuthConfiguration'));
+                    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', `${this.t('oAuthErrorsTitle')} ${this.t(this.oauthConfig.error)}`);
+                    this.root.setAlert('danger', `The Following Error Has Occured ${this.oauthConfig.error}`);
                     break;
                 }
                 this.openOauth(this.oauthConfig);
@@ -355,7 +355,7 @@ export default class ButtonComponent extends Field {
     }
     openOauth(settings) {
         if (!this.root.formio) {
-            console.warn(this.t('noOAuthFormUrl'));
+            console.warn('You must attach a Form API url to your form in order to use OAuth buttons.');
             return;
         }
         /*eslint-disable camelcase */
@@ -403,7 +403,7 @@ export default class ButtonComponent extends Field {
                     }
                     // TODO: check for error response here
                     if (settings.state !== params.state) {
-                        this.root.setAlert('danger', this.t('oAuthStateError'));
+                        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).
@@ -436,7 +436,7 @@ export default class ButtonComponent extends Field {
             }
             catch (error) {
                 if (error.name !== 'SecurityError' && (error.name !== 'Error' || error.message !== 'Permission denied')) {
-                    this.root.setAlert('danger', this.t(`${error.message || error}`));
+                    this.root.setAlert('danger', error.message || error);
                 }
             }
             if (!popup || popup.closed || popup.closed === undefined) {

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.js

@@ -116,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;
@@ -187,7 +187,7 @@ export default class CheckBoxComponent extends Field {
         if (_.isUndefined(value) && this.inDataTable) {
             return '';
         }
-        return this.t(hasValue ? 'yes' : 'no');
+        return this.t(hasValue ? 'Yes' : 'No');
     }
     updateValue(value, flags) {
         // If this is a radio and is alredy checked, uncheck it.

package/lib/mjs/components/content/editForm/Content.edit.display.js

@@ -3,14 +3,6 @@ export default [
         key: 'labelPosition',
         ignore: true
     },
-    {
-        key: 'labelWidth',
-        ignore: true
-    },
-    {
-        key: 'labelMargin',
-        ignore: true
-    },
     {
         key: 'placeholder',
         ignore: true

package/lib/mjs/components/currency/editForm/Currency.edit.display.js

@@ -7,18 +7,6 @@ export default [
         key: 'allowMultipleMasks',
         ignore: true
     },
-    {
-        key: 'inputMasks',
-        ignore: true
-    },
-    {
-        key: 'widget.type',
-        ignore: true
-    },
-    {
-        key: 'widget',
-        ignore: true
-    },
     {
         key: 'showWordCount',
         ignore: true

package/lib/mjs/components/datagrid/DataGrid.d.ts

@@ -12,7 +12,6 @@ export default class DataGridComponent extends NestedArrayComponent {
     tabIndex: number;
     rows: any[] | undefined;
     columns: any[] | undefined;
-    dragulaReady: Promise<any> | undefined;
     visibleColumns: {} | undefined;
     set dataValue(value: any[]);
     get dataValue(): any[];
@@ -71,7 +70,6 @@ export default class DataGridComponent extends NestedArrayComponent {
      */
     reorderValues(valuesArr: any, oldPosition: number, newPosition: number, movedBelow: boolean | any): void;
     onReorder(element: any, _target: any, _source: any, sibling: any): void;
-    onCloned(el: any, original: any): void;
     focusOnNewRowElement(row: any): void;
     addRow(): void;
     updateComponentsRowIndex(components: any, rowIndex: any): void;

package/lib/mjs/components/datagrid/DataGrid.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';
 import { fastCloneDeep, getFocusableElements } from '../../utils/utils';
+import dragula from 'dragula';
 export default class DataGridComponent extends NestedArrayComponent {
     static schema(...extend) {
         return NestedArrayComponent.schema({
@@ -37,9 +38,6 @@ export default class DataGridComponent extends NestedArrayComponent {
         if (this.initRows || !_.isEqual(this.dataValue, this.emptyValue)) {
             this.createRows(true);
         }
-        if (this.allowReorder) {
-            this.dragulaReady = this.getDragula();
-        }
         this.visibleColumns = {};
         this.prevHasAddButton = this.hasAddButton();
         this.checkColumns();
@@ -272,25 +270,31 @@ export default class DataGridComponent extends NestedArrayComponent {
             this.refs[`${this.datagridKey}-row`].forEach((row, index) => {
                 row.dragInfo = { index };
             });
-            this.dragulaReady.then((dragula) => {
-                // The drop event may call redraw twice which calls attach twice and because this block of code is asynchronous
-                // BOTH redraws may be called before this block of code runs (which causes this block of code to run twice sequentially).
-                // This causes two dragula() calls on the same container which breaks dragula. To fix this the return value must
-                // be saved in this.dragula and have its container contents reset if it exists
-                if (this.dragula && this.dragula.containers) {
-                    this.dragula.containers = [];
+            this.dragula = dragula([this.refs[`${this.datagridKey}-tbody`]], {
+                moves: (_draggedElement, _oldParent, clickedElement) => {
+                    const clickedElementKey = clickedElement.getAttribute('data-key');
+                    const oldParentKey = _oldParent.getAttribute('data-key');
+                    //Check if the clicked button belongs to that container, if false, it belongs to the nested container
+                    if (oldParentKey === clickedElementKey) {
+                        return clickedElement.classList.contains('formio-drag-button');
+                    }
                 }
-                this.dragula = dragula([this.refs[`${this.datagridKey}-tbody`]], {
-                    moves: (_draggedElement, _oldParent, clickedElement) => {
-                        const clickedElementKey = clickedElement.getAttribute('data-key');
-                        const oldParentKey = _oldParent.getAttribute('data-key');
-                        //Check if the clicked button belongs to that container, if false, it belongs to the nested container
-                        if (oldParentKey === clickedElementKey) {
-                            return clickedElement.classList.contains('formio-drag-button');
+            }).on('drop', this.onReorder.bind(this));
+            this.dragula.on('cloned', (el, original) => {
+                if (el && el.children && original && original.children) {
+                    _.each(original.children, (child, index) => {
+                        const styles = getComputedStyle(child, null);
+                        if (styles.cssText !== '') {
+                            el.children[index].style.cssText = styles.cssText;
                         }
-                    }
-                }).on('drop', this.onReorder.bind(this))
-                    .on('cloned', this.onCloned.bind(this));
+                        else {
+                            const cssText = Object.values(styles).reduce((css, propertyName) => {
+                                return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;
+                            }, '');
+                            el.children[index].style.cssText = cssText;
+                        }
+                    });
+                }
             });
         }
         this.refs[`${this.datagridKey}-addRow`].forEach((addButton) => {
@@ -339,7 +343,7 @@ export default class DataGridComponent extends NestedArrayComponent {
     }
     onReorder(element, _target, _source, sibling) {
         if (!element.dragInfo || (sibling && !sibling.dragInfo)) {
-            console.warn(this.t('noDragInfoError'));
+            console.warn('There is no Drag Info available for either dragged or sibling element');
             return;
         }
         const oldPosition = element.dragInfo.index;
@@ -350,29 +354,10 @@ export default class DataGridComponent extends NestedArrayComponent {
         this.reorderValues(dataValue, oldPosition, newPosition, movedBelow);
         //reorder select data
         this.reorderValues(_.get(this.root, `submission.metadata.selectData.${this.path}`, []), oldPosition, newPosition, movedBelow);
-        // When components are reordered we need to set the dataGrid and form pristine properties to false
-        this.root.pristine = false;
-        this.pristine = false;
         //need to re-build rows to re-calculate indexes and other indexed fields for component instance (like rows for ex.)
         this.setValue(dataValue, { isReordered: true });
         this.rebuild();
     }
-    onCloned(el, original) {
-        if (el && el.children && original && original.children) {
-            _.each(original.children, (child, index) => {
-                const styles = getComputedStyle(child, null);
-                if (styles.cssText !== '') {
-                    el.children[index].style.cssText = styles.cssText;
-                }
-                else {
-                    const cssText = Object.values(styles).reduce((css, propertyName) => {
-                        return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;
-                    }, '');
-                    el.children[index].style.cssText = cssText;
-                }
-            });
-        }
-    }
     focusOnNewRowElement(row) {
         Object.keys(row).find((key) => {
             const element = row[key].element;
@@ -430,7 +415,7 @@ export default class DataGridComponent extends NestedArrayComponent {
     }
     removeRow(index) {
         const makeEmpty = index === 0 && this.rows.length === 1;
-        const flags = { isReordered: !makeEmpty, resetValue: makeEmpty, modified: true };
+        const flags = { isReordered: !makeEmpty, resetValue: makeEmpty };
         this.splice(index, flags);
         this.emit('dataGridDeleteRow', { index });
         const [row] = this.rows.splice(index, 1);

package/lib/mjs/components/day/Day.js

@@ -53,13 +53,11 @@ export default class DayComponent extends Field {
     // Empty value used before 9.3.x
     static oldEmptyValue = '00/00/0000';
     constructor(component, options, data) {
-        if (!options.inFormBuilder && !options.building) {
-            if (component.maxDate && component.maxDate.indexOf('moment(') === -1) {
-                component.maxDate = moment(component.maxDate, 'YYYY-MM-DD').toISOString();
-            }
-            if (component.minDate && component.minDate.indexOf('moment(') === -1) {
-                component.minDate = moment(component.minDate, 'YYYY-MM-DD').toISOString();
-            }
+        if (component.maxDate && component.maxDate.indexOf('moment(') === -1) {
+            component.maxDate = moment(component.maxDate, 'YYYY-MM-DD').toISOString();
+        }
+        if (component.minDate && component.minDate.indexOf('moment(') === -1) {
+            component.minDate = moment(component.minDate, 'YYYY-MM-DD').toISOString();
         }
         super(component, options, data);
     }
@@ -176,7 +174,7 @@ export default class DayComponent extends Field {
         this._months = [
             {
                 value: '',
-                label: _.get(this.component, 'fields.month.placeholder') || (this.hideInputLabels ? this.t('month') : '')
+                label: _.get(this.component, 'fields.month.placeholder') || (this.hideInputLabels ? this.t('Month') : '')
             },
             { value: 1, label: 'January' },
             { value: 2, label: 'February' },
@@ -270,7 +268,7 @@ export default class DayComponent extends Field {
                 this.saveCaretPosition(element, name);
             }
             catch (err) {
-                console.warn(this.t('caretPositionSavingError'), err);
+                console.warn('An error occurred while trying to save caret position', err);
             }
             this.updateValue(null, {
                 modified: true,

package/lib/mjs/components/day/editForm/Day.edit.display.js

@@ -3,14 +3,6 @@ export default [
         key: 'labelPosition',
         ignore: true
     },
-    {
-        key: 'labelWidth',
-        ignore: true
-    },
-    {
-        key: 'labelMargin',
-        ignore: true
-    },
     {
         weight: 15,
         type: 'checkbox',

package/lib/mjs/components/editgrid/EditGrid.d.ts

@@ -43,7 +43,7 @@ export default class EditGridComponent extends NestedArrayComponent {
     get defaultValue(): any[];
     hasRemoveButtons(): boolean;
     editRows: any;
-    checkRowVariableTypeComponents(editRow: any, rowIndex: any): boolean;
+    checkRowVariableTypeComponents(editRow: any, rowIndex: any): void;
     setVariableTypeComponents(): void;
     variableTypeComponentsIndexes: any[] | undefined;
     isOpen(editRow: any): boolean;

package/lib/mjs/components/editgrid/EditGrid.js

@@ -115,10 +115,10 @@ export default class EditGridComponent extends NestedArrayComponent {
     }
     get defaultDialogTemplate() {
         return `
-    <h3 ${this._referenceAttributeName}="dialogHeader">${this.t('wantToClearData')}</h3>
+    <h3 ${this._referenceAttributeName}="dialogHeader">${this.t('Do you want to clear data?')}</h3>
     <div style="display:flex; justify-content: flex-end;">
-      <button ${this._referenceAttributeName}="dialogCancelButton" class="btn btn-secondary" aria-label="${this.t('cancel')}">${this.t('cancel')}</button>
-      <button ${this._referenceAttributeName}="dialogYesButton" class="btn btn-danger" aria-label="${this.t('yesDelete')}">${this.t('yesDelete')}</button>
+      <button ${this._referenceAttributeName}="dialogCancelButton" class="btn btn-secondary" aria-label="${this.t('Cancel')}">${this.t('Cancel')}</button>
+      <button ${this._referenceAttributeName}="dialogYesButton" class="btn btn-danger" aria-label="${this.t('Yes, delete it')}">${this.t('Yes, delete it')}</button>
     </div>
   `;
     }
@@ -289,15 +289,12 @@ export default class EditGridComponent extends NestedArrayComponent {
     }
     checkRowVariableTypeComponents(editRow, rowIndex) {
         const rowComponents = editRow.components;
-        let typeChanged = false;
         if (_.some(this.variableTypeComponentsIndexes, (compIndex) => {
             const variableTypeComp = rowComponents[compIndex];
             return variableTypeComp.type !== variableTypeComp.component.type;
         })) {
             editRow.components = this.createRowComponents(editRow.data, rowIndex, true);
-            typeChanged = true;
         }
-        return typeChanged;
     }
     setVariableTypeComponents() {
         //set components which type is changing within a row (e.g.,by mergeComponentSchema action)
@@ -664,11 +661,6 @@ export default class EditGridComponent extends NestedArrayComponent {
                 }
             },
         }, this.component.saveRow || 'Save'));
-        this.emit('editGridOpenModal', {
-            component: this.component,
-            row: editRow,
-            instance: this,
-        });
         return this.attachComponents(modalContent, components);
     }
     showDialog(rowIndex) {
@@ -726,11 +718,6 @@ export default class EditGridComponent extends NestedArrayComponent {
             editRow.data = dataSnapshot;
             this.restoreRowContext(editRow);
         }
-        this.emit('editGridEditRow', {
-            component: this.component,
-            row: editRow,
-            instance: this,
-        });
         if (this.component.modal) {
             return this.addRowModal(rowIndex);
         }
@@ -939,10 +926,8 @@ export default class EditGridComponent extends NestedArrayComponent {
                     this.validateRow(editRow, false, false);
                 }
                 if (this.variableTypeComponentsIndexes.length) {
-                    const typeChanged = this.checkRowVariableTypeComponents(editRow, rowIndex);
-                    if (typeChanged) {
-                        this.redraw();
-                    }
+                    this.checkRowVariableTypeComponents(editRow, rowIndex);
+                    this.redraw();
                 }
             };
             const comp = this.createComponent(_.assign({}, column, { row: options.row }), options, row, null, recreatePartially && currentRowComponents ? currentRowComponents[colIndex] : null);
@@ -1023,16 +1008,13 @@ export default class EditGridComponent extends NestedArrayComponent {
             if (valid === null) {
                 editRow.errors.push({
                     type: 'error',
-                    message: this.t('componentInvalidRowValidation', { componentKey: this.key })
+                    message: `Invalid row validation for ${this.key}`
                 });
             }
         }
-        if (editRow.alerts && (!this.component.rowDrafts || this.root?.submitted)) {
+        if (!this.component.rowDrafts || this.root?.submitted) {
             this.showRowErrorAlerts(editRow, editRow.errors);
         }
-        else if (editRow.errors?.length) {
-            this.setCustomValidity(editRow.errors, dirty);
-        }
         return editRow.errors;
     }
     showRowErrorAlerts(editRow, errors) {

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

@@ -7,18 +7,6 @@ export default [
         key: 'allowMultipleMasks',
         ignore: true,
     },
-    {
-        key: 'inputMasks',
-        ignore: true
-    },
-    {
-        key: 'widget.type',
-        ignore: true
-    },
-    {
-        key: 'widget',
-        ignore: true
-    },
     {
         key: 'showWordCount',
         ignore: true

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

@@ -3,14 +3,6 @@ export default [
         key: 'labelPosition',
         ignore: true
     },
-    {
-        key: 'labelWidth',
-        ignore: true
-    },
-    {
-        key: 'labelMargin',
-        ignore: true
-    },
     {
         key: 'placeholder',
         ignore: true

package/lib/mjs/components/file/File.d.ts

@@ -33,7 +33,7 @@ export default class FileComponent extends Field {
     get dataReady(): Promise<any>;
     loadImage(fileInfo: any): any;
     get emptyValue(): never[];
-    getValueAsString(value: any, options: any): any;
+    getValueAsString(value: any): any;
     get defaultValue(): any[];
     get hasTypes(): any;
     _fileBrowseHidden: any;