Skip to content

Commit dfdff5e

Browse files
shairezshairez
committed
Merge branch 'main' into pr-tabs-final-selectedIndex-attempt
2 parents a43c87a + b4c8e5a commit dfdff5e

File tree

22 files changed

+2092
-1340
lines changed

22 files changed

+2092
-1340
lines changed

‎apps/website/.eslintrc.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@
1212
"sourceType": "module",
1313
"ecmaFeatures": {
1414
"jsx": true
15-
}
15+
},
16+
"parser": "@typescript-eslint/parser",
17+
"tsconfigRootDir": "__dirname"
1618
},
1719
"plugins": ["@typescript-eslint"],
1820
"ignorePatterns": ["!**/*"],

‎apps/website/src/components/preview-code-example/preview-code-example.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export const PreviewCodeExample = component$(() => {
1212
Code
1313
</Tab>
1414
</TabList>
15-
<TabPanel class="rounded-b-xl p-12 bg-slate-700">
15+
<TabPanel class="rounded-b-xl p-12 bg-slate-200 dark:bg-slate-900">
1616
<section class="flex flex-col items-center">
1717
<Slot name="actualComponent" />
1818
</section>

‎apps/website/src/routes/docs.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,21 @@
1717
.docs h4 {
1818
@apply text-lg mb-6;
1919
}
20+
21+
/* Styles Jack has added / will change */
22+
.docs a {
23+
@apply border-b-2 border-[#00B9FC] font-bold;
24+
}
25+
26+
/* adds sufficient padding to the table items */
27+
.docs td article {
28+
@apply pt-4 pb-4 mb-0;
29+
}
30+
31+
.docs p {
32+
@apply mb-4;
33+
}
34+
35+
.docs td p {
36+
@apply mb-0;
37+
}

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { component$, Slot } from '@builder.io/qwik';
2+
import {
3+
AutocompleteRoot,
4+
AutocompleteLabel,
5+
AutocompleteTrigger,
6+
AutocompleteInput,
7+
AutocompleteButton,
8+
AutocompleteListbox,
9+
AutocompleteOption,
10+
} from '@qwik-ui/headless';
11+
import { PreviewCodeExample } from '../../../../../components/preview-code-example/preview-code-example';
12+
13+
const trainers = [
14+
'Caleb',
15+
'Olivia',
16+
'James',
17+
'Ava',
18+
'Noah',
19+
'Emma',
20+
'Oliver',
21+
'Amelia',
22+
'Theodore',
23+
'Elizabeth',
24+
];
25+
26+
export const Example01 = component$(() => {
27+
return (
28+
<PreviewCodeExample>
29+
<div q:slot="actualComponent">
30+
<AutocompleteRoot class="relative text-white">
31+
<AutocompleteLabel class="text-inherit font-semibold">
32+
Personal Trainers ⚡
33+
</AutocompleteLabel>
34+
<AutocompleteTrigger class="bg-[#1f2532] flex items-center rounded-sm border-[#7d95b3] border-[1px] relative">
35+
<AutocompleteInput class="w-44 bg-inherit px-2 pr-6" />
36+
<AutocompleteButton class="w-6 h-6 group absolute right-0">
37+
<svg
38+
xmlns="http://www.w3.org/2000/svg"
39+
viewBox="0 0 24 24"
40+
fill="none"
41+
stroke-width="2"
42+
class="stroke-white group-aria-expanded:-rotate-180 transition-transform duration-[450ms]"
43+
stroke-linecap="round"
44+
stroke-linejoin="round"
45+
>
46+
<polyline points="6 9 12 15 18 9"></polyline>
47+
</svg>
48+
</AutocompleteButton>
49+
</AutocompleteTrigger>
50+
<AutocompleteListbox class="w-full bg-[#1f2532] px-4 py-2 mt-2 rounded-sm border-[#7d95b3] border-[1px]">
51+
{trainers.map((trainer, index) => (
52+
<AutocompleteOption
53+
optionValue={trainer}
54+
key={index}
55+
class="rounded-sm px-2 hover:bg-[#496080] focus:bg-[#496080]"
56+
>
57+
{trainer}
58+
</AutocompleteOption>
59+
))}
60+
</AutocompleteListbox>
61+
</AutocompleteRoot>
62+
</div>
63+
64+
<div q:slot="codeExample">
65+
<Slot />
66+
</div>
67+
</PreviewCodeExample>
68+
);
69+
});
70+
71+
export const Example02 = component$(() => {
72+
return <PreviewCodeExample></PreviewCodeExample>;
73+
});
74+
75+
export const Example03 = component$(() => {
76+
return <PreviewCodeExample></PreviewCodeExample>;
77+
});

‎apps/website/src/routes/docs/headless/(components)/autocomplete/index.mdx

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
---
2+
title: Qwik UI | Autocomplete
3+
---
4+
5+
import {
6+
AutocompleteRoot,
7+
AutocompleteLabel,
8+
AutocompleteTrigger,
9+
AutocompleteInput,
10+
AutocompleteButton,
11+
AutocompleteListbox,
12+
AutocompleteOption,
13+
} from '@qwik-ui/headless';
14+
15+
import { Example01, Example02, Example03 } from './examples';
16+
import { CodeExample } from '../../../../../components/code-example/code-example';
17+
import { KeyboardInteractionTable } from '../../../../../components/keyboard-interaction-table/keyboard-interaction-table';
18+
import { APITable } from '../../../../../components/api-table/api-table';
19+
20+
# Autocomplete
21+
22+
#### A combobox pattern that allows users to select from a list of previously searched terms, ensuring that the listbox popup is not automatically triggered but only when a character is typed in or an open command is given.
23+
24+
{' '}
25+
26+
<Example01>
27+
```tsx
28+
<AutocompleteRoot class="relative text-white">
29+
<AutocompleteLabel class="text-inherit font-semibold">
30+
Personal Trainers ⚡
31+
</AutocompleteLabel>
32+
<AutocompleteTrigger class="bg-[#1f2532] flex items-center rounded-sm border-[#7d95b3] border-[1px] relative">
33+
<AutocompleteInput class="w-44 bg-inherit px-2 pr-6" />
34+
<AutocompleteButton class="w-6 h-6 group absolute right-0">
35+
<svg
36+
xmlns="http://www.w3.org/2000/svg"
37+
viewBox="0 0 24 24"
38+
fill="none"
39+
stroke-width="2"
40+
class="stroke-white group-aria-expanded:-rotate-180 transition-transform duration-[450ms]"
41+
stroke-linecap="round"
42+
stroke-linejoin="round"
43+
>
44+
<polyline points="6 9 12 15 18 9"></polyline>
45+
</svg>
46+
</AutocompleteButton>
47+
</AutocompleteTrigger>
48+
<AutocompleteListbox class="w-full bg-[#1f2532] px-4 py-2 mt-2 rounded-sm border-[#7d95b3] border-[1px]">
49+
{trainers.map((trainer, index) => (
50+
<AutocompleteOption
51+
optionValue={trainer}
52+
key={index}
53+
class="rounded-sm px-2 hover:bg-[#496080] focus:bg-[#496080]"
54+
>
55+
{trainer}
56+
</AutocompleteOption>
57+
))}
58+
</AutocompleteListbox>
59+
</AutocompleteRoot>
60+
```
61+
</Example01>
62+
63+
## Building blocks
64+
65+
<CodeExample>
66+
```tsx
67+
import { component$ } from '@builder.io/qwik';
68+
import { AutocompleteRoot, AutocompleteLabel, AutocompleteTrigger, AutocompleteInput, AutocompleteButton, AutocompleteListbox, AutocompleteOption } from '@qwik-ui/headless';
69+
70+
export default component$(() => (
71+
<AutocompleteRoot>
72+
<AutocompleteLabel>Label</AutocompleteLabel>
73+
<AutocompleteTrigger>
74+
<AutocompleteInput />
75+
<AutocompleteButton>
76+
Button Marker
77+
</AutocompleteButton>
78+
</AutocompleteTrigger>
79+
<AutocompleteListbox>
80+
<AutocompleteOption />
81+
</AutocompleteListbox>
82+
</AutocompleteRoot>
83+
))
84+
```
85+
86+
</CodeExample>
87+
88+
## Examples
89+
90+
### EXAMPLE: Frequently Asked Questions
91+
92+
<Example02>```tsx ```</Example02>
93+
94+
## Accessibility
95+
96+
### Keyboard interaction
97+
98+
<KeyboardInteractionTable keyDescriptors={
99+
[
100+
{
101+
keyTitle: 'Tab',
102+
description: 'Moves focus to the next focusable element or option.',
103+
},
104+
{
105+
keyTitle: 'Shift + Tab',
106+
description: 'Moves focus to the previous focusable element or option.',
107+
},
108+
{
109+
keyTitle: 'DownArrow',
110+
description: "Opens the listbox and moves focus to the first option. When focus is on an option, moves focus to the next option. If there isn't one, it will go back to the first option.",
111+
},
112+
{
113+
keyTitle: 'UpArrow',
114+
description: "When focus is on an option, moves focus to the previous option. If there isn't one, it will go back to the last option.",
115+
},
116+
{
117+
keyTitle: 'Enter / Space',
118+
description: `Selects the option when focused. The listbox will close and the selected option becomes the input's value.`,
119+
},
120+
{
121+
keyTitle: 'Escape',
122+
description: 'Closes the listbox.',
123+
},
124+
{
125+
keyTitle: 'Home',
126+
description: 'When the input is focused, the cursor moves to the start of the input value. When focused on any listbox option, focus is moved to the first option.',
127+
},
128+
{
129+
keyTitle: 'End',
130+
description: 'When the input is focused, the cursor moves to the end of the input value. When focused on any listbox option, focus is moved to the last option.',
131+
},
132+
{
133+
keyTitle: 'Delete',
134+
description: 'When text is selected in the input, deletes the selected text.',
135+
},
136+
137+
]
138+
}/>
139+
140+
Adheres to the [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) WAI-ARIA design pattern. See the W3C Editable Combobox With List Autocomplete Example for more information.
141+
142+
## API
143+
144+
By default, the API holds available attributes of both native DOM elements and custom Qwik elements. This is thanks to **QwikIntrinsicElements**. Here are some of the notable API's for this component.
145+
146+
### AutocompleteRoot
147+
148+
<APITable
149+
propDescriptors={[
150+
{
151+
name: 'class',
152+
type: 'string',
153+
description: 'CSS classes to apply to the autocomplete container.',
154+
},
155+
{
156+
name: 'style',
157+
type: 'string',
158+
description: 'inline CSS styles to apply to the autocomplete container.',
159+
},
160+
{
161+
name: 'label',
162+
type: 'string',
163+
description: 'The label to give to the accordion item.',
164+
},
165+
{
166+
name: 'onClick$',
167+
type: 'PropFunction<() => void>',
168+
description: 'A custom click handler',
169+
},
170+
]}
171+
/>

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

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,34 +9,37 @@ import {
99
SelectOption,
1010
SelectGroup,
1111
} from '@qwik-ui/headless';
12-
import { PreviewCodeExample } from 'apps/website/src/components/preview-code-example/preview-code-example';
12+
import { PreviewCodeExample } from '../../../../../components/preview-code-example/preview-code-example';
1313

1414
export const Example01 = component$(() => {
1515
return (
1616
<PreviewCodeExample>
1717
<div q:slot="actualComponent">
18-
<SelectRoot>
19-
<SelectLabel class="text-black dark:text-white">
20-
Lorem ipsum dolor sit amet
18+
<SelectRoot class="dark:bg-gray-700">
19+
<SelectLabel class="text-white font-semibold ml-2">
20+
Qwik Fruits
2121
</SelectLabel>
22-
<SelectTrigger class="flex justify-between items-center border-slate-200 dark:border-gray-600 border-[1px] p-4">
23-
<SelectValue placeholder="Select an option! ⚡" />
22+
<SelectTrigger class="flex justify-between items-center px-8 bg-[#1f2532] border-[#7d95b3] border-[1px] rounded-md p-4 group peer">
23+
<SelectValue placeholder="Select a fruit! 🍹" class="text-white" />
2424
<SelectMarker class="w-6 h-6">
2525
<svg
2626
xmlns="http://www.w3.org/2000/svg"
2727
viewBox="0 0 24 24"
2828
fill="none"
29-
stroke="currentColor"
3029
stroke-width="2"
30+
class="stroke-white group-aria-expanded:-rotate-180 transition-transform duration-[450ms]"
3131
stroke-linecap="round"
3232
stroke-linejoin="round"
3333
>
3434
<polyline points="6 9 12 15 18 9"></polyline>
3535
</svg>
3636
</SelectMarker>
3737
</SelectTrigger>
38-
<SelectListBox class="bg-slate-100 dark:bg-gray-700 border-slate-200 dark:border-gray-600 border-[1px]">
39-
<SelectOption value="🚀 Qwik" class="p-4" />
38+
<SelectListBox class="bg-[#1f2532] border-[#7d95b3] mt-2 border-[1px] rounded-md text-white">
39+
<SelectOption
40+
value="🚀 Qwik"
41+
class="p-4 hover:bg-[#496080] focus:bg-[#496080]"
42+
/>
4043
<SelectGroup class="p-4">
4144
<SelectLabel class="p-4">Fruits</SelectLabel>
4245
{[
@@ -50,7 +53,7 @@ export const Example01 = component$(() => {
5053
key={option.value}
5154
value={option.value}
5255
disabled={option.disabled}
53-
class="aria-disabled:text-red-500 aria-disabled:cursor-not-allowed hover:bg-slate-300 dark:hover:bg-gray-600 p-4"
56+
class="hover:bg-[#496080] focus:bg-[#496080] aria-disabled:text-red-500 aria-disabled:cursor-not-allowed rounded-sm p-4"
5457
/>
5558
);
5659
})}
@@ -71,14 +74,17 @@ export const Example02 = component$(() => {
7174
<PreviewCodeExample>
7275
<div q:slot="actualComponent">
7376
<SelectRoot>
74-
<SelectTrigger class="flex justify-between items-center border-slate-200 dark:border-gray-600 border-[1px] p-4">
75-
<SelectValue placeholder="Home" />
77+
<SelectTrigger class="flex justify-between items-center bg-slate-100 dark:bg-gray-700 border-slate-200 dark:border-gray-600 border-[1px] p-4">
78+
<SelectValue
79+
placeholder="Home"
80+
class="text-gray-700 dark:text-white"
81+
/>
7682
<SelectMarker class="w-6 h-6">
7783
<svg
7884
xmlns="http://www.w3.org/2000/svg"
7985
viewBox="0 0 24 24"
8086
fill="none"
81-
stroke="currentColor"
87+
class="stroke-gray-700 dark:stroke-white"
8288
stroke-width="2"
8389
stroke-linecap="round"
8490
stroke-linejoin="round"

0 commit comments

Comments
 (0)