@formio/js 5.0.0-rc.5

package/lib/mjs/components/checkbox/fixtures/comp2.d.ts

@@ -0,0 +1,12 @@
+declare namespace _default {
+    const label: string;
+    const inputType: string;
+    const tableView: boolean;
+    const defaultValue: boolean;
+    const key: string;
+    const type: string;
+    const name: string;
+    const value: string;
+    const input: boolean;
+}
+export default _default;

package/lib/mjs/components/checkbox/fixtures/comp2.js

@@ -0,0 +1,11 @@
+export default {
+    label: 'Checkbox - Radio',
+    inputType: 'radio',
+    tableView: false,
+    defaultValue: false,
+    key: 'checkboxRadio',
+    type: 'checkbox',
+    name: 'radio',
+    value: 'true',
+    input: true,
+};

package/lib/mjs/components/checkbox/fixtures/comp3.d.ts

@@ -0,0 +1,15 @@
+declare namespace _default {
+    const label: string;
+    const fancyButton: boolean;
+    const promptOnDeselect: boolean;
+    const tableView: boolean;
+    const modalEdit: boolean;
+    namespace validate {
+        const required: boolean;
+    }
+    const key: string;
+    const type: string;
+    const input: boolean;
+    const defaultValue: boolean;
+}
+export default _default;

package/lib/mjs/components/checkbox/fixtures/comp3.js

@@ -0,0 +1,14 @@
+export default {
+    label: 'Checkbox',
+    fancyButton: false,
+    promptOnDeselect: false,
+    tableView: false,
+    modalEdit: true,
+    validate: {
+        required: true
+    },
+    key: 'checkbox',
+    type: 'checkbox',
+    input: true,
+    defaultValue: false
+};

package/lib/mjs/components/checkbox/fixtures/comp4.d.ts

@@ -0,0 +1,46 @@
+declare namespace _default {
+    const title: string;
+    const name: string;
+    const path: string;
+    const type: string;
+    const display: string;
+    const components: ({
+        label: string;
+        inputType: string;
+        tableView: boolean;
+        key: string;
+        type: string;
+        name: string;
+        value: string;
+        input: boolean;
+        html?: undefined;
+        refreshOnChange?: undefined;
+        disableOnInvalid?: undefined;
+    } | {
+        html: string;
+        label: string;
+        refreshOnChange: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        tableView: boolean;
+        customConditional: string;
+        inputType?: undefined;
+        name?: undefined;
+        value?: undefined;
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        inputType?: undefined;
+        name?: undefined;
+        value?: undefined;
+        html?: undefined;
+        refreshOnChange?: undefined;
+    })[];
+}
+export default _default;

package/lib/mjs/components/checkbox/fixtures/comp4.js

@@ -0,0 +1,37 @@
+export default {
+    title: '6009test',
+    name: '6009Test',
+    path: '6009test',
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'P1',
+            inputType: 'radio',
+            tableView: false,
+            key: 'p1',
+            type: 'checkbox',
+            name: 'priorities',
+            value: 'p1',
+            input: true
+        },
+        {
+            html: '<p>Content 1</p>',
+            label: 'P1 Content',
+            refreshOnChange: false,
+            key: 'p1Content',
+            type: 'content',
+            input: false,
+            tableView: false,
+            customConditional: 'show = data.priorities == "p1"'
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false
+        }
+    ]
+};

package/lib/mjs/components/checkbox/fixtures/customDefaultComponent.d.ts

@@ -0,0 +1,25 @@
+declare namespace _default {
+    export namespace conditional {
+        const eq: string;
+        const when: null;
+        const show: string;
+    }
+    export const tags: never[];
+    export const customDefaultValue: string;
+    export const type: string;
+    export namespace validate {
+        const required: boolean;
+    }
+    export const persistent: boolean;
+    const _protected: boolean;
+    export { _protected as protected };
+    export const defaultValue: boolean;
+    export const key: string;
+    export const dataGridLabel: boolean;
+    export const label: string;
+    export const hideLabel: boolean;
+    export const tableView: boolean;
+    export const inputType: string;
+    export const input: boolean;
+}
+export default _default;

package/lib/mjs/components/checkbox/fixtures/customDefaultComponent.js

@@ -0,0 +1,23 @@
+export default {
+    'conditional': {
+        'eq': '',
+        'when': null,
+        'show': ''
+    },
+    'tags': [],
+    'customDefaultValue': 'value = true;',
+    'type': 'checkbox',
+    'validate': {
+        'required': false
+    },
+    'persistent': true,
+    'protected': false,
+    'defaultValue': false,
+    'key': 'checkme',
+    'dataGridLabel': true,
+    'label': 'Check me',
+    'hideLabel': false,
+    'tableView': true,
+    'inputType': 'checkbox',
+    'input': true
+};

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

@@ -0,0 +1,6 @@
+import comp1 from './comp1';
+import comp2 from './comp2';
+import comp3 from './comp3';
+import comp4 from './comp4';
+import customDefaultComponent from './customDefaultComponent';
+export { comp1, comp2, comp3, comp4, customDefaultComponent };

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

@@ -0,0 +1,6 @@
+import comp1 from './comp1';
+import customDefaultComponent from './customDefaultComponent';
+import comp2 from './comp2';
+import comp3 from './comp3';
+import comp4 from './comp4';
+export { comp1, comp2, comp3, comp4, customDefaultComponent };

package/lib/mjs/components/checkbox/fixtures/values.d.ts

@@ -0,0 +1,2 @@
+declare const _default: boolean[];
+export default _default;

package/lib/mjs/components/checkbox/fixtures/values.js

@@ -0,0 +1,4 @@
+export default [
+    true,
+    false,
+];

package/lib/mjs/components/columns/Columns.d.ts

@@ -0,0 +1,25 @@
+export default class ColumnsComponent extends NestedComponent {
+    static get builderInfo(): {
+        title: string;
+        icon: string;
+        group: string;
+        documentation: string;
+        weight: number;
+        schema: any;
+    };
+    rows: any[];
+    get columnKey(): string;
+    columns: any[] | undefined;
+    labelIsHidden(): boolean;
+    render(): any;
+    justifyColumn(items: any, index: any): boolean;
+    justify(): any;
+    get gridSize(): number;
+    /**
+     * Group columns in rows.
+     * @return {Array.<ColumnComponent[]>}
+     */
+    groupByRow(): Array<ColumnComponent[]>;
+    detach(all: any): void;
+}
+import NestedComponent from '../_classes/nested/NestedComponent';

package/lib/mjs/components/columns/Columns.form.d.ts

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

package/lib/mjs/components/columns/Columns.form.js

@@ -0,0 +1,10 @@
+import nestedComponentForm from '../_classes/nested/NestedComponent.form';
+import ColumnsEditDisplay from './editForm/Columns.edit.display';
+export default function (...extend) {
+    return nestedComponentForm([
+        {
+            key: 'display',
+            components: ColumnsEditDisplay
+        },
+    ], ...extend);
+}

package/lib/mjs/components/columns/Columns.js

@@ -0,0 +1,149 @@
+import _ from 'lodash';
+import NestedComponent from '../_classes/nested/NestedComponent';
+export default class ColumnsComponent extends NestedComponent {
+    static schema(...extend) {
+        return NestedComponent.schema({
+            label: 'Columns',
+            key: 'columns',
+            type: 'columns',
+            columns: [
+                { components: [], width: 6, offset: 0, push: 0, pull: 0, size: 'md' },
+                { components: [], width: 6, offset: 0, push: 0, pull: 0, size: 'md' }
+            ],
+            clearOnHide: false,
+            input: false,
+            tableView: false,
+            persistent: false,
+            autoAdjust: false
+        }, ...extend);
+    }
+    static get builderInfo() {
+        return {
+            title: 'Columns',
+            icon: 'columns',
+            group: 'layout',
+            documentation: '/userguide/form-building/layout-components#columns',
+            weight: 10,
+            schema: ColumnsComponent.schema()
+        };
+    }
+    constructor(component, options, data) {
+        super(component, options, data);
+        this.rows = [];
+    }
+    get schema() {
+        const schema = _.omit(super.schema, ['components']);
+        schema.columns?.map((column, colIndex) => {
+            column.components.map((comp, compIndex) => {
+                const clonedComp = _.clone(comp);
+                clonedComp.internal = true;
+                const component = this.createComponent(clonedComp);
+                delete component.component.internal;
+                schema.columns[colIndex].components[compIndex] = component.schema;
+            });
+        });
+        return schema;
+    }
+    get defaultSchema() {
+        return ColumnsComponent.schema();
+    }
+    get className() {
+        return `row ${super.className}`;
+    }
+    get columnKey() {
+        return `column-${this.id}`;
+    }
+    init() {
+        super.init();
+        this.columns = [];
+        _.each(this.component.columns, (column, index) => {
+            this.columns[index] = [];
+            if (!column.size) {
+                column.size = 'md';
+            }
+            column.currentWidth = column.width || 0;
+            // Ensure there is a components array.
+            if (!Array.isArray(column.components)) {
+                column.components = [];
+            }
+            _.each(column.components, (comp) => {
+                const component = this.createComponent(comp);
+                component.column = index;
+                this.columns[index].push(component);
+            });
+        });
+        if (this.component.autoAdjust && this.options.display !== 'pdf') {
+            this.justify();
+        }
+        this.rows = this.groupByRow();
+    }
+    labelIsHidden() {
+        return true;
+    }
+    render() {
+        return super.render(this.renderTemplate('columns', {
+            columnKey: this.columnKey,
+            columnComponents: this.columns.map(column => this.renderComponents(column))
+        }));
+    }
+    justifyColumn(items, index) {
+        const toAdjust = _.every(items, item => !item.visible);
+        const column = this.component.columns[index];
+        const width = (toAdjust && items.length) ? 0 : column.width;
+        const shouldRedraw = !_.isEqual(width, column.currentWidth);
+        column.currentWidth = width;
+        return shouldRedraw;
+    }
+    justify() {
+        return this.columns.reduce((redraw, items, index) => this.justifyColumn(items, index) || redraw, false);
+    }
+    attach(element) {
+        this.loadRefs(element, { [this.columnKey]: 'multiple' });
+        const superAttach = super.attach(element);
+        if (this.refs[this.columnKey]) {
+            this.refs[this.columnKey].forEach((column, index) => this.attachComponents(column, this.columns[index], this.component.columns[index].components));
+        }
+        return superAttach;
+    }
+    get gridSize() {
+        return 12;
+    }
+    /**
+     * Group columns in rows.
+     * @return {Array.<ColumnComponent[]>}
+     */
+    groupByRow() {
+        const initVal = { stack: [], rows: [] };
+        const width = x => x.component.width;
+        const result = _.reduce(this.components, (acc, next) => {
+            const stack = [...acc.stack, next];
+            if (_.sumBy(stack, width) <= this.gridSize) {
+                acc.stack = stack;
+                return acc;
+            }
+            else {
+                acc.rows = [...acc.rows, acc.stack];
+                acc.stack = [next];
+                return acc;
+            }
+        }, initVal);
+        return _.concat(result.rows, [result.stack]);
+    }
+    checkData(data, flags, row, components) {
+        const isValid = super.checkData(data, flags, row, components);
+        if (this.component.autoAdjust && this.options.display !== 'pdf') {
+            const redraw = this.justify();
+            if (redraw) {
+                this.redraw();
+            }
+        }
+        return isValid;
+    }
+    detach(all) {
+        super.detach(all);
+    }
+    destroy(all = false) {
+        super.destroy(all);
+        this.columns = [];
+    }
+}

package/lib/mjs/components/columns/editForm/Columns.edit.display.d.ts

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

package/lib/mjs/components/columns/editForm/Columns.edit.display.js

@@ -0,0 +1,98 @@
+export default [
+    {
+        key: 'labelPosition',
+        ignore: true
+    },
+    {
+        key: 'placeholder',
+        ignore: true
+    },
+    {
+        key: 'description',
+        ignore: true
+    },
+    {
+        key: 'tooltip',
+        ignore: true
+    },
+    {
+        key: 'autofocus',
+        ignore: true
+    },
+    {
+        key: 'tabindex',
+        ignore: true
+    },
+    {
+        key: 'disabled',
+        ignore: true
+    },
+    {
+        key: 'tableView',
+        ignore: true
+    },
+    {
+        weight: 150,
+        type: 'datagrid',
+        input: true,
+        key: 'columns',
+        label: 'Column Properties',
+        addAnother: 'Add Column',
+        tooltip: 'The width, offset, push, and pull settings for each column.',
+        reorder: true,
+        components: [
+            {
+                type: 'hidden',
+                key: 'components',
+                defaultValue: []
+            },
+            {
+                type: 'select',
+                key: 'size',
+                defaultValue: 'md',
+                label: 'Size',
+                data: {
+                    values: [
+                        { label: 'xs', value: 'xs' },
+                        { label: 'sm', value: 'sm' },
+                        { label: 'md', value: 'md' },
+                        { label: 'lg', value: 'lg' },
+                        { label: 'xl', value: 'xl' },
+                    ],
+                },
+            },
+            {
+                type: 'number',
+                key: 'width',
+                defaultValue: 6,
+                label: 'Width'
+            },
+            {
+                type: 'number',
+                key: 'offset',
+                defaultValue: 0,
+                label: 'Offset'
+            },
+            {
+                type: 'number',
+                key: 'push',
+                defaultValue: 0,
+                label: 'Push'
+            },
+            {
+                type: 'number',
+                key: 'pull',
+                defaultValue: 0,
+                label: 'Pull'
+            }
+        ]
+    },
+    {
+        weight: 160,
+        type: 'checkbox',
+        label: 'Auto adjust columns',
+        tooltip: 'Will automatically adjust columns based on if nested components are hidden.',
+        key: 'autoAdjust',
+        input: true
+    }
+];

package/lib/mjs/components/columns/fixtures/comp1.d.ts

@@ -0,0 +1,45 @@
+declare namespace _default {
+    namespace conditional {
+        const eq: string;
+        const when: null;
+        const show: string;
+    }
+    const tags: never[];
+    const type: string;
+    const columns: {
+        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 key: string;
+    const input: boolean;
+}
+export default _default;