@gitlab/ui 132.0.1 → 132.0.2

package/dist/components/dashboards/dashboard_panel/dashboard_panel.js

@@ -0,0 +1,236 @@
+import { isObject, uniqueId } from 'lodash-es';
+import GlDisclosureDropdown from '../../base/new_dropdowns/disclosure/disclosure_dropdown';
+import GlIcon from '../../base/icon/icon';
+import GlLoadingIcon from '../../base/loading_icon/loading_icon';
+import GlPopover from '../../base/popover/popover';
+import GlSprintf from '../../utilities/sprintf/sprintf';
+import GlLink from '../../base/link/link';
+import GlTruncate from '../../utilities/truncate/truncate';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlDashboardPanel',
+  components: {
+    GlDisclosureDropdown,
+    GlLoadingIcon,
+    GlIcon,
+    GlPopover,
+    GlSprintf,
+    GlLink,
+    GlTruncate
+  },
+  props: {
+    /**
+     * CSS classes to apply to the panel container.
+     */
+    containerClass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * Additional CSS classes to apply to the `#body` slot container.
+     */
+    bodyContentClass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * Used to set the color of the panel border.
+     */
+    borderColorClass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * The string to render as the panel title.
+     */
+    title: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * The name of the icon to render next to the panel title.
+     */
+    titleIcon: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * The CSS classes to apply to the title icon.
+     */
+    titleIconClass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * Configuration object for the title popover. Expected structure:
+     * **Deprecated:** Use slots `#info-popover-content` and `#info-popover-title` instead.
+     *
+     * - `description`: The popover text content with interpolation placeholders.
+     *   Uses `%{linkStart}` and `%{linkEnd}` as markers for where a link should be inserted.
+     *
+     * - `descriptionLink`: The optional URL that will be used for the link portion
+     *   of the description text between the linkStart and linkEnd markers.
+     *
+     * @deprecated Use slots `#info-popover-content` and `#info-popover-title` instead.
+     */
+    titlePopover: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    /**
+     * CSS classes to apply to the title popover (gets passed to the `css-classes` prop of the `GlPopover` component).
+     */
+    titlePopoverClasses: {
+      type: [Array, String, Object],
+      required: false,
+      default: ''
+    },
+    /**
+     * The string to render as the panel subtitle.
+     */
+    subtitle: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * Set to `true` to show the loading state.
+     */
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Set to `true` for long-running operations.
+     */
+    loadingDelayed: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * The string to render while loading is delayed.
+     */
+    loadingDelayedText: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * Array of `GlDisclosureDropdown` items to display in the dropdown.
+     */
+    actions: {
+      type: Array,
+      required: false,
+      default: () => [],
+      validator: actions => actions.every(a => isObject(a))
+    },
+    /**
+     * The toggle text for the `GlDisclosureDropdown` dropdown.
+     */
+    actionsToggleText: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      panelId: uniqueId('gl-dashboard-panel-id-'),
+      titlePopoverId: uniqueId('gl-dashboard-panel-title-popover-id-')
+    };
+  },
+  computed: {
+    borderClass() {
+      var _this$borderColorClas;
+      if (((_this$borderColorClas = this.borderColorClass) === null || _this$borderColorClas === void 0 ? void 0 : _this$borderColorClas.length) > 0) {
+        return `gl-border-t-2 gl-border-t-solid ${this.borderColorClass}`;
+      }
+      return '';
+    },
+    containerClasses() {
+      return `${this.containerClass} ${this.borderClass}`;
+    },
+    bodyClasses() {
+      return this.loading ? 'gl-flex gl-flex-wrap gl-content-center gl-text-center gl-flex-grow' : `gl-grow gl-overflow-y-auto gl-overflow-x-hidden ${this.bodyContentClass}`;
+    },
+    hasTitleIcon() {
+      return Boolean(this.titleIcon);
+    },
+    hasTitle() {
+      return Boolean(this.title);
+    },
+    hasInfoPopoverContentSlot() {
+      return Boolean(this.$scopedSlots['info-popover-content']);
+    },
+    hasInfoPopoverTitleSlot() {
+      return Boolean(this.$scopedSlots['info-popover-title']);
+    },
+    hasTitlePopover() {
+      var _this$titlePopover;
+      return Boolean((_this$titlePopover = this.titlePopover) === null || _this$titlePopover === void 0 ? void 0 : _this$titlePopover.description) || this.hasInfoPopoverContentSlot || this.hasInfoPopoverTitleSlot;
+    },
+    hasTitlePopoverLink() {
+      var _this$titlePopover2;
+      return Boolean((_this$titlePopover2 = this.titlePopover) === null || _this$titlePopover2 === void 0 ? void 0 : _this$titlePopover2.descriptionLink);
+    },
+    shouldShowActions() {
+      var _this$actions;
+      return ((_this$actions = this.actions) === null || _this$actions === void 0 ? void 0 : _this$actions.length) > 0;
+    },
+    isLoadingDelayed() {
+      return this.loadingDelayed && Boolean(this.loadingDelayedText);
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+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"}},[_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){
+var content = ref.content;
+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){
+var item = ref.item;
+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()]),_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)])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export { __vue_component__ as default };

package/dist/components/dashboards/mock_data.js

@@ -0,0 +1,49 @@
+import { uniqueId } from 'lodash-es';
+
+const getUniquePanelId = () => uniqueId('panel-');
+const dashboard = {
+  id: 'analytics_overview',
+  slug: 'analytics_overview',
+  title: 'Analytics Overview',
+  description: 'This is a dashboard',
+  userDefined: true,
+  panels: [{
+    title: 'Test A',
+    gridAttributes: {
+      width: 3,
+      height: 3,
+      xPos: 0,
+      yPos: 0
+    },
+    id: getUniquePanelId()
+  }, {
+    title: 'Test B',
+    gridAttributes: {
+      width: 2,
+      height: 4,
+      xPos: 1,
+      yPos: 1,
+      minHeight: 2,
+      minWidth: 2
+    },
+    id: getUniquePanelId()
+  }],
+  status: null,
+  errors: null
+};
+const mockPanel = {
+  title: 'Test A',
+  gridAttributes: {
+    width: 1,
+    height: 2,
+    xPos: 0,
+    yPos: 3,
+    minWidth: 1,
+    minHeight: 2,
+    maxWidth: 1,
+    maxHeight: 2
+  },
+  id: getUniquePanelId()
+};
+
+export { dashboard, getUniquePanelId, mockPanel };

package/dist/components/experimental/experiment_badge/constants.js

@@ -0,0 +1,4 @@
+const badgeTypes = ['experiment', 'beta', null];
+const badgeTypeValidator = value => badgeTypes.includes(value);
+
+export { badgeTypeValidator, badgeTypes };

package/dist/components/experimental/experiment_badge/experiment_badge.js

@@ -0,0 +1,102 @@
+import { uniqueId } from 'lodash-es';
+import GlBadge from '../../base/badge/badge';
+import GlLink from '../../base/link/link';
+import GlPopover from '../../base/popover/popover';
+import GlSprintf from '../../utilities/sprintf/sprintf';
+import { badgeTypeValidator } from './constants';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const i18n = {
+  experiment: {
+    BADGE: 'Experiment',
+    HELP_PAGE_URL: 'https://docs.gitlab.com/policy/development_stages_support/#experiment',
+    POPOVER_TITLE: "What's an experiment?",
+    POPOVER_CONTENT: 'An %{linkStart}experiment%{linkEnd} is not yet production-ready, but is released for initial testing and feedback during development.%{line-breakStart}Experiments:%{line-breakEnd} %{bullets}',
+    POPOVER_BULLETS: ['Might be unstable or cause data loss.', 'Are not supported and might not be documented.', 'Could be changed or removed at any time.']
+  },
+  beta: {
+    BADGE: 'Beta',
+    HELP_PAGE_URL: 'https://docs.gitlab.com/policy/development_stages_support/#beta',
+    POPOVER_TITLE: "What's a beta?",
+    POPOVER_CONTENT: "A %{linkStart}beta%{linkEnd} feature is not yet production-ready, but is ready for testing and unlikely to change significantly before it's released.%{line-breakStart}Beta features:%{line-breakEnd} %{bullets}",
+    POPOVER_BULLETS: ['Have a low risk of data loss, but might still be unstable.', 'Are supported on a commercially-reasonable effort basis.', 'Have a near complete user experience.']
+  }
+};
+var script = {
+  name: 'GlExperimentBadge',
+  components: {
+    GlBadge,
+    GlPopover,
+    GlSprintf,
+    GlLink
+  },
+  props: {
+    /**
+     * The placement of the popover in relation to the button.
+     */
+    popoverPlacement: {
+      type: String,
+      required: false,
+      default: 'bottom'
+    },
+    /**
+     * The type of the badge. Can be 'experiment' or 'beta'.
+     */
+    type: {
+      type: String,
+      required: false,
+      default: 'experiment',
+      validator: badgeTypeValidator
+    }
+  },
+  computed: {
+    activeType() {
+      return i18n[this.type];
+    }
+  },
+  created() {
+    this.triggerId = uniqueId('experiment-badge-');
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-badge',{ref:"badge",staticClass:"gl-mx-4 hover:gl-cursor-pointer",attrs:{"id":_vm.triggerId,"href":"#","variant":"neutral"}},[_c('span',[_vm._v(_vm._s(_vm.activeType.BADGE))]),_vm._v(" "),_c('gl-popover',{attrs:{"triggers":"hover focus click","show-close-button":"","placement":_vm.popoverPlacement,"target":_vm.triggerId,"css-classes":"!gl-z-9999","title":_vm.activeType.POPOVER_TITLE}},[_c('gl-sprintf',{attrs:{"message":_vm.activeType.POPOVER_CONTENT},scopedSlots:_vm._u([{key:"link",fn:function(ref){
+var content = ref.content;
+return [_c('gl-link',{staticClass:"!gl-text-sm",attrs:{"href":_vm.activeType.HELP_PAGE_URL,"target":"_blank"}},[_vm._v("\n          "+_vm._s(content))])]}},{key:"bullets",fn:function(){return [_c('ul',{staticClass:"gl-mb-0 gl-pl-5"},_vm._l((_vm.activeType.POPOVER_BULLETS),function(item,i){return _c('li',{key:("li-" + i)},[_vm._v("\n            "+_vm._s(item)+"\n          ")])}),0)]},proxy:true},{key:"line-break",fn:function(ref){
+var content = ref.content;
+return [_c('span',{staticClass:"gl-mb-0 gl-mt-5 gl-block"},[_vm._v(_vm._s(content))])]}}])})],1)],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export { __vue_component__ as default, i18n };

package/dist/components/extended/multi_step_form_template/multi_step_form_template.js

@@ -0,0 +1,87 @@
+import { translate } from '../../../utils/i18n';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlMultiStepFormTemplate',
+  props: {
+    /**
+     * The tile of the form. Should not be specific to the current step.
+     */
+    title: {
+      type: String,
+      required: true
+    },
+    /**
+     * The number of the current step. If a non-zero number is passed, then the current step number will be shown at the top of the form.
+     */
+    currentStep: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    /**
+     * The total number of steps. If a non-zero number is passed to this prop and a non-zero number is passed to the `currentStep` prop, then they will be formatted together at the top of the form. In English, this will appear as `Step n of x` where n is the current step and x is the step total.
+     */
+    stepsTotal: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    /**
+     * Optional override to the semantic element used for the form title's heading tag. Defaults to `h1` but should be adjusted in usage to prevent unexpected heading level changes in the DOM.
+     */
+    headingTag: {
+      type: String,
+      required: false,
+      default: 'h1'
+    }
+  },
+  computed: {
+    stepMessage() {
+      return this.stepsTotal ? translate('GlMultiStepFormTemplate.stepXofY', 'Step %{currentStep} of %{stepsTotal}', {
+        currentStep: this.currentStep,
+        stepsTotal: this.stepsTotal
+      }) : translate('GlMultiStepFormTemplate.stepX', 'Step %{currentStep}', {
+        currentStep: this.currentStep
+      });
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-mx-auto gl-max-w-80 gl-pt-8"},[_c(_vm.headingTag,{tag:"component",staticClass:"gl-heading-1 gl-mb-3 gl-mt-0 gl-text-center",attrs:{"data-testid":"multi-step-form-title"}},[_vm._v("\n    "+_vm._s(_vm.title)+"\n  ")]),_vm._v(" "),(_vm.currentStep)?_c('p',{staticClass:"gl-m-0 gl-text-center",attrs:{"data-testid":"multi-step-form-steps"}},[_vm._v("\n    "+_vm._s(_vm.stepMessage)+"\n  ")]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-mt-7",attrs:{"data-testid":"multi-step-form-content"}},[_vm._t("default")],2),_vm._v(" "),(_vm.$scopedSlots.back || _vm.$scopedSlots.next)?_c('div',{staticClass:"gl-mt-6 gl-flex gl-justify-center gl-gap-3",attrs:{"data-testid":"multi-step-form-action"}},[_vm._t("back"),_vm._v(" "),_vm._t("next")],2):_vm._e(),_vm._v(" "),(_vm.$scopedSlots.footer)?_c('div',{staticClass:"gl-mt-7",attrs:{"data-testid":"multi-step-form-footer"}},[_vm._t("footer")],2):_vm._e()],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export { __vue_component__ as default };

package/dist/components/index.js

@@ -0,0 +1,107 @@
+export { default as GlTableLite } from './base/table_lite/table_lite';
+export { default as GlDropdownForm } from './base/dropdown/dropdown_form';
+export { default as GlKeysetPagination } from './base/keyset_pagination/keyset_pagination';
+export { default as GlInputGroupText } from './base/form/input_group_text/input_group_text';
+export { default as GlFormCombobox } from './base/form/form_combobox/form_combobox';
+export { default as GlTokenSelector } from './base/token_selector/token_selector';
+export { default as GlMarkdown } from './base/markdown/markdown';
+export { default as GlDeprecatedLink, default as GlLink } from './base/link/link';
+export { default as GlIcon } from './base/icon/icon';
+export { default as GlIllustration } from './base/illustration/illustration';
+export { default as GlAnimatedChevronRightDownIcon } from './base/animated_icon/animated_chevron_right_down_icon';
+export { default as GlAnimatedChevronLgRightDownIcon } from './base/animated_icon/animated_chevron_lg_right_down_icon';
+export { default as GlAnimatedChevronDownUpIcon } from './base/animated_icon/animated_chevron_down_up_icon';
+export { default as GlAnimatedChevronLgDownUpIcon } from './base/animated_icon/animated_chevron_lg_down_up_icon';
+export { default as GlAnimatedDuoChatIcon } from './base/animated_icon/animated_duo_chat_icon';
+export { default as GlAnimatedLoaderIcon } from './base/animated_icon/animated_loader_icon';
+export { default as GlAnimatedNotificationIcon } from './base/animated_icon/animated_notifications_icon';
+export { default as GlAnimatedSidebarIcon } from './base/animated_icon/animated_sidebar_icon';
+export { default as GlAnimatedSmileIcon } from './base/animated_icon/animated_smile_icon';
+export { default as GlAnimatedSortIcon } from './base/animated_icon/animated_sort_icon';
+export { default as GlAnimatedStarIcon } from './base/animated_icon/animated_star_icon';
+export { default as GlAnimatedTodoIcon } from './base/animated_icon/animated_todo_icon';
+export { default as GlAnimatedUploadIcon } from './base/animated_icon/animated_upload_icon';
+export { default as GlAttributeList } from './base/attribute_list/attribute_list';
+export { default as GlLoadingIcon } from './base/loading_icon/loading_icon';
+export { default as GlModal } from './base/modal/modal';
+export { default as GlPagination } from './base/pagination/pagination';
+export { default as GlPopover } from './base/popover/popover';
+export { default as GlProgressBar } from './base/progress_bar/progress_bar';
+export { default as GlToken } from './base/token/token';
+export { default as GlBadge } from './base/badge/badge';
+export { default as GlBanner } from './base/banner/banner';
+export { default as GlButton } from './base/button/button';
+export { default as GlTooltip } from './base/tooltip/tooltip';
+export { default as GlToast } from './base/toast';
+export { default as GlDashboardSkeleton } from './regions/dashboard_skeleton/dashboard_skeleton';
+export { default as GlEmptyState } from './regions/empty_state/empty_state';
+export { default as GlForm } from './base/form/form';
+export { default as GlFormCharacterCount } from './base/form/form_character_count/form_character_count';
+export { default as GlFormDate } from './base/form/form_date/form_date';
+export { default as GlFormInput } from './base/form/form_input/form_input';
+export { default as GlFormInputGroup } from './base/form/form_input_group/form_input_group';
+export { default as GlFormRadio } from './base/form/form_radio/form_radio';
+export { default as GlFormRadioGroup } from './base/form/form_radio_group/form_radio_group';
+export { default as GlFormSelect } from './base/form/form_select/form_select';
+export { default as GlFormTextarea } from './base/form/form_textarea/form_textarea';
+export { default as GlFormGroup } from './base/form/form_group/form_group';
+export { default as GlFormFields } from './base/form/form_fields/form_fields';
+export { default as GlSearchBoxByType } from './base/search_box_by_type/search_box_by_type';
+export { default as GlSearchBoxByClick } from './base/search_box_by_click/search_box_by_click';
+export { default as GlDropdownItem } from './base/dropdown/dropdown_item';
+export { default as GlDropdownSectionHeader } from './base/dropdown/dropdown_section_header';
+export { default as GlDropdownDivider } from './base/dropdown/dropdown_divider';
+export { default as GlDropdownText } from './base/dropdown/dropdown_text';
+export { default as GlDropdown } from './base/dropdown/dropdown';
+export { default as GlCollapsibleListbox } from './base/new_dropdowns/listbox/listbox';
+export { default as GlListboxItem } from './base/new_dropdowns/listbox/listbox_item';
+export { default as GlDisclosureDropdown } from './base/new_dropdowns/disclosure/disclosure_dropdown';
+export { default as GlDisclosureDropdownItem } from './base/new_dropdowns/disclosure/disclosure_dropdown_item';
+export { default as GlDisclosureDropdownGroup } from './base/new_dropdowns/disclosure/disclosure_dropdown_group';
+export { default as GlPath } from './base/path/path';
+export { default as GlTable } from './base/table/table';
+export { default as GlBreadcrumb } from './base/breadcrumb/breadcrumb';
+export { default as GlScrollableTabs } from './base/tabs/tabs/scrollable_tabs';
+export { default as GlTabs } from './base/tabs/tabs/tabs';
+export { default as GlTab } from './base/tabs/tab/tab';
+export { default as GlButtonGroup } from './base/button_group/button_group';
+export { default as GlFormCheckbox } from './base/form/form_checkbox/form_checkbox';
+export { default as GlFormCheckboxGroup } from './base/form/form_checkbox/form_checkbox_group';
+export { default as GlAvatar } from './base/avatar/avatar';
+export { default as GlAvatarsInline } from './base/avatars_inline/avatars_inline';
+export { default as GlAvatarLabeled } from './base/avatar_labeled/avatar_labeled';
+export { default as GlAvatarLink } from './base/avatar_link/avatar_link';
+export { default as GlLabel } from './base/label/label';
+export { default as GlDatepicker } from './base/datepicker/datepicker';
+export { default as GlDaterangePicker } from './base/daterange_picker/daterange_picker';
+export { default as GlToggle } from './base/toggle/toggle';
+export { default as GlColorModeToggle } from './base/color_mode_toggle/color_mode_toggle';
+export { default as GlSorting } from './base/sorting/sorting';
+export { default as GlInfiniteScroll } from './base/infinite_scroll/infinite_scroll';
+export { default as GlAlert } from './base/alert/alert';
+export { default as GlSegmentedControl } from './base/segmented_control/segmented_control';
+export { default as GlSkeletonLoader } from './base/skeleton_loader/skeleton_loader';
+export { default as GlDrawer } from './base/drawer/drawer';
+export { default as GlCard } from './base/card/card';
+export { default as GlFilteredSearchSuggestion } from './base/filtered_search/filtered_search_suggestion';
+export { default as GlFilteredSearchSuggestionList } from './base/filtered_search/filtered_search_suggestion_list';
+export { default as GlFilteredSearchTerm } from './base/filtered_search/filtered_search_term';
+export { default as GlFilteredSearchToken } from './base/filtered_search/filtered_search_token';
+export { default as GlFilteredSearchTokenSegment } from './base/filtered_search/filtered_search_token_segment';
+export { default as GlFilteredSearch } from './base/filtered_search/filtered_search';
+export { default as GlBroadcastMessage } from './base/broadcast_message/broadcast_message';
+export { default as GlCollapse } from './base/collapse/collapse';
+export { default as GlAccordion } from './base/accordion/accordion';
+export { default as GlAccordionItem } from './base/accordion/accordion_item';
+export { default as GlDashboardLayout } from './dashboards/dashboard_layout/dashboard_layout';
+export { default as GlDashboardPanel } from './dashboards/dashboard_panel/dashboard_panel';
+export { default as GlExperimentBadge } from './experimental/experiment_badge/experiment_badge';
+export { default as GlClipboardButton } from './shared_components/clipboard_button/clipboard_button';
+export { default as GlAnimatedNumber } from './utilities/animated_number/animated_number';
+export { default as GlFriendlyWrap } from './utilities/friendly_wrap/friendly_wrap';
+export { default as GlIntersectionObserver } from './utilities/intersection_observer/intersection_observer';
+export { default as GlIntersperse } from './utilities/intersperse/intersperse';
+export { default as GlSprintf } from './utilities/sprintf/sprintf';
+export { default as GlTruncate } from './utilities/truncate/truncate';
+export { default as GlTruncateText } from './utilities/truncate_text/truncate_text';
+export { default as GlMultiStepFormTemplate } from './extended/multi_step_form_template/multi_step_form_template';

package/dist/components/mixins/button_mixin.js

@@ -0,0 +1,11 @@
+import { buttonSizeOptions } from '../../utils/constants';
+
+const ButtonMixin = {
+  computed: {
+    buttonSize() {
+      return buttonSizeOptions[this.size];
+    }
+  }
+};
+
+export { ButtonMixin };

package/dist/components/mixins/safe_link_mixin.js

@@ -0,0 +1,30 @@
+import { SafeLinkDirective } from '../../directives/safe_link/safe_link';
+
+const SafeLinkMixin = {
+  directives: {
+    SafeLink: SafeLinkDirective
+  },
+  props: {
+    isUnsafeLink: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // This prevents bootstrap-vue from setting target="_self"
+    // when target attribute is not present
+    target: {
+      type: String,
+      required: false,
+      default: null
+    }
+  },
+  computed: {
+    safeLinkConfig() {
+      return {
+        skipSanitization: this.isUnsafeLink
+      };
+    }
+  }
+};
+
+export { SafeLinkMixin };

package/dist/components/mixins/tooltip_mixin.js

@@ -0,0 +1,21 @@
+import { tooltipActionEvents } from '../../utils/constants';
+
+// eslint-disable-next-line import/no-default-export
+var tooltip_mixin = tooltipRefName => ({
+  mounted() {
+    /**
+     * Pass through the events to programmatically open, close, enable
+     * and disable a tooltip or a popover.
+     *
+     * References
+     * https://bootstrap-vue.org/docs/components/popover#programmatically-show-and-hide-popover
+     * https://bootstrap-vue.org/docs/components/tooltip#programmatically-show-and-hide-tooltip
+     */
+    tooltipActionEvents.forEach(event => this.$on(event, () => this.$refs[tooltipRefName][event]()));
+  },
+  beforeDestroy() {
+    tooltipActionEvents.forEach(event => this.$off(event));
+  }
+});
+
+export { tooltip_mixin as default };