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';
42
43export default {
44  name: 'Search',
45  components: { IconSearch, IconClose },
46  props: {
47    placeholder: {
48      type: String,
49      default: function () {
50        return this.$t('global.form.search');
51      },
52    },
53  },
54  data() {
55    return {
56      filter: null,
57    };
58  },
59  methods: {
60    onChangeInput() {
61      this.$emit('change-search', this.filter);
62    },
63    onClearSearch() {
64      this.filter = '';
65      this.$emit('clear-search');
66      this.$refs.searchInput.focus();
67    },
68  },
69};
70</script>
71
72<style lang="scss" scoped>
73.search-input {
74  padding-left: ($spacer * 2);
75}
76.search-icon {
77  position: absolute;
78  left: 10px;
79  top: 12px;
80  z-index: 4;
81  stroke: gray('400');
82}
83</style>
84