@gitlab/duo-ui 0.1.0

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

@@ -0,0 +1,454 @@
+import { Portal, Wormhole } from 'portal-vue'
+import { COMPONENT_UID_KEY, extend } from '../../vue'
+import { NAME_TOAST, NAME_TOASTER } from '../../constants/components'
+import {
+  EVENT_NAME_CHANGE,
+  EVENT_NAME_DESTROYED,
+  EVENT_NAME_HIDDEN,
+  EVENT_NAME_HIDE,
+  EVENT_NAME_SHOW,
+  EVENT_NAME_SHOWN,
+  EVENT_OPTIONS_NO_CAPTURE
+} from '../../constants/events'
+import {
+  PROP_TYPE_ARRAY_OBJECT_STRING,
+  PROP_TYPE_BOOLEAN,
+  PROP_TYPE_NUMBER_STRING,
+  PROP_TYPE_STRING
+} from '../../constants/props'
+import { SLOT_NAME_DEFAULT, SLOT_NAME_TOAST_TITLE } from '../../constants/slots'
+import { BvEvent } from '../../utils/bv-event.class'
+import { requestAF } from '../../utils/dom'
+import { getRootActionEventName, getRootEventName, eventOnOff } from '../../utils/events'
+import { mathMax } from '../../utils/math'
+import { makeModelMixin } from '../../utils/model'
+import { toInteger } from '../../utils/number'
+import { pick, sortKeys } from '../../utils/object'
+import { makeProp, makePropsConfigurable, pluckProps } from '../../utils/props'
+import { isLink } from '../../utils/router'
+import { createNewChildComponent } from '../../utils/create-new-child-component'
+import { attrsMixin } from '../../mixins/attrs'
+import { idMixin, props as idProps } from '../../mixins/id'
+import { listenOnRootMixin } from '../../mixins/listen-on-root'
+import { normalizeSlotMixin } from '../../mixins/normalize-slot'
+import { scopedStyleMixin } from '../../mixins/scoped-style'
+import { BButtonClose } from '../button/button-close'
+import { BLink, props as BLinkProps } from '../link/link'
+import { BVTransition } from '../transition/bv-transition'
+import { BToaster } from './toaster'
+
+// --- Constants ---
+
+const {
+  mixin: modelMixin,
+  props: modelProps,
+  prop: MODEL_PROP_NAME,
+  event: MODEL_EVENT_NAME
+} = makeModelMixin('visible', {
+  type: PROP_TYPE_BOOLEAN,
+  defaultValue: false,
+  event: EVENT_NAME_CHANGE
+})
+
+const MIN_DURATION = 1000
+
+// --- Props ---
+
+const linkProps = pick(BLinkProps, ['href', 'to'])
+
+export const props = makePropsConfigurable(
+  sortKeys({
+    ...idProps,
+    ...modelProps,
+    ...linkProps,
+    appendToast: makeProp(PROP_TYPE_BOOLEAN, false),
+    autoHideDelay: makeProp(PROP_TYPE_NUMBER_STRING, 5000),
+    bodyClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
+    headerClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
+    headerTag: makeProp(PROP_TYPE_STRING, 'header'),
+    // Switches role to 'status' and aria-live to 'polite'
+    isStatus: makeProp(PROP_TYPE_BOOLEAN, false),
+    noAutoHide: makeProp(PROP_TYPE_BOOLEAN, false),
+    noCloseButton: makeProp(PROP_TYPE_BOOLEAN, false),
+    noFade: makeProp(PROP_TYPE_BOOLEAN, false),
+    noHoverPause: makeProp(PROP_TYPE_BOOLEAN, false),
+    solid: makeProp(PROP_TYPE_BOOLEAN, false),
+    // Render the toast in place, rather than in a portal-target
+    static: makeProp(PROP_TYPE_BOOLEAN, false),
+    title: makeProp(PROP_TYPE_STRING),
+    toastClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
+    toaster: makeProp(PROP_TYPE_STRING, 'b-toaster-top-right'),
+    variant: makeProp(PROP_TYPE_STRING)
+  }),
+  NAME_TOAST
+)
+
+// --- Main component ---
+
+// @vue/component
+export const BToast = /*#__PURE__*/ extend({
+  name: NAME_TOAST,
+  mixins: [
+    attrsMixin,
+    idMixin,
+    modelMixin,
+    listenOnRootMixin,
+    normalizeSlotMixin,
+    scopedStyleMixin
+  ],
+  inheritAttrs: false,
+  props,
+  data() {
+    return {
+      isMounted: false,
+      doRender: false,
+      localShow: false,
+      isTransitioning: false,
+      isHiding: false,
+      order: 0,
+      dismissStarted: 0,
+      resumeDismiss: 0
+    }
+  },
+  computed: {
+    toastClasses() {
+      const { appendToast, variant } = this
+
+      return {
+        'b-toast-solid': this.solid,
+        'b-toast-append': appendToast,
+        'b-toast-prepend': !appendToast,
+        [`b-toast-${variant}`]: variant
+      }
+    },
+    slotScope() {
+      const { hide } = this
+      return { hide }
+    },
+    computedDuration() {
+      // Minimum supported duration is 1 second
+      return mathMax(toInteger(this.autoHideDelay, 0), MIN_DURATION)
+    },
+    computedToaster() {
+      return String(this.toaster)
+    },
+    transitionHandlers() {
+      return {
+        beforeEnter: this.onBeforeEnter,
+        afterEnter: this.onAfterEnter,
+        beforeLeave: this.onBeforeLeave,
+        afterLeave: this.onAfterLeave
+      }
+    },
+    computedAttrs() {
+      return {
+        ...this.bvAttrs,
+        id: this.safeId(),
+        tabindex: '0'
+      }
+    }
+  },
+  watch: {
+    [MODEL_PROP_NAME](newValue) {
+      this[newValue ? 'show' : 'hide']()
+    },
+    localShow(newValue) {
+      if (newValue !== this[MODEL_PROP_NAME]) {
+        this.$emit(MODEL_EVENT_NAME, newValue)
+      }
+    },
+    /* istanbul ignore next */
+    toaster() {
+      // If toaster target changed, make sure toaster exists
+      this.$nextTick(this.ensureToaster)
+    },
+    /* istanbul ignore next */
+    static(newValue) {
+      // If static changes to true, and the toast is showing,
+      // ensure the toaster target exists
+      if (newValue && this.localShow) {
+        this.ensureToaster()
+      }
+    }
+  },
+  created() {
+    // Create private non-reactive props
+    this.$_dismissTimer = null
+  },
+  mounted() {
+    this.isMounted = true
+    this.$nextTick(() => {
+      if (this[MODEL_PROP_NAME]) {
+        requestAF(() => {
+          this.show()
+        })
+      }
+    })
+    // Listen for global $root show events
+    this.listenOnRoot(getRootActionEventName(NAME_TOAST, EVENT_NAME_SHOW), id => {
+      if (id === this.safeId()) {
+        this.show()
+      }
+    })
+    // Listen for global $root hide events
+    this.listenOnRoot(getRootActionEventName(NAME_TOAST, EVENT_NAME_HIDE), id => {
+      if (!id || id === this.safeId()) {
+        this.hide()
+      }
+    })
+    // Make sure we hide when toaster is destroyed
+    /* istanbul ignore next: difficult to test */
+    this.listenOnRoot(getRootEventName(NAME_TOASTER, EVENT_NAME_DESTROYED), toaster => {
+      /* istanbul ignore next */
+      if (toaster === this.computedToaster) {
+        this.hide()
+      }
+    })
+  },
+  beforeDestroy() {
+    this.clearDismissTimer()
+  },
+  methods: {
+    show() {
+      if (!this.localShow) {
+        this.ensureToaster()
+        const showEvent = this.buildEvent(EVENT_NAME_SHOW)
+        this.emitEvent(showEvent)
+        this.dismissStarted = this.resumeDismiss = 0
+        this.order = Date.now() * (this.appendToast ? 1 : -1)
+        this.isHiding = false
+        this.doRender = true
+        this.$nextTick(() => {
+          // We show the toast after we have rendered the portal and b-toast wrapper
+          // so that screen readers will properly announce the toast
+          requestAF(() => {
+            this.localShow = true
+          })
+        })
+      }
+    },
+    hide() {
+      if (this.localShow) {
+        const hideEvent = this.buildEvent(EVENT_NAME_HIDE)
+        this.emitEvent(hideEvent)
+        this.setHoverHandler(false)
+        this.dismissStarted = this.resumeDismiss = 0
+        this.clearDismissTimer()
+        this.isHiding = true
+        requestAF(() => {
+          this.localShow = false
+        })
+      }
+    },
+    buildEvent(type, options = {}) {
+      return new BvEvent(type, {
+        cancelable: false,
+        target: this.$el || null,
+        relatedTarget: null,
+        ...options,
+        vueTarget: this,
+        componentId: this.safeId()
+      })
+    },
+    emitEvent(bvEvent) {
+      const { type } = bvEvent
+      this.emitOnRoot(getRootEventName(NAME_TOAST, type), bvEvent)
+      this.$emit(type, bvEvent)
+    },
+    ensureToaster() {
+      if (this.static) {
+        return
+      }
+
+      const { computedToaster } = this
+      if (!Wormhole.hasTarget(computedToaster)) {
+        const div = document.createElement('div')
+        document.body.appendChild(div)
+
+        const toaster = createNewChildComponent(this.bvEventRoot, BToaster, {
+          propsData: { name: computedToaster }
+        })
+
+        toaster.$mount(div)
+      }
+    },
+    startDismissTimer() {
+      this.clearDismissTimer()
+      if (!this.noAutoHide) {
+        this.$_dismissTimer = setTimeout(this.hide, this.resumeDismiss || this.computedDuration)
+        this.dismissStarted = Date.now()
+        this.resumeDismiss = 0
+      }
+    },
+    clearDismissTimer() {
+      clearTimeout(this.$_dismissTimer)
+      this.$_dismissTimer = null
+    },
+    setHoverHandler(on) {
+      const el = this.$refs['b-toast']
+      eventOnOff(on, el, 'mouseenter', this.onPause, EVENT_OPTIONS_NO_CAPTURE)
+      eventOnOff(on, el, 'mouseleave', this.onUnPause, EVENT_OPTIONS_NO_CAPTURE)
+    },
+    onPause() {
+      // Determine time remaining, and then pause timer
+      if (this.noAutoHide || this.noHoverPause || !this.$_dismissTimer || this.resumeDismiss) {
+        return
+      }
+      const passed = Date.now() - this.dismissStarted
+      if (passed > 0) {
+        this.clearDismissTimer()
+        this.resumeDismiss = mathMax(this.computedDuration - passed, MIN_DURATION)
+      }
+    },
+    onUnPause() {
+      // Restart timer with max of time remaining or 1 second
+      if (this.noAutoHide || this.noHoverPause || !this.resumeDismiss) {
+        this.resumeDismiss = this.dismissStarted = 0
+        return
+      }
+      this.startDismissTimer()
+    },
+    onLinkClick() {
+      // We delay the close to allow time for the
+      // browser to process the link click
+      this.$nextTick(() => {
+        requestAF(() => {
+          this.hide()
+        })
+      })
+    },
+    onBeforeEnter() {
+      this.isTransitioning = true
+    },
+    onAfterEnter() {
+      this.isTransitioning = false
+      const hiddenEvent = this.buildEvent(EVENT_NAME_SHOWN)
+      this.emitEvent(hiddenEvent)
+      this.startDismissTimer()
+      this.setHoverHandler(true)
+    },
+    onBeforeLeave() {
+      this.isTransitioning = true
+    },
+    onAfterLeave() {
+      this.isTransitioning = false
+      this.order = 0
+      this.resumeDismiss = this.dismissStarted = 0
+      const hiddenEvent = this.buildEvent(EVENT_NAME_HIDDEN)
+      this.emitEvent(hiddenEvent)
+      this.doRender = false
+    },
+    // Render helper for generating the toast
+    makeToast(h) {
+      const { title, slotScope } = this
+      const link = isLink(this)
+      const $headerContent = []
+
+      const $title = this.normalizeSlot(SLOT_NAME_TOAST_TITLE, slotScope)
+      if ($title) {
+        $headerContent.push($title)
+      } else if (title) {
+        $headerContent.push(h('strong', { staticClass: 'mr-2' }, title))
+      }
+
+      if (!this.noCloseButton) {
+        $headerContent.push(
+          h(BButtonClose, {
+            staticClass: 'ml-auto mb-1',
+            on: {
+              click: () => {
+                this.hide()
+              }
+            }
+          })
+        )
+      }
+
+      let $header = h()
+      if ($headerContent.length > 0) {
+        $header = h(
+          this.headerTag,
+          {
+            staticClass: 'toast-header',
+            class: this.headerClass
+          },
+          $headerContent
+        )
+      }
+
+      const $body = h(
+        link ? BLink : 'div',
+        {
+          staticClass: 'toast-body',
+          class: this.bodyClass,
+          props: link ? pluckProps(linkProps, this) : {},
+          on: link ? { click: this.onLinkClick } : {}
+        },
+        this.normalizeSlot(SLOT_NAME_DEFAULT, slotScope)
+      )
+
+      return h(
+        'div',
+        {
+          staticClass: 'toast',
+          class: this.toastClass,
+          attrs: this.computedAttrs,
+          key: `toast-${this[COMPONENT_UID_KEY]}`,
+          ref: 'toast'
+        },
+        [$header, $body]
+      )
+    }
+  },
+  render(h) {
+    if (!this.doRender || !this.isMounted) {
+      return h()
+    }
+
+    const { order, static: isStatic, isHiding, isStatus } = this
+    const name = `b-toast-${this[COMPONENT_UID_KEY]}`
+
+    const $toast = h(
+      'div',
+      {
+        staticClass: 'b-toast',
+        class: this.toastClasses,
+        attrs: {
+          // If scoped styles are applied and the toast is not static,
+          // make sure the scoped style data attribute is applied
+          ...(isStatic ? {} : this.scopedStyleAttrs),
+          id: this.safeId('_toast_outer'),
+          role: isHiding ? null : isStatus ? 'status' : 'alert',
+          'aria-live': isHiding ? null : isStatus ? 'polite' : 'assertive',
+          'aria-atomic': isHiding ? null : 'true'
+        },
+        key: name,
+        ref: 'b-toast'
+      },
+      [
+        h(
+          BVTransition,
+          {
+            props: { noFade: this.noFade },
+            on: this.transitionHandlers
+          },
+          [this.localShow ? this.makeToast(h) : h()]
+        )
+      ]
+    )
+
+    return h(
+      Portal,
+      {
+        props: {
+          name,
+          to: this.computedToaster,
+          order,
+          slim: true,
+          disabled: isStatic
+        }
+      },
+      [$toast]
+    )
+  }
+})

package/src/vendor/bootstrap-vue/src/components/toast/toaster.js

@@ -0,0 +1,139 @@
+import { PortalTarget, Wormhole } from 'portal-vue'
+import { extend } from '../../vue'
+import { NAME_TOASTER } from '../../constants/components'
+import { EVENT_NAME_DESTROYED } from '../../constants/events'
+import { PROP_TYPE_STRING } from '../../constants/props'
+import { removeClass, requestAF } from '../../utils/dom'
+import { getRootEventName } from '../../utils/events'
+import { makeProp, makePropsConfigurable } from '../../utils/props'
+import { warn } from '../../utils/warn'
+import { listenOnRootMixin } from '../../mixins/listen-on-root'
+import { normalizeSlotMixin } from '../../mixins/normalize-slot'
+
+// --- Helper components ---
+
+// @vue/component
+export const DefaultTransition = /*#__PURE__*/ extend({
+  mixins: [normalizeSlotMixin],
+  data() {
+    return {
+      // Transition classes base name
+      name: 'b-toaster'
+    }
+  },
+  methods: {
+    onAfterEnter(el) {
+      // Work around a Vue.js bug where `*-enter-to` class is not removed
+      // See: https://github.com/vuejs/vue/pull/7901
+      // The `*-move` class is also stuck on elements that moved,
+      // but there are no JavaScript hooks to handle after move
+      // See: https://github.com/vuejs/vue/pull/7906
+      requestAF(() => {
+        removeClass(el, `${this.name}-enter-to`)
+      })
+    }
+  },
+  render(h) {
+    return h(
+      'transition-group',
+      {
+        props: { tag: 'div', name: this.name },
+        on: { afterEnter: this.onAfterEnter }
+      },
+      this.normalizeSlot()
+    )
+  }
+})
+
+// --- Props ---
+
+export const props = makePropsConfigurable(
+  {
+    // Allowed: 'true' or 'false' or `null`
+    ariaAtomic: makeProp(PROP_TYPE_STRING),
+    ariaLive: makeProp(PROP_TYPE_STRING),
+    name: makeProp(PROP_TYPE_STRING, undefined, true), // Required
+    // Aria role
+    role: makeProp(PROP_TYPE_STRING)
+  },
+  NAME_TOASTER
+)
+
+// --- Main component ---
+
+// @vue/component
+export const BToaster = /*#__PURE__*/ extend({
+  name: NAME_TOASTER,
+  mixins: [listenOnRootMixin],
+  props,
+  data() {
+    return {
+      // We don't render on SSR or if a an existing target found
+      doRender: false,
+      dead: false,
+      // Toaster names cannot change once created
+      staticName: this.name
+    }
+  },
+  beforeMount() {
+    const { name } = this
+    this.staticName = name
+
+    /* istanbul ignore if */
+    if (Wormhole.hasTarget(name)) {
+      warn(`A "<portal-target>" with name "${name}" already exists in the document.`, NAME_TOASTER)
+      this.dead = true
+    } else {
+      this.doRender = true
+    }
+  },
+  beforeDestroy() {
+    // Let toasts made with `this.$bvToast.toast()` know that this toaster
+    // is being destroyed and should should also destroy/hide themselves
+    if (this.doRender) {
+      this.emitOnRoot(getRootEventName(NAME_TOASTER, EVENT_NAME_DESTROYED), this.name)
+    }
+  },
+  destroyed() {
+    // Remove from DOM if needed
+    const { $el } = this
+    /* istanbul ignore next: difficult to test */
+    if ($el && $el.parentNode) {
+      $el.parentNode.removeChild($el)
+    }
+  },
+  render(h) {
+    let $toaster = h('div', { class: ['d-none', { 'b-dead-toaster': this.dead }] })
+    if (this.doRender) {
+      const $target = h(PortalTarget, {
+        staticClass: 'b-toaster-slot',
+        props: {
+          name: this.staticName,
+          multiple: true,
+          tag: 'div',
+          slim: false,
+          // transition: this.transition || DefaultTransition
+          transition: DefaultTransition
+        }
+      })
+
+      $toaster = h(
+        'div',
+        {
+          staticClass: 'b-toaster',
+          class: [this.staticName],
+          attrs: {
+            id: this.staticName,
+            // Fallback to null to make sure attribute doesn't exist
+            role: this.role || null,
+            'aria-live': this.ariaLive,
+            'aria-atomic': this.ariaAtomic
+          }
+        },
+        [$target]
+      )
+    }
+
+    return $toaster
+  }
+})

package/src/vendor/bootstrap-vue/src/components/tooltip/_tooltip.scss

@@ -0,0 +1,86 @@
+// Some overrides to make tooltip transitions work with Vue `<transition>`
+.tooltip.b-tooltip {
+  display: block;
+  opacity: $tooltip-opacity;
+  // Needed due to Bootstrap v4.4 reboot.css changes
+  outline: 0;
+
+  &.fade:not(.show) {
+    opacity: 0;
+  }
+
+  &.show {
+    opacity: $tooltip-opacity;
+  }
+
+  // Disabled pointer events when in 'noninteractive' mode to hide
+  // the tooltip when the user hovers over its content
+  &.noninteractive {
+    pointer-events: none;
+  }
+
+  .arrow {
+    margin: 0 $tooltip-border-radius;
+  }
+
+  &.bs-tooltip-right,
+  &.bs-tooltip-left {
+    .arrow {
+      margin: $tooltip-border-radius 0;
+    }
+  }
+}
+
+// Create custom variants for tooltips
+@if $bv-enable-tooltip-variants {
+  @each $variant, $value in $theme-colors {
+    .tooltip.b-tooltip-#{$variant} {
+      $tip-bg-color: theme-color-level($variant, $b-tooltip-bg-level);
+      $tip-text-color: color-yiq($tip-bg-color);
+
+      &.bs-tooltip-top {
+        .arrow::before {
+          border-top-color: $tip-bg-color;
+        }
+      }
+
+      &.bs-tooltip-right {
+        .arrow::before {
+          border-right-color: $tip-bg-color;
+        }
+      }
+
+      &.bs-tooltip-bottom {
+        .arrow::before {
+          border-bottom-color: $tip-bg-color;
+        }
+      }
+
+      &.bs-tooltip-left {
+        .arrow::before {
+          border-left-color: $tip-bg-color;
+        }
+      }
+
+      &.bs-tooltip-auto {
+        &[x-placement^="top"] {
+          @extend .bs-tooltip-top;
+        }
+        &[x-placement^="right"] {
+          @extend .bs-tooltip-right;
+        }
+        &[x-placement^="bottom"] {
+          @extend .bs-tooltip-bottom;
+        }
+        &[x-placement^="left"] {
+          @extend .bs-tooltip-left;
+        }
+      }
+
+      .tooltip-inner {
+        color: $tip-text-color;
+        background-color: $tip-bg-color;
+      }
+    }
+  }
+}