feat(pagination): dispatch button click events to be consistent with PaginationNav

This commit is contained in:
Eric Y Liu 2021-03-19 06:44:58 -07:00
commit 32effacb76
4 changed files with 24 additions and 4 deletions

View file

@ -2543,8 +2543,10 @@ None.
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :----------------------------------------------- |
| :--------------------- | :--------- | :----------------------------------------------- |
| update | dispatched | <code>{ pageSize: number; page: number; }</code> |
| click:button--previous | dispatched | <code>{ page: number; }</code> |
| click:button--next | dispatched | <code>{ page: number; }</code> |
## `PaginationNav`

View file

@ -6475,6 +6475,16 @@
"type": "dispatched",
"name": "update",
"detail": "{ pageSize: number; page: number; }"
},
{
"type": "dispatched",
"name": "click:button--previous",
"detail": "{ page: number; }"
},
{
"type": "dispatched",
"name": "click:button--next",
"detail": "{ page: number; }"
}
],
"typedefs": [],

View file

@ -1,6 +1,8 @@
<script>
/**
* @event {{ pageSize: number; page: number; }} update
* @event {{ page: number; }} click:button--previous
* @event {{ page: number; }} click:button--next
*/
/** Specify the current page index */
@ -162,6 +164,7 @@
: ''}"
on:click="{() => {
page--;
dispatch('click:button--previous', { page });
}}"
/>
<Button
@ -177,6 +180,7 @@
: ''}"
on:click="{() => {
page++;
dispatch('click:button--next', { page });
}}"
/>
</div>

View file

@ -102,6 +102,10 @@ export interface PaginationProps
export default class Pagination extends SvelteComponentTyped<
PaginationProps,
{ update: CustomEvent<{ pageSize: number; page: number }> },
{
update: CustomEvent<{ pageSize: number; page: number }>;
["click:button--previous"]: CustomEvent<{ page: number }>;
["click:button--next"]: CustomEvent<{ page: number }>;
},
{}
> {}