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

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

@@ -59,7 +59,7 @@
import { get_current_component } from "svelte/internal";
import type { SupportedAs } from "$lib/internal/elements";
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(), [
"close",
]);
@@ -247,9 +247,8 @@
on:mousedown={handleWindowMousedown}
on:keydown={handleWindowKeydown}
/>
{#if visible}
<FocusTrap {containers} {enabled} options={{ initialFocus }} />
<StackContextProvider
<FocusTrap {containers} {enabled} options={{ initialFocus }} />
<StackContextProvider
element={internalDialogRef}
onUpdate={(message, element) => {
return match(message, {
@@ -261,7 +260,7 @@
},
});
}}
>
>
<ForcePortalRootContext force={true}>
<Portal>
<PortalGroup target={internalDialogRef}>
@@ -276,6 +275,8 @@
bind:el={internalDialogRef}
aria-describedby={describedby}
on:click={handleClick}
{visible}
features={Features.RenderStrategy | Features.Static}
>
<slot {...slotProps} />
</Render>
@@ -284,5 +285,4 @@
</PortalGroup>
</Portal>
</ForcePortalRootContext>
</StackContextProvider>
{/if}
</StackContextProvider>

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

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

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

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

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

@@ -8,7 +8,7 @@
import { tick } from "svelte";
import type { HTMLActionArray } from "$lib/hooks/use-actions";
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 { get_current_component } from "svelte/internal";
@@ -138,8 +138,7 @@
$: slotProps = { open: $api.menuState === MenuStates.Open };
</script>
{#if visible}
<Render
<Render
{...{ ...$$restProps, ...propsWeControl }}
{as}
{slotProps}
@@ -148,7 +147,8 @@
name={"MenuItems"}
on:keydown={handleKeyDown}
on:keyup={handleKeyUp}
>
{visible}
features={Features.RenderStrategy | Features.Static}
>
<slot {...slotProps} />
</Render>
{/if}
</Render>

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

@@ -5,7 +5,7 @@
import { get_current_component } from "svelte/internal";
import type { SupportedAs } from "$lib/internal/elements";
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());
export let as: SupportedAs = "div";
@@ -27,8 +27,7 @@
$: slotProps = { open: $api.popoverState === PopoverStates.Open };
</script>
{#if visible}
<Render
<Render
{...$$restProps}
{as}
{slotProps}
@@ -36,7 +35,8 @@
name={"PopoverOverlay"}
on:click={handleClick}
aria-hidden
>
{visible}
features={Features.RenderStrategy | Features.Static}
>
<slot {...slotProps} />
</Render>
{/if}
</Render>

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

@@ -28,7 +28,7 @@
import { get_current_component } from "svelte/internal";
import type { SupportedAs } from "$lib/internal/elements";
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());
export let as: SupportedAs = "div";
@@ -135,8 +135,7 @@
on:keydown={handleWindowKeydown}
on:focus|capture={handleFocus}
/>
{#if visible}
<Render
<Render
{...$$restProps}
id={$api.panelId}
{as}
@@ -145,7 +144,8 @@
name={"PopoverPanel"}
bind:el={$panelStore}
on:keydown={handleKeydown}
>
{visible}
features={Features.RenderStrategy | Features.Static}
>
<slot {...slotProps} />
</Render>
{/if}
</Render>

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

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

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

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

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

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

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

@@ -5,6 +5,26 @@
} from "$lib/internal/elements";
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 {
Unmount,
Hidden,
@@ -14,13 +34,17 @@
<script lang="ts">
import type { ActionArray } from "$lib/hooks/use-actions";
import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
const forwardEvents = forwardEventsBuilder(get_current_component());
export let name: string;
export let as: SvelteComponent | SupportedElement;
export let el: HTMLElement | null = null;
export let use: ActionArray = [];
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) {
throw new Error(`<${name}> did not provide an \`as\` value to <Render>`);
@@ -34,14 +58,30 @@
}
$: 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>
<svelte:component
{#if show}
<svelte:component
this={element}
bind:el
use={[...use, forwardEvents]}
{...$$restProps}
class={typeof classStyle === "function" ? classStyle(slotProps) : classStyle}
>
class={typeof classStyle === "function"
? classStyle(slotProps)
: classStyle}
style={hidden ? "display: none" : $$props.style}
hidden={hidden || undefined}
>
<slot />
</svelte:component>
</svelte:component>
{/if}