@gitlab/ui 129.1.2 → 129.3.0

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

@@ -1,4 +1,4 @@
-import { uniqueId, clamp } from 'lodash-es';
+import { uniqueId, isEqual, clamp } from 'lodash-es';
 import { logWarning, stopEvent } from '../../../../utils/utils';
 import { GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_FOCUS_CONTENT, POSITION_ABSOLUTE, POSITION_FIXED, GL_DROPDOWN_CONTENTS_CLASS, ENTER, ARROW_DOWN, ARROW_UP, END, HOME } from '../constants';
 import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions, dropdownPlacements } from '../../../../utils/constants';
@@ -548,7 +548,7 @@ var script = {
   watch: {
     selected: {
       immediate: true,
-      handler(newSelected) {
+      handler(newSelected, oldSelected) {
         if (Array.isArray(newSelected)) {
           if (process.env.NODE_ENV !== 'production' && !this.multiple && newSelected.length) {
             throw new Error('To allow multi-selection, please, set "multiple" property to "true"');
@@ -557,6 +557,16 @@ var script = {
         } else {
           this.selectedValues = [newSelected];
         }
+        if (
+        // Do not emit change event immediately on watcher creation.
+        oldSelected !== undefined && !isEqual(newSelected, oldSelected)) {
+          /**
+           * Emitted when the selected prop value changes
+           *
+           * @event change
+           */
+          this.$emit('change');
+        }
       }
     },
     items: {

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

@@ -67,8 +67,14 @@ var script = {
       var _this$config$panels;
       return ((_this$config$panels = this.config.panels) === null || _this$config$panels === void 0 ? void 0 : _this$config$panels.length) > 0;
     },
+    dashboardHasTitle() {
+      return this.$scopedSlots.title || Boolean(this.config.title);
+    },
     dashboardHasDescription() {
       return this.$scopedSlots.description || Boolean(this.config.description);
+    },
+    dashboardHasHeader() {
+      return this.$scopedSlots.header || this.$scopedSlots.actions || this.dashboardHasTitle || this.dashboardHasDescription;
     }
   },
   methods: {
@@ -82,7 +88,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',[_c('section',{staticClass:"gl-my-4 gl-flex gl-items-center"},[_vm._t("header",function(){return [_c('div',{staticClass:"gl-flex gl-w-full gl-flex-col"},[_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._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._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",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__ = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "129.1.2",
+  "version": "129.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -101,7 +101,7 @@
     "@cypress/grep": "^4.1.1",
     "@gitlab/fonts": "^1.3.1",
     "@gitlab/svgs": "*",
-    "@jest/test-sequencer": "30.2.0",
+    "@jest/test-sequencer": "30.3.0",
     "@rollup/plugin-commonjs": "^28.0.9",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.3",
@@ -132,17 +132,17 @@
     "autoprefixer": "10.4.27",
     "axe-playwright": "^2.2.2",
     "babel-loader": "^9.2.1",
-    "cypress": "15.11.0",
+    "cypress": "15.12.0",
     "cypress-real-events": "^1.15.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.6.0",
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "11.1.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "30.2.0",
-    "jest-circus": "30.2.0",
-    "jest-environment-jsdom": "30.2.0",
-    "jest-image-snapshot": "^6.5.1",
+    "jest": "30.3.0",
+    "jest-circus": "30.3.0",
+    "jest-environment-jsdom": "30.3.0",
+    "jest-image-snapshot": "^6.5.2",
     "merge-cobertura": "^1.0.7",
     "mockdate": "^3.0.5",
     "module-alias": "^2.3.4",
@@ -160,7 +160,7 @@
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-vue": "^5.1.9",
-    "sass": "^1.97.3",
+    "sass": "^1.98.0",
     "sass-loader": "^10.5.2",
     "sass-true": "^9",
     "start-server-and-test": "^2.1.5",

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -1,5 +1,5 @@
 <script>
-import { clamp, uniqueId } from 'lodash-es';
+import { clamp, uniqueId, isEqual } from 'lodash-es';
 import { stopEvent, logWarning } from '../../../../utils/utils';
 import {
   GL_DROPDOWN_SHOWN,
@@ -582,7 +582,7 @@ export default {
   watch: {
     selected: {
       immediate: true,
-      handler(newSelected) {
+      handler(newSelected, oldSelected) {
         if (Array.isArray(newSelected)) {
           if (process.env.NODE_ENV !== 'production' && !this.multiple && newSelected.length) {
             throw new Error('To allow multi-selection, please, set "multiple" property to "true"');
@@ -591,6 +591,19 @@ export default {
         } else {
           this.selectedValues = [newSelected];
         }
+
+        if (
+          // Do not emit change event immediately on watcher creation.
+          oldSelected !== undefined &&
+          !isEqual(newSelected, oldSelected)
+        ) {
+          /**
+           * Emitted when the selected prop value changes
+           *
+           * @event change
+           */
+          this.$emit('change');
+        }
       },
     },
     items: {

package/src/components/dashboards/dashboard_layout/dashboard_layout.vue

@@ -67,9 +67,20 @@ export default {
     dashboardHasPanels() {
       return this.config.panels?.length > 0;
     },
+    dashboardHasTitle() {
+      return this.$scopedSlots.title || Boolean(this.config.title);
+    },
     dashboardHasDescription() {
       return this.$scopedSlots.description || Boolean(this.config.description);
     },
+    dashboardHasHeader() {
+      return (
+        this.$scopedSlots.header ||
+        this.$scopedSlots.actions ||
+        this.dashboardHasTitle ||
+        this.dashboardHasDescription
+      );
+    },
   },
   methods: {
     emitChanges(newConfig) {
@@ -80,12 +91,16 @@ export default {
 </script>
 <template>
   <div>
-    <section class="gl-my-4 gl-flex gl-items-center">
+    <section
+      v-if="dashboardHasHeader"
+      data-testid="header-container"
+      class="gl-my-4 gl-flex gl-items-center"
+    >
       <!-- @slot Used to render custom dashboard header state. Replaces the default rendering. -->
       <slot name="header">
         <div class="gl-flex gl-w-full gl-flex-col">
           <!-- Dashboard title -->
-          <div class="gl-flex gl-items-center">
+          <div v-if="dashboardHasTitle" class="gl-flex gl-items-center">
             <!-- @slot Used to render custom dashboard titles. Replaces the default rendering. -->
             <slot name="title">
               <h2 data-testid="title" class="gl-my-0">{{ config.title }}</h2>