diff options
author | Dixsie Wolmers <dixsie@ibm.com> | 2020-09-08 05:26:06 +0300 |
---|---|---|
committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-09-24 17:12:56 +0300 |
commit | 9b22b49232da67bd15e04193006ce881a93265c0 (patch) | |
tree | 225021b7ee961afa0e8a66f4d38b482ae1578d22 /src/components | |
parent | 46f17ef6c368d0412352c3026aa1e4ce9fae2e87 (diff) | |
download | webui-vue-9b22b49232da67bd15e04193006ce881a93265c0.tar.xz |
Add table search filter clear button
- Adds ability to quickly clear a table input search field
- Uses similar styling to password toggle icon and datepicker
- Button style to be addressed in separate commit to match
style guide
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I18f2e01c28c00c7e7b2ad1af924070241caf36a5
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/Global/Search.vue | 33 | ||||
-rw-r--r-- | src/components/Mixins/SearchFilterMixin.js | 17 |
2 files changed, 48 insertions, 2 deletions
diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue index 9ebf4680..eeb909a8 100644 --- a/src/components/Global/Search.vue +++ b/src/components/Global/Search.vue @@ -12,12 +12,22 @@ </b-input-group-prepend> <b-form-input :id="`searchInput-${_uid}`" + ref="searchInput" v-model="filter" class="search-input" type="text" :placeholder="placeholder" @input="onChangeInput" - ></b-form-input> + > + </b-form-input> + <b-button + v-if="filter" + variant="link" + :aria-label="$t('global.ariaLabel.clearSearch')" + @click="onClearSearch" + > + <icon-close :title="$t('global.ariaLabel.clearSearch')" /> + </b-button> </b-input-group> </b-form-group> </div> @@ -25,9 +35,11 @@ <script> import IconSearch from '@carbon/icons-vue/es/search/16'; +import IconClose from '@carbon/icons-vue/es/close/20'; + export default { name: 'Search', - components: { IconSearch }, + components: { IconSearch, IconClose }, props: { placeholder: { type: String, @@ -44,6 +56,11 @@ export default { methods: { onChangeInput() { this.$emit('changeSearch', this.filter); + }, + onClearSearch() { + this.filter = ''; + this.$emit('clearSearch'); + this.$refs.searchInput.focus(); } } }; @@ -60,4 +77,16 @@ export default { z-index: 4; stroke: gray('400'); } + +.btn { + position: absolute; + right: 0; + top: 0; + padding: 0.4rem 1rem; + z-index: 4; + svg { + margin-left: 0; + vertical-align: sub; + } +} </style> diff --git a/src/components/Mixins/SearchFilterMixin.js b/src/components/Mixins/SearchFilterMixin.js new file mode 100644 index 00000000..856975dc --- /dev/null +++ b/src/components/Mixins/SearchFilterMixin.js @@ -0,0 +1,17 @@ +const SearchFilterMixin = { + data() { + return { + searchFilter: null + }; + }, + methods: { + onChangeSearchInput(searchValue) { + this.searchFilter = searchValue; + }, + onClearSearchInput() { + this.searchFilter = null; + } + } +}; + +export default SearchFilterMixin; |