@formio/js 5.0.0-dev.5944.74e70b0 → 5.0.0-dev.5948.072adfa
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Changelog.md +1 -0
- package/dist/formio.form.js +583 -593
- package/dist/formio.form.min.js +1 -1
- package/dist/formio.form.min.js.LICENSE.txt +1 -3
- package/dist/formio.full.js +584 -594
- package/dist/formio.full.min.js +1 -1
- package/dist/formio.full.min.js.LICENSE.txt +1 -3
- package/dist/formio.js +3006 -287
- package/dist/formio.min.js +1 -1
- package/dist/formio.min.js.LICENSE.txt +12 -0
- package/dist/formio.utils.js +41 -51
- package/dist/formio.utils.min.js +1 -1
- package/dist/formio.utils.min.js.LICENSE.txt +1 -3
- package/lib/cjs/Webform.d.ts +1 -1
- package/lib/cjs/Webform.js +27 -28
- package/lib/cjs/WebformBuilder.js +6 -13
- package/lib/cjs/Wizard.js +4 -11
- package/lib/cjs/components/Components.d.ts +0 -7
- package/lib/cjs/components/Components.js +1 -33
- package/lib/cjs/components/_classes/component/Component.d.ts +39 -7
- package/lib/cjs/components/_classes/component/Component.js +97 -29
- package/lib/cjs/components/_classes/component/editForm/Component.edit.data.js +2 -2
- package/lib/cjs/components/_classes/componentModal/ComponentModal.d.ts +1 -0
- package/lib/cjs/components/_classes/componentModal/ComponentModal.js +1 -0
- package/lib/cjs/components/_classes/nested/NestedComponent.d.ts +4 -19
- package/lib/cjs/components/_classes/nested/NestedComponent.js +54 -60
- package/lib/cjs/components/_classes/nestedarray/NestedArrayComponent.d.ts +2 -1
- package/lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js +9 -46
- package/lib/cjs/components/datagrid/DataGrid.d.ts +0 -1
- package/lib/cjs/components/datagrid/DataGrid.js +1 -45
- package/lib/cjs/components/datamap/DataMap.js +2 -3
- package/lib/cjs/components/editgrid/EditGrid.js +13 -13
- package/lib/cjs/components/form/Form.d.ts +1 -3
- package/lib/cjs/components/form/Form.js +21 -28
- package/lib/cjs/components/html/HTML.js +15 -3
- package/lib/cjs/components/selectboxes/SelectBoxes.js +0 -1
- package/lib/cjs/formio.form.js +1 -0
- package/lib/cjs/utils/conditionOperators/DateGreaterThan.js +2 -2
- package/lib/cjs/utils/conditionOperators/IsEmptyValue.d.ts +2 -2
- package/lib/cjs/utils/conditionOperators/IsEmptyValue.js +2 -2
- package/lib/cjs/utils/conditionOperators/IsEqualTo.d.ts +2 -2
- package/lib/cjs/utils/conditionOperators/IsEqualTo.js +2 -2
- package/lib/cjs/utils/formUtils.d.ts +25 -14
- package/lib/cjs/utils/formUtils.js +11 -16
- package/lib/cjs/utils/utils.d.ts +1 -2
- package/lib/cjs/utils/utils.js +15 -31
- package/lib/mjs/Webform.d.ts +1 -1
- package/lib/mjs/Webform.js +24 -27
- package/lib/mjs/WebformBuilder.js +6 -13
- package/lib/mjs/Wizard.js +2 -8
- package/lib/mjs/components/Components.d.ts +0 -7
- package/lib/mjs/components/Components.js +1 -32
- package/lib/mjs/components/_classes/component/Component.d.ts +39 -7
- package/lib/mjs/components/_classes/component/Component.js +99 -30
- package/lib/mjs/components/_classes/component/editForm/Component.edit.data.js +2 -2
- package/lib/mjs/components/_classes/componentModal/ComponentModal.d.ts +1 -0
- package/lib/mjs/components/_classes/componentModal/ComponentModal.js +1 -0
- package/lib/mjs/components/_classes/nested/NestedComponent.d.ts +4 -19
- package/lib/mjs/components/_classes/nested/NestedComponent.js +55 -61
- package/lib/mjs/components/_classes/nestedarray/NestedArrayComponent.d.ts +2 -1
- package/lib/mjs/components/_classes/nestedarray/NestedArrayComponent.js +8 -43
- package/lib/mjs/components/datagrid/DataGrid.d.ts +0 -1
- package/lib/mjs/components/datagrid/DataGrid.js +1 -45
- package/lib/mjs/components/datamap/DataMap.js +2 -3
- package/lib/mjs/components/editgrid/EditGrid.js +15 -12
- package/lib/mjs/components/form/Form.d.ts +1 -3
- package/lib/mjs/components/form/Form.js +22 -28
- package/lib/mjs/components/html/HTML.js +15 -3
- package/lib/mjs/components/selectboxes/SelectBoxes.js +0 -1
- package/lib/mjs/formio.form.js +1 -0
- package/lib/mjs/utils/conditionOperators/DateGreaterThan.js +2 -2
- package/lib/mjs/utils/conditionOperators/IsEmptyValue.d.ts +2 -2
- package/lib/mjs/utils/conditionOperators/IsEmptyValue.js +2 -2
- package/lib/mjs/utils/conditionOperators/IsEqualTo.d.ts +2 -2
- package/lib/mjs/utils/conditionOperators/IsEqualTo.js +2 -2
- package/lib/mjs/utils/formUtils.d.ts +25 -14
- package/lib/mjs/utils/formUtils.js +2 -12
- package/lib/mjs/utils/utils.d.ts +1 -2
- package/lib/mjs/utils/utils.js +14 -29
- package/package.json +4 -4
@@ -1,6 +1,8 @@
|
|
1
1
|
'use strict';
|
2
2
|
import _ from 'lodash';
|
3
|
-
import {
|
3
|
+
import { Utils } from '@formio/core/utils';
|
4
|
+
const { getComponentPaths } = Utils;
|
5
|
+
import { componentValueTypes, isLayoutComponent } from '../../../utils/utils';
|
4
6
|
import Component from '../component/Component';
|
5
7
|
import NestedDataComponent from '../nesteddata/NestedDataComponent';
|
6
8
|
export default class NestedArrayComponent extends NestedDataComponent {
|
@@ -19,9 +21,13 @@ export default class NestedArrayComponent extends NestedDataComponent {
|
|
19
21
|
throw new Error('Getter #iteratableRows() is not implemented');
|
20
22
|
}
|
21
23
|
get rowIndex() {
|
22
|
-
return
|
24
|
+
return this._rowIndex;
|
23
25
|
}
|
24
26
|
set rowIndex(value) {
|
27
|
+
this.paths = getComponentPaths(this.component, this.parent?.component, {
|
28
|
+
...(this.parent?.paths || {}),
|
29
|
+
...{ dataIndex: value }
|
30
|
+
});
|
25
31
|
this._rowIndex = value;
|
26
32
|
}
|
27
33
|
init() {
|
@@ -84,47 +90,6 @@ export default class NestedArrayComponent extends NestedDataComponent {
|
|
84
90
|
value: this.dataValue,
|
85
91
|
}, 'show'));
|
86
92
|
}
|
87
|
-
getComponent(path, fn, originalPath) {
|
88
|
-
originalPath = originalPath || getStringFromComponentPath(path);
|
89
|
-
if (this.componentsMap.hasOwnProperty(originalPath)) {
|
90
|
-
if (fn) {
|
91
|
-
return fn(this.componentsMap[originalPath]);
|
92
|
-
}
|
93
|
-
else {
|
94
|
-
return this.componentsMap[originalPath];
|
95
|
-
}
|
96
|
-
}
|
97
|
-
path = Array.isArray(path) ? path : [path];
|
98
|
-
let key = path.shift();
|
99
|
-
const remainingPath = path;
|
100
|
-
let result = [];
|
101
|
-
let possibleComp = null;
|
102
|
-
let comp = null;
|
103
|
-
let rowIndex = null;
|
104
|
-
if (_.isNumber(key)) {
|
105
|
-
rowIndex = key;
|
106
|
-
key = remainingPath.shift();
|
107
|
-
}
|
108
|
-
if (!_.isString(key)) {
|
109
|
-
return result;
|
110
|
-
}
|
111
|
-
this.everyComponent((component, components) => {
|
112
|
-
if (component.component.key === key) {
|
113
|
-
possibleComp = component;
|
114
|
-
if (remainingPath.length > 0 && 'getComponent' in component) {
|
115
|
-
comp = component.getComponent(remainingPath, fn, originalPath);
|
116
|
-
}
|
117
|
-
else if (fn) {
|
118
|
-
fn(component, components);
|
119
|
-
}
|
120
|
-
result = rowIndex !== null ? comp : result.concat(comp || possibleComp);
|
121
|
-
}
|
122
|
-
}, rowIndex);
|
123
|
-
if ((!result || result.length === 0) && possibleComp) {
|
124
|
-
result = rowIndex !== null ? possibleComp : [possibleComp];
|
125
|
-
}
|
126
|
-
return result;
|
127
|
-
}
|
128
93
|
everyComponent(fn, rowIndex, options = {}) {
|
129
94
|
if (_.isObject(rowIndex)) {
|
130
95
|
options = rowIndex;
|
@@ -87,7 +87,6 @@ export default class DataGridComponent extends NestedArrayComponent {
|
|
87
87
|
show: boolean;
|
88
88
|
};
|
89
89
|
checkComponentConditions(data: any, flags: any, row: any): boolean;
|
90
|
-
getComponent(path: any, fn: any): any;
|
91
90
|
toggleGroup(element: any, index: any): void;
|
92
91
|
}
|
93
92
|
import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';
|
@@ -1,7 +1,6 @@
|
|
1
1
|
import _ from 'lodash';
|
2
2
|
import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';
|
3
3
|
import { fastCloneDeep, getFocusableElements } from '../../utils/utils';
|
4
|
-
import Components from '../Components';
|
5
4
|
export default class DataGridComponent extends NestedArrayComponent {
|
6
5
|
static schema(...extend) {
|
7
6
|
return NestedArrayComponent.schema({
|
@@ -422,7 +421,6 @@ export default class DataGridComponent extends NestedArrayComponent {
|
|
422
421
|
}
|
423
422
|
component.rowIndex = rowIndex;
|
424
423
|
component.row = `${rowIndex}-${colIndex}`;
|
425
|
-
component.path = Components.getComponentPath(component);
|
426
424
|
});
|
427
425
|
}
|
428
426
|
updateRowsComponents(rowIndex) {
|
@@ -488,6 +486,7 @@ export default class DataGridComponent extends NestedArrayComponent {
|
|
488
486
|
const options = _.clone(this.options);
|
489
487
|
options.name += `[${rowIndex}]`;
|
490
488
|
options.row = `${rowIndex}-${colIndex}`;
|
489
|
+
options.rowIndex = rowIndex;
|
491
490
|
let columnComponent;
|
492
491
|
if (this.builderMode) {
|
493
492
|
col.id = col.id + rowIndex;
|
@@ -610,49 +609,6 @@ export default class DataGridComponent extends NestedArrayComponent {
|
|
610
609
|
restoreComponentsContext() {
|
611
610
|
this.rows.forEach((row, index) => _.forIn(row, (component) => component.data = this.dataValue[index]));
|
612
611
|
}
|
613
|
-
getComponent(path, fn) {
|
614
|
-
path = Array.isArray(path) ? path : [path];
|
615
|
-
const [key, ...remainingPath] = path;
|
616
|
-
let result = [];
|
617
|
-
if (_.isNumber(key) && remainingPath.length) {
|
618
|
-
const compKey = remainingPath.pop();
|
619
|
-
result = this.rows[key][compKey];
|
620
|
-
// If the component is inside a Layout Component, try to find it among all the row's components
|
621
|
-
if (!result) {
|
622
|
-
Object.entries(this.rows[key]).forEach(([, comp]) => {
|
623
|
-
if ('getComponent' in comp) {
|
624
|
-
const possibleResult = comp.getComponent([compKey], fn);
|
625
|
-
if (possibleResult) {
|
626
|
-
result = possibleResult;
|
627
|
-
}
|
628
|
-
}
|
629
|
-
});
|
630
|
-
}
|
631
|
-
if (result && _.isFunction(fn)) {
|
632
|
-
fn(result, this.getComponents());
|
633
|
-
}
|
634
|
-
if (remainingPath.length && 'getComponent' in result) {
|
635
|
-
return result.getComponent(remainingPath, fn);
|
636
|
-
}
|
637
|
-
return result;
|
638
|
-
}
|
639
|
-
if (!_.isString(key)) {
|
640
|
-
return result;
|
641
|
-
}
|
642
|
-
this.everyComponent((component, components) => {
|
643
|
-
if (component.component.key === key) {
|
644
|
-
let comp = component;
|
645
|
-
if (remainingPath.length > 0 && 'getComponent' in component) {
|
646
|
-
comp = component.getComponent(remainingPath, fn);
|
647
|
-
}
|
648
|
-
else if (fn) {
|
649
|
-
fn(component, components);
|
650
|
-
}
|
651
|
-
result = result.concat(comp);
|
652
|
-
}
|
653
|
-
});
|
654
|
-
return result.length > 0 ? result : null;
|
655
|
-
}
|
656
612
|
toggleGroup(element, index) {
|
657
613
|
element.classList.toggle('collapsed');
|
658
614
|
_.each(this.refs.chunks[index], row => {
|
@@ -3,7 +3,6 @@ import DataGridComponent from '../datagrid/DataGrid';
|
|
3
3
|
import _ from 'lodash';
|
4
4
|
import EventEmitter from 'eventemitter3';
|
5
5
|
import { componentValueTypes, getComponentSavedTypes, uniqueKey } from '../../utils/utils';
|
6
|
-
import Components from '../Components';
|
7
6
|
export default class DataMapComponent extends DataGridComponent {
|
8
7
|
static schema(...extend) {
|
9
8
|
return Component.schema({
|
@@ -70,7 +69,7 @@ export default class DataMapComponent extends DataGridComponent {
|
|
70
69
|
}
|
71
70
|
get dataValue() {
|
72
71
|
if (!this.key ||
|
73
|
-
(
|
72
|
+
(this.conditionallyHidden && this.component.clearOnHide)) {
|
74
73
|
return this.emptyValue;
|
75
74
|
}
|
76
75
|
if (!this.hasValue() && this.shouldAddDefaultValue) {
|
@@ -227,6 +226,7 @@ export default class DataMapComponent extends DataGridComponent {
|
|
227
226
|
options.events = new EventEmitter();
|
228
227
|
options.name += `[${rowIndex}]`;
|
229
228
|
options.row = `${rowIndex}`;
|
229
|
+
options.rowIndex = rowIndex;
|
230
230
|
const components = {};
|
231
231
|
components['__key'] = this.createComponent(this.keySchema, options, { __key: this.builderMode ? this.defaultRowKey : key });
|
232
232
|
components['__key'].on('componentChange', (event) => {
|
@@ -236,7 +236,6 @@ export default class DataMapComponent extends DataGridComponent {
|
|
236
236
|
delete dataValue[key];
|
237
237
|
const comp = components[this.valueKey];
|
238
238
|
comp.component.key = newKey;
|
239
|
-
comp.path = Components.getComponentPath(comp);
|
240
239
|
key = newKey;
|
241
240
|
});
|
242
241
|
const valueComponent = _.clone(this.component.valueComponent);
|
@@ -926,6 +926,7 @@ export default class EditGridComponent extends NestedArrayComponent {
|
|
926
926
|
const options = _.clone(this.options);
|
927
927
|
options.name += `[${rowIndex}]`;
|
928
928
|
options.row = `${rowIndex}-${colIndex}`;
|
929
|
+
options.rowIndex = rowIndex;
|
929
930
|
options.onChange = (flags = {}, changed, modified) => {
|
930
931
|
if (changed.instance.root?.id && (this.root?.id !== changed.instance.root.id)) {
|
931
932
|
changed.instance.root.triggerChange(flags, changed, modified);
|
@@ -942,7 +943,7 @@ export default class EditGridComponent extends NestedArrayComponent {
|
|
942
943
|
...flags,
|
943
944
|
changed,
|
944
945
|
}, editRow.data, editRow.components);
|
945
|
-
this.validateRow(editRow, false);
|
946
|
+
this.validateRow(editRow, false, false);
|
946
947
|
}
|
947
948
|
if (this.variableTypeComponentsIndexes.length) {
|
948
949
|
const typeChanged = this.checkRowVariableTypeComponents(editRow, rowIndex);
|
@@ -984,22 +985,24 @@ export default class EditGridComponent extends NestedArrayComponent {
|
|
984
985
|
validateRow(editRow, dirty, forceSilentCheck, fromSubmission) {
|
985
986
|
editRow.errors = [];
|
986
987
|
if (this.shouldValidateRow(editRow, dirty, fromSubmission)) {
|
987
|
-
const silentCheck = (this.component.rowDrafts && !this.shouldValidateDraft(editRow)) || forceSilentCheck;
|
988
|
+
const silentCheck = forceSilentCheck === false ? false : ((this.component.rowDrafts && !this.shouldValidateDraft(editRow)) || forceSilentCheck);
|
988
989
|
const rootValue = fastCloneDeep(this.rootValue);
|
989
990
|
const editGridValue = _.get(rootValue, this.path, []);
|
990
991
|
editGridValue[editRow.rowIndex] = editRow.data;
|
991
992
|
_.set(rootValue, this.path, editGridValue);
|
992
993
|
const validationProcessorProcess = (context) => this.validationProcessor(context, { dirty, silentCheck });
|
993
994
|
const errors = processSync({
|
994
|
-
components:
|
995
|
-
component.parentPath = `${this.path}[${editRow.rowIndex}]`;
|
996
|
-
return component;
|
997
|
-
}),
|
995
|
+
components: this.component.components,
|
998
996
|
data: rootValue,
|
999
997
|
row: editRow.data,
|
1000
998
|
process: 'validateRow',
|
1001
999
|
instances: this.componentsMap,
|
1002
1000
|
scope: { errors: [] },
|
1001
|
+
parent: this.component,
|
1002
|
+
parentPaths: {
|
1003
|
+
...this.paths,
|
1004
|
+
dataIndex: editRow.rowIndex
|
1005
|
+
},
|
1003
1006
|
processors: [
|
1004
1007
|
{
|
1005
1008
|
process: validationProcessorProcess,
|
@@ -1031,9 +1034,12 @@ export default class EditGridComponent extends NestedArrayComponent {
|
|
1031
1034
|
});
|
1032
1035
|
}
|
1033
1036
|
}
|
1034
|
-
if (!this.component.rowDrafts || this.root?.submitted) {
|
1037
|
+
if (editRow.alerts && (!this.component.rowDrafts || this.root?.submitted)) {
|
1035
1038
|
this.showRowErrorAlerts(editRow, editRow.errors);
|
1036
1039
|
}
|
1040
|
+
else if (editRow.errors?.length) {
|
1041
|
+
this.setCustomValidity(editRow.errors, dirty);
|
1042
|
+
}
|
1037
1043
|
return editRow.errors;
|
1038
1044
|
}
|
1039
1045
|
showRowErrorAlerts(editRow, errors) {
|
@@ -1144,7 +1150,7 @@ export default class EditGridComponent extends NestedArrayComponent {
|
|
1144
1150
|
}
|
1145
1151
|
}
|
1146
1152
|
const changed = this.hasChanged(value, this.dataValue);
|
1147
|
-
if (this.parent
|
1153
|
+
if (this.parent) {
|
1148
1154
|
this.parent.checkComponentConditions();
|
1149
1155
|
}
|
1150
1156
|
this.dataValue = value;
|
@@ -1177,10 +1183,7 @@ export default class EditGridComponent extends NestedArrayComponent {
|
|
1177
1183
|
this.editRows = this.editRows.slice(0, dataLength);
|
1178
1184
|
this.openWhenEmpty();
|
1179
1185
|
this.updateOnChange(flags, changed);
|
1180
|
-
|
1181
|
-
if (!this.options.server) {
|
1182
|
-
this.checkData();
|
1183
|
-
}
|
1186
|
+
this.checkData();
|
1184
1187
|
this.changeState(changed, flags);
|
1185
1188
|
return changed;
|
1186
1189
|
}
|
@@ -21,7 +21,7 @@ export default class FormComponent extends Component {
|
|
21
21
|
get useOriginalRevision(): any;
|
22
22
|
setFormRevision(rev: any): void;
|
23
23
|
subFormRevision: any;
|
24
|
-
getComponent(path: any
|
24
|
+
getComponent(path: any): any;
|
25
25
|
getSubOptions(options?: {}): {};
|
26
26
|
render(): string;
|
27
27
|
asString(value: any): any;
|
@@ -55,8 +55,6 @@ export default class FormComponent extends Component {
|
|
55
55
|
*/
|
56
56
|
loadSubForm(fromAttach: boolean): Promise<any>;
|
57
57
|
subFormLoading: boolean | undefined;
|
58
|
-
get subFormData(): any;
|
59
|
-
checkComponentValidity(data: any, dirty: any, row: any, options: any, errors?: any[]): any;
|
60
58
|
checkComponentConditions(data: any, flags: any, row: any): any;
|
61
59
|
calculateValue(data: any, flags: any, row: any): any;
|
62
60
|
setPristine(pristine: any): void;
|
@@ -3,7 +3,7 @@ import _ from 'lodash';
|
|
3
3
|
import Component from '../_classes/component/Component';
|
4
4
|
import ComponentModal from '../_classes/componentModal/ComponentModal';
|
5
5
|
import EventEmitter from 'eventemitter3';
|
6
|
-
import { isMongoId, eachComponent,
|
6
|
+
import { isMongoId, eachComponent, componentValueTypes } from '../../utils/utils';
|
7
7
|
import { Formio } from '../../Formio';
|
8
8
|
import Form from '../../Form';
|
9
9
|
export default class FormComponent extends Component {
|
@@ -127,15 +127,11 @@ export default class FormComponent extends Component {
|
|
127
127
|
this.subFormRevision = undefined;
|
128
128
|
}
|
129
129
|
}
|
130
|
-
getComponent(path
|
131
|
-
|
132
|
-
|
133
|
-
path.shift();
|
134
|
-
}
|
135
|
-
const originalPathStr = `${this.path}.data.${getStringFromComponentPath(path)}`;
|
136
|
-
if (this.subForm) {
|
137
|
-
return this.subForm.getComponent(path, fn, originalPathStr);
|
130
|
+
getComponent(path) {
|
131
|
+
if (!this.subForm) {
|
132
|
+
return null;
|
138
133
|
}
|
134
|
+
return this.subForm.getComponent(path);
|
139
135
|
}
|
140
136
|
/* eslint-disable max-statements */
|
141
137
|
getSubOptions(options = {}) {
|
@@ -203,6 +199,7 @@ export default class FormComponent extends Component {
|
|
203
199
|
if (this.options.skipDraftRestore) {
|
204
200
|
options.skipDraftRestore = this.options.skipDraftRestore;
|
205
201
|
}
|
202
|
+
options.parent = this;
|
206
203
|
return options;
|
207
204
|
}
|
208
205
|
/* eslint-enable max-statements */
|
@@ -294,6 +291,7 @@ export default class FormComponent extends Component {
|
|
294
291
|
const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;
|
295
292
|
const currentValue = modalShouldBeOpened ? this.componentModal.currentValue : this.dataValue;
|
296
293
|
this.componentModal = new ComponentModal(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);
|
294
|
+
this.subForm.element = this.componentModal.refs.componentContent || this.subForm.element;
|
297
295
|
this.setOpenModalElement();
|
298
296
|
}
|
299
297
|
this.calculateValue();
|
@@ -391,6 +389,10 @@ export default class FormComponent extends Component {
|
|
391
389
|
return (new Form(form, this.getSubOptions())).ready.then((instance) => {
|
392
390
|
this.subForm = instance;
|
393
391
|
this.subForm.currentForm = this;
|
392
|
+
const componentsMap = this.componentsMap;
|
393
|
+
const formComponentsMap = this.subForm.componentsMap;
|
394
|
+
_.assign(componentsMap, formComponentsMap);
|
395
|
+
this.component.components = this.subForm.components.map((comp) => comp.component);
|
394
396
|
this.subForm.parent = this;
|
395
397
|
this.subForm.parentVisible = this.visible;
|
396
398
|
this.subForm.on('change', () => {
|
@@ -409,6 +411,8 @@ export default class FormComponent extends Component {
|
|
409
411
|
this.valueChanged = this.hasSetValue;
|
410
412
|
this.onChange();
|
411
413
|
return this.subForm;
|
414
|
+
}).catch((err) => {
|
415
|
+
console.log(err);
|
412
416
|
});
|
413
417
|
}).then((subForm) => {
|
414
418
|
this.updateSubWizards(subForm);
|
@@ -417,10 +421,11 @@ export default class FormComponent extends Component {
|
|
417
421
|
return this.subFormReady;
|
418
422
|
}
|
419
423
|
hideSubmitButton(component) {
|
420
|
-
const isSubmitButton =
|
421
|
-
((component.action === 'submit') || !component.action);
|
424
|
+
const isSubmitButton = component.type === 'button' && (component.action === 'submit' || !component.action);
|
422
425
|
if (isSubmitButton) {
|
423
426
|
component.hidden = true;
|
427
|
+
// clearOnHide no longer clears from the JSON `hidden` flag, so we make the button conditionally hidden to clear its data
|
428
|
+
component.customConditional = 'show = false';
|
424
429
|
}
|
425
430
|
}
|
426
431
|
/**
|
@@ -429,7 +434,7 @@ export default class FormComponent extends Component {
|
|
429
434
|
* @returns {Promise} - The promise that resolves when the subform is loaded.
|
430
435
|
*/
|
431
436
|
loadSubForm(fromAttach) {
|
432
|
-
if (this.builderMode || this.
|
437
|
+
if (this.builderMode || this.conditionallyHidden || (this.isSubFormLazyLoad() && !fromAttach)) {
|
433
438
|
return Promise.resolve();
|
434
439
|
}
|
435
440
|
if (this.hasLoadedForm && !this.isRevisionChanged &&
|
@@ -464,17 +469,6 @@ export default class FormComponent extends Component {
|
|
464
469
|
}
|
465
470
|
return Promise.resolve();
|
466
471
|
}
|
467
|
-
get subFormData() {
|
468
|
-
return this.dataValue?.data || {};
|
469
|
-
}
|
470
|
-
checkComponentValidity(data, dirty, row, options, errors = []) {
|
471
|
-
options = options || {};
|
472
|
-
const silentCheck = options.silentCheck || false;
|
473
|
-
if (this.subForm) {
|
474
|
-
return this.subForm.checkValidity(this.subFormData, dirty, null, silentCheck, errors);
|
475
|
-
}
|
476
|
-
return super.checkComponentValidity(data, dirty, row, options, errors);
|
477
|
-
}
|
478
472
|
checkComponentConditions(data, flags, row) {
|
479
473
|
const visible = super.checkComponentConditions(data, flags, row);
|
480
474
|
// Return if already hidden
|
@@ -482,14 +476,14 @@ export default class FormComponent extends Component {
|
|
482
476
|
return visible;
|
483
477
|
}
|
484
478
|
if (this.subForm) {
|
485
|
-
return this.subForm.checkConditions(
|
479
|
+
return this.subForm.checkConditions(data, flags, row);
|
486
480
|
}
|
487
481
|
// There are few cases when subForm is not loaded when a change is triggered,
|
488
482
|
// so we need to perform checkConditions after it is ready, or some conditional fields might be hidden in View mode
|
489
483
|
else if (this.subFormReady) {
|
490
484
|
this.subFormReady.then(() => {
|
491
485
|
if (this.subForm) {
|
492
|
-
return this.subForm.checkConditions(
|
486
|
+
return this.subForm.checkConditions(data, flags, row);
|
493
487
|
}
|
494
488
|
});
|
495
489
|
}
|
@@ -497,7 +491,7 @@ export default class FormComponent extends Component {
|
|
497
491
|
}
|
498
492
|
calculateValue(data, flags, row) {
|
499
493
|
if (this.subForm) {
|
500
|
-
return this.subForm.calculateValue(
|
494
|
+
return this.subForm.calculateValue(data, flags, row);
|
501
495
|
}
|
502
496
|
return super.calculateValue(data, flags, row);
|
503
497
|
}
|
@@ -512,7 +506,7 @@ export default class FormComponent extends Component {
|
|
512
506
|
* @returns {*|boolean} - TRUE if the subform should be submitted, FALSE if it should not.
|
513
507
|
*/
|
514
508
|
get shouldSubmit() {
|
515
|
-
return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && !this.
|
509
|
+
return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && !this.conditionallyHidden;
|
516
510
|
}
|
517
511
|
/**
|
518
512
|
* Returns the data for the subform.
|
@@ -539,7 +533,7 @@ export default class FormComponent extends Component {
|
|
539
533
|
}
|
540
534
|
this.subForm.nosubmit = false;
|
541
535
|
this.subForm.submitted = true;
|
542
|
-
return this.subForm.submitForm().then(result => {
|
536
|
+
return this.subForm.submitForm({}, true).then(result => {
|
543
537
|
this.subForm.loading = false;
|
544
538
|
this.subForm.showAllErrors = false;
|
545
539
|
this.dataValue = result.submission;
|
@@ -51,9 +51,21 @@ export default class HTMLComponent extends Component {
|
|
51
51
|
}
|
52
52
|
checkRefreshOn(changed) {
|
53
53
|
super.checkRefreshOn(changed);
|
54
|
-
|
55
|
-
|
56
|
-
this.
|
54
|
+
let visible;
|
55
|
+
if (this.hasCondition()) {
|
56
|
+
this._conditionallyHidden = this.checkConditionallyHidden();
|
57
|
+
visible = !this.conditionallyHidden;
|
58
|
+
}
|
59
|
+
else {
|
60
|
+
visible = !this.component.hidden;
|
61
|
+
}
|
62
|
+
const shouldSetContent = !this.builderMode
|
63
|
+
&& this.component.refreshOnChange
|
64
|
+
&& this.element
|
65
|
+
&& !_.isUndefined(changed)
|
66
|
+
&& ((_.isBoolean(changed) && changed) || !_.isEmpty(changed))
|
67
|
+
&& visible;
|
68
|
+
if (shouldSetContent) {
|
57
69
|
this.setContent(this.element, this.renderContent());
|
58
70
|
}
|
59
71
|
}
|
package/lib/mjs/formio.form.js
CHANGED
@@ -56,6 +56,7 @@ export function registerModule(mod, defaultFn = null, options = {}) {
|
|
56
56
|
case 'templates':
|
57
57
|
for (const framework of Object.keys(mod.templates)) {
|
58
58
|
Formio.Templates.extendTemplate(framework, mod.templates[framework]);
|
59
|
+
Formio.Templates.defaultTemplates = _.defaults(mod.templates[framework], Formio.Templates.defaultTemplates);
|
59
60
|
}
|
60
61
|
if (mod.templates[current]) {
|
61
62
|
Formio.Templates.current = mod.templates[current];
|
@@ -14,13 +14,13 @@ export default class DateGeaterThan extends ConditionOperator {
|
|
14
14
|
return { date, comparedDate };
|
15
15
|
}
|
16
16
|
execute(options, functionName = 'isAfter') {
|
17
|
-
const { value, instance,
|
17
|
+
const { value, instance, path } = options;
|
18
18
|
if (!value) {
|
19
19
|
return false;
|
20
20
|
}
|
21
21
|
let conditionTriggerComponent = null;
|
22
22
|
if (instance?.root?.getComponent) {
|
23
|
-
conditionTriggerComponent = instance.root.getComponent(
|
23
|
+
conditionTriggerComponent = instance.root.getComponent(path);
|
24
24
|
}
|
25
25
|
if (conditionTriggerComponent && conditionTriggerComponent.isPartialDay && conditionTriggerComponent.isPartialDay(value)) {
|
26
26
|
return false;
|
@@ -1,8 +1,8 @@
|
|
1
1
|
export default class IsEmptyValue extends ConditionOperator {
|
2
|
-
execute({ value, instance,
|
2
|
+
execute({ value, instance, path }: {
|
3
3
|
value: any;
|
4
4
|
instance: any;
|
5
|
-
|
5
|
+
path: any;
|
6
6
|
}): any;
|
7
7
|
getResult(options: any): any;
|
8
8
|
}
|
@@ -10,10 +10,10 @@ export default class IsEmptyValue extends ConditionOperator {
|
|
10
10
|
static get requireValue() {
|
11
11
|
return false;
|
12
12
|
}
|
13
|
-
execute({ value, instance,
|
13
|
+
execute({ value, instance, path }) {
|
14
14
|
const isEmptyValue = _.isEmpty(_.isNumber(value) ? String(value) : value);
|
15
15
|
if (instance?.root?.getComponent) {
|
16
|
-
const conditionTriggerComponent = instance.root.getComponent(
|
16
|
+
const conditionTriggerComponent = instance.root.getComponent(path);
|
17
17
|
return conditionTriggerComponent?.isEmpty ? conditionTriggerComponent.isEmpty() : isEmptyValue;
|
18
18
|
}
|
19
19
|
return isEmptyValue;
|
@@ -1,9 +1,9 @@
|
|
1
1
|
export default class IsEqualTo extends ConditionOperator {
|
2
|
-
execute({ value, comparedValue, instance,
|
2
|
+
execute({ value, comparedValue, instance, path }: {
|
3
3
|
value: any;
|
4
4
|
comparedValue: any;
|
5
5
|
instance: any;
|
6
|
-
|
6
|
+
path: any;
|
7
7
|
}): any;
|
8
8
|
}
|
9
9
|
import ConditionOperator from './ConditionOperator';
|
@@ -8,7 +8,7 @@ export default class IsEqualTo extends ConditionOperator {
|
|
8
8
|
static get displayedName() {
|
9
9
|
return 'Is Equal To';
|
10
10
|
}
|
11
|
-
execute({ value, comparedValue, instance,
|
11
|
+
execute({ value, comparedValue, instance, path }) {
|
12
12
|
if ((value || value === false) && comparedValue && typeof value !== typeof comparedValue && _.isString(comparedValue)) {
|
13
13
|
try {
|
14
14
|
comparedValue = JSON.parse(comparedValue);
|
@@ -17,7 +17,7 @@ export default class IsEqualTo extends ConditionOperator {
|
|
17
17
|
catch (e) { }
|
18
18
|
}
|
19
19
|
if (instance?.root?.getComponent) {
|
20
|
-
const conditionTriggerComponent = instance.root.getComponent(
|
20
|
+
const conditionTriggerComponent = instance.root.getComponent(path);
|
21
21
|
if (conditionTriggerComponent
|
22
22
|
&& isSelectResourceWithObjectValue(conditionTriggerComponent.component)
|
23
23
|
&& conditionTriggerComponent.component?.template) {
|
@@ -1,22 +1,33 @@
|
|
1
|
-
/**
|
2
|
-
* Deprecated version of findComponents. Renamed to searchComponents.
|
3
|
-
* @param {import('@formio/core').Component[]} components - The components to find components within.
|
4
|
-
* @param {object} query - The query to use when searching for the components.
|
5
|
-
* @returns {import('@formio/core').Component[]} - The result of the component that is found.
|
6
|
-
*/
|
7
|
-
export function findComponents(components: import('@formio/core').Component[], query: object): import('@formio/core').Component[];
|
8
1
|
export const flattenComponents: typeof Utils.flattenComponents;
|
9
2
|
export const guid: typeof Utils.guid;
|
10
3
|
export const uniqueName: typeof Utils.uniqueName;
|
11
|
-
export const
|
4
|
+
export const MODEL_TYPES_OF_KNOWN_COMPONENTS: {
|
5
|
+
nestedArray: string[];
|
6
|
+
nestedDataArray: string[];
|
7
|
+
dataObject: string[];
|
8
|
+
object: string[];
|
9
|
+
map: string[];
|
10
|
+
content: string[];
|
11
|
+
string: string[];
|
12
|
+
number: string[];
|
13
|
+
boolean: string[];
|
14
|
+
none: string[];
|
15
|
+
any: string[];
|
16
|
+
};
|
12
17
|
export const getModelType: typeof Utils.getModelType;
|
13
|
-
export const
|
14
|
-
export const
|
18
|
+
export const getComponentPath: any;
|
19
|
+
export const setComponentScope: typeof Utils.setComponentScope;
|
20
|
+
export const resetComponentScope: typeof Utils.resetComponentScope;
|
15
21
|
export const isComponentNestedDataType: typeof Utils.isComponentNestedDataType;
|
16
22
|
export const componentPath: typeof Utils.componentPath;
|
17
|
-
export const
|
18
|
-
export const
|
19
|
-
export const
|
23
|
+
export const getComponentPaths: typeof Utils.getComponentPaths;
|
24
|
+
export const componentMatches: typeof Utils.componentMatches;
|
25
|
+
export const getBestMatch: typeof Utils.getBestMatch;
|
26
|
+
export const getComponentFromPath: typeof Utils.getComponentFromPath;
|
27
|
+
export const getComponentValue: typeof Utils.getComponentValue;
|
28
|
+
export const findComponents: typeof Utils.findComponents;
|
29
|
+
export const eachComponentDataAsync: (components: Component[], data: DataObject, fn: EachComponentDataAsyncCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: any, parentPaths?: any) => Promise<void>;
|
30
|
+
export const eachComponentData: (components: Component[], data: DataObject, fn: EachComponentDataCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: any, parentPaths?: any) => void;
|
20
31
|
export const getComponentKey: typeof Utils.getComponentKey;
|
21
32
|
export const getContextualRowPath: typeof Utils.getContextualRowPath;
|
22
33
|
export const getContextualRowData: typeof Utils.getContextualRowData;
|
@@ -24,7 +35,7 @@ export const componentInfo: typeof Utils.componentInfo;
|
|
24
35
|
export const eachComponent: typeof Utils.eachComponent;
|
25
36
|
export const eachComponentAsync: typeof Utils.eachComponentAsync;
|
26
37
|
export const getComponentData: typeof Utils.getComponentData;
|
27
|
-
export const getComponentActualValue:
|
38
|
+
export const getComponentActualValue: any;
|
28
39
|
export const isLayoutComponent: typeof Utils.isLayoutComponent;
|
29
40
|
export const matchComponent: typeof Utils.matchComponent;
|
30
41
|
export const getComponent: typeof Utils.getComponent;
|
@@ -1,13 +1,3 @@
|
|
1
1
|
import { Utils } from '@formio/core';
|
2
|
-
const { flattenComponents, guid, uniqueName,
|
3
|
-
|
4
|
-
* Deprecated version of findComponents. Renamed to searchComponents.
|
5
|
-
* @param {import('@formio/core').Component[]} components - The components to find components within.
|
6
|
-
* @param {object} query - The query to use when searching for the components.
|
7
|
-
* @returns {import('@formio/core').Component[]} - The result of the component that is found.
|
8
|
-
*/
|
9
|
-
export function findComponents(components, query) {
|
10
|
-
console.warn('formio.js/utils findComponents is deprecated. Use searchComponents instead.');
|
11
|
-
return searchComponents(components, query);
|
12
|
-
}
|
13
|
-
export { flattenComponents, guid, uniqueName, MODEL_TYPES, getModelType, getComponentAbsolutePath, getComponentPath, isComponentNestedDataType, componentPath, componentChildPath, eachComponentDataAsync, eachComponentData, getComponentKey, getContextualRowPath, getContextualRowData, componentInfo, eachComponent, eachComponentAsync, getComponentData, getComponentActualValue, isLayoutComponent, matchComponent, getComponent, searchComponents, removeComponent, hasCondition, parseFloatExt, formatAsCurrency, escapeRegExCharacters, getValue, getStrings, generateFormChange, applyFormChanges, findComponent, getEmptyValue, isComponentDataEmpty, isSelectResourceWithObjectValue, compareSelectResourceWithObjectTypeValues, getItemTemplateKeys };
|
2
|
+
const { flattenComponents, guid, uniqueName, MODEL_TYPES_OF_KNOWN_COMPONENTS, getModelType, getComponentPath, setComponentScope, resetComponentScope, isComponentNestedDataType, componentPath, getComponentPaths, componentMatches, getBestMatch, getComponentFromPath, getComponentValue, findComponents, eachComponentDataAsync, eachComponentData, getComponentKey, getContextualRowPath, getContextualRowData, componentInfo, eachComponent, eachComponentAsync, getComponentData, getComponentActualValue, isLayoutComponent, matchComponent, getComponent, searchComponents, removeComponent, hasCondition, parseFloatExt, formatAsCurrency, escapeRegExCharacters, getValue, getStrings, generateFormChange, applyFormChanges, findComponent, getEmptyValue, isComponentDataEmpty, isSelectResourceWithObjectValue, compareSelectResourceWithObjectTypeValues, getItemTemplateKeys } = Utils;
|
3
|
+
export { flattenComponents, guid, uniqueName, MODEL_TYPES_OF_KNOWN_COMPONENTS, getModelType, getComponentPath, setComponentScope, resetComponentScope, isComponentNestedDataType, componentPath, getComponentPaths, componentMatches, getBestMatch, getComponentFromPath, getComponentValue, findComponents, eachComponentDataAsync, eachComponentData, getComponentKey, getContextualRowPath, getContextualRowData, componentInfo, eachComponent, eachComponentAsync, getComponentData, getComponentActualValue, isLayoutComponent, matchComponent, getComponent, searchComponents, removeComponent, hasCondition, parseFloatExt, formatAsCurrency, escapeRegExCharacters, getValue, getStrings, generateFormChange, applyFormChanges, findComponent, getEmptyValue, isComponentDataEmpty, isSelectResourceWithObjectValue, compareSelectResourceWithObjectTypeValues, getItemTemplateKeys };
|
package/lib/mjs/utils/utils.d.ts
CHANGED
@@ -462,10 +462,9 @@ export function getComponentPathWithoutIndicies(path?: string): string;
|
|
462
462
|
/**
|
463
463
|
* Returns a path to the component which based on its schema
|
464
464
|
* @param {import('@formio/core').Component} component - Component containing link to its parent's schema in the 'parent' property
|
465
|
-
* @param {string} path - Path to the component
|
466
465
|
* @returns {string} - Path to the component
|
467
466
|
*/
|
468
|
-
export function getComponentPath(component: import('@formio/core').Component
|
467
|
+
export function getComponentPath(component: import('@formio/core').Component): string;
|
469
468
|
/**
|
470
469
|
* Returns a parent component of the passed component instance skipping all the Layout components
|
471
470
|
* @param {Component} componentInstance - The component to check for the parent.
|