@formio/js 5.0.0-rc.5

package/lib/mjs/components/selectboxes/SelectBoxes.js

@@ -0,0 +1,208 @@
+import _ from 'lodash';
+import RadioComponent from '../radio/Radio';
+export default class SelectBoxesComponent extends RadioComponent {
+    static schema(...extend) {
+        return RadioComponent.schema({
+            type: 'selectboxes',
+            label: 'Select Boxes',
+            key: 'selectBoxes',
+            inline: false
+        }, ...extend);
+    }
+    static get builderInfo() {
+        return {
+            title: 'Select Boxes',
+            group: 'basic',
+            icon: 'plus-square',
+            weight: 60,
+            documentation: '/userguide/form-building/form-components#select-box',
+            schema: SelectBoxesComponent.schema()
+        };
+    }
+    constructor(...args) {
+        super(...args);
+        this.validators = this.validators.concat('minSelectedCount', 'maxSelectedCount', 'availableValueProperty');
+    }
+    init() {
+        super.init();
+        this.component.inputType = 'checkbox';
+    }
+    get defaultSchema() {
+        return SelectBoxesComponent.schema();
+    }
+    get inputInfo() {
+        const info = super.elementInfo();
+        info.attr.name += '[]';
+        info.attr.type = 'checkbox';
+        info.attr.class = 'form-check-input';
+        return info;
+    }
+    get emptyValue() {
+        return this.component.values.reduce((prev, value) => {
+            if (value.value) {
+                prev[value.value] = false;
+            }
+            return prev;
+        }, {});
+    }
+    get defaultValue() {
+        let defaultValue = this.emptyValue;
+        if (!_.isEmpty(this.component.defaultValue)) {
+            defaultValue = this.component.defaultValue;
+        }
+        if (this.component.customDefaultValue && !this.options.preview) {
+            defaultValue = this.evaluate(this.component.customDefaultValue, { value: '' }, 'value');
+        }
+        return defaultValue;
+    }
+    /**
+     * Only empty if the values are all false.
+     *
+     * @param value
+     * @return {boolean}
+     */
+    isEmpty(value = this.dataValue) {
+        let empty = true;
+        for (const key in value) {
+            if (value.hasOwnProperty(key) && value[key]) {
+                empty = false;
+                break;
+            }
+        }
+        return empty;
+    }
+    getValue() {
+        if (this.viewOnly || !this.refs.input || !this.refs.input.length) {
+            return this.dataValue;
+        }
+        const value = {};
+        _.each(this.refs.input, (input) => {
+            value[input.value] = !!input.checked;
+        });
+        return value;
+    }
+    /**
+     * Normalize values coming into updateValue.
+     *
+     * @param value
+     * @return {*}
+     */
+    normalizeValue(value) {
+        value = value || {};
+        if (typeof value !== 'object') {
+            if (typeof value === 'string') {
+                value = {
+                    [value]: true
+                };
+            }
+            else {
+                value = {};
+            }
+        }
+        if (Array.isArray(value)) {
+            _.each(value, (val) => {
+                value[val] = true;
+            });
+        }
+        return value;
+    }
+    /**
+     * Set the value of this component.
+     *
+     * @param value
+     * @param flags
+     */
+    setValue(value, flags = {}) {
+        const changed = this.updateValue(value, flags);
+        value = this.dataValue;
+        if (this.isHtmlRenderMode()) {
+            if (changed) {
+                this.redraw();
+            }
+        }
+        else {
+            _.each(this.refs.input, (input) => {
+                if (_.isUndefined(value[input.value])) {
+                    value[input.value] = false;
+                }
+                input.checked = !!value[input.value];
+            });
+        }
+        return changed;
+    }
+    getValueAsString(value) {
+        if (!value) {
+            return '';
+        }
+        return _(this.component.values || [])
+            .filter((v) => value[v.value])
+            .map('label')
+            .join(', ');
+    }
+    setSelectedClasses() {
+        if (this.refs.wrapper) {
+            //add/remove selected option class
+            const value = this.dataValue;
+            const valuesKeys = Object.keys(value);
+            this.refs.wrapper.forEach((wrapper, index) => {
+                let key = valuesKeys[index];
+                const input = this.refs.input[index];
+                if (input?.value.toString() !== key) {
+                    key = valuesKeys.find((k) => input?.value.toString() === k);
+                }
+                const isChecked = value[key];
+                if (isChecked && key) {
+                    //add class to container when selected
+                    this.addClass(wrapper, this.optionSelectedClass);
+                    //change "checked" attribute
+                    input.setAttribute('checked', 'true');
+                }
+                else if (!isChecked && key) {
+                    this.removeClass(wrapper, this.optionSelectedClass);
+                    input.removeAttribute('checked');
+                }
+            });
+        }
+    }
+    setInputsDisabled(value, onlyUnchecked) {
+        if (this.refs.input) {
+            this.refs.input.forEach(item => {
+                if (onlyUnchecked && !item.checked || !onlyUnchecked) {
+                    item.disabled = value;
+                }
+            });
+        }
+    }
+    checkComponentValidity(data, dirty, rowData, options) {
+        const minCount = this.component.validate.minSelectedCount;
+        const maxCount = this.component.validate.maxSelectedCount;
+        const isValid = this.isValid(data, dirty);
+        if ((maxCount || minCount) && !this.shouldSkipValidation(data, dirty, rowData)) {
+            const count = Object.keys(this.validationValue).reduce((total, key) => {
+                if (this.validationValue[key]) {
+                    total++;
+                }
+                return total;
+            }, 0);
+            // Disable the rest of inputs if the max amount is already checked
+            if (maxCount && count >= maxCount) {
+                this.setInputsDisabled(true, true);
+            }
+            else if (maxCount && !this.shouldDisabled) {
+                this.setInputsDisabled(false);
+            }
+            if (!isValid && maxCount && count > maxCount) {
+                const message = this.t(this.component.maxSelectedCountMessage || 'You can only select up to {{maxCount}} items.', { maxCount });
+                this.setCustomValidity(message, dirty);
+                return false;
+            }
+            else if (!isValid && minCount && count < minCount) {
+                this.setInputsDisabled(false);
+                const message = this.t(this.component.minSelectedCountMessage || 'You must select at least {{minCount}} items.', { minCount });
+                this.setCustomValidity(message, dirty);
+                return false;
+            }
+        }
+        return super.checkComponentValidity(data, dirty, rowData, options);
+    }
+}

package/lib/mjs/components/selectboxes/editForm/SelectBoxes.edit.validation.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    tooltip: string;
+    weight: number;
+}[];
+export default _default;

package/lib/mjs/components/selectboxes/editForm/SelectBoxes.edit.validation.js

@@ -0,0 +1,34 @@
+export default [
+    {
+        type: 'number',
+        input: true,
+        key: 'validate.minSelectedCount',
+        label: 'Minimum checked number',
+        tooltip: 'Minimum checkboxes required before form can be submitted.',
+        weight: 250
+    },
+    {
+        type: 'number',
+        input: true,
+        key: 'validate.maxSelectedCount',
+        label: 'Maximum checked number',
+        tooltip: 'Maximum checkboxes possible before form can be submitted.',
+        weight: 250
+    },
+    {
+        type: 'textfield',
+        input: true,
+        key: 'minSelectedCountMessage',
+        label: 'Minimum checked error message',
+        tooltip: 'Error message displayed if minimum number of items not checked.',
+        weight: 250
+    },
+    {
+        type: 'textfield',
+        input: true,
+        key: 'maxSelectedCountMessage',
+        label: 'Maximum checked error message',
+        tooltip: 'Error message displayed if maximum number of items checked.',
+        weight: 250
+    }
+];

package/lib/mjs/components/selectboxes/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 type: string;
+    export namespace validate {
+        const required: boolean;
+    }
+    export const persistent: boolean;
+    const _protected: boolean;
+    export { _protected as protected };
+    export const inline: boolean;
+    export const values: {
+        label: string;
+        value: string;
+    }[];
+    export const key: string;
+    export const label: string;
+    export const tableView: boolean;
+    export const input: boolean;
+}
+export default _default;

package/lib/mjs/components/selectboxes/fixtures/comp1.js

@@ -0,0 +1,52 @@
+export default {
+    'conditional': {
+        'eq': '',
+        'when': null,
+        'show': ''
+    },
+    'type': 'selectboxes',
+    'validate': {
+        'required': false
+    },
+    'persistent': true,
+    'protected': false,
+    'inline': false,
+    'values': [
+        {
+            'label': 'Red',
+            'value': 'red'
+        },
+        {
+            'label': 'Blue',
+            'value': 'blue'
+        },
+        {
+            'label': 'Green',
+            'value': 'green'
+        },
+        {
+            'label': 'Orange',
+            'value': 'orange'
+        },
+        {
+            'label': 'Yellow',
+            'value': 'yellow'
+        },
+        {
+            'label': 'Purple',
+            'value': 'purple'
+        },
+        {
+            'label': 'Black',
+            'value': 'black'
+        },
+        {
+            'label': 'White',
+            'value': 'white'
+        }
+    ],
+    'key': 'favoriteColors',
+    'label': 'Favorite Colors',
+    'tableView': true,
+    'input': true
+};

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

@@ -0,0 +1,24 @@
+declare namespace _default {
+    export namespace conditional {
+        const eq: string;
+        const when: null;
+        const show: string;
+    }
+    export const type: string;
+    export namespace validate {
+        const required: boolean;
+    }
+    export const persistent: boolean;
+    const _protected: boolean;
+    export { _protected as protected };
+    export const inline: boolean;
+    export const values: {
+        label: string;
+        value: string;
+    }[];
+    export const key: string;
+    export const label: string;
+    export const tableView: boolean;
+    export const input: boolean;
+}
+export default _default;

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

@@ -0,0 +1,52 @@
+export default {
+    'conditional': {
+        'eq': '',
+        'when': null,
+        'show': ''
+    },
+    'type': 'selectboxes',
+    'validate': {
+        'required': true
+    },
+    'persistent': true,
+    'protected': false,
+    'inline': false,
+    'values': [
+        {
+            'label': 'Red',
+            'value': 'red'
+        },
+        {
+            'label': 'Blue',
+            'value': 'blue'
+        },
+        {
+            'label': 'Green',
+            'value': 'green'
+        },
+        {
+            'label': 'Orange',
+            'value': 'orange'
+        },
+        {
+            'label': 'Yellow',
+            'value': 'yellow'
+        },
+        {
+            'label': 'Purple',
+            'value': 'purple'
+        },
+        {
+            'label': 'Black',
+            'value': 'black'
+        },
+        {
+            'label': 'White',
+            'value': 'white'
+        }
+    ],
+    'key': 'favoriteColors',
+    'label': 'Favorite Colors',
+    'tableView': true,
+    'input': true
+};

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

@@ -0,0 +1,23 @@
+declare namespace _default {
+    const _id: string;
+    const label: string;
+    const optionsLabelPosition: string;
+    const hideLabel: boolean;
+    const tableView: boolean;
+    const values: {
+        label: string;
+        value: string;
+        shortcut: string;
+    }[];
+    namespace validate {
+        const required: boolean;
+    }
+    const key: string;
+    const type: string;
+    const input: boolean;
+    const inputType: string;
+    const title: string;
+    const name: string;
+    const path: string;
+}
+export default _default;

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

@@ -0,0 +1,19 @@
+export default {
+    _id: '61135ec3e4188f021c7ad390',
+    label: 'Select Boxes',
+    optionsLabelPosition: 'right',
+    hideLabel: true,
+    tableView: false,
+    values: [
+        { label: '55', value: '55', shortcut: '' },
+        { label: '77', value: '77', shortcut: '' },
+    ],
+    validate: { required: true },
+    key: 'selectBoxes',
+    type: 'selectboxes',
+    input: true,
+    inputType: 'checkbox',
+    title: 'FIO-2959',
+    name: 'fio2959',
+    path: 'fio2959',
+};

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

@@ -0,0 +1,63 @@
+declare namespace _default {
+    const _id: string;
+    const title: string;
+    const name: string;
+    const path: string;
+    const type: string;
+    const display: string;
+    const components: ({
+        label: string;
+        tableView: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        optionsLabelPosition?: undefined;
+        defaultValue?: undefined;
+        values?: undefined;
+        validate?: undefined;
+        conditional?: undefined;
+        inputType?: undefined;
+        disableOnInvalid?: undefined;
+    } | {
+        label: string;
+        optionsLabelPosition: string;
+        tableView: boolean;
+        defaultValue: {
+            '1': boolean;
+            '2': boolean;
+            '3': boolean;
+        };
+        values: {
+            label: string;
+            value: string;
+            shortcut: string;
+        }[];
+        validate: {
+            minSelectedCount: number;
+        };
+        key: string;
+        conditional: {
+            show: boolean;
+            when: string;
+            eq: boolean;
+        };
+        type: string;
+        input: boolean;
+        inputType: string;
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        optionsLabelPosition?: undefined;
+        defaultValue?: undefined;
+        values?: undefined;
+        validate?: undefined;
+        conditional?: undefined;
+        inputType?: undefined;
+    })[];
+}
+export default _default;

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

@@ -0,0 +1,64 @@
+export default {
+    _id: '638743c823671dec2ace618b',
+    title: '5685',
+    name: '5685',
+    path: '5685',
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Checkbox',
+            tableView: false,
+            key: 'checkbox',
+            type: 'checkbox',
+            input: true
+        },
+        {
+            label: 'Select Boxes',
+            optionsLabelPosition: 'right',
+            tableView: false,
+            defaultValue: {
+                '1': false,
+                '2': false,
+                '3': false
+            },
+            values: [
+                {
+                    label: '1',
+                    value: '1',
+                    shortcut: ''
+                },
+                {
+                    label: '2',
+                    value: '2',
+                    shortcut: ''
+                },
+                {
+                    label: '3',
+                    value: '3',
+                    shortcut: ''
+                }
+            ],
+            validate: {
+                minSelectedCount: 1
+            },
+            key: 'selectBoxes1',
+            conditional: {
+                show: true,
+                when: 'checkbox',
+                eq: true
+            },
+            type: 'selectboxes',
+            input: true,
+            inputType: 'checkbox'
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false
+        }
+    ]
+};

package/lib/mjs/components/selectboxes/fixtures/comp5.d.ts

@@ -0,0 +1,37 @@
+declare namespace _default {
+    const type: string;
+    const components: ({
+        label: string;
+        dataSrc: string;
+        data: {
+            url: string;
+        };
+        valueProperty: string;
+        template: string;
+        key: string;
+        type: string;
+        input: boolean;
+        inputType: string;
+        showValidations?: undefined;
+        alwaysEnabled?: undefined;
+        tableView?: undefined;
+    } | {
+        label: string;
+        showValidations: boolean;
+        alwaysEnabled: boolean;
+        tableView: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        dataSrc?: undefined;
+        data?: undefined;
+        valueProperty?: undefined;
+        template?: undefined;
+        inputType?: undefined;
+    })[];
+    const title: string;
+    const display: string;
+    const name: string;
+    const path: string;
+}
+export default _default;

package/lib/mjs/components/selectboxes/fixtures/comp5.js

@@ -0,0 +1,31 @@
+export default {
+    type: 'form',
+    components: [
+        {
+            label: 'Select Boxes',
+            dataSrc: 'url',
+            data: {
+                url: 'https://cdn.rawgit.com/mshafrir/2646763/raw/states_titlecase.json'
+            },
+            valueProperty: 'abbreviation',
+            template: '<span>{{ item.name }}</span>',
+            key: 'selectBoxes',
+            type: 'selectboxes',
+            input: true,
+            inputType: 'checkbox',
+        },
+        {
+            label: 'Submit',
+            showValidations: false,
+            alwaysEnabled: false,
+            tableView: false,
+            key: 'submit',
+            type: 'button',
+            input: true
+        }
+    ],
+    title: 'test selectBoxes Url',
+    display: 'form',
+    name: 'testSelectBoxesUrl',
+    path: 'testSelectBoxesUrl',
+};

package/lib/mjs/components/selectboxes/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 comp5 from './comp5';
+export { comp1, comp2, comp3, comp4, comp5 };

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

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

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

@@ -0,0 +1,6 @@
+declare const _default: {
+    one: boolean;
+    two: boolean;
+    three: boolean;
+}[];
+export default _default;