Skip to content

Commit ea24c61

Browse files
Gregor WoiwodeGregor Woiwode
Gregor Woiwode
authored and
Gregor Woiwode
committed
docs(headless): add dialog
1 parent 2cb9985 commit ea24c61

File tree

5 files changed

+199
-8
lines changed

5 files changed

+199
-8
lines changed

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

+1
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export const componentsStatuses: ComponentKitsStatuses = {
4141
headless: {
4242
Accordion: 'Planned',
4343
Carousel: 'Planned',
44+
Dialog: 'Planned',
4445
Select: 'Draft',
4546
Tabs: 'Planned',
4647
Toggle: 'Planned',

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

+146
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
import { component$, Slot } from '@builder.io/qwik';
2+
import { Accordion, AccordionItem, Checkbox, Dialog } from '@qwik-ui/headless';
3+
import { PreviewCodeExample } from '../../../../../components/preview-code-example/preview-code-example';
4+
5+
export const Example01 = component$(() => {
6+
return (
7+
<PreviewCodeExample>
8+
<div q:slot="actualComponent">
9+
<Dialog.Root>
10+
<Dialog.Trigger>
11+
<button>Open Dialog</button>
12+
</Dialog.Trigger>
13+
<Dialog.Portal>Hallo Welt</Dialog.Portal>
14+
</Dialog.Root>
15+
</div>
16+
17+
<div q:slot="codeExample">
18+
<Slot />
19+
</div>
20+
</PreviewCodeExample>
21+
);
22+
});
23+
24+
export const Example02 = component$(() => {
25+
return (
26+
<PreviewCodeExample>
27+
<div q:slot="actualComponent">
28+
<Accordion class="bg-slate-100 dark:bg-gray-700 w-80 rounded-xl border-slate-200 dark:border-gray-600 border-[1px] overflow-hidden">
29+
<AccordionItem
30+
class="px-4 py-2 w-full hover:bg-slate-300 dark:hover:bg-gray-800 border-slate-200 dark:border-gray-600 border-[1px] text-left"
31+
label="Is Qwik production-ready?"
32+
>
33+
<p class="bg-slate-200 dark:bg-gray-900 p-4">
34+
Yes, Qwik just hit a major milestone and launched v1.0! All API
35+
features are considered stable. Start building the future, today!
36+
</p>
37+
</AccordionItem>
38+
<AccordionItem
39+
class="px-4 py-2 w-full hover:bg-slate-300 dark:hover:bg-gray-800 border-slate-200 dark:border-gray-600 border-[1px] text-left"
40+
label="Is there a UI library I can use with Qwik?"
41+
>
42+
<p class="bg-slate-200 dark:bg-gray-900 p-4">
43+
You're looking at one right now!
44+
</p>
45+
</AccordionItem>
46+
<AccordionItem
47+
class="px-4 py-2 w-full hover:bg-slate-300 dark:hover:bg-gray-800 border-slate-200 dark:border-gray-600 border-[1px] text-left"
48+
label="How can I contribute to Qwik UI?"
49+
>
50+
<p class="bg-slate-200 dark:bg-gray-900 p-4">
51+
We're glad you asked. Come join us at the Qwikifiers Discord
52+
server or find the{` `}
53+
<a
54+
class="text-[var(--qwik-light-blue)] inline"
55+
href="https://github.com/qwikifiers/qwik-ui"
56+
>
57+
Qwik UI repository
58+
</a>
59+
{` `}
60+
on GitHub!
61+
</p>
62+
</AccordionItem>
63+
</Accordion>
64+
</div>
65+
66+
<div q:slot="codeExample">
67+
<Slot />
68+
</div>
69+
</PreviewCodeExample>
70+
);
71+
});
72+
73+
export const Example03 = component$(() => {
74+
return (
75+
<PreviewCodeExample>
76+
<div q:slot="actualComponent">
77+
<Accordion class="mt-4 p-4 bg-slate-800">
78+
<AccordionItem label="Availability">
79+
<ul>
80+
<li>
81+
<Checkbox.Label class="flex" for="in-stock">
82+
<Checkbox.Root id="in-stock" />
83+
In stock
84+
</Checkbox.Label>
85+
</li>
86+
<li>
87+
<Checkbox.Label class="flex" for="out-of-stock">
88+
<Checkbox.Root id="out-of-stock" />
89+
Out of stock
90+
</Checkbox.Label>
91+
</li>
92+
<li>
93+
<Checkbox.Label class="flex" for="coming-soon">
94+
<Checkbox.Root id="coming-soon" />
95+
Coming soon
96+
</Checkbox.Label>
97+
</li>
98+
</ul>
99+
</AccordionItem>
100+
<AccordionItem label="Promotions">
101+
<ul>
102+
<li>
103+
<Checkbox.Label class="flex" for="fifty-off">
104+
<Checkbox.Root id="fifty-off" />
105+
50% off on selected products
106+
</Checkbox.Label>
107+
</li>
108+
<li>
109+
<Checkbox.Label class="flex" for="winter-special">
110+
<Checkbox.Root id="winter-special" />
111+
Winter specials
112+
</Checkbox.Label>
113+
</li>
114+
</ul>
115+
</AccordionItem>
116+
<AccordionItem label="Category">
117+
<ul>
118+
<li>
119+
<Checkbox.Label class="flex" for="books">
120+
<Checkbox.Root id="books" />
121+
Books
122+
</Checkbox.Label>
123+
</li>
124+
<li>
125+
<Checkbox.Label class="flex" for="stationery">
126+
<Checkbox.Root id="stationery" />
127+
Stationery
128+
</Checkbox.Label>
129+
</li>
130+
<li>
131+
<Checkbox.Label class="flex" for="storage">
132+
<Checkbox.Root id="storage" />
133+
Storage
134+
</Checkbox.Label>
135+
</li>
136+
</ul>
137+
</AccordionItem>
138+
</Accordion>
139+
</div>
140+
141+
<div q:slot="codeExample">
142+
<Slot />
143+
</div>
144+
</PreviewCodeExample>
145+
);
146+
});

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

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
title: Qwik UI | Dialog
3+
---
4+
5+
import { Dialog } from '@qwik-ui/headless';
6+
import { Example01 } from './examples';
7+
import { KeyboardInteractionTable } from '../../../../../components/keyboard-interaction-table/keyboard-interaction-table';
8+
9+
# Dialog
10+
11+
#### A window overlaid on either the primary window or another dialog window, rendering the content underneath inert. ([Definition comes from Radix-UI](https://www.radix-ui.com/docs/primitives/components/dialog))
12+
13+
{' '}
14+
15+
<Example01>
16+
```tsx
17+
<Dialog.Root>
18+
<Dialog.Trigger>
19+
<button>Open Dialog</button>
20+
</Dialog.Trigger>
21+
<Dialog.Portal>
22+
<p>
23+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
24+
aliquid architecto delectus deleniti dolor
25+
</p>
26+
</Dialog.Portal>
27+
28+
</Dialog.Root>
29+
```
30+
</Example01>
31+
32+
## Accessibility
33+
34+
### Keyboard interaction
35+
36+
<KeyboardInteractionTable
37+
keyDescriptors={[
38+
{
39+
keyTitle: 'Escape',
40+
description: 'Closes the dialog.',
41+
},
42+
]}
43+
/>

‎apps/website/src/routes/docs/headless/menu.md

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010

1111
- [Accordion](/docs/headless/accordion)
1212
- [Carousel](/docs/headless/carousel)
13+
- [Dialog](/docs/headless/dialog)
1314
- [Select](/docs/headless/select)
1415
- [Tabs](/docs/headless/tabs)
1516
- [Toggle](/docs/headless/toggle)

‎packages/kit-headless/src/index.ts

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
export * from './components/accordion/accordion';
22
export * from './components/badge/badge';
3+
export * from './components/breadcrumb';
34
export * from './components/button-group/button-group';
45
export * from './components/card';
56
export * as Carousel from './components/carousel/carousel';
67
export * from './components/carousel/use';
7-
export * from './components/pagination/pagination';
8+
export * as Checkbox from './components/checkbox/checkbox';
89
export * from './components/collapse/collapse';
10+
export * as Dialog from './components/dialog/dialog';
911
export * from './components/drawer';
1012
export * from './components/input-phone';
1113
export * as Input from './components/input/input';
12-
export * from './components/spinner/spinner';
1314
export * from './components/menu/menu';
15+
export * from './components/navigation-bar/navigation-bar';
16+
export * from './components/pagination/pagination';
1417
export * from './components/popover';
1518
export * from './components/rating/rating';
19+
export * as Select from './components/select/select';
20+
export * from './components/slider';
21+
export * from './components/spinner/spinner';
1622
export * from './components/tabs/tabs';
1723
export * from './components/tooltip/tooltip';
18-
export * as Checkbox from './components/checkbox/checkbox';
19-
export * as CheckboxProps from './components/checkbox/checkbox';
20-
export * from './components/select/select';
21-
export * from './components/slider';
22-
export * from './components/breadcrumb';
23-
export * from './components/navigation-bar/navigation-bar';

0 commit comments

Comments
 (0)