This commit is contained in:
eewing
2026-02-17 14:10:16 -06:00
parent 2bca5834c5
commit cf73cd3b4c
11246 changed files with 1690552 additions and 0 deletions
+37
View File
@@ -0,0 +1,37 @@
<script lang="ts">
import { boxWith, mergeProps } from "svelte-toolbelt";
import { DialogCloseState } from "../dialog.svelte.js";
import type { DialogCloseProps } from "../types.js";
import { createId } from "../../../internal/create-id.js";
const uid = $props.id();
let {
children,
child,
id = createId(uid),
ref = $bindable(null),
disabled = false,
...restProps
}: DialogCloseProps = $props();
const closeState = DialogCloseState.create({
variant: boxWith(() => "close"),
id: boxWith(() => id),
ref: boxWith(
() => ref,
(v) => (ref = v)
),
disabled: boxWith(() => Boolean(disabled)),
});
const mergedProps = $derived(mergeProps(restProps, closeState.props));
</script>
{#if child}
{@render child({ props: mergedProps })}
{:else}
<button {...mergedProps}>
{@render children?.()}
</button>
{/if}
@@ -0,0 +1,3 @@
declare const DialogClose: import("svelte").Component<import("../types.js").DialogTriggerProps, {}, "ref">;
type DialogClose = ReturnType<typeof DialogClose>;
export default DialogClose;
+95
View File
@@ -0,0 +1,95 @@
<script lang="ts">
import { boxWith, mergeProps } from "svelte-toolbelt";
import { DialogContentState } from "../dialog.svelte.js";
import type { DialogContentProps } from "../types.js";
import DismissibleLayer from "../../utilities/dismissible-layer/dismissible-layer.svelte";
import EscapeLayer from "../../utilities/escape-layer/escape-layer.svelte";
import FocusScope from "../../utilities/focus-scope/focus-scope.svelte";
import TextSelectionLayer from "../../utilities/text-selection-layer/text-selection-layer.svelte";
import { createId } from "../../../internal/create-id.js";
import { noop } from "../../../internal/noop.js";
import ScrollLock from "../../utilities/scroll-lock/scroll-lock.svelte";
const uid = $props.id();
let {
id = createId(uid),
children,
child,
ref = $bindable(null),
forceMount = false,
onCloseAutoFocus = noop,
onOpenAutoFocus = noop,
onEscapeKeydown = noop,
onInteractOutside = noop,
trapFocus = true,
preventScroll = true,
restoreScrollDelay = null,
...restProps
}: DialogContentProps = $props();
const contentState = DialogContentState.create({
id: boxWith(() => id),
ref: boxWith(
() => ref,
(v) => (ref = v)
),
});
const mergedProps = $derived(mergeProps(restProps, contentState.props));
</script>
{#if contentState.shouldRender || forceMount}
<FocusScope
ref={contentState.opts.ref}
loop
{trapFocus}
enabled={contentState.root.opts.open.current}
{onOpenAutoFocus}
{onCloseAutoFocus}
>
{#snippet focusScope({ props: focusScopeProps })}
<EscapeLayer
{...mergedProps}
enabled={contentState.root.opts.open.current}
ref={contentState.opts.ref}
onEscapeKeydown={(e) => {
onEscapeKeydown(e);
if (e.defaultPrevented) return;
contentState.root.handleClose();
}}
>
<DismissibleLayer
{...mergedProps}
ref={contentState.opts.ref}
enabled={contentState.root.opts.open.current}
onInteractOutside={(e) => {
onInteractOutside(e);
if (e.defaultPrevented) return;
contentState.root.handleClose();
}}
>
<TextSelectionLayer
{...mergedProps}
ref={contentState.opts.ref}
enabled={contentState.root.opts.open.current}
>
{#if child}
{#if contentState.root.opts.open.current}
<ScrollLock {preventScroll} {restoreScrollDelay} />
{/if}
{@render child({
props: mergeProps(mergedProps, focusScopeProps),
...contentState.snippetProps,
})}
{:else}
<ScrollLock {preventScroll} />
<div {...mergeProps(mergedProps, focusScopeProps)}>
{@render children?.()}
</div>
{/if}
</TextSelectionLayer>
</DismissibleLayer>
</EscapeLayer>
{/snippet}
</FocusScope>
{/if}
@@ -0,0 +1,4 @@
import type { DialogContentProps } from "../types.js";
declare const DialogContent: import("svelte").Component<DialogContentProps, {}, "ref">;
type DialogContent = ReturnType<typeof DialogContent>;
export default DialogContent;
@@ -0,0 +1,34 @@
<script lang="ts">
import { boxWith, mergeProps } from "svelte-toolbelt";
import { DialogDescriptionState } from "../dialog.svelte.js";
import type { DialogDescriptionProps } from "../types.js";
import { createId } from "../../../internal/create-id.js";
const uid = $props.id();
let {
id = createId(uid),
children,
child,
ref = $bindable(null),
...restProps
}: DialogDescriptionProps = $props();
const descriptionState = DialogDescriptionState.create({
id: boxWith(() => id),
ref: boxWith(
() => ref,
(v) => (ref = v)
),
});
const mergedProps = $derived(mergeProps(restProps, descriptionState.props));
</script>
{#if child}
{@render child({ props: mergedProps })}
{:else}
<div {...mergedProps}>
{@render children?.()}
</div>
{/if}
@@ -0,0 +1,4 @@
import type { DialogDescriptionProps } from "../types.js";
declare const DialogDescription: import("svelte").Component<DialogDescriptionProps, {}, "ref">;
type DialogDescription = ReturnType<typeof DialogDescription>;
export default DialogDescription;
+37
View File
@@ -0,0 +1,37 @@
<script lang="ts">
import { boxWith, mergeProps } from "svelte-toolbelt";
import { DialogOverlayState } from "../dialog.svelte.js";
import type { DialogOverlayProps } from "../types.js";
import { createId } from "../../../internal/create-id.js";
const uid = $props.id();
let {
id = createId(uid),
forceMount = false,
child,
children,
ref = $bindable(null),
...restProps
}: DialogOverlayProps = $props();
const overlayState = DialogOverlayState.create({
id: boxWith(() => id),
ref: boxWith(
() => ref,
(v) => (ref = v)
),
});
const mergedProps = $derived(mergeProps(restProps, overlayState.props));
</script>
{#if overlayState.shouldRender || forceMount}
{#if child}
{@render child({ props: mergeProps(mergedProps), ...overlayState.snippetProps })}
{:else}
<div {...mergeProps(mergedProps)}>
{@render children?.(overlayState.snippetProps)}
</div>
{/if}
{/if}
@@ -0,0 +1,4 @@
import type { DialogOverlayProps } from "../types.js";
declare const DialogOverlay: import("svelte").Component<DialogOverlayProps, {}, "ref">;
type DialogOverlay = ReturnType<typeof DialogOverlay>;
export default DialogOverlay;
+36
View File
@@ -0,0 +1,36 @@
<script lang="ts">
import { boxWith, mergeProps } from "svelte-toolbelt";
import { DialogTitleState } from "../dialog.svelte.js";
import type { DialogTitleProps } from "../types.js";
import { createId } from "../../../internal/create-id.js";
const uid = $props.id();
let {
id = createId(uid),
ref = $bindable(null),
child,
children,
level = 2,
...restProps
}: DialogTitleProps = $props();
const titleState = DialogTitleState.create({
id: boxWith(() => id),
level: boxWith(() => level),
ref: boxWith(
() => ref,
(v) => (ref = v)
),
});
const mergedProps = $derived(mergeProps(restProps, titleState.props));
</script>
{#if child}
{@render child({ props: mergedProps })}
{:else}
<div {...mergedProps}>
{@render children?.()}
</div>
{/if}
@@ -0,0 +1,4 @@
import type { DialogTitleProps } from "../types.js";
declare const DialogTitle: import("svelte").Component<DialogTitleProps, {}, "ref">;
type DialogTitle = ReturnType<typeof DialogTitle>;
export default DialogTitle;
+36
View File
@@ -0,0 +1,36 @@
<script lang="ts">
import { boxWith, mergeProps } from "svelte-toolbelt";
import { DialogTriggerState } from "../dialog.svelte.js";
import type { DialogTriggerProps } from "../types.js";
import { createId } from "../../../internal/create-id.js";
const uid = $props.id();
let {
id = createId(uid),
ref = $bindable(null),
children,
child,
disabled = false,
...restProps
}: DialogTriggerProps = $props();
const triggerState = DialogTriggerState.create({
id: boxWith(() => id),
ref: boxWith(
() => ref,
(v) => (ref = v)
),
disabled: boxWith(() => Boolean(disabled)),
});
const mergedProps = $derived(mergeProps(restProps, triggerState.props));
</script>
{#if child}
{@render child({ props: mergedProps })}
{:else}
<button {...mergedProps}>
{@render children?.()}
</button>
{/if}
@@ -0,0 +1,4 @@
import type { DialogTriggerProps } from "../types.js";
declare const DialogTrigger: import("svelte").Component<DialogTriggerProps, {}, "ref">;
type DialogTrigger = ReturnType<typeof DialogTrigger>;
export default DialogTrigger;
+27
View File
@@ -0,0 +1,27 @@
<script lang="ts">
import { boxWith } from "svelte-toolbelt";
import { DialogRootState } from "../dialog.svelte.js";
import type { DialogRootProps } from "../types.js";
import { noop } from "../../../internal/noop.js";
let {
open = $bindable(false),
onOpenChange = noop,
onOpenChangeComplete = noop,
children,
}: DialogRootProps = $props();
DialogRootState.create({
variant: boxWith(() => "dialog"),
open: boxWith(
() => open,
(v) => {
open = v;
onOpenChange(v);
}
),
onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
});
</script>
{@render children?.()}
+3
View File
@@ -0,0 +1,3 @@
declare const Dialog: import("svelte").Component<import("../types.js").DialogRootPropsWithoutHTML, {}, "open">;
type Dialog = ReturnType<typeof Dialog>;
export default Dialog;