169 lines
4.5 KiB
JavaScript
169 lines
4.5 KiB
JavaScript
const DataViewProps = [
|
|
{
|
|
name: "value",
|
|
type: "array",
|
|
default: "null",
|
|
description: "An array of objects to display."
|
|
},
|
|
{
|
|
name: "layout",
|
|
type: "string",
|
|
default: "list",
|
|
description: 'Layout of the items, valid values are "list" and "grid".'
|
|
},
|
|
{
|
|
name: "rows",
|
|
type: "number",
|
|
default: "0",
|
|
description: "Number of rows to display per page."
|
|
},
|
|
{
|
|
name: "first",
|
|
type: "number",
|
|
default: "0",
|
|
description: "ndex of the first record to render."
|
|
},
|
|
{
|
|
name: "totalRecords",
|
|
type: "number",
|
|
default: "null",
|
|
description: "Number of total records, defaults to length of value when not defined."
|
|
},
|
|
{
|
|
name: "paginator",
|
|
type: "boolean",
|
|
default: "false",
|
|
description: "When specified as true, enables the pagination."
|
|
},
|
|
{
|
|
name: "paginatorPosition",
|
|
type: "string",
|
|
default: "bottom",
|
|
description: 'Position of the paginator, options are "top","bottom" or "both".'
|
|
},
|
|
{
|
|
name: "alwaysShowPaginator",
|
|
type: "boolean",
|
|
default: "true",
|
|
description: "Whether to show it even there is only one page."
|
|
},
|
|
{
|
|
name: "paginatorTemplate",
|
|
type: "string",
|
|
default: "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown",
|
|
description: "Template of the paginator."
|
|
},
|
|
{
|
|
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: "currentPageReportTemplate",
|
|
type: "string",
|
|
default: "({currentPage} of {totalPages})",
|
|
description: "Template of the current page report element."
|
|
},
|
|
{
|
|
name: "sortField",
|
|
type: "string",
|
|
default: "null",
|
|
description: "Property name or a getter function of data to use in sorting by default."
|
|
},
|
|
{
|
|
name: "sortOrder",
|
|
type: "number",
|
|
default: "null",
|
|
description: "Order to sort the data by default."
|
|
},
|
|
{
|
|
name: "lazy",
|
|
type: "boolean",
|
|
default: "false",
|
|
description: "Defines if data is loaded and interacted with in lazy manner."
|
|
},
|
|
{
|
|
name: "dataKey",
|
|
type: "string",
|
|
default: "null",
|
|
description: "Name of the data that uniquely identifies the a record in the data."
|
|
}
|
|
];
|
|
|
|
const DataViewEvents = [
|
|
{
|
|
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 DataViewSlots = [
|
|
{
|
|
name: "header",
|
|
description: "Custom content for the component's header"
|
|
},
|
|
{
|
|
name: "paginatorstart",
|
|
description: "Custom content for the component paginator's left side"
|
|
},
|
|
{
|
|
name: "paginatorend",
|
|
description: "Custom content for the component paginator's right side"
|
|
},
|
|
{
|
|
name: "list",
|
|
description: "Content for the list layout"
|
|
},
|
|
{
|
|
name: "grid",
|
|
description: "Content for the grid layout"
|
|
},
|
|
{
|
|
name: "empty",
|
|
description: "Custom content when there is no data to display"
|
|
},
|
|
{
|
|
name: "footer",
|
|
description: "Custom content for the component's footer"
|
|
}
|
|
];
|
|
|
|
module.exports = {
|
|
dataview: {
|
|
name: "DataView",
|
|
description: "DataView displays data in grid or list layout with pagination and sorting features.",
|
|
props: DataViewProps,
|
|
events: DataViewEvents,
|
|
slots: DataViewSlots
|
|
}
|
|
};
|