@gitlab/ui 85.11.0 → 85.12.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [85.12.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v85.12.0...v85.12.1) (2024-06-28)
+
+
+### Bug Fixes
+
+* **GlBadge:** Fix shrinking in flex layout ([161aaa8](https://gitlab.com/gitlab-org/gitlab-ui/commit/161aaa88196825a84485e4e59347a4838be9b477))
+
+# [85.12.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v85.11.0...v85.12.0) (2024-06-28)
+
+
+### Features
+
+* **i18n:** add support for parameterized/pluralized translations ([468e66d](https://gitlab.com/gitlab-org/gitlab-ui/commit/468e66d068913b392e0b4e5497650f57a8240f5c))
+
 # [85.11.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v85.10.0...v85.11.0) (2024-06-28)
 
 

package/dist/components/base/badge/badge.js

@@ -68,7 +68,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('b-badge',_vm._b({staticClass:"gl-badge",class:{ 'gl-px-2!': !_vm.$scopedSlots.default },attrs:{"variant":_vm.variant,"role":_vm.role,"aria-label":_vm.ariaLabel,"pill":""}},'b-badge',_vm.$attrs,false),[(_vm.icon)?_c('gl-icon',{staticClass:"gl-badge-icon",class:{ '-gl-ml-2 gl-ml-n2': _vm.isCircularIcon },attrs:{"size":_vm.iconSizeComputed,"name":_vm.icon}}):_vm._e(),_vm._v(" "),_vm._t("default")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-badge',_vm._b({staticClass:"gl-badge",class:{ 'gl-px-2!': !_vm.$scopedSlots.default },attrs:{"variant":_vm.variant,"role":_vm.role,"aria-label":_vm.ariaLabel,"pill":""}},'b-badge',_vm.$attrs,false),[(_vm.icon)?_c('gl-icon',{staticClass:"gl-badge-icon",class:{ '-gl-ml-2 gl-ml-n2': _vm.isCircularIcon },attrs:{"size":_vm.iconSizeComputed,"name":_vm.icon}}):_vm._e(),_vm._v(" "),(_vm.$slots.default)?_c('span',{staticClass:"gl-badge-content"},[_vm._t("default")],2):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/new_dropdowns/listbox/listbox.js

@@ -9,7 +9,7 @@ import GlLoadingIcon from '../../loading_icon/loading_icon';
 import GlIntersectionObserver from '../../../utilities/intersection_observer/intersection_observer';
 import GlSearchBoxByType from '../../search_box_by_type/search_box_by_type';
 import GlBaseDropdown from '../base_dropdown/base_dropdown';
-import { translate } from '../../../../utils/i18n';
+import { translatePlural } from '../../../../utils/i18n';
 import GlListboxItem from './listbox_item';
 import GlListboxSearchInput from './listbox_search_input';
 import GlListboxGroup from './listbox_group';
@@ -327,13 +327,7 @@ var script = {
     srOnlyResultsLabel: {
       type: Function,
       required: false,
-      default: count => {
-        const fn = translate('GlCollapsibleListbox.srOnlyResultsLabel', 'Results count');
-        if (typeof fn === 'function') {
-          return fn(count);
-        }
-        return `${count} result${count > 1 ? 's' : ''}`;
-      }
+      default: translatePlural('GlCollapsibleListbox.srOnlyResultsLabel', '%d result', '%d results')
     }
   },
   data() {

package/dist/components/base/pagination/pagination.js

@@ -3,6 +3,7 @@ import isFunction from 'lodash/isFunction';
 import range from 'lodash/range';
 import { breakpoints, GlBreakpointInstance } from '../../../utils/breakpoints';
 import { alignOptions, resizeDebounceTime } from '../../../utils/constants';
+import { translate, sprintf } from '../../../utils/i18n';
 import GlIcon from '../icon/icon';
 import GlLink from '../link/link';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -144,9 +145,10 @@ var script = {
      * aria-label getter for numbered page items, defaults to "Go to page <page_number>"
      */
     labelPage: {
-      type: Function,
+      // note: `Function` support is for legacy reasons
+      type: [Function, String],
       required: false,
-      default: page => `Go to page ${page}`
+      default: translate('GlPagination.labelPage', 'Go to page %{page}')
     },
     /**
      * Controls the component\'s horizontal alignment, value should be one of "left", "center", "right" or "fill"
@@ -244,10 +246,10 @@ var script = {
       return this.pageIsDisabled(this.value + 1);
     },
     prevPageAriaLabel() {
-      return this.prevPageIsDisabled ? false : this.labelPrevPage || this.labelPage(this.value - 1);
+      return this.prevPageIsDisabled ? false : this.labelPrevPage || this.labelForPage(this.value - 1);
     },
     nextPageAriaLabel() {
-      return this.nextPageIsDisabled ? false : this.labelNextPage || this.labelPage(this.value + 1);
+      return this.nextPageIsDisabled ? false : this.labelNextPage || this.labelForPage(this.value + 1);
     },
     prevPageHref() {
       if (this.prevPageIsDisabled) return false;
@@ -267,6 +269,14 @@ var script = {
     window.removeEventListener('resize', debounce(this.setBreakpoint, resizeDebounceTime));
   },
   methods: {
+    labelForPage(page) {
+      if (isFunction(this.labelPage)) {
+        return this.labelPage(page);
+      }
+      return sprintf(this.labelPage, {
+        page
+      });
+    },
     setBreakpoint() {
       this.breakpoint = GlBreakpointInstance.getBreakpointSize();
     },
@@ -276,7 +286,7 @@ var script = {
     getPageItem(page) {
       let label = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
       const commonAttrs = {
-        'aria-label': label || this.labelPage(page),
+        'aria-label': label || this.labelForPage(page),
         href: '#',
         class: []
       };