Flux

Appearance

Filter option (async) ​

This component provides an option select functionality, allowing users to select a single option from a set of options fetched remotely. It handles state updates automatically.

WARNING

This component can only be used within a Filter.

Required icons

magnifying-glass
circle-check

Props

fetch-options: (ids: FluxFilterValue[]) => Promise<FluxFilterOptionRow[]>
A function that returns the option objects based on the selected value.

fetch-relevant: () => Promise<FluxFilterOptionRow[]>
A function that returns the relevant options.

fetch-search: (searchQuery: string) => Promise<FluxFilterOptionRow[]>
A function that returns the options based on the search query.

icon?: FluxIconName
The icon of the filter.

label: string
The label of the filter.

name: string
The name of the filter within the filter state.

search-placeholder?: boolean
The placeholder to show in the search bar.

Snippet ​

vue
<template>
    <FluxPane style="width: max-content">
        <FluxFilter v-model="filterState">
            <FluxFilterOptionAsync
                :fetch-options="fetchOptions"
                :fetch-relevant="fetchRelevant"
                :fetch-search="fetchSearch"
                icon="clone"
                label="Option"
                name="option"/>
        </FluxFilter>
    </FluxPane>
</template>

<script
    lang="ts"
    setup>
    import { FluxFilter, FluxFilterOptionAsync, FluxPane } from '@flux-ui/components';
    import type { FluxFilterOptionRow, FluxFilterState } from '@flux-ui/types';
    import { ref } from 'vue';
    import dataset from '../../../../../assets/select-dataset.json' with { type: 'json' };

    const filterState = ref<FluxFilterState>({
        option: '73c83353-de92-8110-9bce-c2a9e8c0de64',

        get resettable(): string[] {
            return [];
        },

        reset(): void {
        }
    });

    async function fetchOptions(values: string[]): Promise<FluxFilterOptionRow[]> {
        await new Promise(resolve => setTimeout(resolve, 300));

        return dataset.filter(o => values.includes(o.value));
    }

    async function fetchRelevant(): Promise<FluxFilterOptionRow[]> {
        await new Promise(resolve => setTimeout(resolve, 300));

        return dataset.toSorted();
    }

    async function fetchSearch(searchQuery: string): Promise<FluxFilterOptionRow[]> {
        await new Promise(resolve => setTimeout(resolve, 300));

        return dataset.filter(o => o.label.toLowerCase().includes(searchQuery.toLowerCase()));
    }
</script>

Used components ​