Skip to content

Commit ed34a92

Browse files
thejacksheltonthejackshelton
committed
feat(select): top layer
1 parent 094a21e commit ed34a92

File tree

21 files changed

+200
-152
lines changed

21 files changed

+200
-152
lines changed

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { $, component$, useSignal, useStyles$ } from '@builder.io/qwik';
22
import {
33
Select,
4+
SelectPopover,
45
SelectListbox,
56
SelectOption,
67
SelectTrigger,
@@ -19,13 +20,15 @@ export default component$(() => {
1920
<SelectTrigger class="select-trigger">
2021
<SelectValue placeholder="Select an option" />
2122
</SelectTrigger>
22-
<SelectListbox class="select-listbox">
23-
{usersSig.value.map((user) => (
24-
<SelectOption class="select-option" key={user}>
25-
{user}
26-
</SelectOption>
27-
))}
28-
</SelectListbox>
23+
<SelectPopover class="select-popover">
24+
<SelectListbox class="select-listbox">
25+
{usersSig.value.map((user) => (
26+
<SelectOption class="select-option" key={user}>
27+
{user}
28+
</SelectOption>
29+
))}
30+
</SelectListbox>
31+
</SelectPopover>
2932
</Select>
3033
<button
3134
onClick$={$(() => {

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { $, component$, useSignal, useStyles$ } from '@builder.io/qwik';
22
import {
33
Select,
4+
SelectPopover,
45
SelectListbox,
56
SelectOption,
67
SelectTrigger,
@@ -22,13 +23,15 @@ export default component$(() => {
2223
<SelectTrigger class="select-trigger">
2324
<SelectValue placeholder="Select an option" />
2425
</SelectTrigger>
25-
<SelectListbox class="select-listbox">
26-
{users.map((user) => (
27-
<SelectOption class="select-option" key={user}>
28-
{user}
29-
</SelectOption>
30-
))}
31-
</SelectListbox>
26+
<SelectPopover class="select-popover">
27+
<SelectListbox class="select-listbox">
28+
{users.map((user) => (
29+
<SelectOption class="select-option" key={user}>
30+
{user}
31+
</SelectOption>
32+
))}
33+
</SelectListbox>
34+
</SelectPopover>
3235
</Select>
3336
<p>You have changed {counter.value} times</p>
3437
</>

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { $, component$, useSignal, useStyles$ } from '@builder.io/qwik';
22
import {
33
Select,
4+
SelectPopover,
45
SelectListbox,
56
SelectOption,
67
SelectTrigger,
@@ -24,13 +25,15 @@ export default component$(() => {
2425
<SelectTrigger class="select-trigger">
2526
<SelectValue placeholder="Select an option" />
2627
</SelectTrigger>
27-
<SelectListbox class="select-listbox">
28-
{users.map((user, index) => (
29-
<SelectOption value={index.toString()} class="select-option" key={user}>
30-
{user}
31-
</SelectOption>
32-
))}
33-
</SelectListbox>
28+
<SelectPopover class="select-popover">
29+
<SelectListbox class="select-listbox">
30+
{users.map((user, index) => (
31+
<SelectOption value={index.toString()} class="select-option" key={user}>
32+
{user}
33+
</SelectOption>
34+
))}
35+
</SelectListbox>
36+
</SelectPopover>
3437
</Select>
3538
<button onClick$={$(() => (selected.value = '4'))}>Change to Abby</button>
3639
</>

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { $, component$, useSignal, useStyles$ } from '@builder.io/qwik';
22
import {
33
Select,
4+
SelectPopover,
45
SelectListbox,
56
SelectOption,
67
SelectTrigger,
@@ -24,13 +25,15 @@ export default component$(() => {
2425
<SelectTrigger class="select-trigger">
2526
<SelectValue placeholder="Select an option" />
2627
</SelectTrigger>
27-
<SelectListbox class="select-listbox">
28-
{users.map((user) => (
29-
<SelectOption class="select-option" key={user}>
30-
{user}
31-
</SelectOption>
32-
))}
33-
</SelectListbox>
28+
<SelectPopover class="select-popover">
29+
<SelectListbox class="select-listbox">
30+
{users.map((user) => (
31+
<SelectOption class="select-option" key={user}>
32+
{user}
33+
</SelectOption>
34+
))}
35+
</SelectListbox>
36+
</SelectPopover>
3437
</Select>
3538
<p>Your favorite user is: {selected.value}</p>
3639
</>

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

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { component$, useStyles$ } from '@builder.io/qwik';
22
import {
33
Select,
4+
SelectPopover,
45
SelectListbox,
56
SelectOption,
67
SelectTrigger,
@@ -18,19 +19,21 @@ export default component$(() => {
1819
<SelectTrigger class="select-trigger">
1920
<SelectValue placeholder="Select an option" />
2021
</SelectTrigger>
21-
<SelectListbox class="select-listbox">
22-
{users.map((user, index) => (
23-
<SelectOption
24-
class="select-option"
25-
key={user}
26-
disabled={
27-
index === 0 || index === 2 || index === users.length - 1 ? true : false
28-
}
29-
>
30-
{user}
31-
</SelectOption>
32-
))}
33-
</SelectListbox>
22+
<SelectPopover class="select-popover">
23+
<SelectListbox class="select-listbox">
24+
{users.map((user, index) => (
25+
<SelectOption
26+
class="select-option"
27+
key={user}
28+
disabled={
29+
index === 0 || index === 2 || index === users.length - 1 ? true : false
30+
}
31+
>
32+
{user}
33+
</SelectOption>
34+
))}
35+
</SelectListbox>
36+
</SelectPopover>
3437
</Select>
3538
);
3639
});

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

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { component$, useStyles$ } from '@builder.io/qwik';
22
import {
33
Select,
4+
SelectPopover,
45
SelectGroup,
56
SelectLabel,
67
SelectListbox,
@@ -20,24 +21,26 @@ export default component$(() => {
2021
<SelectTrigger class="select-trigger">
2122
<SelectValue placeholder="Select an option" />
2223
</SelectTrigger>
23-
<SelectListbox class="select-listbox">
24-
<SelectGroup>
25-
<SelectLabel class="select-label">People</SelectLabel>
26-
{users.map((user) => (
27-
<SelectOption class="select-option" key={user}>
28-
{user}
29-
</SelectOption>
30-
))}
31-
</SelectGroup>
32-
<SelectGroup>
33-
<SelectLabel class="select-label">Animals</SelectLabel>
34-
{animals.map((animal) => (
35-
<SelectOption class="select-option" key={animal}>
36-
{animal}
37-
</SelectOption>
38-
))}
39-
</SelectGroup>
40-
</SelectListbox>
24+
<SelectPopover class="select-popover">
25+
<SelectListbox class="select-listbox">
26+
<SelectGroup>
27+
<SelectLabel class="select-label">People</SelectLabel>
28+
{users.map((user) => (
29+
<SelectOption class="select-option" key={user}>
30+
{user}
31+
</SelectOption>
32+
))}
33+
</SelectGroup>
34+
<SelectGroup>
35+
<SelectLabel class="select-label">Animals</SelectLabel>
36+
{animals.map((animal) => (
37+
<SelectOption class="select-option" key={animal}>
38+
{animal}
39+
</SelectOption>
40+
))}
41+
</SelectGroup>
42+
</SelectListbox>
43+
</SelectPopover>
4144
</Select>
4245
);
4346
});

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { component$, useStyles$ } from '@builder.io/qwik';
22
import {
33
Select,
4+
SelectPopover,
45
SelectListbox,
56
SelectOption,
67
SelectTrigger,
@@ -17,13 +18,15 @@ export default component$(() => {
1718
<SelectTrigger class="select-trigger">
1819
<SelectValue placeholder="Select an option" />
1920
</SelectTrigger>
20-
<SelectListbox class="select-listbox">
21-
{users.map((user) => (
22-
<SelectOption class="select-option" key={user}>
23-
{user}
24-
</SelectOption>
25-
))}
26-
</SelectListbox>
21+
<SelectPopover class="select-popover">
22+
<SelectListbox class="select-listbox">
23+
{users.map((user) => (
24+
<SelectOption class="select-option" key={user}>
25+
{user}
26+
</SelectOption>
27+
))}
28+
</SelectListbox>
29+
</SelectPopover>
2730
</Select>
2831
);
2932
});

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { component$, useStyles$ } from '@builder.io/qwik';
22
import {
33
Select,
4+
SelectPopover,
45
SelectListbox,
56
SelectOption,
67
SelectTrigger,
@@ -17,13 +18,15 @@ export default component$(() => {
1718
<SelectTrigger class="select-trigger">
1819
<SelectValue placeholder="Select an option" />
1920
</SelectTrigger>
20-
<SelectListbox class="select-listbox">
21-
{users.map((user) => (
22-
<SelectOption class="select-option" key={user}>
23-
{user}
24-
</SelectOption>
25-
))}
26-
</SelectListbox>
21+
<SelectPopover class="select-popover">
22+
<SelectListbox class="select-listbox">
23+
{users.map((user) => (
24+
<SelectOption class="select-option" key={user}>
25+
{user}
26+
</SelectOption>
27+
))}
28+
</SelectListbox>
29+
</SelectPopover>
2730
</Select>
2831
);
2932
});

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { $, component$, useSignal, useStyles$ } from '@builder.io/qwik';
22
import {
33
Select,
4+
SelectPopover,
45
SelectListbox,
56
SelectOption,
67
SelectTrigger,
@@ -25,13 +26,15 @@ export default component$(() => {
2526
<SelectTrigger class="select-trigger">
2627
<SelectValue placeholder="Select an option" />
2728
</SelectTrigger>
28-
<SelectListbox class="select-listbox">
29-
{users.map((user) => (
30-
<SelectOption class="select-option" key={user}>
31-
{user}
32-
</SelectOption>
33-
))}
34-
</SelectListbox>
29+
<SelectPopover class="select-popover">
30+
<SelectListbox class="select-listbox">
31+
{users.map((user) => (
32+
<SelectOption class="select-option" key={user}>
33+
{user}
34+
</SelectOption>
35+
))}
36+
</SelectListbox>
37+
</SelectPopover>
3538
</Select>
3639
<p>The listbox opened and closed {changeCount.value} time(s)</p>
3740
</>

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { $, component$, useSignal, useStyles$ } from '@builder.io/qwik';
22
import {
33
Select,
4+
SelectPopover,
45
SelectListbox,
56
SelectOption,
67
SelectTrigger,
@@ -29,13 +30,15 @@ export default component$(() => {
2930
<SelectTrigger class="select-trigger">
3031
<SelectValue placeholder="Select an option" />
3132
</SelectTrigger>
32-
<SelectListbox class="select-listbox">
33-
{users.map((user) => (
34-
<SelectOption value={user.id} class="select-option" key={user.id}>
35-
{user.label}
36-
</SelectOption>
37-
))}
38-
</SelectListbox>
33+
<SelectPopover class="select-popover">
34+
<SelectListbox class="select-listbox">
35+
{users.map((user) => (
36+
<SelectOption value={user.id} class="select-option" key={user.id}>
37+
{user.label}
38+
</SelectOption>
39+
))}
40+
</SelectListbox>
41+
</SelectPopover>
3942
</Select>
4043
<p>The selected value is: {selected.value ?? 'null'}</p>
4144
</>

0 commit comments

Comments
 (0)