Skip to content

Commit e3bf9d3

Browse files
thejacksheltonthejackshelton
authored
Merge pull request #634 from thejackshelton/feat/select
Feat/select
2 parents 94bb6d9 + 9ea6365 commit e3bf9d3

File tree

21 files changed

+226
-95
lines changed

21 files changed

+226
-95
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { component$, useSignal, $, useStyles$ } from '@builder.io/qwik';
2-
import styles from './select.css?inline';
1+
import { $, component$, useSignal, useStyles$ } from '@builder.io/qwik';
32
import {
43
Select,
54
SelectListbox,
65
SelectOption,
76
SelectTrigger,
87
SelectValue,
98
} from '@qwik-ui/headless';
9+
import styles from './select.css?inline';
1010

1111
export default component$(() => {
1212
useStyles$(styles);

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
import { component$, useSignal, $, useStyles$ } from '@builder.io/qwik';
2-
import styles from './select.css?inline';
1+
import { $, component$, useSignal, useStyles$ } from '@builder.io/qwik';
32
import {
43
Select,
54
SelectListbox,
65
SelectOption,
76
SelectTrigger,
87
SelectValue,
98
} from '@qwik-ui/headless';
9+
import styles from './select.css?inline';
1010
export default component$(() => {
1111
useStyles$(styles);
12-
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
13-
const counterSig = useSignal(0);
12+
const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
13+
const counter = useSignal(0);
1414

1515
const handleChange$ = $((): void => {
16-
counterSig.value++;
16+
counter.value++;
1717
});
1818

1919
return (
@@ -23,14 +23,14 @@ export default component$(() => {
2323
<SelectValue placeholder="Select an option" />
2424
</SelectTrigger>
2525
<SelectListbox class="select-listbox">
26-
{usersSig.value.map((user) => (
26+
{users.map((user) => (
2727
<SelectOption class="select-option" key={user}>
2828
{user}
2929
</SelectOption>
3030
))}
3131
</SelectListbox>
3232
</Select>
33-
<p>You have changed {counterSig.value} times</p>
33+
<p>You have changed {counter.value} times</p>
3434
</>
3535
);
3636
});

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

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,38 @@
1-
import { component$, useSignal, $, useStyles$ } from '@builder.io/qwik';
2-
import styles from './select.css?inline';
1+
import { $, component$, useSignal, useStyles$ } from '@builder.io/qwik';
32
import {
43
Select,
54
SelectListbox,
65
SelectOption,
76
SelectTrigger,
87
SelectValue,
98
} from '@qwik-ui/headless';
9+
import styles from './select.css?inline';
1010
export default component$(() => {
1111
useStyles$(styles);
12-
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
13-
const selectedVal = useSignal<string>('Ryan');
12+
const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
13+
const selected = useSignal<string>('Ryan');
1414

1515
return (
1616
<>
17-
<Select bind:value={selectedVal} class="select">
17+
<Select
18+
onChange$={$((value: string) => {
19+
selected.value = value;
20+
})}
21+
bind:value={selected}
22+
class="select"
23+
>
1824
<SelectTrigger class="select-trigger">
1925
<SelectValue placeholder="Select an option" />
2026
</SelectTrigger>
2127
<SelectListbox class="select-listbox">
22-
{usersSig.value.map((user) => (
28+
{users.map((user) => (
2329
<SelectOption class="select-option" key={user}>
2430
{user}
2531
</SelectOption>
2632
))}
2733
</SelectListbox>
2834
</Select>
29-
<button onClick$={$(() => (selectedVal.value = 'Jessie'))}>
30-
Click me to change val!
31-
</button>
35+
<p>Your favorite user is: {selected.value}</p>
3236
</>
3337
);
3438
});

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

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,16 @@
1-
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2-
import styles from './select.css?inline';
1+
import { component$, useStyles$ } from '@builder.io/qwik';
32
import {
43
Select,
54
SelectListbox,
65
SelectOption,
76
SelectTrigger,
87
SelectValue,
98
} from '@qwik-ui/headless';
9+
import styles from './select.css?inline';
1010

1111
export default component$(() => {
1212
useStyles$(styles);
13-
const usersSig = useSignal<string[]>([
14-
'Tim',
15-
'Ryan',
16-
'Jim',
17-
'Bobbie',
18-
'Joan',
19-
'Jessie',
20-
'Abby',
21-
]);
13+
const users = ['Tim', 'Ryan', 'Jim', 'Bobbie', 'Joan', 'Jessie', 'Abby'];
2214

2315
return (
2416
<Select class="select">
@@ -27,14 +19,12 @@ export default component$(() => {
2719
<SelectValue placeholder="Select an option" />
2820
</SelectTrigger>
2921
<SelectListbox class="select-listbox">
30-
{usersSig.value.map((user, index) => (
22+
{users.map((user, index) => (
3123
<SelectOption
3224
class="select-option"
3325
key={user}
3426
disabled={
35-
index === 0 || index === 2 || index === usersSig.value.length - 1
36-
? true
37-
: false
27+
index === 0 || index === 2 || index === users.length - 1 ? true : false
3828
}
3929
>
4030
{user}

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2-
import styles from './select.css?inline';
1+
import { component$, useStyles$ } from '@builder.io/qwik';
32
import {
43
Select,
4+
SelectGroup,
5+
SelectLabel,
56
SelectListbox,
67
SelectOption,
78
SelectTrigger,
89
SelectValue,
9-
SelectGroup,
10-
SelectLabel,
1110
} from '@qwik-ui/headless';
11+
import styles from './select.css?inline';
1212

1313
export default component$(() => {
1414
useStyles$(styles);
15-
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Abby']);
16-
const animalsSig = useSignal<string[]>(['Dog', 'Cat', 'Bird']);
15+
const users = ['Tim', 'Ryan', 'Jim', 'Abby'];
16+
const animals = ['Dog', 'Cat', 'Bird'];
1717

1818
return (
1919
<Select class="select">
@@ -23,15 +23,15 @@ export default component$(() => {
2323
<SelectListbox class="select-listbox">
2424
<SelectGroup>
2525
<SelectLabel class="select-label">People</SelectLabel>
26-
{usersSig.value.map((user) => (
26+
{users.map((user) => (
2727
<SelectOption class="select-option" key={user}>
2828
{user}
2929
</SelectOption>
3030
))}
3131
</SelectGroup>
3232
<SelectGroup>
3333
<SelectLabel class="select-label">Animals</SelectLabel>
34-
{animalsSig.value.map((animal) => (
34+
{animals.map((animal) => (
3535
<SelectOption class="select-option" key={animal}>
3636
{animal}
3737
</SelectOption>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
1-
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2-
import styles from './select.css?inline';
1+
import { component$, useStyles$ } from '@builder.io/qwik';
32
import {
43
Select,
54
SelectListbox,
65
SelectOption,
76
SelectTrigger,
87
SelectValue,
98
} from '@qwik-ui/headless';
9+
import styles from './select.css?inline';
1010

1111
export default component$(() => {
1212
useStyles$(styles);
13-
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
13+
const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
1414

1515
return (
1616
<Select class="select">
1717
<SelectTrigger class="select-trigger">
1818
<SelectValue placeholder="Select an option" />
1919
</SelectTrigger>
2020
<SelectListbox class="select-listbox">
21-
{usersSig.value.map((user) => (
21+
{users.map((user) => (
2222
<SelectOption class="select-option" key={user}>
2323
{user}
2424
</SelectOption>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
1-
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2-
import styles from './select.css?inline';
1+
import { component$, useStyles$ } from '@builder.io/qwik';
32
import {
43
Select,
54
SelectListbox,
65
SelectOption,
76
SelectTrigger,
87
SelectValue,
98
} from '@qwik-ui/headless';
9+
import styles from './select.css?inline';
1010

1111
export default component$(() => {
1212
useStyles$(styles);
13-
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
13+
const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
1414

1515
return (
1616
<Select loop={true} class="select">
1717
<SelectTrigger class="select-trigger">
1818
<SelectValue placeholder="Select an option" />
1919
</SelectTrigger>
2020
<SelectListbox class="select-listbox">
21-
{usersSig.value.map((user) => (
21+
{users.map((user) => (
2222
<SelectOption class="select-option" key={user}>
2323
{user}
2424
</SelectOption>

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { component$ } from '@builder.io/qwik';
2+
3+
export default component$(() => {
4+
const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
5+
6+
return (
7+
<select multiple size={3}>
8+
{users.map((user) => (
9+
<option key={user}>{user}</option>
10+
))}
11+
</select>
12+
);
13+
});

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import { component$, useSignal, $, useStyles$ } from '@builder.io/qwik';
2-
import styles from './select.css?inline';
1+
import { $, component$, useSignal, useStyles$ } from '@builder.io/qwik';
32
import {
43
Select,
54
SelectListbox,
65
SelectOption,
76
SelectTrigger,
87
SelectValue,
98
} from '@qwik-ui/headless';
9+
import styles from './select.css?inline';
1010
export default component$(() => {
1111
useStyles$(styles);
12-
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
12+
const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
1313
const openChangeSig = useSignal(0);
1414

1515
const handleOpenChange$ = $((): void => {
@@ -23,7 +23,7 @@ export default component$(() => {
2323
<SelectValue placeholder="Select an option" />
2424
</SelectTrigger>
2525
<SelectListbox class="select-listbox">
26-
{usersSig.value.map((user) => (
26+
{users.map((user) => (
2727
<SelectOption class="select-option" key={user}>
2828
{user}
2929
</SelectOption>

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2-
import styles from './select.css?inline';
1+
import { component$, useStyles$ } from '@builder.io/qwik';
32
import {
43
Select,
4+
SelectGroup,
5+
SelectLabel,
56
SelectListbox,
67
SelectOption,
78
SelectTrigger,
89
SelectValue,
9-
SelectGroup,
10-
SelectLabel,
1110
} from '@qwik-ui/headless';
11+
import styles from './select.css?inline';
1212

1313
export default component$(() => {
1414
useStyles$(styles);
15-
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
16-
const animalsSig = useSignal<string[]>(['Dog', 'Cat', 'Bird', 'Fish', 'Snake']);
15+
const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
16+
const animals = ['Dog', 'Cat', 'Bird', 'Fish', 'Snake'];
1717

1818
return (
1919
<Select class="select">
@@ -23,15 +23,15 @@ export default component$(() => {
2323
<SelectListbox class="select-listbox select-max-height">
2424
<SelectGroup>
2525
<SelectLabel class="select-label">People</SelectLabel>
26-
{usersSig.value.map((user) => (
26+
{users.map((user) => (
2727
<SelectOption class="select-option" key={user}>
2828
{user}
2929
</SelectOption>
3030
))}
3131
</SelectGroup>
3232
<SelectGroup>
3333
<SelectLabel class="select-label">Animals</SelectLabel>
34-
{animalsSig.value.map((animal) => (
34+
{animals.map((animal) => (
3535
<SelectOption class="select-option" key={animal}>
3636
{animal}
3737
</SelectOption>

0 commit comments

Comments
 (0)