mirror of
https://github.com/koel/koel
synced 2024-12-22 10:33:16 +00:00
115 lines
2.3 KiB
Vue
115 lines
2.3 KiB
Vue
<template>
|
|
<form id="searchForm" role="search" @submit.prevent="onSubmit">
|
|
<span class="icon">
|
|
<Icon :icon="faSearch" />
|
|
</span>
|
|
|
|
<input
|
|
ref="input"
|
|
v-model="q"
|
|
:class="{ dirty: q }"
|
|
:placeholder="placeholder"
|
|
autocorrect="false"
|
|
name="q"
|
|
required
|
|
spellcheck="false"
|
|
type="search"
|
|
@focus="maybeGoToSearchScreen"
|
|
@input="onInput"
|
|
>
|
|
|
|
<button type="submit" title="Search">
|
|
<Icon :icon="faSearch" />
|
|
</button>
|
|
</form>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import isMobile from 'ismobilejs'
|
|
import { faSearch } from '@fortawesome/free-solid-svg-icons'
|
|
import { ref } from 'vue'
|
|
import { debounce } from 'lodash'
|
|
import { eventBus } from '@/utils'
|
|
import { useRouter } from '@/composables'
|
|
|
|
const placeholder = isMobile.any ? 'Search' : 'Press F to search'
|
|
|
|
const { go } = useRouter()
|
|
|
|
const input = ref<HTMLInputElement>()
|
|
const q = ref('')
|
|
|
|
let onInput = () => {
|
|
const _q = q.value.trim()
|
|
_q && eventBus.emit('SEARCH_KEYWORDS_CHANGED', _q)
|
|
}
|
|
|
|
if (process.env.NODE_ENV !== 'test') {
|
|
onInput = debounce(onInput, 500)
|
|
}
|
|
|
|
const onSubmit = () => {
|
|
eventBus.emit('TOGGLE_SIDEBAR')
|
|
go('search')
|
|
}
|
|
|
|
const maybeGoToSearchScreen = () => isMobile.any || go('search')
|
|
|
|
eventBus.on('FOCUS_SEARCH_FIELD', () => {
|
|
input.value?.focus()
|
|
input.value?.select()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
#searchForm {
|
|
display: flex;
|
|
align-items: stretch;
|
|
color: var(--color-text-secondary);
|
|
background: rgba(0, 0, 0, .2);
|
|
border: 1px solid transparent;
|
|
border-radius: 5px;
|
|
transition: border .3s ease-in-out, .3s background-color ease-in-out;
|
|
overflow: hidden;
|
|
padding: 0 0 0 1rem;
|
|
gap: .5rem;
|
|
|
|
.icon {
|
|
display: flex;
|
|
align-items: center;
|
|
opacity: .7;
|
|
|
|
@media screen and (max-width: 768px) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
button {
|
|
display: none;
|
|
padding: 0 1.2rem;
|
|
background: rgba(255, 255, 255, .05);
|
|
border-radius: 0;
|
|
|
|
@media screen and (max-width: 768px) {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&:focus-within {
|
|
border: 1px solid rgba(255, 255, 255, .2);
|
|
background: rgba(0, 0, 0, .5);
|
|
}
|
|
|
|
input[type="search"] {
|
|
width: 100%;
|
|
border-radius: 0;
|
|
height: 36px;
|
|
color: var(--color-text-primary);
|
|
background-color: transparent;
|
|
|
|
&::placeholder {
|
|
color: rgba(255, 255, 255, .5);
|
|
}
|
|
}
|
|
}
|
|
</style>
|