@formio/js 5.0.0-rc.21 → 5.0.0-rc.22

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 (46) hide show
  1. package/dist/formio.embed.min.js.LICENSE.txt +1 -1
  2. package/dist/formio.form.js +6 -6
  3. package/dist/formio.form.min.js +1 -1
  4. package/dist/formio.form.min.js.LICENSE.txt +1 -1
  5. package/dist/formio.full.js +6 -6
  6. package/dist/formio.full.min.js +1 -1
  7. package/dist/formio.full.min.js.LICENSE.txt +1 -1
  8. package/dist/formio.js +1 -1
  9. package/dist/formio.min.js +1 -1
  10. package/dist/formio.min.js.LICENSE.txt +1 -1
  11. package/dist/formio.utils.min.js.LICENSE.txt +1 -1
  12. package/lib/cjs/Element.js +5 -0
  13. package/lib/cjs/components/day/Day.js +4 -0
  14. package/lib/cjs/components/day/fixtures/comp5.d.ts +29 -0
  15. package/lib/cjs/components/day/fixtures/comp5.js +32 -0
  16. package/lib/cjs/components/day/fixtures/index.d.ts +2 -1
  17. package/lib/cjs/components/day/fixtures/index.js +3 -1
  18. package/lib/cjs/components/form/Form.js +2 -1
  19. package/lib/cjs/components/select/Select.js +2 -1
  20. package/lib/cjs/components/select/fixtures/comp19.d.ts +23 -0
  21. package/lib/cjs/components/select/fixtures/comp19.js +36 -0
  22. package/lib/cjs/components/select/fixtures/index.d.ts +2 -1
  23. package/lib/cjs/components/select/fixtures/index.js +3 -1
  24. package/lib/cjs/components/tags/Tags.js +2 -0
  25. package/lib/cjs/components/tags/fixtures/comp6.d.ts +17 -0
  26. package/lib/cjs/components/tags/fixtures/comp6.js +20 -0
  27. package/lib/cjs/components/tags/fixtures/index.d.ts +2 -1
  28. package/lib/cjs/components/tags/fixtures/index.js +3 -1
  29. package/lib/mjs/Element.js +5 -0
  30. package/lib/mjs/components/day/Day.js +4 -0
  31. package/lib/mjs/components/day/fixtures/comp5.d.ts +29 -0
  32. package/lib/mjs/components/day/fixtures/comp5.js +30 -0
  33. package/lib/mjs/components/day/fixtures/index.d.ts +2 -1
  34. package/lib/mjs/components/day/fixtures/index.js +2 -1
  35. package/lib/mjs/components/form/Form.js +2 -1
  36. package/lib/mjs/components/select/Select.js +2 -1
  37. package/lib/mjs/components/select/fixtures/comp19.d.ts +23 -0
  38. package/lib/mjs/components/select/fixtures/comp19.js +34 -0
  39. package/lib/mjs/components/select/fixtures/index.d.ts +2 -1
  40. package/lib/mjs/components/select/fixtures/index.js +2 -1
  41. package/lib/mjs/components/tags/Tags.js +2 -0
  42. package/lib/mjs/components/tags/fixtures/comp6.d.ts +17 -0
  43. package/lib/mjs/components/tags/fixtures/comp6.js +18 -0
  44. package/lib/mjs/components/tags/fixtures/index.d.ts +2 -1
  45. package/lib/mjs/components/tags/fixtures/index.js +2 -1
  46. package/package.json +1 -1
@@ -1,6 +1,6 @@
1
1
  /*! @license DOMPurify 3.0.5 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.0.5/LICENSE */
2
2
 
3
- /*! formiojs v5.0.0-rc.21 | https://unpkg.com/formiojs@5.0.0-rc.21/LICENSE.txt */
3
+ /*! formiojs v5.0.0-rc.22 | https://unpkg.com/formiojs@5.0.0-rc.22/LICENSE.txt */
4
4
 
5
5
  /**
6
6
  * @license
@@ -12,7 +12,7 @@
12
12
 
13
13
  /*! @license DOMPurify 3.0.5 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.0.5/LICENSE */
14
14
 
15
- /*! formiojs v5.0.0-rc.21 | https://unpkg.com/formiojs@5.0.0-rc.21/LICENSE.txt */
15
+ /*! formiojs v5.0.0-rc.22 | https://unpkg.com/formiojs@5.0.0-rc.22/LICENSE.txt */
16
16
 
17
17
  /**
18
18
  * @license
@@ -558,6 +558,11 @@ class Element {
558
558
  && !FormioUtils.Evaluator.templateSettings.interpolate.test(string)) {
559
559
  string = FormioUtils.translateHTMLTemplate(String(string), (value) => this.t(value));
560
560
  }
561
+ if (this.component.filter === string && !this.options.building) {
562
+ const evalContext = this.evalContext(data);
563
+ evalContext.data = lodash_1.default.mapValues(evalContext.data, (val) => lodash_1.default.isString(val) ? encodeURIComponent(val) : val);
564
+ return FormioUtils.interpolate(string, evalContext, options);
565
+ }
561
566
  return FormioUtils.interpolate(string, this.evalContext(data), options);
562
567
  }
563
568
  /**
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  const lodash_1 = __importDefault(require("lodash"));
7
7
  const moment_1 = __importDefault(require("moment"));
8
8
  const Field_1 = __importDefault(require("../_classes/field/Field"));
9
+ const Input_1 = __importDefault(require("../_classes/input/Input"));
9
10
  const utils_1 = require("../../utils/utils");
10
11
  class DayComponent extends Field_1.default {
11
12
  static schema(...extend) {
@@ -291,6 +292,9 @@ class DayComponent extends Field_1.default {
291
292
  this.addEventListener(this.refs.input, this.info.changeEvent, () => this.updateValue(null, {
292
293
  modified: true
293
294
  }));
295
+ [this.refs.day, this.refs.month, this.refs.year].forEach((element) => {
296
+ Input_1.default.prototype.addFocusBlurEvents.call(this, element);
297
+ });
294
298
  }
295
299
  this.setValue(this.dataValue);
296
300
  // Force the disabled state with getters and setters.
@@ -0,0 +1,29 @@
1
+ declare namespace _default {
2
+ const type: string;
3
+ const display: string;
4
+ const components: {
5
+ label: string;
6
+ hideInputLabels: boolean;
7
+ inputsLabelPosition: string;
8
+ useLocaleSettings: boolean;
9
+ tableView: boolean;
10
+ fields: {
11
+ day: {
12
+ hide: boolean;
13
+ required: boolean;
14
+ };
15
+ month: {
16
+ hide: boolean;
17
+ };
18
+ year: {
19
+ hide: boolean;
20
+ };
21
+ };
22
+ validateOn: string;
23
+ key: string;
24
+ type: string;
25
+ input: boolean;
26
+ defaultValue: string;
27
+ }[];
28
+ }
29
+ export default _default;
@@ -0,0 +1,32 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.default = {
4
+ type: 'form',
5
+ display: 'form',
6
+ components: [
7
+ {
8
+ label: 'Day',
9
+ hideInputLabels: false,
10
+ inputsLabelPosition: 'top',
11
+ useLocaleSettings: false,
12
+ tableView: false,
13
+ fields: {
14
+ day: {
15
+ hide: false,
16
+ required: true
17
+ },
18
+ month: {
19
+ hide: false
20
+ },
21
+ year: {
22
+ hide: false
23
+ }
24
+ },
25
+ validateOn: 'blur',
26
+ key: 'day',
27
+ type: 'day',
28
+ input: true,
29
+ defaultValue: '00/00/0000'
30
+ },
31
+ ]
32
+ };
@@ -2,4 +2,5 @@ import comp1 from './comp1';
2
2
  import comp2 from './comp2';
3
3
  import comp3 from './comp3';
4
4
  import comp4 from './comp4';
5
- export { comp1, comp2, comp3, comp4 };
5
+ import comp5 from './comp5';
6
+ export { comp1, comp2, comp3, comp4, comp5 };
@@ -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.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
6
+ 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"));
@@ -12,3 +12,5 @@ const comp3_1 = __importDefault(require("./comp3"));
12
12
  exports.comp3 = comp3_1.default;
13
13
  const comp4_1 = __importDefault(require("./comp4"));
14
14
  exports.comp4 = comp4_1.default;
15
+ const comp5_1 = __importDefault(require("./comp5"));
16
+ exports.comp5 = comp5_1.default;
@@ -392,7 +392,8 @@ class FormComponent extends Component_1.default {
392
392
  if (this.builderMode || this.isHidden() || (this.isSubFormLazyLoad() && !fromAttach)) {
393
393
  return Promise.resolve();
394
394
  }
395
- if (this.hasLoadedForm && !this.isRevisionChanged) {
395
+ if (this.hasLoadedForm && !this.isRevisionChanged &&
396
+ !(this.options.pdf && this.useOriginalRevision && lodash_1.default.isNull(this.subForm) && !this.subFormLoading)) {
396
397
  // Pass config down to sub forms.
397
398
  if (this.root && this.root.form && this.root.form.config && !this.formObj.config) {
398
399
  this.formObj.config = this.root.form.config;
@@ -6,6 +6,7 @@ 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"));
9
10
  const Form_1 = __importDefault(require("../../Form"));
10
11
  const utils_1 = require("../../utils/utils");
11
12
  const ChoicesWrapper_1 = __importDefault(require("../../utils/ChoicesWrapper"));
@@ -808,7 +809,7 @@ class SelectComponent extends ListComponent_1.default {
808
809
  this.choices.containerOuter.element.setAttribute('tabIndex', '-1');
809
810
  this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus());
810
811
  }
811
- this.addFocusBlurEvents(this.focusableElement);
812
+ Input_1.default.prototype.addFocusBlurEvents.call(this, this.focusableElement);
812
813
  if (this.itemsFromUrl && !this.component.noRefreshOnScroll) {
813
814
  this.scrollList = this.choices.choiceList.element;
814
815
  this.addEventListener(this.scrollList, 'scroll', () => this.onScroll());
@@ -0,0 +1,23 @@
1
+ declare namespace _default {
2
+ const type: string;
3
+ const display: string;
4
+ const components: {
5
+ label: string;
6
+ widget: string;
7
+ tableView: boolean;
8
+ data: {
9
+ values: {
10
+ label: string;
11
+ value: string;
12
+ }[];
13
+ };
14
+ validateOn: string;
15
+ validate: {
16
+ custom: string;
17
+ };
18
+ key: string;
19
+ type: string;
20
+ input: boolean;
21
+ }[];
22
+ }
23
+ export default _default;
@@ -0,0 +1,36 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.default = {
4
+ type: 'form',
5
+ display: 'form',
6
+ components: [
7
+ {
8
+ label: 'Select',
9
+ widget: 'choicesjs',
10
+ tableView: true,
11
+ data: {
12
+ values: [
13
+ {
14
+ label: 'Banana',
15
+ value: 'banana'
16
+ },
17
+ {
18
+ label: 'Apple',
19
+ value: 'apple'
20
+ },
21
+ {
22
+ label: 'Pineapple',
23
+ value: 'pineapple'
24
+ }
25
+ ]
26
+ },
27
+ validateOn: 'blur',
28
+ validate: {
29
+ custom: "valid = data.select == 'apple' ? true : 'You must select an apple';"
30
+ },
31
+ key: 'select',
32
+ type: 'select',
33
+ input: true
34
+ },
35
+ ]
36
+ };
@@ -15,5 +15,6 @@ import comp15 from './comp15';
15
15
  import comp16 from './comp16';
16
16
  import comp17 from './comp17';
17
17
  import comp18 from './comp18';
18
- export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18 };
18
+ import comp19 from './comp19';
19
+ export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19 };
19
20
  export { multiSelect, multiSelectOptions } from "./comp3";
@@ -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.comp18 = exports.comp17 = exports.comp16 = exports.comp15 = exports.comp14 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp2 = exports.comp1 = exports.multiSelectOptions = exports.multiSelect = void 0;
6
+ exports.comp19 = exports.comp18 = exports.comp17 = exports.comp16 = exports.comp15 = exports.comp14 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp2 = exports.comp1 = exports.multiSelectOptions = exports.multiSelect = 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"));
@@ -41,3 +41,5 @@ const comp17_1 = __importDefault(require("./comp17"));
41
41
  exports.comp17 = comp17_1.default;
42
42
  const comp18_1 = __importDefault(require("./comp18"));
43
43
  exports.comp18 = comp18_1.default;
44
+ const comp19_1 = __importDefault(require("./comp19"));
45
+ exports.comp19 = comp19_1.default;
@@ -84,6 +84,8 @@ class TagsComponent extends Input_1.default {
84
84
  });
85
85
  this.choices.itemList.element.tabIndex = element.tabIndex;
86
86
  this.addEventListener(this.choices.input.element, 'blur', () => {
87
+ // Emit event to the native Formio input, so the listener attached in the Input.js will be invoked
88
+ element.dispatchEvent(new Event('blur'));
87
89
  const value = this.choices.input.value;
88
90
  const maxTagsNumber = this.component.maxTags;
89
91
  const valuesCount = this.choices.getValue(true).length;
@@ -0,0 +1,17 @@
1
+ declare namespace _default {
2
+ const type: string;
3
+ const display: string;
4
+ const components: {
5
+ label: string;
6
+ tableView: boolean;
7
+ storeas: string;
8
+ validate: {
9
+ custom: string;
10
+ };
11
+ validateOn: string;
12
+ key: string;
13
+ type: string;
14
+ input: boolean;
15
+ }[];
16
+ }
17
+ export default _default;
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.default = {
4
+ type: 'form',
5
+ display: 'form',
6
+ components: [
7
+ {
8
+ label: 'Tags',
9
+ tableView: false,
10
+ storeas: 'array',
11
+ validate: {
12
+ custom: "valid = data && data.tags.length <= 2 ? true : 'You cannot add more than 2 items'"
13
+ },
14
+ validateOn: 'blur',
15
+ key: 'tags',
16
+ type: 'tags',
17
+ input: true
18
+ },
19
+ ]
20
+ };
@@ -3,4 +3,5 @@ import comp2 from './comp2';
3
3
  import comp3 from './comp3';
4
4
  import comp4 from './comp4';
5
5
  import comp5 from './comp5';
6
- export { comp1, comp2, comp3, comp4, comp5 };
6
+ import comp6 from './comp6';
7
+ export { comp1, comp2, comp3, comp4, comp5, comp6 };
@@ -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.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
6
+ 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"));
@@ -14,3 +14,5 @@ const comp4_1 = __importDefault(require("./comp4"));
14
14
  exports.comp4 = comp4_1.default;
15
15
  const comp5_1 = __importDefault(require("./comp5"));
16
16
  exports.comp5 = comp5_1.default;
17
+ const comp6_1 = __importDefault(require("./comp6"));
18
+ exports.comp6 = comp6_1.default;
@@ -527,6 +527,11 @@ export default class Element {
527
527
  && !FormioUtils.Evaluator.templateSettings.interpolate.test(string)) {
528
528
  string = FormioUtils.translateHTMLTemplate(String(string), (value) => this.t(value));
529
529
  }
530
+ if (this.component.filter === string && !this.options.building) {
531
+ const evalContext = this.evalContext(data);
532
+ evalContext.data = _.mapValues(evalContext.data, (val) => _.isString(val) ? encodeURIComponent(val) : val);
533
+ return FormioUtils.interpolate(string, evalContext, options);
534
+ }
530
535
  return FormioUtils.interpolate(string, this.evalContext(data), options);
531
536
  }
532
537
  /**
@@ -1,6 +1,7 @@
1
1
  import _ from 'lodash';
2
2
  import moment from 'moment';
3
3
  import Field from '../_classes/field/Field';
4
+ import Input from '../_classes/input/Input';
4
5
  import { boolValue, componentValueTypes, getComponentSavedTypes, getLocaleDateFormatInfo } from '../../utils/utils';
5
6
  export default class DayComponent extends Field {
6
7
  static schema(...extend) {
@@ -289,6 +290,9 @@ export default class DayComponent extends Field {
289
290
  this.addEventListener(this.refs.input, this.info.changeEvent, () => this.updateValue(null, {
290
291
  modified: true
291
292
  }));
293
+ [this.refs.day, this.refs.month, this.refs.year].forEach((element) => {
294
+ Input.prototype.addFocusBlurEvents.call(this, element);
295
+ });
292
296
  }
293
297
  this.setValue(this.dataValue);
294
298
  // Force the disabled state with getters and setters.
@@ -0,0 +1,29 @@
1
+ declare namespace _default {
2
+ const type: string;
3
+ const display: string;
4
+ const components: {
5
+ label: string;
6
+ hideInputLabels: boolean;
7
+ inputsLabelPosition: string;
8
+ useLocaleSettings: boolean;
9
+ tableView: boolean;
10
+ fields: {
11
+ day: {
12
+ hide: boolean;
13
+ required: boolean;
14
+ };
15
+ month: {
16
+ hide: boolean;
17
+ };
18
+ year: {
19
+ hide: boolean;
20
+ };
21
+ };
22
+ validateOn: string;
23
+ key: string;
24
+ type: string;
25
+ input: boolean;
26
+ defaultValue: string;
27
+ }[];
28
+ }
29
+ export default _default;
@@ -0,0 +1,30 @@
1
+ export default {
2
+ type: 'form',
3
+ display: 'form',
4
+ components: [
5
+ {
6
+ label: 'Day',
7
+ hideInputLabels: false,
8
+ inputsLabelPosition: 'top',
9
+ useLocaleSettings: false,
10
+ tableView: false,
11
+ fields: {
12
+ day: {
13
+ hide: false,
14
+ required: true
15
+ },
16
+ month: {
17
+ hide: false
18
+ },
19
+ year: {
20
+ hide: false
21
+ }
22
+ },
23
+ validateOn: 'blur',
24
+ key: 'day',
25
+ type: 'day',
26
+ input: true,
27
+ defaultValue: '00/00/0000'
28
+ },
29
+ ]
30
+ };
@@ -2,4 +2,5 @@ import comp1 from './comp1';
2
2
  import comp2 from './comp2';
3
3
  import comp3 from './comp3';
4
4
  import comp4 from './comp4';
5
- export { comp1, comp2, comp3, comp4 };
5
+ import comp5 from './comp5';
6
+ export { comp1, comp2, comp3, comp4, comp5 };
@@ -2,4 +2,5 @@ import comp1 from './comp1';
2
2
  import comp2 from './comp2';
3
3
  import comp3 from './comp3';
4
4
  import comp4 from './comp4';
5
- export { comp1, comp2, comp3, comp4 };
5
+ import comp5 from './comp5';
6
+ export { comp1, comp2, comp3, comp4, comp5 };
@@ -385,7 +385,8 @@ export default class FormComponent extends Component {
385
385
  if (this.builderMode || this.isHidden() || (this.isSubFormLazyLoad() && !fromAttach)) {
386
386
  return Promise.resolve();
387
387
  }
388
- if (this.hasLoadedForm && !this.isRevisionChanged) {
388
+ if (this.hasLoadedForm && !this.isRevisionChanged &&
389
+ !(this.options.pdf && this.useOriginalRevision && _.isNull(this.subForm) && !this.subFormLoading)) {
389
390
  // Pass config down to sub forms.
390
391
  if (this.root && this.root.form && this.root.form.config && !this.formObj.config) {
391
392
  this.formObj.config = this.root.form.config;
@@ -1,6 +1,7 @@
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';
4
5
  import Form from '../../Form';
5
6
  import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
6
7
  import Choices from '../../utils/ChoicesWrapper';
@@ -837,7 +838,7 @@ export default class SelectComponent extends ListComponent {
837
838
  this.choices.containerOuter.element.setAttribute('tabIndex', '-1');
838
839
  this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus());
839
840
  }
840
- this.addFocusBlurEvents(this.focusableElement);
841
+ Input.prototype.addFocusBlurEvents.call(this, this.focusableElement);
841
842
  if (this.itemsFromUrl && !this.component.noRefreshOnScroll) {
842
843
  this.scrollList = this.choices.choiceList.element;
843
844
  this.addEventListener(this.scrollList, 'scroll', () => this.onScroll());
@@ -0,0 +1,23 @@
1
+ declare namespace _default {
2
+ const type: string;
3
+ const display: string;
4
+ const components: {
5
+ label: string;
6
+ widget: string;
7
+ tableView: boolean;
8
+ data: {
9
+ values: {
10
+ label: string;
11
+ value: string;
12
+ }[];
13
+ };
14
+ validateOn: string;
15
+ validate: {
16
+ custom: string;
17
+ };
18
+ key: string;
19
+ type: string;
20
+ input: boolean;
21
+ }[];
22
+ }
23
+ export default _default;
@@ -0,0 +1,34 @@
1
+ export default {
2
+ type: 'form',
3
+ display: 'form',
4
+ components: [
5
+ {
6
+ label: 'Select',
7
+ widget: 'choicesjs',
8
+ tableView: true,
9
+ data: {
10
+ values: [
11
+ {
12
+ label: 'Banana',
13
+ value: 'banana'
14
+ },
15
+ {
16
+ label: 'Apple',
17
+ value: 'apple'
18
+ },
19
+ {
20
+ label: 'Pineapple',
21
+ value: 'pineapple'
22
+ }
23
+ ]
24
+ },
25
+ validateOn: 'blur',
26
+ validate: {
27
+ custom: "valid = data.select == 'apple' ? true : 'You must select an apple';"
28
+ },
29
+ key: 'select',
30
+ type: 'select',
31
+ input: true
32
+ },
33
+ ]
34
+ };
@@ -15,5 +15,6 @@ import comp15 from './comp15';
15
15
  import comp16 from './comp16';
16
16
  import comp17 from './comp17';
17
17
  import comp18 from './comp18';
18
- export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18 };
18
+ import comp19 from './comp19';
19
+ export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19 };
19
20
  export { multiSelect, multiSelectOptions } from "./comp3";
@@ -16,4 +16,5 @@ import comp15 from './comp15';
16
16
  import comp16 from './comp16';
17
17
  import comp17 from './comp17';
18
18
  import comp18 from './comp18';
19
- export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18 };
19
+ import comp19 from './comp19';
20
+ export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19 };
@@ -82,6 +82,8 @@ export default class TagsComponent extends Input {
82
82
  });
83
83
  this.choices.itemList.element.tabIndex = element.tabIndex;
84
84
  this.addEventListener(this.choices.input.element, 'blur', () => {
85
+ // Emit event to the native Formio input, so the listener attached in the Input.js will be invoked
86
+ element.dispatchEvent(new Event('blur'));
85
87
  const value = this.choices.input.value;
86
88
  const maxTagsNumber = this.component.maxTags;
87
89
  const valuesCount = this.choices.getValue(true).length;
@@ -0,0 +1,17 @@
1
+ declare namespace _default {
2
+ const type: string;
3
+ const display: string;
4
+ const components: {
5
+ label: string;
6
+ tableView: boolean;
7
+ storeas: string;
8
+ validate: {
9
+ custom: string;
10
+ };
11
+ validateOn: string;
12
+ key: string;
13
+ type: string;
14
+ input: boolean;
15
+ }[];
16
+ }
17
+ export default _default;
@@ -0,0 +1,18 @@
1
+ export default {
2
+ type: 'form',
3
+ display: 'form',
4
+ components: [
5
+ {
6
+ label: 'Tags',
7
+ tableView: false,
8
+ storeas: 'array',
9
+ validate: {
10
+ custom: "valid = data && data.tags.length <= 2 ? true : 'You cannot add more than 2 items'"
11
+ },
12
+ validateOn: 'blur',
13
+ key: 'tags',
14
+ type: 'tags',
15
+ input: true
16
+ },
17
+ ]
18
+ };
@@ -3,4 +3,5 @@ import comp2 from './comp2';
3
3
  import comp3 from './comp3';
4
4
  import comp4 from './comp4';
5
5
  import comp5 from './comp5';
6
- export { comp1, comp2, comp3, comp4, comp5 };
6
+ import comp6 from './comp6';
7
+ export { comp1, comp2, comp3, comp4, comp5, comp6 };
@@ -3,4 +3,5 @@ import comp2 from './comp2';
3
3
  import comp3 from './comp3';
4
4
  import comp4 from './comp4';
5
5
  import comp5 from './comp5';
6
- export { comp1, comp2, comp3, comp4, comp5 };
6
+ import comp6 from './comp6';
7
+ export { comp1, comp2, comp3, comp4, comp5, comp6 };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@formio/js",
3
- "version": "5.0.0-rc.21",
3
+ "version": "5.0.0-rc.22",
4
4
  "description": "JavaScript powered Forms with JSON Form Builder",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/mjs/index.js",