@formio/js 5.0.0-dev.5725.1c71137 → 5.0.0-dev.5727.73c63c0

package/lib/mjs/components/_classes/nestedarray/NestedArrayComponent.js

@@ -1,6 +1,6 @@
 'use strict';
 import _ from 'lodash';
-import { componentValueTypes, getStringFromComponentPath } from '../../../utils/utils';
+import { componentValueTypes, getStringFromComponentPath, isLayoutComponent } from '../../../utils/utils';
 import Component from '../component/Component';
 import NestedDataComponent from '../nesteddata/NestedDataComponent';
 export default class NestedArrayComponent extends NestedDataComponent {
@@ -145,38 +145,60 @@ export default class NestedArrayComponent extends NestedDataComponent {
             }
         });
     }
+    _getEmailTableHeader(options) {
+        let row = '';
+        const getHeaderCell = (component) => {
+            if (!component.isInputComponent || !component.visible || component.skipInEmail) {
+                return '';
+            }
+            const label = component.label || component.key;
+            return `<th style="padding: 5px 10px;">${label}</th>`;
+        };
+        const components = this.getComponents(0);
+        for (const component of components) {
+            if (component.isInputComponent) {
+                row += getHeaderCell(component);
+            }
+            else if (isLayoutComponent(component) && typeof component.everyComponent === 'function') {
+                component.everyComponent((comp) => {
+                    row += getHeaderCell(comp);
+                }, options);
+            }
+        }
+        return `<thead><tr>${row}</tr></thead>`;
+    }
+    _getEmailTableBody(options) {
+        const getBodyCell = (component) => {
+            if (!component.isInputComponent || !component.visible || component.skipInEmail) {
+                return '';
+            }
+            return `<td style="padding: 5px 10px;">${component.getView(component.dataValue, options)}</td>`;
+        };
+        const rows = [];
+        for (const { components } of this.iteratableRows) {
+            let row = '';
+            for (const component of components) {
+                if (component.isInputComponent) {
+                    row += getBodyCell(component);
+                }
+                else if (isLayoutComponent(component) && typeof component.everyComponent === 'function') {
+                    component.everyComponent((comp) => {
+                        row += getBodyCell(comp);
+                    }, options);
+                }
+            }
+            rows.push(`<tr>${row}</tr>`);
+        }
+        return `<tbody>${rows.join('')}</tbody>`;
+    }
     getValueAsString(value, options) {
         if (options?.email) {
-            let result = (`
+            return `
         <table border="1" style="width:100%">
-          <thead>
-            <tr>
-      `);
-            this.component.components?.forEach((component) => {
-                const label = component.label || component.key;
-                result += `<th style="padding: 5px 10px;">${label}</th>`;
-            });
-            result += (`
-          </tr>
-        </thead>
-        <tbody>
-      `);
-            this.iteratableRows.forEach(({ components }) => {
-                result += '<tr>';
-                _.each(components, (component) => {
-                    result += '<td style="padding:5px 10px;">';
-                    if (component.isInputComponent && component.visible && !component.skipInEmail) {
-                        result += component.getView(component.dataValue, options);
-                    }
-                    result += '</td>';
-                });
-                result += '</tr>';
-            });
-            result += (`
-          </tbody>
+          ${this._getEmailTableHeader(options)}
+          ${this._getEmailTableBody(options)}
         </table>
-      `);
-            return result;
+      `;
         }
         if (!value || !value.length) {
             return '';

package/lib/mjs/components/editgrid/fixtures/comp17.d.ts

@@ -1,49 +1,79 @@
 declare namespace _default {
+    let type: string;
+    let display: string;
     let components: ({
         label: string;
         tableView: boolean;
-        modalEdit: boolean;
-        validateWhenHidden: boolean;
         rowDrafts: boolean;
         key: string;
         type: string;
-        displayAsTable: boolean;
         input: boolean;
-        components: ({
-            label: string;
-            applyMaskOn: string;
-            tableView: boolean;
-            validate: {
-                required: boolean;
-            };
-            validateWhenHidden: boolean;
+        components: {
+            collapsible: boolean;
             key: string;
             type: string;
-            input: boolean;
-        } | {
             label: string;
-            applyMaskOn: string;
-            tableView: boolean;
-            validateWhenHidden: boolean;
-            key: string;
-            type: string;
             input: boolean;
-            validate?: undefined;
-        })[];
-        showValidations?: undefined;
-        saveOnEnter?: undefined;
+            tableView: boolean;
+            components: {
+                label: string;
+                columns: ({
+                    components: {
+                        label: string;
+                        optionsLabelPosition: string;
+                        inline: boolean;
+                        tableView: boolean;
+                        values: {
+                            label: string;
+                            value: string;
+                            shortcut: string;
+                        }[];
+                        key: string;
+                        type: string;
+                        input: boolean;
+                    }[];
+                    width: number;
+                    offset: number;
+                    push: number;
+                    pull: number;
+                    size: string;
+                    currentWidth: number;
+                } | {
+                    components: {
+                        label: string;
+                        applyMaskOn: string;
+                        autoExpand: boolean;
+                        tableView: boolean;
+                        key: string;
+                        conditional: {
+                            show: boolean;
+                            conjunction: string;
+                        };
+                        type: string;
+                        input: boolean;
+                    }[];
+                    width: number;
+                    offset: number;
+                    push: number;
+                    pull: number;
+                    size: string;
+                    currentWidth: number;
+                })[];
+                key: string;
+                type: string;
+                input: boolean;
+                tableView: boolean;
+            }[];
+        }[];
+        disableOnInvalid?: undefined;
     } | {
+        type: string;
         label: string;
-        showValidations: boolean;
-        tableView: boolean;
         key: string;
-        type: string;
+        disableOnInvalid: boolean;
         input: boolean;
-        saveOnEnter: boolean;
-        modalEdit?: undefined;
-        validateWhenHidden?: undefined;
+        tableView: boolean;
         rowDrafts?: undefined;
-        displayAsTable?: undefined;
         components?: undefined;
     })[];
 }

package/lib/mjs/components/editgrid/fixtures/comp17.js

@@ -1,47 +1,97 @@
 export default {
+    type: 'form',
+    display: 'form',
     components: [
         {
-            "label": "Edit Grid",
-            "tableView": false,
-            "modalEdit": true,
-            "validateWhenHidden": false,
-            "rowDrafts": false,
-            "key": "editGrid",
-            "type": "editgrid",
-            "displayAsTable": false,
-            "input": true,
-            "components": [
+            label: 'Edit Grid',
+            tableView: false,
+            rowDrafts: false,
+            key: 'editGrid',
+            type: 'editgrid',
+            input: true,
+            components: [
                 {
-                    "label": "Text Field",
-                    "applyMaskOn": "change",
-                    "tableView": true,
-                    "validate": {
-                        "required": true
-                    },
-                    "validateWhenHidden": false,
-                    "key": "textField1",
-                    "type": "textfield",
-                    "input": true
-                },
-                {
-                    "label": "Text Field",
-                    "applyMaskOn": "change",
-                    "tableView": true,
-                    "validateWhenHidden": false,
-                    "key": "textField",
-                    "type": "textfield",
-                    "input": true
+                    collapsible: false,
+                    key: 'panel',
+                    type: 'panel',
+                    label: 'Panel',
+                    input: false,
+                    tableView: false,
+                    components: [
+                        {
+                            label: 'Columns',
+                            columns: [
+                                {
+                                    components: [
+                                        {
+                                            label: 'Radio',
+                                            optionsLabelPosition: 'right',
+                                            inline: false,
+                                            tableView: true,
+                                            values: [
+                                                {
+                                                    label: 'yes',
+                                                    value: 'yes',
+                                                    shortcut: ''
+                                                },
+                                                {
+                                                    label: 'no',
+                                                    value: 'no',
+                                                    shortcut: ''
+                                                }
+                                            ],
+                                            key: 'radio',
+                                            type: 'radio',
+                                            input: true
+                                        }
+                                    ],
+                                    width: 6,
+                                    offset: 0,
+                                    push: 0,
+                                    pull: 0,
+                                    size: 'md',
+                                    currentWidth: 6
+                                },
+                                {
+                                    components: [
+                                        {
+                                            label: 'Text Area',
+                                            applyMaskOn: 'change',
+                                            autoExpand: false,
+                                            tableView: true,
+                                            key: 'textArea',
+                                            conditional: {
+                                                show: true,
+                                                conjunction: 'all'
+                                            },
+                                            type: 'textarea',
+                                            input: true
+                                        }
+                                    ],
+                                    width: 6,
+                                    offset: 0,
+                                    push: 0,
+                                    pull: 0,
+                                    size: 'md',
+                                    currentWidth: 6
+                                }
+                            ],
+                            key: 'columns',
+                            type: 'columns',
+                            input: false,
+                            tableView: false
+                        }
+                    ]
                 }
             ]
         },
         {
-            "label": "Submit",
-            "showValidations": false,
-            "tableView": false,
-            "key": "submit",
-            "type": "button",
-            "input": true,
-            "saveOnEnter": false
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false
         }
     ]
 };

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

@@ -1,22 +1,22 @@
 import comp1 from './comp1';
 import comp2 from './comp2';
 import comp3 from './comp3';
-import comp4 from './comp4';
-import comp5 from './comp5';
-import comp6 from './comp6';
-import comp7 from './comp7';
-import comp8 from './comp8';
-import comp9 from './comp9';
 import comp10 from './comp10';
 import comp11 from './comp11';
 import comp12 from './comp12';
 import comp13 from './comp13';
 import comp14 from './comp14';
 import comp15 from './comp15';
+import comp4 from './comp4';
+import comp5 from './comp5';
+import comp6 from './comp6';
+import comp7 from './comp7';
+import comp8 from './comp8';
+import comp9 from './comp9';
 import comp16 from './comp16';
 import comp17 from './comp17';
 import compOpenWhenEmpty from './comp-openWhenEmpty';
 import withOpenWhenEmptyAndConditions from './comp-with-conditions-and-openWhenEmpty';
 import compWithCustomDefaultValue from './comp-with-custom-default-value';
 import compTestEvents from './comp-test-events';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };
+export { comp1, comp2, comp3, comp10, comp11, comp12, comp13, comp14, comp15, comp4, comp5, comp6, comp7, comp8, comp9, comp16, comp17, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };

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

@@ -19,4 +19,4 @@ import withOpenWhenEmptyAndConditions from './comp-with-conditions-and-openWhenE
 import compOpenWhenEmpty from './comp-openWhenEmpty';
 import compWithCustomDefaultValue from './comp-with-custom-default-value';
 import compTestEvents from './comp-test-events';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };
+export { comp1, comp2, comp3, comp10, comp11, comp12, comp13, comp14, comp15, comp4, comp5, comp6, comp7, comp8, comp9, comp16, comp17, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };

package/lib/mjs/components/panel/Panel.d.ts

@@ -4,6 +4,7 @@ export default class PanelComponent extends NestedComponent {
         icon: string;
         group: string;
         documentation: string;
+        showPreview: boolean;
         weight: number;
         schema: any;
     };

package/lib/mjs/components/panel/Panel.js

@@ -22,6 +22,7 @@ export default class PanelComponent extends NestedComponent {
             icon: 'list-alt',
             group: 'layout',
             documentation: '/userguide/form-building/layout-components#panel',
+            showPreview: false,
             weight: 30,
             schema: PanelComponent.schema()
         };

package/lib/mjs/components/radio/Radio.js

@@ -295,14 +295,15 @@ export default class RadioComponent extends ListComponent {
     setItems(items) {
         const listData = [];
         items?.forEach((item, i) => {
+            const valueAtProperty = _.get(item, this.component.valueProperty);
             this.loadedOptions[i] = {
-                value: this.component.valueProperty ? item[this.component.valueProperty] : item,
-                label: this.component.valueProperty ? this.itemTemplate(item, item[this.component.valueProperty]) : this.itemTemplate(item, item, i)
+                value: this.component.valueProperty ? valueAtProperty : item,
+                label: this.component.valueProperty ? this.itemTemplate(item, valueAtProperty) : this.itemTemplate(item, item, i)
             };
-            listData.push(this.templateData[this.component.valueProperty ? item[this.component.valueProperty] : i]);
-            if ((this.component.valueProperty || !this.isRadio) && (_.isUndefined(item[this.component.valueProperty]) ||
-                (!this.isRadio && _.isObject(item[this.component.valueProperty])) ||
-                (!this.isRadio && _.isBoolean(item[this.component.valueProperty])))) {
+            listData.push(this.templateData[this.component.valueProperty ? valueAtProperty : i]);
+            if ((this.component.valueProperty || !this.isRadio) && (_.isUndefined(valueAtProperty) ||
+                (!this.isRadio && _.isObject(valueAtProperty)) ||
+                (!this.isRadio && _.isBoolean(valueAtProperty)))) {
                 this.loadedOptions[i].invalid = true;
             }
         });

package/lib/mjs/components/radio/fixtures/comp12.d.ts

@@ -0,0 +1,29 @@
+declare namespace _default {
+    let components: {
+        label: string;
+        optionsLabelPosition: string;
+        tableView: boolean;
+        dataSrc: string;
+        values: {
+            label: string;
+            value: string;
+            shortcut: string;
+        }[];
+        valueProperty: string;
+        validateWhenHidden: boolean;
+        key: string;
+        type: string;
+        data: {
+            url: string;
+            headers: {
+                key: string;
+                value: string;
+            }[];
+        };
+        template: string;
+        authenticate: boolean;
+        input: boolean;
+        inputType: string;
+    }[];
+}
+export default _default;

package/lib/mjs/components/radio/fixtures/comp12.js

@@ -0,0 +1,34 @@
+export default {
+    components: [
+        {
+            "label": "Select Boxes",
+            "optionsLabelPosition": "right",
+            "tableView": false,
+            "dataSrc": "url",
+            "values": [
+                {
+                    "label": "",
+                    "value": "",
+                    "shortcut": ""
+                }
+            ],
+            "valueProperty": "data.name",
+            "validateWhenHidden": false,
+            "key": "selectBoxes",
+            "type": "selectboxes",
+            "data": {
+                "url": "https://remote-dev.form.io/projectId/name/submission",
+                "headers": [
+                    {
+                        "key": "",
+                        "value": ""
+                    }
+                ]
+            },
+            "template": "<span>{{ item.data.name }}</span>",
+            "authenticate": true,
+            "input": true,
+            "inputType": "checkbox"
+        }
+    ]
+};

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

@@ -9,4 +9,5 @@ import comp8 from './comp8';
 import comp9 from './comp9';
 import comp10 from './comp10';
 import comp11 from './comp11';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11 };
+import comp12 from './comp12';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12 };

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

@@ -9,4 +9,5 @@ import comp8 from './comp8';
 import comp9 from './comp9';
 import comp10 from './comp10';
 import comp11 from './comp11';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11 };
+import comp12 from './comp12';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12 };

package/lib/mjs/templates/Templates.js

@@ -1,5 +1,5 @@
 import templates from './index';
 import { Template } from '@formio/core/experimental';
 Template.addTemplates(templates);
-Template.defaultTemplates = templates.bootstrap;
+Template.defaultTemplates = Template.templates.bootstrap;
 export default Template;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-dev.5725.1c71137",
+  "version": "5.0.0-dev.5727.73c63c0",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {