@gitlab/ui 124.3.0 → 124.4.0

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

@@ -107,6 +107,8 @@ var script = {
       // array with the individual widths of each breadcrumb item
       dropdownWidth: 0,
       // the width of the breadcrumb item containing the dropdown toggle
+      clipboardButtonWidth: 0,
+      // the width of the clipboard button at the end of breadcrumbs
       resizeDone: false // to apply some CSS only during/after resizing
     };
   },
@@ -155,6 +157,7 @@ var script = {
     } else {
       this.resizeDone = true;
     }
+    this.clipboardButtonWidth = this.showClipboardButton ? this.$refs.clipboardButton.$el.clientWidth : 0;
   },
   beforeDestroy() {
     this.disableAutoResize();
@@ -178,8 +181,9 @@ var script = {
         this.totalBreadcrumbsWidth += width;
         this.widthPerItem[index] = width;
       });
+      this.totalBreadcrumbsWidth += this.clipboardButtonWidth;
 
-      // The dropdown gets rendered during `!resizeDone` so we can mesuare its real width here.
+      // The dropdown gets rendered during `!resizeDone` so we can measure its real width here.
       this.dropdownWidth = this.$refs.dropdown.clientWidth;
       this.makeBreadcrumbsFit();
     },
@@ -237,7 +241,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('nav',{staticClass:"gl-breadcrumbs",style:(_vm.breadcrumbStyle),attrs:{"aria-label":_vm.ariaLabel}},[_c('ol',_vm._g(_vm._b({staticClass:"gl-breadcrumb-list breadcrumb"},'ol',_vm.$attrs,false),_vm.$listeners),[(_vm.hasCollapsible || !_vm.resizeDone)?_c('li',{ref:"dropdown",class:("gl-breadcrumb-item gl-breadcrumb-item-" + _vm.size)},[_c('gl-disclosure-dropdown',{attrs:{"items":_vm.overflowingItems,"toggle-text":_vm.showMoreLabel,"fluid-width":"","text-sr-only":"","no-caret":"","icon":"ellipsis_h","size":_vm.dropdownSize}})],1):_vm._e(),_vm._v(" "),_vm._l((_vm.fittingItems),function(item,index){return _c('gl-breadcrumb-item',{key:index,ref:"breadcrumbs",refInFor:true,class:[_vm.hideItemClass(item), _vm.itemClass],attrs:{"text":item.text,"href":item.href,"to":item.to,"size":_vm.size,"aria-current":_vm.getAriaCurrentAttr(index)},scopedSlots:_vm._u([{key:"default",fn:function(){return [(item.avatarPath)?_c('gl-avatar',{staticClass:"gl-breadcrumb-avatar-tile gl-border gl-mr-2 !gl-rounded-default",attrs:{"src":item.avatarPath,"size":_vm.avatarSize,"aria-hidden":"true","shape":"rect","data-testid":"avatar"}}):_vm._e(),_c('span',{staticClass:"gl-align-middle"},[_vm._v(_vm._s(item.text))])]},proxy:true}],null,true)})}),_vm._v(" "),(_vm.showClipboardButton)?_c('li',{staticClass:"gl-breadcrumb-clipboard-button"},[_c('clipboard-button',_vm._b({staticClass:"gl-ml-2",attrs:{"data-testid":"copy-to-clipboard-button","text":_vm.clipboardButtonText,"size":_vm.dropdownSize}},'clipboard-button',_vm.clipboardTooltipText ? { title: _vm.clipboardTooltipText } : {},false))],1):_vm._e()],2)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',{staticClass:"gl-breadcrumbs",style:(_vm.breadcrumbStyle),attrs:{"aria-label":_vm.ariaLabel}},[_c('ol',_vm._g(_vm._b({staticClass:"gl-breadcrumb-list breadcrumb"},'ol',_vm.$attrs,false),_vm.$listeners),[(_vm.hasCollapsible || !_vm.resizeDone)?_c('li',{ref:"dropdown",class:("gl-breadcrumb-item gl-breadcrumb-item-" + _vm.size)},[_c('gl-disclosure-dropdown',{attrs:{"items":_vm.overflowingItems,"toggle-text":_vm.showMoreLabel,"fluid-width":"","text-sr-only":"","no-caret":"","icon":"ellipsis_h","size":_vm.dropdownSize}})],1):_vm._e(),_vm._v(" "),_vm._l((_vm.fittingItems),function(item,index){return _c('gl-breadcrumb-item',{key:index,ref:"breadcrumbs",refInFor:true,class:[_vm.hideItemClass(item), _vm.itemClass],attrs:{"text":item.text,"href":item.href,"to":item.to,"size":_vm.size,"aria-current":_vm.getAriaCurrentAttr(index)},scopedSlots:_vm._u([{key:"default",fn:function(){return [(item.avatarPath)?_c('gl-avatar',{staticClass:"gl-breadcrumb-avatar-tile gl-border gl-mr-2 !gl-rounded-default",attrs:{"src":item.avatarPath,"size":_vm.avatarSize,"aria-hidden":"true","shape":"rect","data-testid":"avatar"}}):_vm._e(),_c('span',{staticClass:"gl-align-middle"},[_vm._v(_vm._s(item.text))])]},proxy:true}],null,true)})}),_vm._v(" "),(_vm.showClipboardButton)?_c('li',{staticClass:"gl-breadcrumb-clipboard-button"},[_c('clipboard-button',_vm._b({ref:"clipboardButton",staticClass:"gl-ml-2",attrs:{"data-testid":"copy-to-clipboard-button","text":_vm.clipboardButtonText,"size":_vm.dropdownSize}},'clipboard-button',_vm.clipboardTooltipText ? { title: _vm.clipboardTooltipText } : {},false))],1):_vm._e()],2)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -63,6 +63,14 @@ var script = {
       default() {
         return {};
       }
+    },
+    /**
+     * Whether to validate fields on blur. When set to false, validation will only occur on form submission.
+     */
+    validateOnBlur: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
   data() {
@@ -180,7 +188,9 @@ var script = {
       });
     },
     onFieldBlur(fieldName) {
-      this.setFieldDirty(fieldName);
+      if (this.validateOnBlur) {
+        this.setFieldDirty(fieldName);
+      }
     },
     onFieldInput(fieldName, inputValue) {
       const val = this.getMappedValue(fieldName, inputValue);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "124.3.0",
+  "version": "124.4.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -98,6 +98,7 @@ export default {
       totalBreadcrumbsWidth: 0, // the total width of all breadcrumb items combined
       widthPerItem: [], // array with the individual widths of each breadcrumb item
       dropdownWidth: 0, // the width of the breadcrumb item containing the dropdown toggle
+      clipboardButtonWidth: 0, // the width of the clipboard button at the end of breadcrumbs
       resizeDone: false, // to apply some CSS only during/after resizing
     };
   },
@@ -146,6 +147,9 @@ export default {
     } else {
       this.resizeDone = true;
     }
+    this.clipboardButtonWidth = this.showClipboardButton
+      ? this.$refs.clipboardButton.$el.clientWidth
+      : 0;
   },
   beforeDestroy() {
     this.disableAutoResize();
@@ -173,7 +177,9 @@ export default {
         this.widthPerItem[index] = width;
       });
 
-      // The dropdown gets rendered during `!resizeDone` so we can mesuare its real width here.
+      this.totalBreadcrumbsWidth += this.clipboardButtonWidth;
+
+      // The dropdown gets rendered during `!resizeDone` so we can measure its real width here.
       this.dropdownWidth = this.$refs.dropdown.clientWidth;
 
       this.makeBreadcrumbsFit();
@@ -277,6 +283,7 @@ export default {
 
       <li v-if="showClipboardButton" class="gl-breadcrumb-clipboard-button">
         <clipboard-button
+          ref="clipboardButton"
           data-testid="copy-to-clipboard-button"
           class="gl-ml-2"
           :text="clipboardButtonText"

package/src/components/base/form/form_fields/form_fields.vue

@@ -64,6 +64,14 @@ export default {
         return {};
       },
     },
+    /**
+     * Whether to validate fields on blur. When set to false, validation will only occur on form submission.
+     */
+    validateOnBlur: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     return {
@@ -197,7 +205,9 @@ export default {
       });
     },
     onFieldBlur(fieldName) {
-      this.setFieldDirty(fieldName);
+      if (this.validateOnBlur) {
+        this.setFieldDirty(fieldName);
+      }
     },
     onFieldInput(fieldName, inputValue) {
       const val = this.getMappedValue(fieldName, inputValue);