@gitlab/ui 84.2.0 → 85.0.0

package/src/vendor/bootstrap-vue/src/components/toast/_toast.scss

@@ -0,0 +1,79 @@
+// --- <b-toast> custom SCSS ---
+
+// Toast wrapper element class (needed for list transition in toasters)
+.b-toast {
+  display: block;
+  position: relative;
+  max-width: $toast-max-width;
+  backface-visibility: hidden;
+  background-clip: padding-box;
+
+  z-index: 1;
+  @include border-radius($toast-border-radius);
+
+  .toast {
+    // Allow us to override Bootstrap's default toast opacity
+    // As they do not provide it as a variable
+    background-color: rgba($toast-background-color, $b-toast-background-opacity);
+  }
+
+  &:not(:last-child) {
+    margin-bottom: $toast-padding-x;
+  }
+
+  &.b-toast-solid {
+    .toast {
+      background-color: rgba($toast-background-color, 1);
+    }
+  }
+
+  .toast {
+    // Override default Bootstrap v4.x opacity of 0
+    // Needed for re-usable fade transition
+    opacity: 1;
+
+    &.fade:not(.show) {
+      opacity: 0;
+    }
+
+    .toast-body {
+      display: block; // Needed when we use a link as the body element
+    }
+  }
+}
+
+@mixin b-toast-variant($background, $border, $color) {
+  // Based on alert-variant mixin
+  .toast {
+    background-color: rgba(lighten($background, 5%), $b-toast-background-opacity);
+    border-color: rgba($border, $b-toast-background-opacity);
+    color: $color;
+
+    .toast-header {
+      color: $color;
+      background-color: rgba($background, $b-toast-background-opacity);
+      border-bottom-color: rgba($border, $b-toast-background-opacity);
+    }
+
+    // .toast-body[href] {
+    //   color: darken($color, 10%);
+    // }
+  }
+
+  &.b-toast-solid {
+    .toast {
+      background-color: rgba(lighten($background, 5%), 1);
+    }
+  }
+}
+
+// Toast variants
+@each $color, $value in $theme-colors {
+  .b-toast-#{$color} {
+    @include b-toast-variant(
+      theme-color-level($color, $b-toast-bg-level),
+      theme-color-level($color, $b-toast-border-level),
+      theme-color-level($color, $b-toast-color-level)
+    );
+  }
+}

package/src/vendor/bootstrap-vue/src/components/toast/_toaster-transition.scss

@@ -0,0 +1,45 @@
+// --- <b-toast> custom transition SCSS ---
+
+// PortalVue appears to have issues with transition classes on portaled items
+
+.b-toaster {
+  &.b-toaster-top-right,
+  &.b-toaster-top-left,
+  &.b-toaster-bottom-right,
+  &.b-toaster-bottom-left {
+    .b-toast {
+      &.b-toaster-enter-active,
+      &.b-toaster-leave-active,
+      &.b-toaster-move {
+        transition: transform 0.175s;
+      }
+
+      &.b-toaster-enter {
+      }
+
+      &.b-toaster-enter-to,
+      &.b-toaster-enter-active {
+        .toast.fade {
+          // Delay the appearance of the toast until
+          // the move transition has completed
+          transition-delay: 0.175s;
+        }
+      }
+
+      &.b-toaster-enter-to {
+      }
+
+      &.b-toaster-leave-active {
+        position: absolute;
+        transition-delay: 0.175s;
+
+        .toast.fade {
+          transition-delay: 0s;
+        }
+      }
+
+      &.b-toaster-leave-to {
+      }
+    }
+  }
+}

package/src/vendor/bootstrap-vue/src/components/toast/_toaster.scss

@@ -0,0 +1,108 @@
+// --- <b-toaster> custom SCSS ---
+
+// Base toaster styling
+.b-toaster {
+  z-index: $b-toaster-zindex;
+
+  .b-toaster-slot {
+    position: relative;
+    display: block;
+
+    &:empty {
+      display: none !important;
+    }
+  }
+}
+
+// Built-in toaster styling
+//  - b-toaster-top-right
+//  - b-toaster-top-left
+//  - b-toaster-top-center
+//  - b-toaster-top-full
+//  - b-toaster-bottom-right
+//  - b-toaster-bottom-left
+//  - b-toaster-bottom-center
+//  - b-toaster-bottom-full
+.b-toaster {
+  &.b-toaster-top-right,
+  &.b-toaster-top-left,
+  &.b-toaster-top-center,
+  &.b-toaster-top-full,
+  &.b-toaster-bottom-right,
+  &.b-toaster-bottom-left,
+  &.b-toaster-bottom-center,
+  &.b-toaster-bottom-full {
+    position: fixed;
+    left: $b-toaster-offset-left;
+    right: $b-toaster-offset-right;
+    margin: 0;
+    padding: 0;
+    height: 0;
+    overflow: visible;
+
+    .b-toaster-slot {
+      position: absolute;
+      max-width: $toast-max-width;
+      width: 100%; /* IE 11 fix */
+      left: 0;
+      right: 0;
+      padding: 0;
+      margin: 0;
+    }
+  }
+
+  &.b-toaster-top-full,
+  &.b-toaster-bottom-full {
+    .b-toaster-slot {
+      width: 100%;
+      max-width: 100%;
+
+      .b-toast,
+      .toast {
+        // Override Bootstrap toast max-width
+        width: 100%;
+        max-width: 100%;
+      }
+    }
+  }
+
+  &.b-toaster-top-right,
+  &.b-toaster-top-left,
+  &.b-toaster-top-center,
+  &.b-toaster-top-full {
+    top: 0;
+
+    .b-toaster-slot {
+      top: $b-toaster-offset-top;
+    }
+  }
+
+  &.b-toaster-bottom-right,
+  &.b-toaster-bottom-left,
+  &.b-toaster-bottom-center,
+  &.b-toaster-bottom-full {
+    bottom: 0;
+
+    .b-toaster-slot {
+      bottom: $b-toaster-offset-bottom;
+    }
+  }
+
+  &.b-toaster-top-right,
+  &.b-toaster-bottom-right,
+  &.b-toaster-top-center,
+  &.b-toaster-bottom-center {
+    .b-toaster-slot {
+      margin-left: auto;
+    }
+  }
+
+  &.b-toaster-top-left,
+  &.b-toaster-bottom-left,
+  &.b-toaster-top-center,
+  &.b-toaster-bottom-center {
+    .b-toaster-slot {
+      margin-right: auto;
+    }
+  }
+}

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

@@ -0,0 +1,208 @@
+/**
+ * Plugin for adding `$bvToast` property to all Vue instances
+ */
+
+import { NAME_TOAST, NAME_TOASTER, NAME_TOAST_POP } from '../../../constants/components'
+import {
+  EVENT_NAME_DESTROYED,
+  EVENT_NAME_HIDDEN,
+  EVENT_NAME_HIDE,
+  EVENT_NAME_SHOW,
+  HOOK_EVENT_NAME_DESTROYED
+} from '../../../constants/events'
+import { useParentMixin } from '../../../mixins/use-parent'
+import { concat } from '../../../utils/array'
+import { getComponentConfig } from '../../../utils/config'
+import { requestAF } from '../../../utils/dom'
+import { getRootEventName, getRootActionEventName } from '../../../utils/events'
+import { isUndefined, isString } from '../../../utils/inspect'
+import {
+  assign,
+  defineProperties,
+  defineProperty,
+  hasOwnProperty,
+  keys,
+  omit,
+  readonlyDescriptor
+} from '../../../utils/object'
+import { pluginFactory } from '../../../utils/plugins'
+import { warn, warnNotClient } from '../../../utils/warn'
+import { createNewChildComponent } from '../../../utils/create-new-child-component'
+import { getEventRoot } from '../../../utils/get-event-root'
+import { BToast, props as toastProps } from '../toast'
+
+// --- Constants ---
+
+const PROP_NAME = '$bvToast'
+const PROP_NAME_PRIV = '_bv__toast'
+
+// Base toast props that are allowed
+// Some may be ignored or overridden on some message boxes
+// Prop ID is allowed, but really only should be used for testing
+// We need to add it in explicitly as it comes from the `idMixin`
+const BASE_PROPS = ['id', ...keys(omit(toastProps, ['static', 'visible']))]
+
+// Map prop names to toast slot names
+const propsToSlots = {
+  toastContent: 'default',
+  title: 'toast-title'
+}
+
+// --- Helper methods ---
+
+// Method to filter only recognized props that are not undefined
+const filterOptions = options => {
+  return BASE_PROPS.reduce((memo, key) => {
+    if (!isUndefined(options[key])) {
+      memo[key] = options[key]
+    }
+    return memo
+  }, {})
+}
+
+// Method to install `$bvToast` VM injection
+const plugin = Vue => {
+  // Create a private sub-component constructor that
+  // extends BToast and self-destructs after hidden
+  // @vue/component
+  const BVToastPop = Vue.extend({
+    name: NAME_TOAST_POP,
+    extends: BToast,
+    mixins: [useParentMixin],
+    destroyed() {
+      // Make sure we not in document any more
+      const { $el } = this
+      if ($el && $el.parentNode) {
+        $el.parentNode.removeChild($el)
+      }
+    },
+    mounted() {
+      // Self destruct handler
+      const handleDestroy = () => {
+        // Ensure the toast has been force hidden
+        this.localShow = false
+        this.doRender = false
+        this.$nextTick(() => {
+          this.$nextTick(() => {
+            // In a `requestAF()` to release control back to application
+            // and to allow the portal-target time to remove the content
+            requestAF(() => {
+              this.$destroy()
+            })
+          })
+        })
+      }
+      // Self destruct if parent destroyed
+      this.bvParent.$once(HOOK_EVENT_NAME_DESTROYED, handleDestroy)
+      // Self destruct after hidden
+      this.$once(EVENT_NAME_HIDDEN, handleDestroy)
+      // Self destruct when toaster is destroyed
+      this.listenOnRoot(getRootEventName(NAME_TOASTER, EVENT_NAME_DESTROYED), toaster => {
+        /* istanbul ignore next: hard to test */
+        if (toaster === this.toaster) {
+          handleDestroy()
+        }
+      })
+    }
+  })
+
+  // Private method to generate the on-demand toast
+  const makeToast = (props, parent) => {
+    if (warnNotClient(PROP_NAME)) {
+      /* istanbul ignore next */
+      return
+    }
+    // Create an instance of `BVToastPop` component
+    const toast = createNewChildComponent(parent, BVToastPop, {
+      // We set parent as the local VM so these toasts can emit events on the
+      // app `$root`, and it ensures `BToast` is destroyed when parent is destroyed
+      propsData: {
+        ...filterOptions(getComponentConfig(NAME_TOAST)),
+        // Add in (filtered) user supplied props
+        ...omit(props, keys(propsToSlots)),
+        // Props that can't be overridden
+        static: false,
+        visible: true
+      }
+    })
+    // Convert certain props to slots
+    keys(propsToSlots).forEach(prop => {
+      let value = props[prop]
+      if (!isUndefined(value)) {
+        // Can be a string, or array of VNodes
+        if (prop === 'title' && isString(value)) {
+          // Special case for title if it is a string, we wrap in a <strong>
+          value = [parent.$createElement('strong', { class: 'mr-2' }, value)]
+        }
+        toast.$slots[propsToSlots[prop]] = concat(value)
+      }
+    })
+    // Create a mount point (a DIV) and mount it (which triggers the show)
+    const div = document.createElement('div')
+    document.body.appendChild(div)
+    toast.$mount(div)
+  }
+
+  // Declare BvToast instance property class
+  class BvToast {
+    constructor(vm) {
+      // Assign the new properties to this instance
+      assign(this, { _vm: vm, _root: getEventRoot(vm) })
+      // Set these properties as read-only and non-enumerable
+      defineProperties(this, {
+        _vm: readonlyDescriptor(),
+        _root: readonlyDescriptor()
+      })
+    }
+
+    // --- Public Instance methods ---
+
+    // Opens a user defined toast and returns immediately
+    toast(content, options = {}) {
+      if (!content || warnNotClient(PROP_NAME)) {
+        /* istanbul ignore next */
+        return
+      }
+      makeToast({ ...filterOptions(options), toastContent: content }, this._vm)
+    }
+
+    // shows a `<b-toast>` component with the specified ID
+    show(id) {
+      if (id) {
+        this._root.$emit(getRootActionEventName(NAME_TOAST, EVENT_NAME_SHOW), id)
+      }
+    }
+
+    // Hide a toast with specified ID, or if not ID all toasts
+    hide(id = null) {
+      this._root.$emit(getRootActionEventName(NAME_TOAST, EVENT_NAME_HIDE), id)
+    }
+  }
+
+  // Add our instance mixin
+  Vue.mixin({
+    beforeCreate() {
+      // Because we need access to `$root` for `$emits`, and VM for parenting,
+      // we have to create a fresh instance of `BvToast` for each VM
+      this[PROP_NAME_PRIV] = new BvToast(this)
+    }
+  })
+
+  // Define our read-only `$bvToast` instance property
+  // Placed in an if just in case in HMR mode
+  if (!hasOwnProperty(Vue.prototype, PROP_NAME)) {
+    defineProperty(Vue.prototype, PROP_NAME, {
+      get() {
+        /* istanbul ignore next */
+        if (!this || !this[PROP_NAME_PRIV]) {
+          warn(`"${PROP_NAME}" must be accessed from a Vue instance "this" context.`, NAME_TOAST)
+        }
+        return this[PROP_NAME_PRIV]
+      }
+    })
+  }
+}
+
+export const BVToastPlugin = /*#__PURE__*/ pluginFactory({
+  plugins: { plugin }
+})

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

@@ -0,0 +1,131 @@
+import { createWrapper, mount } from '@vue/test-utils'
+import { Vue } from '../../../vue'
+import { waitNT, waitRAF } from '../../../../tests/utils'
+import { ToastPlugin } from '../index'
+
+Vue.use(ToastPlugin)
+
+describe('$bvToast', () => {
+  it('$bvToast.show() and $bvToast.hide() works', async () => {
+    const App = {
+      render(h) {
+        return h(
+          'b-toast',
+          {
+            props: {
+              id: 'test1',
+              static: true,
+              visible: false,
+              noAutoHide: true
+            }
+          },
+          'content'
+        )
+      }
+    }
+    const wrapper = mount(App, {
+      attachTo: document.body
+    })
+
+    expect(wrapper.vm).toBeDefined()
+
+    await waitNT(wrapper.vm)
+    await waitRAF()
+    await waitNT(wrapper.vm)
+    await waitRAF()
+
+    expect(wrapper.vm.$bvToast).toBeDefined()
+    expect(wrapper.vm.$bvToast.show).toBeDefined()
+    expect(typeof wrapper.vm.$bvToast.show).toEqual('function')
+    expect(wrapper.vm.$bvToast.hide).toBeDefined()
+    expect(typeof wrapper.vm.$bvToast.hide).toEqual('function')
+
+    expect(wrapper.find('.toast').exists()).toBe(false)
+
+    wrapper.vm.$bvToast.show('test1')
+
+    await waitNT(wrapper.vm)
+    await waitRAF()
+    await waitNT(wrapper.vm)
+    await waitRAF()
+    await waitNT(wrapper.vm)
+    await waitRAF()
+
+    expect(wrapper.find('.toast').exists()).toBe(true)
+
+    wrapper.vm.$bvToast.hide('test1')
+
+    await waitNT(wrapper.vm)
+    await waitRAF()
+    await waitNT(wrapper.vm)
+    await waitRAF()
+    await waitNT(wrapper.vm)
+    await waitRAF()
+
+    expect(wrapper.find('.toast').exists()).toBe(false)
+
+    wrapper.destroy()
+  })
+
+  it('$bvModal.toast() works', async () => {
+    const App = {
+      render(h) {
+        return h('div', 'app')
+      }
+    }
+    const wrapper = mount(App, {
+      attachTo: document.body
+    })
+
+    expect(wrapper.vm).toBeDefined()
+
+    // `$bvModal.toast`
+    expect(wrapper.vm.$bvToast).toBeDefined()
+    const bvToast = wrapper.vm.$bvToast
+    expect(bvToast.toast).toBeDefined()
+    expect(typeof bvToast.toast).toEqual('function')
+
+    // Trigger a toast
+    bvToast.toast('message', {
+      id: 'test2',
+      title: 'title',
+      noAutoHide: true
+    })
+
+    await waitNT(wrapper.vm)
+    await waitRAF()
+    await waitNT(wrapper.vm)
+    await waitRAF()
+    await waitNT(wrapper.vm)
+    await waitRAF()
+
+    // Find the toast
+    const toast = document.querySelector('#test2')
+    expect(toast).toBeDefined()
+    expect(toast).not.toEqual(null)
+    const $toast = createWrapper(toast)
+    expect($toast.element.tagName).toBe('DIV')
+
+    // Find  header
+    expect($toast.find('.toast-header').exists()).toBe(true)
+    expect($toast.find('.toast-header').text()).toContain('title')
+
+    // Find body
+    expect($toast.find('.toast-body').exists()).toBe(true)
+    expect($toast.find('.toast-body').text()).toContain('message')
+
+    // Find the Close button and click it
+    expect($toast.findAll('button').length).toBe(1)
+    const $button = $toast.find('button')
+    expect($button.classes()).toContain('close')
+
+    await $button.trigger('click')
+    await waitRAF()
+    await waitRAF()
+    await waitRAF()
+    await waitRAF()
+
+    // Toast should be gone from DOM
+    expect(document.querySelector('#test2')).toBe(null)
+  })
+})

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

@@ -0,0 +1,70 @@
+//
+// Toast
+//
+import Vue, { VNode } from 'vue'
+import { BvPlugin, BvComponent } from '../../'
+
+// Toast Plugin
+export declare const ToastPlugin: BvPlugin
+
+// Component: b-toast
+export declare class BToast extends BvComponent {
+  show: () => void
+  hide: () => void
+}
+
+// Component: b-toaster
+export declare class BToaster extends BvComponent {}
+
+//
+// Interfaces
+//
+export interface BvToastOptions {
+  // Commonly used props
+  toaster?: string
+  title?: string | VNode | Array<VNode>
+  variant?: string
+  solid?: boolean
+  noAutoHide?: boolean
+  noHoverPause?: boolean
+  autoHideDelay?: number
+  noCloseButton?: boolean
+  appendToast?: boolean
+  isStatus?: boolean
+  noFade?: boolean
+  toastClass?: string | string[] | Array<any> | object | any
+  headerClass?: string | string[] | Array<any> | object | any
+  bodyClass?: string | string[] | Array<any> | object | any
+  href?: string
+  to?: string | object | any
+  // Catch all
+  [key: string]: any
+}
+
+export interface BvToastShortcutMethod {
+  (message: string | VNode | Array<VNode>, options?: BvToastOptions): void
+  // Future
+  // (options?: BvToastOptions): void
+  // (message: string | VNode | Array<VNode>, title: string | VNode | Array<VNode>, options?: BvToastOptions): void
+}
+
+export interface BvToast {
+  // Show a toast
+  toast: BvToastShortcutMethod
+
+  // Show a toast by id
+  show: (id: string) => void
+
+  // Hide a toast by id (or hide all tosts)
+  hide: (id?: string) => void
+}
+
+//
+// Vue Prototype Injections
+//
+declare module 'vue/types/vue' {
+  interface Vue {
+    // Toast injection
+    readonly $bvToast: BvToast
+  }
+}

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

@@ -0,0 +1,12 @@
+import { BVToastPlugin } from './helpers/bv-toast'
+import { BToast } from './toast'
+import { BToaster } from './toaster'
+import { pluginFactory } from '../../utils/plugins'
+
+const ToastPlugin = /*#__PURE__*/ pluginFactory({
+  components: { BToast, BToaster },
+  // $bvToast injection
+  plugins: { BVToastPlugin }
+})
+
+export { ToastPlugin, BToast, BToaster }

package/src/vendor/bootstrap-vue/src/components/toast/index.scss

@@ -0,0 +1,3 @@
+@import "toast";
+@import "toaster";
+@import "toaster-transition";