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