@gitlab/ui 84.2.0 → 85.0.0

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

@@ -0,0 +1,119 @@
+import { mount } from '@vue/test-utils'
+import { BSkeletonTable } from './skeleton-table'
+
+describe('skeleton-table', () => {
+  it('element has default layout', async () => {
+    const wrapper = mount(BSkeletonTable)
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('TABLE')
+    expect(wrapper.find('thead').exists()).toBe(true)
+    expect(wrapper.findAll('thead > tr > th').length).toBe(5)
+    expect(wrapper.findAll('tbody > tr').length).toBe(3)
+    expect(wrapper.findAll('tbody > tr > td > div').length).toBe(15)
+    expect(wrapper.find('tfoot').exists()).toBe(false)
+
+    wrapper.destroy()
+  })
+
+  it("prop `hide-header` doesn't render `<thead>`", async () => {
+    const wrapper = mount(BSkeletonTable, {
+      propsData: {
+        hideHeader: true
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('TABLE')
+    expect(wrapper.find('thead').exists()).toBe(false)
+
+    wrapper.destroy()
+  })
+
+  it('prop `show-footer` renders `<tfoot>`', async () => {
+    const wrapper = mount(BSkeletonTable, {
+      propsData: {
+        showFooter: true
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('TABLE')
+    expect(wrapper.find('tfoot').exists()).toBe(true)
+
+    wrapper.destroy()
+  })
+
+  it('setting `rows` prop changes amount of `tr` rendered in `tbody`', async () => {
+    const wrapper = mount(BSkeletonTable, {
+      propsData: {
+        rows: 7
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('TABLE')
+    expect(wrapper.findAll('tbody > tr').length).toBe(7)
+
+    wrapper.destroy()
+  })
+
+  it('setting `columns` prop changes amount of `th` rendered in `thead`', async () => {
+    const wrapper = mount(BSkeletonTable, {
+      propsData: {
+        columns: 6
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('TABLE')
+    expect(wrapper.findAll('thead > tr > th').length).toBe(6)
+
+    wrapper.destroy()
+  })
+
+  it('`table-props` are properly passed to the table', async () => {
+    const wrapper = mount(BSkeletonTable, {
+      propsData: {
+        tableProps: {
+          bordered: true,
+          striped: true
+        }
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('TABLE')
+    expect(wrapper.classes()).toContain('table-bordered')
+    expect(wrapper.classes()).toContain('table-striped')
+
+    wrapper.destroy()
+  })
+
+  it('`animation` prop changes animation used in cells', async () => {
+    const wrapper = mount(BSkeletonTable, {
+      propsData: {
+        animation: 'fade'
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('TABLE')
+    expect(wrapper.find('tbody > tr > td > div').classes()).toContain('b-skeleton-animate-fade')
+
+    wrapper.destroy()
+  })
+
+  it('accepts custom classes', async () => {
+    const wrapper = mount(BSkeletonTable, {
+      context: {
+        class: ['foobar']
+      }
+    })
+
+    expect(wrapper.classes()).toContain('b-table')
+    expect(wrapper.classes()).toContain('foobar')
+
+    wrapper.destroy()
+  })
+})

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

@@ -0,0 +1,47 @@
+import { extend, mergeData } from '../../vue'
+import { NAME_SKELETON_WRAPPER } from '../../constants/components'
+import { PROP_TYPE_BOOLEAN } from '../../constants/props'
+import { SLOT_NAME_DEFAULT, SLOT_NAME_LOADING } from '../../constants/slots'
+import { normalizeSlot } from '../../utils/normalize-slot'
+import { makeProp, makePropsConfigurable } from '../../utils/props'
+
+// --- Props ---
+
+export const props = makePropsConfigurable(
+  {
+    loading: makeProp(PROP_TYPE_BOOLEAN, false)
+  },
+  NAME_SKELETON_WRAPPER
+)
+
+// --- Main component ---
+
+// @vue/component
+export const BSkeletonWrapper = /*#__PURE__*/ extend({
+  name: NAME_SKELETON_WRAPPER,
+  functional: true,
+  props,
+  render(h, { data, props, slots, scopedSlots }) {
+    const $slots = slots()
+    const $scopedSlots = scopedSlots || {}
+    const slotScope = {}
+
+    if (props.loading) {
+      return h(
+        'div',
+        mergeData(data, {
+          attrs: {
+            role: 'alert',
+            'aria-live': 'polite',
+            'aria-busy': true
+          },
+          staticClass: 'b-skeleton-wrapper',
+          key: 'loading'
+        }),
+        normalizeSlot(SLOT_NAME_LOADING, slotScope, $scopedSlots, $slots)
+      )
+    }
+
+    return normalizeSlot(SLOT_NAME_DEFAULT, slotScope, $scopedSlots, $slots)
+  }
+})

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

@@ -0,0 +1,48 @@
+import { mount } from '@vue/test-utils'
+import { BSkeletonWrapper } from './skeleton-wrapper'
+
+describe('skeleton-wrapper', () => {
+  it('`loading` slot renders when `loading` prop is true', async () => {
+    const wrapper = mount(BSkeletonWrapper, {
+      propsData: {
+        loading: true
+      },
+      slots: {
+        loading: '<span>Loading state</span>'
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('b-skeleton-wrapper')
+
+    expect(wrapper.find('span').exists()).toBe(true)
+    expect(wrapper.find('span').text()).toBe('Loading state')
+    wrapper.destroy()
+  })
+
+  it('`default` slot renders when `loading` prop is false', async () => {
+    const wrapper = mount(BSkeletonWrapper, {
+      propsData: {
+        loading: false
+      },
+      slots: {
+        default: '<button>Action</button>'
+      }
+    })
+
+    expect(wrapper.find('button').text()).toBe('Action')
+  })
+
+  it('root element has correct aria attributes in loading state', async () => {
+    const wrapper = mount(BSkeletonWrapper, {
+      propsData: {
+        loading: true
+      }
+    })
+
+    expect(wrapper.attributes('aria-busy')).toBe('true')
+    expect(wrapper.attributes('aria-live')).toBe('polite')
+    expect(wrapper.attributes('role')).toBe('alert')
+  })
+})

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

@@ -0,0 +1,46 @@
+import { extend, mergeData } from '../../vue'
+import { NAME_SKELETON } from '../../constants/components'
+import { PROP_TYPE_STRING } from '../../constants/props'
+import { makeProp, makePropsConfigurable } from '../../utils/props'
+
+// --- Props ---
+
+export const props = makePropsConfigurable(
+  {
+    animation: makeProp(PROP_TYPE_STRING, 'wave'),
+    height: makeProp(PROP_TYPE_STRING),
+    size: makeProp(PROP_TYPE_STRING),
+    type: makeProp(PROP_TYPE_STRING, 'text'),
+    variant: makeProp(PROP_TYPE_STRING),
+    width: makeProp(PROP_TYPE_STRING)
+  },
+  NAME_SKELETON
+)
+
+// --- Main component ---
+
+// @vue/component
+export const BSkeleton = /*#__PURE__*/ extend({
+  name: NAME_SKELETON,
+  functional: true,
+  props,
+  render(h, { data, props }) {
+    const { size, animation, variant } = props
+
+    return h(
+      'div',
+      mergeData(data, {
+        staticClass: 'b-skeleton',
+        style: {
+          width: size || props.width,
+          height: size || props.height
+        },
+        class: {
+          [`b-skeleton-${props.type}`]: true,
+          [`b-skeleton-animate-${animation}`]: animation,
+          [`bg-${variant}`]: variant
+        }
+      })
+    )
+  }
+})

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

@@ -0,0 +1,126 @@
+import { mount } from '@vue/test-utils'
+import { BSkeleton } from './skeleton'
+
+describe('skeleton', () => {
+  it('default has root element of div, and default classes', async () => {
+    const wrapper = mount(BSkeleton)
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('DIV')
+
+    expect(wrapper.classes().length).toBe(3)
+    expect(wrapper.classes()).toContain('b-skeleton')
+    expect(wrapper.classes()).toContain('b-skeleton-text')
+    expect(wrapper.classes()).toContain('b-skeleton-animate-wave')
+
+    wrapper.destroy()
+  })
+
+  it('has class `b-skeleton-button` when `type="button"` is set', async () => {
+    const wrapper = mount(BSkeleton, {
+      propsData: {
+        type: 'button'
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.classes()).toContain('b-skeleton-button')
+
+    wrapper.destroy()
+  })
+
+  it('has class `b-skeleton-animate-fade` when `animation="fade"` is set', async () => {
+    const wrapper = mount(BSkeleton, {
+      propsData: {
+        animation: 'fade'
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.classes()).toContain('b-skeleton-animate-fade')
+
+    wrapper.destroy()
+  })
+
+  it('has no animate class when `animation` prop has falsy value', async () => {
+    const wrapper = mount(BSkeleton, {
+      propsData: {
+        animation: null
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.classes()).not.toContain('b-skeleton-animate-wave')
+
+    wrapper.destroy()
+  })
+
+  it('has `width` style set when `width` prop is used', async () => {
+    const wrapper = mount(BSkeleton, {
+      propsData: {
+        width: '50px'
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.style.width).toBe('50px')
+
+    wrapper.destroy()
+  })
+
+  it('has `height` style set when `height` prop is used', async () => {
+    const wrapper = mount(BSkeleton, {
+      propsData: {
+        height: '50px'
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.style.height).toBe('50px')
+
+    wrapper.destroy()
+  })
+
+  it('has `width` and `height` styles set when `size` prop is used', async () => {
+    const wrapper = mount(BSkeleton, {
+      propsData: {
+        size: '50px'
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.style.height).toBe('50px')
+    expect(wrapper.element.style.width).toBe('50px')
+
+    wrapper.destroy()
+  })
+
+  it('`size` prop overrules the `width` and `height` props', async () => {
+    const wrapper = mount(BSkeleton, {
+      propsData: {
+        height: '25px',
+        width: '40px',
+        size: '50px'
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.style.height).toBe('50px')
+    expect(wrapper.element.style.width).toBe('50px')
+
+    wrapper.destroy()
+  })
+
+  it('has `bg-[variant]` class applied when `variant` prop is used', async () => {
+    const wrapper = mount(BSkeleton, {
+      propsData: {
+        variant: 'primary'
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.classes()).toContain('bg-primary')
+
+    wrapper.destroy()
+  })
+})

package/src/vendor/bootstrap-vue/src/components/spinner/README.md

@@ -0,0 +1,229 @@
+# Spinner
+
+> The `<b-spinner>` component can be used to show the loading state in your projects. They're
+> rendered only with basic HTML and CSS as a lightweight Vue functional component. Their appearance,
+> alignment, and sizing can be easily customized with a few built-in props and/or Bootstrap v4
+> utility classes.
+
+Spinners can be placed just about anywhere, including inside buttons, alerts, and even `<b-table>`'s
+busy slot.
+
+```html
+<div class="text-center">
+  <b-spinner label="Spinning"></b-spinner>
+  <b-spinner type="grow" label="Spinning"></b-spinner>
+  <b-spinner variant="primary" label="Spinning"></b-spinner>
+  <b-spinner variant="primary" type="grow" label="Spinning"></b-spinner>
+  <b-spinner variant="success" label="Spinning"></b-spinner>
+  <b-spinner variant="success" type="grow" label="Spinning"></b-spinner>
+</div>
+
+<!-- b-spinners.vue -->
+```
+
+## Spinner types
+
+Bootstrap includes two types of spinners. The default spinner type is called `border` (spinning
+circle border), and the optional type `grow` (a throbber style indicator).
+
+### Border spinner
+
+Use the default `border` type spinners for a lightweight loading indicator.
+
+```html
+<div>
+  <b-spinner label="Loading..."></b-spinner>
+</div>
+
+<!-- b-spinner-border.vue -->
+```
+
+### Grow spinner
+
+If you don't fancy a `border` spinner, switch to the `grow` spinner by setting the prop `type` to
+`'grow'`. While it doesn't technically spin, it does repeatedly grow!
+
+```html
+<div>
+  <b-spinner type="grow" label="Loading..."></b-spinner>
+</div>
+
+<!-- b-spinner-grow.vue -->
+```
+
+## Spinner color variants
+
+Spinners use `currentColor` for their color, meaning it inherits the current font color. You can
+customize the color using the standard text color variants using the `variant` prop, or place
+classes or styles on the component to change its color.
+
+The `variant` prop translates the variant name to the Bootstrap v4 class `.text-{variant}`, so if
+you have custom defined text color variants, feel free to use them via the `variant` prop.
+
+```html
+<template>
+  <div>
+    <div class="text-center mb-3 d-flex justify-content-between">
+      <b-spinner
+        v-for="variant in variants"
+        :variant="variant"
+        :key="variant"
+      ></b-spinner>
+    </div>
+
+    <div class="text-center d-flex justify-content-between">
+      <b-spinner
+        v-for="variant in variants"
+        :variant="variant"
+        :key="variant"
+        type="grow"
+      ></b-spinner>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        variants: ['primary', 'secondary', 'danger', 'warning', 'success', 'info', 'light', 'dark']
+      }
+    }
+  }
+</script>
+
+<!-- b-spinner-variants.vue -->
+```
+
+**Why not use `border-color` utilities?** Each `border` spinner specifies a `transparent` border for
+at least one side, so `.border-{color}` utilities would override that.
+
+## Size
+
+Set the prop `small` to `true` to make a smaller spinner that can quickly be used within other
+components.
+
+```html
+<div>
+  <b-spinner small label="Small Spinner"></b-spinner>
+  <b-spinner small label="Small Spinner" type="grow"></b-spinner>
+</div>
+
+<!-- b-spinner-sizes.vue -->
+```
+
+Or, use custom CSS or inline styles to change the dimensions as needed.
+
+```html
+<div>
+  <b-spinner style="width: 3rem; height: 3rem;" label="Large Spinner"></b-spinner>
+  <b-spinner style="width: 3rem; height: 3rem;" label="Large Spinner" type="grow"></b-spinner>
+</div>
+
+<!-- b-spinner-sizes-custom.vue -->
+```
+
+## Alignment
+
+Spinners in Bootstrap are built with `rem`s, `currentColor`, and `display: inline-flex`. This means
+they can easily be resized, recolored, and quickly aligned.
+
+### Margin
+
+Use margin utilities like `.m-5` for easy spacing.
+
+```html
+<div>
+  <b-spinner class="m-5" label="Busy"></b-spinner>
+</div>
+
+<!-- b-spinner-margin.vue -->
+```
+
+## Placement
+
+Use flexbox utilities, float utilities, or text alignment utility classes to place spinners exactly
+where you need them in any situation.
+
+### Flex
+
+Using flex utility classes:
+
+```html
+<div>
+  <div class="d-flex justify-content-center mb-3">
+    <b-spinner label="Loading..."></b-spinner>
+  </div>
+
+  <div class="d-flex align-items-center">
+    <strong>Loading...</strong>
+    <b-spinner class="ml-auto"></b-spinner>
+  </div>
+</div>
+
+<!-- b-spinner-flex.vue -->
+```
+
+### Floats
+
+Using float utility classes:
+
+```html
+<div class="clearfix">
+  <b-spinner class="float-right" label="Floated Right"></b-spinner>
+</div>
+
+<!-- b-spinner-floats.vue -->
+```
+
+### Text align
+
+Using text alignment utility classes:
+
+```html
+<div class="text-center">
+  <b-spinner variant="primary" label="Text Centered"></b-spinner>
+</div>
+
+<!-- b-spinner-text-align.vue -->
+```
+
+## Spinners in buttons
+
+Use spinners within buttons to indicate an action is currently processing or taking place. You may
+also swap the label text out of the spinner element and utilize button text as needed.
+
+```html
+<div>
+  <b-button variant="primary" disabled>
+    <b-spinner small></b-spinner>
+    <span class="sr-only">Loading...</span>
+  </b-button>
+
+  <b-button variant="primary" disabled>
+    <b-spinner small type="grow"></b-spinner>
+    Loading...
+  </b-button>
+</div>
+
+<!-- b-spinner-buttons.vue -->
+```
+
+## Spinner accessibility
+
+Place a hidden label text inside the spinner for screen reader users, via the `label` prop or
+`label` slot. The content will be placed _inside_ the spinner wrapped in a `<span>` element that has
+the class `sr-only`, which will make the label available to screen reader users.
+
+For accessibility purposes, each spinner will automatically have a `role="status"` attribute when a
+label is provided. You can easily customize the role if required via prop `role`. The specified
+`role` will not be applied when no label is provided.
+
+As well, when no label is provided, the spinner will automatically have the attribute
+`aria-hidden="true"` to hide the spinner from screen reader users.
+
+## See also
+
+An alternative to the `<b-spinner>` component are [animated icons](/docs/icons/#animated-icons).
+
+<!-- Component reference added automatically from component package.json -->

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

@@ -0,0 +1,11 @@
+//
+// Spinner
+//
+import Vue from 'vue'
+import { BvPlugin, BvComponent } from '../../'
+
+// Plugin
+export declare const SpinnerPlugin: BvPlugin
+
+// Component: b-alert
+export declare class BSpinner extends BvComponent {}

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

@@ -0,0 +1,8 @@
+import { BSpinner } from './spinner'
+import { pluginFactory } from '../../utils/plugins'
+
+const SpinnerPlugin = /*#__PURE__*/ pluginFactory({
+  components: { BSpinner }
+})
+
+export { SpinnerPlugin, BSpinner }

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

@@ -0,0 +1,38 @@
+{
+  "name": "@bootstrap-vue/spinner",
+  "version": "1.0.0",
+  "meta": {
+    "title": "Spinner",
+    "description": "The <b-spinner> component can be used to show the loading state in your projects. They're rendered only with basic HTML and CSS as a lightweight Vue functional component.",
+    "slug": "spinner",
+    "components": [
+      {
+        "component": "BSpinner",
+        "props": [
+          {
+            "prop": "label",
+            "description": "Text content to place in the sr-only label"
+          },
+          {
+            "prop": "small",
+            "description": "When set, rendered a smaller spinner suitable for placing in buttons"
+          },
+          {
+            "prop": "type",
+            "description": "Type of spinner to show. Current supported types are 'border' and 'grow'"
+          },
+          {
+            "prop": "variant",
+            "description": "Applies one of the Bootstrap theme color variants to the component"
+          }
+        ],
+        "slots": [
+          {
+            "name": "label",
+            "description": "Content to place in the sr-only label"
+          }
+        ]
+      }
+    ]
+  }
+}