1<template>
2  <div class="search-global">
3    <b-form-group
4      :label="$t('global.form.search')"
5      :label-for="`searchInput-${_uid}`"
6      label-class="invisible"
7      class="mb-2"
8    >
9      <b-input-group size="md" class="align-items-center">
10        <b-input-group-prepend>
11          <icon-search class="search-icon" />
12        </b-input-group-prepend>
13        <b-form-input
14          :id="`searchInput-${_uid}`"
15          ref="searchInput"
16          v-model="filter"
17          class="search-input"
18          type="text"
19          :aria-label="$t('global.form.search')"
20          :placeholder="placeholder"
21          @input="onChangeInput"
22        >
23        </b-form-input>
24        <b-button
25          v-if="filter"
26          variant="link"
27          class="btn-icon-only input-action-btn"
28          :title="$t('global.ariaLabel.clearSearch')"
29          @click="onClearSearch"
30        >
31          <icon-close />
32          <span class="sr-only">{{ $t('global.ariaLabel.clearSearch') }}</span>
33        </b-button>
34      </b-input-group>
35    </b-form-group>
36  </div>
37</template>
38
39<script>
40import IconSearch from '@carbon/icons-vue/es/search/16';
41import IconClose from '@carbon/icons-vue/es/close/20';
42import { useI18n } from 'vue-i18n';
43import i18n from '@/i18n';
44
45export default {
46  name: 'Search',
47  components: { IconSearch, IconClose },
48  props: {
49    placeholder: {
50      type: String,
51      default: function () {
52        return i18n.global.t('global.form.search');
53      },
54    },
55  },
56  data() {
57    return {
58      $t: useI18n().t,
59      filter: null,
60    };
61  },
62  methods: {
63    onChangeInput() {
64      this.$emit('change-search', this.filter);
65    },
66    onClearSearch() {
67      this.filter = '';
68      this.$emit('clear-search');
69      this.$refs.searchInput.focus();
70    },
71  },
72};
73</script>
74
75<style lang="scss" scoped>
76@import '@/assets/styles/bmc/helpers/_index.scss';
77@import '@/assets/styles/bootstrap/_helpers.scss';
78
79.search-input {
80  padding-left: ($spacer * 2);
81}
82.search-icon {
83  position: absolute;
84  left: 10px;
85  top: 12px;
86  z-index: 4;
87  stroke: gray('400');
88}
89</style>
90