@gitlab/ui 61.1.0 → 61.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "61.1.0",
+  "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.scss

@@ -2,6 +2,7 @@ $gl-avatar-identicon-bgs: $red-50, $purple-50, $theme-indigo-50, $blue-50, $gree
   $gray-50;
 
 @mixin gl-avatar {
+  @include gl-display-inline-flex;
   @include gl-border-1;
   @include gl-border-solid;
   @include gl-border-gray-a-08;
@@ -201,7 +202,6 @@ $gl-avatar-identicon-bgs: $red-50, $purple-50, $theme-indigo-50, $blue-50, $gree
   @include gl-text-center;
   @include gl-vertical-align-top;
   @include gl-text-gray-900;
-  @include gl-display-flex;
   @include gl-justify-content-center;
   @include gl-align-items-center;
 }

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,

package/src/components/base/search_box_by_type/search_box_by_type.vue

@@ -5,6 +5,7 @@ import GlIcon from '../icon/icon.vue';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
 
 export default {
+  name: 'GlSearchboxByType',
   components: {
     GlClearIconButton,
     GlIcon,

package/src/components/base/segmented_control/segmented_control.vue

@@ -4,6 +4,7 @@ import { BFormRadioGroup } from 'bootstrap-vue';
 const genericErrorMessage = 'Segmented button should always have valid option selected';
 
 export default {
+  name: 'GlSegmentedControl',
   components: {
     BFormRadioGroup,
   },

package/src/components/base/skeleton_loading/skeleton_loading.vue

@@ -1,5 +1,6 @@
 <script>
 export default {
+  name: 'GlSkeletonLoading',
   props: {
     /**
      * Controls the number of lines.

package/src/components/base/table/table.vue

@@ -14,6 +14,7 @@ const shouldUseFullTable = ({ $attrs, $scopedSlots }) => {
 const { tableClass } = BTable.options.props;
 
 export default {
+  name: 'GlTable',
   components: {
     BTable,
   },

package/src/components/base/table_lite/table_lite.vue

@@ -4,6 +4,7 @@ import { BTableLite } from 'bootstrap-vue';
 const { tableClass } = BTableLite.options.props;
 
 export default {
+  name: 'GlTableLite',
   components: {
     BTableLite,
   },

package/src/components/base/tabs/tab/tab.vue

@@ -6,6 +6,7 @@ import isPlainObject from 'lodash/isPlainObject';
 import { DEFAULT_TAB_TITLE_LINK_CLASS } from '../constants';
 
 export default {
+  name: 'GlTab',
   components: {
     BTab,
   },

package/src/components/base/tabs/tabs/scrollable_tabs.vue

@@ -7,6 +7,7 @@ import GlTabs from './tabs.vue';
 const NAV_CLASS = 'gl-scrollable-tabs-nav';
 
 export default {
+  name: 'GlScrollableTabs',
   components: {
     GlTabs,
     GlIcon,

package/src/components/base/tabs/tabs/tabs.vue

@@ -8,6 +8,7 @@ const validatorHelper = (obj) =>
   Object.keys(obj).every((val) => val === 'text' || val === 'attributes');
 
 export default {
+  name: 'GlTabs',
   components: {
     BTabs,
     GlButton,

package/src/components/base/toggle/toggle.vue

@@ -9,6 +9,7 @@ import GlLoadingIcon from '../loading_icon/loading_icon.vue';
 let uuid = 0;
 
 export default {
+  name: 'GlToggle',
   components: {
     GlIcon,
     GlLoadingIcon,

package/src/components/base/token/token.vue

@@ -4,6 +4,7 @@ import { tokenVariants } from '../../../utils/constants';
 import CloseButton from '../../shared_components/close_button/close_button.vue';
 
 export default {
+  name: 'GlToken',
   components: {
     CloseButton,
   },

package/src/components/base/tooltip/tooltip.vue

@@ -7,6 +7,7 @@ import tooltipMixin from '../../mixins/tooltip_mixin';
 const tooltipRefName = 'bvTooltip';
 
 export default {
+  name: 'GlTooltip',
   tooltipDelay,
   components: {
     BTooltip,

package/src/components/charts/area/area.vue

@@ -49,6 +49,7 @@ import ChartLegend from '../legend/legend.vue';
 import ChartTooltip from '../tooltip/tooltip.vue';
 
 export default {
+  name: 'GlAreaChart',
   components: {
     Chart,
     ChartLegend,

package/src/components/charts/bar/bar.vue

@@ -56,6 +56,7 @@ const defaultOptions = {
 };
 
 export default {
+  name: 'GlBarChart',
   components: {
     Chart,
     ChartTooltip,

package/src/components/charts/chart/chart.vue

@@ -27,6 +27,7 @@ const increaseChartGridTop = (options, increaseBy) => ({
 });
 
 export default {
+  name: 'GlChart',
   directives: {
     resizeObserver: GlResizeObserverDirective,
   },

package/src/components/charts/column/column.vue

@@ -33,6 +33,7 @@ const yAxisDefaults = {
 };
 
 export default {
+  name: 'GlColumnChart',
   components: {
     Chart,
     ChartTooltip,

package/src/components/charts/discrete_scatter/discrete_scatter.vue

@@ -14,6 +14,7 @@ import Chart from '../chart/chart.vue';
 import ChartTooltip from '../tooltip/tooltip.vue';
 
 export default {
+  name: 'GlDiscreteScatterChart',
   components: {
     Chart,
     ChartTooltip,

package/src/components/charts/gauge/gauge.vue

@@ -51,6 +51,7 @@ const gaugeChartSeries = ({ value, text, min, max, splitNumber, axisColor }) =>
 ];
 
 export default {
+  name: 'GlGaugeChart',
   components: {
     Chart,
   },

package/src/components/charts/heatmap/heatmap.vue

@@ -42,6 +42,7 @@ function getRange(series) {
 }
 
 export default {
+  name: 'GlHeatmap',
   components: {
     Chart,
     ChartLegend,