@gitlab/ui 84.2.0 → 85.0.0

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

@@ -0,0 +1,161 @@
+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

@@ -0,0 +1,96 @@
+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

@@ -0,0 +1,139 @@
+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

@@ -0,0 +1,255 @@
+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

@@ -0,0 +1,14 @@
+//
+// 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

@@ -0,0 +1,12 @@
+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 }