Skip to content

Commit 64df9a8

Browse files
thejacksheltonthejackshelton
authored
Merge pull request #492 from fabiobiondi/feat/headless-pagination
docs(headless): add pagination page
2 parents 3c286d7 + 9d8cf9a commit 64df9a8

File tree

21 files changed

+654
-437
lines changed

21 files changed

+654
-437
lines changed

‎apps/website/src/_state/component-statuses.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const statusByComponent: ComponentKitsStatuses = {
2626
'Input Phone': ComponentStatus.Planned,
2727
'Navigation Bar': ComponentStatus.Planned,
2828
Modal: ComponentStatus.Planned,
29-
Pagination: ComponentStatus.Planned,
29+
Pagination: ComponentStatus.Draft,
3030
Popover: ComponentStatus.Planned,
3131
Progress: ComponentStatus.Planned,
3232
Radio: ComponentStatus.Planned,
@@ -43,6 +43,7 @@ export const statusByComponent: ComponentKitsStatuses = {
4343
Accordion: ComponentStatus.Beta,
4444
Carousel: ComponentStatus.Planned,
4545
Combobox: ComponentStatus.Beta,
46+
Pagination: ComponentStatus.Draft,
4647
Popover: ComponentStatus.Draft,
4748
Modal: ComponentStatus.Beta,
4849
Select: ComponentStatus.Draft,

‎apps/website/src/routes/docs/headless/(components)/pagination/index.tsx renamed to ‎apps/website/src/routes/docs/headless/(components)/pagination/_index.tsx

File renamed without changes.

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

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import CustomArrows from './examples/custom-arrows';
2+
import CustomButtonLabels from './examples/custom-button-labels';
3+
import Disabled from './examples/disabled';
4+
import HidePrevNextButtons from './examples/hide-prev-next-buttons';
5+
import Styling from './examples/styling';
6+
import { JSXNode, component$ } from '@builder.io/qwik';
7+
import { PreviewCodeExampleTabs } from '../../../_components/preview-code-example/preview-code-example-tabs';
8+
9+
import Basic from './examples/basic';
10+
import Interactive from './examples/interactive';
11+
import basicCode from './examples/basic?raw';
12+
import interactiveCode from './examples/interactive?raw';
13+
import hidePrevNextButtonsCode from './examples/hide-prev-next-buttons?raw';
14+
import customButtonLabelsCode from './examples/custom-button-labels?raw';
15+
import stylingCode from './examples/styling?raw';
16+
import customArrowsCode from './examples/custom-arrows?raw';
17+
import disabledCode from './examples/disabled?raw';
18+
19+
export type Example = {
20+
component: JSXNode;
21+
code: string;
22+
cssClasses?: string;
23+
};
24+
25+
export const examples: Record<string, Example> = {
26+
basic: {
27+
component: <Basic />,
28+
code: basicCode,
29+
},
30+
interactive: {
31+
component: <Interactive />,
32+
code: interactiveCode,
33+
},
34+
hidePrevNextButtons: {
35+
component: <HidePrevNextButtons />,
36+
code: hidePrevNextButtonsCode,
37+
},
38+
customButtonLabels: {
39+
component: <CustomButtonLabels />,
40+
code: customButtonLabelsCode,
41+
},
42+
styling: {
43+
component: <Styling />,
44+
code: stylingCode,
45+
},
46+
customArrows: {
47+
component: <CustomArrows />,
48+
code: customArrowsCode,
49+
},
50+
disabled: {
51+
component: <Disabled />,
52+
code: disabledCode,
53+
},
54+
};
55+
56+
export type ShowExampleProps = {
57+
example: string;
58+
};
59+
60+
export const ShowExample = component$(({ example }: ShowExampleProps) => {
61+
const { component, code } = examples[example];
62+
return (
63+
<PreviewCodeExampleTabs code={code}>
64+
<div q:slot="actualComponent">{component}</div>
65+
</PreviewCodeExampleTabs>
66+
);
67+
});

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { component$, useSignal } from '@builder.io/qwik';
2+
import { Pagination } from '@qwik-ui/headless';
3+
4+
export default component$(() => {
5+
const selectedPage = useSignal(1);
6+
const totalPages = useSignal(10);
7+
8+
return (
9+
<div class="mt-4 flex flex-col gap-6">
10+
<Pagination
11+
selectedPage={selectedPage.value}
12+
totalPages={totalPages.value}
13+
onPageChange$={(page) => {
14+
selectedPage.value = page;
15+
}}
16+
class="flex gap-3"
17+
/>
18+
</div>
19+
);
20+
});

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { component$, useSignal } from '@builder.io/qwik';
2+
import { Pagination } from '@qwik-ui/headless';
3+
4+
export default component$(() => {
5+
const selectedPage = useSignal(5);
6+
const totalPages = useSignal(20);
7+
8+
return (
9+
<div class="mt-4 flex flex-col gap-6">
10+
<Pagination
11+
selectedPage={selectedPage.value}
12+
totalPages={totalPages.value}
13+
onPageChange$={(page) => {
14+
selectedPage.value = page;
15+
}}
16+
>
17+
<span q:slot="prefix"> 👈 </span>
18+
<span q:slot="suffix"> 👉 </span>
19+
</Pagination>
20+
</div>
21+
);
22+
});

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { component$, useSignal } from '@builder.io/qwik';
2+
import { Pagination } from '@qwik-ui/headless';
3+
4+
export default component$(() => {
5+
const selectedPage = useSignal(1);
6+
const totalPages = useSignal(10);
7+
8+
return (
9+
<div class="mt-4 flex flex-col gap-6">
10+
<Pagination
11+
selectedPage={selectedPage.value}
12+
totalPages={totalPages.value}
13+
onPageChange$={(page) => {
14+
selectedPage.value = page;
15+
}}
16+
customArrowTexts={{ previous: 'LEFT', next: 'RIGHT' }}
17+
/>
18+
</div>
19+
);
20+
});

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { component$, useSignal } from '@builder.io/qwik';
2+
import { Pagination } from '@qwik-ui/headless';
3+
4+
export default component$(() => {
5+
const selectedPage = useSignal(1);
6+
const totalPages = useSignal(10);
7+
8+
return (
9+
<div class="mt-4 flex flex-col gap-6">
10+
<Pagination
11+
selectedPage={selectedPage.value}
12+
totalPages={totalPages.value}
13+
disabled
14+
onPageChange$={(page) => {
15+
selectedPage.value = page;
16+
}}
17+
/>
18+
</div>
19+
);
20+
});

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { component$, useSignal } from '@builder.io/qwik';
2+
import { Pagination } from '@qwik-ui/headless';
3+
4+
export default component$(() => {
5+
const selectedPage = useSignal(1);
6+
const totalPages = useSignal(10);
7+
8+
return (
9+
<div class="mt-4 flex flex-col gap-6">
10+
<Pagination
11+
selectedPage={selectedPage.value}
12+
totalPages={totalPages.value}
13+
onPageChange$={(page) => {
14+
selectedPage.value = page;
15+
}}
16+
hidePrevButton={true}
17+
hideNextButton={true}
18+
/>
19+
</div>
20+
);
21+
});

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

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import { component$, useSignal, Slot } from '@builder.io/qwik';
2+
import { Pagination } from '@qwik-ui/headless';
3+
import { Toggle } from '@qwik-ui/tailwind';
4+
5+
export default component$(() => {
6+
const selectedPage = useSignal(5);
7+
const totalPages = useSignal(20);
8+
9+
const hideNextButton = useSignal(false);
10+
const hidePrevButton = useSignal(false);
11+
const siblingCount = useSignal(1);
12+
const boundaryCount = useSignal(1);
13+
14+
return (
15+
<div class="mt-4 flex flex-col gap-6">
16+
<Pagination
17+
selectedPage={selectedPage.value}
18+
totalPages={totalPages.value}
19+
siblingCount={siblingCount.value}
20+
boundaryCount={boundaryCount.value}
21+
onPageChange$={(page) => {
22+
selectedPage.value = page;
23+
}}
24+
selectedClass="text-sky-500 font-bold px-3"
25+
hidePrevButton={hidePrevButton.value}
26+
hideNextButton={hideNextButton.value}
27+
gap={'10px'}
28+
/>
29+
30+
<hr />
31+
32+
<div
33+
class="flex flex-col items-stretch gap-2"
34+
style={{
35+
width: '250px',
36+
}}
37+
>
38+
<label class="flex items-center justify-between gap-10">
39+
pages
40+
<input
41+
type="number"
42+
style={{
43+
width: '50px',
44+
background: 'transparent',
45+
textAlign: 'right',
46+
}}
47+
value={totalPages.value}
48+
onChange$={(e) => {
49+
totalPages.value = Number(e.target.value);
50+
}}
51+
/>
52+
</label>
53+
54+
<label class="flex items-center justify-between gap-10">
55+
siblingCount
56+
<input
57+
type="number"
58+
style={{
59+
width: '50px',
60+
background: 'transparent',
61+
textAlign: 'right',
62+
}}
63+
value={siblingCount.value}
64+
onChange$={(e) => {
65+
siblingCount.value = Number(e.target.value);
66+
}}
67+
/>
68+
</label>
69+
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+
86+
<Toggle
87+
pressed={hideNextButton.value}
88+
onClick$={() => {
89+
hideNextButton.value = !hideNextButton.value;
90+
}}
91+
label="hideNextButton"
92+
/>
93+
94+
<Toggle
95+
pressed={hidePrevButton.value}
96+
onClick$={() => {
97+
hidePrevButton.value = !hidePrevButton.value;
98+
}}
99+
label="hidePrevButton"
100+
/>
101+
</div>
102+
</div>
103+
);
104+
});

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { component$, useSignal } from '@builder.io/qwik';
2+
import { Pagination } from '@qwik-ui/headless';
3+
4+
export default component$(() => {
5+
const selectedPage = useSignal(1);
6+
const totalPages = useSignal(10);
7+
8+
return (
9+
<div class="mt-4 flex flex-col gap-6">
10+
<Pagination
11+
selectedPage={selectedPage.value}
12+
totalPages={totalPages.value}
13+
onPageChange$={(page) => {
14+
selectedPage.value = page;
15+
}}
16+
class="border-2 border-white p-2"
17+
defaultClass="border-2 border-sky-400 p-4"
18+
selectedClass="border-2 border-red-500 bg-red-500 p-4"
19+
dividerClass="p-4"
20+
/>
21+
22+
<Pagination
23+
selectedPage={selectedPage.value}
24+
totalPages={totalPages.value}
25+
onPageChange$={(page) => {
26+
selectedPage.value = page;
27+
}}
28+
class="border-2 border-white p-2"
29+
defaultClass="bg-cyan-400 w-8 h-8"
30+
selectedClass="bg-red-500 w-8 h-8"
31+
dividerClass="bg-red-300 h-8 px-2"
32+
/>
33+
34+
<Pagination
35+
selectedPage={selectedPage.value}
36+
totalPages={totalPages.value}
37+
onPageChange$={(page) => {
38+
selectedPage.value = page;
39+
}}
40+
class="flex flex-col items-center gap-2 border border-sky-500"
41+
defaultClass=""
42+
selectedClass=""
43+
dividerClass=""
44+
/>
45+
</div>
46+
);
47+
});

0 commit comments

Comments
 (0)