@formio/js 5.0.0-dev.5718.37a9ce7 → 5.0.0-dev.5719.d2d4a61

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.
@@ -1082,7 +1082,6 @@ class WebformBuilder extends Component_1.default {
1082
1082
  lodash_1.default.pull(newComp.validators, 'required');
1083
1083
  parentComponent.tabs[tabIndex].splice(index, 1, newComp);
1084
1084
  newComp.checkValidity = () => true;
1085
- newComp.checkComponentValidity = () => true;
1086
1085
  newComp.build(defaultValueComponent.element);
1087
1086
  }
1088
1087
  }
@@ -12,6 +12,8 @@ export default class NestedArrayComponent extends NestedDataComponent {
12
12
  hasAddButton(): any;
13
13
  getComponent(path: any, fn: any, originalPath: any): any;
14
14
  everyComponent(fn: any, rowIndex: any, options?: {}): void;
15
+ _getEmailTableHeader(options: any): string;
16
+ _getEmailTableBody(options: any): string;
15
17
  getComponents(rowIndex: any): any;
16
18
  }
17
19
  import NestedDataComponent from '../nesteddata/NestedDataComponent';
@@ -149,39 +149,60 @@ class NestedArrayComponent extends NestedDataComponent_1.default {
149
149
  }
150
150
  });
151
151
  }
152
+ _getEmailTableHeader(options) {
153
+ let row = '';
154
+ const getHeaderCell = (component) => {
155
+ if (!component.isInputComponent || !component.visible || component.skipInEmail) {
156
+ return '';
157
+ }
158
+ const label = component.label || component.key;
159
+ return `<th style="padding: 5px 10px;">${label}</th>`;
160
+ };
161
+ const components = this.getComponents(0);
162
+ for (const component of components) {
163
+ if (component.isInputComponent) {
164
+ row += getHeaderCell(component);
165
+ }
166
+ else if ((0, utils_1.isLayoutComponent)(component) && typeof component.everyComponent === 'function') {
167
+ component.everyComponent((comp) => {
168
+ row += getHeaderCell(comp);
169
+ }, options);
170
+ }
171
+ }
172
+ return `<thead><tr>${row}</tr></thead>`;
173
+ }
174
+ _getEmailTableBody(options) {
175
+ const getBodyCell = (component) => {
176
+ if (!component.isInputComponent || !component.visible || component.skipInEmail) {
177
+ return '';
178
+ }
179
+ return `<td style="padding: 5px 10px;">${component.getView(component.dataValue, options)}</td>`;
180
+ };
181
+ const rows = [];
182
+ for (const { components } of this.iteratableRows) {
183
+ let row = '';
184
+ for (const component of components) {
185
+ if (component.isInputComponent) {
186
+ row += getBodyCell(component);
187
+ }
188
+ else if ((0, utils_1.isLayoutComponent)(component) && typeof component.everyComponent === 'function') {
189
+ component.everyComponent((comp) => {
190
+ row += getBodyCell(comp);
191
+ }, options);
192
+ }
193
+ }
194
+ rows.push(`<tr>${row}</tr>`);
195
+ }
196
+ return `<tbody>${rows.join('')}</tbody>`;
197
+ }
152
198
  getValueAsString(value, options) {
153
- var _a;
154
199
  if (options === null || options === void 0 ? void 0 : options.email) {
155
- let result = (`
200
+ return `
156
201
  <table border="1" style="width:100%">
157
- <thead>
158
- <tr>
159
- `);
160
- (_a = this.component.components) === null || _a === void 0 ? void 0 : _a.forEach((component) => {
161
- const label = component.label || component.key;
162
- result += `<th style="padding: 5px 10px;">${label}</th>`;
163
- });
164
- result += (`
165
- </tr>
166
- </thead>
167
- <tbody>
168
- `);
169
- this.iteratableRows.forEach(({ components }) => {
170
- result += '<tr>';
171
- lodash_1.default.each(components, (component) => {
172
- result += '<td style="padding:5px 10px;">';
173
- if (component.isInputComponent && component.visible && !component.skipInEmail) {
174
- result += component.getView(component.dataValue, options);
175
- }
176
- result += '</td>';
177
- });
178
- result += '</tr>';
179
- });
180
- result += (`
181
- </tbody>
202
+ ${this._getEmailTableHeader(options)}
203
+ ${this._getEmailTableBody(options)}
182
204
  </table>
183
- `);
184
- return result;
205
+ `;
185
206
  }
186
207
  if (!value || !value.length) {
187
208
  return '';
@@ -0,0 +1,80 @@
1
+ declare namespace _default {
2
+ let type: string;
3
+ let display: string;
4
+ let components: ({
5
+ label: string;
6
+ tableView: boolean;
7
+ rowDrafts: boolean;
8
+ key: string;
9
+ type: string;
10
+ input: boolean;
11
+ components: {
12
+ collapsible: boolean;
13
+ key: string;
14
+ type: string;
15
+ label: string;
16
+ input: boolean;
17
+ tableView: boolean;
18
+ components: {
19
+ label: string;
20
+ columns: ({
21
+ components: {
22
+ label: string;
23
+ optionsLabelPosition: string;
24
+ inline: boolean;
25
+ tableView: boolean;
26
+ values: {
27
+ label: string;
28
+ value: string;
29
+ shortcut: string;
30
+ }[];
31
+ key: string;
32
+ type: string;
33
+ input: boolean;
34
+ }[];
35
+ width: number;
36
+ offset: number;
37
+ push: number;
38
+ pull: number;
39
+ size: string;
40
+ currentWidth: number;
41
+ } | {
42
+ components: {
43
+ label: string;
44
+ applyMaskOn: string;
45
+ autoExpand: boolean;
46
+ tableView: boolean;
47
+ key: string;
48
+ conditional: {
49
+ show: boolean;
50
+ conjunction: string;
51
+ };
52
+ type: string;
53
+ input: boolean;
54
+ }[];
55
+ width: number;
56
+ offset: number;
57
+ push: number;
58
+ pull: number;
59
+ size: string;
60
+ currentWidth: number;
61
+ })[];
62
+ key: string;
63
+ type: string;
64
+ input: boolean;
65
+ tableView: boolean;
66
+ }[];
67
+ }[];
68
+ disableOnInvalid?: undefined;
69
+ } | {
70
+ type: string;
71
+ label: string;
72
+ key: string;
73
+ disableOnInvalid: boolean;
74
+ input: boolean;
75
+ tableView: boolean;
76
+ rowDrafts?: undefined;
77
+ components?: undefined;
78
+ })[];
79
+ }
80
+ export default _default;
@@ -0,0 +1,99 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.default = {
4
+ type: 'form',
5
+ display: 'form',
6
+ components: [
7
+ {
8
+ label: 'Edit Grid',
9
+ tableView: false,
10
+ rowDrafts: false,
11
+ key: 'editGrid',
12
+ type: 'editgrid',
13
+ input: true,
14
+ components: [
15
+ {
16
+ collapsible: false,
17
+ key: 'panel',
18
+ type: 'panel',
19
+ label: 'Panel',
20
+ input: false,
21
+ tableView: false,
22
+ components: [
23
+ {
24
+ label: 'Columns',
25
+ columns: [
26
+ {
27
+ components: [
28
+ {
29
+ label: 'Radio',
30
+ optionsLabelPosition: 'right',
31
+ inline: false,
32
+ tableView: true,
33
+ values: [
34
+ {
35
+ label: 'yes',
36
+ value: 'yes',
37
+ shortcut: ''
38
+ },
39
+ {
40
+ label: 'no',
41
+ value: 'no',
42
+ shortcut: ''
43
+ }
44
+ ],
45
+ key: 'radio',
46
+ type: 'radio',
47
+ input: true
48
+ }
49
+ ],
50
+ width: 6,
51
+ offset: 0,
52
+ push: 0,
53
+ pull: 0,
54
+ size: 'md',
55
+ currentWidth: 6
56
+ },
57
+ {
58
+ components: [
59
+ {
60
+ label: 'Text Area',
61
+ applyMaskOn: 'change',
62
+ autoExpand: false,
63
+ tableView: true,
64
+ key: 'textArea',
65
+ conditional: {
66
+ show: true,
67
+ conjunction: 'all'
68
+ },
69
+ type: 'textarea',
70
+ input: true
71
+ }
72
+ ],
73
+ width: 6,
74
+ offset: 0,
75
+ push: 0,
76
+ pull: 0,
77
+ size: 'md',
78
+ currentWidth: 6
79
+ }
80
+ ],
81
+ key: 'columns',
82
+ type: 'columns',
83
+ input: false,
84
+ tableView: false
85
+ }
86
+ ]
87
+ }
88
+ ]
89
+ },
90
+ {
91
+ type: 'button',
92
+ label: 'Submit',
93
+ key: 'submit',
94
+ disableOnInvalid: true,
95
+ input: true,
96
+ tableView: false
97
+ }
98
+ ]
99
+ };
@@ -14,8 +14,9 @@ import comp7 from './comp7';
14
14
  import comp8 from './comp8';
15
15
  import comp9 from './comp9';
16
16
  import comp16 from './comp16';
17
+ import comp17 from './comp17';
17
18
  import compOpenWhenEmpty from './comp-openWhenEmpty';
18
19
  import withOpenWhenEmptyAndConditions from './comp-with-conditions-and-openWhenEmpty';
19
20
  import compWithCustomDefaultValue from './comp-with-custom-default-value';
20
21
  import compTestEvents from './comp-test-events';
21
- export { comp1, comp2, comp3, comp10, comp11, comp12, comp13, comp14, comp15, comp4, comp5, comp6, comp7, comp8, comp9, comp16, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };
22
+ export { comp1, comp2, comp3, comp10, comp11, comp12, comp13, comp14, comp15, comp4, comp5, comp6, comp7, comp8, comp9, comp16, comp17, 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.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;
6
+ exports.compTestEvents = exports.compWithCustomDefaultValue = exports.withOpenWhenEmptyAndConditions = exports.compOpenWhenEmpty = exports.comp17 = 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"));
@@ -36,6 +36,8 @@ const comp15_1 = __importDefault(require("./comp15"));
36
36
  exports.comp15 = comp15_1.default;
37
37
  const comp16_1 = __importDefault(require("./comp16"));
38
38
  exports.comp16 = comp16_1.default;
39
+ const comp17_1 = __importDefault(require("./comp17"));
40
+ exports.comp17 = comp17_1.default;
39
41
  const comp_with_conditions_and_openWhenEmpty_1 = __importDefault(require("./comp-with-conditions-and-openWhenEmpty"));
40
42
  exports.withOpenWhenEmptyAndConditions = comp_with_conditions_and_openWhenEmpty_1.default;
41
43
  const comp_openWhenEmpty_1 = __importDefault(require("./comp-openWhenEmpty"));
@@ -1066,7 +1066,6 @@ export default class WebformBuilder extends Component {
1066
1066
  _.pull(newComp.validators, 'required');
1067
1067
  parentComponent.tabs[tabIndex].splice(index, 1, newComp);
1068
1068
  newComp.checkValidity = () => true;
1069
- newComp.checkComponentValidity = () => true;
1070
1069
  newComp.build(defaultValueComponent.element);
1071
1070
  }
1072
1071
  }
@@ -12,6 +12,8 @@ export default class NestedArrayComponent extends NestedDataComponent {
12
12
  hasAddButton(): any;
13
13
  getComponent(path: any, fn: any, originalPath: any): any;
14
14
  everyComponent(fn: any, rowIndex: any, options?: {}): void;
15
+ _getEmailTableHeader(options: any): string;
16
+ _getEmailTableBody(options: any): string;
15
17
  getComponents(rowIndex: any): any;
16
18
  }
17
19
  import NestedDataComponent from '../nesteddata/NestedDataComponent';
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
  import _ from 'lodash';
3
- import { componentValueTypes, getStringFromComponentPath } from '../../../utils/utils';
3
+ import { componentValueTypes, getStringFromComponentPath, isLayoutComponent } from '../../../utils/utils';
4
4
  import Component from '../component/Component';
5
5
  import NestedDataComponent from '../nesteddata/NestedDataComponent';
6
6
  export default class NestedArrayComponent extends NestedDataComponent {
@@ -145,38 +145,60 @@ export default class NestedArrayComponent extends NestedDataComponent {
145
145
  }
146
146
  });
147
147
  }
148
+ _getEmailTableHeader(options) {
149
+ let row = '';
150
+ const getHeaderCell = (component) => {
151
+ if (!component.isInputComponent || !component.visible || component.skipInEmail) {
152
+ return '';
153
+ }
154
+ const label = component.label || component.key;
155
+ return `<th style="padding: 5px 10px;">${label}</th>`;
156
+ };
157
+ const components = this.getComponents(0);
158
+ for (const component of components) {
159
+ if (component.isInputComponent) {
160
+ row += getHeaderCell(component);
161
+ }
162
+ else if (isLayoutComponent(component) && typeof component.everyComponent === 'function') {
163
+ component.everyComponent((comp) => {
164
+ row += getHeaderCell(comp);
165
+ }, options);
166
+ }
167
+ }
168
+ return `<thead><tr>${row}</tr></thead>`;
169
+ }
170
+ _getEmailTableBody(options) {
171
+ const getBodyCell = (component) => {
172
+ if (!component.isInputComponent || !component.visible || component.skipInEmail) {
173
+ return '';
174
+ }
175
+ return `<td style="padding: 5px 10px;">${component.getView(component.dataValue, options)}</td>`;
176
+ };
177
+ const rows = [];
178
+ for (const { components } of this.iteratableRows) {
179
+ let row = '';
180
+ for (const component of components) {
181
+ if (component.isInputComponent) {
182
+ row += getBodyCell(component);
183
+ }
184
+ else if (isLayoutComponent(component) && typeof component.everyComponent === 'function') {
185
+ component.everyComponent((comp) => {
186
+ row += getBodyCell(comp);
187
+ }, options);
188
+ }
189
+ }
190
+ rows.push(`<tr>${row}</tr>`);
191
+ }
192
+ return `<tbody>${rows.join('')}</tbody>`;
193
+ }
148
194
  getValueAsString(value, options) {
149
195
  if (options?.email) {
150
- let result = (`
196
+ return `
151
197
  <table border="1" style="width:100%">
152
- <thead>
153
- <tr>
154
- `);
155
- this.component.components?.forEach((component) => {
156
- const label = component.label || component.key;
157
- result += `<th style="padding: 5px 10px;">${label}</th>`;
158
- });
159
- result += (`
160
- </tr>
161
- </thead>
162
- <tbody>
163
- `);
164
- this.iteratableRows.forEach(({ components }) => {
165
- result += '<tr>';
166
- _.each(components, (component) => {
167
- result += '<td style="padding:5px 10px;">';
168
- if (component.isInputComponent && component.visible && !component.skipInEmail) {
169
- result += component.getView(component.dataValue, options);
170
- }
171
- result += '</td>';
172
- });
173
- result += '</tr>';
174
- });
175
- result += (`
176
- </tbody>
198
+ ${this._getEmailTableHeader(options)}
199
+ ${this._getEmailTableBody(options)}
177
200
  </table>
178
- `);
179
- return result;
201
+ `;
180
202
  }
181
203
  if (!value || !value.length) {
182
204
  return '';
@@ -0,0 +1,80 @@
1
+ declare namespace _default {
2
+ let type: string;
3
+ let display: string;
4
+ let components: ({
5
+ label: string;
6
+ tableView: boolean;
7
+ rowDrafts: boolean;
8
+ key: string;
9
+ type: string;
10
+ input: boolean;
11
+ components: {
12
+ collapsible: boolean;
13
+ key: string;
14
+ type: string;
15
+ label: string;
16
+ input: boolean;
17
+ tableView: boolean;
18
+ components: {
19
+ label: string;
20
+ columns: ({
21
+ components: {
22
+ label: string;
23
+ optionsLabelPosition: string;
24
+ inline: boolean;
25
+ tableView: boolean;
26
+ values: {
27
+ label: string;
28
+ value: string;
29
+ shortcut: string;
30
+ }[];
31
+ key: string;
32
+ type: string;
33
+ input: boolean;
34
+ }[];
35
+ width: number;
36
+ offset: number;
37
+ push: number;
38
+ pull: number;
39
+ size: string;
40
+ currentWidth: number;
41
+ } | {
42
+ components: {
43
+ label: string;
44
+ applyMaskOn: string;
45
+ autoExpand: boolean;
46
+ tableView: boolean;
47
+ key: string;
48
+ conditional: {
49
+ show: boolean;
50
+ conjunction: string;
51
+ };
52
+ type: string;
53
+ input: boolean;
54
+ }[];
55
+ width: number;
56
+ offset: number;
57
+ push: number;
58
+ pull: number;
59
+ size: string;
60
+ currentWidth: number;
61
+ })[];
62
+ key: string;
63
+ type: string;
64
+ input: boolean;
65
+ tableView: boolean;
66
+ }[];
67
+ }[];
68
+ disableOnInvalid?: undefined;
69
+ } | {
70
+ type: string;
71
+ label: string;
72
+ key: string;
73
+ disableOnInvalid: boolean;
74
+ input: boolean;
75
+ tableView: boolean;
76
+ rowDrafts?: undefined;
77
+ components?: undefined;
78
+ })[];
79
+ }
80
+ export default _default;
@@ -0,0 +1,97 @@
1
+ export default {
2
+ type: 'form',
3
+ display: 'form',
4
+ components: [
5
+ {
6
+ label: 'Edit Grid',
7
+ tableView: false,
8
+ rowDrafts: false,
9
+ key: 'editGrid',
10
+ type: 'editgrid',
11
+ input: true,
12
+ components: [
13
+ {
14
+ collapsible: false,
15
+ key: 'panel',
16
+ type: 'panel',
17
+ label: 'Panel',
18
+ input: false,
19
+ tableView: false,
20
+ components: [
21
+ {
22
+ label: 'Columns',
23
+ columns: [
24
+ {
25
+ components: [
26
+ {
27
+ label: 'Radio',
28
+ optionsLabelPosition: 'right',
29
+ inline: false,
30
+ tableView: true,
31
+ values: [
32
+ {
33
+ label: 'yes',
34
+ value: 'yes',
35
+ shortcut: ''
36
+ },
37
+ {
38
+ label: 'no',
39
+ value: 'no',
40
+ shortcut: ''
41
+ }
42
+ ],
43
+ key: 'radio',
44
+ type: 'radio',
45
+ input: true
46
+ }
47
+ ],
48
+ width: 6,
49
+ offset: 0,
50
+ push: 0,
51
+ pull: 0,
52
+ size: 'md',
53
+ currentWidth: 6
54
+ },
55
+ {
56
+ components: [
57
+ {
58
+ label: 'Text Area',
59
+ applyMaskOn: 'change',
60
+ autoExpand: false,
61
+ tableView: true,
62
+ key: 'textArea',
63
+ conditional: {
64
+ show: true,
65
+ conjunction: 'all'
66
+ },
67
+ type: 'textarea',
68
+ input: true
69
+ }
70
+ ],
71
+ width: 6,
72
+ offset: 0,
73
+ push: 0,
74
+ pull: 0,
75
+ size: 'md',
76
+ currentWidth: 6
77
+ }
78
+ ],
79
+ key: 'columns',
80
+ type: 'columns',
81
+ input: false,
82
+ tableView: false
83
+ }
84
+ ]
85
+ }
86
+ ]
87
+ },
88
+ {
89
+ type: 'button',
90
+ label: 'Submit',
91
+ key: 'submit',
92
+ disableOnInvalid: true,
93
+ input: true,
94
+ tableView: false
95
+ }
96
+ ]
97
+ };
@@ -14,8 +14,9 @@ import comp7 from './comp7';
14
14
  import comp8 from './comp8';
15
15
  import comp9 from './comp9';
16
16
  import comp16 from './comp16';
17
+ import comp17 from './comp17';
17
18
  import compOpenWhenEmpty from './comp-openWhenEmpty';
18
19
  import withOpenWhenEmptyAndConditions from './comp-with-conditions-and-openWhenEmpty';
19
20
  import compWithCustomDefaultValue from './comp-with-custom-default-value';
20
21
  import compTestEvents from './comp-test-events';
21
- export { comp1, comp2, comp3, comp10, comp11, comp12, comp13, comp14, comp15, comp4, comp5, comp6, comp7, comp8, comp9, comp16, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };
22
+ export { comp1, comp2, comp3, comp10, comp11, comp12, comp13, comp14, comp15, comp4, comp5, comp6, comp7, comp8, comp9, comp16, comp17, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };
@@ -14,8 +14,9 @@ import comp13 from './comp13';
14
14
  import comp14 from './comp14';
15
15
  import comp15 from './comp15';
16
16
  import comp16 from './comp16';
17
+ import comp17 from './comp17';
17
18
  import withOpenWhenEmptyAndConditions from './comp-with-conditions-and-openWhenEmpty';
18
19
  import compOpenWhenEmpty from './comp-openWhenEmpty';
19
20
  import compWithCustomDefaultValue from './comp-with-custom-default-value';
20
21
  import compTestEvents from './comp-test-events';
21
- export { comp1, comp2, comp3, comp10, comp11, comp12, comp13, comp14, comp15, comp4, comp5, comp6, comp7, comp8, comp9, comp16, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };
22
+ export { comp1, comp2, comp3, comp10, comp11, comp12, comp13, comp14, comp15, comp4, comp5, comp6, comp7, comp8, comp9, comp16, comp17, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@formio/js",
3
- "version": "5.0.0-dev.5718.37a9ce7",
3
+ "version": "5.0.0-dev.5719.d2d4a61",
4
4
  "description": "JavaScript powered Forms with JSON Form Builder",
5
5
  "main": "lib/cjs/index.js",
6
6
  "exports": {