primevue-mirror/components/picklist/PickList.d.ts

307 lines
8.6 KiB
TypeScript
Raw Normal View History

2023-03-01 11:46:01 +00:00
/**
*
* PickList is used to reorder items between different lists.
*
2023-03-02 08:32:40 +00:00
* - [Live Demo](https://primevue.org//picklist)
2023-03-01 11:46:01 +00:00
*
* @module picklist
*
*/
2022-12-08 11:04:25 +00:00
import { ButtonHTMLAttributes, HTMLAttributes, VNode } from 'vue';
2022-09-06 12:03:37 +00:00
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
2023-03-01 11:46:01 +00:00
/**
* Custom reorder event.
* @see reorder
*/
2022-09-06 12:03:37 +00:00
export interface PickListReorderEvent {
/**
* Browser event
*/
originalEvent: Event;
/**
* Ordered list
*/
value: any[];
/**
* Direction of the change; 'up', 'down', 'bottom', 'top'
*/
direction: string;
/**
* Index of the list that is ordered, 0 represents the source and 1 represents the target list.
*/
listIndex: number;
}
2023-03-01 11:46:01 +00:00
/**
* Custom selection change event.
* @see selection-change
*/
2022-09-06 12:03:37 +00:00
export interface PickListSelectionChangeEvent {
/**
* Browser event
*/
originalEvent: Event;
/**
* Selected item
*/
value: any[];
}
2023-03-01 11:46:01 +00:00
/**
* Custom move-to-target event.
* @see move-to-target
*/
2022-09-06 12:03:37 +00:00
export interface PickListMoveToTargetEvent {
/**
* Browser event
*/
originalEvent: Event;
/**
* Moved items
*/
items: any[];
}
/**
2023-03-01 11:46:01 +00:00
* Custom move-all-to-target event.
* @see move-to-target
2022-09-06 12:03:37 +00:00
* @extends PickListMoveToTargetEvent
*/
2022-09-14 11:26:01 +00:00
export interface PickListMoveAllToTargetEvent extends PickListMoveToTargetEvent {}
2022-09-06 12:03:37 +00:00
/**
2023-03-01 11:46:01 +00:00
* Custom move-to-source event.
* @see move-to-target
2022-09-06 12:03:37 +00:00
* @extends PickListMoveToTargetEvent
*/
2022-09-14 11:26:01 +00:00
export interface PickListMoveToSourceEvent extends PickListMoveToTargetEvent {}
2022-09-06 12:03:37 +00:00
/**
2023-03-01 11:46:01 +00:00
* Custom move-all-to-source event.
* @see move-to-target
2022-09-06 12:03:37 +00:00
* @extends PickListMoveToTargetEvent
*/
2022-09-14 11:26:01 +00:00
export interface PickListMoveAllToSourceEvent extends PickListMoveToTargetEvent {}
2022-09-06 12:03:37 +00:00
2023-03-01 11:46:01 +00:00
/**
* Defines valid properties in PickList component.
*/
2022-09-06 12:03:37 +00:00
export interface PickListProps {
/**
* Value of the component as a multidimensional array.
*/
modelValue?: any[][] | undefined;
/**
* Selected items in the list as a multidimensional array.
*/
selection?: any[][] | undefined;
/**
* Name of the field that uniquely identifies the a record in the data.
*/
dataKey?: string | undefined;
/**
* Defines whether metaKey is requred or not for the selection.
* When true metaKey needs to be pressed to select or unselect an item and
* when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
2023-03-01 11:46:01 +00:00
* @defaultValue true
2022-09-06 12:03:37 +00:00
*/
metaKeySelection?: boolean | undefined;
/**
* Inline style of the the list element.
*/
listStyle?: any | undefined;
/**
* Whether the list optimizes layout based on screen size.
2023-03-01 11:46:01 +00:00
* @defaultValue true
2022-09-06 12:03:37 +00:00
*/
responsive?: boolean | undefined;
/**
* The breakpoint to define the maximum width boundary when responsiveness is enabled.
2023-03-01 11:46:01 +00:00
* @defaultValue 960px
2022-09-06 12:03:37 +00:00
*/
breakpoint?: string | undefined;
/**
* Whether to displays rows with alternating colors.
2023-03-01 11:46:01 +00:00
* @defaultValue false
2022-09-06 12:03:37 +00:00
*/
stripedRows?: boolean | undefined;
/**
* Whether to show buttons of source list.
2023-03-01 11:46:01 +00:00
* @defaultValue false
2022-09-06 12:03:37 +00:00
*/
showSourceControls?: boolean | undefined;
/**
* Whether to show buttons of target list.
2023-03-01 11:46:01 +00:00
* @defaultValue false
2022-09-06 12:03:37 +00:00
*/
showTargetControls?: boolean | undefined;
2022-12-08 11:04:25 +00:00
/**
* Index of the list element in tabbing order.
*/
tabindex?: number | string | undefined;
/**
* Uses to pass all properties of the HTMLAttributes to the target list element.
*/
targetListProps?: HTMLAttributes | undefined;
/**
* Uses to pass all properties of the HTMLAttributes to the source list element.
*/
sourceListProps?: HTMLAttributes | undefined;
/**
* Uses to pass all properties of the HTMLButtonElement to the move up button inside the component.
*/
moveUpButtonProps?: ButtonHTMLAttributes | undefined;
/**
* Uses to pass all properties of the HTMLButtonElement to the move top button inside the component.
*/
moveTopButtonProps?: ButtonHTMLAttributes | undefined;
/**
* Uses to pass all properties of the HTMLButtonElement to the move down button inside the component.
*/
moveDownButtonProps?: ButtonHTMLAttributes | undefined;
/**
* Uses to pass all properties of the HTMLButtonElement to the move bottom button inside the component.
*/
moveBottomButtonProps?: ButtonHTMLAttributes | undefined;
/**
* Uses to pass all properties of the HTMLButtonElement to the move to target button inside the component.
*/
moveToTargetProps?: ButtonHTMLAttributes | undefined;
/**
* Uses to pass all properties of the HTMLButtonElement to the move all to target button inside the component.
*/
moveAllToTargetProps?: ButtonHTMLAttributes | undefined;
/**
* Uses to pass all properties of the HTMLButtonElement to the move to source button inside the component.
*/
moveToSourceProps?: ButtonHTMLAttributes | undefined;
/**
* Uses to pass all properties of the HTMLButtonElement to the move all to source button inside the component.
*/
moveAllToSourceProps?: ButtonHTMLAttributes | undefined;
2022-09-06 12:03:37 +00:00
}
2023-03-01 11:46:01 +00:00
/**
* Defines valid slots in PickList component.
*/
2022-09-06 12:03:37 +00:00
export interface PickListSlots {
/**
* Custom header template.
*/
2023-03-01 11:46:01 +00:00
header(): VNode[];
2022-09-06 12:03:37 +00:00
/**
* Custom item template.
* @param {Object} scope - item slot's params.
*/
2023-03-01 11:46:01 +00:00
item(scope: {
2022-09-06 12:03:37 +00:00
/**
* Item of the component
*/
item: any;
/**
* Index of the item
*/
index: number;
2023-03-01 11:46:01 +00:00
}): VNode[];
2022-09-06 12:03:37 +00:00
/**
* Custom source header template.
*/
2023-03-01 11:46:01 +00:00
sourceheader(): VNode[];
2022-09-06 12:03:37 +00:00
/**
* Custom target header template.
*/
2023-03-01 11:46:01 +00:00
targetheader(): VNode[];
2022-09-06 12:03:37 +00:00
/**
* Custom source controls start template.
*/
2023-03-01 11:46:01 +00:00
sourcecontrolsstart(): VNode[];
2022-09-14 11:26:01 +00:00
/**
2022-09-06 12:03:37 +00:00
* Custom source controls end template.
*/
2023-03-01 11:46:01 +00:00
sourcecontrolsend(): VNode[];
2022-09-06 12:03:37 +00:00
/**
* Custom move controls start template.
*/
2023-03-01 11:46:01 +00:00
movecontrolsstart(): VNode[];
2022-09-06 12:03:37 +00:00
/**
* Custom move controls end template.
*/
2023-03-01 11:46:01 +00:00
movecontrolsend(): VNode[];
2022-09-06 12:03:37 +00:00
/**
* Custom target controls start template.
*/
2023-03-01 11:46:01 +00:00
targetcontrolsstart(): VNode[];
2022-09-06 12:03:37 +00:00
/**
* Custom target controls end template.
*/
2023-03-01 11:46:01 +00:00
targetcontrolsend(): VNode[];
2022-09-06 12:03:37 +00:00
}
2023-03-01 11:46:01 +00:00
/**
* Defines valid emits in PickList component.
*/
export interface PickListEmits {
2022-09-06 12:03:37 +00:00
/**
* Emitted when the value changes.
* @param {*} value - New value.
*/
2023-03-01 11:46:01 +00:00
'update:modelValue'(value: any[][]): void;
2022-09-06 12:03:37 +00:00
/**
* Emitted when the selection changes.
* @param {*} value - New value.
*/
2023-03-01 11:46:01 +00:00
'update:selection'(value: any[][]): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when the list is reordered.
* @param {PickListReorderEvent} event - Custom reorder event.
*/
2023-03-01 11:46:01 +00:00
reorder(event: PickListReorderEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when one or more items are moved to the other list.
* @param {PickListSelectionChangeEvent} event - Custom selection change event.
*/
2023-03-01 11:46:01 +00:00
'selection-change'(event: PickListSelectionChangeEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when one or more items are moved to the target list.
* @param {PickListMoveToTargetEvent} event - Custom move to target event.
*/
2023-03-01 11:46:01 +00:00
'move-to-target'(event: PickListMoveToTargetEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when all items are moved to the target list.
* @param {PickListMoveAllToTargetEvent} event - Custom move all to target event.
*/
2023-03-01 11:46:01 +00:00
'move-all-to-target'(event: PickListMoveAllToTargetEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when one or more items are moved to the source list.
* @param {PickListMoveToSourceEvent} event - Custom move to source event.
*/
2023-03-01 11:46:01 +00:00
'move-to-source'(event: PickListMoveToSourceEvent): void;
2022-09-06 12:03:37 +00:00
/**
* Callback to invoke when all items are moved to the source list.
* @param {PickListMoveAllToSourceEvent} event - Custom move all to source event.
*/
2023-03-01 11:46:01 +00:00
'move-all-to-source'(event: PickListMoveAllToSourceEvent): void;
}
2022-09-06 12:03:37 +00:00
2023-03-01 11:46:01 +00:00
/**
* **PrimeVue - PickList**
*
* _PickList is used to reorder items between different lists._
*
* [Live Demo](https://www.primevue.org/picklist/)
* --- ---
* ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
*
* @group Component
*/
2022-09-14 11:26:01 +00:00
declare class PickList extends ClassComponent<PickListProps, PickListSlots, PickListEmits> {}
2022-09-06 12:03:37 +00:00
declare module '@vue/runtime-core' {
interface GlobalComponents {
2022-09-14 11:26:01 +00:00
PickList: GlobalComponentConstructor<PickList>;
2022-09-06 12:03:37 +00:00
}
}
export default PickList;