@formio/js 5.0.0-rc.5

package/lib/cjs/components/datagrid/fixtures/comp-with-collapsible-groups.d.ts

@@ -0,0 +1,76 @@
+declare namespace _default {
+    const type: string;
+    const components: ({
+        label: string;
+        disableAddingRemovingRows: boolean;
+        reorder: boolean;
+        addAnotherPosition: string;
+        layoutFixed: boolean;
+        enableRowGroups: boolean;
+        initEmpty: boolean;
+        tableView: boolean;
+        defaultValue: {
+            textField: string;
+            number: string;
+        }[];
+        key: string;
+        type: string;
+        rowGroups: {
+            label: string;
+            numberOfRows: number;
+        }[];
+        groupToggle: boolean;
+        input: boolean;
+        components: ({
+            label: string;
+            tableView: boolean;
+            key: string;
+            type: string;
+            input: boolean;
+            mask?: undefined;
+            delimiter?: undefined;
+            requireDecimal?: undefined;
+            inputFormat?: undefined;
+            truncateMultipleSpaces?: undefined;
+        } | {
+            label: string;
+            mask: boolean;
+            tableView: boolean;
+            delimiter: boolean;
+            requireDecimal: boolean;
+            inputFormat: string;
+            truncateMultipleSpaces: boolean;
+            key: string;
+            type: string;
+            input: boolean;
+        })[];
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        disableAddingRemovingRows?: undefined;
+        reorder?: undefined;
+        addAnotherPosition?: undefined;
+        layoutFixed?: undefined;
+        enableRowGroups?: undefined;
+        initEmpty?: undefined;
+        defaultValue?: undefined;
+        rowGroups?: undefined;
+        groupToggle?: undefined;
+        components?: undefined;
+    })[];
+    const _vid: number;
+    const title: string;
+    const display: string;
+    const name: string;
+    const path: string;
+    const project: string;
+    const created: string;
+    const modified: string;
+    const machineName: string;
+}
+export default _default;

package/lib/cjs/components/datagrid/fixtures/comp-with-collapsible-groups.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    type: 'form',
+    components: [
+        {
+            label: 'Data Grid',
+            disableAddingRemovingRows: true,
+            reorder: false,
+            addAnotherPosition: 'bottom',
+            layoutFixed: false,
+            enableRowGroups: true,
+            initEmpty: false,
+            tableView: false,
+            defaultValue: [
+                {
+                    textField: '',
+                    number: '',
+                },
+            ],
+            key: 'dataGrid',
+            type: 'datagrid',
+            rowGroups: [
+                {
+                    label: 'group1',
+                    numberOfRows: 2,
+                },
+                {
+                    label: 'group2',
+                    numberOfRows: 3,
+                },
+            ],
+            groupToggle: true,
+            input: true,
+            components: [
+                {
+                    label: 'Text Field',
+                    tableView: true,
+                    key: 'textField',
+                    type: 'textfield',
+                    input: true,
+                },
+                {
+                    label: 'Number',
+                    mask: false,
+                    tableView: false,
+                    delimiter: false,
+                    requireDecimal: false,
+                    inputFormat: 'plain',
+                    truncateMultipleSpaces: false,
+                    key: 'number',
+                    type: 'number',
+                    input: true,
+                },
+            ],
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false,
+        },
+    ],
+    _vid: 0,
+    title: 'test',
+    display: 'form',
+    name: 'test',
+    path: 'test',
+    project: '6152d9c4daa2ef2742d17c07',
+    created: '2022-12-19T10:14:02.292Z',
+    modified: '2022-12-19T13:19:37.649Z',
+    machineName: 'njwzrqvnlksevej:test',
+};

package/lib/cjs/components/datagrid/fixtures/comp-with-conditional-components-and-validations.d.ts

@@ -0,0 +1,197 @@
+declare namespace _default {
+    const type: string;
+    const components: ({
+        title: string;
+        label: string;
+        type: string;
+        key: string;
+        components: ({
+            label: string;
+            attrs: {
+                attr: string;
+                value: string;
+            }[];
+            content: string;
+            refreshOnChange: boolean;
+            key: string;
+            type: string;
+            tableView: boolean;
+            input: boolean;
+            alwaysEnabled: boolean;
+            optionsLabelPosition?: undefined;
+            inline?: undefined;
+            values?: undefined;
+            validate?: undefined;
+            reorder?: undefined;
+            addAnotherPosition?: undefined;
+            defaultOpen?: undefined;
+            layoutFixed?: undefined;
+            enableRowGroups?: undefined;
+            components?: undefined;
+            path?: undefined;
+        } | {
+            label: string;
+            alwaysEnabled: boolean;
+            tableView: boolean;
+            key: string;
+            type: string;
+            input: boolean;
+            attrs?: undefined;
+            content?: undefined;
+            refreshOnChange?: undefined;
+            optionsLabelPosition?: undefined;
+            inline?: undefined;
+            values?: undefined;
+            validate?: undefined;
+            reorder?: undefined;
+            addAnotherPosition?: undefined;
+            defaultOpen?: undefined;
+            layoutFixed?: undefined;
+            enableRowGroups?: undefined;
+            components?: undefined;
+            path?: undefined;
+        } | {
+            label: string;
+            optionsLabelPosition: string;
+            inline: boolean;
+            alwaysEnabled: boolean;
+            tableView: boolean;
+            values: {
+                label: string;
+                value: string;
+                shortcut: string;
+            }[];
+            validate: {
+                required: boolean;
+            };
+            key: string;
+            type: string;
+            input: boolean;
+            attrs?: undefined;
+            content?: undefined;
+            refreshOnChange?: undefined;
+            reorder?: undefined;
+            addAnotherPosition?: undefined;
+            defaultOpen?: undefined;
+            layoutFixed?: undefined;
+            enableRowGroups?: undefined;
+            components?: undefined;
+            path?: undefined;
+        } | {
+            label: string;
+            reorder: boolean;
+            addAnotherPosition: string;
+            defaultOpen: boolean;
+            layoutFixed: boolean;
+            enableRowGroups: boolean;
+            alwaysEnabled: boolean;
+            tableView: boolean;
+            key: string;
+            type: string;
+            input: boolean;
+            components: ({
+                label: string;
+                tableView: boolean;
+                validate: {
+                    custom: string;
+                    required?: undefined;
+                };
+                key: string;
+                type: string;
+                alwaysEnabled: boolean;
+                input: boolean;
+                optionsLabelPosition?: undefined;
+                inline?: undefined;
+                values?: undefined;
+                radio1?: undefined;
+                allowCalculateOverride?: undefined;
+            } | {
+                label: string;
+                optionsLabelPosition: string;
+                inline: boolean;
+                tableView: boolean;
+                values: {
+                    label: string;
+                    value: string;
+                    shortcut: string;
+                }[];
+                validate: {
+                    required: boolean;
+                };
+                key: string;
+                customConditional: string;
+                type: string;
+                alwaysEnabled: boolean;
+                input: boolean;
+                radio1?: undefined;
+                allowCalculateOverride?: undefined;
+            } | {
+                label: string;
+                alwaysEnabled: boolean;
+                tableView: boolean;
+                key: string;
+                customConditional: string;
+                type: string;
+                input: boolean;
+                radio1: null;
+                validate?: undefined;
+                optionsLabelPosition?: undefined;
+                inline?: undefined;
+                values?: undefined;
+                allowCalculateOverride?: undefined;
+            } | {
+                label: string;
+                tableView: boolean;
+                calculateValue: string;
+                allowCalculateOverride: boolean;
+                key: string;
+                customConditional: string;
+                type: string;
+                alwaysEnabled: boolean;
+                input: boolean;
+                validate?: undefined;
+                optionsLabelPosition?: undefined;
+                inline?: undefined;
+                values?: undefined;
+                radio1?: undefined;
+            } | {
+                label: string;
+                alwaysEnabled: boolean;
+                tableView: boolean;
+                calculateValue: string;
+                key: string;
+                customConditional: string;
+                type: string;
+                input: boolean;
+                validate?: undefined;
+                optionsLabelPosition?: undefined;
+                inline?: undefined;
+                values?: undefined;
+                radio1?: undefined;
+                allowCalculateOverride?: undefined;
+            })[];
+            path: string;
+            attrs?: undefined;
+            content?: undefined;
+            refreshOnChange?: undefined;
+            optionsLabelPosition?: undefined;
+            inline?: undefined;
+            values?: undefined;
+            validate?: undefined;
+        })[];
+        input: boolean;
+        tableView: boolean;
+        showValidations?: undefined;
+    } | {
+        label: string;
+        showValidations: boolean;
+        tableView: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        title?: undefined;
+        components?: undefined;
+    })[];
+    const display: string;
+}
+export default _default;

package/lib/cjs/components/datagrid/fixtures/comp-with-conditional-components-and-validations.js

@@ -0,0 +1,178 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    type: 'form',
+    components: [
+        {
+            title: 'Page 1',
+            label: 'Page 1',
+            type: 'panel',
+            key: 'page1',
+            components: [
+                {
+                    label: 'HTML',
+                    attrs: [
+                        {
+                            attr: '',
+                            value: ''
+                        }
+                    ],
+                    content: "<b>Various Tests on Calculations, Conditionals, and Custom Validations:</b>\n<br><i>(the following rules apply to both the DataGrid and EditGrid)</i>\n<br><b>Root Text:</b>\n<br>- 1st Textfield in DG and EG should match the 'Root Text' field data\n<br>- 2nd Textfield in DG and EG ('Row') should match the data from the 1st Textfield in the DG and EG\n<br><b>Root Radio:</b>\n<br>- When show is clicked, Radio should display in DG and EG\n<br><b>Grid Radio:</b>\n<br>- When show is clicked for the Grid Radio, the 'Row Show' textfield should display in the DG and EG\n<br><b>Root Calculated Text:</b>\n<br>- Data entered in this textfield should display and populate grid calculated field\n<br>- Textfield next to above should calculate based on grid calculated field",
+                    refreshOnChange: false,
+                    key: 'html',
+                    type: 'htmlelement',
+                    tableView: false,
+                    input: false,
+                    alwaysEnabled: false
+                },
+                {
+                    label: 'Root Text',
+                    alwaysEnabled: false,
+                    tableView: true,
+                    key: 'text',
+                    type: 'textfield',
+                    input: true
+                },
+                {
+                    label: 'Root - Radio',
+                    optionsLabelPosition: 'right',
+                    inline: false,
+                    alwaysEnabled: false,
+                    tableView: false,
+                    values: [
+                        {
+                            label: 'Show',
+                            value: 'show',
+                            shortcut: ''
+                        },
+                        {
+                            label: 'Hide',
+                            value: 'hide',
+                            shortcut: ''
+                        }
+                    ],
+                    validate: {
+                        required: true
+                    },
+                    key: 'radio',
+                    type: 'radio',
+                    input: true
+                },
+                {
+                    label: 'Root - Text Calculate',
+                    alwaysEnabled: false,
+                    tableView: true,
+                    key: 'textCal',
+                    type: 'textfield',
+                    input: true
+                },
+                {
+                    label: 'Data Grid',
+                    reorder: false,
+                    addAnotherPosition: 'bottom',
+                    defaultOpen: false,
+                    layoutFixed: false,
+                    enableRowGroups: false,
+                    alwaysEnabled: false,
+                    tableView: false,
+                    key: 'dataGrid',
+                    type: 'datagrid',
+                    input: true,
+                    components: [
+                        {
+                            label: 'Textfield - DG',
+                            tableView: true,
+                            validate: {
+                                custom: 'valid = (input === data.text) ? true : `data must match root textfield: ${input}, ${data.text}`;'
+                            },
+                            key: 'rootTest',
+                            type: 'textfield',
+                            alwaysEnabled: false,
+                            input: true
+                        },
+                        {
+                            label: 'Row Test - DG',
+                            tableView: true,
+                            validate: {
+                                custom: 'valid = (input == row.rootTest) ? true : `must equal textfield in dg: ${input}, ${row.rootTest}`;'
+                            },
+                            key: 'rowTest',
+                            type: 'textfield',
+                            alwaysEnabled: false,
+                            input: true
+                        },
+                        {
+                            label: 'Radio',
+                            optionsLabelPosition: 'right',
+                            inline: false,
+                            tableView: false,
+                            values: [
+                                {
+                                    label: 'DG Show',
+                                    value: 'dgShow',
+                                    shortcut: ''
+                                },
+                                {
+                                    label: 'DG Hide',
+                                    value: 'dgHide',
+                                    shortcut: ''
+                                }
+                            ],
+                            validate: {
+                                required: true
+                            },
+                            key: 'radio1',
+                            customConditional: "show = (data.radio === 'show');",
+                            type: 'radio',
+                            alwaysEnabled: false,
+                            input: true
+                        },
+                        {
+                            label: "Row Show - Show textfield when data grid radio has 'show' value",
+                            alwaysEnabled: false,
+                            tableView: true,
+                            key: 'rowShowShowTextfieldWhenDataGridRadioHasShowValue',
+                            customConditional: "show = (row.radio1 === 'dgShow');",
+                            type: 'textfield',
+                            input: true,
+                            radio1: null
+                        },
+                        {
+                            label: "DG Calculated - Value should populate from 'root calculated text' field",
+                            tableView: true,
+                            calculateValue: 'value = data.textCal;',
+                            allowCalculateOverride: true,
+                            key: 'calculateTextDg',
+                            customConditional: 'show = (data.textCal);',
+                            type: 'textfield',
+                            alwaysEnabled: false,
+                            input: true
+                        },
+                        {
+                            label: 'Textfield - Data should populate from Datagrid calculate field',
+                            alwaysEnabled: false,
+                            tableView: true,
+                            calculateValue: 'value = row.calculateTextDg;',
+                            key: 'textfieldDataShouldPopulateFromDatagridCalculateField',
+                            customConditional: 'show = (data.textCal);',
+                            type: 'textfield',
+                            input: true
+                        }
+                    ],
+                    path: 'dataGrid'
+                }
+            ],
+            input: false,
+            tableView: false
+        },
+        {
+            label: 'Submit',
+            showValidations: false,
+            tableView: false,
+            key: 'submit',
+            type: 'button',
+            input: true
+        }
+    ],
+    display: 'form'
+};

package/lib/cjs/components/datagrid/fixtures/comp-with-def-value.d.ts

@@ -0,0 +1,61 @@
+declare namespace _default {
+    const label: string;
+    const disableAddingRemovingRows: boolean;
+    const addAnother: string;
+    const addAnotherPosition: string;
+    const removePlacement: string;
+    const defaultOpen: boolean;
+    const layoutFixed: boolean;
+    const enableRowGroups: boolean;
+    const mask: boolean;
+    const tableView: boolean;
+    const alwaysEnabled: boolean;
+    const type: string;
+    const input: boolean;
+    const key: string;
+    const components: ({
+        label: string;
+        allowMultipleMasks: boolean;
+        showWordCount: boolean;
+        showCharCount: boolean;
+        tableView: boolean;
+        alwaysEnabled: boolean;
+        type: string;
+        input: boolean;
+        key: string;
+        widget: {
+            type: string;
+        };
+        row: string;
+        mask?: undefined;
+    } | {
+        label: string;
+        mask: boolean;
+        tableView: boolean;
+        alwaysEnabled: boolean;
+        type: string;
+        input: boolean;
+        key: string;
+        row: string;
+        allowMultipleMasks?: undefined;
+        showWordCount?: undefined;
+        showCharCount?: undefined;
+        widget?: undefined;
+    })[];
+    const encrypted: boolean;
+    const defaultValue: {
+        name: string;
+        age: number;
+    }[];
+    namespace validate {
+        const customMessage: string;
+        const json: string;
+    }
+    namespace conditional {
+        export const show: string;
+        export const when: string;
+        const json_1: string;
+        export { json_1 as json };
+    }
+}
+export default _default;

package/lib/cjs/components/datagrid/fixtures/comp-with-def-value.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    'label': 'Data Grid',
+    'disableAddingRemovingRows': false,
+    'addAnother': '',
+    'addAnotherPosition': 'bottom',
+    'removePlacement': 'col',
+    'defaultOpen': false,
+    'layoutFixed': false,
+    'enableRowGroups': false,
+    'mask': false,
+    'tableView': true,
+    'alwaysEnabled': false,
+    'type': 'datagrid',
+    'input': true,
+    'key': 'dataGrid',
+    'components': [
+        {
+            'label': 'Name',
+            'allowMultipleMasks': false,
+            'showWordCount': false,
+            'showCharCount': false,
+            'tableView': true,
+            'alwaysEnabled': false,
+            'type': 'textfield',
+            'input': true,
+            'key': 'name',
+            'widget': {
+                'type': ''
+            },
+            'row': '0-0'
+        },
+        {
+            'label': 'Age',
+            'mask': false,
+            'tableView': true,
+            'alwaysEnabled': false,
+            'type': 'number',
+            'input': true,
+            'key': 'age',
+            'row': '0-1'
+        }
+    ],
+    'encrypted': false,
+    'defaultValue': [
+        {
+            'name': 'Alex',
+            'age': 1
+        },
+        {
+            'name': 'Bob',
+            'age': 2
+        },
+        {
+            'name': 'Conny',
+            'age': 3
+        }
+    ],
+    'validate': {
+        'customMessage': '',
+        'json': ''
+    },
+    'conditional': {
+        'show': '',
+        'when': '',
+        'json': ''
+    }
+};