@gitlab/ui 101.16.0 → 102.0.0

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

@@ -1,7 +1,7 @@
 # Tabs
 
-> Create a widget of tabbable panes of _local content_. The tabs component is built upon navs and
-> cards internally, and provides full keyboard navigation control of the tabs.
+> Create a widget of tabbable panes of _local content_. The tabs component is built upon navs
+> internally, and provides full keyboard navigation control of the tabs.
 
 For navigation based tabs (i.e. tabs that would change the URL), use the
 [nav](?path=/docs/base-nav--docs) component instead.
@@ -24,75 +24,6 @@ For navigation based tabs (i.e. tabs that would change the URL), use the
 or removing `<b-tab>` components (i.e. `v-if` or for loops). The `key` attribute is a special Vue
 attribute, see https://vuejs.org/v2/api/#key.
 
-## Cards integration
-
-Tabs support integrating with Bootstrap cards. Just add the `card` property to `<b-tabs>` and place
-it inside a `<b-card>` component. Note that you should add the`no-body` prop on the `<b-card>`
-component in order to properly decorate the card header and remove the extra padding introduced by
-`card-body`.
-
-```html
-<div>
-  <b-card no-body>
-    <b-tabs card>
-      <b-tab title="Tab 1" active>
-        <b-card-text>Tab contents 1</b-card-text>
-      </b-tab>
-      <b-tab title="Tab 2">
-        <b-card-text>Tab contents 2</b-card-text>
-      </b-tab>
-    </b-tabs>
-  </b-card>
-</div>
-
-<!-- b-tabs-card.vue -->
-```
-
-When `<b-tabs>` is in `card` mode, each `<b-tab>` sub-component will automatically have the
-`card-body` class applied (this class provides the padding around the tab content). To disable the
-`card-body` class, set the `no-body` prop on the `<b-tab>` sub component.
-
-```html
-<div>
-  <b-card no-body>
-    <b-tabs card>
-      <b-tab no-body title="Picture 1">
-        <b-card-img bottom src="https://picsum.photos/600/200/?image=21" alt="Image 21"></b-card-img>
-        <b-card-footer>Picture 1 footer</b-card-footer>
-      </b-tab>
-
-      <b-tab no-body title="Picture 2">
-        <b-card-img bottom src="https://picsum.photos/600/200/?image=25" alt="Image 25"></b-card-img>
-        <b-card-footer>Picture 2 footer</b-card-footer>
-      </b-tab>
-
-      <b-tab no-body title="Picture 3">
-        <b-card-img bottom src="https://picsum.photos/600/200/?image=26" alt="Image 26"></b-card-img>
-        <b-card-footer>Picture 3 footer</b-card-footer>
-      </b-tab>
-
-      <b-tab title="Text">
-        <b-card-title>This tab does not have the <code>no-body</code> prop set</b-card-title>
-        <b-card-text>
-          Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum
-          consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex
-          consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt
-          veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua
-          esse irure.
-        </b-card-text>
-      </b-tab>
-    </b-tabs>
-  </b-card>
-</div>
-
-<!-- b-tabs-card-no-body.vue -->
-```
-
-**Note:** Setting the `no-body` prop on `<b-tab>` will have no affect when `<b-tabs>` is not in
-`card` mode (as the `card-body` class is only set when in `card` mode).
-
-Refer to the [Cards documentation](?path=/docs/base-card--docs) for more details on card components.
-
 ## Pills variant
 
 Tabs use the `tabs` styling by default. Just add `pills` property to `<b-tabs>` for the pill style
@@ -100,12 +31,10 @@ variant.
 
 ```html
 <div>
-  <b-card no-body>
-    <b-tabs pills card>
-      <b-tab title="Tab 1" active><b-card-text>Tab contents 1</b-card-text></b-tab>
-      <b-tab title="Tab 2"><b-card-text>Tab contents 2</b-card-text></b-tab>
-    </b-tabs>
-  </b-card>
+  <b-tabs pills>
+    <b-tab title="Tab 1" active>Tab contents 1</b-tab>
+    <b-tab title="Tab 2">Tab contents 2></b-tab>
+  </b-tabs>
 </div>
 
 <!-- b-tabs-pills.vue -->
@@ -173,12 +102,10 @@ Visually move the tab controls to the bottom by setting the prop `end`.
 
 ```html
 <div>
-  <b-card no-body>
-    <b-tabs pills card end>
-      <b-tab title="Tab 1" active><b-card-text>Tab contents 1</b-card-text></b-tab>
-      <b-tab title="Tab 2"><b-card-text>Tab contents 2</b-card-text></b-tab>
-    </b-tabs>
-  </b-card>
+  <b-tabs pills end>
+    <b-tab title="Tab 1" active>Tab contents 1</b-tab>
+    <b-tab title="Tab 2">Tab contents 2</b-tab>
+  </b-tabs>
 </div>
 
 <!-- b-tabs-bottom.vue -->
@@ -193,67 +120,6 @@ Visually move the tab controls to the bottom by setting the prop `end`.
   tab pane is the same height and fits completely within the visible viewport, otherwise the user
   will need to scroll up to read the start of the tabbed content.
 
-## Vertical tabs
-
-Have the tab controls placed on the lefthand side by setting the `vertical` prop to `true`. Vertical
-tabs work with or without `card` mode enabled.
-
-```html
-<div>
-  <b-card no-body>
-    <b-tabs pills card vertical>
-      <b-tab title="Tab 1" active><b-card-text>Tab contents 1</b-card-text></b-tab>
-      <b-tab title="Tab 2"><b-card-text>Tab contents 2</b-card-text></b-tab>
-      <b-tab title="Tab 3"><b-card-text>Tab contents 3</b-card-text></b-tab>
-    </b-tabs>
-  </b-card>
-</div>
-
-<!-- b-tabs-vertical.vue -->
-```
-
-Visually move the tab controls to the right hand side by setting the `end` prop:
-
-```html
-<div>
-  <b-card no-body>
-    <b-tabs pills card vertical end>
-      <b-tab title="Tab 1" active><b-card-text>Tab contents 1</b-card-text></b-tab>
-      <b-tab title="Tab 2"><b-card-text>Tab contents 2</b-card-text></b-tab>
-      <b-tab title="Tab 3"><b-card-text>Tab contents 3</b-card-text></b-tab>
-    </b-tabs>
-  </b-card>
-</div>
-
-<!-- b-tabs-vertical-end.vue -->
-```
-
-The width of the vertical tab controls will expand to fit the width of the tab title. To control the
-width, set a [width utility class](/docs/reference/size-props#sizing-utility-classes) via the prop
-`nav-wrapper-class`. You can use values such as `w-25` (25% width), `w-50` (50% width), etc., or
-column classes such as `col-2`, `col-3`, etc.
-
-```html
-<div>
-  <b-card no-body>
-    <b-tabs pills card vertical nav-wrapper-class="w-50">
-      <b-tab title="Tab 1" active><b-card-text>Tab contents 1</b-card-text></b-tab>
-      <b-tab title="Tab 2"><b-card-text>Tab contents 2</b-card-text></b-tab>
-      <b-tab title="Tab 3"><b-card-text>Tab contents 3</b-card-text></b-tab>
-    </b-tabs>
-  </b-card>
-</div>
-
-<!-- b-tabs-vertical-width.vue -->
-```
-
-Vertical placement visually works best with the `pills` variant. When using the default `tabs`
-variant, you may want to provided your own custom styling classes, as Bootstrap v4 CSS assumes the
-tab controls will always be placed on the top of the tabs content.
-
-**Note:** _overflowing text may occur if your width is narrower than the tab title. You may need
-additional custom styling._
-
 ## Active classes
 
 To apply classes to the currently active control or tab use the `active-nav-item-class` and
@@ -348,13 +214,11 @@ need to accommodate your custom classes for this._
 ```html
 <template>
   <div>
-    <b-card no-body>
-      <b-tabs v-model="tabIndex" card>
-        <b-tab title="Tab 1" :title-link-class="linkClass(0)">Tab contents 1</b-tab>
-        <b-tab title="Tab 2" :title-link-class="linkClass(1)">Tab contents 2</b-tab>
-        <b-tab title="Tab 3" :title-link-class="linkClass(2)">Tab contents 3</b-tab>
-      </b-tabs>
-    </b-card>
+    <b-tabs v-model="tabIndex">
+      <b-tab title="Tab 1" :title-link-class="linkClass(0)">Tab contents 1</b-tab>
+      <b-tab title="Tab 2" :title-link-class="linkClass(1)">Tab contents 2</b-tab>
+      <b-tab title="Tab 3" :title-link-class="linkClass(2)">Tab contents 3</b-tab>
+    </b-tabs>
   </div>
 </template>
 
@@ -476,18 +340,14 @@ It is recommended to use the `disabled` attribute on the `<b-tab>` component ins
 ```html
 <template>
   <div>
-    <!-- Tabs with card integration -->
-    <b-card no-body>
-      <b-tabs v-model="tabIndex" small card>
-        <b-tab title="General">I'm the first fading tab</b-tab>
-        <b-tab title="Edit profile">
-          I'm the second tab
-          <b-card>I'm the card in tab</b-card>
-        </b-tab>
-        <b-tab title="Premium Plan" disabled>Sibzamini!</b-tab>
-        <b-tab title="Info">I'm the last tab</b-tab>
-      </b-tabs>
-    </b-card>
+    <b-tabs v-model="tabIndex" small>
+      <b-tab title="General">I'm the first fading tab</b-tab>
+      <b-tab title="Edit profile">
+        I'm the second tab
+      </b-tab>
+      <b-tab title="Premium Plan" disabled>Sibzamini!</b-tab>
+      <b-tab title="Info">I'm the last tab</b-tab>
+    </b-tabs>
 
     <!-- Control buttons-->
     <div class="text-center">
@@ -519,30 +379,28 @@ It is recommended to use the `disabled` attribute on the `<b-tab>` component ins
 ```html
 <template>
   <div>
-    <b-card no-body>
-      <b-tabs card>
-        <!-- Render Tabs, supply a unique `key` to each tab -->
-        <b-tab v-for="i in tabs" :key="'dyn-tab-' + i" :title="'Tab ' + i">
-          Tab contents {{ i }}
-          <b-button size="sm" variant="danger" class="float-right" @click="closeTab(i)">
-            Close tab
-          </b-button>
-        </b-tab>
-
-        <!-- New Tab Button (Using tabs-end slot) -->
-        <template #tabs-end>
-          <b-nav-item role="presentation" @click.prevent="newTab" href="#"><b>+</b></b-nav-item>
-        </template>
-
-        <!-- Render this if no tabs -->
-        <template #empty>
-          <div class="text-center text-muted">
-            There are no open tabs<br>
-            Open a new tab using the <b>+</b> button above.
-          </div>
-        </template>
-      </b-tabs>
-    </b-card>
+    <b-tabs>
+      <!-- Render Tabs, supply a unique `key` to each tab -->
+      <b-tab v-for="i in tabs" :key="'dyn-tab-' + i" :title="'Tab ' + i">
+        Tab contents {{ i }}
+        <b-button size="sm" variant="danger" class="float-right" @click="closeTab(i)">
+          Close tab
+        </b-button>
+      </b-tab>
+
+      <!-- New Tab Button (Using tabs-end slot) -->
+      <template #tabs-end>
+        <b-nav-item role="presentation" @click.prevent="newTab" href="#"><b>+</b></b-nav-item>
+      </template>
+
+      <!-- Render this if no tabs -->
+      <template #empty>
+        <div class="text-center text-muted">
+          There are no open tabs<br>
+          Open a new tab using the <b>+</b> button above.
+        </div>
+      </template>
+    </b-tabs>
   </div>
 </template>
 

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

@@ -199,7 +199,6 @@ export const props = makePropsConfigurable(
     // Only applied to the currently active `<b-tab>`
     // This prop is sniffed by the `<b-tab>` child
     activeTabClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
-    card: makeProp(PROP_TYPE_BOOLEAN, false),
     contentClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
     // Synonym for 'bottom'
     end: makeProp(PROP_TYPE_BOOLEAN, false),
@@ -241,13 +240,6 @@ export const BTabs = /*#__PURE__*/ extend({
     fade() {
       // This computed prop is sniffed by the tab child
       return !this.noFade
-    },
-    localNavClass() {
-      const classes = []
-      if (this.card && this.vertical) {
-        classes.push('card-header', 'h-100', 'border-bottom-0', 'rounded-0')
-      }
-      return [...classes, this.navClass]
     }
   },
   watch: {
@@ -539,7 +531,6 @@ export const BTabs = /*#__PURE__*/ extend({
   render(h) {
     const {
       align,
-      card,
       end,
       fill,
       firstTab,
@@ -551,8 +542,7 @@ export const BTabs = /*#__PURE__*/ extend({
       pills,
       previousTab,
       small,
-      tabs: $tabs,
-      vertical
+      tabs: $tabs
     } = this
 
     // Currently active tab
@@ -605,7 +595,7 @@ export const BTabs = /*#__PURE__*/ extend({
     let $nav = h(
       BNav,
       {
-        class: this.localNavClass,
+        class: this.navClass,
         attrs: {
           role: 'tablist',
           id: this.safeId('_BV_tab_controls_')
@@ -616,9 +606,7 @@ export const BTabs = /*#__PURE__*/ extend({
           align,
           tabs: !noNavStyle && !pills,
           pills: !noNavStyle && pills,
-          vertical,
-          small,
-          cardHeader: card && !vertical
+          small
         },
         ref: 'nav'
       },
@@ -632,14 +620,7 @@ export const BTabs = /*#__PURE__*/ extend({
     $nav = h(
       'div',
       {
-        class: [
-          {
-            'card-header': card && !vertical && !end,
-            'card-footer': card && !vertical && end,
-            'col-auto': vertical
-          },
-          this.navWrapperClass
-        ],
+        class: this.navWrapperClass,
         key: 'bv-tabs-nav'
       },
       [$nav]
@@ -652,7 +633,7 @@ export const BTabs = /*#__PURE__*/ extend({
       $empty = h(
         'div',
         {
-          class: ['tab-pane', 'active', { 'card-body': card }],
+          class: ['tab-pane', 'active'],
           key: 'bv-empty-tab'
         },
         this.normalizeSlot(SLOT_NAME_EMPTY)
@@ -663,7 +644,7 @@ export const BTabs = /*#__PURE__*/ extend({
       'div',
       {
         staticClass: 'tab-content',
-        class: [{ col: vertical }, this.contentClass],
+        class: this.contentClass,
         attrs: { id: this.safeId('_BV_tab_container_') },
         key: 'bv-content',
         ref: 'content'
@@ -676,10 +657,6 @@ export const BTabs = /*#__PURE__*/ extend({
       this.tag,
       {
         staticClass: 'tabs',
-        class: {
-          row: vertical,
-          'no-gutters': vertical && card
-        },
         attrs: { id: this.safeId() }
       },
       [end ? $content : h(), $nav, end ? h() : $content]

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

@@ -32,64 +32,6 @@ describe('tabs', () => {
     wrapper.destroy()
   })
 
-  it('has correct card classes when prop card is true', async () => {
-    const wrapper = mount(BTabs, {
-      propsData: { card: true },
-      slots: {
-        default: {
-          components: { BTab },
-          template: '<div><b-tab /><b-tab /><b-tab /></div>'
-        }
-      }
-    })
-
-    await waitNT(wrapper.vm)
-    expect(wrapper).toBeDefined()
-
-    expect(wrapper.element.tagName).toBe('DIV')
-    expect(wrapper.classes()).toContain('tabs')
-    expect(wrapper.findAll('.card-header').length).toBe(1)
-    expect(wrapper.findAll('ul').length).toBe(1)
-    expect(wrapper.find('ul').classes()).toContain('nav')
-    expect(wrapper.find('ul').classes()).toContain('nav-tabs')
-    expect(wrapper.find('ul').classes()).toContain('card-header-tabs')
-
-    wrapper.destroy()
-  })
-
-  it('has correct card classes when props card and vertical are true', async () => {
-    const wrapper = mount(BTabs, {
-      propsData: { card: true, vertical: true },
-      slots: {
-        default: {
-          components: { BTab },
-          template: '<div><b-tab /><b-tab /><b-tab /></div>'
-        }
-      }
-    })
-
-    await waitNT(wrapper.vm)
-    expect(wrapper).toBeDefined()
-
-    expect(wrapper.element.tagName).toBe('DIV')
-    expect(wrapper.classes()).toContain('tabs')
-    expect(wrapper.classes()).toContain('row')
-    expect(wrapper.classes()).toContain('no-gutters')
-    expect(wrapper.findAll('.card-header').length).toBe(1)
-    expect(wrapper.findAll('ul').length).toBe(1)
-    expect(wrapper.find('ul').classes()).toContain('nav')
-    expect(wrapper.find('ul').classes()).toContain('nav-tabs')
-    expect(wrapper.find('ul').classes()).toContain('card-header')
-    expect(wrapper.find('ul').classes()).toContain('flex-column')
-    expect(wrapper.find('ul').classes()).toContain('h-100')
-    expect(wrapper.find('ul').classes()).toContain('border-bottom-0')
-    expect(wrapper.find('ul').classes()).toContain('rounded-0')
-    expect(wrapper.findAll('.tab-content.col').length).toBe(1)
-    expect(wrapper.findAll('.col-auto').length).toBe(1)
-
-    wrapper.destroy()
-  })
-
   it('sets correct tab active for initial value', async () => {
     const tabIndex = 1
     const wrapper = mount(BTabs, {

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

@@ -1,31 +1,14 @@
-import { installFactory } from './utils/plugins'
-import { componentsPlugin } from './components'
 import { BVConfigPlugin } from './bv-config'
 
 const NAME = 'BootstrapVue'
 
-// --- BootstrapVue installer ---
-const install = /*#__PURE__*/ installFactory({
-  plugins: {
-    componentsPlugin
-  }
-})
-
 // --- BootstrapVue plugin ---
 const BootstrapVue = /*#__PURE__*/ {
-  install,
   NAME
 }
 
 // --- Named exports for BvConfigPlugin ---
 export {
-  // Installer exported in case the consumer does not import `default`
-  // as the plugin in CommonJS build (or does not have interop enabled for CommonJS)
-  // Both the following will work:
-  //   BootstrapVue = require('bootstrap-vue')
-  //   BootstrapVue = require('bootstrap-vue').default
-  //   Vue.use(BootstrapVue)
-  install,
   NAME,
   // BootstrapVue config plugin
   BVConfigPlugin,

package/src/vendor/bootstrap-vue/src/mixins/form-radio-check-group.js

@@ -1,5 +1,5 @@
 import { extend } from '../vue'
-import { PROP_TYPE_BOOLEAN, PROP_TYPE_BOOLEAN_STRING, PROP_TYPE_STRING } from '../constants/props'
+import { PROP_TYPE_BOOLEAN, PROP_TYPE_BOOLEAN_STRING } from '../constants/props'
 import { SLOT_NAME_FIRST } from '../constants/slots'
 import { htmlOrText } from '../utils/html'
 import { looseEqual } from '../utils/loose-equal'
@@ -42,10 +42,6 @@ export const props = makePropsConfigurable(
     ...formStateProps,
     ...formCustomProps,
     ariaInvalid: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
-    // Only applicable when rendered with button style
-    buttonVariant: makeProp(PROP_TYPE_STRING),
-    // Render as button style
-    buttons: makeProp(PROP_TYPE_BOOLEAN, false),
     stacked: makeProp(PROP_TYPE_BOOLEAN, false),
     validated: makeProp(PROP_TYPE_BOOLEAN, false)
   }),
@@ -83,22 +79,9 @@ export const formRadioCheckGroupMixin = extend({
       return this.name || this.safeId()
     },
     groupClasses() {
-      const { inline, size, validated } = this
+      const { validated } = this
 
-      let classes = { 'was-validated': validated }
-      if (this.buttons) {
-        classes = [
-          classes,
-          'btn-group-toggle',
-          {
-            'btn-group': inline,
-            'btn-group-vertical': !inline,
-            [`btn-group-${size}`]: size
-          }
-        ]
-      }
-
-      return classes
+      return { 'was-validated': validated }
     }
   },
   watch: {