@formio/js 5.0.0-rc.5

package/lib/mjs/components/tabs/Tabs.js

@@ -0,0 +1,197 @@
+import _ from 'lodash';
+import NestedComponent from '../_classes/nested/NestedComponent';
+export default class TabsComponent extends NestedComponent {
+    static schema(...extend) {
+        return NestedComponent.schema({
+            label: 'Tabs',
+            type: 'tabs',
+            input: false,
+            key: 'tabs',
+            persistent: false,
+            tableView: false,
+            components: [
+                {
+                    label: 'Tab 1',
+                    key: 'tab1',
+                    components: [],
+                },
+            ],
+            verticalLayout: false,
+        }, ...extend);
+    }
+    static get builderInfo() {
+        return {
+            title: 'Tabs',
+            group: 'layout',
+            icon: 'folder-o',
+            weight: 50,
+            documentation: '/userguide/form-building/layout-components#tabs',
+            schema: TabsComponent.schema(),
+        };
+    }
+    get defaultSchema() {
+        return TabsComponent.schema();
+    }
+    get schema() {
+        const schema = super.schema;
+        // We need to clone this because the builder uses the "components" reference and this would reset that reference.
+        const components = _.cloneDeep(this.component.components);
+        schema.components = components.map((tab, index) => {
+            tab.components = this.tabs[index].map((component) => component.schema);
+            return tab;
+        });
+        return schema;
+    }
+    get tabKey() {
+        return `tab-${this.key}`;
+    }
+    get tabLikey() {
+        return `tabLi-${this.key}`;
+    }
+    get tabLinkKey() {
+        return `tabLink-${this.key}`;
+    }
+    constructor(...args) {
+        super(...args);
+        this.currentTab = 0;
+        this.noField = true;
+    }
+    init() {
+        this.components = [];
+        this.tabs = [];
+        _.each(this.component.components, (tab, index) => {
+            this.tabs[index] = [];
+            // Initialize empty tabs.
+            tab.components = tab.components || [];
+            _.each(tab.components, (comp) => {
+                const component = this.createComponent(comp);
+                component.tab = index;
+                this.tabs[index].push(component);
+            });
+        });
+    }
+    render() {
+        return super.render(this.renderTemplate('tab', {
+            tabKey: this.tabKey,
+            tabLikey: this.tabLikey,
+            tabLinkKey: this.tabLinkKey,
+            currentTab: this.currentTab,
+            tabComponents: this.tabs.map(tab => this.renderComponents(tab)),
+        }, (this.options.flatten || this.options.pdf ? 'flat' : null)));
+    }
+    attach(element) {
+        this.loadRefs(element, {
+            [this.tabLinkKey]: 'multiple',
+            [this.tabKey]: 'multiple',
+            [this.tabLikey]: 'multiple',
+        });
+        ['change', 'error'].forEach(event => this.on(event, this.handleTabsValidation.bind(this)));
+        const superAttach = super.attach(element);
+        this.refs[this.tabLinkKey].forEach((tabLink, index) => {
+            this.addEventListener(tabLink, 'click', (event) => {
+                event.preventDefault();
+                this.setTab(index);
+            });
+        });
+        this.refs[this.tabKey].forEach((tab, index) => {
+            this.attachComponents(tab, this.tabs[index], this.component.components[index].components);
+        });
+        return superAttach;
+    }
+    detach(all) {
+        super.detach(all);
+    }
+    /**
+     * Set the current tab.
+     *
+     * @param index
+     */
+    setTab(index) {
+        if (!this.tabs || !this.tabs[index] || !this.refs[this.tabKey] || !this.refs[this.tabKey][index]) {
+            return;
+        }
+        this.currentTab = index;
+        _.each(this.refs[this.tabKey], (tab) => {
+            this.removeClass(tab, 'formio-tab-panel-active');
+            tab.style.display = 'none';
+        });
+        this.addClass(this.refs[this.tabKey][index], 'formio-tab-panel-active');
+        this.refs[this.tabKey][index].style.display = 'block';
+        _.each(this.refs[this.tabLinkKey], (tabLink, tabIndex) => {
+            if (this.refs[this.tabLinkKey][tabIndex]) {
+                this.removeClass(tabLink, 'active');
+                this.removeClass(tabLink, 'formio-tab-link-active');
+            }
+            if (this.refs[this.tabLikey][tabIndex]) {
+                this.removeClass(this.refs[this.tabLikey][tabIndex], 'active');
+                this.removeClass(this.refs[this.tabLikey][tabIndex], 'formio-tab-link-container-active');
+            }
+        });
+        if (this.refs[this.tabLikey][index]) {
+            this.addClass(this.refs[this.tabLikey][index], 'active');
+            this.addClass(this.refs[this.tabLikey][index], 'formio-tab-link-container-active');
+        }
+        if (this.refs[this.tabLinkKey][index]) {
+            this.addClass(this.refs[this.tabLinkKey][index], 'active');
+            this.addClass(this.refs[this.tabLinkKey][index], 'formio-tab-link-active');
+        }
+        this.triggerChange();
+    }
+    beforeFocus(component) {
+        if ('beforeFocus' in this.parent) {
+            this.parent.beforeFocus(this);
+        }
+        const tabIndex = this.tabs.findIndex((tab) => {
+            return tab.some((comp) => comp === component);
+        });
+        if (tabIndex !== -1 && this.currentTab !== tabIndex) {
+            this.setTab(tabIndex);
+        }
+    }
+    setErrorClasses(elements, dirty, hasErrors, hasMessages, element = this.element) {
+        if (this.component.modalEdit) {
+            super.setErrorClasses(elements, dirty, hasErrors, hasMessages, element);
+        }
+        elements.forEach((element) => {
+            this.addClass(element, 'is-invalid');
+            if (element.getAttribute('ref') !== 'openModal') {
+                if (this.options.highlightErrors) {
+                    this.addClass(element, 'tab-error');
+                }
+                else {
+                    this.addClass(element, 'has-error');
+                }
+            }
+        });
+    }
+    clearErrorClasses(elements) {
+        if (this.options.server || !this.rendered) {
+            return;
+        }
+        if (this.component.modalEdit) {
+            const element = Array.isArray(elements) || elements instanceof NodeList ? this.element : elements;
+            super.clearErrorClasses(element);
+        }
+        elements = Array.isArray(elements) || elements instanceof NodeList ? elements : [elements];
+        elements.forEach((element) => {
+            this.removeClass(element, 'is-invalid');
+            this.removeClass(element, 'tab-error');
+            this.removeClass(element, 'has-error');
+        });
+    }
+    handleTabsValidation() {
+        if (!this.refs[this.tabLinkKey] || !this.refs[this.tabLinkKey].length || !this.tabs.length) {
+            return;
+        }
+        this.clearErrorClasses(this.refs[this.tabLinkKey]);
+        const invalidTabsIndexes = this.tabs.reduce((invalidTabs, tab, tabIndex) => {
+            const hasComponentWithError = tab.some(comp => !!comp.error);
+            return hasComponentWithError ? [...invalidTabs, tabIndex] : invalidTabs;
+        }, []);
+        if (!invalidTabsIndexes.length) {
+            return;
+        }
+        const invalidTabs = [...this.refs[this.tabLinkKey]].filter((_, tabIndex) => invalidTabsIndexes.includes(tabIndex));
+        this.setErrorClasses(invalidTabs);
+    }
+}

package/lib/mjs/components/tabs/editForm/Tabs.edit.display.d.ts

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

package/lib/mjs/components/tabs/editForm/Tabs.edit.display.js

@@ -0,0 +1,66 @@
+export 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
+    },
+    {
+        key: 'components',
+        type: 'datagrid',
+        input: true,
+        label: 'Tabs',
+        weight: 50,
+        reorder: true,
+        components: [
+            {
+                type: 'textfield',
+                input: true,
+                key: 'label',
+                label: 'Label'
+            },
+            {
+                type: 'textfield',
+                input: true,
+                key: 'key',
+                label: 'Key',
+                allowCalculateOverride: true,
+                calculateValue: { _camelCase: [{ var: 'row.label' }] }
+            }
+        ]
+    },
+    {
+        weight: 1100,
+        type: 'checkbox',
+        label: 'Vertical Layout',
+        tooltip: 'Make this field display in vertical orientation.',
+        key: 'verticalLayout',
+        input: true
+    },
+];

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

@@ -0,0 +1,23 @@
+declare namespace _default {
+    const label: string;
+    const components: {
+        label: string;
+        key: string;
+        components: {
+            label: string;
+            tableView: boolean;
+            validate: {
+                required: boolean;
+            };
+            key: string;
+            type: string;
+            input: boolean;
+        }[];
+    }[];
+    const key: string;
+    const type: string;
+    const input: boolean;
+    const tableView: boolean;
+    const modalEdit: boolean;
+}
+export default _default;

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

@@ -0,0 +1,31 @@
+export default {
+    label: 'Tabs',
+    components: [
+        {
+            label: 'Tab 1',
+            key: 'tab1',
+            components: []
+        },
+        {
+            label: 'Tab 2',
+            key: 'tab2',
+            components: [
+                {
+                    label: 'Text Field',
+                    tableView: true,
+                    validate: {
+                        required: true
+                    },
+                    key: 'textField',
+                    type: 'textfield',
+                    input: true
+                }
+            ]
+        }
+    ],
+    key: 'tabs',
+    type: 'tabs',
+    input: false,
+    tableView: false,
+    modalEdit: true,
+};

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

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

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

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

package/lib/mjs/components/tags/Tags.d.ts

@@ -0,0 +1,19 @@
+export default class TagsComponent extends Input {
+    static get builderInfo(): {
+        title: string;
+        icon: string;
+        group: string;
+        documentation: string;
+        weight: number;
+        schema: any;
+    };
+    get emptyValue(): "" | never[];
+    get delimiter(): any;
+    attachElement(element: any, index: any): void;
+    choices: any;
+    normalizeValue(value: any): any;
+    setValue(value: any, flags?: {}): boolean;
+    focus(): void;
+    getValueAsString(value: any): any;
+}
+import Input from '../_classes/input/Input';

package/lib/mjs/components/tags/Tags.form.d.ts

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

package/lib/mjs/components/tags/Tags.form.js

@@ -0,0 +1,10 @@
+import Components from '../Components';
+import TagsEditData from './editForm/Tags.edit.data';
+export default function (...extend) {
+    return Components.baseEditForm([
+        {
+            key: 'data',
+            components: TagsEditData
+        },
+    ], ...extend);
+}

package/lib/mjs/components/tags/Tags.js

@@ -0,0 +1,158 @@
+import Input from '../_classes/input/Input';
+let Choices;
+if (typeof window !== 'undefined') {
+    Choices = require('@formio/choices.js');
+}
+export default class TagsComponent extends Input {
+    static schema(...extend) {
+        return Input.schema({
+            type: 'tags',
+            label: 'Tags',
+            key: 'tags',
+            delimeter: ',',
+            storeas: 'string',
+            maxTags: 0
+        }, ...extend);
+    }
+    static get builderInfo() {
+        return {
+            title: 'Tags',
+            icon: 'tags',
+            group: 'advanced',
+            documentation: '/userguide/form-building/advanced-components#tags',
+            weight: 30,
+            schema: TagsComponent.schema()
+        };
+    }
+    init() {
+        super.init();
+    }
+    get emptyValue() {
+        return (this.component.storeas === 'string') ? '' : [];
+    }
+    get defaultSchema() {
+        return TagsComponent.schema();
+    }
+    get inputInfo() {
+        const info = super.inputInfo;
+        info.type = 'input';
+        info.attr.type = 'text';
+        info.changeEvent = 'change';
+        return info;
+    }
+    get delimiter() {
+        return this.component.delimeter || ',';
+    }
+    attachElement(element, index) {
+        super.attachElement(element, index);
+        if (!element) {
+            return;
+        }
+        if (this.i18next) {
+            element.setAttribute('dir', this.i18next.dir());
+        }
+        if (this.choices) {
+            this.choices.destroy();
+        }
+        if (!Choices) {
+            return;
+        }
+        const hasPlaceholder = !!this.component.placeholder;
+        this.choices = new Choices(element, {
+            delimiter: this.delimiter,
+            editItems: true,
+            allowHTML: true,
+            maxItemCount: this.component.maxTags,
+            removeItemButton: true,
+            duplicateItemsAllowed: false,
+            shadowRoot: this.root ? this.root.shadowRoot : null,
+            placeholder: hasPlaceholder,
+            placeholderValue: hasPlaceholder ? this.t(this.component.placeholder, { _userInput: true }) : null,
+        });
+        this.choices.itemList.element.tabIndex = element.tabIndex;
+        this.addEventListener(this.choices.input.element, 'blur', () => {
+            const value = this.choices.input.value;
+            const maxTagsNumber = this.component.maxTags;
+            const valuesCount = this.choices.getValue(true).length;
+            const isRepeatedValue = this.choices.getValue(true).some(existingValue => existingValue.trim() === value.trim());
+            if (value) {
+                if (maxTagsNumber && valuesCount === maxTagsNumber) {
+                    this.choices.addItems = false;
+                    this.choices.clearInput();
+                }
+                else if (isRepeatedValue) {
+                    this.choices.clearInput();
+                }
+                else {
+                    this.choices.setValue([value]);
+                    this.choices.clearInput();
+                    this.choices.hideDropdown(true);
+                    this.updateValue(null, {
+                        modified: true
+                    });
+                }
+            }
+        });
+    }
+    detach() {
+        if (this.choices) {
+            this.choices.destroy();
+            this.choices = null;
+        }
+        super.detach();
+    }
+    normalizeValue(value) {
+        if (this.component.storeas === 'string' && Array.isArray(value)) {
+            return value.join(this.delimiter);
+        }
+        else if (this.component.storeas === 'array' && typeof value === 'string') {
+            return value.split(this.delimiter).filter(result => result);
+        }
+        return value;
+    }
+    setValue(value, flags = {}) {
+        const changed = super.setValue(value, flags);
+        if (this.choices) {
+            let dataValue = this.dataValue;
+            this.choices.removeActiveItems();
+            if (dataValue) {
+                if (typeof dataValue === 'string') {
+                    dataValue = dataValue.split(this.delimiter).filter(result => result);
+                }
+                const value = Array.isArray(dataValue) ? dataValue : [dataValue];
+                this.choices.setValue(value.map((val) => this.sanitize(val, this.shouldSanitizeValue)));
+            }
+        }
+        return changed;
+    }
+    set disabled(disabled) {
+        super.disabled = disabled;
+        if (!this.choices) {
+            return;
+        }
+        if (disabled) {
+            this.choices.disable();
+        }
+        else {
+            this.choices.enable();
+        }
+    }
+    get disabled() {
+        return super.disabled;
+    }
+    focus() {
+        if (this.refs.input && this.refs.input.length) {
+            this.refs.input[0].parentNode.lastChild.focus();
+        }
+    }
+    getValueAsString(value) {
+        if (!value) {
+            return '';
+        }
+        if (Array.isArray(value)) {
+            return value.join(`${this.delimiter || ','} `);
+        }
+        const stringValue = value.toString();
+        return this.sanitize(stringValue, this.shouldSanitizeValue);
+    }
+}

package/lib/mjs/components/tags/editForm/Tags.edit.data.d.ts

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

package/lib/mjs/components/tags/editForm/Tags.edit.data.js

@@ -0,0 +1,37 @@
+export default [
+    {
+        key: 'multiple',
+        ignore: true
+    },
+    {
+        weight: 20,
+        type: 'textfield',
+        input: true,
+        key: 'delimeter',
+        label: 'Delimiter',
+        tooltip: 'What is used to separate the tags.</a>'
+    },
+    {
+        weight: 22,
+        type: 'number',
+        input: true,
+        key: 'maxTags',
+        label: 'Max Tags',
+        defaultValue: 0,
+        tooltip: 'The maximum amount of tags that can be added. 0 for infinity.'
+    },
+    {
+        weight: 24,
+        type: 'select',
+        input: true,
+        key: 'storeas',
+        label: 'Store As',
+        dataSrc: 'values',
+        data: {
+            values: [
+                { label: 'String (CSV)', value: 'string' },
+                { label: 'Array of Tags', value: 'array' }
+            ]
+        }
+    }
+];

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

@@ -0,0 +1,20 @@
+declare namespace _default {
+    export const input: boolean;
+    export const tableView: boolean;
+    export const label: string;
+    export const key: string;
+    export const placeholder: string;
+    export const prefix: string;
+    export const suffix: string;
+    const _protected: boolean;
+    export { _protected as protected };
+    export const persistent: boolean;
+    export const type: string;
+    export const tags: never[];
+    export namespace conditional {
+        const show: string;
+        const when: null;
+        const eq: string;
+    }
+}
+export default _default;