@gitlab/ui 55.0.1 → 55.1.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [55.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v55.0.1...v55.1.0) (2023-02-08)
+
+
+### Features
+
+* **GlFilteredSearchToken:** added title slot to GlFilteredSearchToken ([8e1a6d6](https://gitlab.com/gitlab-org/gitlab-ui/commit/8e1a6d6d67b75356fb334053eb33c4a5d7047cbd))
+
 ## [55.0.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v55.0.0...v55.0.1) (2023-02-07)
 
 

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

@@ -305,6 +305,9 @@ var script = {
         event.stopPropagation();
         this.$emit('destroy');
       }
+    },
+    hasTitleOptionSlot() {
+      return Boolean(this.$scopedSlots['title-option']);
     }
   }
 };
@@ -319,7 +322,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
     'gl-cursor-default': _vm.viewOnly,
   },attrs:{"data-testid":"filtered-search-token"}},[_c('gl-filtered-search-token-segment',{key:"title-segment",attrs:{"value":_vm.config.title,"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_TITLE),"cursor-position":_vm.intendedCursorPosition,"options":_vm.availableTokensWithSelf,"view-only":_vm.viewOnly},on:{"activate":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_TITLE)},"deactivate":function($event){return _vm.$emit('deactivate')},"complete":_vm.replaceToken,"backspace":function($event){return _vm.$emit('destroy')},"submit":function($event){return _vm.$emit('submit')},"previous":function($event){return _vm.$emit('previous')},"next":_vm.activateNextOperatorSegment},scopedSlots:_vm._u([{key:"view",fn:function(ref){
   var inputValue = ref.inputValue;
-return [_c('gl-token',{staticClass:"gl-filtered-search-token-type",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_TITLE),attrs:{"view-only":""}},[_vm._v("\n        "+_vm._s(inputValue)+"\n      ")])]}}])}),_vm._v(" "),_c('gl-filtered-search-token-segment',{key:"operator-segment",attrs:{"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_OPERATOR),"cursor-position":_vm.intendedCursorPosition,"options":_vm.operators,"custom-input-keydown-handler":_vm.handleOperatorKeydown,"view-only":_vm.viewOnly},on:{"activate":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_OPERATOR)},"backspace":_vm.replaceWithTermIfEmpty,"complete":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_DATA)},"deactivate":function($event){return _vm.$emit('deactivate')},"previous":_vm.activatePreviousTitleSegment,"next":_vm.activateNextDataSegment},scopedSlots:_vm._u([{key:"view",fn:function(){return [_c('gl-token',{staticClass:"gl-filtered-search-token-operator",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_OPERATOR),attrs:{"variant":"search-value","view-only":""}},[_vm._v("\n        "+_vm._s(_vm.operatorDescription)+"\n      ")])]},proxy:true},{key:"option",fn:function(ref){
+return [_c('gl-token',{staticClass:"gl-filtered-search-token-type",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_TITLE),attrs:{"view-only":""}},[_vm._v("\n        "+_vm._s(inputValue)+"\n      ")])]}},(_vm.hasTitleOptionSlot())?{key:"option",fn:function(){return [_vm._t("title-option")]},proxy:true}:null],null,true)}),_vm._v(" "),_c('gl-filtered-search-token-segment',{key:"operator-segment",attrs:{"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_OPERATOR),"cursor-position":_vm.intendedCursorPosition,"options":_vm.operators,"custom-input-keydown-handler":_vm.handleOperatorKeydown,"view-only":_vm.viewOnly},on:{"activate":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_OPERATOR)},"backspace":_vm.replaceWithTermIfEmpty,"complete":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_DATA)},"deactivate":function($event){return _vm.$emit('deactivate')},"previous":_vm.activatePreviousTitleSegment,"next":_vm.activateNextDataSegment},scopedSlots:_vm._u([{key:"view",fn:function(){return [_c('gl-token',{staticClass:"gl-filtered-search-token-operator",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_OPERATOR),attrs:{"variant":"search-value","view-only":""}},[_vm._v("\n        "+_vm._s(_vm.operatorDescription)+"\n      ")])]},proxy:true},{key:"option",fn:function(ref){
   var option = ref.option;
 return [_c('div',{staticClass:"gl-display-flex"},[_vm._v("\n        "+_vm._s(_vm.showFriendlyText ? option.description : option.value)+"\n        "),(option.description)?_c('span',{staticClass:"gl-filtered-search-token-operator-description"},[_vm._v("\n          "+_vm._s(_vm.showFriendlyText ? option.value : option.description)+"\n        ")]):_vm._e()])]}}]),model:{value:(_vm.tokenValue.operator),callback:function ($$v) {_vm.$set(_vm.tokenValue, "operator", $$v);},expression:"tokenValue.operator"}}),_vm._v(" "),(_vm.hasDataOrDataSegmentIsCurrentlyActive)?_c('gl-filtered-search-token-segment',{key:"data-segment",attrs:{"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_DATA),"cursor-position":_vm.intendedCursorPosition,"multi-select":_vm.config.multiSelect,"options":_vm.config.options,"view-only":_vm.viewOnly,"option-text-field":"title"},on:{"activate":_vm.activateDataSegment,"backspace":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_OPERATOR)},"complete":_vm.handleComplete,"select":function($event){return _vm.$emit('select', $event)},"submit":function($event){return _vm.$emit('submit')},"deactivate":function($event){return _vm.$emit('deactivate')},"split":function($event){return _vm.$emit('split', $event)},"previous":_vm.activatePreviousOperatorSegment,"next":function($event){return _vm.$emit('next')}},scopedSlots:_vm._u([{key:"suggestions",fn:function(){return [_vm._t("suggestions")]},proxy:true},{key:"view",fn:function(ref){
   var inputValue = ref.inputValue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "55.0.1",
+  "version": "55.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/filtered_search/filtered_search_token.spec.js

@@ -33,9 +33,10 @@ describe('Filtered search token', () => {
     cursorPosition: 'end',
   };
 
-  const createComponent = (props) => {
+  const createComponent = (props, options = {}) => {
     wrapper = shallowMount(GlFilteredSearchToken, {
       propsData: { ...defaultProps, ...props },
+      ...options,
     });
   };
 
@@ -372,4 +373,22 @@ describe('Filtered search token', () => {
       }
     );
   });
+
+  it('renders title options passed via slot', async () => {
+    createComponent(
+      {},
+      {
+        slots: {
+          'title-option': '<div>new title</div>',
+        },
+        stubs: {
+          GlFilteredSearchTokenSegment: {
+            template: `<div><slot name="option" v-bind='{ option: { value: "default title"} }'></slot></div>`,
+          },
+        },
+      }
+    );
+
+    expect(findTitleSegment().text()).toBe('new title');
+  });
 });

package/src/components/base/filtered_search/filtered_search_token.vue

@@ -303,6 +303,10 @@ export default {
         this.$emit('destroy');
       }
     },
+
+    hasTitleOptionSlot() {
+      return Boolean(this.$scopedSlots['title-option']);
+    },
   },
 };
 </script>
@@ -346,6 +350,9 @@ export default {
           {{ inputValue }}
         </gl-token>
       </template>
+      <template v-if="hasTitleOptionSlot()" #option>
+        <slot name="title-option"></slot>
+      </template>
     </gl-filtered-search-token-segment>
 
     <gl-filtered-search-token-segment