@formio/js 5.2.3 → 5.2.4-rc.0

package/lib/mjs/Wizard.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import Webform from './Webform';
 import { Formio } from './Formio';
-import { fastCloneDeep, checkCondition, firstNonNil, uniqueKey, eachComponent, } from './utils';
+import { fastCloneDeep, checkCondition, firstNonNil, uniqueKey, eachComponent } from './utils';
 export default class Wizard extends Webform {
     /**
      * Constructor for wizard-based forms.
@@ -30,7 +30,9 @@ export default class Wizard extends Webform {
         this.page = 0;
         this.currentPanel = null;
         this.currentNextPage = 0;
-        this._seenPages = [0];
+        this._seenPages = [
+            0,
+        ];
         this.subWizards = [];
         this.allPages = [];
         this.lastPromise = Promise.resolve();
@@ -48,8 +50,7 @@ export default class Wizard extends Webform {
     getPages(args = {}) {
         const { all = false } = args;
         const pages = this.hasSubWizards ? this.components : this.pages;
-        const filteredPages = pages
-            .filter(all ? _.identity : (p, index) => this._seenPages.includes(index));
+        const filteredPages = pages.filter(all ? _.identity : (p, index) => this._seenPages.includes(index));
         return filteredPages;
     }
     get hasSubWizards() {
@@ -73,9 +74,7 @@ export default class Wizard extends Webform {
         });
     }
     getComponents() {
-        return this.submitting
-            ? this.getPages({ all: this.isLastPage() })
-            : super.getComponents();
+        return this.submitting ? this.getPages({ all: this.isLastPage() }) : super.getComponents();
     }
     resetValue() {
         this.getPages({ all: true }).forEach((page) => page.resetValue());
@@ -87,10 +86,10 @@ export default class Wizard extends Webform {
             showPrevious: true,
             showNext: true,
             showSubmit: true,
-            showCancel: !this.options.readOnly
+            showCancel: !this.options.readOnly,
         });
         this.options.breadcrumbSettings = _.defaults(this.options.breadcrumbSettings, {
-            clickable: true
+            clickable: true,
         });
         this.options.allowPrevious = this.options.allowPrevious || false;
         this.page = 0;
@@ -100,7 +99,7 @@ export default class Wizard extends Webform {
             this.component = this.pages[this.page].component;
         }
         this.on('subWizardsUpdated', (subForm) => {
-            const subWizard = this.subWizards.find(subWizard => subForm?.id && subWizard.subForm?.id === subForm?.id);
+            const subWizard = this.subWizards.find((subWizard) => subForm?.id && subWizard.subForm?.id === subForm?.id);
             if (this.subWizards.length && subWizard) {
                 subWizard.subForm.setValue(subForm._submission, {}, true);
                 this.establishPages();
@@ -124,7 +123,7 @@ export default class Wizard extends Webform {
             { name: 'cancel', method: 'cancel' },
             { name: 'previous', method: 'prevPage' },
             { name: 'next', method: 'nextPage' },
-            { name: 'submit', method: 'submit' }
+            { name: 'submit', method: 'submit' },
         ].forEach((button) => {
             if (this.hasButton(button.name)) {
                 buttons[button.name] = button;
@@ -137,9 +136,9 @@ export default class Wizard extends Webform {
             'cancel',
             'previous',
             'next',
-            'submit'
+            'submit',
         ];
-        return this.options.properties?.wizardButtonOrder?.toLowerCase().split(', ') ?? defaultButtonOrder;
+        return (this.options.properties?.wizardButtonOrder?.toLowerCase().split(', ') ?? defaultButtonOrder);
     }
     get renderContext() {
         return {
@@ -147,7 +146,9 @@ export default class Wizard extends Webform {
             wizardKey: this.wizardKey,
             isBreadcrumbClickable: this.isBreadcrumbClickable(),
             isSubForm: !!this.parent && !this.root?.component?.type === 'wizard',
-            panels: this.allPages.length ? this.allPages.map(page => page.component) : this.pages.map(page => page.component),
+            panels: this.allPages.length
+                ? this.allPages.map((page) => page.component)
+                : this.pages.map((page) => page.component),
             buttons: this.buttons,
             currentPage: this.page,
             buttonOrder: this.buttonOrder,
@@ -157,8 +158,10 @@ export default class Wizard extends Webform {
         const currentPanel = this.currentPanel;
         if (currentPanel && currentPanel.buttonSettings) {
             Object.keys(currentPanel.buttonSettings).forEach(() => {
-                Object.keys(ctx.buttons).forEach(key => {
-                    if (typeof currentPanel.buttonSettings[key] !== 'undefined' && !currentPanel.buttonSettings[key] || ctx.isSubForm) {
+                Object.keys(ctx.buttons).forEach((key) => {
+                    if ((typeof currentPanel.buttonSettings[key] !== 'undefined' &&
+                        !currentPanel.buttonSettings[key]) ||
+                        ctx.isSubForm) {
                         ctx.buttons[key] = null;
                     }
                 });
@@ -177,7 +180,7 @@ export default class Wizard extends Webform {
     render() {
         const ctx = this.renderContext;
         if (this.component.id) {
-            ctx.panels.forEach(panel => {
+            ctx.panels.forEach((panel) => {
                 if (panel.id === this.component.id) {
                     this.currentPanel = panel;
                     ctx.wizardPageTooltip = this.getFormattedTooltip(panel.tooltip);
@@ -198,7 +201,7 @@ export default class Wizard extends Webform {
             components: this.renderComponents([
                 ...this.prefixComps,
                 ...this.currentPage.components,
-                ...this.suffixComps
+                ...this.suffixComps,
             ]),
         }, this.builderMode ? 'builder' : 'form');
     }
@@ -228,7 +231,7 @@ export default class Wizard extends Webform {
                 headerElement = this.element.querySelector(`#${this.wizardKey}-header`);
                 this.loadRefs(headerElement, {
                     [`${this.wizardKey}-link`]: 'multiple',
-                    [`${this.wizardKey}-tooltip`]: 'multiple'
+                    [`${this.wizardKey}-tooltip`]: 'multiple',
                 });
                 this.attachHeader();
             }
@@ -251,7 +254,7 @@ export default class Wizard extends Webform {
             [`${this.wizardKey}-next`]: 'single',
             [`${this.wizardKey}-submit`]: 'single',
             [`${this.wizardKey}-link`]: 'multiple',
-            [`${this.wizardKey}-tooltip`]: 'multiple'
+            [`${this.wizardKey}-tooltip`]: 'multiple',
         });
         if ((this.options.readOnly || this.editMode) && !this.enabledIndex) {
             this.enabledIndex = this.pages?.length - 1;
@@ -285,7 +288,7 @@ export default class Wizard extends Webform {
     }
     isBreadcrumbClickable() {
         let currentPage = null;
-        this.pages.map(page => {
+        this.pages.map((page) => {
             if (_.isEqual(this.currentPage.component, page.component)) {
                 currentPage = page;
             }
@@ -300,7 +303,7 @@ export default class Wizard extends Webform {
     }
     isAllowPrevious() {
         let currentPage = null;
-        this.pages.map(page => {
+        this.pages.map((page) => {
             if (_.isEqual(this.currentPage.component, page.component)) {
                 currentPage = page;
             }
@@ -348,10 +351,12 @@ export default class Wizard extends Webform {
                 buttonElement.setAttribute('disabled', 'disabled');
                 this.setLoading(buttonElement, true);
                 // Call the button method, then re-enable the button.
-                this[button.method]().then(() => {
+                this[button.method]()
+                    .then(() => {
                     buttonElement.removeAttribute('disabled');
                     this.setLoading(buttonElement, false);
-                }).catch(() => {
+                })
+                    .catch(() => {
                     buttonElement.removeAttribute('disabled');
                     this.setLoading(buttonElement, false);
                 });
@@ -409,15 +414,24 @@ export default class Wizard extends Webform {
         // Get all components including all nested components and line up in the correct order
         const getAllComponents = (nestedComp, compsArr, pushAllowed = true) => {
             const nestedPages = [];
-            const dataArrayComponents = ['datagrid', 'editgrid', 'dynamicWizard'];
-            const currentComponents = nestedComp?.subForm ? this.getSortedComponents(nestedComp.subForm) : nestedComp?.components || [];
-            const visibleComponents = currentComponents.filter(comp => comp._visible);
-            const filteredComponents = visibleComponents.filter(comp => !dataArrayComponents.includes(comp.component.type) && (comp.type !== 'form' || comp.isNestedWizard));
-            const additionalComponents = currentComponents.filter(comp => comp.subForm?._form.display !== 'wizard');
+            const dataArrayComponents = [
+                'datagrid',
+                'editgrid',
+                'dynamicWizard',
+            ];
+            const currentComponents = nestedComp?.subForm
+                ? this.getSortedComponents(nestedComp.subForm)
+                : nestedComp?.components || [];
+            const visibleComponents = currentComponents.filter((comp) => comp._visible);
+            const filteredComponents = visibleComponents.filter((comp) => !dataArrayComponents.includes(comp.component.type) &&
+                (comp.type !== 'form' || comp.isNestedWizard));
+            const additionalComponents = currentComponents.filter((comp) => comp.subForm?._form.display !== 'wizard');
             let hasNested = false;
             eachComponent(filteredComponents, (comp) => {
                 if (comp && comp.component) {
-                    if (comp.component.type === 'panel' && comp?.parent.wizard && !getAllComponents(comp, compsArr, false)) {
+                    if (comp.component.type === 'panel' &&
+                        comp?.parent.wizard &&
+                        !getAllComponents(comp, compsArr, false)) {
                         if (pushAllowed) {
                             this.setRootPanelId(comp);
                             nestedPages.push(comp);
@@ -466,10 +480,11 @@ export default class Wizard extends Webform {
         this.allPages = allComponents;
     }
     getSortedComponents({ components, originalComponents }) {
+        // sorts components if they were shuffled after the conditional logic
         const currentComponents = [];
         const currentPages = [];
         if (components && components.length) {
-            components.map(page => {
+            components.map((page) => {
                 if (page.component.type === 'panel') {
                     currentPages[page.component.key || page.component.title] = page;
                 }
@@ -502,11 +517,11 @@ export default class Wizard extends Webform {
         const visible = [];
         const currentPages = {};
         const pageOptions = {
-            ...(_.clone(this.options)),
+            ..._.clone(this.options),
             ...(this.parent ? { root: this } : {}),
         };
         if (this.components && this.components.length) {
-            this.components.forEach(page => {
+            this.components.forEach((page) => {
                 if (page.component.type === 'panel') {
                     currentPages[page.component.key || page.component.title] = page;
                 }
@@ -541,7 +556,7 @@ export default class Wizard extends Webform {
                         page.visible = isVisible;
                         this.pages.push(page);
                         page.eachComponent((component) => {
-                            component.page = (this.pages.length - 1);
+                            component.page = this.pages.length - 1;
                         });
                     }
                 }
@@ -583,7 +598,7 @@ export default class Wizard extends Webform {
                 const pageFromPages = this.pages[num];
                 const pageFromComponents = this.components[num];
                 if (!pageFromComponents || pageFromPages?.id !== pageFromComponents.id) {
-                    parentNum = this.components.findIndex(comp => {
+                    parentNum = this.components.findIndex((comp) => {
                         return comp.id === this.pages?.[parentNum]?.rootPanelId;
                     });
                 }
@@ -594,7 +609,9 @@ export default class Wizard extends Webform {
             return this.redraw().then(() => {
                 this.checkData(this.submission.data);
                 this.triggerCaptcha(this.currentPage.components);
-                const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();
+                const errors = this.submitted
+                    ? this.validate(this.localData, { dirty: true })
+                    : this.validateCurrentPage();
                 if (this.alert) {
                     this.showErrors(errors, true, true);
                 }
@@ -617,7 +634,9 @@ export default class Wizard extends Webform {
         }
     }
     get currentPage() {
-        return (this.pages && (this.pages.length >= this.page)) ? this.pages[this.page] : { components: [] };
+        return this.pages && this.pages.length >= this.page
+            ? this.pages[this.page]
+            : { components: [] };
     }
     getNextPage() {
         if (this.pages?.[this.page]) {
@@ -625,13 +644,13 @@ export default class Wizard extends Webform {
             const form = this.pages[this.page].component;
             // Check conditional nextPage
             if (form) {
-                const page = this.pages.length > (this.page + 1) && !this.showAllErrors ? this.page + 1 : -1;
+                const page = this.pages.length > this.page + 1 && !this.showAllErrors ? this.page + 1 : -1;
                 if (form.nextPage) {
                     const next = this.evaluate(form.nextPage, {
                         next: page,
                         data,
                         page,
-                        form
+                        form,
                     }, 'next');
                     if (next === null) {
                         this.currentNextPage = null;
@@ -694,7 +713,9 @@ export default class Wizard extends Webform {
         }
         // 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;
+        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);
@@ -767,14 +788,14 @@ export default class Wizard extends Webform {
         this.originalComponents = [];
         this.component.components.map((item) => {
             if (item.type === 'panel') {
-                item.key = uniqueKey(pageKeys, (item.key || 'panel'));
+                item.key = uniqueKey(pageKeys, item.key || 'panel');
                 pageKeys[item.key] = true;
                 if (this.wizard.full) {
                     this.options.show = this.options.show || {};
                     this.options.show[item.key] = true;
                 }
-                else if (Object.prototype.hasOwnProperty.call(this.wizard, 'full')
-                    && !_.isEqual(this.originalOptions.show, this.options.show)) {
+                else if (Object.prototype.hasOwnProperty.call(this.wizard, 'full') &&
+                    !_.isEqual(this.originalOptions.show, this.options.show)) {
                     this.options.show = { ...(this.originalOptions.show || {}) };
                 }
             }
@@ -786,9 +807,11 @@ export default class Wizard extends Webform {
                 title: 'Page 1',
                 label: 'Page 1',
                 key: 'page1',
-                components: this.component.components
+                components: this.component.components,
             };
-            this.component.components = [newPage];
+            this.component.components = [
+                newPage,
+            ];
             this.originalComponents.push(_.clone(newPage));
         }
     }
@@ -799,7 +822,8 @@ export default class Wizard extends Webform {
         return super.setForm(form, flags);
     }
     onSetForm(clonedForm, initialForm) {
-        this.component.components = (this.parent ? initialForm.components : clonedForm.components) || [];
+        this.component.components =
+            (this.parent ? initialForm.components : clonedForm.components) || [];
         this.setComponentSchema();
     }
     setEditMode(submission) {
@@ -830,23 +854,26 @@ export default class Wizard extends Webform {
         return changed;
     }
     isClickable(page, index) {
-        return this.page !== index && firstNonNil([
-            _.get(page, 'breadcrumbClickable'),
-            this.options.breadcrumbSettings.clickable
-        ]);
+        return (this.page !== index &&
+            firstNonNil([
+                _.get(page, 'breadcrumbClickable'),
+                this.options.breadcrumbSettings.clickable,
+            ]));
     }
     hasButton(name, nextPage = this.getNextPage()) {
         // get page options with global options as default values
-        const { previous = this.options.buttonSettings.showPrevious, cancel = this.options.buttonSettings.showCancel, submit = this.options.buttonSettings.showSubmit, next = this.options.buttonSettings.showNext } = _.get(this.currentPage, 'component.buttonSettings', {});
+        const { previous = this.options.buttonSettings.showPrevious, cancel = this.options.buttonSettings.showCancel, submit = this.options.buttonSettings.showSubmit, next = this.options.buttonSettings.showNext, } = _.get(this.currentPage, 'component.buttonSettings', {});
         switch (name) {
             case 'previous':
-                return previous && (this.getPreviousPage() > -1);
+                return previous && this.getPreviousPage() > -1;
             case 'next':
-                return next && (nextPage !== null) && (nextPage !== -1);
+                return next && nextPage !== null && nextPage !== -1;
             case 'cancel':
                 return cancel && !this.options.readOnly;
             case 'submit':
-                return submit && !this.options.readOnly && ((nextPage === null) || (this.page === (this.pages.length - 1)));
+                return (submit &&
+                    !this.options.readOnly &&
+                    (nextPage === null || this.page === this.pages.length - 1));
             default:
                 return true;
         }
@@ -856,8 +883,7 @@ export default class Wizard extends Webform {
             // Some panels have the same key....
             return `${page.key}-${page.title}`;
         }
-        else if (page.components &&
-            page.components.length > 0) {
+        else if (page.components && page.components.length > 0) {
             return this.pageId(page.components[0]);
         }
         else {
@@ -867,7 +893,11 @@ export default class Wizard extends Webform {
     onChange(flags, changed, modified, changes) {
         super.onChange(flags, changed, modified, changes);
         // The onChange loop doesn't need all components for wizards
-        const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();
+        const errors = flags?.noValidate
+            ? []
+            : this.submitted
+                ? this.validate(this.localData, { dirty: true })
+                : this.validateCurrentPage();
         if (this.alert) {
             this.showErrors(errors, true, true);
         }
@@ -878,8 +908,10 @@ export default class Wizard extends Webform {
         const newPanels = this.pages;
         const currentNextPage = this.currentNextPage;
         const panelsUpdated = !_.isEqual(newPanels, currentPanels);
-        if (this.currentPanel?.id && this.pages.length && (!this.hasSubWizards || (this.hasSubWizards && panelsUpdated))) {
-            const newIndex = this.pages.findIndex(page => page.id === this.currentPanel.id);
+        if (this.currentPanel?.id &&
+            this.pages.length &&
+            (!this.hasSubWizards || (this.hasSubWizards && panelsUpdated))) {
+            const newIndex = this.pages.findIndex((page) => page.id === this.currentPanel.id);
             if (newIndex !== -1)
                 this.setPage(newIndex);
         }
@@ -904,9 +936,7 @@ export default class Wizard extends Webform {
             this.setCustomValidity('');
             return true;
         }
-        const components = !currentPageOnly || this.isLastPage()
-            ? this.getComponents()
-            : this.currentPage.components;
+        const components = !currentPageOnly || this.isLastPage() ? this.getComponents() : this.currentPage.components;
         return components.reduce((check, comp) => comp.checkValidity(data, dirty, row, currentPageOnly, childErrors) && check, true);
     }
     get errors() {
@@ -919,7 +949,7 @@ export default class Wizard extends Webform {
             while (!(topPanel.parent instanceof Wizard)) {
                 topPanel = topPanel.parent;
             }
-            const pageIndex = this.pages.findIndex(page => page.id === topPanel.id);
+            const pageIndex = this.pages.findIndex((page) => page.id === topPanel.id);
             if (pageIndex >= 0) {
                 const page = this.pages[pageIndex];
                 if (page && page !== this.currentPage) {

package/lib/mjs/WizardBuilder.js

@@ -27,10 +27,10 @@ export default class WizardBuilder extends WebformBuilder {
         for (const group in this.groups) {
             if (this.groups[group] && this.groups[group].components) {
                 this.groups[group].componentOrder = Object.keys(this.groups[group].components)
-                    .map(key => this.groups[group].components[key])
-                    .filter(component => component && !component.ignore)
+                    .map((key) => this.groups[group].components[key])
+                    .filter((component) => component && !component.ignore)
                     .sort((a, b) => a.weight - b.weight)
-                    .map(component => component.key);
+                    .map((component) => component.key);
             }
         }
         const originalRenderComponentsHook = this.options.hooks.renderComponents;
@@ -83,14 +83,16 @@ export default class WizardBuilder extends WebformBuilder {
         return remove;
     }
     allowDrop(element) {
-        return (this.webform && this.webform.refs && this.webform.refs.webform === element) ? false : true;
+        return this.webform && this.webform.refs && this.webform.refs.webform === element
+            ? false
+            : true;
     }
     get pages() {
         return _.filter(this._form.components, { type: 'panel' });
     }
     get currentPage() {
         const pages = this.pages;
-        return (pages && (pages.length >= this.page)) ? pages[this.page] : null;
+        return pages && pages.length >= this.page ? pages[this.page] : null;
     }
     setForm(value) {
         this._form = value;
@@ -99,11 +101,12 @@ export default class WizardBuilder extends WebformBuilder {
         }
         if (this.pages.length === 0) {
             const components = this._form.components.filter((component) => component.type !== 'button');
-            this._form.components = [this.getPageConfig(1, components)];
+            this._form.components = [
+                this.getPageConfig(1, components),
+            ];
         }
         else {
-            const components = this._form.components
-                .filter((component) => component.type !== 'button' || component.action !== 'submit');
+            const components = this._form.components.filter((component) => component.type !== 'button' || component.action !== 'submit');
             this._form.components = components;
         }
         this.rebuild();
@@ -134,7 +137,7 @@ export default class WizardBuilder extends WebformBuilder {
                         group,
                         groupKey: group.key,
                         groupId: `group-container-${groupKey}`,
-                        subgroups: []
+                        subgroups: [],
                     })),
                 })),
             }),
@@ -151,13 +154,14 @@ export default class WizardBuilder extends WebformBuilder {
             page.parentNode.dragInfo = { index };
         });
         if (this.dragulaLib) {
-            this.navigationDragula = this.dragulaLib([this.element.querySelector('.wizard-pages')], {
-                moves: (el) => (!el.classList.contains('wizard-add-page')),
+            this.navigationDragula = this.dragulaLib([
+                this.element.querySelector('.wizard-pages'),
+            ], {
+                moves: (el) => !el.classList.contains('wizard-add-page'),
                 accepts: (el, target, source, sibling) => (sibling ? true : false),
-            })
-                .on('drop', this.onReorder.bind(this));
+            }).on('drop', this.onReorder.bind(this));
         }
-        this.refs.addPage.forEach(link => {
+        this.refs.addPage.forEach((link) => {
             this.addEventListener(link, 'click', (event) => {
                 event.preventDefault();
                 this.addPage();
@@ -183,8 +187,12 @@ export default class WizardBuilder extends WebformBuilder {
         this.webform.setForm({
             display: 'form',
             type: 'form',
-            components: page ? [page] : [],
-            controller: this._form?.controller || ''
+            components: page
+                ? [
+                    page,
+                ]
+                : [],
+            controller: this._form?.controller || '',
         }, { keepAsReference: true });
         return this.redraw();
     }
@@ -192,7 +200,7 @@ export default class WizardBuilder extends WebformBuilder {
         const newPage = page && page.schema ? fastCloneDeep(page.schema) : this.getPageConfig(this.pages.length + 1);
         BuilderUtils.uniquify(this._form.components, newPage);
         this._form.components.push(newPage);
-        this.emitSaveComponentEvent(newPage, newPage, this._form, 'components', (this._form.components.length - 1), true, newPage);
+        this.emitSaveComponentEvent(newPage, newPage, this._form, 'components', this._form.components.length - 1, true, newPage);
         this.emit('change', this._form);
         return this.rebuild();
     }
@@ -222,7 +230,7 @@ export default class WizardBuilder extends WebformBuilder {
         }
         const oldPosition = element.dragInfo.index;
         //should drop at next sibling position; no next sibling means drop to last position
-        const newPosition = (sibling && sibling.dragInfo ? sibling.dragInfo.index : this.pages.length);
+        const newPosition = sibling && sibling.dragInfo ? sibling.dragInfo.index : this.pages.length;
         const movedBelow = newPosition > oldPosition;
         const formComponents = fastCloneDeep(this._form.components);
         const draggedRowData = this._form.components[oldPosition];
@@ -255,7 +263,7 @@ export default class WizardBuilder extends WebformBuilder {
         if (component instanceof WizardBuilder) {
             return;
         }
-        if (this._form.components.find(comp => _.isEqual(component.component, comp))) {
+        if (this._form.components.find((comp) => _.isEqual(component.component, comp))) {
             this.addPage(component);
         }
         else {

package/lib/mjs/addons/FormioAddon.js

@@ -7,7 +7,7 @@ export default class FormioAddon extends Element {
             name: 'formioAddon',
             components: [],
             label: 'Formio Addon',
-            defaultSettings: {}
+            defaultSettings: {},
         };
     }
     get defaultSettings() {