svelte-multiselect/dist/types.d.ts

Svelte multi-select component

import type { Snippet } from 'svelte';
import type { FocusEventHandler, HTMLInputAttributes, KeyboardEventHandler, MouseEventHandler, TouchEventHandler } from 'svelte/elements';
export type Option = string | number | ObjectOption;
export type OptionStyle = string | {
    option: string;
    selected: string;
};
export type ObjectOption = {
    label: string | number;
    value?: unknown;
    title?: string;
    disabled?: boolean;
    preselected?: boolean;
    disabledTitle?: string;
    selectedTitle?: string;
    style?: OptionStyle;
    [key: string]: unknown;
};
export interface MultiSelectNativeEvents {
    onblur?: FocusEventHandler<HTMLInputElement>;
    onclick?: MouseEventHandler<HTMLInputElement>;
    onfocus?: FocusEventHandler<HTMLInputElement>;
    onkeydown?: KeyboardEventHandler<HTMLInputElement>;
    onkeyup?: KeyboardEventHandler<HTMLInputElement>;
    onmousedown?: MouseEventHandler<HTMLInputElement>;
    onmouseenter?: MouseEventHandler<HTMLInputElement>;
    onmouseleave?: MouseEventHandler<HTMLInputElement>;
    ontouchcancel?: TouchEventHandler<HTMLInputElement>;
    ontouchend?: TouchEventHandler<HTMLInputElement>;
    ontouchmove?: TouchEventHandler<HTMLInputElement>;
    ontouchstart?: TouchEventHandler<HTMLInputElement>;
}
export interface MultiSelectEvents<T extends Option = Option> {
    onadd?: (data: {
        option: T;
    }) => unknown;
    oncreate?: (data: {
        option: T;
    }) => unknown;
    onremove?: (data: {
        option: T;
    }) => unknown;
    onremoveAll?: (data: {
        options: T[];
    }) => unknown;
    onchange?: (data: {
        option?: T;
        options?: T[];
        type: `add` | `remove` | `removeAll`;
    }) => unknown;
    onopen?: (data: {
        event: Event;
    }) => unknown;
    onclose?: (data: {
        event: Event;
    }) => unknown;
}
type AfterInputProps = Pick<MultiSelectParameters, `selected` | `disabled` | `invalid` | `id` | `placeholder` | `open` | `required`>;
type UserMsgProps = {
    searchText: string;
    msgType: false | `dupe` | `create` | `no-match`;
    msg: null | string;
};
export interface MultiSelectSnippets<T extends Option = Option> {
    expandIcon?: Snippet<[{
        open: boolean;
    }]>;
    selectedItem?: Snippet<[{
        option: T;
        idx: number;
    }]>;
    children?: Snippet<[{
        option: T;
        idx: number;
    }]>;
    removeIcon?: Snippet;
    afterInput?: Snippet<[AfterInputProps]>;
    spinner?: Snippet;
    disabledIcon?: Snippet;
    option?: Snippet<[{
        option: T;
        idx: number;
    }]>;
    userMsg?: Snippet<[UserMsgProps]>;
}
export interface PortalParams {
    target_node?: HTMLElement | null;
    active?: boolean;
}
export interface MultiSelectParameters<T extends Option = Option> {
    activeIndex?: number | null;
    activeOption?: T | null;
    createOptionMsg?: string | null;
    allowUserOptions?: boolean | `append`;
    allowEmpty?: boolean;
    autocomplete?: HTMLInputAttributes[`autocomplete`];
    autoScroll?: boolean;
    breakpoint?: number;
    defaultDisabledTitle?: string;
    disabled?: boolean;
    disabledInputTitle?: string;
    duplicateOptionMsg?: string;
    duplicates?: boolean;
    key?: (opt: T) => unknown;
    filterFunc?: (opt: T, searchText: string) => boolean;
    closeDropdownOnSelect?: boolean | `if-mobile` | `retain-focus`;
    form_input?: HTMLInputElement | null;
    highlightMatches?: boolean;
    id?: string | null;
    input?: HTMLInputElement | null;
    inputClass?: string;
    inputStyle?: string | null;
    inputmode?: HTMLInputAttributes[`inputmode`] | null;
    invalid?: boolean;
    liActiveOptionClass?: string;
    liActiveUserMsgClass?: string;
    liOptionClass?: string;
    liOptionStyle?: string | null;
    liSelectedClass?: string;
    liSelectedStyle?: string | null;
    liUserMsgClass?: string;
    loading?: boolean;
    matchingOptions?: T[];
    maxOptions?: number | undefined;
    maxSelect?: number | null;
    maxSelectMsg?: ((current: number, max: number) => string) | null;
    maxSelectMsgClass?: string;
    name?: string | null;
    noMatchingOptionsMsg?: string;
    open?: boolean;
    options: T[];
    outerDiv?: HTMLDivElement | null;
    outerDivClass?: string;
    parseLabelsAsHtml?: boolean;
    pattern?: string | null;
    placeholder?: string | null;
    removeAllTitle?: string;
    removeBtnTitle?: string;
    minSelect?: number | null;
    required?: boolean | number;
    resetFilterOnAdd?: boolean;
    searchText?: string;
    selected?: T[];
    sortSelected?: boolean | ((op1: T, op2: T) => number);
    selectedOptionsDraggable?: boolean;
    style?: string | null;
    ulOptionsClass?: string;
    ulSelectedClass?: string;
    ulSelectedStyle?: string | null;
    ulOptionsStyle?: string | null;
    value?: T | T[] | null;
    portal?: PortalParams;
    [key: string]: unknown;
}
export interface MultiSelectProps<T extends Option = Option> extends MultiSelectNativeEvents, MultiSelectEvents<T>, MultiSelectSnippets<T>, MultiSelectParameters<T> {
}
export {};