Skip to content

Commit c818eec

Browse files
thejacksheltonthejackshelton
authored
Updated checkbox (#969)
* initial tests * updated checkbox
1 parent 6fcd472 commit c818eec

38 files changed

+921
-928
lines changed

‎apps/website/src/routes/docs/headless/checkbox/examples/checklist.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { component$ } from '@builder.io/qwik';
2+
3+
import { Checklist } from '@qwik-ui/headless';
4+
5+
export default component$(() => {
6+
return (
7+
<Checklist.Root initialStates={[false, false, false]}>
8+
<Checklist.SelectAll class="flex items-center justify-center border-2 p-2">
9+
<div class="flex items-center justify-center border-2 p-2">
10+
<Checklist.ItemIndicator>✅</Checklist.ItemIndicator>
11+
</div>{' '}
12+
Select All
13+
</Checklist.SelectAll>
14+
15+
{Array.from({ length: 2 }, (_, index) => {
16+
const uniqueKey = `cl-${index}-${Date.now()}`;
17+
return (
18+
<Checklist.Item key={uniqueKey} _index={index}>
19+
<div class="flex items-center justify-center border-2 p-2">
20+
<Checklist.ItemIndicator>✅</Checklist.ItemIndicator>
21+
</div>
22+
{`item ${index}`}
23+
</Checklist.Item>
24+
);
25+
})}
26+
</Checklist.Root>
27+
);
28+
});

‎apps/website/src/routes/docs/headless/checkbox/examples/controlled-values.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
1+
import { component$, useSignal } from '@builder.io/qwik';
22
import { Checkbox } from '@qwik-ui/headless';
33
export default component$(() => {
44
const initialVal1 = false;

‎apps/website/src/routes/docs/headless/checkbox/examples/hero.tsx

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
1-
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
1+
import { component$, useSignal } from '@builder.io/qwik';
22
import { Checkbox } from '@qwik-ui/headless';
33
export default component$(() => {
4+
const isCheckedSig = useSignal(false);
5+
46
return (
5-
<>
6-
<Checkbox.Root id="test" class="flex items-center gap-3 border-2 border-black p-2 ">
7-
<Checkbox.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
8-
✅
9-
</Checkbox.Indicator>
10-
I have read the README
11-
</Checkbox.Root>
12-
</>
7+
<Checkbox.Root
8+
bind:checked={isCheckedSig}
9+
id="test"
10+
class="flex items-center gap-3 border-2 border-black p-2"
11+
>
12+
<div class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
13+
<Checkbox.Indicator>✅</Checkbox.Indicator>
14+
</div>
15+
<p> I have read the README</p>
16+
</Checkbox.Root>
1317
);
1418
});

‎apps/website/src/routes/docs/headless/checkbox/examples/pizza.tsx

Lines changed: 40 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,42 @@
1-
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2-
import { Checkbox, Checklist } from '@qwik-ui/headless';
3-
const toppingNames = ['hot peppers', 'ham', 'pineaple', 'mushroom'];
4-
const toppingImages = ['🌶️', '🍗', '🍍', '🍄'];
5-
export default component$(() => {
6-
return (
7-
<>
8-
<h3 id="pizza-toppings">Pizza toppings</h3>
9-
<Checklist.Root ariaLabeledBy="pizza-toppings" class="flex flex-col gap-4">
10-
<Checkbox.Root
11-
class="flex items-center gap-3 border-2 border-black p-2"
12-
checklist={true}
13-
>
14-
<Checklist.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
15-
<div q:slot="true" id="true-img">
16-
🍕
17-
</div>
1+
// import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2+
// import { Checkbox, Checklist } from '@qwik-ui/headless';
3+
// const toppingNames = ['hot peppers', 'ham', 'pineaple', 'mushroom'];
4+
// const toppingImages = ['🌶️', '🍗', '🍍', '🍄'];
5+
// export default component$(() => {
6+
// return (
7+
// <>
8+
// <h3 id="pizza-toppings">Pizza toppings</h3>
9+
// <Checklist.Root
10+
// ariaLabeledBy="pizza-toppings"
11+
// class="flex flex-col gap-4"
12+
// >
13+
// <Checkbox.Root
14+
// class="flex items-center gap-3 border-2 border-black p-2"
15+
// checklist={true}
16+
// >
17+
// <Checklist.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
18+
// <div q:slot="true" id="true-img">
19+
// 🍕
20+
// </div>
1821

19-
<div q:slot="mixed" id="mixed-img">
20-
➖
21-
</div>
22-
</Checklist.Indicator>
23-
Pick all toppings
24-
</Checkbox.Root>
22+
// <div q:slot="mixed" id="mixed-img">
23+
// ➖
24+
// </div>
25+
// </Checklist.Indicator>
26+
// Pick all toppings
27+
// </Checkbox.Root>
2528

26-
{toppingNames.map((name, i) => {
27-
return (
28-
<Checkbox.Root class="ml-8 flex items-center gap-3 border-2 border-black p-2">
29-
<Checkbox.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
30-
{toppingImages[i]}
31-
</Checkbox.Indicator>
32-
{name}
33-
</Checkbox.Root>
34-
);
35-
})}
36-
</Checklist.Root>
37-
</>
38-
);
39-
});
29+
// {toppingNames.map((name, i) => {
30+
// return (
31+
// <Checkbox.Root class="ml-8 flex items-center gap-3 border-2 border-black p-2">
32+
// <Checkbox.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
33+
// {toppingImages[i]}
34+
// </Checkbox.Indicator>
35+
// {name}
36+
// </Checkbox.Root>
37+
// );
38+
// })}
39+
// </Checklist.Root>
40+
// </>
41+
// );
42+
// });

‎apps/website/src/routes/docs/headless/checkbox/examples/reactive.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { component$, useSignal } from '@builder.io/qwik';
2+
import { Checkbox } from '@qwik-ui/headless';
3+
export default component$(() => {
4+
const isCheckedSig = useSignal(false);
5+
6+
return (
7+
<>
8+
<Checkbox.Root
9+
bind:checked={isCheckedSig}
10+
id="test"
11+
class="flex items-center gap-3 border-2 border-black p-2"
12+
>
13+
<div class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
14+
<Checkbox.Indicator>✅</Checkbox.Indicator>
15+
</div>
16+
<p> I have read the README</p>
17+
</Checkbox.Root>
18+
<button
19+
type="button"
20+
// biome-ignore lint/suspicious/noAssignInExpressions: <explanation>
21+
onClick$={() => (isCheckedSig.value = !isCheckedSig.value)}
22+
>
23+
Check the checkbox above
24+
</button>
25+
</>
26+
);
27+
});

‎apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-false.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
1+
import { component$, useSignal } from '@builder.io/qwik';
22
import { Checkbox, Checklist } from '@qwik-ui/headless';
33
// TODO: add logic to handle user passed sigs with trues
44
// this test basically ensures that the sig passed to the checklist controlls trumps all its children
@@ -7,10 +7,10 @@ export default component$(() => {
77
return (
88
<>
99
<h3 id="test123">Pick a cat</h3>
10-
<Checklist.Root class="flex flex-col gap-3" ariaLabeledBy="test123">
10+
<Checklist.Root initialStates={[false, false, false]}>
1111
<Checkbox.Root
1212
class="flex items-center gap-3 bg-slate-900 text-white"
13-
checklist={true}
13+
// checklist={true}
1414
bind:checked={checklistSig}
1515
id="checklist"
1616
>

‎apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-falses.tsx

Lines changed: 23 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,28 @@
1-
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2-
import { Checkbox, Checklist } from '@qwik-ui/headless';
1+
import { component$ } from '@builder.io/qwik';
2+
3+
import { Checklist } from '@qwik-ui/headless';
4+
35
export default component$(() => {
4-
const firstUserSig = useSignal(false);
5-
const secondUserSig = useSignal(false);
66
return (
7-
<>
8-
<h3 id="test123">Pick a cat</h3>
9-
<Checklist.Root class="flex flex-col gap-3" ariaLabeledBy="test123">
10-
<Checkbox.Root
11-
class="flex items-center gap-3 bg-slate-900 p-2 text-white"
12-
checklist={true}
13-
>
14-
<Checkbox.Indicator class=" flex w-[80px] justify-center bg-white p-3">
15-
✅
16-
</Checkbox.Indicator>
17-
<p>Controlls all</p>
18-
</Checkbox.Root>
19-
<Checkbox.Root
20-
bind:checked={firstUserSig}
21-
class="flex items-center gap-3 bg-slate-900 pr-2 text-white"
22-
>
23-
<Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
24-
<p>No other stuff is needed here</p>
25-
</Checkbox.Root>
7+
<Checklist.Root initialStates={[true, false, false]}>
8+
<Checklist.SelectAll class="flex h-[25px] w-[25px] items-center justify-center border-2 border-black p-2">
9+
<div class="flex h-[25px] w-[25px] items-center justify-center border-2 border-black p-2">
10+
<Checklist.ItemIndicator>✅</Checklist.ItemIndicator>
11+
</div>{' '}
12+
Select All
13+
</Checklist.SelectAll>
2614

27-
<Checkbox.Root bind:checked={secondUserSig} class="bg-slate-900 text-white">
28-
<div class="flex items-center gap-3">
29-
<Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
30-
<p>No other stuff is needed here</p>
31-
</div>
32-
</Checkbox.Root>
33-
</Checklist.Root>
34-
</>
15+
{Array.from({ length: 2 }, (_, index) => {
16+
const uniqueKey = `cl-${index}-${Date.now()}`;
17+
return (
18+
<Checklist.Item key={uniqueKey} _index={index}>
19+
<div class="flex h-[25px] w-[25px] items-center justify-center border-2 border-black p-2">
20+
<Checklist.ItemIndicator>✅</Checklist.ItemIndicator>
21+
</div>
22+
{`item ${index}`}
23+
</Checklist.Item>
24+
);
25+
})}
26+
</Checklist.Root>
3527
);
3628
});

‎apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-mixed.tsx

Lines changed: 45 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,46 @@
1-
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2-
import { Checkbox, Checklist } from '@qwik-ui/headless';
3-
export default component$(() => {
4-
const firstUserSig = useSignal(false);
5-
const secondUserSig = useSignal(true);
6-
return (
7-
<>
8-
<h3 id="test123">Pick a cat</h3>
9-
<Checklist.Root class="flex flex-col gap-3" ariaLabeledBy="test123">
10-
<Checkbox.Root
11-
class="flex items-center gap-3 bg-slate-900 p-2 text-white"
12-
checklist={true}
13-
>
14-
<Checklist.Indicator class="w-fit">
15-
<div q:slot="true" id="true-img">
16-
✅
17-
</div>
18-
<div q:slot="mixed" id="mixed-img">
19-
➖
20-
</div>
21-
</Checklist.Indicator>
22-
<p>Controlls all</p>
23-
</Checkbox.Root>
24-
<Checkbox.Root
25-
bind:checked={firstUserSig}
26-
class="flex items-center gap-3 bg-slate-900 pr-2 text-white"
27-
>
28-
<Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
29-
<p>No other stuff is needed here</p>
30-
</Checkbox.Root>
1+
// import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2+
// import { Checkbox, Checklist } from '@qwik-ui/headless';
3+
// export default component$(() => {
4+
// const firstUserSig = useSignal(false);
5+
// const secondUserSig = useSignal(true);
6+
// return (
7+
// <>
8+
// <h3 id="test123">Pick a cat</h3>
9+
// <Checklist.Root class="flex flex-col gap-3" ariaLabeledBy="test123">
10+
// <Checkbox.Root
11+
// class="flex items-center gap-3 bg-slate-900 p-2 text-white"
12+
// checklist={true}
13+
// >
14+
// <Checklist.Indicator class="w-fit">
15+
// <div q:slot="true" id="true-img">
16+
// ✅
17+
// </div>
18+
// <div q:slot="mixed" id="mixed-img">
19+
// ➖
20+
// </div>
21+
// </Checklist.Indicator>
22+
// <p>Controlls all</p>
23+
// </Checkbox.Root>
24+
// <Checkbox.Root
25+
// bind:checked={firstUserSig}
26+
// class="flex items-center gap-3 bg-slate-900 pr-2 text-white"
27+
// >
28+
// <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
29+
// <p>No other stuff is needed here</p>
30+
// </Checkbox.Root>
3131

32-
<Checkbox.Root bind:checked={secondUserSig} class="bg-slate-900 text-white">
33-
<div class="flex items-center gap-3">
34-
<Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
35-
<p>No other stuff is needed here</p>
36-
</div>
37-
</Checkbox.Root>
38-
</Checklist.Root>
39-
</>
40-
);
41-
});
32+
// <Checkbox.Root
33+
// bind:checked={secondUserSig}
34+
// class="bg-slate-900 text-white"
35+
// >
36+
// <div class="flex items-center gap-3">
37+
// <Checkbox.Indicator class="w-fit bg-slate-600">
38+
// ✅
39+
// </Checkbox.Indicator>
40+
// <p>No other stuff is needed here</p>
41+
// </div>
42+
// </Checkbox.Root>
43+
// </Checklist.Root>
44+
// </>
45+
// );
46+
// });

‎apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-true.tsx

Lines changed: 14 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,19 @@
1-
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2-
import { Checkbox, Checklist } from '@qwik-ui/headless';
1+
import { component$ } from '@builder.io/qwik';
2+
import { Checklist } from '@qwik-ui/headless';
33
// this test basically ensures that the sig passed to the checklist controlls trumps all its children
44
export default component$(() => {
5-
const checklistSig = useSignal(true);
5+
// const checklistSig = useSignal(true);
66
return (
7-
<>
8-
<h3 id="test123">Pick a cat</h3>
9-
<Checklist.Root class="flex flex-col gap-3" ariaLabeledBy="test123">
10-
<Checkbox.Root
11-
class="flex items-center gap-3 bg-slate-900 text-white"
12-
checklist={true}
13-
bind:checked={checklistSig}
14-
id="checklist"
15-
>
16-
<Checklist.Indicator class="w-fit">
17-
<div q:slot="true" id="true-img">
18-
✅
19-
</div>
20-
21-
<div q:slot="mixed" id="mixed-img">
22-
➖
23-
</div>
24-
</Checklist.Indicator>
25-
<p>Controlls all</p>
26-
</Checkbox.Root>
27-
<Checkbox.Root
28-
id="child-1"
29-
class="flex items-center gap-3 bg-slate-900 pr-2 text-white"
30-
>
31-
<Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
32-
<p>No other stuff is needed here</p>
33-
</Checkbox.Root>
34-
35-
<Checkbox.Root id="child-2" class="bg-slate-900 text-white">
36-
<div class="flex items-center gap-3">
37-
<Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
38-
<p>Im a true.tsx</p>
39-
</div>
40-
</Checkbox.Root>
41-
</Checklist.Root>
42-
<p>You signal is: </p>
43-
<p id="signal-to-text">{`${checklistSig.value}`}</p>
44-
</>
7+
<Checklist.Root initialStates={[true, true]}>
8+
<Checklist.SelectAll>
9+
<Checklist.Indicator>✅</Checklist.Indicator>
10+
</Checklist.SelectAll>
11+
<Checklist.Item>
12+
<Checklist.ItemIndicator>✅</Checklist.ItemIndicator> first item
13+
</Checklist.Item>
14+
<Checklist.Item>
15+
<Checklist.ItemIndicator>✅</Checklist.ItemIndicator> second item
16+
</Checklist.Item>
17+
</Checklist.Root>
4518
);
4619
});

0 commit comments

Comments
 (0)