@gitlab/duo-ui 0.1.0 → 0.3.0

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

@@ -0,0 +1,5 @@
+{
+  "name": "@bootstrap-vue/transition",
+  "version": "1.0.0",
+  "private": true
+}

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

@@ -0,0 +1,5 @@
+{
+  "name": "@bootstrap-vue/transporter",
+  "version": "1.0.0",
+  "private": true
+}

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

@@ -0,0 +1,85 @@
+import { isVue3 } from '../../vue'
+import { mount } from '@vue/test-utils'
+import { waitNT, getInstanceFromVNode } from '../../../tests/utils'
+import { BVTransporter } from './transporter'
+
+describe('utils/transporter component', () => {
+  it('renders in-pace when disabled=true', async () => {
+    const App = {
+      render(h) {
+        return h(BVTransporter, { props: { disabled: true } }, [h('div', 'content')])
+      }
+    }
+
+    const wrapper = mount(App, {
+      attachTo: document.body
+    })
+
+    expect(wrapper.vm).toBeDefined()
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.text()).toEqual('content')
+
+    wrapper.destroy()
+  })
+
+  it('does not render in-pace when disabled=false', async () => {
+    const App = {
+      render(h) {
+        return h(BVTransporter, { props: { disabled: false } }, [
+          h('div', { attrs: { id: 'foobar' } }, 'content')
+        ])
+      }
+    }
+
+    const wrapper = mount(App, {
+      attachTo: document.body
+    })
+
+    expect(wrapper.vm).toBeDefined()
+
+    await waitNT(wrapper.vm)
+
+    expect(wrapper.element.nodeType).toBe(Node.COMMENT_NODE)
+
+    const target = document.getElementById('foobar')
+    expect(target).toBeDefined()
+    expect(target).not.toBe(null)
+    expect(getInstanceFromVNode(target)).toBeDefined() // Target
+    if (!isVue3) {
+      expect(getInstanceFromVNode(target).$options.name).toBe('BVTransporterTarget')
+    }
+    expect(target.tagName).toEqual('DIV')
+    expect(target.parentElement).toBeDefined()
+    expect(target.parentElement).toBe(document.body)
+
+    wrapper.destroy()
+
+    await waitNT(wrapper.vm)
+
+    expect(target.parentElement).toEqual(null)
+  })
+
+  it('maintains provide-inject relation', async () => {
+    const Child = {
+      inject: ['foo'],
+      render(h) {
+        return h('article', this.foo)
+      }
+    }
+
+    const App = {
+      provide() {
+        return { foo: 'foo' }
+      },
+      render(h) {
+        return h(BVTransporter, { props: { disabled: false } }, [h(Child)])
+      }
+    }
+
+    mount(App, {
+      attachTo: document.body
+    })
+
+    expect(document.querySelector('article').textContent).toBe('foo')
+  })
+})

package/src/vendor/bootstrap-vue/src/directives/modal/index.d.ts

@@ -0,0 +1,8 @@
+//
+// VBModal
+//
+import { DirectiveOptions } from 'vue'
+
+
+// directive: v-b-modal
+export declare const VBModal: DirectiveOptions

package/src/vendor/bootstrap-vue/src/directives/modal/modal.spec.js

@@ -0,0 +1,191 @@
+import { mount } from '@vue/test-utils'
+import { VBModal } from './modal'
+
+const EVENT_SHOW = 'bv::show::modal'
+
+describe('v-b-modal directive', () => {
+  it('works on buttons', async () => {
+    const spy = jest.fn()
+    const App = {
+      directives: {
+        bModal: VBModal
+      },
+      mounted() {
+        this.$root.$on(EVENT_SHOW, spy)
+      },
+      beforeDestroy() {
+        this.$root.$off(EVENT_SHOW, spy)
+      },
+      template: '<button v-b-modal.test>button</button>'
+    }
+    const wrapper = mount(App)
+
+    expect(wrapper.vm).toBeDefined()
+    expect(wrapper.element.tagName).toBe('BUTTON')
+    expect(wrapper.find('button').attributes('tabindex')).toBeUndefined()
+    expect(wrapper.find('button').attributes('role')).toBeUndefined()
+    expect(spy).not.toHaveBeenCalled()
+
+    const $button = wrapper.find('button')
+    await $button.trigger('click')
+    expect(spy).toHaveBeenCalledTimes(1)
+    expect(spy).toBeCalledWith('test', $button.element)
+
+    wrapper.destroy()
+  })
+
+  it('works on links', async () => {
+    const spy = jest.fn()
+    const App = {
+      directives: {
+        bModal: VBModal
+      },
+      data() {
+        return {
+          text: 'link'
+        }
+      },
+      mounted() {
+        this.$root.$on(EVENT_SHOW, spy)
+      },
+      beforeDestroy() {
+        this.$root.$off(EVENT_SHOW, spy)
+      },
+      template: '<a href="#" v-b-modal.test>{{ text }}</a>'
+    }
+    const wrapper = mount(App)
+
+    expect(wrapper.vm).toBeDefined()
+    expect(wrapper.element.tagName).toBe('A')
+    expect(spy).not.toHaveBeenCalled()
+    expect(wrapper.find('a').attributes('role')).toBe('button')
+    expect(wrapper.find('a').attributes('tabindex')).toBeUndefined()
+    expect(wrapper.find('a').text()).toBe('link')
+
+    const $link = wrapper.find('a')
+    await $link.trigger('click')
+    expect(spy).toHaveBeenCalledTimes(1)
+    expect(spy).toBeCalledWith('test', $link.element)
+    expect(wrapper.find('a').attributes('role')).toBe('button')
+    expect(wrapper.find('a').attributes('tabindex')).toBeUndefined()
+
+    wrapper.destroy()
+  })
+
+  it('works on non-buttons', async () => {
+    const spy = jest.fn()
+    const App = {
+      directives: {
+        bModal: VBModal
+      },
+      data() {
+        return {
+          text: 'span'
+        }
+      },
+      mounted() {
+        this.$root.$on(EVENT_SHOW, spy)
+      },
+      beforeDestroy() {
+        this.$root.$off(EVENT_SHOW, spy)
+      },
+      template: '<span v-b-modal.test>{{ text }}</span>'
+    }
+    const wrapper = mount(App)
+
+    expect(wrapper.vm).toBeDefined()
+    expect(wrapper.element.tagName).toBe('SPAN')
+    expect(spy).not.toHaveBeenCalled()
+    expect(wrapper.find('span').attributes('role')).toBe('button')
+    expect(wrapper.find('span').attributes('tabindex')).toBe('0')
+    expect(wrapper.find('span').text()).toBe('span')
+
+    const $span = wrapper.find('span')
+    await $span.trigger('click')
+    expect(spy).toHaveBeenCalledTimes(1)
+    expect(spy).toBeCalledWith('test', $span.element)
+    expect(wrapper.find('span').attributes('role')).toBe('button')
+
+    // Test updating component. should maintain role attribute
+    await wrapper.setData({
+      text: 'foobar'
+    })
+    expect(wrapper.find('span').text()).toBe('foobar')
+    expect(wrapper.find('span').attributes('role')).toBe('button')
+
+    wrapper.destroy()
+  })
+
+  it('works on non-buttons using keydown space', async () => {
+    const spy = jest.fn()
+    const App = {
+      directives: {
+        bModal: VBModal
+      },
+      data() {
+        return {
+          text: 'span'
+        }
+      },
+      mounted() {
+        this.$root.$on(EVENT_SHOW, spy)
+      },
+      beforeDestroy() {
+        this.$root.$off(EVENT_SHOW, spy)
+      },
+      template: '<span v-b-modal.test>{{ text }}</span>'
+    }
+    const wrapper = mount(App)
+
+    expect(wrapper.vm).toBeDefined()
+    expect(wrapper.element.tagName).toBe('SPAN')
+    expect(spy).not.toHaveBeenCalled()
+    expect(wrapper.find('span').attributes('role')).toBe('button')
+    expect(wrapper.find('span').attributes('tabindex')).toBe('0')
+    expect(wrapper.find('span').text()).toBe('span')
+
+    const $span = wrapper.find('span')
+    await $span.trigger('keydown.space')
+    expect(spy).toHaveBeenCalledTimes(1)
+    expect(spy).toBeCalledWith('test', $span.element)
+    expect(wrapper.find('span').attributes('role')).toBe('button')
+
+    wrapper.destroy()
+  })
+
+  it('works on non-buttons using keydown enter', async () => {
+    const spy = jest.fn()
+    const App = {
+      directives: {
+        bModal: VBModal
+      },
+      data() {
+        return {
+          text: 'span'
+        }
+      },
+      mounted() {
+        this.$root.$on(EVENT_SHOW, spy)
+      },
+      beforeDestroy() {
+        this.$root.$off(EVENT_SHOW, spy)
+      },
+      template: '<span tabindex="0" v-b-modal.test>{{ text }}</span>'
+    }
+    const wrapper = mount(App)
+
+    expect(wrapper.vm).toBeDefined()
+    expect(wrapper.element.tagName).toBe('SPAN')
+    expect(spy).not.toHaveBeenCalled()
+    expect(wrapper.find('span').attributes('role')).toBe('button')
+    expect(wrapper.find('span').text()).toBe('span')
+
+    const $span = wrapper.find('span')
+    await $span.trigger('keydown.enter')
+    expect(spy).toHaveBeenCalledTimes(1)
+    expect(spy).toBeCalledWith('test', $span.element)
+    expect(wrapper.find('span').attributes('role')).toBe('button')
+
+    wrapper.destroy()
+  })
+})

package/src/vendor/bootstrap-vue/src/directives/toggle/README.md

@@ -0,0 +1,146 @@
+# Toggle
+
+> `v-b-toggle` is a light-weight directive for toggling the visibility of collapses,
+> and includes automated [WAI-ARIA accessibility](/docs/reference/accessibility) attribute handling.
+
+## Overview
+
+The `v-b-toggle` directive can be used on interactive elements, such as buttons and to toggle the
+visibility state of the [`<b-collapse>`](/docs/components/collapse) component.
+
+Besides toggling the visibility of the target component, the directive automatically updates ARIA
+accessibility attributes on the element it is applied to so that they reflect the visibility state
+of the target component. Refer to the [Accessibility section](#accessibility) below for additional
+details and caveats.
+
+## Directive syntax and usage
+
+The directive is applied to the element or component that triggers the visibility of the target. The
+target component can be specified (via its ID) as either a directive modifier(s), the directive
+argument, or as a string/array passed to as the directive value:
+
+- `v-b-toggle.my-collapse` - the directive modifier (multiple targets allowed, each modifier is a
+  target ID)
+- `v-b-toggle:my-collapse` - the directive argument
+  ([Vue dynamic argument](https://vuejs.org/v2/guide/syntax.html#Dynamic-Arguments) is supported)
+  <span class="badge badge-info small" aria-label="Available in BootstrapVue v2.14.0+">v2.14.0+</span>
+- `v-b-toggle="'my-collapse'"` - the directive value as a string ID
+- `v-b-toggle="'my-collapse1 my-collapse2'"` - the directive value as a space separated string of
+  IDs
+  <span class="badge badge-info small" aria-label="Available in BootstrapVue v2.14.0+">v2.14.0+</span>
+- `v-b-toggle="['my-collapse1', 'my-collapse2']"` - the directive value as an array of string IDs
+  <span class="badge badge-info small" aria-label="Available in BootstrapVue v2.14.0+">v2.14.0+</span>
+
+Modifiers, argument, and the value can be used at the same time when targeting multiple components.
+
+**Example usage:**
+
+```html
+<template>
+  <div>
+    <div class="mb-3">
+      <b-button v-b-toggle.my-collapse>Toggle Collapse</b-button>
+    </div>
+
+    <b-collapse id="my-collapse">
+      <b-card title="Collapsible card">
+        Hello world!
+      </b-card>
+    </b-collapse>
+  </div>
+</template>
+
+<!-- v-b-toggle-directive.vue -->
+```
+
+## Usage on links
+
+<span class="badge badge-info small">2.15.0+</span>
+
+If placing the directive on a link (or a component that renders a link), the target ID can
+alternatively be specified via the `href` attribute.
+
+Note that the browser URL will change and the page may scroll the target into view. To prevent the
+URL from changing and the page from scrolling, add `@click.prevent` to the link.
+
+**Example usage:**
+
+```html
+<template>
+  <div>
+    <div class="mb-3">
+      <a v-b-toggle href="#example-collapse" @click.prevent>Toggle Collapse</a>
+    </div>
+
+    <b-collapse id="example-collapse">
+      <b-card title="Collapsible card">
+        Hello world!
+      </b-card>
+    </b-collapse>
+  </div>
+</template>
+
+<!-- v-b-toggle-links.vue -->
+```
+
+## Hiding and showing content in the toggle trigger element
+
+When using the `v-b-toggle` directive, the class `collapsed` will automatically be placed on the
+trigger element when the target component is closed, and removed when open. As of BootstrapVue
+`2.14.0`, the class `not-collapsed` will be applied when the target is _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;
+}
+```
+
+## Preventing the target from opening or closing
+
+To prevent the trigger element from toggling the target, set the `disabled` prop on `<button>`,
+`<b-button>`, or `<b-link>` (or components based on from `<b-link>`) and the toggle event will _not_
+dispatched to the target(s).
+
+## Accessibility
+
+The directive, for accessibility reasons, should be placed on an clickable interactive element such
+as a `<button>` or `<b-button>`, which can easily be accessed by keyboard-only users and screen
+reader users. Elements that do not natively have an accessibility role of `button` (or `link`) will
+have the attributes `role="button"` and `tabindex="0"` applied, and will have the appropriate click
+handler instantiated. Therefore it is _highly recommended_ to _not_ place the directive on form
+controls other than buttons.
+
+The directive applies, and dynamically updates, the following ARIA attributes on the trigger
+element:
+
+- `aria-controls` - the ID(s) of the collapse component(s) being toggled
+- `aria-expanded` - the visibility state of the collapse (see the
+  [caveats section](#caveats-with-multiple-targets) below)
+
+### Caveats with multiple targets
+
+When multiple targets are specified, the value of the `aria-expanded` attribute may not be correct
+if the individual target components can have their collapsed state controlled independently (either
+via `v-model`, other controls with `v-b-toggle` directive, or CSS visibility).
+
+## See also
+
+- [`<b-collapse>`](/docs/components/collapse) Collapsible content with accordion support
+- [`<b-navbar-toggle>`](/docs/components/navbar#b-navbar-toggle-and-b-collapse-is-nav) Navbar
+  hamburger toggle button (based on `v-b-toggle` directive)

package/src/vendor/bootstrap-vue/src/directives/toggle/index.d.ts

@@ -0,0 +1,7 @@
+//
+// VBToggle
+//
+import { DirectiveOptions } from 'vue'
+
+// directive: v-b-toggle
+export declare const VBToggle: DirectiveOptions

package/src/vendor/bootstrap-vue/src/directives/toggle/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@bootstrap-vue/v-b-toggle",
+  "version": "1.0.0",
+  "meta": {
+    "title": "Toggle",
+    "description": "A light-weight directive for toggling visibility state for collapses by ID. It automatically handles the accessibility attributes on the trigger element.",
+    "directive": "VBToggle",
+    "expression": [
+      "String",
+      "Array"
+    ],
+    "arg": {
+      "version": "2.14.0",
+      "pattern": "[a-zA-Z][a-zA-Z0-9_\\-]*",
+      "description": "ID of component to toggle",
+      "required": false
+    },
+    "modifiers": [
+      {
+        "name": "{componentId}",
+        "pattern": "[a-zA-Z][a-zA-Z0-9_\\-]*",
+        "description": "ID of component to toggle"
+      }
+    ]
+  }
+}