@gitlab/ui
Version:
GitLab UI Components
235 lines (213 loc) • 9.05 kB
JavaScript
import GlTooltip 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';
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 ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
var script = {
components: {
GlClearIconButton: GlClearIconButton,
GlIcon: GlIcon,
GlButton: GlButton,
GlFormInput: GlFormInput,
GlDropdown: GlDropdown,
GlDropdownText: GlDropdownText,
GlDropdownItem: GlDropdownItem,
GlDropdownDivider: GlDropdownDivider,
GlFormInputGroup: GlFormInputGroup
},
directives: {
GlTooltip: GlTooltip
},
props: {
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: function validator() {
return true;
}
},
historyItems: {
type: Array,
required: false,
default: null
},
placeholder: {
type: String,
required: false,
default: 'Search'
},
clearable: {
type: Boolean,
required: false,
default: true
},
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 = _objectSpread2({
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.$emit('history-item-selected', item);
setTimeout(function () {
document.activeElement.blur();
});
},
clearInput: function clearInput() {
this.currentValue = '';
this.$emit('clear');
if (this.$refs.input) {
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('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}},[_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"}}),_vm._v(" "),_c('span',{staticClass:"gl-sr-only"},[_vm._v("Toggle history")])],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,"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',{ref:"searchButton",staticClass:"gl-search-box-by-click-search-button",attrs:{"icon":"search","disabled":_vm.disabled,"aria-label":"Search"},on:{"click":function($event){return _vm.search(_vm.currentValue)}}})]},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},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__;