@gitlab/duo-ui 0.1.0

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

@@ -0,0 +1,179 @@
+import { extend, mergeData } from '../../vue'
+import { NAME_BUTTON } from '../../constants/components'
+import { CODE_ENTER, CODE_SPACE } from '../../constants/key-codes'
+import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
+import { concat } from '../../utils/array'
+import { addClass, isTag, removeClass } from '../../utils/dom'
+import { stopEvent } from '../../utils/events'
+import { isBoolean, isEvent, isFunction } from '../../utils/inspect'
+import { omit, sortKeys } from '../../utils/object'
+import { makeProp, makePropsConfigurable, pluckProps } from '../../utils/props'
+import { isLink as isLinkStrict } from '../../utils/router'
+import { BLink, props as BLinkProps } from '../link/link'
+
+// --- Props ---
+
+const linkProps = omit(BLinkProps, ['event', 'routerTag'])
+delete linkProps.href.default
+delete linkProps.to.default
+
+export const props = makePropsConfigurable(
+  sortKeys({
+    ...linkProps,
+    block: makeProp(PROP_TYPE_BOOLEAN, false),
+    disabled: makeProp(PROP_TYPE_BOOLEAN, false),
+    pill: makeProp(PROP_TYPE_BOOLEAN, false),
+    // Tri-state: `true`, `false` or `null`
+    // => On, off, not a toggle
+    pressed: makeProp(PROP_TYPE_BOOLEAN, null),
+    size: makeProp(PROP_TYPE_STRING),
+    squared: makeProp(PROP_TYPE_BOOLEAN, false),
+    tag: makeProp(PROP_TYPE_STRING, 'button'),
+    type: makeProp(PROP_TYPE_STRING, 'button'),
+    variant: makeProp(PROP_TYPE_STRING, 'secondary')
+  }),
+  NAME_BUTTON
+)
+
+// --- Helper methods ---
+
+// Focus handler for toggle buttons
+// Needs class of 'focus' when focused
+const handleFocus = event => {
+  if (event.type === 'focusin') {
+    addClass(event.target, 'focus')
+  } else if (event.type === 'focusout') {
+    removeClass(event.target, 'focus')
+  }
+}
+
+// Is the requested button a link?
+// If tag prop is set to `a`, we use a <b-link> to get proper disabled handling
+const isLink = props => isLinkStrict(props) || isTag(props.tag, 'a')
+
+// Is the button to be a toggle button?
+const isToggle = props => isBoolean(props.pressed)
+
+// Is the button "really" a button?
+const isButton = props => !(isLink(props) || (props.tag && !isTag(props.tag, 'button')))
+
+// Is the requested tag not a button or link?
+const isNonStandardTag = props => !isLink(props) && !isButton(props)
+
+// Compute required classes (non static classes)
+const computeClass = props => [
+  `btn-${props.variant || 'secondary'}`,
+  {
+    [`btn-${props.size}`]: props.size,
+    'btn-block': props.block,
+    'rounded-pill': props.pill,
+    'rounded-0': props.squared && !props.pill,
+    disabled: props.disabled,
+    active: props.pressed
+  }
+]
+
+// Compute the link props to pass to b-link (if required)
+const computeLinkProps = props => (isLink(props) ? pluckProps(linkProps, props) : {})
+
+// Compute the attributes for a button
+const computeAttrs = (props, data) => {
+  const button = isButton(props)
+  const link = isLink(props)
+  const toggle = isToggle(props)
+  const nonStandardTag = isNonStandardTag(props)
+  const hashLink = link && props.href === '#'
+  const role = data.attrs && data.attrs.role ? data.attrs.role : null
+  let tabindex = data.attrs ? data.attrs.tabindex : null
+  if (nonStandardTag || hashLink) {
+    tabindex = '0'
+  }
+  return {
+    // Type only used for "real" buttons
+    type: button && !link ? props.type : null,
+    // Disabled only set on "real" buttons
+    disabled: button ? props.disabled : null,
+    // We add a role of button when the tag is not a link or button for ARIA
+    // Don't bork any role provided in `data.attrs` when `isLink` or `isButton`
+    // Except when link has `href` of `#`
+    role: nonStandardTag || hashLink ? 'button' : role,
+    // We set the `aria-disabled` state for non-standard tags
+    'aria-disabled': nonStandardTag ? String(props.disabled) : null,
+    // For toggles, we need to set the pressed state for ARIA
+    'aria-pressed': toggle ? String(props.pressed) : null,
+    // `autocomplete="off"` is needed in toggle mode to prevent some browsers
+    // from remembering the previous setting when using the back button
+    autocomplete: toggle ? 'off' : null,
+    // `tabindex` is used when the component is not a button
+    // Links are tabbable, but don't allow disabled, while non buttons or links
+    // are not tabbable, so we mimic that functionality by disabling tabbing
+    // when disabled, and adding a `tabindex="0"` to non buttons or non links
+    tabindex: props.disabled && !button ? '-1' : tabindex
+  }
+}
+
+// --- Main component ---
+
+// @vue/component
+export const BButton = /*#__PURE__*/ extend({
+  name: NAME_BUTTON,
+  functional: true,
+  props,
+  render(h, { props, data, listeners, children }) {
+    const toggle = isToggle(props)
+    const link = isLink(props)
+    const nonStandardTag = isNonStandardTag(props)
+    const hashLink = link && props.href === '#'
+    const on = {
+      keydown(event) {
+        // When the link is a `href="#"` or a non-standard tag (has `role="button"`),
+        // we add a keydown handlers for CODE_SPACE/CODE_ENTER
+        /* istanbul ignore next */
+        if (props.disabled || !(nonStandardTag || hashLink)) {
+          return
+        }
+        const { keyCode } = event
+        // Add CODE_SPACE handler for `href="#"` and CODE_ENTER handler for non-standard tags
+        if (keyCode === CODE_SPACE || (keyCode === CODE_ENTER && nonStandardTag)) {
+          const target = event.currentTarget || event.target
+          stopEvent(event, { propagation: false })
+          target.click()
+        }
+      },
+      click(event) {
+        /* istanbul ignore if: blink/button disabled should handle this */
+        if (props.disabled && isEvent(event)) {
+          stopEvent(event)
+        } else if (toggle && listeners && listeners['update:pressed']) {
+          // Send `.sync` updates to any "pressed" prop (if `.sync` listeners)
+          // `concat()` will normalize the value to an array without
+          // double wrapping an array value in an array
+          concat(listeners['update:pressed']).forEach(fn => {
+            if (isFunction(fn)) {
+              fn(!props.pressed)
+            }
+          })
+        }
+      }
+    }
+
+    if (toggle) {
+      on.focusin = handleFocus
+      on.focusout = handleFocus
+    }
+
+    const componentData = {
+      staticClass: 'btn',
+      class: computeClass(props),
+      props: computeLinkProps(props),
+      attrs: computeAttrs(props, data),
+      on
+    }
+
+    return h(
+      link ? BLink : props.tag,
+      mergeData({ ...data, props: undefined }, componentData),
+      children
+    )
+  }
+})

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

@@ -0,0 +1,4 @@
+import { BButton } from './button'
+import { BButtonClose } from './button-close'
+
+export { BButton, BButtonClose }

package/src/vendor/bootstrap-vue/src/components/button-group/button-group.js

@@ -0,0 +1,42 @@
+import { extend, mergeData } from '../../vue'
+import { NAME_BUTTON_GROUP } from '../../constants/components'
+import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
+import { pick, sortKeys } from '../../utils/object'
+import { makeProp, makePropsConfigurable } from '../../utils/props'
+import { props as buttonProps } from '../button/button'
+
+// --- Props ---
+
+export const props = makePropsConfigurable(
+  sortKeys({
+    ...pick(buttonProps, ['size']),
+    ariaRole: makeProp(PROP_TYPE_STRING, 'group'),
+    size: makeProp(PROP_TYPE_STRING),
+    tag: makeProp(PROP_TYPE_STRING, 'div'),
+    vertical: makeProp(PROP_TYPE_BOOLEAN, false)
+  }),
+  NAME_BUTTON_GROUP
+)
+
+// --- Main component ---
+
+// @vue/component
+export const BButtonGroup = /*#__PURE__*/ extend({
+  name: NAME_BUTTON_GROUP,
+  functional: true,
+  props,
+  render(h, { props, data, children }) {
+    return h(
+      props.tag,
+      mergeData(data, {
+        class: {
+          'btn-group': !props.vertical,
+          'btn-group-vertical': props.vertical,
+          [`btn-group-${props.size}`]: props.size
+        },
+        attrs: { role: props.ariaRole }
+      }),
+      children
+    )
+  }
+})

package/src/vendor/bootstrap-vue/src/components/button-group/index.js

@@ -0,0 +1,3 @@
+import { BButtonGroup } from './button-group'
+
+export { BButtonGroup }

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

@@ -0,0 +1,272 @@
+import { extend } from '../../vue'
+import { NAME_COLLAPSE } from '../../constants/components'
+import { CLASS_NAME_SHOW } from '../../constants/classes'
+import { IS_BROWSER } from '../../constants/env'
+import {
+  EVENT_NAME_HIDDEN,
+  EVENT_NAME_HIDE,
+  EVENT_NAME_SHOW,
+  EVENT_NAME_SHOWN,
+  EVENT_OPTIONS_NO_CAPTURE
+} from '../../constants/events'
+import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
+import { SLOT_NAME_DEFAULT } from '../../constants/slots'
+import { addClass, hasClass, removeClass, closest, matches, getCS } from '../../utils/dom'
+import { getRootActionEventName, getRootEventName, eventOnOff } 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),
+    isNav: 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 {
+        'navbar-collapse': this.isNav,
+        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)
+    if (this.isNav) {
+      // Set up handlers
+      this.setWindowEvents(true)
+      this.handleResize()
+    }
+    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()
+  },
+  /* istanbul ignore next */
+  deactivated() {
+    if (this.isNav) {
+      this.setWindowEvents(false)
+    }
+  },
+  /* istanbul ignore next */
+  activated() {
+    if (this.isNav) {
+      this.setWindowEvents(true)
+    }
+    this.emitSync()
+  },
+  beforeDestroy() {
+    // Trigger state emit if needed
+    this.show = false
+    if (this.isNav && IS_BROWSER) {
+      this.setWindowEvents(false)
+    }
+  },
+  methods: {
+    setWindowEvents(on) {
+      eventOnOff(on, window, 'resize', this.handleResize, EVENT_OPTIONS_NO_CAPTURE)
+      eventOnOff(on, window, 'orientationchange', this.handleResize, EVENT_OPTIONS_NO_CAPTURE)
+    },
+    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)
+    },
+    checkDisplayBlock() {
+      // Check to see if the collapse has `display: block !important` set
+      // We can't set `display: none` directly on `this.$el`, as it would
+      // trigger a new transition to start (or cancel a current one)
+      const { $el } = this
+      const restore = hasClass($el, CLASS_NAME_SHOW)
+      removeClass($el, CLASS_NAME_SHOW)
+      const isBlock = getCS($el).display === 'block'
+      if (restore) {
+        addClass($el, CLASS_NAME_SHOW)
+      }
+      return isBlock
+    },
+    clickHandler(event) {
+      const { target: el } = event
+      // If we are in a nav/navbar, close the collapse when non-disabled link clicked
+      /* istanbul ignore next: can't test `getComputedStyle()` in JSDOM */
+      if (!this.isNav || !el || getCS(this.$el).display !== 'block') {
+        return
+      }
+      // Only close the collapse if it is not forced to be `display: block !important`
+      if (
+        (matches(el, '.nav-link,.dropdown-item') || closest('.nav-link,.dropdown-item', el)) &&
+        !this.checkDisplayBlock()
+      ) {
+        this.show = false
+      }
+    },
+    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()
+      }
+    },
+    handleResize() {
+      // Handler for orientation/resize to set collapsed state in nav/navbar
+      this.show = getCS(this.$el).display === 'block'
+    }
+  },
+  render(h) {
+    const { appear } = this
+
+    const $content = h(
+      this.tag,
+      {
+        class: this.classObject,
+        directives: [{ name: 'show', value: this.show }],
+        attrs: { id: this.safeId() },
+        on: { click: this.clickHandler }
+      },
+      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]
+    )
+  }
+})

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

@@ -0,0 +1,88 @@
+// Generic collapse transion helper component
+//
+// Note:
+//   Applies the classes `collapse`, `show` and `collapsing`
+//   during the enter/leave transition phases only
+//   Although it appears that Vue may be leaving the classes
+//   in-place after the transition completes
+import { extend, mergeData } from '../../../vue'
+import { NAME_COLLAPSE_HELPER } from '../../../constants/components'
+import { PROP_TYPE_BOOLEAN } from '../../../constants/props'
+import { getBCR, reflow, removeStyle, requestAF, setStyle } from '../../../utils/dom'
+import { makeProp } from '../../../utils/props'
+
+// --- Helper methods ---
+
+// Transition event handler helpers
+const onEnter = el => {
+  setStyle(el, 'height', 0)
+  // In a `requestAF()` for `appear` to work
+  requestAF(() => {
+    reflow(el)
+    setStyle(el, 'height', `${el.scrollHeight}px`)
+  })
+}
+
+const onAfterEnter = el => {
+  removeStyle(el, 'height')
+}
+
+const onLeave = el => {
+  setStyle(el, 'height', 'auto')
+  setStyle(el, 'display', 'block')
+  setStyle(el, 'height', `${getBCR(el).height}px`)
+  reflow(el)
+  setStyle(el, 'height', 0)
+}
+
+const onAfterLeave = el => {
+  removeStyle(el, 'height')
+}
+
+// --- Constants ---
+
+// Default transition props
+// `appear` will use the enter classes
+const TRANSITION_PROPS = {
+  css: true,
+  enterClass: '',
+  enterActiveClass: 'collapsing',
+  enterToClass: 'collapse show',
+  leaveClass: 'collapse show',
+  leaveActiveClass: 'collapsing',
+  leaveToClass: 'collapse'
+}
+
+// Default transition handlers
+// `appear` will use the enter handlers
+const TRANSITION_HANDLERS = {
+  enter: onEnter,
+  afterEnter: onAfterEnter,
+  leave: onLeave,
+  afterLeave: onAfterLeave
+}
+
+// --- Main component ---
+
+export const props = {
+  // // If `true` (and `visible` is `true` on mount), animate initially visible
+  appear: makeProp(PROP_TYPE_BOOLEAN, false)
+}
+
+// --- Main component ---
+
+// @vue/component
+export const BVCollapse = /*#__PURE__*/ extend({
+  name: NAME_COLLAPSE_HELPER,
+  functional: true,
+  props,
+  render(h, { props, data, children }) {
+    return h(
+      'transition',
+      // We merge in the `appear` prop last
+      mergeData(data, { props: TRANSITION_PROPS, on: TRANSITION_HANDLERS }, { props }),
+      // Note: `<transition>` supports a single root element only
+      children
+    )
+  }
+})

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

@@ -0,0 +1,3 @@
+import { BCollapse } from './collapse'
+
+export { BCollapse }

package/src/vendor/bootstrap-vue/src/components/dropdown/_dropdown-form.scss

@@ -0,0 +1,38 @@
+$bv-dropdown-form-defined: false !default;
+
+@if $bv-dropdown-form-defined == false {
+  // This test will only include these style definitions once
+  $bv-dropdown-form-defined: true;
+
+  // Custom styles for <b-dropdown-form>
+  // Based on class `.dropdown-item`
+  .b-dropdown-form {
+    display: inline-block;
+    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+    width: 100%;
+    clear: both;
+    font-weight: $font-weight-normal;
+
+    &:focus {
+      // From https://github.com/twbs/bootstrap/blob/master/scss/_reboot.scss
+      // mimicking button:focus styling.
+      // We add important here as anything with tabindex `-1` and focused will not
+      // have a focus ring due to reboot.scss and its `!important` override.
+      // Needed for keyboard navigation high-lighting
+      outline: 1px dotted !important;
+      outline: 5px auto -webkit-focus-ring-color !important;
+    }
+
+    &.disabled,
+    &:disabled {
+      outline: 0 !important;
+      color: $dropdown-link-disabled-color;
+      pointer-events: none;
+      // background-color: transparent;
+      // Remove CSS gradients if they're enabled
+      // @if $enable-gradients {
+      //   background-image: none;
+      // }
+    }
+  }
+}

package/src/vendor/bootstrap-vue/src/components/dropdown/_dropdown-text.scss

@@ -0,0 +1,17 @@
+$bv-dropdown-text-defined: false !default;
+
+@if $bv-dropdown-text-defined == false {
+  // This test will only include these style definitions once
+  $bv-dropdown-text-defined: true;
+
+  // Custom styles for <b-dropdown-text>
+  // Based on class `.dropdown-item`
+  .b-dropdown-text {
+    display: inline-block;
+    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+    margin-bottom: 0;
+    width: 100%;
+    clear: both;
+    font-weight: $font-weight-lighter;
+  }
+}