@formio/js 5.0.0-dev.5811.fd4868a → 5.0.0-dev.5813.afa74f0

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

@@ -2206,7 +2206,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') {
+        if (this.component.validateOn === 'blur' || this.component.validateOn === 'submit') {
             flags.noValidate = true;
         }
         if (this.component.onChange) {

package/lib/cjs/components/select/editForm/Select.edit.data.d.ts

@@ -1102,13 +1102,47 @@ declare const _default: ({
     conditional: {
         json: {
             and: ({
-                '!==': ({
+                var: string;
+                '==='?: undefined;
+                '!=='?: undefined;
+                or?: undefined;
+            } | {
+                '===': (boolean | {
                     var: string;
-                } | null)[];
+                })[];
+                var?: undefined;
+                '!=='?: undefined;
+                or?: undefined;
             } | {
                 '!==': (string | {
                     var: string;
                 })[];
+                var?: undefined;
+                '==='?: undefined;
+                or?: undefined;
+            } | {
+                or: ({
+                    '===': (string | {
+                        var: string;
+                    })[];
+                    and?: undefined;
+                } | {
+                    and: ({
+                        '===': (string | {
+                            var: string;
+                        })[];
+                        '!=='?: undefined;
+                    } | {
+                        '!==': (string | {
+                            var: string;
+                        })[];
+                        '==='?: undefined;
+                    })[];
+                    '==='?: undefined;
+                })[];
+                var?: undefined;
+                '==='?: undefined;
+                '!=='?: undefined;
             })[];
             '==='?: undefined;
             in?: undefined;

package/lib/cjs/components/select/editForm/Select.edit.data.js

@@ -31,18 +31,22 @@ const calculateSelectData = (context) => {
 const setSelectData = (context) => {
     // Wait before downloadedResources will be set
     setTimeout(() => {
-        var _a;
+        var _a, _b;
         const { instance, data } = context;
-        const selectDataComponent = instance === null || instance === void 0 ? void 0 : instance.root.getComponent('selectData');
+        const selectDataComponent = (_a = instance === null || instance === void 0 ? void 0 : instance.root) === null || _a === void 0 ? void 0 : _a.getComponent('selectData');
+        // clear selectData if conditions are not met or clearing default value
+        if (selectDataComponent && (!selectDataComponent.visible || !data.defaultValue)) {
+            selectDataComponent.setValue(null, { resetValue: true });
+            return;
+        }
         // nothing can set if don't have downloaded resources
-        if (!selectDataComponent || !instance.getValue() || !((_a = instance.downloadedResources) === null || _a === void 0 ? void 0 : _a.length)) {
+        if (!selectDataComponent || !instance.getValue() || !((_b = instance.downloadedResources) === null || _b === void 0 ? void 0 : _b.length)) {
             return;
         }
-        // if valueProperty is not provided, we have entire object
         const shouldCalculateUrlData = data.dataSrc === 'url' && data.data.url && data.valueProperty;
         const shouldCalculateResourceData = data.dataSrc === 'resource' && data.data.resource && data.valueProperty;
-        const newValue = shouldCalculateUrlData || shouldCalculateResourceData ? calculateSelectData(context) : undefined;
-        selectDataComponent.setValue(newValue);
+        const newValue = shouldCalculateUrlData || shouldCalculateResourceData ? calculateSelectData(context) : null;
+        selectDataComponent.setValue(newValue, { resetValue: newValue === null });
     }, 0);
 };
 exports.default = [
@@ -684,10 +688,25 @@ exports.default = [
     {
         key: 'selectData',
         conditional: {
-            json: { 'and': [
-                    { '!==': [{ var: 'data.valueProperty' }, null] },
-                    { '!==': [{ var: 'data.valueProperty' }, ''] },
-                ] },
+            json: {
+                and: [
+                    { var: 'data.valueProperty' },
+                    { '===': [{ var: 'data.lazyLoad' }, true] },
+                    { '!==': [{ var: 'data.widget' }, 'html5'] },
+                    {
+                        or: [
+                            { '===': [{ var: 'data.dataSrc' }, 'url'] },
+                            {
+                                and: [
+                                    { '===': [{ var: 'data.dataSrc' }, 'resource'] },
+                                    // 'data' means entire object from resource will be used
+                                    { '!==': [{ var: 'data.valueProperty' }, 'data'] },
+                                ],
+                            }
+                        ]
+                    }
+                ]
+            },
         },
     },
     {

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

@@ -2169,7 +2169,7 @@ export default class Component extends Element {
             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') {
+        if (this.component.validateOn === 'blur' || this.component.validateOn === 'submit') {
             flags.noValidate = true;
         }
         if (this.component.onChange) {

package/lib/mjs/components/select/editForm/Select.edit.data.d.ts

@@ -1102,13 +1102,47 @@ declare const _default: ({
     conditional: {
         json: {
             and: ({
-                '!==': ({
+                var: string;
+                '==='?: undefined;
+                '!=='?: undefined;
+                or?: undefined;
+            } | {
+                '===': (boolean | {
                     var: string;
-                } | null)[];
+                })[];
+                var?: undefined;
+                '!=='?: undefined;
+                or?: undefined;
             } | {
                 '!==': (string | {
                     var: string;
                 })[];
+                var?: undefined;
+                '==='?: undefined;
+                or?: undefined;
+            } | {
+                or: ({
+                    '===': (string | {
+                        var: string;
+                    })[];
+                    and?: undefined;
+                } | {
+                    and: ({
+                        '===': (string | {
+                            var: string;
+                        })[];
+                        '!=='?: undefined;
+                    } | {
+                        '!==': (string | {
+                            var: string;
+                        })[];
+                        '==='?: undefined;
+                    })[];
+                    '==='?: undefined;
+                })[];
+                var?: undefined;
+                '==='?: undefined;
+                '!=='?: undefined;
             })[];
             '==='?: undefined;
             in?: undefined;

package/lib/mjs/components/select/editForm/Select.edit.data.js

@@ -27,16 +27,20 @@ const setSelectData = (context) => {
     // Wait before downloadedResources will be set
     setTimeout(() => {
         const { instance, data } = context;
-        const selectDataComponent = instance?.root.getComponent('selectData');
+        const selectDataComponent = instance?.root?.getComponent('selectData');
+        // clear selectData if conditions are not met or clearing default value
+        if (selectDataComponent && (!selectDataComponent.visible || !data.defaultValue)) {
+            selectDataComponent.setValue(null, { resetValue: true });
+            return;
+        }
         // nothing can set if don't have downloaded resources
         if (!selectDataComponent || !instance.getValue() || !instance.downloadedResources?.length) {
             return;
         }
-        // if valueProperty is not provided, we have entire object
         const shouldCalculateUrlData = data.dataSrc === 'url' && data.data.url && data.valueProperty;
         const shouldCalculateResourceData = data.dataSrc === 'resource' && data.data.resource && data.valueProperty;
-        const newValue = shouldCalculateUrlData || shouldCalculateResourceData ? calculateSelectData(context) : undefined;
-        selectDataComponent.setValue(newValue);
+        const newValue = shouldCalculateUrlData || shouldCalculateResourceData ? calculateSelectData(context) : null;
+        selectDataComponent.setValue(newValue, { resetValue: newValue === null });
     }, 0);
 };
 export default [
@@ -678,10 +682,25 @@ export default [
     {
         key: 'selectData',
         conditional: {
-            json: { 'and': [
-                    { '!==': [{ var: 'data.valueProperty' }, null] },
-                    { '!==': [{ var: 'data.valueProperty' }, ''] },
-                ] },
+            json: {
+                and: [
+                    { var: 'data.valueProperty' },
+                    { '===': [{ var: 'data.lazyLoad' }, true] },
+                    { '!==': [{ var: 'data.widget' }, 'html5'] },
+                    {
+                        or: [
+                            { '===': [{ var: 'data.dataSrc' }, 'url'] },
+                            {
+                                and: [
+                                    { '===': [{ var: 'data.dataSrc' }, 'resource'] },
+                                    // 'data' means entire object from resource will be used
+                                    { '!==': [{ var: 'data.valueProperty' }, 'data'] },
+                                ],
+                            }
+                        ]
+                    }
+                ]
+            },
         },
     },
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-dev.5811.fd4868a",
+  "version": "5.0.0-dev.5813.afa74f0",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -56,9 +56,10 @@
     "dopublish": "npm run build && npm run tag && npm publish",
     "lint": "eslint ./src --fix",
     "serve": "jekyll serve --config _config.yml,_config.dev.yml",
-    "test": "mocha 'src/**/*.unit.js'",
-    "test:updateRenders": "npm run lib && TZ=UTC node --require jsdom-global/register test/updateRenders.js",
-    "test:e2e": "NODE_OPTIONS=\"--max-old-space-size=4096\" karma start --verbose --single-run"
+    "test": "nyc --reporter=lcov --reporter=text --reporter=text-summary mocha test/unit/*.unit.js",
+    "test:updateRenders": "npm run lib && cross-env TZ=UTC node --require jsdom-global/register test/updateRenders.js",
+    "test:e2e": "NODE_OPTIONS=\"--max-old-space-size=4096\" karma start --verbose --single-run",
+    "show-coverage": "open coverage/lcov-report/index.html"
   },
   "repository": {
     "type": "git",
@@ -155,6 +156,7 @@
     "mocha": "^10.3.0",
     "mock-local-storage": "^1.1.24",
     "natives": "^1.1.6",
+    "nyc": "^17.0.0",
     "power-assert": "^1.6.1",
     "pre-commit": "^1.2.2",
     "pretty": "^2.0.0",
@@ -174,5 +176,19 @@
     "webpack-cli": "^5.1.1",
     "webpack-node-externals": "^3.0.0",
     "webpack-stream": "^7.0.0"
+  },
+  "nyc": {
+    "check-coverage": true,
+    "statements": 63,
+    "branches": 63,
+    "functions": 61,
+    "lines": 64,
+    "include": [
+      "src/**/*.js"
+    ],
+    "exclude": [
+      "src/**/fixtures"
+    ],
+    "all": true
   }
 }

package/lib/cjs/components/_classes/component/fixtures/comp1.d.ts

@@ -1,33 +0,0 @@
-declare namespace _default {
-    export let tags: never[];
-    export let type: string;
-    export namespace conditional {
-        let eq: string;
-        let when: null;
-        let show: string;
-    }
-    export namespace validate {
-        let customPrivate: boolean;
-        let custom: string;
-        let pattern: string;
-        let maxLength: number;
-        let minLength: number;
-        let required: boolean;
-    }
-    export let persistent: boolean;
-    export let unique: boolean;
-    let _protected: boolean;
-    export { _protected as protected };
-    export let defaultValue: string;
-    export let multiple: boolean;
-    export let suffix: string;
-    export let prefix: string;
-    export let placeholder: string;
-    export let key: string;
-    export let label: string;
-    export let inputMask: string;
-    export let inputType: string;
-    export let tableView: boolean;
-    export let input: boolean;
-}
-export default _default;

package/lib/cjs/components/_classes/component/fixtures/comp1.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    'tags': [],
-    'type': 'textfield',
-    'conditional': {
-        'eq': '',
-        'when': null,
-        'show': ''
-    },
-    'validate': {
-        'customPrivate': false,
-        'custom': '',
-        'pattern': '',
-        'maxLength': 0,
-        'minLength': 0,
-        'required': false
-    },
-    'persistent': true,
-    'unique': false,
-    'protected': false,
-    'defaultValue': '',
-    'multiple': false,
-    'suffix': '',
-    'prefix': '',
-    'placeholder': '',
-    'key': 'firstName',
-    'label': 'First Name',
-    'inputMask': '',
-    'inputType': 'text',
-    'tableView': true,
-    'input': true
-};

package/lib/cjs/components/_classes/component/fixtures/comp2.d.ts

@@ -1,33 +0,0 @@
-declare namespace _default {
-    export let tags: never[];
-    export let type: string;
-    export namespace conditional {
-        let eq: string;
-        let when: null;
-        let show: string;
-    }
-    export namespace validate {
-        let customPrivate: boolean;
-        let custom: string;
-        let pattern: string;
-        let maxLength: number;
-        let minLength: number;
-        let required: boolean;
-    }
-    export let persistent: boolean;
-    export let unique: boolean;
-    let _protected: boolean;
-    export { _protected as protected };
-    export let defaultValue: string;
-    export let multiple: boolean;
-    export let suffix: string;
-    export let prefix: string;
-    export let placeholder: string;
-    export let key: string;
-    export let label: string;
-    export let inputMask: string;
-    export let inputType: string;
-    export let tableView: boolean;
-    export let input: boolean;
-}
-export default _default;

package/lib/cjs/components/_classes/component/fixtures/comp2.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    'tags': [],
-    'type': 'textfield',
-    'conditional': {
-        'eq': '',
-        'when': null,
-        'show': ''
-    },
-    'validate': {
-        'customPrivate': false,
-        'custom': '',
-        'pattern': '',
-        'maxLength': 0,
-        'minLength': 0,
-        'required': false
-    },
-    'persistent': true,
-    'unique': false,
-    'protected': false,
-    'defaultValue': '',
-    'multiple': true,
-    'suffix': '',
-    'prefix': '',
-    'placeholder': '',
-    'key': 'names',
-    'label': 'Names',
-    'inputMask': '',
-    'inputType': 'text',
-    'tableView': true,
-    'input': true
-};

package/lib/cjs/components/_classes/component/fixtures/comp3.d.ts

@@ -1,14 +0,0 @@
-declare namespace _default {
-    let label: string;
-    let tableView: boolean;
-    let modalEdit: boolean;
-    let multiple: boolean;
-    namespace validate {
-        let multiple_1: boolean;
-        export { multiple_1 as multiple };
-    }
-    let key: string;
-    let type: string;
-    let input: boolean;
-}
-export default _default;

package/lib/cjs/components/_classes/component/fixtures/comp3.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    label: 'Text Field',
-    tableView: true,
-    modalEdit: true,
-    multiple: true,
-    validate: {
-        multiple: true
-    },
-    key: 'textField',
-    type: 'textfield',
-    input: true
-};

package/lib/cjs/components/_classes/component/fixtures/comp4.d.ts

@@ -1,17 +0,0 @@
-declare namespace _default {
-    let _id: string;
-    let label: string;
-    let tableView: boolean;
-    let modalEdit: boolean;
-    namespace validate {
-        let required: boolean;
-    }
-    let key: string;
-    let type: string;
-    let input: boolean;
-    let title: string;
-    let display: string;
-    let name: string;
-    let path: string;
-}
-export default _default;

package/lib/cjs/components/_classes/component/fixtures/comp4.js

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    _id: '611389eae1215a4dadc1099d',
-    label: 'Text Field',
-    tableView: true,
-    modalEdit: true,
-    validate: {
-        required: true
-    },
-    key: 'textField',
-    type: 'textfield',
-    input: true,
-    title: 'FIO-3631',
-    display: 'form',
-    name: 'fio3631',
-    path: 'fio3631',
-};

package/lib/cjs/components/_classes/component/fixtures/comp5.d.ts

@@ -1,26 +0,0 @@
-declare namespace _default {
-    let type: string;
-    let display: string;
-    let components: ({
-        label: string;
-        description: string;
-        tooltip: string;
-        applyMaskOn: string;
-        tableView: boolean;
-        key: string;
-        type: string;
-        input: boolean;
-        disableOnInvalid?: undefined;
-    } | {
-        type: string;
-        label: string;
-        key: string;
-        disableOnInvalid: boolean;
-        input: boolean;
-        tableView: boolean;
-        description?: undefined;
-        tooltip?: undefined;
-        applyMaskOn?: undefined;
-    })[];
-}
-export default _default;

package/lib/cjs/components/_classes/component/fixtures/comp5.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    type: 'form',
-    display: 'form',
-    components: [
-        {
-            label: 'Text Field',
-            description: "<img <img src='https://somesite' onerror='var _ee = 2' >",
-            tooltip: "<img src='https://somesite' onerror='var _ee = 1 >",
-            applyMaskOn: 'change',
-            tableView: true,
-            key: 'textField',
-            type: 'textfield',
-            input: true
-        },
-        {
-            type: 'button',
-            label: 'Submit',
-            key: 'submit',
-            disableOnInvalid: true,
-            input: true,
-            tableView: false
-        }
-    ],
-};

package/lib/cjs/components/_classes/component/fixtures/comp6.d.ts

@@ -1,77 +0,0 @@
-declare namespace _default {
-    let components: ({
-        label: string;
-        applyMaskOn: string;
-        tableView: boolean;
-        key: string;
-        type: string;
-        input: boolean;
-        defaultValue: string;
-        mask?: undefined;
-        delimiter?: undefined;
-        requireDecimal?: undefined;
-        inputFormat?: undefined;
-        truncateMultipleSpaces?: undefined;
-        widget?: undefined;
-        data?: undefined;
-        action?: undefined;
-        showValidations?: undefined;
-    } | {
-        label: string;
-        applyMaskOn: string;
-        mask: boolean;
-        tableView: boolean;
-        delimiter: boolean;
-        requireDecimal: boolean;
-        inputFormat: string;
-        truncateMultipleSpaces: boolean;
-        key: string;
-        type: string;
-        input: boolean;
-        defaultValue: number;
-        widget?: undefined;
-        data?: undefined;
-        action?: undefined;
-        showValidations?: undefined;
-    } | {
-        label: string;
-        widget: string;
-        tableView: boolean;
-        data: {
-            values: {
-                label: string;
-                value: string;
-            }[];
-        };
-        key: string;
-        type: string;
-        input: boolean;
-        defaultValue: string;
-        applyMaskOn?: undefined;
-        mask?: undefined;
-        delimiter?: undefined;
-        requireDecimal?: undefined;
-        inputFormat?: undefined;
-        truncateMultipleSpaces?: undefined;
-        action?: undefined;
-        showValidations?: undefined;
-    } | {
-        label: string;
-        action: string;
-        showValidations: boolean;
-        tableView: boolean;
-        key: string;
-        type: string;
-        input: boolean;
-        applyMaskOn?: undefined;
-        defaultValue?: undefined;
-        mask?: undefined;
-        delimiter?: undefined;
-        requireDecimal?: undefined;
-        inputFormat?: undefined;
-        truncateMultipleSpaces?: undefined;
-        widget?: undefined;
-        data?: undefined;
-    })[];
-}
-export default _default;