@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.
- package/dist/formio.embed.min.js.LICENSE.txt +1 -1
- package/dist/formio.form.js +6 -6
- package/dist/formio.form.min.js +1 -1
- package/dist/formio.form.min.js.LICENSE.txt +1 -1
- package/dist/formio.full.js +6 -6
- package/dist/formio.full.min.js +1 -1
- package/dist/formio.full.min.js.LICENSE.txt +1 -1
- package/dist/formio.js +1 -1
- package/dist/formio.min.js +1 -1
- package/dist/formio.min.js.LICENSE.txt +1 -1
- package/dist/formio.utils.min.js.LICENSE.txt +1 -1
- package/lib/cjs/Element.js +5 -0
- package/lib/cjs/components/day/Day.js +4 -0
- package/lib/cjs/components/day/fixtures/comp5.d.ts +29 -0
- package/lib/cjs/components/day/fixtures/comp5.js +32 -0
- package/lib/cjs/components/day/fixtures/index.d.ts +2 -1
- package/lib/cjs/components/day/fixtures/index.js +3 -1
- package/lib/cjs/components/form/Form.js +2 -1
- package/lib/cjs/components/select/Select.js +2 -1
- package/lib/cjs/components/select/fixtures/comp19.d.ts +23 -0
- package/lib/cjs/components/select/fixtures/comp19.js +36 -0
- package/lib/cjs/components/select/fixtures/index.d.ts +2 -1
- package/lib/cjs/components/select/fixtures/index.js +3 -1
- package/lib/cjs/components/tags/Tags.js +2 -0
- package/lib/cjs/components/tags/fixtures/comp6.d.ts +17 -0
- package/lib/cjs/components/tags/fixtures/comp6.js +20 -0
- package/lib/cjs/components/tags/fixtures/index.d.ts +2 -1
- package/lib/cjs/components/tags/fixtures/index.js +3 -1
- package/lib/mjs/Element.js +5 -0
- package/lib/mjs/components/day/Day.js +4 -0
- package/lib/mjs/components/day/fixtures/comp5.d.ts +29 -0
- package/lib/mjs/components/day/fixtures/comp5.js +30 -0
- package/lib/mjs/components/day/fixtures/index.d.ts +2 -1
- package/lib/mjs/components/day/fixtures/index.js +2 -1
- package/lib/mjs/components/form/Form.js +2 -1
- package/lib/mjs/components/select/Select.js +2 -1
- package/lib/mjs/components/select/fixtures/comp19.d.ts +23 -0
- package/lib/mjs/components/select/fixtures/comp19.js +34 -0
- package/lib/mjs/components/select/fixtures/index.d.ts +2 -1
- package/lib/mjs/components/select/fixtures/index.js +2 -1
- package/lib/mjs/components/tags/Tags.js +2 -0
- package/lib/mjs/components/tags/fixtures/comp6.d.ts +17 -0
- package/lib/mjs/components/tags/fixtures/comp6.js +18 -0
- package/lib/mjs/components/tags/fixtures/index.d.ts +2 -1
- package/lib/mjs/components/tags/fixtures/index.js +2 -1
- 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.
|
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.
|
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
|
package/lib/cjs/Element.js
CHANGED
@@ -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
|
+
};
|
@@ -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
|
-
|
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
|
-
|
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,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;
|
package/lib/mjs/Element.js
CHANGED
@@ -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
|
+
};
|
@@ -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
|
-
|
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
|
-
|
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
|
-
|
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
|
+
};
|