Migrate Description to <Render> and pass slot props
This commit is contained in:
@@ -1,7 +1,18 @@
|
||||
<script lang="ts">
|
||||
import type { HTMLActionArray } from "$lib/hooks/use-actions";
|
||||
|
||||
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 { get_current_component } from "svelte/internal";
|
||||
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()}`;
|
||||
let contextStore = useDescriptionContext();
|
||||
if (!contextStore) {
|
||||
@@ -13,6 +24,13 @@
|
||||
onMount(() => $contextStore?.register(id));
|
||||
</script>
|
||||
|
||||
<p {...$$restProps} {...$contextStore?.props} {id}>
|
||||
<slot />
|
||||
</p>
|
||||
<Render
|
||||
name={"Description"}
|
||||
{...$$restProps}
|
||||
{as}
|
||||
{...$contextStore?.props}
|
||||
{id}
|
||||
use={[...use, forwardEvents]}
|
||||
>
|
||||
<slot {...slotProps} />
|
||||
</Render>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script lang="ts" context="module">
|
||||
export interface DescriptionContext {
|
||||
name?: string;
|
||||
props?: object;
|
||||
props?: { slotProps?: object };
|
||||
register: (value: string) => void;
|
||||
descriptionIds?: string;
|
||||
}
|
||||
|
||||
@@ -266,7 +266,11 @@
|
||||
<Portal>
|
||||
<PortalGroup target={internalDialogRef}>
|
||||
<ForcePortalRootContext force={false}>
|
||||
<DescriptionProvider name={"Dialog.Description"} let:describedby>
|
||||
<DescriptionProvider
|
||||
name={"DialogDescription"}
|
||||
{slotProps}
|
||||
let:describedby
|
||||
>
|
||||
<Render
|
||||
{...{ ...$$restProps, ...propsWeControl }}
|
||||
{as}
|
||||
|
||||
Reference in New Issue
Block a user