bootstrap-view/esm/components/tooltip/helpers/bv-tooltip-template.js

With more than 85 components, over 45 available plugins, several directives, and 1000+ icons, BootstrapVue provides one of the most comprehensive implementations of the Bootstrap v4 component and grid system available for Vue.js v2.6, complete with extens

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import { extend } from '../../../vue';
import { NAME_TOOLTIP_TEMPLATE } from '../../../constants/components';
import { EVENT_NAME_FOCUSIN, EVENT_NAME_FOCUSOUT, EVENT_NAME_MOUSEENTER, EVENT_NAME_MOUSELEAVE } from '../../../constants/events';
import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../../constants/props';
import { isFunction } from '../../../utils/inspect';
import { makeProp } from '../../../utils/props';
import { scopedStyleMixin } from '../../../mixins/scoped-style';
import { BVPopper } from './bv-popper';

// --- Props ---

export var props = {
  // Used only by the directive versions
  html: makeProp(PROP_TYPE_BOOLEAN, false),
  // Other non-reactive (while open) props are pulled in from BVPopper
  id: makeProp(PROP_TYPE_STRING)
};

// --- Main component ---

// @vue/component
export var BVTooltipTemplate = /*#__PURE__*/extend({
  name: NAME_TOOLTIP_TEMPLATE,
  extends: BVPopper,
  mixins: [scopedStyleMixin],
  props: props,
  data: function data() {
    // We use data, rather than props to ensure reactivity
    // Parent component will directly set this data
    return {
      title: '',
      content: '',
      variant: null,
      customClass: null,
      interactive: true
    };
  },
  computed: {
    templateType: function templateType() {
      return 'tooltip';
    },
    templateClasses: function templateClasses() {
      var variant = this.variant,
        attachment = this.attachment,
        templateType = this.templateType;
      return [_defineProperty(_defineProperty({
        // Disables pointer events to hide the tooltip when the user
        // hovers over its content
        noninteractive: !this.interactive
      }, "b-".concat(templateType, "-").concat(variant), variant), "bs-".concat(templateType, "-").concat(attachment), attachment), this.customClass];
    },
    templateAttributes: function templateAttributes() {
      var id = this.id;
      return _objectSpread(_objectSpread({}, this.bvParent.bvParent.$attrs), {}, {
        id: id,
        role: 'tooltip',
        tabindex: '-1'
      }, this.scopedStyleAttrs);
    },
    templateListeners: function templateListeners() {
      var _this = this;
      // Used for hover/focus trigger listeners
      return {
        mouseenter: /* istanbul ignore next */function mouseenter(event) {
          _this.$emit(EVENT_NAME_MOUSEENTER, event);
        },
        mouseleave: /* istanbul ignore next */function mouseleave(event) {
          _this.$emit(EVENT_NAME_MOUSELEAVE, event);
        },
        focusin: /* istanbul ignore next */function focusin(event) {
          _this.$emit(EVENT_NAME_FOCUSIN, event);
        },
        focusout: /* istanbul ignore next */function focusout(event) {
          _this.$emit(EVENT_NAME_FOCUSOUT, event);
        }
      };
    }
  },
  methods: {
    renderTemplate: function renderTemplate(h) {
      var title = this.title;

      // Title can be a scoped slot function
      var $title = isFunction(title) ? title({}) : title;

      // Directive versions only
      var domProps = this.html && !isFunction(title) ? {
        innerHTML: title
      } : {};
      return h('div', {
        staticClass: 'tooltip b-tooltip',
        class: this.templateClasses,
        attrs: this.templateAttributes,
        on: this.templateListeners
      }, [h('div', {
        staticClass: 'arrow',
        ref: 'arrow'
      }), h('div', {
        staticClass: 'tooltip-inner',
        domProps: domProps
      }, [$title])]);
    }
  }
});