Skip to content

Commit 1b040d9

Browse files
fabiobiondifabiobiondi
authored
fix: pagination (#499)
* feat(pagination): add support for next/prev custom * feat(pagination): add types to support prev and next button custom class * docs(pagination): add styles to examples * fix(pagination): usePagination return the correct amount of buttons * test(pagination): add component and hook tests * docs(pagination): update APITable with new properties * fix(pagination): fix relative paths and hook test * fix(pagination): remove boundaryCount
1 parent 2ab5879 commit 1b040d9

File tree

14 files changed

+452
-87
lines changed

14 files changed

+452
-87
lines changed

‎apps/website/src/routes/docs/headless/(components)/pagination/examples/basic.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import { component$, useSignal } from '@builder.io/qwik';
1+
import { component$, useSignal, useStylesScoped$ } from '@builder.io/qwik';
22
import { Pagination } from '@qwik-ui/headless';
3+
import styles from '../index.css?inline';
34

45
export default component$(() => {
6+
useStylesScoped$(styles);
57
const selectedPage = useSignal(1);
68
const totalPages = useSignal(10);
79

@@ -13,7 +15,12 @@ export default component$(() => {
1315
onPageChange$={(page) => {
1416
selectedPage.value = page;
1517
}}
16-
class="flex gap-3"
18+
class="pagination-wrapper"
19+
selectedClass="pagination-selected-btn"
20+
defaultClass="pagination-btn"
21+
dividerClass="pagination-divider"
22+
prevButtonClass="prevNextButtons"
23+
nextButtonClass="prevNextButtons"
1724
/>
1825
</div>
1926
);

‎apps/website/src/routes/docs/headless/(components)/pagination/examples/custom-arrows.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import { component$, useSignal } from '@builder.io/qwik';
1+
import { component$, useSignal, useStylesScoped$ } from '@builder.io/qwik';
22
import { Pagination } from '@qwik-ui/headless';
3+
import styles from '../index.css?inline';
34

45
export default component$(() => {
6+
useStylesScoped$(styles);
57
const selectedPage = useSignal(5);
68
const totalPages = useSignal(20);
79

@@ -13,6 +15,12 @@ export default component$(() => {
1315
onPageChange$={(page) => {
1416
selectedPage.value = page;
1517
}}
18+
class="pagination-wrapper"
19+
selectedClass="pagination-selected-btn"
20+
defaultClass="pagination-btn"
21+
dividerClass="pagination-divider"
22+
prevButtonClass="prevNextButtons"
23+
nextButtonClass="prevNextButtons"
1624
>
1725
<span q:slot="prefix"> 👈 </span>
1826
<span q:slot="suffix"> 👉 </span>

‎apps/website/src/routes/docs/headless/(components)/pagination/examples/custom-button-labels.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import { component$, useSignal } from '@builder.io/qwik';
1+
import { component$, useSignal, useStylesScoped$ } from '@builder.io/qwik';
22
import { Pagination } from '@qwik-ui/headless';
3+
import styles from '../index.css?inline';
34

45
export default component$(() => {
6+
useStylesScoped$(styles);
57
const selectedPage = useSignal(1);
68
const totalPages = useSignal(10);
79

@@ -14,6 +16,12 @@ export default component$(() => {
1416
selectedPage.value = page;
1517
}}
1618
customArrowTexts={{ previous: 'LEFT', next: 'RIGHT' }}
19+
class="pagination-wrapper"
20+
selectedClass="pagination-selected-btn"
21+
defaultClass="pagination-btn"
22+
dividerClass="pagination-divider"
23+
prevButtonClass="prevNextButtons"
24+
nextButtonClass="prevNextButtons"
1725
/>
1826
</div>
1927
);

‎apps/website/src/routes/docs/headless/(components)/pagination/examples/disabled.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import { component$, useSignal } from '@builder.io/qwik';
1+
import { component$, useSignal, useStylesScoped$ } from '@builder.io/qwik';
22
import { Pagination } from '@qwik-ui/headless';
3+
import styles from '../index.css?inline';
34

45
export default component$(() => {
6+
useStylesScoped$(styles);
57
const selectedPage = useSignal(1);
68
const totalPages = useSignal(10);
79

@@ -14,6 +16,12 @@ export default component$(() => {
1416
onPageChange$={(page) => {
1517
selectedPage.value = page;
1618
}}
19+
class="pagination-wrapper"
20+
selectedClass="pagination-selected-btn"
21+
defaultClass="pagination-btn"
22+
dividerClass="pagination-divider"
23+
prevButtonClass="prevNextButtons"
24+
nextButtonClass="prevNextButtons"
1725
/>
1826
</div>
1927
);

‎apps/website/src/routes/docs/headless/(components)/pagination/examples/hide-prev-next-buttons.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import { component$, useSignal } from '@builder.io/qwik';
1+
import { component$, useSignal, useStylesScoped$ } from '@builder.io/qwik';
22
import { Pagination } from '@qwik-ui/headless';
3+
import styles from '../index.css?inline';
34

45
export default component$(() => {
6+
useStylesScoped$(styles);
57
const selectedPage = useSignal(1);
68
const totalPages = useSignal(10);
79

@@ -15,6 +17,12 @@ export default component$(() => {
1517
}}
1618
hidePrevButton={true}
1719
hideNextButton={true}
20+
class="pagination-wrapper"
21+
selectedClass="pagination-selected-btn"
22+
defaultClass="pagination-btn"
23+
dividerClass="pagination-divider"
24+
prevButtonClass="prevNextButtons"
25+
nextButtonClass="prevNextButtons"
1826
/>
1927
</div>
2028
);

‎apps/website/src/routes/docs/headless/(components)/pagination/examples/interactive.tsx

Lines changed: 11 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,35 @@
1-
import { component$, useSignal, Slot } from '@builder.io/qwik';
1+
import { component$, useSignal, Slot, useStylesScoped$ } from '@builder.io/qwik';
22
import { Pagination } from '@qwik-ui/headless';
33
import { Toggle } from '@qwik-ui/tailwind';
4+
import styles from '../index.css?inline';
45

56
export default component$(() => {
6-
const selectedPage = useSignal(5);
7+
useStylesScoped$(styles);
8+
9+
const selectedPage = useSignal(1);
710
const totalPages = useSignal(20);
811

912
const hideNextButton = useSignal(false);
1013
const hidePrevButton = useSignal(false);
1114
const siblingCount = useSignal(1);
12-
const boundaryCount = useSignal(1);
1315

1416
return (
1517
<div class="mt-4 flex flex-col gap-6">
1618
<Pagination
1719
selectedPage={selectedPage.value}
1820
totalPages={totalPages.value}
1921
siblingCount={siblingCount.value}
20-
boundaryCount={boundaryCount.value}
2122
onPageChange$={(page) => {
2223
selectedPage.value = page;
2324
}}
24-
selectedClass="text-sky-500 font-bold px-3"
2525
hidePrevButton={hidePrevButton.value}
2626
hideNextButton={hideNextButton.value}
27-
gap={'10px'}
27+
class="pagination-wrapper"
28+
selectedClass="pagination-selected-btn"
29+
defaultClass="pagination-btn"
30+
dividerClass="pagination-divider"
31+
prevButtonClass="prevNextButtons"
32+
nextButtonClass="prevNextButtons"
2833
/>
2934

3035
<hr />
@@ -67,22 +72,6 @@ export default component$(() => {
6772
/>
6873
</label>
6974

70-
<label class="flex items-center justify-between gap-10">
71-
boundaryCount
72-
<input
73-
type="number"
74-
style={{
75-
width: '50px',
76-
background: 'transparent',
77-
textAlign: 'right',
78-
}}
79-
value={boundaryCount.value}
80-
onChange$={(e) => {
81-
boundaryCount.value = Number(e.target.value);
82-
}}
83-
/>
84-
</label>
85-
8675
<Toggle
8776
pressed={hideNextButton.value}
8877
onClick$={() => {

‎apps/website/src/routes/docs/headless/(components)/pagination/examples/styling.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import { component$, useSignal } from '@builder.io/qwik';
1+
import { component$, useSignal, useStylesScoped$ } from '@builder.io/qwik';
22
import { Pagination } from '@qwik-ui/headless';
3+
import styles from '../index.css?inline';
34

45
export default component$(() => {
6+
useStylesScoped$(styles);
57
const selectedPage = useSignal(1);
68
const totalPages = useSignal(10);
79

‎apps/website/src/routes/docs/headless/(components)/pagination/index.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.pagination-wrapper {
2+
@apply flex gap-3;
3+
}
4+
.pagination-btn {
5+
@apply h-8 !cursor-pointer rounded-md bg-white px-3 text-center text-black hover:bg-slate-200;
6+
}
7+
8+
.pagination-selected-btn {
9+
@apply pointer-events-none h-8 rounded-md bg-slate-500 text-black;
10+
}
11+
12+
.pagination-divider {
13+
@apply h-8 w-8 rounded-md text-white;
14+
}
15+
16+
.prevNextButtons {
17+
@apply h-8 !cursor-pointer rounded-md bg-white px-2 text-black hover:bg-slate-200 disabled:pointer-events-none disabled:opacity-30;
18+
}

‎apps/website/src/routes/docs/headless/(components)/pagination/index.mdx

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,11 +64,13 @@ Here are the notable properties for this component:
6464
type: 'number',
6565
description: `set sibling items close to the selected value`,
6666
},
67-
{
67+
/*
68+
{
6869
name: 'boundaryCount',
6970
type: 'number',
7071
description: `set adjacent items to the start and end page number`,
7172
},
73+
*/
7274
{
7375
name: 'hidePrevButton',
7476
type: 'boolean',
@@ -113,7 +115,17 @@ Here are the notable properties for this component:
113115
name: 'dividerClass',
114116
type: 'string',
115117
description: `custom class for the divider item`,
116-
}
118+
},
119+
{
120+
name: 'prevButtonClass',
121+
type: 'string',
122+
description: `custom class for the Next button`,
123+
},
124+
{
125+
name: 'nextButtonClass',
126+
type: 'string',
127+
description: `custom class for the Next button`,
128+
},
117129
]}
118130
/>
119131

0 commit comments

Comments
 (0)