@gitlab/ui 32.17.0 → 32.20.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [32.20.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.19.1...v32.20.0) (2021-10-14)
+
+
+### Features
+
+* **Tabs:** Badge counter should use SR only ([4706ff0](https://gitlab.com/gitlab-org/gitlab-ui/commit/4706ff0fb1f6b550133d904868d19bc39d01ef45))
+
+## [32.19.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.19.0...v32.19.1) (2021-10-11)
+
+
+### Bug Fixes
+
+* **badge:** Override bootstrap hover style ([c065687](https://gitlab.com/gitlab-org/gitlab-ui/commit/c065687b05ad1d8f5e3a45da0d120517825dae41))
+
+# [32.19.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.18.0...v32.19.0) (2021-10-08)
+
+
+### Features
+
+* **css:** add `gl-min-w-20` utility ([8340335](https://gitlab.com/gitlab-org/gitlab-ui/commit/8340335ec7c8d76989298154c1cfc761c492bc4a))
+
+# [32.18.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.17.0...v32.18.0) (2021-10-05)
+
+
+### Features
+
+* **Datepicker:** Add hover and disabled styles ([d5e1a81](https://gitlab.com/gitlab-org/gitlab-ui/commit/d5e1a8180f24a1238c5d86725d490b7e4829f6e7))
+
 # [32.17.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.16.0...v32.17.0) (2021-10-04)
 
 

package/dist/components/base/accordion/accordion.js

@@ -12,11 +12,18 @@ var script = {
   },
 
   props: {
+    /*
+    When true, will have the effect of closing other accordion items when one accordion item is visible.
+     */
     autoCollapse: {
       type: Boolean,
       required: false,
       default: false
     },
+
+    /*
+    The header tag used in the accordion (h1/h2/h3/h4/h5/h6). This overrides the value provided by GlAccordion. For accessibility this should be set to an appropriate value in the context where the accordion is used.
+     */
     headerLevel: {
       type: Number,
       required: true,

package/dist/components/base/accordion/accordion_item.js

@@ -16,15 +16,26 @@ var script = {
   inject: ['accordionSetId', 'defaultHeaderLevel'],
   inheritAttrs: false,
   props: {
+    /*
+    Used to set the title of accordion link
+    */
     title: {
       type: String,
       required: true
     },
+
+    /*
+    When set, it will ensure the accordion item is initially visible
+    */
     visible: {
       type: Boolean,
       default: false,
       required: false
     },
+
+    /*
+        The header tag used in the accordion (h1/h2/h3/h4/h5/h6). This overrides the value provided by GlAccordion. For accessibility this should be set to an appropriate value in the context where the accordion is used.,
+    */
     headerLevel: {
       type: Number,
       required: false,

package/dist/components/base/alert/alert.js

@@ -1,4 +1,4 @@
-import { alertVariantOptions, alertVariantIconMap, newButtonCategoryOptions } from '../../../utils/constants';
+import { alertVariantOptions, alertVariantIconMap, buttonCategoryOptions } from '../../../utils/constants';
 import CloseButton from '../../shared_components/close_button/close_button';
 import GlButton from '../button/button';
 import GlIcon from '../icon/icon';
@@ -106,7 +106,7 @@ var script = {
         attrs: {
           href: this.primaryButtonLink,
           variant: 'confirm',
-          category: newButtonCategoryOptions.primary
+          category: buttonCategoryOptions.primary
         },
         listeners: {
           click: this.primaryButtonClicked
@@ -116,7 +116,7 @@ var script = {
         attrs: {
           href: this.secondaryButtonLink,
           variant: 'default',
-          category: newButtonCategoryOptions.secondary
+          category: buttonCategoryOptions.secondary
         },
         listeners: {
           click: this.secondaryButtonClicked

package/dist/components/base/button/button.documentation.js

@@ -2,7 +2,23 @@ var description = "Buttons execute an action, either in the background or foregr
 
 var button_documentation = {
   description,
-  followsDesignSystem: true
+  followsDesignSystem: true,
+  bootstrapComponent: 'b-button',
+  bootstrapPropsInfo: {
+    category: {
+      enum: 'buttonCategoryOptions'
+    },
+    variant: {
+      enum: 'buttonVariantOptions'
+    },
+    size: {
+      enum: 'buttonSizeOptions'
+    }
+  },
+  events: [{
+    event: 'click',
+    description: 'Emitted when clicked on button'
+  }]
 };
 
 export default button_documentation;

package/dist/components/base/button/button.js

@@ -1,5 +1,5 @@
 import { BButton } from 'bootstrap-vue/esm/index.js';
-import { newButtonCategoryOptions, newButtonVariantOptions, newButtonSizeOptions, newButtonSizeOptionsMap } from '../../../utils/constants';
+import { buttonCategoryOptions, buttonVariantOptions, buttonSizeOptions, buttonSizeOptionsMap } from '../../../utils/constants';
 import { logWarning } from '../../../utils/utils';
 import { SafeLinkMixin } from '../../mixins/safe_link_mixin';
 import GlIcon from '../icon/icon';
@@ -17,20 +17,20 @@ var script = {
     category: {
       type: String,
       required: false,
-      default: newButtonCategoryOptions.primary,
-      validator: value => Object.keys(newButtonCategoryOptions).includes(value)
+      default: buttonCategoryOptions.primary,
+      validator: value => Object.keys(buttonCategoryOptions).includes(value)
     },
     variant: {
       type: String,
       required: false,
-      default: newButtonVariantOptions.default,
-      validator: value => Object.keys(newButtonVariantOptions).includes(value)
+      default: buttonVariantOptions.default,
+      validator: value => Object.keys(buttonVariantOptions).includes(value)
     },
     size: {
       type: String,
       required: false,
-      default: newButtonSizeOptions.medium,
-      validator: value => Object.keys(newButtonSizeOptions).includes(value)
+      default: buttonSizeOptions.medium,
+      validator: value => Object.keys(buttonSizeOptions).includes(value)
     },
     selected: {
       type: Boolean,
@@ -78,9 +78,9 @@ var script = {
 
     buttonClasses() {
       const classes = ['gl-button'];
-      const nonCategoryVariants = [newButtonVariantOptions.dashed, newButtonVariantOptions.link, newButtonVariantOptions.reset];
+      const nonCategoryVariants = [buttonVariantOptions.dashed, buttonVariantOptions.link, buttonVariantOptions.reset];
 
-      if (!nonCategoryVariants.includes(this.variant) && this.category !== newButtonCategoryOptions.primary) {
+      if (!nonCategoryVariants.includes(this.variant) && this.category !== buttonCategoryOptions.primary) {
         classes.push(`btn-${this.variant}-${this.category}`);
       }
 
@@ -98,7 +98,7 @@ var script = {
     },
 
     buttonSize() {
-      return newButtonSizeOptionsMap[this.size];
+      return buttonSizeOptionsMap[this.size];
     }
 
   },

package/dist/components/base/card/card.documentation.js

@@ -1,6 +1,4 @@
-import examples from './examples';
-
-var card = "# GlCard\n\n<!-- STORY -->\n\nCards are a flexible component used to display content and actions in a variety of contexts.\nThey are generally restricted to a single topic and it should be easy for users to scan relevant and\nactionable information. Content, such as images and text, should be positioned within them in a\nmanner that demonstrates their intended hierarchy.\n";
+var card = "Cards are a flexible component used to display content and actions in a variety of contexts.\nThey are generally restricted to a single topic and it should be easy for users to scan relevant and\nactionable information. Content, such as images and text, should be positioned within them in a\nmanner that demonstrates their intended hierarchy.\n";
 
 var description = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -9,29 +7,7 @@ var description = /*#__PURE__*/Object.freeze({
 
 var card_documentation = {
   followsDesignSystem: true,
-  description,
-  examples,
-  propsInfo: {
-    headerClass: {
-      additionalInfo: 'Additional CSS class(es) to be applied to the header'
-    },
-    bodyClass: {
-      additionalInfo: 'Additional CSS class(es) to be applied to the body'
-    },
-    footerClass: {
-      additionalInfo: 'Additional CSS class(es) to be applied to the footer'
-    }
-  },
-  slots: [{
-    name: 'header',
-    description: "The card's header content"
-  }, {
-    name: 'default',
-    description: "The card's main content."
-  }, {
-    name: 'footer',
-    description: "The card's footer content"
-  }]
+  description
 };
 
 export default card_documentation;

package/dist/components/base/card/card.js

@@ -2,16 +2,27 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
   props: {
+    /**
+     * Additional CSS class(es) to be applied to the header.
+     */
     headerClass: {
       type: [String, Object, Array],
       required: false,
       default: ''
     },
+
+    /**
+     * Additional CSS class(es) to be applied to the body.
+     */
     bodyClass: {
       type: [String, Object, Array],
       required: false,
       default: ''
     },
+
+    /**
+     * Additional CSS class(es) to be applied to the footer.
+     */
     footerClass: {
       type: [String, Object, Array],
       required: false,

package/dist/components/base/daterange_picker/daterange_picker.js

@@ -205,10 +205,52 @@ var script = {
     onEndDateSelected(endDate) {
       this.openToCalendar = false;
       this.endDate = endDate;
+      /**
+       * Emitted when start or end date selected with {startDate, endDate} value
+       *
+       * @event input
+       * */
+
       this.$emit('input', {
         startDate: this.startDate,
         endDate
       });
+    },
+
+    onStartPickerOpen() {
+      /**
+       * Emitted when the primary action button is clicked.
+       *
+       * @event start-picker-open
+       * */
+      this.$emit('start-picker-open');
+    },
+
+    onStartPickerClose() {
+      /**
+       * Emitted when the start date datepicker is hidden.
+       *
+       * @event start-picker-close
+       * */
+      this.$emit('start-picker-close');
+    },
+
+    onEndPickerOpen() {
+      /**
+       * Emitted when the end date datepicker becomes visible.
+       *
+       * @event end-picker-open
+       * */
+      this.$emit('end-picker-open');
+    },
+
+    onEndPickerClose() {
+      /**
+       * Emitted when the end date datepicker is hidden.
+       *
+       * @event end-picker-close
+       * */
+      this.$emit('end-picker-close');
     }
 
   }
@@ -218,7 +260,7 @@ var 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-daterange-picker"},[_c('div',{class:_vm.startPickerClass},[_c('label',{class:_vm.labelClass},[_vm._v(_vm._s(_vm.fromLabel))]),_vm._v(" "),_c('gl-datepicker',{attrs:{"min-date":_vm.defaultMinDate,"max-date":_vm.fromCalendarMaxDate,"start-range":_vm.defaultMinDate,"end-range":_vm.fromCalendarMaxDate,"theme":_vm.theme,"i18n":_vm.i18n,"target":_vm.startPickerTarget,"container":_vm.startPickerContainer},on:{"input":_vm.onStartDateSelected,"open":function($event){return _vm.$emit('start-picker-open')},"close":function($event){return _vm.$emit('start-picker-close')}},model:{value:(_vm.startDate),callback:function ($$v) {_vm.startDate=$$v;},expression:"startDate"}})],1),_vm._v(" "),_c('div',{class:_vm.endPickerClass},[_c('label',{class:_vm.labelClass},[_vm._v(_vm._s(_vm.toLabel))]),_vm._v(" "),_c('gl-datepicker',{key:_vm.numericStartTime,attrs:{"min-date":_vm.toCalendarMinDate,"max-date":_vm.toCalendarMaxDate,"start-range":_vm.toCalendarMinDate,"end-range":_vm.toCalendarMaxDate,"theme":_vm.theme,"i18n":_vm.i18n,"target":_vm.endPickerTarget,"container":_vm.endPickerContainer,"start-opened":_vm.openToCalendar,"default-date":_vm.toCalendarDefaultDate},on:{"input":_vm.onEndDateSelected,"open":function($event){return _vm.$emit('end-picker-open')},"close":function($event){return _vm.$emit('end-picker-close')}},model:{value:(_vm.endDate),callback:function ($$v) {_vm.endDate=$$v;},expression:"endDate"}})],1),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-flex-direction-row gl-align-items-center gl-text-gray-500 gl-ml-2",class:_vm.dateRangeIndicatorClass,attrs:{"data-testid":"daterange-picker-indicator"}},[_vm._t("default",null,null,{ daysSelected: _vm.numberOfDays }),_vm._v(" "),(_vm.tooltip)?_c('gl-icon',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],staticClass:"gl-ml-2",attrs:{"name":"information-o","title":_vm.tooltip,"size":16}}):_vm._e()],2)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-daterange-picker"},[_c('div',{class:_vm.startPickerClass},[_c('label',{class:_vm.labelClass},[_vm._v(_vm._s(_vm.fromLabel))]),_vm._v(" "),_c('gl-datepicker',{attrs:{"min-date":_vm.defaultMinDate,"max-date":_vm.fromCalendarMaxDate,"start-range":_vm.defaultMinDate,"end-range":_vm.fromCalendarMaxDate,"theme":_vm.theme,"i18n":_vm.i18n,"target":_vm.startPickerTarget,"container":_vm.startPickerContainer},on:{"input":_vm.onStartDateSelected,"open":_vm.onStartPickerOpen,"close":_vm.onStartPickerClose},model:{value:(_vm.startDate),callback:function ($$v) {_vm.startDate=$$v;},expression:"startDate"}})],1),_vm._v(" "),_c('div',{class:_vm.endPickerClass},[_c('label',{class:_vm.labelClass},[_vm._v(_vm._s(_vm.toLabel))]),_vm._v(" "),_c('gl-datepicker',{key:_vm.numericStartTime,attrs:{"min-date":_vm.toCalendarMinDate,"max-date":_vm.toCalendarMaxDate,"start-range":_vm.toCalendarMinDate,"end-range":_vm.toCalendarMaxDate,"theme":_vm.theme,"i18n":_vm.i18n,"target":_vm.endPickerTarget,"container":_vm.endPickerContainer,"start-opened":_vm.openToCalendar,"default-date":_vm.toCalendarDefaultDate},on:{"input":_vm.onEndDateSelected,"open":_vm.onEndPickerOpen,"close":_vm.onEndPickerClose},model:{value:(_vm.endDate),callback:function ($$v) {_vm.endDate=$$v;},expression:"endDate"}})],1),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-flex-direction-row gl-align-items-center gl-text-gray-500 gl-ml-2",class:_vm.dateRangeIndicatorClass,attrs:{"data-testid":"daterange-picker-indicator"}},[_vm._t("default",null,null,{ daysSelected: _vm.numberOfDays }),_vm._v(" "),(_vm.tooltip)?_c('gl-icon',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],staticClass:"gl-ml-2",attrs:{"name":"information-o","title":_vm.tooltip,"size":16}}):_vm._e()],2)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/dropdown/dropdown.js

@@ -1,7 +1,7 @@
 import { BDropdown } from 'bootstrap-vue/esm/index.js';
 import { selectAll, isVisible } from 'bootstrap-vue/esm/utils/dom';
-import { newButtonCategoryOptions, newDropdownVariantOptions, newButtonSizeOptions } from '../../../utils/constants';
-import ButtonMixin from '../../mixins/button_mixin';
+import { buttonCategoryOptions, newDropdownVariantOptions, buttonSizeOptions } from '../../../utils/constants';
+import { ButtonMixin } from '../../mixins/button_mixin';
 import GlButton from '../button/button';
 import GlIcon from '../icon/icon';
 import GlLoadingIcon from '../loading_icon/loading_icon';
@@ -93,8 +93,8 @@ var script = {
     category: {
       type: String,
       required: false,
-      default: newButtonCategoryOptions.primary,
-      validator: value => Object.keys(newButtonCategoryOptions).includes(value)
+      default: buttonCategoryOptions.primary,
+      validator: value => Object.keys(buttonCategoryOptions).includes(value)
     },
     variant: {
       type: String,
@@ -105,8 +105,8 @@ var script = {
     size: {
       type: String,
       required: false,
-      default: newButtonSizeOptions.medium,
-      validator: value => Object.keys(newButtonSizeOptions).includes(value)
+      default: buttonSizeOptions.medium,
+      validator: value => Object.keys(buttonSizeOptions).includes(value)
     },
     icon: {
       type: String,
@@ -160,8 +160,8 @@ var script = {
       return [this.toggleClass, {
         'gl-button': true,
         'gl-dropdown-toggle': true,
-        [`btn-${this.variant}-secondary`]: this.category === newButtonCategoryOptions.secondary || this.category === newButtonCategoryOptions.tertiary && this.split,
-        [`btn-${this.variant}-tertiary`]: this.category === newButtonCategoryOptions.tertiary && !this.split,
+        [`btn-${this.variant}-secondary`]: this.category === buttonCategoryOptions.secondary || this.category === buttonCategoryOptions.tertiary && this.split,
+        [`btn-${this.variant}-tertiary`]: this.category === buttonCategoryOptions.tertiary && !this.split,
         'dropdown-icon-only': this.isIconOnly,
         'dropdown-icon-text': this.isIconWithText
       }];
@@ -172,7 +172,7 @@ var script = {
         'gl-button': true,
         'split-content-button': Boolean(this.text),
         'icon-split-content-button': Boolean(this.icon),
-        [`btn-${this.variant}-secondary`]: this.category === newButtonCategoryOptions.secondary || this.category === newButtonCategoryOptions.tertiary
+        [`btn-${this.variant}-secondary`]: this.category === buttonCategoryOptions.secondary || this.category === buttonCategoryOptions.tertiary
       }];
     },
 

package/dist/components/base/form/form_checkbox/form_checkbox.documentation.js

@@ -1,20 +1,8 @@
-import examples from './examples';
-
-var description = "# Form Checkbox\n\nForm checkbox groups for general use inside forms.\n\n## Stacked\n\nBy default, the GitLab Design guide mandates the `<gl-form-checkbox-group>` be `stacked` by default\nand is non-changeable at this time.\n";
+var description = "Form checkbox groups for general use inside forms.\n\n## Stacked\n\nBy default, the GitLab Design guide mandates the `<gl-form-checkbox-group>` be `stacked` and is\nnon-changeable at this time.\n";
 
 var form_checkbox_documentation = {
   description,
-  examples,
-  bootstrapComponent: 'b-form-checkbox',
-  followsDesignSystem: true,
-  events: [{
-    event: 'input',
-    description: 'Emitted when checked state changes',
-    args: [{
-      arg: 'checked',
-      description: 'Whether the checkbox is checked'
-    }]
-  }]
+  followsDesignSystem: true
 };
 
 export default form_checkbox_documentation;

package/dist/components/base/form/form_checkbox/form_checkbox.js

@@ -10,6 +10,26 @@ var script = {
   model: {
     prop: 'checked',
     event: 'input'
+  },
+  methods: {
+    change($event) {
+      /**
+       * Emitted when selected value(s) is changed due to user interaction.
+       *
+       * @event change
+       */
+      this.$emit('change', $event);
+    },
+
+    input($event) {
+      /**
+       * Emitted when checked state is changed.
+       *
+       * @event input
+       */
+      this.$emit('input', $event);
+    }
+
   }
 };
 
@@ -17,7 +37,7 @@ var 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-form-checkbox',_vm._b({staticClass:"gl-form-checkbox",on:{"change":function($event){return _vm.$emit('change', $event)},"input":function($event){return _vm.$emit('input', $event)}}},'b-form-checkbox',_vm.$attrs,false),[_vm._t("default"),_vm._v(" "),(Boolean(_vm.$scopedSlots.help))?_c('p',{staticClass:"help-text"},[_vm._t("help")],2):_vm._e()],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-checkbox',_vm._b({staticClass:"gl-form-checkbox",on:{"change":_vm.change,"input":_vm.input}},'b-form-checkbox',_vm.$attrs,false),[_vm._t("default"),_vm._v(" "),(Boolean(_vm.$scopedSlots.help))?_c('p',{staticClass:"help-text"},[_vm._t("help")],2):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/form/form_checkbox/form_checkbox_group.js

@@ -1,6 +1,6 @@
 import { BFormCheckboxGroup } from 'bootstrap-vue/esm/index.js';
 import formOptionsMixin from 'bootstrap-vue/esm/mixins/form-options';
-import SafeHtml from '../../../../directives/safe_html/safe_html';
+import { SafeHtmlDirective } from '../../../../directives/safe_html/safe_html';
 import GlFormCheckbox from './form_checkbox';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -11,7 +11,7 @@ var script = {
     GlFormCheckbox
   },
   directives: {
-    SafeHtml
+    SafeHtml: SafeHtmlDirective
   },
   mixins: [formOptionsMixin],
   inheritAttrs: false,

package/dist/components/base/form/form_input_group/form_input_group.js

@@ -1,7 +1,7 @@
 import { BInputGroup, BInputGroupPrepend, BInputGroupAppend, BFormInput } from 'bootstrap-vue/esm/index.js';
 import GlDropdown from '../../dropdown/dropdown';
 import GlDropdownItem from '../../dropdown/dropdown_item';
-import InputGroupMixin from './form_input_group_mixin';
+import { InputGroupMixin } from './form_input_group_mixin';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {

package/dist/components/base/form/form_input_group/form_input_group_mixin.js

@@ -1,4 +1,4 @@
-var form_input_group_mixin = {
+const InputGroupMixin = {
   props: {
     value: {
       type: [String, Number],
@@ -46,4 +46,4 @@ var form_input_group_mixin = {
   }
 };
 
-export default form_input_group_mixin;
+export { InputGroupMixin };

package/dist/components/base/form/form_radio_group/form_radio_group.js

@@ -1,6 +1,6 @@
 import { BFormRadioGroup } from 'bootstrap-vue/esm/index.js';
 import formOptionsMixin from 'bootstrap-vue/esm/mixins/form-options';
-import SafeHtml from '../../../../directives/safe_html/safe_html';
+import { SafeHtmlDirective } from '../../../../directives/safe_html/safe_html';
 import GlFormRadio from '../form_radio/form_radio';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -13,7 +13,7 @@ var script = {
     GlFormRadio
   },
   directives: {
-    SafeHtml
+    SafeHtml: SafeHtmlDirective
   },
   mixins: [formOptionsMixin],
   inheritAttrs: false,

package/dist/components/base/tabs/tabs/examples/tabs.basic.example.js

@@ -3,7 +3,7 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 /* script */
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',[_c('gl-tab',{attrs:{"title":"First"}},[_vm._v("first content")]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Second"}},[_vm._v("second content")])],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',[_c('gl-tab',{attrs:{"title":"Tab 1"}},[_vm._v("Tab panel 1")]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Tab 2"}},[_vm._v("Tab panel 2")])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/tabs/tabs/examples/tabs.counterbadges.example.js

@@ -3,7 +3,7 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 /* script */
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',[_c('gl-tab',{scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('span',[_vm._v("1st")]),_vm._v(" "),_c('gl-badge',{staticClass:"gl-tab-counter-badge",attrs:{"size":"sm"}},[_vm._v("500")])]},proxy:true}])},[_vm._v("\n    first content\n  ")]),_vm._v(" "),_c('gl-tab',{scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('span',[_vm._v("2nd")]),_vm._v(" "),_c('gl-badge',{staticClass:"gl-tab-counter-badge",attrs:{"size":"sm"}},[_vm._v("250")])]},proxy:true}])},[_vm._v("\n    second content\n  ")]),_vm._v(" "),_c('gl-tab',{scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('span',[_vm._v("3rd")]),_vm._v(" "),_c('gl-badge',{staticClass:"gl-tab-counter-badge",attrs:{"size":"sm"}},[_vm._v("250")])]},proxy:true}])},[_vm._v("\n    third content\n  ")])],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',[_c('gl-tab',{scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('span',[_vm._v("Tab")]),_vm._v(" "),_c('gl-badge',{staticClass:"gl-tab-counter-badge",attrs:{"size":"sm"}},[_vm._v("500")]),_vm._v(" "),_c('span',{staticClass:"sr-only"},[_vm._v("items")])]},proxy:true}])},[_vm._v("\n    Tab panel 1\n  ")]),_vm._v(" "),_c('gl-tab',{scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('span',[_vm._v("Tab")]),_vm._v(" "),_c('gl-badge',{staticClass:"gl-tab-counter-badge",attrs:{"size":"sm"}},[_vm._v("250")]),_vm._v(" "),_c('span',{staticClass:"sr-only"},[_vm._v("items")])]},proxy:true}])},[_vm._v("\n    Tab panel 2\n  ")]),_vm._v(" "),_c('gl-tab',{scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('span',[_vm._v("Tab")]),_vm._v(" "),_c('gl-badge',{staticClass:"gl-tab-counter-badge",attrs:{"size":"sm"}},[_vm._v("250")]),_vm._v(" "),_c('span',{staticClass:"sr-only"},[_vm._v("items")])]},proxy:true}])},[_vm._v("\n    Tab panel 3\n  ")])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/tabs/tabs/examples/tabs.custom_title.example.js

@@ -3,7 +3,7 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 /* script */
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',[_c('gl-tab',{attrs:{"title":"First"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('i',[_vm._v("custom")]),_vm._v(" "),_c('strong',[_vm._v("Title")])]},proxy:true}])},[_vm._v("\n    first content\n  ")]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Second"}},[_vm._v("second content")])],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',[_c('gl-tab',{attrs:{"title":"Tab 1"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('i',[_vm._v("custom")]),_vm._v(" "),_c('strong',[_vm._v("Title")])]},proxy:true}])},[_vm._v("\n    Tab panel 1\n  ")]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Tab 2"}},[_vm._v("Tab panel 2")])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/tabs/tabs/examples/tabs.disabled.example.js

@@ -3,7 +3,7 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 /* script */
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',[_c('gl-tab',{attrs:{"title":"First"}},[_vm._v("first content")]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Second"}},[_vm._v("second content")]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Disabled","disabled":""}},[_vm._v("disabled")])],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',[_c('gl-tab',{attrs:{"title":"Tab 1"}},[_vm._v("Tab panel 1")]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Tab 2"}},[_vm._v("Tab panel 2")]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Tab 3","disabled":""}},[_vm._v("Disabled tab panel")])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/tabs/tabs/examples/tabs.justified.example.js

@@ -3,7 +3,7 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 /* script */
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',{attrs:{"justified":""}},[_c('gl-tab',{attrs:{"title":"First tab"}},[_vm._v("First content")]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Second tab"}},[_vm._v("Second content")])],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',{attrs:{"justified":""}},[_c('gl-tab',{attrs:{"title":"Tab 1"}},[_vm._v("Tab panel 1")]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Tab 2"}},[_vm._v("Tab panel 2")])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/tabs/tabs/examples/tabs.scrollable.example.js

@@ -3,8 +3,8 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 var script = {
   tabs: Array(20).fill(1).map((_, index) => index + 1).map(id => ({
     id,
-    title: `Lorem ${id}`,
-    content: `(${id}) Lorem ipsum dolar sit amit...`
+    title: `Tab ${id}`,
+    content: `Tab panel ${id} content...`
   }))
 };
 

package/dist/components/base/tabs/tabs/examples/tabs.styles_only.example.js

@@ -4,7 +4,7 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 /* template */
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;_vm._self._c||_h;return _vm._m(0)};
-var __vue_staticRenderFns__ = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"tabs gl-tabs"},[_c('ul',{staticClass:"nav gl-tabs-nav",attrs:{"role":"tablist"}},[_c('li',{staticClass:"nav-item",attrs:{"role":"presentation"}},[_c('a',{staticClass:"nav-link gl-tab-nav-item gl-tab-nav-item-active gl-tab-nav-item-active-indigo",attrs:{"role":"tab","target":"_self","href":"#"}},[_vm._v("First")])]),_vm._v(" "),_c('li',{staticClass:"nav-item",attrs:{"role":"presentation"}},[_c('a',{staticClass:"nav-link gl-tab-nav-item",attrs:{"role":"tab","target":"_self","href":"#"}},[_vm._v("Second")])])]),_vm._v(" "),_c('div',{staticClass:"tab-content gl-tab-content"},[_c('div',{staticClass:"tab-pane active",attrs:{"role":"tabpanel"}},[_vm._v("first content")]),_vm._v(" "),_c('div',{staticClass:"tab-pane",attrs:{"role":"tabpanel"}},[_vm._v("second content")])])])}];
+var __vue_staticRenderFns__ = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"tabs gl-tabs"},[_c('ul',{staticClass:"nav gl-tabs-nav",attrs:{"role":"tablist"}},[_c('li',{staticClass:"nav-item",attrs:{"role":"presentation"}},[_c('a',{staticClass:"nav-link gl-tab-nav-item gl-tab-nav-item-active gl-tab-nav-item-active-indigo",attrs:{"role":"tab","target":"_self","href":"#"}},[_vm._v("Tab 1")])]),_vm._v(" "),_c('li',{staticClass:"nav-item",attrs:{"role":"presentation"}},[_c('a',{staticClass:"nav-link gl-tab-nav-item",attrs:{"role":"tab","target":"_self","href":"#"}},[_vm._v("Tab 2")])])]),_vm._v(" "),_c('div',{staticClass:"tab-content gl-tab-content"},[_c('div',{staticClass:"tab-pane active",attrs:{"role":"tabpanel"}},[_vm._v("Tab panel 1")]),_vm._v(" "),_c('div',{staticClass:"tab-pane",attrs:{"role":"tabpanel"}},[_vm._v("Tab panel 2")])])])}];
 
   /* style */
   const __vue_inject_styles__ = undefined;

package/dist/components/base/tabs/tabs/tabs.documentation.js

@@ -1,6 +1,6 @@
 import examples from './examples';
 
-var description = "# Tabs\n\n<!-- STORY -->\n## Usage\n\nTabs are used to divide content into meaningful, related sections. Tabs allow users to focus on one\nspecific view at a time while maintaining sight of all the relevant content options available. Each\ntab, when active, will reveal it’s own unique content.\n\n## Using the component Vue\n\n~~~js\n<gl-tabs theme=\"indigo\">\n  <gl-tab title=\"First\">\n    first content\n  </gl-tab>\n  <gl-tab title=\"Second\">\n    second content\n  </gl-tab>\n</gl-tabs>\n~~~\n\n## Using the component HTML\n\n~~~js\n<div class=\"tabs gl-tabs\">\n  <ul role=\"tablist\" class=\"nav gl-tabs-nav\">\n    <li role=\"presentation\" class=\"nav-item\">\n      <a\n        role=\"tab\"\n        target=\"_self\"\n        href=\"#\"\n        class=\"nav-link gl-tab-nav-item gl-tab-nav-item-active gl-tab-nav-item-active-indigo\"\n      >First</a>\n    </li>\n    <li role=\"presentation\" class=\"nav-item\">\n      <a role=\"tab\" target=\"_self\" href=\"#\" class=\"nav-link gl-tab-nav-item\">Second</a>\n    </li>\n  </ul>\n  <div class=\"tab-content gl-tab-content\">\n    <div role=\"tabpanel\" class=\"tab-pane gl-tab-content active\">first content</div>\n    <div role=\"tabpanel\" class=\"tab-pane gl-tab-content\">second content</div>\n  </div>\n</div>\n~~~\n\n## Adding Action Buttons to the Tabs\n\nTabs start and end slot can be populated via props: `action-primary`, `action-secondary` and\n`action-tertiary`. These props allow you to handle how a primary, secondary and tertiary button will\nbehave and look. The props receive an object as such:\n\n~~~js\n{\n  text: 'Save Changes',\n  attributes: [\n    { variant: 'info' },\n    { disabled: this.someState },\n    { class: 'some-class' },\n    ...\n  ]\n}\n~~~\n\n## Scrollable tab buttons\n\nBy default, `GlTab` will wrap tab buttons when they overflow the container. To\nenable horizontally scrolling for the tab buttons, use the `GlScrollableTabs`\ncomponent. This is a separate Vue component because of some limitations:\n\n- The action props (e.g., `action-primary`) are not respected in `GlScrollableTabs`. At the\n  moment, BootstrapVue does not provide a reliable way for us to achieve this desired combination.\n\n`GlScrollableTabs` composes `GlTabs` and passes through every listener, slot, or prop (with the above\nexceptions).\n\n~~~html\n<gl-scrollable-tabs theme=\"indigo\">\n  <gl-tab v-for=\"tab in tabs\" :key=\"tab.key\" :title=\"tab.title\"> {{ tab.content }} </gl-tab>\n</gl-scrollable-tabs>\n~~~\n";
+var description = "# Tabs\n\n<!-- STORY -->\n## Usage\n\nTabs are used to divide content into meaningful, related sections. Tabs allow users to focus on one\nspecific view at a time while maintaining sight of all the relevant content options available. Each\ntab, when active, will reveal it’s own unique content.\n\n## Using the component Vue\n\n~~~js\n<gl-tabs theme=\"indigo\">\n  <gl-tab title=\"Tab 1\">\n    Tab panel 1\n  </gl-tab>\n  <gl-tab title=\"Tab 2\">\n    Tab panel 2\n  </gl-tab>\n</gl-tabs>\n~~~\n\n## Using the component HTML\n\n~~~js\n<div class=\"tabs gl-tabs\">\n  <ul role=\"tablist\" class=\"nav gl-tabs-nav\">\n    <li role=\"presentation\" class=\"nav-item\">\n      <a\n        role=\"tab\"\n        target=\"_self\"\n        href=\"#\"\n        class=\"nav-link gl-tab-nav-item gl-tab-nav-item-active gl-tab-nav-item-active-indigo\"\n      >Tab 1</a>\n    </li>\n    <li role=\"presentation\" class=\"nav-item\">\n      <a role=\"tab\" target=\"_self\" href=\"#\" class=\"nav-link gl-tab-nav-item\">Tab 2</a>\n    </li>\n  </ul>\n  <div class=\"tab-content gl-tab-content\">\n    <div role=\"tabpanel\" class=\"tab-pane gl-tab-content active\">Tab panel 1</div>\n    <div role=\"tabpanel\" class=\"tab-pane gl-tab-content\">Tab panel 2</div>\n  </div>\n</div>\n~~~\n\n## Adding Action Buttons to the Tabs\n\nTabs start and end slot can be populated via props: `action-primary`, `action-secondary` and\n`action-tertiary`. These props allow you to handle how a primary, secondary and tertiary button will\nbehave and look. The props receive an object as such:\n\n~~~js\n{\n  text: 'Save Changes',\n  attributes: [\n    { variant: 'info' },\n    { disabled: this.someState },\n    { class: 'some-class' },\n    ...\n  ]\n}\n~~~\n\n## Scrollable tab buttons\n\nBy default, `GlTab` will wrap tab buttons when they overflow the container. To\nenable horizontally scrolling for the tab buttons, use the `GlScrollableTabs`\ncomponent. This is a separate Vue component because of some limitations:\n\n- The action props (e.g., `action-primary`) are not respected in `GlScrollableTabs`. At the\n  moment, BootstrapVue does not provide a reliable way for us to achieve this desired combination.\n\n`GlScrollableTabs` composes `GlTabs` and passes through every listener, slot, or prop (with the above\nexceptions).\n\n~~~html\n<gl-scrollable-tabs theme=\"indigo\">\n  <gl-tab v-for=\"tab in tabs\" :key=\"tab.key\" :title=\"tab.title\"> {{ tab.content }} </gl-tab>\n</gl-scrollable-tabs>\n~~~\n";
 
 var tabs_documentation = {
   description,

package/dist/components/mixins/button_mixin.js

@@ -1,12 +1,12 @@
-import { newButtonSizeOptionsMap } from '../../utils/constants';
+import { buttonSizeOptionsMap } from '../../utils/constants';
 
-var button_mixin = {
+const ButtonMixin = {
   computed: {
     buttonSize() {
-      return newButtonSizeOptionsMap[this.size];
+      return buttonSizeOptionsMap[this.size];
     }
 
   }
 };
 
-export default button_mixin;
+export { ButtonMixin };

package/dist/directives/safe_html/safe_html.js

@@ -28,4 +28,4 @@ const SafeHtmlDirective = {
   update: transform
 };
 
-export default SafeHtmlDirective;
+export { SafeHtmlDirective };