@formio/js 5.0.0-dev.5646.8734cf4 → 5.0.0-dev.5650.cd53187

package/lib/mjs/components/datagrid/DataGrid.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';
 import { fastCloneDeep, getFocusableElements } from '../../utils/utils';
-import { Components } from '../Components';
+import Components from '../Components';
 export default class DataGridComponent extends NestedArrayComponent {
     static schema(...extend) {
         return NestedArrayComponent.schema({
@@ -38,6 +38,9 @@ export default class DataGridComponent extends NestedArrayComponent {
         if (this.initRows || !_.isEqual(this.dataValue, this.emptyValue)) {
             this.createRows(true);
         }
+        if (this.allowReorder) {
+            this.dragulaReady = this.getDragula();
+        }
         this.visibleColumns = {};
         this.prevHasAddButton = this.hasAddButton();
         this.checkColumns();
@@ -133,9 +136,9 @@ export default class DataGridComponent extends NestedArrayComponent {
     }
     /**
      * Split rows into chunks.
-     * @param {Number[]} groups - array of numbers where each item is size of group
+     * @param {number[]} groups - array of numbers where each item is size of group
      * @param {Array<T>} rows - rows collection
-     * @return {Array<T[]>}
+     * @returns {Array<T[]>} - The chunked rows
      */
     getRowChunks(groups, rows) {
         const [, chunks] = groups.reduce(([startIndex, acc], size) => {
@@ -147,7 +150,7 @@ export default class DataGridComponent extends NestedArrayComponent {
     /**
      * Create groups object.
      * Each key in object represents index of first row in group.
-     * @return {Object}
+     * @returns {object} - The groups object.
      */
     getGroups() {
         const groups = _.get(this.component, 'rowGroups', []);
@@ -164,8 +167,8 @@ export default class DataGridComponent extends NestedArrayComponent {
         }, {});
     }
     /**
-     * Retrun group sizes.
-     * @return {Number[]}
+     * Get group sizes.
+     * @returns {number[]} - The array of group sizes.
      */
     getGroupSizes() {
         return _.map(_.get(this.component, 'rowGroups', []), 'numberOfRows');
@@ -257,13 +260,6 @@ export default class DataGridComponent extends NestedArrayComponent {
             return hasHeader || ((col.label || col.title) && !col.hideLabel);
         }, false);
     }
-    loadRefs(element, refs) {
-        super.loadRefs(element, refs);
-        if (refs['messageContainer'] === 'single') {
-            const container = _.last(element.querySelectorAll(`[${this._referenceAttributeName}=messageContainer]`));
-            this.refs['messageContainer'] = container || this.refs['messageContainer'];
-        }
-    }
     attach(element) {
         this.loadRefs(element, {
             [`${this.datagridKey}-row`]: 'multiple',
@@ -272,14 +268,20 @@ export default class DataGridComponent extends NestedArrayComponent {
             [`${this.datagridKey}-removeRow`]: 'multiple',
             [`${this.datagridKey}-group-header`]: 'multiple',
             [this.datagridKey]: 'multiple',
-            'messageContainer': 'single'
         });
         if (this.allowReorder) {
             this.refs[`${this.datagridKey}-row`].forEach((row, index) => {
                 row.dragInfo = { index };
             });
-            if (this.root.dragulaLib) {
-                this.dragula = this.root.dragulaLib([this.refs[`${this.datagridKey}-tbody`]], {
+            this.dragulaReady.then((dragula) => {
+                // The drop event may call redraw twice which calls attach twice and because this block of code is asynchronous
+                // BOTH redraws may be called before this block of code runs (which causes this block of code to run twice sequentially).
+                // This causes two dragula() calls on the same container which breaks dragula. To fix this the return value must
+                // be saved in this.dragula and have its container contents reset if it exists
+                if (this.dragula && this.dragula.containers) {
+                    this.dragula.containers = [];
+                }
+                this.dragula = dragula([this.refs[`${this.datagridKey}-tbody`]], {
                     moves: (_draggedElement, _oldParent, clickedElement) => {
                         const clickedElementKey = clickedElement.getAttribute('data-key');
                         const oldParentKey = _oldParent.getAttribute('data-key');
@@ -288,24 +290,9 @@ export default class DataGridComponent extends NestedArrayComponent {
                             return clickedElement.classList.contains('formio-drag-button');
                         }
                     }
-                }).on('drop', this.onReorder.bind(this));
-                this.dragula.on('cloned', (el, original) => {
-                    if (el && el.children && original && original.children) {
-                        _.each(original.children, (child, index) => {
-                            const styles = getComputedStyle(child, null);
-                            if (styles.cssText !== '') {
-                                el.children[index].style.cssText = styles.cssText;
-                            }
-                            else {
-                                const cssText = Object.values(styles).reduce((css, propertyName) => {
-                                    return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;
-                                }, '');
-                                el.children[index].style.cssText = cssText;
-                            }
-                        });
-                    }
-                });
-            }
+                }).on('drop', this.onReorder.bind(this))
+                    .on('cloned', this.onCloned.bind(this));
+            });
         }
         this.refs[`${this.datagridKey}-addRow`].forEach((addButton) => {
             this.addEventListener(addButton, 'click', this.addRow.bind(this));
@@ -333,6 +320,24 @@ export default class DataGridComponent extends NestedArrayComponent {
     getComponentsContainer() {
         return this.component.components;
     }
+    /**
+     * Reorder values in array based on the old and new position
+     * @param {any} valuesArr - An array of values.
+     * @param {number} oldPosition - The index of the value in array before reordering.
+     * @param {number} newPosition - The index of the value in array after reordering.
+     * @param {boolean|any} movedBelow - Whether or not the value is moved below.
+     * @returns {void}
+     */
+    reorderValues(valuesArr, oldPosition, newPosition, movedBelow) {
+        if (!_.isArray(valuesArr) || _.isEmpty(valuesArr)) {
+            return;
+        }
+        const draggedRowData = valuesArr[oldPosition];
+        //insert element at new position
+        valuesArr.splice(newPosition, 0, draggedRowData);
+        //remove element from old position (if was moved above, after insertion it's at +1 index)
+        valuesArr.splice(movedBelow ? oldPosition : oldPosition + 1, 1);
+    }
     onReorder(element, _target, _source, sibling) {
         if (!element.dragInfo || (sibling && !sibling.dragInfo)) {
             console.warn('There is no Drag Info available for either dragged or sibling element');
@@ -343,15 +348,32 @@ export default class DataGridComponent extends NestedArrayComponent {
         const newPosition = sibling ? sibling.dragInfo.index : this.dataValue.length;
         const movedBelow = newPosition > oldPosition;
         const dataValue = fastCloneDeep(this.dataValue);
-        const draggedRowData = dataValue[oldPosition];
-        //insert element at new position
-        dataValue.splice(newPosition, 0, draggedRowData);
-        //remove element from old position (if was moved above, after insertion it's at +1 index)
-        dataValue.splice(movedBelow ? oldPosition : oldPosition + 1, 1);
+        this.reorderValues(dataValue, oldPosition, newPosition, movedBelow);
+        //reorder select data
+        this.reorderValues(_.get(this.root, `submission.metadata.selectData.${this.path}`, []), oldPosition, newPosition, movedBelow);
+        // When components are reordered we need to set the dataGrid and form pristine properties to false
+        this.root.pristine = false;
+        this.pristine = false;
         //need to re-build rows to re-calculate indexes and other indexed fields for component instance (like rows for ex.)
         this.setValue(dataValue, { isReordered: true });
         this.rebuild();
     }
+    onCloned(el, original) {
+        if (el && el.children && original && original.children) {
+            _.each(original.children, (child, index) => {
+                const styles = getComputedStyle(child, null);
+                if (styles.cssText !== '') {
+                    el.children[index].style.cssText = styles.cssText;
+                }
+                else {
+                    const cssText = Object.values(styles).reduce((css, propertyName) => {
+                        return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;
+                    }, '');
+                    el.children[index].style.cssText = cssText;
+                }
+            });
+        }
+    }
     focusOnNewRowElement(row) {
         Object.keys(row).find((key) => {
             const element = row[key].element;
@@ -410,10 +432,11 @@ export default class DataGridComponent extends NestedArrayComponent {
     }
     removeRow(index) {
         const makeEmpty = index === 0 && this.rows.length === 1;
-        const flags = { isReordered: !makeEmpty, resetValue: makeEmpty };
+        const flags = { isReordered: !makeEmpty, resetValue: makeEmpty, modified: true };
         this.splice(index, flags);
         this.emit('dataGridDeleteRow', { index });
         const [row] = this.rows.splice(index, 1);
+        this.removeSubmissionMetadataRow(index);
         this.removeRowComponents(row);
         this.updateRowsComponents(index);
         this.setValue(this.dataValue, flags);

package/lib/mjs/components/datamap/DataMap.d.ts

@@ -1,6 +1,7 @@
 export default class DataMapComponent extends DataGridComponent {
     static savedValueTypes(schema: any): string[];
     constructor(component: any, options: any, data: any);
+    get schema(): any;
     get emptyValue(): {};
     set dataValue(value: any);
     get dataValue(): any;

package/lib/mjs/components/datamap/DataMap.form.d.ts

@@ -1,3 +1,6 @@
-export default function _default(...extend: any[]): {
-    components: any;
-};
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
+export default function _default(...extend: any[]): import('@formio/core').Component[];

package/lib/mjs/components/datamap/DataMap.form.js

@@ -1,6 +1,11 @@
 import Components from '../Components';
 import DataMapEditData from './editForm/DataMap.edit.data';
 import DataMapEditDisplay from './editForm/DataMap.edit.display';
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
 export default function (...extend) {
     return Components.baseEditForm([
         {

package/lib/mjs/components/datamap/DataMap.js

@@ -3,7 +3,7 @@ import DataGridComponent from '../datagrid/DataGrid';
 import _ from 'lodash';
 import EventEmitter from 'eventemitter3';
 import { componentValueTypes, getComponentSavedTypes, uniqueKey } from '../../utils/utils';
-import { Components } from '../Components';
+import Components from '../Components';
 export default class DataMapComponent extends DataGridComponent {
     static schema(...extend) {
         return Component.schema({
@@ -236,7 +236,7 @@ export default class DataMapComponent extends DataGridComponent {
             delete dataValue[key];
             const comp = components[this.valueKey];
             comp.component.key = newKey;
-            comp.path = Components.calculateComponentPath(comp);
+            comp.path = Components.getComponentPath(comp);
             key = newKey;
         });
         const valueComponent = _.clone(this.component.valueComponent);

package/lib/mjs/components/datetime/DateTime.d.ts

@@ -10,24 +10,10 @@ export default class DateTimeComponent extends Input {
     static get serverConditionSettings(): {
         operators: string[];
         valueComponent(classComp: any): any;
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
     };
     static get conditionOperatorsSettings(): {
         operators: string[];
         valueComponent(classComp: any): any;
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
     };
     static savedValueTypes(schema: any): string[];
     get emptyValue(): string;

package/lib/mjs/components/datetime/DateTime.form.d.ts

@@ -1,3 +1,6 @@
-export default function _default(...extend: any[]): {
-    components: any;
-};
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
+export default function _default(...extend: any[]): import('@formio/core').Component[];

package/lib/mjs/components/datetime/DateTime.form.js

@@ -4,6 +4,11 @@ import DateTimeEditDate from './editForm/DateTime.edit.date';
 import DateTimeEditDisplay from './editForm/DateTime.edit.display';
 import DateTimeEditTime from './editForm/DateTime.edit.time';
 import DateTimeEditValidation from './editForm/DateTime.edit.validation';
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
 export default function (...extend) {
     return Components.baseEditForm([
         {

package/lib/mjs/components/datetime/editForm/DateTime.edit.date.js

@@ -1,4 +1,4 @@
-import Evaluator from '../../../utils/Evaluator';
+import { Evaluator } from '../../../utils/Evaluator';
 import EditFormUtils from '../../_classes/component/editForm/utils';
 export default [
     {

package/lib/mjs/components/day/Day.d.ts

@@ -9,32 +9,17 @@ export default class DayComponent extends Field {
     };
     static get conditionOperatorsSettings(): {
         operators: string[];
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
     };
     static savedValueTypes(schema: any): string[];
     static get serverConditionSettings(): {
         operators: string[];
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
     };
     constructor(component: any, options: any, data: any);
     /**
      * The empty value for day component.
-     *
-     * @return {'00/00/0000'}
+     * @returns {''} - The empty value of the day component.
      */
-    get emptyValue(): "00/00/0000";
+    get emptyValue(): "";
     get valueMask(): RegExp;
     get dayRequired(): any;
     get showDay(): boolean;
@@ -42,17 +27,7 @@ export default class DayComponent extends Field {
     get showMonth(): boolean;
     get yearRequired(): any;
     get showYear(): boolean;
-    get inputInfo(): {
-        type: string;
-        component: any;
-        changeEvent: string;
-        attr: {
-            name: any;
-            type: any;
-            class: string;
-            lang: any;
-        };
-    };
+    get inputInfo(): any;
     inputDefinition(name: any): {
         type: string;
         ref: any;
@@ -60,7 +35,7 @@ export default class DayComponent extends Field {
             id: string;
             class: string;
             type: string;
-            placeholder: any;
+            placeholder: string;
             step: number;
             min: any;
             max: any;
@@ -109,18 +84,24 @@ export default class DayComponent extends Field {
     }[] | undefined;
     setErrorClasses(elements: any, dirty: any, hasError: any): void;
     dayFirst: any;
-    render(): any;
+    render(): Field;
     renderField(name: any): any;
+    attach(element: any): Promise<void>;
     set disabled(disabled: any);
     validateRequired(setting: any, value: any): boolean;
     normalizeValue(value: any): any;
     /**
-     * Set the value at a specific index.
-     *
-     * @param index
-     * @param value
+     * Set the value at a specific index and updates the component's refs.
+     * @param {number} index - The index to set.
+     * @param {any} value - The value to set.
+     * @returns {null|void} - Returns null if the value is invalid, otherwise void.
      */
-    setValueAt(index: any, value: any): null | undefined;
+    setValueAt(index: number, value: any): null | void;
+    getDayWithHiddenFields(parts: any): {
+        month: any;
+        day: any;
+        year: any;
+    };
     getFieldValue(name: any): number;
     get parts(): {
         day: number;
@@ -129,35 +110,32 @@ export default class DayComponent extends Field {
     };
     /**
      * Get the format for the value string.
-     * @returns {string}
+     * @returns {string} - the format for the value string.
      */
     get format(): string;
     /**
      * Return the date for this component.
-     *
-     * @param value
-     * @return {*}
+     * @param {any} value - The value to convert to a date.
+     * @returns {null|string} - The date string.
      */
-    getDate(value: any): any;
+    getDate(value: any): null | string;
     /**
-     * Return the date object for this component.
-     * @returns {Date}
+     * Return the date string for this component.
+     * @returns {string|null} - The date string for this component.
      */
-    get date(): Date;
+    get date(): string | null;
     /**
      * Return the raw value.
-     *
-     * @returns {Date}
+     * @returns {string} - The raw value of the component.
      */
-    get validationValue(): Date;
+    get validationValue(): string;
     /**
      * Get the input value of the date.
-     *
-     * @param value
-     * @return {null}
+     * @param {any} value - The value to convert to a string.
+     * @returns {string|null} - The string value of the date.
      */
-    getValueAsString(value: any): null;
+    getValueAsString(value: any): string | null;
     isPartialDay(value: any): boolean;
-    getValidationFormat(): "DD-MM-YYYY" | "MM-DD-YYYY";
+    getValidationFormat(): string;
 }
 import Field from '../_classes/field/Field';

package/lib/mjs/components/day/Day.form.d.ts

@@ -1,3 +1,6 @@
-export default function _default(...extend: any[]): {
-    components: any;
-};
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
+export default function _default(...extend: any[]): import('@formio/core').Component[];

package/lib/mjs/components/day/Day.form.js

@@ -5,6 +5,11 @@ import DayEditValidation from './editForm/Day.edit.validation';
 import DayEditDay from './editForm/Day.edit.day';
 import DayEditMonth from './editForm/Day.edit.month';
 import DayEditYear from './editForm/Day.edit.year';
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
 export default function (...extend) {
     return Components.baseEditForm([
         {