@formio/js 5.0.0-rc.39 → 5.0.0-rc.41

package/lib/mjs/components/builder.js

@@ -26,7 +26,6 @@ import PasswordForm from './password/Password.form';
 import PhoneNumberForm from './phonenumber/PhoneNumber.form';
 import RadioForm from './radio/Radio.form';
 import ReCaptchaForm from './recaptcha/ReCaptcha.form';
-import ResourceForm from './resource/Resource.form';
 import SelectboxesForm from './selectboxes/SelectBoxes.form';
 import SelectForm from './select/Select.form';
 import SignatureForm from './signature/Signature.form';
@@ -67,7 +66,6 @@ Components.password.editForm = PasswordForm;
 Components.phoneNumber.editForm = PhoneNumberForm;
 Components.radio.editForm = RadioForm;
 Components.recaptcha.editForm = ReCaptchaForm;
-Components.resource.editForm = ResourceForm;
 Components.select.editForm = SelectForm;
 Components.selectboxes.editForm = SelectboxesForm;
 Components.signature.editForm = SignatureForm;

package/lib/mjs/components/button/Button.js

@@ -358,9 +358,15 @@ export default class ButtonComponent extends Field {
             response_type: 'code',
             client_id: settings.clientId,
             redirect_uri: (settings.redirectURI && this.interpolate(settings.redirectURI)) || window.location.origin || `${window.location.protocol}//${window.location.host}`,
-            state: settings.state,
             scope: settings.scope
         };
+        if (settings.state) {
+            params.state = settings.state;
+        }
+        else if (settings.code_challenge) {
+            params.code_challenge = settings.code_challenge;
+            params.code_challenge_method = 'S256';
+        }
         /*eslint-enable camelcase */
         // Needs for the correct redirection URI for the OpenID
         const originalRedirectUri = params.redirect_uri;

package/lib/mjs/components/datagrid/DataGrid.js

@@ -122,6 +122,15 @@ export default class DataGridComponent extends NestedArrayComponent {
             data: this.dataValue[index],
         }));
     }
+    isEmpty(value = this.dataValue) {
+        const isEmpty = super.isEmpty(value);
+        if (this.components?.length) {
+            return this.components.reduce((isEmpty, component) => {
+                return isEmpty && component.isEmpty();
+            }, true);
+        }
+        return isEmpty;
+    }
     /**
      * Split rows into chunks.
      * @param {Number[]} groups - array of numbers where each item is size of group
@@ -400,12 +409,14 @@ export default class DataGridComponent extends NestedArrayComponent {
         });
     }
     removeRow(index) {
-        this.splice(index, { isReordered: true });
+        const makeEmpty = index === 0 && this.rows.length === 1;
+        const flags = { isReordered: !makeEmpty, resetValue: makeEmpty };
+        this.splice(index, flags);
         this.emit('dataGridDeleteRow', { index });
         const [row] = this.rows.splice(index, 1);
         this.removeRowComponents(row);
         this.updateRowsComponents(index);
-        this.setValue(this.dataValue, { isReordered: true });
+        this.setValue(this.dataValue, flags);
         this.redraw();
     }
     removeRowComponents(row) {
@@ -552,7 +563,8 @@ export default class DataGridComponent extends NestedArrayComponent {
         const isSettingSubmission = flags.fromSubmission && !_.isEqual(value, this.emptyValue);
         const changed = this.hasChanged(value, this.dataValue);
         this.dataValue = value;
-        if (this.initRows || isSettingSubmission) {
+        if (this.initRows || isSettingSubmission ||
+            (Array.isArray(this.dataValue) && this.dataValue.length !== this.rows.length)) {
             if (!this.createRows() && changed) {
                 this.redraw();
             }

package/lib/mjs/components/datagrid/fixtures/comp-with-allow-calculate-override.js

@@ -0,0 +1,66 @@
+export default {
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Select',
+            widget: 'choicesjs',
+            tableView: true,
+            data: {
+                values: [
+                    {
+                        label: 'a',
+                        value: 'a'
+                    },
+                    {
+                        label: 'b',
+                        value: 'b'
+                    },
+                    {
+                        label: 'c',
+                        value: 'c'
+                    }
+                ]
+            },
+            key: 'select',
+            type: 'select',
+            input: true
+        },
+        {
+            label: 'Data Grid',
+            reorder: false,
+            addAnotherPosition: 'bottom',
+            layoutFixed: false,
+            enableRowGroups: false,
+            initEmpty: false,
+            tableView: false,
+            defaultValue: [
+                {
+                    firstName: '',
+                    lastName: ''
+                }
+            ],
+            calculateValue: "var temp = instance.defaultValue;\n  if(data.select === 'a')\n  {\n    temp = [{'firstName': 'A f 1','lastName': 'A l 1'}];\n  } else if(data.select === 'b') {  \n    temp = [{'firstName': 'B f 1','lastName': 'B l 1'}  \n    ,{'firstName': 'B f 2','lastName': 'B l 2'}];\n  } else if(data.select === 'c') {  \n    temp = [{'firstName': 'C f 1','lastName': 'C l 1'}];\n  }\n  value = temp;",
+            allowCalculateOverride: true,
+            key: 'dataGrid',
+            type: 'datagrid',
+            input: true,
+            components: [
+                {
+                    label: 'First Name',
+                    tableView: true,
+                    key: 'firstName',
+                    type: 'textfield',
+                    input: true
+                },
+                {
+                    label: 'Last Name',
+                    tableView: true,
+                    key: 'lastName',
+                    type: 'textfield',
+                    input: true
+                }
+            ]
+        }
+    ]
+};

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

@@ -138,7 +138,7 @@ export default {
                     providerOptions: {
                         params: {
                             autocompleteOptions: {},
-                            key: 'AIzaSyBNL2e4MnmyPj9zN7SVAe428nCSLP1X144',
+                            key: '',
                         },
                     },
                     input: true,

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

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

package/lib/mjs/components/datagrid/fixtures/two-comp-with-allow-calculate-override.js

@@ -0,0 +1,102 @@
+export default {
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Select',
+            widget: 'choicesjs',
+            tableView: true,
+            data: {
+                values: [
+                    {
+                        label: 'a',
+                        value: 'a'
+                    },
+                    {
+                        label: 'b',
+                        value: 'b'
+                    },
+                    {
+                        label: 'c',
+                        value: 'c'
+                    }
+                ]
+            },
+            key: 'select',
+            type: 'select',
+            input: true
+        },
+        {
+            label: 'Data Grid',
+            reorder: false,
+            addAnotherPosition: 'bottom',
+            layoutFixed: false,
+            enableRowGroups: false,
+            initEmpty: false,
+            tableView: false,
+            defaultValue: [
+                {
+                    firstName: '',
+                    lastName: ''
+                }
+            ],
+            calculateValue: "var temp = instance.defaultValue;\n  if(data.select === 'a')\n  {\n    temp = [{'firstName': 'A f 1','lastName': 'A l 1'}];\n  } else if(data.select === 'b') {  \n    temp = [{'firstName': 'B f 1','lastName': 'B l 1'}  \n    ,{'firstName': 'B f 2','lastName': 'B l 2'}];\n  } else if(data.select === 'c') {  \n    temp = [{'firstName': 'C f 1','lastName': 'C l 1'}];\n  }\n  value = temp;",
+            allowCalculateOverride: true,
+            key: 'dataGrid',
+            type: 'datagrid',
+            input: true,
+            components: [
+                {
+                    label: 'First Name',
+                    tableView: true,
+                    key: 'firstName',
+                    type: 'textfield',
+                    input: true
+                },
+                {
+                    label: 'Last Name',
+                    tableView: true,
+                    key: 'lastName',
+                    type: 'textfield',
+                    input: true
+                }
+            ]
+        },
+        {
+            label: 'Data Grid 2',
+            reorder: false,
+            addAnotherPosition: 'bottom',
+            layoutFixed: false,
+            enableRowGroups: false,
+            initEmpty: false,
+            tableView: false,
+            defaultValue: [
+                {
+                    firstName: '',
+                    lastName: ''
+                }
+            ],
+            calculateValue: "var temp = instance.defaultValue;\n  if(data.select === 'a')\n  {\n    temp = [{'firstName': 'A f 1','lastName': 'A l 1'}];\n  } else if(data.select === 'b') {  \n    temp = [{'firstName': 'B f 1','lastName': 'B l 1'}  \n    ,{'firstName': 'B f 2','lastName': 'B l 2'}];\n  } else if(data.select === 'c') {  \n    temp = [{'firstName': 'C f 1','lastName': 'C l 1'}];\n  }\n  value = temp;",
+            allowCalculateOverride: true,
+            key: 'dataGrid2',
+            type: 'datagrid',
+            input: true,
+            components: [
+                {
+                    label: 'First Name',
+                    tableView: true,
+                    key: 'firstName',
+                    type: 'textfield',
+                    input: true
+                },
+                {
+                    label: 'Last Name',
+                    tableView: true,
+                    key: 'lastName',
+                    type: 'textfield',
+                    input: true
+                }
+            ]
+        }
+    ]
+};

package/lib/mjs/components/editgrid/EditGrid.js

@@ -570,6 +570,10 @@ export default class EditGridComponent extends NestedArrayComponent {
                 ? (this.editRows[rowIndex]?.components || [])
                 : this.editRows.reduce((result, row) => result.concat(row.components || []), []);
     }
+    destroy(all = false) {
+        this.calculatedValue = undefined;
+        super.destroy(all);
+    }
     destroyComponents(all = false, rowIndex = 0) {
         if (this.builderMode) {
             return super.destroyComponents(all);
@@ -1073,7 +1077,7 @@ export default class EditGridComponent extends NestedArrayComponent {
             }
             return false;
         }
-        else if (rowsEditing && this.saveEditMode) {
+        else if (rowsEditing && this.saveEditMode && !this.component.openWhenEmpty) {
             this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);
             return false;
         }
@@ -1101,7 +1105,7 @@ export default class EditGridComponent extends NestedArrayComponent {
         }
     }
     changeState(changed, flags) {
-        if (changed || (flags.resetValue && this.component.modalEdit)) {
+        if (this.visible && (changed || (flags.resetValue && this.component.modalEdit))) {
             this.rebuild();
         }
         else {
@@ -1121,7 +1125,7 @@ export default class EditGridComponent extends NestedArrayComponent {
             }
         }
         const changed = this.hasChanged(value, this.dataValue);
-        if (this.parent) {
+        if (this.parent && !this.options.server) {
             this.parent.checkComponentConditions();
         }
         this.dataValue = value;
@@ -1154,7 +1158,10 @@ export default class EditGridComponent extends NestedArrayComponent {
         this.editRows = this.editRows.slice(0, dataLength);
         this.openWhenEmpty();
         this.updateOnChange(flags, changed);
-        this.checkData();
+        // do not call checkData with server option, it is called when change is triggered in updateOnChange
+        if (!this.options.server) {
+            this.checkData();
+        }
         this.changeState(changed, flags);
         return changed;
     }