@gitlab/ui 84.2.0 → 85.0.1

package/src/vendor/bootstrap-vue/src/components/nav/nav-item-dropdown.js

@@ -0,0 +1,123 @@
+import { extend } from '../../vue'
+import { NAME_NAV_ITEM_DROPDOWN } from '../../constants/components'
+import { SLOT_NAME_BUTTON_CONTENT, SLOT_NAME_DEFAULT, SLOT_NAME_TEXT } from '../../constants/slots'
+import { htmlOrText } from '../../utils/html'
+import { keys, pick, sortKeys } from '../../utils/object'
+import { makePropsConfigurable } from '../../utils/props'
+import { dropdownMixin, props as dropdownProps } from '../../mixins/dropdown'
+import { idMixin, props as idProps } from '../../mixins/id'
+import { normalizeSlotMixin } from '../../mixins/normalize-slot'
+import { props as BDropdownProps } from '../dropdown/dropdown'
+import { BLink } from '../link/link'
+
+// --- Props ---
+
+export const props = makePropsConfigurable(
+  sortKeys({
+    ...idProps,
+    ...pick(BDropdownProps, [
+      ...keys(dropdownProps),
+      'html',
+      'lazy',
+      'menuClass',
+      'noCaret',
+      'role',
+      'text',
+      'toggleClass'
+    ])
+  }),
+  NAME_NAV_ITEM_DROPDOWN
+)
+
+// --- Main component ---
+
+// @vue/component
+export const BNavItemDropdown = /*#__PURE__*/ extend({
+  name: NAME_NAV_ITEM_DROPDOWN,
+  mixins: [idMixin, dropdownMixin, normalizeSlotMixin],
+  props,
+  computed: {
+    toggleId() {
+      return this.safeId('_BV_toggle_')
+    },
+    menuId() {
+      return this.safeId('_BV_toggle_menu_')
+    },
+    dropdownClasses() {
+      return [this.directionClass, this.boundaryClass, { show: this.visible }]
+    },
+    menuClasses() {
+      return [
+        this.menuClass,
+        {
+          'dropdown-menu-right': this.right,
+          show: this.visible
+        }
+      ]
+    },
+    toggleClasses() {
+      return [this.toggleClass, { 'dropdown-toggle-no-caret': this.noCaret }]
+    }
+  },
+  render(h) {
+    const { toggleId, menuId, visible, hide } = this
+
+    const $toggle = h(
+      BLink,
+      {
+        staticClass: 'nav-link dropdown-toggle',
+        class: this.toggleClasses,
+        props: {
+          href: `#${this.id || ''}`,
+          disabled: this.disabled
+        },
+        attrs: {
+          id: toggleId,
+          role: 'button',
+          'aria-haspopup': 'true',
+          'aria-expanded': visible ? 'true' : 'false',
+          'aria-controls': menuId
+        },
+        on: {
+          mousedown: this.onMousedown,
+          click: this.toggle,
+          keydown: this.toggle // Handle ENTER, SPACE and DOWN
+        },
+        ref: 'toggle'
+      },
+      [
+        // TODO: The `text` slot is deprecated in favor of the `button-content` slot
+        this.normalizeSlot([SLOT_NAME_BUTTON_CONTENT, SLOT_NAME_TEXT]) ||
+          h('span', { domProps: htmlOrText(this.html, this.text) })
+      ]
+    )
+
+    const $menu = h(
+      'ul',
+      {
+        staticClass: 'dropdown-menu',
+        class: this.menuClasses,
+        attrs: {
+          tabindex: '-1',
+          'aria-labelledby': toggleId,
+          id: menuId
+        },
+        on: {
+          keydown: this.onKeydown // Handle UP, DOWN and ESC
+        },
+        ref: 'menu'
+      },
+      !this.lazy || visible ? this.normalizeSlot(SLOT_NAME_DEFAULT, { hide }) : [h()]
+    )
+
+    return h(
+      'li',
+      {
+        staticClass: 'nav-item b-nav-dropdown dropdown',
+        class: this.dropdownClasses,
+        attrs: { id: this.safeId() }
+      },
+      [$toggle, $menu]
+    )
+  }
+})

package/src/vendor/bootstrap-vue/src/components/nav/nav-item-dropdown.spec.js

@@ -0,0 +1,268 @@
+import { mount } from '@vue/test-utils'
+import { waitNT, waitRAF } from '../../../tests/utils'
+import { BNavItemDropdown } from './nav-item-dropdown'
+
+describe('nav-item-dropdown', () => {
+  it('has expected default structure', async () => {
+    const wrapper = mount(BNavItemDropdown)
+
+    expect(wrapper.vm).toBeDefined()
+    await waitNT(wrapper.vm)
+
+    expect(wrapper.element.tagName).toBe('LI')
+    expect(wrapper.element.hasAttribute('id')).toBe(true)
+    expect(wrapper.classes()).toContain('nav-item')
+    expect(wrapper.classes()).toContain('b-nav-dropdown')
+    expect(wrapper.classes()).toContain('dropdown')
+
+    const $toggle = wrapper.find('.dropdown-toggle')
+    expect($toggle.element.tagName).toBe('A')
+    expect($toggle.element.hasAttribute('id')).toBe(true)
+    expect($toggle.attributes('role')).toEqual('button')
+    expect($toggle.attributes('aria-haspopup')).toEqual('true')
+    expect($toggle.attributes('aria-expanded')).toEqual('false')
+    expect($toggle.attributes('href')).toEqual('#')
+    expect($toggle.classes()).toContain('dropdown-toggle')
+    expect($toggle.classes()).toContain('nav-link')
+
+    const $menu = wrapper.find('.dropdown-menu')
+    expect($menu.element.tagName).toBe('UL')
+    expect($menu.attributes('tabindex')).toEqual('-1')
+    expect($menu.attributes('aria-labelledby')).toEqual($toggle.attributes('id'))
+    expect($menu.classes()).toContain('dropdown-menu')
+
+    wrapper.destroy()
+  })
+
+  it('should have custom toggle class when "toggle-class" prop set', async () => {
+    const wrapper = mount(BNavItemDropdown, {
+      propsData: {
+        toggleClass: 'nav-link-custom'
+      }
+    })
+
+    expect(wrapper.vm).toBeDefined()
+    await waitNT(wrapper.vm)
+
+    const $toggle = wrapper.find('.dropdown-toggle')
+    expect($toggle.classes()).toContain('nav-link-custom')
+
+    wrapper.destroy()
+  })
+
+  it('should be disabled when "disabled" prop set', async () => {
+    const wrapper = mount(BNavItemDropdown, {
+      propsData: {
+        disabled: true
+      }
+    })
+
+    expect(wrapper.vm).toBeDefined()
+    await waitNT(wrapper.vm)
+
+    const $toggle = wrapper.find('.dropdown-toggle')
+    expect($toggle.classes()).toContain('disabled')
+    expect($toggle.attributes('aria-disabled')).toBeDefined()
+
+    wrapper.destroy()
+  })
+
+  it('should have href with ID when "id" prop set', async () => {
+    const wrapper = mount(BNavItemDropdown, {
+      propsData: {
+        id: 'foo'
+      }
+    })
+
+    expect(wrapper.vm).toBeDefined()
+    await waitNT(wrapper.vm)
+
+    expect(wrapper.element.hasAttribute('id')).toBe(true)
+    expect(wrapper.attributes('id')).toEqual('foo')
+
+    const $toggle = wrapper.find('.dropdown-toggle')
+    expect($toggle.attributes('href')).toEqual('#foo')
+
+    wrapper.destroy()
+  })
+
+  it('should have correct toggle content when "text" prop set [DEPRECATED]', async () => {
+    const wrapper = mount(BNavItemDropdown, {
+      propsData: {
+        text: 'foo'
+      }
+    })
+
+    expect(wrapper.vm).toBeDefined()
+    await waitNT(wrapper.vm)
+
+    const $toggle = wrapper.find('.dropdown-toggle')
+    expect($toggle.text()).toEqual('foo')
+
+    wrapper.destroy()
+  })
+
+  it('should have correct toggle content when "html" prop set', async () => {
+    const wrapper = mount(BNavItemDropdown, {
+      propsData: {
+        text: 'foo',
+        html: '<span>bar</span>'
+      }
+    })
+
+    expect(wrapper.vm).toBeDefined()
+    await waitNT(wrapper.vm)
+
+    const $toggle = wrapper.find('.dropdown-toggle')
+    expect($toggle.find('span').exists()).toBe(true)
+    expect($toggle.text()).toEqual('bar')
+
+    wrapper.destroy()
+  })
+
+  it('should have correct toggle content from "text" slot', async () => {
+    const wrapper = mount(BNavItemDropdown, {
+      propsData: {
+        text: 'foo',
+        html: '<span>bar</span>'
+      },
+      slots: {
+        text: '<strong>baz</strong>'
+      }
+    })
+
+    expect(wrapper.vm).toBeDefined()
+    await waitNT(wrapper.vm)
+
+    const $toggle = wrapper.find('.dropdown-toggle')
+    expect($toggle.find('strong').exists()).toBe(true)
+    expect($toggle.text()).toEqual('baz')
+
+    wrapper.destroy()
+  })
+
+  it('should have correct toggle content from "button-content" slot', async () => {
+    const wrapper = mount(BNavItemDropdown, {
+      propsData: {
+        text: 'foo',
+        html: '<span>bar</span>'
+      },
+      slots: {
+        'button-content': '<article>foobar</article>',
+        text: '<strong>baz</strong>'
+      }
+    })
+
+    expect(wrapper.vm).toBeDefined()
+    await waitNT(wrapper.vm)
+
+    const $toggle = wrapper.find('.dropdown-toggle')
+    expect($toggle.find('article').exists()).toBe(true)
+    expect($toggle.text()).toEqual('foobar')
+
+    wrapper.destroy()
+  })
+
+  it('should have correct menu content for "default" slot', async () => {
+    let slotScope = null
+    const wrapper = mount(BNavItemDropdown, {
+      scopedSlots: {
+        default(scope) {
+          slotScope = scope
+          return this.$createElement('div', 'foo')
+        }
+      }
+    })
+
+    expect(wrapper.vm).toBeDefined()
+    await waitNT(wrapper.vm)
+
+    const $menu = wrapper.find('.dropdown-menu')
+    expect($menu.find('div').exists()).toBe(true)
+    expect($menu.text()).toEqual('foo')
+
+    expect(slotScope).toBeDefined()
+    expect(slotScope.hide).toBeDefined()
+
+    wrapper.destroy()
+  })
+
+  it('should only render menu content when visible when "lazy" prop set', async () => {
+    const wrapper = mount(BNavItemDropdown, {
+      propsData: {
+        lazy: true
+      },
+      scopedSlots: {
+        default() {
+          return this.$createElement('div', 'bar')
+        }
+      }
+    })
+
+    expect(wrapper.vm).toBeDefined()
+    expect(wrapper.vm.visible).toBe(false)
+    await waitNT(wrapper.vm)
+
+    const $menu = wrapper.find('.dropdown-menu')
+    expect($menu.find('div').exists()).toBe(false)
+
+    wrapper.vm.show()
+    await waitNT(wrapper.vm)
+    await waitRAF()
+    expect(wrapper.vm.visible).toBe(true)
+    expect($menu.find('div').exists()).toBe(true)
+    expect($menu.text()).toEqual('bar')
+
+    wrapper.vm.hide()
+    await waitNT(wrapper.vm)
+    await waitRAF()
+    expect(wrapper.vm.visible).toBe(false)
+    expect($menu.find('div').exists()).toBe(false)
+
+    wrapper.destroy()
+  })
+
+  it('should open/close on toggle click', async () => {
+    const wrapper = mount(BNavItemDropdown)
+
+    expect(wrapper.vm).toBeDefined()
+    await waitNT(wrapper.vm)
+
+    const $toggle = wrapper.find('.dropdown-toggle')
+    expect(wrapper.vm.visible).toBe(false)
+    expect($toggle.attributes('aria-expanded')).toEqual('false')
+
+    await $toggle.trigger('click')
+    await waitRAF()
+    expect(wrapper.vm.visible).toBe(true)
+    expect($toggle.attributes('aria-expanded')).toEqual('true')
+
+    await $toggle.trigger('click')
+    await waitRAF()
+    expect(wrapper.vm.visible).toBe(false)
+    expect($toggle.attributes('aria-expanded')).toEqual('false')
+
+    wrapper.destroy()
+  })
+
+  it('should prevent toggle click', async () => {
+    const wrapper = mount(BNavItemDropdown, {
+      propsData: {
+        text: 'toggle'
+      }
+    })
+
+    expect(wrapper.vm).toBeDefined()
+    await waitNT(wrapper.vm)
+
+    const $toggle = wrapper.find('.dropdown-toggle')
+
+    await $toggle.trigger('click')
+    expect(wrapper.emitted('toggle')).toBeDefined()
+    expect(wrapper.emitted('toggle').length).toBe(1)
+    expect(wrapper.emitted('toggle')[0]).toBeDefined()
+    expect(wrapper.emitted('toggle')[0][0].defaultPrevented).toBe(true)
+
+    wrapper.destroy()
+  })
+})

package/src/vendor/bootstrap-vue/src/components/nav/nav-item.js

@@ -0,0 +1,49 @@
+import { extend, mergeData } from '../../vue'
+import { NAME_NAV_ITEM } from '../../constants/components'
+import { PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_OBJECT } from '../../constants/props'
+import { omit, sortKeys } from '../../utils/object'
+import { makeProp, makePropsConfigurable, pluckProps } from '../../utils/props'
+import { BLink, props as BLinkProps } from '../link/link'
+
+// --- Props ---
+
+const linkProps = omit(BLinkProps, ['event', 'routerTag'])
+
+export const props = makePropsConfigurable(
+  sortKeys({
+    ...linkProps,
+    linkAttrs: makeProp(PROP_TYPE_OBJECT, {}),
+    linkClasses: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING)
+  }),
+  NAME_NAV_ITEM
+)
+
+// --- Main component ---
+
+// @vue/component
+export const BNavItem = /*#__PURE__*/ extend({
+  name: NAME_NAV_ITEM,
+  functional: true,
+  props,
+  render(h, { props, data, listeners, children }) {
+    return h(
+      'li',
+      mergeData(omit(data, ['on']), {
+        staticClass: 'nav-item'
+      }),
+      [
+        h(
+          BLink,
+          {
+            staticClass: 'nav-link',
+            class: props.linkClasses,
+            attrs: props.linkAttrs,
+            props: pluckProps(linkProps, props),
+            on: listeners
+          },
+          children
+        )
+      ]
+    )
+  }
+})

package/src/vendor/bootstrap-vue/src/components/nav/nav-item.spec.js

@@ -0,0 +1,127 @@
+import { mount } from '@vue/test-utils'
+import { BLink } from '../link/link'
+import { BNavItem } from './nav-item'
+
+describe('nav-item', () => {
+  it('has expected default structure', async () => {
+    const wrapper = mount(BNavItem)
+
+    expect(wrapper.element.tagName).toBe('LI')
+    expect(wrapper.classes()).toContain('nav-item')
+    expect(wrapper.classes().length).toBe(1)
+
+    const link = wrapper.find('a')
+    expect(link).toBeDefined()
+    expect(link.findComponent(BLink).exists()).toBe(true)
+    expect(link.element.tagName).toBe('A')
+    expect(link.classes()).toContain('nav-link')
+    expect(link.classes().length).toBe(1)
+    expect(link.attributes('href')).toBeDefined()
+    expect(link.attributes('href')).toBe('#')
+    expect(link.attributes('role')).toBeUndefined()
+
+    wrapper.destroy()
+  })
+
+  it('has attrs on link when link-attrs set', async () => {
+    const wrapper = mount(BNavItem, {
+      context: {
+        props: {
+          linkAttrs: { role: 'tab' }
+        }
+      }
+    })
+
+    expect(wrapper.attributes('role')).toBeUndefined()
+
+    const link = wrapper.find('a')
+    expect(link).toBeDefined()
+    expect(link.findComponent(BLink).exists()).toBe(true)
+    expect(link.element.tagName).toBe('A')
+    expect(link.attributes('role')).toBeDefined()
+    expect(link.attributes('role')).toBe('tab')
+
+    wrapper.destroy()
+  })
+
+  it('has custom classes on link when link-classes set', async () => {
+    const wrapper = mount(BNavItem, {
+      context: {
+        props: {
+          linkClasses: ['foo', { bar: true }]
+        }
+      }
+    })
+
+    const link = wrapper.find('a')
+    expect(link).toBeDefined()
+    expect(link.findComponent(BLink).exists()).toBe(true)
+    expect(link.element.tagName).toBe('A')
+    expect(link.classes()).toContain('foo')
+    expect(link.classes()).toContain('bar')
+    expect(link.classes()).toContain('nav-link')
+
+    wrapper.destroy()
+  })
+
+  it('has class "disabled" on link when disabled set', async () => {
+    const wrapper = mount(BNavItem, {
+      context: {
+        props: { disabled: true }
+      }
+    })
+
+    const link = wrapper.find('a')
+    expect(link).toBeDefined()
+    expect(link.findComponent(BLink).exists()).toBe(true)
+    expect(link.element.tagName).toBe('A')
+    expect(link.classes()).toContain('disabled')
+
+    wrapper.destroy()
+  })
+
+  it('emits click event when clicked', async () => {
+    const spy = jest.fn()
+    const wrapper = mount(BNavItem, {
+      context: {
+        on: { click: spy }
+      }
+    })
+
+    expect(spy).not.toHaveBeenCalled()
+    await wrapper.trigger('click')
+    expect(spy).not.toHaveBeenCalled()
+
+    const link = wrapper.find('a')
+    expect(link).toBeDefined()
+    expect(link.findComponent(BLink).exists()).toBe(true)
+    expect(link.element.tagName).toBe('A')
+    await link.trigger('click')
+    expect(spy).toHaveBeenCalled()
+
+    wrapper.destroy()
+  })
+
+  it('does not emit a click event when clicked and disabled', async () => {
+    const spy = jest.fn()
+    const wrapper = mount(BNavItem, {
+      context: {
+        props: { disabled: true },
+        on: { click: spy }
+      }
+    })
+
+    expect(spy).not.toHaveBeenCalled()
+    await wrapper.trigger('click')
+    expect(spy).not.toHaveBeenCalled()
+
+    const link = wrapper.find('a')
+    expect(link).toBeDefined()
+    expect(link.findComponent(BLink).exists()).toBe(true)
+    expect(link.element.tagName).toBe('A')
+    await link.trigger('click')
+    expect(spy).not.toHaveBeenCalled()
+
+    wrapper.destroy()
+  })
+})

package/src/vendor/bootstrap-vue/src/components/nav/nav-text.js

@@ -0,0 +1,18 @@
+import { extend, mergeData } from '../../vue'
+import { NAME_NAV_TEXT } from '../../constants/components'
+
+// --- Props ---
+
+export const props = {}
+
+// --- Main component ---
+
+// @vue/component
+export const BNavText = /*#__PURE__*/ extend({
+  name: NAME_NAV_TEXT,
+  functional: true,
+  props,
+  render(h, { data, children }) {
+    return h('li', mergeData(data, { staticClass: 'navbar-text' }), children)
+  }
+})

package/src/vendor/bootstrap-vue/src/components/nav/nav-text.spec.js

@@ -0,0 +1,30 @@
+import { mount } from '@vue/test-utils'
+import { BNavText } from './nav-text'
+
+describe('nav > nav-text', () => {
+  it('has expected default structure', async () => {
+    const wrapper = mount(BNavText)
+
+    expect(wrapper.element.tagName).toBe('LI')
+    expect(wrapper.classes()).toContain('navbar-text')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.text()).toEqual('')
+
+    wrapper.destroy()
+  })
+
+  it('renders default slot content', async () => {
+    const wrapper = mount(BNavText, {
+      slots: {
+        default: 'foobar'
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('LI')
+    expect(wrapper.classes()).toContain('navbar-text')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.text()).toEqual('foobar')
+
+    wrapper.destroy()
+  })
+})

package/src/vendor/bootstrap-vue/src/components/nav/nav.js

@@ -0,0 +1,60 @@
+import { extend, mergeData } from '../../vue'
+import { NAME_NAV } from '../../constants/components'
+import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
+import { makeProp, makePropsConfigurable } from '../../utils/props'
+
+// --- Helper methods ---
+
+const computeJustifyContent = value => {
+  value = value === 'left' ? 'start' : value === 'right' ? 'end' : value
+  return `justify-content-${value}`
+}
+
+// --- Props ---
+
+export const props = makePropsConfigurable(
+  {
+    align: makeProp(PROP_TYPE_STRING),
+    // Set to `true` if placing in a card header
+    cardHeader: makeProp(PROP_TYPE_BOOLEAN, false),
+    fill: makeProp(PROP_TYPE_BOOLEAN, false),
+    justified: makeProp(PROP_TYPE_BOOLEAN, false),
+    pills: makeProp(PROP_TYPE_BOOLEAN, false),
+    small: makeProp(PROP_TYPE_BOOLEAN, false),
+    tabs: makeProp(PROP_TYPE_BOOLEAN, false),
+    tag: makeProp(PROP_TYPE_STRING, 'ul'),
+    vertical: makeProp(PROP_TYPE_BOOLEAN, false)
+  },
+  NAME_NAV
+)
+
+// --- Main component ---
+
+// @vue/component
+export const BNav = /*#__PURE__*/ extend({
+  name: NAME_NAV,
+  functional: true,
+  props,
+  render(h, { props, data, children }) {
+    const { tabs, pills, vertical, align, cardHeader } = props
+
+    return h(
+      props.tag,
+      mergeData(data, {
+        staticClass: 'nav',
+        class: {
+          'nav-tabs': tabs,
+          'nav-pills': pills && !tabs,
+          'card-header-tabs': !vertical && cardHeader && tabs,
+          'card-header-pills': !vertical && cardHeader && pills && !tabs,
+          'flex-column': vertical,
+          'nav-fill': !vertical && props.fill,
+          'nav-justified': !vertical && props.justified,
+          [computeJustifyContent(align)]: !vertical && align,
+          small: props.small
+        }
+      }),
+      children
+    )
+  }
+})