94 lines
2.4 KiB
Vue
94 lines
2.4 KiB
Vue
// Copyright (C) 2019 Storj Labs, Inc.
|
|
// See LICENSE for copying information.
|
|
|
|
<template>
|
|
<input
|
|
@mouseenter="onMouseEnter"
|
|
@mouseleave="onMouseLeave"
|
|
@input="onInput"
|
|
v-model="searchQuery"
|
|
:placeholder="`Search ${placeHolder}`"
|
|
:style="style"
|
|
type="text"
|
|
autocomplete="off">
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Prop, Vue } from 'vue-property-decorator';
|
|
|
|
declare type searchCallback = (search: string) => Promise<void>;
|
|
declare interface SearchStyle {
|
|
width: string;
|
|
}
|
|
|
|
@Component
|
|
export default class SearchComponent extends Vue {
|
|
@Prop({default: ''})
|
|
private readonly placeHolder: string;
|
|
@Prop({default: () => { return ''; }})
|
|
private readonly search: searchCallback;
|
|
|
|
private inputWidth: string = '56px';
|
|
private searchQuery: string = '';
|
|
|
|
public get style(): SearchStyle {
|
|
return { width: this.inputWidth };
|
|
}
|
|
|
|
public get searchString(): string {
|
|
return this.searchQuery;
|
|
}
|
|
|
|
public onMouseEnter(): void {
|
|
this.inputWidth = '602px';
|
|
}
|
|
|
|
public onMouseLeave(): void {
|
|
if (!this.searchString) {
|
|
this.inputWidth = '56px';
|
|
}
|
|
}
|
|
|
|
public clearSearch() {
|
|
this.searchQuery = '';
|
|
this.processSearchQuery();
|
|
this.inputWidth = '56px';
|
|
}
|
|
|
|
public onInput(): void {
|
|
this.onMouseLeave();
|
|
this.processSearchQuery();
|
|
}
|
|
|
|
private async processSearchQuery() {
|
|
await this.search(this.searchString);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
input {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 0 38px 0 18px;
|
|
border: 1px solid #F2F2F2;
|
|
box-sizing: border-box;
|
|
box-shadow: 0 4px 4px rgba(231, 232, 238, 0.6);
|
|
outline: none;
|
|
border-radius: 36px;
|
|
height: 56px;
|
|
font-family: 'font_regular';
|
|
font-size: 16px;
|
|
transition: all 0.4s ease-in-out;
|
|
background-image: url('../../../static/images/team/searchIcon.svg');
|
|
background-repeat: no-repeat;
|
|
background-size: 22px 22px;
|
|
background-position: top 16px right 16px;
|
|
}
|
|
|
|
::-webkit-input-placeholder {
|
|
color: #AFB7C1;
|
|
}
|
|
</style>
|