cleanup context menu radio item

huntabyte · Aug 3, 2023 · 7e567de · 7e567de
1 parent d1e2541
commit 7e567de
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 14 deletions.
diff --git a/apps/www/src/lib/components/docs/examples/context-menu/ContextMenuDemo.svelte b/apps/www/src/lib/components/docs/examples/context-menu/ContextMenuDemo.svelte
@@ -6,6 +6,8 @@
 		showBookmarks: writable(true),
 		showFullURLs: writable(false)
 	};
+
+	const peopleRadioValue = writable("pedro");
 </script>
 
 <ContextMenu>
@@ -49,7 +51,7 @@
 			Show Full URLs
 		</ContextMenu.CheckboxItem>
 		<ContextMenu.Separator />
-		<ContextMenu.RadioGroup defaultValue="pedro">
+		<ContextMenu.RadioGroup value={peopleRadioValue}>
 			<ContextMenu.Label inset>People</ContextMenu.Label>
 			<ContextMenu.Separator />
 			<ContextMenu.RadioItem value="pedro">

diff --git a/apps/www/src/lib/components/ui/context-menu/ContextMenuRadioGroup.svelte b/apps/www/src/lib/components/ui/context-menu/ContextMenuRadioGroup.svelte
@@ -1,15 +1,20 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import { writable } from "svelte/store";
 	import { ctx, melt, type ContextRadioGroupProps } from ".";
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
+	export let defaultValue: ContextRadioGroupProps["defaultValue"] = undefined;
+	export let value: ContextRadioGroupProps["value"] = writable(defaultValue);
+	export let onValueChange: ContextRadioGroupProps["onValueChange"] =
+		undefined;
 
-	type $$Props = HTMLAttributes<HTMLDivElement> &
-		ContextRadioGroupProps & {
-			class?: string | null;
-		};
-	const { radioGroup } = ctx.setRadioGroup($$restProps);
+	const radioGroup = ctx.setRadioGroup({
+		value,
+		onValueChange
+	});
+
+	$: console.log($value);
 </script>
 
 <div use:melt={$radioGroup} class={className} {...$$restProps}>

diff --git a/apps/www/src/lib/components/ui/context-menu/ContextMenuSub.svelte b/apps/www/src/lib/components/ui/context-menu/ContextMenuSub.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { ctx, type DropdownSubmenuProps } from ".";
-	type $$Props = DropdownSubmenuProps;
+	import { ctx, type ContextSubmenuProps } from ".";
+	type $$Props = ContextSubmenuProps;
 	ctx.setSub($$restProps);
 </script>
 

diff --git a/apps/www/src/lib/components/ui/context-menu/index.ts b/apps/www/src/lib/components/ui/context-menu/index.ts
@@ -52,7 +52,7 @@ function get() {
 }
 
 function set(props: ContextMenuProps) {
-	const contextMenu = createContextMenu({ ...props, forceVisible: true });
+	const contextMenu = createContextMenu({ ...props });
 	setContext(NAME, contextMenu);
 }
 
@@ -68,12 +68,12 @@ function setRadioGroup(props: ContextRadioGroupProps) {
 	const {
 		builders: { createMenuRadioGroup }
 	} = get();
-	const dropdownRadioGroup = createMenuRadioGroup(props);
-	setContext(RADIO_GROUP_NAME, dropdownRadioGroup);
+	const contextRadioGroup = createMenuRadioGroup(props);
+	setContext(RADIO_GROUP_NAME, contextRadioGroup);
 	const {
 		elements: { radioGroup }
-	} = dropdownRadioGroup;
-	return { radioGroup };
+	} = contextRadioGroup;
+	return radioGroup;
 }
 
 function getRadioItem() {