Fixed #1836 - For OrderList
parent
e468f64b80
commit
5deb7b18c0
|
@ -1,32 +1,135 @@
|
||||||
import { VNode } from 'vue';
|
import { VNode } from 'vue';
|
||||||
|
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
|
||||||
|
|
||||||
interface OrderListProps {
|
export interface OrderListReorderEvent {
|
||||||
|
/**
|
||||||
|
* Browser event
|
||||||
|
*/
|
||||||
|
originalEvent: Event;
|
||||||
|
/**
|
||||||
|
* Ordered list
|
||||||
|
*/
|
||||||
|
value: any[];
|
||||||
|
/**
|
||||||
|
* Direction of the change; "up", "down", "bottom", "top"
|
||||||
|
*/
|
||||||
|
direction: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface OrderListSelectionChangeEvent {
|
||||||
|
/**
|
||||||
|
* Browser event
|
||||||
|
*/
|
||||||
|
originalEvent: Event;
|
||||||
|
/**
|
||||||
|
* Ordered list
|
||||||
|
*/
|
||||||
|
value: any[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface OrderListProps {
|
||||||
|
/**
|
||||||
|
* Value of the component.
|
||||||
|
*/
|
||||||
modelValue?: any[];
|
modelValue?: any[];
|
||||||
dataKey?: string;
|
/**
|
||||||
|
* Name of the field that uniquely identifies the a record in the data.
|
||||||
|
*/
|
||||||
|
dataKey?: string | undefined;
|
||||||
|
/**
|
||||||
|
* Selected items in the list.
|
||||||
|
*/
|
||||||
selection?: any[];
|
selection?: any[];
|
||||||
metaKeySelection?: boolean;
|
/**
|
||||||
|
* 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.
|
||||||
|
* Default value is true.
|
||||||
|
*/
|
||||||
|
metaKeySelection?: boolean | undefined;
|
||||||
|
/**
|
||||||
|
* Inline style of the the list element.
|
||||||
|
*/
|
||||||
listStyle?: any;
|
listStyle?: any;
|
||||||
responsive?: boolean;
|
/**
|
||||||
breakpoint?: string;
|
* Whether the list optimizes layout based on screen size.
|
||||||
|
* Default value is true.
|
||||||
|
*/
|
||||||
|
responsive?: boolean | undefined;
|
||||||
|
/**
|
||||||
|
* The breakpoint to define the maximum width boundary when responsiveness is enabled.
|
||||||
|
* Default value is '960px'.
|
||||||
|
*/
|
||||||
|
breakpoint?: string | undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface OrderListItemSlotInterface {
|
export interface OrderListSlots {
|
||||||
item: any;
|
/**
|
||||||
index: number;
|
* Custom header template.
|
||||||
|
*/
|
||||||
|
header: () => VNode[];
|
||||||
|
/**
|
||||||
|
* Custom item template.
|
||||||
|
* @param {Object} scope - item slot's params.
|
||||||
|
*/
|
||||||
|
item: (scope: {
|
||||||
|
/**
|
||||||
|
* Item of the component
|
||||||
|
*/
|
||||||
|
item: any;
|
||||||
|
/**
|
||||||
|
* Index of the item.
|
||||||
|
*/
|
||||||
|
index: number;
|
||||||
|
}) => VNode[];
|
||||||
|
/**
|
||||||
|
* Custom controls start template.
|
||||||
|
*/
|
||||||
|
controlsstart: () => VNode[];
|
||||||
|
/**
|
||||||
|
* Custom controls end template.
|
||||||
|
*/
|
||||||
|
controlsend: () => VNode[];
|
||||||
}
|
}
|
||||||
|
|
||||||
declare class OrderList {
|
export declare type OrderListEmits = {
|
||||||
$props: OrderListProps;
|
/**
|
||||||
$emit(eventName: 'update:modelValue', value: any[]): this;
|
* Emitted when the value changes.
|
||||||
$emit(eventName: 'update:selection', value: any[]): this;
|
* @param {*} value - New value.
|
||||||
$emit(eventName: 'reorder', e: { originalEvent: Event, value: any[]; direction: string}): this;
|
*/
|
||||||
$emit(eventName: 'selection-change', e: { originalEvent: Event, value: any[]}): this;
|
'update:modelValue': (value: any[]) => void;
|
||||||
$slots: {
|
/**
|
||||||
header: VNode[];
|
* Emitted when the selection changes.
|
||||||
item: OrderListItemSlotInterface;
|
* @param {*} value - New value.
|
||||||
controlsstart: VNode[];
|
*/
|
||||||
controlsend: VNode[];
|
'update:selection': (value: any[]) => void;
|
||||||
|
/**
|
||||||
|
* Callback to invoke when the list is reordered.
|
||||||
|
* @param {OrderListReorderEvent} event - Custom reorder event.
|
||||||
|
*/
|
||||||
|
'reorder': (event: OrderListReorderEvent) => void;
|
||||||
|
/**
|
||||||
|
* Callback to invoke when selection changes.
|
||||||
|
* @param {OrderListSelectionChangeEvent} event - Custom selection change event.
|
||||||
|
*/
|
||||||
|
'selection-change': (event: OrderListSelectionChangeEvent) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare class OrderList extends ClassComponent<OrderListProps, OrderListSlots, OrderListEmits> { }
|
||||||
|
|
||||||
|
declare module '@vue/runtime-core' {
|
||||||
|
interface GlobalComponents {
|
||||||
|
OrderList: GlobalComponentConstructor<OrderList>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* OrderList is used to managed the order of a collection.
|
||||||
|
*
|
||||||
|
* Demos:
|
||||||
|
*
|
||||||
|
* - [OrderList](https://www.primefaces.org/primevue/showcase/#/orderlist)
|
||||||
|
*
|
||||||
|
*/
|
||||||
export default OrderList;
|
export default OrderList;
|
||||||
|
|
Loading…
Reference in New Issue