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
@@ -0,0 +1,34 @@
<script lang="ts">
import { boxWith, mergeProps } from "svelte-toolbelt";
import type { AlertDialogActionProps } from "../types.js";
import { DialogActionState } from "../../dialog/dialog.svelte.js";
import { createId } from "../../../internal/create-id.js";
const uid = $props.id();
let {
children,
child,
id = createId(uid),
ref = $bindable(null),
...restProps
}: AlertDialogActionProps = $props();
const actionState = DialogActionState.create({
id: boxWith(() => id),
ref: boxWith(
() => ref,
(v) => (ref = v)
),
});
const mergedProps = $derived(mergeProps(restProps, actionState.props));
</script>
{#if child}
{@render child({ props: mergedProps })}
{:else}
<button {...mergedProps}>
{@render children?.()}
</button>
{/if}
@@ -0,0 +1,3 @@
declare const AlertDialogAction: import("svelte").Component<import("../types.js").AlertDialogTriggerProps, {}, "ref">;
type AlertDialogAction = ReturnType<typeof AlertDialogAction>;
export default AlertDialogAction;
@@ -0,0 +1,36 @@
<script lang="ts">
import { boxWith, mergeProps } from "svelte-toolbelt";
import type { AlertDialogCancelProps } from "../types.js";
import { AlertDialogCancelState } from "../../dialog/dialog.svelte.js";
import { createId } from "../../../internal/create-id.js";
const uid = $props.id();
let {
id = createId(uid),
ref = $bindable(null),
children,
child,
disabled = false,
...restProps
}: AlertDialogCancelProps = $props();
const cancelState = AlertDialogCancelState.create({
id: boxWith(() => id),
ref: boxWith(
() => ref,
(v) => (ref = v)
),
disabled: boxWith(() => Boolean(disabled)),
});
const mergedProps = $derived(mergeProps(restProps, cancelState.props));
</script>
{#if child}
{@render child({ props: mergedProps })}
{:else}
<button {...mergedProps}>
{@render children?.()}
</button>
{/if}
@@ -0,0 +1,3 @@
declare const AlertDialogCancel: import("svelte").Component<import("../types.js").AlertDialogTriggerProps, {}, "ref">;
type AlertDialogCancel = ReturnType<typeof AlertDialogCancel>;
export default AlertDialogCancel;
@@ -0,0 +1,103 @@
<script lang="ts">
import { afterSleep, boxWith, mergeProps } from "svelte-toolbelt";
import type { AlertDialogContentProps } 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";
import { DialogContentState } from "../../dialog/dialog.svelte.js";
const uid = $props.id();
let {
id = createId(uid),
children,
child,
ref = $bindable(null),
forceMount = false,
interactOutsideBehavior = "ignore",
onCloseAutoFocus = noop,
onEscapeKeydown = noop,
onOpenAutoFocus = noop,
onInteractOutside = noop,
preventScroll = true,
trapFocus = true,
restoreScrollDelay = null,
...restProps
}: AlertDialogContentProps = $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}
{onCloseAutoFocus}
onOpenAutoFocus={(e) => {
onOpenAutoFocus(e);
if (e.defaultPrevented) return;
e.preventDefault();
afterSleep(0, () => contentState.opts.ref.current?.focus());
}}
>
{#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}
{interactOutsideBehavior}
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,3 @@
declare const AlertDialogContent: import("svelte").Component<import("../../dialog/types.js").DialogContentProps, {}, "ref">;
type AlertDialogContent = ReturnType<typeof AlertDialogContent>;
export default AlertDialogContent;
@@ -0,0 +1,27 @@
<script lang="ts">
import { boxWith } from "svelte-toolbelt";
import type { AlertDialogRootProps } from "../types.js";
import { noop } from "../../../internal/noop.js";
import { DialogRootState } from "../../dialog/dialog.svelte.js";
let {
open = $bindable(false),
onOpenChange = noop,
onOpenChangeComplete = noop,
children,
}: AlertDialogRootProps = $props();
DialogRootState.create({
variant: boxWith(() => "alert-dialog"),
open: boxWith(
() => open,
(v) => {
open = v;
onOpenChange(v);
}
),
onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
});
</script>
{@render children?.()}
@@ -0,0 +1,3 @@
declare const AlertDialog: import("svelte").Component<import("../types.js").AlertDialogRootPropsWithoutHTML, {}, "open">;
type AlertDialog = ReturnType<typeof AlertDialog>;
export default AlertDialog;