@gitlab/ui 114.1.0 → 114.1.1

package/src/vendor/bootstrap-vue/src/directives/tooltip/tooltip.spec.js

@@ -1,190 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { waitNT, waitRAF } from '../../../tests/utils'
-import { VBTooltip } from './tooltip'
-
-// Key which we use to store tooltip object on element
-const BV_TOOLTIP = '__BV_Tooltip__'
-
-/**
- * @gitlab/ui Note: These specs have been rewritten to be working with jest >= 29
- */
-describe('v-b-tooltip directive', () => {
-  const originalCreateRange = document.createRange
-  const origGetBCR = Element.prototype.getBoundingClientRect
-
-  beforeEach(() => {
-    // Hack to make Popper not bork out during tests
-    // Note: Popper still does not do any positioning calculation in JSDOM though
-    // So we cannot test actual positioning - just detect when it is open
-    // https://github.com/FezVrasta/popper.js/issues/478#issuecomment-407422016
-    document.createRange = () => ({
-      setStart: () => {},
-      setEnd: () => {},
-      commonAncestorContainer: {
-        nodeName: 'BODY',
-        ownerDocument: document
-      }
-    })
-    // Mock `getBoundingClientRect()` so that the `isVisible(el)` test returns `true`
-    // Needed for visibility checks of trigger element, etc.
-    Element.prototype.getBoundingClientRect = jest.fn(() => ({
-      width: 24,
-      height: 24,
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0
-    }))
-  })
-
-  afterEach(() => {
-    // Reset overrides
-    document.createRange = originalCreateRange
-    Element.prototype.getBoundingClientRect = origGetBCR
-  })
-
-  /**
-   * Little helper to wait until a tooltip is shown after a click
-   *
-   * @param $button {VueTestUtils.VueWrapper}
-   * @returns {Promise<void>}
-   */
-  function waitForTooltipAfterClickOn($button) {
-    return new Promise(resolve => {
-      const resolver = () => {
-        $button.vm.$root.$off('bv::tooltip::shown', resolver)
-        resolve()
-      }
-
-      $button.vm.$root.$on('bv::tooltip::shown', resolver)
-
-      // Trigger click
-      $button.trigger('click')
-    })
-  }
-
-  it('should have BVTooltip Vue class instance', async () => {
-    const App = {
-      directives: {
-        bTooltip: VBTooltip
-      },
-      template: '<button v-b-tooltip title="foobar">button</button>'
-    }
-
-    const $button = mount(App, {
-      attachTo: document.body
-    })
-
-    expect($button.vm).toBeDefined()
-    await waitNT($button.vm)
-    await waitRAF()
-
-    expect($button.element.tagName).toBe('BUTTON')
-
-    // Should have instance of popover class on it
-    expect($button.element[BV_TOOLTIP]).toBeDefined()
-    expect($button.element[BV_TOOLTIP].$options.name).toBe('BVTooltip')
-
-    $button.destroy()
-  })
-
-  it('should work', async () => {
-    const App = {
-      directives: {
-        bTooltip: VBTooltip
-      },
-      template: '<button v-b-tooltip.click.html title="<b>foobar</b>">button</button>'
-    }
-
-    const $button = mount(App, {
-      attachTo: document.body
-    })
-
-    expect($button.vm).toBeDefined()
-    await waitNT($button.vm)
-    await waitRAF()
-
-    expect($button.element.tagName).toBe('BUTTON')
-
-    // Should have instance of popover class on it
-    expect($button.element[BV_TOOLTIP]).toBeDefined()
-    expect($button.element[BV_TOOLTIP].$options.name).toBe('BVTooltip')
-
-    expect($button.attributes('aria-describedby')).toBeUndefined()
-
-    await waitForTooltipAfterClickOn($button)
-
-    expect($button.attributes('aria-describedby')).toBeDefined()
-    const adb = $button.attributes('aria-describedby')
-
-    const tip = document.querySelector(`#${adb}`)
-    expect(tip).not.toBe(null)
-    expect(tip.classList.contains('tooltip')).toBe(true)
-
-    $button.destroy()
-  })
-
-  it('should not show tooltip when title is empty', async () => {
-    const App = {
-      directives: {
-        bTooltip: VBTooltip
-      },
-      template: '<button v-b-tooltip.click title="">button</button>'
-    }
-
-    const $button = mount(App, {
-      attachTo: document.body
-    })
-
-    expect($button.vm).toBeDefined()
-    await waitNT($button.vm)
-    await waitRAF()
-
-    expect($button.element.tagName).toBe('BUTTON')
-
-    // Should have instance of popover class on it
-    expect($button.element[BV_TOOLTIP]).toBeDefined()
-    expect($button.element[BV_TOOLTIP].$options.name).toBe('BVTooltip')
-
-    expect($button.attributes('aria-describedby')).toBeUndefined()
-
-    // Trigger click
-    await $button.trigger('click')
-
-    expect($button.attributes('aria-describedby')).toBeUndefined()
-
-    $button.destroy()
-  })
-
-  it('variant and customClass should work', async () => {
-    const App = {
-      directives: {
-        bTooltip: VBTooltip
-      },
-      template: `<button v-b-tooltip.click.html.v-info="{ customClass: 'foobar'}" title="<b>foobar</b>">button</button>`
-    }
-
-    const $button = mount(App, {
-      attachTo: document.body
-    })
-
-    expect($button.vm).toBeDefined()
-    await waitNT($button.vm)
-    await waitRAF()
-
-    expect($button.element.tagName).toBe('BUTTON')
-
-    await waitForTooltipAfterClickOn($button)
-
-    expect($button.attributes('aria-describedby')).toBeDefined()
-    const adb = $button.attributes('aria-describedby')
-
-    const tip = document.querySelector(`#${adb}`)
-    expect(tip).not.toBe(null)
-    expect(tip.classList.contains('tooltip')).toBe(true)
-    expect(tip.classList.contains('b-tooltip-info')).toBe(true)
-    expect(tip.classList.contains('foobar')).toBe(true)
-
-    $button.destroy()
-  })
-})

package/src/vendor/bootstrap-vue/src/directives/visible/README.md

@@ -1,244 +0,0 @@
-# Visible
-
-> `v-b-visible` is a lightweight directive that allows you to react when an element becomes visible
-> in the viewport and/or when it moves out of the viewport (or is no longer visible).
-
-## Overview
-
-- `v-b-visible` will call your callback method with a boolean value indicating if the element is
-  visible (intersecting with the viewport) or not.
-- The directive can be placed on almost any element or component.
-- Changes in visibility can also be detected (such as `display: none`), as long as the element is
-  within (or partially within) the viewport, or within the optional offset. Note: transitioning to a
-  non-visible state due to `v-if="false"` _cannot_ be detected.
-- Internally, BootstrapVue uses this directive in several components, such as `<b-img-lazy>`.
-- The `v-b-visible` directive requires browser support of
-  [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
-  For older browsers that do not support `IntersectionObserver`, you will need to use a
-  [polyfill](/docs/#js).
-- If `IntersectionObserver` support is not detected, then `v-b-visible` will assume the element is
-  _always visible_, and will call the callback once with the argument set to `true`.
-
-## Directive syntax and usage
-
-```html
-<div v-b-visible.[mod1].[mod2]="callback">content</div>
-```
-
-Where `callback` is required:
-
-- A function reference that will be called whenever visibility changes. The callback is passed a
-  single boolean argument. `true` indicates that the element is intersecting (partially or entirely
-  visible) in the viewport, or `false` if the element is not visible/intersecting with the viewport.
-  The callback will be called each time the element's visibility changes (except when the `once`
-  modifier is used. See below for details)
-
-Where `[mod1]` or `[mod2]` can be (all optional):
-
-- A positive integer number representing the offset (margin) in pixels _away_ from the edge of the
-  _viewport_ to determine when the element is considered in (or just about to be in) the viewport.
-  The value adds a margin around the viewport. The default value is `0`.
-- The keyword `once`. When this modifier is present, the callback will be called only once the first
-  time the element is visible (with the argument of `true` indicating the element is
-  intersecting/visible). Note the callback _may be_ called prior to this with an argument of `false`
-  signifying the element is not intersecting/visible.
-
-The order of the modifiers is not important.
-
-### Usage syntax examples
-
-In all use cases, the callback function is required.
-
-#### Basic (no modifiers)
-
-```html
-<template>
-  <div v-b-visible="visibleHandler"> ... </div>
-</template>
-<script>
-export default {
-  methods: {
-    visibleHandler(isVisible) {
-      if (isVisible) {
-        // Do something
-      } else {
-        // Do something else
-      }
-    }
-  }
-}
-</script>
-```
-
-#### With viewport offset modifier
-
-In this example, the modifier value represents 350px (if the element is outside of the physical
-viewport by at least 350px, then it will be considered "visible"):
-
-```html
-<template>
-  <div v-b-visible.350="visibleHandler"> ... </div>
-</template>
-<script>
-export default {
-  methods: {
-    visibleHandler(isVisible) {
-      if (isVisible) {
-        // Do something
-      } else {
-        // Do something else
-      }
-    }
-  }
-}
-</script>
-```
-
-#### With the `once` modifier
-
-```html
-<template>
-  <div v-b-visible.once="visibleHandler"> ... </div>
-</template>
-<script>
-export default {
-  methods: {
-    visibleHandler(isVisible) {
-      if (isVisible) {
-        // This will only ever happen once, when the
-        // element has become visible for the first time
-      } else {
-        // This may happen zero or more times before
-        // the element becomes visible, but will never
-        // happen after the element has become visible
-      }
-    }
-  }
-}
-</script>
-```
-
-#### With both `once` and offset modifiers
-
-```html
-<template>
-  <div v-b-visible.once.350="visibleHandler"> ... </div>
-</template>
-<script>
-export default {
-  methods: {
-    visibleHandler(isVisible) {
-      if (isVisible) {
-        // This will only ever happen once, when the
-        // element is outside of the physical viewport
-        // by at least 350px for the first time
-      } else {
-        // This may happen zero or more times before
-        // the element becomes visible, but will never
-        // happen after the element has become visible
-      }
-    }
-  }
-}
-</script>
-```
-
-## Live examples
-
-Here are two live examples showing two common use cases.
-
-### Visibility of scrolled content
-
-Scroll the container to see the reaction when the `<b-badge>` scrolls into view. Note that
-visibility state will also change if the element is scrolled out of the viewport.
-
-```html
-<template>
-  <div>
-    <div
-      :class="[isVisible ? 'bg-info' : 'bg-light', 'border', 'p-2', 'text-center']"
-      style="height: 85px; overflow-y: scroll;"
-    >
-      <p>{{ text }}</p>
-      <b-badge v-b-visible="handleVisibility">Element with v-b-visible directive</b-badge>
-      <p>{{ text }}</p>
-    </div>
-    <p class="mt-2">
-      Visible: {{ isVisible }}
-    </p>
-  </div>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        isVisible: false,
-        text: `
-          Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
-          tempor. Laborum consequat non elit enim exercitation cillum aliqua
-          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
-          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
-          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
-          nisi sit est tempor laborum mollit labore officia laborum excepteur commodo
-          non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum
-          commodo tempor sunt in proident. Non elixir food exorcism nacho tequila tasty.
-        `
-      }
-    },
-    methods: {
-      handleVisibility(isVisible) {
-        this.isVisible = isVisible
-      }
-    }
-  }
-</script>
-
-<!-- v-b-visible-scroll.vue -->
-```
-
-One use case for this, when combined with the `once` modifier, is to see if a user has scrolled to
-the bottom of a page or scrollable div (i.e. has "read" the entire terms of service).
-
-### CSS display visibility detection
-
-Click the button to change the `<div>` visibility state. Note that visibility state will also change
-if the element is scrolled out of the viewport.
-
-```html
-<template>
-  <div>
-    <b-button @click="show = !show" class="mb-2">Toggle display</b-button>
-    <p>Visible: {{ isVisible }}</p>
-    <div class="border p-3" style="height: 6em;">
-      <!-- We use Vue's `v-show` directive to control the CSS `display` of the div -->
-      <div v-show="show" class="bg-info p-3">
-        <b-badge v-b-visible="handleVisibility">Element with v-b-visible directive</b-badge>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        show: true,
-        isVisible: false
-      }
-    },
-    methods: {
-      handleVisibility(isVisible) {
-        this.isVisible = isVisible
-      }
-    }
-  }
-</script>
-
-<!-- v-b-visible-display.vue -->
-```
-
-## See also
-
-For more details on `IntersectionObserver`, refer to the
-[MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)

package/src/vendor/bootstrap-vue/src/directives/visible/package.json

@@ -1,24 +0,0 @@
-{
-  "name": "@bootstrap-vue/v-b-visible",
-  "version": "0.0.0",
-  "meta": {
-    "title": "Visible",
-    "description": "The `v-b-visible` directive allows you to react when an element becomes visible in the viewport.",
-    "directive": "VBVisible",
-    "version": "2.1.0",
-    "expression": [
-      "Function"
-    ],
-    "modifiers": [
-      {
-        "name": "once",
-        "description": "Only calls the callback once when the element becomes visible in the viewport"
-      },
-      {
-        "name": "{###}",
-        "pattern": "[0-9]+",
-        "description": "An offset value in pixels (where `{###}` is the number of pixels) relative to the viewport, defaults to 0. Negative values allowed"
-      }
-    ]
-  }
-}

package/src/vendor/bootstrap-vue/src/mixins/attrs.spec.js

@@ -1,194 +0,0 @@
-import { isVue3 } from '../vue'
-import { mount } from '@vue/test-utils'
-import { attrsMixin } from './attrs'
-
-// Note: The following tests indirectly test `utils/cache`
-
-describe('mixins > attrs', () => {
-  it('works', async () => {
-    const BTest = {
-      name: 'BTest',
-      mixins: [attrsMixin],
-      inheritAttrs: false,
-      render(h) {
-        return h('section', [h('article', { attrs: this.bvAttrs })])
-      }
-    }
-    const App = {
-      name: 'App',
-      props: {
-        attrs: {
-          type: Object,
-          default: () => ({})
-        }
-      },
-      render(h) {
-        return h(BTest, { attrs: this.attrs })
-      }
-    }
-
-    const wrapper = mount(App)
-
-    expect(wrapper).toBeDefined()
-    expect(wrapper.vm).toBeDefined()
-    expect(wrapper.element.tagName).toBe('SECTION')
-
-    const $test = wrapper.findComponent(BTest)
-
-    expect($test.exists()).toBe(true)
-    expect($test.vm).toBeDefined()
-
-    const $section = $test.find('section')
-    expect($section.exists()).toBe(true)
-
-    const $article = $test.find('article')
-    expect($article.exists()).toBe(true)
-
-    expect($section.attributes()).toEqual({})
-    expect($article.attributes()).toEqual({})
-
-    expect($test.vm.bvAttrs).toBeDefined()
-    expect($test.vm.bvAttrs.foo).toBeUndefined()
-    expect($test.vm.bvAttrs.baz).toBeUndefined()
-
-    // Correctly adds new attrs data
-    await wrapper.setProps({
-      attrs: { foo: 'bar' }
-    })
-
-    expect($section.attributes()).toEqual({})
-    expect($article.attributes()).toEqual({ foo: 'bar' })
-    expect($test.vm.bvAttrs.foo).toEqual('bar')
-    expect($test.vm.bvAttrs.baz).toBeUndefined()
-
-    // Correctly updates attrs data
-    await wrapper.setProps({
-      attrs: { foo: 'bar', baz: 'biz' }
-    })
-
-    expect($section.attributes()).toEqual({})
-    expect($article.attributes()).toEqual({ foo: 'bar', baz: 'biz' })
-    expect($test.vm.bvAttrs.foo).toEqual('bar')
-    expect($test.vm.bvAttrs.baz).toEqual('biz')
-
-    // Correctly removes attrs data
-    await wrapper.setProps({
-      attrs: { foo: 'bar' }
-    })
-
-    expect($section.attributes()).toEqual({})
-    expect($article.attributes()).toEqual({ foo: 'bar' })
-    expect($test.vm.bvAttrs.foo).toEqual('bar')
-    expect($test.vm.bvAttrs.baz).toBeUndefined()
-
-    // Correctly removes all attrs data
-    await wrapper.setProps({ attrs: {} })
-
-    expect($section.attributes()).toEqual({})
-    expect($article.attributes()).toEqual({})
-    expect($test.vm.bvAttrs.foo).toBeUndefined()
-    expect($test.vm.bvAttrs.baz).toBeUndefined()
-
-    wrapper.destroy()
-  })
-
-  it('does not re-render parent child components', async () => {
-    let input1RenderCount = 0
-    let input2RenderCount = 0
-
-    const Input1 = {
-      props: ['value'],
-      render(h) {
-        input1RenderCount++
-        return h('input', {
-          attrs: { ...this.$attrs, value: this.value },
-          domProps: { value: this.value },
-          on: { input: e => this.$emit('input', e.target.value) }
-        })
-      }
-    }
-    const Input2 = {
-      props: ['value'],
-      mixins: [attrsMixin],
-      render(h) {
-        input2RenderCount++
-        return h('input', {
-          attrs: { ...this.bvAttrs, value: this.value },
-          domProps: { value: this.value },
-          on: { input: e => this.$emit('input', e.target.value) }
-        })
-      }
-    }
-
-    const App1 = {
-      components: { Input1 },
-      props: ['value1', 'value2'],
-      template: `<div>
-        <Input1 v-model="value1" />
-        <Input1 v-model="value2" />
-      </div>`
-    }
-    const App2 = {
-      components: { Input2 },
-      props: ['value1', 'value2'],
-      template: `<div>
-        <Input2 v-model="value1" />
-        <Input2 v-model="value2" />
-      </div>`
-    }
-
-    const wrapper1 = mount(App1)
-    const wrapper2 = mount(App2)
-
-    const $inputs1 = wrapper1.findAllComponents(Input1)
-    expect($inputs1.length).toBe(2)
-    expect($inputs1.at(0)).toBeDefined()
-    expect($inputs1.at(0).vm.value).toBe(undefined)
-    expect($inputs1.at(1)).toBeDefined()
-    expect($inputs1.at(1).vm.value).toBe(undefined)
-    expect(input1RenderCount).toBe(2)
-
-    const $inputs2 = wrapper2.findAllComponents(Input2)
-    expect($inputs2.length).toBe(2)
-    expect($inputs2.at(0)).toBeDefined()
-    expect($inputs2.at(0).vm.value).toBe(undefined)
-    expect($inputs2.at(1)).toBeDefined()
-    expect($inputs2.at(1).vm.value).toBe(undefined)
-    expect(input2RenderCount).toBe(2)
-
-    // Update the value for the first `Input1`
-    await wrapper1.setProps({ value1: 'foo' })
-    expect($inputs1.at(0).vm.value).toBe('foo')
-    expect($inputs1.at(1).vm.value).toBe(undefined)
-    if (!isVue3) {
-      // Both `Input1`'s are re-rendered (See: https://github.com/vuejs/vue/issues/7257)
-      expect(input1RenderCount).toBe(4)
-    }
-
-    // Update the value for the second `Input1`
-    await wrapper1.setProps({ value2: 'bar' })
-    expect($inputs1.at(0).vm.value).toBe('foo')
-    expect($inputs1.at(1).vm.value).toBe('bar')
-    if (!isVue3) {
-      // Both `Input1`'s are re-rendered (See: https://github.com/vuejs/vue/issues/7257)
-      expect(input1RenderCount).toBe(6)
-    }
-
-    // Update the value for the first `Input2`
-    await wrapper2.setProps({ value1: 'foo' })
-    expect($inputs2.at(0).vm.value).toBe('foo')
-    expect($inputs2.at(1).vm.value).toBe(undefined)
-    // With `attrsMixin` only the affected `Input2` is re-rendered
-    expect(input2RenderCount).toBe(3)
-
-    // Update the value for the second `Input2`
-    await wrapper2.setProps({ value2: 'bar' })
-    expect($inputs2.at(0).vm.value).toBe('foo')
-    expect($inputs2.at(1).vm.value).toBe('bar')
-    // With `attrsMixin` only the affected `Input2` is re-rendered
-    expect(input2RenderCount).toBe(4)
-
-    wrapper1.destroy()
-    wrapper2.destroy()
-  })
-})

package/src/vendor/bootstrap-vue/src/mixins/click-out.spec.js

@@ -1,52 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { waitNT } from '../../tests/utils'
-import { clickOutMixin } from './click-out'
-
-describe('utils/click-out', () => {
-  it('works', async () => {
-    let count = 0
-    const App = {
-      mixins: [clickOutMixin],
-      // `listenForClickOut` comes from the mixin data
-      created() {
-        this.listenForClickOut = true
-      },
-      methods: {
-        clickOutHandler() {
-          count++
-        }
-      },
-      render(h) {
-        return h('div', [h('button', 'button')])
-      }
-    }
-
-    const wrapper = mount(App, {
-      attachTo: document.body
-    })
-
-    const clickEvent = new MouseEvent('click')
-
-    expect(wrapper).toBeDefined()
-    expect(count).toBe(0)
-    expect(wrapper.vm.listenForClickOut).toBe(true)
-
-    // When `this.listenForClickOut` is `true`
-    expect(count).toBe(0)
-    await wrapper.find('button').trigger('click')
-    expect(count).toBe(0)
-    await wrapper.trigger('click')
-    expect(count).toBe(0)
-    document.dispatchEvent(clickEvent)
-    await waitNT(wrapper.vm)
-    expect(count).toBe(1)
-
-    // When `this.listenForClickOut` is `false`
-    await wrapper.setData({ listenForClickOut: false })
-    document.dispatchEvent(clickEvent)
-    await waitNT(wrapper.vm)
-    expect(count).toBe(1)
-
-    wrapper.destroy()
-  })
-})