@gitlab/ui 84.2.0 → 85.0.1

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

@@ -0,0 +1,91 @@
+import { mount } from '@vue/test-utils'
+import { BTable } from './table'
+
+const testItems = [{ a: 1, b: 2, c: 3 }]
+const testFields = [{ key: 'a', label: 'A' }, { key: 'b', label: 'B' }, { key: 'c', label: 'C' }]
+
+describe('table > custom tfoot slot', () => {
+  it('should not render tfoot by default', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        fields: testFields,
+        items: testItems,
+        footClone: false
+      }
+    })
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('TABLE')
+    expect(wrapper.find('thead').exists()).toBe(true)
+    expect(wrapper.find('tbody').exists()).toBe(true)
+    expect(wrapper.find('tfoot').exists()).toBe(false)
+
+    wrapper.destroy()
+  })
+
+  it('should render custom-foot slot inside b-tfoot', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        fields: testFields,
+        items: testItems,
+        footClone: false
+      },
+      slots: {
+        'custom-foot': '<tr><td colspan="3">CUSTOM-FOOTER</td></tr>'
+      }
+    })
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('TABLE')
+    expect(wrapper.find('thead').exists()).toBe(true)
+    expect(wrapper.find('tbody').exists()).toBe(true)
+    expect(wrapper.find('tfoot').exists()).toBe(true)
+    expect(wrapper.find('tfoot').text()).toContain('CUSTOM-FOOTER')
+    expect(wrapper.find('tfoot').classes().length).toBe(0)
+
+    wrapper.destroy()
+  })
+
+  it('should not render custom-foot slot when foot-clone is true', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        fields: testFields,
+        items: testItems,
+        footClone: true
+      },
+      slots: {
+        'custom-foot': '<tr><td colspan="3">CUSTOM-FOOTER</td></tr>'
+      }
+    })
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('TABLE')
+    expect(wrapper.find('thead').exists()).toBe(true)
+    expect(wrapper.find('tbody').exists()).toBe(true)
+    expect(wrapper.find('tfoot').exists()).toBe(true)
+    expect(wrapper.find('tfoot').text()).not.toContain('CUSTOM-FOOTER')
+
+    wrapper.destroy()
+  })
+
+  it('should have foot-variant on custom-foot slot', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        fields: testFields,
+        items: testItems,
+        footClone: false,
+        footVariant: 'dark'
+      },
+      slots: {
+        'custom-foot': '<tr><td colspan="3">CUSTOM-FOOTER</td></tr>'
+      }
+    })
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('TABLE')
+    expect(wrapper.find('thead').exists()).toBe(true)
+    expect(wrapper.find('tbody').exists()).toBe(true)
+    expect(wrapper.find('tfoot').exists()).toBe(true)
+    expect(wrapper.find('tfoot').text()).toContain('CUSTOM-FOOTER')
+    expect(wrapper.find('tfoot').classes()).toContain('thead-dark')
+    expect(wrapper.find('tfoot').classes().length).toBe(1)
+
+    wrapper.destroy()
+  })
+})

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

@@ -0,0 +1,137 @@
+import { mount } from '@vue/test-utils'
+import { BTable } from './table'
+
+const testItems = [{ a: 1, b: 2, c: 3 }]
+const testFields = [{ key: 'a', label: 'A' }, { key: 'b', label: 'B' }, { key: 'c', label: 'C' }]
+
+describe('table > tfoot events', () => {
+  it('should emit head-clicked event when a head cell is clicked', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        fields: testFields,
+        items: testItems,
+        footClone: true
+      },
+      listeners: {
+        // Head-clicked will not be emitted unless there is a
+        // registered head-clicked listener
+        'head-clicked': () => {}
+      }
+    })
+    expect(wrapper).toBeDefined()
+    const $rows = wrapper.findAll('tfoot > tr')
+    expect($rows.length).toBe(1)
+    const $ths = wrapper.findAll('tfoot > tr > th')
+    expect($ths.length).toBe(testFields.length)
+    expect(wrapper.emitted('head-clicked')).toBeUndefined()
+    await $ths.at(0).trigger('click')
+    expect(wrapper.emitted('head-clicked')).toBeDefined()
+    expect(wrapper.emitted('head-clicked').length).toBe(1)
+    expect(wrapper.emitted('head-clicked')[0][0]).toEqual(testFields[0].key) // Field key
+    expect(wrapper.emitted('head-clicked')[0][1]).toEqual(testFields[0]) // Field definition
+    expect(wrapper.emitted('head-clicked')[0][2]).toBeInstanceOf(MouseEvent) // Event
+    expect(wrapper.emitted('head-clicked')[0][3]).toBe(true) // Is footer
+
+    await $ths.at(2).trigger('click')
+    expect(wrapper.emitted('head-clicked').length).toBe(2)
+    expect(wrapper.emitted('head-clicked')[1][0]).toEqual(testFields[2].key) // Field key
+    expect(wrapper.emitted('head-clicked')[1][1]).toEqual(testFields[2]) // Field definition
+    expect(wrapper.emitted('head-clicked')[1][2]).toBeInstanceOf(MouseEvent) // Event
+    expect(wrapper.emitted('head-clicked')[1][3]).toBe(true) // Is footer
+
+    wrapper.destroy()
+  })
+
+  it('should not emit head-clicked event when prop busy is set', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        fields: testFields,
+        items: testItems,
+        footClone: true,
+        busy: true
+      },
+      listeners: {
+        // Head-clicked will not be emitted unless there is a
+        // registered head-clicked listener
+        'head-clicked': () => {}
+      }
+    })
+    expect(wrapper).toBeDefined()
+    const $ths = wrapper.findAll('tfoot > tr > th')
+    expect($ths.length).toBe(testFields.length)
+    expect(wrapper.emitted('head-clicked')).toBeUndefined()
+    await $ths.at(0).trigger('click')
+    expect(wrapper.emitted('head-clicked')).toBeUndefined()
+
+    wrapper.destroy()
+  })
+
+  it('should not emit head-clicked event when vm.localBusy is true', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        fields: testFields,
+        items: testItems,
+        footClone: true
+      },
+      listeners: {
+        // Head-clicked will not be emitted unless there is a
+        // registered head-clicked listener
+        'head-clicked': () => {}
+      }
+    })
+    await wrapper.setData({
+      localBusy: true
+    })
+    expect(wrapper).toBeDefined()
+    const $ths = wrapper.findAll('tfoot > tr > th')
+    expect($ths.length).toBe(testFields.length)
+    expect(wrapper.emitted('head-clicked')).toBeUndefined()
+    await $ths.at(0).trigger('click')
+    expect(wrapper.emitted('head-clicked')).toBeUndefined()
+
+    wrapper.destroy()
+  })
+
+  it('should not emit head-clicked event when clicking on a button or other interactive element', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        fields: testFields,
+        items: testItems,
+        footClone: true
+      },
+      listeners: {
+        // Head-clicked will not be emitted unless there is a
+        // registered head-clicked listener
+        'head-clicked': () => {}
+      },
+      slots: {
+        // In Vue 2.6x, slots get translated into scopedSlots
+        'foot(a)': '<button id="a">button</button>',
+        'foot(b)': '<input id="b">',
+        // Will use `head` slot if foot slot not defined
+        'head(c)': '<a href="#" id="c">link</a>'
+      }
+    })
+    expect(wrapper).toBeDefined()
+    const $ths = wrapper.findAll('tfoot > tr > th')
+    expect($ths.length).toBe(testFields.length)
+    expect(wrapper.emitted('head-clicked')).toBeUndefined()
+
+    const $btn = wrapper.find('button[id="a"]')
+    expect($btn.exists()).toBe(true)
+    await $btn.trigger('click')
+    expect(wrapper.emitted('head-clicked')).toBeUndefined()
+
+    const $input = wrapper.find('input[id="b"]')
+    expect($input.exists()).toBe(true)
+    await $input.trigger('click')
+    expect(wrapper.emitted('head-clicked')).toBeUndefined()
+
+    const $link = wrapper.find('a[id="c"]')
+    expect($link.exists()).toBe(true)
+    await $link.trigger('click')
+    expect(wrapper.emitted('head-clicked')).toBeUndefined()
+
+    wrapper.destroy()
+  })
+})

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

@@ -0,0 +1,155 @@
+import { mount } from '@vue/test-utils'
+import { isVue3 } from '../../vue'
+import { BTable } from './table'
+
+const testItems = [{ a: 1, b: 2, c: 3 }]
+const testFields = [{ key: 'a', label: 'A' }, { key: 'b', label: 'B' }, { key: 'c', label: 'C' }]
+
+describe('table > thead events', () => {
+  it('should not emit head-clicked event when a head cell is clicked and no head-clicked listener', async () => {
+    if (isVue3) {
+      // We can't track if we have an event listener in vue3 so we skip this test for vue 3
+      return
+    }
+    const wrapper = mount(BTable, {
+      propsData: {
+        fields: testFields,
+        items: testItems
+      },
+      listeners: {}
+    })
+    expect(wrapper).toBeDefined()
+    const $rows = wrapper.findAll('thead > tr')
+    expect($rows.length).toBe(1)
+    const $ths = wrapper.findAll('thead > tr > th')
+    expect($ths.length).toBe(testFields.length)
+    expect(wrapper.emitted('head-clicked')).toBeUndefined()
+    await $ths.at(0).trigger('click')
+    expect(wrapper.emitted('head-clicked')).toBeUndefined()
+    await $ths.at(1).trigger('click')
+    expect(wrapper.emitted('head-clicked')).toBeUndefined()
+    await $ths.at(2).trigger('click')
+    expect(wrapper.emitted('head-clicked')).toBeUndefined()
+  })
+
+  it('should emit head-clicked event when a head cell is clicked', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        fields: testFields,
+        items: testItems
+      },
+      listeners: {
+        // Head-clicked will only be emitted if there is a registered listener
+        'head-clicked': () => {}
+      }
+    })
+    expect(wrapper).toBeDefined()
+    const $rows = wrapper.findAll('thead > tr')
+    expect($rows.length).toBe(1)
+    const $ths = wrapper.findAll('thead > tr > th')
+    expect($ths.length).toBe(testFields.length)
+    expect(wrapper.emitted('head-clicked')).toBeUndefined()
+    await $ths.at(0).trigger('click')
+    expect(wrapper.emitted('head-clicked')).toBeDefined()
+    expect(wrapper.emitted('head-clicked').length).toBe(1)
+    expect(wrapper.emitted('head-clicked')[0][0]).toEqual(testFields[0].key) // Field key
+    expect(wrapper.emitted('head-clicked')[0][1]).toEqual(testFields[0]) // Field definition
+    expect(wrapper.emitted('head-clicked')[0][2]).toBeInstanceOf(MouseEvent) // Event
+    expect(wrapper.emitted('head-clicked')[0][3]).toBe(false) // Is footer
+
+    await $ths.at(2).trigger('click')
+    expect(wrapper.emitted('head-clicked').length).toBe(2)
+    expect(wrapper.emitted('head-clicked')[1][0]).toEqual(testFields[2].key) // Field key
+    expect(wrapper.emitted('head-clicked')[1][1]).toEqual(testFields[2]) // Field definition
+    expect(wrapper.emitted('head-clicked')[1][2]).toBeInstanceOf(MouseEvent) // Event
+    expect(wrapper.emitted('head-clicked')[1][3]).toBe(false) // Is footer
+
+    wrapper.destroy()
+  })
+
+  it('should not emit head-clicked event when prop busy is set', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        fields: testFields,
+        items: testItems,
+        busy: true
+      },
+      listeners: {
+        // Head-clicked will only be emitted if there is a registered listener
+        'head-clicked': () => {}
+      }
+    })
+    expect(wrapper).toBeDefined()
+    const $ths = wrapper.findAll('thead > tr > th')
+    expect($ths.length).toBe(testFields.length)
+    expect(wrapper.emitted('head-clicked')).toBeUndefined()
+    await $ths.at(0).trigger('click')
+    expect(wrapper.emitted('head-clicked')).toBeUndefined()
+
+    wrapper.destroy()
+  })
+
+  it('should not emit head-clicked event when vm.localBusy is true', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        fields: testFields,
+        items: testItems
+      },
+      listeners: {
+        // Head-clicked will only be emitted if there is a registered listener
+        'head-clicked': () => {}
+      }
+    })
+    await wrapper.setData({
+      localBusy: true
+    })
+    expect(wrapper).toBeDefined()
+    const $ths = wrapper.findAll('thead > tr > th')
+    expect($ths.length).toBe(testFields.length)
+    expect(wrapper.emitted('head-clicked')).toBeUndefined()
+    await $ths.at(0).trigger('click')
+    expect(wrapper.emitted('head-clicked')).toBeUndefined()
+
+    wrapper.destroy()
+  })
+
+  it('should not emit head-clicked event when clicking on a button or other interactive element', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        fields: testFields,
+        items: testItems
+      },
+      listeners: {
+        // Head-clicked will only be emitted if there is a registered listener
+        'head-clicked': () => {}
+      },
+      slots: {
+        // In Vue 2.6x, slots get translated into scopedSlots
+        'head(a)': '<button id="a">button</button>',
+        'head(b)': '<input id="b">',
+        'head(c)': '<a href="#" id="c">link</a>'
+      }
+    })
+    expect(wrapper).toBeDefined()
+    const $ths = wrapper.findAll('thead > tr > th')
+    expect($ths.length).toBe(testFields.length)
+    expect(wrapper.emitted('head-clicked')).toBeUndefined()
+
+    const $btn = wrapper.find('button[id="a"]')
+    expect($btn.exists()).toBe(true)
+    await $btn.trigger('click')
+    expect(wrapper.emitted('head-clicked')).toBeUndefined()
+
+    const $input = wrapper.find('input[id="b"]')
+    expect($input.exists()).toBe(true)
+    await $input.trigger('click')
+    expect(wrapper.emitted('head-clicked')).toBeUndefined()
+
+    const $link = wrapper.find('a[id="c"]')
+    expect($link.exists()).toBe(true)
+    await $link.trigger('click')
+    expect(wrapper.emitted('head-clicked')).toBeUndefined()
+
+    wrapper.destroy()
+  })
+})

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

@@ -0,0 +1,96 @@
+import { mount } from '@vue/test-utils'
+import { normalizeFields } from './helpers/normalize-fields'
+import { BTable } from './table'
+
+const testItems = [{ a: 1, b: 2, c: 3 }, { a: 5, b: 5, c: 6 }, { a: 7, b: 8, c: 9 }]
+const testFields = ['a', 'b', 'c']
+
+describe('table > thead thead-top slot', () => {
+  it('should not have thead-top row by default', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        fields: testFields,
+        items: testItems
+      }
+    })
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('TABLE')
+    expect(wrapper.find('thead').exists()).toBe(true)
+    expect(wrapper.findAll('thead > tr').exists()).toBe(true)
+    expect(wrapper.findAll('thead > tr').length).toBe(1)
+
+    wrapper.destroy()
+  })
+
+  it('should render named slot `thead-top`', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        fields: testFields,
+        items: testItems
+      },
+      slots: {
+        'thead-top': `<tr class="test"><th span="${testFields.length}">foobar</th></tr>`
+      }
+    })
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('TABLE')
+    expect(wrapper.find('thead').exists()).toBe(true)
+    expect(wrapper.findAll('thead > tr').exists()).toBe(true)
+    expect(wrapper.findAll('thead > tr').length).toBe(2)
+    expect(
+      wrapper
+        .findAll('thead > tr')
+        .at(0)
+        .text()
+    ).toBe('foobar')
+    expect(
+      wrapper
+        .findAll('thead > tr')
+        .at(0)
+        .classes()
+    ).toContain('test')
+
+    wrapper.destroy()
+  })
+
+  it('should render scoped slot `thead-top`', async () => {
+    let fields = []
+    let columns
+    const wrapper = mount(BTable, {
+      propsData: {
+        fields: testFields,
+        items: testItems
+      },
+      scopedSlots: {
+        'thead-top': function(scope) {
+          fields = scope.fields
+          columns = scope.columns
+          return this.$createElement('tr', { class: 'test' }, [
+            this.$createElement('th', { attrs: { span: columns } }, 'foobar')
+          ])
+        }
+      }
+    })
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('TABLE')
+    expect(wrapper.find('thead').exists()).toBe(true)
+    expect(columns).toBe(3)
+    expect(fields).toEqual(normalizeFields(testFields))
+    expect(wrapper.findAll('thead > tr').exists()).toBe(true)
+    expect(wrapper.findAll('thead > tr').length).toBe(2)
+    expect(
+      wrapper
+        .findAll('thead > tr')
+        .at(0)
+        .text()
+    ).toBe('foobar')
+    expect(
+      wrapper
+        .findAll('thead > tr')
+        .at(0)
+        .classes()
+    ).toContain('test')
+
+    wrapper.destroy()
+  })
+})

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

@@ -0,0 +1,89 @@
+import { extend } from '../../vue'
+import { NAME_TABLE } from '../../constants/components'
+import { sortKeys } from '../../utils/object'
+import { makePropsConfigurable } from '../../utils/props'
+import { attrsMixin } from '../../mixins/attrs'
+import { hasListenerMixin } from '../../mixins/has-listener'
+import { idMixin, props as idProps } from '../../mixins/id'
+import { normalizeSlotMixin } from '../../mixins/normalize-slot'
+import { bottomRowMixin, props as bottomRowProps } from './helpers/mixin-bottom-row'
+import { busyMixin, props as busyProps } from './helpers/mixin-busy'
+import { captionMixin, props as captionProps } from './helpers/mixin-caption'
+import { colgroupMixin, props as colgroupProps } from './helpers/mixin-colgroup'
+import { emptyMixin, props as emptyProps } from './helpers/mixin-empty'
+import { filteringMixin, props as filteringProps } from './helpers/mixin-filtering'
+import { itemsMixin, props as itemsProps } from './helpers/mixin-items'
+import { paginationMixin, props as paginationProps } from './helpers/mixin-pagination'
+import { providerMixin, props as providerProps } from './helpers/mixin-provider'
+import { selectableMixin, props as selectableProps } from './helpers/mixin-selectable'
+import { sortingMixin, props as sortingProps } from './helpers/mixin-sorting'
+import { stackedMixin, props as stackedProps } from './helpers/mixin-stacked'
+import { tableRendererMixin, props as tableRendererProps } from './helpers/mixin-table-renderer'
+import { tbodyMixin, props as tbodyProps } from './helpers/mixin-tbody'
+import { tfootMixin, props as tfootProps } from './helpers/mixin-tfoot'
+import { theadMixin, props as theadProps } from './helpers/mixin-thead'
+import { topRowMixin, props as topRowProps } from './helpers/mixin-top-row'
+
+// --- Props ---
+
+export const props = makePropsConfigurable(
+  sortKeys({
+    ...idProps,
+    ...bottomRowProps,
+    ...busyProps,
+    ...captionProps,
+    ...colgroupProps,
+    ...emptyProps,
+    ...filteringProps,
+    ...itemsProps,
+    ...paginationProps,
+    ...providerProps,
+    ...selectableProps,
+    ...sortingProps,
+    ...stackedProps,
+    ...tableRendererProps,
+    ...tbodyProps,
+    ...tfootProps,
+    ...theadProps,
+    ...topRowProps
+  }),
+  NAME_TABLE
+)
+
+// --- Main component ---
+
+// @vue/component
+export const BTable = /*#__PURE__*/ extend({
+  name: NAME_TABLE,
+  // Order of mixins is important!
+  // They are merged from first to last, followed by this component
+  mixins: [
+    // General mixins
+    attrsMixin,
+    hasListenerMixin,
+    idMixin,
+    normalizeSlotMixin,
+    // Required table mixins
+    itemsMixin,
+    tableRendererMixin,
+    stackedMixin,
+    theadMixin,
+    tfootMixin,
+    tbodyMixin,
+    // Table features mixins
+    stackedMixin,
+    filteringMixin,
+    sortingMixin,
+    paginationMixin,
+    captionMixin,
+    colgroupMixin,
+    selectableMixin,
+    emptyMixin,
+    topRowMixin,
+    bottomRowMixin,
+    busyMixin,
+    providerMixin
+  ],
+  props
+  // Render function is provided by `tableRendererMixin`
+})