Skip to content

Commit 79a0683

Browse files
fabiobiondifabiobiondi
committed
feat(pagination): add algorithm for dynamic button generation
1 parent 1b6e9a5 commit 79a0683

File tree

5 files changed

+395
-229
lines changed

5 files changed

+395
-229
lines changed

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@ import { JSXNode, component$ } from '@builder.io/qwik';
22
import { PreviewCodeExampleTabs } from '../../../_components/preview-code-example/preview-code-example-tabs';
33

44
import Basic from './examples/basic';
5+
import Interactive from './examples/interactive';
56
import basicCode from './examples/basic?raw';
7+
import interactiveCode from './examples/interactive?raw';
68

79
export type Example = {
810
component: JSXNode;
@@ -15,6 +17,10 @@ export const examples: Record<string, Example> = {
1517
component: <Basic />,
1618
code: basicCode,
1719
},
20+
interactive: {
21+
component: <Interactive />,
22+
code: interactiveCode,
23+
},
1824
};
1925

2026
export type ShowExampleProps = {

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

Lines changed: 1 addition & 183 deletions
Original file line numberDiff line numberDiff line change
@@ -1,201 +1,19 @@
1-
import { component$, useSignal, $ } from '@builder.io/qwik';
1+
import { component$, useSignal } from '@builder.io/qwik';
22
import { Pagination } from '@qwik-ui/headless';
3-
import { Toggle } from '@qwik-ui/tailwind';
4-
import { Simulate } from 'react-dom/test-utils';
5-
import select = Simulate.select;
63

74
export default component$(() => {
85
const selectedPage = useSignal(1);
96
const totalPages = useSignal(10);
107

11-
const showFirstButton = useSignal(true);
12-
const showLastButton = useSignal(true);
13-
const hideNextButton = useSignal(true);
14-
const hidePrevButton = useSignal(true);
15-
const siblingCount = useSignal(1);
16-
const boundaryCount = useSignal(1);
17-
188
return (
199
<div class="mt-4 flex flex-col gap-6">
20-
<h2>This is the documentation for the Pagination</h2>
21-
22-
<div
23-
class="flex flex-col items-stretch gap-2"
24-
style={{
25-
width: '250px',
26-
}}
27-
>
28-
<Toggle
29-
pressed={showFirstButton.value}
30-
onClick$={() => {
31-
showFirstButton.value = !showFirstButton.value;
32-
}}
33-
label="showFirstButton"
34-
/>
35-
36-
<Toggle
37-
pressed={showLastButton.value}
38-
onClick$={() => {
39-
showLastButton.value = !showLastButton.value;
40-
}}
41-
label="showLastButton"
42-
/>
43-
44-
<Toggle
45-
pressed={hideNextButton.value}
46-
onClick$={() => {
47-
hideNextButton.value = !hideNextButton.value;
48-
}}
49-
label="hideNextButton"
50-
/>
51-
52-
<Toggle
53-
pressed={hidePrevButton.value}
54-
onClick$={() => {
55-
hidePrevButton.value = !hidePrevButton.value;
56-
}}
57-
label="hidePrevButton"
58-
/>
59-
60-
<label class="flex items-center justify-between gap-10">
61-
pages
62-
<input
63-
type="number"
64-
style={{
65-
width: '50px',
66-
background: 'transparent',
67-
textAlign: 'right',
68-
}}
69-
value={totalPages.value}
70-
onChange$={(e) => {
71-
totalPages.value = Number(e.target.value);
72-
}}
73-
/>
74-
</label>
75-
76-
<label class="flex items-center justify-between gap-10">
77-
siblingCount
78-
<input
79-
type="number"
80-
style={{
81-
width: '50px',
82-
background: 'transparent',
83-
textAlign: 'right',
84-
}}
85-
value={siblingCount.value}
86-
onChange$={(e) => {
87-
siblingCount.value = Number(e.target.value);
88-
}}
89-
/>
90-
</label>
91-
92-
<label class="flex items-center justify-between gap-10">
93-
boundaryCount
94-
<input
95-
type="number"
96-
style={{
97-
width: '50px',
98-
background: 'transparent',
99-
textAlign: 'right',
100-
}}
101-
value={boundaryCount.value}
102-
onChange$={(e) => {
103-
boundaryCount.value = Number(e.target.value);
104-
}}
105-
/>
106-
</label>
107-
</div>
108-
10910
<Pagination
11011
selectedPage={selectedPage.value}
11112
totalPages={totalPages.value}
11213
onPageChange$={(page) => {
11314
selectedPage.value = page;
11415
}}
115-
selectedClass="bg-red-500"
116-
gap={'10px'}
11716
/>
118-
{/*
119-
120-
<Pagination
121-
activeClass="bg-red-500"
122-
pages={20} page={10} onPaging$={() => console.log('pippo')}/>
123-
124-
<h2>Interactive Demo</h2>
125-
126-
<Pagination
127-
pages={pages.value}
128-
page={page.value}
129-
onPaging$={(newValue: number) => {
130-
page.value = newValue;
131-
}}
132-
showFirstButton={showFirstButton.value}
133-
showLastButton={showLastButton.value}
134-
hideNextButton={hideNextButton.value}
135-
hidePrevButton={hidePrevButton.value}
136-
siblingCount={siblingCount.value}
137-
boundaryCount={boundaryCount.value}
138-
/>*/}
139-
{/*
140-
141-
<h2>Size</h2>
142-
<div class="flex flex-col gap-8">
143-
<Pagination pages={5} page={1} size="xs" />
144-
<Pagination pages={5} page={1} size="sm" />
145-
<Pagination pages={5} page={1} size="md" />
146-
<Pagination pages={5} page={1} size="lg" />
147-
</div>
148-
149-
<h2>Variants</h2>
150-
<div class="flex flex-col gap-8">
151-
<Pagination pages={5} page={1} />
152-
<Pagination pages={5} page={1} variant="primary" />
153-
<Pagination pages={5} page={1} variant="secondary" />
154-
<Pagination pages={5} page={1} variant="accent" />
155-
<Pagination pages={5} page={1} variant="disabled" />
156-
<Pagination pages={5} page={1} variant="success" />
157-
<Pagination pages={5} page={1} variant="error" />
158-
<Pagination pages={5} page={1} variant="info" />
159-
<Pagination pages={5} page={1} variant="link" />
160-
<Pagination pages={5} page={1} variant="warning" />
161-
</div>
162-
163-
<h2>Outline</h2>
164-
<div class="flex flex-col gap-8">
165-
<Pagination pages={5} page={1} outline />
166-
</div>
167-
168-
<h2>Square</h2>
169-
<div class="flex flex-col gap-8">
170-
<Pagination pages={5} page={1} square />
171-
</div>
172-
173-
<h2>Disabled</h2>
174-
<div class="flex flex-col gap-8">
175-
<Pagination pages={5} page={1} disabled={true} />
176-
</div>
177-
178-
<h2>Custom styles and labels</h2>
179-
180-
<div class="flex flex-col gap-8">
181-
<Pagination
182-
pages={pages.value}
183-
page={page.value}
184-
onPaging$={(newValue: number) => {
185-
page.value = newValue;
186-
}}
187-
showFirstButton={showFirstButton.value}
188-
showLastButton={showLastButton.value}
189-
hideNextButton={hideNextButton.value}
190-
hidePrevButton={hidePrevButton.value}
191-
siblingCount={siblingCount.value}
192-
boundaryCount={boundaryCount.value}
193-
activeClass="!bg-cyan-800"
194-
defaultClass="bg-cyan-500"
195-
labels={{ prev: '⬅️', next: '➡️', first: 'START', last: 'END' }}
196-
/>
197-
</div>
198-
*/}
19917
</div>
20018
);
20119
});

0 commit comments

Comments
 (0)