mirror of
https://github.com/koel/koel
synced 2025-01-04 16:58:49 +00:00
84 lines
1.5 KiB
Vue
84 lines
1.5 KiB
Vue
<template>
|
|
<div class="side search" id="searchForm" :class="{ showing: showing }">
|
|
<input type="search"
|
|
:class="{ dirty: q }"
|
|
@input="filter"
|
|
placeholder="Search"
|
|
v-model="q"
|
|
v-koel-focus="showing">
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import isMobile from 'ismobilejs';
|
|
import { debounce } from 'lodash';
|
|
|
|
import { event } from '../../utils';
|
|
|
|
export default {
|
|
name: 'site-header--search-form',
|
|
|
|
data() {
|
|
return {
|
|
q: '',
|
|
showing: !isMobile.phone,
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
/**
|
|
* Limit the filter's execution rate using lodash's debounce.
|
|
*/
|
|
filter: debounce(function () {
|
|
event.emit('filter:changed', this.q);
|
|
}, 200),
|
|
},
|
|
|
|
created() {
|
|
event.on('search:toggle', () => {
|
|
this.showing = !this.showing;
|
|
});
|
|
|
|
event.on('koel:teardown', () => {
|
|
this.q = '';
|
|
this.filter();
|
|
})
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
@import "../../../sass/partials/_vars.scss";
|
|
@import "../../../sass/partials/_mixins.scss";
|
|
|
|
#searchForm {
|
|
@include vertical-center();
|
|
flex: 0 0 256px;
|
|
order: -1;
|
|
background: $colorSearchFormBgr;
|
|
|
|
input[type="search"] {
|
|
width: 218px;
|
|
margin-top: 0;
|
|
}
|
|
|
|
@media only screen and (max-width : 667px) {
|
|
z-index: -1;
|
|
position: absolute;
|
|
left: 0;
|
|
background: rgba(0, 0, 0, .8);
|
|
width: 100%;
|
|
padding: 12px;
|
|
top: 0;
|
|
|
|
&.showing {
|
|
top: $headerHeight;
|
|
z-index: 100;
|
|
}
|
|
|
|
input[type="search"] {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|