@gitlab/ui 49.0.0 → 49.0.2

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

@@ -26,7 +26,6 @@ var script = {
       required: false,
       default: () => []
     },
-
     /**
      * Should users be allowed to add tokens that are not in `dropdown-items`
      */
@@ -35,7 +34,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Dropdown items are loading, can be used when requesting new dropdown items
      */
@@ -44,7 +42,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Hide the dropdown if `dropdown-items` is empty. Will show `no-results-content` slot if this is `false`
      */
@@ -53,7 +50,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * CSS classes to add to the main token selector container (`.gl-token-selector`)
      */
@@ -62,7 +58,6 @@ var script = {
       required: false,
       default: ''
     },
-
     /**
      * CSS classes to add to dropdown menu `ul` element
      */
@@ -71,7 +66,6 @@ var script = {
       required: false,
       default: ''
     },
-
     /**
      * The autocomplete attribute value for the underlying `input` element
      */
@@ -80,7 +74,6 @@ var script = {
       required: false,
       default: 'off'
     },
-
     /**
      * The `aria-labelledby` attribute value for the underlying `input` element
      */
@@ -89,7 +82,6 @@ var script = {
       required: false,
       default: null
     },
-
     /**
      * The `placeholder` attribute value for the underlying `input` element
      */
@@ -98,7 +90,6 @@ var script = {
       required: false,
       default: null
     },
-
     /**
      * HTML attributes to add to the text input. Helpful for adding `data-testid` and `data-qa-selector` attributes
      */
@@ -107,7 +98,6 @@ var script = {
       required: false,
       default: null
     },
-
     /**
      * Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state
      */
@@ -116,7 +106,6 @@ var script = {
       required: false,
       default: null
     },
-
     /**
      * Tokens that are selected. This prop will automatically be added when using `v-model`
      */
@@ -126,7 +115,6 @@ var script = {
       validator: tokensValidator,
       required: true
     },
-
     /**
      * Controls the `view-only` mode for the tokens
      */
@@ -135,7 +123,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Allows user to bulk delete tokens when enabled
      */
@@ -145,7 +132,6 @@ var script = {
       default: false
     }
   },
-
   data() {
     return {
       inputText: '',
@@ -164,52 +150,40 @@ var script = {
       focusOnToken: () => {}
     };
   },
-
   computed: {
     filteredDropdownItems() {
       return this.dropdownItems.filter(dropdownItem => this.selectedTokens.findIndex(token => token.id === dropdownItem.id) === -1);
     },
-
     dropdownHasNoItems() {
       return !this.filteredDropdownItems.length;
     },
-
     userDefinedTokenCanBeAdded() {
       return this.allowUserDefinedTokens && this.dropdownHasNoItems && this.inputText !== '';
     },
-
     hideDropdown() {
       if (this.userDefinedTokenCanBeAdded) {
         return false;
       }
-
       if (this.hideDropdownWithNoItems && this.dropdownHasNoItems) {
         return true;
       }
-
       return false;
     },
-
     stateClass() {
       if (this.state === null) {
         return 'gl-inset-border-1-gray-400!';
       }
-
       return this.state ? 'is-valid gl-inset-border-1-gray-400!' : 'is-invalid gl-inset-border-1-red-500!';
     },
-
     hasSelectedTokens() {
       return this.selectedTokens.length > 0;
     },
-
     showEmptyPlaceholder() {
       return !this.hasSelectedTokens && !this.inputFocused;
     },
-
     showClearAllButton() {
       return this.hasSelectedTokens && this.allowClearAll;
     }
-
   },
   watch: {
     inputText(newValue, oldValue) {
@@ -221,16 +195,15 @@ var script = {
          */
         this.$emit('text-input', newValue);
         this.resetFocusedDropdownItem();
-
         if (newValue !== '') {
           this.triggerTokenFocusNextBackspace = false;
         } else {
           this.triggerTokenFocusNextBackspace = true;
-        } // Wait a tick so `text-input` event can be used to validate
+        }
+
+        // Wait a tick so `text-input` event can be used to validate
         // the value and change the `allowUserDefinedTokens` and/or
         // `hideDropdownWithNoItems` props
-
-
         this.$nextTick(() => {
           if (this.hideDropdown) {
             this.closeDropdown();
@@ -240,7 +213,6 @@ var script = {
         });
       }
     }
-
   },
   methods: {
     handleFocus(event) {
@@ -253,12 +225,10 @@ var script = {
       this.openDropdown();
       this.inputFocused = true;
       this.focusOnToken();
-
       if (this.inputText === '') {
         this.triggerTokenFocusNextBackspace = true;
       }
     },
-
     handleBlur(event) {
       /**
        * Fired when the token selector is blurred
@@ -266,20 +236,19 @@ var script = {
        * @property {FocusEvent} event
        */
       this.$emit('blur', event);
-      this.inputFocused = false; // `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)
+      this.inputFocused = false;
+
+      // `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)
       // Workaround is to:
       // 1. Explicitly focus the dropdown menu item button on `mousedown` event. (see './token_selector_dropdown.vue')
       // 2. Use `nextTick` so `blur` event is fired after the `mousedown` event
-
       this.$nextTick(() => {
         var _event$relatedTarget, _event$relatedTarget$;
-
         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'))) {
           this.closeDropdown();
         }
       });
     },
-
     handleEnter() {
       if (this.userDefinedTokenCanBeAdded) {
         this.addToken();
@@ -287,20 +256,17 @@ var script = {
         this.addToken(this.focusedDropdownItem);
       }
     },
-
     handleEscape() {
       this.inputText = '';
       this.closeDropdown();
     },
-
     handleBackspace(event) {
       if (this.inputText !== '' || !this.selectedTokens.length) {
         return;
-      } // Prevent triggering the browser back button
-
+      }
 
+      // Prevent triggering the browser back button
       event.preventDefault();
-
       if (this.triggerTokenFocusNextBackspace) {
         this.$refs.textInput.blur();
         this.focusOnToken(this.selectedTokens.length - 1);
@@ -308,51 +274,45 @@ var script = {
         this.triggerTokenFocusNextBackspace = true;
       }
     },
-
     handleInputClick() {
       // Open the dropdown if the user clicks an already focused input
       if (this.inputFocused && this.inputText === '' && !this.dropdownIsOpen) {
         this.openDropdown();
       }
     },
-
     handleContainerClick(event) {
       // Bail if token is clicked
       const {
         target
       } = event;
-
       if ((target === null || target === void 0 ? void 0 : target.closest('.gl-token')) !== null || this.inputFocused) {
         return;
       }
-
       this.focusTextInput();
     },
-
     addToken() {
       let dropdownItem = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
       const token = dropdownItem !== null ? dropdownItem : {
         id: _uniqueId('user-defined-token'),
         name: this.inputText
       };
+
       /**
        * Fired when a token is added or removed
        *
        * @property {array} selectedTokens
        */
-
       this.$emit('input', [...this.selectedTokens, token]);
       this.inputText = '';
       this.closeDropdown();
+
       /**
        * Fired when a token is added
        *
        * @property {object} token
        */
-
       this.$emit('token-add', token);
     },
-
     removeToken(token) {
       /**
        * Fired when user types in the token selector
@@ -365,49 +325,38 @@ var script = {
        *
        * @property {object} token
        */
-
       this.$emit('token-remove', token);
     },
-
     cancelTokenFocus() {
       this.focusTextInput();
     },
-
     closeDropdown() {
       this.dropdownIsOpen = false;
       this.resetFocusedDropdownItem();
     },
-
     openDropdown() {
       if (this.hideDropdown) {
         return;
       }
-
       this.dropdownIsOpen = true;
     },
-
     focusTextInput() {
       this.$refs.textInput.focus();
     },
-
     // Register methods passed as props from child components
     registerDropdownEventHandlers(dropdownEventHandlers) {
       this.dropdownEventHandlers = dropdownEventHandlers;
     },
-
     registerResetFocusedDropdownItem(resetFocusedDropdownItem) {
       this.resetFocusedDropdownItem = resetFocusedDropdownItem;
     },
-
     registerFocusOnToken(focusOnToken) {
       this.focusOnToken = focusOnToken;
     },
-
     clearAll() {
       this.$emit('input', []);
       this.focusTextInput();
     }
-
   }
 };
 

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);
     }
-
   }
 };