@gitlab/ui 42.17.0 → 42.18.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# [42.18.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v42.17.0...v42.18.0) (2022-07-11)
+
+
+### Features
+
+* **GlCombobox:** Add action items ([297ed28](https://gitlab.com/gitlab-org/gitlab-ui/commit/297ed28588558229d0e2e5629875e80ec52edc32))
+* **GlCombobox:** Add action items ([af4eba0](https://gitlab.com/gitlab-org/gitlab-ui/commit/af4eba02c5345e6709ef0359feeeed63659acb27))
+* **GlCombobox:** Add action items ([cae7a7e](https://gitlab.com/gitlab-org/gitlab-ui/commit/cae7a7ecc7552cda29c41eb7c04dd3c59db1be0c))
+
 # [42.17.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v42.16.0...v42.17.0) (2022-07-08)
 
 

package/dist/components/base/form/form_combobox/constants.js

@@ -37,5 +37,19 @@ const objectTokenList = [{
   id: '12',
   title: 'xenarthra'
 }];
+const oneTokenList = ['dog'];
+const actionsList = [{
+  label: 'Create',
+  fn: () => {
+    // eslint-disable-next-line no-alert
+    window.alert('Create action');
+  }
+}, {
+  label: 'Edit',
+  fn: () => {
+    // eslint-disable-next-line no-alert
+    window.alert('Edit action');
+  }
+}];
 
-export { labelText, objectTokenList, stringTokenList };
+export { actionsList, labelText, objectTokenList, oneTokenList, stringTokenList };

package/dist/components/base/form/form_combobox/form_combobox.js

@@ -1,5 +1,6 @@
 import _uniqueId from 'lodash/uniqueId';
 import GlDropdownItem from '../../dropdown/dropdown_item';
+import GlDropdownDivider from '../../dropdown/dropdown_divider';
 import GlFormGroup from '../form_group/form_group';
 import GlFormInput from '../form_input/form_input';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -8,6 +9,7 @@ var script = {
   name: 'GlFormCombobox',
   components: {
     GlDropdownItem,
+    GlDropdownDivider,
     GlFormGroup,
     GlFormInput
   },
@@ -29,6 +31,15 @@ var script = {
       type: Array,
       required: true
     },
+
+    /**
+     * List of action functions to display at the bottom of the dropdown
+     */
+    actionList: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     value: {
       type: [String, Object],
       required: true
@@ -65,11 +76,39 @@ var script = {
     },
 
     showSuggestions() {
-      return this.results.length > 0;
+      return this.value.length > 0 && this.allItems.length > 0;
     },
 
     displayedValue() {
       return this.matchValueToAttr && this.value[this.matchValueToAttr] ? this.value[this.matchValueToAttr] : this.value;
+    },
+
+    resultsLength() {
+      return this.results.length;
+    },
+
+    allItems() {
+      return [...this.results, ...this.actionList];
+    }
+
+  },
+  watch: {
+    tokenList(newList) {
+      const filteredTokens = newList.filter(token => {
+        if (this.matchValueToAttr) {
+          // For API driven tokens, we don't need extra filtering
+          return token;
+        }
+
+        return token.toLowerCase().includes(this.value.toLowerCase());
+      });
+
+      if (filteredTokens.length) {
+        this.openSuggestions(filteredTokens);
+      } else {
+        this.results = [];
+        this.arrowCounter = -1;
+      }
     }
 
   },
@@ -86,6 +125,7 @@ var script = {
     closeSuggestions() {
       this.results = [];
       this.arrowCounter = -1;
+      this.userDismissedResults = true;
     },
 
     handleClickOutside(event) {
@@ -95,30 +135,41 @@ var script = {
     },
 
     onArrowDown() {
+      var _this$$refs$results$n;
+
       const newCount = this.arrowCounter + 1;
 
-      if (newCount >= this.results.length) {
+      if (newCount >= this.allItems.length) {
         this.arrowCounter = 0;
         return;
       }
 
       this.arrowCounter = newCount;
+      (_this$$refs$results$n = this.$refs.results[newCount]) === null || _this$$refs$results$n === void 0 ? void 0 : _this$$refs$results$n.$el.scrollIntoView(false);
     },
 
     onArrowUp() {
+      var _this$$refs$results$n2;
+
       const newCount = this.arrowCounter - 1;
 
       if (newCount < 0) {
-        this.arrowCounter = this.results.length - 1;
+        this.arrowCounter = this.allItems.length - 1;
         return;
       }
 
       this.arrowCounter = newCount;
+      (_this$$refs$results$n2 = this.$refs.results[newCount]) === null || _this$$refs$results$n2 === void 0 ? void 0 : _this$$refs$results$n2.$el.scrollIntoView(true);
     },
 
     onEnter() {
-      const currentToken = this.results[this.arrowCounter] || this.value;
-      this.selectToken(currentToken);
+      const focusedItem = this.allItems[this.arrowCounter] || this.value;
+
+      if (focusedItem.fn) {
+        this.selectAction(focusedItem);
+      } else {
+        this.selectToken(focusedItem);
+      }
     },
 
     onEsc() {
@@ -127,7 +178,6 @@ var script = {
       }
 
       this.closeSuggestions();
-      this.userDismissedResults = true;
     },
 
     onEntry(value) {
@@ -150,7 +200,8 @@ var script = {
       if (filteredTokens.length) {
         this.openSuggestions(filteredTokens);
       } else {
-        this.closeSuggestions();
+        this.results = [];
+        this.arrowCounter = -1;
       }
     },
 
@@ -167,6 +218,12 @@ var script = {
        */
 
       this.$emit('value-selected', value);
+    },
+
+    selectAction(value) {
+      value.fn();
+      this.$emit('input', this.value);
+      this.closeSuggestions();
     }
 
   }
@@ -176,7 +233,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-form-combobox dropdown",attrs:{"role":"combobox","aria-owns":_vm.suggestionsId,"aria-expanded":_vm.ariaExpanded}},[_c('gl-form-group',{attrs:{"label":_vm.labelText,"label-for":_vm.inputId,"label-sr-only":_vm.labelSrOnly}},[_c('gl-form-input',{attrs:{"id":_vm.inputId,"value":_vm.displayedValue,"type":"text","role":"searchbox","autocomplete":_vm.showAutocomplete,"aria-autocomplete":"list","aria-controls":_vm.suggestionsId,"aria-haspopup":"listbox","autofocus":_vm.autofocus},on:{"input":_vm.onEntry,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.onArrowDown($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.onArrowUp($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }$event.preventDefault();return _vm.onEnter($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onEsc($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"tab",9,$event.key,"Tab")){ return null; }return _vm.closeSuggestions($event)}]}})],1),_vm._v(" "),_c('ul',{directives:[{name:"show",rawName:"v-show",value:(_vm.showSuggestions && !_vm.userDismissedResults),expression:"showSuggestions && !userDismissedResults"}],staticClass:"dropdown-menu dropdown-full-width gl-list-style-none gl-pl-0 gl-mb-0 gl-overflow-y-auto",class:{ 'show-dropdown': _vm.showSuggestions },attrs:{"id":_vm.suggestionsId,"data-testid":"combobox-dropdown"}},_vm._l((_vm.results),function(result,i){return _c('gl-dropdown-item',{key:i,class:{ 'highlight-dropdown': i === _vm.arrowCounter },attrs:{"role":"option","aria-selected":i === _vm.arrowCounter,"tabindex":"-1"},on:{"click":function($event){return _vm.selectToken(result)}}},[_vm._t("result",[_vm._v(_vm._s(result))],{"item":result})],2)}),1)],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-form-combobox dropdown",attrs:{"role":"combobox","aria-owns":_vm.suggestionsId,"aria-expanded":_vm.ariaExpanded}},[_c('gl-form-group',{attrs:{"label":_vm.labelText,"label-for":_vm.inputId,"label-sr-only":_vm.labelSrOnly}},[_c('gl-form-input',{attrs:{"id":_vm.inputId,"value":_vm.displayedValue,"type":"text","role":"searchbox","autocomplete":_vm.showAutocomplete,"aria-autocomplete":"list","aria-controls":_vm.suggestionsId,"aria-haspopup":"listbox","autofocus":_vm.autofocus},on:{"input":_vm.onEntry,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.onArrowDown($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.onArrowUp($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }$event.preventDefault();return _vm.onEnter($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onEsc($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"tab",9,$event.key,"Tab")){ return null; }return _vm.closeSuggestions($event)}]}})],1),_vm._v(" "),_c('ul',{directives:[{name:"show",rawName:"v-show",value:(_vm.showSuggestions && !_vm.userDismissedResults),expression:"showSuggestions && !userDismissedResults"}],staticClass:"dropdown-menu dropdown-full-width show-dropdown gl-list-style-none gl-pl-0 gl-mb-0 gl-display-flex gl-flex-direction-column",attrs:{"id":_vm.suggestionsId,"data-testid":"combobox-dropdown"}},[_c('li',{staticClass:"gl-overflow-y-auto show-dropdown"},[_c('ul',{staticClass:"gl-list-style-none gl-pl-0 gl-mb-0"},_vm._l((_vm.results),function(result,i){return _c('gl-dropdown-item',{key:i,ref:"results",refInFor:true,class:{ 'gl-bg-gray-50': i === _vm.arrowCounter },attrs:{"role":"option","aria-selected":i === _vm.arrowCounter,"tabindex":"-1"},on:{"click":function($event){return _vm.selectToken(result)}}},[_vm._t("result",[_vm._v(_vm._s(result))],{"item":result})],2)}),1)]),_vm._v(" "),(_vm.resultsLength > 0 && _vm.actionList.length > 0)?_c('gl-dropdown-divider'):_vm._e(),_vm._v(" "),_c('li',[_c('ul',{staticClass:"gl-list-style-none gl-pl-0 gl-mb-0"},_vm._l((_vm.actionList),function(action,i){return _c('gl-dropdown-item',{key:i + _vm.resultsLength,class:{ 'gl-bg-gray-50': i + _vm.resultsLength === _vm.arrowCounter },attrs:{"role":"option","aria-selected":i + _vm.resultsLength === _vm.arrowCounter,"tabindex":"-1","data-testid":"combobox-action"},on:{"click":function($event){return _vm.selectAction(action)}}},[_vm._t("action",[_vm._v(_vm._s(action.label))],{"item":action})],2)}),1)])],1)],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */