diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 0d0c1429..f128d4c6 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -2681,25 +2681,25 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| pageSize | No | let | Yes | number | 10 | Specify the number of items to display in a page | -| page | No | let | Yes | number | 1 | Specify the current page index | -| totalItems | No | let | No | number | 0 | Specify the total number of items | -| pageWindow | No | let | No | number | 1000 | If `totalItems` is a large number, it can affect the
rendering performance of this component since its value
is used to calculate the number of pages in the native
select dropdown. This value creates a small window of
pages rendered around the current page. By default,
a maximum of 1000 select items are rendered. | -| disabled | No | let | No | boolean | false | Set to `true` to disable the pagination | -| forwardText | No | let | No | string | "Next page" | Specify the forward button text | -| backwardText | No | let | No | string | "Previous page" | Specify the backward button text | -| itemsPerPageText | No | let | No | string | "Items per page:" | Specify the items per page text | -| itemText | No | let | No | (min: number, max: number) => string | (min, max) => \`${min}–${max} item${max === 1 ? "" : "s"}\` | Override the item text | -| itemRangeText | No | let | No | (min: number, max: number, total: number) => string | (min, max, total) => \`${min}–${max} of ${total} item${max === 1 ? "" : "s"}\` | Override the item range text | -| pageInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page input | -| pageSizeInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page size input | -| pageSizes | No | let | No | ReadonlyArray | [10] | Specify the available page sizes | -| pagesUnknown | No | let | No | boolean | false | Set to `true` if the number of pages is unknown | -| pageText | No | let | No | (page: number) => string | (page) => \`page ${page}\` | Override the page text | -| pageRangeText | No | let | No | (current: number, total: number) => string | (current, total) => \`of ${total} page${total === 1 ? "" : "s"}\` | Override the page range text | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| pageSize | No | let | Yes | number | 10 | Specify the number of items to display in a page | +| page | No | let | Yes | number | 1 | Specify the current page index | +| totalItems | No | let | No | number | 0 | Specify the total number of items | +| pageWindow | No | let | No | number | 1000 | If `totalItems` is a large number, it can affect the
rendering performance of this component since its value
is used to calculate the number of pages in the native
select dropdown. This value creates a small window of
pages rendered around the current page. By default,
a maximum of 1000 select items are rendered. | +| disabled | No | let | No | boolean | false | Set to `true` to disable the pagination | +| forwardText | No | let | No | string | "Next page" | Specify the forward button text | +| backwardText | No | let | No | string | "Previous page" | Specify the backward button text | +| itemsPerPageText | No | let | No | string | "Items per page:" | Specify the items per page text | +| itemText | No | let | No | (min: number, max: number) => string | (min, max) => \`${min.toLocaleString()}–${max.toLocaleString()} item${max === 1 ? "" : "s"}\` | Override the item text | +| itemRangeText | No | let | No | (min: number, max: number, total: number) => string | (min, max, total) => \`${min.toLocaleString()}–${max.toLocaleString()} of ${total.toLocaleString()} item${max === 1 ? "" : "s"}\` | Override the item range text | +| pageInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page input | +| pageSizeInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page size input | +| pageSizes | No | let | No | ReadonlyArray | [10] | Specify the available page sizes | +| pagesUnknown | No | let | No | boolean | false | Set to `true` if the number of pages is unknown | +| pageText | No | let | No | (page: number) => string | (page) => \`page ${page.toLocaleString()}\` | Override the page text | +| pageRangeText | No | let | No | (current: number, total: number) => string | (current, total) => \`of ${total.toLocaleString()} page${total === 1 ? "" : "s"}\` | Override the page range text | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index ac997ae7..88cd4d6b 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -10113,7 +10113,7 @@ "kind": "let", "description": "Override the item text", "type": "(min: number, max: number) => string", - "value": "(min, max) =>\n `${min}–${max} item${max === 1 ? \"\" : \"s\"}`", + "value": "(min, max) =>\n `${min.toLocaleString()}–${max.toLocaleString()} item${max === 1 ? \"\" : \"s\"}`", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -10125,7 +10125,7 @@ "kind": "let", "description": "Override the item range text", "type": "(min: number, max: number, total: number) => string", - "value": "(\n min,\n max,\n total,\n) =>\n `${min}–${max} of ${total} item${max === 1 ? \"\" : \"s\"}`", + "value": "(\n min,\n max,\n total,\n) =>\n `${min.toLocaleString()}–${max.toLocaleString()} of ${total.toLocaleString()} item${max === 1 ? \"\" : \"s\"}`", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -10197,7 +10197,7 @@ "kind": "let", "description": "Override the page text", "type": "(page: number) => string", - "value": "(page) => `page ${page}`", + "value": "(page) => `page ${page.toLocaleString()}`", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -10209,7 +10209,7 @@ "kind": "let", "description": "Override the page range text", "type": "(current: number, total: number) => string", - "value": "(\n current,\n total,\n) =>\n `of ${total} page${total === 1 ? \"\" : \"s\"}`", + "value": "(\n current,\n total,\n) =>\n `of ${total.toLocaleString()} page${total === 1 ? \"\" : \"s\"}`", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, diff --git a/src/Pagination/Pagination.svelte b/src/Pagination/Pagination.svelte index 89b90b82..abf7b149 100644 --- a/src/Pagination/Pagination.svelte +++ b/src/Pagination/Pagination.svelte @@ -39,14 +39,14 @@ * @type {(min: number, max: number) => string} */ export let itemText = (min, max) => - `${min}–${max} item${max === 1 ? "" : "s"}`; + `${min.toLocaleString()}–${max.toLocaleString()} item${max === 1 ? "" : "s"}`; /** * Override the item range text * @type {(min: number, max: number, total: number) => string} */ export let itemRangeText = (min, max, total) => - `${min}–${max} of ${total} item${max === 1 ? "" : "s"}`; + `${min.toLocaleString()}–${max.toLocaleString()} of ${total.toLocaleString()} item${max === 1 ? "" : "s"}`; /** Set to `true` to disable the page input */ export let pageInputDisabled = false; @@ -70,14 +70,14 @@ * Override the page text * @type {(page: number) => string} */ - export let pageText = (page) => `page ${page}`; + export let pageText = (page) => `page ${page.toLocaleString()}`; /** * Override the page range text * @type {(current: number, total: number) => string} */ export let pageRangeText = (current, total) => - `of ${total} page${total === 1 ? "" : "s"}`; + `of ${total.toLocaleString()} page${total === 1 ? "" : "s"}`; /** Set an id for the top-level element */ export let id = "ccs-" + Math.random().toString(36); diff --git a/tests/Pagination/Pagination.test.svelte b/tests/Pagination/Pagination.test.svelte index 64fdae79..8648a268 100644 --- a/tests/Pagination/Pagination.test.svelte +++ b/tests/Pagination/Pagination.test.svelte @@ -1,5 +1,6 @@ { console.log("change", e.detail); }} diff --git a/tests/Pagination/Pagination.test.ts b/tests/Pagination/Pagination.test.ts index 7345c214..da905c76 100644 --- a/tests/Pagination/Pagination.test.ts +++ b/tests/Pagination/Pagination.test.ts @@ -214,4 +214,47 @@ describe("Pagination", () => { const pageNumbers = screen.getByLabelText(/Page number, of 10000 pages/); expect(pageNumbers).toHaveLength(100 + 1); }); + + it("formats larger numbers using `toLocaleString`", () => { + render(Pagination, { + props: { totalItems: 100_000 }, + }); + + expect(screen.getByText(/1–10 of 100,000 items/)).toBeInTheDocument(); + expect(screen.getByText(/of 10,000 pages/)).toBeInTheDocument(); + }); + + it("handles custom page text", () => { + render(Pagination, { + props: { + pagesUnknown: true, + totalItems: 100_000, + pageText: (page) => `Current page ${page}`, + }, + }); + + expect(screen.getByText(/Current page 1/)).toBeInTheDocument(); + }); + + it("handles custom page range text", () => { + render(Pagination, { + props: { + totalItems: 100_000, + pageRangeText: (current, total) => `${current} of ${total}`, + }, + }); + + expect(screen.getByText(/1 of 10000/)).toBeInTheDocument(); + }); + + it("handles custom item range text", () => { + render(Pagination, { + props: { + totalItems: 100_000, + itemRangeText: (min, max, total) => `${min}–${max} of ${total}`, + }, + }); + + expect(screen.getByText(/1–10 of 100000/)).toBeInTheDocument(); + }); }); diff --git a/types/Pagination/Pagination.svelte.d.ts b/types/Pagination/Pagination.svelte.d.ts index 8d0a9384..71aa600f 100644 --- a/types/Pagination/Pagination.svelte.d.ts +++ b/types/Pagination/Pagination.svelte.d.ts @@ -53,13 +53,13 @@ type $Props = { /** * Override the item text - * @default (min, max) => `${min}–${max} item${max === 1 ? "" : "s"}` + * @default (min, max) => `${min.toLocaleString()}–${max.toLocaleString()} item${max === 1 ? "" : "s"}` */ itemText?: (min: number, max: number) => string; /** * Override the item range text - * @default (min, max, total) => `${min}–${max} of ${total} item${max === 1 ? "" : "s"}` + * @default (min, max, total) => `${min.toLocaleString()}–${max.toLocaleString()} of ${total.toLocaleString()} item${max === 1 ? "" : "s"}` */ itemRangeText?: (min: number, max: number, total: number) => string; @@ -95,13 +95,13 @@ type $Props = { /** * Override the page text - * @default (page) => `page ${page}` + * @default (page) => `page ${page.toLocaleString()}` */ pageText?: (page: number) => string; /** * Override the page range text - * @default (current, total) => `of ${total} page${total === 1 ? "" : "s"}` + * @default (current, total) => `of ${total.toLocaleString()} page${total === 1 ? "" : "s"}` */ pageRangeText?: (current: number, total: number) => string;