@coreui/vue/dist/cjs/components/chip-set/useChipSet.d.ts

UI Components Library for Vue.js

import { type ComputedRef, type InjectionKey } from 'vue';
export interface ChipSetConfig {
    disabled?: boolean;
    filter?: boolean;
    removable?: boolean;
    removeIcon?: string | object;
    selectable?: boolean;
    selectedIcon?: string | object;
}
export interface ChipSetContext {
    /** Config forwarded to every chip in the set; the chip's own props win. */
    config: ComputedRef<ChipSetConfig>;
    isSelected: (value: string) => boolean;
    toggleSelected: (value: string, next: boolean, event: MouseEvent | KeyboardEvent) => void;
    removeChip: (value: string, event: MouseEvent | KeyboardEvent) => void;
}
export declare const chipSetContextKey: InjectionKey<ChipSetContext>;
export interface UseChipSetOptions {
    config: ComputedRef<ChipSetConfig>;
    selectionMode?: () => 'single' | 'multiple';
    /** Controlled selected values (e.g. v-model:selected). Undefined keeps it uncontrolled. */
    selected?: () => string[] | undefined;
    defaultSelected?: string[];
    /** Move focus to a neighbor after removal. Containers with their own target (CChipInput → input) pass false. */
    restoreFocusOnRemove?: boolean;
    onSelectionChange?: (selected: string[]) => void;
    onRemove?: (value: string) => void;
}
/**
 * Shared chip-set engine for CChipSet and CChipInput — the Vue equivalent of the
 * vanilla `ChipInput extends ChipSet`. It owns selection coordination
 * (single/multiple, controlled-or-uncontrolled), roving focus, and the
 * focus-a-neighbor-after-removal behavior, and `provide`s a context that CChip
 * injects. Existence of the chips stays with the caller.
 */
export declare const useChipSet: (options: UseChipSetOptions) => {
    rootRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
    selectedValues: ComputedRef<string[]>;
    clearSelection: () => void;
    getFocusableChips: () => HTMLElement[];
    handleKeydown: (event: KeyboardEvent) => boolean;
};