75 lines
1.5 KiB
Vue
75 lines
1.5 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="search">
|
|
<input type="search" class="searchTerm" placeholder="Search"
|
|
@input="updateFilterAsync($event.target.value)" >
|
|
<div class="iconWrapper">
|
|
<font-awesome-icon :icon="['fas', 'search']" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
|
|
import { StatefulVue } from './StatefulVue';
|
|
|
|
@Component
|
|
export default class TheSearchBar extends StatefulVue {
|
|
public async updateFilterAsync(filter: |string) {
|
|
const state = await this.getCurrentStateAsync();
|
|
if (!filter) {
|
|
state.filter.removeFilter();
|
|
} else {
|
|
state.filter.setFilter(filter);
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/presentation/styles/colors.scss";
|
|
@import "@/presentation/styles/fonts.scss";
|
|
|
|
.container {
|
|
font: $normal-font;
|
|
}
|
|
|
|
.search {
|
|
width: 100%;
|
|
position: relative;
|
|
display: flex;
|
|
}
|
|
|
|
.searchTerm {
|
|
width: 100%;
|
|
min-width: 60px;
|
|
border: 1.5px solid $gray;
|
|
border-right: none;
|
|
height: 36px;
|
|
border-radius: 3px 0 0 3px;
|
|
padding-left:10px;
|
|
padding-right:10px;
|
|
outline: none;
|
|
color: $gray;
|
|
}
|
|
|
|
.searchTerm:focus{
|
|
color: $slate;
|
|
}
|
|
|
|
.iconWrapper {
|
|
width: 40px;
|
|
height: 36px;
|
|
border: 1px solid $gray;
|
|
background: $gray;
|
|
text-align: center;
|
|
color: $white;
|
|
border-radius: 0 5px 5px 0;
|
|
font-size: 20px;
|
|
padding:5px;
|
|
}
|
|
|
|
</style>
|