elk/components/search/SearchWidget.vue

119 lines
3.2 KiB
Vue
Raw Normal View History

2022-12-17 21:35:07 +00:00
<script setup lang="ts">
const query = ref('')
const { accounts, hashtags, loading, statuses } = useSearch(query)
2022-12-17 21:35:07 +00:00
const index = ref(0)
const { t } = useI18n()
2022-12-17 21:35:07 +00:00
const el = ref<HTMLElement>()
const input = ref<HTMLInputElement>()
2022-12-17 21:35:07 +00:00
const router = useRouter()
const { focused } = useFocusWithin(el)
defineExpose({
input,
})
2022-12-17 21:35:07 +00:00
const results = computed(() => {
if (query.value.length === 0)
return []
const results = [
2023-01-07 14:52:58 +00:00
...hashtags.value.slice(0, 3),
...accounts.value,
...statuses.value,
2022-12-17 21:35:07 +00:00
// Disable until search page is implemented
// {
// type: 'action',
// to: `/search?q=${query.value}`,
// action: {
// label: `Search for ${query.value}`,
// },
// },
]
return results
})
// Reset index when results change
watch([results, focused], () => index.value = -1)
function shift(delta: number) {
return index.value = (index.value + delta % results.value.length + results.value.length) % results.value.length
}
2022-12-17 21:35:07 +00:00
function activate() {
2022-12-17 21:35:07 +00:00
const currentIndex = index.value
if (query.value.length === 0)
return
// Disable redirection until search page is implemented
if (currentIndex === -1) {
index.value = 0
2023-01-08 07:57:21 +00:00
// router.push(`/search?q=${query.value}`)
return
}
(document.activeElement as HTMLElement).blur()
index.value = -1
2022-12-17 21:35:07 +00:00
router.push(results.value[currentIndex].to)
}
</script>
<template>
2023-01-05 11:33:00 +00:00
<div ref="el" relative group>
<div bg-base border="~ base" h10 ps-4 pe-1 rounded-3 flex="~ row" items-center relative focus-within:box-shadow-outline>
2023-01-05 11:33:00 +00:00
<div i-ri:search-2-line pointer-events-none text-secondary mt="1px" class="rtl-flip" />
2022-12-17 21:35:07 +00:00
<input
ref="input"
v-model="query"
h-full
2023-01-04 23:17:30 +00:00
rounded-3
2022-12-17 21:35:07 +00:00
w-full
bg-transparent
outline="focus:none"
ps-3
pe-1
ml-1
:placeholder="isHydrated ? t('nav.search') : ''"
2022-12-17 21:35:07 +00:00
pb="1px"
placeholder-text-secondary
@keydown.down.prevent="shift(1)"
@keydown.up.prevent="shift(-1)"
@keypress.enter="activate"
>
<button v-if="query.length" btn-action-icon text-secondary @click="query = ''; input?.focus()">
<span aria-hidden="true" class="i-ri:close-line" />
</button>
2022-12-17 21:35:07 +00:00
</div>
<!-- Results -->
<div left-0 top-11 absolute w-full z10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none>
2023-01-04 23:17:30 +00:00
<div w-full bg-base border="~ base" rounded-3 max-h-100 overflow-auto py2>
2023-01-09 08:36:24 +00:00
<span v-if="query.trim().length === 0" block text-center text-sm text-secondary>
{{ t('search.search_desc') }}
2022-12-17 21:35:07 +00:00
</span>
2023-01-09 08:36:24 +00:00
<template v-else-if="!loading">
<template v-if="results.length > 0">
<SearchResult
v-for="(result, i) in results" :key="result.id"
:active="index === parseInt(i.toString())"
:result="result"
:tabindex="focused ? 0 : -1"
/>
</template>
<span v-else block text-center text-sm text-secondary>
{{ t('search.search_empty') }}
</span>
2022-12-17 21:35:07 +00:00
</template>
<div v-else>
<SearchResultSkeleton />
<SearchResultSkeleton />
<SearchResultSkeleton />
</div>
</div>
</div>
</div>
</template>