Skip to content

Commit 83e0125

Browse files
thejacksheltonthejackshelton
authored
Merge pull request #623 from thejackshelton/feat/select
Select Features, Tests
2 parents 08ccd3c + 53b81db commit 83e0125

24 files changed

+1358
-92
lines changed

‎apps/website/src/routes/docs/headless/select/examples/add-users.tsx

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { component$, useSignal, $ } from '@builder.io/qwik';
2+
import {
3+
Select,
4+
SelectListbox,
5+
SelectOption,
6+
SelectTrigger,
7+
SelectValue,
8+
} from '@qwik-ui/headless';
9+
10+
export default component$(() => {
11+
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
12+
const hasAddedUsersSig = useSignal<boolean>(false);
13+
14+
return (
15+
<>
16+
<Select class="relative mb-2 min-w-40">
17+
<SelectTrigger class="w-full border-2 border-dashed border-red-400">
18+
<SelectValue placeholder="Select an option" />
19+
</SelectTrigger>
20+
<SelectListbox class="absolute w-full border-2 border-dashed border-green-400 bg-slate-900 p-2">
21+
{usersSig.value.map((user) => (
22+
<SelectOption
23+
class="border-dashed border-blue-400 data-[highlighted]:border-2"
24+
key={user}
25+
>
26+
{user}
27+
</SelectOption>
28+
))}
29+
</SelectListbox>
30+
</Select>
31+
<button
32+
class="bg-background border-2 border-dashed border-red-400"
33+
onClick$={$(() => {
34+
if (!hasAddedUsersSig.value) {
35+
usersSig.value = [...usersSig.value, 'John', 'Jane', 'Bob'];
36+
hasAddedUsersSig.value = true;
37+
}
38+
})}
39+
>
40+
Add Users
41+
</button>
42+
</>
43+
);
44+
});

‎apps/website/src/routes/docs/headless/select/examples/change-value.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { component$, useSignal, $ } from '@builder.io/qwik';
2+
import {
3+
Select,
4+
SelectListbox,
5+
SelectOption,
6+
SelectTrigger,
7+
SelectValue,
8+
} from '@qwik-ui/headless';
9+
export default component$(() => {
10+
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
11+
const counterSig = useSignal(0);
12+
13+
const handleChange$ = $((): void => {
14+
counterSig.value++;
15+
});
16+
17+
return (
18+
<>
19+
<Select onChange$={handleChange$} class="relative min-w-40">
20+
<SelectTrigger class="w-full border-2 border-dashed border-red-400">
21+
<SelectValue placeholder="Select an option" />
22+
</SelectTrigger>
23+
<SelectListbox class="absolute w-full border-2 border-dashed border-green-400 bg-slate-900 p-2">
24+
{usersSig.value.map((user) => (
25+
<SelectOption
26+
class="border-dashed border-blue-400 data-[highlighted]:border-2"
27+
key={user}
28+
>
29+
{user}
30+
</SelectOption>
31+
))}
32+
</SelectListbox>
33+
</Select>
34+
<p>You have changed {counterSig.value} times</p>
35+
</>
36+
);
37+
});

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { component$, useSignal, $ } from '@builder.io/qwik';
2+
import {
3+
Select,
4+
SelectListbox,
5+
SelectOption,
6+
SelectTrigger,
7+
SelectValue,
8+
} from '@qwik-ui/headless';
9+
export default component$(() => {
10+
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
11+
const selectedVal = useSignal<string>('Ryan');
12+
13+
return (
14+
<>
15+
<Select bind:value={selectedVal} class="relative min-w-40">
16+
<SelectTrigger class="w-full border-2 border-dashed border-red-400">
17+
<SelectValue placeholder="Select an option" />
18+
</SelectTrigger>
19+
<SelectListbox class="absolute w-full border-2 border-dashed border-green-400 bg-slate-900 p-2">
20+
{usersSig.value.map((user) => (
21+
<SelectOption
22+
class="border-dashed border-blue-400 data-[highlighted]:border-2"
23+
key={user}
24+
>
25+
{user}
26+
</SelectOption>
27+
))}
28+
</SelectListbox>
29+
</Select>
30+
<button onClick$={$(() => (selectedVal.value = 'Jessie'))}>
31+
Click me to change val!
32+
</button>
33+
</>
34+
);
35+
});

‎apps/website/src/routes/docs/headless/select/examples/disabled.tsx

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,15 @@ import {
88
} from '@qwik-ui/headless';
99

1010
export default component$(() => {
11-
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
11+
const usersSig = useSignal<string[]>([
12+
'Tim',
13+
'Ryan',
14+
'Jim',
15+
'Bobbie',
16+
'Joan',
17+
'Jessie',
18+
'Abby',
19+
]);
1220

1321
return (
1422
<Select class="relative min-w-40">
@@ -21,7 +29,11 @@ export default component$(() => {
2129
<SelectOption
2230
class="border-dashed border-blue-400 data-[highlighted]:border-2 data-[disabled]:bg-slate-600 data-[disabled]:opacity-30"
2331
key={user}
24-
disabled={index === 0 || index === usersSig.value.length - 1 ? true : false}
32+
disabled={
33+
index === 0 || index === 2 || index === usersSig.value.length - 1
34+
? true
35+
: false
36+
}
2537
>
2638
{user}
2739
</SelectOption>

‎apps/website/src/routes/docs/headless/select/examples/group.tsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { component$, useSignal } from '@builder.io/qwik';
2+
import {
3+
Select,
4+
SelectListbox,
5+
SelectOption,
6+
SelectTrigger,
7+
SelectValue,
8+
SelectGroup,
9+
SelectLabel,
10+
} from '@qwik-ui/headless';
11+
12+
export default component$(() => {
13+
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Abby']);
14+
const animalsSig = useSignal<string[]>(['Dog', 'Cat', 'Bird']);
15+
16+
return (
17+
<Select class="relative min-w-40">
18+
<SelectTrigger class="w-full border-2 border-dashed border-red-400">
19+
<SelectValue placeholder="Select an option" />
20+
</SelectTrigger>
21+
<SelectListbox class="absolute z-10 w-full border-2 border-dashed border-green-400 bg-slate-900 p-2">
22+
<SelectGroup>
23+
<SelectLabel class="text-sm text-slate-400">People</SelectLabel>
24+
{usersSig.value.map((user) => (
25+
<SelectOption
26+
class="border-dashed border-blue-400 data-[highlighted]:border-2"
27+
key={user}
28+
>
29+
{user}
30+
</SelectOption>
31+
))}
32+
</SelectGroup>
33+
<SelectGroup>
34+
<SelectLabel class="text-sm text-slate-400">Animals</SelectLabel>
35+
{animalsSig.value.map((animal) => (
36+
<SelectOption
37+
class="border-dashed border-blue-400 data-[highlighted]:border-2"
38+
key={animal}
39+
>
40+
{animal}
41+
</SelectOption>
42+
))}
43+
</SelectGroup>
44+
</SelectListbox>
45+
</Select>
46+
);
47+
});

‎apps/website/src/routes/docs/headless/select/examples/loop.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { component$, useSignal } from '@builder.io/qwik';
2+
import {
3+
Select,
4+
SelectListbox,
5+
SelectOption,
6+
SelectTrigger,
7+
SelectValue,
8+
} from '@qwik-ui/headless';
9+
10+
export default component$(() => {
11+
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
12+
13+
return (
14+
<Select loop={true} class="relative min-w-40">
15+
<SelectTrigger class="w-full border-2 border-dashed border-red-400">
16+
<SelectValue placeholder="Select an option" />
17+
</SelectTrigger>
18+
<SelectListbox class="absolute w-full border-2 border-dashed border-green-400 bg-slate-900 p-2">
19+
{usersSig.value.map((user) => (
20+
<SelectOption
21+
class="border-dashed border-blue-400 data-[highlighted]:border-2"
22+
key={user}
23+
>
24+
{user}
25+
</SelectOption>
26+
))}
27+
</SelectListbox>
28+
</Select>
29+
);
30+
});

‎apps/website/src/routes/docs/headless/select/examples/open-change.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { component$, useSignal, $ } from '@builder.io/qwik';
2+
import {
3+
Select,
4+
SelectListbox,
5+
SelectOption,
6+
SelectTrigger,
7+
SelectValue,
8+
} from '@qwik-ui/headless';
9+
export default component$(() => {
10+
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
11+
const openChangeSig = useSignal(0);
12+
13+
const handleOpenChange$ = $((): void => {
14+
openChangeSig.value++;
15+
});
16+
17+
return (
18+
<>
19+
<Select onOpenChange$={handleOpenChange$} class="relative min-w-40">
20+
<SelectTrigger class="w-full border-2 border-dashed border-red-400">
21+
<SelectValue placeholder="Select an option" />
22+
</SelectTrigger>
23+
<SelectListbox class="absolute w-full border-2 border-dashed border-green-400 bg-slate-900 p-2">
24+
{usersSig.value.map((user) => (
25+
<SelectOption
26+
class="border-dashed border-blue-400 data-[highlighted]:border-2"
27+
key={user}
28+
>
29+
{user}
30+
</SelectOption>
31+
))}
32+
</SelectListbox>
33+
</Select>
34+
<p>The listbox opened and closed {openChangeSig.value} time(s)</p>
35+
</>
36+
);
37+
});

‎apps/website/src/routes/docs/headless/select/examples/scrollable.tsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { component$, useSignal } from '@builder.io/qwik';
2+
import {
3+
Select,
4+
SelectListbox,
5+
SelectOption,
6+
SelectTrigger,
7+
SelectValue,
8+
SelectGroup,
9+
SelectLabel,
10+
} from '@qwik-ui/headless';
11+
12+
export default component$(() => {
13+
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
14+
const animalsSig = useSignal<string[]>(['Dog', 'Cat', 'Bird', 'Fish', 'Snake']);
15+
16+
return (
17+
<Select class="relative min-w-40">
18+
<SelectTrigger class="w-full border-2 border-dashed border-red-400">
19+
<SelectValue placeholder="Select an option" />
20+
</SelectTrigger>
21+
<SelectListbox class="absolute z-10 max-h-60 w-full overflow-y-auto border-2 border-dashed border-green-400 bg-slate-900 p-2">
22+
<SelectGroup>
23+
<SelectLabel class="text-sm text-slate-400">People</SelectLabel>
24+
{usersSig.value.map((user) => (
25+
<SelectOption
26+
class="border-dashed border-blue-400 data-[highlighted]:border-2"
27+
key={user}
28+
>
29+
{user}
30+
</SelectOption>
31+
))}
32+
</SelectGroup>
33+
<SelectGroup>
34+
<SelectLabel class="text-sm text-slate-400">Animals</SelectLabel>
35+
{animalsSig.value.map((animal) => (
36+
<SelectOption
37+
class="border-dashed border-blue-400 data-[highlighted]:border-2"
38+
key={animal}
39+
>
40+
{animal}
41+
</SelectOption>
42+
))}
43+
</SelectGroup>
44+
</SelectListbox>
45+
</Select>
46+
);
47+
});

‎apps/website/src/routes/docs/headless/select/examples/typeahead.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { component$, useSignal } from '@builder.io/qwik';
2+
import {
3+
Select,
4+
SelectListbox,
5+
SelectOption,
6+
SelectTrigger,
7+
SelectValue,
8+
} from '@qwik-ui/headless';
9+
10+
export default component$(() => {
11+
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
12+
13+
return (
14+
<Select class="relative min-w-40">
15+
<SelectTrigger class="w-full border-2 border-dashed border-red-400">
16+
<SelectValue placeholder="Select an option" />
17+
</SelectTrigger>
18+
<SelectListbox class="absolute w-full border-2 border-dashed border-green-400 bg-slate-900 p-2">
19+
{usersSig.value.map((user) => (
20+
<SelectOption
21+
class="border-dashed border-blue-400 data-[highlighted]:border-2"
22+
key={user}
23+
>
24+
{user}
25+
</SelectOption>
26+
))}
27+
</SelectListbox>
28+
</Select>
29+
);
30+
});

0 commit comments

Comments
 (0)