@gitlab/ui 49.0.3 → 49.1.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [49.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v49.0.3...v49.1.0) (2022-10-27)
+
+
+### Features
+
+* **GlSearchBoxByType:** Clear button events ([71506b3](https://gitlab.com/gitlab-org/gitlab-ui/commit/71506b3a9ca15f0e233bea4b8ee1fbe7de688059))
+
 ## [49.0.3](https://gitlab.com/gitlab-org/gitlab-ui/compare/v49.0.2...v49.0.3) (2022-10-26)
 
 

package/dist/components/base/search_box_by_type/search_box_by_type.js

@@ -89,6 +89,15 @@ var script = {
     },
     focusInput() {
       this.$refs.input.$el.focus();
+    },
+    onClearButtonFocus() {
+      this.$emit('clearButtonFocus');
+    },
+    onClearButtonBlur() {
+      this.$emit('clearButtonBlur');
+    },
+    onClearButtonRelease() {
+      this.$emit('clearButtonRelease');
     }
   }
 };
@@ -97,7 +106,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-search-box-by-type"},[_c('gl-icon',{staticClass:"gl-search-box-by-type-search-icon",attrs:{"name":"search"}}),_vm._v(" "),_c('gl-form-input',_vm._g(_vm._b({ref:"input",staticClass:"gl-search-box-by-type-input",attrs:{"value":_vm.value,"disabled":_vm.disabled}},'gl-form-input',_vm.inputAttributes,false),_vm.inputListeners)),_vm._v(" "),_c('div',{staticClass:"gl-search-box-by-type-right-icons"},[(_vm.isLoading)?_c('gl-loading-icon',{staticClass:"gl-search-box-by-type-loading-icon"}):_vm._e(),_vm._v(" "),(_vm.showClearButton)?_c('gl-clear-icon-button',{staticClass:"gl-search-box-by-type-clear gl-clear-icon-button",attrs:{"title":_vm.clearButtonTitle,"tooltip-container":_vm.tooltipContainer},on:{"click":function($event){$event.stopPropagation();return _vm.clearInput.apply(null, arguments)}}}):_vm._e()],1)],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-search-box-by-type"},[_c('gl-icon',{staticClass:"gl-search-box-by-type-search-icon",attrs:{"name":"search"}}),_vm._v(" "),_c('gl-form-input',_vm._g(_vm._b({ref:"input",staticClass:"gl-search-box-by-type-input",attrs:{"value":_vm.value,"disabled":_vm.disabled}},'gl-form-input',_vm.inputAttributes,false),_vm.inputListeners)),_vm._v(" "),_c('div',{staticClass:"gl-search-box-by-type-right-icons"},[(_vm.isLoading)?_c('gl-loading-icon',{staticClass:"gl-search-box-by-type-loading-icon"}):_vm._e(),_vm._v(" "),(_vm.showClearButton)?_c('gl-clear-icon-button',{staticClass:"gl-search-box-by-type-clear gl-clear-icon-button",attrs:{"title":_vm.clearButtonTitle,"tooltip-container":_vm.tooltipContainer},on:{"click":function($event){$event.stopPropagation();return _vm.clearInput.apply(null, arguments)},"focus":_vm.onClearButtonFocus,"blur":_vm.onClearButtonBlur,"release":_vm.onClearButtonRelease}}):_vm._e()],1)],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

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

package/src/components/base/search_box_by_type/search_box_by_type.spec.js

@@ -42,6 +42,24 @@ describe('search box by type component', () => {
 
       expect(wrapper.emitted('input')).toEqual([['']]);
     });
+
+    it('emits clearButtonFocus when focused', () => {
+      findClearIcon().vm.$emit('focus', { stopPropagation: jest.fn() });
+
+      expect(wrapper.emitted('clearButtonFocus')).toHaveLength(1);
+    });
+
+    it('emits clearButtonBlur when blur', () => {
+      findClearIcon().vm.$emit('blur', { stopPropagation: jest.fn() });
+
+      expect(wrapper.emitted('clearButtonBlur')).toHaveLength(1);
+    });
+
+    it('emits clearButtonRelease when released', () => {
+      findClearIcon().vm.$emit('release', { stopPropagation: jest.fn() });
+
+      expect(wrapper.emitted('clearButtonRelease')).toHaveLength(1);
+    });
   });
 
   describe('v-model', () => {

package/src/components/base/search_box_by_type/search_box_by_type.vue

@@ -93,6 +93,15 @@ export default {
     focusInput() {
       this.$refs.input.$el.focus();
     },
+    onClearButtonFocus() {
+      this.$emit('clearButtonFocus');
+    },
+    onClearButtonBlur() {
+      this.$emit('clearButtonBlur');
+    },
+    onClearButtonRelease() {
+      this.$emit('clearButtonRelease');
+    },
   },
 };
 </script>
@@ -116,6 +125,9 @@ export default {
         :tooltip-container="tooltipContainer"
         class="gl-search-box-by-type-clear gl-clear-icon-button"
         @click.stop="clearInput"
+        @focus="onClearButtonFocus"
+        @blur="onClearButtonBlur"
+        @release="onClearButtonRelease"
       />
     </div>
   </div>