Skip to content

Commit 1b6e9a5

Browse files
fabiobiondifabiobiondi
committed
refactor(pagination): implement new version
1 parent 731c676 commit 1b6e9a5

File tree

5 files changed

+263
-440
lines changed

5 files changed

+263
-440
lines changed

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

Lines changed: 197 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,201 @@
1-
import { component$, useSignal, type QwikIntrinsicElements } from '@builder.io/qwik';
2-
import { Modal, ModalContent, ModalFooter, ModalHeader } from '@qwik-ui/headless';
1+
import { component$, useSignal, $ } from '@builder.io/qwik';
2+
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;
36

47
export default component$(() => {
5-
const showSig = useSignal(false);
8+
const selectedPage = useSignal(1);
9+
const totalPages = useSignal(10);
610

7-
return <>ciao giorgio</>;
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+
18+
return (
19+
<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+
109+
<Pagination
110+
selectedPage={selectedPage.value}
111+
totalPages={totalPages.value}
112+
onPageChange$={(page) => {
113+
selectedPage.value = page;
114+
}}
115+
selectedClass="bg-red-500"
116+
gap={'10px'}
117+
/>
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+
*/}
199+
</div>
200+
);
8201
});

‎packages/kit-headless/src/components/pagination/pagination.stories.tsx

Lines changed: 0 additions & 130 deletions
This file was deleted.

0 commit comments

Comments
 (0)