@gitlab/ui 57.0.0 → 58.1.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [58.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v58.0.0...v58.1.0) (2023-03-16)
+
+
+### Features
+
+* **GlFilteredSearch:** added title slot to GlFilteredSearch ([88d82d7](https://gitlab.com/gitlab-org/gitlab-ui/commit/88d82d77c5e93a180b97b1cd702af80452863ff2))
+
+# [58.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v57.0.0...v58.0.0) (2023-03-15)
+
+
+### Features
+
+* **GlCollapsibleListbox:** Remove deprecated GlListbox export ([baaade2](https://gitlab.com/gitlab-org/gitlab-ui/commit/baaade289126b05e47b015644448d7cbb0e98a21))
+
+
+### BREAKING CHANGES
+
+* **GlCollapsibleListbox:** The deprecated GlListbox alias for GlCollapsibleListbox
+has been removed.
+
 # [57.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v56.4.1...v57.0.0) (2023-03-15)
 
 

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

@@ -320,6 +320,9 @@ var script = {
        * @property {array} tokens
        */
       this.$emit('submit', normalizeTokens(cloneDeep(this.tokens)));
+    },
+    hasTitleSlot() {
+      return Boolean(this.$scopedSlots.title);
     }
   }
 };
@@ -328,7 +331,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('gl-search-box-by-click',_vm._b({attrs:{"value":_vm.tokens,"history-items":_vm.historyItems,"clearable":_vm.hasValue,"search-button-attributes":_vm.searchButtonAttributes,"disabled":_vm.viewOnly,"data-testid":"filtered-search-input"},on:{"submit":_vm.submit,"input":_vm.applyNewValue,"history-item-selected":function($event){return _vm.$emit('history-item-selected', $event)},"clear":function($event){return _vm.$emit('clear')},"clear-history":function($event){return _vm.$emit('clear-history')}},scopedSlots:_vm._u([{key:"history-item",fn:function(slotScope){return [_vm._t("history-item",null,null,slotScope)]}},{key:"input",fn:function(){return [_c('div',{staticClass:"gl-filtered-search-scrollable",class:{ 'gl-bg-gray-10! gl-inset-border-1-gray-100!': _vm.viewOnly }},_vm._l((_vm.tokens),function(token,idx){return _c(_vm.getTokenComponent(token.type),{key:token.id,ref:"tokens",refInFor:true,tag:"component",staticClass:"gl-filtered-search-item",class:{ 'gl-filtered-search-last-item': _vm.isLastToken(idx) && !_vm.viewOnly },attrs:{"config":_vm.getTokenEntry(token.type),"active":_vm.activeTokenIdx === idx,"cursor-position":_vm.intendedCursorPosition,"available-tokens":_vm.currentAvailableTokens,"current-value":_vm.tokens,"index":idx,"placeholder":_vm.termPlaceholder,"show-friendly-text":_vm.showFriendlyText,"search-input-attributes":_vm.searchInputAttributes,"view-only":_vm.viewOnly,"is-last-token":_vm.isLastToken(idx)},on:{"activate":function($event){return _vm.activate(idx)},"deactivate":function($event){return _vm.deactivate(token)},"destroy":function($event){return _vm.destroyToken(idx, $event)},"replace":function($event){return _vm.replaceToken(idx, $event)},"complete":_vm.completeToken,"submit":_vm.submit,"split":function($event){return _vm.createTokens(idx, $event)},"previous":_vm.activatePreviousToken,"next":_vm.activateNextToken},model:{value:(token.value),callback:function ($$v) {_vm.$set(token, "value", $$v);},expression:"token.value"}})}),1),_vm._v(" "),_c('portal-target',{key:_vm.activeTokenIdx,ref:"menu",style:(_vm.suggestionsStyle),attrs:{"name":_vm.portalName,"slim":""}})]},proxy:true}],null,true)},'gl-search-box-by-click',_vm.$attrs,false))};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-search-box-by-click',_vm._b({attrs:{"value":_vm.tokens,"history-items":_vm.historyItems,"clearable":_vm.hasValue,"search-button-attributes":_vm.searchButtonAttributes,"disabled":_vm.viewOnly,"data-testid":"filtered-search-input"},on:{"submit":_vm.submit,"input":_vm.applyNewValue,"history-item-selected":function($event){return _vm.$emit('history-item-selected', $event)},"clear":function($event){return _vm.$emit('clear')},"clear-history":function($event){return _vm.$emit('clear-history')}},scopedSlots:_vm._u([{key:"history-item",fn:function(slotScope){return [_vm._t("history-item",null,null,slotScope)]}},{key:"input",fn:function(){return [_c('div',{staticClass:"gl-filtered-search-scrollable",class:{ 'gl-bg-gray-10! gl-inset-border-1-gray-100!': _vm.viewOnly }},_vm._l((_vm.tokens),function(token,idx){return _c(_vm.getTokenComponent(token.type),{key:token.id,ref:"tokens",refInFor:true,tag:"component",staticClass:"gl-filtered-search-item",class:{ 'gl-filtered-search-last-item': _vm.isLastToken(idx) && !_vm.viewOnly },attrs:{"config":_vm.getTokenEntry(token.type),"active":_vm.activeTokenIdx === idx,"cursor-position":_vm.intendedCursorPosition,"available-tokens":_vm.currentAvailableTokens,"current-value":_vm.tokens,"index":idx,"placeholder":_vm.termPlaceholder,"show-friendly-text":_vm.showFriendlyText,"search-input-attributes":_vm.searchInputAttributes,"view-only":_vm.viewOnly,"is-last-token":_vm.isLastToken(idx)},on:{"activate":function($event){return _vm.activate(idx)},"deactivate":function($event){return _vm.deactivate(token)},"destroy":function($event){return _vm.destroyToken(idx, $event)},"replace":function($event){return _vm.replaceToken(idx, $event)},"complete":_vm.completeToken,"submit":_vm.submit,"split":function($event){return _vm.createTokens(idx, $event)},"previous":_vm.activatePreviousToken,"next":_vm.activateNextToken},scopedSlots:_vm._u([(_vm.hasTitleSlot() && _vm.getTokenComponent(token.type).name === 'GlFilteredSearchTerm')?{key:"title",fn:function(title){return [_vm._t("title",null,null,title)]}}:null],null,true),model:{value:(token.value),callback:function ($$v) {_vm.$set(token, "value", $$v);},expression:"token.value"}})}),1),_vm._v(" "),_c('portal-target',{key:_vm.activeTokenIdx,ref:"menu",style:(_vm.suggestionsStyle),attrs:{"name":_vm.portalName,"slim":""}})]},proxy:true}],null,true)},'gl-search-box-by-click',_vm.$attrs,false))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -118,7 +118,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",attrs:{"data-testid":"filtered-search-term"}},[_c('gl-filtered-search-token-segment',{ref:"segment",staticClass:"gl-filtered-search-term-token",class:{ 'gl-w-full': _vm.placeholder },attrs:{"active":_vm.active,"cursor-position":_vm.cursorPosition,"search-input-attributes":_vm.searchInputAttributes,"is-last-token":_vm.isLastToken,"current-value":_vm.currentValue,"view-only":_vm.viewOnly},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":_vm.onBackspace,"submit":function($event){return _vm.$emit('submit')},"split":function($event){return _vm.$emit('split', $event)},"previous":function($event){return _vm.$emit('previous')},"next":function($event){return _vm.$emit('next')}},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",class:{ 'gl-bg-gray-10': _vm.viewOnly },attrs:{"placeholder":_vm.placeholder,"aria-label":_vm.placeholder,"readonly":_vm.viewOnly,"data-testid":"filtered-search-term-input"}},'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",attrs:{"data-testid":"filtered-search-term"}},[_c('gl-filtered-search-token-segment',{ref:"segment",staticClass:"gl-filtered-search-term-token",class:{ 'gl-w-full': _vm.placeholder },attrs:{"active":_vm.active,"cursor-position":_vm.cursorPosition,"search-input-attributes":_vm.searchInputAttributes,"is-last-token":_vm.isLastToken,"current-value":_vm.currentValue,"view-only":_vm.viewOnly},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":_vm.onBackspace,"submit":function($event){return _vm.$emit('submit')},"split":function($event){return _vm.$emit('split', $event)},"previous":function($event){return _vm.$emit('previous')},"next":function($event){return _vm.$emit('next')}},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._t("title",function(){return [_vm._v(" "+_vm._s(item.title)+" ")]},null,{ value: item.title })],2)})},proxy:true},{key:"view",fn:function(){return [(_vm.placeholder)?_c('input',_vm._b({staticClass:"gl-filtered-search-term-input",class:{ 'gl-bg-gray-10': _vm.viewOnly },attrs:{"placeholder":_vm.placeholder,"aria-label":_vm.placeholder,"readonly":_vm.viewOnly,"data-testid":"filtered-search-term-input"}},'input',_vm.searchInputAttributes,false)):[_vm._v(_vm._s(_vm.value.data))]]},proxy:true}],null,true),model:{value:(_vm.internalValue),callback:function ($$v) {_vm.internalValue=$$v;},expression:"internalValue"}})],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/index.js

@@ -44,7 +44,7 @@ export { default as GlDropdownSectionHeader } from './components/base/dropdown/d
 export { default as GlDropdownDivider } from './components/base/dropdown/dropdown_divider';
 export { default as GlDropdownText } from './components/base/dropdown/dropdown_text';
 export { default as GlDropdown } from './components/base/dropdown/dropdown';
-export { default as GlCollapsibleListbox, default as GlListbox } from './components/base/new_dropdowns/listbox/listbox';
+export { default as GlCollapsibleListbox } from './components/base/new_dropdowns/listbox/listbox';
 export { default as GlListboxItem } from './components/base/new_dropdowns/listbox/listbox_item';
 export { default as GlDisclosureDropdown } from './components/base/new_dropdowns/disclosure/disclosure_dropdown';
 export { default as GlDisclosureDropdownItem } from './components/base/new_dropdowns/disclosure/disclosure_dropdown_item';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "57.0.0",
+  "version": "58.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -117,7 +117,7 @@
     "bootstrap-vue-vue3": "npm:bootstrap-vue@2.23.1",
     "cypress": "^11.2.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.35.0",
+    "eslint": "8.36.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-storybook": "0.6.11",

package/src/components/base/filtered_search/filtered_search.md

@@ -29,7 +29,7 @@ Prepare array of available token configurations with the following fields:
 Each token for filtered search is a Vue component with the following props:
 
 - `value`: an object with a `data` property containing the current value, and optionally an
-`operator` value containing the operator value
+  `operator` value containing the operator value
 - `active`: indicates if the token is currently active. It's the token's responsibility
   to render proper control for editing (for example input).
 - `current-value`: current tokens of the filtered search.
@@ -60,6 +60,5 @@ Pass the list of tokens to the search component. Optionally, you can use `v-mode
 realtime updates:
 
 ```html
-
 <gl-filtered-search :available-tokens="tokens" v-model="value" />
 ```

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

@@ -346,6 +346,9 @@ export default {
        */
       this.$emit('submit', normalizeTokens(cloneDeep(this.tokens)));
     },
+    hasTitleSlot() {
+      return Boolean(this.$scopedSlots.title);
+    },
   },
 };
 </script>
@@ -402,7 +405,14 @@ export default {
           @split="createTokens(idx, $event)"
           @previous="activatePreviousToken"
           @next="activateNextToken"
-        />
+        >
+          <template
+            v-if="hasTitleSlot() && getTokenComponent(token.type).name === 'GlFilteredSearchTerm'"
+            #title="title"
+          >
+            <slot name="title" v-bind="title"></slot>
+          </template>
+        </component>
       </div>
       <portal-target
         ref="menu"

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

@@ -26,18 +26,36 @@ describe('Filtered search term', () => {
     props: ['searchInputAttributes', 'isLastToken', 'currentValue', 'viewOnly'],
   };
 
-  const createComponent = (props) => {
+  const createComponent = (props, options = {}) => {
     wrapper = shallowMount(FilteredSearchTerm, {
       propsData: { ...defaultProps, ...props },
       stubs: {
         'gl-filtered-search-token-segment': segmentStub,
       },
+      ...options,
     });
   };
 
   const findSearchInput = () => wrapper.find('input');
   const findTokenSegmentComponent = () => wrapper.findComponent(segmentStub);
 
+  it('renders title slot', async () => {
+    createComponent(
+      { availableTokens, active: true, value: { data: 'test1' } },
+      {
+        scopedSlots: {
+          title: '<div slot-scope="{ value }">New {{value}}</div>',
+        },
+      }
+    );
+
+    await nextTick();
+
+    expect(wrapper.findAllComponents(GlFilteredSearchSuggestion).at(0).text()).toBe(
+      'New test1-foo'
+    );
+  });
+
   it('renders value in inactive mode', () => {
     createComponent({ value: { data: 'test-value' } });
     expect(wrapper.html()).toMatchSnapshot();

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

@@ -167,7 +167,7 @@ export default {
           :value="item.type"
           :icon-name="item.icon"
         >
-          {{ item.title }}
+          <slot name="title" v-bind="{ value: item.title }"> {{ item.title }} </slot>
         </gl-filtered-search-suggestion>
       </template>
 

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

@@ -10,15 +10,14 @@ This component is not intended to be used outside of the `GlFilteredSearch` comp
 Make sure to pass `$listeners` to `gl-filtered-search-token`, or route events properly:
 
 ```html
-<gl-filtered-search-token
-  title="Confidential"
-  :active="active"
-  :value="value"
-  v-on="$listeners"
->
+<gl-filtered-search-token title="Confidential" :active="active" :value="value" v-on="$listeners">
   <template #suggestions>
-    <gl-filtered-search-suggestion value="Yes"><gl-icon name="eye-slash" :size="16"/> Yes</gl-filtered-search-suggestion>
-    <gl-filtered-search-suggestion value="No"><gl-icon name="eye" :size="16"/> No</gl-filtered-search-suggestion>
+    <gl-filtered-search-suggestion value="Yes"
+      ><gl-icon name="eye-slash" :size="16" /> Yes</gl-filtered-search-suggestion
+    >
+    <gl-filtered-search-suggestion value="No"
+      ><gl-icon name="eye" :size="16" /> No</gl-filtered-search-suggestion
+    >
   </template>
 </gl-filtered-search-token>
 ```

package/src/index.js

@@ -52,10 +52,7 @@ export { default as GlDropdownDivider } from './components/base/dropdown/dropdow
 export { default as GlDropdownText } from './components/base/dropdown/dropdown_text.vue';
 export { default as GlDropdown } from './components/base/dropdown/dropdown.vue';
 // new components aiming to replace GlDropdown  - start
-export {
-  default as GlListbox,
-  default as GlCollapsibleListbox,
-} from './components/base/new_dropdowns/listbox/listbox.vue';
+export { default as GlCollapsibleListbox } from './components/base/new_dropdowns/listbox/listbox.vue';
 export { default as GlListboxItem } from './components/base/new_dropdowns/listbox/listbox_item.vue';
 export { default as GlDisclosureDropdown } from './components/base/new_dropdowns/disclosure/disclosure_dropdown.vue';
 export { default as GlDisclosureDropdownItem } from './components/base/new_dropdowns/disclosure/disclosure_dropdown_item.vue';