traxxx/assets/components/header/search.vue

148 lines
2.3 KiB
Vue

<template>
<form
class="search"
@submit.prevent="search"
>
<input
ref="search"
v-model="query"
type="search"
class="search-input"
placeholder="Search..."
>
<button
type="submit"
class="search-button"
><Icon
icon="search"
/></button>
</form>
</template>
<script>
async function search() {
if (this.query) {
this.$router.push({ name: 'search', query: { q: this.query } });
this.$emit('search');
}
}
function searching(to) {
if (to) {
this.$refs.search.focus();
}
}
function route(to) {
if (to.name !== 'search') {
this.query = null;
}
}
export default {
props: {
searching: {
type: Boolean,
default: false,
},
},
data() {
return {
query: this.$route.query ? this.$route.query.q : null,
};
},
watch: {
$route: route,
searching,
},
methods: {
search,
},
};
</script>
<style lang="scss" scoped>
@import 'theme';
.search {
height: 100%;
max-width: 20rem;
display: flex;
flex-grow: 1;
align-items: center;
justify-content: flex-end;
padding: 0 1rem 0 0;
border-left: solid 1px var(--shadow-hint);
&.compact {
padding: 0;
border: none;
.search-input {
padding: .75rem .5rem .75rem .75rem;
}
.search-button {
padding: 1rem 1rem .75rem .25rem;
margin: 0;
}
}
}
.search-input {
height: 100%;
width: 100%;
padding: .5rem 0 .5rem .5rem;
border: none;
color: var(--text);
background: var(--background);
outline: none;
font-size: 1rem;
outline: none;
&::placeholder {
color: var(--shadow);
}
&::-webkit-search-cancel-button {
-webkit-appearance: none;
padding: .5rem;
position: relative;
right: 0;
color: var(--text);
background: url('/img/cancel-circle2.svg');
opacity: .25;
&:hover {
opacity: .5;
cursor: pointer;
}
}
&:focus::placeholder {
color: var(--shadow-weak);
}
}
.search-button {
height: 100%;
padding: 0 1rem;
background: none;
border: none;
margin: .3rem 0 0 0;
outline: none;
.icon {
fill: var(--shadow-weak);
}
&:hover {
cursor: pointer;
.icon {
fill: var(--shadow);
}
}
}
</style>