@formio/js 5.0.0-rc.5

package/lib/cjs/components/table/Table.js

@@ -0,0 +1,171 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = __importDefault(require("lodash"));
+const builder_1 = __importDefault(require("../../utils/builder"));
+const NestedComponent_1 = __importDefault(require("../_classes/nested/NestedComponent"));
+class TableComponent extends NestedComponent_1.default {
+    static emptyTable(numRows, numCols) {
+        const rows = [];
+        for (let i = 0; i < numRows; i++) {
+            const cols = [];
+            for (let j = 0; j < numCols; j++) {
+                cols.push({ components: [] });
+            }
+            rows.push(cols);
+        }
+        return rows;
+    }
+    static schema(...extend) {
+        return NestedComponent_1.default.schema({
+            label: 'Table',
+            type: 'table',
+            input: false,
+            key: 'table',
+            numRows: 3,
+            numCols: 3,
+            rows: TableComponent.emptyTable(3, 3),
+            header: [],
+            caption: '',
+            cloneRows: false,
+            striped: false,
+            bordered: false,
+            hover: false,
+            condensed: false,
+            persistent: false
+        }, ...extend);
+    }
+    static get builderInfo() {
+        return {
+            title: 'Table',
+            group: 'layout',
+            icon: 'table',
+            weight: 40,
+            documentation: '/userguide/form-building/layout-components#table',
+            schema: TableComponent.schema()
+        };
+    }
+    get defaultSchema() {
+        return TableComponent.schema();
+    }
+    get schema() {
+        const schema = lodash_1.default.omit(super.schema, 'components');
+        schema.rows = [];
+        this.eachComponent((component) => {
+            if (!schema.rows || !schema.rows.length) {
+                schema.rows = TableComponent.emptyTable(this.component.numRows, this.component.numCols);
+            }
+            if (!schema.rows[component.tableRow]) {
+                schema.rows[component.tableRow] = [];
+            }
+            if (!schema.rows[component.tableRow][component.tableColumn]) {
+                schema.rows[component.tableRow][component.column] = { components: [] };
+            }
+            schema.rows[component.tableRow][component.tableColumn].components.push(component.schema);
+        });
+        if (!schema.rows.length) {
+            schema.rows = TableComponent.emptyTable(this.component.numRows, this.component.numCols);
+        }
+        return schema;
+    }
+    get className() {
+        let name = `table-responsive ${super.className}`;
+        if (!this.component.bordered) {
+            name += ' no-top-border-table';
+        }
+        return name;
+    }
+    get cellClassName() {
+        let name = '';
+        if (this.component.cellAlignment) {
+            name = `cell-align-${this.component.cellAlignment}`;
+        }
+        return name;
+    }
+    get tableKey() {
+        return `table-${this.key}`;
+    }
+    get colWidth() {
+        const { numCols } = this.component;
+        if (!numCols || typeof numCols !== 'number') {
+            return '';
+        }
+        return Math.floor(12 / numCols).toString();
+    }
+    constructor(...args) {
+        super(...args);
+        this.noField = true;
+    }
+    init() {
+        super.init();
+        // Ensure component.rows has the correct number of rows and columns.
+        for (let rowIndex = 0; rowIndex < this.component.numRows; rowIndex++) {
+            this.component.rows[rowIndex] = this.component.rows[rowIndex] || [];
+            for (let colIndex = 0; colIndex < this.component.numCols; colIndex++) {
+                this.component.rows[rowIndex][colIndex] = this.component.rows[rowIndex][colIndex] || { components: [] };
+            }
+            this.component.rows[rowIndex] = this.component.rows[rowIndex].slice(0, this.component.numCols);
+        }
+        this.component.rows = this.component.rows.slice(0, this.component.numRows);
+        const lastNonEmptyRow = [];
+        this.table = [];
+        lodash_1.default.each(this.component.rows, (row, rowIndex) => {
+            this.table[rowIndex] = [];
+            lodash_1.default.each(row, (column, colIndex) => {
+                this.table[rowIndex][colIndex] = [];
+                if (this.component.cloneRows) {
+                    if (column.components.length) {
+                        lastNonEmptyRow[colIndex] = column;
+                    }
+                    else if (lastNonEmptyRow[colIndex]) {
+                        column.components = lodash_1.default.cloneDeep(lastNonEmptyRow[colIndex].components);
+                        builder_1.default.uniquify(this.root._form.components, column);
+                    }
+                }
+                lodash_1.default.each(column.components, (comp) => {
+                    let columnComponent;
+                    if (this.builderMode) {
+                        comp.id = comp.id + rowIndex;
+                        columnComponent = comp;
+                    }
+                    else {
+                        columnComponent = Object.assign(Object.assign({}, comp), { id: (comp.id + rowIndex) });
+                    }
+                    const component = this.createComponent(columnComponent);
+                    component.tableRow = rowIndex;
+                    component.tableColumn = colIndex;
+                    this.table[rowIndex][colIndex].push(component);
+                });
+            });
+        });
+    }
+    render() {
+        return super.render(this.renderTemplate('table', {
+            cellClassName: this.cellClassName,
+            tableKey: this.tableKey,
+            colWidth: this.colWidth,
+            tableComponents: this.table.map(row => row.map(column => this.renderComponents(column)))
+        }));
+    }
+    attach(element) {
+        const keys = this.table.reduce((prev, row, rowIndex) => {
+            prev[`${this.tableKey}-${rowIndex}`] = 'multiple';
+            return prev;
+        }, {});
+        this.loadRefs(element, keys);
+        const superAttach = super.attach(element);
+        this.table.forEach((row, rowIndex) => {
+            row.forEach((column, columnIndex) => {
+                this.attachComponents(this.refs[`${this.tableKey}-${rowIndex}`][columnIndex], this.table[rowIndex][columnIndex], this.component.rows[rowIndex][columnIndex].components);
+            });
+        });
+        return superAttach;
+    }
+    destroy(all = false) {
+        super.destroy(all);
+        delete this.table;
+    }
+}
+exports.default = TableComponent;

package/lib/cjs/components/table/editForm/Table.edit.display.d.ts

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

package/lib/cjs/components/table/editForm/Table.edit.display.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [
+    {
+        key: 'labelPosition',
+        ignore: true
+    },
+    {
+        key: 'placeholder',
+        ignore: true
+    },
+    {
+        key: 'description',
+        ignore: true
+    },
+    {
+        key: 'autofocus',
+        ignore: true
+    },
+    {
+        key: 'tooltip',
+        ignore: true
+    },
+    {
+        key: 'tabindex',
+        ignore: true
+    },
+    {
+        key: 'disabled',
+        ignore: true
+    },
+    {
+        key: 'tableView',
+        ignore: true
+    },
+    {
+        type: 'number',
+        label: 'Number of Rows',
+        key: 'numRows',
+        input: true,
+        weight: 1,
+        placeholder: 'Number of Rows',
+        tooltip: 'Enter the number or rows that should be displayed by this table.'
+    },
+    {
+        type: 'number',
+        label: 'Number of Columns',
+        key: 'numCols',
+        input: true,
+        weight: 2,
+        placeholder: 'Number of Columns',
+        tooltip: 'Enter the number or columns that should be displayed by this table.'
+    },
+    {
+        type: 'checkbox',
+        label: 'Clone Row Components',
+        key: 'cloneRows',
+        input: true,
+        weight: 3,
+        tooltip: 'Check this if you would like to \'clone\' the first row of components to all additional empty rows of the table.'
+    },
+    {
+        type: 'select',
+        label: 'Cell Alignment',
+        key: 'cellAlignment',
+        input: true,
+        tooltip: 'Horizontal alignment for cells of the table.',
+        dataSrc: 'values',
+        data: {
+            values: [
+                { label: 'Left', value: 'left' },
+                { label: 'Center', value: 'center' },
+                { label: 'Right', value: 'right' }
+            ]
+        },
+        defaultValue: 'left',
+        weight: 3
+    },
+    {
+        type: 'checkbox',
+        label: 'Striped',
+        key: 'striped',
+        tooltip: 'This will stripe the table if checked.',
+        input: true,
+        weight: 701
+    },
+    {
+        type: 'checkbox',
+        label: 'Bordered',
+        key: 'bordered',
+        input: true,
+        tooltip: 'This will border the table if checked.',
+        weight: 702
+    },
+    {
+        type: 'checkbox',
+        label: 'Hover',
+        key: 'hover',
+        input: true,
+        tooltip: 'Highlight a row on hover.',
+        weight: 703
+    },
+    {
+        type: 'checkbox',
+        label: 'Condensed',
+        key: 'condensed',
+        input: true,
+        tooltip: 'Condense the size of the table.',
+        weight: 704
+    },
+];

package/lib/cjs/components/table/fixtures/comp1.d.ts

@@ -0,0 +1,53 @@
+declare namespace _default {
+    namespace conditional {
+        const eq: string;
+        const when: null;
+        const show: string;
+    }
+    const tags: never[];
+    const type: string;
+    const condensed: boolean;
+    const hover: boolean;
+    const bordered: boolean;
+    const striped: boolean;
+    const caption: string;
+    const header: never[];
+    const rows: {
+        components: {
+            tags: never[];
+            type: string;
+            conditional: {
+                eq: string;
+                when: null;
+                show: string;
+            };
+            validate: {
+                customPrivate: boolean;
+                custom: string;
+                pattern: string;
+                maxLength: string;
+                minLength: string;
+                required: boolean;
+            };
+            persistent: boolean;
+            unique: boolean;
+            protected: boolean;
+            defaultValue: string;
+            multiple: boolean;
+            suffix: string;
+            prefix: string;
+            placeholder: string;
+            key: string;
+            label: string;
+            inputMask: string;
+            inputType: string;
+            tableView: boolean;
+            input: boolean;
+        }[];
+    }[][];
+    const numCols: number;
+    const numRows: number;
+    const key: string;
+    const input: boolean;
+}
+export default _default;

package/lib/cjs/components/table/fixtures/comp1.js

@@ -0,0 +1,237 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    'conditional': {
+        'eq': '',
+        'when': null,
+        'show': ''
+    },
+    'tags': [],
+    'type': 'table',
+    'condensed': false,
+    'hover': false,
+    'bordered': false,
+    'striped': false,
+    'caption': '',
+    'header': [],
+    'rows': [
+        [
+            {
+                'components': [
+                    {
+                        'tags': [],
+                        'type': 'textfield',
+                        'conditional': {
+                            'eq': '',
+                            'when': null,
+                            'show': ''
+                        },
+                        'validate': {
+                            'customPrivate': false,
+                            'custom': '',
+                            'pattern': '',
+                            'maxLength': '',
+                            'minLength': '',
+                            'required': false
+                        },
+                        'persistent': true,
+                        'unique': false,
+                        'protected': false,
+                        'defaultValue': '',
+                        'multiple': false,
+                        'suffix': '',
+                        'prefix': '',
+                        'placeholder': '',
+                        'key': 'a',
+                        'label': 'a',
+                        'inputMask': '',
+                        'inputType': 'text',
+                        'tableView': true,
+                        'input': true
+                    }
+                ]
+            },
+            {
+                'components': [
+                    {
+                        'tags': [],
+                        'type': 'textfield',
+                        'conditional': {
+                            'eq': '',
+                            'when': null,
+                            'show': ''
+                        },
+                        'validate': {
+                            'customPrivate': false,
+                            'custom': '',
+                            'pattern': '',
+                            'maxLength': '',
+                            'minLength': '',
+                            'required': false
+                        },
+                        'persistent': true,
+                        'unique': false,
+                        'protected': false,
+                        'defaultValue': '',
+                        'multiple': false,
+                        'suffix': '',
+                        'prefix': '',
+                        'placeholder': '',
+                        'key': 'b',
+                        'label': 'b',
+                        'inputMask': '',
+                        'inputType': 'text',
+                        'tableView': true,
+                        'input': true
+                    }
+                ]
+            },
+            {
+                'components': [
+                    {
+                        'tags': [],
+                        'type': 'textfield',
+                        'conditional': {
+                            'eq': '',
+                            'when': null,
+                            'show': ''
+                        },
+                        'validate': {
+                            'customPrivate': false,
+                            'custom': '',
+                            'pattern': '',
+                            'maxLength': '',
+                            'minLength': '',
+                            'required': false
+                        },
+                        'persistent': true,
+                        'unique': false,
+                        'protected': false,
+                        'defaultValue': '',
+                        'multiple': false,
+                        'suffix': '',
+                        'prefix': '',
+                        'placeholder': '',
+                        'key': 'c',
+                        'label': 'c',
+                        'inputMask': '',
+                        'inputType': 'text',
+                        'tableView': true,
+                        'input': true
+                    }
+                ]
+            }
+        ],
+        [
+            {
+                'components': [
+                    {
+                        'tags': [],
+                        'type': 'textfield',
+                        'conditional': {
+                            'eq': '',
+                            'when': null,
+                            'show': ''
+                        },
+                        'validate': {
+                            'customPrivate': false,
+                            'custom': '',
+                            'pattern': '',
+                            'maxLength': '',
+                            'minLength': '',
+                            'required': false
+                        },
+                        'persistent': true,
+                        'unique': false,
+                        'protected': false,
+                        'defaultValue': '',
+                        'multiple': false,
+                        'suffix': '',
+                        'prefix': '',
+                        'placeholder': '',
+                        'key': 'd',
+                        'label': 'd',
+                        'inputMask': '',
+                        'inputType': 'text',
+                        'tableView': true,
+                        'input': true
+                    }
+                ]
+            },
+            {
+                'components': [
+                    {
+                        'tags': [],
+                        'type': 'textfield',
+                        'conditional': {
+                            'eq': '',
+                            'when': null,
+                            'show': ''
+                        },
+                        'validate': {
+                            'customPrivate': false,
+                            'custom': '',
+                            'pattern': '',
+                            'maxLength': '',
+                            'minLength': '',
+                            'required': false
+                        },
+                        'persistent': true,
+                        'unique': false,
+                        'protected': false,
+                        'defaultValue': '',
+                        'multiple': false,
+                        'suffix': '',
+                        'prefix': '',
+                        'placeholder': '',
+                        'key': 'e',
+                        'label': 'e',
+                        'inputMask': '',
+                        'inputType': 'text',
+                        'tableView': true,
+                        'input': true
+                    }
+                ]
+            },
+            {
+                'components': [
+                    {
+                        'tags': [],
+                        'type': 'textfield',
+                        'conditional': {
+                            'eq': '',
+                            'when': null,
+                            'show': ''
+                        },
+                        'validate': {
+                            'customPrivate': false,
+                            'custom': '',
+                            'pattern': '',
+                            'maxLength': '',
+                            'minLength': '',
+                            'required': false
+                        },
+                        'persistent': true,
+                        'unique': false,
+                        'protected': false,
+                        'defaultValue': '',
+                        'multiple': false,
+                        'suffix': '',
+                        'prefix': '',
+                        'placeholder': '',
+                        'key': 'f',
+                        'label': 'f',
+                        'inputMask': '',
+                        'inputType': 'text',
+                        'tableView': true,
+                        'input': true
+                    }
+                ]
+            }
+        ]
+    ],
+    'numCols': 3,
+    'numRows': 2,
+    'key': 'table1',
+    'input': false
+};

package/lib/cjs/components/table/fixtures/index.d.ts

@@ -0,0 +1,2 @@
+export { comp1 };
+import comp1 from './comp1';

package/lib/cjs/components/table/fixtures/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.comp1 = void 0;
+const comp1_1 = __importDefault(require("./comp1"));
+exports.comp1 = comp1_1.default;

package/lib/cjs/components/tabs/Tabs.d.ts

@@ -0,0 +1,28 @@
+export default class TabsComponent extends NestedComponent {
+    static get builderInfo(): {
+        title: string;
+        group: string;
+        icon: string;
+        weight: number;
+        documentation: string;
+        schema: any;
+    };
+    constructor(...args: any[]);
+    get tabKey(): string;
+    get tabLikey(): string;
+    get tabLinkKey(): string;
+    currentTab: number;
+    noField: boolean;
+    tabs: any[] | undefined;
+    render(): any;
+    detach(all: any): void;
+    /**
+     * Set the current tab.
+     *
+     * @param index
+     */
+    setTab(index: any): void;
+    beforeFocus(component: any): void;
+    handleTabsValidation(): void;
+}
+import NestedComponent from '../_classes/nested/NestedComponent';

package/lib/cjs/components/tabs/Tabs.form.d.ts

@@ -0,0 +1,3 @@
+export default function _default(...extend: any[]): {
+    components: any;
+};

package/lib/cjs/components/tabs/Tabs.form.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const NestedComponent_form_1 = __importDefault(require("../_classes/nested/NestedComponent.form"));
+const Tabs_edit_display_1 = __importDefault(require("./editForm/Tabs.edit.display"));
+function default_1(...extend) {
+    return (0, NestedComponent_form_1.default)([
+        {
+            key: 'display',
+            components: Tabs_edit_display_1.default
+        },
+    ], ...extend);
+}
+exports.default = default_1;