@gitlab/ui 92.1.1 → 92.3.0

package/src/vendor/bootstrap-vue/src/components/skeleton/_skeleton.scss

@@ -1,141 +0,0 @@
-// Wrapper
-.b-skeleton-wrapper {
-  cursor: $b-skeleton-loading-cursor;
-}
-
-// Base
-.b-skeleton {
-  position: relative;
-  overflow: hidden;
-  background-color: $b-skeleton-background-color;
-  cursor: $b-skeleton-loading-cursor;
-  // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b
-  mask-image: radial-gradient(white, black);
-
-  // Use `::before` since `::after` is used for the wave-animation
-  &::before {
-    content: "\00a0";
-  }
-}
-
-// Text
-.b-skeleton-text {
-  height: $font-size-base;
-  margin-bottom: $b-skeleton-text-spacing;
-
-  @if $enable-rounded {
-    border-radius: 0.25rem;
-  }
-}
-
-// Button
-.b-skeleton-button {
-  width: $b-skeleton-btn-width;
-  padding: $btn-padding-y $btn-padding-x;
-  font-size: $btn-font-size;
-  line-height: $btn-line-height;
-
-  @if $enable-rounded {
-    border-radius: $btn-border-radius;
-  }
-}
-
-// Avatar
-.b-skeleton-avatar {
-  width: 2.5em;
-  height: 2.5em;
-  border-radius: 50%;
-}
-
-// Input
-.b-skeleton-input {
-  height: $input-height;
-  padding: $input-padding-y $input-padding-x;
-  line-height: $input-line-height;
-  border: $input-border-color solid $input-border-width;
-
-  @if $enable-rounded {
-    border-radius: $input-border-radius;
-  }
-}
-
-// Icon
-.b-skeleton-icon-wrapper {
-  svg {
-    color: $b-skeleton-background-color;
-  }
-}
-
-// Image
-.b-skeleton-img {
-  height: 100%;
-  width: 100%;
-}
-
-// Wave animation
-.b-skeleton-animate-wave {
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 0;
-
-    background: $b-skeleton-animate-wave-background;
-    animation: b-skeleton-animate-wave $b-skeleton-animation-duration linear infinite;
-
-    @media (prefers-reduced-motion: reduce) {
-      background: none;
-      animation: none;
-    }
-  }
-}
-
-@keyframes b-skeleton-animate-wave {
-  from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(100%);
-  }
-}
-
-// Fade animation
-.b-skeleton-animate-fade {
-  animation: b-skeleton-animate-fade ($b-skeleton-animation-duration * 0.5) ease-in-out alternate
-    infinite;
-
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-  }
-}
-
-@keyframes b-skeleton-animate-fade {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.4;
-  }
-}
-
-// Throb animation
-.b-skeleton-animate-throb {
-  animation: b-skeleton-animate-throb ($b-skeleton-animation-duration * 0.5) ease-in alternate
-    infinite;
-
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-  }
-}
-
-@keyframes b-skeleton-animate-throb {
-  0% {
-    transform: scale(1);
-  }
-  100% {
-    transform: scale(0.975);
-  }
-}

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

@@ -1,23 +0,0 @@
-//
-// Skeleton
-//
-import Vue from 'vue'
-import { BvPlugin, BvComponent } from '../../'
-
-// Plugin
-export declare const SkeletonPlugin: BvPlugin
-
-// Component: b-skeleton
-export declare class BSkeleton extends BvComponent {}
-
-// Component: b-skeleton-icon
-export declare class BSkeletonIcon extends BvComponent {}
-
-// Component: b-skeleton-img
-export declare class BSkeletonImg extends BvComponent {}
-
-// Component: b-skeleton-table
-export declare class BSkeletonTable extends BvComponent {}
-
-// Component: b-skeleton-wrapper
-export declare class BSkeletonWrapper extends BvComponent {}

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

@@ -1,18 +0,0 @@
-import { pluginFactory } from '../../utils/plugins'
-import { BSkeleton } from './skeleton'
-import { BSkeletonIcon } from './skeleton-icon'
-import { BSkeletonImg } from './skeleton-img'
-import { BSkeletonTable } from './skeleton-table'
-import { BSkeletonWrapper } from './skeleton-wrapper'
-
-const SkeletonPlugin = /*#__PURE__*/ pluginFactory({
-  components: {
-    BSkeleton,
-    BSkeletonIcon,
-    BSkeletonImg,
-    BSkeletonTable,
-    BSkeletonWrapper
-  }
-})
-
-export { SkeletonPlugin, BSkeleton, BSkeletonIcon, BSkeletonImg, BSkeletonTable, BSkeletonWrapper }

package/src/vendor/bootstrap-vue/src/components/skeleton/index.scss

@@ -1 +0,0 @@
-@import "skeleton";

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

@@ -1,136 +0,0 @@
-{
-  "name": "@bootstrap-vue/skeleton",
-  "version": "1.0.0",
-  "meta": {
-    "title": "Skeleton",
-    "description": "The <b-skeleton> component can be used to scaffold a loading state, while your data is loading.",
-    "version": "2.17.0",
-    "slug": "skeleton",
-    "components": [
-      {
-        "component": "BSkeleton",
-        "props": [
-          {
-            "prop": "animation",
-            "description": "Changes the component animation, leave empty or `null` to disable the animation"
-          },
-          {
-            "prop": "height",
-            "description": "Sets the `height` of the component"
-          },
-          {
-            "prop": "size",
-            "description": "Sets the `width` and `height` of the component"
-          },
-          {
-            "prop": "type",
-            "default": "text",
-            "description": "Changes the type, refer to the [types](/#types) section"
-          },
-          {
-            "prop": "width",
-            "description": "Sets the `width` of the component"
-          }
-        ]
-      },
-      {
-        "component": "BSkeletonWrapper",
-        "props": [
-          {
-            "prop": "loading",
-            "description": "Determines whether the loading slot should be displayed"
-          }
-        ],
-        "slots": [
-          {
-            "name": "default",
-            "description": "Content to show when the `loading` prop is `false`"
-          },
-          {
-            "name": "loading",
-            "description": "Content to show when the `loading` prop is `true`"
-          }
-        ]
-      },
-      {
-        "component": "BSkeletonTable",
-        "props": [
-          {
-            "prop": "animation",
-            "description": "Animation used for the component in each cell, leave empty or `null` to disable the animation"
-          },
-          {
-            "prop": "columns",
-            "description": "Amount of columns to display"
-          },
-          {
-            "prop": "hideHeader",
-            "description": "Hides the header of the table"
-          },
-          {
-            "prop": "rows",
-            "description": "Amount of rows to display"
-          },
-          {
-            "prop": "showFooter",
-            "description": "Enables the footer of the table"
-          },
-          {
-            "prop": "tableProps",
-            "description": "Supports the same props as `<b-table-simple>`"
-          },
-          {
-            "prop": "variant",
-            "description": "Applies one of the Bootstrap theme color variants to the component in each cell"
-          }
-        ]
-      },
-      {
-        "component": "BSkeletonImg",
-        "props": [
-          {
-            "prop": "animation",
-            "description": "Animation used for the component, leave empty or `null` to disable the animation"
-          },
-          {
-            "prop": "aspect",
-            "description": "Control the aspect ratio of the image"
-          },
-          {
-            "prop": "cardImg",
-            "description": "If used as an card image, use this prop to set the position. Accepted values are `top`, `bottom`, `left` and `right`"
-          },
-          {
-            "prop": "height",
-            "description": "Sets the height of the image. Best used with `no-aspect` set to `true`"
-          },
-          {
-            "prop": "noAspect",
-            "description": "Removes the aspect wrapper around the skeleton"
-          },
-          {
-            "prop": "width",
-            "description": "Sets the width of the image. Best used with `no-aspect` set to `true`"
-          }
-        ]
-      },
-      {
-        "component": "BSkeletonIcon",
-        "props": [
-          {
-            "prop": "animation",
-            "description": "Animation used for the component, leave empty or `null` to disable the animation"
-          },
-          {
-            "prop": "icon",
-            "description": "Icon to display"
-          },
-          {
-            "prop": "iconProps",
-            "description": "Properties to pass on to the icon. Refer to `<b-icon>` property references"
-          }
-        ]
-      }
-    ]
-  }
-}

package/src/vendor/bootstrap-vue/src/components/skeleton/skeleton-icon.js

@@ -1,45 +0,0 @@
-import { extend, mergeData } from '../../vue'
-import { NAME_SKELETON_ICON } from '../../constants/components'
-import { PROP_TYPE_OBJECT, PROP_TYPE_STRING } from '../../constants/props'
-import { makeProp, makePropsConfigurable } from '../../utils/props'
-import { BIcon } from '../../icons'
-
-// --- Props ---
-
-export const props = makePropsConfigurable(
-  {
-    animation: makeProp(PROP_TYPE_STRING, 'wave'),
-    icon: makeProp(PROP_TYPE_STRING),
-    iconProps: makeProp(PROP_TYPE_OBJECT, {})
-  },
-  NAME_SKELETON_ICON
-)
-
-// --- Main component ---
-
-// @vue/component
-export const BSkeletonIcon = /*#__PURE__*/ extend({
-  name: NAME_SKELETON_ICON,
-  functional: true,
-  props,
-  render(h, { data, props }) {
-    const { icon, animation } = props
-
-    const $icon = h(BIcon, {
-      staticClass: 'b-skeleton-icon',
-      props: {
-        ...props.iconProps,
-        icon
-      }
-    })
-
-    return h(
-      'div',
-      mergeData(data, {
-        staticClass: 'b-skeleton-icon-wrapper position-relative d-inline-block overflow-hidden',
-        class: { [`b-skeleton-animate-${animation}`]: animation }
-      }),
-      [$icon]
-    )
-  }
-})

package/src/vendor/bootstrap-vue/src/components/skeleton/skeleton-icon.spec.js

@@ -1,86 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { IconsPlugin } from '../../icons'
-import { Vue } from '../../vue'
-import { BSkeletonIcon } from './skeleton-icon'
-
-Vue.use(IconsPlugin)
-
-describe('skeleton-icon', () => {
-  it('root element is DIV and contains SVG', async () => {
-    const wrapper = mount(BSkeletonIcon)
-
-    expect(wrapper).toBeDefined()
-    expect(wrapper.element.tagName).toBe('DIV')
-    expect(wrapper.find('svg').exists()).toBe(true)
-
-    wrapper.destroy()
-  })
-
-  it('default animation is `wave`', async () => {
-    const wrapper = mount(BSkeletonIcon)
-
-    expect(wrapper).toBeDefined()
-    expect(wrapper.classes()).toContain('b-skeleton-animate-wave')
-
-    wrapper.destroy()
-  })
-
-  it('has class `b-skeleton-animate-fade` when `animation="fade"` is set', async () => {
-    const wrapper = mount(BSkeletonIcon, {
-      propsData: {
-        animation: 'fade'
-      }
-    })
-
-    expect(wrapper).toBeDefined()
-    expect(wrapper.classes()).toContain('b-skeleton-animate-fade')
-
-    wrapper.destroy()
-  })
-
-  it('`icon` prop works', async () => {
-    const wrapper = mount(BSkeletonIcon, {
-      propsData: {
-        icon: 'heart'
-      }
-    })
-
-    expect(wrapper).toBeDefined()
-    expect(wrapper.find('svg').exists()).toBe(true)
-    expect(wrapper.find('svg').classes()).toContain('bi-heart')
-
-    wrapper.destroy()
-  })
-
-  it('`icon-props` is passed correctly to icon', async () => {
-    const wrapper = mount(BSkeletonIcon, {
-      propsData: {
-        icon: 'heart',
-        iconProps: {
-          fontScale: 2,
-          variant: 'primary'
-        }
-      }
-    })
-
-    expect(wrapper).toBeDefined()
-    expect(wrapper.find('svg').exists()).toBe(true)
-    expect(wrapper.find('svg').classes()).toContain('text-primary')
-    expect(wrapper.find('svg').element.style.fontSize).toBe('200%')
-
-    wrapper.destroy()
-  })
-
-  it('accepts custom classes', async () => {
-    const wrapper = mount(BSkeletonIcon, {
-      context: {
-        class: ['foobar']
-      }
-    })
-
-    expect(wrapper.classes()).toContain('b-skeleton-icon-wrapper')
-    expect(wrapper.classes()).toContain('foobar')
-
-    wrapper.destroy()
-  })
-})

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

@@ -1,49 +0,0 @@
-import { extend, mergeData } from '../../vue'
-import { NAME_SKELETON_IMG } from '../../constants/components'
-import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
-import { makeProp, makePropsConfigurable } from '../../utils/props'
-import { BAspect } from '../aspect'
-import { BSkeleton } from './skeleton'
-
-// --- Props ---
-
-export const props = makePropsConfigurable(
-  {
-    animation: makeProp(PROP_TYPE_STRING),
-    aspect: makeProp(PROP_TYPE_STRING, '16:9'),
-    cardImg: makeProp(PROP_TYPE_STRING),
-    height: makeProp(PROP_TYPE_STRING),
-    noAspect: makeProp(PROP_TYPE_BOOLEAN, false),
-    variant: makeProp(PROP_TYPE_STRING),
-    width: makeProp(PROP_TYPE_STRING)
-  },
-  NAME_SKELETON_IMG
-)
-
-// --- Main component ---
-
-// @vue/component
-export const BSkeletonImg = /*#__PURE__*/ extend({
-  name: NAME_SKELETON_IMG,
-  functional: true,
-  props,
-  render(h, { data, props }) {
-    const { aspect, width, height, animation, variant, cardImg } = props
-
-    const $img = h(
-      BSkeleton,
-      mergeData(data, {
-        props: {
-          type: 'img',
-          width,
-          height,
-          animation,
-          variant
-        },
-        class: { [`card-img-${cardImg}`]: cardImg }
-      })
-    )
-
-    return props.noAspect ? $img : h(BAspect, { props: { aspect } }, [$img])
-  }
-})

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

@@ -1,139 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { BSkeletonImg } from './skeleton-img'
-
-describe('skeleton-img', () => {
-  it('component has correct default layout', async () => {
-    const wrapper = mount(BSkeletonImg)
-
-    expect(wrapper).toBeDefined()
-    expect(wrapper.element.tagName).toBe('DIV')
-    expect(wrapper.classes()).toContain('b-aspect')
-    expect(wrapper.find('.b-aspect-sizer').element.style.paddingBottom).toBe('56.25%')
-    expect(wrapper.find('.b-aspect-content > .b-skeleton-img').exists()).toBe(true)
-    expect(wrapper.find('.b-aspect-content > .b-skeleton-img').classes()).toContain(
-      'b-skeleton-animate-wave'
-    )
-
-    wrapper.destroy()
-  })
-
-  it('`aspect` prop applies correct padding', async () => {
-    const wrapper = mount(BSkeletonImg, {
-      propsData: {
-        aspect: '4:3'
-      }
-    })
-
-    expect(wrapper).toBeDefined()
-    expect(wrapper.element.tagName).toBe('DIV')
-    expect(wrapper.classes()).toContain('b-aspect')
-    expect(wrapper.find('.b-aspect-sizer').exists()).toBe(true)
-    expect(wrapper.find('.b-aspect-sizer').element.style.paddingBottom).toBe('75%')
-
-    wrapper.destroy()
-  })
-
-  it('`no-aspect` prop removes wrapping `b-aspect`', async () => {
-    const wrapper = mount(BSkeletonImg, {
-      propsData: {
-        noAspect: true
-      }
-    })
-
-    expect(wrapper).toBeDefined()
-    expect(wrapper.element.tagName).toBe('DIV')
-    expect(wrapper.classes()).not.toContain('b-aspect')
-    expect(wrapper.classes()).toContain('b-skeleton-img')
-    expect(wrapper.find('.b-aspect-sizer').exists()).toBe(false)
-    expect(wrapper.find('.b-aspect-content').exists()).toBe(false)
-
-    wrapper.destroy()
-  })
-
-  it('`width` prop applies correct style to element', async () => {
-    const wrapper = mount(BSkeletonImg, {
-      propsData: {
-        noAspect: true,
-        width: '200px'
-      }
-    })
-
-    expect(wrapper).toBeDefined()
-    expect(wrapper.element.tagName).toBe('DIV')
-    expect(wrapper.element.style.width).toBe('200px')
-
-    wrapper.destroy()
-  })
-
-  it('`height` prop applies correct style to element', async () => {
-    const wrapper = mount(BSkeletonImg, {
-      propsData: {
-        noAspect: true,
-        height: '200px'
-      }
-    })
-
-    expect(wrapper).toBeDefined()
-    expect(wrapper.element.tagName).toBe('DIV')
-    expect(wrapper.element.style.height).toBe('200px')
-
-    wrapper.destroy()
-  })
-
-  it('`variant` prop adds `bg-[variant]` class', async () => {
-    const wrapper = mount(BSkeletonImg, {
-      propsData: {
-        variant: 'primary'
-      }
-    })
-
-    expect(wrapper).toBeDefined()
-    expect(wrapper.element.tagName).toBe('DIV')
-    expect(wrapper.find('.b-aspect-content > .b-skeleton-img').classes()).toContain('bg-primary')
-
-    wrapper.destroy()
-  })
-
-  it('has class `b-skeleton-animate-fade` when `animation="fade"` is set', async () => {
-    const wrapper = mount(BSkeletonImg, {
-      propsData: {
-        animation: 'fade'
-      }
-    })
-
-    expect(wrapper).toBeDefined()
-    expect(wrapper.element.tagName).toBe('DIV')
-    expect(wrapper.find('.b-aspect-content > .b-skeleton-img').classes()).toContain(
-      'b-skeleton-animate-fade'
-    )
-
-    wrapper.destroy()
-  })
-
-  it('`card-img` applies the correct class', async () => {
-    const wrapper = mount(BSkeletonImg, {
-      propsData: {
-        cardImg: 'top'
-      }
-    })
-
-    expect(wrapper).toBeDefined()
-    expect(wrapper.element.tagName).toBe('DIV')
-    expect(wrapper.find('.b-aspect-content > .b-skeleton-img').classes()).toContain('card-img-top')
-
-    wrapper.destroy()
-  })
-
-  it('accepts custom classes', async () => {
-    const wrapper = mount(BSkeletonImg, {
-      context: {
-        class: ['foobar']
-      }
-    })
-
-    expect(wrapper.find('.b-aspect-content > .b-skeleton-img').exists()).toBe(true)
-    expect(wrapper.find('.b-aspect-content > .b-skeleton-img').classes()).toContain('foobar')
-
-    wrapper.destroy()
-  })
-})

package/src/vendor/bootstrap-vue/src/components/skeleton/skeleton-table.js

@@ -1,58 +0,0 @@
-import { extend, mergeData } from '../../vue'
-import { NAME_SKELETON_TABLE } from '../../constants/components'
-import {
-  PROP_TYPE_BOOLEAN,
-  PROP_TYPE_NUMBER,
-  PROP_TYPE_OBJECT,
-  PROP_TYPE_STRING
-} from '../../constants/props'
-import { createArray } from '../../utils/array'
-import { makeProp, makePropsConfigurable } from '../../utils/props'
-import { BSkeleton } from './skeleton'
-import { BTableSimple } from '../table'
-
-// --- Helper methods ---
-
-const isPositiveNumber = value => value > 0
-
-// --- Props ---
-
-export const props = makePropsConfigurable(
-  {
-    animation: makeProp(PROP_TYPE_STRING),
-    columns: makeProp(PROP_TYPE_NUMBER, 5, isPositiveNumber),
-    hideHeader: makeProp(PROP_TYPE_BOOLEAN, false),
-    rows: makeProp(PROP_TYPE_NUMBER, 3, isPositiveNumber),
-    showFooter: makeProp(PROP_TYPE_BOOLEAN, false),
-    tableProps: makeProp(PROP_TYPE_OBJECT, {})
-  },
-  NAME_SKELETON_TABLE
-)
-
-// --- Main component ---
-
-// @vue/component
-export const BSkeletonTable = /*#__PURE__*/ extend({
-  name: NAME_SKELETON_TABLE,
-  functional: true,
-  props,
-  render(h, { data, props }) {
-    const { animation, columns } = props
-
-    const $th = h('th', [h(BSkeleton, { props: { animation } })])
-    const $thTr = h('tr', createArray(columns, $th))
-
-    const $td = h('td', [h(BSkeleton, { props: { width: '75%', animation } })])
-    const $tdTr = h('tr', createArray(columns, $td))
-    const $tbody = h('tbody', createArray(props.rows, $tdTr))
-
-    const $thead = !props.hideHeader ? h('thead', [$thTr]) : h()
-    const $tfoot = props.showFooter ? h('tfoot', [$thTr]) : h()
-
-    return h(BTableSimple, mergeData(data, { props: { ...props.tableProps } }), [
-      $thead,
-      $tbody,
-      $tfoot
-    ])
-  }
-})