diff options
Diffstat (limited to 'src/components/Global/Search.vue')
-rw-r--r-- | src/components/Global/Search.vue | 33 |
1 files changed, 31 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> |