@gitlab/ui 84.1.0 → 85.0.0

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

@@ -0,0 +1,20 @@
+//
+// Carousel
+//
+import Vue from 'vue'
+import { BvPlugin, BvComponent } from '../../'
+
+// Plugin
+export declare const CarouselPlugin: BvPlugin
+
+// Component: b-carousel
+export declare class BCarousel extends BvComponent {
+  setSlide: (slide: number) => void
+  prev: () => void
+  next: () => void
+  start: () => void
+  pause: () => void
+}
+
+// Component: b-carousel-slide
+export declare class BCarouselSlide extends BvComponent {}

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

@@ -0,0 +1,12 @@
+import { BCarousel } from './carousel'
+import { BCarouselSlide } from './carousel-slide'
+import { pluginFactory } from '../../utils/plugins'
+
+const CarouselPlugin = /*#__PURE*/ pluginFactory({
+  components: {
+    BCarousel,
+    BCarouselSlide
+  }
+})
+
+export { CarouselPlugin, BCarousel, BCarouselSlide }

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

@@ -0,0 +1,185 @@
+{
+  "name": "@bootstrap-vue/carousel",
+  "version": "1.0.0",
+  "meta": {
+    "title": "Carousel",
+    "description": "The <b-carousel> component is a slideshow for cycling through a series of content, built with CSS 3D transforms. It works with a series of images, text, or custom markup.",
+    "components": [
+      {
+        "component": "BCarousel",
+        "description": "The <b-carousel> component is a slideshow for cycling through a series of slide content",
+        "props": [
+          {
+            "prop": "background",
+            "description": "Set the CSS color of the carousel's background"
+          },
+          {
+            "prop": "controls",
+            "description": "Enable the previous and next controls"
+          },
+          {
+            "prop": "fade",
+            "description": "When set, changes the slide animation to a crossfade instead of a sliding effect"
+          },
+          {
+            "prop": "imgHeight",
+            "description": "Set the default image 'height' attribute for all b-tab children"
+          },
+          {
+            "prop": "imgWidth",
+            "description": "Set the default image 'width' attribute for all b-tab children"
+          },
+          {
+            "prop": "indicators",
+            "description": "Enable the indicator buttons for jumping to specific slides"
+          },
+          {
+            "prop": "interval",
+            "description": "Set the delay time (in milliseconds) between slides"
+          },
+          {
+            "prop": "labelGotoSlide",
+            "description": "Sets the prefix for the 'aria-label' on the slide indicator controls. Will be suffixed with the slide number (1 indexed)"
+          },
+          {
+            "prop": "labelIndicators",
+            "description": "Sets the 'aria-label' on the indicator controls wrapper"
+          },
+          {
+            "prop": "labelNext",
+            "description": "Sets the 'aria-label' value for the next slide control"
+          },
+          {
+            "prop": "labelPrev",
+            "description": "Sets the 'aria-label' value for the previous slide control"
+          },
+          {
+            "prop": "noAnimation",
+            "description": "When set, disables animation when transitioning between slides"
+          },
+          {
+            "prop": "noHoverPause",
+            "description": "When set, disables the pausing of the slide show when the current slide is hovered"
+          },
+          {
+            "prop": "noTouch",
+            "description": "Disable controlling the slides via touch swipes"
+          },
+          {
+            "prop": "noWrap",
+            "version": "2.0.0",
+            "description": "Do not restart the slide show when then end is reached"
+          },
+          {
+            "prop": "value",
+            "description": "The currently active slide (zero-indexed)"
+          }
+        ],
+        "events": [
+          {
+            "event": "sliding-end",
+            "description": "Emitted when transitioning to a new slide has ended",
+            "args": [
+              {
+                "arg": "slide",
+                "type": "Number",
+                "description": "Slide number that was slid to"
+              }
+            ]
+          },
+          {
+            "event": "sliding-start",
+            "description": "Emitted when transitioning to a new slide has started",
+            "args": [
+              {
+                "arg": "slide",
+                "type": "Number",
+                "description": "Slide number that is being slid to"
+              }
+            ]
+          }
+        ],
+        "slots": [
+          {
+            "name": "default",
+            "description": "Content (slides) to place in the carousel"
+          }
+        ]
+      },
+      {
+        "component": "BCarouselSlide",
+        "description": "The <b-carousel-slide> component is a slide to be placed in the <b-carousel>",
+        "props": [
+          {
+            "prop": "background",
+            "description": "CSS color to use as the slide's background color"
+          },
+          {
+            "prop": "caption",
+            "description": "Text content to place in the caption"
+          },
+          {
+            "prop": "captionHtml",
+            "description": "HTML string content to place in the caption",
+            "xss": true
+          },
+          {
+            "prop": "captionTag",
+            "description": "Specify the HTML tag to render instead of the default tag for the caption wrapper"
+          },
+          {
+            "prop": "contentTag",
+            "description": "Specify the HTML tag to render instead of the default tag for the content wrapper"
+          },
+          {
+            "prop": "contentVisibleUp",
+            "description": "Specify the breakpoint that the textual content will start to be shown. Leave at default to always show the textual content"
+          },
+          {
+            "prop": "imgAlt",
+            "description": "Sets the value of the 'alt' attribute on the image"
+          },
+          {
+            "prop": "imgBlank",
+            "description": "If set, will render a blank image instead of the img-src"
+          },
+          {
+            "prop": "imgBlankColor",
+            "description": "Set the CSS color to use as the fill of the blank image"
+          },
+          {
+            "prop": "imgHeight",
+            "description": "Set the default image 'height' attribute for all b-tab children"
+          },
+          {
+            "prop": "imgSrc",
+            "description": "Sets the URL of the image"
+          },
+          {
+            "prop": "imgWidth",
+            "description": "Set the default image 'width' attribute for all b-tab children"
+          },
+          {
+            "prop": "text",
+            "description": "Text content to place in the text of the slide"
+          },
+          {
+            "prop": "textHtml",
+            "description": "HTML string content to place in the text of the slide",
+            "xss": true
+          }
+        ],
+        "slots": [
+          {
+            "name": "default",
+            "description": "Content to place in the carousel slide"
+          },
+          {
+            "name": "img",
+            "description": "Slot for img element or image component"
+          }
+        ]
+      }
+    ]
+  }
+}

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

@@ -0,0 +1,321 @@
+# Collapse
+
+> Easily toggle visibility of almost any content on your pages in a vertically collapsing container.
+> Includes support for making accordions. Visibility can be easily toggled with our
+> [`v-b-toggle` directive](/docs/directives/toggle), or via `v-model`.
+
+```html
+<div>
+  <b-button v-b-toggle.collapse-1 variant="primary">Toggle Collapse</b-button>
+  <b-collapse id="collapse-1" class="mt-2">
+    <b-card>
+      <p class="card-text">Collapse contents Here</p>
+      <b-button v-b-toggle.collapse-1-inner size="sm">Toggle Inner Collapse</b-button>
+      <b-collapse id="collapse-1-inner" class="mt-2">
+        <b-card>Hello!</b-card>
+      </b-collapse>
+    </b-card>
+  </b-collapse>
+</div>
+
+<!-- b-collapse.vue -->
+```
+
+## Usage
+
+Other elements can easily toggle `<b-collapse>` components using the
+[`v-b-toggle` directive](/docs/directives/toggle).
+
+```html
+<div>
+  <!-- Using modifiers -->
+  <b-button v-b-toggle.collapse-2 class="m-1">Toggle Collapse</b-button>
+
+  <!-- Using value -->
+  <b-button v-b-toggle="'collapse-2'" class="m-1">Toggle Collapse</b-button>
+
+  <!-- Element to collapse -->
+  <b-collapse id="collapse-2">
+    <b-card>I am collapsible content!</b-card>
+  </b-collapse>
+</div>
+
+<!-- b-collapse-usage.vue -->
+```
+
+See the [`v-b-toggle` directive documentation](/docs/directives/toggle) for detailed usage
+information.
+
+## Initial visibility (start expanded)
+
+To make the `<b-collapse>` show initially, set the `visible` prop:
+
+```html
+<div>
+  <b-button v-b-toggle.collapse-3 class="m-1">Toggle Collapse</b-button>
+  <b-collapse visible id="collapse-3">
+    <b-card>I should start open!</b-card>
+  </b-collapse>
+</div>
+
+<!-- b-collapse-visible.vue -->
+```
+
+By default, an initially visible collapse will not animate on mount. To enable the collapse
+expanding animation on mount (when `visible` or `v-model` is `true`), set the `appear` prop on
+`<b-collapse>`.
+
+## `v-model` support
+
+The component's collapsed (visible) state can also be set with `v-model` which binds internally to
+the `visible` prop.
+
+Note, when using `v-model` to control `<b-collapse>`, the `aria-*` attributes and class `collapsed`
+are not automatically placed on the trigger button (as is the case when using the `v-b-toggle`
+directive). In this example we **must control the attributes ourselves** for proper accessibility
+support.
+
+```html
+<template>
+  <div>
+    <b-button
+      :class="visible ? null : 'collapsed'"
+      :aria-expanded="visible ? 'true' : 'false'"
+      aria-controls="collapse-4"
+      @click="visible = !visible"
+    >
+      Toggle Collapse
+    </b-button>
+    <b-collapse id="collapse-4" v-model="visible" class="mt-2">
+      <b-card>I should start open!</b-card>
+    </b-collapse>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        visible: true
+      }
+    }
+  }
+</script>
+
+<!-- b-collapse-v-model.vue -->
+```
+
+## Trigger multiple collapse elements
+
+You can even collapse multiple `<b-collapse>` components via a single `v-b-toggle` by providing
+multiple target IDs using _modifiers_.
+
+You can also pass multiple target IDs via the directive _value_ in BootstrapVue release v2.14.0+.
+
+```html
+<div>
+  <!-- Via multiple directive modifiers -->
+  <b-button v-b-toggle.collapse-a.collapse-b>Toggle Collapse A and B</b-button>
+
+  <!-- Via space separated string of IDs passed to directive value -->
+  <b-button v-b-toggle="'collapse-a collapse-b'">Toggle Collapse A and B</b-button>
+
+  <!-- Via array of string IDs passed to directive value -->
+  <b-button v-b-toggle="['collapse-a', 'collapse-b']">Toggle Collapse A and B</b-button>
+
+  <!-- Elements to collapse -->
+  <b-collapse id="collapse-a" class="mt-2">
+    <b-card>I am collapsible content A!</b-card>
+  </b-collapse>
+  <b-collapse id="collapse-b" class="mt-2">
+    <b-card>I am collapsible content B!</b-card>
+  </b-collapse>
+</div>
+
+<!-- b-collapse-trigger-multiple.vue -->
+```
+
+## Accordion support
+
+Turn a group of `<b-collapse>` components into an accordion by supplying an accordion group
+identifier via the `accordion` prop. Note that only one collapse in an accordion group can be open
+at a time.
+
+```html
+<template>
+  <div class="accordion" role="tablist">
+    <b-card no-body class="mb-1">
+      <b-card-header header-tag="header" class="p-1" role="tab">
+        <b-button block v-b-toggle.accordion-1 variant="info">Accordion 1</b-button>
+      </b-card-header>
+      <b-collapse id="accordion-1" visible accordion="my-accordion" role="tabpanel">
+        <b-card-body>
+          <b-card-text>I start opened because <code>visible</code> is <code>true</code></b-card-text>
+          <b-card-text>{{ text }}</b-card-text>
+        </b-card-body>
+      </b-collapse>
+    </b-card>
+
+    <b-card no-body class="mb-1">
+      <b-card-header header-tag="header" class="p-1" role="tab">
+        <b-button block v-b-toggle.accordion-2 variant="info">Accordion 2</b-button>
+      </b-card-header>
+      <b-collapse id="accordion-2" accordion="my-accordion" role="tabpanel">
+        <b-card-body>
+          <b-card-text>{{ text }}</b-card-text>
+        </b-card-body>
+      </b-collapse>
+    </b-card>
+
+    <b-card no-body class="mb-1">
+      <b-card-header header-tag="header" class="p-1" role="tab">
+        <b-button block v-b-toggle.accordion-3 variant="info">Accordion 3</b-button>
+      </b-card-header>
+      <b-collapse id="accordion-3" accordion="my-accordion" role="tabpanel">
+        <b-card-body>
+          <b-card-text>{{ text }}</b-card-text>
+        </b-card-body>
+      </b-collapse>
+    </b-card>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        text: `
+          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
+          richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
+          brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
+          tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
+          assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
+          wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
+          vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
+          synth nesciunt you probably haven't heard of them accusamus labore VHS.
+        `
+      }
+    }
+  }
+</script>
+
+<!-- b-accordion.vue -->
+```
+
+**Notes:**
+
+- When using accordion mode, make sure you place the trigger elements and `<b-collapse>` components
+  inside an element with `role="tablist"` and set `role="tab"` on each trigger element's container
+  (each trigger element should be wrapped) in order to help screen reader users navigate the
+  accordion group.
+- If using the `v-model` feature of `<b-collapse>` in accordion mode, do not bind the `v-model` or
+  `visible` prop of all the collapses in the accordion group to the same variable!
+- Ensure, at most, only one `<b-collapse>` in the accordion group has the `visible` prop and/or
+  `v-model` set to `true`. Only one collapse in an accordion group can be open at a time.
+
+## Hiding and showing content in the toggle button based on collapse state
+
+When using the `v-b-toggle` directive, the class `collapsed` will automatically be placed on the
+trigger element when the collapse is closed, and removed when open. You can use this class to
+display or hide content within the toggle via custom CSS. As of BootstrapVue 2.14.0, the class
+`not-collapsed` will be applied when the target(s) are not closed.
+
+**Example HTML markup:**
+
+```html
+<div>
+  <b-button v-b-toggle:my-collapse>
+    <span class="when-open">Close</span><span class="when-closed">Open</span> My Collapse
+  </b-button>
+  <b-collapse id="my-collapse">
+    <!-- Content here -->
+  </b-collapse>
+</div>
+```
+
+**Example Custom CSS:**
+
+```css
+.collapsed > .when-open,
+.not-collapsed > .when-closed {
+  display: none;
+}
+```
+
+## 'Global' \$root instance events
+
+Using `$root` instance it is possible to emit and listen events somewhere out of a component, where
+`<b-collapse>` is used. In short, `$root` behaves like a global event emitters and listener. Details
+about `$root` instance can be found in
+[the official Vue docs](https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-the-Root-Instance).
+
+### Listening to collapses state changes via \$root events
+
+To listen to any collapse state changes, use:
+
+```js
+export default {
+  mounted() {
+    this.$root.$on('bv::collapse::state', (collapseId, isJustShown) => {
+      console.log('collapseId:', collapseId)
+      console.log('isJustShown:', isJustShown)
+    })
+  }
+}
+```
+
+where `collapseId` is collapse id which changed its state; `isJustShown` is true/false, i.e.
+shown/hidden collapse.
+
+### Toggling collapses via \$root events
+
+To toggle (open/close) a **specific collapse**, pass the collapse `id`:
+
+```js
+this.$root.$emit('bv::toggle::collapse', 'my-collapse-id')
+```
+
+## Optionally scoped default slot
+
+<span class="badge badge-info small">New in v2.2.0</span>
+
+The default slot can be optionally scoped. The following scope properties are available:
+
+| Property  | Type     | Description                          |
+| --------- | -------- | ------------------------------------ |
+| `visible` | Boolean  | Visible state of the collapse        |
+| `close`   | Function | When called, will close the collapse |
+
+## Accessibility
+
+The `v-b-toggle` directive will automatically add the ARIA attributes `aria-controls` and
+`aria-expanded` to the component that the directive appears on (as well as add the class `collapsed`
+when not expanded). `aria-expanded` will reflect the state of the target `<b-collapse>` component,
+while `aria-controls` will be set to the ID(s) of the target `<b-collapse>` component(s).
+
+If using `v-model` to set the visible state instead of the directive `v-b-toggle`, you will be
+required to, on the toggle element, add the `aria-controls` and other appropriate attributes and
+classes yourself.
+
+While the `v-b-toggle` directive can be placed on almost any HTML element or Vue component, it is
+recommended to use a button or link (or similar component) to act as your toggler. Otherwise your
+trigger elements may be inaccessible to keyboard or screen reader users. If you do place them on
+something other than a button or link (or similar component), you should add the attributes
+`tabindex="0"` and `role="button"` to allow users of assistive technology to reach your trigger
+element.
+
+When using accordion mode, make sure you place the trigger elements and `<b-collapse>` components
+inside an element with `role="tablist"` and set `role="tab"` on each trigger element's container in
+order to help screen reader users navigate the accordion group. Unfortunately, BootstrapVue cannot
+apply those roles for you automatically, as it depends on your final document markup.
+
+**Note:** The animation effect of this component is dependent on the `prefers-reduced-motion` media
+query. See the
+[reduced motion section of our accessibility documentation](/docs/reference/accessibility) for
+additional details.
+
+## See also
+
+- [`v-b-toggle` directive](/docs/directives/toggle)
+
+<!-- Component reference added automatically from component package.json -->