Skip to content

Commit 203dc99

Browse files
zaynetzaynet
authored
Merge branch 'main' into progress
2 parents ff367f5 + cf91aa5 commit 203dc99

33 files changed

+1578
-0
lines changed

‎apps/component-tests/tailwind.config.cjs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ module.exports = {
88
join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}'),
99
join(__dirname, '../website/src/**/*.{js,ts,jsx,tsx,mdx}'),
1010
join(__dirname, '../../packages/kit-styled/src/**/*.{js,ts,jsx,tsx,mdx}'),
11+
join(__dirname, '../../packages/kit-headless/src/**/*.{js,ts,jsx,tsx,mdx}'),
1112
],
1213
plugins: [
1314
// PLUGIN-START

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export const statusByComponent: ComponentKitsStatuses = {
3838
Carousel: ComponentStatus.Draft,
3939
Collapsible: ComponentStatus.Beta,
4040
Combobox: ComponentStatus.Beta,
41+
Checkbox: ComponentStatus.Beta,
4142
Label: ComponentStatus.Draft,
4243
Modal: ComponentStatus.Beta,
4344
Pagination: ComponentStatus.Draft,

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2+
import { Checkbox } from '@qwik-ui/headless';
3+
export default component$(() => {
4+
const initialVal1 = false;
5+
const controlledSig1 = useSignal(initialVal1);
6+
const initialVal2 = true;
7+
const controlledSig2 = useSignal(initialVal2);
8+
return (
9+
<>
10+
<div class="flex gap-8">
11+
<div class="flex flex-col gap-3">
12+
<Checkbox.Root
13+
bind:checked={controlledSig1}
14+
id="test"
15+
class="flex items-center gap-3 border-2 border-black p-2 "
16+
>
17+
<Checkbox.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
18+
✅
19+
</Checkbox.Indicator>
20+
Toggle Value
21+
</Checkbox.Root>
22+
<p>The initial value was: {`${initialVal1}`}</p>
23+
<p>The current value is: {`${controlledSig1.value}`}</p>
24+
</div>
25+
<div class="flex flex-col gap-3">
26+
<Checkbox.Root
27+
bind:checked={controlledSig2}
28+
id="test"
29+
class="flex items-center gap-3 border-2 border-black p-2 "
30+
>
31+
<Checkbox.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
32+
✅
33+
</Checkbox.Indicator>
34+
Toggle Value
35+
</Checkbox.Root>
36+
<p>The initial value was: {`${initialVal2}`}</p>
37+
<p>The current value is: {`${controlledSig2.value}`}</p>
38+
</div>
39+
</div>
40+
</>
41+
);
42+
});

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { component$, useSignal } from '@builder.io/qwik';
2+
import { Checkbox } from '@qwik-ui/headless';
3+
export default component$(() => {
4+
const initialVal1 = false;
5+
const controlledSig1 = useSignal(initialVal1);
6+
return (
7+
<>
8+
<div class="flex gap-8">
9+
<div class="flex flex-col gap-3">
10+
<Checkbox.Root
11+
bind:checked={controlledSig1}
12+
id="test"
13+
class="flex items-center gap-3 border-2 border-black p-2 "
14+
>
15+
<Checkbox.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
16+
✅
17+
</Checkbox.Indicator>
18+
Toggle Value
19+
</Checkbox.Root>
20+
</div>
21+
</div>
22+
</>
23+
);
24+
});

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2+
import { Checkbox } from '@qwik-ui/headless';
3+
export default component$(() => {
4+
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+
</>
13+
);
14+
});

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
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>
18+
19+
<div q:slot="mixed" id="mixed-img">
20+
➖
21+
</div>
22+
</Checklist.Indicator>
23+
Pick all toppings
24+
</Checkbox.Root>
25+
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+
});

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

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

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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(false);
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+
<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>
26+
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+
</>
35+
);
36+
});

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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>
31+
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+
});

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2+
import { Checkbox, Checklist } from '@qwik-ui/headless';
3+
// this test basically ensures that the sig passed to the checklist controlls trumps all its children
4+
export default component$(() => {
5+
const checklistSig = 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 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+
</>
45+
);
46+
});

0 commit comments

Comments
 (0)