@gitlab/ui 112.2.2 → 112.3.0

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

@@ -1,321 +0,0 @@
-# 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](?path=/docs/base-tooltip--docs#accessibility)
-for additional details.
-
-## See also
-
-- [`v-b-toggle` directive](/docs/directives/toggle)
-
-<!-- Component reference added automatically from component package.json -->

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

@@ -1,207 +0,0 @@
-import { extend } from '../../vue'
-import { NAME_COLLAPSE } from '../../constants/components'
-import {
-  EVENT_NAME_HIDDEN,
-  EVENT_NAME_HIDE,
-  EVENT_NAME_SHOW,
-  EVENT_NAME_SHOWN
-} from '../../constants/events'
-import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
-import { SLOT_NAME_DEFAULT } from '../../constants/slots'
-import { getRootActionEventName, getRootEventName } from '../../utils/events'
-import { makeModelMixin } from '../../utils/model'
-import { sortKeys } from '../../utils/object'
-import { makeProp, makePropsConfigurable } from '../../utils/props'
-import { idMixin, props as idProps } from '../../mixins/id'
-import { listenOnRootMixin } from '../../mixins/listen-on-root'
-import { normalizeSlotMixin } from '../../mixins/normalize-slot'
-import { BVCollapse } from './helpers/bv-collapse'
-
-// --- Constants ---
-const ROOT_ACTION_EVENT_NAME_TOGGLE = getRootActionEventName(NAME_COLLAPSE, 'toggle')
-const ROOT_ACTION_EVENT_NAME_REQUEST_STATE = getRootActionEventName(NAME_COLLAPSE, 'request-state')
-
-const ROOT_EVENT_NAME_ACCORDION = getRootEventName(NAME_COLLAPSE, 'accordion')
-const ROOT_EVENT_NAME_STATE = getRootEventName(NAME_COLLAPSE, 'state')
-const ROOT_EVENT_NAME_SYNC_STATE = getRootEventName(NAME_COLLAPSE, 'sync-state')
-
-const {
-  mixin: modelMixin,
-  props: modelProps,
-  prop: MODEL_PROP_NAME,
-  event: MODEL_EVENT_NAME
-} = makeModelMixin('visible', { type: PROP_TYPE_BOOLEAN, defaultValue: false })
-
-// --- Props ---
-
-export const props = makePropsConfigurable(
-  sortKeys({
-    ...idProps,
-    ...modelProps,
-    // If `true` (and `visible` is `true` on mount), animate initially visible
-    accordion: makeProp(PROP_TYPE_STRING),
-    appear: makeProp(PROP_TYPE_BOOLEAN, false),
-    tag: makeProp(PROP_TYPE_STRING, 'div')
-  }),
-  NAME_COLLAPSE
-)
-
-// --- Main component ---
-
-// @vue/component
-export const BCollapse = /*#__PURE__*/ extend({
-  name: NAME_COLLAPSE,
-  mixins: [idMixin, modelMixin, normalizeSlotMixin, listenOnRootMixin],
-  props,
-  data() {
-    return {
-      show: this[MODEL_PROP_NAME],
-      transitioning: false
-    }
-  },
-  computed: {
-    classObject() {
-      const { transitioning } = this
-
-      return {
-        collapse: !transitioning,
-        show: this.show && !transitioning
-      }
-    },
-    slotScope() {
-      return {
-        visible: this.show,
-        close: () => {
-          this.show = false
-        }
-      }
-    }
-  },
-  watch: {
-    [MODEL_PROP_NAME](newValue) {
-      if (newValue !== this.show) {
-        this.show = newValue
-      }
-    },
-    show(newValue, oldValue) {
-      if (newValue !== oldValue) {
-        this.emitState()
-      }
-    }
-  },
-  created() {
-    this.show = this[MODEL_PROP_NAME]
-  },
-  mounted() {
-    this.show = this[MODEL_PROP_NAME]
-    // Listen for toggle events to open/close us
-    this.listenOnRoot(ROOT_ACTION_EVENT_NAME_TOGGLE, this.handleToggleEvent)
-    // Listen to other collapses for accordion events
-    this.listenOnRoot(ROOT_EVENT_NAME_ACCORDION, this.handleAccordionEvent)
-    this.$nextTick(() => {
-      this.emitState()
-    })
-    // Listen for "Sync state" requests from `v-b-toggle`
-    this.listenOnRoot(ROOT_ACTION_EVENT_NAME_REQUEST_STATE, id => {
-      if (id === this.safeId()) {
-        this.$nextTick(this.emitSync)
-      }
-    })
-  },
-  updated() {
-    // Emit a private event every time this component updates to ensure
-    // the toggle button is in sync with the collapse's state
-    // It is emitted regardless if the visible state changes
-    this.emitSync()
-  },
-  beforeDestroy() {
-    // Trigger state emit if needed
-    this.show = false
-  },
-  methods: {
-    toggle() {
-      this.show = !this.show
-    },
-    onEnter() {
-      this.transitioning = true
-      // This should be moved out so we can add cancellable events
-      this.$emit(EVENT_NAME_SHOW)
-    },
-    onAfterEnter() {
-      this.transitioning = false
-      this.$emit(EVENT_NAME_SHOWN)
-    },
-    onLeave() {
-      this.transitioning = true
-      // This should be moved out so we can add cancellable events
-      this.$emit(EVENT_NAME_HIDE)
-    },
-    onAfterLeave() {
-      this.transitioning = false
-      this.$emit(EVENT_NAME_HIDDEN)
-    },
-    emitState() {
-      const { show, accordion } = this
-      const id = this.safeId()
-
-      this.$emit(MODEL_EVENT_NAME, show)
-
-      // Let `v-b-toggle` know the state of this collapse
-      this.emitOnRoot(ROOT_EVENT_NAME_STATE, id, show)
-      if (accordion && show) {
-        // Tell the other collapses in this accordion to close
-        this.emitOnRoot(ROOT_EVENT_NAME_ACCORDION, id, accordion)
-      }
-    },
-    emitSync() {
-      // Emit a private event every time this component updates to ensure
-      // the toggle button is in sync with the collapse's state
-      // It is emitted regardless if the visible state changes
-      this.emitOnRoot(ROOT_EVENT_NAME_SYNC_STATE, this.safeId(), this.show)
-    },
-    handleToggleEvent(id) {
-      if (id === this.safeId()) {
-        this.toggle()
-      }
-    },
-    handleAccordionEvent(openedId, openAccordion) {
-      const { accordion, show } = this
-      if (!accordion || accordion !== openAccordion) {
-        return
-      }
-      const isThis = openedId === this.safeId()
-      // Open this collapse if not shown or
-      // close this collapse if shown
-      if ((isThis && !show) || (!isThis && show)) {
-        this.toggle()
-      }
-    }
-  },
-  render(h) {
-    const { appear } = this
-
-    const $content = h(
-      this.tag,
-      {
-        class: this.classObject,
-        directives: [{ name: 'show', value: this.show }],
-        attrs: { id: this.safeId() }
-      },
-      this.normalizeSlot(SLOT_NAME_DEFAULT, this.slotScope)
-    )
-
-    return h(
-      BVCollapse,
-      {
-        props: { appear },
-        on: {
-          enter: this.onEnter,
-          afterEnter: this.onAfterEnter,
-          leave: this.onLeave,
-          afterLeave: this.onAfterLeave
-        }
-      },
-      [$content]
-    )
-  }
-})