Skip to content

Commit 9418fc9

Browse files
thejacksheltonthejackshelton
authored
Merge pull request #730 from thejackshelton/dot-notation
Dot Notation
2 parents fc5a00b + 6781e0c commit 9418fc9

File tree

168 files changed

+2660
-2985
lines changed

Some content is hidden

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

168 files changed

+2660
-2985
lines changed

‎.changeset/lemon-zoos-compete.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@qwik-ui/headless': patch
3+
---
4+
5+
fix: popover API programmatic behavior works correctly

‎apps/website/src/components/copy-css-config/copy-css-config.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { component$, useSignal } from '@builder.io/qwik';
2-
import { Modal, ModalContent, ModalHeader } from '@qwik-ui/headless';
2+
import { Modal } from '@qwik-ui/headless';
33
import { Button } from '@qwik-ui/styled';
44
import { extractThemeCSS } from '@qwik-ui/utils';
55
import { LuX } from '@qwikest/icons/lucide';
@@ -29,24 +29,24 @@ export default component$(() => {
2929
>
3030
Copy code
3131
</Button>
32-
<Modal
32+
<Modal.Root
3333
bind:show={showSig}
3434
class="my-animation h-[650px] max-w-2xl overflow-x-hidden rounded-base bg-background p-8 text-foreground shadow-md backdrop:backdrop-blur backdrop:backdrop-brightness-50 dark:backdrop:backdrop-brightness-100"
3535
>
36-
<ModalHeader>
36+
<header>
3737
<h2 class="mb-2 text-lg font-bold">Copy config</h2>
3838
<p class="mb-6">
3939
Copy and paste the following code into your global.css file to apply the
4040
styles.
4141
</p>
42-
</ModalHeader>
43-
<ModalContent>
42+
</header>
43+
<div>
4444
<Highlight code={cssThemeOutput.value} language="css" class="border" />
45-
</ModalContent>
45+
</div>
4646
<button onClick$={() => (showSig.value = false)} class="absolute right-6 top-7">
4747
<LuX class="h-8 w-8" />
4848
</button>
49-
</Modal>
49+
</Modal.Root>
5050
</>
5151
);
5252
});

‎apps/website/src/components/header/header.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import { LogoIcon, LogoWithBorders } from '../icons/logo';
2222

2323
import { useTheme } from 'qwik-themes';
2424
import MakeItYours from '../make-it-yours/make-it-yours';
25-
import { Modal, ModalContent } from '@qwik-ui/headless';
25+
import { Modal } from '@qwik-ui/headless';
2626
import { useAppState } from '~/_state/use-app-state';
2727
import { LuX } from '@qwikest/icons/lucide';
2828
import { DocsNavigation } from '../navigation-docs/navigation-docs';
@@ -201,26 +201,26 @@ export default component$(({ showVersion = false }: HeaderProps) => {
201201
</div>
202202
</header>
203203
</div>
204-
<Modal
204+
<Modal.Root
205205
bind:show={isSidebarOpenedSig}
206206
class="sidebar-mobile ml-auto mr-0 h-screen w-full min-w-80 max-w-sm rounded-base border-0 bg-background p-8 text-foreground shadow-md"
207207
>
208-
<ModalContent class="mb-2 pb-4 pt-2">
208+
<div class="mb-2 pb-4 pt-2">
209209
<DocsNavigation
210210
linksGroups={
211211
menuItemsGroups && menuItemsGroups.length > 0 ? menuItemsGroups : undefined
212212
}
213213
class="max-w-80 overflow-auto bg-background"
214214
/>
215-
</ModalContent>
215+
</div>
216216
<button
217217
autoFocus
218218
onClick$={() => (isSidebarOpenedSig.value = false)}
219219
class="absolute right-6 top-[26px]"
220220
>
221221
<LuX class="h-8 w-8" />
222222
</button>
223-
</Modal>
223+
</Modal.Root>
224224
</>
225225
);
226226
});

‎apps/website/src/components/info-popup/info-popup.tsx

Lines changed: 8 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,11 @@
1-
import { component$, useId, useSignal, useStyles$ } from '@builder.io/qwik';
2-
import { Popover, PopoverTrigger } from '@qwik-ui/headless';
1+
import { component$, useStyles$ } from '@builder.io/qwik';
2+
import { Popover } from '@qwik-ui/headless';
33

44
type InfoProps = {
55
info: string;
66
};
77

88
export const InfoPopup = component$((props: InfoProps) => {
9-
const popoverTableId = useId();
10-
const triggerRef = useSignal<HTMLButtonElement>();
11-
const popoverRef = useSignal<HTMLElement>();
12-
139
useStyles$(`
1410
.fade-info {
1511
transition: opacity 0.35s, display 0.35s, overlay 0.35s;
@@ -27,13 +23,8 @@ export const InfoPopup = component$((props: InfoProps) => {
2723
`);
2824

2925
return (
30-
<>
31-
<PopoverTrigger
32-
ref={triggerRef}
33-
popoverTargetAction="show"
34-
popovertarget={popoverTableId}
35-
class="flex items-center justify-center"
36-
>
26+
<Popover.Root flip={false} floating="top" gutter={4}>
27+
<Popover.Trigger class="flex items-center justify-center">
3728
<div class="rounded-full p-1 hover:bg-slate-300 hover:bg-opacity-50">
3829
<svg
3930
width="16"
@@ -52,22 +43,13 @@ export const InfoPopup = component$((props: InfoProps) => {
5243
></path>
5344
</svg>
5445
</div>
55-
</PopoverTrigger>
46+
</Popover.Trigger>
5647

57-
<Popover
58-
ref={popoverRef}
59-
anchorRef={triggerRef}
60-
floating={true}
61-
flip={false}
62-
placement="top"
63-
gutter={4}
64-
id={popoverTableId}
65-
class="fade-info listbox rounded-base bg-transparent"
66-
>
48+
<Popover.Panel class="fade-info listbox rounded-base bg-transparent">
6749
<div class="text-md mb-2 max-w-xs rounded-base border border-b-2 border-border bg-popover px-3 py-2 font-[500] text-foreground shadow-lg sm:w-max">
6850
{props.info}
6951
</div>
70-
</Popover>
71-
</>
52+
</Popover.Panel>
53+
</Popover.Root>
7254
);
7355
});

‎apps/website/src/components/install-snippet/install-snippet.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { component$ } from '@builder.io/qwik';
2-
import { Tab, TabList, TabPanel, Tabs } from '@qwik-ui/headless';
2+
import { Tabs } from '@qwik-ui/headless';
33
import { CodeCopy } from '../code-copy/code-copy';
44

55
export const packages = {
@@ -32,19 +32,19 @@ export type InstallSnippetProps = {
3232
};
3333
export const InstallSnippet = component$<InstallSnippetProps>(({ packages }) => {
3434
return (
35-
<Tabs class="mb-12 rounded-base shadow-lg" behavior="manual">
36-
<TabList class=" flex rounded-t-xl border border-b-0 p-2">
35+
<Tabs.Root class="mb-12 rounded-base shadow-lg" behavior="manual">
36+
<Tabs.List class=" flex rounded-t-xl border border-b-0 p-2">
3737
{Object.keys(packages).map((key, index) => (
38-
<Tab
38+
<Tabs.Tab
3939
key={index}
4040
class="mr-2 rounded-base border px-2 py-1 hover:bg-accent hover:font-medium hover:text-accent-foreground"
4141
>
4242
{key}
43-
</Tab>
43+
</Tabs.Tab>
4444
))}
45-
</TabList>
45+
</Tabs.List>
4646
{Object.entries(packages).map(([, value], index) => (
47-
<TabPanel
47+
<Tabs.Panel
4848
key={index}
4949
class="rounded-b-lg border-[1.5px] bg-gradient-to-b from-slate-900 to-slate-800 px-4 py-6 text-white shadow-lg dark:from-background dark:to-accent/50"
5050
>
@@ -55,8 +55,8 @@ export const InstallSnippet = component$<InstallSnippetProps>(({ packages }) =>
5555
class="p-4 hover:bg-slate-700 dark:hover:bg-slate-800"
5656
/>
5757
</div>
58-
</TabPanel>
58+
</Tabs.Panel>
5959
))}
60-
</Tabs>
60+
</Tabs.Root>
6161
);
6262
});

‎apps/website/src/components/make-it-yours/make-it-yours.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
useSignal,
77
useStyles$,
88
} from '@builder.io/qwik';
9-
import { Modal, ModalContent, ModalFooter, ModalHeader } from '@qwik-ui/headless';
9+
import { Modal } from '@qwik-ui/headless';
1010
import { Button } from '@qwik-ui/styled';
1111
import {
1212
ThemeBaseColor,
@@ -144,15 +144,15 @@ export default component$<PropsOf<typeof Button>>(() => {
144144
<LuSlidersHorizontal class={cn('h-4 w-4 sm:mr-3')} />
145145
<span class={cn('hidden', 'sm:block')}>Make it yours</span>
146146
</Button>
147-
<Modal
147+
<Modal.Root
148148
closeOnBackdropClick={false}
149149
bind:show={showSig}
150150
class="make-it-yours fixed bottom-[50%] right-0 top-[50%] mr-0 h-screen max-w-sm rounded-l-base border-y border-l bg-background px-4 py-8 text-foreground shadow-md sm:w-full"
151151
>
152-
<ModalHeader class="flex w-full">
152+
<header class="flex w-full">
153153
<h2 class="justify-self-start text-lg font-bold">Edit Profile</h2>
154-
</ModalHeader>
155-
<ModalContent class="mb-2 mt-8 py-4">
154+
</header>
155+
<div class="mb-2 mt-8 py-4">
156156
<label class="mb-1 block font-medium">Preset</label>
157157
<select
158158
class="h-12 w-full rounded-base border bg-background p-2"
@@ -543,21 +543,21 @@ export default component$<PropsOf<typeof Button>>(() => {
543543
}}
544544
/>
545545
</div>
546-
</ModalContent>
546+
</div>
547547

548-
<ModalFooter class=" flex w-full justify-between gap-4">
548+
<footer class=" flex w-full justify-between gap-4">
549549
<Button
550550
look="ghost"
551551
onClick$={() => setTheme(theme?.includes('dark') ? 'dark' : 'light')}
552552
>
553553
Reset
554554
</Button>
555555
<CopyCssConfig />
556-
</ModalFooter>
556+
</footer>
557557
<button onClick$={() => (showSig.value = false)} class="absolute right-4 top-5">
558558
<LuX class="h-8 w-8" />
559559
</button>
560-
</Modal>
560+
</Modal.Root>
561561
</div>
562562
);
563563
});

‎apps/website/src/components/showcase/showcase.tsx

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Component, PropsOf, component$, useSignal, useTask$ } from '@builder.io/qwik';
22
import { useLocation } from '@builder.io/qwik-city';
33
import { isDev } from '@builder.io/qwik/build';
4-
import { Tab, TabList, TabPanel, Tabs } from '@qwik-ui/headless';
4+
import { Tabs } from '@qwik-ui/headless';
55
import { Highlight } from '../highlight/highlight';
66
import { metaGlobComponents, rawComponents } from './component-imports';
77

@@ -31,27 +31,27 @@ export const Showcase = component$<ShowcaseProps>(({ name, ...props }) => {
3131
return (
3232
<div class="mb-12 rounded-xl shadow-lg">
3333
{!props.vertical ? (
34-
<Tabs
34+
<Tabs.Root
3535
{...props}
3636
selectedClassName="bg-primary hover:bg-primary text-primary-foreground hover:text-primary-foreground border-t-1 font-medium "
3737
>
38-
<TabList class="flex rounded-t-lg border border-b-0 bg-accent">
39-
<Tab class="rounded-tl-md px-3 py-2 hover:bg-primary/90 hover:text-primary-foreground">
38+
<Tabs.List class="flex rounded-t-lg border border-b-0 bg-accent">
39+
<Tabs.Tab class="rounded-tl-md px-3 py-2 hover:bg-primary/90 hover:text-primary-foreground">
4040
Preview
41-
</Tab>
42-
<Tab class="px-3 py-2 hover:bg-primary/90 hover:text-primary-foreground">
41+
</Tabs.Tab>
42+
<Tabs.Tab class="px-3 py-2 hover:bg-primary/90 hover:text-primary-foreground">
4343
Code
44-
</Tab>
45-
</TabList>
46-
<TabPanel class="rounded-b-md border px-8 py-32 md:px-32">
44+
</Tabs.Tab>
45+
</Tabs.List>
46+
<Tabs.Panel class="rounded-b-md border px-8 py-32 md:px-32">
4747
<section class="flex flex-col items-center">
4848
{MetaGlobComponentSig.value && <MetaGlobComponentSig.value />}
4949
</section>
50-
</TabPanel>
51-
<TabPanel class="relative rounded-b-md border">
50+
</Tabs.Panel>
51+
<Tabs.Panel class="relative rounded-b-md border">
5252
<Highlight class="rounded-t-none" code={componentCodeSig.value || ''} />
53-
</TabPanel>
54-
</Tabs>
53+
</Tabs.Panel>
54+
</Tabs.Root>
5555
) : (
5656
<div>
5757
<section class="flex justify-center space-x-6 rounded-t-md border p-8">

‎apps/website/src/routes/docs/headless/breadcrumb/BreadcrumbWrapper.tsx

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,17 @@ type BreadcrumbWrapperProps = PropsOf<'div'> & {
55
title?: string;
66
};
77

8-
export default component$(({ title, ...rest }: BreadcrumbWrapperProps) => {
9-
useStyles$(style);
8+
export const BreadcrumWrapper = component$(
9+
({ title, ...rest }: BreadcrumbWrapperProps) => {
10+
useStyles$(style);
1011

11-
return (
12-
<div {...rest}>
13-
{title && <h1 class="wrapper__title">{title}</h1>}
14-
<div class="wrapper__content">
15-
<Slot />
12+
return (
13+
<div {...rest}>
14+
{title && <h1 class="wrapper__title">{title}</h1>}
15+
<div class="wrapper__content">
16+
<Slot />
17+
</div>
1618
</div>
17-
</div>
18-
);
19-
});
19+
);
20+
},
21+
);

0 commit comments

Comments
 (0)