Merge pull request #55 from huntabyte/revert-v2

huntabyte · Aug 18, 2023 · 9fc85ae · 9fc85ae
2 parents 959765f + 8f72add
commit 9fc85ae
Show file tree

Hide file tree

Showing 15 changed files with 149 additions and 144 deletions.
diff --git a/.changeset/heavy-geese-hang.md b/.changeset/heavy-geese-hang.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix menubar & rename hovercard
diff --git a/package.json b/package.json
@@ -73,7 +73,7 @@
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {
-		"@melt-ui/svelte": "0.36.0",
+		"@melt-ui/svelte": "0.37.2",
 		"@sveltejs/adapter-vercel": "^3.0.3",
 		"nanoid": "^4.0.2",
 		"shiki": "^0.14.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/test-menubar.svelte b/src/components/test-menubar.svelte
@@ -0,0 +1,93 @@
+<script>
+	import * as Menubar from "@/components/ui/menubar";
+	let bookmarks = false;
+	let fullUrls = true;
+	const profileRadioValue = "benoit";
+</script>
+
+<Menubar.Root>
+	<Menubar.Menu>
+		<Menubar.Trigger>File</Menubar.Trigger>
+		<Menubar.Content>
+			<Menubar.Item>
+				New Tab <Menubar.Shortcut>⌘T</Menubar.Shortcut>
+			</Menubar.Item>
+			<Menubar.Item>
+				New Window <Menubar.Shortcut>⌘N</Menubar.Shortcut>
+			</Menubar.Item>
+			<Menubar.Item>New Incognito Window</Menubar.Item>
+			<Menubar.Separator />
+			<Menubar.Sub>
+				<Menubar.SubTrigger>Share</Menubar.SubTrigger>
+				<Menubar.SubContent>
+					<Menubar.Item>Email link</Menubar.Item>
+					<Menubar.Item>Messages</Menubar.Item>
+					<Menubar.Item>Notes</Menubar.Item>
+				</Menubar.SubContent>
+			</Menubar.Sub>
+			<Menubar.Separator />
+			<Menubar.Item>
+				Print... <Menubar.Shortcut>⌘P</Menubar.Shortcut>
+			</Menubar.Item>
+		</Menubar.Content>
+	</Menubar.Menu>
+	<Menubar.Menu>
+		<Menubar.Trigger>Edit</Menubar.Trigger>
+		<Menubar.Content>
+			<Menubar.Item>
+				Undo <Menubar.Shortcut>⌘Z</Menubar.Shortcut>
+			</Menubar.Item>
+			<Menubar.Item>
+				Redo <Menubar.Shortcut>⇧⌘Z</Menubar.Shortcut>
+			</Menubar.Item>
+			<Menubar.Separator />
+			<Menubar.Sub>
+				<Menubar.SubTrigger>Find</Menubar.SubTrigger>
+				<Menubar.SubContent>
+					<Menubar.Item>Search the web</Menubar.Item>
+					<Menubar.Separator />
+					<Menubar.Item>Find...</Menubar.Item>
+					<Menubar.Item>Find Next</Menubar.Item>
+					<Menubar.Item>Find Previous</Menubar.Item>
+				</Menubar.SubContent>
+			</Menubar.Sub>
+			<Menubar.Separator />
+			<Menubar.Item>Cut</Menubar.Item>
+			<Menubar.Item>Copy</Menubar.Item>
+			<Menubar.Item>Paste</Menubar.Item>
+		</Menubar.Content>
+	</Menubar.Menu>
+	<Menubar.Menu>
+		<Menubar.Trigger>View</Menubar.Trigger>
+		<Menubar.Content>
+			<Menubar.CheckboxItem bind:checked={bookmarks}>Always Show Bookmarks Bar</Menubar.CheckboxItem
+			>
+			<Menubar.CheckboxItem bind:checked={fullUrls}>Always Show Full URLs</Menubar.CheckboxItem>
+			<Menubar.Separator />
+			<Menubar.Item inset>
+				Reload <Menubar.Shortcut>⌘R</Menubar.Shortcut>
+			</Menubar.Item>
+			<Menubar.Item inset>
+				Force Reload <Menubar.Shortcut>⇧⌘R</Menubar.Shortcut>
+			</Menubar.Item>
+			<Menubar.Separator />
+			<Menubar.Item inset>Toggle Fullscreen</Menubar.Item>
+			<Menubar.Separator />
+			<Menubar.Item inset>Hide Sidebar</Menubar.Item>
+		</Menubar.Content>
+	</Menubar.Menu>
+	<Menubar.Menu>
+		<Menubar.Trigger>Profiles</Menubar.Trigger>
+		<Menubar.Content>
+			<Menubar.RadioGroup value={profileRadioValue}>
+				<Menubar.RadioItem value="andy">Andy</Menubar.RadioItem>
+				<Menubar.RadioItem value="benoit">Benoit</Menubar.RadioItem>
+				<Menubar.RadioItem value="Luis">Luis</Menubar.RadioItem>
+			</Menubar.RadioGroup>
+			<Menubar.Separator />
+			<Menubar.Item inset>Edit...</Menubar.Item>
+			<Menubar.Separator />
+			<Menubar.Item inset>Add Profile...</Menubar.Item>
+		</Menubar.Content>
+	</Menubar.Menu>
+</Menubar.Root>
diff --git a/src/content/components/hover-card.md → src/content/components/link-preview.md b/src/content/components/hover-card.md → src/content/components/link-preview.md
@@ -1,19 +1,19 @@
 ---
-title: Hover Card
+title: Link Preview
 description: Enable sighted users to preview content behind a link.
 ---
 
 ## Structure
 
 ```svelte
 <script lang="ts">
-	import { HoverCard } from "bits-ui";
+	import { LinkPreview } from "bits-ui";
 </script>
 
-<HoverCard.Root>
-	<HoverCard.Trigger />
-	<HoverCard.Content />
-</HoverCard.Root>
+<LinkPreview.Root>
+	<LinkPreview.Trigger />
+	<LinkPreview.Content />
+</LinkPreview.Root>
 ```
 
 🚧 **UNDER CONSTRUCTION** 🚧
diff --git a/src/content/components/menubar.md b/src/content/components/menubar.md
@@ -3,101 +3,6 @@ title: Menubar
 description: Displays a list of menus that can be used to control the application.
 ---
 
-<script>
-	import * as Menubar from "@/components/ui/menubar"
-	 let bookmarks = false;
-  let fullUrls = true;
-  const profileRadioValue = "benoit";
-</script>
-
-<Menubar.Root>
-<Menubar.Menu>
-<Menubar.Trigger>File</Menubar.Trigger>
-<Menubar.Content>
-<Menubar.Item>
-New Tab <Menubar.Shortcut>⌘T</Menubar.Shortcut>
-</Menubar.Item>
-<Menubar.Item>
-New Window <Menubar.Shortcut>⌘N</Menubar.Shortcut>
-</Menubar.Item>
-<Menubar.Item>New Incognito Window</Menubar.Item>
-<Menubar.Separator />
-<Menubar.Sub>
-<Menubar.SubTrigger>Share</Menubar.SubTrigger>
-<Menubar.SubContent>
-<Menubar.Item>Email link</Menubar.Item>
-<Menubar.Item>Messages</Menubar.Item>
-<Menubar.Item>Notes</Menubar.Item>
-</Menubar.SubContent>
-</Menubar.Sub>
-<Menubar.Separator />
-<Menubar.Item>
-Print... <Menubar.Shortcut>⌘P</Menubar.Shortcut>
-</Menubar.Item>
-</Menubar.Content>
-</Menubar.Menu>
-<Menubar.Menu>
-<Menubar.Trigger>Edit</Menubar.Trigger>
-<Menubar.Content>
-<Menubar.Item>
-Undo <Menubar.Shortcut>⌘Z</Menubar.Shortcut>
-</Menubar.Item>
-<Menubar.Item>
-Redo <Menubar.Shortcut>⇧⌘Z</Menubar.Shortcut>
-</Menubar.Item>
-<Menubar.Separator />
-<Menubar.Sub>
-<Menubar.SubTrigger>Find</Menubar.SubTrigger>
-<Menubar.SubContent>
-<Menubar.Item>Search the web</Menubar.Item>
-<Menubar.Separator />
-<Menubar.Item>Find...</Menubar.Item>
-<Menubar.Item>Find Next</Menubar.Item>
-<Menubar.Item>Find Previous</Menubar.Item>
-</Menubar.SubContent>
-</Menubar.Sub>
-<Menubar.Separator />
-<Menubar.Item>Cut</Menubar.Item>
-<Menubar.Item>Copy</Menubar.Item>
-<Menubar.Item>Paste</Menubar.Item>
-</Menubar.Content>
-</Menubar.Menu>
-<Menubar.Menu>
-<Menubar.Trigger>View</Menubar.Trigger>
-<Menubar.Content>
-<Menubar.CheckboxItem bind:checked={bookmarks} >Always Show Bookmarks Bar</Menubar.CheckboxItem >
-<Menubar.CheckboxItem bind:checked={fullUrls}>
-Always Show Full URLs
-</Menubar.CheckboxItem>
-<Menubar.Separator />
-<Menubar.Item inset>
-Reload <Menubar.Shortcut>⌘R</Menubar.Shortcut>
-</Menubar.Item>
-<Menubar.Item inset>
-Force Reload <Menubar.Shortcut>⇧⌘R</Menubar.Shortcut>
-</Menubar.Item>
-<Menubar.Separator />
-<Menubar.Item inset>Toggle Fullscreen</Menubar.Item>
-<Menubar.Separator />
-<Menubar.Item inset>Hide Sidebar</Menubar.Item>
-</Menubar.Content>
-</Menubar.Menu>
-<Menubar.Menu>
-<Menubar.Trigger>Profiles</Menubar.Trigger>
-<Menubar.Content>
-<Menubar.RadioGroup value={profileRadioValue}>
-<Menubar.RadioItem value="andy">Andy</Menubar.RadioItem>
-<Menubar.RadioItem value="benoit">Benoit</Menubar.RadioItem>
-<Menubar.RadioItem value="Luis">Luis</Menubar.RadioItem>
-</Menubar.RadioGroup>
-<Menubar.Separator />
-<Menubar.Item inset>Edit...</Menubar.Item>
-<Menubar.Separator />
-<Menubar.Item inset>Add Profile...</Menubar.Item>
-</Menubar.Content>
-</Menubar.Menu>
-</Menubar.Root>
-
 ## Structure
 
 ```svelte

diff --git a/src/lib/bits/hover-card/index.ts b/src/lib/bits/hover-card/index.ts
diff --git a/src/lib/bits/index.ts b/src/lib/bits/index.ts
@@ -8,7 +8,7 @@ export * as Collapsible from "./collapsible/index.js";
 export * as ContextMenu from "./context-menu/index.js";
 export * as Dialog from "./dialog/index.js";
 export * as DropdownMenu from "./dropdown-menu/index.js";
-export * as HoverCard from "./hover-card/index.js";
+export * as HoverCard from "./link-preview/index.js";
 export * as Label from "./label/index.js";
 export * as Menubar from "./menubar/index.js";
 export * as Popover from "./popover/index.js";

diff --git a/...ts/hover-card/components/HoverCard.svelte → ...ink-preview/components/LinkPreview.svelte b/...ts/hover-card/components/HoverCard.svelte → ...ink-preview/components/LinkPreview.svelte
diff --git a/...r-card/components/HoverCardContent.svelte → ...view/components/LinkPreviewContent.svelte b/...r-card/components/HoverCardContent.svelte → ...view/components/LinkPreviewContent.svelte
diff --git a/...r-card/components/HoverCardTrigger.svelte → ...view/components/LinkPreviewTrigger.svelte b/...r-card/components/HoverCardTrigger.svelte → ...view/components/LinkPreviewTrigger.svelte
@@ -21,7 +21,6 @@
 		on:m-focus
 		on:m-pointerenter
 		on:m-pointerleave
-		on:m-touchstart
 	>
 		<slot builder={$trigger} />
 	</svelte:element>

diff --git a/src/lib/bits/hover-card/ctx.ts → src/lib/bits/link-preview/ctx.ts b/src/lib/bits/hover-card/ctx.ts → src/lib/bits/link-preview/ctx.ts
@@ -1,8 +1,8 @@
 import { getOptionUpdater, removeUndefined } from "$internal/index.js";
 import {
-	createHoverCard,
-	type CreateHoverCardProps,
-	type HoverCard as HoverCardReturn
+	createLinkPreview,
+	type CreateLinkPreviewProps,
+	type LinkPreview as LinkPreviewReturn
 } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 
@@ -14,11 +14,11 @@ export const ctx = {
 };
 
 function get() {
-	return getContext<HoverCardReturn>(NAME);
+	return getContext<LinkPreviewReturn>(NAME);
 }
 
-function set(props: CreateHoverCardProps) {
-	const hovercard = createHoverCard({
+function set(props: CreateLinkPreviewProps) {
+	const hovercard = createLinkPreview({
 		...removeUndefined(props),
 		forceVisible: true
 	});

diff --git a/src/lib/bits/link-preview/index.ts b/src/lib/bits/link-preview/index.ts
@@ -0,0 +1,15 @@
+import Root from "./components/LinkPreview.svelte";
+import Content from "./components/LinkPreviewContent.svelte";
+import Trigger from "./components/LinkPreviewTrigger.svelte";
+
+export {
+	Root,
+	Content,
+	Trigger,
+	//
+	Root as LinkPreview,
+	Content as LinkPreviewContent,
+	Trigger as LinkPreviewTrigger
+};
+
+export * from "./types.js";
diff --git a/src/lib/bits/hover-card/types.ts → src/lib/bits/link-preview/types.ts b/src/lib/bits/hover-card/types.ts → src/lib/bits/link-preview/types.ts
@@ -7,13 +7,13 @@ import type {
 	TransitionParams,
 	AsChild
 } from "$internal/index.js";
-import type { CreateHoverCardProps, HoverCardComponentEvents } from "@melt-ui/svelte";
+import type { CreateLinkPreviewProps, LinkPreviewComponentEvents } from "@melt-ui/svelte";
 import type { HTMLAnchorAttributes } from "svelte/elements";
 
 type Props = Expand<
-	OmitOpen<CreateHoverCardProps> & {
-		open?: CreateHoverCardProps["defaultOpen"];
-		onOpenChange?: OnChangeFn<CreateHoverCardProps["defaultOpen"]>;
+	OmitOpen<CreateLinkPreviewProps> & {
+		open?: CreateLinkPreviewProps["defaultOpen"];
+		onOpenChange?: OnChangeFn<CreateLinkPreviewProps["defaultOpen"]>;
 	}
 >;
 
@@ -24,8 +24,8 @@ type ContentProps<T extends Transition = Transition> = {
 } & AsChild &
 	HTMLDivAttributes;
 
-type TriggerEvents = HoverCardComponentEvents["trigger"];
-type ContentEvents = HoverCardComponentEvents["content"];
+type TriggerEvents = LinkPreviewComponentEvents["trigger"];
+type ContentEvents = LinkPreviewComponentEvents["content"];
 
 export type {
 	Props,