129 lines
3.5 KiB
JavaScript
129 lines
3.5 KiB
JavaScript
const PaginatorProps = [
|
|
{
|
|
name: 'totalRecords',
|
|
type: 'number',
|
|
default: '0',
|
|
description: 'Number of total records.'
|
|
},
|
|
{
|
|
name: 'rows',
|
|
type: 'number',
|
|
default: '0',
|
|
description: 'Data count to display per page.'
|
|
},
|
|
{
|
|
name: 'first',
|
|
type: 'number',
|
|
default: '0',
|
|
description: 'Zero-relative number of the first row to be displayed.'
|
|
},
|
|
{
|
|
name: 'pageLinkSize',
|
|
type: 'number',
|
|
default: '5',
|
|
description: 'Number of page links to display.'
|
|
},
|
|
{
|
|
name: 'rowsPerPageOptions',
|
|
type: 'array',
|
|
default: 'null',
|
|
description: 'Array of integer values to display inside rows per page dropdown.'
|
|
},
|
|
{
|
|
name: 'template',
|
|
type: 'string',
|
|
default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
|
|
description: 'Template of the paginator.'
|
|
},
|
|
{
|
|
name: 'currentPageReportTemplate',
|
|
type: 'string',
|
|
default: '({currentPage} of {totalPages})',
|
|
description: 'Template of the current page report element. Available placeholders are {currentPage},{totalPages},{rows},{first},{last} and {totalRecords}'
|
|
},
|
|
{
|
|
name: 'alwaysShow',
|
|
type: 'boolean',
|
|
default: 'true',
|
|
description: 'Whether to show the paginator even there is only one page.'
|
|
},
|
|
{
|
|
name: 'pt',
|
|
type: 'any',
|
|
default: 'null',
|
|
description: 'Used to pass attributes to DOM elements inside the component.'
|
|
},
|
|
{
|
|
name: 'unstyled',
|
|
type: 'boolean',
|
|
default: 'false',
|
|
description: 'When enabled, it removes component related styles in the core.'
|
|
}
|
|
];
|
|
|
|
const PaginatorEvents = [
|
|
{
|
|
name: 'page',
|
|
description: 'Callback to invoke when page changes, the event object contains information about the new state.',
|
|
arguments: [
|
|
{
|
|
name: 'event.page',
|
|
type: 'number',
|
|
description: 'New page number'
|
|
},
|
|
{
|
|
name: 'event.first',
|
|
type: 'number',
|
|
description: 'Index of first record'
|
|
},
|
|
{
|
|
name: 'event.rows',
|
|
type: 'number',
|
|
description: 'Number of rows to display in new page'
|
|
},
|
|
{
|
|
name: 'event.pageCount',
|
|
type: 'number',
|
|
description: 'Total number of pages'
|
|
}
|
|
]
|
|
}
|
|
];
|
|
|
|
const PaginatorSlots = [
|
|
{
|
|
name: 'start',
|
|
description: "Custom content for the component's left side."
|
|
},
|
|
{
|
|
name: 'end',
|
|
description: "Custom content for the component's right side."
|
|
},
|
|
{
|
|
name: 'firstpagelinkicon',
|
|
description: 'Custom first page link icon template.'
|
|
},
|
|
{
|
|
name: 'prevpagelinkicon',
|
|
description: 'Custom previous page link icon template.'
|
|
},
|
|
{
|
|
name: 'nextpagelinkicon',
|
|
description: 'Custom next page link icon template.'
|
|
},
|
|
{
|
|
name: 'lastpagelinkicon',
|
|
description: 'Custom last page link icon template.'
|
|
}
|
|
];
|
|
|
|
module.exports = {
|
|
paginator: {
|
|
name: 'Paginator',
|
|
description: 'Paginator is a generic component to display content in paged format.',
|
|
props: PaginatorProps,
|
|
events: PaginatorEvents,
|
|
slots: PaginatorSlots
|
|
}
|
|
};
|