public/svelte-headlessui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Support Features rendering / static/unmount props

Browse Source 
Fixes #1
This commit is contained in:
Ryan Gossiaux
2021-12-22 11:55:52 -08:00
parent 7d413d6e34
commit d21287eace
10 changed files with 178 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/lib/components/dialog/Dialog.svelte
View File

@@ -59,7 +59,7 @@
import { get_current_component } from "svelte/internal"; import { get_current_component } from "svelte/internal";
import type { SupportedAs } from "$lib/internal/elements"; import type { SupportedAs } from "$lib/internal/elements";
import type { HTMLActionArray } from "$lib/hooks/use-actions"; import type { HTMLActionArray } from "$lib/hooks/use-actions";
import Render from "$lib/utils/Render.svelte"; import Render, { Features } from "$lib/utils/Render.svelte";
const forwardEvents = forwardEventsBuilder(get_current_component(), [ const forwardEvents = forwardEventsBuilder(get_current_component(), [
"close", "close",
]); ]);
@@ -247,42 +247,42 @@
on:mousedown={handleWindowMousedown} on:mousedown={handleWindowMousedown}
on:keydown={handleWindowKeydown} on:keydown={handleWindowKeydown}
/> />
{#if visible} <FocusTrap {containers} {enabled} options={{ initialFocus }} />
<FocusTrap {containers} {enabled} options={{ initialFocus }} /> <StackContextProvider
<StackContextProvider element={internalDialogRef}
element={internalDialogRef} onUpdate={(message, element) => {
onUpdate={(message, element) => { return match(message, {
return match(message, { [StackMessage.Add]() {
[StackMessage.Add]() { containers.add(element);
containers.add(element); },
}, [StackMessage.Remove]() {
[StackMessage.Remove]() { containers.delete(element);
containers.delete(element); },
}, });
}); }}
}} >
> <ForcePortalRootContext force={true}>
<ForcePortalRootContext force={true}> <Portal>
<Portal> <PortalGroup target={internalDialogRef}>
<PortalGroup target={internalDialogRef}> <ForcePortalRootContext force={false}>
<ForcePortalRootContext force={false}> <DescriptionProvider name={"Dialog.Description"} let:describedby>
<DescriptionProvider name={"Dialog.Description"} let:describedby> <Render
<Render {...{ ...$$restProps, ...propsWeControl }}
{...{ ...$$restProps, ...propsWeControl }} {as}
{as} {slotProps}
{slotProps} use={[...use, forwardEvents]}
use={[...use, forwardEvents]} name={"Dialog"}
name={"Dialog"} bind:el={internalDialogRef}
bind:el={internalDialogRef} aria-describedby={describedby}
aria-describedby={describedby} on:click={handleClick}
on:click={handleClick} {visible}
> features={Features.RenderStrategy | Features.Static}
<slot {...slotProps} /> >
</Render> <slot {...slotProps} />
</DescriptionProvider> </Render>
</ForcePortalRootContext> </DescriptionProvider>
</PortalGroup> </ForcePortalRootContext>
</Portal> </PortalGroup>
</ForcePortalRootContext> </Portal>
</StackContextProvider> </ForcePortalRootContext>
{/if} </StackContextProvider>

26
src/lib/components/disclosure/DisclosurePanel.svelte
View File

@@ -14,7 +14,7 @@
import { get_current_component } from "svelte/internal"; import { get_current_component } from "svelte/internal";
import type { SupportedAs } from "$lib/internal/elements"; import type { SupportedAs } from "$lib/internal/elements";
import type { HTMLActionArray } from "$lib/hooks/use-actions"; import type { HTMLActionArray } from "$lib/hooks/use-actions";
import Render from "$lib/utils/Render.svelte"; import Render, { Features } from "$lib/utils/Render.svelte";
const forwardEvents = forwardEventsBuilder(get_current_component()); const forwardEvents = forwardEventsBuilder(get_current_component());
export let as: SupportedAs = "div"; export let as: SupportedAs = "div";
@@ -41,15 +41,15 @@
}; };
</script> </script>
{#if visible} <Render
<Render {...{ ...$$restProps, ...propsWeControl }}
{...{ ...$$restProps, ...propsWeControl }} {as}
{as} {slotProps}
{slotProps} use={[...use, forwardEvents]}
use={[...use, forwardEvents]} name={"DisclosurePanel"}
name={"DisclosurePanel"} bind:el={$panelStore}
bind:el={$panelStore} {visible}
> features={Features.RenderStrategy | Features.Static}
<slot {...slotProps} /> >
</Render> <slot {...slotProps} />
{/if} </Render>

30
src/lib/components/listbox/ListboxOptions.svelte
View File

@@ -6,7 +6,7 @@
import { Keys } from "$lib/utils/keyboard"; import { Keys } from "$lib/utils/keyboard";
import { Focus } from "$lib/utils/calculate-active-index"; import { Focus } from "$lib/utils/calculate-active-index";
import { State, useOpenClosed } from "$lib/internal/open-closed"; import { State, useOpenClosed } from "$lib/internal/open-closed";
import Render from "$lib/utils/Render.svelte"; import Render, { Features } from "$lib/utils/Render.svelte";
import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder"; import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
import type { SupportedAs } from "$lib/internal/elements"; import type { SupportedAs } from "$lib/internal/elements";
import type { HTMLActionArray } from "$lib/hooks/use-actions"; import type { HTMLActionArray } from "$lib/hooks/use-actions";
@@ -120,17 +120,17 @@
$: slotProps = { open: $api.listboxState === ListboxStates.Open }; $: slotProps = { open: $api.listboxState === ListboxStates.Open };
</script> </script>
{#if visible} <Render
<Render {...$$restProps}
{...$$restProps} {...propsWeControl}
{...propsWeControl} {as}
{as} {slotProps}
{slotProps} use={[...use, forwardEvents]}
use={[...use, forwardEvents]} name={"ListboxOptions"}
name={"ListboxOptions"} bind:el={$optionsRef}
bind:el={$optionsRef} on:keydown={handleKeyDown}
on:keydown={handleKeyDown} {visible}
> features={Features.RenderStrategy | Features.Static}
<slot {...slotProps} /> >
</Render> <slot {...slotProps} />
{/if} </Render>

30
src/lib/components/menu/MenuItems.svelte
View File

@@ -8,7 +8,7 @@
import { tick } from "svelte"; import { tick } from "svelte";
import type { HTMLActionArray } from "$lib/hooks/use-actions"; import type { HTMLActionArray } from "$lib/hooks/use-actions";
import type { SupportedAs } from "$lib/internal/elements"; import type { SupportedAs } from "$lib/internal/elements";
import Render from "$lib/utils/Render.svelte"; import Render, { Features } from "$lib/utils/Render.svelte";
import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder"; import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
import { get_current_component } from "svelte/internal"; import { get_current_component } from "svelte/internal";
@@ -138,17 +138,17 @@
$: slotProps = { open: $api.menuState === MenuStates.Open }; $: slotProps = { open: $api.menuState === MenuStates.Open };
</script> </script>
{#if visible} <Render
<Render {...{ ...$$restProps, ...propsWeControl }}
{...{ ...$$restProps, ...propsWeControl }} {as}
{as} {slotProps}
{slotProps} use={[...use, forwardEvents]}
use={[...use, forwardEvents]} bind:el={$itemsStore}
bind:el={$itemsStore} name={"MenuItems"}
name={"MenuItems"} on:keydown={handleKeyDown}
on:keydown={handleKeyDown} on:keyup={handleKeyUp}
on:keyup={handleKeyUp} {visible}
> features={Features.RenderStrategy | Features.Static}
<slot {...slotProps} /> >
</Render> <slot {...slotProps} />
{/if} </Render>

28
src/lib/components/popover/PopoverOverlay.svelte
View File

@@ -5,7 +5,7 @@
import { get_current_component } from "svelte/internal"; import { get_current_component } from "svelte/internal";
import type { SupportedAs } from "$lib/internal/elements"; import type { SupportedAs } from "$lib/internal/elements";
import type { HTMLActionArray } from "$lib/hooks/use-actions"; import type { HTMLActionArray } from "$lib/hooks/use-actions";
import Render from "$lib/utils/Render.svelte"; import Render, { Features } from "$lib/utils/Render.svelte";
const forwardEvents = forwardEventsBuilder(get_current_component()); const forwardEvents = forwardEventsBuilder(get_current_component());
export let as: SupportedAs = "div"; export let as: SupportedAs = "div";
@@ -27,16 +27,16 @@
$: slotProps = { open: $api.popoverState === PopoverStates.Open }; $: slotProps = { open: $api.popoverState === PopoverStates.Open };
</script> </script>
{#if visible} <Render
<Render {...$$restProps}
{...$$restProps} {as}
{as} {slotProps}
{slotProps} use={[...use, forwardEvents]}
use={[...use, forwardEvents]} name={"PopoverOverlay"}
name={"PopoverOverlay"} on:click={handleClick}
on:click={handleClick} aria-hidden
aria-hidden {visible}
> features={Features.RenderStrategy | Features.Static}
<slot {...slotProps} /> >
</Render> <slot {...slotProps} />
{/if} </Render>

30
src/lib/components/popover/PopoverPanel.svelte
View File

@@ -28,7 +28,7 @@
import { get_current_component } from "svelte/internal"; import { get_current_component } from "svelte/internal";
import type { SupportedAs } from "$lib/internal/elements"; import type { SupportedAs } from "$lib/internal/elements";
import type { HTMLActionArray } from "$lib/hooks/use-actions"; import type { HTMLActionArray } from "$lib/hooks/use-actions";
import Render from "$lib/utils/Render.svelte"; import Render, { Features } from "$lib/utils/Render.svelte";
const forwardEvents = forwardEventsBuilder(get_current_component()); const forwardEvents = forwardEventsBuilder(get_current_component());
export let as: SupportedAs = "div"; export let as: SupportedAs = "div";
@@ -135,17 +135,17 @@
on:keydown={handleWindowKeydown} on:keydown={handleWindowKeydown}
on:focus|capture={handleFocus} on:focus|capture={handleFocus}
/> />
{#if visible} <Render
<Render {...$$restProps}
{...$$restProps} id={$api.panelId}
id={$api.panelId} {as}
{as} {slotProps}
{slotProps} use={[...use, forwardEvents]}
use={[...use, forwardEvents]} name={"PopoverPanel"}
name={"PopoverPanel"} bind:el={$panelStore}
bind:el={$panelStore} on:keydown={handleKeydown}
on:keydown={handleKeydown} {visible}
> features={Features.RenderStrategy | Features.Static}
<slot {...slotProps} /> >
</Render> <slot {...slotProps} />
{/if} </Render>

22
src/lib/components/tabs/TabPanel.svelte
View File

@@ -6,7 +6,7 @@
import { get_current_component } from "svelte/internal"; import { get_current_component } from "svelte/internal";
import type { SupportedAs } from "$lib/internal/elements"; import type { SupportedAs } from "$lib/internal/elements";
import type { HTMLActionArray } from "$lib/hooks/use-actions"; import type { HTMLActionArray } from "$lib/hooks/use-actions";
import Render from "$lib/utils/Render.svelte"; import Render, { Features } from "$lib/utils/Render.svelte";
const forwardEvents = forwardEventsBuilder(get_current_component()); const forwardEvents = forwardEventsBuilder(get_current_component());
export let as: SupportedAs = "div"; export let as: SupportedAs = "div";
@@ -31,13 +31,13 @@
}; };
</script> </script>
{#if selected} <Render
<Render {...{ ...$$restProps, ...propsWeControl }}
{...{ ...$$restProps, ...propsWeControl }} {as}
{as} use={[...use, forwardEvents]}
use={[...use, forwardEvents]} name={"TabPanel"}
name={"TabPanel"} visible={selected}
> features={Features.RenderStrategy | Features.Static}
<slot /> >
</Render> <slot />
{/if} </Render>

9
src/lib/components/transitions/TransitionChild.svelte
View File

@@ -18,7 +18,7 @@
import { get_current_component } from "svelte/internal"; import { get_current_component } from "svelte/internal";
import type { SupportedAs } from "$lib/internal/elements"; import type { SupportedAs } from "$lib/internal/elements";
import type { HTMLActionArray } from "$lib/hooks/use-actions"; import type { HTMLActionArray } from "$lib/hooks/use-actions";
import Render from "$lib/utils/Render.svelte"; import Render, { Features, RenderStrategy } from "$lib/utils/Render.svelte";
const forwardEvents = forwardEventsBuilder(get_current_component(), [ const forwardEvents = forwardEventsBuilder(get_current_component(), [
"beforeEnter", "beforeEnter",
"beforeLeave", "beforeLeave",
@@ -29,7 +29,6 @@
export let as: SupportedAs = "div"; export let as: SupportedAs = "div";
export let use: HTMLActionArray = []; export let use: HTMLActionArray = [];
export let unmount = true;
export let enter = ""; export let enter = "";
export let enterFrom = ""; export let enterFrom = "";
export let enterTo = ""; export let enterTo = "";
@@ -186,8 +185,8 @@
name={"TransitionChild"} name={"TransitionChild"}
bind:el={container} bind:el={container}
class={classes} class={classes}
visible={state === TreeStates.Visible}
features={Features.RenderStrategy}
> >
{#if state === TreeStates.Visible} <slot />
<slot />
{/if}
</Render> </Render>

4
src/lib/components/transitions/TransitionRoot.svelte
View File

@@ -126,7 +126,6 @@
export let use: HTMLActionArray = []; export let use: HTMLActionArray = [];
export let show: boolean | undefined = undefined; export let show: boolean | undefined = undefined;
export let unmount = true;
export let appear = false; export let appear = false;
let openClosedState = useOpenClosed(); let openClosedState = useOpenClosed();
@@ -191,12 +190,11 @@
setContext(TRANSITION_CONTEXT_NAME, transitionBag); setContext(TRANSITION_CONTEXT_NAME, transitionBag);
</script> </script>
{#if state === TreeStates.Visible} {#if state === TreeStates.Visible || $$props.unmount === false}
<TransitionChild <TransitionChild
{...$$restProps} {...$$restProps}
{as} {as}
use={[...use, forwardEvents]} use={[...use, forwardEvents]}
{unmount}
on:afterEnter on:afterEnter
on:afterLeave on:afterLeave
on:beforeEnter on:beforeEnter

60
src/lib/utils/Render.svelte
View File

@@ -5,6 +5,26 @@
} from "$lib/internal/elements"; } from "$lib/internal/elements";
import { get_current_component, SvelteComponent } from "svelte/internal"; import { get_current_component, SvelteComponent } from "svelte/internal";
export enum Features {
/** No features at all */
None = 0,
/**
* When used, this will allow us to use one of the render strategies.
*
* **The render strategies are:**
* - **Unmount** _(Will unmount the component.)_
* - **Hidden** _(Will hide the component using the [hidden] attribute.)_
*/
RenderStrategy = 1,
/**
* When used, this will allow the user of our component to be in control. This can be used when
* you want to transition based on some state.
*/
Static = 2,
}
export enum RenderStrategy { export enum RenderStrategy {
Unmount, Unmount,
Hidden, Hidden,
@@ -14,13 +34,17 @@
<script lang="ts"> <script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions"; import type { ActionArray } from "$lib/hooks/use-actions";
import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder"; import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
const forwardEvents = forwardEventsBuilder(get_current_component());
export let name: string; export let name: string;
export let as: SvelteComponent | SupportedElement; export let as: SvelteComponent | SupportedElement;
export let el: HTMLElement | null = null; export let el: HTMLElement | null = null;
export let use: ActionArray = []; export let use: ActionArray = [];
export let slotProps: unknown = {}; export let slotProps: unknown = {};
const forwardEvents = forwardEventsBuilder(get_current_component()); export let visible = true;
export let features: Features = Features.None;
// The static and unmount props are only used in conjunction with the render strategies
export let unmount = true;
if (!as) { if (!as) {
throw new Error(`<${name}> did not provide an \`as\` value to <Render>`); throw new Error(`<${name}> did not provide an \`as\` value to <Render>`);
@@ -34,14 +58,30 @@
} }
$: classStyle = $$props.class; $: classStyle = $$props.class;
$: show =
visible ||
(features & Features.Static && $$props.static) ||
!(features & Features.RenderStrategy && unmount);
$: hidden =
!visible &&
!(features & Features.Static && $$props.static) &&
features & Features.RenderStrategy &&
!unmount;
</script> </script>
<svelte:component {#if show}
this={element} <svelte:component
bind:el this={element}
use={[...use, forwardEvents]} bind:el
{...$$restProps} use={[...use, forwardEvents]}
class={typeof classStyle === "function" ? classStyle(slotProps) : classStyle} {...$$restProps}
> class={typeof classStyle === "function"
<slot /> ? classStyle(slotProps)
</svelte:component> : classStyle}
style={hidden ? "display: none" : $$props.style}
hidden={hidden || undefined}
>
<slot />
</svelte:component>
{/if}