Skip to content

Commit 890aae2

Browse files
y-corey-core
authored
Merge branch 'main' into propagate-disabled
2 parents 1d7a910 + 8caa7bf commit 890aae2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+797
-867
lines changed

‎apps/website/src/routes/docs/headless/accordion/examples/animation.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { component$, useStyles$ } from '@builder.io/qwik';
2+
import { Accordion } from '@qwik-ui/headless';
3+
import { LuChevronDown } from '@qwikest/icons/lucide';
4+
5+
export default component$(() => {
6+
useStyles$(styles);
7+
const items = [1, 2, 3];
8+
9+
return (
10+
<Accordion.Root animated>
11+
{items.map((item) => (
12+
<Accordion.Item key={item}>
13+
<Accordion.Header>
14+
<Accordion.Trigger>
15+
<span>Trigger {item}</span>
16+
<LuChevronDown />
17+
</Accordion.Trigger>
18+
</Accordion.Header>
19+
<Accordion.Content class="accordion-animation">
20+
Inside Content {item}
21+
</Accordion.Content>
22+
</Accordion.Item>
23+
))}
24+
</Accordion.Root>
25+
);
26+
});
27+
28+
// interal
29+
import styles from '../snippets/accordion.css?inline';

‎apps/website/src/routes/docs/headless/accordion/examples/custom-heading.tsx

Lines changed: 18 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,25 @@
11
import { component$ } from '@builder.io/qwik';
22
import { Accordion } from '@qwik-ui/headless';
3+
import { LuChevronDown } from '@qwikest/icons/lucide';
34

45
export default component$(() => {
6+
const items = [1, 2, 3];
7+
58
return (
6-
<>
7-
<div class="flex w-full justify-center">
8-
<Accordion.Root class="w-full">
9-
<Accordion.Item class="border-b">
10-
<Accordion.Header as="h4">
11-
<Accordion.Trigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
12-
<span>I'm an h4</span>
13-
<span class="pl-2">
14-
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
15-
+
16-
</p>
17-
</span>
18-
</Accordion.Trigger>
19-
</Accordion.Header>
20-
<Accordion.Content>
21-
<p class="pb-4">My Heading is an h4!</p>
22-
</Accordion.Content>
23-
</Accordion.Item>
24-
<Accordion.Item class="border-b">
25-
<Accordion.Header as="h5">
26-
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
27-
<span>I'm an h5</span>
28-
<span class="pl-2">
29-
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
30-
+
31-
</p>
32-
</span>
33-
</Accordion.Trigger>
34-
</Accordion.Header>
35-
<Accordion.Content>
36-
<p class="pb-4">My Heading is an h5!</p>
37-
</Accordion.Content>
38-
</Accordion.Item>
39-
<Accordion.Item class="border-b">
40-
<Accordion.Header as="h6">
41-
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline aria-expanded:rounded-none">
42-
<span>I'm an h6</span>
43-
<span class="flex pl-2">
44-
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
45-
+
46-
</p>
47-
</span>
48-
</Accordion.Trigger>
49-
</Accordion.Header>
50-
<Accordion.Content>
51-
<p class="pb-4">My Heading is an h6!</p>
52-
</Accordion.Content>
53-
</Accordion.Item>
54-
</Accordion.Root>
55-
</div>
56-
</>
9+
<Accordion.Root>
10+
{items.map((item) => (
11+
<Accordion.Item class="accordion-item" key={item}>
12+
<Accordion.Header as="h4">
13+
<Accordion.Trigger class="accordion-trigger">
14+
<span>Trigger {item}</span>
15+
<LuChevronDown />
16+
</Accordion.Trigger>
17+
</Accordion.Header>
18+
<Accordion.Content class="accordion-content">
19+
Inside Content {item}
20+
</Accordion.Content>
21+
</Accordion.Item>
22+
))}
23+
</Accordion.Root>
5724
);
5825
});

‎apps/website/src/routes/docs/headless/accordion/examples/default-value.tsx

Lines changed: 22 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,29 @@
11
import { component$ } from '@builder.io/qwik';
22
import { Accordion } from '@qwik-ui/headless';
3+
import { LuChevronDown } from '@qwikest/icons/lucide';
34

45
export default component$(() => {
6+
const items = [1, 2, 3];
7+
58
return (
6-
<>
7-
<div class="flex w-full justify-center">
8-
<Accordion.Root class="w-full">
9-
<Accordion.Item class="border-b">
10-
<Accordion.Header as="h3">
11-
<Accordion.Trigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
12-
<span>Not open by default.</span>
13-
<span class="pl-2">
14-
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
15-
+
16-
</p>
17-
</span>
18-
</Accordion.Trigger>
19-
</Accordion.Header>
20-
<Accordion.Content>
21-
<p class="pb-4">I wasn't open by default!</p>
22-
</Accordion.Content>
23-
</Accordion.Item>
24-
<Accordion.Item defaultValue>
25-
<Accordion.Header as="h3">
26-
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
27-
<span>I'm open!</span>
28-
<span class="pl-2">
29-
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
30-
+
31-
</p>
32-
</span>
33-
</Accordion.Trigger>
34-
</Accordion.Header>
35-
<Accordion.Content>
36-
<p class="pb-4">
37-
You can open me by default by putting the <strong>defaultValue</strong>{' '}
38-
prop on the Accordion Item.
39-
</p>
40-
</Accordion.Content>
41-
</Accordion.Item>
42-
<Accordion.Item class="border-b">
43-
<h3>
44-
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline aria-expanded:rounded-none">
45-
<span>Not open by default.</span>
46-
<span class="flex pl-2">
47-
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
48-
+
49-
</p>
50-
</span>
51-
</Accordion.Trigger>
52-
</h3>
53-
<Accordion.Content>
54-
<p class="pb-4">I wasn't open by default!</p>
55-
</Accordion.Content>
56-
</Accordion.Item>
57-
</Accordion.Root>
58-
</div>
59-
</>
9+
<Accordion.Root>
10+
{items.map((item, index) => (
11+
<Accordion.Item
12+
defaultValue={index === 1 ? true : false}
13+
class="accordion-item"
14+
key={item}
15+
>
16+
<Accordion.Header>
17+
<Accordion.Trigger class="accordion-trigger">
18+
<span>Trigger {item}</span>
19+
<LuChevronDown />
20+
</Accordion.Trigger>
21+
</Accordion.Header>
22+
<Accordion.Content class="accordion-content">
23+
Inside Content {item}
24+
</Accordion.Content>
25+
</Accordion.Item>
26+
))}
27+
</Accordion.Root>
6028
);
6129
});

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

Lines changed: 21 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,28 @@
11
import { component$ } from '@builder.io/qwik';
22
import { Accordion } from '@qwik-ui/headless';
3+
import { LuChevronDown } from '@qwikest/icons/lucide';
34

4-
// disabled
55
export default component$(() => {
6+
const items = [1, 2, 3];
7+
68
return (
7-
<>
8-
<div class="flex w-full justify-center">
9-
<Accordion.Root class="w-full">
10-
<Accordion.Item class="border-b">
11-
<Accordion.Header as="h3">
12-
<Accordion.Trigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
13-
<span>I'm enabled!</span>
14-
<span class="pl-2">
15-
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
16-
+
17-
</p>
18-
</span>
19-
</Accordion.Trigger>
20-
</Accordion.Header>
21-
<Accordion.Content>
22-
<p class="pb-4">
23-
Hey, I'm enabled! This is because I don't use the{' '}
24-
<strong>disabled</strong> prop on the trigger.
25-
</p>
26-
</Accordion.Content>
27-
</Accordion.Item>
28-
<Accordion.Item class="border-b">
29-
<Accordion.Header as="h3">
30-
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
31-
<span>I'm enabled!</span>
32-
<span class="pl-2">
33-
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
34-
+
35-
</p>
36-
</span>
37-
</Accordion.Trigger>
38-
</Accordion.Header>
39-
<Accordion.Content>
40-
<p class="pb-4">
41-
Hey, I'm enabled! This is because I don't use the{' '}
42-
<strong>disabled</strong> prop on the trigger.
43-
</p>
44-
</Accordion.Content>
45-
</Accordion.Item>
46-
<Accordion.Item class="border-b">
47-
<h3>
48-
<Accordion.Trigger
49-
disabled
50-
class="group flex w-full items-center justify-between py-4 text-left hover:bg-accent/50 aria-disabled:cursor-not-allowed aria-expanded:rounded-none"
51-
>
52-
<span>
53-
I'm{' '}
54-
<span class="font-bold" style="color: red">
55-
disabled!
56-
</span>
57-
</span>
58-
<span class="flex pl-2">
59-
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
60-
+
61-
</p>
62-
</span>
63-
</Accordion.Trigger>
64-
</h3>
65-
<Accordion.Content>
66-
<p class="pb-4">You shouldn't be able to see this!</p>
67-
</Accordion.Content>
68-
</Accordion.Item>
69-
</Accordion.Root>
70-
</div>
71-
</>
9+
<Accordion.Root>
10+
{items.map((item, index) => (
11+
<Accordion.Item class="accordion-item" key={item}>
12+
<Accordion.Header>
13+
<Accordion.Trigger
14+
disabled={index === 2 ? true : false}
15+
class="accordion-trigger"
16+
>
17+
<span>Trigger {item}</span>
18+
<LuChevronDown />
19+
</Accordion.Trigger>
20+
</Accordion.Header>
21+
<Accordion.Content class="accordion-content">
22+
Inside Content {item}
23+
</Accordion.Content>
24+
</Accordion.Item>
25+
))}
26+
</Accordion.Root>
7227
);
7328
});

‎apps/website/src/routes/docs/headless/accordion/examples/dynamic.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,16 +47,16 @@ export default component$(({ itemsLength = 3 }: DynamicAccordionProps) => {
4747
</label>
4848
</div>
4949

50-
<Accordion.Root class="w-full">
50+
<Accordion.Root>
5151
{itemStore.map(({ label, id }, index) => {
5252
return (
53-
<Accordion.Item id={`${id}`} key={id} class="border-b">
53+
<Accordion.Item id={`${id}`} key={id} class="accordion-item">
5454
<Accordion.Header>
55-
<Accordion.Trigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
56-
{label}
57-
</Accordion.Trigger>
55+
<Accordion.Trigger class="accordion-trigger">{label}</Accordion.Trigger>
5856
</Accordion.Header>
59-
<Accordion.Content class="py-4 pt-0">index: {index}</Accordion.Content>
57+
<Accordion.Content class="accordion-content">
58+
index: {index}
59+
</Accordion.Content>
6060
</Accordion.Item>
6161
);
6262
})}

‎apps/website/src/routes/docs/headless/accordion/examples/focused-index.tsx

Lines changed: 17 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,33 @@
11
import { component$, useSignal } from '@builder.io/qwik';
22
import { Accordion } from '@qwik-ui/headless';
3+
import { LuChevronDown } from '@qwikest/icons/lucide';
34

45
export default component$(() => {
56
const focusedIndexSig = useSignal(0);
7+
const items = [1, 2, 3];
68

79
return (
810
<>
911
<div class="flex w-full flex-col items-center gap-4">
1012
<Accordion.Root
11-
class="w-full"
12-
onFocusIndexChange$={(index: number) => {
13-
focusedIndexSig.value = index;
13+
onFocusIndexChange$={(value: number) => {
14+
focusedIndexSig.value = value;
1415
}}
1516
>
16-
<Accordion.Item class="border-b">
17-
<Accordion.Header>
18-
<Accordion.Trigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
19-
<span>Is Qwik Production Ready?</span>
20-
<span class="pl-2">
21-
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
22-
+
23-
</p>
24-
</span>
25-
</Accordion.Trigger>
26-
</Accordion.Header>
27-
<Accordion.Content>
28-
<p class="pb-4">
29-
Yes! Since 1.0 back in May, Qwik apps are great for production.
30-
</p>
31-
</Accordion.Content>
32-
</Accordion.Item>
33-
<Accordion.Item class="border-b">
34-
<Accordion.Header>
35-
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
36-
<span>Why is Qwik so fast?</span>
37-
<span class="pl-2">
38-
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
39-
+
40-
</p>
41-
</span>
42-
</Accordion.Trigger>
43-
</Accordion.Header>
44-
<Accordion.Content>
45-
<p class="pb-4">
46-
Because you're doing less work! Thanks to resumability we execute
47-
JavaScript on interaction.
48-
</p>
49-
</Accordion.Content>
50-
</Accordion.Item>
51-
<Accordion.Item class="border-b">
52-
<Accordion.Header>
53-
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline aria-expanded:rounded-none">
54-
<span>What if I want to use React?</span>
55-
<span class="flex pl-2">
56-
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
57-
+
58-
</p>
59-
</span>
60-
</Accordion.Trigger>
61-
</Accordion.Header>
62-
<Accordion.Content>
63-
<p class="pb-4">
64-
Check out Qwik-React! It allows you to partially hydrate React components
65-
into your Qwik app.
66-
</p>
67-
</Accordion.Content>
68-
</Accordion.Item>
17+
{items.map((item) => (
18+
<Accordion.Item class="accordion-item" key={item}>
19+
<Accordion.Header>
20+
<Accordion.Trigger class="accordion-trigger">
21+
<span>Trigger {item}</span>
22+
<LuChevronDown />
23+
</Accordion.Trigger>
24+
</Accordion.Header>
25+
<Accordion.Content class="accordion-content">
26+
Inside Content {item}
27+
</Accordion.Content>
28+
</Accordion.Item>
29+
))}
6930
</Accordion.Root>
70-
7131
<p>Focused Index: {focusedIndexSig.value === -1 ? 'X' : focusedIndexSig.value}</p>
7232
</div>
7333
</>

0 commit comments

Comments
 (0)