Nikurasu/elk
1
0
Fork 0
forked from Mirrors/elk
Code Pull requests Releases 2 Packages Activity

feat: show search widget while loading

Browse source
This commit is contained in:
patak 2022-12-22 11:34:35 +01:00
parent fb649807b0
commit 30e9c3d773
3 changed files with 7 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/search/SearchWidget.vue
View file

@ -52,7 +52,7 @@ const activate = () => {
<template> <template>
<div ref="el" relative px4 py2 group> <div ref="el" relative px4 py2 group>
<div bg-base border="~ base" h10 rounded-full flex="~ row" items-center relative outline-primary outline-1 focus-within:outline transition-all transition-duration-500> <div bg-base border="~ base" h10 rounded-full flex="~ row" items-center relative outline-primary outline-1 focus-within:outline>
<div i-ri:search-2-line mx4 absolute pointer-events-none text-secondary mt="1px" /> <div i-ri:search-2-line mx4 absolute pointer-events-none text-secondary mt="1px" />
<input <input
ref="input" ref="input"

9
composables/search.ts
View file

@ -1,20 +1,21 @@
import type { MaybeRef } from '@vueuse/core' import type { MaybeRef } from '@vueuse/core'
import type { Account, Status } from 'masto' import type { Account, Paginator, Results, SearchParams, Status } from 'masto'
export interface UseSearchOptions { export interface UseSearchOptions {
type?: MaybeRef<'accounts' | 'hashtags' | 'statuses'> type?: MaybeRef<'accounts' | 'hashtags' | 'statuses'>
} }
export function useSearch(query: MaybeRef<string>, options?: UseSearchOptions) { export function useSearch(query: MaybeRef<string>, options?: UseSearchOptions) {
let paginator = useMasto().search({ q: unref(query), type: unref(options?.type) })
const done = ref(false) const done = ref(false)
const loading = ref(false) const loading = ref(false)
const statuses = ref<Status[]>([]) const statuses = ref<Status[]>([])
const accounts = ref<Account[]>([]) const accounts = ref<Account[]>([])
const hashtags = ref<any[]>([]) const hashtags = ref<any[]>([])
let paginator: Paginator<SearchParams, Results> | undefined
debouncedWatch(() => unref(query), async () => { debouncedWatch(() => unref(query), async () => {
if (!unref(query)) if (!unref(query) || !isMastoInitialised.value)
return return
loading.value = true loading.value = true
@ -36,7 +37,7 @@ export function useSearch(query: MaybeRef<string>, options?: UseSearchOptions) {
}, { debounce: 500 }) }, { debounce: 500 })
const next = async () => { const next = async () => {
if (!unref(query)) if (!unref(query) || !isMastoInitialised.value || !paginator)
return return
loading.value = true loading.value = true

2
layouts/default.vue
View file

@ -51,7 +51,7 @@
<aside class="hidden sm:none lg:block w-1/4 zen-hide"> <aside class="hidden sm:none lg:block w-1/4 zen-hide">
<div sticky top-0 h-screen flex="~ col" py3> <div sticky top-0 h-screen flex="~ col" py3>
<slot name="right"> <slot name="right">
<SearchWidget v-if="isMastoInitialised" /> <SearchWidget />
<div flex-auto /> <div flex-auto />
<NavFooter /> <NavFooter />
</slot> </slot>