@gitlab/ui 110.1.0 → 111.1.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+# [111.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v111.0.0...v111.1.0) (2025-03-13)
+
+
+### Features
+
+* **DesignTokens:** define chart contextual design tokens ([57eafc4](https://gitlab.com/gitlab-org/gitlab-ui/commit/57eafc435b47fdec3a57ed8f2e0a6be4ac585ca3))
+
+# [111.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v110.1.0...v111.0.0) (2025-03-12)
+
+
+### Features
+
+* **GlLink:** Remove `BLink` from `GlLink` ([22f8323](https://gitlab.com/gitlab-org/gitlab-ui/commit/22f8323023ed9d44e2af3705c12f02ba93edd506))
+
+
+### BREAKING CHANGES
+
+* **GlLink:** Removed support for the following props:
+`append`, `event`, `exact`, `exact-path`, `exact-path-active-class`,
+`no-prefetch`, `router-component-name`, `router-tag`.
+Also removed support for `bv::link::clicked` global event.
+
 # [110.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v110.0.0...v110.1.0) (2025-03-10)
 
 

package/dist/components/base/link/link.js

@@ -1,17 +1,127 @@
-import { BLink } from '../../../vendor/bootstrap-vue/src/components/link/link';
-import { SafeLinkMixin } from '../../mixins/safe_link_mixin';
-import { isExternalURL } from '../../../directives/safe_link/safe_link';
-import { linkVariantOptions } from '../../../utils/constants';
+import isFunction from 'lodash/isFunction';
+import isString from 'lodash/isString';
+import isObject from 'lodash/isObject';
+import toString from 'lodash/toString';
+import isBoolean from 'lodash/isBoolean';
+import concat from 'lodash/concat';
+import { SafeLinkDirective, isExternalURL } from '../../../directives/safe_link/safe_link';
+import { stopEvent } from '../../../utils/utils';
+import { isEvent } from '../../../vendor/bootstrap-vue/src/utils/inspect';
+import { stringifyQueryObj } from '../../../vendor/bootstrap-vue/src/utils/router';
+import { safeVueInstance } from '../../../vendor/bootstrap-vue/src/utils/safe-vue-instance';
+import { attemptFocus, attemptBlur } from '../../../vendor/bootstrap-vue/src/utils/dom';
+import { linkVariantOptions, isVue3 } from '../../../utils/constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
+const ANCHOR_TAG = 'a';
+const NUXT_LINK_TAG = 'nuxt-link';
+const VUE_ROUTER_LINK_TAG = 'router-link';
 var script = {
   name: 'GlLink',
-  components: {
-    BLink
+  directives: {
+    SafeLink: SafeLinkDirective
   },
-  mixins: [SafeLinkMixin],
   props: {
+    /**
+     * Denotes the target URL of the link for standard links.
+     */
+    href: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    /**
+     * When set to `true`, disables the component's functionality and places it in a disabled state.
+     */
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Skips sanitization of href if true. This should be used sparingly.
+     * Consult security team before setting to true.
+     */
+    isUnsafeLink: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Sets the 'rel' attribute on the rendered link.
+     */
+    rel: {
+      type: String,
+      required: false,
+      default: null
+    },
+    /**
+     * Sets the 'target' attribute on the rendered link.
+     */
+    target: {
+      type: String,
+      required: false,
+      default: null
+    },
+    /**
+     * When set to `true`, places the component in the active state with active styling
+     */
+    active: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * <router-link> prop: Denotes the target route of the link.
+     * When clicked, the value of the to prop will be passed to `router.push()` internally,
+     * so the value can be either a string or a Location descriptor object.
+     */
+    to: {
+      type: [Object, String],
+      required: false,
+      default: undefined
+    },
+    /**
+     * <router-link> prop: Configure the active CSS class applied when the link is active.
+     */
+    activeClass: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    /**
+     * <router-link> prop: Configure the active CSS class applied when the link is active with exact match.
+     */
+    exactActiveClass: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    /**
+     * <router-link> prop: Setting the replace prop will call `router.replace()` instead of `router.push()`
+     * when clicked, so the navigation will not leave a history record.
+     */
+    replace: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * <nuxt-link> prop: To improve the responsiveness of your Nuxt.js applications, when the link will be displayed within the viewport,
+     * Nuxt.js will automatically prefetch the code splitted page. Setting `prefetch` to `true` or `false` will overwrite the default value of `router.prefetchLinks`
+     */
+    prefetch: {
+      type: Boolean,
+      required: false,
+      // Must be `null` to fall back to the value defined in the
+      // `nuxt.config.js` configuration file for `router.prefetchLinks`
+      // We convert `null` to `undefined`, so that Nuxt.js will use the
+      // compiled default
+      // Vue treats `undefined` as default of `false` for Boolean props,
+      // so we must set it as `null` here to be a true tri-state prop
+      default: null
+    },
     /**
      * If inline variant, controls ↗ character visibility
      */
@@ -31,14 +141,142 @@ var script = {
     }
   },
   computed: {
+    safeLinkConfig() {
+      return {
+        skipSanitization: this.isUnsafeLink
+      };
+    },
+    tag() {
+      const hasRouter = Boolean(safeVueInstance(this).$router);
+      const hasNuxt = Boolean(safeVueInstance(this).$nuxt);
+      if (!hasRouter || this.disabled || !this.to) {
+        return ANCHOR_TAG;
+      }
+      return hasNuxt ? NUXT_LINK_TAG : VUE_ROUTER_LINK_TAG;
+    },
+    isRouterLink() {
+      return this.tag !== ANCHOR_TAG;
+    },
+    isVue3RouterLink() {
+      return this.tag === VUE_ROUTER_LINK_TAG && isVue3;
+    },
     isInlineAndHasExternalIcon() {
-      return this.showExternalIcon && this.variant === 'inline' && this.$attrs.href && isExternalURL(this.target, this.$attrs.href);
+      return this.showExternalIcon && this.variant === 'inline' && this.href && isExternalURL(this.target, this.href);
+    },
+    computedHref() {
+      const fallback = '#';
+      const toFallback = '/';
+      const {
+        to
+      } = this;
+
+      // Return `href` when explicitly provided
+      if (this.href) {
+        return this.href;
+      }
+      if (isString(to)) {
+        return to || toFallback;
+      }
+
+      // Fallback to `to.path' + `to.query` + `to.hash` prop (if `to` is an object)
+      if (isObject(to) && (to.path || to.query || to.hash)) {
+        const path = toString(to.path);
+        const query = stringifyQueryObj(to.query);
+        let hash = toString(to.hash);
+        hash = !hash || hash.charAt(0) === '#' ? hash : `#${hash}`;
+        return `${path}${query}${hash}` || fallback;
+      }
+      return fallback;
+    },
+    computedProps() {
+      if (this.isRouterLink) {
+        return {
+          to: this.to,
+          activeClass: this.activeClass,
+          exactActiveClass: this.exactActiveClass,
+          replace: this.replace,
+          ...(isBoolean(this.prefetch) ? {
+            prefetch: this.prefetch
+          } : {})
+        };
+      }
+      return {
+        disabled: this.disabled,
+        ...(this.disabled ? {
+          'aria-disabled': 'true',
+          tabindex: '-1'
+        } : {}),
+        rel: this.rel,
+        target: this.target,
+        href: this.computedHref
+      };
     },
-    linkClasses() {
+    computedListeners() {
+      const {
+        click,
+        ...listenersWithoutClick
+      } = this.$listeners;
+      return listenersWithoutClick;
+    },
+    computedClass() {
       return ['gl-link', linkVariantOptions[this.variant], {
+        disabled: this.disabled,
+        active: this.active,
         'gl-link-inline-external': this.isInlineAndHasExternalIcon
       }];
     }
+  },
+  methods: {
+    onClick(event, navigate) {
+      const eventIsEvent = isEvent(event);
+      const suppliedHandler = this.$listeners.click;
+      if (eventIsEvent && this.disabled) {
+        // Stop event from bubbling up
+        // Kill the event loop attached to this specific `EventTarget`
+        // Needed to prevent `vue-router` from navigating
+        stopEvent(event, {
+          immediatePropagation: true
+        });
+      } else {
+        // Router links do not emit instance `click` events, so we
+        // add in an `$emit('click', event)` on its Vue instance
+        //
+        // seems not to be required for Vue3 compat build
+        if (this.isRouterLink) {
+          var _event$currentTarget$;
+          // eslint-disable-next-line no-underscore-dangle
+          (_event$currentTarget$ = event.currentTarget.__vue__) === null || _event$currentTarget$ === void 0 ? void 0 : _event$currentTarget$.$emit('click', event);
+        }
+
+        // Call the suppliedHandler(s), if any provided
+        concat([], suppliedHandler).filter(h => isFunction(h)).forEach(handler => {
+          // eslint-disable-next-line prefer-rest-params
+          handler(...arguments);
+        });
+
+        // this navigate function comes from Vue 3 router
+        // See https://router.vuejs.org/guide/advanced/extending-router-link.html#Extending-RouterLink
+        if (isFunction(navigate)) {
+          navigate(event);
+        }
+
+        // TODO: Remove deprecated 'clicked::link' event
+        this.$root.$emit('clicked::link', event);
+      }
+      // Stop scroll-to-top behavior or navigation on
+      // regular links when href is just '#'
+      if (eventIsEvent && !this.isRouterLink && this.computedHref === '#') {
+        stopEvent(event, {
+          stopPropagation: false
+        });
+      }
+    },
+    focus() {
+      attemptFocus(this.$el);
+    },
+    blur() {
+      attemptBlur(this.$el);
+    }
   }
 };
 
@@ -46,7 +284,13 @@ 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('b-link',_vm._g(_vm._b({directives:[{name:"safe-link",rawName:"v-safe-link:[safeLinkConfig]",arg:_vm.safeLinkConfig}],class:_vm.linkClasses,attrs:{"target":_vm.target}},'b-link',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.isVue3RouterLink)?_c(_vm.tag,_vm._b({tag:"component",attrs:{"custom":""},scopedSlots:_vm._u([{key:"default",fn:function(ref){
+var _obj;
+
+var routerLinkHref = ref.href;
+var isActive = ref.isActive;
+var isExactActive = ref.isExactActive;
+var navigate = ref.navigate;return [_c('a',_vm._g({directives:[{name:"safe-link",rawName:"v-safe-link:[safeLinkConfig]",arg:_vm.safeLinkConfig}],class:[_vm.computedClass, ( _obj = {}, _obj[_vm.activeClass] = isActive, _obj[_vm.exactActiveClass] = isExactActive, _obj )],attrs:{"href":routerLinkHref},on:{"click":function($event){return _vm.onClick($event, navigate)}}},_vm.computedListeners),[_vm._t("default")],2)]}}],null,true)},'component',_vm.computedProps,false)):(_vm.isRouterLink)?_c(_vm.tag,_vm._g(_vm._b({directives:[{name:"safe-link",rawName:"v-safe-link:[safeLinkConfig]",arg:_vm.safeLinkConfig}],tag:"component",class:_vm.computedClass,nativeOn:{"click":function($event){return _vm.onClick.apply(null, arguments)}}},'component',_vm.computedProps,false),_vm.computedListeners),[_vm._t("default")],2):_c(_vm.tag,_vm._g(_vm._b({directives:[{name:"safe-link",rawName:"v-safe-link:[safeLinkConfig]",arg:_vm.safeLinkConfig}],tag:"component",class:_vm.computedClass,on:{"click":_vm.onClick}},'component',_vm.computedProps,false),_vm.computedListeners),[_vm._t("default")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/charts/discrete_scatter/discrete_scatter.js

@@ -1,5 +1,4 @@
 import merge from 'lodash/merge';
-import { GRAY_200 } from '../../../tokens/build/js/tokens';
 import { defaultChartOptions, dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
@@ -98,7 +97,7 @@ var script = {
             alignWithLabel: true,
             show: true,
             lineStyle: {
-              color: GRAY_200
+              color: 'var(--gl-chart-axis-line-color)'
             }
           },
           axisLabel: {

package/dist/components/charts/heatmap/heatmap.js

@@ -1,5 +1,5 @@
 import merge from 'lodash/merge';
-import { GRAY_100, WHITE } from '../../../tokens/build/js/tokens';
+import { GL_COLOR_NEUTRAL_100, GL_COLOR_NEUTRAL_0 } from '../../../tokens/build/js/tokens';
 import { getTooltipTitle, getTooltipContent } from '../../../utils/charts/config';
 import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { heatmapHues } from '../../../utils/charts/theme';
@@ -139,7 +139,7 @@ var script = {
           right: '32px',
           show: true,
           borderWidth: 0,
-          backgroundColor: GRAY_100
+          backgroundColor: GL_COLOR_NEUTRAL_100
         },
         visualMap: {
           min,
@@ -163,7 +163,7 @@ var script = {
             show: true,
             interval: 0,
             lineStyle: {
-              color: WHITE,
+              color: GL_COLOR_NEUTRAL_0,
               width: 2
             }
           },
@@ -190,7 +190,7 @@ var script = {
             show: true,
             interval: 0,
             lineStyle: {
-              color: WHITE,
+              color: GL_COLOR_NEUTRAL_0,
               width: 2
             }
           }

package/dist/components/charts/legend/legend.js

@@ -1,5 +1,4 @@
 import * as echarts from 'echarts';
-import { GRAY_200 } from '../../../tokens/build/js/tokens';
 import { defaultFontSize } from '../../../utils/charts/config';
 import { LEGEND_AVERAGE_TEXT, LEGEND_CURRENT_TEXT, LEGEND_MIN_TEXT, LEGEND_MAX_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '../../../utils/charts/constants';
 import { engineeringNotation, average } from '../../../utils/number_utils';
@@ -155,7 +154,7 @@ var script = {
       });
     },
     getColor(color, key) {
-      return this.disabledSeries[key] ? GRAY_200 : color;
+      return this.disabledSeries[key] ? 'var(--gl-chart-axis-line-color)' : color;
     },
     suppressLastActiveSeriesLabelToggle(_ref2) {
       let {

package/dist/components/charts/line/line.js

@@ -1,5 +1,4 @@
 import merge from 'lodash/merge';
-import { GRAY_200 } from '../../../tokens/build/js/tokens';
 import { symbolSize, lineStyle, getThresholdConfig, generateAnnotationSeries, defaultChartOptions, dataZoomAdjustments, mergeSeriesToOptions, mergeAnnotationAxisToOptions, grid } from '../../../utils/charts/config';
 import { LEGEND_AVERAGE_TEXT, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
@@ -153,7 +152,7 @@ var script = {
             alignWithLabel: true,
             show: true,
             lineStyle: {
-              color: GRAY_200
+              color: 'var(--gl-chart-axis-line-color)'
             }
           }
         },

package/dist/directives/safe_link/safe_link.js

@@ -7,8 +7,11 @@ const getBaseURL = () => {
   } = window.location;
   return `${protocol}//${host}`;
 };
+const isTargetBlank = target => {
+  return target === '_blank';
+};
 const isExternalURL = (target, hostname) => {
-  return target === '_blank' && hostname !== window.location.hostname;
+  return isTargetBlank(target) && hostname !== window.location.hostname;
 };
 const secureRel = rel => {
   const rels = rel ? rel.trim().split(' ') : [];
@@ -40,13 +43,12 @@ const transform = function (el) {
   const {
     href,
     target,
-    rel,
-    hostname
+    rel
   } = el;
   if (!isSafeURL(href)) {
     el.href = 'about:blank';
   }
-  if (isExternalURL(target, hostname)) {
+  if (isTargetBlank(target)) {
     el.rel = secureRel(rel);
   }
 };