@formio/js 5.0.0-dev.5702.41702de → 5.0.0-dev.5703.20a26ed
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 +11 -0
- package/dist/formio.embed.js +1 -1
- package/dist/formio.embed.min.js +1 -1
- package/dist/formio.form.js +6 -102
- package/dist/formio.form.min.js +1 -1
- package/dist/formio.full.js +6 -6
- package/dist/formio.full.min.js +1 -1
- package/dist/formio.js +1 -1
- package/dist/formio.min.js +1 -1
- package/lib/cjs/CDN.d.ts +1 -0
- package/lib/cjs/CDN.js +1 -0
- package/lib/cjs/Webform.js +0 -2
- package/lib/cjs/components/_classes/component/Component.d.ts +1 -0
- package/lib/cjs/components/_classes/component/Component.js +18 -0
- package/lib/cjs/components/datagrid/DataGrid.d.ts +2 -0
- package/lib/cjs/components/datagrid/DataGrid.js +38 -26
- package/lib/cjs/components/datamap/DataMap.js +2 -2
- package/lib/cjs/components/editgrid/EditGrid.js +2 -1
- package/lib/cjs/components/editgrid/fixtures/comp16.d.ts +52 -0
- package/lib/cjs/components/editgrid/fixtures/comp16.js +71 -0
- package/lib/cjs/components/editgrid/fixtures/index.d.ts +2 -1
- package/lib/cjs/components/editgrid/fixtures/index.js +3 -1
- package/lib/mjs/CDN.d.ts +1 -0
- package/lib/mjs/CDN.js +1 -0
- package/lib/mjs/Webform.js +0 -2
- package/lib/mjs/components/_classes/component/Component.d.ts +1 -0
- package/lib/mjs/components/_classes/component/Component.js +7 -0
- package/lib/mjs/components/datagrid/DataGrid.d.ts +2 -0
- package/lib/mjs/components/datagrid/DataGrid.js +37 -25
- package/lib/mjs/components/datamap/DataMap.js +1 -1
- package/lib/mjs/components/editgrid/EditGrid.js +2 -1
- package/lib/mjs/components/editgrid/fixtures/comp16.d.ts +52 -0
- package/lib/mjs/components/editgrid/fixtures/comp16.js +69 -0
- package/lib/mjs/components/editgrid/fixtures/index.d.ts +2 -1
- package/lib/mjs/components/editgrid/fixtures/index.js +2 -1
- package/package.json +1 -1
package/lib/cjs/CDN.d.ts
CHANGED
package/lib/cjs/CDN.js
CHANGED
package/lib/cjs/Webform.js
CHANGED
|
@@ -17,7 +17,6 @@ const formUtils_1 = require("./utils/formUtils");
|
|
|
17
17
|
if (typeof window !== 'undefined' && typeof window.global === 'undefined') {
|
|
18
18
|
window.global = window;
|
|
19
19
|
}
|
|
20
|
-
const dragula_1 = __importDefault(require("dragula"));
|
|
21
20
|
// Initialize the available forms.
|
|
22
21
|
Formio_1.Formio.forms = {};
|
|
23
22
|
// Allow people to register components.
|
|
@@ -314,7 +313,6 @@ class Webform extends NestedDataComponent_1.default {
|
|
|
314
313
|
// Ensure the root is set to this component.
|
|
315
314
|
this.root = this;
|
|
316
315
|
this.localRoot = this;
|
|
317
|
-
this.root.dragulaLib = dragula_1.default;
|
|
318
316
|
}
|
|
319
317
|
/* eslint-enable max-statements */
|
|
320
318
|
get language() {
|
|
@@ -830,6 +830,7 @@ declare class Component extends Element {
|
|
|
830
830
|
quill: any;
|
|
831
831
|
get shouldSanitizeValue(): boolean;
|
|
832
832
|
addAce(element: any, settings: any, onChange: any): any;
|
|
833
|
+
getDragula(): Promise<any>;
|
|
833
834
|
get tree(): any;
|
|
834
835
|
/**
|
|
835
836
|
* The empty value for this component.
|
|
@@ -22,6 +22,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
22
22
|
__setModuleDefault(result, mod);
|
|
23
23
|
return result;
|
|
24
24
|
};
|
|
25
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
26
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
27
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
28
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
29
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
30
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
31
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
32
|
+
});
|
|
33
|
+
};
|
|
25
34
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
35
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
36
|
};
|
|
@@ -2374,6 +2383,15 @@ class Component extends Element_1.default {
|
|
|
2374
2383
|
return editor;
|
|
2375
2384
|
});
|
|
2376
2385
|
}
|
|
2386
|
+
getDragula() {
|
|
2387
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
2388
|
+
return new Promise((resolve) => {
|
|
2389
|
+
return Formio_1.Formio.requireLibrary('dragula', 'dragula', `${Formio_1.Formio.cdn.dragula}/dragula.js`, true, (ready) => {
|
|
2390
|
+
return ready.then(resolve);
|
|
2391
|
+
});
|
|
2392
|
+
});
|
|
2393
|
+
});
|
|
2394
|
+
}
|
|
2377
2395
|
get tree() {
|
|
2378
2396
|
return this.component.tree || false;
|
|
2379
2397
|
}
|
|
@@ -12,6 +12,7 @@ export default class DataGridComponent extends NestedArrayComponent {
|
|
|
12
12
|
tabIndex: number;
|
|
13
13
|
rows: any[] | undefined;
|
|
14
14
|
columns: any[] | undefined;
|
|
15
|
+
dragulaReady: Promise<any> | undefined;
|
|
15
16
|
visibleColumns: {} | undefined;
|
|
16
17
|
set dataValue(value: any[]);
|
|
17
18
|
get dataValue(): any[];
|
|
@@ -71,6 +72,7 @@ export default class DataGridComponent extends NestedArrayComponent {
|
|
|
71
72
|
*/
|
|
72
73
|
reorderValues(valuesArr: any, oldPosition: number, newPosition: number, movedBelow: boolean | any): void;
|
|
73
74
|
onReorder(element: any, _target: any, _source: any, sibling: any): void;
|
|
75
|
+
onCloned(el: any, original: any): void;
|
|
74
76
|
focusOnNewRowElement(row: any): void;
|
|
75
77
|
addRow(): void;
|
|
76
78
|
updateComponentsRowIndex(components: any, rowIndex: any): void;
|
|
@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
const lodash_1 = __importDefault(require("lodash"));
|
|
7
7
|
const NestedArrayComponent_1 = __importDefault(require("../_classes/nestedarray/NestedArrayComponent"));
|
|
8
8
|
const utils_1 = require("../../utils/utils");
|
|
9
|
-
const Components_1 = require("../Components");
|
|
10
|
-
const dragula_1 = __importDefault(require("dragula"));
|
|
9
|
+
const Components_1 = __importDefault(require("../Components"));
|
|
11
10
|
class DataGridComponent extends NestedArrayComponent_1.default {
|
|
12
11
|
static schema(...extend) {
|
|
13
12
|
return NestedArrayComponent_1.default.schema({
|
|
@@ -44,6 +43,9 @@ class DataGridComponent extends NestedArrayComponent_1.default {
|
|
|
44
43
|
if (this.initRows || !lodash_1.default.isEqual(this.dataValue, this.emptyValue)) {
|
|
45
44
|
this.createRows(true);
|
|
46
45
|
}
|
|
46
|
+
if (this.allowReorder) {
|
|
47
|
+
this.dragulaReady = this.getDragula();
|
|
48
|
+
}
|
|
47
49
|
this.visibleColumns = {};
|
|
48
50
|
this.prevHasAddButton = this.hasAddButton();
|
|
49
51
|
this.checkColumns();
|
|
@@ -282,31 +284,25 @@ class DataGridComponent extends NestedArrayComponent_1.default {
|
|
|
282
284
|
this.refs[`${this.datagridKey}-row`].forEach((row, index) => {
|
|
283
285
|
row.dragInfo = { index };
|
|
284
286
|
});
|
|
285
|
-
this.dragula
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
}
|
|
287
|
+
this.dragulaReady.then((dragula) => {
|
|
288
|
+
// The drop event may call redraw twice which calls attach twice and because this block of code is asynchronous
|
|
289
|
+
// BOTH redraws may be called before this block of code runs (which causes this block of code to run twice sequentially).
|
|
290
|
+
// This causes two dragula() calls on the same container which breaks dragula. To fix this the return value must
|
|
291
|
+
// be saved in this.dragula and have its container contents reset if it exists
|
|
292
|
+
if (this.dragula && this.dragula.containers) {
|
|
293
|
+
this.dragula.containers = [];
|
|
293
294
|
}
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
if (
|
|
300
|
-
|
|
295
|
+
this.dragula = dragula([this.refs[`${this.datagridKey}-tbody`]], {
|
|
296
|
+
moves: (_draggedElement, _oldParent, clickedElement) => {
|
|
297
|
+
const clickedElementKey = clickedElement.getAttribute('data-key');
|
|
298
|
+
const oldParentKey = _oldParent.getAttribute('data-key');
|
|
299
|
+
//Check if the clicked button belongs to that container, if false, it belongs to the nested container
|
|
300
|
+
if (oldParentKey === clickedElementKey) {
|
|
301
|
+
return clickedElement.classList.contains('formio-drag-button');
|
|
301
302
|
}
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
}, '');
|
|
306
|
-
el.children[index].style.cssText = cssText;
|
|
307
|
-
}
|
|
308
|
-
});
|
|
309
|
-
}
|
|
303
|
+
}
|
|
304
|
+
}).on('drop', this.onReorder.bind(this))
|
|
305
|
+
.on('cloned', this.onCloned.bind(this));
|
|
310
306
|
});
|
|
311
307
|
}
|
|
312
308
|
this.refs[`${this.datagridKey}-addRow`].forEach((addButton) => {
|
|
@@ -373,6 +369,22 @@ class DataGridComponent extends NestedArrayComponent_1.default {
|
|
|
373
369
|
this.setValue(dataValue, { isReordered: true });
|
|
374
370
|
this.rebuild();
|
|
375
371
|
}
|
|
372
|
+
onCloned(el, original) {
|
|
373
|
+
if (el && el.children && original && original.children) {
|
|
374
|
+
lodash_1.default.each(original.children, (child, index) => {
|
|
375
|
+
const styles = getComputedStyle(child, null);
|
|
376
|
+
if (styles.cssText !== '') {
|
|
377
|
+
el.children[index].style.cssText = styles.cssText;
|
|
378
|
+
}
|
|
379
|
+
else {
|
|
380
|
+
const cssText = Object.values(styles).reduce((css, propertyName) => {
|
|
381
|
+
return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;
|
|
382
|
+
}, '');
|
|
383
|
+
el.children[index].style.cssText = cssText;
|
|
384
|
+
}
|
|
385
|
+
});
|
|
386
|
+
}
|
|
387
|
+
}
|
|
376
388
|
focusOnNewRowElement(row) {
|
|
377
389
|
Object.keys(row).find((key) => {
|
|
378
390
|
const element = row[key].element;
|
|
@@ -422,7 +434,7 @@ class DataGridComponent extends NestedArrayComponent_1.default {
|
|
|
422
434
|
}
|
|
423
435
|
component.rowIndex = rowIndex;
|
|
424
436
|
component.row = `${rowIndex}-${colIndex}`;
|
|
425
|
-
component.path = Components_1.
|
|
437
|
+
component.path = Components_1.default.getComponentPath(component);
|
|
426
438
|
});
|
|
427
439
|
}
|
|
428
440
|
updateRowsComponents(rowIndex) {
|
|
@@ -8,7 +8,7 @@ const DataGrid_1 = __importDefault(require("../datagrid/DataGrid"));
|
|
|
8
8
|
const lodash_1 = __importDefault(require("lodash"));
|
|
9
9
|
const eventemitter3_1 = __importDefault(require("eventemitter3"));
|
|
10
10
|
const utils_1 = require("../../utils/utils");
|
|
11
|
-
const Components_1 = require("../Components");
|
|
11
|
+
const Components_1 = __importDefault(require("../Components"));
|
|
12
12
|
class DataMapComponent extends DataGrid_1.default {
|
|
13
13
|
static schema(...extend) {
|
|
14
14
|
return Component_1.default.schema({
|
|
@@ -241,7 +241,7 @@ class DataMapComponent extends DataGrid_1.default {
|
|
|
241
241
|
delete dataValue[key];
|
|
242
242
|
const comp = components[this.valueKey];
|
|
243
243
|
comp.component.key = newKey;
|
|
244
|
-
comp.path = Components_1.
|
|
244
|
+
comp.path = Components_1.default.calculateComponentPath(comp);
|
|
245
245
|
key = newKey;
|
|
246
246
|
});
|
|
247
247
|
const valueComponent = lodash_1.default.clone(this.component.valueComponent);
|
|
@@ -1101,7 +1101,8 @@ class EditGridComponent extends NestedArrayComponent_1.default {
|
|
|
1101
1101
|
return false;
|
|
1102
1102
|
}
|
|
1103
1103
|
else if (rowsEditing && this.saveEditMode && !this.component.openWhenEmpty) {
|
|
1104
|
-
this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);
|
|
1104
|
+
this._errors = this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);
|
|
1105
|
+
errors.push(...this._errors);
|
|
1105
1106
|
return false;
|
|
1106
1107
|
}
|
|
1107
1108
|
const message = this.invalid || this.invalidMessage(data, dirty, false, row);
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
declare namespace _default {
|
|
2
|
+
let type: string;
|
|
3
|
+
let display: string;
|
|
4
|
+
let components: ({
|
|
5
|
+
title: string;
|
|
6
|
+
breadcrumbClickable: boolean;
|
|
7
|
+
buttonSettings: {
|
|
8
|
+
previous: boolean;
|
|
9
|
+
cancel: boolean;
|
|
10
|
+
next: boolean;
|
|
11
|
+
};
|
|
12
|
+
collapsible: boolean;
|
|
13
|
+
tableView: boolean;
|
|
14
|
+
key: string;
|
|
15
|
+
type: string;
|
|
16
|
+
label: string;
|
|
17
|
+
input: boolean;
|
|
18
|
+
components: {
|
|
19
|
+
label: string;
|
|
20
|
+
tableView: boolean;
|
|
21
|
+
rowDrafts: boolean;
|
|
22
|
+
key: string;
|
|
23
|
+
type: string;
|
|
24
|
+
input: boolean;
|
|
25
|
+
components: {
|
|
26
|
+
label: string;
|
|
27
|
+
tableView: boolean;
|
|
28
|
+
key: string;
|
|
29
|
+
type: string;
|
|
30
|
+
input: boolean;
|
|
31
|
+
alwaysEnabled: boolean;
|
|
32
|
+
}[];
|
|
33
|
+
alwaysEnabled: boolean;
|
|
34
|
+
}[];
|
|
35
|
+
alwaysEnabled: boolean;
|
|
36
|
+
showValidations?: undefined;
|
|
37
|
+
} | {
|
|
38
|
+
label: string;
|
|
39
|
+
showValidations: boolean;
|
|
40
|
+
alwaysEnabled: boolean;
|
|
41
|
+
tableView: boolean;
|
|
42
|
+
key: string;
|
|
43
|
+
type: string;
|
|
44
|
+
input: boolean;
|
|
45
|
+
title?: undefined;
|
|
46
|
+
breadcrumbClickable?: undefined;
|
|
47
|
+
buttonSettings?: undefined;
|
|
48
|
+
collapsible?: undefined;
|
|
49
|
+
components?: undefined;
|
|
50
|
+
})[];
|
|
51
|
+
}
|
|
52
|
+
export default _default;
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = {
|
|
4
|
+
type: 'form',
|
|
5
|
+
display: 'wizard',
|
|
6
|
+
components: [
|
|
7
|
+
{
|
|
8
|
+
title: 'Page 1',
|
|
9
|
+
breadcrumbClickable: true,
|
|
10
|
+
buttonSettings: {
|
|
11
|
+
previous: true,
|
|
12
|
+
cancel: true,
|
|
13
|
+
next: true
|
|
14
|
+
},
|
|
15
|
+
collapsible: false,
|
|
16
|
+
tableView: false,
|
|
17
|
+
key: 'page3',
|
|
18
|
+
type: 'panel',
|
|
19
|
+
label: 'Page 2',
|
|
20
|
+
input: false,
|
|
21
|
+
components: [
|
|
22
|
+
{
|
|
23
|
+
label: 'Edit Grid',
|
|
24
|
+
tableView: true,
|
|
25
|
+
rowDrafts: false,
|
|
26
|
+
key: 'editGrid',
|
|
27
|
+
type: 'editgrid',
|
|
28
|
+
input: true,
|
|
29
|
+
components: [
|
|
30
|
+
{
|
|
31
|
+
label: 'Text Field',
|
|
32
|
+
tableView: true,
|
|
33
|
+
key: 'textField',
|
|
34
|
+
type: 'textfield',
|
|
35
|
+
input: true,
|
|
36
|
+
alwaysEnabled: false
|
|
37
|
+
}
|
|
38
|
+
],
|
|
39
|
+
alwaysEnabled: false
|
|
40
|
+
}
|
|
41
|
+
],
|
|
42
|
+
alwaysEnabled: false
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
title: 'Page 2',
|
|
46
|
+
breadcrumbClickable: true,
|
|
47
|
+
buttonSettings: {
|
|
48
|
+
previous: true,
|
|
49
|
+
cancel: true,
|
|
50
|
+
next: true
|
|
51
|
+
},
|
|
52
|
+
collapsible: false,
|
|
53
|
+
tableView: false,
|
|
54
|
+
key: 'page2',
|
|
55
|
+
type: 'panel',
|
|
56
|
+
label: 'Page 1',
|
|
57
|
+
input: false,
|
|
58
|
+
alwaysEnabled: false,
|
|
59
|
+
components: []
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
label: 'Submit',
|
|
63
|
+
showValidations: false,
|
|
64
|
+
alwaysEnabled: false,
|
|
65
|
+
tableView: false,
|
|
66
|
+
key: 'submit',
|
|
67
|
+
type: 'button',
|
|
68
|
+
input: true
|
|
69
|
+
}
|
|
70
|
+
]
|
|
71
|
+
};
|
|
@@ -13,8 +13,9 @@ import comp6 from './comp6';
|
|
|
13
13
|
import comp7 from './comp7';
|
|
14
14
|
import comp8 from './comp8';
|
|
15
15
|
import comp9 from './comp9';
|
|
16
|
+
import comp16 from './comp16';
|
|
16
17
|
import compOpenWhenEmpty from './comp-openWhenEmpty';
|
|
17
18
|
import withOpenWhenEmptyAndConditions from './comp-with-conditions-and-openWhenEmpty';
|
|
18
19
|
import compWithCustomDefaultValue from './comp-with-custom-default-value';
|
|
19
20
|
import compTestEvents from './comp-test-events';
|
|
20
|
-
export { comp1, comp2, comp3, comp10, comp11, comp12, comp13, comp14, comp15, comp4, comp5, comp6, comp7, comp8, comp9, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };
|
|
21
|
+
export { comp1, comp2, comp3, comp10, comp11, comp12, comp13, comp14, comp15, comp4, comp5, comp6, comp7, comp8, comp9, comp16, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };
|
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.compTestEvents = exports.compWithCustomDefaultValue = exports.withOpenWhenEmptyAndConditions = exports.compOpenWhenEmpty = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp15 = exports.comp14 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
|
|
6
|
+
exports.compTestEvents = exports.compWithCustomDefaultValue = exports.withOpenWhenEmptyAndConditions = exports.compOpenWhenEmpty = exports.comp16 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp15 = exports.comp14 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
|
|
7
7
|
const comp1_1 = __importDefault(require("./comp1"));
|
|
8
8
|
exports.comp1 = comp1_1.default;
|
|
9
9
|
const comp2_1 = __importDefault(require("./comp2"));
|
|
@@ -34,6 +34,8 @@ const comp14_1 = __importDefault(require("./comp14"));
|
|
|
34
34
|
exports.comp14 = comp14_1.default;
|
|
35
35
|
const comp15_1 = __importDefault(require("./comp15"));
|
|
36
36
|
exports.comp15 = comp15_1.default;
|
|
37
|
+
const comp16_1 = __importDefault(require("./comp16"));
|
|
38
|
+
exports.comp16 = comp16_1.default;
|
|
37
39
|
const comp_with_conditions_and_openWhenEmpty_1 = __importDefault(require("./comp-with-conditions-and-openWhenEmpty"));
|
|
38
40
|
exports.withOpenWhenEmptyAndConditions = comp_with_conditions_and_openWhenEmpty_1.default;
|
|
39
41
|
const comp_openWhenEmpty_1 = __importDefault(require("./comp-openWhenEmpty"));
|
package/lib/mjs/CDN.d.ts
CHANGED
package/lib/mjs/CDN.js
CHANGED
package/lib/mjs/Webform.js
CHANGED
|
@@ -12,7 +12,6 @@ import { eachComponent } from "./utils/formUtils";
|
|
|
12
12
|
if (typeof window !== 'undefined' && typeof window.global === 'undefined') {
|
|
13
13
|
window.global = window;
|
|
14
14
|
}
|
|
15
|
-
import dragula from "dragula";
|
|
16
15
|
// Initialize the available forms.
|
|
17
16
|
Formio.forms = {};
|
|
18
17
|
// Allow people to register components.
|
|
@@ -286,7 +285,6 @@ export default class Webform extends NestedDataComponent {
|
|
|
286
285
|
// Ensure the root is set to this component.
|
|
287
286
|
this.root = this;
|
|
288
287
|
this.localRoot = this;
|
|
289
|
-
this.root.dragulaLib = dragula;
|
|
290
288
|
}
|
|
291
289
|
/* eslint-enable max-statements */
|
|
292
290
|
get language() {
|
|
@@ -830,6 +830,7 @@ declare class Component extends Element {
|
|
|
830
830
|
quill: any;
|
|
831
831
|
get shouldSanitizeValue(): boolean;
|
|
832
832
|
addAce(element: any, settings: any, onChange: any): any;
|
|
833
|
+
getDragula(): Promise<any>;
|
|
833
834
|
get tree(): any;
|
|
834
835
|
/**
|
|
835
836
|
* The empty value for this component.
|
|
@@ -2351,6 +2351,13 @@ export default class Component extends Element {
|
|
|
2351
2351
|
return editor;
|
|
2352
2352
|
});
|
|
2353
2353
|
}
|
|
2354
|
+
async getDragula() {
|
|
2355
|
+
return new Promise((resolve) => {
|
|
2356
|
+
return Formio.requireLibrary('dragula', 'dragula', `${Formio.cdn.dragula}/dragula.js`, true, (ready) => {
|
|
2357
|
+
return ready.then(resolve);
|
|
2358
|
+
});
|
|
2359
|
+
});
|
|
2360
|
+
}
|
|
2354
2361
|
get tree() {
|
|
2355
2362
|
return this.component.tree || false;
|
|
2356
2363
|
}
|
|
@@ -12,6 +12,7 @@ export default class DataGridComponent extends NestedArrayComponent {
|
|
|
12
12
|
tabIndex: number;
|
|
13
13
|
rows: any[] | undefined;
|
|
14
14
|
columns: any[] | undefined;
|
|
15
|
+
dragulaReady: Promise<any> | undefined;
|
|
15
16
|
visibleColumns: {} | undefined;
|
|
16
17
|
set dataValue(value: any[]);
|
|
17
18
|
get dataValue(): any[];
|
|
@@ -71,6 +72,7 @@ export default class DataGridComponent extends NestedArrayComponent {
|
|
|
71
72
|
*/
|
|
72
73
|
reorderValues(valuesArr: any, oldPosition: number, newPosition: number, movedBelow: boolean | any): void;
|
|
73
74
|
onReorder(element: any, _target: any, _source: any, sibling: any): void;
|
|
75
|
+
onCloned(el: any, original: any): void;
|
|
74
76
|
focusOnNewRowElement(row: any): void;
|
|
75
77
|
addRow(): void;
|
|
76
78
|
updateComponentsRowIndex(components: any, rowIndex: any): void;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import _ from 'lodash';
|
|
2
2
|
import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';
|
|
3
3
|
import { fastCloneDeep, getFocusableElements } from '../../utils/utils';
|
|
4
|
-
import
|
|
5
|
-
import dragula from 'dragula';
|
|
4
|
+
import Components from '../Components';
|
|
6
5
|
export default class DataGridComponent extends NestedArrayComponent {
|
|
7
6
|
static schema(...extend) {
|
|
8
7
|
return NestedArrayComponent.schema({
|
|
@@ -39,6 +38,9 @@ export default class DataGridComponent extends NestedArrayComponent {
|
|
|
39
38
|
if (this.initRows || !_.isEqual(this.dataValue, this.emptyValue)) {
|
|
40
39
|
this.createRows(true);
|
|
41
40
|
}
|
|
41
|
+
if (this.allowReorder) {
|
|
42
|
+
this.dragulaReady = this.getDragula();
|
|
43
|
+
}
|
|
42
44
|
this.visibleColumns = {};
|
|
43
45
|
this.prevHasAddButton = this.hasAddButton();
|
|
44
46
|
this.checkColumns();
|
|
@@ -279,31 +281,25 @@ export default class DataGridComponent extends NestedArrayComponent {
|
|
|
279
281
|
this.refs[`${this.datagridKey}-row`].forEach((row, index) => {
|
|
280
282
|
row.dragInfo = { index };
|
|
281
283
|
});
|
|
282
|
-
this.dragula
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
}
|
|
284
|
+
this.dragulaReady.then((dragula) => {
|
|
285
|
+
// The drop event may call redraw twice which calls attach twice and because this block of code is asynchronous
|
|
286
|
+
// BOTH redraws may be called before this block of code runs (which causes this block of code to run twice sequentially).
|
|
287
|
+
// This causes two dragula() calls on the same container which breaks dragula. To fix this the return value must
|
|
288
|
+
// be saved in this.dragula and have its container contents reset if it exists
|
|
289
|
+
if (this.dragula && this.dragula.containers) {
|
|
290
|
+
this.dragula.containers = [];
|
|
290
291
|
}
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
if (
|
|
297
|
-
|
|
292
|
+
this.dragula = dragula([this.refs[`${this.datagridKey}-tbody`]], {
|
|
293
|
+
moves: (_draggedElement, _oldParent, clickedElement) => {
|
|
294
|
+
const clickedElementKey = clickedElement.getAttribute('data-key');
|
|
295
|
+
const oldParentKey = _oldParent.getAttribute('data-key');
|
|
296
|
+
//Check if the clicked button belongs to that container, if false, it belongs to the nested container
|
|
297
|
+
if (oldParentKey === clickedElementKey) {
|
|
298
|
+
return clickedElement.classList.contains('formio-drag-button');
|
|
298
299
|
}
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
}, '');
|
|
303
|
-
el.children[index].style.cssText = cssText;
|
|
304
|
-
}
|
|
305
|
-
});
|
|
306
|
-
}
|
|
300
|
+
}
|
|
301
|
+
}).on('drop', this.onReorder.bind(this))
|
|
302
|
+
.on('cloned', this.onCloned.bind(this));
|
|
307
303
|
});
|
|
308
304
|
}
|
|
309
305
|
this.refs[`${this.datagridKey}-addRow`].forEach((addButton) => {
|
|
@@ -370,6 +366,22 @@ export default class DataGridComponent extends NestedArrayComponent {
|
|
|
370
366
|
this.setValue(dataValue, { isReordered: true });
|
|
371
367
|
this.rebuild();
|
|
372
368
|
}
|
|
369
|
+
onCloned(el, original) {
|
|
370
|
+
if (el && el.children && original && original.children) {
|
|
371
|
+
_.each(original.children, (child, index) => {
|
|
372
|
+
const styles = getComputedStyle(child, null);
|
|
373
|
+
if (styles.cssText !== '') {
|
|
374
|
+
el.children[index].style.cssText = styles.cssText;
|
|
375
|
+
}
|
|
376
|
+
else {
|
|
377
|
+
const cssText = Object.values(styles).reduce((css, propertyName) => {
|
|
378
|
+
return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;
|
|
379
|
+
}, '');
|
|
380
|
+
el.children[index].style.cssText = cssText;
|
|
381
|
+
}
|
|
382
|
+
});
|
|
383
|
+
}
|
|
384
|
+
}
|
|
373
385
|
focusOnNewRowElement(row) {
|
|
374
386
|
Object.keys(row).find((key) => {
|
|
375
387
|
const element = row[key].element;
|
|
@@ -3,7 +3,7 @@ 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
|
|
6
|
+
import Components from '../Components';
|
|
7
7
|
export default class DataMapComponent extends DataGridComponent {
|
|
8
8
|
static schema(...extend) {
|
|
9
9
|
return Component.schema({
|
|
@@ -1089,7 +1089,8 @@ export default class EditGridComponent extends NestedArrayComponent {
|
|
|
1089
1089
|
return false;
|
|
1090
1090
|
}
|
|
1091
1091
|
else if (rowsEditing && this.saveEditMode && !this.component.openWhenEmpty) {
|
|
1092
|
-
this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);
|
|
1092
|
+
this._errors = this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);
|
|
1093
|
+
errors.push(...this._errors);
|
|
1093
1094
|
return false;
|
|
1094
1095
|
}
|
|
1095
1096
|
const message = this.invalid || this.invalidMessage(data, dirty, false, row);
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
declare namespace _default {
|
|
2
|
+
let type: string;
|
|
3
|
+
let display: string;
|
|
4
|
+
let components: ({
|
|
5
|
+
title: string;
|
|
6
|
+
breadcrumbClickable: boolean;
|
|
7
|
+
buttonSettings: {
|
|
8
|
+
previous: boolean;
|
|
9
|
+
cancel: boolean;
|
|
10
|
+
next: boolean;
|
|
11
|
+
};
|
|
12
|
+
collapsible: boolean;
|
|
13
|
+
tableView: boolean;
|
|
14
|
+
key: string;
|
|
15
|
+
type: string;
|
|
16
|
+
label: string;
|
|
17
|
+
input: boolean;
|
|
18
|
+
components: {
|
|
19
|
+
label: string;
|
|
20
|
+
tableView: boolean;
|
|
21
|
+
rowDrafts: boolean;
|
|
22
|
+
key: string;
|
|
23
|
+
type: string;
|
|
24
|
+
input: boolean;
|
|
25
|
+
components: {
|
|
26
|
+
label: string;
|
|
27
|
+
tableView: boolean;
|
|
28
|
+
key: string;
|
|
29
|
+
type: string;
|
|
30
|
+
input: boolean;
|
|
31
|
+
alwaysEnabled: boolean;
|
|
32
|
+
}[];
|
|
33
|
+
alwaysEnabled: boolean;
|
|
34
|
+
}[];
|
|
35
|
+
alwaysEnabled: boolean;
|
|
36
|
+
showValidations?: undefined;
|
|
37
|
+
} | {
|
|
38
|
+
label: string;
|
|
39
|
+
showValidations: boolean;
|
|
40
|
+
alwaysEnabled: boolean;
|
|
41
|
+
tableView: boolean;
|
|
42
|
+
key: string;
|
|
43
|
+
type: string;
|
|
44
|
+
input: boolean;
|
|
45
|
+
title?: undefined;
|
|
46
|
+
breadcrumbClickable?: undefined;
|
|
47
|
+
buttonSettings?: undefined;
|
|
48
|
+
collapsible?: undefined;
|
|
49
|
+
components?: undefined;
|
|
50
|
+
})[];
|
|
51
|
+
}
|
|
52
|
+
export default _default;
|