Migrate Description to <Render> and pass slot props

This commit is contained in:
Ryan Gossiaux
2021-12-30 11:17:25 -10:00
parent 2b705fd1ae
commit a9d57659fb
3 changed files with 27 additions and 5 deletions

View File

@@ -1,7 +1,18 @@
<script lang="ts"> <script lang="ts">
import type { HTMLActionArray } from "$lib/hooks/use-actions";
import { useId } from "$lib/hooks/use-id"; import { useId } from "$lib/hooks/use-id";
import type { SupportedAs } from "$lib/internal/elements";
import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
import Render from "$lib/utils/Render.svelte";
import { onMount } from "svelte"; import { onMount } from "svelte";
import { get_current_component } from "svelte/internal";
import { useDescriptionContext } from "./DescriptionProvider.svelte"; import { useDescriptionContext } from "./DescriptionProvider.svelte";
const forwardEvents = forwardEventsBuilder(get_current_component());
export let as: SupportedAs = "p";
export let use: HTMLActionArray = [];
$: slotProps = $contextStore?.props?.slotProps ?? {};
const id = `headlessui-description-${useId()}`; const id = `headlessui-description-${useId()}`;
let contextStore = useDescriptionContext(); let contextStore = useDescriptionContext();
if (!contextStore) { if (!contextStore) {
@@ -13,6 +24,13 @@
onMount(() => $contextStore?.register(id)); onMount(() => $contextStore?.register(id));
</script> </script>
<p {...$$restProps} {...$contextStore?.props} {id}> <Render
<slot /> name={"Description"}
</p> {...$$restProps}
{as}
{...$contextStore?.props}
{id}
use={[...use, forwardEvents]}
>
<slot {...slotProps} />
</Render>

View File

@@ -1,7 +1,7 @@
<script lang="ts" context="module"> <script lang="ts" context="module">
export interface DescriptionContext { export interface DescriptionContext {
name?: string; name?: string;
props?: object; props?: { slotProps?: object };
register: (value: string) => void; register: (value: string) => void;
descriptionIds?: string; descriptionIds?: string;
} }

View File

@@ -266,7 +266,11 @@
<Portal> <Portal>
<PortalGroup target={internalDialogRef}> <PortalGroup target={internalDialogRef}>
<ForcePortalRootContext force={false}> <ForcePortalRootContext force={false}>
<DescriptionProvider name={"Dialog.Description"} let:describedby> <DescriptionProvider
name={"DialogDescription"}
{slotProps}
let:describedby
>
<Render <Render
{...{ ...$$restProps, ...propsWeControl }} {...{ ...$$restProps, ...propsWeControl }}
{as} {as}