@gitlab/ui 84.2.0 → 85.0.0

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

@@ -0,0 +1,212 @@
+import { extend } from '../../vue'
+import { NAME_LINK } from '../../constants/components'
+import { EVENT_NAME_CLICK } from '../../constants/events'
+import {
+  PROP_TYPE_ARRAY_STRING,
+  PROP_TYPE_BOOLEAN,
+  PROP_TYPE_OBJECT_STRING,
+  PROP_TYPE_STRING
+} from '../../constants/props'
+import { concat } from '../../utils/array'
+import { attemptBlur, attemptFocus, isTag } from '../../utils/dom'
+import { getRootEventName, stopEvent } from '../../utils/events'
+import { isBoolean, isEvent, isFunction, isUndefined } from '../../utils/inspect'
+import { omit, sortKeys } from '../../utils/object'
+import { makeProp, makePropsConfigurable, pluckProps } from '../../utils/props'
+import { computeHref, computeRel, computeTag, isRouterLink } from '../../utils/router'
+import { attrsMixin } from '../../mixins/attrs'
+import { listenOnRootMixin } from '../../mixins/listen-on-root'
+import { listenersMixin } from '../../mixins/listeners'
+import { normalizeSlotMixin } from '../../mixins/normalize-slot'
+
+// --- Constants ---
+
+const ROOT_EVENT_NAME_CLICKED = getRootEventName(NAME_LINK, 'clicked')
+
+// --- Props ---
+
+// `<router-link>` specific props
+export const routerLinkProps = {
+  activeClass: makeProp(PROP_TYPE_STRING),
+  append: makeProp(PROP_TYPE_BOOLEAN, false),
+  event: makeProp(PROP_TYPE_ARRAY_STRING),
+  exact: makeProp(PROP_TYPE_BOOLEAN, false),
+  exactActiveClass: makeProp(PROP_TYPE_STRING),
+  exactPath: makeProp(PROP_TYPE_BOOLEAN, false),
+  exactPathActiveClass: makeProp(PROP_TYPE_STRING),
+  replace: makeProp(PROP_TYPE_BOOLEAN, false),
+  routerTag: makeProp(PROP_TYPE_STRING),
+  to: makeProp(PROP_TYPE_OBJECT_STRING)
+}
+
+// `<nuxt-link>` specific props
+export const nuxtLinkProps = {
+  noPrefetch: makeProp(PROP_TYPE_BOOLEAN, false),
+  // Must be `null` to fall back to the value defined in the
+  // `nuxt.config.js` configuration file for `router.prefetchLinks`
+  // We convert `null` to `undefined`, so that Nuxt.js will use the
+  // compiled default
+  // Vue treats `undefined` as default of `false` for Boolean props,
+  // so we must set it as `null` here to be a true tri-state prop
+  prefetch: makeProp(PROP_TYPE_BOOLEAN, null)
+}
+
+// All `<b-link>` props
+export const props = makePropsConfigurable(
+  sortKeys({
+    ...nuxtLinkProps,
+    ...routerLinkProps,
+    active: makeProp(PROP_TYPE_BOOLEAN, false),
+    disabled: makeProp(PROP_TYPE_BOOLEAN, false),
+    href: makeProp(PROP_TYPE_STRING),
+    // Must be `null` if no value provided
+    rel: makeProp(PROP_TYPE_STRING, null),
+    // To support 3rd party router links based on `<router-link>` (i.e. `g-link` for Gridsome)
+    // Default is to auto choose between `<router-link>` and `<nuxt-link>`
+    // Gridsome doesn't provide a mechanism to auto detect and has caveats
+    // such as not supporting FQDN URLs or hash only URLs
+    routerComponentName: makeProp(PROP_TYPE_STRING),
+    target: makeProp(PROP_TYPE_STRING, '_self')
+  }),
+  NAME_LINK
+)
+
+// --- Main component ---
+
+// @vue/component
+export const BLink = /*#__PURE__*/ extend({
+  name: NAME_LINK,
+  // Mixin order is important!
+  mixins: [attrsMixin, listenersMixin, listenOnRootMixin, normalizeSlotMixin],
+  inheritAttrs: false,
+  props,
+  computed: {
+    computedTag() {
+      // We don't pass `this` as the first arg as we need reactivity of the props
+      const { to, disabled, routerComponentName } = this
+      return computeTag({ to, disabled, routerComponentName }, this)
+    },
+    isRouterLink() {
+      return isRouterLink(this.computedTag)
+    },
+    computedRel() {
+      // We don't pass `this` as the first arg as we need reactivity of the props
+      const { target, rel } = this
+      return computeRel({ target, rel })
+    },
+    computedHref() {
+      // We don't pass `this` as the first arg as we need reactivity of the props
+      const { to, href } = this
+      return computeHref({ to, href }, this.computedTag)
+    },
+    computedProps() {
+      const { event, prefetch, routerTag } = this
+      return this.isRouterLink
+        ? {
+            ...pluckProps(
+              omit(
+                { ...routerLinkProps, ...(this.computedTag === 'nuxt-link' ? nuxtLinkProps : {}) },
+                ['event', 'prefetch', 'routerTag']
+              ),
+              this
+            ),
+            // Only add these props, when actually defined
+            ...(event ? { event } : {}),
+            ...(isBoolean(prefetch) ? { prefetch } : {}),
+            // Pass `router-tag` as `tag` prop
+            ...(routerTag ? { tag: routerTag } : {})
+          }
+        : {}
+    },
+    computedAttrs() {
+      const {
+        bvAttrs,
+        computedHref: href,
+        computedRel: rel,
+        disabled,
+        target,
+        routerTag,
+        isRouterLink
+      } = this
+
+      return {
+        ...bvAttrs,
+        // If `href` attribute exists on `<router-link>` (even `undefined` or `null`)
+        // it fails working on SSR, so we explicitly add it here if needed
+        // (i.e. if `computedHref` is truthy)
+        ...(href ? { href } : {}),
+        // We don't render `rel` or `target` on non link tags when using `vue-router`
+        ...(isRouterLink && routerTag && !isTag(routerTag, 'a') ? {} : { rel, target }),
+        tabindex: disabled ? '-1' : isUndefined(bvAttrs.tabindex) ? null : bvAttrs.tabindex,
+        'aria-disabled': disabled ? 'true' : null
+      }
+    },
+    computedListeners() {
+      return {
+        // Transfer all listeners (native) to the root element
+        ...this.bvListeners,
+        // We want to overwrite any click handler since our callback
+        // will invoke the user supplied handler(s) if `!this.disabled`
+        click: this.onClick
+      }
+    }
+  },
+  methods: {
+    onClick(event) {
+      const eventIsEvent = isEvent(event)
+      const isRouterLink = this.isRouterLink
+      const suppliedHandler = this.bvListeners.click
+      if (eventIsEvent && this.disabled) {
+        // Stop event from bubbling up
+        // Kill the event loop attached to this specific `EventTarget`
+        // Needed to prevent `vue-router` for doing its thing
+        stopEvent(event, { immediatePropagation: true })
+      } else {
+        // Router links do not emit instance `click` events, so we
+        // add in an `$emit('click', event)` on its Vue instance
+        //
+        // seems not to be required for Vue3 compat build
+        /* istanbul ignore next: difficult to test, but we know it works */
+        if (isRouterLink) {
+          event.currentTarget.__vue__?.$emit(EVENT_NAME_CLICK, event)
+        }
+        // Call the suppliedHandler(s), if any provided
+        concat(suppliedHandler)
+          .filter(h => isFunction(h))
+          .forEach(handler => {
+            handler(...arguments)
+          })
+        // Emit the global `$root` click event
+        this.emitOnRoot(ROOT_EVENT_NAME_CLICKED, event)
+        // TODO: Remove deprecated 'clicked::link' event with next major release
+        this.emitOnRoot('clicked::link', event)
+      }
+      // Stop scroll-to-top behavior or navigation on
+      // regular links when href is just '#'
+      if (eventIsEvent && !isRouterLink && this.computedHref === '#') {
+        stopEvent(event, { propagation: false })
+      }
+    },
+    focus() {
+      attemptFocus(this.$el)
+    },
+    blur() {
+      attemptBlur(this.$el)
+    }
+  },
+  render(h) {
+    const { active, disabled } = this
+
+    return h(
+      this.computedTag,
+      {
+        class: { active, disabled },
+        attrs: this.computedAttrs,
+        props: this.computedProps,
+        // We must use `nativeOn` for `<router-link>`/`<nuxt-link>` instead of `on`
+        [this.isRouterLink ? 'nativeOn' : 'on']: this.computedListeners
+      },
+      this.normalizeSlot()
+    )
+  }
+})

package/src/vendor/bootstrap-vue/src/components/link/link.spec.js

@@ -0,0 +1,434 @@
+import VueRouter from 'vue-router'
+import { createLocalVue, mount } from '@vue/test-utils'
+import { BLink } from './link'
+import { Vue } from '../../vue'
+
+Vue.use(VueRouter)
+
+describe('b-link', () => {
+  it('has expected default structure', async () => {
+    const wrapper = mount(BLink)
+
+    expect(wrapper.element.tagName).toBe('A')
+    expect(wrapper.attributes('href')).toEqual('#')
+    expect(wrapper.attributes('target')).toEqual('_self')
+    expect(wrapper.attributes('rel')).toBeUndefined()
+    expect(wrapper.attributes('aria-disabled')).toBeUndefined()
+    expect(wrapper.classes().length).toBe(0)
+    expect(wrapper.text()).toEqual('')
+
+    wrapper.destroy()
+  })
+
+  it('renders content from default slot', async () => {
+    const wrapper = mount(BLink, {
+      slots: {
+        default: 'foobar'
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('A')
+    expect(wrapper.attributes('href')).toEqual('#')
+    expect(wrapper.attributes('target')).toEqual('_self')
+    expect(wrapper.attributes('rel')).toBeUndefined()
+    expect(wrapper.attributes('aria-disabled')).toBeUndefined()
+    expect(wrapper.classes().length).toBe(0)
+    expect(wrapper.text()).toEqual('foobar')
+
+    wrapper.destroy()
+  })
+
+  it('sets attribute href to user supplied value', async () => {
+    const wrapper = mount(BLink, {
+      propsData: {
+        href: '/foobar'
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('A')
+    expect(wrapper.attributes('href')).toEqual('/foobar')
+    expect(wrapper.attributes('target')).toEqual('_self')
+    expect(wrapper.attributes('rel')).toBeUndefined()
+    expect(wrapper.attributes('aria-disabled')).toBeUndefined()
+    expect(wrapper.classes().length).toBe(0)
+    expect(wrapper.text()).toEqual('')
+
+    wrapper.destroy()
+  })
+
+  it('sets attribute href when user supplied href is hash target', async () => {
+    const wrapper = mount(BLink, {
+      propsData: {
+        href: '#foobar'
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('A')
+    expect(wrapper.attributes('href')).toEqual('#foobar')
+    expect(wrapper.attributes('target')).toEqual('_self')
+    expect(wrapper.attributes('rel')).toBeUndefined()
+    expect(wrapper.attributes('aria-disabled')).toBeUndefined()
+    expect(wrapper.classes().length).toBe(0)
+    expect(wrapper.text()).toEqual('')
+
+    wrapper.destroy()
+  })
+
+  it('should set href to string `to` prop', async () => {
+    const wrapper = mount(BLink, {
+      propsData: {
+        to: '/foobar'
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('A')
+    expect(wrapper.attributes('href')).toEqual('/foobar')
+    expect(wrapper.attributes('target')).toEqual('_self')
+    expect(wrapper.attributes('rel')).toBeUndefined()
+    expect(wrapper.attributes('aria-disabled')).toBeUndefined()
+    expect(wrapper.classes().length).toBe(0)
+    expect(wrapper.text()).toEqual('')
+
+    wrapper.destroy()
+  })
+
+  it('should set href to path from `to` prop', async () => {
+    const wrapper = mount(BLink, {
+      propsData: {
+        to: { path: '/foobar' }
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('A')
+    expect(wrapper.attributes('href')).toEqual('/foobar')
+    expect(wrapper.attributes('target')).toEqual('_self')
+    expect(wrapper.attributes('rel')).toBeUndefined()
+    expect(wrapper.attributes('aria-disabled')).toBeUndefined()
+    expect(wrapper.classes().length).toBe(0)
+    expect(wrapper.text()).toEqual('')
+
+    wrapper.destroy()
+  })
+
+  it('should default rel to `noopener` when target==="_blank"', async () => {
+    const wrapper = mount(BLink, {
+      propsData: {
+        href: '/foobar',
+        target: '_blank'
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('A')
+    expect(wrapper.attributes('href')).toEqual('/foobar')
+    expect(wrapper.attributes('target')).toEqual('_blank')
+    expect(wrapper.attributes('rel')).toEqual('noopener')
+    expect(wrapper.classes().length).toBe(0)
+
+    wrapper.destroy()
+  })
+
+  it('should render the given rel to when target==="_blank"', async () => {
+    const wrapper = mount(BLink, {
+      propsData: {
+        href: '/foobar',
+        target: '_blank',
+        rel: 'alternate'
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('A')
+    expect(wrapper.attributes('href')).toEqual('/foobar')
+    expect(wrapper.attributes('target')).toEqual('_blank')
+    expect(wrapper.attributes('rel')).toEqual('alternate')
+    expect(wrapper.classes().length).toBe(0)
+
+    wrapper.destroy()
+  })
+
+  it('should add "active" class when prop active=true', async () => {
+    const wrapper = mount(BLink, {
+      propsData: {
+        active: true
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('A')
+    expect(wrapper.classes()).toContain('active')
+    expect(wrapper.classes().length).toBe(1)
+
+    wrapper.destroy()
+  })
+
+  it('should add aria-disabled="true" when disabled', async () => {
+    const wrapper = mount(BLink, {
+      propsData: {
+        disabled: true
+      }
+    })
+    expect(wrapper.attributes('aria-disabled')).toBeDefined()
+    expect(wrapper.attributes('aria-disabled')).toEqual('true')
+
+    wrapper.destroy()
+  })
+
+  it("should add '.disabled' class when prop disabled=true", async () => {
+    const wrapper = mount(BLink, {
+      propsData: {
+        disabled: true
+      }
+    })
+    expect(wrapper.classes()).toContain('disabled')
+
+    wrapper.destroy()
+  })
+
+  it('focus and blur methods work', async () => {
+    const wrapper = mount(BLink, {
+      attachTo: document.body,
+      propsData: {
+        href: '#foobar'
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('A')
+
+    expect(document.activeElement).not.toBe(wrapper.element)
+    wrapper.vm.focus()
+    expect(document.activeElement).toBe(wrapper.element)
+    wrapper.vm.blur()
+    expect(document.activeElement).not.toBe(wrapper.element)
+
+    wrapper.destroy()
+  })
+
+  describe('click handling', () => {
+    it('should invoke click handler bound by Vue when clicked on', async () => {
+      let called = 0
+      let event = null
+      const wrapper = mount(BLink, {
+        listeners: {
+          click: e => {
+            event = e
+            called++
+          }
+        }
+      })
+      expect(wrapper.element.tagName).toBe('A')
+      expect(called).toBe(0)
+      expect(event).toEqual(null)
+      await wrapper.find('a').trigger('click')
+      expect(called).toBe(1)
+      expect(event).toBeInstanceOf(MouseEvent)
+
+      wrapper.destroy()
+    })
+
+    it('should invoke multiple click handlers bound by Vue when clicked on', async () => {
+      const spy1 = jest.fn()
+      const spy2 = jest.fn()
+      const wrapper = mount(BLink, {
+        listeners: {
+          click: [spy1, spy2]
+        }
+      })
+      expect(wrapper.element.tagName).toBe('A')
+      expect(spy1).not.toHaveBeenCalled()
+      expect(spy2).not.toHaveBeenCalled()
+      await wrapper.find('a').trigger('click')
+      expect(spy1).toHaveBeenCalled()
+      expect(spy2).toHaveBeenCalled()
+
+      wrapper.destroy()
+    })
+
+    it('should NOT invoke click handler bound by Vue when disabled and clicked', async () => {
+      let called = 0
+      let event = null
+      const wrapper = mount(BLink, {
+        propsData: {
+          disabled: true
+        },
+        listeners: {
+          click: e => {
+            event = e
+            called++
+          }
+        }
+      })
+      expect(wrapper.element.tagName).toBe('A')
+      expect(called).toBe(0)
+      expect(event).toEqual(null)
+      await wrapper.find('a').trigger('click')
+      expect(called).toBe(0)
+      expect(event).toEqual(null)
+
+      wrapper.destroy()
+    })
+
+    it('should NOT invoke click handler bound via "addEventListener" when disabled and clicked', async () => {
+      const wrapper = mount(BLink, {
+        propsData: {
+          disabled: true
+        }
+      })
+      const spy = jest.fn()
+      expect(wrapper.element.tagName).toBe('A')
+      wrapper.find('a').element.addEventListener('click', spy)
+      await wrapper.find('a').trigger('click')
+      expect(spy).not.toHaveBeenCalled()
+
+      wrapper.destroy()
+    })
+
+    it('should emit "bv::link::clicked" on $root when clicked on', async () => {
+      const spy = jest.fn()
+      const App = {
+        render(h) {
+          return h('div', [h(BLink, { props: { href: '/foo' } }, 'link')])
+        }
+      }
+
+      const wrapper = mount(App)
+      expect(wrapper.vm).toBeDefined()
+      wrapper.vm.$root.$on('bv::link::clicked', spy)
+
+      await wrapper.find('a').trigger('click')
+      expect(spy).toHaveBeenCalled()
+
+      wrapper.destroy()
+    })
+
+    it('should not emit "bv::link::clicked" on $root when clicked on when disabled', async () => {
+      const spy = jest.fn()
+      const App = {
+        render(h) {
+          return h('div', [h(BLink, { props: { href: '/foo', disabled: true } }, 'link')])
+        }
+      }
+
+      const wrapper = mount(App)
+      expect(wrapper.vm).toBeDefined()
+      wrapper.vm.$root.$on('bv::link::clicked', spy)
+
+      await wrapper.find('a').trigger('click')
+      expect(spy).not.toHaveBeenCalled()
+
+      wrapper.destroy()
+    })
+
+    it('should emit "clicked::link" on $root when clicked on', async () => {
+      const spy = jest.fn()
+      const App = {
+        render(h) {
+          return h('div', [h(BLink, { props: { href: '/foo' } }, 'link')])
+        }
+      }
+
+      const wrapper = mount(App)
+      expect(wrapper.vm).toBeDefined()
+      wrapper.vm.$root.$on('clicked::link', spy)
+
+      await wrapper.find('a').trigger('click')
+      expect(spy).toHaveBeenCalled()
+
+      wrapper.destroy()
+    })
+
+    it('should not emit "clicked::link" on $root when clicked on when disabled', async () => {
+      const spy = jest.fn()
+      const App = {
+        render(h) {
+          return h('div', [h(BLink, { props: { href: '/foo', disabled: true } }, 'link')])
+        }
+      }
+
+      const wrapper = mount(App)
+      expect(wrapper.vm).toBeDefined()
+      wrapper.vm.$root.$on('clicked::link', spy)
+
+      await wrapper.find('a').trigger('click')
+      expect(spy).not.toHaveBeenCalled()
+
+      wrapper.destroy()
+    })
+  })
+
+  describe('router-link support', () => {
+    it('works', async () => {
+      const localVue = createLocalVue()
+
+      const router = new VueRouter({
+        mode: 'abstract',
+        routes: [
+          { path: '/', component: { name: 'R', template: '<div class="r">ROOT</div>' } },
+          { path: '/a', component: { name: 'A', template: '<div class="a">A</div>' } },
+          { path: '/b', component: { name: 'B', template: '<div class="a">B</div>' } }
+        ]
+      })
+
+      // Fake Gridsome `<g-link>` component
+      const GLink = {
+        name: 'GLink',
+        props: {
+          to: {
+            type: [String, Object],
+            default: ''
+          }
+        },
+        render(h) {
+          // We just us a simple A tag to render the
+          // fake `<g-link>` and assume `to` is a string
+          return h('a', { attrs: { href: this.to } }, [this.$slots.default])
+        }
+      }
+
+      localVue.component('GLink', GLink)
+
+      const App = {
+        router,
+        components: { BLink },
+        render(h) {
+          return h('main', [
+            // router-link
+            h('b-link', { props: { to: '/a' } }, ['to-a']),
+            // regular link
+            h('b-link', { props: { href: '/a' } }, ['href-a']),
+            // router-link
+            h('b-link', { props: { to: { path: '/b' } } }, ['to-path-b']),
+            // g-link
+            h('b-link', { props: { routerComponentName: 'g-link', to: '/a' } }, ['g-link-a']),
+            h('router-view')
+          ])
+        }
+      }
+
+      const wrapper = mount(App, {
+        localVue,
+        attachTo: document.body
+      })
+
+      expect(wrapper.vm).toBeDefined()
+      expect(wrapper.element.tagName).toBe('MAIN')
+
+      expect(wrapper.findAll('a').length).toBe(4)
+
+      const $links = wrapper.findAllComponents('a')
+      $links.wrappers.forEach($link => {
+        expect($link.vm).toBeDefined()
+        expect($links.at(0).vm.$options.name).toBe('BLink')
+      })
+      expect(
+        $links.wrappers.map($link => $link.findComponent({ name: 'RouterLink' }).exists())
+      ).toStrictEqual([true, false, true, false])
+
+      expect(
+        $links
+          .at(3)
+          .findComponent(GLink)
+          .exists()
+      ).toBe(true)
+
+      wrapper.destroy()
+    })
+  })
+})

package/src/vendor/bootstrap-vue/src/components/link/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@bootstrap-vue/link",
+  "version": "1.0.0",
+  "meta": {
+    "title": "Link",
+    "description": "Use BootstrapVue's custom <b-link> component for generating a standard <a> link or <router-link>. <b-link> supports the disabled state and click event propagation.",
+    "components": [
+      {
+        "component": "BLink",
+        "props": [
+          {
+            "prop": "href",
+            "description": "Denotes the target URL of the link for standard a links"
+          },
+          {
+            "prop": "rel",
+            "description": "Sets the 'rel' attribute on the rendered link"
+          },
+          {
+            "prop": "target",
+            "description": "Sets the 'target' attribute on the rendered link"
+          }
+        ],
+        "events": [
+          {
+            "event": "bv::link::clicked",
+            "description": "Emitted on `$root` when link was clicked",
+            "args": [
+              {
+                "name": "event",
+                "type": "MouseEvent",
+                "description": "Native click event"
+              }
+            ]
+          },
+          {
+            "event": "click",
+            "description": "Emitted when link was clicked",
+            "args": [
+              {
+                "name": "event",
+                "type": "MouseEvent",
+                "description": "Native click event"
+              }
+            ]
+          }
+        ],
+        "slots": [
+          {
+            "name": "default",
+            "description": "Content to place in the link"
+          }
+        ]
+      }
+    ]
+  }
+}