@formio/js 5.0.0-dev.5672.279701a → 5.0.0-dev.5675.508790e

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.
Files changed (31) hide show
  1. package/dist/formio.form.js +6 -6
  2. package/dist/formio.form.min.js +1 -1
  3. package/dist/formio.full.js +6 -6
  4. package/dist/formio.full.min.js +1 -1
  5. package/lib/cjs/Webform.d.ts +1 -1
  6. package/lib/cjs/Webform.js +4 -2
  7. package/lib/cjs/components/_classes/component/Component.d.ts +2 -2
  8. package/lib/cjs/components/_classes/component/Component.js +2 -2
  9. package/lib/cjs/components/_classes/input/Input.js +23 -1
  10. package/lib/cjs/components/form/Form.d.ts +1 -1
  11. package/lib/cjs/components/form/Form.js +1 -1
  12. package/lib/cjs/components/number/Number.js +1 -1
  13. package/lib/cjs/components/number/fixtures/comp8.d.ts +32 -0
  14. package/lib/cjs/components/number/fixtures/comp8.js +28 -0
  15. package/lib/cjs/components/number/fixtures/index.d.ts +2 -1
  16. package/lib/cjs/components/number/fixtures/index.js +3 -1
  17. package/lib/cjs/components/select/Select.js +1 -2
  18. package/lib/mjs/Webform.d.ts +1 -1
  19. package/lib/mjs/Webform.js +4 -2
  20. package/lib/mjs/components/_classes/component/Component.d.ts +2 -2
  21. package/lib/mjs/components/_classes/component/Component.js +2 -2
  22. package/lib/mjs/components/_classes/input/Input.js +22 -1
  23. package/lib/mjs/components/form/Form.d.ts +1 -1
  24. package/lib/mjs/components/form/Form.js +1 -1
  25. package/lib/mjs/components/number/Number.js +1 -1
  26. package/lib/mjs/components/number/fixtures/comp8.d.ts +32 -0
  27. package/lib/mjs/components/number/fixtures/comp8.js +26 -0
  28. package/lib/mjs/components/number/fixtures/index.d.ts +2 -1
  29. package/lib/mjs/components/number/fixtures/index.js +2 -1
  30. package/lib/mjs/components/select/Select.js +1 -2
  31. package/package.json +1 -1
@@ -334,7 +334,7 @@ declare class Webform extends NestedDataComponent {
334
334
  * Sets the submission value
335
335
  * @param {object|null|undefined} submission - The submission to set.
336
336
  * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
337
- * @return {void}
337
+ * @returns {void}
338
338
  */
339
339
  onSetSubmission(submission: object | null | undefined, flags?: object | null | undefined): void;
340
340
  /**
@@ -702,7 +702,7 @@ class Webform extends NestedDataComponent_1.default {
702
702
  * Sets the submission value
703
703
  * @param {object|null|undefined} submission - The submission to set.
704
704
  * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
705
- * @return {void}
705
+ * @returns {void}
706
706
  */
707
707
  onSetSubmission(submission, flags = {}) {
708
708
  this.submissionSet = true;
@@ -882,7 +882,9 @@ class Webform extends NestedDataComponent_1.default {
882
882
  this.addComponents();
883
883
  this.on("submitButton", (options) => {
884
884
  this.submit(false, options).catch((e) => {
885
- options.instance.loading = false;
885
+ if (options === null || options === void 0 ? void 0 : options.instance) {
886
+ options.instance.loading = false;
887
+ }
886
888
  return e !== false && e !== undefined && console.log(e);
887
889
  });
888
890
  }, true);
@@ -346,7 +346,7 @@ declare class Component extends Element {
346
346
  /**
347
347
  * Renders a modal preview template and returns the markup as a string
348
348
  * @param {object|null|undefined} ctx - The rendering context
349
- * @return {string} - The modal preview markup
349
+ * @returns {string} - The modal preview markup
350
350
  */
351
351
  renderModalPreview(ctx: object | null | undefined): string;
352
352
  /**
@@ -372,7 +372,7 @@ declare class Component extends Element {
372
372
  * Creates the tooltip instance using tippy.js and returns it
373
373
  * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip
374
374
  * @param {object|null|undefined} settings - tippy.js options
375
- * @return {import('tippy.js').Tippy} - tippy.js instance
375
+ * @returns {import('tippy.js').Tippy} - tippy.js instance
376
376
  */
377
377
  createTooltip(tooltipEl: HTMLElement, settings?: object | null | undefined): import('tippy.js').Tippy;
378
378
  /**
@@ -1049,7 +1049,7 @@ class Component extends Element_1.default {
1049
1049
  /**
1050
1050
  * Renders a modal preview template and returns the markup as a string
1051
1051
  * @param {object|null|undefined} ctx - The rendering context
1052
- * @return {string} - The modal preview markup
1052
+ * @returns {string} - The modal preview markup
1053
1053
  */
1054
1054
  renderModalPreview(ctx) {
1055
1055
  return this.renderTemplate('modalPreview', ctx || {});
@@ -1118,7 +1118,7 @@ class Component extends Element_1.default {
1118
1118
  * Creates the tooltip instance using tippy.js and returns it
1119
1119
  * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip
1120
1120
  * @param {object|null|undefined} settings - tippy.js options
1121
- * @return {import('tippy.js').Tippy} - tippy.js instance
1121
+ * @returns {import('tippy.js').Tippy} - tippy.js instance
1122
1122
  */
1123
1123
  createTooltip(tooltipEl, settings = {}) {
1124
1124
  const tooltipAttribute = tooltipEl.getAttribute('data-tooltip');
@@ -234,11 +234,33 @@ class Input extends Multivalue_1.default {
234
234
  this.addFocusBlurEvents(element);
235
235
  if (this.options.submitOnEnter) {
236
236
  this.addEventListener(element, 'keypress', (event) => {
237
+ var _a;
237
238
  const key = event.keyCode || event.which;
238
239
  if (key === 13) {
239
240
  event.preventDefault();
240
241
  event.stopPropagation();
241
- this.emit('submitButton');
242
+ let submitButton = null;
243
+ if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.everyComponent) {
244
+ this.root.everyComponent((component) => {
245
+ if ((component === null || component === void 0 ? void 0 : component.component.type) === 'button' &&
246
+ (component === null || component === void 0 ? void 0 : component.component.action) === 'submit') {
247
+ submitButton = component;
248
+ return false;
249
+ }
250
+ });
251
+ }
252
+ const options = {};
253
+ if (submitButton) {
254
+ options.instance = submitButton;
255
+ options.component = submitButton.component;
256
+ options.noValidate = this.component.state === 'draft';
257
+ options.state = this.component.state || 'submitted';
258
+ submitButton.loading = true;
259
+ this.emit('submitButton', options);
260
+ }
261
+ else {
262
+ this.emit('submitButton', options);
263
+ }
242
264
  }
243
265
  });
244
266
  }
@@ -94,7 +94,7 @@ export default class FormComponent extends Component {
94
94
  * Sets the subform value
95
95
  * @param {object|null|undefined} submission - The submission to set.
96
96
  * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
97
- * @return {void}
97
+ * @returns {void}
98
98
  */
99
99
  onSetSubFormValue(submission: object | null | undefined, flags: object | null | undefined): void;
100
100
  areAllComponentsEmpty(data: any): boolean;
@@ -656,7 +656,7 @@ class FormComponent extends Component_1.default {
656
656
  * Sets the subform value
657
657
  * @param {object|null|undefined} submission - The submission to set.
658
658
  * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
659
- * @return {void}
659
+ * @returns {void}
660
660
  */
661
661
  onSetSubFormValue(submission, flags) {
662
662
  this.subForm.setValue(submission, flags);
@@ -48,7 +48,7 @@ class NumberComponent extends Input_1.default {
48
48
  var _a, _b;
49
49
  super(...args);
50
50
  const separators = (0, utils_1.getNumberSeparators)(this.options.language || navigator.language);
51
- this.decimalSeparator = this.options.decimalSeparator = this.options.decimalSeparator
51
+ this.decimalSeparator = this.options.decimalSeparator = this.component.decimalSymbol || this.options.decimalSeparator
52
52
  || ((_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.decimalSeparator)
53
53
  || separators.decimalSeparator;
54
54
  if (this.component.delimiter) {
@@ -0,0 +1,32 @@
1
+ declare namespace _default {
2
+ let components: ({
3
+ label: string;
4
+ applyMaskOn: string;
5
+ mask: boolean;
6
+ tableView: boolean;
7
+ delimiter: boolean;
8
+ requireDecimal: boolean;
9
+ inputFormat: string;
10
+ truncateMultipleSpaces: boolean;
11
+ key: string;
12
+ type: string;
13
+ input: boolean;
14
+ decimalSymbol: string;
15
+ disableOnInvalid?: undefined;
16
+ } | {
17
+ type: string;
18
+ label: string;
19
+ key: string;
20
+ disableOnInvalid: boolean;
21
+ input: boolean;
22
+ tableView: boolean;
23
+ applyMaskOn?: undefined;
24
+ mask?: undefined;
25
+ delimiter?: undefined;
26
+ requireDecimal?: undefined;
27
+ inputFormat?: undefined;
28
+ truncateMultipleSpaces?: undefined;
29
+ decimalSymbol?: undefined;
30
+ })[];
31
+ }
32
+ export default _default;
@@ -0,0 +1,28 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.default = {
4
+ components: [
5
+ {
6
+ "label": "Number",
7
+ "applyMaskOn": "change",
8
+ "mask": false,
9
+ "tableView": false,
10
+ "delimiter": false,
11
+ "requireDecimal": false,
12
+ "inputFormat": "plain",
13
+ "truncateMultipleSpaces": false,
14
+ "key": "number",
15
+ "type": "number",
16
+ "input": true,
17
+ "decimalSymbol": "-"
18
+ },
19
+ {
20
+ "type": "button",
21
+ "label": "Submit",
22
+ "key": "submit",
23
+ "disableOnInvalid": true,
24
+ "input": true,
25
+ "tableView": false
26
+ }
27
+ ]
28
+ };
@@ -5,4 +5,5 @@ import comp4 from './comp4';
5
5
  import comp5 from './comp5';
6
6
  import comp6 from './comp6';
7
7
  import comp7 from './comp7';
8
- export { comp1, comp2, comp3, comp4, comp5, comp6, comp7 };
8
+ import comp8 from './comp8';
9
+ export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8 };
@@ -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.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
6
+ exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = 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"));
@@ -18,3 +18,5 @@ const comp6_1 = __importDefault(require("./comp6"));
18
18
  exports.comp6 = comp6_1.default;
19
19
  const comp7_1 = __importDefault(require("./comp7"));
20
20
  exports.comp7 = comp7_1.default;
21
+ const comp8_1 = __importDefault(require("./comp8"));
22
+ exports.comp8 = comp8_1.default;
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  const lodash_1 = __importDefault(require("lodash"));
7
7
  const Formio_1 = require("../../Formio");
8
8
  const ListComponent_1 = __importDefault(require("../_classes/list/ListComponent"));
9
- const Input_1 = __importDefault(require("../_classes/input/Input"));
10
9
  const Form_1 = __importDefault(require("../../Form"));
11
10
  const utils_1 = require("../../utils/utils");
12
11
  const ChoicesWrapper_1 = __importDefault(require("../../utils/ChoicesWrapper"));
@@ -834,7 +833,7 @@ class SelectComponent extends ListComponent_1.default {
834
833
  this.choices.containerOuter.element.setAttribute('tabIndex', '-1');
835
834
  this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus());
836
835
  }
837
- Input_1.default.prototype.addFocusBlurEvents.call(this, this.focusableElement);
836
+ this.addFocusBlurEvents(this.choices.input.element);
838
837
  if (this.itemsFromUrl && !this.component.noRefreshOnScroll) {
839
838
  this.scrollList = this.choices.choiceList.element;
840
839
  this.addEventListener(this.scrollList, 'scroll', () => this.onScroll());
@@ -334,7 +334,7 @@ declare class Webform extends NestedDataComponent {
334
334
  * Sets the submission value
335
335
  * @param {object|null|undefined} submission - The submission to set.
336
336
  * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
337
- * @return {void}
337
+ * @returns {void}
338
338
  */
339
339
  onSetSubmission(submission: object | null | undefined, flags?: object | null | undefined): void;
340
340
  /**
@@ -700,7 +700,7 @@ export default class Webform extends NestedDataComponent {
700
700
  * Sets the submission value
701
701
  * @param {object|null|undefined} submission - The submission to set.
702
702
  * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
703
- * @return {void}
703
+ * @returns {void}
704
704
  */
705
705
  onSetSubmission(submission, flags = {}) {
706
706
  this.submissionSet = true;
@@ -886,7 +886,9 @@ export default class Webform extends NestedDataComponent {
886
886
  this.addComponents();
887
887
  this.on("submitButton", (options) => {
888
888
  this.submit(false, options).catch((e) => {
889
- options.instance.loading = false;
889
+ if (options?.instance) {
890
+ options.instance.loading = false;
891
+ }
890
892
  return e !== false && e !== undefined && console.log(e);
891
893
  });
892
894
  }, true);
@@ -346,7 +346,7 @@ declare class Component extends Element {
346
346
  /**
347
347
  * Renders a modal preview template and returns the markup as a string
348
348
  * @param {object|null|undefined} ctx - The rendering context
349
- * @return {string} - The modal preview markup
349
+ * @returns {string} - The modal preview markup
350
350
  */
351
351
  renderModalPreview(ctx: object | null | undefined): string;
352
352
  /**
@@ -372,7 +372,7 @@ declare class Component extends Element {
372
372
  * Creates the tooltip instance using tippy.js and returns it
373
373
  * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip
374
374
  * @param {object|null|undefined} settings - tippy.js options
375
- * @return {import('tippy.js').Tippy} - tippy.js instance
375
+ * @returns {import('tippy.js').Tippy} - tippy.js instance
376
376
  */
377
377
  createTooltip(tooltipEl: HTMLElement, settings?: object | null | undefined): import('tippy.js').Tippy;
378
378
  /**
@@ -1016,7 +1016,7 @@ export default class Component extends Element {
1016
1016
  /**
1017
1017
  * Renders a modal preview template and returns the markup as a string
1018
1018
  * @param {object|null|undefined} ctx - The rendering context
1019
- * @return {string} - The modal preview markup
1019
+ * @returns {string} - The modal preview markup
1020
1020
  */
1021
1021
  renderModalPreview(ctx) {
1022
1022
  return this.renderTemplate('modalPreview', ctx || {});
@@ -1084,7 +1084,7 @@ export default class Component extends Element {
1084
1084
  * Creates the tooltip instance using tippy.js and returns it
1085
1085
  * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip
1086
1086
  * @param {object|null|undefined} settings - tippy.js options
1087
- * @return {import('tippy.js').Tippy} - tippy.js instance
1087
+ * @returns {import('tippy.js').Tippy} - tippy.js instance
1088
1088
  */
1089
1089
  createTooltip(tooltipEl, settings = {}) {
1090
1090
  const tooltipAttribute = tooltipEl.getAttribute('data-tooltip');
@@ -233,7 +233,28 @@ export default class Input extends Multivalue {
233
233
  if (key === 13) {
234
234
  event.preventDefault();
235
235
  event.stopPropagation();
236
- this.emit('submitButton');
236
+ let submitButton = null;
237
+ if (this.root?.everyComponent) {
238
+ this.root.everyComponent((component) => {
239
+ if (component?.component.type === 'button' &&
240
+ component?.component.action === 'submit') {
241
+ submitButton = component;
242
+ return false;
243
+ }
244
+ });
245
+ }
246
+ const options = {};
247
+ if (submitButton) {
248
+ options.instance = submitButton;
249
+ options.component = submitButton.component;
250
+ options.noValidate = this.component.state === 'draft';
251
+ options.state = this.component.state || 'submitted';
252
+ submitButton.loading = true;
253
+ this.emit('submitButton', options);
254
+ }
255
+ else {
256
+ this.emit('submitButton', options);
257
+ }
237
258
  }
238
259
  });
239
260
  }
@@ -94,7 +94,7 @@ export default class FormComponent extends Component {
94
94
  * Sets the subform value
95
95
  * @param {object|null|undefined} submission - The submission to set.
96
96
  * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
97
- * @return {void}
97
+ * @returns {void}
98
98
  */
99
99
  onSetSubFormValue(submission: object | null | undefined, flags: object | null | undefined): void;
100
100
  areAllComponentsEmpty(data: any): boolean;
@@ -646,7 +646,7 @@ export default class FormComponent extends Component {
646
646
  * Sets the subform value
647
647
  * @param {object|null|undefined} submission - The submission to set.
648
648
  * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
649
- * @return {void}
649
+ * @returns {void}
650
650
  */
651
651
  onSetSubFormValue(submission, flags) {
652
652
  this.subForm.setValue(submission, flags);
@@ -46,7 +46,7 @@ export default class NumberComponent extends Input {
46
46
  constructor(...args) {
47
47
  super(...args);
48
48
  const separators = getNumberSeparators(this.options.language || navigator.language);
49
- this.decimalSeparator = this.options.decimalSeparator = this.options.decimalSeparator
49
+ this.decimalSeparator = this.options.decimalSeparator = this.component.decimalSymbol || this.options.decimalSeparator
50
50
  || this.options.properties?.decimalSeparator
51
51
  || separators.decimalSeparator;
52
52
  if (this.component.delimiter) {
@@ -0,0 +1,32 @@
1
+ declare namespace _default {
2
+ let components: ({
3
+ label: string;
4
+ applyMaskOn: string;
5
+ mask: boolean;
6
+ tableView: boolean;
7
+ delimiter: boolean;
8
+ requireDecimal: boolean;
9
+ inputFormat: string;
10
+ truncateMultipleSpaces: boolean;
11
+ key: string;
12
+ type: string;
13
+ input: boolean;
14
+ decimalSymbol: string;
15
+ disableOnInvalid?: undefined;
16
+ } | {
17
+ type: string;
18
+ label: string;
19
+ key: string;
20
+ disableOnInvalid: boolean;
21
+ input: boolean;
22
+ tableView: boolean;
23
+ applyMaskOn?: undefined;
24
+ mask?: undefined;
25
+ delimiter?: undefined;
26
+ requireDecimal?: undefined;
27
+ inputFormat?: undefined;
28
+ truncateMultipleSpaces?: undefined;
29
+ decimalSymbol?: undefined;
30
+ })[];
31
+ }
32
+ export default _default;
@@ -0,0 +1,26 @@
1
+ export default {
2
+ components: [
3
+ {
4
+ "label": "Number",
5
+ "applyMaskOn": "change",
6
+ "mask": false,
7
+ "tableView": false,
8
+ "delimiter": false,
9
+ "requireDecimal": false,
10
+ "inputFormat": "plain",
11
+ "truncateMultipleSpaces": false,
12
+ "key": "number",
13
+ "type": "number",
14
+ "input": true,
15
+ "decimalSymbol": "-"
16
+ },
17
+ {
18
+ "type": "button",
19
+ "label": "Submit",
20
+ "key": "submit",
21
+ "disableOnInvalid": true,
22
+ "input": true,
23
+ "tableView": false
24
+ }
25
+ ]
26
+ };
@@ -5,4 +5,5 @@ import comp4 from './comp4';
5
5
  import comp5 from './comp5';
6
6
  import comp6 from './comp6';
7
7
  import comp7 from './comp7';
8
- export { comp1, comp2, comp3, comp4, comp5, comp6, comp7 };
8
+ import comp8 from './comp8';
9
+ export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8 };
@@ -5,4 +5,5 @@ import comp4 from './comp4';
5
5
  import comp5 from './comp5';
6
6
  import comp6 from './comp6';
7
7
  import comp7 from './comp7';
8
- export { comp1, comp2, comp3, comp4, comp5, comp6, comp7 };
8
+ import comp8 from './comp8';
9
+ export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8 };
@@ -1,7 +1,6 @@
1
1
  import _ from 'lodash';
2
2
  import { Formio } from '../../Formio';
3
3
  import ListComponent from '../_classes/list/ListComponent';
4
- import Input from '../_classes/input/Input';
5
4
  import Form from '../../Form';
6
5
  import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes, isSelectResourceWithObjectValue, removeHTML } from '../../utils/utils';
7
6
  import Choices from '../../utils/ChoicesWrapper';
@@ -863,7 +862,7 @@ export default class SelectComponent extends ListComponent {
863
862
  this.choices.containerOuter.element.setAttribute('tabIndex', '-1');
864
863
  this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus());
865
864
  }
866
- Input.prototype.addFocusBlurEvents.call(this, this.focusableElement);
865
+ this.addFocusBlurEvents(this.choices.input.element);
867
866
  if (this.itemsFromUrl && !this.component.noRefreshOnScroll) {
868
867
  this.scrollList = this.choices.choiceList.element;
869
868
  this.addEventListener(this.scrollList, 'scroll', () => this.onScroll());
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@formio/js",
3
- "version": "5.0.0-dev.5672.279701a",
3
+ "version": "5.0.0-dev.5675.508790e",
4
4
  "description": "JavaScript powered Forms with JSON Form Builder",
5
5
  "main": "lib/cjs/index.js",
6
6
  "exports": {