UNPKG

@gitlab/ui

Version:
54 lines (48 loc) 1.46 kB
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 };