@formio/js 5.0.0-rc.26 → 5.0.0-rc.28

package/lib/cjs/Wizard.js

@@ -181,7 +181,10 @@ class Wizard extends Webform_1.default {
         return this.renderTemplate('wizardNav', ctx);
     }
     prepareHeaderSettings(ctx, headerType) {
-        if (this.currentPanel && this.currentPanel.breadcrumb === 'none' || ctx.isSubForm) {
+        var _a;
+        const shouldHideBreadcrumbs = ((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.breadcrumb) === 'none' ||
+            lodash_1.default.get(this.form, 'settings.wizardBreadcrumbsType', '') === 'none';
+        if (shouldHideBreadcrumbs || ctx.isSubForm) {
             return null;
         }
         return this.renderTemplate(headerType, ctx);
@@ -577,6 +580,7 @@ class Wizard extends Webform_1.default {
             }
             this.redraw().then(() => {
                 this.checkData(this.submission.data);
+                this.validateCurrentPage();
             });
             return Promise.resolve();
         }
@@ -674,7 +678,8 @@ class Wizard extends Webform_1.default {
             });
         }
         // Validate the form, before go to the next page
-        if (this.checkValidity(this.localData, true, this.localData, true)) {
+        const errors = this.validateCurrentPage({ dirty: true });
+        if (errors.length === 0) {
             this.checkData(this.submission.data);
             return this.beforePage(true).then(() => {
                 return this.setPage(this.getNextPage()).then(() => {
@@ -689,9 +694,14 @@ class Wizard extends Webform_1.default {
         else {
             this.currentPage.components.forEach((comp) => comp.setPristine(false));
             this.scrollIntoView(this.element);
-            return Promise.reject(this.showErrors([], true));
+            return Promise.reject(this.showErrors(errors, true));
         }
     }
+    validateCurrentPage(flags = {}) {
+        var _a;
+        // Accessing the parent ensures the right instance (whether it's the parent Wizard or a nested Wizard) performs its validation
+        return (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.parent.validateComponents(this.currentPage.component.components, this.currentPage.parent.data, flags);
+    }
     emitPrevPage() {
         this.emit('prevPage', { page: this.page, submission: this.submission });
     }
@@ -768,7 +778,7 @@ class Wizard extends Webform_1.default {
         return super.setForm(form, flags);
     }
     onSetForm(clonedForm, initialForm) {
-        this.component.components = (this._parentPath ? initialForm.components : clonedForm.components) || [];
+        this.component.components = (this.parent ? initialForm.components : clonedForm.components) || [];
         this.setComponentSchema();
     }
     setEditMode(submission) {
@@ -781,7 +791,9 @@ class Wizard extends Webform_1.default {
         const changed = this.getPages({ all: true }).reduce((changed, page) => {
             return this.setNestedValue(page, submission.data, flags, changed) || changed;
         }, false);
-        if (!flags.sanitize) {
+        if (!flags.sanitize ||
+            (flags && flags.fromSubmission && (this.prefixComps.length || this.suffixComps.length) && submission._id) ||
+            (this.options.server && (this.prefixComps.length || this.suffixComps.length))) {
             this.mergeData(this.data, submission.data);
         }
         if (changed) {
@@ -833,9 +845,9 @@ class Wizard extends Webform_1.default {
     onChange(flags, changed, modified, changes) {
         var _a, _b;
         super.onChange(flags, changed, modified, changes);
-        if (this.alert && !this.submitted) {
-            this.checkValidity(this.localData, false, this.localData, true);
-            this.showErrors([], true, true);
+        const errors = this.validate(this.localData, { dirty: false });
+        if (this.alert) {
+            this.showErrors(errors, true, true);
         }
         // If the pages change, need to redraw the header.
         let currentPanels;
@@ -872,7 +884,7 @@ class Wizard extends Webform_1.default {
         }
         return super.redraw();
     }
-    checkValidity(data, dirty, row, currentPageOnly) {
+    checkValidity(data, dirty, row, currentPageOnly, childErrors = []) {
         if (!this.checkCondition(row, data)) {
             this.setCustomValidity('');
             return true;
@@ -880,7 +892,7 @@ class Wizard extends Webform_1.default {
         const components = !currentPageOnly || this.isLastPage()
             ? this.getComponents()
             : this.currentPage.components;
-        return components.reduce((check, comp) => comp.checkValidity(data, dirty, row) && check, true);
+        return components.reduce((check, comp) => comp.checkValidity(data, dirty, row, childErrors) && check, true);
     }
     get errors() {
         if (!this.isLastPage()) {
@@ -889,23 +901,22 @@ class Wizard extends Webform_1.default {
         return super.errors;
     }
     focusOnComponent(key) {
-        let pageIndex = 0;
-        const [page] = this.pages.filter((page, index) => {
-            let hasComponent = false;
-            page.getComponent(key, (comp) => {
-                if (comp.path === key) {
-                    pageIndex = index;
-                    hasComponent = true;
+        const component = this.getComponent(key);
+        if (component) {
+            let topPanel = component.parent;
+            while (!(topPanel.parent instanceof Wizard)) {
+                topPanel = topPanel.parent;
+            }
+            const pageIndex = this.pages.findIndex(page => page === topPanel);
+            if (pageIndex >= 0) {
+                const page = this.pages[pageIndex];
+                if (page && page !== this.currentPage) {
+                    return this.setPage(pageIndex).then(() => {
+                        this.showErrors(this.validate(this.localData, { dirty: true }));
+                        super.focusOnComponent(key);
+                    });
                 }
-            });
-            return hasComponent;
-        });
-        if (page && page !== this.currentPage) {
-            return this.setPage(pageIndex).then(() => {
-                this.checkValidity(this.submission.data, true, this.submission.data);
-                this.showErrors();
-                super.focusOnComponent(key);
-            });
+            }
         }
         return super.focusOnComponent(key);
     }

package/lib/cjs/WizardBuilder.d.ts

@@ -9,6 +9,7 @@ export default class WizardBuilder extends WebformBuilder {
         }[];
     };
     page: number;
+    removeComponent(component: any, parent: any, original: any): boolean | undefined;
     allowDrop(element: any): boolean;
     get pages(): any;
     get currentPage(): any;

package/lib/cjs/addons/PasswordStrength/PasswordStrengthAddon.d.ts

@@ -698,8 +698,7 @@ export default class PasswordStrengthAddon extends FormioAddon {
      * @param {string} value - Suggested password
      */
     checkValidity(value: string): boolean;
-    errors: any[] | undefined;
-    handleBlackListCheckResult(result: any): void;
+    handleBlackListCheckResult(result: any, errors: any): void;
     levels: any[];
     maxEntropy: any;
     attach(element: any): void;

package/lib/cjs/addons/PasswordStrength/PasswordStrengthAddon.js

@@ -268,30 +268,29 @@ class PasswordStrengthAddon extends FormioAddon_1.default {
         var _a;
         const passwordLength = value.length;
         const { charactersPoolSize, errors } = this.performChecks(value);
-        this.errors = errors;
         const entropy = this.calculatePasswordEntropy(passwordLength, charactersPoolSize);
         const blackListCheck = ((_a = this.settings.blackList) === null || _a === void 0 ? void 0 : _a.length) || this.settings.customBlacklistedWords ?
             this.checkBlackList(value)
             : null;
+        const isValid = this.isValid();
+        if (!isValid) {
+            errors.push({
+                message: 'Password is not strong enough',
+                level: this.settings.required ? 'error' : 'warning'
+            });
+        }
         // If there were found some words from the black list
         if (blackListCheck && blackListCheck !== true) {
-            this.handleBlackListCheckResult(blackListCheck);
+            this.handleBlackListCheckResult(blackListCheck, errors);
             // Select the mininal entropy based on the dictionary check or symbolic check
             this.entropy = Math.min(entropy, blackListCheck.entropy);
         }
         else {
             this.entropy = entropy;
         }
-        const isValid = this.isValid();
-        if (!isValid) {
-            this.errors.push({
-                message: 'Password is not strong enough',
-                level: this.settings.required ? 'error' : 'warning'
-            });
-        }
-        return !this.errors.length;
+        return !errors.length;
     }
-    handleBlackListCheckResult(result) {
+    handleBlackListCheckResult(result, errors) {
         const blacklistedWords = result.blacklistedWords;
         const isRequired = this.settings.disableBlacklistedWords;
         const message = `Password ${isRequired ? 'must' : 'should'} not include common words: ${blacklistedWords.join(', ')}`;
@@ -299,7 +298,7 @@ class PasswordStrengthAddon extends FormioAddon_1.default {
             name: 'blacklist',
             required: isRequired,
         };
-        this.handleRuleCheckResult(false, validation, message, this.errors);
+        this.handleRuleCheckResult(false, validation, message, errors);
     }
     constructor(settings, componentInstance) {
         super(settings, componentInstance);

package/lib/cjs/addons/index.d.ts

@@ -592,6 +592,7 @@ export const editForms: {
         multiple?: undefined;
         hideLabel?: undefined;
     })[];
+    tableView: boolean;
     defaultValue: {
         data: {
             rulesSettings: {

package/lib/cjs/addons/index.js

@@ -12,7 +12,11 @@ exports.editForms = [
     key: 'settings',
     display: 'form',
     input: true,
-    components,
+    components: components.map((comp) => {
+        comp.tableView = false;
+        return comp;
+    }),
+    tableView: false,
     defaultValue: {
         data: defaultSettings
     },

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

@@ -253,6 +253,13 @@ 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 {Object} component - The component instance.
+     * @return {string} - The component's value path.
+     */
+    static getComponentPath(component: Object): string;
     static create(component: any, options: any, data: any): any;
 }
 import BaseEditForm from './_classes/component/Component.form';

package/lib/cjs/components/Components.js

@@ -48,6 +48,31 @@ class Components {
     static setComponent(name, comp) {
         Components.components[name] = comp;
     }
+    /**
+     * Return a path of component's value.
+     *
+     * @param {Object} component - The component instance.
+     * @return {string} - The component's value path.
+     */
+    static getComponentPath(component) {
+        var _a;
+        let path = '';
+        if (component.component.key) {
+            let thisPath = ((_a = component.options) === null || _a === void 0 ? void 0 : _a.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}.`;
+            path += component.component.key;
+            return lodash_1.default.trim(path, '.');
+        }
+    }
     static create(component, options, data) {
         let comp = null;
         if (component.type && Components.components.hasOwnProperty(component.type)) {
@@ -72,6 +97,11 @@ class Components {
         else {
             comp = new Component_1.default(component, options, data);
         }
+        const path = Components.getComponentPath(comp);
+        if (path) {
+            comp.path = path;
+            comp.componentsMap[comp.path] = comp;
+        }
         return comp;
     }
 }

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

@@ -47,16 +47,21 @@ declare class Component extends Element {
      * References to dom elements
      */
     refs: {};
-    /**
-     * Set the validator instance.
-     */
-    validator: import("../../../validator/Validator").ValidationChecker;
     /**
      * The data path to this specific component instance.
      *
      * @type {string}
      */
     path: string;
+    /**
+     * An array of all the children components errors.
+     */
+    childErrors: any[];
+    /**
+     * Last validation errors that have occured.
+     */
+    _errors: any[];
+    _visibleErrors: any[];
     /**
      * The Form.io component JSON schema.
      * @type {*}
@@ -76,11 +81,6 @@ declare class Component extends Element {
      * @type {*}
      */
     _data: any;
-    /**
-     * The existing error that this component has.
-     * @type {string}
-     */
-    error: string;
     /**
      * Tool tip text after processing
      * @type {string}
@@ -91,6 +91,12 @@ declare class Component extends Element {
      * @type {number}
      */
     row: number;
+    /**
+     * Points to a flat map of child components (if applicable).
+     *
+     * @type {Object}
+     */
+    childComponentsMap: Object;
     /**
      * Determines if this component is disabled, or not.
      *
@@ -116,13 +122,7 @@ declare class Component extends Element {
      * @type {Component}
      */
     parent: Component;
-    /**
-     * The validators that are assigned to this component.
-     * @type {[string]}
-     */
-    validators: [string];
     _path: string;
-    _parentPath: any;
     /**
      * Determines if this component is visible, or not.
      */
@@ -164,6 +164,7 @@ declare class Component extends Element {
      * @type {*}
      */
     info: any;
+    get componentsMap(): any;
     set data(arg: any);
     get data(): any;
     mergeSchema(component?: {}): any;
@@ -405,6 +406,8 @@ declare class Component extends Element {
      * @returns {string} - The name of the component.
      */
     get name(): string;
+    get visibleErrors(): any[];
+    get errors(): any[];
     /**
      * Returns the error label for this component.
      * @return {*}
@@ -699,7 +702,30 @@ declare class Component extends Element {
      * @return {boolean}
      */
     isValid(data: any, dirty: any): boolean;
-    setComponentValidity(messages: any, dirty: any, silentCheck: any): boolean;
+    setComponentValidity(errors: any, dirty: any, silentCheck: any): any;
+    /**
+     * Interpolate errors from the validation methods.
+     * @param {*} errors
+     * @returns
+     */
+    interpolateErrors(errors: any): any[];
+    /**
+     * Show component validation errors.
+     * @param {*} errors - An array of errors that have occured.
+     * @param {*} data - The root submission data.
+     * @param {*} row - The contextual row data.
+     * @param {*} flags - The flags to perform validation.
+     * @returns
+     */
+    showValidationErrors(errors: any, data: any, row: any, flags: any): any;
+    /**
+     * Perform a component validation.
+     * @param {*} data - The root data you wish to use for this component.
+     * @param {*} row - The contextual row data you wish to use for this component.
+     * @param {*} flags - The flags to control the behavior of the validation.
+     * @returns
+     */
+    validateComponent(data: any, row: any, flags?: any): any[] | Promise<any[]>;
     /**
      * Checks the validity of this component and sets the error message if it is invalid.
      *
@@ -708,9 +734,17 @@ declare class Component extends Element {
      * @param row
      * @return {boolean}
      */
-    checkComponentValidity(data: any, dirty: any, row: any, options?: {}): boolean;
-    checkValidity(data: any, dirty: any, row: any, silentCheck: any): boolean;
-    checkAsyncValidity(data: any, dirty: any, row: any, silentCheck: any): Promise<boolean>;
+    checkComponentValidity(data: any, dirty: any, row: any, flags?: {}, allErrors?: any[]): boolean;
+    /**
+     * Checks the validity of the component.
+     * @param {*} data
+     * @param {*} dirty
+     * @param {*} row
+     * @param {*} silentCheck
+     * @returns
+     */
+    checkValidity(data: any, dirty: any, row: any, silentCheck: any, errors?: any[]): boolean;
+    checkAsyncValidity(data: any, dirty: any, row: any, silentCheck: any, errors?: any[]): boolean;
     /**
      * Check the conditions, calculations, and validity of a single component and triggers an update if
      * something changed.
@@ -720,8 +754,8 @@ declare class Component extends Element {
      *
      * @return boolean - If component is valid or not.
      */
-    checkData(data: any, flags: any, row: any): boolean;
-    checkModal(isValid?: boolean, dirty?: boolean): void;
+    checkData(data: any, flags: any, row: any): true | undefined;
+    checkModal(errors?: any[], dirty?: boolean): void;
     get validationValue(): any;
     isEmpty(value?: any): any;
     isEqual(valueA: any, valueB?: any): any;
@@ -731,11 +765,10 @@ declare class Component extends Element {
      * @return {boolean}
      */
     validateMultiple(): boolean;
-    get errors(): string[];
     clearErrorClasses(element?: any): void;
     setInputWidgetErrorClasses(inputRefs: any, hasErrors: any): void;
     addFocusBlurEvents(element: any): void;
-    setCustomValidity(messages: any, dirty: any, external: any): void;
+    setCustomValidity(messages: any, dirty: any, external: any): any;
     /**
      * Determines if the value of this component is hidden from the user as if it is coming from the server, but is
      * protected.
@@ -743,7 +776,7 @@ declare class Component extends Element {
      * @return {boolean|*}
      */
     isValueHidden(): boolean | any;
-    shouldSkipValidation(data: any, dirty: any, row: any): boolean;
+    shouldSkipValidation(data: any, row: any, flags?: {}): boolean;
     whenReady(): Promise<void>;
     get dataReady(): Promise<void>;
     /**
@@ -786,9 +819,6 @@ declare class Component extends Element {
     get previewMode(): boolean;
 }
 declare namespace Component {
-    class Validator {
-        private constructor();
-    }
     const externalLibraries: {};
     function requireLibrary(name: any, property: any, src: any, polling: any): any;
     function libraryReady(name: any): any;