Skip to content

Commit c1bcb9e

Browse files
thejacksheltonthejackshelton
authored
Merge pull request #420 from thejackshelton/feat-combobox
refactor(combobox): removing unnecessary visible tasks, example refactor
2 parents a35391b + 6c1dede commit c1bcb9e

29 files changed

+1679
-2594
lines changed

‎apps/website/src/routes/docs/headless/(components)/combobox/examples.tsx

Lines changed: 138 additions & 1375 deletions
Large diffs are not rendered by default.

‎apps/website/src/routes/docs/headless/(components)/combobox/examples/animation.tsx

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { component$, useSignal } from '@builder.io/qwik';
2+
import {
3+
Combobox,
4+
ComboboxLabel,
5+
ComboboxControl,
6+
ComboboxInput,
7+
ComboboxTrigger,
8+
ComboboxPortal,
9+
ComboboxListbox,
10+
ComboboxOption,
11+
ResolvedOption,
12+
} from '@qwik-ui/headless';
13+
14+
export default component$(() => {
15+
const isListboxOpenSig = useSignal(false);
16+
17+
const animationExample = [
18+
'Red',
19+
'Orange',
20+
'Yellow',
21+
'Green',
22+
'Blue',
23+
'Indigo',
24+
'Violet',
25+
];
26+
27+
return (
28+
<Combobox
29+
class="w-fit"
30+
options={animationExample}
31+
filter$={(value: string, options) =>
32+
options.filter(({ option }) => {
33+
return option.toLowerCase().startsWith(value.toLowerCase());
34+
})
35+
}
36+
bind:isListboxOpenSig={isListboxOpenSig}
37+
>
38+
<ComboboxLabel class=" font-semibold text-white">Streets 🛣️</ComboboxLabel>
39+
<ComboboxControl class="relative flex items-center rounded-sm border-[1px] border-slate-400 bg-[#1f2532]">
40+
<ComboboxInput
41+
disableOnBlur={true}
42+
class="px-d2 w-44 bg-slate-900 px-2 pr-6 text-white placeholder:text-slate-500"
43+
placeholder="Wallaby Rd."
44+
/>
45+
<ComboboxTrigger class="group absolute right-0 h-6 w-6">
46+
<svg
47+
xmlns="http://www.w3.org/2000/svg"
48+
viewBox="0 0 24 24"
49+
fill="none"
50+
stroke-width="2"
51+
class="stroke-white transition-transform duration-[450ms] group-aria-expanded:-rotate-180"
52+
stroke-linecap="round"
53+
stroke-linejoin="round"
54+
>
55+
<polyline points="6 9 12 15 18 9"></polyline>
56+
</svg>
57+
</ComboboxTrigger>
58+
</ComboboxControl>
59+
<ComboboxPortal>
60+
<ComboboxListbox
61+
gutter={8}
62+
class={`w-44 rounded-sm border-[1px] border-slate-400 bg-slate-900 px-4 py-2 transition-opacity duration-[500ms] ${
63+
isListboxOpenSig.value ? 'opacity-100' : 'opacity-0'
64+
}`}
65+
optionRenderer$={(option: ResolvedOption, index: number) => (
66+
<ComboboxOption
67+
key={option.key}
68+
class="group rounded-sm border-2 border-transparent px-2 text-white hover:bg-slate-500 aria-disabled:text-slate-600 aria-disabled:hover:bg-slate-700 aria-selected:border-slate-200 aria-selected:bg-slate-500"
69+
index={index}
70+
resolved={option}
71+
>
72+
{option.label}
73+
</ComboboxOption>
74+
)}
75+
/>
76+
</ComboboxPortal>
77+
</Combobox>
78+
);
79+
});

‎apps/website/src/routes/docs/headless/(components)/combobox/examples/auto-placement.tsx

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { component$, useSignal } from '@builder.io/qwik';
2+
import {
3+
Combobox,
4+
ComboboxControl,
5+
ComboboxInput,
6+
ComboboxTrigger,
7+
ComboboxPortal,
8+
ComboboxListbox,
9+
ComboboxOption,
10+
ResolvedOption,
11+
ComboboxIcon,
12+
} from '@qwik-ui/headless';
13+
14+
export default component$(() => {
15+
const isListboxOpenSig = useSignal(true);
16+
17+
type AutoPlacementExample = {
18+
value: string;
19+
label: string;
20+
};
21+
22+
const autoPlacementExample: Array<AutoPlacementExample> = [
23+
{ value: '0', label: 'Audi 🚗' },
24+
{ value: '1', label: 'BMW 🚙' },
25+
{ value: '2', label: 'Mercedes 🚕' },
26+
{ value: '3', label: 'Tesla 🚓' },
27+
];
28+
29+
return (
30+
<>
31+
<div class="flex h-[10rem] flex-col items-center justify-center">
32+
<p class="text-center text-white">My Car Collection 🚘</p>
33+
<Combobox
34+
bind:isListboxOpenSig={isListboxOpenSig}
35+
class="w-fit"
36+
options={autoPlacementExample}
37+
optionDisabledKey="myDisabledKey"
38+
>
39+
<ComboboxControl class="relative mt-2 flex items-center rounded-sm border-[1px] border-slate-400 bg-[#1f2532]">
40+
<ComboboxInput class="px-d2 w-44 bg-slate-900 px-2 pr-6 text-white placeholder:text-slate-500" />
41+
<ComboboxTrigger class="group absolute right-0 h-6 w-6">
42+
<ComboboxIcon class="stroke-white transition-transform duration-[450ms] group-aria-expanded:-rotate-180" />
43+
</ComboboxTrigger>
44+
</ComboboxControl>
45+
<ComboboxPortal>
46+
<ComboboxListbox
47+
flip={false}
48+
autoPlacement={true}
49+
gutter={8}
50+
class="w-44 rounded-sm border-[1px] border-slate-400 bg-slate-900 px-4 py-2"
51+
optionRenderer$={(option: ResolvedOption, index: number) => (
52+
<ComboboxOption
53+
key={option.key}
54+
class="group rounded-sm border-2 border-transparent px-2 text-white hover:bg-slate-500 aria-disabled:text-slate-600 aria-disabled:hover:bg-slate-700 aria-selected:border-slate-200 aria-selected:bg-slate-500"
55+
index={index}
56+
resolved={option}
57+
>
58+
{option.label}
59+
</ComboboxOption>
60+
)}
61+
/>
62+
</ComboboxPortal>
63+
</Combobox>
64+
</div>
65+
<div class="h-[1px] w-[calc(100%+200px)]"></div>
66+
</>
67+
);
68+
});

‎apps/website/src/routes/docs/headless/(components)/combobox/examples/building-blocks.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { component$ } from '@builder.io/qwik';
2+
import {
3+
Combobox,
4+
ComboboxLabel,
5+
ComboboxControl,
6+
ComboboxInput,
7+
ComboboxTrigger,
8+
ComboboxPortal,
9+
ComboboxListbox,
10+
ComboboxOption,
11+
ResolvedOption,
12+
} from '@qwik-ui/headless';
13+
14+
export default component$(() => {
15+
const data = ['a', 'b', 'c'];
16+
17+
return (
18+
<Combobox options={data}>
19+
<ComboboxLabel>Label Element</ComboboxLabel>
20+
<ComboboxControl>
21+
<ComboboxInput />
22+
<ComboboxTrigger>Opens Listbox</ComboboxTrigger>
23+
</ComboboxControl>
24+
<ComboboxPortal>
25+
<ComboboxListbox
26+
optionRenderer$={(option: ResolvedOption, index: number) => (
27+
<ComboboxOption index={index} resolved={option}>
28+
Option Label
29+
</ComboboxOption>
30+
)}
31+
/>
32+
</ComboboxPortal>
33+
</Combobox>
34+
);
35+
});

‎apps/website/src/routes/docs/headless/(components)/combobox/examples/context.tsx

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import {
2+
Combobox,
3+
ComboboxControl,
4+
ComboboxIcon,
5+
ComboboxInput,
6+
ComboboxLabel,
7+
ComboboxListbox,
8+
ComboboxOption,
9+
ComboboxPortal,
10+
ComboboxTrigger,
11+
ResolvedOption,
12+
} from '@qwik-ui/headless';
13+
14+
import { component$ } from '@builder.io/qwik';
15+
16+
import { createContextId, useContext, useContextProvider } from '@builder.io/qwik';
17+
18+
// Create a context ID
19+
export const AnimalContext = createContextId<string[]>('animal-context');
20+
21+
export const ContextExample = component$(() => {
22+
const animals = ['Armadillo', 'Donkey', 'Baboon', 'Badger', 'Barracuda', 'Bat', 'Bear'];
23+
// Provide the animals array to the context under the context ID
24+
useContextProvider(AnimalContext, animals);
25+
26+
return <ContextChild />;
27+
});
28+
29+
export const ContextChild = component$(() => {
30+
const animals = useContext(AnimalContext);
31+
32+
return (
33+
<Combobox options={animals} class="relative">
34+
<ComboboxLabel class=" font-semibold text-white">Animals 🐖</ComboboxLabel>
35+
<ComboboxControl class="relative flex items-center rounded-sm border-[1px] border-slate-400 bg-[#1f2532]">
36+
<ComboboxInput class="px-d2 w-44 bg-slate-900 px-2 pr-6 text-white placeholder:text-slate-500" />
37+
<ComboboxTrigger class="group absolute right-0 h-6 w-6">
38+
<ComboboxIcon class="stroke-white transition-transform duration-[450ms] group-aria-expanded:-rotate-180" />
39+
</ComboboxTrigger>
40+
</ComboboxControl>
41+
<ComboboxPortal>
42+
<ComboboxListbox
43+
flip={true}
44+
gutter={8}
45+
class="w-44 rounded-sm border-[1px] border-slate-400 bg-slate-900 px-4 py-2"
46+
optionRenderer$={(option: ResolvedOption, index: number) => (
47+
<ComboboxOption
48+
index={index}
49+
resolved={option}
50+
class="group rounded-sm border-2 border-transparent px-2 text-white hover:bg-slate-500 aria-disabled:text-slate-600 aria-disabled:hover:bg-slate-700 aria-selected:border-slate-200 aria-selected:bg-slate-500"
51+
>
52+
<span class="duration-350 block transition-transform group-aria-selected:translate-x-[3px]">
53+
<span>{option.label}</span>
54+
</span>
55+
</ComboboxOption>
56+
)}
57+
/>
58+
</ComboboxPortal>
59+
</Combobox>
60+
);
61+
});

‎apps/website/src/routes/docs/headless/(components)/combobox/examples/custom-filter.tsx

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import {
2+
Combobox,
3+
ComboboxControl,
4+
ComboboxIcon,
5+
ComboboxInput,
6+
ComboboxLabel,
7+
ComboboxListbox,
8+
ComboboxOption,
9+
ComboboxPortal,
10+
ComboboxTrigger,
11+
ResolvedOption,
12+
} from '@qwik-ui/headless';
13+
14+
import { component$ } from '@builder.io/qwik';
15+
16+
export default component$(() => {
17+
type Countries = {
18+
value: string;
19+
label: string;
20+
};
21+
22+
const objectExample: Array<Countries> = [
23+
{ value: 'usa', label: 'United States' },
24+
{ value: 'canada', label: 'Canada' },
25+
{ value: 'mexico', label: 'Mexico' },
26+
{ value: 'brazil', label: 'Brazil' },
27+
{ value: 'uk', label: 'United Kingdom' },
28+
{ value: 'germany', label: 'Germany' },
29+
{ value: 'france', label: 'France' },
30+
{ value: 'italy', label: 'Italy' },
31+
];
32+
33+
return (
34+
<Combobox
35+
class="w-fit"
36+
options={objectExample}
37+
filter$={(value: string, options) =>
38+
options.filter(({ option }) => {
39+
return option.label.toLowerCase().startsWith(value.toLowerCase());
40+
})
41+
}
42+
>
43+
<ComboboxLabel class=" font-semibold text-white">Countries 🚩</ComboboxLabel>
44+
<ComboboxControl class="relative flex items-center rounded-sm border-[1px] border-slate-400 bg-[#1f2532]">
45+
<ComboboxInput class="px-d2 w-44 bg-slate-900 px-2 pr-6 text-white placeholder:text-slate-500" />
46+
<ComboboxTrigger class="group absolute right-0 h-6 w-6">
47+
<ComboboxIcon class="stroke-white transition-transform duration-[450ms] group-aria-expanded:-rotate-180" />
48+
</ComboboxTrigger>
49+
</ComboboxControl>
50+
<ComboboxPortal>
51+
<ComboboxListbox
52+
flip={true}
53+
gutter={8}
54+
class="w-44 rounded-sm border-[1px] border-slate-400 bg-slate-900 px-4 py-2"
55+
optionRenderer$={(option: ResolvedOption, index: number) => (
56+
<ComboboxOption
57+
key={option.key}
58+
class="group rounded-sm border-2 border-transparent px-2 text-white hover:bg-slate-500 aria-disabled:text-slate-600 aria-disabled:hover:bg-slate-700 aria-selected:border-slate-200 aria-selected:bg-slate-500"
59+
index={index}
60+
resolved={option}
61+
>
62+
{option.label}
63+
</ComboboxOption>
64+
)}
65+
/>
66+
</ComboboxPortal>
67+
</Combobox>
68+
);
69+
});

0 commit comments

Comments
 (0)