@formio/js 5.0.0-rc.5

package/lib/cjs/components/checkbox/editForm/Checkbox.edit.display.js

@@ -0,0 +1,79 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const builder_1 = __importDefault(require("../../../utils/builder"));
+const lodash_1 = __importDefault(require("lodash"));
+exports.default = [
+    {
+        key: 'labelPosition',
+        ignore: true,
+    },
+    {
+        key: 'labelWidth',
+        ignore: true,
+    },
+    {
+        key: 'labelMargin',
+        ignore: true
+    },
+    {
+        key: 'placeholder',
+        ignore: true,
+    },
+    {
+        type: 'select',
+        input: true,
+        weight: 350,
+        label: 'Shortcut',
+        key: 'shortcut',
+        tooltip: 'Shortcut for this component.',
+        dataSrc: 'custom',
+        valueProperty: 'value',
+        customDefaultValue: () => '',
+        template: '{{ item.label }}',
+        data: {
+            custom(context) {
+                return builder_1.default.getAvailableShortcuts(lodash_1.default.get(context, 'instance.options.editForm', {}), lodash_1.default.get(context, 'instance.options.editComponent', {}));
+            },
+        },
+    },
+    {
+        type: 'select',
+        input: true,
+        key: 'inputType',
+        label: 'Input Type',
+        tooltip: 'This is the input type used for this checkbox.',
+        dataSrc: 'values',
+        weight: 410,
+        data: {
+            values: [
+                { label: 'Checkbox', value: 'checkbox' },
+                { label: 'Radio', value: 'radio' },
+            ],
+        },
+    },
+    {
+        type: 'textfield',
+        input: true,
+        key: 'name',
+        label: 'Radio Key',
+        tooltip: 'The key used to trigger the radio button toggle.',
+        weight: 420,
+        conditional: {
+            json: { '===': [{ var: 'data.inputType' }, 'radio'] },
+        },
+    },
+    {
+        type: 'textfield',
+        input: true,
+        label: 'Radio Value',
+        key: 'value',
+        tooltip: 'The value used with this radio button.',
+        weight: 430,
+        conditional: {
+            json: { '===': [{ var: 'data.inputType' }, 'radio'] },
+        },
+    },
+];

package/lib/cjs/components/checkbox/editForm/Checkbox.edit.validation.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    key: string;
+    ignore: boolean;
+}[];
+export default _default;

package/lib/cjs/components/checkbox/editForm/Checkbox.edit.validation.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [
+    {
+        key: 'validateOn',
+        ignore: true
+    },
+    {
+        key: 'unique',
+        ignore: true
+    },
+];

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

@@ -0,0 +1,24 @@
+declare namespace _default {
+    export namespace conditional {
+        const eq: string;
+        const when: null;
+        const show: string;
+    }
+    export const tags: never[];
+    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/cjs/components/checkbox/fixtures/comp1.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    'conditional': {
+        'eq': '',
+        'when': null,
+        'show': ''
+    },
+    'tags': [],
+    '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/cjs/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/cjs/components/checkbox/fixtures/comp2.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    label: 'Checkbox - Radio',
+    inputType: 'radio',
+    tableView: false,
+    defaultValue: false,
+    key: 'checkboxRadio',
+    type: 'checkbox',
+    name: 'radio',
+    value: 'true',
+    input: true,
+};

package/lib/cjs/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/cjs/components/checkbox/fixtures/comp3.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    label: 'Checkbox',
+    fancyButton: false,
+    promptOnDeselect: false,
+    tableView: false,
+    modalEdit: true,
+    validate: {
+        required: true
+    },
+    key: 'checkbox',
+    type: 'checkbox',
+    input: true,
+    defaultValue: false
+};

package/lib/cjs/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/cjs/components/checkbox/fixtures/comp4.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.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/cjs/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/cjs/components/checkbox/fixtures/customDefaultComponent.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.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/cjs/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/cjs/components/checkbox/fixtures/index.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 });
+exports.customDefaultComponent = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+const comp1_1 = __importDefault(require("./comp1"));
+exports.comp1 = comp1_1.default;
+const customDefaultComponent_1 = __importDefault(require("./customDefaultComponent"));
+exports.customDefaultComponent = customDefaultComponent_1.default;
+const comp2_1 = __importDefault(require("./comp2"));
+exports.comp2 = comp2_1.default;
+const comp3_1 = __importDefault(require("./comp3"));
+exports.comp3 = comp3_1.default;
+const comp4_1 = __importDefault(require("./comp4"));
+exports.comp4 = comp4_1.default;

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

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

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [
+    true,
+    false,
+];

package/lib/cjs/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/cjs/components/columns/Columns.form.d.ts

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

package/lib/cjs/components/columns/Columns.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 Columns_edit_display_1 = __importDefault(require("./editForm/Columns.edit.display"));
+function default_1(...extend) {
+    return (0, NestedComponent_form_1.default)([
+        {
+            key: 'display',
+            components: Columns_edit_display_1.default
+        },
+    ], ...extend);
+}
+exports.default = default_1;

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

@@ -0,0 +1,156 @@
+"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 NestedComponent_1 = __importDefault(require("../_classes/nested/NestedComponent"));
+class ColumnsComponent extends NestedComponent_1.default {
+    static schema(...extend) {
+        return NestedComponent_1.default.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() {
+        var _a;
+        const schema = lodash_1.default.omit(super.schema, ['components']);
+        (_a = schema.columns) === null || _a === void 0 ? void 0 : _a.map((column, colIndex) => {
+            column.components.map((comp, compIndex) => {
+                const clonedComp = lodash_1.default.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 = [];
+        lodash_1.default.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 = [];
+            }
+            lodash_1.default.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 = lodash_1.default.every(items, item => !item.visible);
+        const column = this.component.columns[index];
+        const width = (toAdjust && items.length) ? 0 : column.width;
+        const shouldRedraw = !lodash_1.default.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 = lodash_1.default.reduce(this.components, (acc, next) => {
+            const stack = [...acc.stack, next];
+            if (lodash_1.default.sumBy(stack, width) <= this.gridSize) {
+                acc.stack = stack;
+                return acc;
+            }
+            else {
+                acc.rows = [...acc.rows, acc.stack];
+                acc.stack = [next];
+                return acc;
+            }
+        }, initVal);
+        return lodash_1.default.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 = [];
+    }
+}
+exports.default = ColumnsComponent;

package/lib/cjs/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;