@gitlab/ui 92.2.0 → 92.3.0

package/src/vendor/bootstrap-vue/src/components/image/img-lazy.js

@@ -1,161 +0,0 @@
-import { extend } from '../../vue'
-import { NAME_IMG_LAZY } from '../../constants/components'
-import { HAS_INTERACTION_OBSERVER_SUPPORT } from '../../constants/env'
-import { MODEL_EVENT_NAME_PREFIX } from '../../constants/events'
-import { PROP_TYPE_BOOLEAN, PROP_TYPE_NUMBER_STRING, PROP_TYPE_STRING } from '../../constants/props'
-import { concat } from '../../utils/array'
-import { requestAF } from '../../utils/dom'
-import { identity } from '../../utils/identity'
-import { toInteger } from '../../utils/number'
-import { omit } from '../../utils/object'
-import { makeProp, makePropsConfigurable, pluckProps } from '../../utils/props'
-import { VBVisible } from '../../directives/visible/visible'
-import { BImg, props as BImgProps } from './img'
-
-// --- Constants ---
-
-const MODEL_PROP_NAME_SHOW = 'show'
-const MODEL_EVENT_NAME_SHOW = MODEL_EVENT_NAME_PREFIX + MODEL_PROP_NAME_SHOW
-
-// --- Props ---
-
-const imgProps = omit(BImgProps, ['blank'])
-
-export const props = makePropsConfigurable(
-  {
-    ...imgProps,
-    blankHeight: makeProp(PROP_TYPE_NUMBER_STRING),
-    // If `null`, a blank image is generated
-    blankSrc: makeProp(PROP_TYPE_STRING, null),
-    blankWidth: makeProp(PROP_TYPE_NUMBER_STRING),
-    // Distance away from viewport (in pixels)
-    // before being considered "visible"
-    offset: makeProp(PROP_TYPE_NUMBER_STRING, 360),
-    [MODEL_PROP_NAME_SHOW]: makeProp(PROP_TYPE_BOOLEAN, false)
-  },
-  NAME_IMG_LAZY
-)
-
-// --- Main component ---
-
-// @vue/component
-export const BImgLazy = /*#__PURE__*/ extend({
-  name: NAME_IMG_LAZY,
-  directives: {
-    'b-visible': VBVisible
-  },
-  props,
-  data() {
-    return {
-      isShown: this[MODEL_PROP_NAME_SHOW]
-    }
-  },
-  computed: {
-    computedSrc() {
-      const { blankSrc } = this
-      return !blankSrc || this.isShown ? this.src : blankSrc
-    },
-    computedBlank() {
-      return !(this.isShown || this.blankSrc)
-    },
-    computedWidth() {
-      const { width } = this
-      return this.isShown ? width : this.blankWidth || width
-    },
-    computedHeight() {
-      const { height } = this
-      return this.isShown ? height : this.blankHeight || height
-    },
-    computedSrcset() {
-      const srcset = concat(this.srcset)
-        .filter(identity)
-        .join(',')
-
-      return srcset && (!this.blankSrc || this.isShown) ? srcset : null
-    },
-    computedSizes() {
-      const sizes = concat(this.sizes)
-        .filter(identity)
-        .join(',')
-
-      return sizes && (!this.blankSrc || this.isShown) ? sizes : null
-    }
-  },
-  watch: {
-    [MODEL_PROP_NAME_SHOW](newValue, oldValue) {
-      if (newValue !== oldValue) {
-        // If `IntersectionObserver` support is not available, image is always shown
-        const visible = HAS_INTERACTION_OBSERVER_SUPPORT ? newValue : true
-
-        this.isShown = visible
-
-        // Ensure the show prop is synced (when no `IntersectionObserver`)
-        if (newValue !== visible) {
-          this.$nextTick(this.updateShowProp)
-        }
-      }
-    },
-    isShown(newValue, oldValue) {
-      // Update synched show prop
-      if (newValue !== oldValue) {
-        this.updateShowProp()
-      }
-    }
-  },
-  mounted() {
-    // If `IntersectionObserver` is not available, image is always shown
-    this.$nextTick(() => {
-      this.isShown = HAS_INTERACTION_OBSERVER_SUPPORT ? this[MODEL_PROP_NAME_SHOW] : true
-    })
-  },
-  methods: {
-    updateShowProp() {
-      this.$emit(MODEL_EVENT_NAME_SHOW, this.isShown)
-    },
-    doShow(visible) {
-      // If IntersectionObserver is not supported, the callback
-      // will be called with `null` rather than `true` or `false`
-      if ((visible || visible === null) && !this.isShown) {
-        // In a `requestAF()` to render the `blank` placeholder properly
-        // for fast loading images in some browsers (i.e. Firefox)
-        requestAF(() => {
-          this.isShown = true
-        })
-      }
-    }
-  },
-  render(h) {
-    const directives = []
-    if (!this.isShown) {
-      // We only add the visible directive if we are not shown
-      directives.push({
-        // Visible directive will silently do nothing if
-        // `IntersectionObserver` is not supported
-        name: 'b-visible',
-        // Value expects a callback (passed one arg of `visible` = `true` or `false`)
-        value: this.doShow,
-        modifiers: {
-          // Root margin from viewport
-          [`${toInteger(this.offset, 0)}`]: true,
-          // Once the image is shown, stop observing
-          once: true
-        }
-      })
-    }
-
-    return h(BImg, {
-      directives,
-      props: {
-        // Passthrough props
-        ...pluckProps(imgProps, this.$props),
-        // Computed value props
-        src: this.computedSrc,
-        blank: this.computedBlank,
-        width: this.computedWidth,
-        height: this.computedHeight,
-        srcset: this.computedSrcset,
-        sizes: this.computedSizes
-      }
-    })
-  }
-})

package/src/vendor/bootstrap-vue/src/components/image/img-lazy.spec.js

@@ -1,96 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { waitNT, waitRAF } from '../../../tests/utils'
-import { BImgLazy } from './img-lazy'
-
-const src = 'https://picsum.photos/1024/400/?image=41'
-
-describe('img-lazy', () => {
-  it('has root element "img"', async () => {
-    const wrapper = mount(BImgLazy, {
-      attachTo: document.body,
-      propsData: {
-        src
-      }
-    })
-    expect(wrapper.element.tagName).toBe('IMG')
-
-    wrapper.destroy()
-  })
-
-  it('is initially shown show prop is set', async () => {
-    const wrapper = mount(BImgLazy, {
-      attachTo: document.body,
-      propsData: {
-        src,
-        show: true
-      }
-    })
-    expect(wrapper.element.tagName).toBe('IMG')
-
-    expect(wrapper.attributes('src')).toBeDefined()
-    expect(wrapper.attributes('src')).toBe(src)
-
-    wrapper.destroy()
-  })
-
-  it('shows when IntersectionObserver not supported', async () => {
-    const wrapper = mount(BImgLazy, {
-      attachTo: document.body,
-      propsData: {
-        src,
-        show: false
-      }
-    })
-
-    expect(wrapper.element.tagName).toBe('IMG')
-
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitNT(wrapper.vm)
-    await waitRAF()
-
-    expect(wrapper.vm.isShown).toBe(true)
-
-    // It appears that vue-test-utils does not run unbind when the directive is
-    // removed from the element. Only when the component is destroyed... unlike Vue
-    // Our directive instance should not exist
-    // let observer = wrapper.element.__bv__visibility_observer
-    // expect(observer).toBeUndefined()
-
-    expect(wrapper.attributes('src')).toBeDefined()
-    expect(wrapper.attributes('src')).toContain(src)
-
-    await wrapper.setProps({
-      show: true
-    })
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitNT(wrapper.vm)
-    await waitRAF()
-
-    expect(wrapper.attributes('src')).toBe(src)
-    expect(wrapper.vm.isShown).toBe(true)
-
-    // Our directive instance should not exist
-    // observer = wrapper.element.__bv__visibility_observer
-    // expect(observer).toBeUndefined()
-
-    await wrapper.setProps({
-      show: false
-    })
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitNT(wrapper.vm)
-    await waitRAF()
-
-    expect(wrapper.attributes('src')).toContain(src)
-
-    // Our directive instance should not exist
-    // observer = wrapper.element.__bv__visibility_observer
-    // expect(observer).toBeUndefined()
-
-    wrapper.destroy()
-  })
-})

package/src/vendor/bootstrap-vue/src/components/image/img.js

@@ -1,139 +0,0 @@
-import { extend, mergeData } from '../../vue'
-import { NAME_IMG } from '../../constants/components'
-import {
-  PROP_TYPE_ARRAY_STRING,
-  PROP_TYPE_BOOLEAN,
-  PROP_TYPE_BOOLEAN_STRING,
-  PROP_TYPE_NUMBER_STRING,
-  PROP_TYPE_STRING
-} from '../../constants/props'
-import { concat } from '../../utils/array'
-import { identity } from '../../utils/identity'
-import { isString } from '../../utils/inspect'
-import { toInteger } from '../../utils/number'
-import { makeProp, makePropsConfigurable } from '../../utils/props'
-import { toString } from '../../utils/string'
-
-// --- Constants --
-
-// Blank image with fill template
-const BLANK_TEMPLATE =
-  '<svg width="%{w}" height="%{h}" ' +
-  'xmlns="http://www.w3.org/2000/svg" ' +
-  'viewBox="0 0 %{w} %{h}" preserveAspectRatio="none">' +
-  '<rect width="100%" height="100%" style="fill:%{f};"></rect>' +
-  '</svg>'
-
-// --- Helper methods ---
-
-const makeBlankImgSrc = (width, height, color) => {
-  const src = encodeURIComponent(
-    BLANK_TEMPLATE.replace('%{w}', toString(width))
-      .replace('%{h}', toString(height))
-      .replace('%{f}', color)
-  )
-  return `data:image/svg+xml;charset=UTF-8,${src}`
-}
-
-// --- Props ---
-
-export const props = makePropsConfigurable(
-  {
-    alt: makeProp(PROP_TYPE_STRING),
-    blank: makeProp(PROP_TYPE_BOOLEAN, false),
-    blankColor: makeProp(PROP_TYPE_STRING, 'transparent'),
-    block: makeProp(PROP_TYPE_BOOLEAN, false),
-    center: makeProp(PROP_TYPE_BOOLEAN, false),
-    fluid: makeProp(PROP_TYPE_BOOLEAN, false),
-    // Gives fluid images class `w-100` to make them grow to fit container
-    fluidGrow: makeProp(PROP_TYPE_BOOLEAN, false),
-    height: makeProp(PROP_TYPE_NUMBER_STRING),
-    left: makeProp(PROP_TYPE_BOOLEAN, false),
-    right: makeProp(PROP_TYPE_BOOLEAN, false),
-    // Possible values:
-    //   `false`: no rounding of corners
-    //   `true`: slightly rounded corners
-    //   'top': top corners rounded
-    //   'right': right corners rounded
-    //   'bottom': bottom corners rounded
-    //   'left': left corners rounded
-    //   'circle': circle/oval
-    //   '0': force rounding off
-    rounded: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
-    sizes: makeProp(PROP_TYPE_ARRAY_STRING),
-    src: makeProp(PROP_TYPE_STRING),
-    srcset: makeProp(PROP_TYPE_ARRAY_STRING),
-    thumbnail: makeProp(PROP_TYPE_BOOLEAN, false),
-    width: makeProp(PROP_TYPE_NUMBER_STRING)
-  },
-  NAME_IMG
-)
-
-// --- Main component ---
-
-// @vue/component
-export const BImg = /*#__PURE__*/ extend({
-  name: NAME_IMG,
-  functional: true,
-  props,
-  render(h, { props, data }) {
-    let { alt, src, block, fluidGrow, rounded } = props
-    let width = toInteger(props.width) || null
-    let height = toInteger(props.height) || null
-    let align = null
-    let srcset = concat(props.srcset)
-      .filter(identity)
-      .join(',')
-    let sizes = concat(props.sizes)
-      .filter(identity)
-      .join(',')
-
-    if (props.blank) {
-      if (!height && width) {
-        height = width
-      } else if (!width && height) {
-        width = height
-      }
-      if (!width && !height) {
-        width = 1
-        height = 1
-      }
-      // Make a blank SVG image
-      src = makeBlankImgSrc(width, height, props.blankColor || 'transparent')
-      // Disable srcset and sizes
-      srcset = null
-      sizes = null
-    }
-    if (props.left) {
-      align = 'float-left'
-    } else if (props.right) {
-      align = 'float-right'
-    } else if (props.center) {
-      align = 'mx-auto'
-      block = true
-    }
-
-    return h(
-      'img',
-      mergeData(data, {
-        attrs: {
-          src,
-          alt,
-          width: width ? toString(width) : null,
-          height: height ? toString(height) : null,
-          srcset: srcset || null,
-          sizes: sizes || null
-        },
-        class: {
-          'img-thumbnail': props.thumbnail,
-          'img-fluid': props.fluid || fluidGrow,
-          'w-100': fluidGrow,
-          rounded: rounded === '' || rounded === true,
-          [`rounded-${rounded}`]: isString(rounded) && rounded !== '',
-          [align]: align,
-          'd-block': block
-        }
-      })
-    )
-  }
-})

package/src/vendor/bootstrap-vue/src/components/image/img.spec.js

@@ -1,255 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { BImg } from './img'
-
-describe('img', () => {
-  it('has expected default structure', async () => {
-    const wrapper = mount(BImg)
-
-    expect(wrapper.element.tagName).toBe('IMG')
-    expect(wrapper.classes().length).toBe(0)
-    expect(wrapper.attributes('width')).toBeUndefined()
-    expect(wrapper.attributes('height')).toBeUndefined()
-
-    wrapper.destroy()
-  })
-
-  it('has src attribute when prop src is set', async () => {
-    const wrapper = mount(BImg, {
-      propsData: {
-        src: '/foo/bar'
-      }
-    })
-
-    expect(wrapper.element.tagName).toBe('IMG')
-
-    expect(wrapper.attributes('src')).toBeDefined()
-    expect(wrapper.attributes('src')).toEqual('/foo/bar')
-    expect(wrapper.attributes('width')).toBeUndefined()
-    expect(wrapper.attributes('height')).toBeUndefined()
-
-    wrapper.destroy()
-  })
-
-  it('default does not have attributes alt, width, or height', async () => {
-    const wrapper = mount(BImg, {
-      context: {
-        props: {
-          src: 'https://picsum.photos/600/300/?image=25'
-        }
-      }
-    })
-
-    expect(wrapper.attributes('alt')).toBeUndefined()
-    expect(wrapper.attributes('width')).toBeUndefined()
-    expect(wrapper.attributes('height')).toBeUndefined()
-
-    wrapper.destroy()
-  })
-
-  it('should have class "img-fluid" when prop fluid set', async () => {
-    const wrapper = mount(BImg, {
-      propsData: {
-        src: '/foo/bar',
-        fluid: true
-      }
-    })
-
-    expect(wrapper.element.tagName).toBe('IMG')
-    expect(wrapper.classes()).toContain('img-fluid')
-    expect(wrapper.classes().length).toBe(1)
-
-    wrapper.destroy()
-  })
-
-  it('should have class "img-fluid" and "w-100" when prop fluid-grow set', async () => {
-    const wrapper = mount(BImg, {
-      propsData: {
-        src: '/foo/bar',
-        fluidGrow: true
-      }
-    })
-
-    expect(wrapper.element.tagName).toBe('IMG')
-    expect(wrapper.classes()).toContain('img-fluid')
-    expect(wrapper.classes()).toContain('w-100')
-    expect(wrapper.classes().length).toBe(2)
-
-    wrapper.destroy()
-  })
-
-  it('should have class "img-thumbnail" when prop thumbnail set', async () => {
-    const wrapper = mount(BImg, {
-      propsData: {
-        src: '/foo/bar',
-        thumbnail: true
-      }
-    })
-
-    expect(wrapper.element.tagName).toBe('IMG')
-    expect(wrapper.classes()).toContain('img-thumbnail')
-    expect(wrapper.classes().length).toBe(1)
-
-    wrapper.destroy()
-  })
-
-  it('should have class "rounded" when prop rounded true', async () => {
-    const wrapper = mount(BImg, {
-      propsData: {
-        src: '/foo/bar',
-        rounded: true
-      }
-    })
-
-    expect(wrapper.element.tagName).toBe('IMG')
-    expect(wrapper.classes()).toContain('rounded')
-    expect(wrapper.classes().length).toBe(1)
-
-    wrapper.destroy()
-  })
-
-  it('should have class "rounded-circle" when prop rounded=circle', async () => {
-    const wrapper = mount(BImg, {
-      propsData: {
-        src: '/foo/bar',
-        rounded: 'circle'
-      }
-    })
-
-    expect(wrapper.element.tagName).toBe('IMG')
-    expect(wrapper.classes()).toContain('rounded-circle')
-    expect(wrapper.classes().length).toBe(1)
-
-    wrapper.destroy()
-  })
-
-  it('should have class "float-left" when prop left set', async () => {
-    const wrapper = mount(BImg, {
-      propsData: {
-        src: '/foo/bar',
-        left: true
-      }
-    })
-
-    expect(wrapper.element.tagName).toBe('IMG')
-    expect(wrapper.classes()).toContain('float-left')
-    expect(wrapper.classes().length).toBe(1)
-
-    wrapper.destroy()
-  })
-
-  it('should have class "float-right" when prop right set', async () => {
-    const wrapper = mount(BImg, {
-      propsData: {
-        src: '/foo/bar',
-        right: true
-      }
-    })
-
-    expect(wrapper.element.tagName).toBe('IMG')
-    expect(wrapper.classes()).toContain('float-right')
-    expect(wrapper.classes().length).toBe(1)
-
-    wrapper.destroy()
-  })
-
-  it('should have classes "mx-auto" and "d-block" when prop center set', async () => {
-    const wrapper = mount(BImg, {
-      propsData: {
-        src: '/foo/bar',
-        center: true
-      }
-    })
-
-    expect(wrapper.element.tagName).toBe('IMG')
-    expect(wrapper.classes()).toContain('mx-auto')
-    expect(wrapper.classes()).toContain('d-block')
-    expect(wrapper.classes().length).toBe(2)
-
-    wrapper.destroy()
-  })
-
-  it('has data URI when blank is true', async () => {
-    const wrapper = mount(BImg, {
-      propsData: {
-        blank: true
-      }
-    })
-
-    expect(wrapper.element.tagName).toBe('IMG')
-
-    expect(wrapper.attributes('src')).toBeDefined()
-    expect(wrapper.attributes('src')).toContain('data:image/svg+xml;charset=UTF-8')
-    expect(wrapper.attributes('width')).toBe('1')
-    expect(wrapper.attributes('height')).toBe('1')
-
-    wrapper.destroy()
-  })
-
-  it('has color when blank is true and blank-color set', async () => {
-    const wrapper = mount(BImg, {
-      propsData: {
-        blank: true,
-        blankColor: 'blue'
-      }
-    })
-
-    expect(wrapper.element.tagName).toBe('IMG')
-
-    expect(wrapper.attributes('src')).toBeDefined()
-    expect(wrapper.attributes('src')).toContain('data:image/svg+xml;charset=UTF-8')
-    expect(wrapper.attributes('src')).toContain('blue')
-
-    wrapper.destroy()
-  })
-
-  it('has width and height when blank is true and width/height props set', async () => {
-    const wrapper = mount(BImg, {
-      propsData: {
-        blank: true,
-        width: 300,
-        height: 200
-      }
-    })
-
-    expect(wrapper.element.tagName).toBe('IMG')
-
-    expect(wrapper.attributes('src')).toBeDefined()
-    expect(wrapper.attributes('src')).toContain('data:image/svg+xml;charset=UTF-8')
-    expect(wrapper.attributes('width')).toBe('300')
-    expect(wrapper.attributes('height')).toBe('200')
-
-    wrapper.destroy()
-  })
-
-  it('has width and height when src set and width/height props set', async () => {
-    const wrapper = mount(BImg, {
-      propsData: {
-        src: '/foo/bar',
-        width: 300,
-        height: 200
-      }
-    })
-
-    expect(wrapper.element.tagName).toBe('IMG')
-
-    expect(wrapper.attributes('src')).toBeDefined()
-    expect(wrapper.attributes('src')).toEqual('/foo/bar')
-    expect(wrapper.attributes('width')).toBe('300')
-    expect(wrapper.attributes('height')).toBe('200')
-
-    wrapper.destroy()
-  })
-
-  it('should have alt attribute when `alt` prop is empty', async () => {
-    const wrapper = mount(BImg, {
-      propsData: {
-        alt: ''
-      }
-    })
-
-    expect(wrapper.attributes('alt')).toBeDefined()
-    expect(wrapper.attributes('alt')).toEqual('')
-
-    wrapper.destroy()
-  })
-})

package/src/vendor/bootstrap-vue/src/components/image/index.d.ts

@@ -1,14 +0,0 @@
-//
-// Image
-//
-import Vue from 'vue'
-import { BvPlugin, BvComponent } from '../../'
-
-// Plugin
-export declare const ImagePlugin: BvPlugin
-
-// Component: b-img
-export declare class BImg extends BvComponent {}
-
-// Component: b-img-lazy
-export declare class BImgLazy extends BvComponent {}

package/src/vendor/bootstrap-vue/src/components/image/index.js

@@ -1,12 +0,0 @@
-import { BImg } from './img'
-import { BImgLazy } from './img-lazy'
-import { pluginFactory } from '../../utils/plugins'
-
-const ImagePlugin = /*#__PURE__*/ pluginFactory({
-  components: {
-    BImg,
-    BImgLazy
-  }
-})
-
-export { ImagePlugin, BImg, BImgLazy }