@formio/js 5.0.0-dev.5679.8f14c25 → 5.0.0-dev.5682.2fe896c

package/lib/cjs/Webform.d.ts

@@ -334,7 +334,7 @@ declare class Webform extends NestedDataComponent {
      * 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}
+     * @returns {void}
      */
     onSetSubmission(submission: object | null | undefined, flags?: object | null | undefined): void;
     /**

package/lib/cjs/Webform.js

@@ -13,6 +13,7 @@ const Components_1 = __importDefault(require("./components/Components"));
 const NestedDataComponent_1 = __importDefault(require("./components/_classes/nesteddata/NestedDataComponent"));
 const utils_1 = require("./utils/utils");
 const formUtils_1 = require("./utils/formUtils");
+const dragula_1 = __importDefault(require("dragula"));
 // Initialize the available forms.
 Formio_1.Formio.forms = {};
 // Allow people to register components.
@@ -309,6 +310,7 @@ class Webform extends NestedDataComponent_1.default {
         // Ensure the root is set to this component.
         this.root = this;
         this.localRoot = this;
+        this.root.dragulaLib = dragula_1.default;
     }
     /* eslint-enable max-statements */
     get language() {
@@ -702,7 +704,7 @@ class Webform extends NestedDataComponent_1.default {
      * 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}
+     * @returns {void}
      */
     onSetSubmission(submission, flags = {}) {
         this.submissionSet = true;
@@ -882,7 +884,9 @@ class Webform extends NestedDataComponent_1.default {
         this.addComponents();
         this.on("submitButton", (options) => {
             this.submit(false, options).catch((e) => {
-                options.instance.loading = false;
+                if (options === null || options === void 0 ? void 0 : options.instance) {
+                    options.instance.loading = false;
+                }
                 return e !== false && e !== undefined && console.log(e);
             });
         }, true);

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

@@ -346,7 +346,7 @@ declare class Component extends Element {
     /**
      * 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
+     * @returns {string} - The modal preview markup
      */
     renderModalPreview(ctx: object | null | undefined): string;
     /**
@@ -372,7 +372,7 @@ declare class Component extends Element {
      * 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
+     * @returns {import('tippy.js').Tippy} - tippy.js instance
      */
     createTooltip(tooltipEl: HTMLElement, settings?: object | null | undefined): import('tippy.js').Tippy;
     /**

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

@@ -1049,7 +1049,7 @@ class Component extends Element_1.default {
     /**
      * 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
+     * @returns {string} - The modal preview markup
      */
     renderModalPreview(ctx) {
         return this.renderTemplate('modalPreview', ctx || {});
@@ -1118,7 +1118,7 @@ class Component extends Element_1.default {
      * 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
+     * @returns {import('tippy.js').Tippy} - tippy.js instance
      */
     createTooltip(tooltipEl, settings = {}) {
         const tooltipAttribute = tooltipEl.getAttribute('data-tooltip');

package/lib/cjs/components/_classes/input/Input.js

@@ -234,11 +234,33 @@ class Input extends Multivalue_1.default {
         this.addFocusBlurEvents(element);
         if (this.options.submitOnEnter) {
             this.addEventListener(element, 'keypress', (event) => {
+                var _a;
                 const key = event.keyCode || event.which;
                 if (key === 13) {
                     event.preventDefault();
                     event.stopPropagation();
-                    this.emit('submitButton');
+                    let submitButton = null;
+                    if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.everyComponent) {
+                        this.root.everyComponent((component) => {
+                            if ((component === null || component === void 0 ? void 0 : component.component.type) === 'button' &&
+                                (component === null || component === void 0 ? void 0 : component.component.action) === 'submit') {
+                                submitButton = component;
+                                return false;
+                            }
+                        });
+                    }
+                    const options = {};
+                    if (submitButton) {
+                        options.instance = submitButton;
+                        options.component = submitButton.component;
+                        options.noValidate = this.component.state === 'draft';
+                        options.state = this.component.state || 'submitted';
+                        submitButton.loading = true;
+                        this.emit('submitButton', options);
+                    }
+                    else {
+                        this.emit('submitButton', options);
+                    }
                 }
             });
         }

package/lib/cjs/components/datagrid/fixtures/comp9.d.ts

@@ -0,0 +1,41 @@
+declare namespace _default {
+    let components: {
+        label: string;
+        reorder: boolean;
+        addAnotherPosition: string;
+        layoutFixed: boolean;
+        enableRowGroups: boolean;
+        initEmpty: boolean;
+        tableView: boolean;
+        defaultValue: {}[];
+        key: string;
+        type: string;
+        input: boolean;
+        components: ({
+            label: string;
+            applyMaskOn: string;
+            tableView: boolean;
+            key: string;
+            type: string;
+            input: boolean;
+            mask?: undefined;
+            delimiter?: undefined;
+            requireDecimal?: undefined;
+            inputFormat?: undefined;
+            truncateMultipleSpaces?: undefined;
+        } | {
+            label: string;
+            applyMaskOn: string;
+            mask: boolean;
+            tableView: boolean;
+            delimiter: boolean;
+            requireDecimal: boolean;
+            inputFormat: string;
+            truncateMultipleSpaces: boolean;
+            key: string;
+            type: string;
+            input: boolean;
+        })[];
+    }[];
+}
+export default _default;

package/lib/cjs/components/datagrid/fixtures/comp9.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    "components": [
+        {
+            "label": "Data Grid",
+            "reorder": true,
+            "addAnotherPosition": "bottom",
+            "layoutFixed": false,
+            "enableRowGroups": false,
+            "initEmpty": false,
+            "tableView": false,
+            "defaultValue": [
+                {}
+            ],
+            "key": "dataGrid",
+            "type": "datagrid",
+            "input": true,
+            "components": [
+                {
+                    "label": "Text Field",
+                    "applyMaskOn": "change",
+                    "tableView": true,
+                    "key": "textField",
+                    "type": "textfield",
+                    "input": true
+                },
+                {
+                    "label": "Number",
+                    "applyMaskOn": "change",
+                    "mask": false,
+                    "tableView": false,
+                    "delimiter": false,
+                    "requireDecimal": false,
+                    "inputFormat": "plain",
+                    "truncateMultipleSpaces": false,
+                    "key": "number",
+                    "type": "number",
+                    "input": true
+                }
+            ]
+        }
+    ]
+};

package/lib/cjs/components/datagrid/fixtures/index.d.ts

@@ -6,6 +6,7 @@ import comp5 from './comp5';
 import comp6 from './comp6';
 import comp7 from './comp7';
 import comp8 from './comp8';
+import comp9 from './comp9';
 import withCollapsibleRowGroups from './comp-with-collapsible-groups';
 import withConditionalFieldsAndValidations from './comp-with-conditional-components-and-validations';
 import withDefValue from './comp-with-def-value';
@@ -15,4 +16,4 @@ import modalWithRequiredFields from './comp-modal-with-required-fields';
 import withAllowCalculateOverride from './comp-with-allow-calculate-override';
 import twoWithAllowCalculatedOverride from './two-comp-with-allow-calculate-override';
 import withCheckboxes from './comp-with-checkboxes';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, withCollapsibleRowGroups, withConditionalFieldsAndValidations, withDefValue, withLogic, withRowGroupsAndDefValue, modalWithRequiredFields, withAllowCalculateOverride, twoWithAllowCalculatedOverride, withCheckboxes };
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, withCollapsibleRowGroups, withConditionalFieldsAndValidations, withDefValue, withLogic, withRowGroupsAndDefValue, modalWithRequiredFields, withAllowCalculateOverride, twoWithAllowCalculatedOverride, withCheckboxes };

package/lib/cjs/components/datagrid/fixtures/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withCheckboxes = exports.twoWithAllowCalculatedOverride = exports.withAllowCalculateOverride = exports.modalWithRequiredFields = exports.withRowGroupsAndDefValue = exports.withLogic = exports.withDefValue = exports.withConditionalFieldsAndValidations = exports.withCollapsibleRowGroups = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+exports.withCheckboxes = exports.twoWithAllowCalculatedOverride = exports.withAllowCalculateOverride = exports.modalWithRequiredFields = exports.withRowGroupsAndDefValue = exports.withLogic = exports.withDefValue = exports.withConditionalFieldsAndValidations = exports.withCollapsibleRowGroups = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
 const comp1_1 = __importDefault(require("./comp1"));
 exports.comp1 = comp1_1.default;
 const comp2_1 = __importDefault(require("./comp2"));
@@ -20,6 +20,8 @@ const comp7_1 = __importDefault(require("./comp7"));
 exports.comp7 = comp7_1.default;
 const comp8_1 = __importDefault(require("./comp8"));
 exports.comp8 = comp8_1.default;
+const comp9_1 = __importDefault(require("./comp9"));
+exports.comp9 = comp9_1.default;
 const comp_with_def_value_1 = __importDefault(require("./comp-with-def-value"));
 exports.withDefValue = comp_with_def_value_1.default;
 const comp_row_groups_with_def_value_1 = __importDefault(require("./comp-row-groups-with-def-value"));

package/lib/cjs/components/form/Form.d.ts

@@ -94,7 +94,7 @@ export default class FormComponent extends Component {
      * Sets the subform 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}
+     * @returns {void}
      */
     onSetSubFormValue(submission: object | null | undefined, flags: object | null | undefined): void;
     areAllComponentsEmpty(data: any): boolean;

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

@@ -656,7 +656,7 @@ class FormComponent extends Component_1.default {
      * Sets the subform 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}
+     * @returns {void}
      */
     onSetSubFormValue(submission, flags) {
         this.subForm.setValue(submission, flags);

package/lib/mjs/Webform.d.ts

@@ -334,7 +334,7 @@ declare class Webform extends NestedDataComponent {
      * 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}
+     * @returns {void}
      */
     onSetSubmission(submission: object | null | undefined, flags?: object | null | undefined): void;
     /**

package/lib/mjs/Webform.js

@@ -8,6 +8,7 @@ import Components from "./components/Components";
 import NestedDataComponent from "./components/_classes/nesteddata/NestedDataComponent";
 import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, convertStringToHTMLElement, getArrayFromComponentPath, } from "./utils/utils";
 import { eachComponent } from "./utils/formUtils";
+import dragula from "dragula";
 // Initialize the available forms.
 Formio.forms = {};
 // Allow people to register components.
@@ -281,6 +282,7 @@ export default class Webform extends NestedDataComponent {
         // Ensure the root is set to this component.
         this.root = this;
         this.localRoot = this;
+        this.root.dragulaLib = dragula;
     }
     /* eslint-enable max-statements */
     get language() {
@@ -700,7 +702,7 @@ export default class Webform extends NestedDataComponent {
      * 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}
+     * @returns {void}
      */
     onSetSubmission(submission, flags = {}) {
         this.submissionSet = true;
@@ -886,7 +888,9 @@ export default class Webform extends NestedDataComponent {
         this.addComponents();
         this.on("submitButton", (options) => {
             this.submit(false, options).catch((e) => {
-                options.instance.loading = false;
+                if (options?.instance) {
+                    options.instance.loading = false;
+                }
                 return e !== false && e !== undefined && console.log(e);
             });
         }, true);

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

@@ -346,7 +346,7 @@ declare class Component extends Element {
     /**
      * 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
+     * @returns {string} - The modal preview markup
      */
     renderModalPreview(ctx: object | null | undefined): string;
     /**
@@ -372,7 +372,7 @@ declare class Component extends Element {
      * 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
+     * @returns {import('tippy.js').Tippy} - tippy.js instance
      */
     createTooltip(tooltipEl: HTMLElement, settings?: object | null | undefined): import('tippy.js').Tippy;
     /**

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

@@ -1016,7 +1016,7 @@ export default class Component extends Element {
     /**
      * 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
+     * @returns {string} - The modal preview markup
      */
     renderModalPreview(ctx) {
         return this.renderTemplate('modalPreview', ctx || {});
@@ -1084,7 +1084,7 @@ export default class Component extends Element {
      * 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
+     * @returns {import('tippy.js').Tippy} - tippy.js instance
      */
     createTooltip(tooltipEl, settings = {}) {
         const tooltipAttribute = tooltipEl.getAttribute('data-tooltip');

package/lib/mjs/components/_classes/input/Input.js

@@ -233,7 +233,28 @@ export default class Input extends Multivalue {
                 if (key === 13) {
                     event.preventDefault();
                     event.stopPropagation();
-                    this.emit('submitButton');
+                    let submitButton = null;
+                    if (this.root?.everyComponent) {
+                        this.root.everyComponent((component) => {
+                            if (component?.component.type === 'button' &&
+                                component?.component.action === 'submit') {
+                                submitButton = component;
+                                return false;
+                            }
+                        });
+                    }
+                    const options = {};
+                    if (submitButton) {
+                        options.instance = submitButton;
+                        options.component = submitButton.component;
+                        options.noValidate = this.component.state === 'draft';
+                        options.state = this.component.state || 'submitted';
+                        submitButton.loading = true;
+                        this.emit('submitButton', options);
+                    }
+                    else {
+                        this.emit('submitButton', options);
+                    }
                 }
             });
         }

package/lib/mjs/components/datagrid/fixtures/comp9.d.ts

@@ -0,0 +1,41 @@
+declare namespace _default {
+    let components: {
+        label: string;
+        reorder: boolean;
+        addAnotherPosition: string;
+        layoutFixed: boolean;
+        enableRowGroups: boolean;
+        initEmpty: boolean;
+        tableView: boolean;
+        defaultValue: {}[];
+        key: string;
+        type: string;
+        input: boolean;
+        components: ({
+            label: string;
+            applyMaskOn: string;
+            tableView: boolean;
+            key: string;
+            type: string;
+            input: boolean;
+            mask?: undefined;
+            delimiter?: undefined;
+            requireDecimal?: undefined;
+            inputFormat?: undefined;
+            truncateMultipleSpaces?: undefined;
+        } | {
+            label: string;
+            applyMaskOn: string;
+            mask: boolean;
+            tableView: boolean;
+            delimiter: boolean;
+            requireDecimal: boolean;
+            inputFormat: string;
+            truncateMultipleSpaces: boolean;
+            key: string;
+            type: string;
+            input: boolean;
+        })[];
+    }[];
+}
+export default _default;

package/lib/mjs/components/datagrid/fixtures/comp9.js

@@ -0,0 +1,42 @@
+export default {
+    "components": [
+        {
+            "label": "Data Grid",
+            "reorder": true,
+            "addAnotherPosition": "bottom",
+            "layoutFixed": false,
+            "enableRowGroups": false,
+            "initEmpty": false,
+            "tableView": false,
+            "defaultValue": [
+                {}
+            ],
+            "key": "dataGrid",
+            "type": "datagrid",
+            "input": true,
+            "components": [
+                {
+                    "label": "Text Field",
+                    "applyMaskOn": "change",
+                    "tableView": true,
+                    "key": "textField",
+                    "type": "textfield",
+                    "input": true
+                },
+                {
+                    "label": "Number",
+                    "applyMaskOn": "change",
+                    "mask": false,
+                    "tableView": false,
+                    "delimiter": false,
+                    "requireDecimal": false,
+                    "inputFormat": "plain",
+                    "truncateMultipleSpaces": false,
+                    "key": "number",
+                    "type": "number",
+                    "input": true
+                }
+            ]
+        }
+    ]
+};

package/lib/mjs/components/datagrid/fixtures/index.d.ts

@@ -6,6 +6,7 @@ import comp5 from './comp5';
 import comp6 from './comp6';
 import comp7 from './comp7';
 import comp8 from './comp8';
+import comp9 from './comp9';
 import withCollapsibleRowGroups from './comp-with-collapsible-groups';
 import withConditionalFieldsAndValidations from './comp-with-conditional-components-and-validations';
 import withDefValue from './comp-with-def-value';
@@ -15,4 +16,4 @@ import modalWithRequiredFields from './comp-modal-with-required-fields';
 import withAllowCalculateOverride from './comp-with-allow-calculate-override';
 import twoWithAllowCalculatedOverride from './two-comp-with-allow-calculate-override';
 import withCheckboxes from './comp-with-checkboxes';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, withCollapsibleRowGroups, withConditionalFieldsAndValidations, withDefValue, withLogic, withRowGroupsAndDefValue, modalWithRequiredFields, withAllowCalculateOverride, twoWithAllowCalculatedOverride, withCheckboxes };
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, withCollapsibleRowGroups, withConditionalFieldsAndValidations, withDefValue, withLogic, withRowGroupsAndDefValue, modalWithRequiredFields, withAllowCalculateOverride, twoWithAllowCalculatedOverride, withCheckboxes };

package/lib/mjs/components/datagrid/fixtures/index.js

@@ -6,6 +6,7 @@ import comp5 from './comp5';
 import comp6 from './comp6';
 import comp7 from './comp7';
 import comp8 from './comp8';
+import comp9 from './comp9';
 import withDefValue from './comp-with-def-value';
 import withRowGroupsAndDefValue from './comp-row-groups-with-def-value';
 import modalWithRequiredFields from './comp-modal-with-required-fields';
@@ -15,4 +16,4 @@ import withCollapsibleRowGroups from './comp-with-collapsible-groups';
 import withAllowCalculateOverride from './comp-with-allow-calculate-override';
 import twoWithAllowCalculatedOverride from './two-comp-with-allow-calculate-override';
 import withCheckboxes from './comp-with-checkboxes';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, withCollapsibleRowGroups, withConditionalFieldsAndValidations, withDefValue, withLogic, withRowGroupsAndDefValue, modalWithRequiredFields, withAllowCalculateOverride, twoWithAllowCalculatedOverride, withCheckboxes };
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, withCollapsibleRowGroups, withConditionalFieldsAndValidations, withDefValue, withLogic, withRowGroupsAndDefValue, modalWithRequiredFields, withAllowCalculateOverride, twoWithAllowCalculatedOverride, withCheckboxes };

package/lib/mjs/components/form/Form.d.ts

@@ -94,7 +94,7 @@ export default class FormComponent extends Component {
      * Sets the subform 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}
+     * @returns {void}
      */
     onSetSubFormValue(submission: object | null | undefined, flags: object | null | undefined): void;
     areAllComponentsEmpty(data: any): boolean;

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

@@ -646,7 +646,7 @@ export default class FormComponent extends Component {
      * Sets the subform 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}
+     * @returns {void}
      */
     onSetSubFormValue(submission, flags) {
         this.subForm.setValue(submission, flags);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-dev.5679.8f14c25",
+  "version": "5.0.0-dev.5682.2fe896c",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {