vwc-pagination component

[gullerya]

General

There is a use case for the pagination component, mostly in context of data-grid component.

Design: TBD

Funcional specification

It looks mostly appropriate to develop pagination component as a stand alone one, providing the following APIs and behaviours and provide convenient linkage layer for a potential consumers of this component.

vwc-pagination expected to:

• accept (dynamic) setting of the 1-based total number of pages
• visualize the pages range as per total given while
  • visualizing the first available page
  • visualizing the last available page
  • visualizing the current selected page
  • provide button to 'move prev'
  • provide button to 'move next'
• allow page labels interaction
  • visual feedback for interactive item
  • visual feedback for selected item
• provide a value of currently selected page
• provide an event each time new page selected

API

Attribute	Property	Type	Default	Description
total	total	number	0	total number of pages; when re-set anew should validate the selected and if not in range - set to new max value (total - 1)
selected-index	selectedIndex	number	-1	currently selected page; 0-based; MUST be in range of 0 - total - 1; when total changed, selected should be re-validated and if found out of range, set to the new total - 1 (new max)

Event	Description
change	fired each time selected page changed (also when the initial selection happens, or when total is changed and as an outcome the selected page changed; event.detail = { selectedIndex: <number>; total: <number> })

Test case for usage

When will be used in conjunction with data-grid, data-grid will assume that the API above is the API for the pagination component.
Therefore, data-grid will be dynamically assigned pagination component (provided / initialized by consumer) and then data-grid self will interop with the pagination in the following way:

• when pageManager is set to other than null, then manage the data by pageManager
• set listener on pageManager for change event, each time fired adjust the current items array as per definition (or trigger refreshData in case of dataProvider to force new page reload)
• use the pageSize provided or default (10?)
• set pageManager's total as items.length / pageSize + 1
• set selected to the first page

[yinonov]

Following an earlier discussion I'd like to raise a flag and set a course on convention from here on out.
I'll point out that to this point, we extended base classes that share same members and logic. e.g. list-expansion-panel which extends expansion panel base class

vivid/components/list/src/vwc-list-expansion-panel.ts

Line 24 in 3f9fa1e

export class VWCListExpansionPanel extends VWCExpansionPanelBase {

Alternatively we could align to functional approach and decorate our classes with relevant decorators to extend the class own members instead of prototypal inheritance

[gullerya]

This discussion is being closed due to vwc-pagination component being implemented.
See more info in the component's documentation as it is entering into a support/enhancement state.