@gitlab/ui 114.0.1 → 114.1.1

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

@@ -1,433 +0,0 @@
-# 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.
-
-## Basic usage
-
-```html
-<div>
-  <b-tabs content-class="mt-3">
-    <b-tab title="First" active><p>I'm the first tab</p></b-tab>
-    <b-tab title="Second"><p>I'm the second tab</p></b-tab>
-    <b-tab title="Disabled" disabled><p>I'm a disabled tab!</p></b-tab>
-  </b-tabs>
-</div>
-
-<!-- b-tabs.vue -->
-```
-
-**Tip:** You should supply each child `<b-tab>` component a unique `key` value if dynamically adding
-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.
-
-## Pills variant
-
-Tabs use the `tabs` styling by default. Just add `pills` property to `<b-tabs>` for the pill style
-variant.
-
-```html
-<div>
-  <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 -->
-```
-
-## Fill and justify
-
-Force your `<b-tabs>` controls to extend the full available width.
-
-### Fill
-
-To proportionately fill all available space with your tab controls, set the `fill` prop. Notice that
-all horizontal space is occupied, but not every control has the same width.
-
-```html
-<div>
-  <b-tabs content-class="mt-3" fill>
-    <b-tab title="First" active><p>I'm the first tab</p></b-tab>
-    <b-tab title="Second"><p>I'm the second tab</p></b-tab>
-    <b-tab title="Very, very long title"><p>I'm the tab with the very, very long title</p></b-tab>
-    <b-tab title="Disabled" disabled><p>I'm a disabled tab!</p></b-tab>
-  </b-tabs>
-</div>
-
-<!-- b-tabs-fill.vue -->
-```
-
-### Justified
-
-For equal-width controls, use the `justified` prop instead. All horizontal space will be occupied by
-the controls, but unlike using `fill` above, every control will be the same width.
-
-```html
-<div>
-  <b-tabs content-class="mt-3" justified>
-    <b-tab title="First" active><p>I'm the first tab</p></b-tab>
-    <b-tab title="Second"><p>I'm the second tab</p></b-tab>
-    <b-tab title="Very, very long title"><p>I'm the tab with the very, very long title</p></b-tab>
-    <b-tab title="Disabled" disabled><p>I'm a disabled tab!</p></b-tab>
-  </b-tabs>
-</div>
-
-<!-- b-tabs-justified.vue -->
-```
-
-## Alignment
-
-To align your tab controls, use the `align` prop. Available values are `left`, `center` and `right`.
-
-```html
-<div>
-  <b-tabs content-class="mt-3" align="center">
-    <b-tab title="First" active><p>I'm the first tab</p></b-tab>
-    <b-tab title="Second"><p>I'm the second tab</p></b-tab>
-    <b-tab title="Disabled" disabled><p>I'm a disabled tab!</p></b-tab>
-  </b-tabs>
-</div>
-
-<!-- b-tabs-alignment.vue -->
-```
-
-## Bottom placement of tab controls
-
-Visually move the tab controls to the bottom by setting the prop `end`.
-
-```html
-<div>
-  <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 -->
-```
-
-**Caveats:**
-
-- Bottom 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
-  tabs will always be placed on the top of the tabs content.
-- To provide a better user experience with bottom placed controls, ensure that the content of each
-  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.
-
-## Active classes
-
-To apply classes to the currently active control or tab use the `active-nav-item-class` and
-`active-tab-class` props.
-
-```html
-<div>
-  <b-tabs
-    active-nav-item-class="font-weight-bold text-uppercase text-danger"
-    active-tab-class="font-weight-bold text-success"
-    content-class="mt-3"
-  >
-    <b-tab title="First" active><p>I'm the first tab</p></b-tab>
-    <b-tab title="Second"><p>I'm the second tab</p></b-tab>
-    <b-tab title="Disabled" disabled><p>I'm a disabled tab!</p></b-tab>
-  </b-tabs>
-</div>
-
-<!-- b-tabs-classes.vue -->
-```
-
-## Fade animation
-
-Fade is enabled by default when changing tabs. It can disabled with `no-fade` property.
-
-## Add tabs without content
-
-If you want to add extra tabs that do not have any content, you can put them in `tabs-start` or
-`tabs-end` slot(s):
-
-```html
-<div>
-  <b-tabs>
-    <!-- Add your b-tab components here -->
-    <template #tabs-end>
-      <b-nav-item href="#" role="presentation" @click="() => {}">Another tab</b-nav-item>
-      <li role="presentation" class="nav-item align-self-center">Plain text</li>
-    </template>
-  </b-tabs>
-</div>
-
-<!-- b-tabs-item-slot.vue -->
-```
-
-Use the `tabs-start` slot to place extra tab buttons before the content tab buttons, and use the
-`tabs-end` slot to place extra tab buttons after the content tab buttons.
-
-**Note:** extra (contentless) tab buttons should be a `<b-nav-item>` or have a root element of
-`<li>` and class `nav-item` for proper rendering and semantic markup.
-
-## Add custom content to tab title
-
-If you want to add custom content to tab title, like HTML code, icons, or another non-interactive
-Vue component, this possible by using `title` slot of `<b-tab>`.
-
-```html
-<div>
-  <b-tabs>
-    <b-tab active>
-      <template #title>
-        I'm <i>custom</i> <strong>title</strong>
-      </template>
-      <p class="p-3">Tab contents 1</p>
-    </b-tab>
-
-    <b-tab>
-      <template #title>
-        Tab 2
-      </template>
-      <p class="p-3">Tab contents 2</p>
-    </b-tab>
-  </b-tabs>
-</div>
-
-<!-- b-tabs-title-slot.vue -->
-```
-
-**Do not** place interactive elements/components inside the title slot. The tab button is a link
-which does not support child interactive elements per the HTML5 spec.
-
-## Apply custom classes to the generated nav-tabs or pills
-
-The tab selectors are based on Bootstrap v4's `nav` markup ( i.e.
-`ul.nav > li.nav-item > a.nav-link`). In some situations, you may want to add classes to the `<li>`
-(nav-item) and/or the `<a>` (nav-link) on a per tab basis. To do so, simply supply the classname to
-the `title-item-class` prop (for the `<li>` element) or `title-link-class` prop (for the `<a>`
-element). Value's can be passed as a string or array of strings.
-
-**Note:** _The `active` class is automatically applied to the active tabs `<a>` element. You may
-need to accommodate your custom classes for this._
-
-```html
-<template>
-  <div>
-    <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>
-
-<script>
-  export default {
-    data() {
-      return {
-        tabIndex: 0
-      }
-    },
-    methods: {
-      linkClass(idx) {
-        if (this.tabIndex === idx) {
-          return ['bg-primary', 'text-light']
-        } else {
-          return ['bg-light', 'text-info']
-        }
-      }
-    }
-  }
-</script>
-
-<!-- b-tabs-with-classes.vue -->
-```
-
-## Lazy loading tab content
-
-Sometimes it's preferred to load components & data only when activating a tab, instead of loading
-all tabs (and associated data) when rendering the `<b-tabs>` set.
-
-Individual `<b-tab>` components can be lazy loaded via the `lazy` prop, which when set doesn't mount
-the content of the `<b-tab>` until it is activated (shown), and will be un-mounted when the tab is
-deactivated (hidden):
-
-```html
-<b-tabs content-class="mt-3">
-  <!-- This tabs content will always be mounted -->
-  <b-tab title="Regular tab"><b-alert show>I'm always mounted</b-alert></b-tab>
-
-  <!-- This tabs content will not be mounted until the tab is shown -->
-  <!-- and will be un-mounted when hidden -->
-  <b-tab title="Lazy tab" lazy><b-alert show>I'm lazy mounted!</b-alert></b-tab>
-</b-tabs>
-
-<!-- b-tabs-lazy-tab.vue -->
-```
-
-One can also make all tab's lazy by setting the `lazy` prop on the parent `<b-tabs>` component:
-
-```html
-<b-tabs content-class="mt-3" lazy>
-  <b-tab title="Tab 1"><b-alert show>I'm lazy mounted!</b-alert></b-tab>
-  <b-tab title="Tab 2"><b-alert show>I'm lazy mounted too!</b-alert></b-tab>
-</b-tabs>
-
-<!-- b-tabs-lazy.vue -->
-```
-
-## Keyboard navigation
-
-Keyboard navigation is enabled by default for ARIA compliance with tablists when a tab button has
-focus.
-
-| Keypress                                                              | Action                                         |
-| --------------------------------------------------------------------- | ---------------------------------------------- |
-| <kbd>Left</kbd> or <kbd>Up</kbd>                                      | Activate the previous non-disabled tab         |
-| <kbd>Right</kbd> or <kbd>Down</kbd>                                   | Activate the next non-disabled tab             |
-| <kbd>Shift</kbd>+<kbd>Left</kbd> or <kbd>Shift</kbd>+<kbd>Up</kbd>    | Activate the first non-disabled tab            |
-| <kbd>Home</kbd>                                                       | Activate the first non-disabled tab            |
-| <kbd>Shift</kbd>+<kbd>Right</kbd> or <kbd>Shift</kbd>+<kbd>Down</kbd> | Activate the last non-disabled tab             |
-| <kbd>End</kbd>                                                        | Activate the last non-disabled tab             |
-| <kbd>Tab</kbd>                                                        | Move focus to the active tab content           |
-| <kbd>Shift</kbd>+<kbd>Tab</kbd>                                       | Move focus to the previous control on the page |
-
-Disable keyboard navigation by setting the prop `no-key-nav`. Behavior will now default to regular
-browser navigation with TAB key.
-
-| Keypress                             | Action                                                 |
-| ------------------------------------ | ------------------------------------------------------ |
-| <kbd>Tab</kbd>                       | Move to the next tab button or control on the page     |
-| <kbd>Shift</kbd>+<kbd>Tab</kbd>      | Move to the previous tab button or control on the page |
-| <kbd>Enter</kbd> or <kbd>Space</kbd> | Activate current focused button's tab                  |
-
-## Programmatically activating and deactivating tabs
-
-Use the `<b-tabs>` `v-model` to control which tab is active by setting the `v-model` to the index
-(zero-based) of the tab to be shown (see example below).
-
-Alternatively, you can use the `active` prop on each `<b-tab>` with the `.sync` modifier to activate
-the tab, or to detect if a particular tab is active.
-
-Each `<b-tab>` instance also provides two public methods to activate or deactivate the tab. The
-methods are `.activate()` and `.deactivate()`, respectively. If activation or deactivation fails
-(i.e. a tab is disabled or no tab is available to move activation to), then the currently active tab
-will remain active and the method will return `false`. You will need a reference to the `<b-tab>` in
-order to use these methods.
-
-## Preventing a `<b-tab>` from being activated
-
-To prevent a tab from activating, simply set the `disabled` prop on the `<b-tab>` component.
-
-Alternatively, you can listen for the `activate-tab` event, which provides an option to prevent the
-tab from activating. The `activate-tab` event is emitted with three arguments:
-
-- `newTabIndex`: The index of the tab that is going to be activated
-- `prevTabIndex`: The index of the currently active tab
-- `bvEvent`: The `BvEvent` object. Call `bvEvent.preventDefault()` to prevent `newTabIndex` from
-  being activated
-
-For accessibility reasons, when using the `activate-tab` event to prevent a tab from activating, you
-should provide some means of notification to the user as to why the tab is not able to be activated.
-It is recommended to use the `disabled` attribute on the `<b-tab>` component instead of using the
-`activate-tab` event (as `disabled` is more intuitive for screen reader users).
-
-## Advanced examples
-
-### External controls using `v-model`
-
-```html
-<template>
-  <div>
-    <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">
-      <b-button-group class="mt-2">
-        <b-button @click="tabIndex--">Previous</b-button>
-        <b-button @click="tabIndex++">Next</b-button>
-      </b-button-group>
-
-      <div class="text-muted">Current Tab: {{ tabIndex }}</div>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        tabIndex: 1
-      }
-    }
-  }
-</script>
-
-<!-- b-tabs-controls.vue -->
-```
-
-### Dynamic tabs + tabs-end slot
-
-```html
-<template>
-  <div>
-    <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>
-
-<script>
-  export default {
-    data() {
-      return {
-        tabs: [],
-        tabCounter: 0
-      }
-    },
-    methods: {
-      closeTab(x) {
-        for (let i = 0; i < this.tabs.length; i++) {
-          if (this.tabs[i] === x) {
-            this.tabs.splice(i, 1)
-          }
-        }
-      },
-      newTab() {
-        this.tabs.push(this.tabCounter++)
-      }
-    }
-  }
-</script>
-
-<!-- b-tabs-dynamic.vue -->
-```
-
-<!-- Component reference added automatically from component package.json -->

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

@@ -1,205 +0,0 @@
-{
-  "name": "@bootstrap-vue/tabs",
-  "version": "1.0.0",
-  "meta": {
-    "title": "Tabs",
-    "description": "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.",
-    "components": [
-      {
-        "component": "BTabs",
-        "props": [
-          {
-            "prop": "activeNavItemClass",
-            "description": "CSS class (or classes) to apply to the active nav item tab control"
-          },
-          {
-            "prop": "activeTabClass",
-            "description": "CSS class (or classes) to apply to the currently active tab"
-          },
-          {
-            "prop": "align",
-            "description": "Align the nav items in the nav: 'start' (or 'left'), 'center', 'end' (or 'right')"
-          },
-          {
-            "prop": "card",
-            "description": "When set to true, renders the tabs the the appropriate styles to be placed into a 'b-card'"
-          },
-          {
-            "prop": "contentClass",
-            "description": "CSS class (or classes) to apply to the tab-content wrapper"
-          },
-          {
-            "prop": "end",
-            "description": "Place the tab controls at the bottom (horizontal tabs), or right (vertical tabs)"
-          },
-          {
-            "prop": "fill",
-            "description": "Proportionately fills all horizontal space with nav items. All horizontal space is occupied, but not every nav item has the same width"
-          },
-          {
-            "prop": "justified",
-            "description": "Fills all horizontal space with nav items, but unlike 'fill', every nav item will be the same width"
-          },
-          {
-            "prop": "lazy",
-            "description": "Lazily render the b-tab contents when shown"
-          },
-          {
-            "prop": "navClass",
-            "description": "CSS class (or classes) to apply to the tablist (nav) wrapper"
-          },
-          {
-            "prop": "navWrapperClass",
-            "description": "CSS class (or classes) to apply to the tab controls wrapper element"
-          },
-          {
-            "prop": "noKeyNav",
-            "description": "Disable keyboard navigation of the tab controls"
-          },
-          {
-            "prop": "noNavStyle",
-            "description": "Do not render the tab controls with tab styling"
-          },
-          {
-            "prop": "pills",
-            "description": "Renders the nav items with the appearance of pill buttons"
-          },
-          {
-            "prop": "small",
-            "description": "Makes the nav smaller"
-          },
-          {
-            "prop": "value",
-            "description": "Currently visible tab index (zero-based)"
-          },
-          {
-            "prop": "vertical",
-            "description": "Renders the nav vertically"
-          },
-          {
-            "prop": "vertical",
-            "description": "Renders the tab controls vertically"
-          }
-        ],
-        "events": [
-          {
-            "event": "activate-tab",
-            "version": "2.1.0",
-            "description": "Emitted just before a tab is shown/activated. Cancelable",
-            "args": [
-              {
-                "arg": "newTabIndex",
-                "type": "Number",
-                "description": "Tab being activated (0-based index)"
-              },
-              {
-                "arg": "prevTabIndex",
-                "type": "Number",
-                "description": "Tab that is currently active (0-based index). Will be -1 if no current active tab"
-              },
-              {
-                "arg": "bvEvent",
-                "type": "BvEvent",
-                "description": "BvEvent object. Call bvEvent.preventDefault() to cancel"
-              }
-            ]
-          },
-          {
-            "event": "changed",
-            "description": "Emitted when a tab is added, removed, or tabs are re-ordered",
-            "args": [
-              {
-                "arg": "currentTabs",
-                "type": "Array",
-                "description": "Array of the current b-tab instances, in document order"
-              },
-              {
-                "arg": "previousTabs",
-                "type": "Array",
-                "description": "Array of the previous b-tab instances, in document order"
-              }
-            ]
-          },
-          {
-            "event": "input",
-            "description": "Emitted when a tab is shown. Used to update the v-model",
-            "args": [
-              {
-                "arg": "tabIndex",
-                "type": "Number",
-                "description": "Current selected tab index (0-based index)"
-              }
-            ]
-          }
-        ],
-        "slots": [
-          {
-            "name": "default",
-            "description": "Content (tabs) to place in the tabs element"
-          },
-          {
-            "name": "empty",
-            "description": "Renders this slot if no tabs are present"
-          },
-          {
-            "name": "tabs-end",
-            "description": "Additional tab buttons without tab content placed after content tab buttons"
-          },
-          {
-            "name": "tabs-start",
-            "description": "Additional tab buttons without tab content placed before content tab buttons"
-          }
-        ]
-      },
-      {
-        "component": "BTab",
-        "props": [
-          {
-            "prop": "buttonId",
-            "description": "Use a specific ID for this tab's tab control button. If not provided, one will automatically be generated"
-          },
-          {
-            "prop": "lazy",
-            "description": "Lazily render this tab's content when shown"
-          },
-          {
-            "prop": "noBody",
-            "description": "When the parent b-tabs has the 'card' prop set, do not render a card-body wrapper"
-          },
-          {
-            "prop": "titleItemClass",
-            "description": "CSS class (or classes) to apply to the tab's control button 'li' element"
-          },
-          {
-            "prop": "titleLinkAttributes",
-            "version": "2.6.0",
-            "description": "Attributes to apply to the tab's control button inner link element"
-          },
-          {
-            "prop": "titleLinkClass",
-            "description": "CSS class (or classes) to apply to the tab's control button inner link element"
-          }
-        ],
-        "events": [
-          {
-            "event": "click",
-            "description": "Emitted when a tab is clicked, or is activated by keyboard navigation",
-            "args": [
-              {
-                "arg": "event",
-                "type": "MouseEvent",
-                "description": "Original event object"
-              }
-            ]
-          }
-        ],
-        "slots": [
-          {
-            "name": "title",
-            "description": "Slot for custom tab title"
-          }
-        ]
-      }
-    ]
-  }
-}