bootstrap-vue/es/components/tabs/tab.js

BootstrapVue provides one of the most comprehensive implementations of Bootstrap 4 components and grid system for Vue.js and with extensive and automated WAI-ARIA accessibility markup.

import idMixin from '../../mixins/id';

export default {
  mixins: [idMixin],
  render: function render(h) {
    var t = this;
    var content = h(false);
    if (t.localActive || !this.computedLazy) {
      content = h(t.tag, {
        ref: 'panel',
        class: t.tabClasses,
        directives: [{ name: 'show', value: t.localActive }],
        attrs: {
          role: 'tabpanel',
          id: t.safeId(),
          'aria-hidden': t.localActive ? 'false' : 'true',
          'aria-expanded': t.localActive ? 'true' : 'false',
          'aria-lablelledby': t.controlledBy || null
        }
      }, [t.$slots.default]);
    }
    return h('transition', {
      props: { mode: 'out-in' },
      on: {
        beforeEnter: t.beforeEnter,
        afterEnter: t.afterEnter,
        afterLeave: t.afterLeave
      }
    }, [content]);
  },

  methods: {
    beforeEnter: function beforeEnter() {
      this.show = false;
    },
    afterEnter: function afterEnter() {
      this.show = true;
    },
    afterLeave: function afterLeave() {
      this.show = false;
    }
  },
  data: function data() {
    return {
      localActive: this.active && !this.disabled,
      show: false
    };
  },
  mounted: function mounted() {
    this.show = this.localActive;
  },

  computed: {
    tabClasses: function tabClasses() {
      return ['tab-pane', this.$parent && this.$parent.card && !this.noBody ? 'card-body' : '', this.show ? 'show' : '', this.computedFade ? 'fade' : '', this.disabled ? 'disabled' : '', this.localActive ? 'active' : ''];
    },
    controlledBy: function controlledBy() {
      return this.buttonId || this.safeId('__BV_tab_button__');
    },
    computedFade: function computedFade() {
      return this.$parent.fade;
    },
    computedLazy: function computedLazy() {
      return this.$parent.lazy;
    },
    _isTab: function _isTab() {
      // For parent sniffing of child
      return true;
    }
  },
  props: {
    active: {
      type: Boolean,
      default: false
    },
    tag: {
      type: String,
      default: 'div'
    },
    buttonId: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    titleItemClass: {
      // Sniffed by tabs.vue and added to nav 'li.nav-item'
      type: [String, Array, Object],
      default: null
    },
    titleLinkClass: {
      // Sniffed by tabs.vue and added to nav 'a.nav-link'
      type: [String, Array, Object],
      default: null
    },
    headHtml: {
      // Is this actually ever used?
      type: String,
      default: null
    },
    disabled: {
      type: Boolean,
      default: false
    },
    noBody: {
      type: Boolean,
      default: false
    },
    href: {
      type: String,
      default: '#'
    }
  }
};