@formio/js 5.0.0-rc.10

package/lib/mjs/components/_classes/list/ListComponent.js

@@ -0,0 +1,208 @@
+import Field from '../field/Field';
+import { Formio } from '../../../Formio';
+import _ from 'lodash';
+import NativePromise from 'native-promise-only';
+export default class ListComponent extends Field {
+    static schema(...extend) {
+        return Field.schema({
+            dataSrc: 'values',
+            authenticate: false,
+            ignoreCache: false,
+            template: '<span>{{ item.label }}</span>',
+            validate: {
+                onlyAvailableItems: false
+            },
+        }, ...extend);
+    }
+    get isSelectURL() {
+        return this.component.dataSrc === 'url';
+    }
+    get requestHeaders() {
+        // Create the headers object.
+        const headers = new Formio.Headers();
+        // Add custom headers to the url.
+        if (this.component.data && this.component.data.headers) {
+            try {
+                _.each(this.component.data.headers, (header) => {
+                    if (header.key) {
+                        headers.set(header.key, this.interpolate(header.value));
+                    }
+                });
+            }
+            catch (err) {
+                console.warn(err.message);
+            }
+        }
+        return headers;
+    }
+    // Must be implemented in child classes.
+    setItems() { }
+    updateCustomItems() { }
+    loadItems() { }
+    getOptionTemplate(data, value) {
+        if (!this.component.template) {
+            return data.label;
+        }
+        const options = {
+            noeval: true,
+            data: {}
+        };
+        const template = this.sanitize(this.component.template
+            ? this.interpolate(this.component.template, { item: data }, options)
+            : data.label, this.shouldSanitizeValue);
+        const templateValue = this.component.reference && value?._id ? value._id.toString() : value;
+        if (templateValue && !_.isObject(templateValue) && options.data.item) {
+            // If the value is not an object, then we need to save the template data off for when it is selected.
+            this.templateData[templateValue] = options.data.item;
+        }
+        return template;
+    }
+    itemTemplate(data, value) {
+        if (_.isEmpty(data)) {
+            return '';
+        }
+        const template = this.sanitize(this.getOptionTemplate(data, value), this.shouldSanitizeValue);
+        if (template) {
+            const label = template.replace(/<\/?[^>]+(>|$)/g, '');
+            const hasTranslator = this.i18next?.translator;
+            if (!label || (hasTranslator && !this.t(label, { _userInput: true })))
+                return;
+            return hasTranslator ? template.replace(label, this.t(label, { _userInput: true })) : label;
+        }
+        else {
+            return this.sanitize(JSON.stringify(data), this.shouldSanitizeValue);
+        }
+    }
+    handleLoadingError(err) {
+        this.loading = false;
+        if (err.networkError) {
+            this.networkError = true;
+        }
+        this.itemsLoadedResolve();
+        this.emit('componentError', {
+            component: this.component,
+            message: err.toString(),
+        });
+        console.warn(`Unable to load resources for ${this.key}`);
+    }
+    /* eslint-disable max-statements */
+    updateItems(searchInput, forceUpdate) {
+        if (!this.component.data) {
+            console.warn(`Select component ${this.key} does not have data configuration.`);
+            this.itemsLoadedResolve();
+            return;
+        }
+        // Only load the data if it is visible.
+        if (!this.visible) {
+            this.itemsLoadedResolve();
+            return;
+        }
+        switch (this.component.dataSrc) {
+            case 'values':
+                this.setItems(this.component.data.values);
+                break;
+            case 'json':
+                this.setItems(this.component.data.json);
+                break;
+            case 'custom':
+                this.updateCustomItems(forceUpdate);
+                break;
+            case 'resource': {
+                // If there is no resource, or we are lazyLoading, wait until active.
+                if (!this.component.data.resource || (!forceUpdate && !this.active)) {
+                    this.itemsLoadedResolve();
+                    return;
+                }
+                let resourceUrl = this.options.formio ? this.options.formio.formsUrl : `${Formio.getProjectUrl()}/form`;
+                resourceUrl += (`/${this.component.data.resource}/submission`);
+                if (forceUpdate || this.additionalResourcesAvailable || !this.serverCount) {
+                    try {
+                        this.loadItems(resourceUrl, searchInput, this.requestHeaders);
+                    }
+                    catch (err) {
+                        console.warn(`Unable to load resources for ${this.key}`);
+                    }
+                }
+                else {
+                    this.setItems(this.downloadedResources);
+                }
+                break;
+            }
+            case 'url': {
+                if (!forceUpdate && !this.active && !this.calculatedValue && this.component.type === 'select') {
+                    // If we are lazyLoading, wait until activated.
+                    this.itemsLoadedResolve();
+                    return;
+                }
+                let { url } = this.component.data;
+                let method;
+                let body;
+                if (url.startsWith('/')) {
+                    // if URL starts with '/project', we should use base URL to avoid issues with URL formed like <base_url>/<project_name>/project/<project_id>/...
+                    const baseUrl = url.startsWith('/project') ? Formio.getBaseUrl() : Formio.getProjectUrl() || Formio.getBaseUrl();
+                    url = baseUrl + url;
+                }
+                if (!this.component.data.method) {
+                    method = 'GET';
+                }
+                else {
+                    method = this.component.data.method;
+                    if (method.toUpperCase() === 'POST') {
+                        body = this.component.data.body;
+                    }
+                    else {
+                        body = null;
+                    }
+                }
+                const options = this.component.authenticate ? {} : { noToken: true };
+                this.loadItems(url, searchInput, this.requestHeaders, options, method, body);
+                break;
+            }
+            case 'indexeddb': {
+                if (typeof window === 'undefined') {
+                    return;
+                }
+                if (!window.indexedDB) {
+                    window.alert("Your browser doesn't support current version of indexedDB");
+                }
+                if (this.component.indexeddb && this.component.indexeddb.database && this.component.indexeddb.table) {
+                    const request = window.indexedDB.open(this.component.indexeddb.database);
+                    request.onupgradeneeded = (event) => {
+                        if (this.component.customOptions) {
+                            const db = event.target.result;
+                            const objectStore = db.createObjectStore(this.component.indexeddb.table, { keyPath: 'myKey', autoIncrement: true });
+                            objectStore.transaction.oncomplete = () => {
+                                const transaction = db.transaction(this.component.indexeddb.table, 'readwrite');
+                                this.component.customOptions.forEach((item) => {
+                                    transaction.objectStore(this.component.indexeddb.table).put(item);
+                                });
+                            };
+                        }
+                    };
+                    request.onerror = () => {
+                        window.alert(request.errorCode);
+                    };
+                    request.onsuccess = (event) => {
+                        const db = event.target.result;
+                        const transaction = db.transaction(this.component.indexeddb.table, 'readwrite');
+                        const objectStore = transaction.objectStore(this.component.indexeddb.table);
+                        new NativePromise((resolve) => {
+                            const responseItems = [];
+                            objectStore.getAll().onsuccess = (event) => {
+                                event.target.result.forEach((item) => {
+                                    responseItems.push(item);
+                                });
+                                resolve(responseItems);
+                            };
+                        }).then((items) => {
+                            if (!_.isEmpty(this.component.indexeddb.filter)) {
+                                items = _.filter(items, this.component.indexeddb.filter);
+                            }
+                            this.setItems(items);
+                        });
+                    };
+                }
+            }
+        }
+    }
+}

package/lib/mjs/components/_classes/list/editForm/ListComponent.edit.data.d.ts

@@ -0,0 +1,183 @@
+declare const _default: ({
+    type: string;
+    input: boolean;
+    weight: number;
+    tooltip: string;
+    key: string;
+    defaultValue: string;
+    label: string;
+    dataSrc: string;
+    placeholder?: undefined;
+    conditional?: undefined;
+    components?: undefined;
+    skipMerge?: undefined;
+    clearOnHide?: undefined;
+    description?: undefined;
+    editor?: undefined;
+    as?: undefined;
+    rows?: undefined;
+    allowCalculateOverride?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    key: string;
+    weight: number;
+    label: string;
+    placeholder: string;
+    tooltip: string;
+    conditional: {
+        json: {
+            '===': (string | {
+                var: string;
+            })[];
+            in?: undefined;
+            or?: undefined;
+        };
+    };
+    defaultValue?: undefined;
+    dataSrc?: undefined;
+    components?: undefined;
+    skipMerge?: undefined;
+    clearOnHide?: undefined;
+    description?: undefined;
+    editor?: undefined;
+    as?: undefined;
+    rows?: undefined;
+    allowCalculateOverride?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    label: string;
+    key: string;
+    tooltip: string;
+    weight: number;
+    components: {
+        label: string;
+        key: string;
+        input: boolean;
+        type: string;
+    }[];
+    conditional: {
+        json: {
+            '===': (string | {
+                var: string;
+            })[];
+            in?: undefined;
+            or?: undefined;
+        };
+    };
+    defaultValue?: undefined;
+    dataSrc?: undefined;
+    placeholder?: undefined;
+    skipMerge?: undefined;
+    clearOnHide?: undefined;
+    description?: undefined;
+    editor?: undefined;
+    as?: undefined;
+    rows?: undefined;
+    allowCalculateOverride?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    label: string;
+    key: string;
+    skipMerge: boolean;
+    clearOnHide: boolean;
+    weight: number;
+    description: string;
+    tooltip: string;
+    conditional: {
+        json: {
+            in: (string[] | {
+                var: string;
+            })[];
+            '==='?: undefined;
+            or?: undefined;
+        };
+    };
+    defaultValue?: undefined;
+    dataSrc?: undefined;
+    placeholder?: undefined;
+    components?: undefined;
+    editor?: undefined;
+    as?: undefined;
+    rows?: undefined;
+    allowCalculateOverride?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    editor: string;
+    as: string;
+    rows: number;
+    weight: number;
+    tooltip: string;
+    allowCalculateOverride: boolean;
+    calculateValue: (context: any) => any;
+    defaultValue?: undefined;
+    dataSrc?: undefined;
+    placeholder?: undefined;
+    conditional?: undefined;
+    components?: undefined;
+    skipMerge?: undefined;
+    clearOnHide?: undefined;
+    description?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    weight: number;
+    key: string;
+    label: string;
+    tooltip: string;
+    conditional: {
+        json: {
+            '===': (string | {
+                var: string;
+            })[];
+            in?: undefined;
+            or?: undefined;
+        };
+    };
+    defaultValue?: undefined;
+    dataSrc?: undefined;
+    placeholder?: undefined;
+    components?: undefined;
+    skipMerge?: undefined;
+    clearOnHide?: undefined;
+    description?: undefined;
+    editor?: undefined;
+    as?: undefined;
+    rows?: undefined;
+    allowCalculateOverride?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    weight: number;
+    key: string;
+    label: string;
+    tooltip: string;
+    conditional: {
+        json: {
+            or: {
+                '===': (string | {
+                    var: string;
+                })[];
+            }[];
+            '==='?: undefined;
+            in?: undefined;
+        };
+    };
+    defaultValue?: undefined;
+    dataSrc?: undefined;
+    placeholder?: undefined;
+    components?: undefined;
+    skipMerge?: undefined;
+    clearOnHide?: undefined;
+    description?: undefined;
+    editor?: undefined;
+    as?: undefined;
+    rows?: undefined;
+    allowCalculateOverride?: undefined;
+})[];
+export default _default;

package/lib/mjs/components/_classes/list/editForm/ListComponent.edit.data.js

@@ -0,0 +1,117 @@
+export default [
+    {
+        type: 'select',
+        input: true,
+        weight: 0,
+        tooltip: 'The source to use for the select data. Values lets you provide your own values and labels. JSON lets you provide raw JSON data. URL lets you provide a URL to retrieve the JSON data from.',
+        key: 'dataSrc',
+        defaultValue: 'values',
+        label: 'Data Source Type',
+        dataSrc: 'values',
+    },
+    {
+        type: 'textfield',
+        input: true,
+        key: 'data.url',
+        weight: 10,
+        label: 'Data Source URL',
+        placeholder: 'Data Source URL',
+        tooltip: 'A URL that returns a JSON array to use as the data source.',
+        conditional: {
+            json: { '===': [{ var: 'data.dataSrc' }, 'url'] },
+        },
+    },
+    {
+        type: 'datagrid',
+        input: true,
+        label: 'Request Headers',
+        key: 'data.headers',
+        tooltip: 'Set any headers that should be sent along with the request to the url. This is useful for authentication.',
+        weight: 11,
+        components: [
+            {
+                label: 'Key',
+                key: 'key',
+                input: true,
+                type: 'textfield',
+            },
+            {
+                label: 'Value',
+                key: 'value',
+                input: true,
+                type: 'textfield',
+            },
+        ],
+        conditional: {
+            json: { '===': [{ var: 'data.dataSrc' }, 'url'] },
+        },
+    },
+    {
+        type: 'textfield',
+        input: true,
+        label: 'Value Property',
+        key: 'valueProperty',
+        skipMerge: true,
+        clearOnHide: false,
+        weight: 13,
+        description: "The selected item's property to save.",
+        tooltip: 'The property of each item in the data source to use as the select value. If not specified, the item itself will be used.',
+        conditional: {
+            json: {
+                in: [
+                    { var: 'data.dataSrc' },
+                    [
+                        'json',
+                        'url',
+                        'custom'
+                    ],
+                ],
+            },
+        },
+    },
+    {
+        type: 'textarea',
+        input: true,
+        key: 'template',
+        label: 'Item Template',
+        editor: 'ace',
+        as: 'html',
+        rows: 3,
+        weight: 18,
+        tooltip: 'The HTML template for the result data items.',
+        allowCalculateOverride: true,
+        calculateValue: (context) => {
+            if (!context.data.template) {
+                if (context.instance && context.instance._currentForm.options.editComponent) {
+                    return context.instance._currentForm.options.editComponent.template;
+                }
+            }
+            return context.data.template;
+        },
+    },
+    {
+        type: 'checkbox',
+        input: true,
+        weight: 26,
+        key: 'authenticate',
+        label: 'Formio Authenticate',
+        tooltip: 'Check this if you would like to use Formio Authentication with the request.',
+        conditional: {
+            json: { '===': [{ var: 'data.dataSrc' }, 'url'] },
+        },
+    },
+    {
+        type: 'checkbox',
+        input: true,
+        weight: 29,
+        key: 'ignoreCache',
+        label: 'Disables Storing Request Result in the Cache',
+        tooltip: 'Check it if you don\'t want the requests and its results to be stored in the cache. By default, it is stored and if the Select tries to make the request to the same URL with the same paremetrs, the cached data will be returned. It allows to increase performance, but if the remote source\'s data is changing quite often and you always need to keep it up-to-date, uncheck this option.',
+        conditional: {
+            json: { 'or': [
+                    { '===': [{ var: 'data.dataSrc' }, 'url'] },
+                    { '===': [{ var: 'data.dataSrc' }, 'resource'] },
+                ] },
+        },
+    },
+];

package/lib/mjs/components/_classes/multivalue/Multivalue.d.ts

@@ -0,0 +1,29 @@
+export default class Multivalue extends Field {
+    get addAnother(): any;
+    useWrapper(): any;
+    render(): any;
+    renderElement(): string;
+    renderRow(value: any, index: any): any;
+    /**
+     * Attach inputs to the element.
+     *
+     * @param element
+     * @param index
+     */
+    attachElement(element: any, index: any): void;
+    saveCaretPosition(element: any, index: any): void;
+    onSelectMaskHandler(event: any): void;
+    getMaskPattern(maskName: any): any;
+    multiMasks: {} | undefined;
+    attachMultiMask(index: any): boolean;
+    updateMask(input: any, mask: any): void;
+    /**
+     * Adds a new empty value to the data array.
+     */
+    addNewValue(value: any): void;
+    /**
+     * Adds a new empty value to the data array, and add a new row to contain it.
+     */
+    addValue(): void;
+}
+import Field from '../field/Field';