import type { ButtonCustomElementType } from "../Button/index.js";
import type { QAProps } from "../types.js";
export type ActionName = 'previous' | 'next' | 'first';
export type PaginationSize = 's' | 'm' | 'l' | 'xl';
export type PaginationView = 'outlined' | 'clear';
export type PaginationPageComponent = ButtonCustomElementType | 'a';
export type PaginationPagePropsGetterArgs = {
item: PageItem | ButtonItem;
/** Page the item navigates to (e.g. for building an `href`/`to`). */
page: number;
};
export type PaginationPagePropsGetter
= Record> = (args: PaginationPagePropsGetterArgs) => P;
export type PaginationProps = {
/**
* Current page number.
*/
page: number;
/**
* Number of data items per page.
*/
pageSize: number;
/**
* Size of the pagination items.
*/
size?: PaginationSize;
/**
* Called when the page number or pageSize is changed.
*/
onUpdate: (page: number, pageSize: number) => void;
/**
* Total number of data items.
*/
total?: number;
/**
* Specify the sizeChanger options.
*/
pageSizeOptions?: number[];
/**
* Hide first, previous, next buttons title.
* Default true.
*/
compact?: boolean;
/**
* Show input to navigate to pages directly.
* Default false.
*/
showInput?: boolean;
/**
* Show pages numeration.
* Default true.
*/
showPages?: boolean;
/**
* ClassName of element
*/
className?: string;
/**
* Sets buttons' and controls' appearance.
* Affects pagination input's view in mobile.
* Default outlined.
*/
view?: PaginationView;
/**
* Overrides the root element for clickable pagination items
* (navigation buttons and page buttons).
*/
pageComponent?: PaginationPageComponent;
/**
* Returns extra props per clickable item (e.g. `to` for a router `Link`).
* Only applied when `pageComponent` is set; ignored otherwise (and if disabled).
*/
getPageProps?: PaginationPagePropsGetter;
} & QAProps;
type EllipsisItem = {
type: 'ellipsis';
};
type PageOfItem = {
type: 'pageOf';
};
export type PageItem = {
type: 'page';
current: boolean;
page: number;
simple: boolean;
key: number;
};
export type ButtonItem = {
type: 'button';
action: ActionName;
disabled: boolean;
};
export type PaginationItem = EllipsisItem | PageOfItem | PageItem | ButtonItem;
export {};