feat: add virtual scroll to links dropdown
Enhances dropdown performance by implementing virtual scrolling with VList from virtua/vue library. This optimization improves rendering efficiency for large link lists by only rendering visible items.
This commit is contained in:
parent
dd7b898a11
commit
6070f2f5c3
1 changed files with 20 additions and 16 deletions
|
|
@ -1,7 +1,8 @@
|
|||
<script setup>
|
||||
import { useUrlSearchParams } from '@vueuse/core'
|
||||
import { useUrlSearchParams, watchDebounced } from '@vueuse/core'
|
||||
import { safeDestr } from 'destr'
|
||||
import { Check, ChevronsUpDown } from 'lucide-vue-next'
|
||||
import { VList } from 'virtua/vue'
|
||||
|
||||
const emit = defineEmits(['change'])
|
||||
|
||||
|
|
@ -17,9 +18,9 @@ onMounted(() => {
|
|||
getLinks()
|
||||
})
|
||||
|
||||
watch(selectedLinks, (value) => {
|
||||
watchDebounced(selectedLinks, (value) => {
|
||||
emit('change', 'slug', value.join(','))
|
||||
})
|
||||
}, { debounce: 500, maxWait: 1000 })
|
||||
|
||||
function restoreFilters() {
|
||||
const searchParams = useUrlSearchParams('history')
|
||||
|
|
@ -57,20 +58,23 @@ onBeforeMount(() => {
|
|||
<CommandEmpty>No link found.</CommandEmpty>
|
||||
<CommandList>
|
||||
<CommandGroup>
|
||||
<CommandItem
|
||||
v-for="link in links"
|
||||
:key="link.slug"
|
||||
:value="link.slug"
|
||||
@select="isOpen = false"
|
||||
<VList
|
||||
v-slot="{ item: link }"
|
||||
:data="links"
|
||||
:style="{ height: '292px' }"
|
||||
>
|
||||
<Check
|
||||
:class="cn(
|
||||
'mr-2 h-4 w-4',
|
||||
selectedLinks.includes(link.slug) ? 'opacity-100' : 'opacity-0',
|
||||
)"
|
||||
/>
|
||||
{{ link.slug }}
|
||||
</CommandItem>
|
||||
<CommandItem
|
||||
:value="link.slug"
|
||||
>
|
||||
<Check
|
||||
:class="cn(
|
||||
'mr-2 h-4 w-4',
|
||||
selectedLinks.includes(link.slug) ? 'opacity-100' : 'opacity-0',
|
||||
)"
|
||||
/>
|
||||
{{ link.slug }}
|
||||
</CommandItem>
|
||||
</VList>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
|
|
|
|||
Loading…
Reference in a new issue