@gitlab/ui 111.5.0 → 111.6.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [111.6.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v111.5.0...v111.6.0) (2025-03-25)
+
+
+### Bug Fixes
+
+* **GlLink:** fix passing of attributes to Vue 3 RouterLink ([0e2632d](https://gitlab.com/gitlab-org/gitlab-ui/commit/0e2632d609985500713c1c10dbe48548eb1f4317))
+
+
+### Features
+
+* **GlDatepicker:** Add global firstDay config ([4b3c9a8](https://gitlab.com/gitlab-org/gitlab-ui/commit/4b3c9a8fc21b534245274d30dee86562d48250bb))
+
 # [111.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v111.4.0...v111.5.0) (2025-03-20)
 
 

package/dist/components/base/accordion/accordion.js

@@ -1,15 +1,14 @@
-import uniqueId from 'lodash/uniqueId';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
   name: 'GlAccordion',
   provide() {
-    const accordionId = uniqueId('accordion-set-');
-    // temporary fix for this issue: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2019#note_514671251
-    // MR for the upstream pending: https://github.com/vuejs/apollo/pull/1153
     return {
+      // temporary fix for this issue: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2019#note_514671251
+      // MR for the upstream pending: https://github.com/vuejs/apollo/pull/1153
+      // Track removing this workaround in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/3152
       defaultHeaderLevel: () => this.headerLevel,
-      accordionSetId: () => this.autoCollapse && accordionId
+      autoCollapse: () => this.autoCollapse
     };
   },
   props: {

package/dist/components/base/accordion/accordion_item.js

@@ -1,21 +1,18 @@
 import uniqueId from 'lodash/uniqueId';
-import { BCollapse } from '../../../vendor/bootstrap-vue/src/components/collapse/collapse';
+import GlCollapse from '../collapse/collapse';
 import GlAnimatedChevronRightDownIcon from '../animated_icon/animated_chevron_right_down_icon';
-import { GlCollapseToggleDirective } from '../../../directives/collapse_toggle';
 import GlButton from '../button/button';
+import { COLLAPSE_EVENT } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
   name: 'GlAccordionItem',
   components: {
-    BCollapse,
+    GlCollapse,
     GlButton,
     GlAnimatedChevronRightDownIcon
   },
-  directives: {
-    GlCollapseToggle: GlCollapseToggleDirective
-  },
-  inject: ['accordionSetId', 'defaultHeaderLevel'],
+  inject: ['defaultHeaderLevel', 'autoCollapse'],
   inheritAttrs: false,
   model: {
     prop: 'visible',
@@ -68,7 +65,7 @@ var script = {
   data() {
     return {
       accordionItemId: uniqueId('accordion-item-'),
-      isVisible: this.visible
+      localVisible: this.visible
     };
   },
   computed: {
@@ -76,18 +73,49 @@ var script = {
       const level = this.headerLevel || this.defaultHeaderLevel();
       return `h${level}`;
     },
-    accordion() {
-      return this.accordionSetId() || undefined;
-    },
     buttonTitle() {
-      return this.isVisible && this.titleVisible ? this.titleVisible : this.title;
+      return this.localVisible && this.titleVisible ? this.titleVisible : this.title;
     }
   },
   watch: {
-    isVisible: {
-      immediate: true,
-      handler(isVisible) {
-        this.$emit('input', isVisible);
+    visible: {
+      handler(newVisible) {
+        this.localVisible = newVisible;
+        this.checkAndCollapseSiblingAccordionItems(newVisible);
+      }
+    }
+  },
+  created() {
+    this.$emit('input', this.localVisible);
+  },
+  mounted() {
+    this.$parent.$el.addEventListener(COLLAPSE_EVENT, this.onParentCollapse);
+  },
+  beforeDestroy() {
+    this.$parent.$el.removeEventListener(COLLAPSE_EVENT, this.onParentCollapse);
+  },
+  methods: {
+    onParentCollapse(_ref) {
+      let {
+        detail: accordionItemId
+      } = _ref;
+      if (accordionItemId === this.accordionItemId) {
+        return;
+      }
+      this.$emit('input', false);
+      this.localVisible = false;
+    },
+    onButtonClick() {
+      const newLocalVisible = !this.localVisible;
+      this.$emit('input', newLocalVisible);
+      this.localVisible = newLocalVisible;
+      this.checkAndCollapseSiblingAccordionItems(newLocalVisible);
+    },
+    checkAndCollapseSiblingAccordionItems(newVisible) {
+      if (this.autoCollapse() && newVisible) {
+        this.$parent.$el.dispatchEvent(new CustomEvent(COLLAPSE_EVENT, {
+          detail: this.accordionItemId
+        }));
       }
     }
   }
@@ -97,7 +125,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',{staticClass:"gl-accordion-item"},[_c(_vm.headerComponent,{tag:"component",staticClass:"gl-accordion-item-header",class:_vm.headerClass},[_c('gl-button',{directives:[{name:"gl-collapse-toggle",rawName:"v-gl-collapse-toggle",value:(_vm.accordionItemId),expression:"accordionItemId"}],attrs:{"variant":"link","button-text-classes":"gl-flex"}},[_c('gl-animated-chevron-right-down-icon',{attrs:{"is-on":_vm.isVisible}}),_vm._v("\n      "+_vm._s(_vm.buttonTitle)+"\n    ")],1)],1),_vm._v(" "),_c('b-collapse',{staticClass:"gl-mt-3 gl-text-base",attrs:{"id":_vm.accordionItemId,"visible":_vm.isVisible,"accordion":_vm.accordion,"data-testid":("accordion-item-collapse-" + _vm.accordionItemId)},model:{value:(_vm.isVisible),callback:function ($$v) {_vm.isVisible=$$v;},expression:"isVisible"}},[_vm._t("default")],2)],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-accordion-item"},[_c(_vm.headerComponent,{tag:"component",staticClass:"gl-accordion-item-header",class:_vm.headerClass},[_c('gl-button',{attrs:{"variant":"link","button-text-classes":"gl-flex","aria-expanded":_vm.localVisible ? 'true' : 'false',"aria-controls":_vm.accordionItemId},on:{"click":_vm.onButtonClick}},[_c('gl-animated-chevron-right-down-icon',{attrs:{"is-on":_vm.localVisible}}),_vm._v("\n      "+_vm._s(_vm.buttonTitle)+"\n    ")],1)],1),_vm._v(" "),_c('gl-collapse',{attrs:{"id":_vm.accordionItemId,"data-testid":("accordion-item-collapse-" + _vm.accordionItemId)},model:{value:(_vm.localVisible),callback:function ($$v) {_vm.localVisible=$$v;},expression:"localVisible"}},[_c('div',{staticClass:"gl-mt-3 gl-text-base"},[_vm._t("default")],2)])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/accordion/constants.js

@@ -0,0 +1,3 @@
+const COLLAPSE_EVENT = 'collapse';
+
+export { COLLAPSE_EVENT };

package/dist/components/base/datepicker/datepicker.js

@@ -1,5 +1,6 @@
 import isString from 'lodash/isString';
 import Pikaday from 'pikaday';
+import { defaultConfig } from '../../../config';
 import { defaultDateFormat, datepickerWidthOptionsMap } from '../../../utils/constants';
 import { areDatesEqual } from '../../../utils/datetime_utility';
 import GlButton from '../button/button';
@@ -119,7 +120,7 @@ var script = {
     firstDay: {
       type: Number,
       required: false,
-      default: 0
+      default: () => defaultConfig.firstDayOfWeek || 0 // Defaults to 0 (Sunday)
     },
     ariaLabel: {
       type: String,

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

@@ -22,6 +22,7 @@ var script = {
   directives: {
     SafeLink: SafeLinkDirective
   },
+  inheritAttrs: false,
   props: {
     /**
      * Denotes the target URL of the link for standard links.
@@ -189,15 +190,22 @@ var script = {
       return fallback;
     },
     computedProps() {
+      const baseRouterLinkProps = {
+        to: this.to,
+        activeClass: this.activeClass,
+        exactActiveClass: this.exactActiveClass,
+        replace: this.replace,
+        ...(isBoolean(this.prefetch) ? {
+          prefetch: this.prefetch
+        } : {})
+      };
       if (this.isRouterLink) {
+        if (this.isVue3RouterLink) {
+          return baseRouterLinkProps;
+        }
         return {
-          to: this.to,
-          activeClass: this.activeClass,
-          exactActiveClass: this.exactActiveClass,
-          replace: this.replace,
-          ...(isBoolean(this.prefetch) ? {
-            prefetch: this.prefetch
-          } : {})
+          ...baseRouterLinkProps,
+          ...this.$attrs
         };
       }
       return {
@@ -208,7 +216,8 @@ var script = {
         } : {}),
         rel: this.rel,
         target: this.target,
-        href: this.computedHref
+        href: this.computedHref,
+        ...this.$attrs
       };
     },
     computedListeners() {
@@ -293,7 +302,7 @@ 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 navigate = ref.navigate;return [_c('a',_vm._g(_vm._b({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)}}},'a',_vm.$attrs,false),_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/config.js

@@ -32,6 +32,9 @@ try {
   // localStorage doesn't exist (or the value is not properly formatted)
 }
 const i18n = translationKeys;
+const defaultConfig = {
+  firstDayOfWeek: 0 // Defaults to 0 (Sunday)
+};
 let configured = false;
 
 /**
@@ -40,10 +43,12 @@ let configured = false;
  * @typedef {object} GitLabUIConfiguration
  * @template TValue=string
  * @property {undefined | Object} translations Generic translations for component labels to fall back to.
+ * @property {undefined | Number} firstDayOfWeek Configured first day of the week, from 0 (Sunday) to 6 (Saturday).
  */
 const setConfigs = function () {
   let {
-    translations
+    translations,
+    firstDayOfWeek
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   if (configured) {
     if (process.env.NODE_ENV === 'development') {
@@ -58,6 +63,9 @@ const setConfigs = function () {
       delay: popoverDelayConfig
     }
   });
+  if (typeof firstDayOfWeek === 'number' && firstDayOfWeek >= 0 && firstDayOfWeek <= 6) {
+    defaultConfig.firstDayOfWeek = firstDayOfWeek;
+  }
   if (typeof translations === 'object') {
     if (process.env.NODE_ENV === 'development') {
       const undefinedTranslationKeys = Object.keys(i18n).reduce((acc, current) => {
@@ -78,4 +86,4 @@ const setConfigs = function () {
 };
 
 export default setConfigs;
-export { i18n };
+export { defaultConfig, i18n };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "111.5.0",
+  "version": "111.6.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -170,8 +170,8 @@
     "npm-run-all": "^4.1.5",
     "patch-package": "^8.0.0",
     "pikaday": "^1.8.0",
-    "playwright": "^1.51.0",
-    "playwright-core": "^1.51.0",
+    "playwright": "^1.51.1",
+    "playwright-core": "^1.51.1",
     "postcss": "8.4.28",
     "postcss-loader": "^7.0.2",
     "postcss-scss": "4.0.4",

package/src/components/base/accordion/accordion.vue

@@ -1,15 +1,13 @@
 <script>
-import uniqueId from 'lodash/uniqueId';
-
 export default {
   name: 'GlAccordion',
   provide() {
-    const accordionId = uniqueId('accordion-set-');
-    // temporary fix for this issue: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2019#note_514671251
-    // MR for the upstream pending: https://github.com/vuejs/apollo/pull/1153
     return {
+      // temporary fix for this issue: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2019#note_514671251
+      // MR for the upstream pending: https://github.com/vuejs/apollo/pull/1153
+      // Track removing this workaround in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/3152
       defaultHeaderLevel: () => this.headerLevel,
-      accordionSetId: () => this.autoCollapse && accordionId,
+      autoCollapse: () => this.autoCollapse,
     };
   },
   props: {

package/src/components/base/accordion/accordion_item.vue

@@ -1,21 +1,18 @@
 <script>
 import uniqueId from 'lodash/uniqueId';
-import { BCollapse } from '../../../vendor/bootstrap-vue/src/components/collapse/collapse';
+import GlCollapse from '../collapse/collapse.vue';
 import GlAnimatedChevronRightDownIcon from '../animated_icon/animated_chevron_right_down_icon.vue';
-import { GlCollapseToggleDirective } from '../../../directives/collapse_toggle';
 import GlButton from '../button/button.vue';
+import { COLLAPSE_EVENT } from './constants';
 
 export default {
   name: 'GlAccordionItem',
   components: {
-    BCollapse,
+    GlCollapse,
     GlButton,
     GlAnimatedChevronRightDownIcon,
   },
-  directives: {
-    GlCollapseToggle: GlCollapseToggleDirective,
-  },
-  inject: ['accordionSetId', 'defaultHeaderLevel'],
+  inject: ['defaultHeaderLevel', 'autoCollapse'],
   inheritAttrs: false,
   model: {
     prop: 'visible',
@@ -68,7 +65,7 @@ export default {
   data() {
     return {
       accordionItemId: uniqueId('accordion-item-'),
-      isVisible: this.visible,
+      localVisible: this.visible,
     };
   },
   computed: {
@@ -76,21 +73,54 @@ export default {
       const level = this.headerLevel || this.defaultHeaderLevel();
       return `h${level}`;
     },
-    accordion() {
-      return this.accordionSetId() || undefined;
-    },
     buttonTitle() {
-      return this.isVisible && this.titleVisible ? this.titleVisible : this.title;
+      return this.localVisible && this.titleVisible ? this.titleVisible : this.title;
     },
   },
+
   watch: {
-    isVisible: {
-      immediate: true,
-      handler(isVisible) {
-        this.$emit('input', isVisible);
+    visible: {
+      handler(newVisible) {
+        this.localVisible = newVisible;
+
+        this.checkAndCollapseSiblingAccordionItems(newVisible);
       },
     },
   },
+  created() {
+    this.$emit('input', this.localVisible);
+  },
+  mounted() {
+    this.$parent.$el.addEventListener(COLLAPSE_EVENT, this.onParentCollapse);
+  },
+  beforeDestroy() {
+    this.$parent.$el.removeEventListener(COLLAPSE_EVENT, this.onParentCollapse);
+  },
+  methods: {
+    onParentCollapse({ detail: accordionItemId }) {
+      if (accordionItemId === this.accordionItemId) {
+        return;
+      }
+
+      this.$emit('input', false);
+      this.localVisible = false;
+    },
+    onButtonClick() {
+      const newLocalVisible = !this.localVisible;
+
+      this.$emit('input', newLocalVisible);
+      this.localVisible = newLocalVisible;
+
+      this.checkAndCollapseSiblingAccordionItems(newLocalVisible);
+    },
+    checkAndCollapseSiblingAccordionItems(newVisible) {
+      if (this.autoCollapse() && newVisible) {
+        this.$parent.$el.dispatchEvent(
+          new CustomEvent(COLLAPSE_EVENT, { detail: this.accordionItemId })
+        );
+      }
+    },
+  },
 };
 </script>
 
@@ -98,24 +128,25 @@ export default {
   <div class="gl-accordion-item">
     <component :is="headerComponent" class="gl-accordion-item-header" :class="headerClass">
       <gl-button
-        v-gl-collapse-toggle="accordionItemId"
         variant="link"
         button-text-classes="gl-flex"
+        :aria-expanded="localVisible ? 'true' : 'false'"
+        :aria-controls="accordionItemId"
+        @click="onButtonClick"
       >
-        <gl-animated-chevron-right-down-icon :is-on="isVisible" />
+        <gl-animated-chevron-right-down-icon :is-on="localVisible" />
         {{ buttonTitle }}
       </gl-button>
     </component>
-    <b-collapse
+    <gl-collapse
       :id="accordionItemId"
-      v-model="isVisible"
-      :visible="isVisible"
-      :accordion="accordion"
-      class="gl-mt-3 gl-text-base"
+      v-model="localVisible"
       :data-testid="`accordion-item-collapse-${accordionItemId}`"
     >
-      <!-- @slot Item content -->
-      <slot></slot>
-    </b-collapse>
+      <div class="gl-mt-3 gl-text-base">
+        <!-- @slot Item content -->
+        <slot></slot>
+      </div>
+    </gl-collapse>
   </div>
 </template>

package/src/components/base/accordion/constants.js

@@ -0,0 +1 @@
+export const COLLAPSE_EVENT = 'collapse';

package/src/components/base/datepicker/datepicker.vue

@@ -2,6 +2,7 @@
 <script>
 import isString from 'lodash/isString';
 import Pikaday from 'pikaday';
+import { defaultConfig } from '../../../config';
 import { defaultDateFormat, datepickerWidthOptionsMap } from '../../../utils/constants';
 import { areDatesEqual } from '../../../utils/datetime_utility';
 import GlButton from '../button/button.vue';
@@ -120,7 +121,7 @@ export default {
     firstDay: {
       type: Number,
       required: false,
-      default: 0,
+      default: () => defaultConfig.firstDayOfWeek || 0, // Defaults to 0 (Sunday)
     },
     ariaLabel: {
       type: String,

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

@@ -28,6 +28,7 @@ export default {
   directives: {
     SafeLink: SafeLinkDirective,
   },
+  inheritAttrs: false,
   props: {
     /**
      * Denotes the target URL of the link for standard links.
@@ -202,13 +203,22 @@ export default {
       return fallback;
     },
     computedProps() {
+      const baseRouterLinkProps = {
+        to: this.to,
+        activeClass: this.activeClass,
+        exactActiveClass: this.exactActiveClass,
+        replace: this.replace,
+        ...(isBoolean(this.prefetch) ? { prefetch: this.prefetch } : {}),
+      };
+
       if (this.isRouterLink) {
+        if (this.isVue3RouterLink) {
+          return baseRouterLinkProps;
+        }
+
         return {
-          to: this.to,
-          activeClass: this.activeClass,
-          exactActiveClass: this.exactActiveClass,
-          replace: this.replace,
-          ...(isBoolean(this.prefetch) ? { prefetch: this.prefetch } : {}),
+          ...baseRouterLinkProps,
+          ...this.$attrs,
         };
       }
 
@@ -218,6 +228,7 @@ export default {
         rel: this.rel,
         target: this.target,
         href: this.computedHref,
+        ...this.$attrs,
       };
     },
     computedListeners() {
@@ -306,6 +317,7 @@ export default {
       v-safe-link:[safeLinkConfig]
       :class="[computedClass, { [activeClass]: isActive, [exactActiveClass]: isExactActive }]"
       :href="routerLinkHref"
+      v-bind="$attrs"
       v-on="computedListeners"
       @click="onClick($event, navigate)"
     >

package/src/config.js

@@ -35,6 +35,10 @@ try {
 
 export const i18n = translationKeys;
 
+export const defaultConfig = {
+  firstDayOfWeek: 0, // Defaults to 0 (Sunday)
+};
+
 let configured = false;
 
 /**
@@ -43,8 +47,9 @@ let configured = false;
  * @typedef {object} GitLabUIConfiguration
  * @template TValue=string
  * @property {undefined | Object} translations Generic translations for component labels to fall back to.
+ * @property {undefined | Number} firstDayOfWeek Configured first day of the week, from 0 (Sunday) to 6 (Saturday).
  */
-const setConfigs = ({ translations } = {}) => {
+const setConfigs = ({ translations, firstDayOfWeek } = {}) => {
   if (configured) {
     if (process.env.NODE_ENV === 'development') {
       throw new Error('GitLab UI can only be configured once!');
@@ -61,6 +66,10 @@ const setConfigs = ({ translations } = {}) => {
     },
   });
 
+  if (typeof firstDayOfWeek === 'number' && firstDayOfWeek >= 0 && firstDayOfWeek <= 6) {
+    defaultConfig.firstDayOfWeek = firstDayOfWeek;
+  }
+
   if (typeof translations === 'object') {
     if (process.env.NODE_ENV === 'development') {
       const undefinedTranslationKeys = Object.keys(i18n).reduce((acc, current) => {