@ark-ui/vue/dist/components/collection/use-list-selection.d.cts

A collection of unstyled, accessible UI components for Vue, utilizing state machines for seamless interaction.

import { SelectionMode } from '@zag-js/collection';
import { MaybeRef, Ref } from 'vue';
import { CollectionItem, ListCollection } from './list-collection';
export interface UseListSelectionProps<T extends CollectionItem> {
    /**
     * The selection mode.
     */
    selectionMode?: SelectionMode;
    /**
     * Whether the selection is deselectable.
     */
    deselectable?: boolean;
    /**
     * The initial selected values.
     */
    initialSelectedValues?: string[];
    /**
     * Whether to reset the selection when the collection changes.
     */
    resetOnCollectionChange?: boolean;
    /**
     * The collection to use.
     */
    collection: ListCollection<T>;
}
export declare function useListSelection<T extends CollectionItem>(props: MaybeRef<UseListSelectionProps<T>>): UseListSelectionReturn;
export interface UseListSelectionReturn {
    /**
     * The selected values as an array.
     */
    selectedValues: Ref<string[]>;
    /**
     * Whether the selection is empty.
     */
    isEmpty: Ref<boolean>;
    /**
     * The first selected value.
     */
    firstSelectedValue: Ref<string | null>;
    /**
     * The last selected value.
     */
    lastSelectedValue: Ref<string | null>;
    /**
     * Check if a value is selected.
     */
    isSelected: (value: string | null) => boolean;
    /**
     * Check if a value can be selected.
     */
    canSelect: (value: string) => boolean;
    /**
     * Select a value.
     */
    select: (value: string, forceToggle?: boolean) => void;
    /**
     * Deselect a value.
     */
    deselect: (value: string) => void;
    /**
     * Toggle selection of a value.
     */
    toggle: (value: string) => void;
    /**
     * Replace the selection with a single value.
     */
    replace: (value: string | null) => void;
    /**
     * Extend the selection from anchor to target.
     */
    extend: (anchorValue: string, targetValue: string) => void;
    /**
     * Set the selected values.
     */
    setSelectedValues: (values: string[]) => void;
    /**
     * Clear the selection.
     */
    clear: () => void;
    /**
     * Clear all selections.
     */
    resetSelection: () => void;
    /**
     * Returns true if all items from the collection are selected.
     */
    isAllSelected: () => boolean;
    /**
     * Returns true if at least one item from the collection is selected.
     */
    isSomeSelected: () => boolean;
}