@formio/js 5.0.0-rc.10

package/lib/mjs/components/editgrid/editForm/EditGrid.edit.data.d.ts

@@ -0,0 +1,18 @@
+declare const _default: ({
+    type: string;
+    input: boolean;
+    weight: number;
+    key: string;
+    label: string;
+    tooltip: string;
+    ignore?: undefined;
+} | {
+    key: string;
+    ignore: boolean;
+    type?: undefined;
+    input?: undefined;
+    weight?: undefined;
+    label?: undefined;
+    tooltip?: undefined;
+})[];
+export default _default;

package/lib/mjs/components/editgrid/editForm/EditGrid.edit.data.js

@@ -0,0 +1,18 @@
+export default [
+    {
+        type: 'checkbox',
+        input: true,
+        weight: 105,
+        key: 'inlineEdit',
+        label: 'Inline Editing',
+        tooltip: 'Check this if you would like your changes within \'edit\' mode to be committed directly to the submission object as that row is being changed',
+    },
+    {
+        key: 'defaultValue',
+        ignore: true,
+    },
+    {
+        key: 'multiple',
+        ignore: true
+    },
+];

package/lib/mjs/components/editgrid/editForm/EditGrid.edit.display.d.ts

@@ -0,0 +1,82 @@
+declare const _default: ({
+    key: string;
+    ignore: boolean;
+    type?: undefined;
+    label?: undefined;
+    tooltip?: undefined;
+    weight?: undefined;
+    input?: undefined;
+    conditional?: undefined;
+    clearOnHide?: undefined;
+    placeholder?: undefined;
+    editor?: undefined;
+    as?: undefined;
+    wysiwyg?: undefined;
+} | {
+    type: string;
+    label: string;
+    key: string;
+    tooltip: string;
+    weight: number;
+    input: boolean;
+    conditional: {
+        json: {
+            '!==': (boolean | {
+                var: string;
+            })[];
+        };
+    };
+    ignore?: undefined;
+    clearOnHide?: undefined;
+    placeholder?: undefined;
+    editor?: undefined;
+    as?: undefined;
+    wysiwyg?: undefined;
+} | {
+    type: string;
+    label: string;
+    key: string;
+    tooltip: string;
+    weight: number;
+    input: boolean;
+    clearOnHide: boolean;
+    calculateValue: string;
+    ignore?: undefined;
+    conditional?: undefined;
+    placeholder?: undefined;
+    editor?: undefined;
+    as?: undefined;
+    wysiwyg?: undefined;
+} | {
+    type: string;
+    label: string;
+    key: string;
+    tooltip: string;
+    weight: number;
+    input: boolean;
+    customConditional(): boolean;
+    ignore?: undefined;
+    conditional?: undefined;
+    clearOnHide?: undefined;
+    placeholder?: undefined;
+    editor?: undefined;
+    as?: undefined;
+    wysiwyg?: undefined;
+} | {
+    weight: number;
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    placeholder: string;
+    tooltip: string;
+    editor: string;
+    as: string;
+    wysiwyg: {
+        minLines: number;
+    };
+    ignore?: undefined;
+    conditional?: undefined;
+    clearOnHide?: undefined;
+})[];
+export default _default;

package/lib/mjs/components/editgrid/editForm/EditGrid.edit.display.js

@@ -0,0 +1,53 @@
+import Evaluator from '../../../utils/Evaluator';
+export default [
+    {
+        key: 'placeholder',
+        ignore: true,
+    },
+    {
+        type: 'checkbox',
+        label: 'Open First Row when Empty',
+        key: 'openWhenEmpty',
+        tooltip: 'Check this if you would like to open up the first row when the EditGrid is empty',
+        weight: 1000,
+        input: true,
+        conditional: {
+            json: { '!==': [{ var: 'data.modal' }, true] },
+        }
+    },
+    {
+        type: 'checkbox',
+        label: 'Disable Adding / Removing Rows',
+        key: 'disableAddingRemovingRows',
+        tooltip: 'Check if you want to hide Add Another button and Remove Row button',
+        weight: 1001,
+        input: true,
+        clearOnHide: false,
+        calculateValue: 'value = data.disableAddingRemovingRows;',
+    },
+    {
+        type: 'checkbox',
+        label: 'Display EditGrid as Table',
+        key: 'displayAsTable',
+        tooltip: 'use Table Template',
+        weight: 1002,
+        input: false,
+        customConditional() {
+            return !Evaluator.noeval;
+        },
+    },
+    {
+        weight: 1010,
+        type: 'textarea',
+        input: true,
+        key: 'conditionalAddButton',
+        label: 'Conditional Add Button',
+        placeholder: 'show = ...',
+        tooltip: 'Specify condition when Add Button should be displayed.',
+        editor: 'ace',
+        as: 'javascript',
+        wysiwyg: {
+            minLines: 3,
+        },
+    },
+];

package/lib/mjs/components/editgrid/editForm/EditGrid.edit.templates.d.ts

@@ -0,0 +1,58 @@
+declare const _default: ({
+    type: string;
+    label: string;
+    key: string;
+    rows: number;
+    editor: string;
+    as: string;
+    clearOnHide: boolean;
+    input: boolean;
+    placeholder: string;
+    description: string;
+    tooltip: string;
+    customConditional({ data }: {
+        data: any;
+    }): any;
+    weight?: undefined;
+} | {
+    type: string;
+    label: string;
+    key: string;
+    rows: number;
+    editor: string;
+    as: string;
+    input: boolean;
+    placeholder: string;
+    description: string;
+    tooltip: string;
+    customConditional(): boolean;
+    clearOnHide?: undefined;
+    weight?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    placeholder: string;
+    tooltip: string;
+    rows?: undefined;
+    editor?: undefined;
+    as?: undefined;
+    clearOnHide?: undefined;
+    description?: undefined;
+    weight?: undefined;
+} | {
+    weight: number;
+    type: string;
+    label: string;
+    tooltip: string;
+    key: string;
+    input: boolean;
+    rows?: undefined;
+    editor?: undefined;
+    as?: undefined;
+    clearOnHide?: undefined;
+    placeholder?: undefined;
+    description?: undefined;
+})[];
+export default _default;

package/lib/mjs/components/editgrid/editForm/EditGrid.edit.templates.js

@@ -0,0 +1,126 @@
+import Evaluator from '../../../utils/Evaluator';
+export default [
+    {
+        type: 'textarea',
+        label: 'Header Template',
+        key: 'templates.header',
+        rows: 5,
+        editor: 'ace',
+        as: 'handlebars',
+        clearOnHide: false,
+        input: true,
+        placeholder: '/*** Lodash Template Code ***/',
+        description: 'Two available variables. "value" is the array of row data and "components" is the array of components in the grid.',
+        tooltip: 'This is the <a href=\'https://lodash.com/docs/4.17.5#template\'>Lodash Template</a> used to render the header of the Edit grid.',
+        customConditional({ data }) {
+            return (!Evaluator.noeval || Evaluator.protectedEval) && !data.displayAsTable;
+        }
+    },
+    {
+        type: 'textarea',
+        label: 'Table Header Template',
+        key: 'templates.tableHeader',
+        rows: 6,
+        editor: 'ace',
+        as: 'handlebars',
+        clearOnHide: false,
+        input: true,
+        placeholder: '/*** Lodash Template Code ***/',
+        description: 'Two available variables. "value" is the array of row data and "components" is the array of components in the grid.',
+        tooltip: 'This is the <a href=\'https://lodash.com/docs/4.17.5#template\'>Lodash Template</a> used to render the header of the Edit grid.',
+        customConditional({ data }) {
+            return (!Evaluator.noeval || Evaluator.protectedEval) && data.displayAsTable;
+        }
+    },
+    {
+        type: 'textarea',
+        label: 'Row Template',
+        key: 'templates.row',
+        rows: 5,
+        editor: 'ace',
+        as: 'handlebars',
+        clearOnHide: false,
+        input: true,
+        placeholder: '/*** Lodash Template Code ***/',
+        description: 'Three available variables. "row" is an object of one row\'s data, "components"' +
+            ' is the array of components in the grid and "state" is current row\'s state (can be "draft" or "saved").' +
+            ' To add click events, add the classes "editRow" and "removeRow" to elements.',
+        tooltip: 'This is the <a href=\'https://lodash.com/docs/4.17.5#template\'>Lodash Template</a> used to render each row of the Edit grid.',
+        customConditional({ data }) {
+            return (!Evaluator.noeval || Evaluator.protectedEval) && !data.displayAsTable;
+        }
+    },
+    {
+        type: 'textarea',
+        label: 'Table Row Template',
+        key: 'templates.tableRow',
+        rows: 5,
+        editor: 'ace',
+        as: 'handlebars',
+        clearOnHide: false,
+        input: true,
+        placeholder: '/*** Lodash Template Code ***/',
+        description: 'Three available variables. "row" is an object of one row\'s data, "components"' +
+            ' is the array of components in the grid and "state" is current row\'s state (can be "draft" or "saved").' +
+            ' To add click events, add the classes "editRow" and "removeRow" to elements.',
+        tooltip: 'This is the <a href=\'https://lodash.com/docs/4.17.5#template\'>Lodash Template</a> used to render each row of the Edit grid.',
+        customConditional({ data }) {
+            return (!Evaluator.noeval || Evaluator.protectedEval) && data.displayAsTable;
+        }
+    },
+    {
+        type: 'textarea',
+        label: 'Footer Template',
+        key: 'templates.footer',
+        rows: 5,
+        editor: 'ace',
+        as: 'handlebars',
+        input: true,
+        placeholder: '/*** Lodash Template Code ***/',
+        description: 'Two available variables. "value" is the array of row data and "components" is the array of components in the grid.',
+        tooltip: 'This is the <a href=\'https://lodash.com/docs/4.17.5#template\'>Lodash Template</a> used to render the footer of the Edit grid.',
+        customConditional() {
+            return !Evaluator.noeval || Evaluator.protectedEval;
+        }
+    },
+    {
+        type: 'textfield',
+        input: true,
+        key: 'rowClass',
+        label: 'Row CSS Class',
+        placeholder: 'Row CSS Class',
+        tooltip: 'CSS class to add to the edit row wrapper.'
+    },
+    {
+        type: 'textfield',
+        input: true,
+        key: 'addAnother',
+        label: 'Add Another Text',
+        placeholder: 'Add Another',
+        tooltip: 'Set the text of the Add Another button.'
+    },
+    {
+        weight: 70,
+        type: 'checkbox',
+        label: 'Display as Modal',
+        tooltip: 'Display a modal to add or edit entries in the table',
+        key: 'modal',
+        input: true
+    },
+    {
+        type: 'textfield',
+        input: true,
+        key: 'saveRow',
+        label: 'Save Row Text',
+        placeholder: 'Save',
+        tooltip: 'Set the text of the Save Row button.'
+    },
+    {
+        type: 'textfield',
+        input: true,
+        key: 'removeRow',
+        label: 'Remove Row Text',
+        placeholder: 'Remove',
+        tooltip: 'Set the text of the remove Row button.'
+    }
+];

package/lib/mjs/components/editgrid/editForm/EditGrid.edit.validation.d.ts

@@ -0,0 +1,29 @@
+declare const _default: ({
+    ignore: boolean;
+    key: string;
+    weight?: undefined;
+    label?: undefined;
+    placeholder?: undefined;
+    type?: undefined;
+    tooltip?: undefined;
+    input?: undefined;
+} | {
+    weight: number;
+    key: string;
+    label: string;
+    placeholder: string;
+    type: string;
+    tooltip: string;
+    input: boolean;
+    ignore?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    weight: number;
+    key: string;
+    label: string;
+    tooltip: string;
+    ignore?: undefined;
+    placeholder?: undefined;
+})[];
+export default _default;

package/lib/mjs/components/editgrid/editForm/EditGrid.edit.validation.js

@@ -0,0 +1,32 @@
+export default [
+    {
+        ignore: true,
+        key: 'unique',
+    },
+    {
+        weight: 110,
+        key: 'validate.minLength',
+        label: 'Minimum Length',
+        placeholder: 'Minimum Length',
+        type: 'number',
+        tooltip: 'The minimum length requirement this field must meet.',
+        input: true
+    },
+    {
+        weight: 120,
+        key: 'validate.maxLength',
+        label: 'Maximum Length',
+        placeholder: 'Maximum Length',
+        type: 'number',
+        tooltip: 'The maximum length requirement this field must meet.',
+        input: true
+    },
+    {
+        type: 'checkbox',
+        input: true,
+        weight: 105,
+        key: 'rowDrafts',
+        label: 'Enable Row Drafts',
+        tooltip: 'Allow save rows even if their data is invalid. Errors will occur when try to submit with invalid rows.',
+    }
+];

package/lib/mjs/components/editgrid/fixtures/comp-openWhenEmpty.d.ts

@@ -0,0 +1,34 @@
+declare namespace _default {
+    const type: string;
+    const components: ({
+        label: string;
+        openWhenEmpty: boolean;
+        tableView: boolean;
+        rowDrafts: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        components: {
+            label: string;
+            tableView: boolean;
+            key: string;
+            type: string;
+            input: boolean;
+        }[];
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        openWhenEmpty?: undefined;
+        rowDrafts?: undefined;
+        components?: undefined;
+    })[];
+    const title: string;
+    const display: string;
+    const name: string;
+}
+export default _default;

package/lib/mjs/components/editgrid/fixtures/comp-openWhenEmpty.js

@@ -0,0 +1,34 @@
+export default {
+    type: 'form',
+    components: [
+        {
+            label: 'Edit Grid',
+            openWhenEmpty: true,
+            tableView: false,
+            rowDrafts: false,
+            key: 'editGrid',
+            type: 'editgrid',
+            input: true,
+            components: [
+                {
+                    label: 'Text Field',
+                    tableView: true,
+                    key: 'textField',
+                    type: 'textfield',
+                    input: true
+                }
+            ]
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false
+        }
+    ],
+    title: 'FIO-2819',
+    display: 'form',
+    name: 'fio2819',
+};