form-state.js
1.41 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/* Form control contextual state class computation
*
* Returned class is either 'is-valid' or 'is-invalid' based on the 'state' prop
* state can be one of five values:
* - true for is-valid
* - false for is-invalid
* - null for no contextual state
*/
import { extend } from '../vue';
import { PROP_TYPE_BOOLEAN } from '../constants/props';
import { isBoolean } from '../utils/inspect';
import { makeProp, makePropsConfigurable } from '../utils/props';
import { safeVueInstance } from '../utils/safe-vue-instance'; // --- Props ---
export var props = makePropsConfigurable({
// Tri-state prop: true, false, null (or undefined)
state: makeProp(PROP_TYPE_BOOLEAN, null)
}, 'formState'); // --- Mixin ---
// @vue/component
export var formStateMixin = extend({
props: props,
computed: {
computedState: function computedState() {
// If not a boolean, ensure that value is null
return isBoolean(this.state) ? this.state : null;
},
stateClass: function stateClass() {
var state = this.computedState;
return state === true ? 'is-valid' : state === false ? 'is-invalid' : null;
},
computedAriaInvalid: function computedAriaInvalid() {
var ariaInvalid = safeVueInstance(this).ariaInvalid;
if (ariaInvalid === true || ariaInvalid === 'true' || ariaInvalid === '') {
return 'true';
}
return this.computedState === false ? 'true' : ariaInvalid;
}
}
});