@gitlab/ui 130.1.1 → 131.0.0

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

@@ -1,142 +0,0 @@
-import { Wormhole, PortalTarget } 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 { requestAF, removeClass } from '../../utils/dom';
-import { getRootEventName } from '../../utils/events';
-import { makeProp } 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
-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 ---
-
-const props = {
-  // 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)
-};
-
-// --- Main component ---
-
-// @vue/component
-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: ['gl-hidden', {
-        '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;
-  }
-});
-
-export { BToaster, DefaultTransition, props };

package/src/components/base/toast/toast.js

@@ -1,102 +0,0 @@
-/* eslint-disable import/no-default-export */
-import { isFunction } from 'lodash-es';
-// eslint-disable-next-line no-restricted-imports
-import { ToastPlugin } from '../../../vendor/bootstrap-vue/src/components/toast/index';
-import CloseButton from '../../shared_components/close_button/close_button.vue';
-
-const DEFAULT_OPTIONS = {
-  autoHideDelay: 5000,
-  toastClass: 'gl-toast',
-  isStatus: true,
-  toaster: 'b-toaster-bottom-left',
-  appendToast: true,
-};
-
-let toastsCount = 0;
-
-function renderTitle(toast, options) {
-  return (h) => {
-    const nodes = [
-      h(CloseButton, {
-        class: ['gl-toast-close-button'],
-        on: {
-          click: toast.hide,
-        },
-      }),
-    ];
-    if (options.action) {
-      const { onClick, text, href } = options.action;
-      nodes.unshift(
-        h(
-          'a',
-          {
-            attrs: {
-              role: href ? undefined : 'button',
-              href,
-            },
-            class: ['gl-toast-action'],
-            on: {
-              click: (e) => onClick(e, toast),
-            },
-          },
-          text,
-        ),
-      );
-    }
-    return nodes;
-  };
-}
-
-function showToast(message, options = {}) {
-  // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
-  const id = `gl-toast-${toastsCount}`;
-  toastsCount += 1;
-  const hide = () => {
-    this.$bvToast.hide(id);
-  };
-  const toast = { id, hide };
-
-  if (isFunction(options.onComplete)) {
-    const toastHiddenCallback = (e) => {
-      if (e.componentId === id) {
-        this.$root.$off('bv::toast:hidden', toastHiddenCallback);
-        options.onComplete(e);
-      }
-    };
-
-    this.$root.$on('bv::toast:hidden', toastHiddenCallback);
-  }
-
-  const updatedAutoHideDelay = !Number.isNaN(options?.autoHideDelay)
-    ? { autoHideDelay: options.autoHideDelay }
-    : null;
-
-  this.$bvToast.toast(message, {
-    ...DEFAULT_OPTIONS,
-    ...updatedAutoHideDelay,
-    id,
-    title: renderTitle(toast, options),
-  });
-  return toast;
-}
-
-/**
- * Note: This is not a typical Vue component and needs to be registered before instantiating a Vue app.
- * Once registered, the toast will be globally available throughout your app.
- *
- * See https://design.gitlab.com/storybook for detailed documentation.
- */
-export default {
-  install(Vue) {
-    Vue.use(ToastPlugin);
-
-    Vue.mixin({
-      beforeCreate() {
-        if (this.$toast) {
-          return;
-        }
-        this.$toast = { show: showToast.bind(this) };
-      },
-    });
-  },
-};

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

@@ -1,77 +0,0 @@
-@use 'sass:color';
-
-// --- <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);
-  }
-
-  &.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(color.adjust($background, $lightness: 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(color.adjust($background, $lightness: 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.scss

@@ -1,108 +0,0 @@
-// --- <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

@@ -1,231 +0,0 @@
-/**
- * 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_HIDE, EVENT_NAME_SHOW } from '../../../constants/events'
-import { onInstanceDestroy } from '../../../utils/on-instance-destroy'
-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, isFunction } 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 { isVue3 } from '../../../vue'
-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 (stored as instance property for use in onAfterLeave)
-      this.$_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
-      onInstanceDestroy(this.bvParent, this.$_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) {
-          this.$_handleDestroy()
-        }
-      })
-    },
-    methods: {
-      // Override parent's onAfterLeave to self-destruct after hidden
-      onAfterLeave() {
-        // Call parent's implementation
-        BToast.options.methods.onAfterLeave.call(this)
-        // Self destruct after hidden
-        this.$_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)) {
-        if (isVue3(toast)) {
-          // In Vue 3 compat, $slots is readonly. Set slots on the internal
-          // instance as functions so VNodes are available during the
-          // component's render cycle. When the value is a render function,
-          // defer calling it until the slot is evaluated during render so
-          // that $createElement runs within an active component context.
-          const slotFn = isFunction(value)
-            ? () => concat(value(toast.$createElement))
-            : () => concat(value)
-          toast.$.slots[propsToSlots[prop]] = slotFn
-        } else {
-          if (isFunction(value)) {
-            value = value(toast.$createElement)
-          }
-          toast.$slots[propsToSlots[prop]] = concat(value)
-        }
-      }
-    })
-    // Create a mount point (a DIV) and mount it (which triggers the show)
-    function createMountPoint() {
-      const div = document.createElement('div')
-      document.body.appendChild(div)
-      toast.$mount(div)
-    }
-
-    // ViewTransition fallback
-    if (!document.startViewTransition) {
-      createMountPoint()
-      return
-    }
-
-    document.startViewTransition(createMountPoint)
-  }
-
-  // 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/index.js

@@ -1,12 +0,0 @@
-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

@@ -1,2 +0,0 @@
-@import "toast";
-@import "toaster";