Migrate Description to <Render> and pass slot props
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user