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

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

@@ -31,9 +31,9 @@ const vanilla_text_mask_1 = require("@formio/vanilla-text-mask");
 const tippy_js_1 = __importDefault(require("tippy.js"));
 const lodash_1 = __importDefault(require("lodash"));
 const ismobilejs_1 = __importDefault(require("ismobilejs"));
+const core_1 = require("@formio/core");
 const Formio_1 = require("../../../Formio");
 const FormioUtils = __importStar(require("../../../utils/utils"));
-const Validator_1 = __importDefault(require("../../../validator/Validator"));
 const utils_1 = require("../../../utils/utils");
 const Element_1 = __importDefault(require("../../../Element"));
 const ComponentModal_1 = __importDefault(require("../componentModal/ComponentModal"));
@@ -191,15 +191,6 @@ class Component extends Element_1.default {
             addons: [],
         }, ...sources);
     }
-    /**
-     * Return the validator as part of the component.
-     *
-     * @return {ValidationChecker}
-     * @constructor
-     */
-    static get Validator() {
-        return Validator_1.default;
-    }
     /**
      * Return the simple condition settings as part of the component.
      *
@@ -269,16 +260,21 @@ class Component extends Element_1.default {
             this.options.components[component.type]) {
             lodash_1.default.merge(component, this.options.components[component.type]);
         }
-        /**
-         * Set the validator instance.
-         */
-        this.validator = Validator_1.default;
         /**
          * The data path to this specific component instance.
          *
          * @type {string}
          */
-        this.path = '';
+        this.path = (component === null || component === void 0 ? void 0 : component.key) || '';
+        /**
+         * An array of all the children components errors.
+         */
+        this.childErrors = [];
+        /**
+         * Last validation errors that have occured.
+         */
+        this._errors = [];
+        this._visibleErrors = [];
         /**
          * The Form.io component JSON schema.
          * @type {*}
@@ -302,11 +298,6 @@ class Component extends Element_1.default {
          * @type {*}
          */
         this._data = data || {};
-        /**
-         * The existing error that this component has.
-         * @type {string}
-         */
-        this.error = '';
         /**
          * Tool tip text after processing
          * @type {string}
@@ -317,6 +308,12 @@ class Component extends Element_1.default {
          * @type {number}
          */
         this.row = this.options.row;
+        /**
+         * Points to a flat map of child components (if applicable).
+         *
+         * @type {Object}
+         */
+        this.childComponentsMap = {};
         /**
          * Determines if this component is disabled, or not.
          *
@@ -328,8 +325,8 @@ class Component extends Element_1.default {
          *
          * @type {Component}
          */
-        this.root = this.options.root;
-        this.localRoot = this.options.localRoot;
+        this.root = this.options.root || this;
+        this.localRoot = this.options.localRoot || this;
         /**
          * If this input has been input and provided value.
          *
@@ -343,14 +340,7 @@ class Component extends Element_1.default {
          */
         this.parent = this.options.parent;
         this.options.name = this.options.name || 'data';
-        /**
-         * The validators that are assigned to this component.
-         * @type {[string]}
-         */
-        this.validators = ['required', 'minLength', 'maxLength', 'minWords', 'maxWords', 'custom', 'pattern', 'json', 'mask'];
         this._path = '';
-        // Nested forms don't have parents so we need to pass their path in.
-        this._parentPath = this.options.parentPath || '';
         // Needs for Nextgen Rules Engine
         this.resetCaches();
         /**
@@ -450,6 +440,15 @@ class Component extends Element_1.default {
         }
     }
     /* eslint-enable max-statements */
+    get componentsMap() {
+        var _a;
+        if ((_a = this.localRoot) === null || _a === void 0 ? void 0 : _a.childComponentsMap) {
+            return this.localRoot.childComponentsMap;
+        }
+        const localMap = {};
+        localMap[this.path] = this;
+        return localMap;
+    }
     get data() {
         return this._data;
     }
@@ -683,7 +682,7 @@ class Component extends Element_1.default {
         const isRightAlign = this.rightDirection(this.labelPositions[1]);
         let contentMargin = '';
         if (this.component.hideLabel) {
-            const margin = this.labelWidth + this.labelMargin;
+            const margin = isCondensed ? 0 : this.labelWidth + this.labelMargin;
             contentMargin = isRightPosition ? `margin-right: ${margin}%` : '';
             contentMargin = isLeftPosition ? `margin-left: ${margin}%` : '';
         }
@@ -765,9 +764,9 @@ class Component extends Element_1.default {
         if (text in en_1.default && params._userInput) {
             return text;
         }
-        params.data = this.rootValue;
-        params.row = this.data;
-        params.component = this.component;
+        params.data = params.data || this.rootValue;
+        params.row = params.row || this.data;
+        params.component = params.component || this.component;
         return super.t(text, params, ...args);
     }
     labelIsHidden() {
@@ -885,8 +884,7 @@ class Component extends Element_1.default {
      */
     sanitize(dirty, forceSanitize, options) {
         var _a;
-        // No need to sanitize when generating PDF'S since no users interact with the form.
-        if ((!this.shouldSanitizeValue && !forceSanitize) || ((this.options.pdf) && !forceSanitize)) {
+        if (!this.shouldSanitizeValue && !forceSanitize) {
             return dirty;
         }
         return FormioUtils.sanitize(dirty, {
@@ -1011,17 +1009,13 @@ class Component extends Element_1.default {
     getModalPreviewTemplate() {
         var _a;
         const dataValue = this.component.type === 'password' ? this.dataValue.replace(/./g, '•') : this.dataValue;
-        const message = this.error ? {
-            level: 'error',
-            message: this.error.message,
-        } : '';
         let modalLabel;
         if (this.hasInput && ((_a = this.component.validate) === null || _a === void 0 ? void 0 : _a.required) && !this.isPDFReadOnlyMode) {
             modalLabel = { className: 'field-required' };
         }
         return this.renderTemplate('modalPreview', {
             previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('Click to set value'),
-            messages: message && this.renderTemplate('message', message),
+            messages: '',
             labelInfo: modalLabel,
         });
     }
@@ -1510,6 +1504,12 @@ class Component extends Element_1.default {
     get name() {
         return this.t(this.component.label || this.component.placeholder || this.key, { _userInput: true });
     }
+    get visibleErrors() {
+        return this._visibleErrors;
+    }
+    get errors() {
+        return this._errors;
+    }
     /**
      * Returns the error label for this component.
      * @return {*}
@@ -1831,7 +1831,7 @@ class Component extends Element_1.default {
                 if (message.message && typeof message.message === 'string') {
                     message.message = message.message.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
                 }
-                return this.renderTemplate('message', message);
+                return this.renderTemplate('message', Object.assign({}, message));
             }).join(''));
         }
     }
@@ -1904,7 +1904,7 @@ class Component extends Element_1.default {
             this.addClass(this.getElement(), 'formio-modified');
         }
         // If we are supposed to validate on blur, then don't trigger validation yet.
-        if (this.component.validateOn === 'blur' && !this.errors.length) {
+        if (this.component.validateOn === 'blur') {
             flags.noValidate = true;
         }
         if (this.component.onChange) {
@@ -2421,6 +2421,10 @@ class Component extends Element_1.default {
      */
     updateOnChange(flags = {}, changed = false) {
         if (!flags.noUpdateEvent && changed) {
+            if (flags.fromSubmission) {
+                // Reset the errors when a submission has been made and allow it to revalidate.
+                this._errors = [];
+            }
             this.triggerChange(flags);
             return true;
         }
@@ -2588,7 +2592,21 @@ class Component extends Element_1.default {
         if (!this.hasInput || (!dirty && this.pristine)) {
             return '';
         }
-        return lodash_1.default.map(Validator_1.default.checkComponent(this, data), 'message').join('\n\n');
+        const validationScope = { errors: [] };
+        (0, core_1.processOneSync)({
+            component: this.component,
+            data,
+            row,
+            path: this.path || this.component.key,
+            scope: validationScope,
+            instance: this,
+            processors: [
+                core_1.validateProcessSync
+            ]
+        });
+        const errors = validationScope.errors;
+        const interpolatedErrors = FormioUtils.interpolateErrors(this.component, errors, this.t.bind(this));
+        return lodash_1.default.map(interpolatedErrors, 'message').join('\n\n');
     }
     /**
      * Returns if the component is valid or not.
@@ -2600,15 +2618,83 @@ class Component extends Element_1.default {
     isValid(data, dirty) {
         return !this.invalidMessage(data, dirty);
     }
-    setComponentValidity(messages, dirty, silentCheck) {
-        const hasErrors = !!messages.filter(message => message.level === 'error' && !message.fromServer).length;
-        if (messages.length && (!silentCheck || this.error) && (!this.isEmpty(this.defaultValue) || dirty || !this.pristine)) {
-            this.setCustomValidity(messages, dirty);
+    setComponentValidity(errors, dirty, silentCheck) {
+        if (silentCheck) {
+            return [];
         }
-        else if (!silentCheck) {
-            this.setCustomValidity('');
+        const messages = errors.filter(message => !message.fromServer);
+        if (errors.length && !!messages.length && (!this.isEmpty(this.defaultValue) || dirty || !this.pristine)) {
+            return this.setCustomValidity(messages, dirty);
+        }
+        else {
+            return this.setCustomValidity('');
         }
-        return !hasErrors;
+    }
+    /**
+     * Interpolate errors from the validation methods.
+     * @param {*} errors
+     * @returns
+     */
+    interpolateErrors(errors) {
+        var _a;
+        const interpolatedErrors = FormioUtils.interpolateErrors(this.component, errors, this.t.bind(this));
+        return ((_a = this.serverErrors) === null || _a === void 0 ? void 0 : _a.length) ? [...interpolatedErrors, ...this.serverErrors] : interpolatedErrors;
+    }
+    /**
+     * 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, data, row, flags) {
+        if (flags.silentCheck) {
+            return [];
+        }
+        if (this.options.alwaysDirty) {
+            flags.dirty = true;
+        }
+        if (flags.fromSubmission && this.hasValue(data)) {
+            flags.dirty = true;
+        }
+        this.setDirty(flags.dirty);
+        return this.setComponentValidity(errors, flags.dirty, flags.silentCheck, flags.fromSubmission);
+    }
+    /**
+     * 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, row, flags = {}) {
+        data = data || this.rootValue;
+        row = row || this.data;
+        const { async = false } = flags;
+        if (this.shouldSkipValidation(data, row, flags)) {
+            return async ? Promise.resolve([]) : [];
+        }
+        const processContext = {
+            component: this.component,
+            data,
+            row,
+            path: this.path || this.component.key,
+            instance: this,
+            scope: { errors: [] },
+            processors: [
+                async ? core_1.validateProcess : core_1.validateProcessSync
+            ]
+        };
+        if (async) {
+            return (0, core_1.processOne)(processContext).then(() => {
+                this._errors = this.interpolateErrors(processContext.scope.errors);
+                return this._errors;
+            });
+        }
+        (0, core_1.processOneSync)(processContext);
+        this._errors = this.interpolateErrors(processContext.scope.errors);
+        return this._errors;
     }
     /**
      * Checks the validity of this component and sets the error message if it is invalid.
@@ -2618,33 +2704,47 @@ class Component extends Element_1.default {
      * @param row
      * @return {boolean}
      */
-    checkComponentValidity(data, dirty, row, options = {}) {
-        var _a;
+    checkComponentValidity(data, dirty, row, flags = {}, allErrors = []) {
         data = data || this.rootValue;
         row = row || this.data;
-        const { async = false, silentCheck = false } = options;
-        if (this.shouldSkipValidation(data, dirty, row)) {
-            this.setCustomValidity('');
-            return async ? Promise.resolve(true) : true;
+        flags.dirty = dirty || false;
+        if (flags.async) {
+            return this.validateComponent(data, row, flags).then((errors) => {
+                allErrors.push(...errors);
+                if (this.parent && this.parent.childErrors) {
+                    this.parent.childErrors.push(...errors);
+                }
+                this.showValidationErrors(errors, data, row, flags);
+                return errors.length === 0;
+            });
         }
-        const check = Validator_1.default.checkComponent(this, data, row, true, async);
-        let validations = check;
-        if ((_a = this.serverErrors) === null || _a === void 0 ? void 0 : _a.length) {
-            validations = check.concat(this.serverErrors);
+        else {
+            const errors = this.validateComponent(data, row, flags);
+            this.showValidationErrors(errors, data, row, flags);
+            allErrors.push(...errors);
+            if (this.parent && this.parent.childErrors) {
+                this.parent.childErrors.push(...errors);
+            }
+            return errors.length === 0;
         }
-        return async ?
-            validations.then((messages) => this.setComponentValidity(messages, dirty, silentCheck)) :
-            this.setComponentValidity(validations, dirty, silentCheck);
     }
-    checkValidity(data, dirty, row, silentCheck) {
+    /**
+     * Checks the validity of the component.
+     * @param {*} data
+     * @param {*} dirty
+     * @param {*} row
+     * @param {*} silentCheck
+     * @returns
+     */
+    checkValidity(data, dirty, row, silentCheck, errors = []) {
         data = data || this.rootValue;
         row = row || this.data;
-        const isValid = this.checkComponentValidity(data, dirty, row, { silentCheck });
-        this.checkModal();
-        return isValid;
+        console.log('Deprecation warning:  Component.checkValidity() will be deprecated in 6.x version of renderer. Use Component.validateComponent instead.');
+        return this.checkComponentValidity(data, dirty, row, { silentCheck }, errors);
     }
-    checkAsyncValidity(data, dirty, row, silentCheck) {
-        return Promise.resolve(this.checkComponentValidity(data, dirty, row, { async: true, silentCheck }));
+    checkAsyncValidity(data, dirty, row, silentCheck, errors = []) {
+        console.log('Deprecation warning:  Component.checkAsyncValidity() will be deprecated in 6.x version of renderer. Use Component.validateComponent instead.');
+        return this.checkComponentValidity(data, dirty, row, { async: true, silentCheck }, errors);
     }
     /**
      * Check the conditions, calculations, and validity of a single component and triggers an update if
@@ -2672,35 +2772,15 @@ class Component extends Element_1.default {
         if (this.id !== flags.triggeredComponentId) {
             this.calculateComponentValue(data, flags, row);
         }
-        if (flags.noValidate && !flags.validateOnInit && !flags.fromIframe) {
-            if (flags.fromSubmission && this.rootPristine && this.pristine && this.error && flags.changed) {
-                this.checkComponentValidity(data, !!this.options.alwaysDirty, row, true);
-            }
-            return true;
-        }
-        let isDirty = false;
-        // We need to set dirty if they explicitly set noValidate to false.
-        if (this.options.alwaysDirty || flags.dirty) {
-            isDirty = true;
-        }
-        // See if they explicitely set the values with setSubmission.
-        if (flags.fromSubmission && this.hasValue(data)) {
-            isDirty = true;
-        }
-        this.setDirty(isDirty);
-        if (this.component.validateOn === 'blur' && flags.fromSubmission) {
-            return true;
-        }
-        const isValid = this.checkComponentValidity(data, isDirty, row, flags);
-        this.checkModal();
-        return isValid;
     }
-    checkModal(isValid = true, dirty = false) {
+    checkModal(errors = [], dirty = false) {
+        const messages = errors.filter(error => !error.fromServer);
+        const isValid = errors.length === 0;
         if (!this.component.modalEdit || !this.componentModal) {
             return;
         }
         if (dirty && !isValid) {
-            this.setErrorClasses([this.refs.openModal], dirty, !isValid, !!this.errors.length, this.refs.openModalWrapper);
+            this.setErrorClasses([this.refs.openModal], dirty, !isValid, !!messages.length, this.refs.openModalWrapper);
         }
         else {
             this.clearErrorClasses(this.refs.openModalWrapper);
@@ -2724,9 +2804,6 @@ class Component extends Element_1.default {
     validateMultiple() {
         return true;
     }
-    get errors() {
-        return this.error ? [this.error] : [];
-    }
     clearErrorClasses(element = this.element) {
         this.removeClass(element, this.options.componentErrorClass);
         this.removeClass(element, 'alert alert-danger');
@@ -2773,12 +2850,14 @@ class Component extends Element_1.default {
             });
         });
     }
+    // eslint-disable-next-line max-statements
     setCustomValidity(messages, dirty, external) {
         const inputRefs = this.isInputComponent ? this.refs.input || [] : null;
         if (typeof messages === 'string' && messages) {
             messages = {
                 level: 'error',
                 message: messages,
+                component: this.component,
             };
         }
         if (!Array.isArray(messages)) {
@@ -2789,19 +2868,20 @@ class Component extends Element_1.default {
                 messages = [];
             }
         }
-        const hasErrors = !!messages.filter(message => message.level === 'error').length;
+        const errors = messages.filter(message => message.level === 'error');
         let invalidInputRefs = inputRefs;
+        // Filter the invalid input refs in multiple components
         if (this.component.multiple) {
-            const inputRefsArray = Array.from(inputRefs);
-            inputRefsArray.forEach((input) => {
+            const refsArray = Array.from(inputRefs);
+            refsArray.forEach((input) => {
                 this.setElementInvalid(this.performInputMapping(input), false);
             });
-            this.setInputWidgetErrorClasses(inputRefsArray, false);
-            invalidInputRefs = inputRefsArray.filter((ref) => {
+            this.setInputWidgetErrorClasses(refsArray, false);
+            invalidInputRefs = refsArray.filter((ref, index) => {
                 var _a;
                 return (_a = messages.some) === null || _a === void 0 ? void 0 : _a.call(messages, (msg) => {
                     var _a;
-                    return ((_a = msg === null || msg === void 0 ? void 0 : msg.context) === null || _a === void 0 ? void 0 : _a.input) === ref;
+                    return ((_a = msg === null || msg === void 0 ? void 0 : msg.context) === null || _a === void 0 ? void 0 : _a.index) === index;
                 });
             });
         }
@@ -2809,40 +2889,32 @@ class Component extends Element_1.default {
             if (this.refs.messageContainer) {
                 this.empty(this.refs.messageContainer);
             }
-            this.error = {
+            this.emit('componentError', {
+                instance: this,
                 component: this.component,
                 message: messages[0].message,
                 messages,
                 external: !!external,
-            };
-            this.emit('componentError', this.error);
+            });
             this.addMessages(messages, dirty, invalidInputRefs);
             if (invalidInputRefs) {
-                this.setErrorClasses(invalidInputRefs, dirty, hasErrors, !!messages.length);
+                this.setErrorClasses(invalidInputRefs, dirty, !!errors.length, !!messages.length);
             }
         }
-        else if (!this.error || (this.error && this.error.external === !!external)) {
+        else if (!errors.length || (errors[0].external === !!external)) {
             if (this.refs.messageContainer) {
                 this.empty(this.refs.messageContainer);
             }
             if (this.refs.modalMessageContainer) {
                 this.empty(this.refs.modalMessageContainer);
             }
-            this.error = null;
             if (invalidInputRefs) {
-                this.setErrorClasses(invalidInputRefs, dirty, hasErrors, !!messages.length);
+                this.setErrorClasses(invalidInputRefs, dirty, !!errors.length, !!messages.length);
             }
             this.clearErrorClasses();
         }
-        // if (!this.refs.input) {
-        //   return;
-        // }
-        // this.refs.input.forEach(input => {
-        //   input = this.performInputMapping(input);
-        //   if (typeof input.setCustomValidity === 'function') {
-        //     input.setCustomValidity(message, dirty);
-        //   }
-        // });
+        this._visibleErrors = messages;
+        return messages;
     }
     /**
      * Determines if the value of this component is hidden from the user as if it is coming from the server, but is
@@ -2862,8 +2934,10 @@ class Component extends Element_1.default {
         }
         return (this.component.protected || !this.component.persistent || (this.component.persistent === 'client-only'));
     }
-    shouldSkipValidation(data, dirty, row) {
+    shouldSkipValidation(data, row, flags = {}) {
         const rules = [
+            // Do not validate if the flags say not too.
+            () => flags.noValidate,
             // Do not check custom validation for empty data if it is not required
             () => this.component.validate.custom && !this.dataValue && !this.component.validate.required,
             // Force valid if component is read-only

package/lib/cjs/components/_classes/component/editForm/Component.edit.addons.d.ts

@@ -6,6 +6,10 @@ declare const _default: {
     input: boolean;
     key: string;
     label: string;
+    templates: {
+        header: string;
+        row: string;
+    };
     components: ({
         type: string;
         key: string;
@@ -600,6 +604,7 @@ declare const _default: {
             multiple?: undefined;
             hideLabel?: undefined;
         })[];
+        tableView: boolean;
         defaultValue: {
             data: {
                 rulesSettings: {
@@ -640,6 +645,9 @@ declare const _default: {
             }[];
         };
         input: boolean;
+        validate: {
+            required: boolean;
+        };
     })[];
 }[];
 export default _default;

package/lib/cjs/components/_classes/component/editForm/Component.edit.addons.js

@@ -14,6 +14,33 @@ exports.default = [
         input: true,
         key: 'addons',
         label: 'Addons',
+        templates: {
+            // eslint-disable-next-line quotes
+            header: `<div class="row">
+                <div class="col-6">{{ t(components[0].label) }}</div>
+                <div class="col-4">Settings</div>
+              </div>`,
+            // eslint-disable-next-line quotes
+            row: `<div class="row">
+              <div class="col-6">
+                {{ row.name.label }}
+              </div>
+              <div class="col-4 text-muted">
+                Click Edit to see addon's settings
+              </div>
+
+              {% if (!instance.options.readOnly && !instance.disabled) { %}
+                <div class="col-2">
+                  <div class="btn-group pull-right">
+                    <button class="btn btn-default btn-light btn-sm editRow"><i class="{{ iconClass('edit') }}"></i></button>
+                    {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}
+                      <button class="btn btn-danger btn-sm removeRow"><i class="{{ iconClass('trash') }}"></i></button>
+                    {% } %}
+                  </div>
+                </div>
+              {% } %}
+            </div>`,
+        },
         components: [
             {
                 label: 'Name',
@@ -38,7 +65,10 @@ exports.default = [
                         }));
                     },
                 },
-                input: true
+                input: true,
+                validate: {
+                    required: true,
+                },
             },
             ...addons_1.editForms,
         ]