@gitlab/ui 37.4.0 → 37.5.0

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# [37.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v37.4.2...v37.5.0) (2022-03-10)
+
+
+### Bug Fixes
+
+* **GlDropdown:** Wrap text in dropdown section header ([1408742](https://gitlab.com/gitlab-org/gitlab-ui/commit/140874226a351da03522b7b45ef4428443162a79))
+
+
+### Features
+
+* **GlAccordionItem:** Add titleVisible property ([f8626aa](https://gitlab.com/gitlab-org/gitlab-ui/commit/f8626aa2a343d4159efddf6aacbdbaad6593eb27))
+
+## [37.4.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v37.4.1...v37.4.2) (2022-03-09)
+
+
+### Bug Fixes
+
+* **GlFilteredSearch:** fix duplicate input attributes ([ea498b9](https://gitlab.com/gitlab-org/gitlab-ui/commit/ea498b9d114c86804d2885b645770ce53d178f4d))
+
+## [37.4.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v37.4.0...v37.4.1) (2022-03-07)
+
+
+### Bug Fixes
+
+* **danger:** fix conventional commits url ([7ec70ef](https://gitlab.com/gitlab-org/gitlab-ui/commit/7ec70efae259272d2bd19654eaab64a33ab98fad))
+
 # [37.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v37.3.0...v37.4.0) (2022-03-07)
 
 

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

@@ -24,6 +24,15 @@ var script = {
       required: true
     },
 
+    /*
+    Used to set the title of accordion link when the content is visible
+    */
+    titleVisible: {
+      type: String,
+      default: null,
+      required: false
+    },
+
     /*
     When set, it will ensure the accordion item is initially visible
     */
@@ -67,6 +76,10 @@ var script = {
 
     icon() {
       return this.isVisible ? 'chevron-down' : 'chevron-right';
+    },
+
+    buttonTitle() {
+      return this.isVisible && this.titleVisible ? this.titleVisible : this.title;
     }
 
   }
@@ -76,7 +89,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-accordion-item"},[_c(_vm.headerComponent,{tag:"component",staticClass:"gl-accordion-item-header"},[_c('gl-button',{directives:[{name:"gl-collapse-toggle",rawName:"v-gl-collapse-toggle",value:(_vm.accordionItemId),expression:"accordionItemId"}],attrs:{"variant":"link","button-text-classes":"gl-display-flex","icon":_vm.icon}},[_vm._v("\n      "+_vm._s(_vm.title)+"\n    ")])],1),_vm._v(" "),_c('b-collapse',{staticClass:"gl-mt-3 gl-font-base",attrs:{"id":_vm.accordionItemId,"visible":_vm.isVisible,"accordion":_vm.accordion,"data-testid":("accordion-item-collapse-" + _vm.accordionItemId)},model:{value:(_vm.isVisible),callback:function ($$v) {_vm.isVisible=$$v;},expression:"isVisible"}},[_vm._t("default")],2)],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-accordion-item"},[_c(_vm.headerComponent,{tag:"component",staticClass:"gl-accordion-item-header"},[_c('gl-button',{directives:[{name:"gl-collapse-toggle",rawName:"v-gl-collapse-toggle",value:(_vm.accordionItemId),expression:"accordionItemId"}],attrs:{"variant":"link","button-text-classes":"gl-display-flex","icon":_vm.icon}},[_vm._v("\n      "+_vm._s(_vm.buttonTitle)+"\n    ")])],1),_vm._v(" "),_c('b-collapse',{staticClass:"gl-mt-3 gl-font-base",attrs:{"id":_vm.accordionItemId,"visible":_vm.isVisible,"accordion":_vm.accordion,"data-testid":("accordion-item-collapse-" + _vm.accordionItemId)},model:{value:(_vm.isVisible),callback:function ($$v) {_vm.isVisible=$$v;},expression:"isVisible"}},[_vm._t("default")],2)],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -1,52 +1,7 @@
-import examples from './examples';
-
-var description = "# Datepicker\n\n<!-- STORY -->\n\n## Usage\n\nDate picker allows users to choose and input a date by manually typing the date into the input field\nor by using a calendar-like dropdown.\n\n### Warning\n\nBe careful when binding a date value using `value` prop. `value` is a watched property and Date\npicker will emit `input` event on _initial load_. Alternatively, use `defaultDate` to set the\ninitial date then receive updated date values through `input` events.\n";
+var description = "Date picker allows users to choose and input a date by manually typing the date into the input field\nor by using a calendar-like dropdown.\n\n### Warning\n\nBe careful when binding a date value using `value` prop. `value` is a watched property and Date\npicker will emit `input` event on _initial load_. Alternatively, use `defaultDate` to set the\ninitial date then receive updated date values through `input` events.\n";
 
 var datepicker_documentation = {
-  description,
-  examples,
-  propsInfo: {
-    target: {
-      additionalInfo: 'Selector of element that triggers the datepicker. Defaults to the calendar icon. Pass `null` to trigger on input focus.'
-    },
-    container: {
-      additionalInfo: 'DOM node to render calendar into. Defaults to the datepicker container. Pass `null` to use Pikaday default.'
-    },
-    disableDayFn: {
-      additionalInfo: 'Accepts a function that accepts a date as argument and returns true if the date is disabled.'
-    },
-    autocomplete: {
-      additionalInfo: 'Defaults to `off` when datepicker opens on focus, otherwise defaults to `null`.'
-    },
-    defaultDate: {
-      additionalInfo: 'Use this prop to set the initial date for the datepicker.'
-    }
-  },
-  events: [{
-    event: 'input',
-    description: 'Emitted when a new date has been selected.',
-    args: [{
-      arg: 'date',
-      description: 'The selected date'
-    }]
-  }, {
-    event: 'close',
-    description: 'Emitted when the datepicker is hidden.'
-  }, {
-    event: 'open',
-    description: 'Emitted when the datepicker becomes visible.'
-  }, {
-    event: 'draw',
-    description: 'Emitted when the datepicker draws a new month.'
-  }, {
-    event: 'clear',
-    description: 'Emitted when the clear button is clicked.'
-  }],
-  slots: [{
-    name: 'default',
-    description: '(optional) Input to display and bind the datepicker to. Defaults to `<gl-form-input />`',
-    scopedProps: `{ formattedDate: string }`
-  }]
+  description
 };
 
 export default datepicker_documentation;

package/dist/components/base/datepicker/datepicker.js

@@ -50,11 +50,18 @@ var script = {
     GlButton
   },
   props: {
+    /**
+     * Selector of element that triggers the datepicker. Defaults to the calendar icon. Pass `null` to trigger on input focus.
+     */
     target: {
       type: String,
       required: false,
       default: ''
     },
+
+    /**
+     * DOM node to render calendar into. Defaults to the datepicker container. Pass `null` to use Pikaday default.
+     */
     container: {
       type: String,
       required: false,
@@ -85,6 +92,10 @@ var script = {
       required: false,
       default: null
     },
+
+    /**
+     * Accepts a function that accepts a date as argument and returns true if the date is disabled.
+     */
     disableDayFn: {
       type: Function,
       required: false,
@@ -105,6 +116,10 @@ var script = {
       required: false,
       default: defaultDateFormat
     },
+
+    /**
+     * Defaults to `off` when datepicker opens on focus, otherwise defaults to `null`.
+     */
     autocomplete: {
       type: String,
       required: false,
@@ -125,6 +140,10 @@ var script = {
       required: false,
       default: false
     },
+
+    /**
+     * Use this prop to set the initial date for the datepicker.
+     */
     defaultDate: {
       type: Date,
       required: false,
@@ -289,23 +308,40 @@ var script = {
 
   methods: {
     selected(date) {
+      /**
+       * Emitted when a new date has been selected.
+       * @property {Date} date The selected date
+       */
       this.$emit('input', date);
     },
 
     closed() {
+      /**
+       * Emitted when the datepicker is hidden.
+       */
       this.$emit('close');
     },
 
     opened() {
+      /**
+       * Emitted when the datepicker becomes visible.
+       */
       this.$emit('open');
     },
 
     cleared() {
       this.textInput = '';
+      /**
+       * Emitted when the clear button is clicked.
+       */
+
       this.$emit('clear');
     },
 
     draw() {
+      /**
+       * Emitted when the datepicker draws a new month.
+       */
       this.$emit('monthChange');
     },
 
@@ -324,7 +360,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-datepicker d-inline-block"},[(_vm.showDefaultField)?_c('div',{staticClass:"position-relative"},[_vm._t("default",[_c('gl-form-input',{staticClass:"gl-datepicker-input",class:_vm.renderClearButton ? 'gl-pr-9!' : 'gl-pr-7!',attrs:{"id":_vm.inputId,"name":_vm.inputName,"data-testid":"gl-datepicker-input","value":_vm.formattedDate,"placeholder":_vm.placeholder,"autocomplete":_vm.inputAutocomplete,"disabled":_vm.disabled,"aria-label":_vm.inputLabel},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onKeydown($event)}},model:{value:(_vm.textInput),callback:function ($$v) {_vm.textInput=$$v;},expression:"textInput"}})],{"formattedDate":_vm.formattedDate}),_vm._v(" "),_c('div',{staticClass:"gl-datepicker-actions"},[(_vm.renderClearButton)?_c('gl-button',{staticClass:"gl-pointer-events-auto",attrs:{"data-testid":"clear-button","aria-label":"Clear date","category":"tertiary","size":"small","icon":"clear"},on:{"click":_vm.cleared}}):_vm._e(),_vm._v(" "),(_vm.triggerOnFocus || _vm.disabled)?_c('span',{staticClass:"gl-px-2",class:_vm.disabled ? 'gl-text-gray-400' : 'gl-text-gray-500',attrs:{"data-testid":"datepicker-calendar-icon"}},[_c('gl-icon',{staticClass:"gl-display-block",attrs:{"name":"calendar","size":16}})],1):_c('gl-button',{ref:"calendarTriggerBtn",staticClass:"gl-pointer-events-auto",attrs:{"aria-label":"Open datepicker","category":"tertiary","size":"small","icon":"calendar"}})],1)],2):_vm._t("default",null,{"formattedDate":_vm.formattedDate})],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-datepicker d-inline-block"},[(_vm.showDefaultField)?_c('div',{staticClass:"gl-relative"},[_vm._t("default",[_c('gl-form-input',{staticClass:"gl-datepicker-input",class:_vm.renderClearButton ? 'gl-pr-9!' : 'gl-pr-7!',attrs:{"id":_vm.inputId,"name":_vm.inputName,"data-testid":"gl-datepicker-input","value":_vm.formattedDate,"placeholder":_vm.placeholder,"autocomplete":_vm.inputAutocomplete,"disabled":_vm.disabled,"aria-label":_vm.inputLabel},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onKeydown($event)}},model:{value:(_vm.textInput),callback:function ($$v) {_vm.textInput=$$v;},expression:"textInput"}})],{"formattedDate":_vm.formattedDate}),_vm._v(" "),_c('div',{staticClass:"gl-datepicker-actions"},[(_vm.renderClearButton)?_c('gl-button',{staticClass:"gl-pointer-events-auto",attrs:{"data-testid":"clear-button","aria-label":"Clear date","category":"tertiary","size":"small","icon":"clear"},on:{"click":_vm.cleared}}):_vm._e(),_vm._v(" "),(_vm.triggerOnFocus || _vm.disabled)?_c('span',{staticClass:"gl-px-2",class:_vm.disabled ? 'gl-text-gray-400' : 'gl-text-gray-500',attrs:{"data-testid":"datepicker-calendar-icon"}},[_c('gl-icon',{staticClass:"gl-display-block",attrs:{"name":"calendar","size":16}})],1):_c('gl-button',{ref:"calendarTriggerBtn",staticClass:"gl-pointer-events-auto",attrs:{"aria-label":"Open datepicker","category":"tertiary","size":"small","icon":"calendar"}})],1)],2):_vm._t("default",null,{"formattedDate":_vm.formattedDate})],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/filtered_search/filtered_search_term.js

@@ -39,6 +39,11 @@ var script = {
       type: Boolean,
       required: false,
       default: false
+    },
+    currentValue: {
+      type: Array,
+      required: false,
+      default: () => []
     }
   },
   computed: {
@@ -65,7 +70,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-h-auto gl-filtered-search-term"},[_c('gl-filtered-search-token-segment',{staticClass:"gl-filtered-search-term-token",class:{ 'gl-w-full': _vm.placeholder },attrs:{"active":_vm.active,"search-input-attributes":_vm.searchInputAttributes,"is-last-token":_vm.isLastToken},on:{"activate":function($event){return _vm.$emit('activate')},"deactivate":function($event){return _vm.$emit('deactivate')},"complete":function($event){return _vm.$emit('replace', { type: $event })},"backspace":function($event){return _vm.$emit('destroy')},"submit":function($event){return _vm.$emit('submit')},"split":function($event){return _vm.$emit('split', $event)}},scopedSlots:_vm._u([{key:"suggestions",fn:function(){return _vm._l((_vm.suggestedTokens),function(item,idx){return _c('gl-filtered-search-suggestion',{key:idx,attrs:{"value":item.type,"icon-name":item.icon}},[_vm._v("\n        "+_vm._s(item.title)+"\n      ")])})},proxy:true},{key:"view",fn:function(){return [(_vm.placeholder)?_c('input',_vm._b({staticClass:"gl-filtered-search-term-input",attrs:{"placeholder":_vm.placeholder,"aria-label":_vm.placeholder}},'input',_vm.searchInputAttributes,false)):[_vm._v(_vm._s(_vm.value.data))]]},proxy:true}]),model:{value:(_vm.internalValue),callback:function ($$v) {_vm.internalValue=$$v;},expression:"internalValue"}})],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-h-auto gl-filtered-search-term"},[_c('gl-filtered-search-token-segment',{staticClass:"gl-filtered-search-term-token",class:{ 'gl-w-full': _vm.placeholder },attrs:{"active":_vm.active,"search-input-attributes":_vm.searchInputAttributes,"is-last-token":_vm.isLastToken,"current-value":_vm.currentValue},on:{"activate":function($event){return _vm.$emit('activate')},"deactivate":function($event){return _vm.$emit('deactivate')},"complete":function($event){return _vm.$emit('replace', { type: $event })},"backspace":function($event){return _vm.$emit('destroy')},"submit":function($event){return _vm.$emit('submit')},"split":function($event){return _vm.$emit('split', $event)}},scopedSlots:_vm._u([{key:"suggestions",fn:function(){return _vm._l((_vm.suggestedTokens),function(item,idx){return _c('gl-filtered-search-suggestion',{key:idx,attrs:{"value":item.type,"icon-name":item.icon}},[_vm._v("\n        "+_vm._s(item.title)+"\n      ")])})},proxy:true},{key:"view",fn:function(){return [(_vm.placeholder)?_c('input',_vm._b({staticClass:"gl-filtered-search-term-input",attrs:{"placeholder":_vm.placeholder,"aria-label":_vm.placeholder}},'input',_vm.searchInputAttributes,false)):[_vm._v(_vm._s(_vm.value.data))]]},proxy:true}]),model:{value:(_vm.internalValue),callback:function ($$v) {_vm.internalValue=$$v;},expression:"internalValue"}})],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/filtered_search/filtered_search_token_segment.js

@@ -58,6 +58,11 @@ var script = {
       type: Boolean,
       required: false,
       default: false
+    },
+    currentValue: {
+      type: Array,
+      required: false,
+      default: () => []
     }
   },
 
@@ -113,6 +118,10 @@ var script = {
 
       const defaultSuggestion = this.options.find(op => op.default);
       return (_ref = defaultSuggestion !== null && defaultSuggestion !== void 0 ? defaultSuggestion : this.options[0]) === null || _ref === void 0 ? void 0 : _ref.value;
+    },
+
+    containerAttributes() {
+      return this.isLastToken && !this.active && this.currentValue.length > 1 && this.searchInputAttributes;
     }
 
   },
@@ -284,7 +293,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',_vm._b({staticClass:"gl-filtered-search-token-segment",class:{ 'gl-filtered-search-token-segment-active': _vm.active },attrs:{"data-testid":"filtered-search-token-segment"},on:{"mousedown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"left",37,$event.key,["Left","ArrowLeft"])){ return null; }if('button' in $event && $event.button !== 0){ return null; }return _vm.emitIfInactive($event)}}},'div',_vm.isLastToken && !_vm.active && _vm.searchInputAttributes,false),[(_vm.active)?[(((_vm.searchInputAttributes).type)==='checkbox')?_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"aria-label":_vm.label,"type":"checkbox"},domProps:{"checked":Array.isArray(_vm.inputValue)?_vm._i(_vm.inputValue,null)>-1:(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"change":function($event){var $$a=_vm.inputValue,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.inputValue=$$a.concat([$$v]));}else {$$i>-1&&(_vm.inputValue=$$a.slice(0,$$i).concat($$a.slice($$i+1)));}}else {_vm.inputValue=$$c;}}}},'input',_vm.searchInputAttributes,false)):(((_vm.searchInputAttributes).type)==='radio')?_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"aria-label":_vm.label,"type":"radio"},domProps:{"checked":_vm._q(_vm.inputValue,null)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"change":function($event){_vm.inputValue=null;}}},'input',_vm.searchInputAttributes,false)):_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"aria-label":_vm.label,"type":(_vm.searchInputAttributes).type},domProps:{"value":(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"input":function($event){if($event.target.composing){ return; }_vm.inputValue=$event.target.value;}}},'input',_vm.searchInputAttributes,false)),_vm._v(" "),_c('portal',{key:("operator-" + _vm._uid),attrs:{"to":_vm.portalName}},[(_vm.hasOptionsOrSuggestions)?_c('gl-filtered-search-suggestion-list',{key:("operator-" + _vm._uid),ref:"suggestions",attrs:{"initial-value":_vm.defaultSuggestedValue},on:{"suggestion":_vm.applySuggestion}},[(_vm.options)?_vm._l((_vm.options),function(option,idx){return _c('gl-filtered-search-suggestion',{key:((option.value) + "-" + idx),attrs:{"value":option.value,"icon-name":option.icon}},[_vm._t("option",[_vm._v("\n              "+_vm._s(option[_vm.optionTextField])+"\n            ")],null,{ option: option })],2)}):_vm._t("suggestions")],2):_vm._e()],1)]:_vm._t("view",[_vm._v(_vm._s(_vm.inputValue))],null,{ inputValue: _vm.inputValue })],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._b({staticClass:"gl-filtered-search-token-segment",class:{ 'gl-filtered-search-token-segment-active': _vm.active },attrs:{"data-testid":"filtered-search-token-segment"},on:{"mousedown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"left",37,$event.key,["Left","ArrowLeft"])){ return null; }if('button' in $event && $event.button !== 0){ return null; }return _vm.emitIfInactive($event)}}},'div',_vm.containerAttributes,false),[(_vm.active)?[(((_vm.searchInputAttributes).type)==='checkbox')?_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"aria-label":_vm.label,"type":"checkbox"},domProps:{"checked":Array.isArray(_vm.inputValue)?_vm._i(_vm.inputValue,null)>-1:(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"change":function($event){var $$a=_vm.inputValue,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.inputValue=$$a.concat([$$v]));}else {$$i>-1&&(_vm.inputValue=$$a.slice(0,$$i).concat($$a.slice($$i+1)));}}else {_vm.inputValue=$$c;}}}},'input',_vm.searchInputAttributes,false)):(((_vm.searchInputAttributes).type)==='radio')?_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"aria-label":_vm.label,"type":"radio"},domProps:{"checked":_vm._q(_vm.inputValue,null)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"change":function($event){_vm.inputValue=null;}}},'input',_vm.searchInputAttributes,false)):_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"aria-label":_vm.label,"type":(_vm.searchInputAttributes).type},domProps:{"value":(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"input":function($event){if($event.target.composing){ return; }_vm.inputValue=$event.target.value;}}},'input',_vm.searchInputAttributes,false)),_vm._v(" "),_c('portal',{key:("operator-" + _vm._uid),attrs:{"to":_vm.portalName}},[(_vm.hasOptionsOrSuggestions)?_c('gl-filtered-search-suggestion-list',{key:("operator-" + _vm._uid),ref:"suggestions",attrs:{"initial-value":_vm.defaultSuggestedValue},on:{"suggestion":_vm.applySuggestion}},[(_vm.options)?_vm._l((_vm.options),function(option,idx){return _c('gl-filtered-search-suggestion',{key:((option.value) + "-" + idx),attrs:{"value":option.value,"icon-name":option.icon}},[_vm._t("option",[_vm._v("\n              "+_vm._s(option[_vm.optionTextField])+"\n            ")],null,{ option: option })],2)}):_vm._t("suggestions")],2):_vm._e()],1)]:_vm._t("view",[_vm._v(_vm._s(_vm.inputValue))],null,{ inputValue: _vm.inputValue })],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */