@gitlab/ui 49.0.1 → 49.0.2

package/dist/components/base/token_selector/token_selector_dropdown.js

@@ -49,30 +49,24 @@ var script = {
       required: true
     }
   },
-
   data() {
     return {
       focusedDropdownItemIndex: 0
     };
   },
-
   computed: {
     focusedDropdownItem() {
       return this.dropdownItems[this.focusedDropdownItemIndex];
     }
-
   },
   watch: {
     focusedDropdownItem(newValue, oldValue) {
       if ((newValue === null || newValue === void 0 ? void 0 : newValue.id) !== (oldValue === null || oldValue === void 0 ? void 0 : oldValue.id)) {
         this.$emit('input', newValue);
-
         if (!newValue) {
           return;
         }
-
         const dropdownItemRef = this.getDropdownItemRef(newValue);
-
         if (dropdownItemRef !== null && dropdownItemRef !== void 0 && dropdownItemRef.$el) {
           dropdownItemRef.$el.scrollIntoView({
             block: 'nearest',
@@ -81,9 +75,7 @@ var script = {
         }
       }
     }
-
   },
-
   created() {
     this.registerDropdownEventHandlers({
       handleUpArrow: this.handleUpArrow,
@@ -94,97 +86,77 @@ var script = {
     this.registerResetFocusedDropdownItem(this.resetFocusedDropdownItem);
     this.$emit('input', this.focusedDropdownItem);
   },
-
   methods: {
     handleDropdownItemClick(dropdownItem) {
       this.$emit('dropdown-item-click', dropdownItem);
     },
-
     handleMousedown(dropdownItem) {
       // `event.relatedTarget` returns `null` on Safari because buttons are not focused on click (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus)
       // Because of this we need to manually focus on the button. We do this in `mousedown` because it is fired before the `blur` event
       const dropdownItemRef = dropdownItem === null ? this.$refs.userDefinedTokenDropdownItem : this.getDropdownItemRef(dropdownItem);
-
       if (dropdownItemRef !== null && dropdownItemRef !== void 0 && dropdownItemRef.$el) {
         dropdownItemRef.$el.querySelector('button').focus();
       }
     },
-
     handleUpArrow() {
       if (!this.show) {
         return;
-      } // First dropdown item has been reached
-
+      }
 
+      // First dropdown item has been reached
       if (this.focusedDropdownItemIndex === 0) {
         return;
       }
-
       this.focusPrevDropdownItem();
     },
-
     handleDownArrow() {
       if (!this.show) {
         this.$emit('show');
         return;
-      } // Last dropdown item has been reached
-
+      }
 
+      // Last dropdown item has been reached
       if (this.focusedDropdownItemIndex === this.dropdownItems.length - 1) {
         return;
       }
-
       this.focusNextDropdownItem();
     },
-
     handleHomeKey(event) {
       event.preventDefault();
       this.focusFirstDropdownItem();
     },
-
     handleEndKey(event) {
       event.preventDefault();
       this.focusLastDropdownItem();
     },
-
     focusLastDropdownItem() {
       this.focusedDropdownItemIndex = this.dropdownItems.length - 1;
     },
-
     focusFirstDropdownItem() {
       this.focusedDropdownItemIndex = 0;
     },
-
     focusNextDropdownItem() {
       this.focusedDropdownItemIndex += 1;
     },
-
     focusPrevDropdownItem() {
       this.focusedDropdownItemIndex -= 1;
     },
-
     resetFocusedDropdownItem() {
       this.focusedDropdownItemIndex = 0;
     },
-
     dropdownItemIsFocused(dropdownItem) {
       if (!this.focusedDropdownItem) {
         return false;
       }
-
       return dropdownItem.id === this.focusedDropdownItem.id;
     },
-
     getDropdownItemRef(dropdownItem) {
       var _this$$refs$dropdownI;
-
       return (_this$$refs$dropdownI = this.$refs.dropdownItems) === null || _this$$refs$dropdownI === void 0 ? void 0 : _this$$refs$dropdownI.find(ref => ref.$attrs['data-dropdown-item-id'] === dropdownItem.id);
     },
-
     dropdownItemIdAttribute(dropdownItem) {
       return dropdownItem ? `${this.componentId}-dropdown-item-${dropdownItem.id}` : null;
     }
-
   }
 };
 

package/dist/components/charts/area/area.js

@@ -80,14 +80,11 @@ var script = {
       type: String,
       required: false,
       default: LEGEND_LAYOUT_INLINE,
-
       validator(layout) {
         return [LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE].indexOf(layout) !== -1;
       }
-
     }
   },
-
   data() {
     // Part of the tooltip related data can be
     // moved into the tooltip component.
@@ -113,14 +110,11 @@ var script = {
       selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText
     };
   },
-
   computed: {
     series() {
       const dataSeries = this.data.map((series, index) => {
         const defaultColor = colorFromDefaultPalette(index);
-
         const getColor = type => series[type] && series[type].color ? series[type].color : defaultColor;
-
         return merge({
           areaStyle: {
             opacity: defaultAreaOpacity,
@@ -134,20 +128,17 @@ var script = {
             color: getColor('itemStyle')
           }
         }, lineStyle, series, getThresholdConfig(this.thresholds));
-      }); // if annotation series exists, append it
+      });
+      // if annotation series exists, append it
       // along with data series
-
       if (this.annotationSeries) {
         return [...dataSeries, this.annotationSeries];
       }
-
       return dataSeries;
     },
-
     annotationSeries() {
       return generateAnnotationSeries(this.annotations);
     },
-
     options() {
       const defaultAreaChartOptions = {
         xAxis: {
@@ -170,12 +161,11 @@ var script = {
           show: false
         }
       };
-      const mergedOptions = merge({}, defaultChartOptions, defaultAreaChartOptions, this.option, dataZoomAdjustments(this.option.dataZoom), this.toolboxAdjustments); // All chart options can be merged but series
+      const mergedOptions = merge({}, defaultChartOptions, defaultAreaChartOptions, this.option, dataZoomAdjustments(this.option.dataZoom), this.toolboxAdjustments);
+      // All chart options can be merged but series
       // needs to be handled specially.
-
       return mergeSeriesToOptions(mergeAnnotationAxisToOptions(mergedOptions, this.hasAnnotations), this.series);
     },
-
     /**
      * Annotations currently are passed as series options in monitoring dashboard.
      * Once https://gitlab.com/gitlab-org/gitlab/-/issues/213390 is closed,
@@ -186,21 +176,17 @@ var script = {
     hasAnnotations() {
       return this.annotations.length !== 0 || seriesHasAnnotations(this.option.series);
     },
-
     shouldShowAnnotationsTooltip() {
       return this.chart && this.hasAnnotations;
     },
-
     compiledOptions() {
       return this.chart ? this.chart.getOption() : null;
     },
-
     legendStyle() {
       return {
         paddingLeft: `${grid.left}px`
       };
     },
-
     seriesInfo() {
       return this.compiledOptions.series.reduce((acc, series, index) => {
         if (series.type === 'line') {
@@ -211,20 +197,16 @@ var script = {
             data: this.includeLegendAvgMax ? series.data.map(data => data[1]) : undefined
           });
         }
-
         return acc;
       }, []);
     }
-
   },
-
   beforeDestroy() {
     this.chart.getDom().removeEventListener('mousemove', this.debouncedShowHideTooltip);
     this.chart.getDom().removeEventListener('mouseout', this.debouncedShowHideTooltip);
     this.chart.off('mouseout', this.hideAnnotationsTooltip);
     this.chart.off('mouseover', this.onChartMouseOver);
   },
-
   methods: {
     defaultFormatTooltipText(params) {
       const {
@@ -234,26 +216,26 @@ var script = {
       this.$set(this, 'dataTooltipContent', tooltipContent);
       this.dataTooltipTitle = xLabels.join(', ');
     },
-
     defaultAnnotationTooltipText(params) {
       var _params$data$tooltipD;
-
       return {
         title: params.data.xAxis,
         content: (_params$data$tooltipD = params.data.tooltipData) === null || _params$data$tooltipD === void 0 ? void 0 : _params$data$tooltipD.content
       };
     },
-
     onCreated(chart) {
       // These listeners are used to show/hide data tooltips
       // when the mouse is hovered over the parent container
       // of echarts' svg element. This works only for data points
       // and not markPoints.
       chart.getDom().addEventListener('mousemove', this.debouncedShowHideTooltip);
-      chart.getDom().addEventListener('mouseout', this.debouncedShowHideTooltip); // eCharts inbuild mouse events
+      chart.getDom().addEventListener('mouseout', this.debouncedShowHideTooltip);
+
+      // eCharts inbuild mouse events
       // https://echarts.apache.org/en/api.html#events.Mouse%20events
       // is used to attach listeners to markPoints. These listeners
       // are currently used for annotation arrows at the bottom of the chart.
+
       // Because data points and annotations arrows are in different
       // sections of the charts with their own mouseovers and mouseouts,
       // there shouldn't be an overlapping situation where both tooltips
@@ -263,11 +245,9 @@ var script = {
         chart.on('mouseout', this.onChartDataPointMouseOut);
         chart.on('mouseover', this.onChartDataPointMouseOver);
       }
-
       this.chart = chart;
       this.$emit('created', chart);
     },
-
     showHideTooltip(mouseEvent) {
       this.showDataTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
       this.dataTooltipPosition = {
@@ -275,11 +255,9 @@ var script = {
         top: `${mouseEvent.zrY}px`
       };
     },
-
     onChartDataPointMouseOut() {
       this.showAnnotationsTooltip = false;
     },
-
     /**
      * Check if the hovered data point is an annotation
      * point to show the annotation tooltip.
@@ -303,11 +281,9 @@ var script = {
         };
       }
     },
-
     onLabelChange(params) {
       this.selectedFormatTooltipText(params);
     }
-
   }
 };
 

package/dist/components/charts/bar/bar.js

@@ -12,25 +12,25 @@ import ChartTooltip from '../tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
+
 /**
  * `nameGap` in charts/config is set to 50 but it is not
  * used for bar charts as the axes are flipped. That is why
  * we're explicitly setting it here
  */
-
 const DEFAULT_NAME_GAP = 50;
+
 /**
  * This is the magic number at which the y-axis name
  * and y-axis labels don't overlap
  * @Number
  */
-
 const AXIS_LABEL_LENGTH = 7;
+
 /**
  * Because the axes are reversed in bar charts defaultChartOptions
  * xAxis and yAxis needs to be handled specifically.
  */
-
 const defaultOptions = {
   grid,
   xAxis: {
@@ -87,7 +87,6 @@ var script = {
       default: 'value'
     }
   },
-
   data() {
     return {
       chart: null,
@@ -101,7 +100,6 @@ var script = {
       debouncedMoveShowTooltip: debounceByAnimationFrame(this.moveShowTooltip)
     };
   },
-
   computed: {
     series() {
       return Object.keys(this.data).map((key, index) => {
@@ -125,7 +123,6 @@ var script = {
         };
       });
     },
-
     options() {
       const mergedOptions = merge({}, defaultOptions, {
         xAxis: {
@@ -152,21 +149,18 @@ var script = {
         legend: {
           show: false
         }
-      }, this.option, dataZoomAdjustments(this.option.dataZoom), this.toolboxAdjustments); // All chart options can be merged but series
+      }, this.option, dataZoomAdjustments(this.option.dataZoom), this.toolboxAdjustments);
+      // All chart options can be merged but series
       // needs to be handled specially
-
       return mergeSeriesToOptions(mergedOptions, this.series);
     }
-
   },
-
   beforeDestroy() {
     if (this.chart) {
       this.chart.getDom().removeEventListener('mousemove', this.debouncedMoveShowTooltip);
       this.chart.getDom().removeEventListener('mouseout', this.debouncedMoveShowTooltip);
     }
   },
-
   methods: {
     moveShowTooltip(mouseEvent) {
       this.tooltipPosition = {
@@ -175,14 +169,12 @@ var script = {
       };
       this.showTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
     },
-
     onCreated(chart) {
       this.chart = chart;
       this.$emit('created', chart);
       chart.getDom().addEventListener('mousemove', this.debouncedMoveShowTooltip);
       chart.getDom().addEventListener('mouseout', this.debouncedMoveShowTooltip);
     },
-
     onLabelChange(params) {
       const {
         yLabels,
@@ -191,7 +183,6 @@ var script = {
       this.$set(this, 'tooltipContent', tooltipContent);
       this.tooltipTitle = yLabels.join(', ');
     },
-
     /**
      * The existing getDefaultTooltipContent in utils works against the y-axis value.
      * However, for bar charts, the tooltip should be against x-axis values.
@@ -208,19 +199,17 @@ var script = {
         yLabels,
         tooltipContent
       } = params.seriesData.reduce((acc, chartItem) => {
-        const [value, title] = chartItem.value || []; // The x axis title is used instead of y axis
-
+        const [value, title] = chartItem.value || [];
+        // The x axis title is used instead of y axis
         const seriesName = seriesDataLength === 1 && xAxisTitle ? xAxisTitle : chartItem.seriesName;
         const color = seriesDataLength === 1 ? '' : chartItem.color;
         acc.tooltipContent[seriesName] = {
           value,
           color
         };
-
         if (!acc.yLabels.includes(title)) {
           acc.yLabels.push(title);
         }
-
         return acc;
       }, {
         yLabels: [],
@@ -231,7 +220,6 @@ var script = {
         tooltipContent
       };
     }
-
   }
 };
 

package/dist/components/charts/chart/chart.js

@@ -5,13 +5,12 @@ import { GlResizeObserverDirective } from '../../../directives/resize_observer/r
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
+
 /**
  * Allowed values by eCharts
  * https://echarts.apache.org/en/api.html#echartsInstance.resize
  */
-
 const sizeValidator = size => Number.isFinite(size) || size === 'auto' || size == null;
-
 var script = {
   directives: {
     resizeObserver: GlResizeObserverDirective
@@ -21,7 +20,6 @@ var script = {
       type: Object,
       required: true
     },
-
     /**
      * Warning: this prop is deprecated and will soon be removed
      * Please do not utilize `disableTheme` for formatting
@@ -53,11 +51,9 @@ var script = {
       type: String,
       required: false,
       default: 'svg',
-
       validator(renderer) {
         return validRenderers.includes(renderer);
       }
-
     },
     responsive: {
       type: Boolean,
@@ -65,36 +61,29 @@ var script = {
       default: false
     }
   },
-
   data() {
     return {
       chart: null
     };
   },
-
   watch: {
     options() {
       if (this.chart) {
         this.draw();
       }
     },
-
     width() {
       this.setChartSize();
     },
-
     height() {
       this.setChartSize();
     }
-
   },
-
   created() {
     if (!this.disableTheme) {
       echarts.registerTheme(themeName, createTheme(this.options));
     }
   },
-
   async mounted() {
     await this.$nextTick();
     this.chart = echarts.init(this.$refs.chart, this.disableTheme ? null : themeName, {
@@ -102,43 +91,35 @@ var script = {
       width: defaultWidth,
       height: defaultHeight
     });
-
     if (this.groupId.length) {
       this.chart.group = this.groupId;
       echarts.connect(this.groupId);
     }
-
     this.chart.on('click', this.handleClick);
     /**
      * Emitted after calling `echarts.init`
      */
-
     this.$emit('created', this.chart);
     this.draw();
     this.setChartSize();
   },
-
   beforeDestroy() {
     this.chart.off('click', this.handleClick);
   },
-
   methods: {
     draw() {
       this.chart.setOption(this.options);
       /**
        * Emitted after calling `echarts.setOption`
        */
-
       this.$emit('updated', this.chart);
     },
-
     setChartSize() {
       this.chart.resize({
         width: this.width || 'auto',
         height: this.height || defaultHeight
       });
     },
-
     handleClick(params) {
       /**
        * Emitted when clicked on a data item in the chart (e.g., a bar/column).
@@ -151,11 +132,9 @@ var script = {
         params
       });
     },
-
     handleResize() {
       if (this.responsive) this.chart.resize();
     }
-
   }
 };
 

package/dist/components/charts/column/column.js

@@ -11,7 +11,8 @@ import ChartTooltip from '../tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
-const yAxisDefaults = { ...yAxis,
+const yAxisDefaults = {
+  ...yAxis,
   nameLocation: 'center',
   axisTick: {
     show: false
@@ -65,7 +66,6 @@ var script = {
       validator: value => ['value', 'category', 'time', 'log'].indexOf(value) !== -1
     }
   },
-
   data() {
     return {
       chart: null,
@@ -79,12 +79,10 @@ var script = {
       debouncedMoveShowTooltip: debounceByAnimationFrame(this.moveShowTooltip)
     };
   },
-
   computed: {
     hasSecondaryAxis() {
       return Boolean(this.secondaryData.length);
     },
-
     barSeries() {
       return this.bars.map((_ref, index) => {
         let {
@@ -99,7 +97,6 @@ var script = {
         });
       });
     },
-
     lineSeries() {
       const offset = this.bars.length;
       return this.lines.map((_ref2, index) => {
@@ -115,7 +112,6 @@ var script = {
         });
       });
     },
-
     secondarySeries() {
       const offset = this.bars.length + this.lines.length;
       return this.secondaryData.map((_ref3, index) => {
@@ -140,13 +136,12 @@ var script = {
         });
       });
     },
-
     series() {
       return [...this.barSeries, ...this.lineSeries, ...this.secondarySeries];
     },
-
     options() {
-      const yAxisPrimary = { ...yAxisDefaults,
+      const yAxisPrimary = {
+        ...yAxisDefaults,
         name: this.yAxisTitle
       };
       const mergedOptions = merge({}, defaultChartOptions, {
@@ -170,26 +165,24 @@ var script = {
           name: this.xAxisTitle,
           type: this.xAxisType
         },
-        yAxis: this.hasSecondaryAxis ? [yAxisPrimary, { ...yAxisDefaults,
+        yAxis: this.hasSecondaryAxis ? [yAxisPrimary, {
+          ...yAxisDefaults,
           name: this.secondaryDataTitle,
           show: this.hasSecondaryAxis
         }] : yAxisPrimary,
         legend: {
           show: false
         }
-      }, this.option, dataZoomAdjustments(this.option.dataZoom), this.toolboxAdjustments); // All chart options can be merged but series
+      }, this.option, dataZoomAdjustments(this.option.dataZoom), this.toolboxAdjustments);
+      // All chart options can be merged but series
       // needs to be handled specially
-
       return mergeSeriesToOptions(mergedOptions, this.series);
     }
-
   },
-
   beforeDestroy() {
     this.chart.getDom().removeEventListener('mousemove', this.debouncedMoveShowTooltip);
     this.chart.getDom().removeEventListener('mouseout', this.debouncedMoveShowTooltip);
   },
-
   methods: {
     moveShowTooltip(mouseEvent) {
       this.tooltipPosition = {
@@ -198,14 +191,12 @@ var script = {
       };
       this.showTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
     },
-
     onCreated(chart) {
       chart.getDom().addEventListener('mousemove', this.debouncedMoveShowTooltip);
       chart.getDom().addEventListener('mouseout', this.debouncedMoveShowTooltip);
       this.chart = chart;
       this.$emit('created', chart);
     },
-
     onLabelChange(params) {
       const {
         xLabels,
@@ -214,7 +205,6 @@ var script = {
       this.$set(this, 'tooltipContent', tooltipContent);
       this.tooltipTitle = xLabels.join(', ');
     }
-
   }
 };