@gitlab/ui 130.1.1 → 131.0.0

package/dist/components/base/new_dropdowns/base_dropdown/base_dropdown.js

@@ -163,6 +163,14 @@ var script = {
       required: false,
       default: null
     },
+    /**
+     * The `aria-label` attribute value for the toggle `button`.
+     */
+    ariaLabel: {
+      type: String,
+      required: false,
+      default: null
+    },
     /**
      * Custom value to be passed to the offset middleware.
      * https://floating-ui.com/docs/offset
@@ -273,6 +281,7 @@ var script = {
         'aria-expanded': String(this.visible),
         'aria-haspopup': this.ariaHaspopup,
         'aria-labelledby': this.toggleLabelledBy,
+        'aria-label': this.ariaLabel || undefined,
         'aria-activedescendant': this.ariaActiveDescendant
       };
     },

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown.js

@@ -1,5 +1,5 @@
 import { uniqueId, clamp } from 'lodash-es';
-import { stopEvent, filterVisible } from '../../../../utils/utils';
+import { logWarning, stopEvent, filterVisible } from '../../../../utils/utils';
 import { GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_FOCUS_CONTENT, POSITION_ABSOLUTE, POSITION_FIXED, HOME, END, ARROW_UP, ARROW_DOWN, ENTER, SPACE, GL_DROPDOWN_CONTENTS_CLASS } from '../constants';
 import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions, dropdownPlacements } from '../../../../utils/constants';
 import GlBaseDropdown from '../base_dropdown/base_dropdown';
@@ -143,6 +143,17 @@ var script = {
       required: false,
       default: null
     },
+    /**
+     * The `aria-label` attribute value for the toggle button.
+     * Use when there is no visible label element to reference with `toggleAriaLabelledBy`.
+     * Do not provide both `toggleAriaLabel` and `toggleAriaLabelledBy`.
+     * When both are present, `toggleAriaLabelledBy` takes precedence per the WAI-ARIA spec.
+     */
+    toggleAriaLabel: {
+      type: String,
+      required: false,
+      default: null
+    },
     /**
      * The `aria-labelledby` attribute value for the list of options
      * Provide the string of ids seperated by space
@@ -230,6 +241,11 @@ var script = {
     }
   },
   mounted() {
+    if (this.toggleAriaLabel && this.toggleAriaLabelledBy) {
+      logWarning('Do not provide both `toggleAriaLabel` and `toggleAriaLabelledBy`. ' + 'When both are present, `toggleAriaLabelledBy` takes precedence and `toggleAriaLabel` is ignored. ' + 'See https://design.gitlab.com/components/dropdown-disclosure/#accessibility', {
+        name: 'GlDisclosureDropdown'
+      });
+    }
     if (this.startOpened) {
       this.open();
     }
@@ -349,7 +365,7 @@ var 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-base-dropdown',{ref:"baseDropdown",staticClass:"gl-disclosure-dropdown",attrs:{"aria-labelledby":_vm.toggleAriaLabelledBy,"arrow-element":_vm.$refs.disclosureArrow,"toggle-id":_vm.toggleId,"toggle-text":_vm.toggleText,"toggle-class":_vm.toggleClass,"text-sr-only":_vm.textSrOnly,"category":_vm.category,"variant":_vm.variant,"size":_vm.size,"icon":_vm.icon,"disabled":_vm.disabled,"loading":_vm.loading,"no-caret":_vm.noCaret,"placement":_vm.placement,"block":_vm.block,"offset":_vm.dropdownOffset,"fluid-width":_vm.fluidWidth,"positioning-strategy":_vm.positioningStrategy,"is-disclosure":""},on:_vm._d({},[_vm.$options.events.GL_DROPDOWN_SHOWN,_vm.onShow,_vm.$options.events.GL_DROPDOWN_HIDDEN,_vm.onHide,_vm.$options.events.GL_DROPDOWN_BEFORE_CLOSE,_vm.onBeforeClose,_vm.$options.events.GL_DROPDOWN_FOCUS_CONTENT,_vm.onKeydown]),scopedSlots:_vm._u([(_vm.hasCustomToggle)?{key:"toggle",fn:function(slotProps){return [_vm._t("toggle",null,null,slotProps)]}}:null],null,true)},[_vm._v(" "),_vm._t("header"),_vm._v(" "),_c(_vm.disclosureTag,{ref:"content",tag:"component",class:_vm.$options.GL_DROPDOWN_CONTENTS_CLASS,attrs:{"id":_vm.disclosureId,"aria-labelledby":_vm.listAriaLabelledBy || _vm.toggleId,"data-testid":"disclosure-content","tabindex":"-1"},on:{"keydown":_vm.onKeydown,"click":_vm.handleAutoClose}},[_vm._t("default",function(){return [_vm._l((_vm.items),function(item,index){return [(_vm.isItem(item))?[_c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"siblings-have-icons":_vm.siblingsHaveIcons,"item":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([('list-item' in _vm.$scopedSlots)?{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":item})]},proxy:true}:null],null,true)})]:[_c('gl-disclosure-dropdown-group',{key:item.name,attrs:{"bordered":index !== 0,"group":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([(_vm.$scopedSlots['group-label'])?{key:"group-label",fn:function(){return [_vm._t("group-label",null,{"group":item})]},proxy:true}:null,(_vm.$scopedSlots['list-item'])?{key:"default",fn:function(){return _vm._l((item.items),function(groupItem){return _c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"siblings-have-icons":_vm.doSomeItemsHaveIcon(item.items),"item":groupItem},on:{"action":_vm.handleAction},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":groupItem})]},proxy:true}],null,true)})})},proxy:true}:null],null,true)})]]})]})],2),_vm._v(" "),_vm._t("footer")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-base-dropdown',{ref:"baseDropdown",staticClass:"gl-disclosure-dropdown",attrs:{"aria-labelledby":_vm.toggleAriaLabelledBy,"aria-label":_vm.toggleAriaLabelledBy ? undefined : _vm.toggleAriaLabel,"arrow-element":_vm.$refs.disclosureArrow,"toggle-id":_vm.toggleId,"toggle-text":_vm.toggleText,"toggle-class":_vm.toggleClass,"text-sr-only":_vm.textSrOnly,"category":_vm.category,"variant":_vm.variant,"size":_vm.size,"icon":_vm.icon,"disabled":_vm.disabled,"loading":_vm.loading,"no-caret":_vm.noCaret,"placement":_vm.placement,"block":_vm.block,"offset":_vm.dropdownOffset,"fluid-width":_vm.fluidWidth,"positioning-strategy":_vm.positioningStrategy,"is-disclosure":""},on:_vm._d({},[_vm.$options.events.GL_DROPDOWN_SHOWN,_vm.onShow,_vm.$options.events.GL_DROPDOWN_HIDDEN,_vm.onHide,_vm.$options.events.GL_DROPDOWN_BEFORE_CLOSE,_vm.onBeforeClose,_vm.$options.events.GL_DROPDOWN_FOCUS_CONTENT,_vm.onKeydown]),scopedSlots:_vm._u([(_vm.hasCustomToggle)?{key:"toggle",fn:function(slotProps){return [_vm._t("toggle",null,null,slotProps)]}}:null],null,true)},[_vm._v(" "),_vm._t("header"),_vm._v(" "),_c(_vm.disclosureTag,{ref:"content",tag:"component",class:_vm.$options.GL_DROPDOWN_CONTENTS_CLASS,attrs:{"id":_vm.disclosureId,"aria-labelledby":_vm.listAriaLabelledBy || _vm.toggleId,"data-testid":"disclosure-content","tabindex":"-1"},on:{"keydown":_vm.onKeydown,"click":_vm.handleAutoClose}},[_vm._t("default",function(){return [_vm._l((_vm.items),function(item,index){return [(_vm.isItem(item))?[_c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"siblings-have-icons":_vm.siblingsHaveIcons,"item":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([('list-item' in _vm.$scopedSlots)?{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":item})]},proxy:true}:null],null,true)})]:[_c('gl-disclosure-dropdown-group',{key:item.name,attrs:{"bordered":index !== 0,"group":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([(_vm.$scopedSlots['group-label'])?{key:"group-label",fn:function(){return [_vm._t("group-label",null,{"group":item})]},proxy:true}:null,(_vm.$scopedSlots['list-item'])?{key:"default",fn:function(){return _vm._l((item.items),function(groupItem){return _c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"siblings-have-icons":_vm.doSomeItemsHaveIcon(item.items),"item":groupItem},on:{"action":_vm.handleAction},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":groupItem})]},proxy:true}],null,true)})})},proxy:true}:null],null,true)})]]})]})],2),_vm._v(" "),_vm._t("footer")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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 };

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

@@ -1,97 +1,125 @@
-import { isFunction } from 'lodash-es';
-import { ToastPlugin } from '../../../vendor/bootstrap-vue/src/components/toast/index';
 import CloseButton from '../../shared_components/close_button/close_button';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-/* eslint-disable import/no-default-export */
-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));
+const MIN_DURATION = 1000;
+const DEFAULT_AUTO_HIDE_DELAY = 5000;
+const hasAnimateSupport = typeof Element !== 'undefined' && Boolean(Element.prototype.animate);
+var script = {
+  name: 'GlToast',
+  components: {
+    CloseButton
+  },
+  props: {
+    toastId: {
+      type: String,
+      required: true
+    },
+    message: {
+      type: String,
+      required: true
+    },
+    action: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    autoHideDelay: {
+      type: Number,
+      required: false,
+      default: DEFAULT_AUTO_HIDE_DELAY
     }
-    return nodes;
-  };
-}
-function showToast(message) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  // 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);
-      }
+  },
+  data() {
+    return {
+      visible: true
     };
-    this.$root.$on('bv::toast:hidden', toastHiddenCallback);
-  }
-  const updatedAutoHideDelay = !Number.isNaN(options === null || options === void 0 ? void 0 : 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.
- */
-var toast = {
-  install(Vue) {
-    Vue.use(ToastPlugin);
-    Vue.mixin({
-      beforeCreate() {
-        if (this.$toast) {
-          return;
-        }
-        this.$toast = {
-          show: showToast.bind(this)
-        };
+  },
+  computed: {
+    effectiveDelay() {
+      return Math.max(this.autoHideDelay, MIN_DURATION);
+    }
+  },
+  created() {
+    this.useCssTransition = hasAnimateSupport;
+    this.dismissTimer = null;
+    this.deadline = 0;
+    this.timeRemaining = this.effectiveDelay;
+    this.isHiding = false;
+  },
+  beforeDestroy() {
+    clearTimeout(this.dismissTimer);
+  },
+  methods: {
+    startDismissTimer() {
+      clearTimeout(this.dismissTimer);
+      this.deadline = Date.now() + this.timeRemaining;
+      this.dismissTimer = setTimeout(() => this.hide(), this.timeRemaining);
+    },
+    onPause() {
+      if (!this.dismissTimer) return;
+      clearTimeout(this.dismissTimer);
+      this.dismissTimer = null;
+      this.timeRemaining = Math.max(this.deadline - Date.now(), MIN_DURATION);
+    },
+    onResume() {
+      if (!this.timeRemaining || this.dismissTimer) return;
+      this.startDismissTimer();
+    },
+    hide() {
+      if (this.isHiding) return;
+      this.isHiding = true;
+      clearTimeout(this.dismissTimer);
+      this.dismissTimer = null;
+      this.visible = false;
+    },
+    onAfterLeave() {
+      this.$emit('hidden', this.toastId);
+    },
+    onActionClick(e) {
+      if (this.action && this.action.onClick) {
+        this.action.onClick(e, {
+          id: this.toastId,
+          hide: () => this.hide()
+        });
       }
-    });
+    }
   }
 };
 
-export { toast as default };
+/* 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('div',{staticClass:"b-toast b-toast-append",attrs:{"id":(_vm.toastId + "_toast_outer"),"role":"status","aria-live":"polite","aria-atomic":"true"}},[_c('transition',{attrs:{"enter-active-class":"fade","enter-to-class":"show","leave-class":"show","leave-active-class":"fade","appear":"","appear-active-class":"fade","appear-to-class":"show","css":_vm.useCssTransition},on:{"after-appear":_vm.startDismissTimer,"after-leave":_vm.onAfterLeave}},[(_vm.visible)?_c('div',{staticClass:"toast gl-toast",attrs:{"id":_vm.toastId,"tabindex":"0"},on:{"mouseenter":_vm.onPause,"mouseleave":_vm.onResume}},[_c('div',{staticClass:"toast-body"},[_vm._v(_vm._s(_vm.message))]),_vm._v(" "),_c('header',{staticClass:"toast-header"},[(_vm.action)?_c('a',{staticClass:"gl-toast-action",attrs:{"role":_vm.action.href ? undefined : 'button',"href":_vm.action.href},on:{"click":_vm.onActionClick}},[_vm._v(_vm._s(_vm.action.text))]):_vm._e(),_vm._v(" "),_c('close-button',{staticClass:"gl-toast-close-button",on:{"click":_vm.hide}})],1)]):_vm._e()])],1)};
+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/toaster.js

@@ -0,0 +1,87 @@
+import { MountingPortal } from 'portal-vue';
+import GlToast from './toast';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const hasViewTransitions = typeof document !== 'undefined' && typeof document.startViewTransition === 'function';
+var script = {
+  name: 'GlToaster',
+  components: {
+    MountingPortal,
+    GlToast
+  },
+  expose: ['addToast', 'hideToast', 'removeToast'],
+  data() {
+    return {
+      toasts: []
+    };
+  },
+  methods: {
+    addToast(config) {
+      const add = () => this.toasts.push(config);
+      if (hasViewTransitions && this.toasts.length > 0) {
+        document.startViewTransition(add);
+      } else {
+        add();
+      }
+    },
+    hideToast(id) {
+      const refs = this.$refs.toastRefs;
+      if (!refs) return;
+      const toastComponents = Array.isArray(refs) ? refs : [refs];
+      const component = toastComponents.find(c => c.toastId === id);
+      if (component) {
+        component.hide();
+      }
+    },
+    removeToast(id) {
+      const idx = this.toasts.findIndex(t => t.id === id);
+      if (idx !== -1) {
+        const toast = this.toasts[idx];
+        this.toasts.splice(idx, 1);
+        if (toast.onComplete) {
+          toast.onComplete({
+            componentId: id
+          });
+        }
+      }
+    }
+  }
+};
+
+/* 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('mounting-portal',{attrs:{"mount-to":"body","append":""}},[_c('div',{staticClass:"b-toaster b-toaster-bottom-left",attrs:{"id":"gl-toaster"}},[_c('div',{staticClass:"b-toaster-slot"},_vm._l((_vm.toasts),function(toast){return _c('gl-toast',{key:toast.id,ref:"toastRefs",refInFor:true,attrs:{"toast-id":toast.id,"message":toast.message,"action":toast.action,"auto-hide-delay":toast.autoHideDelay},on:{"hidden":_vm.removeToast}})}),1)])])};
+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/charts/single_stat/single_stat.js

@@ -3,6 +3,7 @@ import GlBadge from '../../base/badge/badge';
 import GlIcon from '../../base/icon/icon';
 import GlAnimatedNumber from '../../utilities/animated_number/animated_number';
 import { formatNumberToLocale } from '../../../utils/number_utils';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
@@ -12,6 +13,9 @@ var script = {
     GlBadge,
     GlAnimatedNumber
   },
+  directives: {
+    GlTooltip: GlTooltipDirective
+  },
   props: {
     title: {
       type: String,
@@ -63,6 +67,14 @@ var script = {
       required: false,
       default: null
     },
+    /**
+     * Tooltip text for the meta badge. When provided, the badge is wrapped in a button to ensure keyboard accessibility.
+     */
+    metaTooltip: {
+      type: String,
+      required: false,
+      default: ''
+    },
     shouldAnimate: {
       type: Boolean,
       required: false,
@@ -117,7 +129,7 @@ var 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('div',_vm._g(_vm._b({staticClass:"gl-single-stat gl-flex gl-flex-col gl-p-2"},'div',_vm.$attrs,false),_vm.$listeners),[_c('div',{staticClass:"gl-mb-2 gl-flex gl-items-center gl-text-heading"},[(_vm.showTitleIcon)?_c('gl-icon',{class:['gl-mr-2', _vm.titleIconClass],attrs:{"name":_vm.titleIcon,"data-testid":"title-icon"}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"gl-text-base gl-font-normal",attrs:{"data-testid":"title-text"}},[_vm._v(_vm._s(_vm.title))])],1),_vm._v(" "),_c('div',{staticClass:"gl-single-stat-content gl-flex gl-items-baseline gl-font-bold gl-text-strong"},[_c('span',{staticClass:"gl-single-stat-number gl-leading-1",class:{ 'gl-mr-2': !_vm.unit },attrs:{"data-testid":"displayValue"}},[(_vm.canAnimate)?_c('gl-animated-number',{attrs:{"number":Number(_vm.value),"decimal-places":_vm.animationDecimalPlaces,"use-delimiters":_vm.useDelimiters},on:{"animating":function($event){return _vm.setHideUnits(true)},"animated":function($event){return _vm.setHideUnits(false)}}}):_c('span',{attrs:{"data-testid":"non-animated-value"}},[_vm._v(_vm._s(_vm.statValue))])],1),_vm._v(" "),(_vm.unit)?_c('span',{staticClass:"gl-mx-2 gl-text-sm gl-opacity-10 gl-transition-all",class:{ '!gl-opacity-0': _vm.hideUnits },attrs:{"data-testid":"unit"}},[_vm._v(_vm._s(_vm.unit))]):_vm._e(),_vm._v(" "),(_vm.showMetaIcon)?_c('gl-icon',{attrs:{"variant":_vm.iconVariant,"name":_vm.metaIcon,"data-testid":"meta-icon"}}):_vm._e(),_vm._v(" "),(_vm.showBadge)?_c('gl-badge',{attrs:{"variant":_vm.variant,"icon":_vm.metaIcon,"data-testid":"meta-badge"}},[_vm._v(_vm._s(_vm.metaText))]):_vm._e()],1)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._g(_vm._b({staticClass:"gl-single-stat gl-flex gl-flex-col gl-p-2"},'div',_vm.$attrs,false),_vm.$listeners),[_c('div',{staticClass:"gl-mb-2 gl-flex gl-items-center gl-text-heading"},[(_vm.showTitleIcon)?_c('gl-icon',{class:['gl-mr-2', _vm.titleIconClass],attrs:{"name":_vm.titleIcon,"data-testid":"title-icon"}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"gl-text-base gl-font-normal",attrs:{"data-testid":"title-text"}},[_vm._v(_vm._s(_vm.title))])],1),_vm._v(" "),_c('div',{staticClass:"gl-single-stat-content gl-flex gl-items-baseline gl-font-bold gl-text-strong"},[_c('span',{staticClass:"gl-single-stat-number gl-leading-1",class:{ 'gl-mr-2': !_vm.unit },attrs:{"data-testid":"displayValue"}},[(_vm.canAnimate)?_c('gl-animated-number',{attrs:{"number":Number(_vm.value),"decimal-places":_vm.animationDecimalPlaces,"use-delimiters":_vm.useDelimiters},on:{"animating":function($event){return _vm.setHideUnits(true)},"animated":function($event){return _vm.setHideUnits(false)}}}):_c('span',{attrs:{"data-testid":"non-animated-value"}},[_vm._v(_vm._s(_vm.statValue))])],1),_vm._v(" "),(_vm.unit)?_c('span',{staticClass:"gl-mx-2 gl-text-sm gl-opacity-10 gl-transition-all",class:{ '!gl-opacity-0': _vm.hideUnits },attrs:{"data-testid":"unit"}},[_vm._v(_vm._s(_vm.unit))]):_vm._e(),_vm._v(" "),(_vm.showMetaIcon)?_c('gl-icon',{attrs:{"variant":_vm.iconVariant,"name":_vm.metaIcon,"data-testid":"meta-icon"}}):_vm._e(),_vm._v(" "),(_vm.showBadge && _vm.metaTooltip)?_c('button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.viewport",modifiers:{"viewport":true}}],staticClass:"!gl-cursor-default gl-border-0 gl-bg-transparent gl-p-0 gl-leading-0",attrs:{"type":"button","title":_vm.metaTooltip,"data-testid":"meta-badge-button"}},[_c('gl-badge',{attrs:{"variant":_vm.variant,"icon":_vm.metaIcon,"data-testid":"meta-badge"}},[_vm._v(_vm._s(_vm.metaText))])],1):(_vm.showBadge)?_c('gl-badge',{attrs:{"variant":_vm.variant,"icon":_vm.metaIcon,"data-testid":"meta-badge"}},[_vm._v(_vm._s(_vm.metaText))]):_vm._e()],1)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/index.js

@@ -32,7 +32,7 @@ export { default as GlBadge } from './base/badge/badge';
 export { default as GlBanner } from './base/banner/banner';
 export { default as GlButton } from './base/button/button';
 export { default as GlTooltip } from './base/tooltip/tooltip';
-export { default as GlToast } from './base/toast/toast';
+export { default as GlToast } from './base/toast';
 export { default as GlDashboardSkeleton } from './regions/dashboard_skeleton/dashboard_skeleton';
 export { default as GlEmptyState } from './regions/empty_state/empty_state';
 export { default as GlForm } from './base/form/form';