Skip to content

Commit ebfc0d7

Browse files
maiieulmaiieul
committed
Merge branch 'main' into docs-ux
2 parents f67a1f1 + 29bb39a commit ebfc0d7

29 files changed

+1418
-121
lines changed

‎apps/website/src/routes/docs/headless/select/examples/add-users.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 styles from './select.css?inline';
3+
import {
4+
Select,
5+
SelectListbox,
6+
SelectOption,
7+
SelectTrigger,
8+
SelectValue,
9+
} from '@qwik-ui/headless';
10+
11+
export default component$(() => {
12+
useStyles$(styles);
13+
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
14+
const hasAddedUsersSig = useSignal<boolean>(false);
15+
16+
return (
17+
<>
18+
<Select class="select">
19+
<SelectTrigger class="select-trigger">
20+
<SelectValue placeholder="Select an option" />
21+
</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>
29+
</Select>
30+
<button
31+
onClick$={$(() => {
32+
if (!hasAddedUsersSig.value) {
33+
usersSig.value = [...usersSig.value, 'John', 'Jane', 'Bob'];
34+
hasAddedUsersSig.value = true;
35+
}
36+
})}
37+
>
38+
Add Users
39+
</button>
40+
</>
41+
);
42+
});

‎apps/website/src/routes/docs/headless/select/examples/change-value.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 styles from './select.css?inline';
3+
import {
4+
Select,
5+
SelectListbox,
6+
SelectOption,
7+
SelectTrigger,
8+
SelectValue,
9+
} from '@qwik-ui/headless';
10+
export default component$(() => {
11+
useStyles$(styles);
12+
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
13+
const counterSig = useSignal(0);
14+
15+
const handleChange$ = $((): void => {
16+
counterSig.value++;
17+
});
18+
19+
return (
20+
<>
21+
<Select onChange$={handleChange$} class="select">
22+
<SelectTrigger class="select-trigger">
23+
<SelectValue placeholder="Select an option" />
24+
</SelectTrigger>
25+
<SelectListbox class="select-listbox">
26+
{usersSig.value.map((user) => (
27+
<SelectOption class="select-option" key={user}>
28+
{user}
29+
</SelectOption>
30+
))}
31+
</SelectListbox>
32+
</Select>
33+
<p>You have changed {counterSig.value} times</p>
34+
</>
35+
);
36+
});

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { component$, useSignal, $, useStyles$ } from '@builder.io/qwik';
2+
import styles from './select.css?inline';
3+
import {
4+
Select,
5+
SelectListbox,
6+
SelectOption,
7+
SelectTrigger,
8+
SelectValue,
9+
} from '@qwik-ui/headless';
10+
export default component$(() => {
11+
useStyles$(styles);
12+
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
13+
const selectedVal = useSignal<string>('Ryan');
14+
15+
return (
16+
<>
17+
<Select bind:value={selectedVal} class="select">
18+
<SelectTrigger class="select-trigger">
19+
<SelectValue placeholder="Select an option" />
20+
</SelectTrigger>
21+
<SelectListbox class="select-listbox">
22+
{usersSig.value.map((user) => (
23+
<SelectOption class="select-option" key={user}>
24+
{user}
25+
</SelectOption>
26+
))}
27+
</SelectListbox>
28+
</Select>
29+
<button onClick$={$(() => (selectedVal.value = 'Jessie'))}>
30+
Click me to change val!
31+
</button>
32+
</>
33+
);
34+
});

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

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { component$, useSignal } from '@builder.io/qwik';
1+
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2+
import styles from './select.css?inline';
23
import {
34
Select,
45
SelectListbox,
@@ -8,20 +9,33 @@ import {
89
} from '@qwik-ui/headless';
910

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

1323
return (
14-
<Select class="relative min-w-40">
24+
<Select class="select">
1525
<p>This one is the disabled</p>
16-
<SelectTrigger class="w-full border-2 border-dashed border-red-400">
26+
<SelectTrigger class="select-trigger">
1727
<SelectValue placeholder="Select an option" />
1828
</SelectTrigger>
19-
<SelectListbox class="absolute w-full border-2 border-dashed border-green-400 bg-slate-900 p-2">
29+
<SelectListbox class="select-listbox">
2030
{usersSig.value.map((user, index) => (
2131
<SelectOption
22-
class="border-dashed border-blue-400 data-[highlighted]:border-2 data-[disabled]:bg-slate-600 data-[disabled]:opacity-30"
32+
class="select-option"
2333
key={user}
24-
disabled={index === 0 || index === usersSig.value.length - 1 ? true : false}
34+
disabled={
35+
index === 0 || index === 2 || index === usersSig.value.length - 1
36+
? true
37+
: false
38+
}
2539
>
2640
{user}
2741
</SelectOption>

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2+
import styles from './select.css?inline';
3+
import {
4+
Select,
5+
SelectListbox,
6+
SelectOption,
7+
SelectTrigger,
8+
SelectValue,
9+
SelectGroup,
10+
SelectLabel,
11+
} from '@qwik-ui/headless';
12+
13+
export default component$(() => {
14+
useStyles$(styles);
15+
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Abby']);
16+
const animalsSig = useSignal<string[]>(['Dog', 'Cat', 'Bird']);
17+
18+
return (
19+
<Select class="select">
20+
<SelectTrigger class="select-trigger">
21+
<SelectValue placeholder="Select an option" />
22+
</SelectTrigger>
23+
<SelectListbox class="select-listbox">
24+
<SelectGroup>
25+
<SelectLabel class="select-label">People</SelectLabel>
26+
{usersSig.value.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+
{animalsSig.value.map((animal) => (
35+
<SelectOption class="select-option" key={animal}>
36+
{animal}
37+
</SelectOption>
38+
))}
39+
</SelectGroup>
40+
</SelectListbox>
41+
</Select>
42+
);
43+
});

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

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { component$, useSignal } from '@builder.io/qwik';
1+
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2+
import styles from './select.css?inline';
23
import {
34
Select,
45
SelectListbox,
@@ -8,19 +9,17 @@ import {
89
} from '@qwik-ui/headless';
910

1011
export default component$(() => {
12+
useStyles$(styles);
1113
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
1214

1315
return (
14-
<Select class="relative min-w-40">
15-
<SelectTrigger class="w-full border-2 border-dashed border-red-400">
16+
<Select class="select">
17+
<SelectTrigger class="select-trigger">
1618
<SelectValue placeholder="Select an option" />
1719
</SelectTrigger>
18-
<SelectListbox class="absolute w-full border-2 border-dashed border-green-400 bg-slate-900 p-2">
20+
<SelectListbox class="select-listbox">
1921
{usersSig.value.map((user) => (
20-
<SelectOption
21-
class="border-dashed border-blue-400 data-[highlighted]:border-2"
22-
key={user}
23-
>
22+
<SelectOption class="select-option" key={user}>
2423
{user}
2524
</SelectOption>
2625
))}

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2+
import styles from './select.css?inline';
3+
import {
4+
Select,
5+
SelectListbox,
6+
SelectOption,
7+
SelectTrigger,
8+
SelectValue,
9+
} from '@qwik-ui/headless';
10+
11+
export default component$(() => {
12+
useStyles$(styles);
13+
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
14+
15+
return (
16+
<Select loop={true} class="select">
17+
<SelectTrigger class="select-trigger">
18+
<SelectValue placeholder="Select an option" />
19+
</SelectTrigger>
20+
<SelectListbox class="select-listbox">
21+
{usersSig.value.map((user) => (
22+
<SelectOption class="select-option" key={user}>
23+
{user}
24+
</SelectOption>
25+
))}
26+
</SelectListbox>
27+
</Select>
28+
);
29+
});

‎apps/website/src/routes/docs/headless/select/examples/open-change.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 styles from './select.css?inline';
3+
import {
4+
Select,
5+
SelectListbox,
6+
SelectOption,
7+
SelectTrigger,
8+
SelectValue,
9+
} from '@qwik-ui/headless';
10+
export default component$(() => {
11+
useStyles$(styles);
12+
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
13+
const openChangeSig = useSignal(0);
14+
15+
const handleOpenChange$ = $((): void => {
16+
openChangeSig.value++;
17+
});
18+
19+
return (
20+
<>
21+
<Select onOpenChange$={handleOpenChange$} class="select">
22+
<SelectTrigger class="select-trigger">
23+
<SelectValue placeholder="Select an option" />
24+
</SelectTrigger>
25+
<SelectListbox class="select-listbox">
26+
{usersSig.value.map((user) => (
27+
<SelectOption class="select-option" key={user}>
28+
{user}
29+
</SelectOption>
30+
))}
31+
</SelectListbox>
32+
</Select>
33+
<p>The listbox opened and closed {openChangeSig.value} time(s)</p>
34+
</>
35+
);
36+
});

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2+
import styles from './select.css?inline';
3+
import {
4+
Select,
5+
SelectListbox,
6+
SelectOption,
7+
SelectTrigger,
8+
SelectValue,
9+
SelectGroup,
10+
SelectLabel,
11+
} from '@qwik-ui/headless';
12+
13+
export default component$(() => {
14+
useStyles$(styles);
15+
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
16+
const animalsSig = useSignal<string[]>(['Dog', 'Cat', 'Bird', 'Fish', 'Snake']);
17+
18+
return (
19+
<Select class="select">
20+
<SelectTrigger class="select-trigger">
21+
<SelectValue placeholder="Select an option" />
22+
</SelectTrigger>
23+
<SelectListbox class="select-listbox select-max-height">
24+
<SelectGroup>
25+
<SelectLabel class="select-label">People</SelectLabel>
26+
{usersSig.value.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+
{animalsSig.value.map((animal) => (
35+
<SelectOption class="select-option" key={animal}>
36+
{animal}
37+
</SelectOption>
38+
))}
39+
</SelectGroup>
40+
</SelectListbox>
41+
</Select>
42+
);
43+
});

‎apps/website/src/routes/docs/headless/select/examples/select.css

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
.select {
2+
position: relative;
3+
min-width: 10rem;
4+
}
5+
6+
.select-trigger {
7+
width: 100%;
8+
border: 2px dashed hsla(var(--primary) / 1);
9+
border-radius: calc(var(--border-radius) / 2);
10+
}
11+
12+
.select-listbox {
13+
position: absolute;
14+
width: 100%;
15+
background-color: hsl(var(--background));
16+
padding: 0.5rem;
17+
border: 2px dashed hsla(var(--foreground) / 0.6);
18+
border-radius: calc(var(--border-radius) / 2);
19+
z-index: 9999;
20+
}
21+
22+
.select-label {
23+
font-size: 0.875rem;
24+
line-height: 1.25rem;
25+
color: hsla(var(--foreground) / 0.8);
26+
padding-top: 0.5rem;
27+
}
28+
29+
.select-max-height {
30+
max-height: 15rem;
31+
overflow-y: auto;
32+
}
33+
34+
[data-highlighted] {
35+
outline: 2px dashed hsla(var(--primary) / 1);
36+
border-radius: calc(var(--border-radius) / 2);
37+
}
38+
39+
[data-disabled] {
40+
opacity: 0.6;
41+
background: hsl(var(--foreground) / 0.05);
42+
}

0 commit comments

Comments
 (0)