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

fix(pagination-nav)!: use 1-indexing to be consistent with Pagination (#1518)

Browse source 
Fixes #1513
This commit is contained in:
Enrico Sacchetti 2022-12-13 13:23:04 -05:00 • committed by GitHub
commit 8d55752a18
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 49 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

2
COMPONENT_INDEX.md
View file

@ -2695,7 +2695,7 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :----------- | :------- | :--------------- | :------- | -------------------- | ---------------------------- | ----------------------------------------- |
| page | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the current page index |
| page | No | <code>let</code> | Yes | <code>number</code> | <code>1</code> | Specify the current page index |
| total | No | <code>let</code> | No | <code>number</code> | <code>10</code> | Specify the total number of pages |
| shown | No | <code>let</code> | No | <code>number</code> | <code>10</code> | Specify the total number of pages to show |
| loop | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to loop the navigation |

2
docs/src/COMPONENT_API.json
View file

@ -8437,7 +8437,7 @@
"kind": "let",
"description": "Specify the current page index",
"type": "number",
"value": "0",
"value": "1",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,

4
docs/src/pages/framed/PaginationNav/PaginationNavReactive.svelte
View file

@ -7,8 +7,8 @@
<PaginationNav bind:page />
<div style="margin: var(--cds-layout-01) 0">
<Button on:click="{() => (page = 0)}" disabled="{page === 0}">
Set page to 0
<Button on:click="{() => (page = 1)}" disabled="{page === 0}">
Set page to 1
</Button>
</div>

2
src/PaginationNav/PaginationItem.svelte
View file

@ -1,6 +1,6 @@
<script>
/** Specify the current page index */
export let page = 0;
export let page = 1;
/** Set to `true` to use the active state */
export let active = false;

66
src/PaginationNav/PaginationNav.svelte
View file

@ -1,12 +1,12 @@
<script>
/**
* @event {{ page: number; }} change
* @event {{ page: number; }} change - fires after every user interaction
* @event {{ page: number; }} click:button--previous
* @event {{ page: number; }} click:button--next
*/
/** Specify the current page index */
export let page = 0;
export let page = 1;
/** Specify the total number of pages */
export let total = 10;
@ -23,7 +23,7 @@
/** Specify the backward button text */
export let backwardText = "Previous page";
import { afterUpdate, createEventDispatcher } from "svelte";
import { createEventDispatcher } from "svelte";
import CaretLeft from "../icons/CaretLeft.svelte";
import CaretRight from "../icons/CaretRight.svelte";
import PaginationItem from "./PaginationItem.svelte";
@ -33,13 +33,13 @@
const dispatch = createEventDispatcher();
const MIN = 4;
afterUpdate(() => {
dispatch("change", { page });
});
// number of overflow pages near the beginning of the nav
let front = 0;
// number of overflow pages near the end of the nav
let back = 0;
// number of nav overflow or items that may appear
$: fit = shown >= MIN ? shown : MIN;
$: startOffset = fit <= MIN && page > 1 ? 0 : 1;
$: if (fit >= total) {
@ -49,8 +49,8 @@
$: if (fit < total) {
const split = Math.ceil(fit / 2) - 1;
front = page - split + 1;
back = total - page - (fit - split) + 1;
front = page - split;
back = total - page - (fit - split) + 2;
if (front <= 1) {
back -= front <= 0 ? Math.abs(front) + 1 : 0;
@ -62,6 +62,9 @@
back = 0;
}
}
// all enumerable items to render in between
// overflow menus
$: items = Array.from({ length: total })
.map((e, i) => i)
.slice(startOffset + front, (back + 1) * -1);
@ -75,37 +78,47 @@
tooltipAlignment="center"
tooltipPosition="bottom"
iconDescription="{backwardText}"
disabled="{!loop && page === 0}"
disabled="{!loop && page === 1}"
icon="{CaretLeft}"
on:click="{() => {
if (page - 1 < 0) {
if (loop) page = total - 1;
if (page <= 1) {
if (loop) page = total;
} else {
page--;
}
dispatch('click:button--previous', { page });
dispatch('change', { page });
}}"
/>
</li>
{#if fit > MIN || (fit <= MIN && page <= 1)}
<PaginationItem
page="{1}"
active="{page === 0}"
on:click="{() => (page = 0)}"
active="{page === 1}"
on:click="{() => {
page = 1;
dispatch('change', { page });
}}"
>
{page === 0 ? "Active, Page" : "Page"}
{page === 1 ? "Active, Page" : "Page"}
</PaginationItem>
{/if}
<PaginationOverflow
fromIndex="{startOffset}"
count="{front}"
on:select="{({ detail }) => (page = detail.index)}"
on:select="{({ detail }) => {
page = detail.index;
dispatch('change', { page });
}}"
/>
{#each items as item}
<PaginationItem
page="{item + 1}"
active="{page === item}"
on:click="{() => (page = item)}"
active="{page === item + 1}"
on:click="{() => {
page = item + 1;
dispatch('change', { page });
}}"
>
{page === item ? "Active, Page" : "Page"}
</PaginationItem>
@ -115,15 +128,19 @@
count="{back}"
on:select="{({ detail }) => {
page = detail.index;
dispatch('change', { page });
}}"
/>
{#if total > 1}
<PaginationItem
page="{total}"
active="{page === total - 1}"
on:click="{() => (page = total - 1)}"
active="{page === total}"
on:click="{() => {
page = total;
dispatch('change', { page });
}}"
>
{page === total - 1 ? "Active, Page" : "Page"}
{page === total ? "Active, Page" : "Page"}
</PaginationItem>
{/if}
<li class:bx--pagination-nav__list-item="{true}">
@ -132,15 +149,16 @@
tooltipAlignment="center"
tooltipPosition="bottom"
iconDescription="{forwardText}"
disabled="{!loop && page === total - 1}"
disabled="{!loop && page === total}"
icon="{CaretRight}"
on:click="{() => {
if (page + 1 >= total) {
if (loop) page = 0;
if (page >= total) {
if (loop) page = 1;
} else {
page++;
}
dispatch('click:button--next', { page });
dispatch('change', { page });
}}"
/>
</li>

2
src/PaginationNav/PaginationOverflow.svelte
View file

@ -34,7 +34,7 @@
>
<option value="" hidden></option>
{#each Array.from({ length: count }, (_, i) => i) as i}
<option value="{fromIndex + i}" data-page="{fromIndex + i + 1}">
<option value="{fromIndex + i + 1}" data-page="{fromIndex + i + 1}">
{fromIndex + i + 1}
</option>
{/each}

2
types/PaginationNav/PaginationNav.svelte.d.ts vendored
View file

@ -5,7 +5,7 @@ export interface PaginationNavProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["nav"]> {
/**
* Specify the current page index
* @default 0
* @default 1
*/
page?: number;