@gitlab/ui/dist/components/base/search_box_by_click/search_box_by_click.js

GitLab UI Components

import { BInputGroup, BInputGroupPrepend, BInputGroupAppend } from 'bootstrap-vue/esm/index.js';
import GlIcon from '../icon/icon';
import GlButton from '../new_button/new_button';
import GlDropdown from '../new_dropdown/new_dropdown';
import GlDropdownItem from '../new_dropdown/new_dropdown_item';
import GlDropdownDivider from '../new_dropdown/new_dropdown_divider';
import GlDropdownText from '../new_dropdown/new_dropdown_text';
import GlFormInput from '../form/form_input/form_input';
import GlTooltip from '../../../directives/tooltip';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

function _objectSpread(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};
    var ownKeys = Object.keys(source);

    if (typeof Object.getOwnPropertySymbols === 'function') {
      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
      }));
    }

    ownKeys.forEach(function (key) {
      _defineProperty(target, key, source[key]);
    });
  }

  return target;
}

var script = {
  components: {
    GlIcon: GlIcon,
    GlButton: GlButton,
    GlFormInput: GlFormInput,
    GlDropdown: GlDropdown,
    GlDropdownText: GlDropdownText,
    GlDropdownItem: GlDropdownItem,
    GlDropdownDivider: GlDropdownDivider,
    BInputGroup: BInputGroup,
    BInputGroupPrepend: BInputGroupPrepend,
    BInputGroupAppend: BInputGroupAppend
  },
  directives: {
    GlTooltip: GlTooltip
  },
  props: {
    value: {
      type: String,
      required: false,
      default: ''
    },
    historyItems: {
      type: Array,
      required: false,
      default: null
    },
    placeholder: {
      type: String,
      required: false,
      default: 'Search'
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    },
    recentSearchesHeader: {
      type: String,
      required: false,
      default: 'Recent searches'
    },
    clearButtonTitle: {
      type: String,
      required: false,
      default: 'Clear'
    },
    closeButtonTitle: {
      type: String,
      required: false,
      default: 'Close'
    },
    clearRecentSearchesText: {
      type: String,
      required: false,
      default: 'Clear recent searches'
    },
    noRecentSearchesText: {
      type: String,
      required: false,
      default: "You don't have any recent searches"
    },
    tooltipContainer: {
      required: false,
      default: false,
      validator: function validator(value) {
        return value === false || typeof value === 'string' || value instanceof HTMLElement;
      }
    }
  },
  data: function data() {
    return {
      currentValue: null,
      isFocused: false
    };
  },
  computed: {
    inputAttributes: function inputAttributes() {
      var attributes = _objectSpread({
        placeholder: this.placeholder
      }, this.$attrs);

      if (!attributes['aria-label']) {
        attributes['aria-label'] = attributes.placeholder;
      }

      return attributes;
    },
    hasValue: function hasValue() {
      return Boolean(this.currentValue);
    }
  },
  watch: {
    value: {
      handler: function handler(newValue) {
        this.currentValue = newValue;
      },
      immediate: true
    },
    currentValue: function currentValue(newValue) {
      this.$emit('input', newValue);
    }
  },
  methods: {
    closeHistoryDropdown: function closeHistoryDropdown() {
      this.$refs.historyDropdown.hide();
    },
    search: function search(value) {
      this.$emit('submit', value);
    },
    selectHistoryItem: function selectHistoryItem(item) {
      this.currentValue = item;
      this.search(item);
      setTimeout(function () {
        document.activeElement.blur();
      });
    },
    clearInput: function clearInput() {
      this.currentValue = null;
      this.$refs.input.$el.focus();
    }
  }
};

/* 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-input-group',{staticClass:"gl-search-box-by-click"},[(_vm.historyItems)?_c('b-input-group-prepend',{staticClass:"gl-search-box-by-click-input-group-control"},[(_vm.historyItems)?_c('gl-dropdown',{ref:"historyDropdown",staticClass:"gl-search-box-by-click-history",attrs:{"menu-class":"gl-search-box-by-click-menu","disabled":_vm.disabled}},[_c('template',{slot:"button-content"},[_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"}})],1),_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,"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):_vm._e()],1):_vm._e(),_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.hasValue && !_vm.disabled)?_c('button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.hover",value:({ container: _vm.tooltipContainer }),expression:"{ container: tooltipContainer }",modifiers:{"hover":true}}],staticClass:"gl-search-box-by-click-icon-button gl-search-box-by-click-clear-button",attrs:{"title":_vm.clearButtonTitle,"name":"clear"},on:{"click":_vm.clearInput}},[_c('gl-icon',{attrs:{"name":"clear"}})],1):_vm._e()]),_vm._v(" "),_c('b-input-group-append',{staticClass:"gl-search-box-by-click-input-group-control"},[_c('gl-button',{ref:"searchButton",staticClass:"gl-search-box-by-click-search-button",attrs:{"icon":"search","disabled":_vm.disabled},on:{"click":function($event){return _vm.search(_vm.currentValue)}}})],1)],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__;