@gitlab/ui 136.0.0 → 136.2.0

package/dist/components/base/label/label.js

@@ -79,6 +79,14 @@ var script = {
       type: Boolean,
       required: false,
       default: false
+    },
+    /**
+     * Additional text shown in a muted footer line of the tooltip (e.g. "Archived")
+     */
+    footer: {
+      type: String,
+      required: false,
+      default: ''
     }
   },
   computed: {
@@ -139,7 +147,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('span',_vm._b({staticClass:"gl-label",class:_vm.cssClasses,style:(_vm.cssVariables),on:{"click":_vm.onClick}},'span',_vm.$attrs,false),[_c(_vm.labelComponent,{ref:"labelTitle",tag:"component",staticClass:"gl-label-link",class:{ 'gl-label-link-underline': _vm.target },attrs:{"href":_vm.target ? _vm.target : false,"tabindex":"0"}},[_c('span',{staticClass:"gl-label-text"},[_vm._v("\n      "+_vm._s(_vm.scopedKey)+"\n    ")]),_vm._v(" "),(_vm.scoped && _vm.scopedValue)?_c('span',{staticClass:"gl-label-text-scoped"},[_vm._v("\n      "+_vm._s(_vm.scopedValue)+"\n    ")]):_vm._e()]),_vm._v(" "),(_vm.showCloseButton)?_c('gl-button',{staticClass:"gl-label-close !gl-p-0",attrs:{"category":"tertiary","size":"small","variant":"reset","aria-label":_vm.removeButtonAriaLabel,"disabled":_vm.disabled},on:{"click":_vm.onClose}},[_c('gl-icon',{attrs:{"name":"close-xs","size":12}})],1):_vm._e(),_vm._v(" "),(_vm.description)?_c('gl-tooltip',{attrs:{"target":function () { return _vm.tooltipTarget; },"placement":_vm.tooltipPlacement,"boundary":"viewport"}},[(_vm.scoped)?_c('span',{staticClass:"gl-label-tooltip-title"},[_vm._v("Scoped label")]):_vm._e(),_vm._v("\n    "+_vm._s(_vm.description)+"\n  ")]):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',_vm._b({staticClass:"gl-label",class:_vm.cssClasses,style:(_vm.cssVariables),on:{"click":_vm.onClick}},'span',_vm.$attrs,false),[_c(_vm.labelComponent,{ref:"labelTitle",tag:"component",staticClass:"gl-label-link",class:{ 'gl-label-link-underline': _vm.target },attrs:{"href":_vm.target ? _vm.target : false,"tabindex":"0"}},[_c('span',{staticClass:"gl-label-text"},[_vm._v("\n      "+_vm._s(_vm.scopedKey)+"\n    ")]),_vm._v(" "),(_vm.scoped && _vm.scopedValue)?_c('span',{staticClass:"gl-label-text-scoped"},[_vm._v("\n      "+_vm._s(_vm.scopedValue)+"\n    ")]):_vm._e()]),_vm._v(" "),(_vm.showCloseButton)?_c('gl-button',{staticClass:"gl-label-close !gl-p-0",attrs:{"category":"tertiary","size":"small","variant":"reset","aria-label":_vm.removeButtonAriaLabel,"disabled":_vm.disabled},on:{"click":_vm.onClose}},[_c('gl-icon',{attrs:{"name":"close-xs","size":12}})],1):_vm._e(),_vm._v(" "),(_vm.description || _vm.footer)?_c('gl-tooltip',{attrs:{"target":function () { return _vm.tooltipTarget; },"placement":_vm.tooltipPlacement,"boundary":"viewport"}},[(_vm.scoped)?_c('span',{staticClass:"gl-label-tooltip-title"},[_vm._v("Scoped label")]):_vm._e(),_vm._v("\n    "+_vm._s(_vm.description)+"\n    "),(_vm.footer)?_c('span',{staticClass:"gl-block gl-text-subtle"},[_vm._v(_vm._s(_vm.footer))]):_vm._e()]):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/nav_item/nav_item.js

@@ -1,3 +1,4 @@
+import { navItemIndicatorPositionOptions } from '../../../utils/constants';
 import GlAnimatedChevronRightDownIcon from '../animated_icon/animated_chevron_right_down_icon';
 import GlIcon from '../icon/icon';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -64,6 +65,15 @@ var script = {
       type: [String, Object],
       required: false,
       default: null
+    },
+    /**
+     * Position of the selected indicator
+     */
+    indicatorPosition: {
+      type: String,
+      required: false,
+      default: 'left',
+      validator: value => navItemIndicatorPositionOptions[value] !== undefined
     }
   },
   computed: {
@@ -71,7 +81,7 @@ var script = {
       return this.isParent ? String(this.expanded) : null;
     },
     classes() {
-      return ['gl-nav-item', {
+      return ['gl-nav-item', navItemIndicatorPositionOptions[this.indicatorPosition], {
         'gl-nav-item-is-icon-only': this.isIconOnly,
         'gl-nav-item-has-start-slot': this.icon || Boolean(this.$scopedSlots.icon),
         'gl-nav-item-has-end-slot': Boolean(this.$scopedSlots.end) || this.isParent,

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

@@ -42,25 +42,33 @@ function showToast(message) {
   return toast;
 }
 
+/**
+ * Adds a `$toast` property to the component it's applied to.
+ *
+ * Use this to opt individual components into toasts, instead of adding `$toast`
+ * to every component in the app with `GlToastPlugin`.
+ */
+const GlToastMixin = {
+  beforeCreate() {
+    if (this.$toast) {
+      return;
+    }
+    this.$toast = {
+      show: showToast.bind(this)
+    };
+  }
+};
+
 /**
  * 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.
+ * See https://design.gitlab.com/components/toast for detailed documentation.
  */
-var index = {
+const GlToastPlugin = {
   install(V) {
-    V.mixin({
-      beforeCreate() {
-        if (this.$toast) {
-          return;
-        }
-        this.$toast = {
-          show: showToast.bind(this)
-        };
-      }
-    });
+    V.mixin(GlToastMixin);
   }
 };
 
-export { index as default };
+export { GlToastMixin, GlToastPlugin, GlToastPlugin as default };

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';
+export { default as GlToast, GlToastMixin, GlToastPlugin } 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';