@formio/js 5.0.0-dev.5914.479573c → 5.0.0-dev.5914.e8a58b3

package/lib/cjs/WebformBuilder.js

@@ -901,13 +901,16 @@ class WebformBuilder extends Component_1.default {
             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',
@@ -1056,6 +1059,7 @@ class WebformBuilder extends Component_1.default {
                     'conditional',
                     'customConditional',
                     'id',
+                    'logic',
                     'fields.day.required',
                     'fields.month.required',
                     'fields.year.required',

package/lib/cjs/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/cjs/Wizard.js

@@ -722,9 +722,10 @@ class Wizard extends Webform_1.default {
         }
     }
     validateCurrentPage(flags = {}) {
-        var _a;
+        var _a, _b;
+        const components = (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.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 (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.parent.validateComponents(this.currentPage.component.components, this.root.data, flags);
+        return (_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.parent.validateComponents(components, this.root.data, flags);
     }
     emitPrevPage() {
         this.emit('prevPage', { page: this.page, submission: this.submission });
@@ -866,7 +867,8 @@ class Wizard extends Webform_1.default {
     onChange(flags, changed, modified, changes) {
         var _a, _b;
         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);
         }
@@ -919,16 +921,6 @@ class Wizard extends Webform_1.default {
         }
         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);
-    }
     focusOnComponent(key) {
         const component = this.getComponent(key);
         if (component) {

package/lib/cjs/components/_classes/componentModal/ComponentModal.d.ts

@@ -22,6 +22,7 @@ export default class ComponentModal {
         modalOverlay: string;
         modalContents: string;
         modalClose: string;
+        componentContent: string;
         openModalWrapper: string;
         openModal: string;
         modalSave: string;

package/lib/cjs/components/_classes/componentModal/ComponentModal.js

@@ -64,6 +64,7 @@ class ComponentModal {
             modalOverlay: 'single',
             modalContents: 'single',
             modalClose: 'single',
+            componentContent: 'single',
             openModalWrapper: 'single',
             openModal: 'single',
             modalSave: 'single',

package/lib/cjs/components/form/Form.js

@@ -294,7 +294,7 @@ class FormComponent extends Component_1.default {
                     const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;
                     const currentValue = modalShouldBeOpened ? this.componentModal.currentValue : this.dataValue;
                     this.componentModal = new ComponentModal_1.default(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);
-                    this.subForm.element = this.componentModal.refs.modalContents;
+                    this.subForm.element = this.componentModal.refs.componentContent || this.subForm.element;
                     this.setOpenModalElement();
                 }
                 this.calculateValue();
@@ -396,6 +396,7 @@ class FormComponent extends Component_1.default {
                 const componentsMap = this.componentsMap;
                 const formComponentsMap = this.subForm.componentsMap;
                 lodash_1.default.assign(componentsMap, formComponentsMap);
+                this.component.components = this.subForm.components.map((comp) => comp.component);
                 this.subForm.parent = this;
                 this.subForm.parentVisible = this.visible;
                 this.subForm.on('change', () => {

package/lib/mjs/WebformBuilder.js

@@ -885,13 +885,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',
@@ -1040,6 +1043,7 @@ export default class WebformBuilder extends Component {
                     'conditional',
                     'customConditional',
                     'id',
+                    'logic',
                     'fields.day.required',
                     'fields.month.required',
                     'fields.year.required',

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

@@ -712,8 +712,9 @@ export default class Wizard extends Webform {
         }
     }
     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.root.data, flags);
+        return this.currentPage?.parent.validateComponents(components, this.root.data, flags);
     }
     emitPrevPage() {
         this.emit('prevPage', { page: this.page, submission: this.submission });
@@ -854,7 +855,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);
         }
@@ -907,16 +909,6 @@ export default class Wizard extends Webform {
         }
         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);
-    }
     focusOnComponent(key) {
         const component = this.getComponent(key);
         if (component) {

package/lib/mjs/components/_classes/componentModal/ComponentModal.d.ts

@@ -22,6 +22,7 @@ export default class ComponentModal {
         modalOverlay: string;
         modalContents: string;
         modalClose: string;
+        componentContent: string;
         openModalWrapper: string;
         openModal: string;
         modalSave: string;

package/lib/mjs/components/_classes/componentModal/ComponentModal.js

@@ -61,6 +61,7 @@ export default class ComponentModal {
             modalOverlay: 'single',
             modalContents: 'single',
             modalClose: 'single',
+            componentContent: 'single',
             openModalWrapper: 'single',
             openModal: 'single',
             modalSave: 'single',

package/lib/mjs/components/form/Form.js

@@ -291,7 +291,7 @@ export default class FormComponent extends Component {
                     const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;
                     const currentValue = modalShouldBeOpened ? this.componentModal.currentValue : this.dataValue;
                     this.componentModal = new ComponentModal(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);
-                    this.subForm.element = this.componentModal.refs.modalContents;
+                    this.subForm.element = this.componentModal.refs.componentContent || this.subForm.element;
                     this.setOpenModalElement();
                 }
                 this.calculateValue();
@@ -392,6 +392,7 @@ export default class FormComponent extends Component {
                 const componentsMap = this.componentsMap;
                 const formComponentsMap = this.subForm.componentsMap;
                 _.assign(componentsMap, formComponentsMap);
+                this.component.components = this.subForm.components.map((comp) => comp.component);
                 this.subForm.parent = this;
                 this.subForm.parentVisible = this.visible;
                 this.subForm.on('change', () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-dev.5914.479573c",
+  "version": "5.0.0-dev.5914.e8a58b3",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -80,9 +80,9 @@
   },
   "homepage": "https://github.com/formio/formio.js#readme",
   "dependencies": {
-    "@formio/bootstrap": "3.0.0-dev.98.17ba6ea",
+    "@formio/bootstrap": "3.0.0-dev.111.ae7f187",
     "@formio/choices.js": "^10.2.1",
-    "@formio/core": "2.1.0-dev.193.dc60547",
+    "@formio/core": "2.1.0-dev.193.68cf8c3",
     "@formio/text-mask-addons": "3.8.0-formio.4",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
     "abortcontroller-polyfill": "^1.7.5",