@gitlab/ui 61.1.1 → 61.1.2

package/dist/components/charts/series_label/series_label.js

@@ -2,6 +2,7 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const makePathRect = (startX, startY, width, height) => `M${startX},${startY}H${startX + width}V${startY + height}H${startX}Z`;
 var script = {
+  name: 'GlChartSeriesLabel',
   props: {
     color: {
       type: String,

package/dist/components/charts/single_stat/single_stat.js

@@ -5,6 +5,7 @@ import GlAnimatedNumber from '../../utilities/animated_number/animated_number';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
+  name: 'GlSingleStat',
   components: {
     GlIcon,
     GlBadge,

package/dist/components/charts/sparkline/sparkline.js

@@ -1,4 +1,5 @@
 import merge from 'lodash/merge';
+import isNil from 'lodash/isNil';
 import { graphic } from 'echarts';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import { defaultChartOptions, mergeSeriesToOptions, symbolSize } from '../../../utils/charts/config';
@@ -21,6 +22,7 @@ const generateGradient = colors => {
   }));
 };
 var script = {
+  name: 'GlSparklineChart',
   components: {
     Chart,
     ChartTooltip
@@ -111,7 +113,7 @@ var script = {
             show: true,
             type: 'none',
             label: {
-              formatter: this.xAxisLabelFormatter
+              formatter: this.generateTooltip
             }
           }
         },
@@ -190,11 +192,6 @@ var script = {
     hideTooltip() {
       this.tooltip.show = false;
     },
-    formatTooltipText(_ref) {
-      let [xValue, yValue] = _ref;
-      this.tooltip.title = xValue;
-      this.tooltip.content = yValue;
-    },
     setTooltipPosition(data) {
       const [left, top] = this.chartInstance.convertToPixel('grid', data);
       this.tooltip.position = {
@@ -205,10 +202,10 @@ var script = {
     // This function is called any time the axis pointer is changed (the black bubble showing which
     // point on the line is selected). Note that it will not trigger if the axis pointer is removed,
     // only when it changes from one point to another or is shown for the first time.
-    xAxisLabelFormatter(_ref2) {
+    generateTooltip(_ref) {
       let {
         seriesData = []
-      } = _ref2;
+      } = _ref;
       // seriesData is an array of nearby data point coordinates
       // seriesData[0] is the nearest point at which the tooltip is displayed
       // https://echarts.apache.org/en/option.html#xAxis.axisPointer.label.formatter
@@ -216,11 +213,13 @@ var script = {
       const {
         data
       } = firstEntry;
-      if (data) {
-        this.tooltip.show = true;
-        this.formatTooltipText(data);
-        this.setTooltipPosition(data);
-      }
+      if (!data) return;
+      const [title, content] = data;
+      if (isNil(title) || isNil(content)) return;
+      this.tooltip.show = true;
+      this.tooltip.title = title;
+      this.tooltip.content = content;
+      this.setTooltipPosition(data);
     }
   },
   HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES

package/dist/components/charts/stacked_column/stacked_column.js

@@ -18,6 +18,7 @@ const yAxisDefaults = {
   }
 };
 var script = {
+  name: 'GlStackedColumnChart',
   components: {
     Chart,
     ChartTooltip,

package/dist/components/charts/tooltip/tooltip.js

@@ -6,6 +6,7 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
 var script = {
+  name: 'GlChartTooltip',
   components: {
     GlPopover
   },

package/dist/components/regions/dashboard_skeleton/dashboard_skeleton.js

@@ -1,6 +1,7 @@
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
+  name: 'GlDashboardSkeleton',
   props: {
     /**
      * Number of cards to be shown

package/dist/components/regions/empty_state/empty_state.js

@@ -2,6 +2,7 @@ import GlButton from '../../base/button/button';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
+  name: 'GlEmptyState',
   components: {
     GlButton
   },

package/dist/components/shared_components/charts/tooltip_default_format.js

@@ -2,6 +2,7 @@ import SeriesLabel from '../../charts/series_label/series_label';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
+  name: 'TooltipDefaultFormat',
   components: {
     SeriesLabel
   },

package/dist/components/shared_components/clear_icon_button/clear_icon_button.js

@@ -3,6 +3,7 @@ import GlButton from '../../base/button/button';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
+  name: 'ClearIconButton',
   components: {
     GlButton
   },

package/dist/components/utilities/friendly_wrap/friendly_wrap.js

@@ -3,6 +3,7 @@ import { splitAfterSymbols } from '../../../utils/string_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
+  name: 'GlFriendlyWrap',
   functional: true,
   props: {
     /**

package/dist/components/utilities/intersperse/intersperse.js

@@ -21,6 +21,7 @@ const addLastSeparator = lastSeparator => items => {
   return items.length > 3 ? insertAfterSecondLastItem(lastSeparator, items) : replaceSecondLastItem(lastSeparator, items);
 };
 var script = {
+  name: 'GlIntersperse',
   functional: true,
   props: {
     separator: {

package/dist/components/utilities/sprintf/sprintf.js

@@ -44,6 +44,7 @@ function getPlaceholderDefinition(chunk, placeholdersByStartTag) {
   };
 }
 var script = {
+  name: 'GlSprintf',
   functional: true,
   props: {
     /**

package/dist/components/utilities/truncate/truncate.js

@@ -5,6 +5,7 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
 var script = {
+  name: 'GlTruncate',
   POSITION,
   directives: {
     GlTooltip: GlTooltipDirective,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "61.1.1",
+  "version": "61.1.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -87,7 +87,7 @@
     "@arkweid/lefthook": "0.7.7",
     "@babel/core": "^7.21.4",
     "@babel/preset-env": "^7.21.4",
-    "@gitlab/eslint-plugin": "18.3.0",
+    "@gitlab/eslint-plugin": "18.3.2",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "4.1.0",
     "@gitlab/svgs": "3.38.0",

package/src/components/base/alert/alert.vue

@@ -10,6 +10,7 @@ import GlButton from '../button/button.vue';
 import GlIcon from '../icon/icon.vue';
 
 export default {
+  name: 'GlAlert',
   components: {
     GlIcon,
     CloseButton,

package/src/components/base/avatar/avatar.vue

@@ -7,6 +7,7 @@ import { getAvatarChar } from '../../../utils/string_utils';
 const IDENTICON_BG_COUNT = 7;
 
 export default {
+  name: 'GlAvatar',
   props: {
     entityId: {
       type: Number,

package/src/components/base/avatar_labeled/avatar_labeled.vue

@@ -3,6 +3,7 @@ import GlAvatar from '../avatar/avatar.vue';
 import GlLink from '../link/link.vue';
 
 export default {
+  name: 'GlAvatarLabeled',
   components: {
     GlAvatar,
     GlLink,

package/src/components/base/badge/badge.vue

@@ -9,6 +9,7 @@ import {
 import GlIcon from '../icon/icon.vue';
 
 export default {
+  name: 'GlBadge',
   components: {
     BBadge,
     GlIcon,

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -9,6 +9,7 @@ import GlBreadcrumbItem from './breadcrumb_item.vue';
 export const COLLAPSE_AT_SIZE = 4;
 
 export default {
+  name: 'GlBreadcrumb',
   components: {
     BBreadcrumb,
     GlButton,

package/src/components/base/breadcrumb/breadcrumb_item.vue

@@ -2,6 +2,7 @@
 import { BLink } from 'bootstrap-vue';
 
 export default {
+  name: 'GlBreadcrumbItem',
   components: {
     BLink,
   },

package/src/components/base/broadcast_message/broadcast_message.vue

@@ -5,6 +5,7 @@ import GlIcon from '../icon/icon.vue';
 import { TYPE_BANNER, TYPE_NOTIFICATION, TYPE_LIST } from './constants';
 
 export default {
+  name: 'GlBroadcastMessage',
   components: {
     CloseButton,
     GlIcon,

package/src/components/base/button/button.vue

@@ -12,6 +12,7 @@ import GlIcon from '../icon/icon.vue';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
 
 export default {
+  name: 'GlButton',
   components: {
     BButton,
     GlIcon,

package/src/components/base/button_group/button_group.vue

@@ -2,6 +2,7 @@
 import { BButtonGroup } from 'bootstrap-vue';
 
 export default {
+  name: 'GlButtonGroup',
   components: {
     BButtonGroup,
   },

package/src/components/base/card/card.vue

@@ -1,6 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 export default {
+  name: 'GlCard',
   props: {
     /**
      * Additional CSS class(es) to be applied to the header.

package/src/components/base/carousel/carousel.vue

@@ -3,6 +3,7 @@
 import { BCarousel } from 'bootstrap-vue';
 
 export default {
+  name: 'GlCarousel',
   components: {
     BCarousel,
   },

package/src/components/base/carousel/carousel_slide.vue

@@ -2,6 +2,7 @@
 import { BCarouselSlide } from 'bootstrap-vue';
 
 export default {
+  name: 'GlCarouselSlide',
   components: {
     BCarouselSlide,
   },

package/src/components/base/collapse/collapse.vue

@@ -3,6 +3,7 @@
 import { BCollapse } from 'bootstrap-vue';
 
 export default {
+  name: 'GlCollapse',
   components: {
     BCollapse,
   },

package/src/components/base/datepicker/datepicker.vue

@@ -40,6 +40,7 @@ const highlightPastDates = (pikaday) => {
 };
 
 export default {
+  name: 'GlDatepicker',
   components: {
     GlFormInput,
     GlIcon,

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

@@ -13,6 +13,7 @@ const CONTAINER_CLASSES = [
 ];
 
 export default {
+  name: 'GlDaterangePicker',
   components: {
     GlDatepicker,
     GlIcon,

package/src/components/base/drawer/drawer.vue

@@ -5,6 +5,7 @@ import { maxZIndex, drawerVariants } from '../../../utils/constants';
 import GlButton from '../button/button.vue';
 
 export default {
+  name: 'GlDrawer',
   components: {
     GlButton,
   },

package/src/components/base/dropdown/dropdown.vue

@@ -27,6 +27,7 @@ const Selector = {
 
 // see https://gitlab.com/gitlab-org/gitlab-ui/merge_requests/130#note_126406721
 const ExtendedBDropdown = Vue.extend(BDropdown, {
+  name: 'ExtendedBDropdown',
   methods: {
     getItems() {
       return filterVisible(selectAll(Selector.ITEM_SELECTOR, this.$refs.menu));
@@ -44,6 +45,7 @@ export const DefaultPopperOptions = {
 };
 
 export default {
+  name: 'GlDropdown',
   components: {
     BDropdown: ExtendedBDropdown,
     GlButton,

package/src/components/base/dropdown/dropdown_divider.vue

@@ -2,6 +2,7 @@
 import { BDropdownDivider } from 'bootstrap-vue';
 
 export default {
+  name: 'GlDropdownDivider',
   components: {
     BDropdownDivider,
   },

package/src/components/base/dropdown/dropdown_form.vue

@@ -2,6 +2,7 @@
 import { BDropdownForm } from 'bootstrap-vue';
 
 export default {
+  name: 'GlDropdownForm',
   components: {
     BDropdownForm,
   },

package/src/components/base/dropdown/dropdown_item.vue

@@ -6,6 +6,7 @@ import GlButton from '../button/button.vue';
 import GlIcon from '../icon/icon.vue';
 
 export default {
+  name: 'GlDropdownItem',
   components: {
     GlIcon,
     GlAvatar,

package/src/components/base/dropdown/dropdown_section_header.vue

@@ -2,6 +2,7 @@
 import { BDropdownHeader } from 'bootstrap-vue';
 
 export default {
+  name: 'GlDropdownHeader',
   components: {
     BDropdownHeader,
   },

package/src/components/base/dropdown/dropdown_text.vue

@@ -2,6 +2,7 @@
 import { BDropdownText } from 'bootstrap-vue';
 
 export default {
+  name: 'GlDropdownText',
   components: {
     BDropdownText,
   },

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

@@ -3,6 +3,7 @@
 import { BForm } from 'bootstrap-vue/src/components/form';
 
 export default {
+  name: 'GlForm',
   components: {
     BForm,
   },

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

@@ -6,6 +6,7 @@ import { V_MODEL } from './models/constants';
 import { Tree } from './models/tree';
 
 export default {
+  name: 'GlFormCheckboxTree',
   components: {
     GlFormGroup,
     GlFormCheckbox,

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

@@ -4,6 +4,7 @@ import isString from 'lodash/isString';
 import isPlainObject from 'lodash/isPlainObject';
 
 export default {
+  name: 'GlFormGroup',
   components: {
     BFormGroup,
   },

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

@@ -8,6 +8,7 @@ const MODEL_PROP = 'value';
 const MODEL_EVENT = 'input';
 
 export default {
+  name: 'GlFormInput',
   components: {
     BFormInput,
   },

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

@@ -7,6 +7,7 @@ import GlFormRadio from '../form_radio/form_radio.vue';
 const { model } = BFormRadioGroup.options;
 
 export default {
+  name: 'GlFormRadioGroup',
   components: {
     BFormRadioGroup,
     GlFormRadio,

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

@@ -4,6 +4,7 @@ import isObject from 'lodash/isObject';
 import { formInputSizes } from '../../../../utils/constants';
 
 export default {
+  name: 'GlFormSelect',
   components: {
     BFormSelect,
   },

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

@@ -7,6 +7,7 @@ const model = {
 };
 
 export default {
+  name: 'GlFormTextarea',
   components: {
     BFormTextarea,
   },

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

@@ -2,6 +2,7 @@
 import { BInputGroupText } from 'bootstrap-vue';
 
 export default {
+  name: 'GlInputGroupText',
   components: {
     BInputGroupText,
   },

package/src/components/base/icon/icon.vue

@@ -31,6 +31,7 @@ if (process.env.NODE_ENV !== 'production') {
  *  />
  */
 export default {
+  name: 'GlIcon',
   props: {
     /**
      * Accessible icon name used by screen readers and other assistive technologies.

package/src/components/base/infinite_scroll/infinite_scroll.vue

@@ -10,6 +10,7 @@ export const adjustScrollGap = 5;
 const THRESHOLD = 1;
 
 export default {
+  name: 'GlInfiniteScroll',
   props: {
     /**
      * Total number of items available

package/src/components/base/label/label.vue

@@ -7,6 +7,7 @@ import GlLink from '../link/link.vue';
 import GlTooltip from '../tooltip/tooltip.vue';
 
 export default {
+  name: 'GlLabel',
   components: {
     GlLink,
     GlTooltip,

package/src/components/base/link/link.vue

@@ -4,6 +4,7 @@ import { BLink } from 'bootstrap-vue';
 import { SafeLinkMixin } from '../../mixins/safe_link_mixin';
 
 export default {
+  name: 'GlLink',
   components: {
     BLink,
   },

package/src/components/base/loading_icon/loading_icon.vue

@@ -14,6 +14,7 @@ const defaultColor = colors.dark;
 const baseCssClass = 'gl-spinner';
 
 export default {
+  name: 'GlLoadingIcon',
   props: {
     /**
      * Aria-label.

package/src/components/base/markdown/markdown.vue

@@ -1,6 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 export default {
+  name: 'GlMarkdown',
   props: {
     compact: {
       type: Boolean,

package/src/components/base/modal/modal.vue

@@ -16,6 +16,7 @@ function validatorHelper(obj) {
 }
 
 export default {
+  name: 'GlModal',
   components: {
     BModal,
     GlButton,

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

@@ -23,6 +23,7 @@ import GlIcon from '../../icon/icon.vue';
 import { OutsideDirective } from '../../../../directives/outside/outside';
 
 export default {
+  name: 'BaseDropdown',
   components: {
     GlButton,
     GlIcon,

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue

@@ -24,6 +24,7 @@ import GlDisclosureDropdownGroup from './disclosure_dropdown_group.vue';
 import { itemsValidator, isItem, hasOnlyListItems } from './utils';
 
 export default {
+  name: 'GlDisclosureDropdown',
   events: {
     GL_DROPDOWN_SHOWN,
     GL_DROPDOWN_HIDDEN,

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

@@ -34,6 +34,7 @@ const GROUP_TOP_BORDER_CLASSES = ['gl-border-t', 'gl-pt-1', 'gl-mt-2'];
 export const SEARCH_INPUT_SELECTOR = '.gl-listbox-search-input';
 
 export default {
+  name: 'GlCollapsibleListbox',
   HEADER_ITEMS_BORDER_CLASSES,
   events: {
     GL_DROPDOWN_SHOWN,

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

@@ -2,6 +2,7 @@
 import uniqueId from 'lodash/uniqueId';
 
 export default {
+  name: 'GlListboxGroup',
   props: {
     name: {
       type: String,

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

@@ -4,6 +4,7 @@ import { ENTER, SPACE } from '../constants';
 import { stopEvent } from '../../../../utils/utils';
 
 export default {
+  name: 'GlListboxItem',
   components: {
     GlIcon,
   },

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

@@ -3,6 +3,7 @@ import GlClearIconButton from '../../../shared_components/clear_icon_button/clea
 import GlIcon from '../../icon/icon.vue';
 
 export default {
+  name: 'GlListboxSearchInput',
   components: {
     GlClearIconButton,
     GlIcon,

package/src/components/base/paginated_list/paginated_list.vue

@@ -3,6 +3,7 @@ import GlPagination from '../pagination/pagination.vue';
 import GlSearchBoxByType from '../search_box_by_type/search_box_by_type.vue';
 
 export default {
+  name: 'GlPaginatedList',
   components: {
     GlSearchBoxByType,
     GlPagination,

package/src/components/base/path/path.vue

@@ -12,6 +12,7 @@ const PATH_ITEM_CLASS = 'gl-path-button';
 const PATH_ACTIVE_ITEM_PREFIX = 'gl-path-active-item';
 
 export default {
+  name: 'GlPath',
   components: {
     GlIcon,
   },

package/src/components/base/popover/popover.vue

@@ -8,6 +8,7 @@ import { popoverPlacements } from '../../../utils/constants';
 const popoverRefName = 'bPopover';
 
 export default {
+  name: 'GlPopover',
   components: {
     BPopover,
     CloseButton,

package/src/components/base/progress_bar/progress_bar.vue

@@ -2,6 +2,7 @@
 import { BProgress } from 'bootstrap-vue';
 
 export default {
+  name: 'GlProgressBar',
   components: {
     BProgress,
   },

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

@@ -11,6 +11,7 @@ import GlFormInputGroup from '../form/form_input_group/form_input_group.vue';
 import GlIcon from '../icon/icon.vue';
 
 export default {
+  name: 'GlSearchboxByClick',
   components: {
     GlClearIconButton,
     GlIcon,