Skip to content

Commit d5be074

Browse files
wahyufebwahyufeb
authored
Merge branch 'main' into add-breadcrumb-component
2 parents 9488d0c + d96c401 commit d5be074

File tree

6 files changed

+299
-123
lines changed

6 files changed

+299
-123
lines changed

‎apps/website/src/routes/docs/daisy/pagination/index.tsx‎

Lines changed: 119 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,132 @@
1-
import { $, component$, useStore } from '@builder.io/qwik';
1+
import { component$, useSignal, useStore } from '@builder.io/qwik';
22
import { Pagination } from '@qwik-ui/theme-daisy';
33

44
export default component$(() => {
5-
const store = useStore({ page: 665 });
5+
const store = useStore({ page: 9 });
6+
const showFirstButton = useSignal(false);
7+
const showLastButton = useSignal(false);
8+
const hideNextButton = useSignal(false);
9+
const hidePrevButton = useSignal(false);
10+
const pages = useSignal(10);
11+
const siblingCount = useSignal(1);
12+
const boundaryCount = useSignal(1);
613

714
return (
8-
<div class="flex flex-col mt-4">
15+
<div class="flex flex-col gap-6 mt-4">
916
<h2>This is the documentation for the Pagination</h2>
17+
18+
<div
19+
class="flex flex-col gap-2 items-stretch"
20+
style={{
21+
width: '250px',
22+
}}
23+
>
24+
<label class="flex items-center justify-between gap-10">
25+
showFirstButton
26+
<input
27+
type="checkbox"
28+
checked={showFirstButton.value}
29+
onChange$={(e) => {
30+
showFirstButton.value = e.target.checked;
31+
}}
32+
/>
33+
</label>
34+
35+
<label class="flex items-center justify-between gap-10">
36+
showLastButton
37+
<input
38+
type="checkbox"
39+
checked={showLastButton.value}
40+
onChange$={(e) => {
41+
showLastButton.value = e.target.checked;
42+
}}
43+
/>
44+
</label>
45+
46+
<label class="flex items-center justify-between gap-10">
47+
hideNextButton
48+
<input
49+
type="checkbox"
50+
checked={hideNextButton.value}
51+
onChange$={(e) => {
52+
hideNextButton.value = e.target.checked;
53+
}}
54+
/>
55+
</label>
56+
57+
<label class="flex items-center justify-between gap-10">
58+
hidePrevButton
59+
<input
60+
type="checkbox"
61+
checked={hidePrevButton.value}
62+
onChange$={(e) => {
63+
hidePrevButton.value = e.target.checked;
64+
}}
65+
/>
66+
</label>
67+
68+
<label class="flex items-center justify-between gap-10">
69+
pages
70+
<input
71+
type="number"
72+
style={{
73+
width: '50px',
74+
background: 'transparent',
75+
textAlign: 'right',
76+
}}
77+
value={pages.value}
78+
onChange$={(e) => {
79+
pages.value = Number(e.target.value);
80+
}}
81+
/>
82+
</label>
83+
84+
<label class="flex items-center justify-between gap-10">
85+
siblingCount
86+
<input
87+
type="number"
88+
style={{
89+
width: '50px',
90+
background: 'transparent',
91+
textAlign: 'right',
92+
}}
93+
value={siblingCount.value}
94+
onChange$={(e) => {
95+
siblingCount.value = Number(e.target.value);
96+
}}
97+
/>
98+
</label>
99+
100+
<label class="flex items-center justify-between gap-10">
101+
boundaryCount
102+
<input
103+
type="number"
104+
style={{
105+
width: '50px',
106+
background: 'transparent',
107+
textAlign: 'right',
108+
}}
109+
value={boundaryCount.value}
110+
onChange$={(e) => {
111+
boundaryCount.value = Number(e.target.value);
112+
}}
113+
/>
114+
</label>
115+
</div>
116+
10117
<div class="flex flex-col gap-8">
11-
<h2>Basic Example:</h2>
12118
<Pagination
13-
pages={1500}
119+
pages={pages.value}
14120
page={store.page}
15-
onPaging$={$((newValue: number) => {
121+
onPaging$={(newValue: number) => {
16122
store.page = newValue;
17-
})}
123+
}}
124+
showFirstButton={showFirstButton.value}
125+
showLastButton={showLastButton.value}
126+
hideNextButton={hideNextButton.value}
127+
hidePrevButton={hidePrevButton.value}
128+
siblingCount={siblingCount.value}
129+
boundaryCount={boundaryCount.value}
18130
/>
19131
</div>
20132
</div>

‎apps/website/src/routes/docs/daisy/toggle/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default component$(() => {
77
<>
88
<h2>This is the documentation for the Toggle</h2>
99
<Toggle
10-
checked={toggleChecked.value}
10+
pressed={toggleChecked.value}
1111
onClick$={() => {
1212
toggleChecked.value = !toggleChecked.value;
1313
}}

‎packages/daisy/src/components/pagination/pagination.tsx‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ import { component$, PropFunction } from '@builder.io/qwik';
22
import {
33
IRenderPaginationItemProps,
44
Pagination as HeadlessPagination,
5+
IPaginationProps,
56
} from '@qwik-ui/headless';
67
import { Button } from '../button/button';
78

8-
export interface PaginationProps {
9+
export interface PaginationProps extends Omit<IPaginationProps, 'RenderItem'> {
910
pages: number;
1011
page: number;
1112
onPaging$: PropFunction<(index: number) => void>;
@@ -46,18 +47,21 @@ export const RenderPaginationItem = component$(
4647
}
4748
);
4849

49-
export const Pagination = component$((props: PaginationProps) => {
50-
return (
51-
<div class="flex gap-2 items-center">
52-
<HeadlessPagination
53-
page={props.page}
54-
pages={props.pages}
55-
onPaging$={props.onPaging$}
56-
RenderItem={RenderPaginationItem}
57-
RenderDivider={component$(() => {
58-
return <span class="mb-2">...</span>;
59-
})}
60-
/>
61-
</div>
62-
);
63-
});
50+
export const Pagination = component$(
51+
({ page, pages, onPaging$, ...rest }: PaginationProps) => {
52+
return (
53+
<div class="flex gap-2 items-center">
54+
<HeadlessPagination
55+
{...rest}
56+
page={page}
57+
pages={pages}
58+
onPaging$={onPaging$}
59+
RenderItem={RenderPaginationItem}
60+
RenderDivider={component$(() => {
61+
return <span class="mb-2">...</span>;
62+
})}
63+
/>
64+
</div>
65+
);
66+
}
67+
);

‎packages/daisy/src/components/toggle/toggle.tsx‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,21 @@
1-
import { component$, PropFunction, QwikMouseEvent } from '@builder.io/qwik';
2-
import { Toggle as HeadlessToggle } from '@qwik-ui/headless';
1+
import { component$ } from '@builder.io/qwik';
2+
import {
3+
Toggle as HeadlessToggle,
4+
ToggleProps as HeadlessToggleProps,
5+
} from '@qwik-ui/headless';
36

4-
interface ToggleProps {
7+
export interface ToggleProps extends HeadlessToggleProps {
58
class?: string;
6-
checked: boolean;
79
label?: string;
8-
onClick$: PropFunction<(evt: QwikMouseEvent) => void>;
910
}
1011

11-
export const Toggle = component$(
12-
({ checked, label, ...props }: ToggleProps) => {
13-
return (
14-
<div class="form-control">
15-
<label class="label cursor-pointer">
16-
{label && <span class="label-text">{label}</span>}
17-
<HeadlessToggle class="toggle" pressed={checked} {...props} />
18-
</label>
19-
</div>
20-
);
21-
}
22-
);
12+
export const Toggle = component$(({ label, ...props }: ToggleProps) => {
13+
return (
14+
<div class="form-control">
15+
<label class="label cursor-pointer">
16+
{label && <span class="label-text">{label}</span>}
17+
<HeadlessToggle class="toggle" {...props} />
18+
</label>
19+
</div>
20+
);
21+
});

0 commit comments

Comments
 (0)