@gitlab/ui 37.1.0 → 37.4.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+# [37.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v37.3.0...v37.4.0) (2022-03-07)
+
+
+### Features
+
+* **GlButton:** Update selected state background ([b9e3116](https://gitlab.com/gitlab-org/gitlab-ui/commit/b9e31166ee8a43c2ea09c2f4a9cafd9e71e222d8))
+* **GlButton:** Update selected state design ([a5ebf70](https://gitlab.com/gitlab-org/gitlab-ui/commit/a5ebf701e38fd32ff965af33c30319e4c7f2edc5))
+
+# [37.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v37.2.0...v37.3.0) (2022-03-03)
+
+
+### Features
+
+* **css:** Add gl-bg-purple-50 util class ([29acbbb](https://gitlab.com/gitlab-org/gitlab-ui/commit/29acbbbe7726f763b0e7ba86dc4de74db45a545e))
+
+# [37.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v37.1.0...v37.2.0) (2022-03-03)
+
+
+### Features
+
+* **GlPath:** allow changing selected index programmatically ([d711441](https://gitlab.com/gitlab-org/gitlab-ui/commit/d71144162363ae62ff4d1aeb3ee3dc956bd04108))
+
 # [37.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v37.0.0...v37.1.0) (2022-02-28)
 
 

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

@@ -1,11 +1,7 @@
-import examples from './examples/form_group';
-
-var description = "# Form Group\n\nForm group adds structure to forms.\n";
+var description = "Form group adds structure to forms.\n";
 
 var form_group_documentation = {
-  description,
-  examples,
-  bootstrapComponent: 'b-form-group'
+  description
 };
 
 export default form_group_documentation;

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

@@ -1,32 +1,8 @@
-import examples from './examples';
-
-var description = "# Form Group Input\n\n<!-- STORY -->\n\nThe `GlFormInputGroup` component allows one to build more advanced text\ninput fields than generic `GlFormInput` when one needs that flexibility.\nBasic usage of the component:\n\n```html\n<div>\n  <gl-form-input-group>\n    <template #prepend>\n      <!-- Content to prepend your text input field -->\n    </template>\n    <template #append>\n      <!-- Content to append your text input field -->\n    </template>\n  </gl-form-input-group>\n</div>\n```\n\nOne can use any other component (custom or `<gl-*>`) in both slots or\nnot to use the slots at all. In the latter, the component will fallback\nto simple `GlFormInput`.\n\n## Predefined options\n\nSometimes custom text input from the user isn't desired. Instead, the\nuser should pick one of the predefined options that will automatically\npopulate the input field. Typically, such cases will also include an\nactionable button (like **Copy**) put into the `append` slot.\n\nTo achieve this effect, the `GlFormInputGroup` component accepts an\narray of options in the form of `predefinedOptions` param. For example:\n\n```javascript\nconst optionValues = [\n  { name: 'Option #1', value: 'Option #1 is selected!' },\n  { name: 'Option #2', value: 'Option #2 is selected!' },\n];\n...\n<gl-form-input-group :predefined-options=\"optionValues\" />\n```\n\nThis will tell `GlFormInputGroup` to render a dropdown in the `prepend`\nslot with all of the supplied options' `name`s. When one of the options\nis selected, the input field is automatically populated with the\noption's `value`. Check the \"Examples\" section below for \"With\npredefined options\" example.\n\n### Pro tips\n\nRead some useful tips below about specific usage of the component.\n\n### Readonly input\n\nOften you want to make sure user doesn't mess up the predefined content\npasted into the input field. In this case, you can set `readonly`\nparam to `true`. You can play with `Readonly` knob on the right.\n\n### Preselect the text to copy\n\nIf you set the `readonly` param on the `GlFormInputGroup` component,\nusers will still be able to manually select the text and copy it.\nHowever, it's more user-friendly to preselect the text for the users if\nthey click anywhere in the input field. This can be achieved by setting\nthe `select-on-click` param to `true`. You can play with\n`Select text on click` knob on the right. Even better, try enabling\n`Readonly`, `Select text on click`, and `Switch to predefined input`\naltogether. And, probably, remove `Prepend text`. Or leave it. It's your\ncall. :)\n";
+var description = "The `GlFormInputGroup` component allows one to build more advanced text\ninput fields than generic `GlFormInput` when one needs that flexibility.\nBasic usage of the component:\n\n```html\n<div>\n  <gl-form-input-group>\n    <template #prepend>\n      <!-- Content to prepend your text input field -->\n    </template>\n    <template #append>\n      <!-- Content to append your text input field -->\n    </template>\n  </gl-form-input-group>\n</div>\n```\n\nOne can use any other component (custom or `<gl-*>`) in both slots or\nnot to use the slots at all. In the latter, the component will fallback\nto simple `GlFormInput`.\n\n## Predefined options\n\nSometimes custom text input from the user isn't desired. Instead, the\nuser should pick one of the predefined options that will automatically\npopulate the input field. Typically, such cases will also include an\nactionable button (like **Copy**) put into the `append` slot.\n\nTo achieve this effect, the `GlFormInputGroup` component accepts an\narray of options in the form of `predefinedOptions` param. For example:\n\n```javascript\nconst optionValues = [\n  { name: 'Option #1', value: 'Option #1 is selected!' },\n  { name: 'Option #2', value: 'Option #2 is selected!' },\n];\n...\n<gl-form-input-group :predefined-options=\"optionValues\" />\n```\n\nThis will tell `GlFormInputGroup` to render a dropdown in the `prepend`\nslot with all of the supplied options' `name`s. When one of the options\nis selected, the input field is automatically populated with the\noption's `value`. Check the \"Examples\" section below for \"With\npredefined options\" example.\n\n### Pro tips\n\nRead some useful tips below about specific usage of the component.\n\n### Readonly input\n\nOften you want to make sure user doesn't mess up the predefined content\npasted into the input field. In this case, you can set `readonly`\nparam to `true`. You can play with `Readonly` knob on the right.\n\n### Preselect the text to copy\n\nIf you set the `readonly` param on the `GlFormInputGroup` component,\nusers will still be able to manually select the text and copy it.\nHowever, it's more user-friendly to preselect the text for the users if\nthey click anywhere in the input field. This can be achieved by setting\nthe `select-on-click` param to `true`. You can play with\n`Select text on click` knob on the right. Even better, try enabling\n`Readonly`, `Select text on click`, and `Switch to predefined input`\naltogether. And, probably, remove `Prepend text`. Or leave it. It's your\ncall. :)\n";
 
 var form_input_group_documentation = {
   followsDesignSystem: false,
-  description,
-  examples,
-  bootstrapComponent: 'b-form-input',
-  propsInfo: {
-    'select-on-click': {
-      type: Boolean,
-      additionalInfo: 'Automatically selects the content of the input field on click'
-    },
-    'predefined-options': {
-      type: Array,
-      additionalInfo: 'Array of options. Each option should have `name` and `value` information: {name: "Foo", value: "Bar"})'
-    }
-  },
-  slots: [{
-    name: 'default',
-    description: 'Allows replacement of default input field.'
-  }, {
-    name: 'prepend',
-    description: 'Is rendered in front of the input field.'
-  }, {
-    name: 'append',
-    description: 'Is rendered after the input field.'
-  }]
+  description
 };
 
 export default form_input_group_documentation;

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

@@ -16,11 +16,18 @@ var script = {
   },
   mixins: [InputGroupMixin],
   props: {
+    /**
+     * Automatically selects the content of the input field on click.
+     */
     selectOnClick: {
       type: Boolean,
       required: false,
       default: false
     },
+
+    /**
+     * Array of options. Each option should have `name` and `value` information: {name: "Foo", value: "Bar"})
+     */
     predefinedOptions: {
       type: Array,
       required: false,

package/dist/components/base/loading_icon/loading_icon.js

@@ -67,7 +67,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(_vm.rootElementType,{tag:"component",staticClass:"gl-spinner-container",attrs:{"role":"status"}},[_c('span',{staticClass:"align-text-bottom",class:_vm.cssClasses,attrs:{"aria-label":_vm.label}})])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.rootElementType,{tag:"component",staticClass:"gl-spinner-container",attrs:{"role":"status"}},[_c('span',{staticClass:"gl-vertical-align-text-bottom!",class:_vm.cssClasses,attrs:{"aria-label":_vm.label}})])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/pagination/pagination.js

@@ -277,6 +277,26 @@ var script = {
 
     nextPageIsDisabled() {
       return this.pageIsDisabled(this.value + 1);
+    },
+
+    prevPageAriaLabel() {
+      return this.prevPageIsDisabled ? false : this.labelPrevPage || this.labelPage(this.value - 1);
+    },
+
+    nextPageAriaLabel() {
+      return this.nextPageIsDisabled ? false : this.labelNextPage || this.labelPage(this.value + 1);
+    },
+
+    prevPageHref() {
+      if (this.prevPageIsDisabled) return false;
+      if (this.isLinkBased) return this.linkGen(this.value - 1);
+      return '#';
+    },
+
+    nextPageHref() {
+      if (this.nextPageIsDisabled) return false;
+      if (this.isLinkBased) return this.linkGen(this.value + 1);
+      return '#';
     }
 
   },
@@ -392,13 +412,13 @@ const __vue_script__ = script;
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.isVisible)?_c('ul',{staticClass:"pagination gl-pagination text-nowrap",class:_vm.wrapperClasses,attrs:{"role":"navigation","aria-label":"Pagination"}},[_c('li',{staticClass:"page-item",class:{
       disabled: _vm.prevPageIsDisabled,
       'flex-fill': _vm.isFillAlign,
-    }},[_c(_vm.prevPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link prev-page-item gl-display-flex",attrs:{"aria-disabled":_vm.prevPageIsDisabled,"aria-label":_vm.labelPrevPage || _vm.labelPage(_vm.value - 1),"href":_vm.isLinkBased ? _vm.linkGen(_vm.value - 1) : '#'},on:{"click":function($event){return _vm.handlePrevious($event, _vm.value - 1)}}},[_vm._t("previous",[_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.prevText))])],null,{ page: _vm.value - 1, disabled: _vm.prevPageIsDisabled })],2)],1),_vm._v(" "),_vm._l((_vm.visibleItems),function(item){return _c('li',{key:item.key,staticClass:"page-item",class:{
+    },attrs:{"aria-hidden":_vm.prevPageIsDisabled}},[_c(_vm.prevPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link prev-page-item gl-display-flex",attrs:{"aria-label":_vm.prevPageAriaLabel,"href":_vm.prevPageHref},on:{"click":function($event){return _vm.handlePrevious($event, _vm.value - 1)}}},[_vm._t("previous",[_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.prevText))])],null,{ page: _vm.value - 1, disabled: _vm.prevPageIsDisabled })],2)],1),_vm._v(" "),_vm._l((_vm.visibleItems),function(item){return _c('li',{key:item.key,staticClass:"page-item",class:{
       disabled: item.disabled,
       'flex-fill': _vm.isFillAlign,
     }},[_c(item.component,_vm._g(_vm._b({tag:"component",staticClass:"page-link",attrs:{"size":"md","aria-disabled":item.disabled}},'component',item.attrs,false),item.listeners),[_vm._t(item.slot,[_vm._v(_vm._s(item.content))],null,item.slotData)],2)],1)}),_vm._v(" "),_c('li',{staticClass:"page-item",class:{
       disabled: _vm.nextPageIsDisabled,
       'flex-fill': _vm.isFillAlign,
-    }},[_c(_vm.nextPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link next-page-item gl-display-flex",attrs:{"aria-disabled":_vm.nextPageIsDisabled,"aria-label":_vm.labelNextPage || _vm.labelPage(_vm.value + 1),"href":_vm.isLinkBased ? _vm.linkGen(_vm.value + 1) : '#'},on:{"click":function($event){return _vm.handleNext($event, _vm.value + 1)}}},[_vm._t("next",[_c('span',[_vm._v(_vm._s(_vm.nextText))]),_vm._v(" "),_c('gl-icon',{attrs:{"name":"chevron-right"}})],null,{ page: _vm.value + 1, disabled: _vm.nextPageIsDisabled })],2)],1)],2):_vm._e()};
+    },attrs:{"aria-hidden":_vm.nextPageIsDisabled}},[_c(_vm.nextPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link next-page-item gl-display-flex",attrs:{"aria-label":_vm.nextPageAriaLabel,"href":_vm.nextPageHref},on:{"click":function($event){return _vm.handleNext($event, _vm.value + 1)}}},[_vm._t("next",[_c('span',[_vm._v(_vm._s(_vm.nextText))]),_vm._v(" "),_c('gl-icon',{attrs:{"name":"chevron-right"}})],null,{ page: _vm.value + 1, disabled: _vm.nextPageIsDisabled })],2)],1)],2):_vm._e()};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/path/path.js

@@ -89,10 +89,16 @@ var script = {
     }
 
   },
+  watch: {
+    items: {
+      immediate: true,
+
+      handler(items) {
+        const selectedIndex = items.findIndex(item => item.selected);
+        this.selectedIndex = selectedIndex > 0 ? selectedIndex : 0;
+      }
 
-  mounted() {
-    const selectedIndex = this.items.findIndex(item => item.selected);
-    this.selectedIndex = selectedIndex > 0 ? selectedIndex : 0;
+    }
   },
 
   beforeCreate() {

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

@@ -1,86 +1,8 @@
-import examples from './examples';
-
-var description = "# Search Box By Click\n\nProvides a clearable text input with loading state to be used for [search](https://design.gitlab.com/components/search).\n";
+var description = "Provides a clearable text input with loading state to be used for [search](https://design.gitlab.com/components/search).\n";
 
 var search_box_by_click_documentation = {
   followsDesignSystem: true,
-  description,
-  examples,
-  propsInfo: {
-    value: {
-      additionalInfo: 'If provided, used as value of search input'
-    },
-    historyItems: {
-      type: Array,
-      required: false,
-      additionalInfo: 'If provided, used as history items for this component'
-    },
-    placeholder: {
-      type: String,
-      required: false,
-      additionalInfo: 'If provided, used as history items for this component'
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      additionalInfo: 'If provided and true, disables the input and controls'
-    },
-    recentSearchesHeader: {
-      type: String,
-      required: false,
-      default: 'Recent searches',
-      additionalInfo: 'i18n for recent searches title within history dropdown'
-    },
-    clearButtonTitle: {
-      type: String,
-      required: false,
-      default: 'Clear',
-      additionalInfo: 'i18n for clear button title'
-    },
-    closeButtonTitle: {
-      type: String,
-      required: false,
-      default: 'Close',
-      additionalInfo: 'i18n for close button title within history dropdown'
-    },
-    clearRecentSearchesText: {
-      type: String,
-      required: false,
-      default: 'Clear recent searches',
-      additionalInfo: 'i18n for recent searches clear text'
-    },
-    tooltipContainer: {
-      additionalInfo: 'Container for tooltip. Valid values: DOM node, selector string or `false` for default'
-    },
-    searchButtonAttributes: {
-      additionalInfo: 'HTML attributes to add to the search button'
-    }
-  },
-  events: [{
-    event: 'clear',
-    description: 'Emitted when search is cleared'
-  }, {
-    event: 'submit',
-    args: [{
-      arg: 'value',
-      description: 'Search value'
-    }],
-    description: 'Emitted when search is submitted'
-  }, {
-    event: 'history-item-selected',
-    args: [{
-      arg: 'value',
-      description: 'History item'
-    }],
-    description: 'Emitted when item from history is selected'
-  }, {
-    event: 'clear-history',
-    description: 'Emitted when clear history button is clicked'
-  }],
-  slots: [{
-    name: 'history-item',
-    description: 'Slot to customize history item in history dropdown. Used only with history-items prop'
-  }]
+  description
 };
 
 export default search_box_by_click_documentation;

package/dist/components/base/search_box_by_click/search_box_by_click.js

@@ -26,6 +26,9 @@ var script = {
     GlTooltip: GlTooltipDirective
   },
   props: {
+    /**
+     * If provided, used as value of search input
+     */
     value: {
       required: false,
       default: '',
@@ -33,11 +36,19 @@ var script = {
       // so we should not force any specific type for value here
       validator: () => true
     },
+
+    /**
+     * If provided, used as history items for this component
+     */
     historyItems: {
       type: Array,
       required: false,
       default: null
     },
+
+    /**
+     * If provided, used as a placeholder for this component
+     */
     placeholder: {
       type: String,
       required: false,
@@ -48,26 +59,46 @@ var script = {
       required: false,
       default: true
     },
+
+    /**
+     * If provided and true, disables the input and controls
+     */
     disabled: {
       type: Boolean,
       required: false,
       default: false
     },
+
+    /**
+     * i18n for recent searches title within history dropdown
+     */
     recentSearchesHeader: {
       type: String,
       required: false,
       default: 'Recent searches'
     },
+
+    /**
+     * i18n for clear button title
+     */
     clearButtonTitle: {
       type: String,
       required: false,
       default: 'Clear'
     },
+
+    /**
+     * i18n for close button title within history dropdown
+     */
     closeButtonTitle: {
       type: String,
       required: false,
       default: 'Close'
     },
+
+    /**
+     * i18n for recent searches clear text
+     */
     clearRecentSearchesText: {
       type: String,
       required: false,
@@ -78,11 +109,19 @@ var script = {
       required: false,
       default: "You don't have any recent searches"
     },
+
+    /**
+     * Container for tooltip. Valid values: DOM node, selector string or `false` for default
+     */
     tooltipContainer: {
       required: false,
       default: false,
       validator: value => value === false || typeof value === 'string' || value instanceof HTMLElement
     },
+
+    /**
+     * HTML attributes to add to the search button
+     */
     searchButtonAttributes: {
       type: Object,
       required: false,
@@ -137,11 +176,20 @@ var script = {
     },
 
     search(value) {
+      /**
+       * Emitted when search is submitted
+       * @property {*} value Search value
+       */
       this.$emit('submit', value);
     },
 
     selectHistoryItem(item) {
       this.currentValue = item;
+      /**
+       * Emitted when item from history is selected
+       * @property {*} item History item
+       */
+
       this.$emit('history-item-selected', item);
       setTimeout(() => {
         document.activeElement.blur();
@@ -150,11 +198,22 @@ var script = {
 
     clearInput() {
       this.currentValue = '';
+      /**
+       * Emitted when search is cleared
+       */
+
       this.$emit('clear');
 
       if (this.$refs.input) {
         this.$refs.input.$el.focus();
       }
+    },
+
+    emitClearHistory() {
+      /**
+       * Emitted when clear history button is clicked
+       */
+      this.$emit('clear-history');
     }
 
   }
@@ -164,7 +223,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('gl-form-input-group',{staticClass:"gl-search-box-by-click",scopedSlots:_vm._u([(_vm.historyItems)?{key:"prepend",fn:function(){return [_c('gl-dropdown',{ref:"historyDropdown",staticClass:"gl-search-box-by-click-history",attrs:{"menu-class":"gl-search-box-by-click-menu","category":"secondary","disabled":_vm.disabled},scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_c('gl-icon',{staticClass:"gl-search-box-by-click-history-icon",attrs:{"name":"history"}}),_vm._v(" "),_c('gl-icon',{staticClass:"gl-search-box-by-click-history-icon-chevron",attrs:{"name":"chevron-down"}}),_vm._v(" "),_c('span',{staticClass:"gl-sr-only"},[_vm._v("Toggle history")])]},proxy:true}],null,false,2220989388)},[_vm._v(" "),_c('gl-dropdown-text',{staticClass:"gl-search-box-by-click-history-header"},[_vm._v("\n        "+_vm._s(_vm.recentSearchesHeader)+"\n        "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.hover",value:({ container: _vm.tooltipContainer }),expression:"{ container: tooltipContainer }",modifiers:{"hover":true}}],ref:"closeHistory",staticClass:"gl-search-box-by-click-close-history-button",attrs:{"title":_vm.closeButtonTitle,"aria-label":_vm.closeButtonTitle,"category":"tertiary","name":"close","icon":"close"},on:{"click":_vm.closeHistoryDropdown}})],1),_vm._v(" "),_c('gl-dropdown-divider'),_vm._v(" "),(_vm.historyItems.length)?[_vm._l((_vm.historyItems),function(item,idx){return _c('gl-dropdown-item',{key:idx,staticClass:"gl-search-box-by-click-history-item",on:{"click":function($event){return _vm.selectHistoryItem(item)}}},[_vm._t("history-item",[_vm._v(_vm._s(item))],{"historyItem":item})],2)}),_vm._v(" "),_c('gl-dropdown-divider'),_vm._v(" "),_c('gl-dropdown-item',{ref:"clearHistory",on:{"click":function($event){return _vm.$emit('clear-history')}}},[_vm._v(_vm._s(_vm.clearRecentSearchesText))])]:_c('gl-dropdown-text',{staticClass:"gl-search-box-by-click-history-no-searches"},[_vm._v(_vm._s(_vm.noRecentSearchesText))])],2)]},proxy:true}:null,{key:"append",fn:function(){return [_c('gl-button',_vm._b({ref:"searchButton",staticClass:"gl-search-box-by-click-search-button",attrs:{"icon":"search","disabled":_vm.disabled,"aria-label":"Search","data-testid":"search-button"},on:{"click":function($event){return _vm.search(_vm.currentValue)}}},'gl-button',_vm.searchButtonAttributes,false))]},proxy:true}],null,true)},[_vm._v(" "),_vm._t("input",[_c('gl-form-input',_vm._b({ref:"input",staticClass:"gl-search-box-by-click-input",attrs:{"disabled":_vm.disabled},on:{"focus":function($event){_vm.isFocused = true;},"blur":function($event){_vm.isFocused = false;},"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.search(_vm.currentValue)}},model:{value:(_vm.currentValue),callback:function ($$v) {_vm.currentValue=$$v;},expression:"currentValue"}},'gl-form-input',_vm.inputAttributes,false))]),_vm._v(" "),(_vm.clearable && _vm.hasValue && !_vm.disabled)?_c('gl-clear-icon-button',{staticClass:"gl-search-box-by-click-icon-button gl-search-box-by-click-clear-button gl-clear-icon-button",attrs:{"title":_vm.clearButtonTitle,"tooltip-container":_vm.tooltipContainer,"data-testid":"filtered-search-clear-button"},on:{"click":_vm.clearInput}}):_vm._e()],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-input-group',{staticClass:"gl-search-box-by-click",scopedSlots:_vm._u([(_vm.historyItems)?{key:"prepend",fn:function(){return [_c('gl-dropdown',{ref:"historyDropdown",staticClass:"gl-search-box-by-click-history",attrs:{"menu-class":"gl-search-box-by-click-menu","category":"secondary","disabled":_vm.disabled},scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_c('gl-icon',{staticClass:"gl-search-box-by-click-history-icon",attrs:{"name":"history"}}),_vm._v(" "),_c('gl-icon',{staticClass:"gl-search-box-by-click-history-icon-chevron",attrs:{"name":"chevron-down"}}),_vm._v(" "),_c('span',{staticClass:"gl-sr-only"},[_vm._v("Toggle history")])]},proxy:true}],null,false,2220989388)},[_vm._v(" "),_c('gl-dropdown-text',{staticClass:"gl-search-box-by-click-history-header"},[_vm._v("\n        "+_vm._s(_vm.recentSearchesHeader)+"\n        "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.hover",value:({ container: _vm.tooltipContainer }),expression:"{ container: tooltipContainer }",modifiers:{"hover":true}}],ref:"closeHistory",staticClass:"gl-search-box-by-click-close-history-button",attrs:{"title":_vm.closeButtonTitle,"aria-label":_vm.closeButtonTitle,"category":"tertiary","name":"close","icon":"close"},on:{"click":_vm.closeHistoryDropdown}})],1),_vm._v(" "),_c('gl-dropdown-divider'),_vm._v(" "),(_vm.historyItems.length)?[_vm._l((_vm.historyItems),function(item,idx){return _c('gl-dropdown-item',{key:idx,staticClass:"gl-search-box-by-click-history-item",on:{"click":function($event){return _vm.selectHistoryItem(item)}}},[_vm._t("history-item",[_vm._v(_vm._s(item))],{"historyItem":item})],2)}),_vm._v(" "),_c('gl-dropdown-divider'),_vm._v(" "),_c('gl-dropdown-item',{ref:"clearHistory",on:{"click":_vm.emitClearHistory}},[_vm._v(_vm._s(_vm.clearRecentSearchesText))])]:_c('gl-dropdown-text',{staticClass:"gl-search-box-by-click-history-no-searches"},[_vm._v(_vm._s(_vm.noRecentSearchesText))])],2)]},proxy:true}:null,{key:"append",fn:function(){return [_c('gl-button',_vm._b({ref:"searchButton",staticClass:"gl-search-box-by-click-search-button",attrs:{"icon":"search","disabled":_vm.disabled,"aria-label":"Search","data-testid":"search-button"},on:{"click":function($event){return _vm.search(_vm.currentValue)}}},'gl-button',_vm.searchButtonAttributes,false))]},proxy:true}],null,true)},[_vm._v(" "),_vm._t("input",[_c('gl-form-input',_vm._b({ref:"input",staticClass:"gl-search-box-by-click-input",attrs:{"disabled":_vm.disabled},on:{"focus":function($event){_vm.isFocused = true;},"blur":function($event){_vm.isFocused = false;},"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.search(_vm.currentValue)}},model:{value:(_vm.currentValue),callback:function ($$v) {_vm.currentValue=$$v;},expression:"currentValue"}},'gl-form-input',_vm.inputAttributes,false))]),_vm._v(" "),(_vm.clearable && _vm.hasValue && !_vm.disabled)?_c('gl-clear-icon-button',{staticClass:"gl-search-box-by-click-icon-button gl-search-box-by-click-clear-button gl-clear-icon-button",attrs:{"title":_vm.clearButtonTitle,"tooltip-container":_vm.tooltipContainer,"data-testid":"filtered-search-clear-button"},on:{"click":_vm.clearInput}}):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -1,26 +1,8 @@
-import examples from './examples';
-
-var description = "# Search Box By Type\n\nProvides a clearable text input with loading state to be used for [search](https://design.gitlab.com/components/search).\n";
+var description = "Provides a clearable text input with loading state to be used for [search](https://design.gitlab.com/components/search).\n";
 
 var search_box_by_type_documentation = {
   followsDesignSystem: true,
-  description,
-  propsInfo: {
-    value: {
-      additionalInfo: 'If provided, used as value of search input'
-    },
-    disabled: {
-      additionalInfo: 'If provided and true, disables the input and controls'
-    },
-    isLoading: {
-      additionalInfo: 'Puts search box into loading state, rendering spinner'
-    },
-    tooltipContainer: {
-      additionalInfo: 'Container for tooltip. Valid values: DOM node, selector string or `false` for default'
-    }
-  },
-  examples,
-  bootstrapComponent: 'b-form-input'
+  description
 };
 
 export default search_box_by_type_documentation;

package/dist/components/base/search_box_by_type/search_box_by_type.js

@@ -4,10 +4,6 @@ import GlIcon from '../icon/icon';
 import GlLoadingIcon from '../loading_icon/loading_icon';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-const model = {
-  prop: 'value',
-  event: 'input'
-};
 var script = {
   components: {
     GlClearIconButton,
@@ -16,8 +12,14 @@ var script = {
     GlLoadingIcon
   },
   inheritAttrs: false,
-  model,
+  model: {
+    prop: 'value',
+    event: 'input'
+  },
   props: {
+    /**
+     * If provided, used as value of search input
+     */
     value: {
       type: String,
       required: false,
@@ -28,16 +30,28 @@ var script = {
       required: false,
       default: 'Clear'
     },
+
+    /**
+     * If provided and true, disables the input and controls
+     */
     disabled: {
       type: Boolean,
       required: false,
       default: false
     },
+
+    /**
+     * Puts search box into loading state, rendering spinner
+     */
     isLoading: {
       type: Boolean,
       required: false,
       default: false
     },
+
+    /**
+     * Container for tooltip. Valid values: DOM node, selector string or `false` for default
+     */
     tooltipContainer: {
       required: false,
       default: false,

package/dist/directives/hover_load/hover_load.documentation.js

@@ -1,4 +1,4 @@
-var hover_load = "# Hover Load\n\nA Vue Directive to help with preloading resources when hovering over an element.\n\n## Usage\n\n```html\n<script>\nimport { GlHoverLoadDirective } from '@gitlab/ui';\n\nexport default {\n  directives: { GlHoverLoadDirective },\n  methods: {\n    handlePreload() {\n      fetch('some/endpoint');\n    },\n  },\n};\n</script>\n\n<template>\n  <div v-gl-hover-load=\"handlePreload\">Hover me to preload</div>\n</template>\n```\n";
+var hover_load = "A Vue Directive to help with preloading resources when hovering over an element.\n\n## Usage\n\n```html\n<script>\nimport { GlHoverLoadDirective } from '@gitlab/ui';\n\nexport default {\n  directives: { GlHoverLoadDirective },\n  methods: {\n    handlePreload() {\n      fetch('some/endpoint');\n    },\n  },\n};\n</script>\n\n<template>\n  <div v-gl-hover-load=\"handlePreload\">Hover me to preload</div>\n</template>\n```\n";
 
 var description = /*#__PURE__*/Object.freeze({
   __proto__: null,

package/dist/directives/resize_observer/resize_observer.documentation.js

@@ -1,11 +1,8 @@
-import examples from './examples';
-
-var description = "# Resize Observer\n\n<!-- STORY -->\n\n## Usage\n\nThis directive can be used to get notified whenever a given element's size (width or height) changes\nand to retrieve the updated dimensions.\n\nUnder the hood, it leverages the [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\nIf you use GitLab UI in an older browser which doesn't support the Resize Observer API,\nyou can use a [polyfill](https://github.com/que-etc/resize-observer-polyfill).\n\nThe directive accepts a callback as a value and passes on the received\n[contentRect](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentRect)\nand the target element whenever a resize event gets triggered.\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      width: 0,\n      height: 0,\n    };\n  },\n  methods: {\n    handleResize({ contentRect: { width, height } }) {\n      this.width = width;\n      this.height = height;\n    },\n  },\n};\n</script>\n<template>\n  <div v-gl-resize-observer-directive=\"handleResize\">\n    <p>{{ width }} x {{ height }}</p>\n  </div>\n</template>\n```\n\nThe observer can be toggled on or off by passing a boolean argument to the directive:\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      shouldObserve: true,\n    };\n  },\n  methods: {\n    handleResize() {},\n  },\n};\n</script>\n<template>\n  <div v-gl-resize-observer-directive[shouldObserve]=\"handleResize\"></div>\n</template>\n```\n";
+var description = "This directive can be used to get notified whenever a given element's size (width or height) changes\nand to retrieve the updated dimensions.\n\nUnder the hood, it leverages the [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\nIf you use GitLab UI in an older browser which doesn't support the Resize Observer API,\nyou can use a [polyfill](https://github.com/que-etc/resize-observer-polyfill).\n\nThe directive accepts a callback as a value and passes on the received\n[contentRect](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentRect)\nand the target element whenever a resize event gets triggered.\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      width: 0,\n      height: 0,\n    };\n  },\n  methods: {\n    handleResize({ contentRect: { width, height } }) {\n      this.width = width;\n      this.height = height;\n    },\n  },\n};\n</script>\n<template>\n  <div v-gl-resize-observer-directive=\"handleResize\">\n    <p>{{ width }} x {{ height }}</p>\n  </div>\n</template>\n```\n\nThe observer can be toggled on or off by passing a boolean argument to the directive:\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      shouldObserve: true,\n    };\n  },\n  methods: {\n    handleResize() {},\n  },\n};\n</script>\n<template>\n  <div v-gl-resize-observer-directive[shouldObserve]=\"handleResize\"></div>\n</template>\n```\n";
 
 var resize_observer_documentation = {
   followsDesignSystem: false,
-  description,
-  examples
+  description
 };
 
 export default resize_observer_documentation;

package/dist/directives/safe_html/safe_html.documentation.js

@@ -1,4 +1,4 @@
-var description = "# Safe Html\n\nA Vue Directive to sanitize HTML to avoid any XSS vulnerabilities.\n\n<!-- STORY -->\n\n## Usage\n\nThis directive can be used to sanitize HTML code which may contain user input, to prevent cross-site\nscripting (XSS) vulnerabilities.\n\nUnder the hood, it uses [DOMPurify](https://github.com/cure53/DOMPurify) to sanitize the provided HTML.\n\nDOMPurify will strip out dangerous HTML and will keep the safe HTML. You can refer complete list of\n[tags][1] and [attributes][2] allowed by DOMPurify.\n\n[1]: https://github.com/cure53/DOMPurify/blob/main/src/tags.js\n[2]: https://github.com/cure53/DOMPurify/blob/main/src/attrs.js\n\n## Example\n\n```html\n<script>\nimport { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';\n\nexport default {\n  directives: {\n    SafeHtml,\n  },\n  data() {\n    return {\n      rawHtml: \"Hello! <script>alert('XSS')</script>\",\n    };\n  },\n};\n</script>\n\n<template>\n  <div v-safe-html=\"rawHtml\"></div>\n</template>\n```\n\n## Advanced configuration\n\n```js\n// It allows only <b> tags\nconst config = { ALLOWED_TAGS: ['b'] };\n\n// It doesn't allow any html tags\nconst config = { ALLOWED_TAGS: [] };\n```\n\n```html\n<div v-safe-html:[config]=\"rawHtml\"></div>\n```\n\nFor advanced configuration options, please refer to [DOMPurify's documentation](https://github.com/cure53/DOMPurify#can-i-configure-dompurify).\n\n### Notes\n\n1. `target` attribute is not allowed by default - See <https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1427>.\n1. To know more about other tips & caveats - See <https://gitlab.com/groups/gitlab-org/-/epics/4273#caveats>.\n";
+var description = "A Vue Directive to sanitize HTML to avoid any XSS vulnerabilities.\n\n## Usage\n\nThis directive can be used to sanitize HTML code which may contain user input, to prevent cross-site\nscripting (XSS) vulnerabilities.\n\nUnder the hood, it uses [DOMPurify](https://github.com/cure53/DOMPurify) to sanitize the provided HTML.\n\nDOMPurify will strip out dangerous HTML and will keep the safe HTML. You can refer complete list of\n[tags][1] and [attributes][2] allowed by DOMPurify.\n\n[1]: https://github.com/cure53/DOMPurify/blob/main/src/tags.js\n[2]: https://github.com/cure53/DOMPurify/blob/main/src/attrs.js\n\n## Example\n\n```html\n<script>\nimport { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';\n\nexport default {\n  directives: {\n    SafeHtml,\n  },\n  data() {\n    return {\n      rawHtml: \"Hello! <script>alert('XSS')</script>\",\n    };\n  },\n};\n</script>\n\n<template>\n  <div v-safe-html=\"rawHtml\"></div>\n</template>\n```\n\n## Advanced configuration\n\n```js\n// It allows only <b> tags\nconst config = { ALLOWED_TAGS: ['b'] };\n\n// It doesn't allow any html tags\nconst config = { ALLOWED_TAGS: [] };\n```\n\n```html\n<div v-safe-html:[config]=\"rawHtml\"></div>\n```\n\nFor advanced configuration options, please refer to [DOMPurify's documentation](https://github.com/cure53/DOMPurify#can-i-configure-dompurify).\n\n### Notes\n\n1. `target` attribute is not allowed by default - See <https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1427>.\n1. To know more about other tips & caveats - See <https://gitlab.com/groups/gitlab-org/-/epics/4273#caveats>.\n";
 
 var safe_html_documentation = {
   followsDesignSystem: false,

package/dist/directives/safe_link/safe_link.documentation.js

@@ -1,9 +1,8 @@
-var description = "# Safe Link Directive\n\nA Vue directive to make the hyperlinks secure by default.\n\n<!-- STORY -->\n\n## Security measures\n\n### rel\n\nWhen setting target to `_blank`, the rel attribute gets set automatically to `noopener noreferrer`,\nthis is done to avoid the `window.opener` [API exploit]. If you set the `rel` attribute manually,\nthis will overwrite the aforementioned logic.\n\n### href\n\nThis directive enforces \"safe\" URLs. What this means is that, if the provided `href`\ndoesn't point to a safe protocol (one of `http:`, `https:`, `mailto:` or `ftp:`), then it is\nreplaced with `about:blank` to prevent [URL injections].\n\n```html\n<script>\nimport { GlSafeLinkDirective as SafeLink } from '@gitlab/ui';\n\nexport default {\n  data() {\n    return {\n      url: 'javascript:alert(1)',\n    };\n  },\n  directives: { SafeLink },\n};\n</script>\n<template>\n  <a v-safe-link href=\"url\" target=\"_blank\">Click</a>\n  <!-- Renders to: <a href=\"about:blank\" target=\"_blank\">Click</a> -->\n</template>\n```\n\n[API exploit]: https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/\n[URL injections]: https://vuejs.org/v2/guide/security.html#Injecting-URLs\n";
+var description = "A Vue directive to make the hyperlinks secure by default.\n\n## Security measures\n\n### rel\n\nWhen setting target to `_blank`, the rel attribute gets set automatically to `noopener noreferrer`,\nthis is done to avoid the `window.opener` [API exploit]. If you set the `rel` attribute manually,\nthis will overwrite the aforementioned logic.\n\n### href\n\nThis directive enforces \"safe\" URLs. What this means is that, if the provided `href`\ndoesn't point to a safe protocol (one of `http:`, `https:`, `mailto:` or `ftp:`), then it is\nreplaced with `about:blank` to prevent [URL injections].\n\n```html\n<script>\nimport { GlSafeLinkDirective as SafeLink } from '@gitlab/ui';\n\nexport default {\n  data() {\n    return {\n      url: 'javascript:alert(1)',\n    };\n  },\n  directives: { SafeLink },\n};\n</script>\n<template>\n  <a v-safe-link href=\"url\" target=\"_blank\">Click</a>\n  <!-- Renders to: <a href=\"about:blank\" target=\"_blank\">Click</a> -->\n</template>\n```\n\n[API exploit]: https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/\n[URL injections]: https://vuejs.org/v2/guide/security.html#Injecting-URLs\n";
 
 var safe_link_documentation = {
   followsDesignSystem: false,
-  description,
-  examples: false
+  description
 };
 
 export default safe_link_documentation;