@gitlab/ui
Version:
GitLab UI Components
54 lines (48 loc) • 1.46 kB
JavaScript
import { extend, mergeData } from '../../vue';
import { NAME_FORM_VALID_FEEDBACK } from '../../constants/components';
import { PROP_TYPE_STRING, PROP_TYPE_BOOLEAN } from '../../constants/props';
import { makePropsConfigurable, makeProp } from '../../utils/props';
// --- Props ---
const props = makePropsConfigurable({
ariaLive: makeProp(PROP_TYPE_STRING),
forceShow: makeProp(PROP_TYPE_BOOLEAN, false),
id: makeProp(PROP_TYPE_STRING),
role: makeProp(PROP_TYPE_STRING),
// Tri-state prop: `true`, `false`, or `null`
state: makeProp(PROP_TYPE_BOOLEAN, null),
tag: makeProp(PROP_TYPE_STRING, 'div'),
tooltip: makeProp(PROP_TYPE_BOOLEAN, false)
}, NAME_FORM_VALID_FEEDBACK);
// --- Main component ---
// @vue/component
const BFormValidFeedback = /*#__PURE__*/extend({
name: NAME_FORM_VALID_FEEDBACK,
functional: true,
props,
render(h, _ref) {
let {
props,
data,
children
} = _ref;
const {
tooltip,
ariaLive
} = props;
const show = props.forceShow === true || props.state === true;
return h(props.tag, mergeData(data, {
class: {
'!gl-block': show,
'valid-feedback': !tooltip,
'valid-tooltip': tooltip
},
attrs: {
id: props.id || null,
role: props.role || null,
'aria-live': ariaLive || null,
'aria-atomic': ariaLive ? 'true' : null
}
}), children);
}
});
export { BFormValidFeedback, props };