UNPKG

@gitlab/ui

Version:
48 lines (41 loc) 1.39 kB
import { extend } from '../vue'; import { PROP_TYPE_BOOLEAN } from '../constants/props'; import { isBoolean } from '../utils/inspect'; import { makePropsConfigurable, makeProp } from '../utils/props'; import { safeVueInstance } from '../utils/safe-vue-instance'; /* 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 */ // --- Props --- const props = makePropsConfigurable({ // Tri-state prop: true, false, null (or undefined) state: makeProp(PROP_TYPE_BOOLEAN, null) }, 'formState'); // --- Mixin --- // @vue/component const formStateMixin = extend({ props, computed: { computedState() { // If not a boolean, ensure that value is null return isBoolean(this.state) ? this.state : null; }, stateClass() { const state = this.computedState; return state === true ? 'is-valid' : state === false ? 'is-invalid' : null; }, computedAriaInvalid() { const ariaInvalid = safeVueInstance(this).ariaInvalid; if (ariaInvalid === true || ariaInvalid === 'true' || ariaInvalid === '') { return 'true'; } return this.computedState === false ? 'true' : ariaInvalid; } } }); export { formStateMixin, props };