mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-19 22:25:09 +02:00
139 lines
3.5 KiB
TypeScript
139 lines
3.5 KiB
TypeScript
import { Choices } from './choices';
|
|
import { Choice } from './choice';
|
|
import { ClassNames } from './class-names';
|
|
import { EventType } from './event-type';
|
|
import { PassedElementType } from './passed-element-type';
|
|
|
|
export interface PassedElement extends HTMLElement {
|
|
classNames: ClassNames;
|
|
element: (HTMLInputElement | HTMLSelectElement) & {
|
|
// Extends HTMLElement addEventListener with Choices events
|
|
addEventListener<K extends EventType>(
|
|
type: K,
|
|
listener: (
|
|
this: HTMLInputElement | HTMLSelectElement,
|
|
ev: EventMap[K],
|
|
) => void,
|
|
options?: boolean | AddEventListenerOptions,
|
|
): void;
|
|
};
|
|
type: PassedElementType;
|
|
isDisabled: boolean;
|
|
parentInstance: Choices;
|
|
}
|
|
|
|
/**
|
|
* Events fired by Choices behave the same as standard events. Each event is triggered on the element passed to Choices (accessible via `this.passedElement`. Arguments are accessible within the `event.detail` object.
|
|
*/
|
|
export interface EventMap {
|
|
/**
|
|
* Triggered each time an item is added (programmatically or by the user).
|
|
*
|
|
* **Input types affected:** text, select-one, select-multiple
|
|
*
|
|
* Arguments: id, value, label, groupValue, keyCode
|
|
*/
|
|
addItem: CustomEvent<{
|
|
id: number;
|
|
value: string;
|
|
label: string;
|
|
groupValue: string;
|
|
keyCode: number;
|
|
}>;
|
|
|
|
/**
|
|
* Triggered each time an item is removed (programmatically or by the user).
|
|
*
|
|
* **Input types affected:** text, select-one, select-multiple
|
|
*
|
|
* Arguments: id, value, label, groupValue
|
|
*/
|
|
removeItem: CustomEvent<{
|
|
id: number;
|
|
value: string;
|
|
label: string;
|
|
groupValue: string;
|
|
}>;
|
|
|
|
/**
|
|
* Triggered each time an item is highlighted.
|
|
*
|
|
* **Input types affected:** text, select-multiple
|
|
*
|
|
* Arguments: id, value, label, groupValue
|
|
*/
|
|
highlightItem: CustomEvent<{
|
|
id: number;
|
|
value: string;
|
|
label: string;
|
|
groupValue: string;
|
|
}>;
|
|
|
|
/**
|
|
* Triggered each time an item is unhighlighted.
|
|
*
|
|
* **Input types affected:** text, select-multiple
|
|
*
|
|
* Arguments: id, value, label, groupValue
|
|
*/
|
|
unhighlightItem: CustomEvent<{
|
|
id: number;
|
|
value: string;
|
|
label: string;
|
|
groupValue: string;
|
|
}>;
|
|
|
|
/**
|
|
* Triggered each time a choice is selected **by a user**, regardless if it changes the value of the input.
|
|
*
|
|
* **Input types affected:** select-one, select-multiple
|
|
*
|
|
* Arguments: choice: Choice
|
|
*/
|
|
choice: CustomEvent<{ choice: Choice }>;
|
|
|
|
/**
|
|
* Triggered each time an item is added/removed **by a user**.
|
|
*
|
|
* **Input types affected:** text, select-one, select-multiple
|
|
*
|
|
* Arguments: value
|
|
*/
|
|
change: CustomEvent<{ value: string }>;
|
|
|
|
/**
|
|
* Triggered when a user types into an input to search choices.
|
|
*
|
|
* **Input types affected:** select-one, select-multiple
|
|
*
|
|
* Arguments: value, resultCount
|
|
*/
|
|
search: CustomEvent<{ value: string; resultCount: number }>;
|
|
|
|
/**
|
|
* Triggered when the dropdown is shown.
|
|
*
|
|
* **Input types affected:** select-one, select-multiple
|
|
*
|
|
* Arguments: -
|
|
*/
|
|
showDropdown: CustomEvent<undefined>;
|
|
|
|
/**
|
|
* Triggered when the dropdown is hidden.
|
|
*
|
|
* **Input types affected:** select-one, select-multiple
|
|
*
|
|
* Arguments: -
|
|
*/
|
|
hideDropdown: CustomEvent<undefined>;
|
|
|
|
/**
|
|
* Triggered when a choice from the dropdown is highlighted.
|
|
*
|
|
* Input types affected: select-one, select-multiple
|
|
* Arguments: el is the choice.passedElement that was affected.
|
|
*/
|
|
highlightChoice: CustomEvent<{ el: PassedElement }>;
|
|
}
|