mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 11:36:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(pagination-nav): type dispatched events

Browse source
This commit is contained in:
Eric Liu 2020-12-05 16:51:55 -08:00
commit 95901c270f
6 changed files with 50 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

8
COMPONENT_INDEX.md
View file

@ -2468,10 +2468,10 @@ None.
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------------------- | :--------- | :----- | | :--------------------- | :--------- | :----------------------------- |
| click:button--previous | dispatched | -- | | change | dispatched | <code>{ page: number; }</code> |
| click:button--next | dispatched | -- | | click:button--previous | dispatched | <code>{ page: number; }</code> |
| change | dispatched | -- | | click:button--next | dispatched | <code>{ page: number; }</code> |
## `PaginationSkeleton` ## `PaginationSkeleton`

18
docs/src/COMPONENT_API.json
View file

@ -6712,9 +6712,21 @@
], ],
"slots": [], "slots": [],
"events": [ "events": [
{ "type": "dispatched", "name": "click:button--previous" }, {
{ "type": "dispatched", "name": "click:button--next" }, "type": "dispatched",
{ "type": "dispatched", "name": "change" } "name": "change",
"detail": "{ page: number; }"
},
{
"type": "dispatched",
"name": "click:button--previous",
"detail": "{ page: number; }"
},
{
"type": "dispatched",
"name": "click:button--next",
"detail": "{ page: number; }"
}
], ],
"typedefs": [], "typedefs": [],
"rest_props": { "type": "Element", "name": "nav" } "rest_props": { "type": "Element", "name": "nav" }

12
src/PaginationNav/PaginationNav.svelte
View file

@ -1,4 +1,10 @@
<script> <script>
/**
* @event {{ page: number; }} change
* @event {{ page: number; }} click:button--previous
* @event {{ page: number; }} click:button--next
*/
/** Specify the current page index */ /** Specify the current page index */
export let page = 0; export let page = 0;
@ -18,11 +24,11 @@
export let backwardText = "Previous page"; export let backwardText = "Previous page";
import { afterUpdate, createEventDispatcher } from "svelte"; import { afterUpdate, createEventDispatcher } from "svelte";
import CaretLeft16 from "carbon-icons-svelte/lib/CaretLeft16"; import CaretLeft16 from "carbon-icons-svelte/lib/CaretLeft16/CaretLeft16.svelte";
import CaretRight16 from "carbon-icons-svelte/lib/CaretRight16"; import CaretRight16 from "carbon-icons-svelte/lib/CaretRight16/CaretRight16.svelte";
import PaginationItem from "./PaginationItem.svelte"; import PaginationItem from "./PaginationItem.svelte";
import PaginationOverflow from "./PaginationOverflow.svelte"; import PaginationOverflow from "./PaginationOverflow.svelte";
import { Button } from "../Button"; import Button from "../Button/Button.svelte";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const MIN = 4; const MIN = 4;

6
src/PaginationNav/PaginationOverflow.svelte
View file

@ -1,4 +1,8 @@
<script> <script>
/**
* @event {{ index: number; }} select
*/
/** Specify the pivot start index */ /** Specify the pivot start index */
export let fromIndex = 0; export let fromIndex = 0;
@ -6,7 +10,7 @@
export let count = 0; export let count = 0;
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
import OverflowMenuHorizontal16 from "carbon-icons-svelte/lib/OverflowMenuHorizontal16"; import OverflowMenuHorizontal16 from "carbon-icons-svelte/lib/OverflowMenuHorizontal16/OverflowMenuHorizontal16.svelte";
import PaginationItem from "./PaginationItem.svelte"; import PaginationItem from "./PaginationItem.svelte";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();

14
tests/PaginationNav.test.svelte
View file

@ -4,4 +4,16 @@
<PaginationNav /> <PaginationNav />
<PaginationNav total="{3}" loop /> <PaginationNav
total="{3}"
loop
on:change="{(e) => {
console.log(e.detail); // { page: number; }
}}"
on:click:button--next="{(e) => {
console.log(e.detail); // { page: number; }
}}"
on:click:button--previous="{(e) => {
console.log(e.detail); // { page: number; }
}}"
/>

6
types/PaginationNav/PaginationNav.d.ts vendored
View file

@ -42,8 +42,8 @@ export default class PaginationNav {
$$prop_def: PaginationNavProps; $$prop_def: PaginationNavProps;
$$slot_def: {}; $$slot_def: {};
$on(eventname: "click:button--previous", cb: (event: CustomEvent<any>) => void): () => void; $on(eventname: "change", cb: (event: CustomEvent<{ page: number }>) => void): () => void;
$on(eventname: "click:button--next", cb: (event: CustomEvent<any>) => void): () => void; $on(eventname: "click:button--previous", cb: (event: CustomEvent<{ page: number }>) => void): () => void;
$on(eventname: "change", cb: (event: CustomEvent<any>) => void): () => void; $on(eventname: "click:button--next", cb: (event: CustomEvent<{ page: number }>) => void): () => void;
$on(eventname: string, cb: (event: Event) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void;
} }