InfiniteScrollSelect

A vue-select wrapper that triggers a load-more callback when the user scrolls to the bottom of the dropdown options. Designed for large datasets loaded from an API.

Usage

<script setup>
import { ref } from 'vue'
import { InfiniteScrollSelect } from 'praxis-vue-ui'

const options = ref([/* initial page */])
const hasMore = ref(true)
const loading = ref(false)

const loadMore = async () => {
  loading.value = true
  const newItems = await api.getNextPage()
  options.value.push(...newItems)
  loading.value = false
}
</script>

<template>
  <InfiniteScrollSelect
    v-model="selected"
    :options="options"
    :has-more="hasMore"
    :loading-scroll="loading"
    :load-more-scroll="loadMore"
    placeholder="Search providers..."
  />
</template>

Props

Prop	Type	Default	Description
modelValue	unknown	null	Currently selected value. Use with v-model.
optionsrequired	unknown[]	—	Current page of loaded options.
hasMore	boolean	false	Whether more items are available to load from the server.
loadingScroll	boolean	false	Shows a spinner at the bottom of the dropdown while loading.
loadMoreScroll	() => Promise<void>	undefined	Async callback invoked when the user scrolls to the bottom of the dropdown.
placeholder	string	''	Placeholder text.
label	string	'name'	Property name used as display label.
reduce	(option) => unknown	undefined	Value extractor function.
disabled	boolean	false	Disables the select.
searchFunction	(query: string) => void	undefined	Custom search handler (server-side search).

Emits

Event	Payload	Description
update:modelValue	unknown	Emitted on selection change.