@gitlab/ui 72.12.0 → 72.12.1

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

@@ -0,0 +1,403 @@
+import uniqueId from 'lodash/uniqueId';
+import { tokensValidator } from './helpers';
+import GlTokenContainer from './token_container';
+import GlTokenSelectorDropdown from './token_selector_dropdown';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlTokenSelector',
+  componentId: uniqueId('token-selector'),
+  components: {
+    GlTokenContainer,
+    GlTokenSelectorDropdown
+  },
+  model: {
+    prop: 'selectedTokens',
+    event: 'input'
+  },
+  props: {
+    /**
+     * Items to display in dropdown
+     */
+    dropdownItems: {
+      type: Array,
+      // All items need to have an `id` key
+      validator: tokensValidator,
+      required: false,
+      default: () => []
+    },
+    /**
+     * Should users be allowed to add tokens that are not in `dropdown-items`
+     */
+    allowUserDefinedTokens: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Dropdown items are loading, can be used when requesting new dropdown items
+     */
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Hide the dropdown if `dropdown-items` is empty. Will show `no-results-content` slot if this is `false`
+     */
+    hideDropdownWithNoItems: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * CSS classes to add to the main token selector container (`.gl-token-selector`)
+     */
+    containerClass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * CSS classes to add to dropdown menu `ul` element
+     */
+    menuClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: ''
+    },
+    /**
+     * The autocomplete attribute value for the underlying `input` element
+     */
+    autocomplete: {
+      type: String,
+      required: false,
+      default: 'off'
+    },
+    /**
+     * The `aria-labelledby` attribute value for the underlying `input` element
+     */
+    ariaLabelledby: {
+      type: String,
+      required: false,
+      default: null
+    },
+    /**
+     * The `placeholder` attribute value for the underlying `input` element
+     */
+    placeholder: {
+      type: String,
+      required: false,
+      default: null
+    },
+    /**
+     * HTML attributes to add to the text input. Helpful for adding `data-testid` attributes
+     */
+    textInputAttrs: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    /**
+     * Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state
+     */
+    state: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
+    /**
+     * Tokens that are selected. This prop will automatically be added when using `v-model`
+     */
+    selectedTokens: {
+      type: Array,
+      // All tokens need to have an `id` key
+      validator: tokensValidator,
+      required: true
+    },
+    /**
+     * Controls the `view-only` mode for the tokens
+     */
+    viewOnly: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Allows user to bulk delete tokens when enabled
+     */
+    allowClearAll: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data() {
+    return {
+      inputText: '',
+      inputFocused: false,
+      dropdownIsOpen: false,
+      focusedDropdownItem: null,
+      triggerTokenFocusNextBackspace: true,
+      rootElClasses: '',
+      dropdownEventHandlers: {
+        handleUpArrow: () => {},
+        handleDownArrow: () => {},
+        handleHomeKey: () => {},
+        handleEndKey: () => {}
+      },
+      resetFocusedDropdownItem: () => {},
+      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) {
+      if (newValue !== oldValue) {
+        /**
+         * Fired when user types in the token selector
+         *
+         * @property {string} inputText
+         */
+        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
+        // the value and change the `allowUserDefinedTokens` and/or
+        // `hideDropdownWithNoItems` props
+        this.$nextTick(() => {
+          if (this.hideDropdown) {
+            this.closeDropdown();
+          } else if (newValue !== '') {
+            this.openDropdown();
+          }
+        });
+      }
+    }
+  },
+  methods: {
+    handleFocus(event) {
+      /**
+       * Fired when the token selector is focused
+       *
+       * @property {FocusEvent} event
+       */
+      this.$emit('focus', event);
+      this.openDropdown();
+      this.inputFocused = true;
+      this.focusOnToken();
+      if (this.inputText === '') {
+        this.triggerTokenFocusNextBackspace = true;
+      }
+    },
+    handleBlur(event) {
+      /**
+       * Fired when the token selector is blurred
+       *
+       * @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)
+      // 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();
+      } else if (this.focusedDropdownItem && this.dropdownIsOpen) {
+        this.addToken(this.focusedDropdownItem);
+      }
+    },
+    handleEscape() {
+      this.inputText = '';
+      this.closeDropdown();
+    },
+    handleBackspace(event) {
+      if (this.inputText !== '' || !this.selectedTokens.length) {
+        return;
+      }
+
+      // Prevent triggering the browser back button
+      event.preventDefault();
+      if (this.triggerTokenFocusNextBackspace) {
+        this.$refs.textInput.blur();
+        this.focusOnToken(this.selectedTokens.length - 1);
+      } else {
+        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
+       *
+       * @property {string} inputText
+       */
+      this.$emit('input', this.selectedTokens.filter(selectedToken => selectedToken.id !== token.id));
+      /**
+       * Fired when a token is removed
+       *
+       * @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();
+    }
+  }
+};
+
+/* 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',[_c('div',{ref:"container",staticClass:"gl-token-selector gl-form-input gl-display-flex gl-align-items-center form-control form-control-plaintext gl-cursor-text! gl-py-2! gl-px-3!",class:[_vm.inputFocused ? 'gl-token-selector-focus-glow' : '', _vm.containerClass, _vm.stateClass],on:{"click":_vm.handleContainerClick}},[(_vm.showEmptyPlaceholder)?_vm._t("empty-placeholder"):_vm._e(),_vm._v(" "),_c('gl-token-container',{attrs:{"tokens":_vm.selectedTokens,"state":_vm.state,"register-focus-on-token":_vm.registerFocusOnToken,"view-only":_vm.viewOnly,"show-clear-all-button":_vm.showClearAllButton},on:{"token-remove":_vm.removeToken,"cancel-focus":_vm.cancelTokenFocus,"clear-all":_vm.clearAll},scopedSlots:_vm._u([{key:"token-content",fn:function(ref){
+var token = ref.token;
+return [_vm._t("token-content",null,{"token":token})]}},{key:"text-input",fn:function(){return [_c('input',_vm._b({ref:"textInput",staticClass:"gl-token-selector-input gl-bg-none gl-font-regular gl-font-base gl-line-height-normal gl-px-1 gl-h-auto gl-text-gray-900 gl-border-none gl-outline-none gl-flex-grow-1 gl-w-40p",attrs:{"type":"text","autocomplete":_vm.autocomplete,"aria-labelledby":_vm.ariaLabelledby,"placeholder":_vm.placeholder,"disabled":_vm.viewOnly},domProps:{"value":_vm.inputText},on:{"input":function($event){_vm.inputText = $event.target.value;},"focus":_vm.handleFocus,"blur":_vm.handleBlur,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.handleEnter.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.handleEscape.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"])){ return null; }return _vm.handleBackspace.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.dropdownEventHandlers.handleUpArrow.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.dropdownEventHandlers.handleDownArrow.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }return _vm.dropdownEventHandlers.handleHomeKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }return _vm.dropdownEventHandlers.handleEndKey.apply(null, arguments)},function($event){$event.stopPropagation();return _vm.$emit('keydown', $event)}],"click":_vm.handleInputClick}},'input',_vm.textInputAttrs,false))]},proxy:true}],null,true)})],2),_vm._v(" "),_c('gl-token-selector-dropdown',{attrs:{"menu-class":_vm.menuClass,"show":_vm.dropdownIsOpen,"loading":_vm.loading,"dropdown-items":_vm.filteredDropdownItems,"selected-tokens":_vm.selectedTokens,"input-text":_vm.inputText,"allow-user-defined-tokens":_vm.allowUserDefinedTokens,"component-id":_vm.$options.componentId,"register-dropdown-event-handlers":_vm.registerDropdownEventHandlers,"register-reset-focused-dropdown-item":_vm.registerResetFocusedDropdownItem},on:{"dropdown-item-click":_vm.addToken,"show":_vm.openDropdown},scopedSlots:_vm._u([{key:"loading-content",fn:function(){return [_vm._t("loading-content")]},proxy:true},{key:"user-defined-token-content",fn:function(){return [_vm._t("user-defined-token-content",null,{"inputText":_vm.inputText})]},proxy:true},{key:"no-results-content",fn:function(){return [_vm._t("no-results-content")]},proxy:true},{key:"dropdown-item-content",fn:function(ref){
+var dropdownItem = ref.dropdownItem;
+return [_vm._t("dropdown-item-content",null,{"dropdownItem":dropdownItem})]}},{key:"dropdown-footer",fn:function(){return [_vm._t("dropdown-footer")]},proxy:true}],null,true),model:{value:(_vm.focusedDropdownItem),callback:function ($$v) {_vm.focusedDropdownItem=$$v;},expression:"focusedDropdownItem"}})],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__ = __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 default __vue_component__;

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

@@ -0,0 +1,199 @@
+import GlDropdownItem from '../dropdown/dropdown_item';
+import { tokensValidator } from './helpers';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlTokenSelectorDropdown',
+  components: {
+    GlDropdownItem
+  },
+  props: {
+    show: {
+      type: Boolean,
+      required: true
+    },
+    menuClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: ''
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    dropdownItems: {
+      type: Array,
+      // All items need to have an `id` key
+      validator: tokensValidator,
+      required: true
+    },
+    inputText: {
+      type: String,
+      required: true
+    },
+    allowUserDefinedTokens: {
+      type: Boolean,
+      required: true
+    },
+    componentId: {
+      type: String,
+      required: true
+    },
+    registerDropdownEventHandlers: {
+      type: Function,
+      required: true
+    },
+    registerResetFocusedDropdownItem: {
+      type: Function,
+      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',
+            inline: 'end'
+          });
+        }
+      }
+    }
+  },
+  created() {
+    this.registerDropdownEventHandlers({
+      handleUpArrow: this.handleUpArrow,
+      handleDownArrow: this.handleDownArrow,
+      handleHomeKey: this.handleHomeKey,
+      handleEndKey: this.handleEndKey
+    });
+    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
+      if (this.focusedDropdownItemIndex === 0) {
+        return;
+      }
+      this.focusPrevDropdownItem();
+    },
+    handleDownArrow() {
+      if (!this.show) {
+        this.$emit('show');
+        return;
+      }
+
+      // 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;
+    }
+  }
+};
+
+/* 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:"dropdown b-dropdown gl-dropdown gl-relative",class:{ show: _vm.show }},[_c('ul',{ref:"dropdownMenu",staticClass:"dropdown-menu gl-absolute",class:[{ show: _vm.show }, _vm.menuClass],attrs:{"role":"menu","aria-activedescendant":_vm.dropdownItemIdAttribute(_vm.focusedDropdownItem)}},[(_vm.loading)?_c('gl-dropdown-item',{attrs:{"disabled":""}},[_vm._t("loading-content",function(){return [_vm._v("Searching...")]})],2):(_vm.dropdownItems.length)?_vm._l((_vm.dropdownItems),function(dropdownItem){return _c('gl-dropdown-item',{key:dropdownItem.id,ref:"dropdownItems",refInFor:true,attrs:{"id":_vm.dropdownItemIdAttribute(dropdownItem),"data-dropdown-item-id":dropdownItem.id,"active":_vm.dropdownItemIsFocused(dropdownItem),"active-class":"is-focused","tabindex":"-1"},on:{"click":function($event){return _vm.handleDropdownItemClick(dropdownItem)}}},[_c('div',{staticClass:"gl-mx-n4 gl-my-n3 gl-px-4 gl-py-3",on:{"mousedown":function($event){return _vm.handleMousedown(dropdownItem)}}},[_vm._t("dropdown-item-content",function(){return [_vm._v("\n            "+_vm._s(dropdownItem.name)+"\n          ")]},{"dropdownItem":dropdownItem})],2)])}):[(_vm.allowUserDefinedTokens && _vm.inputText !== '')?_c('gl-dropdown-item',{ref:"userDefinedTokenDropdownItem",attrs:{"active":"","active-class":"is-focused"},on:{"click":function($event){return _vm.handleDropdownItemClick(null)}}},[_c('div',{staticClass:"gl-mx-n4 gl-my-n3 gl-px-4 gl-py-3",on:{"mousedown":function($event){return _vm.handleMousedown(null)}}},[_vm._t("user-defined-token-content",function(){return [_vm._v("\n            Add \""+_vm._s(_vm.inputText)+"\"\n          ")]},{"inputText":_vm.inputText})],2)]):_c('gl-dropdown-item',{attrs:{"disabled":""}},[_vm._t("no-results-content",function(){return [_vm._v("No matches found")]})],2)],_vm._v(" "),_vm._t("dropdown-footer")],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__ = __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 default __vue_component__;

package/dist/components/base/tooltip/tooltip.js

@@ -0,0 +1,55 @@
+import { BTooltip } from 'bootstrap-vue/esm/index.js';
+import { tooltipDelay } from '../../../utils/constants';
+import tooltipMixin from '../../mixins/tooltip_mixin';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+//
+const tooltipRefName = 'bvTooltip';
+var script = {
+  name: 'GlTooltip',
+  tooltipDelay,
+  components: {
+    BTooltip
+  },
+  mixins: [tooltipMixin(tooltipRefName)],
+  inheritAttrs: false,
+  tooltipRefName
+};
+
+/* 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('b-tooltip',_vm._g(_vm._b({ref:_vm.$options.tooltipRefName,attrs:{"delay":_vm.$options.tooltipDelay}},'b-tooltip',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],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__ = __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 default __vue_component__;