@formio/js 5.0.0-rc.99 → 5.1.0-rc.1

package/lib/mjs/Webform.js

@@ -590,6 +590,7 @@ export default class Webform extends NestedDataComponent {
         try {
             // Do not set the form again if it has been already set
             if (isFormAlreadySet && JSON.stringify(this._form) === JSON.stringify(form)) {
+                this.formReadyResolve();
                 return Promise.resolve();
             }
             // Create the form.
@@ -597,13 +598,11 @@ export default class Webform extends NestedDataComponent {
             if (this.onSetForm) {
                 this.onSetForm(_.cloneDeep(this._form), form);
             }
-            if (this.parent?.component?.modalEdit) {
-                return Promise.resolve();
-            }
         }
         catch (err) {
             console.warn(err);
             // If provided form is not a valid JSON object, do not set it too
+            this.formReadyReject(err);
             return Promise.resolve();
         }
         // Allow the form to provide component overrides.
@@ -702,6 +701,18 @@ export default class Webform extends NestedDataComponent {
     set submission(submission) {
         this.setSubmission(submission);
     }
+    /**
+     * Sets the submission value
+     * @param {object|null|undefined} submission - The submission to set.
+     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
+     * @return {void}
+     */
+    onSetSubmission(submission, flags = {}) {
+        this.submissionSet = true;
+        this.triggerChange(flags);
+        this.emit('beforeSetSubmission', submission);
+        this.setValue(submission, flags);
+    }
     /**
      * Sets a submission and returns the promise when it is ready.
      * @param {any} submission - The submission to set.
@@ -721,10 +732,7 @@ export default class Webform extends NestedDataComponent {
                     ...resolveFlags,
                 };
             }
-            this.submissionSet = true;
-            this.triggerChange(flags);
-            this.emit("beforeSetSubmission", submission);
-            this.setValue(submission, flags);
+            this.onSetSubmission(submission, flags);
             return this.submissionReadyResolve(submission);
         }, (err) => this.submissionReadyReject(err))
             .catch((err) => this.submissionReadyReject(err)));
@@ -843,6 +851,9 @@ export default class Webform extends NestedDataComponent {
         return changed;
     }
     getValue() {
+        if (!this._submission) {
+            this._submission = {};
+        }
         if (!this._submission.data) {
             this._submission.data = {};
         }
@@ -1102,29 +1113,23 @@ export default class Webform extends NestedDataComponent {
             return;
         }
         // Mark any components as invalid if in a custom message.
+        const componentErrors = {};
         errors.forEach((err) => {
-            const { components = [] } = err;
-            if (err.component) {
-                components.push(err.component);
-            }
-            if (err.path) {
-                components.push(err.path);
+            const path = err.path || err.context?.path || err.component?.key;
+            if (!componentErrors[path]) {
+                componentErrors[path] = [];
             }
-            components.forEach((path) => {
-                const originalPath = getStringFromComponentPath(path);
-                const component = this.getComponent(path, _.identity, originalPath);
-                if (err.fromServer) {
-                    if (component.serverErrors) {
-                        component.serverErrors.push(err);
-                    }
-                    else {
-                        component.serverErrors = [err];
-                    }
-                }
-                const components = _.compact(Array.isArray(component) ? component : [component]);
-                components.forEach((component) => component.setCustomValidity(err.message, true));
-            });
+            componentErrors[path].push(err);
         });
+        // Iterate through all of our component errors and apply them to the components.
+        for (let path in componentErrors) {
+            const component = this.getComponent(path);
+            const errors = componentErrors[path];
+            if (component) {
+                component.serverErrors = errors.filter((err) => err.fromServer);
+                component.setCustomValidity(errors, true);
+            }
+        }
         const displayedErrors = [];
         if (errors.length) {
             errors = _.uniqBy(errors, (error) => [error.message, error.component?.id, error.context?.path].join());
@@ -1317,7 +1322,7 @@ export default class Webform extends NestedDataComponent {
             onLine: navigator.onLine,
         });
     }
-    submitForm(options = {}) {
+    submitForm(options = {}, local = false) {
         this.clearServerErrors();
         return new Promise((resolve, reject) => {
             // Read-only forms should never submit.
@@ -1342,6 +1347,7 @@ export default class Webform extends NestedDataComponent {
                             return reject("Invalid Submission");
                         }
                         const errors = this.validate(submission.data, {
+                            local,
                             dirty: true,
                             silentCheck: false,
                             process: "submit",
@@ -1357,11 +1363,11 @@ export default class Webform extends NestedDataComponent {
                 }
                 this.everyComponent((comp) => {
                     if (submission._vnote && comp.type === "form" && comp.component.reference) {
-                        _.get(submission.data, comp.path, {})._vnote = submission._vnote;
+                        _.get(submission.data, local ? comp.paths?.localDataPath : comp.path, {})._vnote = submission._vnote;
                     }
                     const { persistent } = comp.component;
                     if (persistent === "client-only") {
-                        _.unset(submission.data, comp.path);
+                        _.unset(submission.data, local ? comp.paths?.localDataPath : comp.path);
                     }
                 });
                 this.hook("customValidation", { ...submission, component: options.component }, (err) => {
@@ -1527,7 +1533,7 @@ export default class Webform extends NestedDataComponent {
             return;
         }
         const captchaComponent = [];
-        eachComponent(this.components, (component) => {
+        this.eachComponent((component) => {
             if (/^(re)?captcha$/.test(component.type) && component.component.eventType === 'formLoad') {
                 captchaComponent.push(component);
             }

package/lib/mjs/WebformBuilder.js

@@ -897,13 +897,16 @@ export default class WebformBuilder extends Component {
             keyboardActionsEnabled = keyboardActionsEnabled === 'true';
         }
         this.keyboardActionsEnabled = keyboardActionsEnabled;
-        const isSubmitButton = (comp) => {
-            return (comp.type === 'button') && ((comp.action === 'submit') || !comp.action);
-        };
-        const isShowSubmitButton = !this.options.noDefaultSubmitButton
-            && (!form.components.length || !form.components.find(comp => isSubmitButton(comp)));
+        const { display, noAddSubmitButton, noDefaultSubmitButton } = this.options;
+        const { _id, components } = form;
+        const isSubmitButton = ({ type, action }) => type === 'button' && (action === 'submit' || !action);
+        const hasSubmitButton = components.some(isSubmitButton);
+        // Add submit button if form display was switched from wizard
+        // Don't add if there is noAddSubmitButton flag passed, or the form has id, or the form has a submit button already
+        const shouldAddSubmitButton = (display === 'wizard' && !hasSubmitButton) ||
+            (!noAddSubmitButton && !_id && !hasSubmitButton);
         // Ensure there is at least a submit button.
-        if (isShowSubmitButton) {
+        if (!noDefaultSubmitButton && shouldAddSubmitButton) {
             form.components.push({
                 type: 'button',
                 label: 'Submit',
@@ -1052,6 +1055,7 @@ export default class WebformBuilder extends Component {
                     'conditional',
                     'customConditional',
                     'id',
+                    'logic',
                     'fields.day.required',
                     'fields.month.required',
                     'fields.year.required',
@@ -1077,6 +1081,12 @@ export default class WebformBuilder extends Component {
                     parentComponent.tabs[tabIndex].splice(index, 1, newComp);
                     newComp.checkValidity = () => true;
                     newComp.build(defaultValueComponent.element);
+                    if (this.preview && !this.preview.defaultChanged) {
+                        const defaultValue = _.get(this.preview._data, this.editForm._data.key);
+                        if (_.isObject(defaultValue) && !_.isArray(defaultValue)) {
+                            this.editForm._data.defaultValue = defaultValue;
+                        }
+                    }
                 }
             }
             else {
@@ -1087,6 +1097,7 @@ export default class WebformBuilder extends Component {
                     path.unshift(component.key);
                     dataPath = getStringFromComponentPath(path);
                 }
+                this.preview.defaultChanged = true;
                 _.set(this.preview._data, dataPath, changed.value);
                 _.set(this.webform._data, dataPath, changed.value);
             }
@@ -1097,20 +1108,12 @@ export default class WebformBuilder extends Component {
     findRepeatablePaths() {
         const repeatablePaths = [];
         const keys = new Map();
-        eachComponent(this.form.components, (comp, path) => {
-            if (!comp.key) {
-                return;
-            }
-            if (keys.has(comp.key)) {
-                if (keys.get(comp.key).includes(path)) {
-                    repeatablePaths.push(path);
-                }
-                else {
-                    keys.set(comp.key, [...keys.get(comp.key), path]);
-                }
+        eachComponent(this.form.components, (comp, path, components, parent, paths) => {
+            if (keys.has(paths.dataPath)) {
+                repeatablePaths.push(paths.dataPath);
             }
             else {
-                keys.set(comp.key, [path]);
+                keys.set(paths.dataPath, true);
             }
         }, true);
         return repeatablePaths;
@@ -1171,6 +1174,7 @@ export default class WebformBuilder extends Component {
             }
             const rebuild = parentComponent.rebuild() || Promise.resolve();
             return rebuild.then(() => {
+                parentComponent.resetValue();
                 const schema = parentContainer ? parentContainer[index] : (comp ? comp.schema : []);
                 this.emitSaveComponentEvent(schema, originalComp, parentComponent.schema, path, index, isNew, originalComponentSchema);
                 this.emit('change', this.form);

package/lib/mjs/Wizard.d.ts

@@ -105,7 +105,6 @@ declare class Wizard extends Webform {
     pageId(page: any): any;
     onChange(flags: any, changed: any, modified: any, changes: any): void;
     checkValidity(data: any, dirty: any, row: any, currentPageOnly: any, childErrors?: any[]): any;
-    showErrors(errors: any, triggerEvent: any): void | any[];
     focusOnComponent(key: any): void | Promise<void>;
 }
 declare namespace Wizard {

package/lib/mjs/Wizard.js

@@ -369,7 +369,7 @@ export default class Wizard extends Webform {
     }
     attachHeader() {
         const isAllowPrevious = this.isAllowPrevious();
-        this.attachTooltips(this.refs[`${this.wizardKey}-tooltip`], this.currentPanel.tooltip);
+        this.attachTooltips(this.refs[`${this.wizardKey}-tooltip`], this.currentPanel?.tooltip);
         if (this.isBreadcrumbClickable() || isAllowPrevious) {
             this.refs[`${this.wizardKey}-link`]?.forEach((link, index) => {
                 if (!isAllowPrevious || index <= this.enabledIndex) {
@@ -594,7 +594,10 @@ export default class Wizard extends Webform {
             }
             this.redraw().then(() => {
                 this.checkData(this.submission.data);
-                this.validateCurrentPage();
+                const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();
+                if (this.alert) {
+                    this.showErrors(errors, true, true);
+                }
             });
             return Promise.resolve();
         }
@@ -689,9 +692,11 @@ export default class Wizard extends Webform {
                 });
             });
         }
-        // Validate the form, before go to the next page
-        const errors = this.validateCurrentPage({ dirty: true });
-        if (errors.length === 0) {
+        // Validate the form before going to the next page
+        const currentPageErrors = this.validateCurrentPage({ dirty: true });
+        const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : currentPageErrors;
+        // allow going to the next page if the current page is valid, even if there are form level errors
+        if (currentPageErrors.length === 0) {
             this.checkData(this.submission.data);
             return this.beforePage(true).then(() => {
                 return this.setPage(this.getNextPage()).then(() => {
@@ -706,12 +711,13 @@ export default class Wizard extends Webform {
         else {
             this.currentPage.components.forEach((comp) => comp.setPristine(false));
             this.scrollIntoView(this.element, true);
-            return Promise.reject(super.showErrors(errors, true));
+            return Promise.reject(this.showErrors(errors, true));
         }
     }
     validateCurrentPage(flags = {}) {
+        const components = this.currentPage?.components.map((component) => component.component);
         // Accessing the parent ensures the right instance (whether it's the parent Wizard or a nested Wizard) performs its validation
-        return this.currentPage?.parent.validateComponents(this.currentPage.component.components, this.currentPage.parent.data, flags);
+        return this.currentPage?.parent.validateComponents(components, this.root.data, flags);
     }
     emitPrevPage() {
         this.emit('prevPage', { page: this.page, submission: this.submission });
@@ -852,7 +858,8 @@ export default class Wizard extends Webform {
     }
     onChange(flags, changed, modified, changes) {
         super.onChange(flags, changed, modified, changes);
-        const errors = this.validate(this.localData, { dirty: false });
+        // The onChange loop doesn't need all components for wizards
+        const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();
         if (this.alert) {
             this.showErrors(errors, true, true);
         }
@@ -884,12 +891,6 @@ export default class Wizard extends Webform {
             this.redraw();
         }
     }
-    redraw() {
-        if (this.parent?.component?.modalEdit) {
-            return this.parent.redraw();
-        }
-        return super.redraw();
-    }
     rebuild() {
         const currentPage = this.page;
         const setCurrentPage = () => this.setPage(currentPage);
@@ -906,21 +907,7 @@ export default class Wizard extends Webform {
         return components.reduce((check, comp) => comp.checkValidity(data, dirty, row, currentPageOnly, childErrors) && check, true);
     }
     get errors() {
-        if (!this.isLastPage()) {
-            return this.currentPage.errors;
-        }
-        return super.errors;
-    }
-    showErrors(errors, triggerEvent) {
-        if (this.hasExtraPages) {
-            this.subWizards.forEach((subWizard) => {
-                if (Array.isArray(subWizard.errors)) {
-                    errors = [...errors, ...subWizard.errors];
-                }
-            });
-        }
-        ;
-        return super.showErrors(errors, triggerEvent);
+        return !this.isLastPage() && !this.submitted ? this.currentPage.errors : super.errors;
     }
     focusOnComponent(key) {
         const component = this.getComponent(key);

package/lib/mjs/components/Components.d.ts

@@ -256,13 +256,6 @@ export default class Components {
     static setComponents(comps: any): void;
     static addComponent(name: any, comp: any): void;
     static setComponent(name: any, comp: any): void;
-    /**
-     * Return a path of component's value.
-     * @param {Component} component - The component instance.
-     * @returns {string} - The component's value path.
-     */
-    static getComponentPath(component: Component): string;
     static create(component: any, options: any, data: any): any;
 }
 import BaseEditForm from './_classes/component/Component.form';
-import Component from './_classes/component/Component';

package/lib/mjs/components/Components.js

@@ -1,7 +1,6 @@
 import Component from './_classes/component/Component';
 import EditFormUtils from './_classes/component/editForm/utils';
 import BaseEditForm from './_classes/component/Component.form';
-import { getComponentKey, getModelType } from '../utils/utils';
 import _ from 'lodash';
 export default class Components {
     static _editFormUtils = EditFormUtils;
@@ -46,34 +45,6 @@ export default class Components {
     static setComponent(name, comp) {
         Components.components[name] = comp;
     }
-    /**
-     * Return a path of component's value.
-     * @param {Component} component - The component instance.
-     * @returns {string} - The component's value path.
-     */
-    static getComponentPath(component) {
-        let path = '';
-        const componentKey = getComponentKey(component.component);
-        if (componentKey) {
-            let thisPath = component.options?.parent || component;
-            while (thisPath && !thisPath.allowData && thisPath.parent) {
-                thisPath = thisPath.parent;
-            }
-            // TODO: any component that is nested in e.g. a Data Grid or an Edit Grid is going to receive a row prop; the problem
-            // is that options.row is passed to each further nested component, which results in erroneous paths like
-            // `editGrid[0].container[0].textField` rather than `editGrid[0].container.textField`. This should be adapted for other
-            // components with a tree-like data model
-            const rowIndex = component.row;
-            const rowIndexPath = rowIndex && !['container'].includes(thisPath.component.type) ? `[${Number.parseInt(rowIndex)}]` : '';
-            path = `${thisPath.path}${rowIndexPath}.`;
-            if (rowIndexPath && getModelType(thisPath) === 'nestedDataArray') {
-                path = `${path}data.`;
-            }
-            path += componentKey;
-            return _.trim(path, '.');
-        }
-        return path;
-    }
     static create(component, options, data) {
         let comp = null;
         if (component.type && Components.components.hasOwnProperty(component.type)) {
@@ -98,9 +69,7 @@ export default class Components {
         else {
             comp = new Component(component, options, data);
         }
-        const path = Components.getComponentPath(comp);
-        if (path) {
-            comp.path = path;
+        if (comp.path) {
             comp.componentsMap[comp.path] = comp;
         }
         return comp;

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

@@ -42,14 +42,13 @@ declare class Component extends Element {
      */
     private _hasCondition;
     /**
-     * References to dom elements
+     * The row index for this component.
      */
-    refs: {};
+    _rowIndex: number | undefined;
     /**
-     * The data path to this specific component instance.
-     * @type {string}
+     * References to dom elements
      */
-    path: string;
+    refs: {};
     /**
      * An array of all the children components errors.
      */
@@ -114,6 +113,11 @@ declare class Component extends Element {
      * @type {Component}
      */
     parent: Component;
+    /**
+     * The component paths for this component.
+     * @type {import('@formio/core').ComponentPaths} - The component paths.
+     */
+    paths: import('@formio/core').ComponentPaths;
     _path: string;
     /**
      * Determines if this component is visible, or not.
@@ -158,7 +162,7 @@ declare class Component extends Element {
      * @type {*}
      */
     info: any;
-    get componentsMap(): any;
+    get componentsMap(): object;
     set data(value: any);
     get data(): any;
     mergeSchema(component?: {}): any;
@@ -182,6 +186,17 @@ declare class Component extends Element {
      * @returns {boolean} - TRUE if the component is disabled.
      */
     get disabled(): boolean;
+    /**
+     * Set Row Index to row and update each component.
+     * @param {number} value - The row index.
+     * @returns {void}
+     */
+    set rowIndex(value: number);
+    /**
+     * Get Row Index.
+     * @returns {number} - The row index.
+     */
+    get rowIndex(): number;
     afterComponentAssign(): void;
     createAddon(addonConfiguration: any): any;
     get shouldDisabled(): any;
@@ -190,6 +205,8 @@ declare class Component extends Element {
     get hasInput(): any;
     get defaultSchema(): any;
     get key(): any;
+    set path(path: string | undefined);
+    get path(): string | undefined;
     set parentVisible(value: any);
     get parentVisible(): any;
     set parentDisabled(value: boolean);
@@ -212,7 +229,7 @@ declare class Component extends Element {
     _currentForm: any;
     get fullMode(): boolean;
     get builderMode(): boolean;
-    get calculatedPath(): string;
+    get calculatedPath(): string | undefined;
     get labelPosition(): any;
     get labelWidth(): any;
     get labelMargin(): any;
@@ -343,6 +360,12 @@ declare class Component extends Element {
      * @param {string} template - The template to use for the modal dialog.
      */
     setOpenModalElement(template?: string): void;
+    /**
+     * Renders a modal preview template and returns the markup as a string
+     * @param {object|null|undefined} ctx - The rendering context
+     * @return {string} - The modal preview markup
+     */
+    renderModalPreview(ctx: object | null | undefined): string;
     /**
      * Returns the modal preview template.
      * @returns {string} - The modal preview template.
@@ -362,6 +385,13 @@ declare class Component extends Element {
      * @returns {string} - The rendered HTML string of a component.
      */
     render(children?: string, topLevel?: boolean): string;
+    /**
+     * Creates the tooltip instance using tippy.js and returns it
+     * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip
+     * @param {object|null|undefined} settings - tippy.js options
+     * @return {import('tippy.js').Tippy} - tippy.js instance
+     */
+    createTooltip(tooltipEl: HTMLElement, settings?: object | null | undefined): import('tippy.js').Tippy;
     /**
      * Attaches all the tooltips provided the refs object.
      * @param {object} toolTipsRefs - The refs for the tooltips within your template.