@gitlab/ui 132.0.0 → 132.0.2

package/dist/components/base/table_lite/table_lite.js

@@ -0,0 +1,80 @@
+import { BTableLite } from '../../../vendor/bootstrap-vue/src/components/table/table-lite';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const {
+  tableClass
+} = BTableLite.options.props;
+var script = {
+  name: 'GlTableLite',
+  components: {
+    BTableLite
+  },
+  inheritAttrs: false,
+  props: {
+    tableClass,
+    /**
+     * Array of items displayed in the table as rows.
+     */
+    items: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    fields: {
+      type: Array,
+      required: false,
+      default: null
+    },
+    stickyHeader: {
+      type: Boolean,
+      default: false,
+      required: false
+    }
+  },
+  computed: {
+    stickyHeaderClass() {
+      return this.stickyHeader ? 'gl-table--sticky-header' : null;
+    },
+    localTableClass() {
+      return ['gl-table', this.tableClass, this.stickyHeaderClass];
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-table-lite',_vm._g(_vm._b({attrs:{"table-class":_vm.localTableClass,"fields":_vm.fields,"items":_vm.items},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$scopedSlots)),function(slot){return {key:slot,fn:function(scope){return [_vm._t(slot,null,null,scope)]}}})],null,true)},'b-table-lite',_vm.$attrs,false),_vm.$listeners))};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export { __vue_component__ as default };

package/dist/components/base/tabs/constants.js

@@ -0,0 +1,3 @@
+const DEFAULT_TAB_TITLE_LINK_CLASS = 'gl-tab-nav-item';
+
+export { DEFAULT_TAB_TITLE_LINK_CLASS };

package/dist/components/base/tabs/tab/tab.js

@@ -0,0 +1,113 @@
+import { isPlainObject } from 'lodash-es';
+import { BTab } from '../../../../vendor/bootstrap-vue/src/components/tabs/tab';
+import GlBadge from '../../badge/badge';
+import { logWarning } from '../../../../utils/utils';
+import { DEFAULT_TAB_TITLE_LINK_CLASS } from '../constants';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlTab',
+  components: {
+    BTab,
+    GlBadge
+  },
+  inheritAttrs: false,
+  props: {
+    titleLinkClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: ''
+    },
+    /**
+     * Query string parameter value to use when `gl-tabs` `sync-active-tab-with-query-params` prop is set to `true`.
+     */
+    queryParamValue: {
+      type: String,
+      required: false,
+      default: null
+    },
+    /**
+     * Display a count badge next to the tab title.
+     */
+    tabCount: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    /**
+     * Screen reader text to provide context for the tab count value.
+     * Should be the result of calling n__() with the count.
+     * Example: :tab-count-sr-text="n__('%d changed file', '%d changed files', count)"
+     */
+    tabCountSrText: {
+      type: String,
+      required: false,
+      default: null
+    }
+  },
+  computed: {
+    linkClass() {
+      const {
+        titleLinkClass
+      } = this;
+      if (Array.isArray(titleLinkClass)) {
+        return [...titleLinkClass, DEFAULT_TAB_TITLE_LINK_CLASS];
+      }
+      if (isPlainObject(titleLinkClass)) {
+        return {
+          ...titleLinkClass,
+          [DEFAULT_TAB_TITLE_LINK_CLASS]: true
+        };
+      }
+      return `${titleLinkClass} ${DEFAULT_TAB_TITLE_LINK_CLASS}`.trim();
+    },
+    hasTabCount() {
+      return this.tabCount != null && this.tabCount >= 0;
+    }
+  },
+  created() {
+    if (this.hasTabCount && !this.tabCountSrText) {
+      logWarning('When using "tab-count", you should also provide "tab-count-sr-text" for screen reader accessibility. Example: :tab-count-sr-text="n__(\'%d item\', \'%d items\', count)"', {
+        name: 'GlTab'
+      });
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-tab',_vm._g(_vm._b({attrs:{"title":_vm.hasTabCount ? null : _vm.$attrs.title,"title-link-class":_vm.linkClass,"query-param-value":_vm.queryParamValue},scopedSlots:_vm._u([(_vm.hasTabCount)?{key:"title",fn:function(){return [_vm._t("title",function(){return [_vm._v(_vm._s(_vm.$attrs.title))]}),_vm._v(" "),_c('gl-badge',{staticClass:"gl-ml-2",attrs:{"variant":"neutral","aria-hidden":"true","data-testid":"tab-counter-badge"}},[_vm._v("\n      "+_vm._s(_vm.tabCount)+"\n    ")]),_vm._v(" "),(_vm.tabCountSrText)?_c('span',{staticClass:"gl-sr-only"},[_vm._v(_vm._s(_vm.tabCountSrText))]):_vm._e()]},proxy:true}:null,_vm._l((Object.keys(_vm.$scopedSlots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}})],null,true)},'b-tab',_vm.$attrs,false),_vm.$listeners))};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export { __vue_component__ as default };

package/dist/components/base/tabs/tabs/scrollable_tabs.js

@@ -0,0 +1,162 @@
+import { debounce } from 'lodash-es';
+import { GlResizeObserverDirective } from '../../../../directives/resize_observer/resize_observer';
+import GlIcon from '../../icon/icon';
+import { translate } from '../../../../utils/i18n';
+import GlTabs from './tabs';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const NAV_CLASS = 'gl-scrollable-tabs-nav';
+var script = {
+  name: 'GlScrollableTabs',
+  components: {
+    GlTabs,
+    GlIcon
+  },
+  directives: {
+    GlResizeObserverDirective
+  },
+  inheritAttrs: false,
+  props: {
+    /**
+     * The aria-label that will be rendered inside for the scroll to left button.
+     */
+    scrollLeftLabel: {
+      type: String,
+      required: false,
+      default: translate('GlTabs.GlScrollableTabs.scrollLeftLabel', 'Scroll left')
+    },
+    /**
+     * The aria-label that will be rendered inside for the scroll to right button.
+     */
+    scrollRightLabel: {
+      type: String,
+      required: false,
+      default: translate('GlTabs.GlScrollableTabs.scrollRightLabel', 'Scroll right')
+    }
+  },
+  data() {
+    return {
+      width: 0,
+      // This is a reactive value of a child element's scrollLeft. It is not two-way bound.
+      // Do not set manually outside of "scroll" callback.
+      scrollLeft: 0,
+      navScrollWidth: 0
+    };
+  },
+  computed: {
+    navClass() {
+      const attrsNavClass = this.$attrs.navClass;
+      if (!attrsNavClass) {
+        return [NAV_CLASS];
+      }
+      if (Array.isArray(attrsNavClass)) {
+        return [NAV_CLASS, ...attrsNavClass];
+      }
+      return [NAV_CLASS, attrsNavClass];
+    },
+    displayScrollLeft() {
+      // if we have scrolled && there's overflow
+      return this.scrollLeft && this.width < this.navScrollWidth;
+    },
+    displayScrollRight() {
+      // if there's more overflow to the right
+      return this.scrollLeft + this.width < this.navScrollWidth;
+    },
+    passthroughAttrs() {
+      return Object.keys(this.$attrs).filter(key => !key.startsWith('action')).reduce((acc, key) => Object.assign(acc, {
+        [key]: this.$attrs[key]
+      }), {});
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.navScrollWidth = this.getScrollWidth();
+    });
+    this.handleNavScroll = debounce(e => {
+      this.scrollLeft = e.target.scrollLeft;
+    }, 100);
+    this.getNavContainer().addEventListener('scroll', this.handleNavScroll);
+  },
+  beforeDestroy() {
+    this.getNavContainer().removeEventListener('scroll', this.handleNavScroll);
+  },
+  updated() {
+    // Whenever tabs are added or removed we need to recalculate the reactive scrollWidth
+    this.$nextTick(() => {
+      this.navScrollWidth = this.getScrollWidth();
+    });
+  },
+  methods: {
+    handleResize(_ref) {
+      let {
+        contentRect: {
+          width
+        }
+      } = _ref;
+      this.width = width;
+      this.navScrollWidth = this.getScrollWidth();
+    },
+    scrollTabsLeft() {
+      const scrollTo = this.scrollLeft - this.width;
+      this.scrollTabs(Math.max(scrollTo, 0));
+    },
+    scrollTabsRight() {
+      const scrollTo = this.scrollLeft + this.width;
+      this.scrollTabs(Math.min(scrollTo, this.getScrollWidth() - this.width));
+    },
+    scrollTabs(scrollTo) {
+      this.getNavContainer().scrollTo({
+        left: scrollTo,
+        behavior: 'smooth'
+      });
+      this.scrollLeft = scrollTo;
+    },
+    getScrollWidth() {
+      var _this$getNavContainer;
+      return ((_this$getNavContainer = this.getNavContainer()) === null || _this$getNavContainer === void 0 ? void 0 : _this$getNavContainer.scrollWidth) || 0;
+    },
+    getNavContainer() {
+      var _this$$el;
+      return (_this$$el = this.$el) === null || _this$$el === void 0 ? void 0 : _this$$el.querySelector(`.${NAV_CLASS}`);
+    }
+  },
+  NAV_CLASS
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',_vm._g(_vm._b({directives:[{name:"gl-resize-observer-directive",rawName:"v-gl-resize-observer-directive",value:(_vm.handleResize),expression:"handleResize"}],attrs:{"nav-class":_vm.navClass},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}}),{key:"toolbar-start",fn:function(){return [_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.displayScrollLeft),expression:"displayScrollLeft"}],staticClass:"gl-tabs-fade gl-tabs-fade-left"},[_c('button',{staticClass:"gl-tabs-fade-icon-button",attrs:{"aria-label":_vm.scrollLeftLabel},on:{"click":_vm.scrollTabsLeft}},[_c('gl-icon',{attrs:{"size":16,"name":"chevron-lg-left"}})],1)])]},proxy:true},{key:"toolbar-end",fn:function(){return [_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.displayScrollRight),expression:"displayScrollRight"}],staticClass:"gl-tabs-fade gl-tabs-fade-right"},[_c('button',{staticClass:"gl-tabs-fade-icon-button",attrs:{"aria-label":_vm.scrollRightLabel},on:{"click":_vm.scrollTabsRight}},[_c('gl-icon',{attrs:{"size":16,"name":"chevron-lg-right"}})],1)])]},proxy:true}],null,true)},'gl-tabs',_vm.passthroughAttrs,false),_vm.$listeners))};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export { __vue_component__ as default };

package/dist/components/base/tabs/tabs/tabs.js

@@ -0,0 +1,223 @@
+import { BTabs } from '../../../../vendor/bootstrap-vue/src/components/tabs/tabs';
+import { tabsButtonDefaults } from '../../../../utils/constants';
+import GlButton from '../../button/button';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const validatorHelper = obj => Object.keys(obj).every(val => val === 'text' || val === 'attributes');
+var script = {
+  name: 'GlTabs',
+  components: {
+    BTabs,
+    GlButton
+  },
+  inheritAttrs: false,
+  props: {
+    actionPrimary: {
+      type: Object,
+      required: false,
+      default: null,
+      validator: obj => validatorHelper(obj)
+    },
+    actionSecondary: {
+      type: Object,
+      required: false,
+      default: null,
+      validator: obj => validatorHelper(obj)
+    },
+    actionTertiary: {
+      type: Object,
+      required: false,
+      default: null,
+      validator: obj => validatorHelper(obj)
+    },
+    contentClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: null
+    },
+    navClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: null
+    },
+    justified: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Sync active tab with query string parameters. Allows for deep linking into specific tabs.
+     */
+    syncActiveTabWithQueryParams: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Name to use for query string parameter.
+     */
+    queryParamName: {
+      type: String,
+      required: false,
+      default: 'tab'
+    },
+    value: {
+      type: Number,
+      required: false,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      activeTabIndex: 0
+    };
+  },
+  computed: {
+    hasActions() {
+      return [this.actionPrimary, this.actionSecondary, this.actionTertiary].some(Boolean);
+    },
+    listeners() {
+      return {
+        ...this.$listeners,
+        input: this.handleInput
+      };
+    }
+  },
+  watch: {
+    value: {
+      handler(newValue) {
+        if (this.activeTabIndex !== newValue) {
+          this.activeTabIndex = newValue;
+        }
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    if (this.syncActiveTabWithQueryParams) {
+      this.syncActiveTabFromQueryParams();
+      window.addEventListener('popstate', this.syncActiveTabFromQueryParams);
+    }
+
+    // Because we are manually binding `value` attribute to `b-tabs` the `input`
+    // event is no longer automatically fired when the component is mounted.
+    // To maintain parity with original `b-tabs` functionality
+    // we manually fire the `input` event when the component is mounted.
+    this.$emit('input', this.activeTabIndex);
+  },
+  destroyed() {
+    window.removeEventListener('popstate', this.syncActiveTabFromQueryParams);
+  },
+  methods: {
+    buttonBinding(prop, name) {
+      if (!prop.attributes) {
+        return tabsButtonDefaults[name];
+      }
+      return prop.attributes;
+    },
+    primary() {
+      this.$emit('primary');
+    },
+    secondary() {
+      this.$emit('secondary');
+    },
+    tertiary() {
+      this.$emit('tertiary');
+    },
+    /**
+     * When the query parameter is updated, update the active tab to match.
+     */
+    async syncActiveTabFromQueryParams() {
+      await this.$nextTick();
+      const queryParamValue = this.getQueryParamValue();
+      const tabIndexToActivate = this.getTabs().findIndex((tab, tabIndex) => this.getTabQueryParamValue(tabIndex) === queryParamValue);
+      this.activeTabIndex = tabIndexToActivate !== -1 ? tabIndexToActivate : 0;
+    },
+    /**
+     * Returns a list of all <b-tab> instances associated with this tab control.
+     */
+    getTabs() {
+      return this.$refs.bTabs.getTabs();
+    },
+    /**
+     * Get the value of the query param as defined by the `queryParamName` prop.
+     */
+    getQueryParamValue() {
+      const searchParams = new URLSearchParams(window.location.search);
+      return searchParams.get(this.queryParamName);
+    },
+    /**
+     * Set the value of the query param as defined by the `queryParamName` prop.
+     * This method does nothing if the query param is already up to date.
+     */
+    setQueryParamValueIfNecessary(tabIndex) {
+      const currentQueryParamValue = this.getQueryParamValue();
+      const newQueryParamValue = this.getTabQueryParamValue(tabIndex);
+
+      // If the current query parameter is already up-to-date,
+      // avoid creating a duplicate history entry.
+      if (tabIndex === 0 && !currentQueryParamValue || tabIndex !== 0 && currentQueryParamValue === newQueryParamValue) {
+        return;
+      }
+      const searchParams = new URLSearchParams(window.location.search);
+      searchParams.set(this.queryParamName, newQueryParamValue);
+      window.history.pushState({}, '', `${window.location.pathname}?${searchParams.toString()}`);
+    },
+    /**
+     * Returns the query param value for a tab.
+     * Defaults to the tab index unless the `query-param-value` attribute is set.
+     */
+    getTabQueryParamValue(tabIndex) {
+      const tab = this.getTabs()[tabIndex];
+      return (tab === null || tab === void 0 ? void 0 : tab.$attrs['query-param-value']) || tabIndex.toString();
+    },
+    /**
+     * Event handler for `input` event.
+     */
+    handleInput(tabIndex) {
+      this.$emit('input', tabIndex);
+      this.activeTabIndex = tabIndex;
+      if (this.syncActiveTabWithQueryParams) {
+        this.setQueryParamValueIfNecessary(tabIndex);
+      }
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-tabs',_vm._g(_vm._b({ref:"bTabs",staticClass:"gl-tabs",attrs:{"no-nav-style":true,"no-fade":true,"active-nav-item-class":"gl-tab-nav-item-active","content-class":[_vm.contentClass, 'gl-tab-content'],"nav-wrapper-class":"gl-tabs-wrapper","nav-class":[_vm.navClass, 'gl-tabs-nav'],"justified":_vm.justified,"value":_vm.activeTabIndex},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}}),(_vm.hasActions)?{key:"toolbar-start",fn:function(){return [_c('div',{staticClass:"gl-actions-tabs-start",attrs:{"role":"toolbar","data-testid":"actions-tabs-start"}},[(_vm.actionPrimary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-primary"},on:{"click":_vm.primary}},'gl-button',_vm.buttonBinding(_vm.actionPrimary, 'actionPrimary'),false),[_vm._v("\n        "+_vm._s(_vm.actionPrimary.text)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.actionSecondary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-secondary"},on:{"click":_vm.secondary}},'gl-button',_vm.buttonBinding(_vm.actionSecondary, 'actionSecondary'),false),[_vm._v("\n        "+_vm._s(_vm.actionSecondary.text)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.actionTertiary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-tertiary"},on:{"click":_vm.tertiary}},'gl-button',_vm.buttonBinding(_vm.actionTertiary, 'actionTertiary'),false),[_vm._v("\n        "+_vm._s(_vm.actionTertiary.text)+"\n      ")]):_vm._e()],1)]},proxy:true}:null,(_vm.hasActions)?{key:"toolbar-end",fn:function(){return [_c('div',{staticClass:"gl-actions-tabs-end",attrs:{"role":"toolbar","data-testid":"actions-tabs-end"}},[(_vm.actionPrimary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-primary"},on:{"click":_vm.primary}},'gl-button',_vm.buttonBinding(_vm.actionPrimary, 'actionPrimary'),false),[_vm._v("\n        "+_vm._s(_vm.actionPrimary.text)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.actionSecondary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-secondary"},on:{"click":_vm.secondary}},'gl-button',_vm.buttonBinding(_vm.actionSecondary, 'actionSecondary'),false),[_vm._v("\n        "+_vm._s(_vm.actionSecondary.text)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.actionTertiary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-tertiary"},on:{"click":_vm.tertiary}},'gl-button',_vm.buttonBinding(_vm.actionTertiary, 'actionTertiary'),false),[_vm._v("\n        "+_vm._s(_vm.actionTertiary.text)+"\n      ")]):_vm._e()],1)]},proxy:true}:null],null,true)},'b-tabs',_vm.$attrs,false),_vm.listeners))};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export { __vue_component__ as default };

package/dist/components/base/toast/index.js

@@ -0,0 +1,66 @@
+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 };