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 { extend } from '../../vue'
import { NAME_DROPDOWN_ITEM } from '../../constants/components'
import { EVENT_NAME_CLICK } from '../../constants/events'
import { PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_STRING } from '../../constants/props'
import { requestAF } from '../../utils/dom'
import { omit, sortKeys } from '../../utils/object'
import { makeProp, makePropsConfigurable, pluckProps } from '../../utils/props'
import { attrsMixin } from '../../mixins/attrs'
import { normalizeSlotMixin } from '../../mixins/normalize-slot'
import { BLink, props as BLinkProps } from '../link/link'

// --- Props ---

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

export const props = makePropsConfigurable(
  sortKeys({
    ...linkProps,
    linkClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
    variant: makeProp(PROP_TYPE_STRING)
  }),
  NAME_DROPDOWN_ITEM
)

// --- Main component ---

// @vue/component
export const BDropdownItem = /*#__PURE__*/ extend({
  name: NAME_DROPDOWN_ITEM,
  mixins: [attrsMixin, normalizeSlotMixin],
  inject: {
    getBvDropdown: { default: () => () => null }
  },
  inheritAttrs: false,
  props,
  computed: {
    bvDropdown() {
      return this.getBvDropdown()
    },
    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(event) {
      this.$emit(EVENT_NAME_CLICK, event)
      this.closeDropdown()
    }
  },
  render(h) {
    const { linkClass, variant, active, disabled, onClick, bvAttrs } = this

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