Skip to content

Commit 490091f

Browse files
maiieulmaiieul
committed
Merge branch 'main' into remove-headless-horrible-pic
2 parents 3085ca8 + ce7fe44 commit 490091f

File tree

75 files changed

+2331
-1684
lines changed

Some content is hidden

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

75 files changed

+2331
-1684
lines changed

‎.changeset/fast-actors-report.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
'@qwik-ui/headless': minor
33
---
44

5+
## 100% Lazy execution
6+
7+
The entire Qwik UI library does not execute code until interaction. Your components are HTML, until the user decides to interact with them.
8+
59
## Bundling improvements
610

711
We have reduced the bundle size significantly of the headless library. If you are a Qwik library author, please refer to [this issue](https://github.com/QwikDev/qwik/issues/5473) as it may impact your bundle size as well.
@@ -101,6 +105,10 @@ export default component$(() => {
101105

102106
- Programmatically toggling the popover is still possible, make sure to put the same id on the `<Popover.Root />` that is passed to the `usePopover` hook. Refer to the docs for more info.
103107

108+
- popover-showing and popover-closing classes have been deprecated. Please use the `data-open` and ``data-closing` attributes instead.
109+
110+
- The `data-open`, `data-closing`, and `data-closed` data attributes have been added to the popover.
111+
104112
#### <Popover.Root />
105113

106114
There is a new root compomnent. Configurable props have been moved to the root component.

‎.changeset/two-glasses-fix.md

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,48 @@
22
'@qwik-ui/headless': minor
33
---
44

5+
### Tooltip
6+
7+
The Tooltip component has been refactored from the ground up to be more accessible and performant.
8+
9+
It is now built on top of the popover primitive, and has a similar API.
10+
11+
It remains in `draft` status, and is not yet ready for production use. We will be working on it more deeply in the near future.
12+
13+
### Accordion
14+
15+
The Accordion has been refactored from the ground up to be more accessible and performant.
16+
17+
#### Accordion.Root
18+
19+
- The `behavior="multi"` prop has been deprecated with `multiple` on the `<Accordion.Root />` component.
20+
21+
- The default behavior is a single item open at a time.
22+
23+
- `onSelectIndexChange$` has been deprecated and removed in favor of `onChange$`.
24+
25+
- `onFocusIndexChange$` has been deprecated and removed. Let us know if you have a use case for this.
26+
27+
- Reactively control the accordion with the `bind:value` prop.
28+
29+
- Control the initial value with the `value` prop.
30+
31+
- Disable the entire accordion by using the `disabled` prop.
32+
33+
#### Accordion.Item
34+
35+
- Pass distinct values to the `<Accordion.Item />` component with the `value` prop.
36+
37+
- Disable Accordion items by setting the `disabled` prop to true on the `<Accordion.Item />` component.
38+
39+
For more information, please refer to the updated Accordion documentation.
40+
41+
### Collapsible
42+
43+
- The `onOpenChange$` prop has been deprecated. Use the `onChange$` prop instead.
44+
45+
For more information, please refer to the updated Collapsible documentation.
46+
547
### Deprecated Components
648

749
In 0.4, we have deprecated the following headless components:
@@ -11,7 +53,6 @@ In 0.4, we have deprecated the following headless components:
1153
- Action Button
1254
- Button Group
1355
- Toast
14-
- Tooltip
1556
- Card
1657
- Badge
1758
- Spinner

‎apps/website/public/images/top-layer.webp

5.23 KB
Binary file not shown.

‎apps/website/src/_state/component-statuses.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,5 +46,6 @@ export const statusByComponent: ComponentKitsStatuses = {
4646
Select: ComponentStatus.Beta,
4747
Separator: ComponentStatus.Beta,
4848
Tabs: ComponentStatus.Beta,
49+
Tooltip: ComponentStatus.Draft,
4950
},
5051
};

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

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,25 @@
1-
import { component$, useStyles$ } from '@builder.io/qwik';
1+
import { component$ } from '@builder.io/qwik';
22
import { Accordion } from '@qwik-ui/headless';
33
import { LuChevronDown } from '@qwikest/icons/lucide';
44

55
export default component$(() => {
6-
useStyles$(styles);
76
const items = [1, 2, 3];
87

98
return (
109
<Accordion.Root animated>
1110
{items.map((item) => (
12-
<Accordion.Item key={item}>
11+
<Accordion.Item class="collapsible" key={item}>
1312
<Accordion.Header>
14-
<Accordion.Trigger>
13+
<Accordion.Trigger class="collapsible-trigger">
1514
<span>Trigger {item}</span>
16-
<LuChevronDown />
15+
<LuChevronDown class="collapsible-transition" />
1716
</Accordion.Trigger>
1817
</Accordion.Header>
19-
<Accordion.Content class="accordion-animation">
20-
Inside Content {item}
18+
<Accordion.Content class="collapsible-animation collapsible-content">
19+
<p class="collapsible-content-outline">Inside Content {item}</p>
2120
</Accordion.Content>
2221
</Accordion.Item>
2322
))}
2423
</Accordion.Root>
2524
);
2625
});
27-
28-
// interal
29-
import styles from '../snippets/accordion.css?inline';

‎apps/website/src/routes/docs/headless/accordion/examples/non-collapsible.tsx renamed to ‎apps/website/src/routes/docs/headless/accordion/examples/collapsible.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,29 @@
1-
import { component$ } from '@builder.io/qwik';
1+
import { component$, useStyles$ } from '@builder.io/qwik';
22
import { Accordion } from '@qwik-ui/headless';
33
import { LuChevronDown } from '@qwikest/icons/lucide';
44

5-
// non-collapsible
65
export default component$(() => {
6+
useStyles$(styles);
77
const items = [1, 2, 3];
88

99
return (
1010
<Accordion.Root collapsible={false}>
1111
{items.map((item) => (
12-
<Accordion.Item class="accordion-item" key={item}>
12+
<Accordion.Item class="collapsible" key={item}>
1313
<Accordion.Header>
14-
<Accordion.Trigger class="accordion-trigger">
14+
<Accordion.Trigger class="collapsible-trigger">
1515
<span>Trigger {item}</span>
1616
<LuChevronDown />
1717
</Accordion.Trigger>
1818
</Accordion.Header>
19-
<Accordion.Content class="accordion-content">
19+
<Accordion.Content class="collapsible-content collapsible-content-outline">
2020
Inside Content {item}
2121
</Accordion.Content>
2222
</Accordion.Item>
2323
))}
2424
</Accordion.Root>
2525
);
2626
});
27+
28+
// interal
29+
import styles from '../snippets/accordion.css?inline';

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { component$, useStyles$, useSignal } 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+
const isRendered = useSignal(false);
9+
10+
return (
11+
<>
12+
<button style={{ marginBottom: '1rem' }} onClick$={() => (isRendered.value = true)}>
13+
Render Accordion
14+
</button>
15+
{isRendered.value && (
16+
<Accordion.Root>
17+
{items.map((item) => (
18+
<Accordion.Item class="collapsible" key={item}>
19+
<Accordion.Header>
20+
<Accordion.Trigger class="collapsible-trigger">
21+
<span>Trigger {item}</span>
22+
<LuChevronDown />
23+
</Accordion.Trigger>
24+
</Accordion.Header>
25+
<Accordion.Content class="collapsible-content collapsible-content-outline">
26+
Inside Content {item}
27+
</Accordion.Content>
28+
</Accordion.Item>
29+
))}
30+
</Accordion.Root>
31+
)}
32+
</>
33+
);
34+
});
35+
36+
// interal
37+
import styles from '../snippets/accordion.css?inline';

‎apps/website/src/routes/docs/headless/accordion/examples/default-value.tsx renamed to ‎apps/website/src/routes/docs/headless/accordion/examples/disabled-root.tsx

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

54
export default component$(() => {
6-
const items = [1, 2, 3];
5+
useStyles$(styles);
6+
const items = [1, 2, 3, 4];
77

88
return (
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-
>
9+
<Accordion.Root disabled={true}>
10+
{items.map((item) => (
11+
<Accordion.Item class="collapsible" key={item}>
1612
<Accordion.Header>
17-
<Accordion.Trigger class="accordion-trigger">
13+
<Accordion.Trigger class="collapsible-trigger">
1814
<span>Trigger {item}</span>
1915
<LuChevronDown />
2016
</Accordion.Trigger>
2117
</Accordion.Header>
22-
<Accordion.Content class="accordion-content">
18+
<Accordion.Content class="collapsible-content collapsible-content-outline">
2319
Inside Content {item}
2420
</Accordion.Content>
2521
</Accordion.Item>
2622
))}
2723
</Accordion.Root>
2824
);
2925
});
26+
27+
// interal
28+
import styles from '../snippets/accordion.css?inline';
29+
import { LuChevronDown } from '@qwikest/icons/lucide';

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

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,33 @@
1-
import { component$ } from '@builder.io/qwik';
1+
import { component$, useStyles$ } from '@builder.io/qwik';
22
import { Accordion } from '@qwik-ui/headless';
33
import { LuChevronDown } from '@qwikest/icons/lucide';
44

55
export default component$(() => {
6-
const items = [1, 2, 3];
6+
useStyles$(styles);
7+
const items = [1, 2, 3, 4];
78

89
return (
910
<Accordion.Root>
1011
{items.map((item, index) => (
11-
<Accordion.Item class="accordion-item" key={item}>
12+
<Accordion.Item
13+
disabled={index === 1 || index === 3 ? true : false}
14+
class="collapsible"
15+
key={item}
16+
>
1217
<Accordion.Header>
13-
<Accordion.Trigger
14-
disabled={index === 2 ? true : false}
15-
class="accordion-trigger"
16-
>
18+
<Accordion.Trigger class="collapsible-trigger">
1719
<span>Trigger {item}</span>
1820
<LuChevronDown />
1921
</Accordion.Trigger>
2022
</Accordion.Header>
21-
<Accordion.Content class="accordion-content">
23+
<Accordion.Content class="collapsible-content collapsible-content-outline">
2224
Inside Content {item}
2325
</Accordion.Content>
2426
</Accordion.Item>
2527
))}
2628
</Accordion.Root>
2729
);
2830
});
31+
32+
// interal
33+
import styles from '../snippets/accordion.css?inline';

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

Lines changed: 44 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -26,63 +26,52 @@ export default component$(({ itemsLength = 3 }: DynamicAccordionProps) => {
2626

2727
return (
2828
<>
29-
<div class="flex w-full flex-col items-center">
30-
<div class="flex gap-4">
31-
<label class="mb-4 flex flex-col-reverse items-center text-center">
32-
<input
33-
class="max-w-[50px] rounded-base bg-accent px-2"
34-
type="text"
35-
bind:value={itemIndexToAdd}
36-
/>
37-
<span>Index to Add</span>
38-
</label>
29+
<div class="dynamic-input">
30+
<label class="add">
31+
<input bind:value={itemIndexToAdd} />
32+
<span>Index to Add</span>
33+
</label>
3934

40-
<label class="mb-4 flex flex-col-reverse items-center text-center">
41-
<input
42-
class="max-w-[50px] rounded-base bg-accent px-2"
43-
type="text"
44-
bind:value={itemIndexToDelete}
45-
/>
46-
<span>Index to Delete</span>
47-
</label>
48-
</div>
35+
<label class="delete">
36+
<input bind:value={itemIndexToDelete} />
37+
<span>Index to Delete</span>
38+
</label>
39+
</div>
40+
41+
<Accordion.Root>
42+
{itemStore.map(({ label, id }, index) => {
43+
return (
44+
<Accordion.Item id={`${id}`} key={id} class="collapsible">
45+
<Accordion.Header>
46+
<Accordion.Trigger class="collapsible-trigger">{label}</Accordion.Trigger>
47+
</Accordion.Header>
48+
<Accordion.Content class="collapsible-content collapsible-content-outline">
49+
index: {index}
50+
</Accordion.Content>
51+
</Accordion.Item>
52+
);
53+
})}
54+
</Accordion.Root>
4955

50-
<Accordion.Root>
51-
{itemStore.map(({ label, id }, index) => {
52-
return (
53-
<Accordion.Item id={`${id}`} key={id} class="accordion-item">
54-
<Accordion.Header>
55-
<Accordion.Trigger class="accordion-trigger">{label}</Accordion.Trigger>
56-
</Accordion.Header>
57-
<Accordion.Content class="accordion-content">
58-
index: {index}
59-
</Accordion.Content>
60-
</Accordion.Item>
61-
);
62-
})}
63-
</Accordion.Root>
64-
<div class="flex gap-2 md:gap-4">
65-
<button
66-
style={{ color: 'green', marginTop: '1rem' }}
67-
onClick$={() => {
68-
if (itemStore.length < 6) {
69-
itemStore.splice(parseInt(itemIndexToAdd.value), 0, newItem);
70-
}
71-
}}
72-
>
73-
<strong>Add Item</strong>
74-
</button>
75-
<button
76-
style={{ color: 'red', marginTop: '1rem' }}
77-
onClick$={() => {
78-
if (itemStore.length > 2) {
79-
itemStore.splice(parseInt(itemIndexToDelete.value), 1);
80-
}
81-
}}
82-
>
83-
<strong>Remove Item</strong>
84-
</button>
85-
</div>
56+
<div class="dynamic-buttons">
57+
<button
58+
onClick$={() => {
59+
if (itemStore.length < 6) {
60+
itemStore.splice(parseInt(itemIndexToAdd.value), 0, newItem);
61+
}
62+
}}
63+
>
64+
<strong>Add Item</strong>
65+
</button>
66+
<button
67+
onClick$={() => {
68+
if (itemStore.length > 2) {
69+
itemStore.splice(parseInt(itemIndexToDelete.value), 1);
70+
}
71+
}}
72+
>
73+
<strong>Remove Item</strong>
74+
</button>
8675
</div>
8776
</>
8877
);

0 commit comments

Comments
 (0)