@gitlab/ui 130.2.0 → 131.0.0

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