@gitlab/ui 128.2.3 → 128.4.0

package/dist/components/base/breadcrumb/breadcrumb.js

@@ -158,12 +158,21 @@ var script = {
     } else {
       this.resizeDone = true;
     }
-    this.clipboardButtonWidth = this.showClipboardButton ? this.$refs.clipboardButton.$el.clientWidth : 0;
+    this.updateClipboardButtonWidth();
   },
   beforeDestroy() {
     this.disableAutoResize();
   },
   methods: {
+    updateClipboardButtonWidth() {
+      if (!this.showClipboardButton) {
+        this.clipboardButtonWidth = 0;
+        return;
+      }
+      const element = this.$refs.clipboardButton.$el;
+      const marginLeft = parseInt(getComputedStyle(element).marginLeft, 10);
+      this.clipboardButtonWidth = element.offsetWidth + marginLeft;
+    },
     resetItems() {
       this.fittingItems = [...this.items];
       this.overflowingItems = [];
@@ -209,6 +218,8 @@ var script = {
           if (widthNeeded + this.dropdownWidth < containerWidth) break;
         }
       }
+      const truncatedItemMaxWidth = Math.max(0, containerWidth - (this.dropdownWidth + this.clipboardButtonWidth));
+      this.$el.style.setProperty('--gl-breadcrumb-truncated-item-max-width', `${truncatedItemMaxWidth}px`);
       this.resizeDone = true;
     },
     isLastItem(index) {

package/dist/components/base/form/form_fields/form_fields.js

@@ -27,11 +27,12 @@ var script = {
      *
      * @typedef {object} FieldDefinition
      * @template TValue=string
-     * @property {string} label - Label text to show for this field.
+     * @property {string | null | undefined} label - Label text to show for this field. When explicitly set to null, the label is suppressed. When undefined or not provided, the field name is used as the label.
      * @property {undefined | Object} groupAttrs - Properties that are passed to the group wrapping this field.
      * @property {undefined | Object} inputAttrs - Properties that are passed to the actual input for this field.
      * @property {undefined | function(string): TValue} mapValue - Function that maps the inputted string value to the field's actual value (e.g. a Number).
      * @property {undefined | Array<function(TValue): string | undefined>=} validators - Collection of validator functions.
+     * @property {undefined | boolean} fieldset - When true, renders the form group as a fieldset with legend instead of div with label.
      *
      * @type {{ [key: string]: FieldDefinition }}
      */
@@ -130,7 +131,7 @@ var script = {
         return {
           ...field,
           id,
-          label: field.label || fieldName,
+          label: this.getFieldLabel(field, fieldName),
           inputSlot,
           groupPassthroughSlots,
           afterSlotName
@@ -168,6 +169,10 @@ var script = {
       await this.$nextTick();
       return this.hasAllFieldsValid();
     },
+    getFieldLabel(field, fieldName) {
+      if (field.label === null) return undefined;
+      return field.label || fieldName;
+    },
     getMappedValue(fieldName, val) {
       const field = this.fields[fieldName];
       if (isFunction(field === null || field === void 0 ? void 0 : field.mapValue)) {
@@ -248,7 +253,7 @@ const __vue_script__ = script;
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-fields-loop',{attrs:{"fields":_vm.fieldsToRender},scopedSlots:_vm._u([{key:"default",fn:function(ref){
 var field = ref.field;
 var fieldName = ref.fieldName;
-return [_c('gl-form-group',_vm._b({key:field.id,attrs:{"label":field.label,"label-for":field.id,"invalid-feedback":_vm.fieldValidationProps[fieldName].invalidFeedback,"state":_vm.fieldValidationProps[fieldName].state},scopedSlots:_vm._u([_vm._l((field.groupPassthroughSlots),function(ref){
+return [_c('gl-form-group',_vm._b({key:field.id,attrs:{"label":field.label,"label-for":field.fieldset ? undefined : field.id,"invalid-feedback":_vm.fieldValidationProps[fieldName].invalidFeedback,"state":_vm.fieldValidationProps[fieldName].state},scopedSlots:_vm._u([_vm._l((field.groupPassthroughSlots),function(ref){
 var slotName = ref.slotName;
 var childSlotName = ref.childSlotName;
 return {key:childSlotName,fn:function(){return [_vm._t(slotName)]},proxy:true}})],null,true)},'gl-form-group',field.groupAttrs,false),[_c('gl-form-field-validator',{attrs:{"value":_vm.fieldValues[fieldName],"validators":field.validators,"should-validate":_vm.fieldDirtyStatuses[fieldName]},on:{"update":function($event){return _vm.onFieldValidationUpdate(fieldName, $event)}}}),_vm._v(" "),_vm._v(" "),_vm._t(field.inputSlot.slotName,function(){return [_c('gl-form-input',_vm._b({attrs:{"id":field.id,"value":_vm.fieldValues[fieldName],"state":_vm.fieldValidationProps[fieldName].state},on:{"input":function($event){return _vm.onFieldInput(fieldName, $event)},"blur":function($event){return _vm.onFieldBlur(fieldName)}}},'gl-form-input',field.inputAttrs,false))]},null,field.inputSlot.attrs)],2),_vm._v(" "),_vm._t(field.afterSlotName)]}}],null,true)})};

package/dist/components/base/form/form_group/form_group.js

@@ -77,7 +77,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-form-group',_vm._b({staticClass:"gl-form-group",attrs:{"label-class":_vm.actualLabelClass},scopedSlots:_vm._u([{key:"label",fn:function(){return [_vm._t("label",function(){return [_vm._v("\n      "+_vm._s(_vm.$attrs.label)+"\n      "),(_vm.optional)?_c('span',{staticClass:"optional-label",attrs:{"data-testid":"optional-label"}},[_vm._v(_vm._s(_vm.optionalText))]):_vm._e()]}),_vm._v(" "),(_vm.hasLabelDescription)?_c('div',{staticClass:"label-description",attrs:{"data-testid":"label-description"}},[_vm._t("label-description",function(){return [_vm._v(_vm._s(_vm.labelDescription))]})],2):_vm._e()]},proxy:true},_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}})],null,true)},'b-form-group',_vm.$attrs,false))};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-group',_vm._b({staticClass:"gl-form-group",attrs:{"label-class":_vm.actualLabelClass},scopedSlots:_vm._u([(_vm.$attrs.label || _vm.$scopedSlots.label)?{key:"label",fn:function(){return [_vm._t("label",function(){return [_vm._v("\n      "+_vm._s(_vm.$attrs.label)+"\n      "),(_vm.optional)?_c('span',{staticClass:"optional-label",attrs:{"data-testid":"optional-label"}},[_vm._v(_vm._s(_vm.optionalText))]):_vm._e()]}),_vm._v(" "),(_vm.hasLabelDescription)?_c('div',{staticClass:"label-description",attrs:{"data-testid":"label-description"}},[_vm._t("label-description",function(){return [_vm._v(_vm._s(_vm.labelDescription))]})],2):_vm._e()]},proxy:true}:null,_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}})],null,true)},'b-form-group',_vm.$attrs,false))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/popover/popover.js

@@ -92,8 +92,8 @@ var script = {
       }
       return [];
     },
-    close(e) {
-      this.$refs[popoverRefName].doClose();
+    closePopover(e) {
+      this.$refs[popoverRefName].close();
       /**
        * Emitted when the close button is clicked (requires showCloseButton to be `true`).
        */
@@ -107,7 +107,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-popover',_vm._g(_vm._b({ref:_vm.$options.popoverRefName,attrs:{"custom-class":_vm.customClass,"triggers":_vm.triggers,"title":_vm.title,"placement":_vm.placement,"boundary-padding":_vm.boundaryPadding},scopedSlots:_vm._u([(_vm.shouldShowTitle)?{key:"title",fn:function(){return [_vm._t("title",function(){return [_vm._v("\n      "+_vm._s(_vm.title)+"\n    ")]}),_vm._v(" "),(_vm.showCloseButton)?_c('div',{staticClass:"-gl-mr-3 -gl-mt-2 gl-ml-3 gl-h-0"},[_c('close-button',{class:{ 'gl-float-right gl-mt-2': !_vm.hasTitle },attrs:{"data-testid":"close-button"},on:{"click":_vm.close}})],1):_vm._e()]},proxy:true}:null,(_vm.$scopedSlots.default)?{key:"default",fn:function(){return [_vm._t("default")]},proxy:true}:null],null,true)},'b-popover',_vm.$attrs,false),_vm.$listeners))};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-popover',_vm._g(_vm._b({ref:_vm.$options.popoverRefName,attrs:{"custom-class":_vm.customClass,"triggers":_vm.triggers,"title":_vm.title,"placement":_vm.placement,"boundary-padding":_vm.boundaryPadding},scopedSlots:_vm._u([(_vm.shouldShowTitle)?{key:"title",fn:function(){return [_vm._t("title",function(){return [_vm._v("\n      "+_vm._s(_vm.title)+"\n    ")]}),_vm._v(" "),(_vm.showCloseButton)?_c('div',{staticClass:"-gl-mr-3 -gl-mt-2 gl-ml-3 gl-h-0"},[_c('close-button',{class:{ 'gl-float-right gl-mt-2': !_vm.hasTitle },attrs:{"data-testid":"close-button"},on:{"click":_vm.closePopover}})],1):_vm._e()]},proxy:true}:null,(_vm.$scopedSlots.default)?{key:"default",fn:function(){return [_vm._t("default")]},proxy:true}:null],null,true)},'b-popover',_vm.$attrs,false),_vm.$listeners))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/token_selector/token_selector.js

@@ -1,4 +1,4 @@
-import { GlUniqueId } from '../../../utils/unique_id';
+import uniqueId from 'lodash/uniqueId';
 import { tokensValidator } from './helpers';
 import GlTokenContainer from './token_container';
 import GlTokenSelectorDropdown from './token_selector_dropdown';
@@ -244,7 +244,7 @@ var script = {
   },
   created() {
     // Each instance must have a unique ID for proper ARIA relationships
-    this.uniqueId = `token-selector-${GlUniqueId()}`;
+    this.uniqueId = uniqueId('token-selector-');
   },
   methods: {
     handleFocus(event) {

package/dist/components/mixins/tooltip_mixin.js

@@ -11,7 +11,7 @@ var tooltip_mixin = tooltipRefName => ({
      * https://bootstrap-vue.org/docs/components/popover#programmatically-show-and-hide-popover
      * https://bootstrap-vue.org/docs/components/tooltip#programmatically-show-and-hide-tooltip
      */
-    tooltipActionEvents.forEach(event => this.$on(event, () => this.$refs[tooltipRefName].$emit(event)));
+    tooltipActionEvents.forEach(event => this.$on(event, () => this.$refs[tooltipRefName][event]()));
   },
   beforeDestroy() {
     tooltipActionEvents.forEach(event => this.$off(event));