primevue-mirror/components/lib/cascadeselect/CascadeSelect.d.ts

478 lines
14 KiB
TypeScript
Raw Normal View History

2023-03-01 08:50:17 +00:00
/**
*
* CascadeSelect is a form component to select a value from a nested structure of options.
*
* [Live Demo](https://www.primevue.org/cascadeselect/)
*
* @module cascadeselect
*
*/
2023-08-02 14:07:22 +00:00
import { HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
2023-07-06 11:17:08 +00:00
import { ComponentHooks } from '../basecomponent';
2023-09-05 08:50:46 +00:00
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
2022-09-06 12:03:37 +00:00
export declare type CascadeSelectPassThroughOptionType = CascadeSelectPassThroughAttributes | ((options: CascadeSelectPassThroughMethodOptions) => CascadeSelectPassThroughAttributes | string) | string | null | undefined;
2023-05-05 08:45:08 +00:00
2023-08-02 14:07:22 +00:00
export declare type CascadeSelectPassThroughTransitionType = TransitionProps | ((options: CascadeSelectPassThroughMethodOptions) => TransitionProps) | undefined;
2023-05-05 08:45:08 +00:00
/**
* Custom passthrough(pt) option method.
*/
export interface CascadeSelectPassThroughMethodOptions {
/**
* Defines instance.
*/
2023-07-06 12:01:33 +00:00
instance: any;
/**
* Defines valid properties.
*/
2023-05-05 08:45:08 +00:00
props: CascadeSelectProps;
/**
* Defines current inline state.
*/
2023-05-05 08:45:08 +00:00
state: CascadeSelectState;
/**
* Defines parent options.
*/
parent: any;
2023-09-05 08:50:46 +00:00
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
2023-05-05 08:45:08 +00:00
}
2023-03-01 08:50:17 +00:00
/**
* Custom change event
2023-03-06 20:35:39 +00:00
* @see {@link CascadeSelectEmits.change}
2023-03-01 08:50:17 +00:00
*/
2022-09-06 12:03:37 +00:00
export interface CascadeSelectChangeEvent {
/**
* Original event.
*/
originalEvent: Event;
/**
* Selected option value.
*/
value: any;
}
/**
2023-03-06 20:35:39 +00:00
* @see {@link CascadeSelectEmits.change}
2022-09-06 12:03:37 +00:00
* @extends CascadeSelectChangeEvent
*/
2022-09-14 11:26:01 +00:00
export interface CascadeSelectGroupChangeEvent extends CascadeSelectChangeEvent {}
2022-09-06 12:03:37 +00:00
2023-05-05 08:45:08 +00:00
/**
* Custom passthrough(pt) options.
* @see {@link CascadeSelectProps.pt}
*/
export interface CascadeSelectPassThroughOptions {
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the root's DOM element.
2023-05-05 08:45:08 +00:00
*/
root?: CascadeSelectPassThroughOptionType;
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the input's DOM element.
2023-05-05 08:45:08 +00:00
*/
input?: CascadeSelectPassThroughOptionType;
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the label's DOM element.
2023-05-05 08:45:08 +00:00
*/
label?: CascadeSelectPassThroughOptionType;
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the dropdown button's DOM element.
2023-05-05 08:45:08 +00:00
*/
dropdownButton?: CascadeSelectPassThroughOptionType;
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the dropdown icon's DOM element.
2023-05-05 08:45:08 +00:00
*/
dropdownIcon?: CascadeSelectPassThroughOptionType;
2023-06-22 12:16:10 +00:00
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the loading icon's DOM element.
2023-06-22 12:16:10 +00:00
*/
loadingIcon?: CascadeSelectPassThroughOptionType;
2023-05-05 08:45:08 +00:00
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the panel's DOM element.
2023-05-05 08:45:08 +00:00
*/
panel?: CascadeSelectPassThroughOptionType;
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the list's DOM element.
2023-05-05 08:45:08 +00:00
*/
list?: CascadeSelectPassThroughOptionType;
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the item's DOM element.
2023-05-05 08:45:08 +00:00
*/
item?: CascadeSelectPassThroughOptionType;
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the content's DOM element.
2023-05-05 08:45:08 +00:00
*/
content?: CascadeSelectPassThroughOptionType;
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the text's DOM element.
2023-05-05 08:45:08 +00:00
*/
text?: CascadeSelectPassThroughOptionType;
2023-05-26 14:33:50 +00:00
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the group icon's DOM element.
2023-05-26 14:33:50 +00:00
*/
groupIcon?: CascadeSelectPassThroughOptionType;
2023-05-05 08:45:08 +00:00
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the hidden selected message's DOM element.
2023-05-05 08:45:08 +00:00
*/
2023-05-10 08:18:51 +00:00
hiddenSelectedMessage?: CascadeSelectPassThroughOptionType;
2023-05-05 08:45:08 +00:00
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to the search result message text aria's DOM element.
2023-05-05 08:45:08 +00:00
*/
2023-05-29 09:27:51 +00:00
hiddenSearchResult?: CascadeSelectPassThroughOptionType;
2023-07-06 11:09:01 +00:00
/**
2023-11-07 06:16:39 +00:00
* Used to manage all lifecycle hooks.
2023-07-06 11:09:01 +00:00
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
2023-08-02 12:00:02 +00:00
/**
* Used to control Vue Transition API.
*/
2023-08-02 14:07:22 +00:00
transition?: CascadeSelectPassThroughTransitionType;
2023-05-05 08:45:08 +00:00
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface CascadeSelectPassThroughAttributes {
[key: string]: any;
}
/**
* Defines focused item info
*/
export interface CascadeSelectFocusedOptionInfo {
/**
* Active item index
*/
index: number;
/**
* Active item level
*/
level: number;
/**
* Parent key info
*/
parentKey: string;
}
/**
* Defines current inline state in CascadeSelect component.
*/
export interface CascadeSelectState {
/**
* Current id state as a string
*/
id: string;
/**
* Current focused state as a boolean.
* @defaultValue false
*/
focused: boolean;
/**
* Current focused item info.
* @type {CascadeSelectFocusedOptionInfo}
*/
focusedOptionInfo: CascadeSelectFocusedOptionInfo;
/**
* Current focused state as a boolean.
* @defaultValue false
*/
activeOptionPath: any[];
/**
* Current overlay visible state as a boolean.
* @defaultValue false
*/
overlayVisible: boolean;
}
2023-03-01 08:50:17 +00:00
/**
* Defines valid properties in CascadeSelect component.
*/
2022-09-06 12:03:37 +00:00
export interface CascadeSelectProps {
/**
* Value of the component.
*/
modelValue?: any | undefined;
/**
* An array of selectitems to display as the available options.
*/
options?: any[] | undefined;
/**
* Property name or getter function to use as the label of an option.
*/
2023-03-01 08:50:17 +00:00
optionLabel?: string | ((data: any) => string) | undefined;
2022-09-06 12:03:37 +00:00
/**
* Property name or getter function to use as the value of an option, defaults to the option itself when not defined.
*/
2023-03-01 08:50:17 +00:00
optionValue?: string | ((data: any) => any) | undefined;
2022-09-06 12:03:37 +00:00
/**
* Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.
*/
2023-03-01 08:50:17 +00:00
optionDisabled?: string | ((data: any) => boolean) | undefined;
2022-09-06 12:03:37 +00:00
/**
* Property name or getter function to use as the label of an option group.
*/
2023-03-01 08:50:17 +00:00
optionGroupLabel?: string | ((data: any) => string) | undefined;
2022-09-06 12:03:37 +00:00
/**
* Property name or getter function to retrieve the items of a group.
*/
2023-03-01 08:50:17 +00:00
optionGroupChildren?: string[] | string | ((data: any) => any[]) | undefined;
2022-09-06 12:03:37 +00:00
/**
* Default text to display when no option is selected.
*/
placeholder?: string | undefined;
/**
* When present, it specifies that the component should be disabled.
2023-03-01 08:50:17 +00:00
* @defaultValue false
2022-09-06 12:03:37 +00:00
*/
disabled?: boolean | undefined;
/**
* A property to uniquely identify an option.
*/
dataKey?: string | undefined;
/**
* Identifier of the underlying input element.
*/
inputId?: string | undefined;
/**
* Inline style of the input field.
*/
inputStyle?: object | undefined;
2022-09-06 12:03:37 +00:00
/**
* Style class of the input field.
*/
inputClass?: string | object | undefined;
2022-09-06 12:03:37 +00:00
/**
2023-08-01 14:01:12 +00:00
* Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.
2022-09-06 12:03:37 +00:00
*/
inputProps?: InputHTMLAttributes | undefined;
/**
* Inline style of the overlay panel.
*/
panelStyle?: object | undefined;
2022-09-06 12:03:37 +00:00
/**
* Style class of the overlay panel.
*/
panelClass?: string | object | undefined;
2022-09-06 12:03:37 +00:00
/**
2023-08-01 14:01:12 +00:00
* Used to pass all properties of the HTMLDivElement to the overlay panel inside the component.
2022-09-06 12:03:37 +00:00
*/
panelProps?: HTMLAttributes | undefined;
/**
* A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are 'body' for document body and 'self' for the element itself.
2023-03-08 10:51:52 +00:00
* @defaultValue body
2022-09-06 12:03:37 +00:00
*/
2023-03-01 08:50:17 +00:00
appendTo?: 'body' | 'self' | string | undefined | HTMLElement;
2022-09-06 12:03:37 +00:00
/**
* Whether the dropdown is in loading state.
2023-03-01 08:50:17 +00:00
* @defaultValue false
2022-09-06 12:03:37 +00:00
*/
loading?: boolean | undefined;
2022-12-08 11:04:25 +00:00
/**
* Icon to display in the dropdown.
* @deprecated since v3.27.0. Use 'dropdownicon' slot.
2022-12-08 11:04:25 +00:00
*/
dropdownIcon?: string | undefined;
2022-09-06 12:03:37 +00:00
/**
* Icon to display in loading state.
* @deprecated since v3.27.0. Use 'loadingicon' slot.
2022-09-06 12:03:37 +00:00
*/
loadingIcon?: string | undefined;
2022-12-08 11:04:25 +00:00
/**
* Icon to display in the option group.
* @deprecated since v3.27.0. Use 'optiongroupicon' slot.
2022-12-08 11:04:25 +00:00
*/
optionGroupIcon?: string | undefined;
2022-09-06 12:03:37 +00:00
/**
* Whether to focus on the first visible or selected element when the overlay panel is shown.
2023-03-01 08:50:17 +00:00
* @defaultValue true
2022-09-06 12:03:37 +00:00
*/
autoOptionFocus?: boolean | undefined;
2022-09-14 11:26:01 +00:00
/**
* When enabled, the focused option is selected/opened.
2023-03-01 08:50:17 +00:00
* @defaultValue false
2022-09-14 11:26:01 +00:00
*/
selectOnFocus?: boolean | undefined;
2022-09-06 12:03:37 +00:00
/**
* Locale to use in searching. The default locale is the host environment's current locale.
*/
searchLocale?: string | undefined;
/**
* Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.
2023-03-08 11:02:08 +00:00
* @defaultValue '{0} results are available'
2022-09-06 12:03:37 +00:00
*/
searchMessage?: string | undefined;
/**
* Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration.
2023-03-08 11:02:08 +00:00
* @defaultValue '{0} items selected'
2022-09-06 12:03:37 +00:00
*/
selectionMessage?: string | undefined;
/**
* Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration.
2023-03-08 10:51:52 +00:00
* @defaultValue No selected item
2022-09-06 12:03:37 +00:00
*/
emptySelectionMessage?: string | undefined;
/**
* Text to display when filtering does not return any results. Defaults to value from PrimeVue locale configuration.
2023-03-08 10:51:52 +00:00
* @defaultValue No results found
2022-09-06 12:03:37 +00:00
*/
emptySearchMessage?: string | undefined;
/**
* Text to be displayed when there are no options available. Defaults to value from PrimeVue locale configuration.
2023-03-08 10:51:52 +00:00
* @defaultValue No available options
2022-09-06 12:03:37 +00:00
*/
emptyMessage?: string | undefined;
/**
* Index of the element in tabbing order.
*/
tabindex?: number | string | undefined;
/**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
*/
2023-11-24 12:21:54 +00:00
ariaLabelledby?: string | undefined;
2022-09-06 12:03:37 +00:00
/**
* Establishes a string value that labels the component.
*/
2023-11-24 12:21:54 +00:00
ariaLabel?: string | undefined;
2023-05-05 08:45:08 +00:00
/**
2023-08-01 14:01:12 +00:00
* Used to pass attributes to DOM elements inside the component.
2023-05-05 08:45:08 +00:00
* @type {CascadeSelectPassThroughOptions}
*/
pt?: PassThrough<CascadeSelectPassThroughOptions>;
2023-09-05 08:50:46 +00:00
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
2023-05-26 14:33:50 +00:00
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
2022-09-06 12:03:37 +00:00
}
2023-03-01 08:50:17 +00:00
/**
* Defines valid slots in CascadeSelect component.
*/
2022-09-06 12:03:37 +00:00
export interface CascadeSelectSlots {
/**
* Custom content for each option.
* @param {Object} scope - option slot's params.
*/
2023-03-01 08:50:17 +00:00
option(scope: {
2022-09-06 12:03:37 +00:00
/**
* Option instance
*/
option: any;
2023-03-01 08:50:17 +00:00
}): VNode[];
2022-09-06 12:03:37 +00:00
/**
* Custom value template.
* @param {CascadeSelectValueSlot} scope - value slot's params.
*/
2023-03-01 08:50:17 +00:00
value(scope: {
2022-09-06 12:03:37 +00:00
/**
* Value of the component
*/
value: any;
/**
* Placeholder text to show
*/
placeholder: string;
2023-03-01 08:50:17 +00:00
}): VNode[];
2022-09-06 12:03:37 +00:00
/**
* Custom indicator template.
* @deprecated since v3.27.0. Use 'dropdownicon or loadingicon' slots.
2022-09-06 12:03:37 +00:00
*/
2023-03-01 08:50:17 +00:00
indicator(): VNode[];
/**
* Custom dropdown icon template.
*/
dropdownicon(): VNode[];
/**
* Custom loading icon template.
*/
loadingicon(): VNode[];
/**
* Custom option group icon template.
*/
optiongroupicon(): VNode[];
2022-09-06 12:03:37 +00:00
}
2023-03-01 08:50:17 +00:00
/**
* Defines valid emits in CascadeSelect component.
*/
export interface CascadeSelectEmits {
2022-09-06 12:03:37 +00:00
/**
* Emitted when the value changes.
* @param {*} value - New value.
*/
2023-03-01 08:50:17 +00:00
'update:modelValue'(value: any): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke on value change.
* @param { CascadeSelectChangeEvent } event - Custom change event.
*/
2023-03-01 08:50:17 +00:00
change(event: CascadeSelectChangeEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when the component receives focus.
* @param {Event} event - Browser event.
*/
2023-03-01 08:50:17 +00:00
focus(event: Event): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when the component loses focus.
* @param {Event} event - Browser event.
*/
2023-03-01 08:50:17 +00:00
blur(event: Event): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke on click.
* @param { Event } event - Browser event.
*/
2023-03-01 08:50:17 +00:00
click(event: Event): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when a group changes.
* @param { CascadeSelectGroupChangeEvent } event - Custom change event.
*/
2023-03-01 08:50:17 +00:00
'group-change'(event: CascadeSelectGroupChangeEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke before the overlay is shown.
*/
2023-03-01 08:50:17 +00:00
'before-show'(): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke before the overlay is hidden.
*/
2023-03-01 08:50:17 +00:00
'before-hide'(): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when the overlay is shown.
*/
2023-03-01 08:50:17 +00:00
show(): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when the overlay is hidden.
*/
2023-03-01 08:50:17 +00:00
hide(): void;
}
2022-09-06 12:03:37 +00:00
2023-03-01 08:50:17 +00:00
/**
* **PrimeVue - CascadeSelect**
*
* _CascadeSelect is a form component to select a value from a nested structure of options._
*
* [Live Demo](https://www.primevue.org/cascadeselect/)
* --- ---
* ![PrimeVue(https://primefaces.org/cdn/primevue/images/logo-100.png)
*
* @group Component
*/
2023-03-01 14:48:23 +00:00
declare class CascadeSelect extends ClassComponent<CascadeSelectProps, CascadeSelectSlots, CascadeSelectEmits> {}
2022-09-06 12:03:37 +00:00
declare module '@vue/runtime-core' {
interface GlobalComponents {
2022-09-14 11:26:01 +00:00
CascadeSelect: GlobalComponentConstructor<CascadeSelect>;
2022-09-06 12:03:37 +00:00
}
}
export default CascadeSelect;