bootstrap-vue/src/components/table/helpers/mixin-caption.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

import { htmlOrText } from '../../../utils/html'

export default {
  props: {
    // `caption-top` is part of table-render mixin (styling)
    // captionTop: {
    //   type: Boolean,
    //   default: false
    // },
    caption: {
      type: String
      // default: null
    },
    captionHtml: {
      type: String
    }
  },
  computed: {
    captionId() {
      // Even though `this.safeId` looks like a method, it is a computed prop
      // that returns a new function if the underlying ID changes
      return this.isStacked ? this.safeId('_caption_') : null
    }
  },
  methods: {
    renderCaption() {
      const { caption, captionHtml } = this
      const h = this.$createElement

      let $caption = h()
      const hasCaptionSlot = this.hasNormalizedSlot('table-caption')
      if (hasCaptionSlot || caption || captionHtml) {
        $caption = h(
          'caption',
          {
            key: 'caption',
            attrs: { id: this.captionId },
            domProps: hasCaptionSlot ? {} : htmlOrText(captionHtml, caption)
          },
          this.normalizeSlot('table-caption')
        )
      }

      return $caption
    }
  }
}