@gitlab/ui 92.2.0 → 92.3.0

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

@@ -1,404 +0,0 @@
-import { createWrapper, mount } from '@vue/test-utils'
-import { waitNT, waitRAF } from '../../../tests/utils'
-import { BSidebar } from './sidebar'
-
-const ROOT_ACTION_EVENT_NAME_REQUEST_STATE = 'bv::request-state::collapse'
-const ROOT_ACTION_EVENT_NAME_TOGGLE = 'bv::toggle::collapse'
-
-const ROOT_EVENT_NAME_STATE = 'bv::collapse::state'
-const ROOT_EVENT_NAME_SYNC_STATE = 'bv::collapse::sync-state'
-
-describe('sidebar', () => {
-  it('should have expected default structure', async () => {
-    const wrapper = mount(BSidebar, {
-      attachTo: document.body,
-      propsData: {
-        id: 'test-1',
-        visible: true
-      }
-    })
-
-    expect(wrapper.vm).toBeDefined()
-
-    const $sidebar = wrapper.find('.b-sidebar')
-    expect($sidebar.exists()).toBe(true)
-
-    const $backdrop = wrapper.find('.b-sidebar-backdrop')
-    expect($backdrop.exists()).toBe(false)
-
-    expect($sidebar.element.tagName).toBe('DIV')
-    expect($sidebar.attributes('id')).toBeDefined()
-    expect($sidebar.attributes('id')).toEqual('test-1')
-    expect($sidebar.classes()).toContain('b-sidebar')
-    expect($sidebar.classes()).not.toContain('b-sidebar-right')
-    // `show` and `slide` class only added during transition
-    expect($sidebar.classes()).not.toContain('show')
-    expect($sidebar.classes()).not.toContain('slide')
-    expect($sidebar.text()).toEqual('')
-    // Check for no presence of `display: none' from `v-show` directive
-    expect($sidebar.element).toBeVisible()
-
-    expect($sidebar.find('.b-sidebar-header').exists()).toBe(true)
-    expect($sidebar.find('.b-sidebar-body').exists()).toBe(true)
-    expect($sidebar.find('.b-sidebar-footer').exists()).toBe(false)
-
-    await wrapper.setProps({ visible: false })
-    await waitRAF()
-    await waitRAF()
-    expect(wrapper.vm).toBeDefined()
-    expect(wrapper.element.tagName).toBe('DIV')
-    // Check for no presence of `display: none' from `v-show` directive
-    expect($sidebar.element).not.toBeVisible()
-
-    await wrapper.setProps({ visible: true })
-    await waitRAF()
-    await waitRAF()
-    expect(wrapper.element.tagName).toBe('DIV')
-    // Check for no presence of `display: none' from `v-show` directive
-    expect($sidebar.element).toBeVisible()
-
-    wrapper.destroy()
-  })
-
-  it('shows backdrop when prop `backdrop` is `true`', async () => {
-    const wrapper = mount(BSidebar, {
-      attachTo: document.body,
-      propsData: {
-        id: 'test-backdrop',
-        noCloseOnBackdrop: true,
-        visible: true,
-        backdrop: true
-      }
-    })
-
-    expect(wrapper.vm).toBeDefined()
-
-    const $sidebar = wrapper.find('.b-sidebar')
-    expect($sidebar.exists()).toBe(true)
-
-    const $backdrop = wrapper.find('.b-sidebar-backdrop')
-    expect($backdrop.exists()).toBe(true)
-    expect($backdrop.classes()).toContain('bg-dark')
-
-    await $backdrop.trigger('click')
-    await waitRAF()
-    await waitRAF()
-    expect($sidebar.element).toBeVisible()
-    expect($backdrop.element).toBeVisible()
-
-    await wrapper.setProps({ noCloseOnBackdrop: false })
-    await waitRAF()
-    await waitRAF()
-    expect($sidebar.element).toBeVisible()
-    expect($backdrop.element).toBeVisible()
-
-    await $backdrop.trigger('click')
-    await waitRAF()
-    await waitRAF()
-    expect($sidebar.element).not.toBeVisible()
-    expect($backdrop.element).not.toBeVisible()
-
-    wrapper.destroy()
-  })
-
-  it('applies "bg-*" class to backdrop based on `backdrop-variant` prop', async () => {
-    const wrapper = mount(BSidebar, {
-      attachTo: document.body,
-      propsData: {
-        id: 'test-backdrop',
-        noCloseOnBackdrop: true,
-        visible: true,
-        backdrop: true,
-        backdropVariant: 'transparent'
-      }
-    })
-
-    expect(wrapper.vm).toBeDefined()
-
-    const $sidebar = wrapper.find('.b-sidebar')
-    expect($sidebar.exists()).toBe(true)
-
-    const $backdrop = wrapper.find('.b-sidebar-backdrop')
-    expect($backdrop.exists()).toBe(true)
-    expect($backdrop.classes()).toContain('bg-transparent')
-
-    await $backdrop.trigger('click')
-    await waitRAF()
-    await waitRAF()
-    expect($sidebar.element).toBeVisible()
-    expect($backdrop.element).toBeVisible()
-
-    await wrapper.setProps({ noCloseOnBackdrop: false })
-    await waitRAF()
-    await waitRAF()
-    expect($sidebar.element).toBeVisible()
-    expect($backdrop.element).toBeVisible()
-
-    await $backdrop.trigger('click')
-    await waitRAF()
-    await waitRAF()
-    expect($sidebar.element).not.toBeVisible()
-    expect($backdrop.element).not.toBeVisible()
-
-    wrapper.destroy()
-  })
-
-  it('shows and hides in response to v-b-toggle events', async () => {
-    const wrapper = mount(BSidebar, {
-      attachTo: document.body,
-      propsData: {
-        id: 'test-toggle'
-      }
-    })
-
-    expect(wrapper.vm).toBeDefined()
-
-    const $sidebar = wrapper.find('.b-sidebar')
-    expect($sidebar.exists()).toBe(true)
-    expect($sidebar.element.tagName).toBe('DIV')
-    expect($sidebar.element).not.toBeVisible()
-
-    wrapper.vm.$root.$emit(ROOT_ACTION_EVENT_NAME_TOGGLE, 'test-toggle')
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitRAF()
-    expect($sidebar.element.tagName).toBe('DIV')
-    expect($sidebar.element).toBeVisible()
-
-    wrapper.vm.$root.$emit(ROOT_ACTION_EVENT_NAME_TOGGLE, 'test-toggle')
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitRAF()
-    expect($sidebar.element.tagName).toBe('DIV')
-    expect($sidebar.element).not.toBeVisible()
-
-    wrapper.vm.$root.$emit(ROOT_ACTION_EVENT_NAME_TOGGLE, 'foobar')
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitRAF()
-    expect($sidebar.element.tagName).toBe('DIV')
-    expect($sidebar.element).not.toBeVisible()
-
-    wrapper.destroy()
-  })
-
-  it('closes when ESC key is pressed', async () => {
-    const wrapper = mount(BSidebar, {
-      attachTo: document.body,
-      propsData: {
-        id: 'test-esc'
-      }
-    })
-
-    expect(wrapper.vm).toBeDefined()
-
-    const $sidebar = wrapper.find('.b-sidebar')
-    expect($sidebar.exists()).toBe(true)
-    expect($sidebar.element.tagName).toBe('DIV')
-    expect($sidebar.element).not.toBeVisible()
-
-    wrapper.vm.$root.$emit(ROOT_ACTION_EVENT_NAME_TOGGLE, 'test-esc')
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitRAF()
-    expect($sidebar.element.tagName).toBe('DIV')
-    expect($sidebar.element).toBeVisible()
-
-    await wrapper.trigger('keydown.esc')
-    await waitRAF()
-    await waitRAF()
-    expect($sidebar.element.tagName).toBe('DIV')
-    expect($sidebar.element).not.toBeVisible()
-
-    await wrapper.setProps({ noCloseOnEsc: true })
-    wrapper.vm.$root.$emit(ROOT_ACTION_EVENT_NAME_TOGGLE, 'test-esc')
-    await waitRAF()
-    await waitRAF()
-    expect($sidebar.element.tagName).toBe('DIV')
-    expect($sidebar.element).toBeVisible()
-
-    await wrapper.trigger('keydown.esc')
-    await waitRAF()
-    await waitRAF()
-    expect($sidebar.element.tagName).toBe('DIV')
-    expect($sidebar.element).toBeVisible()
-
-    wrapper.destroy()
-  })
-
-  it('handles state sync requests', async () => {
-    const wrapper = mount(BSidebar, {
-      attachTo: document.body,
-      propsData: {
-        id: 'test-sync',
-        visible: true
-      }
-    })
-
-    expect(wrapper.vm).toBeDefined()
-
-    const rootWrapper = createWrapper(wrapper.vm.$root)
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitRAF()
-    expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE)).toBeDefined()
-    expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE).length).toBe(1)
-    expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE)[0][0]).toBe('test-sync') // ID
-    expect(rootWrapper.emitted(ROOT_EVENT_NAME_STATE)[0][1]).toBe(true) // Visible state
-    expect(rootWrapper.emitted(ROOT_EVENT_NAME_SYNC_STATE)).toBeUndefined()
-
-    rootWrapper.vm.$root.$emit(ROOT_ACTION_EVENT_NAME_REQUEST_STATE, 'test-sync')
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitRAF()
-    expect(rootWrapper.emitted(ROOT_EVENT_NAME_SYNC_STATE)).toBeDefined()
-    expect(rootWrapper.emitted(ROOT_EVENT_NAME_SYNC_STATE).length).toBe(1)
-    expect(rootWrapper.emitted(ROOT_EVENT_NAME_SYNC_STATE)[0][0]).toBe('test-sync') // ID
-    expect(rootWrapper.emitted(ROOT_EVENT_NAME_SYNC_STATE)[0][1]).toBe(true) // Visible state
-
-    wrapper.destroy()
-  })
-
-  it('should have expected structure when `no-header` is set', async () => {
-    const wrapper = mount(BSidebar, {
-      attachTo: document.body,
-      propsData: {
-        id: 'test-2',
-        visible: true,
-        noHeader: true
-      }
-    })
-
-    expect(wrapper.vm).toBeDefined()
-    expect(wrapper.element.tagName).toBe('DIV')
-    expect(wrapper.find('.b-sidebar-header').exists()).toBe(false)
-    expect(wrapper.find('.b-sidebar-body').exists()).toBe(true)
-    expect(wrapper.find('.b-sidebar-footer').exists()).toBe(false)
-
-    wrapper.destroy()
-  })
-
-  it('should have expected structure when `no-header-close` is set', async () => {
-    const wrapper = mount(BSidebar, {
-      attachTo: document.body,
-      propsData: {
-        id: 'test-3',
-        visible: true,
-        noHeaderClose: true
-      }
-    })
-
-    expect(wrapper.vm).toBeDefined()
-    expect(wrapper.element.tagName).toBe('DIV')
-    expect(wrapper.find('.b-sidebar-header').exists()).toBe(true)
-    expect(wrapper.find('.b-sidebar-header .close').exists()).toBe(false)
-    expect(wrapper.find('.b-sidebar-body').exists()).toBe(true)
-    expect(wrapper.find('.b-sidebar-footer').exists()).toBe(false)
-
-    wrapper.destroy()
-  })
-
-  it('should have expected structure when `lazy` is set', async () => {
-    const wrapper = mount(BSidebar, {
-      attachTo: document.body,
-      propsData: {
-        id: 'test-4',
-        visible: false,
-        lazy: true
-      }
-    })
-
-    expect(wrapper.vm).toBeDefined()
-    expect(wrapper.element.tagName).toBe('DIV')
-    expect(wrapper.find('.b-sidebar-header').exists()).toBe(true)
-    expect(wrapper.find('.b-sidebar-body').exists()).toBe(false)
-    expect(wrapper.find('.b-sidebar-footer').exists()).toBe(false)
-
-    await wrapper.setProps({ visible: true })
-    await waitRAF()
-    await waitRAF()
-    expect(wrapper.element.tagName).toBe('DIV')
-    expect(wrapper.find('.b-sidebar-header').exists()).toBe(true)
-    expect(wrapper.find('.b-sidebar-body').exists()).toBe(true)
-    expect(wrapper.find('.b-sidebar-footer').exists()).toBe(false)
-
-    wrapper.destroy()
-  })
-
-  it('should have expected structure when `header` slot provided', async () => {
-    const wrapper = mount(BSidebar, {
-      attachTo: document.body,
-      propsData: {
-        id: 'sidebar-header-slot',
-        visible: true,
-        title: 'TITLE',
-        headerTag: 'div'
-      },
-      slots: {
-        header: 'Custom header'
-      }
-    })
-
-    expect(wrapper.vm).toBeDefined()
-    expect(wrapper.element.tagName).toBe('DIV')
-
-    const $header = wrapper.find('.b-sidebar-header')
-    expect($header.exists()).toBe(true)
-    expect($header.element.tagName).toBe('DIV')
-    expect($header.find('strong').exists()).toBe(false)
-    expect($header.find('button').exists()).toBe(false)
-    expect($header.text()).toContain('Custom header')
-    expect($header.text()).not.toContain('TITLE')
-
-    expect(wrapper.find('.b-sidebar-footer').exists()).toBe(false)
-
-    wrapper.destroy()
-  })
-
-  it('should have expected structure when `footer` slot provided', async () => {
-    const wrapper = mount(BSidebar, {
-      attachTo: document.body,
-      propsData: {
-        id: 'test-5',
-        visible: true,
-        footerTag: 'div'
-      },
-      slots: {
-        footer: '<span>FOOTER</span>'
-      }
-    })
-
-    expect(wrapper.vm).toBeDefined()
-    expect(wrapper.element.tagName).toBe('DIV')
-
-    expect(wrapper.find('.b-sidebar-header').exists()).toBe(true)
-    expect(wrapper.find('.b-sidebar-body').exists()).toBe(true)
-
-    const $footer = wrapper.find('.b-sidebar-footer')
-    expect($footer.exists()).toBe(true)
-    expect($footer.element.tagName).toBe('DIV')
-    expect($footer.text()).toEqual('FOOTER')
-
-    wrapper.destroy()
-  })
-
-  it('should have expected structure when `title` prop provided', async () => {
-    const wrapper = mount(BSidebar, {
-      attachTo: document.body,
-      propsData: {
-        id: 'test-title',
-        visible: true,
-        title: 'TITLE'
-      }
-    })
-
-    expect(wrapper.vm).toBeDefined()
-    expect(wrapper.element.tagName).toBe('DIV')
-    expect(wrapper.find('.b-sidebar-header').exists()).toBe(true)
-    expect(wrapper.find('.b-sidebar-header > strong').text()).toEqual('TITLE')
-    expect(wrapper.find('.b-sidebar-body').exists()).toBe(true)
-    expect(wrapper.find('.b-sidebar-footer').exists()).toBe(false)
-
-    wrapper.destroy()
-  })
-})

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

@@ -1,275 +0,0 @@
-# Skeleton
-
-> `<b-skeleton>` is a BootstrapVue custom component, that allows you to display a loading state for
-> several component types while your data is being fetched or computed.
-
-**Example: Basic usage**
-
-```html
-<template>
-  <div>
-    <div class="d-flex align-items-center mb-3">
-      <b-progress class="w-100" :max="maxLoadingTime" height="1.5rem">
-        <b-progress-bar :value="loadingTime" :label="`${((loadingTime / maxLoadingTime) * 100).toFixed(2)}%`"></b-progress-bar>
-      </b-progress>
-
-      <b-button class="ml-3" @click="startLoading()">Reload</b-button>
-    </div>
-
-    <b-skeleton-wrapper :loading="loading">
-      <template #loading>
-        <b-card>
-          <b-skeleton width="85%"></b-skeleton>
-          <b-skeleton width="55%"></b-skeleton>
-          <b-skeleton width="70%"></b-skeleton>
-        </b-card>
-      </template>
-
-      <b-card>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra nunc sapien,
-        non rhoncus elit tincidunt vitae. Vestibulum maximus, ligula eu feugiat molestie,
-        massa diam imperdiet odio, vitae viverra ligula est id nisi. Aliquam ut molestie est.
-        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
-        turpis egestas. Phasellus at consequat dui. Aenean tristique sagittis quam,
-        sit amet sollicitudin neque sodales in.
-      </b-card>
-    </b-skeleton-wrapper>
-  </div>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        loading: false,
-        loadingTime: 0,
-        maxLoadingTime: 3
-      }
-    },
-    watch: {
-      loading(newValue, oldValue) {
-        if (newValue !== oldValue) {
-          this.clearLoadingTimeInterval()
-
-          if (newValue) {
-            this.$_loadingTimeInterval = setInterval(() => {
-              this.loadingTime++
-            }, 1000)
-          }
-        }
-      },
-      loadingTime(newValue, oldValue) {
-        if (newValue !== oldValue) {
-          if (newValue === this.maxLoadingTime) {
-            this.loading = false
-          }
-        }
-      }
-    },
-    created() {
-      this.$_loadingTimeInterval = null
-    },
-    mounted() {
-      this.startLoading()
-    },
-    methods: {
-      clearLoadingTimeInterval() {
-        clearInterval(this.$_loadingTimeInterval)
-        this.$_loadingTimeInterval = null
-      },
-      startLoading() {
-        this.loading = true
-        this.loadingTime = 0
-      }
-    }
-  }
-</script>
-
-<!-- b-skeleton.vue -->
-```
-
-## Types
-
-`<b-skeleton>` supports various basic types, to represent various components in your project.
-
-```html
-<h5>Text (default)</h5>
-<b-skeleton></b-skeleton>
-
-<h5 class="mt-3">Avatar</h5>
-<b-skeleton type="avatar"></b-skeleton>
-
-<h5 class="mt-3">Input</h5>
-<b-skeleton type="input"></b-skeleton>
-
-<h5 class="mt-3">Button</h5>
-<b-skeleton type="button"></b-skeleton>
-
-<!-- b-skeleton-types.vue -->
-```
-
-## Skeleton animations
-
-`<b-skeleton>` supports different animations. You can set them per component or change it globally
-in the [settings](/docs/reference/settings).
-
-```html
-<h5>Wave (default)</h5>
-<b-card>
-  <b-skeleton animation="wave" width="85%"></b-skeleton>
-  <b-skeleton animation="wave" width="55%"></b-skeleton>
-  <b-skeleton animation="wave" width="70%"></b-skeleton>
-</b-card>
-
-<h5 class="mt-3">Fade</h5>
-<b-card>
-  <b-skeleton animation="fade" width="85%"></b-skeleton>
-  <b-skeleton animation="fade" width="55%"></b-skeleton>
-  <b-skeleton animation="fade" width="70%"></b-skeleton>
-</b-card>
-
-<h5 class="mt-3">Throb</h5>
-<b-card>
-  <b-skeleton animation="throb" width="85%"></b-skeleton>
-  <b-skeleton animation="throb" width="55%"></b-skeleton>
-  <b-skeleton animation="throb" width="70%"></b-skeleton>
-</b-card>
-
-<h5 class="mt-3">None</h5>
-<b-card>
-  <b-skeleton animation width="85%"></b-skeleton>
-  <b-skeleton animation width="55%"></b-skeleton>
-  <b-skeleton animation width="70%"></b-skeleton>
-</b-card>
-
-<!-- b-skeleton-animations.vue -->
-```
-
-## Helper components
-
-Utilize `<b-skeleton>` helper components to quickly scaffold existing components.
-
-### Table
-
-`<b-skeleton-table>` allows you to scaffold a basic table structure by utilizing the `rows` and
-`columns` props to define the size of the table. You can pass props directly to the table via the
-`table-props` property, which supports the same props as `<b-table-simple>`. Refer to the
-`<b-table-simple>` [documentation](/docs/components/table#comp-ref-b-table-simple) for a complete
-list.
-
-```html
-<b-skeleton-table
-  :rows="5"
-  :columns="4"
-  :table-props="{ bordered: true, striped: true }"
-></b-skeleton-table>
-
-<!-- b-skeleton-helper-table.vue -->
-```
-
-### Image
-
-Utilize `<b-skeleton-img>` to represent images. It utilizes a 16:9 aspect ratio by default, for a
-responsive sizing. You can overwrite this by applying `no-aspect` and utilize the `height` and
-`width` props to set your own sizing.
-
-```html
-<b-row>
-  <b-col>
-    <b-skeleton-img></b-skeleton-img>
-  </b-col>
-  <b-col>
-    <b-skeleton-img></b-skeleton-img>
-  </b-col>
-  <b-col cols="12" class="mt-3">
-    <b-skeleton-img no-aspect height="150px"></b-skeleton-img>
-  </b-col>
-</b-row>
-
-<!-- b-skeleton-helper-img.vue -->
-```
-
-#### Card Image
-
-Use `<b-skeleton-img>` to represent images in `<b-card>`. Remember to set the `card-img` prop to the
-position of the image. This will apply the proper border-radius.
-
-```html
-<b-row>
-  <b-col cols="12" md="6">
-    <h5>Image top</h5>
-    <b-card no-body img-top>
-      <b-skeleton-img card-img="top" aspect="3:1"></b-skeleton-img>
-      <b-card-body>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra nunc sapien,
-        non rhoncus elit tincidunt vitae.
-      </b-card-body>
-    </b-card>
-  </b-col>
-  <b-col cols="12" md="6">
-    <h5>Image bottom</h5>
-    <b-card no-body img-bottom>
-      <b-card-body>
-        Vestibulum maximus, ligula eu feugiat molestie, massa diam imperdiet odio, vitae viverra
-        ligula est id nisi. Aliquam ut molestie est.
-      </b-card-body>
-      <b-skeleton-img card-img="bottom" aspect="3:1"></b-skeleton-img>
-    </b-card>
-  </b-col>
-</b-row>
-
-<b-row class="mt-md-3">
-  <b-col cols="12" md="6">
-    <h5>Image left</h5>
-    <b-card no-body img-left>
-      <b-skeleton-img card-img="left" width="225px"></b-skeleton-img>
-      <b-card-body>
-        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
-        egestas. Phasellus at consequat dui.
-      </b-card-body>
-    </b-card>
-  </b-col>
-  <b-col cols="12" md="6">
-    <h5>Image right</h5>
-    <b-card no-body img-right>
-      <b-skeleton-img card-img="right" width="225px"></b-skeleton-img>
-      <b-card-body>
-        Aenean tristique sagittis quam, sit amet sollicitudin neque sodales in.
-      </b-card-body>
-    </b-card>
-  </b-col>
-</b-row>
-
-<!-- b-skeleton-helper-card-img.vue -->
-```
-
-## Icons
-
-`<b-skeleton-icon>` can also be used as placeholder for icons. If you need to use any icon props,
-you can pass them via the `icon-props` property.
-
-```html
-<b-skeleton-icon
-  icon="person"
-  :icon-props="{ fontScale: 2 }"
-></b-skeleton-icon>
-
-<b-skeleton-icon
-  icon="person-fill"
-  :icon-props="{ fontScale: 2, variant: 'dark' }"
-></b-skeleton-icon>
-
-<!-- b-skeleton-helper-card-icon.vue -->
-```
-
-**Note:** The `throb` animation does not work with `b-skeleton-icon`.
-
-## Styling and customization
-
-The `<b-skeleton>` component and helper components utilizes Bootstrap SCSS variables, as much as
-possible to best match the styling and sizing of the native components. This means if you've
-customized Bootstrap SCSS, the skeleton components should adapt to fit your custom theming.
-
-We've also provided a few custom SCSS variables, that can be used to further customize the styling
-of the various `<b-skeleton>` components. You can read more about how to change these variables in
-the [theming section](/docs/reference/theming#bootstrapvue-sass-variables).