components/Global/Search.vue

2   <div class="search-global">
3     <b-form-group
5       :label-for="`searchInput-${uid}`"
6       label-class="invisible"
7       class="mb-2"
9       <b-input-group size="md" class="align-items-center">
11           <b-input-group-text>
12             <icon-search class="search-icon" />
13           </b-input-group-text>
15         <b-form-input
16           :id="`searchInput-${uid}`"
18           v-model="filter"
19           class="search-input"
21           :aria-label="$t('global.form.search')"
23           @input="onChangeInput"
25         </b-form-input>
26         <b-button
27           v-if="filter"
29           class="btn-icon-only input-action-btn"
33           <icon-close />
34           <span class="visually-hidden">
37         </b-button>
38       </b-input-group>
39     </b-form-group>
44 import IconSearch from '@carbon/icons-vue/es/search/16';
45 import IconClose from '@carbon/icons-vue/es/close/20';
46 import { useI18n } from 'vue-i18n';
60   emits: ['change-search', 'clear-search'],
70       this.$emit('change-search', this.filter);
74       this.$emit('clear-search');
75       const input = this.$refs.searchInput;
76       if (input && typeof input.focus === 'function') input.focus();
82 <style lang="scss" scoped>
83 .search-icon {
84   stroke: $gray-400;
86 </style>