@gitlab/ui 72.12.0 → 72.12.1

package/dist/components/base/popover/popover.js

@@ -0,0 +1,110 @@
+import { BPopover } from 'bootstrap-vue/esm/index.js';
+import tooltipMixin from '../../mixins/tooltip_mixin';
+import CloseButton from '../../shared_components/close_button/close_button';
+import { popoverPlacements } from '../../../utils/constants';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+//
+const popoverRefName = 'bPopover';
+var script = {
+  name: 'GlPopover',
+  components: {
+    BPopover,
+    CloseButton
+  },
+  mixins: [tooltipMixin(popoverRefName)],
+  inheritAttrs: false,
+  props: {
+    cssClasses: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    /**
+     * Space-separated triggers for the popover.
+     *
+     * @values click, hover, focus, manual
+     */
+    triggers: {
+      type: String,
+      required: false,
+      default: 'hover focus'
+    },
+    title: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    showCloseButton: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    placement: {
+      type: String,
+      required: false,
+      default: popoverPlacements.top
+    },
+    boundaryPadding: {
+      type: [Number, String],
+      required: false,
+      default: 5
+    }
+  },
+  computed: {
+    customClass() {
+      return ['gl-popover', ...this.cssClasses].join(' ');
+    },
+    shouldShowTitle() {
+      return this.$scopedSlots.title || this.title || this.showCloseButton;
+    }
+  },
+  methods: {
+    close(e) {
+      this.$refs[popoverRefName].doClose();
+      /**
+       * Emitted when the close button is clicked (requires showCloseButton to be `true`).
+       */
+      this.$emit('close-button-clicked', e);
+    }
+  },
+  popoverRefName
+};
+
+/* 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-popover',_vm._g(_vm._b({ref:_vm.$options.popoverRefName,attrs:{"custom-class":_vm.customClass,"triggers":_vm.triggers,"title":_vm.title,"placement":_vm.placement,"boundary-padding":_vm.boundaryPadding},scopedSlots:_vm._u([(_vm.shouldShowTitle)?{key:"title",fn:function(){return [_vm._t("title",function(){return [_vm._v("\n      "+_vm._s(_vm.title)+"\n    ")]}),_vm._v(" "),(_vm.showCloseButton)?_c('close-button',{staticClass:"gl-float-right gl-mt-n2 gl-mr-n3",attrs:{"data-testid":"close-button"},on:{"click":_vm.close}}):_vm._e()]},proxy:true}:null],null,true)},'b-popover',_vm.$attrs,false),_vm.$listeners),[_vm._v(" "),_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__;

package/dist/components/base/progress_bar/progress_bar.js

@@ -0,0 +1,48 @@
+import { BProgress } from 'bootstrap-vue/esm/index.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlProgressBar',
+  components: {
+    BProgress
+  },
+  inheritAttrs: false
+};
+
+/* 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-progress',_vm._b({},'b-progress',_vm.$attrs,false))};
+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/search_box_by_click/search_box_by_click.js

@@ -0,0 +1,235 @@
+import { GlTooltipDirective } from '../../../directives/tooltip';
+import GlClearIconButton from '../../shared_components/clear_icon_button/clear_icon_button';
+import GlButton from '../button/button';
+import GlDropdown from '../dropdown/dropdown';
+import GlDropdownDivider from '../dropdown/dropdown_divider';
+import GlDropdownItem from '../dropdown/dropdown_item';
+import GlDropdownText from '../dropdown/dropdown_text';
+import GlFormInput from '../form/form_input/form_input';
+import GlFormInputGroup from '../form/form_input_group/form_input_group';
+import GlIcon from '../icon/icon';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlSearchboxByClick',
+  components: {
+    GlClearIconButton,
+    GlIcon,
+    GlButton,
+    GlFormInput,
+    GlDropdown,
+    GlDropdownText,
+    GlDropdownItem,
+    GlDropdownDivider,
+    GlFormInputGroup
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective
+  },
+  props: {
+    /**
+     * If provided, used as value of search input
+     */
+    value: {
+      required: false,
+      default: '',
+      // SearchBoxByClick could serve as a container for complex fields (see GlFilteredSearch)
+      // 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,
+      default: 'Search'
+    },
+    clearable: {
+      type: Boolean,
+      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,
+      default: 'Clear recent searches'
+    },
+    noRecentSearchesText: {
+      type: String,
+      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,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      currentValue: null,
+      isFocused: false
+    };
+  },
+  computed: {
+    inputAttributes() {
+      const attributes = {
+        type: 'search',
+        placeholder: this.placeholder,
+        ...this.$attrs
+      };
+      if (!attributes['aria-label']) {
+        attributes['aria-label'] = attributes.placeholder;
+      }
+      return attributes;
+    },
+    hasValue() {
+      return Boolean(this.currentValue);
+    }
+  },
+  watch: {
+    value: {
+      handler(newValue) {
+        this.currentValue = newValue;
+      },
+      immediate: true
+    },
+    currentValue(newValue) {
+      if (newValue === this.value) return;
+      this.$emit('input', newValue);
+    }
+  },
+  methods: {
+    closeHistoryDropdown() {
+      this.$refs.historyDropdown.hide();
+    },
+    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();
+      });
+    },
+    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');
+    }
+  }
+};
+
+/* 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",function(){return [_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",function(){return [_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;}},nativeOn:{"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 */
+  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/search_box_by_type/search_box_by_type.js

@@ -0,0 +1,167 @@
+import GlClearIconButton from '../../shared_components/clear_icon_button/clear_icon_button';
+import GlFormInput from '../form/form_input/form_input';
+import GlIcon from '../icon/icon';
+import GlLoadingIcon from '../loading_icon/loading_icon';
+import { translate } from '../../../utils/i18n';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlSearchboxByType',
+  components: {
+    GlClearIconButton,
+    GlIcon,
+    GlFormInput,
+    GlLoadingIcon
+  },
+  inheritAttrs: false,
+  model: {
+    prop: 'value',
+    event: 'input'
+  },
+  props: {
+    /**
+     * If provided, used as value of search input
+     */
+    value: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    borderless: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    clearButtonTitle: {
+      type: String,
+      required: false,
+      default: () => translate('GlSearchBoxByType.clearButtonTitle', '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,
+      validator: value => value === false || typeof value === 'string' || value instanceof HTMLElement
+    }
+  },
+  computed: {
+    inputAttributes() {
+      const attributes = {
+        type: 'search',
+        placeholder: translate('GlSearchBoxByType.input.placeholder', 'Search'),
+        ...this.$attrs
+      };
+      if (!attributes['aria-label']) {
+        attributes['aria-label'] = attributes.placeholder;
+      }
+      return attributes;
+    },
+    hasValue() {
+      return Boolean(this.value.length);
+    },
+    inputListeners() {
+      return {
+        ...this.$listeners,
+        input: this.onInput,
+        focusin: this.onFocusin,
+        focusout: this.onFocusout
+      };
+    },
+    showClearButton() {
+      return this.hasValue && !this.disabled;
+    }
+  },
+  methods: {
+    isInputOrClearButton(element) {
+      var _this$$refs$input, _this$$refs$clearButt;
+      return element === ((_this$$refs$input = this.$refs.input) === null || _this$$refs$input === void 0 ? void 0 : _this$$refs$input.$el) || element === ((_this$$refs$clearButt = this.$refs.clearButton) === null || _this$$refs$clearButt === void 0 ? void 0 : _this$$refs$clearButt.$el);
+    },
+    clearInput() {
+      this.onInput('');
+      this.focusInput();
+    },
+    focusInput() {
+      this.$refs.input.$el.focus();
+    },
+    onInput(value) {
+      this.$emit('input', value);
+    },
+    onFocusout(event) {
+      const {
+        relatedTarget
+      } = event;
+      if (this.isInputOrClearButton(relatedTarget)) {
+        return;
+      }
+      this.$emit('focusout', event);
+    },
+    onFocusin(event) {
+      const {
+        relatedTarget
+      } = event;
+      if (this.isInputOrClearButton(relatedTarget)) {
+        return;
+      }
+      this.$emit('focusin', event);
+    }
+  }
+};
+
+/* 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-search-box-by-type"},[_c('gl-icon',{staticClass:"gl-search-box-by-type-search-icon",attrs:{"name":"search"}}),_vm._v(" "),_c('gl-form-input',_vm._g(_vm._b({ref:"input",class:{
+      'gl-search-box-by-type-input': !_vm.borderless,
+      'gl-search-box-by-type-input-borderless': _vm.borderless,
+    },attrs:{"value":_vm.value,"disabled":_vm.disabled}},'gl-form-input',_vm.inputAttributes,false),_vm.inputListeners)),_vm._v(" "),(_vm.isLoading || _vm.showClearButton)?_c('div',{staticClass:"gl-search-box-by-type-right-icons"},[(_vm.isLoading)?_c('gl-loading-icon',{staticClass:"gl-search-box-by-type-loading-icon"}):_vm._e(),_vm._v(" "),(_vm.showClearButton)?_c('gl-clear-icon-button',{ref:"clearButton",staticClass:"gl-search-box-by-type-clear gl-clear-icon-button",attrs:{"title":_vm.clearButtonTitle,"tooltip-container":_vm.tooltipContainer},on:{"click":function($event){$event.stopPropagation();return _vm.clearInput.apply(null, arguments)},"focusin":_vm.onFocusin,"focusout":_vm.onFocusout}}):_vm._e()],1):_vm._e()],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __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/segmented_control/segmented_control.js

@@ -0,0 +1,109 @@
+import { BFormRadioGroup } from 'bootstrap-vue/esm/index.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const genericErrorMessage = 'Segmented button should always have valid option selected';
+var script = {
+  name: 'GlSegmentedControl',
+  components: {
+    BFormRadioGroup
+  },
+  inheritAttrs: false,
+  model: {
+    prop: 'checked',
+    event: 'input'
+  },
+  props: {
+    checked: {
+      required: true,
+      validator: () => true
+    },
+    options: {
+      type: Array,
+      required: true
+    }
+  },
+  computed: {
+    enabledOptions() {
+      return this.options.filter(option => !option.disabled);
+    }
+  },
+  watch: {
+    checked: {
+      handler(newValue, oldValue) {
+        this.checkValue(newValue, oldValue);
+      }
+    },
+    options: {
+      handler() {
+        this.checkValue(this.checked);
+      }
+    }
+  },
+  created() {
+    this.checkValue(this.checked);
+  },
+  methods: {
+    checkValue(newValue) {
+      let oldValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      if (!this.isValidValue(newValue)) {
+        // eslint-disable-next-line no-console
+        console.warn(genericErrorMessage);
+        if (this.enabledOptions.length) {
+          const suggestion = oldValue && this.isValidValue(oldValue) ? oldValue : this.enabledOptions[0].value;
+          /**
+           * Emitted when the selection changes
+           * @event input
+           * @argument checked The selected option
+           */
+          this.$emit('input', suggestion);
+        }
+      }
+    },
+    isValidValue(val) {
+      return this.enabledOptions.some(_ref => {
+        let {
+          value
+        } = _ref;
+        return value === val;
+      });
+    }
+  }
+};
+
+/* 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-radio-group',_vm._g(_vm._b({staticClass:"gl-segmented-control",attrs:{"buttons":"","button-variant":"gl-segmented-button gl-button"}},'b-form-radio-group',Object.assign({}, _vm.$attrs, {options: _vm.options, checked: _vm.checked}),false),_vm.$listeners))};
+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__;