bootstrap-vue/src/components/dropdown/dropdown-item.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 Vue from '../../vue'
import { NAME_DROPDOWN_ITEM } from '../../constants/components'
import { requestAF } from '../../utils/dom'
import { omit } from '../../utils/object'
import attrsMixin from '../../mixins/attrs'
import normalizeSlotMixin from '../../mixins/normalize-slot'
import { BLink, props as BLinkProps } from '../link/link'

export const props = omit(BLinkProps, ['event', 'routerTag'])

// @vue/component
export const BDropdownItem = /*#__PURE__*/ Vue.extend({
  name: NAME_DROPDOWN_ITEM,
  mixins: [attrsMixin, normalizeSlotMixin],
  inject: {
    bvDropdown: {
      default: null
    }
  },
  inheritAttrs: false,
  props: {
    ...props,
    linkClass: {
      type: [String, Array, Object]
      // default: null
    },
    variant: {
      type: String
      // default: null
    }
  },
  computed: {
    computedAttrs() {
      return {
        ...this.bvAttrs,
        role: 'menuitem'
      }
    }
  },
  methods: {
    closeDropdown() {
      // Close on next animation frame to allow <b-link> time to process
      requestAF(() => {
        if (this.bvDropdown) {
          this.bvDropdown.hide(true)
        }
      })
    },
    onClick(evt) {
      this.$emit('click', evt)
      this.closeDropdown()
    }
  },
  render(h) {
    const { linkClass, variant, active, disabled, onClick } = this

    return h('li', { attrs: { role: 'presentation' } }, [
      h(
        BLink,
        {
          staticClass: 'dropdown-item',
          class: [linkClass, { [`text-${variant}`]: variant && !(active || disabled) }],
          props: this.$props,
          attrs: this.computedAttrs,
          on: { click: onClick },
          ref: 'item'
        },
        this.normalizeSlot()
      )
    ])
  }
})