@gitlab/ui 110.1.0 → 111.0.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [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/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);
   }
 };

package/dist/utils/constants.js

@@ -1,3 +1,4 @@
+import Vue from 'vue';
 import { POSITION } from '../components/utilities/truncate/constants';
 
 const COMMA = ',';
@@ -316,5 +317,6 @@ const loadingIconVariants = {
   spinner: 'spinner',
   dots: 'dots'
 };
+const isVue3 = Boolean(Vue.Fragment);
 
-export { COMMA, CONTRAST_LEVELS, HEX_REGEX, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, animatedIconVariantOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, breadCrumbSizeOptions, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownItemVariantOptions, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputWidths, formStateOptions, iconSizeOptions, iconVariantOptions, keyboard, labelColorOptions, linkVariantOptions, loadingIconSizes, loadingIconVariants, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, progressBarVariantOptions, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, viewModeOptions };
+export { COMMA, CONTRAST_LEVELS, HEX_REGEX, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, animatedIconVariantOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, breadCrumbSizeOptions, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownItemVariantOptions, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputWidths, formStateOptions, iconSizeOptions, iconVariantOptions, isVue3, keyboard, labelColorOptions, linkVariantOptions, loadingIconSizes, loadingIconVariants, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, progressBarVariantOptions, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, viewModeOptions };

package/dist/utils/is_slot_empty.js

@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import { isVue3 } from './constants';
 
 // Fragment will be available only in Vue.js 3
 const {
@@ -30,7 +31,6 @@ function isVnodeEmpty(vnode) {
 }
 function isSlotEmpty(vueInstance, slot, slotArgs) {
   var _vueInstance$$scopedS, _vueInstance$$scopedS2;
-  const isVue3 = Boolean(Fragment);
   const slotContent = isVue3 ?
   // we need to check both $slots and $scopedSlots due to https://github.com/vuejs/core/issues/8869
   // additionally, in @vue/compat $slot might be a function instead of array of vnodes (sigh)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "110.1.0",
+  "version": "111.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -36,9 +36,8 @@
     "build-tokens": "make tokens",
     "build-migration-script": "esbuild --bundle --platform=node --target=esnext --outfile=bin/migrate_custom_utils_to_tw.bundled.mjs --format=esm --banner:js=\"import { createRequire as __gl__createRequire } from 'node:module'; const require = __gl__createRequire(import.meta.url);\" bin/migrate_custom_utils_to_tw.mjs",
     "clean": "rm -r dist storybook",
-    "cy:a11y": "cypress run --browser chrome --env grepTags=@a11y",
-    "cy:edge": "cypress run --browser edge --env grepTags=-@a11y+-@storybook",
-    "cy:run": "cypress run --browser firefox --env grepTags=-@a11y+-@storybook",
+    "cy:edge": "cypress run --browser edge --env grepTags=-@storybook",
+    "cy:run": "cypress run --browser firefox --env grepTags=-@storybook",
     "start": "yarn storybook",
     "storybook": "yarn storybook:prepare && storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port ${STORYBOOK_PORT:-9001} -c .storybook",
     "storybook-vue3": "yarn storybook:prepare && VUE_VERSION=3 storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port ${STORYBOOK_PORT:-9001} -c .storybook",
@@ -49,7 +48,7 @@
     "storybook:run": "npx http-server -bgs -p ${STORYBOOK_PORT:-9001} ./storybook",
     "pretest:unit": "yarn build-tokens",
     "test": "run-s test:unit test:visual",
-    "test:integration": "yarn run test:integration:server 'yarn cy:run && yarn cy:edge && yarn cy:a11y'",
+    "test:integration": "yarn run test:integration:server 'yarn cy:run && yarn cy:edge'",
     "test:integration:server": "NODE_ENV=test start-test storybook:run http-get://${STORYBOOK_HOST:-localhost}:${STORYBOOK_PORT:-9001}/iframe.html",
     "test:unit": "NODE_ENV=test jest",
     "test:unit:watch": "yarn test:unit --watch",
@@ -140,12 +139,10 @@
     "acorn": "^8.11.3",
     "acorn-walk": "^8.3.2",
     "autoprefixer": "^9.7.6",
-    "axe-core": "^4.2.3",
     "axe-playwright": "^2.1.0",
     "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
     "cypress": "14.1.0",
-    "cypress-axe": "^1.4.0",
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.0.0",
@@ -173,8 +170,8 @@
     "npm-run-all": "^4.1.5",
     "patch-package": "^8.0.0",
     "pikaday": "^1.8.0",
-    "playwright": "^1.50.1",
-    "playwright-core": "^1.50.1",
+    "playwright": "^1.51.0",
+    "playwright-core": "^1.51.0",
     "postcss": "8.4.28",
     "postcss-loader": "^7.0.2",
     "postcss-scss": "4.0.4",
@@ -208,11 +205,6 @@
     "yargs": "^17.3.1",
     "yarn-deduplicate": "^6.0.2"
   },
-  "overrides": {
-    "cypress-axe": {
-      "axe-core": "4.2.3"
-    }
-  },
   "release": {
     "branches": [
       "main"

package/src/components/base/link/link.md

@@ -18,6 +18,115 @@
 - **Mention**: Indicates when a user is "@" mentioned in the content. The username links to the
   user's profile. A mention link can be within body or meta content.
 
+Use `<gl-link>` to render links. It can render standard `<a>` elements,
+and also Vue Router and Nuxt links.
+
+```html
+<gl-link href="#foo">Link</gl-link>
+```
+
+## Link type
+
+By specifying a value in the `href` prop, a standard link (`<a>`) element will be rendered. To
+generate a `<router-link>` instead, specify the route location via the `to` prop.
+
+### Router links
+
+Router links support various additional props.
+
+If your app is running under [Nuxt.js](https://nuxtjs.org), the
+[`<nuxt-link>`](https://nuxtjs.org/api/components-nuxt-link) component will be used instead of
+`<router-link>`. The `<nuxt-link>` component supports all the same features as `<router-link>` (as
+it is a wrapper component for `<router-link>`) and more.
+
+#### `to`
+
+- type: `string | Location`
+- required to generate a `<router-link>`
+
+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.
+
+```html
+<!-- Literal string -->
+<gl-link to="home">Home</gl-link>
+<!-- Renders to -->
+<a href="home">Home</a>
+
+<!-- Omitting `v-bind` is fine, just as binding any other prop -->
+<gl-link :to="'home'">Home</gl-link>
+
+<!-- Same as above -->
+<gl-link :to="{ path: 'home' }">Home</gl-link>
+
+<!-- Named route -->
+<gl-link :to="{ name: 'user', params: { userId: 123 } }">User</gl-link>
+
+<!-- With query, resulting in `/register?plan=private` -->
+<gl-link :to="{ path: 'register', query: { plan: 'private' } }">Register</gl-link>
+
+<!-- Render a non-router link by omitting `to` and specifying an `href` -->
+<gl-link href="/home">Home</gl-link>
+```
+
+#### `replace`
+
+- type: `boolean`
+- default: `false`
+
+Setting `replace` prop will call `router.replace()` instead of `router.push()` when clicked, so the
+navigation will not leave a history record.
+
+```html
+<gl-link :to="{ path: '/abc'}" replace></gl-link>
+```
+
+#### `active-class`
+
+- type: `string`
+- default: `'router-link-active'` (`'nuxt-link-active'` when using Nuxt.js)
+
+Configure the active CSS class applied when the link is active. Note the default value can also be
+configured globally via the `linkActiveClass`
+[router constructor option](https://router.vuejs.org/api/#linkactiveclass).
+
+With components that support router links (have a `to` prop), you will want to set this to the class
+`'active'` (or a space separated string that includes `'active'`) to apply Bootstrap's active
+styling on the component when the current route matches the `to` prop.
+
+#### `exact-active-class`
+
+- type: `string`
+- default: `'router-link-exact-active'` (`'nuxt-link-exact-active'` when using Nuxt.js)
+- availability: Vue Router 2.5.0+
+
+Configure the active CSS class applied when the link is active with exact match. Note the default
+value can also be configured globally via the `linkExactActiveClass`
+[router constructor option](https://router.vuejs.org/api/#linkexactactiveclass).
+
+With components that support router links (have a `to` prop), you will want to set this to the class
+`'active'` (or a space separated string that includes `'active'`) to apply Bootstrap's active
+styling on the component when the current route matches the `to` prop.
+
+## Links with `href="#"`
+
+Typically `<a href="#">` will cause the document to scroll to the top of page when clicked.
+`<gl-link>` addresses this by preventing the default action (scroll to top) when `href` is set to
+`#`.
+
+If you need scroll to top behaviour, use a standard `<a href="#">...</a>` tag.
+
+## Link disabled state
+
+Disable link functionality by setting the `disabled` prop to true.
+
+```html
+<gl-link href="#foo" disabled>Disabled Link</gl-link>
+```
+
+Disabling a link handles stopping event propagation, preventing the default action from occurring,
+and removing the link from the document tab sequence (`tabindex="-1"`).
+
 ## Security
 
 This component implements a few security measures to make it as safe as possible by default.

package/src/components/base/link/link.vue

@@ -1,17 +1,128 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
-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';
+
+const ANCHOR_TAG = 'a';
+const NUXT_LINK_TAG = 'nuxt-link';
+const VUE_ROUTER_LINK_TAG = 'router-link';
 
 export default {
   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,33 +142,187 @@ export default {
     },
   },
   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)
+        this.href &&
+        isExternalURL(this.target, this.href)
       );
     },
-    linkClasses() {
+    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,
+      };
+    },
+    computedListeners() {
+      const { click, ...listenersWithoutClick } = this.$listeners;
+
+      return listenersWithoutClick;
+    },
+    computedClass() {
       return [
         'gl-link',
         linkVariantOptions[this.variant],
-        { 'gl-link-inline-external': this.isInlineAndHasExternalIcon },
+        {
+          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) {
+          // eslint-disable-next-line no-underscore-dangle
+          event.currentTarget.__vue__?.$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);
+    },
+  },
 };
 </script>
+
 <template>
-  <b-link
+  <component
+    :is="tag"
+    v-if="isVue3RouterLink"
+    #default="{ href: routerLinkHref, isActive, isExactActive, navigate }"
+    v-bind="computedProps"
+    custom
+  >
+    <a
+      v-safe-link:[safeLinkConfig]
+      :class="[computedClass, { [activeClass]: isActive, [exactActiveClass]: isExactActive }]"
+      :href="routerLinkHref"
+      v-on="computedListeners"
+      @click="onClick($event, navigate)"
+    >
+      <slot></slot>
+    </a>
+  </component>
+  <component
+    :is="tag"
+    v-else-if="isRouterLink"
+    v-safe-link:[safeLinkConfig]
+    v-bind="computedProps"
+    :class="computedClass"
+    v-on="computedListeners"
+    @click.native="onClick"
+  >
+    <slot></slot>
+  </component>
+  <component
+    :is="tag"
+    v-else
     v-safe-link:[safeLinkConfig]
-    v-bind="$attrs"
-    :target="target"
-    :class="linkClasses"
-    v-on="$listeners"
+    v-bind="computedProps"
+    :class="computedClass"
+    v-on="computedListeners"
+    @click="onClick"
   >
-    <!-- @slot The link to display. -->
     <slot></slot>
-  </b-link>
+  </component>
 </template>

package/src/directives/safe_link/safe_link.js

@@ -5,8 +5,12 @@ const getBaseURL = () => {
   return `${protocol}//${host}`;
 };
 
+const isTargetBlank = (target) => {
+  return target === '_blank';
+};
+
 export const isExternalURL = (target, hostname) => {
-  return target === '_blank' && hostname !== window.location.hostname;
+  return isTargetBlank(target) && hostname !== window.location.hostname;
 };
 
 const secureRel = (rel) => {
@@ -35,13 +39,13 @@ const transform = (el, { arg: { skipSanitization = false } = {} } = {}) => {
     return;
   }
 
-  const { href, target, rel, hostname } = el;
+  const { href, target, rel } = el;
 
   if (!isSafeURL(href)) {
     el.href = 'about:blank';
   }
 
-  if (isExternalURL(target, hostname)) {
+  if (isTargetBlank(target)) {
     el.rel = secureRel(rel);
   }
 };

package/src/utils/constants.js

@@ -1,3 +1,4 @@
+import Vue from 'vue';
 import { POSITION } from '../components/utilities/truncate/constants';
 
 export const COMMA = ',';
@@ -372,3 +373,5 @@ export const loadingIconVariants = {
   spinner: 'spinner',
   dots: 'dots',
 };
+
+export const isVue3 = Boolean(Vue.Fragment);

package/src/utils/is_slot_empty.js

@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import { isVue3 } from './constants';
 
 // Fragment will be available only in Vue.js 3
 const { Fragment, Comment, Text } = Vue;
@@ -32,8 +33,6 @@ export function isVnodeEmpty(vnode) {
 }
 
 export function isSlotEmpty(vueInstance, slot, slotArgs) {
-  const isVue3 = Boolean(Fragment);
-
   const slotContent = isVue3
     ? // we need to check both $slots and $scopedSlots due to https://github.com/vuejs/core/issues/8869
       // additionally, in @vue/compat $slot might be a function instead of array of vnodes (sigh)