Skip to content

fix(select,multiselect,listbox): enable generic type inference for options and slots #8484

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
YevheniiKotyrlo wants to merge 1 commit into
base: master
Choose a base branch
from
+72 −48
Open

fix(select,multiselect,listbox): enable generic type inference for options and slots #8484

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 24 additions & 16 deletions packages/primevue/src/listbox/Listbox.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import type { InputIconPassThroughOptions } from 'primevue/inputicon';
import type { InputTextPassThroughOptions } from 'primevue/inputtext';
import type { PassThroughOptions } from 'primevue/passthrough';
import type { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from 'primevue/virtualscroller';
import { VNode } from 'vue';
import { AllowedComponentProps, ComponentCustomProps, VNode, VNodeProps } from 'vue';

export declare type ListboxPassThroughOptionType<T = any> = ListboxPassThroughAttributes | ((options: ListboxPassThroughMethodOptions<T>) => ListboxPassThroughAttributes | string) | string | null | undefined;

Expand Down Expand Up @@ -258,7 +258,7 @@ export interface ListboxContext {
/**
* Defines valid properties in Listbox component.
*/
export interface ListboxProps {
export interface ListboxProps<T = any> {
/**
* Value of the component.
*/
Expand All @@ -274,27 +274,27 @@ export interface ListboxProps {
/**
* An array of selectitems to display as the available options.
*/
options?: any[] | undefined;
options?: T[] | undefined;
/**
* Property name or getter function to use as the label of an option.
*/
optionLabel?: string | ((data: any) => string) | undefined;
optionLabel?: string | ((data: T) => string) | undefined;
/**
* Property name or getter function to use as the value of an option, defaults to the option itself when not defined.
*/
optionValue?: string | ((data: any) => any) | undefined;
optionValue?: string | ((data: T) => any) | undefined;
/**
* Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.
*/
optionDisabled?: string | ((data: any) => boolean) | undefined;
optionDisabled?: string | ((data: T) => boolean) | undefined;
/**
* Property name or getter function to use as the label of an option group.
*/
optionGroupLabel?: string | ((data: any) => string) | undefined;
optionGroupLabel?: string | ((data: T) => string) | undefined;
/**
* Property name or getter function that refers to the children options of option group.
*/
optionGroupChildren?: string | ((data: any) => any[]) | undefined;
optionGroupChildren?: string | ((data: T) => any[]) | undefined;
/**
* Inline style of inner list element.
*/
Expand Down Expand Up @@ -460,7 +460,7 @@ export interface ListboxProps {
/**
* Defines valid slots in Listbox component.
*/
export interface ListboxSlots {
export interface ListboxSlots<T = any> {
/**
* Custom header template.
* @param {Object} scope - header slot's params.
Expand All @@ -473,7 +473,7 @@ export interface ListboxSlots {
/**
* Displayed options
*/
options: any[];
options: T[];
}): VNode[];
/**
* Custom footer template.
Expand All @@ -487,7 +487,7 @@ export interface ListboxSlots {
/**
* Displayed options
*/
options: any[];
options: T[];
}): VNode[];
/**
* Custom option template.
Expand All @@ -497,7 +497,7 @@ export interface ListboxSlots {
/**
* Option instance
*/
option: any;
option: T;
/**
* Selection state
*/
Expand All @@ -515,7 +515,7 @@ export interface ListboxSlots {
/**
* Option instance
*/
option: any;
option: T;
/**
* Index of the option
*/
Expand Down Expand Up @@ -562,7 +562,7 @@ export interface ListboxSlots {
/**
* Options of the loader items for virtualscroller
*/
options: any[];
options: T[];
}): VNode[];
/**
* Custom filter icon template.
Expand Down Expand Up @@ -636,11 +636,19 @@ export declare type ListboxEmits = EmitFn<ListboxEmitsOptions>;
* @group Component
*
*/
declare const Listbox: DefineComponent<ListboxProps, ListboxSlots, ListboxEmits>;
declare const Listbox: {
new <T = any>(
props: ListboxProps<T>
): {
$props: ListboxProps<T> & VNodeProps & AllowedComponentProps & ComponentCustomProps;
$slots: ListboxSlots<T>;
$emit: EmitFn<ListboxEmitsOptions>;
};
};

declare module 'vue' {
export interface GlobalComponents {
Listbox: DefineComponent<ListboxProps, ListboxSlots, ListboxEmits>;
Listbox: typeof Listbox;
}
}

Expand Down
40 changes: 24 additions & 16 deletions packages/primevue/src/multiselect/MultiSelect.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import type { InputIconPassThroughOptions } from 'primevue/inputicon';
import type { InputTextPassThroughOptions } from 'primevue/inputtext';
import type { PassThroughOptions } from 'primevue/passthrough';
import type { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from 'primevue/virtualscroller';
import { TransitionProps, VNode } from 'vue';
import { AllowedComponentProps, ComponentCustomProps, TransitionProps, VNode, VNodeProps } from 'vue';

export declare type MultiSelectPassThroughOptionType = MultiSelectPassThroughAttributes | ((options: MultiSelectPassThroughMethodOptions) => MultiSelectPassThroughAttributes | string) | string | null | undefined;

Expand Down Expand Up @@ -315,7 +315,7 @@ export interface MultiSelectContext {
/**
* Defines valid properties in MultiSelect component.
*/
export interface MultiSelectProps {
export interface MultiSelectProps<T = any> {
/**
* Value of the component.
*/
Expand All @@ -331,27 +331,27 @@ export interface MultiSelectProps {
/**
* An array of select items to display as the available options.
*/
options?: any[] | undefined;
options?: T[] | undefined;
/**
* Property name or getter function to use as the label of an option.
*/
optionLabel?: string | ((data: any) => string) | undefined;
optionLabel?: string | ((data: T) => string) | undefined;
/**
* Property name or getter function to use as the value of an option, defaults to the option itself when not defined.
*/
optionValue?: string | ((data: any) => any) | undefined;
optionValue?: string | ((data: T) => any) | undefined;
/**
* Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.
*/
optionDisabled?: string | ((data: any) => boolean) | undefined;
optionDisabled?: string | ((data: T) => boolean) | undefined;
/**
* Property name or getter function to use as the label of an option group.
*/
optionGroupLabel?: string | ((data: any) => string) | undefined;
optionGroupLabel?: string | ((data: T) => string) | undefined;
/**
* Property name or getter function that refers to the children options of option group.
*/
optionGroupChildren?: string | ((data: any) => any[]) | undefined;
optionGroupChildren?: string | ((data: T) => any[]) | undefined;
/**
* Height of the viewport, a scrollbar is defined if height of list exceeds this value.
* @defaultValue 14rem
Expand Down Expand Up @@ -604,7 +604,7 @@ export interface MultiSelectProps {
/**
* Defines valid slots in MultiSelect component.
*/
export interface MultiSelectSlots {
export interface MultiSelectSlots<T = any> {
/**
* Custom value template.
* @param {Object} scope - value slot's params.
Expand Down Expand Up @@ -647,7 +647,7 @@ export interface MultiSelectSlots {
/**
* Displayed options
*/
options: any[];
options: T[];
}): VNode[];
/**
* Custom footer template.
Expand All @@ -661,7 +661,7 @@ export interface MultiSelectSlots {
/**
* Displayed options
*/
options: any[];
options: T[];
}): VNode[];
/**
* Custom option template.
Expand All @@ -671,7 +671,7 @@ export interface MultiSelectSlots {
/**
* Option instance
*/
option: any;
option: T;
/**
* Selection state
*/
Expand All @@ -689,7 +689,7 @@ export interface MultiSelectSlots {
/**
* Option instance
*/
option: any;
option: T;
/**
* Index of the option
*/
Expand Down Expand Up @@ -736,7 +736,7 @@ export interface MultiSelectSlots {
/**
* Options of the loader items for virtualscroller
*/
options: any[];
options: T[];
}): VNode[];
/**
* @deprecated since v4.0. Use 'chipicon' slot instead.
Expand Down Expand Up @@ -938,11 +938,19 @@ export interface MultiSelectMethods {
* @group Component
*
*/
declare const MultiSelect: DefineComponent<MultiSelectProps, MultiSelectSlots, MultiSelectEmits, MultiSelectMethods>;
declare const MultiSelect: {
new <T = any>(
props: MultiSelectProps<T>
): {
$props: MultiSelectProps<T> & VNodeProps & AllowedComponentProps & ComponentCustomProps;
$slots: MultiSelectSlots<T>;
$emit: EmitFn<MultiSelectEmitsOptions>;
} & MultiSelectMethods;
};

declare module 'vue' {
export interface GlobalComponents {
MultiSelect: DefineComponent<MultiSelectProps, MultiSelectSlots, MultiSelectEmits, MultiSelectMethods>;
MultiSelect: typeof MultiSelect;
}
}

Expand Down
40 changes: 24 additions & 16 deletions packages/primevue/src/select/Select.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import type { InputIconPassThroughOptions } from 'primevue/inputicon';
import type { InputTextPassThroughOptions } from 'primevue/inputtext';
import type { PassThroughOptions } from 'primevue/passthrough';
import type { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from 'primevue/virtualscroller';
import { TransitionProps, VNode } from 'vue';
import { AllowedComponentProps, ComponentCustomProps, TransitionProps, VNode, VNodeProps } from 'vue';

export declare type SelectPassThroughOptionType<T = any> = SelectPassThroughAttributes | ((options: SelectPassThroughMethodOptions<T>) => SelectPassThroughAttributes | string) | string | null | undefined;

Expand Down Expand Up @@ -290,7 +290,7 @@ export interface SelectContext {
/**
* Defines valid properties in Select component.
*/
export interface SelectProps {
export interface SelectProps<T = any> {
/**
* Value of the component.
*/
Expand All @@ -306,27 +306,27 @@ export interface SelectProps {
/**
* An array of select items to display as the available options.
*/
options?: any[];
options?: T[];
/**
* Property name or getter function to use as the label of an option.
*/
optionLabel?: string | ((data: any) => string) | undefined;
optionLabel?: string | ((data: T) => string) | undefined;
/**
* Property name or getter function to use as the value of an option, defaults to the option itself when not defined.
*/
optionValue?: string | ((data: any) => any) | undefined;
optionValue?: string | ((data: T) => any) | undefined;
/**
* Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.
*/
optionDisabled?: string | ((data: any) => boolean) | undefined;
optionDisabled?: string | ((data: T) => boolean) | undefined;
/**
* Property name or getter function to use as the label of an option group.
*/
optionGroupLabel?: string | ((data: any) => string) | undefined;
optionGroupLabel?: string | ((data: T) => string) | undefined;
/**
* Property name or getter function that refers to the children options of option group.
*/
optionGroupChildren?: string | ((data: any) => any[]) | undefined;
optionGroupChildren?: string | ((data: T) => any[]) | undefined;
/**
* Height of the viewport, a scrollbar is defined if height of list exceeds this value.
* @defaultValue 14rem
Expand Down Expand Up @@ -576,7 +576,7 @@ export interface SelectProps {
/**
* Defines valid slots in Select component.
*/
export interface SelectSlots {
export interface SelectSlots<T = any> {
/**
* Custom value template.
* @param {Object} scope - value slot's params.
Expand All @@ -603,7 +603,7 @@ export interface SelectSlots {
/**
* Displayed options
*/
options: any[];
options: T[];
}): VNode[];
/**
* Custom footer template of panel.
Expand All @@ -617,7 +617,7 @@ export interface SelectSlots {
/**
* Displayed options
*/
options: any[];
options: T[];
}): VNode[];
/**
* Custom option template.
Expand All @@ -627,7 +627,7 @@ export interface SelectSlots {
/**
* Option instance
*/
option: any;
option: T;
/**
* Selection state
*/
Expand All @@ -645,7 +645,7 @@ export interface SelectSlots {
/**
* Option instance
*/
option: any;
option: T;
/**
* Index of the option
*/
Expand Down Expand Up @@ -692,7 +692,7 @@ export interface SelectSlots {
/**
* Options of the loader items for virtualscroller
*/
options: any[];
options: T[];
}): VNode[];
/**
* Custom clear icon template.
Expand Down Expand Up @@ -822,11 +822,19 @@ export interface SelectMethods {
* @group Component
*
*/
declare const Select: DefineComponent<SelectProps, SelectSlots, SelectEmits, SelectMethods>;
declare const Select: {
new <T = any>(
props: SelectProps<T>
): {
$props: SelectProps<T> & VNodeProps & AllowedComponentProps & ComponentCustomProps;
$slots: SelectSlots<T>;
$emit: EmitFn<SelectEmitsOptions>;
} & SelectMethods;
};

declare module 'vue' {
export interface GlobalComponents {
Select: DefineComponent<SelectProps, SelectSlots, SelectEmits, SelectMethods>;
Select: typeof Select;
}
}

Expand Down