@gitlab/ui/dist/vendor/bootstrap-vue/src/components/form/form-invalid-feedback.js

GitLab UI Components

import { extend, mergeData } from '../../vue';
import { NAME_FORM_INVALID_FEEDBACK } from '../../constants/components';
import { PROP_TYPE_STRING, PROP_TYPE_BOOLEAN } from '../../constants/props';

// --- Props ---

const props = {
  ariaLive: {
    type: PROP_TYPE_STRING,
    required: false,
    default: undefined
  },
  forceShow: {
    type: PROP_TYPE_BOOLEAN,
    required: false,
    default: false
  },
  id: {
    type: PROP_TYPE_STRING,
    required: false,
    default: undefined
  },
  role: {
    type: PROP_TYPE_STRING,
    required: false,
    default: undefined
  },
  // Tri-state prop: `true`, `false`, or `null`
  state: {
    type: PROP_TYPE_BOOLEAN,
    required: false,
    default: null
  },
  tag: {
    type: PROP_TYPE_STRING,
    required: false,
    default: 'div'
  },
  tooltip: {
    type: PROP_TYPE_BOOLEAN,
    required: false,
    default: false
  }
};

// --- Main component ---

// @vue/component
const BFormInvalidFeedback = /*#__PURE__*/extend({
  name: NAME_FORM_INVALID_FEEDBACK,
  functional: true,
  props,
  render(h, _ref) {
    let props = _ref.props,
      data = _ref.data,
      children = _ref.children;
    const tooltip = props.tooltip,
      ariaLive = props.ariaLive;
    const show = props.forceShow === true || props.state === false;
    return h(props.tag, mergeData(data, {
      class: {
        '!gl-block': show,
        'invalid-feedback': !tooltip,
        'invalid-tooltip': tooltip
      },
      attrs: {
        id: props.id || null,
        role: props.role || null,
        'aria-live': ariaLive || null,
        'aria-atomic': ariaLive ? 'true' : null
      }
    }), children);
  }
});

export { BFormInvalidFeedback, props };