@gitlab/ui 136.3.1 → 137.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/dist/components/base/alert/alert.js +4 -4
  2. package/dist/components/base/collapse/collapse.js +3 -4
  3. package/dist/components/base/datepicker/datepicker.js +1 -1
  4. package/dist/components/base/filtered_search/filtered_search.js +4 -5
  5. package/dist/components/base/filtered_search/filtered_search_token.js +8 -9
  6. package/dist/components/base/filtered_search/filtered_search_token_segment.js +13 -14
  7. package/dist/components/base/form/form_checkbox/form_checkbox.js +14 -15
  8. package/dist/components/base/form/form_input/form_input.js +9 -11
  9. package/dist/components/base/form/form_radio/form_radio.js +14 -15
  10. package/dist/components/base/form/form_textarea/form_textarea.js +13 -16
  11. package/dist/components/base/infinite_scroll/infinite_scroll.js +27 -20
  12. package/dist/components/base/new_dropdowns/constants.js +2 -2
  13. package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown.js +1 -1
  14. package/dist/components/base/new_dropdowns/listbox/listbox.js +17 -19
  15. package/dist/components/base/sorting/sorting.js +2 -2
  16. package/dist/components/base/tabs/tabs/scrollable_tabs.js +6 -8
  17. package/dist/components/base/token_selector/token_selector.js +13 -15
  18. package/dist/components/charts/chart/chart.js +1 -1
  19. package/dist/components/charts/sparkline/sparkline.js +2 -2
  20. package/dist/components/dashboards/dashboard_panel/dashboard_panel.js +1 -1
  21. package/dist/vendor/bootstrap-vue/src/components/tooltip/helpers/bv-tooltip-template.js +4 -2
  22. package/dist/vendor/bootstrap-vue/src/components/tooltip/helpers/bv-tooltip.js +3 -1
  23. package/dist/vendor/bootstrap-vue/src/directives/tooltip/tooltip.js +2 -1
  24. package/package.json +4 -4
  25. package/src/components/base/alert/alert.vue +4 -4
  26. package/src/components/base/collapse/collapse.vue +3 -4
  27. package/src/components/base/datepicker/datepicker.vue +1 -1
  28. package/src/components/base/filtered_search/filtered_search.vue +4 -5
  29. package/src/components/base/filtered_search/filtered_search_token.vue +8 -9
  30. package/src/components/base/filtered_search/filtered_search_token_segment.vue +10 -11
  31. package/src/components/base/form/form_checkbox/form_checkbox.vue +14 -15
  32. package/src/components/base/form/form_input/form_input.vue +9 -11
  33. package/src/components/base/form/form_radio/form_radio.vue +14 -15
  34. package/src/components/base/form/form_textarea/form_textarea.vue +13 -16
  35. package/src/components/base/infinite_scroll/infinite_scroll.vue +22 -20
  36. package/src/components/base/new_dropdowns/constants.js +2 -2
  37. package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue +1 -1
  38. package/src/components/base/new_dropdowns/listbox/listbox.vue +17 -19
  39. package/src/components/base/sorting/sorting.vue +2 -2
  40. package/src/components/base/tabs/tabs/scrollable_tabs.vue +7 -9
  41. package/src/components/base/token_selector/token_selector.vue +12 -14
  42. package/src/components/charts/chart/chart.vue +1 -1
  43. package/src/components/charts/sparkline/sparkline.vue +2 -2
  44. package/src/components/dashboards/dashboard_panel/dashboard_panel.vue +2 -2
  45. package/src/tokens/build/docs/tokens-tailwind-docs.dark.json +34 -0
  46. package/src/tokens/build/docs/tokens-tailwind-docs.json +34 -0
  47. package/src/tokens/build/tailwind/tokens.cjs +1 -0
  48. package/src/vendor/bootstrap-vue/src/components/tooltip/helpers/bv-tooltip-template.js +4 -2
  49. package/src/vendor/bootstrap-vue/src/components/tooltip/helpers/bv-tooltip.js +3 -1
  50. package/src/vendor/bootstrap-vue/src/directives/tooltip/tooltip.js +2 -1
@@ -192,19 +192,19 @@ var script = {
192
192
  /**
193
193
  * Emitted when the primary action button is clicked.
194
194
  *
195
- * @event primaryAction
195
+ * @event primary-action
196
196
  * @type {object}
197
197
  */
198
- this.$emit('primaryAction', event);
198
+ this.$emit('primary-action', event);
199
199
  },
200
200
  secondaryButtonClicked(event) {
201
201
  /**
202
202
  * Emitted when the secondary action button is clicked.
203
203
  *
204
- * @event secondaryAction
204
+ * @event secondary-action
205
205
  * @type {object}
206
206
  */
207
- this.$emit('secondaryAction', event);
207
+ this.$emit('secondary-action', event);
208
208
  },
209
209
  onDismiss() {
210
210
  /**
@@ -71,10 +71,9 @@ var script = {
71
71
  }
72
72
  }
73
73
  },
74
- mounted() {
75
- this.$nextTick(() => {
76
- this.emitState();
77
- });
74
+ async mounted() {
75
+ await this.$nextTick();
76
+ this.emitState();
78
77
  },
79
78
  beforeDestroy() {
80
79
  // Trigger state emit if needed
@@ -417,7 +417,7 @@ var script = {
417
417
  /**
418
418
  * Emitted when the datepicker draws a new month.
419
419
  */
420
- this.$emit('monthChange');
420
+ this.$emit('month-change');
421
421
  },
422
422
  onKeydown() {
423
423
  if (this.textInput === '') {
@@ -427,11 +427,10 @@ var script = {
427
427
  this.activeTokenIdx = null;
428
428
  }
429
429
  },
430
- onClear() {
431
- this.$nextTick(() => {
432
- this.activeTokenIdx = this.lastTokenIdx;
433
- this.$emit('clear');
434
- });
430
+ async onClear() {
431
+ await this.$nextTick();
432
+ this.activeTokenIdx = this.lastTokenIdx;
433
+ this.$emit('clear');
435
434
  },
436
435
  submit() {
437
436
  /**
@@ -245,20 +245,19 @@ var script = {
245
245
  this.$emit('replace', createTerm(this.config.title));
246
246
  }
247
247
  },
248
- replaceToken(newType) {
248
+ async replaceToken(newType) {
249
249
  const newTokenConfig = this.availableTokens.find(_ref => {
250
250
  let type = _ref.type;
251
251
  return type === newType;
252
252
  });
253
253
  if (newTokenConfig === this.config) {
254
- this.$nextTick(() => {
255
- /**
256
- * Emitted when this term token will lose its focus.
257
- *
258
- * @event deactivate
259
- */
260
- this.$emit('deactivate');
261
- });
254
+ await this.$nextTick();
255
+ /**
256
+ * Emitted when this term token will lose its focus.
257
+ *
258
+ * @event deactivate
259
+ */
260
+ this.$emit('deactivate');
262
261
  return;
263
262
  }
264
263
  if (newTokenConfig) {
@@ -312,22 +312,21 @@ var script = {
312
312
  loose = _ref2.loose;
313
313
  return (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.find(option => loose ? match(option[this.optionTextField], inputValue) : option[this.optionTextField] === inputValue);
314
314
  },
315
- activate() {
315
+ async activate() {
316
316
  this.fallbackValue = this.value;
317
- this.$nextTick(() => {
318
- const input = this.$refs.input;
319
- if (input) {
320
- input.focus();
321
- input.scrollIntoView({
322
- block: 'nearest',
323
- inline: 'end'
324
- });
325
- this.alignSuggestions(input);
326
- if (this.cursorPosition === 'start') {
327
- input === null || input === void 0 ? void 0 : input.setSelectionRange(0, 0);
328
- }
317
+ await this.$nextTick();
318
+ const input = this.$refs.input;
319
+ if (input) {
320
+ input.focus();
321
+ input.scrollIntoView({
322
+ block: 'nearest',
323
+ inline: 'end'
324
+ });
325
+ this.alignSuggestions(input);
326
+ if (this.cursorPosition === 'start') {
327
+ input === null || input === void 0 ? void 0 : input.setSelectionRange(0, 0);
329
328
  }
330
- });
329
+ }
331
330
  },
332
331
  deactivate() {
333
332
  var _this$matchingOption;
@@ -221,7 +221,7 @@ var script = {
221
221
  }
222
222
  }
223
223
  },
224
- handleChange(_ref) {
224
+ async handleChange(_ref) {
225
225
  let _ref$target = _ref.target,
226
226
  checked = _ref$target.checked,
227
227
  indeterminate = _ref$target.indeterminate;
@@ -245,25 +245,24 @@ var script = {
245
245
  this.computedLocalChecked = localChecked;
246
246
 
247
247
  // Fire events in a `$nextTick()` to ensure the `v-model` is updated
248
- this.$nextTick(() => {
248
+ await this.$nextTick();
249
+ /**
250
+ * Emitted when selected value(s) is changed due to user interaction.
251
+ *
252
+ * @event change
253
+ */
254
+ this.$emit('change', localChecked);
255
+
256
+ // If this is a child of a group, we emit a change event on it as well
257
+ if (this.isGroup) {
249
258
  /**
250
259
  * Emitted when selected value(s) is changed due to user interaction.
251
260
  *
252
261
  * @event change
253
262
  */
254
- this.$emit('change', localChecked);
255
-
256
- // If this is a child of a group, we emit a change event on it as well
257
- if (this.isGroup) {
258
- /**
259
- * Emitted when selected value(s) is changed due to user interaction.
260
- *
261
- * @event change
262
- */
263
- this.group.$emit('change', localChecked);
264
- }
265
- this.$emit('indeterminate', indeterminate);
266
- });
263
+ this.group.$emit('change', localChecked);
264
+ }
265
+ this.$emit('indeterminate', indeterminate);
267
266
  },
268
267
  setIndeterminate(state) {
269
268
  // Indeterminate only supported in single checkbox mode
@@ -429,14 +429,13 @@ var script = {
429
429
  // Create private non-reactive props
430
430
  this.$_inputDebounceTimer = null;
431
431
  },
432
- mounted() {
432
+ async mounted() {
433
433
  this.setWheelStopper(this.noWheel);
434
434
  this.handleAutofocus();
435
- this.$nextTick(() => {
436
- // Update DOM with auto-generated ID after mount
437
- // to prevent SSR hydration errors
438
- this.localId = uniqueId('gl-form-input-');
439
- });
435
+ await this.$nextTick();
436
+ // Update DOM with auto-generated ID after mount
437
+ // to prevent SSR hydration errors
438
+ this.localId = uniqueId('gl-form-input-');
440
439
  },
441
440
  deactivated() {
442
441
  // Turn off listeners when keep-alive component deactivated
@@ -600,11 +599,10 @@ var script = {
600
599
  });
601
600
  this.blur();
602
601
  },
603
- handleAutofocus() {
604
- this.$nextTick(() => {
605
- window.requestAnimationFrame(() => {
606
- if (this.autofocus && isVisible(this.$refs.input)) this.focus();
607
- });
602
+ async handleAutofocus() {
603
+ await this.$nextTick();
604
+ window.requestAnimationFrame(() => {
605
+ if (this.autofocus && isVisible(this.$refs.input)) this.focus();
608
606
  });
609
607
  },
610
608
  select() {
@@ -173,33 +173,32 @@ var script = {
173
173
  this.$emit('input', newValue);
174
174
  }
175
175
  },
176
- handleChange() {
176
+ async handleChange() {
177
177
  const value = this.value;
178
178
 
179
179
  // Update `computedLocalChecked`
180
180
  this.computedLocalChecked = value;
181
181
 
182
182
  // Fire events in a `$nextTick()` to ensure the `v-model` is updated
183
- this.$nextTick(() => {
183
+ await this.$nextTick();
184
+ /**
185
+ * Emitted when the selected value is changed due to user interaction
186
+ *
187
+ * @event change
188
+ * @type {boolean} current selected value of radio group
189
+ */
190
+ this.$emit('change', value);
191
+
192
+ // If this is a child of a group, we emit a change event on it as well
193
+ if (this.isGroup) {
184
194
  /**
185
195
  * Emitted when the selected value is changed due to user interaction
186
196
  *
187
197
  * @event change
188
198
  * @type {boolean} current selected value of radio group
189
199
  */
190
- this.$emit('change', value);
191
-
192
- // If this is a child of a group, we emit a change event on it as well
193
- if (this.isGroup) {
194
- /**
195
- * Emitted when the selected value is changed due to user interaction
196
- *
197
- * @event change
198
- * @type {boolean} current selected value of radio group
199
- */
200
- this.group.$emit('change', value);
201
- }
202
- });
200
+ this.group.$emit('change', value);
201
+ }
203
202
  },
204
203
  focus() {
205
204
  if (!this.disabled) {
@@ -309,11 +309,10 @@ var script = {
309
309
  created() {
310
310
  this.$_inputDebounceTimer = null;
311
311
  },
312
- mounted() {
312
+ async mounted() {
313
313
  this.handleAutofocus();
314
- this.$nextTick(() => {
315
- this.localId = uniqueId('gl-form-textarea-');
316
- });
314
+ await this.$nextTick();
315
+ this.localId = uniqueId('gl-form-textarea-');
317
316
  },
318
317
  beforeDestroy() {
319
318
  this.clearDebounce();
@@ -423,13 +422,12 @@ var script = {
423
422
  */
424
423
  this.$emit('blur', event);
425
424
  },
426
- handleAutofocus() {
427
- this.$nextTick(() => {
428
- window.requestAnimationFrame(() => {
429
- if (this.autofocus && isVisible(this.$refs.input)) {
430
- this.focus();
431
- }
432
- });
425
+ async handleAutofocus() {
426
+ await this.$nextTick();
427
+ window.requestAnimationFrame(() => {
428
+ if (this.autofocus && isVisible(this.$refs.input)) {
429
+ this.focus();
430
+ }
433
431
  });
434
432
  },
435
433
  handleKeyPress(e) {
@@ -442,11 +440,10 @@ var script = {
442
440
  this.$emit('submit');
443
441
  }
444
442
  },
445
- setHeight() {
446
- this.$nextTick(() => {
447
- window.requestAnimationFrame(() => {
448
- this.heightInPx = this.computeHeight();
449
- });
443
+ async setHeight() {
444
+ await this.$nextTick();
445
+ window.requestAnimationFrame(() => {
446
+ this.heightInPx = this.computeHeight();
450
447
  });
451
448
  },
452
449
  computeHeight() {
@@ -49,7 +49,7 @@ var script = {
49
49
  }
50
50
  },
51
51
  watch: {
52
- fetchedItems(newVal, oldVal) {
52
+ async fetchedItems(newVal, oldVal) {
53
53
  // Re-adjust scroll to the current item if more items are added
54
54
  if (newVal > oldVal) {
55
55
  const _this$$refs$infiniteC = this.$refs.infiniteContainer,
@@ -58,32 +58,39 @@ var script = {
58
58
  // Only when scrolled to the top
59
59
  if (scrollHeight !== 0 && scrollTop === 0) {
60
60
  // Wait until the DOM is fully updated to adjust scroll
61
- this.$nextTick(() => {
62
- const newScrollHeight = this.$refs.infiniteContainer.scrollHeight;
61
+ await this.$nextTick();
62
+ const newScrollHeight = this.$refs.infiniteContainer.scrollHeight;
63
63
 
64
- // New scrollTop is the new height, minus the old height
65
- // minus a small space to allow the user to trigger a scroll once more
66
- let top = newScrollHeight - scrollHeight - adjustScrollGap;
64
+ // New scrollTop is the new height, minus the old height
65
+ // minus a small space to allow the user to trigger a scroll once more
66
+ let top = newScrollHeight - scrollHeight - adjustScrollGap;
67
67
 
68
- // Never adjust to 0, or a new event may be be triggered
69
- if (top < 1) {
70
- top = 1;
71
- }
72
- this.scrollTo({
73
- top
74
- });
68
+ // Never adjust to 0, or a new event may be be triggered
69
+ if (top < 1) {
70
+ top = 1;
71
+ }
72
+ this.scrollTo({
73
+ top
75
74
  });
76
75
  }
77
76
  }
78
77
  }
79
78
  },
80
- mounted() {
79
+ async mounted() {
80
+ var _this = this;
81
81
  // Scroll to bottom for reverse effect
82
- this.$nextTick(() => {
83
- if (this.$listeners.topReached && !this.$listeners.bottomReached) {
84
- this.scrollDown();
82
+ await this.$nextTick();
83
+
84
+ // Check both kebab-case (Vue 2) and camelCase (@vue/compat) $listeners.
85
+ const listening = function () {
86
+ for (var _len = arguments.length, names = new Array(_len), _key = 0; _key < _len; _key++) {
87
+ names[_key] = arguments[_key];
85
88
  }
86
- });
89
+ return names.some(name => _this.$listeners[name]);
90
+ };
91
+ if (listening('top-reached', 'topReached') && !listening('bottom-reached', 'bottomReached')) {
92
+ this.scrollDown();
93
+ }
87
94
  },
88
95
  methods: {
89
96
  /**
@@ -126,13 +133,13 @@ var script = {
126
133
  /**
127
134
  * Emitted when item container is scrolled to the top
128
135
  */
129
- this.$emit('topReached');
136
+ this.$emit('top-reached');
130
137
  }, throttleDuration),
131
138
  bottomReached: throttle(function bottomReachedThrottled() {
132
139
  /**
133
140
  * Emitted when item container is scrolled to the bottom
134
141
  */
135
- this.$emit('bottomReached');
142
+ this.$emit('bottom-reached');
136
143
  }, throttleDuration),
137
144
  itemsListHeight() {
138
145
  return this.$refs.infiniteContainer.scrollHeight;
@@ -1,8 +1,8 @@
1
1
  // base dropdown events
2
2
  const GL_DROPDOWN_SHOWN = 'shown';
3
3
  const GL_DROPDOWN_HIDDEN = 'hidden';
4
- const GL_DROPDOWN_BEFORE_CLOSE = 'beforeClose';
5
- const GL_DROPDOWN_FOCUS_CONTENT = 'focusContent';
4
+ const GL_DROPDOWN_BEFORE_CLOSE = 'before-close';
5
+ const GL_DROPDOWN_FOCUS_CONTENT = 'focus-content';
6
6
 
7
7
  // KeyboardEvent.code values
8
8
  const ARROW_DOWN = 'ArrowDown';
@@ -270,7 +270,7 @@ var script = {
270
270
  /**
271
271
  * Emitted when dropdown is about to be closed
272
272
  *
273
- * @event beforeClose
273
+ * @event before-close
274
274
  */
275
275
  this.$emit(GL_DROPDOWN_BEFORE_CLOSE, event);
276
276
  },
@@ -569,22 +569,21 @@ var script = {
569
569
  }
570
570
  },
571
571
  items: {
572
- handler() {
573
- this.$nextTick(() => {
574
- /* Every time the list of items changes (on search),
575
- * the observed elements are recreated, thus we need to start obesrving them again */
576
- this.observeScroll();
572
+ async handler() {
573
+ await this.$nextTick();
574
+ /* Every time the list of items changes (on search),
575
+ * the observed elements are recreated, thus we need to start obesrving them again */
576
+ this.observeScroll();
577
577
 
578
- /**
579
- * Every time the list of items changes, and there is a search string,
580
- * we want to visually highlight the first enabled item
581
- */
582
- if (this.searchHasOptions) {
583
- this.nextFocusedItemIndex = this.getFirstEnabledIndex();
584
- } else {
585
- this.nextFocusedItemIndex = null;
586
- }
587
- });
578
+ /**
579
+ * Every time the list of items changes, and there is a search string,
580
+ * we want to visually highlight the first enabled item
581
+ */
582
+ if (this.searchHasOptions) {
583
+ this.nextFocusedItemIndex = this.getFirstEnabledIndex();
584
+ } else {
585
+ this.nextFocusedItemIndex = null;
586
+ }
588
587
  }
589
588
  },
590
589
  ...(process.env.NODE_ENV !== 'production' ? {
@@ -774,7 +773,7 @@ var script = {
774
773
  const nextIndex = clamp(currentIndex + offset, 0, elements.length - 1);
775
774
  this.focusItem(nextIndex, elements);
776
775
  },
777
- focusItem(index, elements) {
776
+ async focusItem(index, elements) {
778
777
  let keepSearchFocused = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
779
778
  this.nextFocusedItemIndex = index;
780
779
 
@@ -791,9 +790,8 @@ var script = {
791
790
  var _elements$index;
792
791
  (_elements$index = elements[index]) === null || _elements$index === void 0 ? void 0 : _elements$index.focus();
793
792
  }
794
- this.$nextTick(() => {
795
- this.scrollActiveItemIntoView();
796
- });
793
+ await this.$nextTick();
794
+ this.scrollActiveItemIntoView();
797
795
  },
798
796
  focusSearchInput() {
799
797
  this.$refs.searchBox.focusInput();
@@ -145,7 +145,7 @@ var script = {
145
145
  *
146
146
  * @property {boolean} isAscending
147
147
  */
148
- this.$emit('sortDirectionChange', newDirection);
148
+ this.$emit('sort-direction-change', newDirection);
149
149
  },
150
150
  onSortByChanged(event) {
151
151
  /**
@@ -157,7 +157,7 @@ var script = {
157
157
  *
158
158
  * @property {string|number} value
159
159
  */
160
- this.$emit('sortByChange', event);
160
+ this.$emit('sort-by-change', event);
161
161
  }
162
162
  }
163
163
  };
@@ -68,23 +68,21 @@ var script = {
68
68
  }), {});
69
69
  }
70
70
  },
71
- mounted() {
72
- this.$nextTick(() => {
73
- this.navScrollWidth = this.getScrollWidth();
74
- });
71
+ async mounted() {
75
72
  this.handleNavScroll = debounce(e => {
76
73
  this.scrollLeft = e.target.scrollLeft;
77
74
  }, 100);
78
75
  this.getNavContainer().addEventListener('scroll', this.handleNavScroll);
76
+ await this.$nextTick();
77
+ this.navScrollWidth = this.getScrollWidth();
79
78
  },
80
79
  beforeDestroy() {
81
80
  this.getNavContainer().removeEventListener('scroll', this.handleNavScroll);
82
81
  },
83
- updated() {
82
+ async updated() {
84
83
  // Whenever tabs are added or removed we need to recalculate the reactive scrollWidth
85
- this.$nextTick(() => {
86
- this.navScrollWidth = this.getScrollWidth();
87
- });
84
+ await this.$nextTick();
85
+ this.navScrollWidth = this.getScrollWidth();
88
86
  },
89
87
  methods: {
90
88
  handleResize(_ref) {
@@ -216,7 +216,7 @@ var script = {
216
216
  }
217
217
  },
218
218
  watch: {
219
- inputText(newValue, oldValue) {
219
+ async inputText(newValue, oldValue) {
220
220
  if (newValue !== oldValue) {
221
221
  /**
222
222
  * Fired when user types in the token selector
@@ -234,13 +234,12 @@ var script = {
234
234
  // Wait a tick so `text-input` event can be used to validate
235
235
  // the value and change the `allowUserDefinedTokens` and/or
236
236
  // `hideDropdownWithNoItems` props
237
- this.$nextTick(() => {
238
- if (this.hideDropdown) {
239
- this.closeDropdown();
240
- } else if (newValue !== '') {
241
- this.openDropdown();
242
- }
243
- });
237
+ await this.$nextTick();
238
+ if (this.hideDropdown) {
239
+ this.closeDropdown();
240
+ } else if (newValue !== '') {
241
+ this.openDropdown();
242
+ }
244
243
  }
245
244
  }
246
245
  },
@@ -272,7 +271,8 @@ var script = {
272
271
  this.triggerTokenFocusNextBackspace = true;
273
272
  }
274
273
  },
275
- handleBlur(event) {
274
+ async handleBlur(event) {
275
+ var _event$relatedTarget, _event$relatedTarget$;
276
276
  /**
277
277
  * Fired when the token selector is blurred
278
278
  *
@@ -285,12 +285,10 @@ var script = {
285
285
  // Workaround is to:
286
286
  // 1. Explicitly focus the dropdown menu item button on `mousedown` event. (see './token_selector_dropdown.vue')
287
287
  // 2. Use `nextTick` so `blur` event is fired after the `mousedown` event
288
- this.$nextTick(() => {
289
- var _event$relatedTarget, _event$relatedTarget$;
290
- if (!((_event$relatedTarget = event.relatedTarget) !== null && _event$relatedTarget !== void 0 && (_event$relatedTarget$ = _event$relatedTarget.closest) !== null && _event$relatedTarget$ !== void 0 && _event$relatedTarget$.call(_event$relatedTarget, '.dropdown-item'))) {
291
- this.closeDropdown();
292
- }
293
- });
288
+ await this.$nextTick();
289
+ if (!((_event$relatedTarget = event.relatedTarget) !== null && _event$relatedTarget !== void 0 && (_event$relatedTarget$ = _event$relatedTarget.closest) !== null && _event$relatedTarget$ !== void 0 && _event$relatedTarget$.call(_event$relatedTarget, '.dropdown-item'))) {
290
+ this.closeDropdown();
291
+ }
294
292
  },
295
293
  handleEnter() {
296
294
  if (this.focusedDropdownItem && this.dropdownIsOpen) {
@@ -172,7 +172,7 @@ var script = {
172
172
  * @property {object} chart The chart instance
173
173
  * @property {object} params A params object, see also https://echarts.apache.org/en/api.html#events.Mouse%20events
174
174
  */
175
- this.$emit('chartItemClicked', {
175
+ this.$emit('chart-item-clicked', {
176
176
  chart: this.chart,
177
177
  params
178
178
  });
@@ -261,10 +261,10 @@ var script = {
261
261
  /**
262
262
  * Emitted when the chart is created.
263
263
  * The payload contains the echarts instance.
264
- * @event chartCreated
264
+ * @event chart-created
265
265
  * @type {object}
266
266
  */
267
- this.$emit('chartCreated', chartInstance);
267
+ this.$emit('chart-created', chartInstance);
268
268
  },
269
269
  handleResize() {
270
270
  this.chartInstance.resize();
@@ -201,7 +201,7 @@ const __vue_script__ = script;
201
201
  /* template */
202
202
  var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-border gl-h-full gl-rounded-lg gl-bg-default gl-p-5",class:_vm.containerClasses,attrs:{"id":_vm.panelId}},[_c('div',{staticClass:"gl-flex gl-h-full gl-flex-col"},[_c('div',{staticClass:"gl-mb-3 gl-flex gl-items-start gl-justify-between",attrs:{"data-testid":"panel-title"}},[(_vm.loading)?_c('gl-skeleton-loader',{attrs:{"lines":1}}):_c('div',{staticClass:"gl-flex gl-items-center gl-gap-2 gl-overflow-hidden"},[(_vm.hasTitleIcon)?_c('gl-icon',{class:_vm.titleIconClass,attrs:{"name":_vm.titleIcon,"data-testid":"panel-title-icon"}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-min-w-0"},[_c('div',{staticClass:"gl-flex gl-items-center gl-gap-2"},[(_vm.hasTitle)?_c('gl-truncate',{staticClass:"gl-min-w-0 gl-font-bold gl-text-default",attrs:{"text":_vm.title,"with-tooltip":""}}):_vm._e(),_vm._v(" "),(_vm.hasTitlePopover)?[_c('gl-icon',{staticClass:"gl-min-w-5",attrs:{"id":_vm.titlePopoverId,"data-testid":"panel-title-popover-icon","name":"information-o","variant":"info"}}),_vm._v(" "),_c('gl-popover',{attrs:{"data-testid":"panel-title-popover","boundary":"viewport","target":_vm.titlePopoverId,"css-classes":_vm.titlePopoverClasses},scopedSlots:_vm._u([(_vm.hasInfoPopoverTitleSlot)?{key:"title",fn:function(){return [_vm._t("info-popover-title")]},proxy:true}:null],null,true)},[_vm._v(" "),(_vm.hasInfoPopoverContentSlot)?[_vm._t("info-popover-content")]:_vm._e(),_vm._v(" "),(!_vm.hasInfoPopoverContentSlot)?[(_vm.hasTitlePopoverLink)?_c('gl-sprintf',{attrs:{"message":_vm.titlePopover.description},scopedSlots:_vm._u([{key:"link",fn:function(ref){
203
203
  var content = ref.content;
204
- return [_c('gl-link',{staticClass:"gl-text-sm",attrs:{"href":_vm.titlePopover.descriptionLink}},[_vm._v(_vm._s(content))])]}}],null,false,3051540671)}):[_vm._v(" "+_vm._s(_vm.titlePopover.description)+" ")]]:_vm._e()],2)]:_vm._e()],2),_vm._v(" "),(_vm.subtitle)?_c('p',{staticClass:"gl-mb-0 gl-mt-1 gl-text-sm gl-text-subtle",attrs:{"data-testid":"panel-subtitle"}},[_vm._v("\n "+_vm._s(_vm.subtitle)+"\n ")]):_vm._e()])],1),_vm._v(" "),(_vm.shouldShowActions || _vm.$scopedSlots.filters)?_c('div',{staticClass:"gl-flex gl-flex-col gl-items-end gl-gap-2",attrs:{"data-testid":"panel-actions-filters-container"}},[(_vm.shouldShowActions)?_c('gl-disclosure-dropdown',{attrs:{"items":_vm.actions,"icon":"ellipsis_v","toggle-text":_vm.actionsToggleText,"text-sr-only":"","no-caret":"","placement":"bottom-end","fluid-width":"","toggle-class":"gl-ml-1","category":"tertiary","positioning-strategy":"fixed","size":"small"},on:{"shown":function($event){return _vm.$emit('dropdownOpen')},"hidden":function($event){return _vm.$emit('dropdownClosed')}},scopedSlots:_vm._u([{key:"list-item",fn:function(ref){
204
+ return [_c('gl-link',{staticClass:"gl-text-sm",attrs:{"href":_vm.titlePopover.descriptionLink}},[_vm._v(_vm._s(content))])]}}],null,false,3051540671)}):[_vm._v(" "+_vm._s(_vm.titlePopover.description)+" ")]]:_vm._e()],2)]:_vm._e()],2),_vm._v(" "),(_vm.subtitle)?_c('p',{staticClass:"gl-mb-0 gl-mt-1 gl-text-sm gl-text-subtle",attrs:{"data-testid":"panel-subtitle"}},[_vm._v("\n "+_vm._s(_vm.subtitle)+"\n ")]):_vm._e()])],1),_vm._v(" "),(_vm.shouldShowActions || _vm.$scopedSlots.filters)?_c('div',{staticClass:"gl-flex gl-flex-col gl-items-end gl-gap-2",attrs:{"data-testid":"panel-actions-filters-container"}},[(_vm.shouldShowActions)?_c('gl-disclosure-dropdown',{attrs:{"items":_vm.actions,"icon":"ellipsis_v","toggle-text":_vm.actionsToggleText,"text-sr-only":"","no-caret":"","placement":"bottom-end","fluid-width":"","toggle-class":"gl-ml-1","category":"tertiary","positioning-strategy":"fixed","size":"small"},on:{"shown":function($event){return _vm.$emit('dropdown-open')},"hidden":function($event){return _vm.$emit('dropdown-closed')}},scopedSlots:_vm._u([{key:"list-item",fn:function(ref){
205
205
  var item = ref.item;
206
206
  return [_c('span',[_vm._v(_vm._s(item.text))])]}}],null,false,3418607560)}):_vm._e(),_vm._v(" "),(_vm.$scopedSlots.filters)?_c('div',{staticClass:"gl-flex gl-items-center gl-justify-end",attrs:{"data-testid":"panel-filters-container"}},[_vm._t("filters")],2):_vm._e()],1):_vm._e()],1),_vm._v(" "),_c('div',{class:_vm.bodyClasses},[(_vm.loading)?[_c('gl-loading-icon',{staticClass:"gl-min-h-8 gl-w-full",attrs:{"size":"lg"}}),_vm._v(" "),(_vm.isLoadingDelayed)?_c('div',{staticClass:"gl-w-full gl-text-subtle",attrs:{"data-testId":"panel-loading-delayed-indicator"}},[_vm._v("\n "+_vm._s(_vm.loadingDelayedText)+"\n ")]):_vm._e()]:_vm._t("body")],2),_vm._v(" "),_vm._t("alert-message",null,{"panelId":_vm.panelId})],2)])};
207
207
  var __vue_staticRenderFns__ = [];
@@ -62,8 +62,10 @@ const BVTooltipTemplate = /*#__PURE__*/extend({
62
62
  templateAttributes() {
63
63
  const id = this.id;
64
64
  return {
65
- // Apply attributes from root tooltip component
66
- ...this.bvParent.bvParent.$attrs,
65
+ // Apply attributes from root tooltip component. A directive has no such component, so
66
+ // `bvParent.bvParent` is the component holding the target element, whose attributes
67
+ // must not leak onto the template.
68
+ ...(this.bvParent.isDirective ? {} : this.bvParent.bvParent.$attrs),
67
69
  id,
68
70
  role: 'tooltip',
69
71
  tabindex: '-1',
@@ -90,7 +90,9 @@ const templateData = {
90
90
  // ID to use for tooltip/popover
91
91
  id: null,
92
92
  // Flag used by directives only, for HTML content
93
- html: false
93
+ html: false,
94
+ // Flag used by directives only, to suppress attribute forwarding
95
+ isDirective: false
94
96
  };
95
97
 
96
98
  // --- Main component ---