diff --git a/api-generator/components/picklist.js b/api-generator/components/picklist.js index 6ddd63b84..4f97179e9 100644 --- a/api-generator/components/picklist.js +++ b/api-generator/components/picklist.js @@ -59,6 +59,12 @@ const PickListProps = [ type: 'boolean', default: 'true', description: 'Whether to show buttons of target list.' + }, + { + name: 'pt', + type: 'any', + default: 'null', + description: 'Uses to pass attributes to DOM elements inside the component.' } ]; diff --git a/components/lib/config/PrimeVue.d.ts b/components/lib/config/PrimeVue.d.ts index dd1756951..999df85bb 100644 --- a/components/lib/config/PrimeVue.d.ts +++ b/components/lib/config/PrimeVue.d.ts @@ -49,6 +49,7 @@ import { PaginatorPassThroughOptions } from '../paginator'; import { PanelPassThroughOptions } from '../panel'; import { PanelMenuPassThroughOptions } from '../panelmenu'; import { PasswordPassThroughOptions } from '../password'; +import { PickListPassThroughOptions } from '../picklist'; import { ProgressBarPassThroughOptions } from '../progressbar'; import { ProgressSpinnerPassThroughOptions } from '../progressspinner'; import { RadioButtonPassThroughOptions } from '../radiobutton'; @@ -141,6 +142,7 @@ interface PrimeVuePTOptions { panel?: PanelPassThroughOptions; panelmenu?: PanelMenuPassThroughOptions; password?: PasswordPassThroughOptions; + picklist?: PickListPassThroughOptions; progressbar?: ProgressBarPassThroughOptions; progressspinner?: ProgressSpinnerPassThroughOptions; radiobutton?: RadioButtonPassThroughOptions; diff --git a/components/lib/picklist/PickList.d.ts b/components/lib/picklist/PickList.d.ts index 505c937e9..c1ca36c9b 100755 --- a/components/lib/picklist/PickList.d.ts +++ b/components/lib/picklist/PickList.d.ts @@ -8,8 +8,19 @@ * */ import { ButtonHTMLAttributes, HTMLAttributes, VNode } from 'vue'; +import { ButtonPassThroughOptionType } from '../button'; import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers'; +export declare type PickListPassThroughOptionType = PickListPassThroughAttributes | ((options: PickListPassThroughMethodOptions) => PickListPassThroughAttributes) | null | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface PickListPassThroughMethodOptions { + props: PickListProps; + state: PickListState; +} + /** * Custom reorder event. * @see {@link PickListEmits.reorder} @@ -84,6 +95,132 @@ export interface PickListMoveToSourceEvent extends PickListMoveToTargetEvent {} */ export interface PickListMoveAllToSourceEvent extends PickListMoveToTargetEvent {} +/** + * Custom passthrough(pt) options. + * @see {@link PickListProps.pt} + */ +export interface PickListPassThroughOptions { + /** + * Uses to pass attributes to the root's DOM element. + */ + root?: PickListPassThroughOptionType; + /** + * Uses to pass attributes to the source controls' DOM element. + */ + sourceControls?: PickListPassThroughOptionType; + /** + * Uses to pass attributes to the Button component. + */ + sourceMoveUpButton?: ButtonPassThroughOptionType; + /** + * Uses to pass attributes to the Button component. + */ + sourceMoveTopButton?: ButtonPassThroughOptionType; + /** + * Uses to pass attributes to the Button component. + */ + sourceMoveDownButton?: ButtonPassThroughOptionType; + /** + * Uses to pass attributes to the Button component. + */ + sourceMoveBottomButton?: ButtonPassThroughOptionType; + /** + * Uses to pass attributes to the source wrapper's DOM element. + */ + sourceWrapper?: PickListPassThroughOptionType; + /** + * Uses to pass attributes to the source header's DOM element. + */ + sourceHeader?: PickListPassThroughOptionType; + /** + * Uses to pass attributes to the source list's DOM element. + */ + sourceList?: PickListPassThroughOptionType; + /** + * Uses to pass attributes to the buttons' DOM element. + */ + buttons?: PickListPassThroughOptionType; + /** + * Uses to pass attributes to the Button component. + */ + moveToTargetButton?: ButtonPassThroughOptionType; + /** + * Uses to pass attributes to the Button component. + */ + moveAllToTargetButton?: ButtonPassThroughOptionType; + /** + * Uses to pass attributes to the Button component. + */ + moveToSourceButton?: ButtonPassThroughOptionType; + /** + * Uses to pass attributes to the Button component. + */ + moveAllToSourceButton?: ButtonPassThroughOptionType; + /** + * Uses to pass attributes to the target wrapper's DOM element. + */ + targetWrapper?: PickListPassThroughOptionType; + /** + * Uses to pass attributes to the target header's DOM element. + */ + targetHeader?: PickListPassThroughOptionType; + /** + * Uses to pass attributes to the target list's DOM element. + */ + targetList?: PickListPassThroughOptionType; + /** + * Uses to pass attributes to the target controls' DOM element. + */ + targetControls?: PickListPassThroughOptionType; + /** + * Uses to pass attributes to the Button component. + */ + targetMoveUpButton?: ButtonPassThroughOptionType; + /** + * Uses to pass attributes to the Button component. + */ + targetMoveTopButton?: ButtonPassThroughOptionType; + /** + * Uses to pass attributes to the Button component. + */ + targetMoveDownButton?: ButtonPassThroughOptionType; + /** + * Uses to pass attributes to the Button component. + */ + targetMoveBottomButton?: ButtonPassThroughOptionType; +} + +/** + * Custom passthrough attributes for each DOM elements + */ +export interface PickListPassThroughAttributes { + [key: string]: any; +} + +/** + * Defines current inline state in PickList component. + */ +export interface PickListState { + /** + * Current id state as a string. + */ + id: string; + /** + * Current id state as a string. + */ + d_selection: any[]; + /** + * Current focused state as a boolean. + * @defaultValue false + */ + focused: boolean; + /** + * Current focused item index as a number. + * @defaultvalue -1 + */ + focusedOptionIndex: number; +} + /** * Defines valid properties in PickList component. */ @@ -180,6 +317,11 @@ export interface PickListProps { * Uses to pass all properties of the HTMLButtonElement to the move all to source button inside the component. */ moveAllToSourceProps?: ButtonHTMLAttributes | undefined; + /** + * Uses to pass attributes to DOM elements inside the component. + * @type {PickListPassThroughOptions} + */ + pt?: PickListPassThroughOptions; } /** diff --git a/components/lib/picklist/PickList.vue b/components/lib/picklist/PickList.vue index 0e38e5a1a..a05710dd7 100755 --- a/components/lib/picklist/PickList.vue +++ b/components/lib/picklist/PickList.vue @@ -1,39 +1,39 @@