fix: trim spaces for search keyword

This commit is contained in:
三咲智子 2023-01-09 16:36:24 +08:00
parent 509eec5f87
commit c28d1e1537
No known key found for this signature in database
GPG key ID: 69992F2250DFD93E
3 changed files with 20 additions and 16 deletions

View file

@ -221,7 +221,7 @@ const onKeyDown = (e: KeyboardEvent) => {
</template> </template>
<div v-else p5 text-center text-secondary italic> <div v-else p5 text-center text-secondary italic>
{{ {{
input.length input.trim().length
? $t('common.not_found') ? $t('common.not_found')
: $t('search.search_desc') : $t('search.search_desc')
}} }}

View file

@ -77,17 +77,19 @@ const activate = () => {
<!-- Results --> <!-- Results -->
<div left-0 top-12 absolute w-full z10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none> <div left-0 top-12 absolute w-full z10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none>
<div w-full bg-base border="~ base" rounded-3 max-h-100 overflow-auto py2> <div w-full bg-base border="~ base" rounded-3 max-h-100 overflow-auto py2>
<span v-if="query.length === 0" block text-center text-sm text-secondary> <span v-if="query.trim().length === 0" block text-center text-sm text-secondary>
{{ t('search.search_desc') }} {{ t('search.search_desc') }}
</span> </span>
<template v-if="!loading"> <template v-else-if="!loading">
<SearchResult <template v-if="results.length > 0">
v-for="(result, i) in results" :key="result.id" <SearchResult
:active="index === parseInt(i.toString())" v-for="(result, i) in results" :key="result.id"
:result="result" :active="index === parseInt(i.toString())"
:tabindex="focused ? 0 : -1" :result="result"
/> :tabindex="focused ? 0 : -1"
<span v-if="query.length !== 0 && results.length === 0" block text-center text-sm text-secondary> />
</template>
<span v-else block text-center text-sm text-secondary>
{{ t('search.search_empty') }} {{ t('search.search_empty') }}
</span> </span>
</template> </template>

View file

@ -28,6 +28,8 @@ export function useSearch(query: MaybeComputedRef<string>, options: UseSearchOpt
const hashtags = ref<HashTagSearchResult[]>([]) const hashtags = ref<HashTagSearchResult[]>([])
const statuses = ref<StatusSearchResult[]>([]) const statuses = ref<StatusSearchResult[]>([])
const q = $computed(() => resolveUnref(query).trim())
let paginator: Paginator<mastodon.v2.Search, mastodon.v2.SearchParams> | undefined let paginator: Paginator<mastodon.v2.Search, mastodon.v2.SearchParams> | undefined
const appendResults = (results: mastodon.v2.Search, empty = false) => { const appendResults = (results: mastodon.v2.Search, empty = false) => {
@ -56,12 +58,12 @@ export function useSearch(query: MaybeComputedRef<string>, options: UseSearchOpt
}))] }))]
} }
watch(() => unref(query), () => { watch(() => resolveUnref(query), () => {
loading.value = !!(unref(query) && isMastoInitialised.value) loading.value = !!(q && isMastoInitialised.value)
}) })
debouncedWatch(() => unref(query), async () => { debouncedWatch(() => resolveUnref(query), async () => {
if (!unref(query) || !isMastoInitialised.value) if (!q || !isMastoInitialised.value)
return return
loading.value = true loading.value = true
@ -71,7 +73,7 @@ export function useSearch(query: MaybeComputedRef<string>, options: UseSearchOpt
* but that doesn't seem to be the case. So instead we just create a new paginator with the new params. * but that doesn't seem to be the case. So instead we just create a new paginator with the new params.
*/ */
paginator = masto.v2.search({ paginator = masto.v2.search({
q: resolveUnref(query), q,
...resolveUnref(options), ...resolveUnref(options),
resolve: !!currentUser.value, resolve: !!currentUser.value,
}) })
@ -85,7 +87,7 @@ export function useSearch(query: MaybeComputedRef<string>, options: UseSearchOpt
}, { debounce: 300 }) }, { debounce: 300 })
const next = async () => { const next = async () => {
if (!unref(query) || !isMastoInitialised.value || !paginator) if (!q || !isMastoInitialised.value || !paginator)
return return
loading.value = true loading.value = true