@formio/js 5.0.0-dev.5672.279701a → 5.0.0-dev.5673.ae99c16

package/lib/mjs/components/_classes/nested/NestedComponent.js

@@ -493,6 +493,7 @@ export default class NestedComponent extends Field {
             header: 'single',
             collapsed: this.collapsed,
             [this.nestedKey]: 'single',
+            messageContainer: 'single-scope',
         });
         let childPromise = Promise.resolve();
         if (this.refs[this.nestedKey]) {
@@ -677,8 +678,11 @@ export default class NestedComponent extends Field {
     isValid(data, dirty) {
         return this.getComponents().reduce((valid, comp) => comp.isValid(data, dirty) && valid, super.isValid(data, dirty));
     }
-    validationProcessor({ scope, data, row, instance }, flags) {
+    validationProcessor({ scope, data, row, instance, component }, flags) {
         const { dirty } = flags;
+        if (this.root.hasExtraPages && this.page !== this.root.page) {
+            instance = this.getComponent(component.path);
+        }
         if (!instance) {
             return;
         }

package/lib/mjs/components/_classes/nestedarray/NestedArrayComponent.d.ts

@@ -12,6 +12,9 @@ export default class NestedArrayComponent extends NestedDataComponent {
     hasAddButton(): any;
     getComponent(path: any, fn: any, originalPath: any): any;
     everyComponent(fn: any, rowIndex: any, options?: {}): void;
+    _getEmailTableHeader(options: any): string;
+    _getEmailTableBody(options: any): string;
     getComponents(rowIndex: any): any;
+    removeSubmissionMetadataRow(index: any): void;
 }
 import NestedDataComponent from '../nesteddata/NestedDataComponent';

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

@@ -1,6 +1,6 @@
 'use strict';
 import _ from 'lodash';
-import { componentValueTypes, getStringFromComponentPath } from '../../../utils/utils';
+import { componentValueTypes, getStringFromComponentPath, isLayoutComponent } from '../../../utils/utils';
 import Component from '../component/Component';
 import NestedDataComponent from '../nesteddata/NestedDataComponent';
 export default class NestedArrayComponent extends NestedDataComponent {
@@ -145,38 +145,60 @@ 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;">${label}</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) {
-            let result = (`
+            return `
         <table border="1" style="width:100%">
-          <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>
+          ${this._getEmailTableHeader(options)}
+          ${this._getEmailTableBody(options)}
         </table>
-      `);
-            return result;
+      `;
         }
         if (!value || !value.length) {
             return '';
@@ -192,4 +214,10 @@ export default class NestedArrayComponent extends NestedDataComponent {
         }
         return super.getComponents();
     }
+    removeSubmissionMetadataRow(index) {
+        const componentMetadata = _.get(this.root, `submission.metadata.selectData.${this.path}`, null);
+        if (_.isArray(componentMetadata)) {
+            componentMetadata.splice(index, 1);
+        }
+    }
 }

package/lib/mjs/components/address/Address.d.ts

@@ -11,6 +11,12 @@ export default class AddressComponent extends ContainerComponent {
         weight: number;
         schema: any;
     };
+    static get serverConditionSettings(): {
+        operators: string[];
+    };
+    static get conditionOperatorsSettings(): {
+        operators: string[];
+    };
     static get modeSwitcherRef(): string;
     static get removeValueIconRef(): string;
     static get searchInputRef(): string;

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

@@ -91,6 +91,15 @@ export default class AddressComponent extends ContainerComponent {
             schema: AddressComponent.schema(),
         };
     }
+    static get serverConditionSettings() {
+        return AddressComponent.conditionOperatorsSettings;
+    }
+    static get conditionOperatorsSettings() {
+        return {
+            ...super.conditionOperatorsSettings,
+            operators: ['isEmpty', 'isNotEmpty'],
+        };
+    }
     mergeSchema(component = {}) {
         let { defaultSchema } = this;
         if (component.components) {
@@ -107,6 +116,10 @@ export default class AddressComponent extends ContainerComponent {
         if (!this.builderMode) {
             if (this.component.provider) {
                 const { provider, providerOptions, } = this.component;
+                if (_.get(providerOptions, 'params.subscriptionKey')) {
+                    _.set(providerOptions, "params['subscription-key']", _.get(providerOptions, 'params.subscriptionKey'));
+                    _.unset(providerOptions, 'params.subscriptionKey');
+                }
                 this.provider = this.initializeProvider(provider, providerOptions);
             }
             else if (this.component.map) {
@@ -177,7 +190,7 @@ export default class AddressComponent extends ContainerComponent {
         return (this.manualModeEnabled && this.dataValue) ? this.dataValue.address : this.dataValue;
     }
     set address(value) {
-        if (this.manualModeEnabled && !this.isMultiple) {
+        if (this.manualModeEnabled && !this.isMultiple && !_.isEqual(value, this.emptyValue)) {
             this.dataValue.address = value;
         }
         else {

package/lib/mjs/components/address/editForm/Address.edit.provider.js

@@ -26,7 +26,7 @@ export default [
     {
         type: 'textfield',
         input: true,
-        key: "providerOptions.params['subscription-key']",
+        key: "providerOptions.params.subscriptionKey",
         label: 'Subscription Key',
         placeholder: 'Enter Subscription Key',
         weight: 10,

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

@@ -116,7 +116,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;

package/lib/mjs/components/checkbox/fixtures/comp6.d.ts

@@ -0,0 +1,32 @@
+declare namespace _default {
+    let name: string;
+    let path: string;
+    let type: string;
+    let display: string;
+    let components: ({
+        label: string;
+        inputType: string;
+        tableView: boolean;
+        defaultValue: boolean;
+        key: string;
+        type: string;
+        name: string;
+        value: string;
+        input: boolean;
+        'some name': boolean;
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        inputType?: undefined;
+        defaultValue?: undefined;
+        name?: undefined;
+        value?: undefined;
+        'some name'?: undefined;
+    })[];
+}
+export default _default;

package/lib/mjs/components/checkbox/fixtures/comp6.js

@@ -0,0 +1,28 @@
+export default {
+    name: 'ckeckbox',
+    path: 'ckeckbox',
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Checkbox',
+            inputType: 'radio',
+            tableView: false,
+            defaultValue: false,
+            key: 'checkbox',
+            type: 'checkbox',
+            name: 'some name',
+            value: 'ok',
+            input: true,
+            'some name': false
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false
+        }
+    ],
+};

package/lib/mjs/components/checkbox/fixtures/index.d.ts

@@ -3,5 +3,6 @@ import comp2 from './comp2';
 import comp3 from './comp3';
 import comp4 from './comp4';
 import comp5 from './comp5';
+import comp6 from './comp6';
 import customDefaultComponent from './customDefaultComponent';
-export { comp1, comp2, comp3, comp4, comp5, customDefaultComponent };
+export { comp1, comp2, comp3, comp4, comp5, comp6, customDefaultComponent };

package/lib/mjs/components/checkbox/fixtures/index.js

@@ -4,4 +4,5 @@ import comp2 from './comp2';
 import comp3 from './comp3';
 import comp4 from './comp4';
 import comp5 from './comp5';
-export { comp1, comp2, comp3, comp4, comp5, customDefaultComponent };
+import comp6 from './comp6';
+export { comp1, comp2, comp3, comp4, comp5, comp6, customDefaultComponent };

package/lib/mjs/components/currency/Currency.d.ts

@@ -2,6 +2,8 @@ export default class CurrencyComponent extends NumberComponent {
     constructor(component: any, options: any, data: any);
     currencyPrefix: any;
     currencySuffix: any;
+    parseNumber(value: any): number;
+    parseValue(value: any): string | null;
     addZerosAndFormatValue(value: any): any;
     stripPrefixSuffix(value: any): any;
 }

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

@@ -12,6 +12,7 @@ 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[];
@@ -58,10 +59,19 @@ export default class DataGridComponent extends NestedArrayComponent {
     getRows(): {}[];
     getColumns(): any[];
     hasHeader(): any;
-    loadRefs(element: any, refs: any): void;
     dragula: any;
     getComponentsContainer(): any;
+    /**
+     * Reorder values in array based on the old and new position
+     * @param {any} valuesArr - An array of values.
+     * @param {number} oldPosition - The index of the value in array before reordering.
+     * @param {number} newPosition - The index of the value in array after reordering.
+     * @param {boolean|any} movedBelow - Whether or not the value is moved below.
+     * @returns {void}
+     */
+    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,7 +1,7 @@
 import _ from 'lodash';
 import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';
 import { fastCloneDeep, getFocusableElements } from '../../utils/utils';
-import { Components } from '../Components';
+import Components from '../Components';
 export default class DataGridComponent extends NestedArrayComponent {
     static schema(...extend) {
         return NestedArrayComponent.schema({
@@ -38,6 +38,9 @@ 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();
@@ -257,13 +260,6 @@ export default class DataGridComponent extends NestedArrayComponent {
             return hasHeader || ((col.label || col.title) && !col.hideLabel);
         }, false);
     }
-    loadRefs(element, refs) {
-        super.loadRefs(element, refs);
-        if (refs['messageContainer'] === 'single') {
-            const container = _.last(element.querySelectorAll(`[${this._referenceAttributeName}=messageContainer]`));
-            this.refs['messageContainer'] = container || this.refs['messageContainer'];
-        }
-    }
     attach(element) {
         this.loadRefs(element, {
             [`${this.datagridKey}-row`]: 'multiple',
@@ -272,14 +268,20 @@ export default class DataGridComponent extends NestedArrayComponent {
             [`${this.datagridKey}-removeRow`]: 'multiple',
             [`${this.datagridKey}-group-header`]: 'multiple',
             [this.datagridKey]: 'multiple',
-            'messageContainer': 'single'
         });
         if (this.allowReorder) {
             this.refs[`${this.datagridKey}-row`].forEach((row, index) => {
                 row.dragInfo = { index };
             });
-            if (this.root.dragulaLib) {
-                this.dragula = this.root.dragulaLib([this.refs[`${this.datagridKey}-tbody`]], {
+            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');
@@ -288,24 +290,9 @@ export default class DataGridComponent extends NestedArrayComponent {
                             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;
-                            }
-                            else {
-                                const cssText = Object.values(styles).reduce((css, propertyName) => {
-                                    return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;
-                                }, '');
-                                el.children[index].style.cssText = cssText;
-                            }
-                        });
-                    }
-                });
-            }
+                }).on('drop', this.onReorder.bind(this))
+                    .on('cloned', this.onCloned.bind(this));
+            });
         }
         this.refs[`${this.datagridKey}-addRow`].forEach((addButton) => {
             this.addEventListener(addButton, 'click', this.addRow.bind(this));
@@ -333,6 +320,24 @@ export default class DataGridComponent extends NestedArrayComponent {
     getComponentsContainer() {
         return this.component.components;
     }
+    /**
+     * Reorder values in array based on the old and new position
+     * @param {any} valuesArr - An array of values.
+     * @param {number} oldPosition - The index of the value in array before reordering.
+     * @param {number} newPosition - The index of the value in array after reordering.
+     * @param {boolean|any} movedBelow - Whether or not the value is moved below.
+     * @returns {void}
+     */
+    reorderValues(valuesArr, oldPosition, newPosition, movedBelow) {
+        if (!_.isArray(valuesArr) || _.isEmpty(valuesArr)) {
+            return;
+        }
+        const draggedRowData = valuesArr[oldPosition];
+        //insert element at new position
+        valuesArr.splice(newPosition, 0, draggedRowData);
+        //remove element from old position (if was moved above, after insertion it's at +1 index)
+        valuesArr.splice(movedBelow ? oldPosition : oldPosition + 1, 1);
+    }
     onReorder(element, _target, _source, sibling) {
         if (!element.dragInfo || (sibling && !sibling.dragInfo)) {
             console.warn('There is no Drag Info available for either dragged or sibling element');
@@ -343,15 +348,32 @@ export default class DataGridComponent extends NestedArrayComponent {
         const newPosition = sibling ? sibling.dragInfo.index : this.dataValue.length;
         const movedBelow = newPosition > oldPosition;
         const dataValue = fastCloneDeep(this.dataValue);
-        const draggedRowData = dataValue[oldPosition];
-        //insert element at new position
-        dataValue.splice(newPosition, 0, draggedRowData);
-        //remove element from old position (if was moved above, after insertion it's at +1 index)
-        dataValue.splice(movedBelow ? oldPosition : oldPosition + 1, 1);
+        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;
@@ -410,10 +432,11 @@ export default class DataGridComponent extends NestedArrayComponent {
     }
     removeRow(index) {
         const makeEmpty = index === 0 && this.rows.length === 1;
-        const flags = { isReordered: !makeEmpty, resetValue: makeEmpty };
+        const flags = { isReordered: !makeEmpty, resetValue: makeEmpty, modified: true };
         this.splice(index, flags);
         this.emit('dataGridDeleteRow', { index });
         const [row] = this.rows.splice(index, 1);
+        this.removeSubmissionMetadataRow(index);
         this.removeRowComponents(row);
         this.updateRowsComponents(index);
         this.setValue(this.dataValue, flags);

package/lib/mjs/components/datagrid/fixtures/comp-with-reorder.d.ts

@@ -0,0 +1,100 @@
+declare namespace _default {
+    export { form };
+    export { submission };
+}
+export default _default;
+declare namespace form {
+    let _id: string;
+    let title: string;
+    let name: string;
+    let path: string;
+    let type: string;
+    let display: string;
+    let components: ({
+        label: string;
+        reorder: boolean;
+        addAnotherPosition: string;
+        layoutFixed: boolean;
+        enableRowGroups: boolean;
+        initEmpty: boolean;
+        tableView: boolean;
+        defaultValue: {
+            select: string;
+        }[];
+        key: string;
+        type: string;
+        input: boolean;
+        components: {
+            label: string;
+            widget: string;
+            tableView: boolean;
+            dataSrc: string;
+            data: {
+                resource: string;
+            };
+            dataType: string;
+            valueProperty: string;
+            template: string;
+            validate: {
+                select: boolean;
+            };
+            key: string;
+            type: string;
+            searchField: string;
+            limit: number;
+            noRefreshOnScroll: boolean;
+            addResource: boolean;
+            reference: boolean;
+            input: boolean;
+        }[];
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        reorder?: undefined;
+        addAnotherPosition?: undefined;
+        layoutFixed?: undefined;
+        enableRowGroups?: undefined;
+        initEmpty?: undefined;
+        defaultValue?: undefined;
+        components?: undefined;
+    })[];
+    let created: string;
+    let modified: string;
+    let machineName: string;
+}
+declare namespace submission {
+    let form_1: string;
+    export { form_1 as form };
+    export namespace metadata {
+        namespace selectData {
+            let dataGrid: {
+                select: {
+                    data: {
+                        number: number;
+                    };
+                };
+            }[];
+        }
+    }
+    export namespace data {
+        let dataGrid_1: {
+            select: string;
+        }[];
+        export { dataGrid_1 as dataGrid };
+        export let dataTable: never[];
+        export let submit: boolean;
+    }
+    let _id_1: string;
+    export { _id_1 as _id };
+    export let project: string;
+    export let state: string;
+    let created_1: string;
+    export { created_1 as created };
+    let modified_1: string;
+    export { modified_1 as modified };
+}