@gitlab/ui 126.3.4 → 126.4.0

package/src/components/base/daterange_picker/daterange_picker.vue

@@ -24,111 +24,177 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   props: {
+    /**
+     * Label text for the start date picker.
+     */
     fromLabel: {
       type: String,
       required: false,
       default: 'From',
     },
+    /**
+     * Label text for the end date picker.
+     */
     toLabel: {
       type: String,
       required: false,
       default: 'To',
     },
+    /**
+     * Accessible label for the start date input.
+     */
     fromAriaLabel: {
       type: String,
       required: false,
       default: 'From date',
     },
+    /**
+     * Accessible label for the end date input.
+     */
     toAriaLabel: {
       type: String,
       required: false,
       default: 'To date',
     },
+    /**
+     * The selected date range object containing `startDate` and `endDate` properties.
+     */
     value: {
       type: Object,
       required: false,
       default: null,
     },
+    /**
+     * Internationalization object for Pikaday labels and month/day names.
+     */
     i18n: {
       type: Object,
       required: false,
       default: null,
     },
+    /**
+     * The earliest selectable date for the start date picker.
+     */
     defaultMinDate: {
       type: Date,
       required: false,
       default: null,
     },
+    /**
+     * The latest selectable date for the end date picker.
+     */
     defaultMaxDate: {
       type: Date,
       required: false,
       default: null,
     },
+    /**
+     * Initial value for the start date.
+     */
     defaultStartDate: {
       type: Date,
       required: false,
       default: null,
     },
+    /**
+     * Initial value for the end date.
+     */
     defaultEndDate: {
       type: Date,
       required: false,
       default: null,
     },
+    /**
+     * Maximum number of days allowed between start and end date. Set to 0 for no limit.
+     */
     maxDateRange: {
       type: Number,
       required: false,
       default: 0,
     },
+    /**
+     * Additional CSS class(es) for the start date picker container.
+     */
     startPickerClass: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * Selector of element that triggers the start date picker.
+     */
     startPickerTarget: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * DOM node selector to render the start date calendar into.
+     */
     startPickerContainer: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * Validation state for the start date picker input.
+     */
     startPickerState: {
       type: Boolean,
       required: false,
       default: null,
     },
+    /**
+     * Additional CSS class(es) for the end date picker container.
+     */
     endPickerClass: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * Selector of element that triggers the end date picker.
+     */
     endPickerTarget: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * DOM node selector to render the end date calendar into.
+     */
     endPickerContainer: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * Validation state for the end date picker input.
+     */
     endPickerState: {
       type: Boolean,
       required: false,
       default: null,
     },
+    /**
+     * Additional CSS class(es) for the label elements.
+     */
     labelClass: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * Additional CSS class for the Pikaday calendar theme.
+     */
     theme: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * Whether to allow selecting the same date for start and end.
+     */
     sameDaySelection: {
       type: Boolean,
       required: false,
@@ -150,13 +216,16 @@ export default {
       required: false,
       default: '',
     },
+    /**
+     * Whether the start date picker should be open on mount.
+     */
     startOpened: {
       type: Boolean,
       required: false,
       default: false,
     },
     /**
-     * Maximum width of the Datepicker
+     * Maximum width of the Datepicker.
      */
     width: {
       type: String,

package/src/components/base/filtered_search/filtered_search.vue

@@ -408,7 +408,7 @@ export default {
     :search-button-attributes="searchButtonAttributes"
     :show-search-button="showSearchButton"
     :disabled="viewOnly"
-    data-testid="filtered-search-input"
+    :wrapper-attributes="{ 'data-testid': 'filtered-search-input' }"
     @submit="submit"
     @input="applyNewValue"
     @history-item-selected="$emit('history-item-selected', $event)"

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

@@ -47,6 +47,14 @@ export default {
       required: false,
       default: '',
     },
+    /**
+     * HTML attributes to apply to the wrapper element.
+     */
+    wrapperAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
   },
   data() {
     return {
@@ -68,7 +76,7 @@ export default {
 };
 </script>
 <template>
-  <div role="group" class="input-group">
+  <div role="group" class="input-group" v-bind="wrapperAttributes">
     <div v-if="activeOption || $scopedSlots.prepend" class="input-group-prepend">
       <!-- @slot Is rendered in front of the input field. -->
       <slot name="prepend"></slot>

package/src/components/base/path/data.js

@@ -1,4 +1,4 @@
-export const mockPathItems = [
+export const mockPathItems = () => [
   {
     title: 'First',
     metric: '1d',

package/src/components/base/search_box_by_click/search_box_by_click.vue

@@ -125,6 +125,14 @@ export default {
       required: false,
       default: true,
     },
+    /**
+     * HTML attributes to apply to the wrapper element.
+     */
+    wrapperAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
   },
   data() {
     return {
@@ -206,6 +214,7 @@ export default {
   <gl-form-input-group
     class="gl-search-box-by-click"
     :class="{ 'gl-search-box-by-click-with-search-button': showSearchButton }"
+    :wrapper-attributes="wrapperAttributes"
   >
     <template v-if="historyItems" #prepend>
       <gl-disclosure-dropdown

package/src/components/dashboards/dashboard_panel/dashboard_panel.vue

@@ -94,6 +94,14 @@ export default {
       required: false,
       default: '',
     },
+    /**
+     * The string to render as the panel subtitle.
+     */
+    subtitle: {
+      type: String,
+      required: false,
+      default: '',
+    },
     /**
      * Set to `true` to show the loading state.
      */
@@ -197,8 +205,8 @@ export default {
     :class="containerClasses"
   >
     <div class="gl-flex gl-h-full gl-flex-col">
-      <div class="gl-flex gl-items-start gl-justify-between" data-testid="panel-title">
-        <div class="gl-flex gl-items-center gl-overflow-hidden gl-pb-3">
+      <div class="gl-mb-3 gl-flex gl-items-start gl-justify-between" data-testid="panel-title">
+        <div class="gl-flex gl-items-center gl-overflow-hidden">
           <gl-icon
             v-if="hasTitleIcon"
             class="gl-mr-2"
@@ -207,12 +215,22 @@ export default {
             data-testid="panel-title-icon"
           />
 
-          <gl-truncate
-            v-if="hasTitle"
-            class="gl-min-w-0 gl-font-bold gl-text-default"
-            :text="title"
-            with-tooltip
-          />
+          <div class="gl-min-w-0">
+            <gl-truncate
+              v-if="hasTitle"
+              class="gl-font-bold gl-text-default"
+              :text="title"
+              with-tooltip
+            />
+
+            <p
+              v-if="subtitle"
+              class="gl-mb-0 gl-mt-1 gl-text-sm gl-text-subtle"
+              data-testid="panel-subtitle"
+            >
+              {{ subtitle }}
+            </p>
+          </div>
 
           <template v-if="hasTitlePopover">
             <gl-icon
@@ -280,7 +298,7 @@ export default {
 
           <div
             v-if="$scopedSlots.filters"
-            class="gl-flex gl-items-center gl-justify-end gl-pb-2"
+            class="gl-flex gl-items-center gl-justify-end"
             data-testid="panel-filters-container"
           >
             <!-- @slot  The filter section to add additional UI elements for filtering, grouping, etc. -->

package/src/directives/resize_observer/resize_observer.js

@@ -2,6 +2,12 @@ import isFunction from 'lodash/isFunction';
 
 let observer = null;
 
+// Exported for testing purposes only
+export const resetObserver = () => {
+  observer?.disconnect();
+  observer = null;
+};
+
 const attachObserver = (el, resizeHandler) => {
   if (!isFunction(resizeHandler)) {
     throw TypeError('directive value must be a function');

package/src/vendor/bootstrap-vue/src/components/modal/modal.js

@@ -386,7 +386,7 @@ export const BModal = /*#__PURE__*/ extend({
       if (this.isClosing) {
         // If we are in the process of closing, wait until hidden before re-opening
         /* istanbul ignore next */
-        this.$once(EVENT_NAME_HIDDEN, this.show)
+        this.$_showOnHidden = true
         /* istanbul ignore next */
         return
       }
@@ -545,6 +545,11 @@ export const BModal = /*#__PURE__*/ extend({
         // TODO: Need to find a way to pass the `trigger` property
         //       to the `hidden` event, not just only the `hide` event
         this.emitEvent(this.buildEvent(EVENT_NAME_HIDDEN))
+        // Handle pending show request (show was called while closing)
+        if (this.$_showOnHidden) {
+          this.$_showOnHidden = false
+          this.show()
+        }
       })
     },
     emitEvent(bvEvent) {

package/src/vendor/bootstrap-vue/src/components/table/helpers/mixin-filtering.js

@@ -142,6 +142,10 @@ export const filteringMixin = extend({
       }
       if (isFiltered) {
         this.$emit(EVENT_NAME_FILTERED, filteredItems, filteredItems.length)
+        // Clear selection on filter change if selectable (defined in mixin-selectable.js)
+        if (this.hasSelectableRowClick) {
+          this.clearSelected()
+        }
       }
       this.isFiltered = isFiltered
     },
@@ -151,6 +155,10 @@ export const filteringMixin = extend({
         // `false` so that users can update their pagination controls
         const { localItems } = this
         this.$emit(EVENT_NAME_FILTERED, localItems, localItems.length)
+        // Clear selection on filter change if selectable (defined in mixin-selectable.js)
+        if (this.hasSelectableRowClick) {
+          this.clearSelected()
+        }
       }
     }
   },

package/src/vendor/bootstrap-vue/src/components/table/helpers/mixin-items.js

@@ -127,6 +127,10 @@ export const itemsMixin = extend({
       // Emit context information for external paging/filtering/sorting handling
       if (!looseEqual(newValue, oldValue)) {
         this.$emit(EVENT_NAME_CONTEXT_CHANGED, newValue)
+        // Clear selection on context change if selectable (defined in mixin-selectable.js)
+        if (this.hasSelectableRowClick) {
+          this.clearSelected()
+        }
       }
     }
   },

package/src/vendor/bootstrap-vue/src/components/table/helpers/mixin-provider.js

@@ -101,15 +101,15 @@ export const providerMixin = extend({
   },
   methods: {
     refresh() {
-      const { items, refresh, computedBusy } = safeVueInstance(this)
+      const { items, computedBusy } = safeVueInstance(this)
 
       // Public Method: Force a refresh of the provider function
-      this.$off(EVENT_NAME_REFRESHED, refresh)
+      this.$_pendingRefresh = false
       if (computedBusy) {
         // Can't force an update when forced busy by user (busy prop === true)
         if (this.localBusy && this.hasProvider) {
           // But if provider running (localBusy), re-schedule refresh once `refreshed` emitted
-          this.$on(EVENT_NAME_REFRESHED, refresh)
+          this.$_pendingRefresh = true
         }
       } else {
         this.clearSelected()
@@ -130,6 +130,11 @@ export const providerMixin = extend({
       if (this.id) {
         this.emitOnRoot(ROOT_EVENT_NAME_REFRESHED, this.id)
       }
+      // Handle pending refresh request
+      if (this.$_pendingRefresh) {
+        this.$_pendingRefresh = false
+        this.refresh()
+      }
     },
     _providerUpdate() {
       // Refresh the provider function items.
@@ -180,7 +185,7 @@ export const providerMixin = extend({
           // and clear the busy state
           warn(`Provider function error [${e.name}] ${e.message}.`, NAME_TABLE)
           this.localBusy = false
-          this.$off(EVENT_NAME_REFRESHED, this.refresh)
+          this.$_pendingRefresh = false
         }
       })
     }

package/src/vendor/bootstrap-vue/src/components/table/helpers/mixin-selectable.js

@@ -1,10 +1,5 @@
 import { extend } from '../../../vue'
-import {
-  EVENT_NAME_CONTEXT_CHANGED,
-  EVENT_NAME_FILTERED,
-  EVENT_NAME_ROW_CLICKED,
-  EVENT_NAME_ROW_SELECTED
-} from '../../../constants/events'
+import { EVENT_NAME_ROW_SELECTED } from '../../../constants/events'
 import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../../constants/props'
 import { arrayIncludes, createArray } from '../../../utils/array'
 import { identity } from '../../../utils/identity'
@@ -104,16 +99,14 @@ export const selectableMixin = extend({
         this.clearSelected()
       }
     },
-    selectable(newValue) {
+    selectable() {
       this.clearSelected()
-      this.setSelectionHandlers(newValue)
     },
     selectMode() {
       this.clearSelected()
     },
-    hasSelectableRowClick(newValue) {
+    hasSelectableRowClick() {
       this.clearSelected()
-      this.setSelectionHandlers(!newValue)
     },
     selectedRows(selectedRows, oldValue) {
       if (this.isSelectable && !looseEqual(selectedRows, oldValue)) {
@@ -128,12 +121,6 @@ export const selectableMixin = extend({
       }
     }
   },
-  beforeMount() {
-    // Set up handlers if needed
-    if (this.isSelectable) {
-      this.setSelectionHandlers(true)
-    }
-  },
   methods: {
     // Public methods
     selectRow(index) {
@@ -193,14 +180,6 @@ export const selectableMixin = extend({
         'aria-selected': !this.isSelectable ? null : this.isRowSelected(index) ? 'true' : 'false'
       }
     },
-    setSelectionHandlers(on) {
-      const method = on && !this.noSelectOnClick ? '$on' : '$off'
-      // Handle row-clicked event
-      this[method](EVENT_NAME_ROW_CLICKED, this.selectionHandler)
-      // Clear selection on filter, pagination, and sort changes
-      this[method](EVENT_NAME_FILTERED, this.clearSelected)
-      this[method](EVENT_NAME_CONTEXT_CHANGED, this.clearSelected)
-    },
     selectionHandler(item, index, event) {
       /* istanbul ignore if: should never happen */
       if (!this.isSelectable || this.noSelectOnClick) {

package/src/vendor/bootstrap-vue/src/components/table/helpers/mixin-sorting.js

@@ -1,9 +1,5 @@
 import { extend } from '../../../vue'
-import {
-  EVENT_NAME_HEAD_CLICKED,
-  EVENT_NAME_SORT_CHANGED,
-  MODEL_EVENT_NAME_PREFIX
-} from '../../../constants/events'
+import { EVENT_NAME_SORT_CHANGED, MODEL_EVENT_NAME_PREFIX } from '../../../constants/events'
 import {
   PROP_TYPE_ARRAY_STRING,
   PROP_TYPE_BOOLEAN,
@@ -140,16 +136,6 @@ export const sortingMixin = extend({
     }
   },
   watch: {
-    /* istanbul ignore next: pain in the butt to test */
-    isSortable(newValue) {
-      if (newValue) {
-        if (this.isSortable) {
-          this.$on(EVENT_NAME_HEAD_CLICKED, this.handleSort)
-        }
-      } else {
-        this.$off(EVENT_NAME_HEAD_CLICKED, this.handleSort)
-      }
-    },
     [MODEL_PROP_NAME_SORT_DESC](newValue) {
       /* istanbul ignore next */
       if (newValue === this.localSortDesc) {
@@ -177,11 +163,6 @@ export const sortingMixin = extend({
       }
     }
   },
-  created() {
-    if (this.isSortable) {
-      this.$on(EVENT_NAME_HEAD_CLICKED, this.handleSort)
-    }
-  },
   methods: {
     // Handlers
     // Need to move from thead-mixin

package/src/vendor/bootstrap-vue/src/components/table/helpers/mixin-tbody.js

@@ -71,12 +71,18 @@ export const tbodyMixin = extend({
     },
     // Emits a row event, with the item object, row index and original event
     emitTbodyRowEvent(type, event) {
-      if (type && this.hasListener(type) && event && event.target) {
+      if (type && event && event.target) {
         const rowIndex = this.getTbodyTrIndex(event.target)
         if (rowIndex > -1) {
           // The array of TRs correlate to the `computedItems` array
           const item = this.computedItems[rowIndex]
-          this.$emit(type, item, rowIndex, event)
+          if (this.hasListener(type)) {
+            this.$emit(type, item, rowIndex, event)
+          }
+          // Call selectionHandler directly if selectable (defined in mixin-selectable.js)
+          if (type === EVENT_NAME_ROW_CLICKED && this.hasSelectableRowClick) {
+            this.selectionHandler(item, rowIndex, event)
+          }
         }
       }
     },

package/src/vendor/bootstrap-vue/src/components/table/helpers/mixin-thead.js

@@ -59,6 +59,10 @@ export const theadMixin = extend({
       }
       stopEvent(event)
       this.$emit(EVENT_NAME_HEAD_CLICKED, field.key, field, event, isFoot)
+      // Call handleSort directly if sortable (defined in mixin-sorting.js)
+      if (this.isSortable) {
+        this.handleSort(field.key, field, event, isFoot)
+      }
     },
     renderThead(isFoot = false) {
       const {

package/src/vendor/bootstrap-vue/src/components/toast/helpers/bv-toast.js

@@ -3,13 +3,8 @@
  */
 
 import { NAME_TOAST, NAME_TOASTER, NAME_TOAST_POP } from '../../../constants/components'
-import {
-  EVENT_NAME_DESTROYED,
-  EVENT_NAME_HIDDEN,
-  EVENT_NAME_HIDE,
-  EVENT_NAME_SHOW,
-  HOOK_EVENT_NAME_DESTROYED
-} from '../../../constants/events'
+import { EVENT_NAME_DESTROYED, EVENT_NAME_HIDE, EVENT_NAME_SHOW } from '../../../constants/events'
+import { onInstanceDestroy } from '../../../utils/on-instance-destroy'
 import { useParentMixin } from '../../../mixins/use-parent'
 import { concat } from '../../../utils/array'
 import { getComponentConfig } from '../../../utils/config'
@@ -77,8 +72,8 @@ const plugin = Vue => {
       }
     },
     mounted() {
-      // Self destruct handler
-      const handleDestroy = () => {
+      // Self destruct handler (stored as instance property for use in onAfterLeave)
+      this.$_handleDestroy = () => {
         // Ensure the toast has been force hidden
         this.localShow = false
         this.doRender = false
@@ -93,16 +88,23 @@ const plugin = Vue => {
         })
       }
       // Self destruct if parent destroyed
-      this.bvParent.$once(HOOK_EVENT_NAME_DESTROYED, handleDestroy)
-      // Self destruct after hidden
-      this.$once(EVENT_NAME_HIDDEN, handleDestroy)
+      onInstanceDestroy(this.bvParent, this.$_handleDestroy)
       // Self destruct when toaster is destroyed
       this.listenOnRoot(getRootEventName(NAME_TOASTER, EVENT_NAME_DESTROYED), toaster => {
         /* istanbul ignore next: hard to test */
         if (toaster === this.toaster) {
-          handleDestroy()
+          this.$_handleDestroy()
         }
       })
+    },
+    methods: {
+      // Override parent's onAfterLeave to self-destruct after hidden
+      onAfterLeave() {
+        // Call parent's implementation
+        BToast.options.methods.onAfterLeave.call(this)
+        // Self destruct after hidden
+        this.$_handleDestroy()
+      }
     }
   })
 

package/src/vendor/bootstrap-vue/src/components/tooltip/helpers/bv-popper.js

@@ -12,9 +12,9 @@ import {
   EVENT_NAME_HIDDEN,
   EVENT_NAME_HIDE,
   EVENT_NAME_SHOW,
-  EVENT_NAME_SHOWN,
-  HOOK_EVENT_NAME_DESTROYED
+  EVENT_NAME_SHOWN
 } from '../../../constants/events'
+import { onInstanceDestroy } from '../../../utils/on-instance-destroy'
 import {
   PROP_TYPE_ARRAY_STRING,
   PROP_TYPE_NUMBER_STRING,
@@ -136,12 +136,8 @@ export const BVPopper = /*#__PURE__*/ extend({
     this.$_popper = null
     // Ensure we show as we mount
     this.localShow = true
-    // Create popper instance before shown
-    this.$on(EVENT_NAME_SHOW, el => {
-      this.popperCreate(el)
-    })
-    // Self destruct handler
-    const handleDestroy = () => {
+    // Self destruct handler (stored as instance property for use in afterLeave)
+    this.$_handleDestroy = () => {
       this.$nextTick(() => {
         // In a `requestAF()` to release control back to application
         requestAF(() => {
@@ -150,9 +146,7 @@ export const BVPopper = /*#__PURE__*/ extend({
       })
     }
     // Self destruct if parent destroyed
-    this.bvParent.$once(HOOK_EVENT_NAME_DESTROYED, handleDestroy)
-    // Self destruct after hidden
-    this.$once(EVENT_NAME_HIDDEN, handleDestroy)
+    onInstanceDestroy(this.bvParent, this.$_handleDestroy)
   },
   beforeMount() {
     // Ensure that the attachment position is correct before mounting
@@ -236,10 +230,17 @@ export const BVPopper = /*#__PURE__*/ extend({
         props: { appear: true, noFade },
         on: {
           // Events used by parent component/instance
-          beforeEnter: el => this.$emit(EVENT_NAME_SHOW, el),
+          beforeEnter: el => {
+            this.popperCreate(el)
+            this.$emit(EVENT_NAME_SHOW, el)
+          },
           afterEnter: el => this.$emit(EVENT_NAME_SHOWN, el),
           beforeLeave: el => this.$emit(EVENT_NAME_HIDE, el),
-          afterLeave: el => this.$emit(EVENT_NAME_HIDDEN, el)
+          afterLeave: el => {
+            this.$emit(EVENT_NAME_HIDDEN, el)
+            // Self destruct after hidden
+            this.$_handleDestroy()
+          }
         }
       },
       [this.localShow ? this.renderTemplate(h) : h()]