diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/Global/Search.vue | 64 |
1 files changed, 64 insertions, 0 deletions
diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue new file mode 100644 index 00000000..d3050170 --- /dev/null +++ b/src/components/Global/Search.vue @@ -0,0 +1,64 @@ +<template> + <div class="search-global"> + <b-form-group + :label="$t('global.form.search')" + label-for="searchInput" + label-sr-only + class="mb-2" + > + <b-input-group size="md" class="align-items-center"> + <b-input-group-prepend> + <icon-search class="search-icon" /> + </b-input-group-prepend> + <b-form-input + id="searchInput" + v-model="filter" + type="text" + :placeholder="placeholder" + @input="onChangeInput" + ></b-form-input> + </b-input-group> + </b-form-group> + </div> +</template> + +<script> +import IconSearch from '@carbon/icons-vue/es/search/16'; +export default { + name: 'Search', + components: { IconSearch }, + props: { + placeholder: { + type: String, + default: () => { + return this.$t('global.form.search'); + } + } + }, + data() { + return { + filter: null + }; + }, + methods: { + onChangeInput() { + this.$emit('changeSearch', this.filter); + } + } +}; +</script> + +<style lang="scss" scoped> +@import 'src/assets/styles/helpers'; + +#searchInput { + padding-left: ($spacer * 2); +} +.search-icon { + position: absolute; + left: 10px; + top: 12px; + z-index: 4; + stroke: $gray-400; +} +</style> |