@gitlab/ui 137.2.7 → 137.3.1

package/dist/components/base/alert/alert.js

@@ -12,7 +12,6 @@ var script = {
     CloseButton,
     GlButton
   },
-  expose: ['focus'],
   props: {
     /**
      * The title text to display in the alert header.
@@ -117,6 +116,7 @@ var script = {
       }
     }
   },
+  expose: ['focus'],
   data() {
     return {
       hasProgrammaticFocus: false
@@ -227,8 +227,9 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
     { 'gl-alert-sticky': _vm.sticky },
     { 'gl-alert-not-dismissible': !_vm.dismissible },
     { 'gl-alert-has-title': !!_vm.title },
+    { 'gl-alert-has-actions': _vm.shouldRenderActions },
     { 'gl-focus': _vm.hasProgrammaticFocus },
-    _vm.variantClass ],attrs:{"role":_vm.role,"aria-live":_vm.politeness,"tabindex":"-1"},on:{"blur":function($event){_vm.hasProgrammaticFocus = false;}}},[_c('div',{staticClass:"gl-alert-icon-container"},[_c('gl-icon',{staticClass:"gl-alert-icon",attrs:{"name":_vm.iconName}})],1),_vm._v(" "),_c('div',{staticClass:"gl-alert-content"},[(_vm.title)?_c(_vm.headingComponent,{tag:"component",staticClass:"gl-alert-title"},[_vm._v(_vm._s(_vm.title))]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-alert-body"},[_vm._t("default")],2),_vm._v(" "),(_vm.shouldRenderActions)?_c('div',{staticClass:"gl-alert-actions"},[_vm._t("actions",function(){return _vm._l((_vm.actionButtons),function(actionButton,index){return _c('gl-button',_vm._g(_vm._b({key:index,staticClass:"gl-alert-action"},'gl-button',actionButton.attrs,false),actionButton.listeners),[_vm._v("\n          "+_vm._s(actionButton.text)+"\n        ")])})})],2):_vm._e()],1),_vm._v(" "),(_vm.dismissible)?_c('close-button',{ref:"dismiss",staticClass:"gl-dismiss-btn",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.onDismiss}}):_vm._e()],1)};
+    _vm.variantClass ],attrs:{"role":_vm.role,"aria-live":_vm.politeness,"tabindex":"-1"},on:{"blur":function($event){_vm.hasProgrammaticFocus = false;}}},[_c('div',{staticClass:"gl-alert-icon-container"},[_c('gl-icon',{staticClass:"gl-alert-icon",attrs:{"name":_vm.iconName}})],1),_vm._v(" "),_c('div',{staticClass:"gl-alert-content"},[(_vm.title)?_c(_vm.headingComponent,{tag:"component",staticClass:"gl-alert-title"},[_vm._v(_vm._s(_vm.title))]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-alert-body"},[_vm._t("default")],2),_vm._v(" "),(_vm.shouldRenderActions)?_c('div',{staticClass:"gl-alert-actions"},[_vm._t("actions",function(){return _vm._l((_vm.actionButtons),function(actionButton,index){return _c('gl-button',_vm._g(_vm._b({key:index,staticClass:"gl-alert-action",attrs:{"size":"small"}},'gl-button',actionButton.attrs,false),actionButton.listeners),[_vm._v("\n          "+_vm._s(actionButton.text)+"\n        ")])})})],2):_vm._e()],1),_vm._v(" "),(_vm.dismissible)?_c('close-button',{ref:"dismiss",staticClass:"gl-dismiss-btn",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.onDismiss}}):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -84,9 +84,6 @@ const BASE_DROPDOWN_CLASS = 'gl-new-dropdown';
 const DROPDOWN_CONTAINER_CLASS = 'gl-new-dropdown-container';
 var script = {
   name: 'BaseDropdown',
-  expose: ['open', 'close', 'closeAndFocus', 'containsElement'],
-  BASE_DROPDOWN_CLASS,
-  DROPDOWN_CONTAINER_CLASS,
   components: {
     DropdownContainer,
     GlButton,
@@ -331,6 +328,9 @@ var script = {
       validator: strategy => [POSITION_ABSOLUTE, POSITION_FIXED].includes(strategy)
     }
   },
+  expose: ['open', 'close', 'closeAndFocus', 'containsElement'],
+  BASE_DROPDOWN_CLASS,
+  DROPDOWN_CONTAINER_CLASS,
   data() {
     return {
       openedYet: false,

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown.js

@@ -345,6 +345,9 @@ var script = {
         this.closeAndFocus();
       }
     },
+    isDisabled(item) {
+      return item.disabled;
+    },
     uniqueItemId() {
       return uniqueId(`disclosure-item-`);
     },
@@ -357,7 +360,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('gl-base-dropdown',{ref:"baseDropdown",staticClass:"gl-disclosure-dropdown",attrs:{"aria-labelledby":_vm.toggleAriaLabelledBy,"aria-label":_vm.toggleAriaLabelledBy ? undefined : _vm.toggleAriaLabel,"arrow-element":_vm.$refs.disclosureArrow,"toggle-id":_vm.toggleId,"toggle-text":_vm.toggleText,"toggle-class":_vm.toggleClass,"text-sr-only":_vm.textSrOnly,"category":_vm.category,"variant":_vm.variant,"size":_vm.size,"icon":_vm.icon,"disabled":_vm.disabled,"loading":_vm.loading,"no-caret":_vm.noCaret,"placement":_vm.placement,"block":_vm.block,"offset":_vm.dropdownOffset,"fluid-width":_vm.fluidWidth,"positioning-strategy":_vm.positioningStrategy,"is-disclosure":""},on:_vm._d({},[_vm.$options.events.GL_DROPDOWN_SHOWN,_vm.onShow,_vm.$options.events.GL_DROPDOWN_HIDDEN,_vm.onHide,_vm.$options.events.GL_DROPDOWN_BEFORE_CLOSE,_vm.onBeforeClose,_vm.$options.events.GL_DROPDOWN_FOCUS_CONTENT,_vm.onKeydown]),scopedSlots:_vm._u([(_vm.hasCustomToggle)?{key:"toggle",fn:function(slotProps){return [_vm._t("toggle",null,null,slotProps)]}}:null],null,true)},[_vm._v(" "),_vm._t("header"),_vm._v(" "),_c(_vm.disclosureTag,{ref:"content",tag:"component",class:_vm.$options.GL_DROPDOWN_CONTENTS_CLASS,attrs:{"id":_vm.disclosureId,"aria-labelledby":_vm.listAriaLabelledBy || _vm.toggleId,"data-testid":"disclosure-content","tabindex":"-1"},on:{"keydown":_vm.onKeydown,"click":_vm.handleAutoClose}},[_vm._t("default",function(){return [_vm._l((_vm.items),function(item,index){return [(_vm.isItem(item))?[_c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"siblings-have-icons":_vm.siblingsHaveIcons,"item":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([('list-item' in _vm.$scopedSlots)?{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":item})]},proxy:true}:null],null,true)})]:[_c('gl-disclosure-dropdown-group',{key:item.name,attrs:{"bordered":index !== 0,"group":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([(_vm.$scopedSlots['group-label'])?{key:"group-label",fn:function(){return [_vm._t("group-label",null,{"group":item})]},proxy:true}:null,(_vm.$scopedSlots['list-item'])?{key:"default",fn:function(){return _vm._l((item.items),function(groupItem){return _c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"siblings-have-icons":_vm.doSomeItemsHaveIcon(item.items),"item":groupItem},on:{"action":_vm.handleAction},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":groupItem})]},proxy:true}],null,true)})})},proxy:true}:null],null,true)})]]})]})],2),_vm._v(" "),_vm._t("footer")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-base-dropdown',{ref:"baseDropdown",staticClass:"gl-disclosure-dropdown",attrs:{"aria-labelledby":_vm.toggleAriaLabelledBy,"aria-label":_vm.toggleAriaLabelledBy ? undefined : _vm.toggleAriaLabel,"arrow-element":_vm.$refs.disclosureArrow,"toggle-id":_vm.toggleId,"toggle-text":_vm.toggleText,"toggle-class":_vm.toggleClass,"text-sr-only":_vm.textSrOnly,"category":_vm.category,"variant":_vm.variant,"size":_vm.size,"icon":_vm.icon,"disabled":_vm.disabled,"loading":_vm.loading,"no-caret":_vm.noCaret,"placement":_vm.placement,"block":_vm.block,"offset":_vm.dropdownOffset,"fluid-width":_vm.fluidWidth,"positioning-strategy":_vm.positioningStrategy,"is-disclosure":""},on:_vm._d({},[_vm.$options.events.GL_DROPDOWN_SHOWN,_vm.onShow,_vm.$options.events.GL_DROPDOWN_HIDDEN,_vm.onHide,_vm.$options.events.GL_DROPDOWN_BEFORE_CLOSE,_vm.onBeforeClose,_vm.$options.events.GL_DROPDOWN_FOCUS_CONTENT,_vm.onKeydown]),scopedSlots:_vm._u([(_vm.hasCustomToggle)?{key:"toggle",fn:function(slotProps){return [_vm._t("toggle",null,null,slotProps)]}}:null],null,true)},[_vm._v(" "),_vm._t("header"),_vm._v(" "),_c(_vm.disclosureTag,{ref:"content",tag:"component",class:_vm.$options.GL_DROPDOWN_CONTENTS_CLASS,attrs:{"id":_vm.disclosureId,"aria-labelledby":_vm.listAriaLabelledBy || _vm.toggleId,"data-testid":"disclosure-content","tabindex":"-1"},on:{"keydown":_vm.onKeydown,"click":_vm.handleAutoClose}},[_vm._t("default",function(){return [_vm._l((_vm.items),function(item,index){return [(_vm.isItem(item))?[_c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"siblings-have-icons":_vm.siblingsHaveIcons,"item":item,"disabled":_vm.isDisabled(item)},on:{"action":_vm.handleAction},scopedSlots:_vm._u([('list-item' in _vm.$scopedSlots)?{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":item})]},proxy:true}:null],null,true)})]:[_c('gl-disclosure-dropdown-group',{key:item.name,attrs:{"bordered":index !== 0,"group":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([(_vm.$scopedSlots['group-label'])?{key:"group-label",fn:function(){return [_vm._t("group-label",null,{"group":item})]},proxy:true}:null,(_vm.$scopedSlots['list-item'])?{key:"default",fn:function(){return _vm._l((item.items),function(groupItem){return _c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"siblings-have-icons":_vm.doSomeItemsHaveIcon(item.items),"item":groupItem},on:{"action":_vm.handleAction},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":groupItem})]},proxy:true}],null,true)})})},proxy:true}:null],null,true)})]]})]})],2),_vm._v(" "),_vm._t("footer")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.js

@@ -51,6 +51,14 @@ var script = {
       type: Boolean,
       default: false,
       required: false
+    },
+    /**
+     * Is the item able to be selected
+     */
+    disabled: {
+      type: Boolean,
+      default: false,
+      required: false
     }
   },
   computed: {
@@ -109,7 +117,7 @@ var script = {
       // It just so happens this class has the same prefix `gl-`.
       this.itemVariant && this.itemVariant !== 'default' ?
       // eslint-disable-next-line @gitlab/tailwind-no-interpolation
-      `gl-new-dropdown-item-${this.itemVariant}` : ''];
+      `gl-new-dropdown-item-${this.itemVariant}` : '', this.disabled ? 'disabled' : ''];
     },
     iconName() {
       var _this$item7;
@@ -127,31 +135,38 @@ var script = {
   },
   methods: {
     onKeydown(event) {
-      const code = event.code;
-      if (code === ENTER || code === SPACE) {
-        if (this.isCustomContent) {
-          this.action();
-        } else {
-          stopEvent(event);
-          /** Instead of simply navigating or calling the action, we want
-           * the `a/button` to be the target of the event as it might have additional attributes.
-           * E.g. `a` might have `target` attribute.
-           */
-          const e = new MouseEvent('click', {
-            bubbles: true,
-            cancelable: true
-          });
-          if (this.isLink) {
-            this.$refs.item.$el.dispatchEvent(e);
+      if (!this.disabled) {
+        const code = event.code;
+        if (code === ENTER || code === SPACE) {
+          if (this.isCustomContent) {
+            this.action();
           } else {
-            var _this$$refs$item;
-            (_this$$refs$item = this.$refs.item) === null || _this$$refs$item === void 0 ? void 0 : _this$$refs$item.dispatchEvent(e);
+            stopEvent(event);
+            /** Instead of simply navigating or calling the action, we want
+             * the `a/button` to be the target of the event as it might have additional attributes.
+             * E.g. `a` might have `target` attribute.
+             */
+            const e = new MouseEvent('click', {
+              bubbles: true,
+              cancelable: true
+            });
+            if (this.isLink) {
+              this.$refs.item.$el.dispatchEvent(e);
+            } else {
+              var _this$$refs$item;
+              (_this$$refs$item = this.$refs.item) === null || _this$$refs$item === void 0 ? void 0 : _this$$refs$item.dispatchEvent(e);
+            }
           }
         }
       }
     },
     action() {
       this.$emit('action', this.item);
+    },
+    handleClick(event) {
+      if (this.disabled) {
+        stopEvent(event);
+      }
     }
   }
 };
@@ -160,7 +175,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('li',_vm._g({class:_vm.classes,attrs:{"tabindex":_vm.listIndex,"data-testid":"disclosure-dropdown-item"}},_vm.wrapperListeners),[_vm._t("default",function(){return [_c(_vm.itemComponent.is,_vm._g(_vm._b({ref:"item",tag:"component",staticClass:"gl-new-dropdown-item-content",attrs:{"tabindex":_vm.componentIndex}},'component',_vm.itemComponent.attrs,false),_vm.itemComponent.listeners),[_c('span',{staticClass:"gl-new-dropdown-item-text-wrapper"},[_vm._t("list-item",function(){return [(_vm.iconName || _vm.siblingsHaveIcons)?_c('span',{staticClass:"gl-new-dropdown-item-icon"},[(_vm.iconName)?_c('gl-icon',{attrs:{"name":_vm.iconName,"variant":"current"}}):_vm._e()],1):_vm._e(),_vm._v("\n          "+_vm._s(_vm.item.text)+"\n        ")]})],2)])]})],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',_vm._g({class:_vm.classes,attrs:{"tabindex":_vm.listIndex,"data-testid":"disclosure-dropdown-item","aria-disabled":_vm.disabled}},_vm.wrapperListeners),[_vm._t("default",function(){return [_c(_vm.itemComponent.is,_vm._g(_vm._b({ref:"item",tag:"component",staticClass:"gl-new-dropdown-item-content",attrs:{"tabindex":_vm.componentIndex},on:{"click":_vm.handleClick}},'component',_vm.itemComponent.attrs,false),_vm.itemComponent.listeners),[_c('span',{staticClass:"gl-new-dropdown-item-text-wrapper"},[_vm._t("list-item",function(){return [(_vm.iconName || _vm.siblingsHaveIcons)?_c('span',{staticClass:"gl-new-dropdown-item-icon"},[(_vm.iconName)?_c('gl-icon',{attrs:{"name":_vm.iconName,"variant":"current"}}):_vm._e()],1):_vm._e(),_vm._v("\n          "+_vm._s(_vm.item.text)+"\n        ")]})],2)])]})],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/dashboards/dashboard_layout/dashboard_layout.js

@@ -60,6 +60,14 @@ var script = {
       required: false,
       default: 1,
       validator: value => value > 0
+    },
+    /**
+     * Additional CSS classes to apply to the `#filters` slot container.
+     */
+    filtersClass: {
+      type: String,
+      required: false,
+      default: ''
     }
   },
   computed: {
@@ -88,7 +96,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',[(_vm.dashboardHasHeader)?_c('section',{staticClass:"gl-my-4 gl-flex gl-items-center",attrs:{"data-testid":"header-container"}},[_vm._t("header",function(){return [_c('div',{staticClass:"gl-flex gl-w-full gl-flex-col"},[(_vm.dashboardHasTitle)?_c('div',{staticClass:"gl-flex gl-items-center"},[_vm._t("title",function(){return [_c('h2',{staticClass:"gl-my-0",attrs:{"data-testid":"title"}},[_vm._v(_vm._s(_vm.config.title))])]})],2):_vm._e(),_vm._v(" "),(_vm.dashboardHasDescription)?_c('div',{staticClass:"gl-mt-3 gl-flex"},[_vm._t("description",function(){return [_c('p',{staticClass:"gl-mb-0",attrs:{"data-testid":"description"}},[_vm._v("\n              "+_vm._s(_vm.config.description)+"\n            ")])]})],2):_vm._e()])]}),_vm._v(" "),(_vm.$scopedSlots.actions)?_c('div',{attrs:{"data-testid":"actions-container"}},[_vm._t("actions")],2):_vm._e()],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-flex"},[_c('div',{staticClass:"gl-flex gl-min-w-0 gl-grow gl-flex-col"},[_vm._t("alert"),_vm._v(" "),(_vm.$scopedSlots.filters)?_c('section',{staticClass:"gl-flex gl-flex-row gl-flex-wrap gl-gap-5 gl-pb-3 gl-pt-4",attrs:{"data-testid":"filters-container"}},[_vm._t("filters")],2):_vm._e(),_vm._v(" "),(_vm.dashboardHasPanels)?_c('grid-layout',{staticClass:"-gl-mx-3",attrs:{"value":_vm.config,"is-static-grid":_vm.isStaticGrid,"cell-height":_vm.cellHeight,"min-cell-height":_vm.minCellHeight},on:{"input":_vm.emitChanges},scopedSlots:_vm._u([{key:"panel",fn:function(ref){
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.dashboardHasHeader)?_c('section',{staticClass:"gl-my-4 gl-flex gl-items-center",attrs:{"data-testid":"header-container"}},[_vm._t("header",function(){return [_c('div',{staticClass:"gl-flex gl-w-full gl-flex-col"},[(_vm.dashboardHasTitle)?_c('div',{staticClass:"gl-flex gl-items-center"},[_vm._t("title",function(){return [_c('h2',{staticClass:"gl-my-0",attrs:{"data-testid":"title"}},[_vm._v(_vm._s(_vm.config.title))])]})],2):_vm._e(),_vm._v(" "),(_vm.dashboardHasDescription)?_c('div',{staticClass:"gl-mt-3 gl-flex"},[_vm._t("description",function(){return [_c('p',{staticClass:"gl-mb-0",attrs:{"data-testid":"description"}},[_vm._v("\n              "+_vm._s(_vm.config.description)+"\n            ")])]})],2):_vm._e()])]}),_vm._v(" "),(_vm.$scopedSlots.actions)?_c('div',{attrs:{"data-testid":"actions-container"}},[_vm._t("actions")],2):_vm._e()],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-flex"},[_c('div',{staticClass:"gl-flex gl-min-w-0 gl-grow gl-flex-col"},[_vm._t("alert"),_vm._v(" "),(_vm.$scopedSlots.filters)?_c('section',{staticClass:"gl-flex gl-flex-row gl-flex-wrap gl-gap-5 gl-pb-3 gl-pt-4",class:_vm.filtersClass,attrs:{"data-testid":"filters-container"}},[_vm._t("filters")],2):_vm._e(),_vm._v(" "),(_vm.dashboardHasPanels)?_c('grid-layout',{staticClass:"-gl-mx-3",attrs:{"value":_vm.config,"is-static-grid":_vm.isStaticGrid,"cell-height":_vm.cellHeight,"min-cell-height":_vm.minCellHeight},on:{"input":_vm.emitChanges},scopedSlots:_vm._u([{key:"panel",fn:function(ref){
 var panel = ref.panel;
 return [_vm._t("panel",null,null,{ panel: panel })]}}],null,true)}):_vm._t("empty-state")],2)]),_vm._v(" "),_vm._t("footer")],2)};
 var __vue_staticRenderFns__ = [];