diff options
author | SurenNeware <sneware9@in.ibm.com> | 2020-06-01 13:01:00 +0300 |
---|---|---|
committer | Gunnar Mills <gmills@us.ibm.com> | 2020-06-12 20:46:37 +0300 |
commit | 71724befc716d373e2fd6396fcd6934277f38f66 (patch) | |
tree | 24a285b44a309751a57f8e1865cc3a9c01869566 /src/components/Global | |
parent | 224d6ad33bbc4aa722bcede95280c98f8c764af4 (diff) | |
download | webui-vue-71724befc716d373e2fd6396fcd6934277f38f66.tar.xz |
Global Search component
Added global Search component to Sensors page.
Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: I3121cc4e582c782fa7e9937738cefbeddc23610e
Diffstat (limited to 'src/components/Global')
-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> |