@gitlab/ui/dist/components/base/toast/index.js

GitLab UI Components

import Vue from 'vue';
import { createNewChildComponent } from '../../../vendor/bootstrap-vue/src/utils/create-new-child-component';
import GlToaster from './toaster';

/* eslint-disable import/no-default-export */
let toastsCount = 0;
let toasterInstance = null;
function ensureToaster(vm) {
  if (toasterInstance) {
    const portalTarget = document.getElementById('gl-toaster');
    if (portalTarget && document.body.contains(portalTarget)) {
      return toasterInstance;
    }
    toasterInstance.$destroy();
    toasterInstance = null;
  }
  const ToasterComponent = Vue.extend(GlToaster);
  toasterInstance = createNewChildComponent(vm, ToasterComponent);
  toasterInstance.$mount(document.createElement('div'));
  return toasterInstance;
}
function showToast(message) {
  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  const toaster = ensureToaster(this);

  // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
  const id = `gl-toast-${toastsCount}`;
  toastsCount += 1;
  const hide = () => toaster.hideToast(id);
  const toast = {
    id,
    hide
  };
  const autoHideDelay = !Number.isNaN(options === null || options === void 0 ? void 0 : options.autoHideDelay) ? options.autoHideDelay : undefined;
  toaster.addToast({
    id,
    message,
    action: options.action || null,
    autoHideDelay,
    onComplete: options.onComplete || null
  });
  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.
 */
var index = {
  install(V) {
    V.mixin({
      beforeCreate() {
        if (this.$toast) {
          return;
        }
        this.$toast = {
          show: showToast.bind(this)
        };
      }
    });
  }
};

export { index as default };