@formio/js 5.0.0-dev.5692.a9fe9c4 → 5.0.0-dev.5696.7642331

package/lib/mjs/Webform.js

@@ -12,7 +12,6 @@ import { eachComponent } from "./utils/formUtils";
 if (typeof window !== 'undefined' && typeof window.global === 'undefined') {
     window.global = window;
 }
-import dragula from "dragula";
 // Initialize the available forms.
 Formio.forms = {};
 // Allow people to register components.
@@ -286,7 +285,6 @@ export default class Webform extends NestedDataComponent {
         // Ensure the root is set to this component.
         this.root = this;
         this.localRoot = this;
-        this.root.dragulaLib = dragula;
     }
     /* eslint-enable max-statements */
     get language() {
@@ -1136,7 +1134,7 @@ export default class Webform extends NestedDataComponent {
         });
         const displayedErrors = [];
         if (errors.length) {
-            errors = _.uniqBy(errors, (error) => error.message);
+            errors = _.uniqBy(errors, (error) => [error.message, error.component?.id, error.context?.path].join());
             const createListItem = (message, index) => {
                 const err = errors[index];
                 const messageFromIndex = !_.isUndefined(index) && errors && errors[index];

package/lib/mjs/components/_classes/component/Component.d.ts

@@ -830,6 +830,7 @@ declare class Component extends Element {
     quill: any;
     get shouldSanitizeValue(): boolean;
     addAce(element: any, settings: any, onChange: any): any;
+    getDragula(): Promise<any>;
     get tree(): any;
     /**
      * The empty value for this component.

package/lib/mjs/components/_classes/component/Component.js

@@ -2351,6 +2351,13 @@ export default class Component extends Element {
             return editor;
         });
     }
+    async getDragula() {
+        return new Promise((resolve) => {
+            return Formio.requireLibrary('dragula', 'dragula', `${Formio.cdn.dragula}/dragula.js`, true, (ready) => {
+                return ready.then(resolve);
+            });
+        });
+    }
     get tree() {
         return this.component.tree || false;
     }

package/lib/mjs/components/_classes/nested/NestedComponent.d.ts

@@ -211,11 +211,12 @@ export default class NestedComponent extends Field {
     calculateValue(data: any, flags: any, row: any): any;
     isLastPage(): boolean;
     isValid(data: any, dirty: any): any;
-    validationProcessor({ scope, data, row, instance }: {
+    validationProcessor({ scope, data, row, instance, component }: {
         scope: any;
         data: any;
         row: any;
         instance: any;
+        component: any;
     }, flags: any): void;
     /**
      * Perform a validation on all child components of this nested component.

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

@@ -677,8 +677,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.getComponentById(component.id);
+        }
         if (!instance) {
             return;
         }

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

@@ -107,6 +107,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) {

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[];
@@ -71,6 +72,7 @@ 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,8 +1,7 @@
 import _ from 'lodash';
 import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';
 import { fastCloneDeep, getFocusableElements } from '../../utils/utils';
-import { Components } from '../Components';
-import dragula from 'dragula';
+import Components from '../Components';
 export default class DataGridComponent extends NestedArrayComponent {
     static schema(...extend) {
         return NestedArrayComponent.schema({
@@ -39,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();
@@ -279,31 +281,25 @@ export default class DataGridComponent extends NestedArrayComponent {
             this.refs[`${this.datagridKey}-row`].forEach((row, index) => {
                 row.dragInfo = { index };
             });
-            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.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 = [];
                 }
-            }).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;
+                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');
                         }
-                        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) => {
@@ -370,6 +366,22 @@ export default class DataGridComponent extends NestedArrayComponent {
         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;

package/lib/mjs/components/datagrid/fixtures/comp10.d.ts

@@ -0,0 +1,81 @@
+declare namespace _default {
+    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: {}[];
+        validate: {
+            required: boolean;
+        };
+        key: string;
+        type: string;
+        input: boolean;
+        components: {
+            label: string;
+            columns: ({
+                components: {
+                    label: string;
+                    applyMaskOn: string;
+                    tableView: boolean;
+                    key: string;
+                    type: string;
+                    input: boolean;
+                }[];
+                width: number;
+                offset: number;
+                push: number;
+                pull: number;
+                size: string;
+                currentWidth: number;
+            } | {
+                components: {
+                    label: string;
+                    tableView: boolean;
+                    key: string;
+                    type: string;
+                    input: boolean;
+                }[];
+                width: number;
+                offset: number;
+                push: number;
+                pull: number;
+                size: string;
+                currentWidth: number;
+            })[];
+            key: string;
+            type: string;
+            input: boolean;
+            tableView: 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;
+        validate?: undefined;
+        components?: undefined;
+    })[];
+    let pdfComponents: never[];
+    namespace settings {
+        let logs: string;
+    }
+}
+export default _default;

package/lib/mjs/components/datagrid/fixtures/comp10.js

@@ -0,0 +1,85 @@
+export default {
+    title: 'randomName',
+    name: 'randomName',
+    path: 'randomName',
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Data Grid',
+            reorder: false,
+            addAnotherPosition: 'bottom',
+            layoutFixed: false,
+            enableRowGroups: false,
+            initEmpty: false,
+            tableView: false,
+            defaultValue: [
+                {}
+            ],
+            validate: {
+                required: true
+            },
+            key: 'dataGrid',
+            type: 'datagrid',
+            input: true,
+            components: [
+                {
+                    label: 'Columns',
+                    columns: [
+                        {
+                            components: [
+                                {
+                                    label: 'Text Field',
+                                    applyMaskOn: 'change',
+                                    tableView: true,
+                                    key: 'textField',
+                                    type: 'textfield',
+                                    input: true
+                                }
+                            ],
+                            width: 6,
+                            offset: 0,
+                            push: 0,
+                            pull: 0,
+                            size: 'md',
+                            currentWidth: 6
+                        },
+                        {
+                            components: [
+                                {
+                                    label: 'Checkbox',
+                                    tableView: false,
+                                    key: 'checkbox',
+                                    type: 'checkbox',
+                                    input: true
+                                }
+                            ],
+                            width: 6,
+                            offset: 0,
+                            push: 0,
+                            pull: 0,
+                            size: 'md',
+                            currentWidth: 6
+                        }
+                    ],
+                    key: 'columns',
+                    type: 'columns',
+                    input: false,
+                    tableView: false
+                }
+            ]
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false
+        }
+    ],
+    pdfComponents: [],
+    settings: {
+        logs: 'true'
+    }
+};

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

@@ -7,6 +7,7 @@ import comp6 from './comp6';
 import comp7 from './comp7';
 import comp8 from './comp8';
 import comp9 from './comp9';
+import comp10 from './comp10';
 import withCollapsibleRowGroups from './comp-with-collapsible-groups';
 import withConditionalFieldsAndValidations from './comp-with-conditional-components-and-validations';
 import withDefValue from './comp-with-def-value';
@@ -17,4 +18,4 @@ import withAllowCalculateOverride from './comp-with-allow-calculate-override';
 import twoWithAllowCalculatedOverride from './two-comp-with-allow-calculate-override';
 import withCheckboxes from './comp-with-checkboxes';
 import withReorder from './comp-with-reorder';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, withCollapsibleRowGroups, withConditionalFieldsAndValidations, withDefValue, withLogic, withRowGroupsAndDefValue, modalWithRequiredFields, withAllowCalculateOverride, twoWithAllowCalculatedOverride, withCheckboxes, withReorder };
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, withCollapsibleRowGroups, withConditionalFieldsAndValidations, withDefValue, withLogic, withRowGroupsAndDefValue, modalWithRequiredFields, withAllowCalculateOverride, twoWithAllowCalculatedOverride, withCheckboxes, withReorder };

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

@@ -7,6 +7,7 @@ import comp6 from './comp6';
 import comp7 from './comp7';
 import comp8 from './comp8';
 import comp9 from './comp9';
+import comp10 from './comp10';
 import withDefValue from './comp-with-def-value';
 import withRowGroupsAndDefValue from './comp-row-groups-with-def-value';
 import modalWithRequiredFields from './comp-modal-with-required-fields';
@@ -17,4 +18,4 @@ import withAllowCalculateOverride from './comp-with-allow-calculate-override';
 import twoWithAllowCalculatedOverride from './two-comp-with-allow-calculate-override';
 import withCheckboxes from './comp-with-checkboxes';
 import withReorder from './comp-with-reorder';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, withCollapsibleRowGroups, withConditionalFieldsAndValidations, withDefValue, withLogic, withRowGroupsAndDefValue, modalWithRequiredFields, withAllowCalculateOverride, twoWithAllowCalculatedOverride, withCheckboxes, withReorder };
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, withCollapsibleRowGroups, withConditionalFieldsAndValidations, withDefValue, withLogic, withRowGroupsAndDefValue, modalWithRequiredFields, withAllowCalculateOverride, twoWithAllowCalculatedOverride, withCheckboxes, withReorder };

package/lib/mjs/components/datamap/DataMap.js

@@ -3,7 +3,7 @@ import DataGridComponent from '../datagrid/DataGrid';
 import _ from 'lodash';
 import EventEmitter from 'eventemitter3';
 import { componentValueTypes, getComponentSavedTypes, uniqueKey } from '../../utils/utils';
-import { Components } from '../Components';
+import Components from '../Components';
 export default class DataMapComponent extends DataGridComponent {
     static schema(...extend) {
         return Component.schema({

package/lib/mjs/components/day/fixtures/comp8.d.ts

@@ -0,0 +1,41 @@
+declare namespace _default {
+    let components: ({
+        label: string;
+        hideInputLabels: boolean;
+        inputsLabelPosition: string;
+        useLocaleSettings: boolean;
+        alwaysEnabled: boolean;
+        tableView: boolean;
+        fields: {
+            day: {
+                hide: boolean;
+                required: boolean;
+            };
+            month: {
+                hide: boolean;
+                required: boolean;
+            };
+            year: {
+                hide: boolean;
+                required: boolean;
+            };
+        };
+        key: string;
+        type: string;
+        input: boolean;
+        showValidations?: undefined;
+    } | {
+        label: string;
+        showValidations: boolean;
+        alwaysEnabled: boolean;
+        tableView: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        hideInputLabels?: undefined;
+        inputsLabelPosition?: undefined;
+        useLocaleSettings?: undefined;
+        fields?: undefined;
+    })[];
+}
+export default _default;

package/lib/mjs/components/day/fixtures/comp8.js

@@ -0,0 +1,38 @@
+export default {
+    "components": [
+        {
+            "label": "Day - Table",
+            "hideInputLabels": false,
+            "inputsLabelPosition": "top",
+            "useLocaleSettings": false,
+            "alwaysEnabled": false,
+            "tableView": false,
+            "fields": {
+                "day": {
+                    "hide": false,
+                    "required": true
+                },
+                "month": {
+                    "hide": false,
+                    "required": true
+                },
+                "year": {
+                    "hide": false,
+                    "required": true
+                }
+            },
+            "key": "dayTable",
+            "type": "day",
+            "input": true
+        },
+        {
+            "label": "Submit",
+            "showValidations": false,
+            "alwaysEnabled": false,
+            "tableView": false,
+            "key": "submit",
+            "type": "button",
+            "input": true
+        }
+    ]
+};

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

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

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

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

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

@@ -672,6 +672,11 @@ 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) {
@@ -729,6 +734,11 @@ 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);
         }
@@ -1079,7 +1089,8 @@ export default class EditGridComponent extends NestedArrayComponent {
             return false;
         }
         else if (rowsEditing && this.saveEditMode && !this.component.openWhenEmpty) {
-            this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);
+            this._errors = this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);
+            errors.push(...this._errors);
             return false;
         }
         const message = this.invalid || this.invalidMessage(data, dirty, false, row);