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          v-model="filter"
16          class="search-input"
17          type="text"
18          :placeholder="placeholder"
19          @input="onChangeInput"
20        ></b-form-input>
21      </b-input-group>
22    </b-form-group>
23  </div>
24</template>
25
26<script>
27import IconSearch from '@carbon/icons-vue/es/search/16';
28export default {
29  name: 'Search',
30  components: { IconSearch },
31  props: {
32    placeholder: {
33      type: String,
34      default: function() {
35        return this.$t('global.form.search');
36      }
37    }
38  },
39  data() {
40    return {
41      filter: null
42    };
43  },
44  methods: {
45    onChangeInput() {
46      this.$emit('changeSearch', this.filter);
47    }
48  }
49};
50</script>
51
52<style lang="scss" scoped>
53@import 'src/assets/styles/helpers';
54
55.search-input {
56  padding-left: ($spacer * 2);
57}
58.search-icon {
59  position: absolute;
60  left: 10px;
61  top: 12px;
62  z-index: 4;
63  stroke: gray('400');
64}
65</style>
66