@gitlab/ui 92.2.0 → 92.3.1

package/src/vendor/bootstrap-vue/src/components/avatar/_avatar.scss

@@ -1,148 +0,0 @@
-// BAvatar custom styles
-
-.b-avatar {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  flex-shrink: 0;
-  width: $b-avatar-size;
-  height: $b-avatar-size;
-  font-size: inherit;
-  font-weight: 400;
-  line-height: 1;
-  max-width: 100%;
-  max-height: auto;
-  text-align: center;
-  overflow: visible;
-  position: relative;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
-    box-shadow 0.15s ease-in-out;
-
-  &:focus {
-    outline: 0;
-  }
-
-  &.btn,
-  &[href] {
-    padding: 0;
-    border: 0;
-
-    .b-avatar-img img {
-      transition: transform 0.15s ease-in-out;
-    }
-
-    &:not(:disabled):not(.disabled) {
-      cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
-
-      &:hover {
-        .b-avatar-img img {
-          transform: scale(1.15);
-        }
-      }
-    }
-  }
-
-  &.disabled,
-  &:disabled,
-  &[disabled] {
-    opacity: $btn-disabled-opacity;
-    pointer-events: none;
-  }
-
-  .b-avatar-custom,
-  .b-avatar-text,
-  .b-avatar-img {
-    border-radius: inherit;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b
-    mask-image: radial-gradient(white, black);
-  }
-
-  .b-avatar-text {
-    text-transform: uppercase;
-    white-space: nowrap;
-  }
-
-  &[href] {
-    text-decoration: none;
-  }
-
-  > .b-icon {
-    width: 60%;
-    height: auto;
-    max-width: 100%;
-  }
-
-  .b-avatar-img img {
-    width: 100%;
-    height: 100%;
-    max-height: auto;
-    border-radius: inherit;
-    // This is not supported in IE11 and Edge <16
-    // https://caniuse.com/object-fit
-    object-fit: cover;
-  }
-
-  .b-avatar-badge {
-    // Positioning will be handled via inline styles
-    position: absolute;
-    min-height: 1.5em;
-    min-width: 1.5em;
-    padding: 0.25em;
-    line-height: 1;
-    border-radius: 10em;
-    font-size: 70%;
-    font-weight: 700;
-    z-index: 1;
-  }
-}
-
-.b-avatar-sm {
-  width: $b-avatar-size-sm;
-  height: $b-avatar-size-sm;
-
-  .b-avatar-text {
-    font-size: calc(#{$b-avatar-size-sm * $b-avatar-font-size-scale});
-  }
-
-  .b-avatar-badge {
-    font-size: calc(#{$b-avatar-size-sm * $b-avatar-badge-font-size-scale});
-  }
-}
-
-.b-avatar-lg {
-  width: $b-avatar-size-lg;
-  height: $b-avatar-size-lg;
-
-  .b-avatar-text {
-    font-size: calc(#{$b-avatar-size-lg * $b-avatar-font-size-scale});
-  }
-
-  .b-avatar-badge {
-    font-size: calc(#{$b-avatar-size-lg * $b-avatar-badge-font-size-scale});
-  }
-}
-
-.b-avatar-group {
-  .b-avatar-group-inner {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  .b-avatar {
-    border: $border-width solid $border-color;
-  }
-
-  a,
-  .btn {
-    &.b-avatar:hover:not(.disabled):not(disabled) {
-      z-index: 1;
-    }
-  }
-}

package/src/vendor/bootstrap-vue/src/components/avatar/avatar-group.js

@@ -1,75 +0,0 @@
-import { NAME_AVATAR_GROUP } from '../../constants/components'
-import {
-  PROP_TYPE_BOOLEAN,
-  PROP_TYPE_BOOLEAN_STRING,
-  PROP_TYPE_NUMBER_STRING,
-  PROP_TYPE_STRING
-} from '../../constants/props'
-import { normalizeSlotMixin } from '../../mixins/normalize-slot'
-import { mathMax, mathMin } from '../../utils/math'
-import { toFloat } from '../../utils/number'
-import { makeProp, makePropsConfigurable } from '../../utils/props'
-import { extend } from '../../vue'
-import { computeSize } from './avatar'
-
-// --- Props ---
-
-export const props = makePropsConfigurable(
-  {
-    overlap: makeProp(PROP_TYPE_NUMBER_STRING, 0.3),
-    // Child avatars will prefer this prop (if set) over their own
-    rounded: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
-    // Child avatars will always use this over their own size
-    size: makeProp(PROP_TYPE_STRING),
-    // Child avatars will prefer this prop (if set) over their own
-    square: makeProp(PROP_TYPE_BOOLEAN, false),
-    tag: makeProp(PROP_TYPE_STRING, 'div'),
-    // Child avatars will prefer this variant over their own
-    variant: makeProp(PROP_TYPE_STRING)
-  },
-  NAME_AVATAR_GROUP
-)
-
-// --- Main component ---
-
-// @vue/component
-export const BAvatarGroup = /*#__PURE__*/ extend({
-  name: NAME_AVATAR_GROUP,
-  mixins: [normalizeSlotMixin],
-  provide() {
-    return { getBvAvatarGroup: () => this }
-  },
-  props,
-  computed: {
-    computedSize() {
-      return computeSize(this.size)
-    },
-    overlapScale() {
-      return mathMin(mathMax(toFloat(this.overlap, 0), 0), 1) / 2
-    },
-    paddingStyle() {
-      let value = this.computedSize
-      value = value ? `calc(${value} * ${this.overlapScale})` : null
-      return value ? { paddingLeft: value, paddingRight: value } : {}
-    }
-  },
-  render(h) {
-    const $inner = h(
-      'div',
-      {
-        staticClass: 'b-avatar-group-inner',
-        style: this.paddingStyle
-      },
-      this.normalizeSlot()
-    )
-
-    return h(
-      this.tag,
-      {
-        staticClass: 'b-avatar-group',
-        attrs: { role: 'group' }
-      },
-      [$inner]
-    )
-  }
-})

package/src/vendor/bootstrap-vue/src/components/avatar/avatar-group.spec.js

@@ -1,74 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { waitNT } from '../../../tests/utils'
-import { BAvatarGroup } from './avatar-group'
-
-describe('avatar-group', () => {
-  it('should have expected default structure', async () => {
-    const wrapper = mount(BAvatarGroup)
-
-    expect(wrapper.vm).toBeDefined()
-    await waitNT(wrapper.vm)
-
-    expect(wrapper.element.tagName).toBe('DIV')
-    expect(wrapper.classes()).toContain('b-avatar-group')
-    expect(wrapper.classes().length).toBe(1)
-    expect(wrapper.attributes('role')).toEqual('group')
-
-    wrapper.destroy()
-  })
-
-  it('should render custom root element when prop tag is set', async () => {
-    const wrapper = mount(BAvatarGroup, {
-      propsData: {
-        tag: 'article'
-      }
-    })
-
-    expect(wrapper.vm).toBeDefined()
-    await waitNT(wrapper.vm)
-
-    expect(wrapper.element.tagName).toBe('ARTICLE')
-    expect(wrapper.classes()).toContain('b-avatar-group')
-    expect(wrapper.classes().length).toBe(1)
-    expect(wrapper.attributes('role')).toEqual('group')
-
-    wrapper.destroy()
-  })
-
-  it('should render content from default slot', async () => {
-    const wrapper = mount(BAvatarGroup, {
-      slots: {
-        default: '<span>FOOBAR</span>'
-      }
-    })
-
-    expect(wrapper.vm).toBeDefined()
-    await waitNT(wrapper.vm)
-
-    expect(wrapper.element.tagName).toBe('DIV')
-    expect(wrapper.classes()).toContain('b-avatar-group')
-    expect(wrapper.classes().length).toBe(1)
-    expect(wrapper.attributes('role')).toEqual('group')
-
-    expect(wrapper.text()).toEqual('FOOBAR')
-    expect(wrapper.find('span').exists()).toBe(true)
-
-    wrapper.destroy()
-  })
-
-  it('overlap props work', async () => {
-    const wrapper = mount(BAvatarGroup, {
-      propsData: {
-        overlap: 0.65
-      }
-    })
-
-    expect(wrapper.vm).toBeDefined()
-    await waitNT(wrapper.vm)
-
-    expect(wrapper.vm.overlap).toBe(0.65)
-    expect(wrapper.vm.overlapScale).toBe(0.325)
-
-    wrapper.destroy()
-  })
-})

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

@@ -1,228 +0,0 @@
-import { extend } from '../../vue'
-import { NAME_AVATAR } from '../../constants/components'
-import { EVENT_NAME_CLICK, EVENT_NAME_IMG_ERROR } from '../../constants/events'
-import {
-  PROP_TYPE_BOOLEAN,
-  PROP_TYPE_BOOLEAN_STRING,
-  PROP_TYPE_NUMBER_STRING,
-  PROP_TYPE_STRING
-} from '../../constants/props'
-import { SLOT_NAME_BADGE } from '../../constants/slots'
-import { isNumber, isNumeric, isString } from '../../utils/inspect'
-import { toFloat } from '../../utils/number'
-import { omit, sortKeys } from '../../utils/object'
-import { makeProp, makePropsConfigurable, pluckProps } from '../../utils/props'
-import { isLink } from '../../utils/router'
-import { normalizeSlotMixin } from '../../mixins/normalize-slot'
-import { BIcon } from '../../icons/icon'
-import { BIconPersonFill } from '../../icons/icons'
-import { BButton } from '../button/button'
-import { BLink, props as BLinkProps } from '../link/link'
-
-// --- Constants ---
-
-const CLASS_NAME = 'b-avatar'
-
-const SIZES = ['sm', null, 'lg']
-
-const FONT_SIZE_SCALE = 0.4
-const BADGE_FONT_SIZE_SCALE = FONT_SIZE_SCALE * 0.7
-
-// --- Helper methods ---
-
-export const computeSize = value => {
-  // Parse to number when value is a float-like string
-  value = isString(value) && isNumeric(value) ? toFloat(value, 0) : value
-  // Convert all numbers to pixel values
-  return isNumber(value) ? `${value}px` : value || null
-}
-
-// --- Props ---
-
-const linkProps = omit(BLinkProps, ['active', 'event', 'routerTag'])
-
-export const props = makePropsConfigurable(
-  sortKeys({
-    ...linkProps,
-    alt: makeProp(PROP_TYPE_STRING, 'avatar'),
-    ariaLabel: makeProp(PROP_TYPE_STRING),
-    badge: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
-    badgeLeft: makeProp(PROP_TYPE_BOOLEAN, false),
-    badgeOffset: makeProp(PROP_TYPE_STRING),
-    badgeTop: makeProp(PROP_TYPE_BOOLEAN, false),
-    badgeVariant: makeProp(PROP_TYPE_STRING, 'primary'),
-    button: makeProp(PROP_TYPE_BOOLEAN, false),
-    buttonType: makeProp(PROP_TYPE_STRING, 'button'),
-    icon: makeProp(PROP_TYPE_STRING),
-    rounded: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
-    size: makeProp(PROP_TYPE_NUMBER_STRING),
-    square: makeProp(PROP_TYPE_BOOLEAN, false),
-    src: makeProp(PROP_TYPE_STRING),
-    text: makeProp(PROP_TYPE_STRING),
-    variant: makeProp(PROP_TYPE_STRING, 'secondary')
-  }),
-  NAME_AVATAR
-)
-
-// --- Main component ---
-
-// @vue/component
-export const BAvatar = /*#__PURE__*/ extend({
-  name: NAME_AVATAR,
-  mixins: [normalizeSlotMixin],
-  inject: {
-    getBvAvatarGroup: { default: () => () => null }
-  },
-  props,
-  data() {
-    return {
-      localSrc: this.src || null
-    }
-  },
-  computed: {
-    bvAvatarGroup() {
-      return this.getBvAvatarGroup()
-    },
-    computedSize() {
-      // Always use the avatar group size
-      const { bvAvatarGroup } = this
-      return computeSize(bvAvatarGroup ? bvAvatarGroup.size : this.size)
-    },
-    computedVariant() {
-      const { bvAvatarGroup } = this
-      return bvAvatarGroup && bvAvatarGroup.variant ? bvAvatarGroup.variant : this.variant
-    },
-    computedRounded() {
-      const { bvAvatarGroup } = this
-      const square = bvAvatarGroup && bvAvatarGroup.square ? true : this.square
-      const rounded = bvAvatarGroup && bvAvatarGroup.rounded ? bvAvatarGroup.rounded : this.rounded
-      return square ? '0' : rounded === '' ? true : rounded || 'circle'
-    },
-    fontStyle() {
-      const { computedSize: size } = this
-      const fontSize = SIZES.indexOf(size) === -1 ? `calc(${size} * ${FONT_SIZE_SCALE})` : null
-      return fontSize ? { fontSize } : {}
-    },
-    marginStyle() {
-      const { computedSize: size, bvAvatarGroup } = this
-      const overlapScale = bvAvatarGroup ? bvAvatarGroup.overlapScale : 0
-      const value = size && overlapScale ? `calc(${size} * -${overlapScale})` : null
-      return value ? { marginLeft: value, marginRight: value } : {}
-    },
-    badgeStyle() {
-      const { computedSize: size, badgeTop, badgeLeft, badgeOffset } = this
-      const offset = badgeOffset || '0px'
-      return {
-        fontSize: SIZES.indexOf(size) === -1 ? `calc(${size} * ${BADGE_FONT_SIZE_SCALE} )` : null,
-        top: badgeTop ? offset : null,
-        bottom: badgeTop ? null : offset,
-        left: badgeLeft ? offset : null,
-        right: badgeLeft ? null : offset
-      }
-    }
-  },
-  watch: {
-    src(newValue, oldValue) {
-      if (newValue !== oldValue) {
-        this.localSrc = newValue || null
-      }
-    }
-  },
-  methods: {
-    onImgError(event) {
-      this.localSrc = null
-      this.$emit(EVENT_NAME_IMG_ERROR, event)
-    },
-    onClick(event) {
-      this.$emit(EVENT_NAME_CLICK, event)
-    }
-  },
-  render(h) {
-    const {
-      computedVariant: variant,
-      disabled,
-      computedRounded: rounded,
-      icon,
-      localSrc: src,
-      text,
-      fontStyle,
-      marginStyle,
-      computedSize: size,
-      button,
-      buttonType: type,
-      badge,
-      badgeVariant,
-      badgeStyle
-    } = this
-    const link = !button && isLink(this)
-    const tag = button ? BButton : link ? BLink : 'span'
-    const alt = this.alt
-    const ariaLabel = this.ariaLabel || null
-
-    let $content = null
-    if (this.hasNormalizedSlot()) {
-      // Default slot overrides props
-      $content = h('span', { staticClass: 'b-avatar-custom' }, [this.normalizeSlot()])
-    } else if (src) {
-      $content = h('img', {
-        style: variant ? {} : { width: '100%', height: '100%' },
-        attrs: { src, alt },
-        on: { error: this.onImgError }
-      })
-      $content = h('span', { staticClass: 'b-avatar-img' }, [$content])
-    } else if (icon) {
-      $content = h(BIcon, {
-        props: { icon },
-        attrs: { 'aria-hidden': 'true', alt }
-      })
-    } else if (text) {
-      $content = h(
-        'span',
-        {
-          staticClass: 'b-avatar-text',
-          style: fontStyle
-        },
-        [h('span', text)]
-      )
-    } else {
-      // Fallback default avatar content
-      $content = h(BIconPersonFill, { attrs: { 'aria-hidden': 'true', alt } })
-    }
-
-    let $badge = h()
-    const hasBadgeSlot = this.hasNormalizedSlot(SLOT_NAME_BADGE)
-    if (badge || badge === '' || hasBadgeSlot) {
-      const badgeText = badge === true ? '' : badge
-      $badge = h(
-        'span',
-        {
-          staticClass: 'b-avatar-badge',
-          class: { [`badge-${badgeVariant}`]: badgeVariant },
-          style: badgeStyle
-        },
-        [hasBadgeSlot ? this.normalizeSlot(SLOT_NAME_BADGE) : badgeText]
-      )
-    }
-
-    const componentData = {
-      staticClass: CLASS_NAME,
-      class: {
-        // Apply size class
-        [`${CLASS_NAME}-${size}`]: size && SIZES.indexOf(size) !== -1,
-        // We use badge styles for theme variants when not rendering `BButton`
-        [`badge-${variant}`]: !button && variant,
-        // Rounding/Square
-        rounded: rounded === true,
-        [`rounded-${rounded}`]: rounded && rounded !== true,
-        // Other classes
-        disabled
-      },
-      style: { ...marginStyle, width: size, height: size },
-      attrs: { 'aria-label': ariaLabel || null },
-      props: button ? { variant, disabled, type } : link ? pluckProps(linkProps, this) : {},
-      on: button || link ? { click: this.onClick } : {}
-    }
-
-    return h(tag, componentData, [$content, $badge])
-  }
-})