chore: update id slot props

huntabyte · Nov 9, 2023 · e6cecb3 · e6cecb3
1 parent ea82356
commit e6cecb3
Show file tree

Hide file tree

Showing 12 changed files with 91 additions and 14 deletions.
diff --git a/src/lib/bits/accordion/components/Accordion.svelte b/src/lib/bits/accordion/components/Accordion.svelte
@@ -21,7 +21,6 @@
 		multiple,
 		disabled,
 		defaultValue: value,
-
 		onValueChange: (({ next }: { next: $$Props["value"] }) => {
 			if (value !== next) {
 				onValueChange?.(next);

diff --git a/src/lib/bits/alert-dialog/components/AlertDialog.svelte b/src/lib/bits/alert-dialog/components/AlertDialog.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { derived } from "svelte/store";
 	import { setCtx } from "../ctx.js";
 	import type { Props } from "../types.js";
 
@@ -32,6 +33,15 @@
 		}
 	});
 
+	const idValues = derived(
+		[ids.content, ids.description, ids.title],
+		([$contentId, $descriptionId, $titleId]) => ({
+			content: $contentId,
+			description: $descriptionId,
+			title: $titleId
+		})
+	);
+
 	$: open !== undefined && localOpen.set(open);
 
 	$: updateOption("preventScroll", preventScroll);
@@ -41,4 +51,4 @@
 	$: updateOption("forceVisible", forceVisible);
 </script>
 
-<slot {ids} />
+<slot ids={$idValues} />
diff --git a/src/lib/bits/dialog/components/Dialog.svelte b/src/lib/bits/dialog/components/Dialog.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { derived } from "svelte/store";
 	import { setCtx } from "../ctx.js";
 	import type { Props } from "../types.js";
 
@@ -36,6 +37,15 @@
 		}
 	});
 
+	const idValues = derived(
+		[ids.content, ids.description, ids.title],
+		([$contentId, $descriptionId, $titleId]) => ({
+			content: $contentId,
+			description: $descriptionId,
+			title: $titleId
+		})
+	);
+
 	$: open !== undefined && localOpen.set(open);
 
 	$: updateOption("preventScroll", preventScroll);
@@ -47,4 +57,4 @@
 	$: updateOption("closeFocus", closeFocus);
 </script>
 
-<slot {ids} />
+<slot ids={$idValues} />
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenu.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenu.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Props } from "../types.js";
 	import { setCtx } from "../ctx.js";
+	import { derived } from "svelte/store";
 	type $$Props = Props;
 
 	export let closeOnOutsideClick: $$Props["closeOnOutsideClick"] = undefined;
@@ -44,6 +45,12 @@
 			return next;
 		}
 	});
+
+	const idValues = derived([ids.menu, ids.trigger], ([$menuId, $triggerId]) => ({
+		menu: $menuId,
+		trigger: $triggerId
+	}));
+
 	$: open !== undefined && localOpen.set(open);
 
 	$: updateOption("closeOnOutsideClick", closeOnOutsideClick);
@@ -60,4 +67,4 @@
 	$: updateOption("typeahead", typeahead);
 </script>
 
-<slot {ids} />
+<slot ids={$idValues} />
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuSub.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuSub.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { derived } from "svelte/store";
 	import { setSubMenuCtx } from "../ctx.js";
 	import type { SubProps } from "../types.js";
 	type $$Props = SubProps;
@@ -13,9 +14,14 @@
 		arrowSize
 	});
 
+	const idValues = derived([ids.menu, ids.trigger], ([$menuId, $triggerId]) => ({
+		menu: $menuId,
+		trigger: $triggerId
+	}));
+
 	$: updateOption("positioning", positioning);
 	$: updateOption("disabled", disabled);
 	$: updateOption("arrowSize", arrowSize);
 </script>
 
-<slot subIds={ids} />
+<slot subIds={$idValues} />
diff --git a/src/lib/bits/link-preview/components/LinkPreview.svelte b/src/lib/bits/link-preview/components/LinkPreview.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { derived } from "svelte/store";
 	import { setCtx } from "../ctx.js";
 	import type { Props } from "../types.js";
 	type $$Props = Props;
@@ -35,6 +36,11 @@
 		}
 	});
 
+	const idValues = derived([ids.content, ids.trigger], ([$contentId, $triggerId]) => ({
+		content: $contentId,
+		trigger: $triggerId
+	}));
+
 	$: open !== undefined && localOpen.set(open);
 	$: updateOption("positioning", positioning);
 	$: updateOption("openDelay", openDelay);
@@ -45,4 +51,4 @@
 	$: updateOption("portal", portal);
 </script>
 
-<slot {ids} />
+<slot ids={$idValues} />
diff --git a/src/lib/bits/menubar/components/Menubar.svelte b/src/lib/bits/menubar/components/Menubar.svelte
@@ -2,6 +2,7 @@
 	import { melt } from "@melt-ui/svelte";
 	import { setCtx, getAttrs } from "../ctx.js";
 	import type { Props } from "../types.js";
+	import { derived } from "svelte/store";
 
 	type $$Props = Props;
 
@@ -15,16 +16,20 @@
 		ids
 	} = setCtx({ loop, closeOnEscape });
 
+	const idValues = derived([ids.menubar], ([$menubarId]) => ({
+		menubar: $menubarId
+	}));
+
 	$: updateOption("loop", loop);
 	$: updateOption("closeOnEscape", closeOnEscape);
 	$: builder = $menubar;
 	const attrs = getAttrs("root");
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} {ids} />
+	<slot {builder} {attrs} ids={$idValues} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} {ids} />
+		<slot {builder} {attrs} ids={$idValues} />
 	</div>
 {/if}
diff --git a/src/lib/bits/menubar/components/MenubarMenu.svelte b/src/lib/bits/menubar/components/MenubarMenu.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { MenuProps } from "../types.js";
 	import { setMenuCtx } from "../ctx.js";
+	import { generateId } from "$lib/internal/id.js";
 	type $$Props = MenuProps;
 
 	export let closeOnOutsideClick: $$Props["closeOnOutsideClick"] = undefined;
@@ -17,12 +18,17 @@
 	export let closeFocus: $$Props["closeFocus"] = undefined;
 	export let disableFocusFirstItem: $$Props["disableFocusFirstItem"] = undefined;
 
+	const ids = {
+		menu: generateId(),
+		trigger: generateId()
+	};
+
 	const {
 		states: { open: localOpen },
-		updateOption,
-		ids
+		updateOption
 	} = setMenuCtx({
 		closeOnOutsideClick,
+		ids,
 		closeOnEscape,
 		portal,
 		preventScroll,

diff --git a/src/lib/bits/menubar/components/MenubarSub.svelte b/src/lib/bits/menubar/components/MenubarSub.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { derived } from "svelte/store";
 	import { setSubMenuCtx } from "../ctx.js";
 	import type { SubProps } from "../types.js";
 	type $$Props = SubProps;
@@ -13,9 +14,14 @@
 		arrowSize
 	});
 
+	const idValues = derived([ids.menu, ids.trigger], ([$menuId, $triggerId]) => ({
+		menu: $menuId,
+		trigger: $triggerId
+	}));
+
 	$: updateOption("positioning", positioning);
 	$: updateOption("disabled", disabled);
 	$: updateOption("arrowSize", arrowSize);
 </script>
 
-<slot subIds={ids} />
+<slot subIds={$idValues} />
diff --git a/src/lib/bits/popover/components/Popover.svelte b/src/lib/bits/popover/components/Popover.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Props } from "../types.js";
 	import { setCtx } from "../ctx.js";
+	import { derived } from "svelte/store";
 
 	type $$Props = Props;
 	export let positioning: $$Props["positioning"] = undefined;
@@ -39,6 +40,11 @@
 		}
 	});
 
+	const idValues = derived([ids.content, ids.trigger], ([$contentId, $triggerId]) => ({
+		content: $contentId,
+		trigger: $triggerId
+	}));
+
 	$: open !== undefined && localOpen.set(open);
 
 	$: updateOption("positioning", positioning);
@@ -52,4 +58,4 @@
 	$: updateOption("closeFocus", closeFocus);
 </script>
 
-<slot {ids} />
+<slot ids={$idValues} />
diff --git a/src/lib/bits/select/components/Select.svelte b/src/lib/bits/select/components/Select.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { derived } from "svelte/store";
 	import { setCtx } from "../ctx.js";
 	import type { SelectProps } from "../types.js";
 
@@ -56,6 +57,15 @@
 		}
 	});
 
+	const idValues = derived(
+		[ids.menu, ids.trigger, ids.label],
+		([$menuId, $triggerId, $labelId]) => ({
+			menu: $menuId,
+			trigger: $triggerId,
+			label: $labelId
+		})
+	);
+
 	$: open !== undefined && localOpen.set(open);
 	$: selected !== undefined && localSelected.set(selected);
 
@@ -73,4 +83,4 @@
 	$: updateOption("forceVisible", forceVisible);
 </script>
 
-<slot {ids} />
+<slot ids={$idValues} />
diff --git a/src/lib/bits/tooltip/components/Tooltip.svelte b/src/lib/bits/tooltip/components/Tooltip.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { derived } from "svelte/store";
 	import { setCtx } from "../ctx.js";
 	import type { Props } from "../types.js";
 	type $$Props = Props;
@@ -41,6 +42,11 @@
 		}
 	});
 
+	const idValues = derived([ids.content, ids.trigger], ([$contentId, $triggerId]) => ({
+		content: $contentId,
+		trigger: $triggerId
+	}));
+
 	$: open !== undefined && localOpen.set(open);
 	$: updateOption("positioning", positioning);
 	$: updateOption("arrowSize", arrowSize);
@@ -54,4 +60,4 @@
 	$: updateOption("disableHoverableContent", disableHoverableContent);
 </script>
 
-<slot {ids} />
+<slot ids={$idValues} />