@gitlab/ui 110.0.0 → 111.0.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+# [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)
+
+
+### Features
+
+* use design tokens in Bootstrap .table class styles ([1b61082](https://gitlab.com/gitlab-org/gitlab-ui/commit/1b61082c5abcbf916fedf3ae99ec7f8b14746bdb))
+
 # [110.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v109.2.1...v110.0.0) (2025-03-07)
 
 

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