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          :aria-label="$t('global.ariaLabel.clearSearch')"
27          @click="onClearSearch"
28        >
29          <icon-close :title="$t('global.ariaLabel.clearSearch')" />
30        </b-button>
31      </b-input-group>
32    </b-form-group>
33  </div>
34</template>
35
36<script>
37import IconSearch from '@carbon/icons-vue/es/search/16';
38import IconClose from '@carbon/icons-vue/es/close/20';
39
40export default {
41  name: 'Search',
42  components: { IconSearch, IconClose },
43  props: {
44    placeholder: {
45      type: String,
46      default: function () {
47        return this.$t('global.form.search');
48      },
49    },
50  },
51  data() {
52    return {
53      filter: null,
54    };
55  },
56  methods: {
57    onChangeInput() {
58      this.$emit('change-search', this.filter);
59    },
60    onClearSearch() {
61      this.filter = '';
62      this.$emit('clear-search');
63      this.$refs.searchInput.focus();
64    },
65  },
66};
67</script>
68
69<style lang="scss" scoped>
70.search-input {
71  padding-left: ($spacer * 2);
72}
73.search-icon {
74  position: absolute;
75  left: 10px;
76  top: 12px;
77  z-index: 4;
78  stroke: gray('400');
79}
80
81.btn {
82  position: absolute;
83  right: 0;
84  top: 0;
85  padding: 0.4rem 1rem;
86  z-index: 4;
87  svg {
88    margin-left: 0;
89    vertical-align: sub;
90  }
91}
92</style>
93