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;
+10
View File
@@ -0,0 +1,10 @@
export { default as Root } from "./components/alert-dialog.svelte";
export { default as Title } from "../dialog/components/dialog-title.svelte";
export { default as Action } from "./components/alert-dialog-action.svelte";
export { default as Cancel } from "./components/alert-dialog-cancel.svelte";
export { default as Portal } from "../utilities/portal/portal.svelte";
export { default as Content } from "./components/alert-dialog-content.svelte";
export { default as Overlay } from "../dialog/components/dialog-overlay.svelte";
export { default as Trigger } from "../dialog/components/dialog-trigger.svelte";
export { default as Description } from "../dialog/components/dialog-description.svelte";
export type { AlertDialogRootProps as RootProps, AlertDialogTitleProps as TitleProps, AlertDialogActionProps as ActionProps, AlertDialogCancelProps as CancelProps, AlertDialogPortalProps as PortalProps, AlertDialogContentProps as ContentProps, AlertDialogOverlayProps as OverlayProps, AlertDialogTriggerProps as TriggerProps, AlertDialogDescriptionProps as DescriptionProps, } from "./types.js";
+9
View File
@@ -0,0 +1,9 @@
export { default as Root } from "./components/alert-dialog.svelte";
export { default as Title } from "../dialog/components/dialog-title.svelte";
export { default as Action } from "./components/alert-dialog-action.svelte";
export { default as Cancel } from "./components/alert-dialog-cancel.svelte";
export { default as Portal } from "../utilities/portal/portal.svelte";
export { default as Content } from "./components/alert-dialog-content.svelte";
export { default as Overlay } from "../dialog/components/dialog-overlay.svelte";
export { default as Trigger } from "../dialog/components/dialog-trigger.svelte";
export { default as Description } from "../dialog/components/dialog-description.svelte";
+1
View File
@@ -0,0 +1 @@
export * as AlertDialog from "./exports.js";
+1
View File
@@ -0,0 +1 @@
export * as AlertDialog from "./exports.js";
+4
View File
@@ -0,0 +1,4 @@
import type { DialogContentProps, DialogContentPropsWithoutHTML } from "../../types.js";
export type { DialogRootPropsWithoutHTML as AlertDialogRootPropsWithoutHTML, DialogRootProps as AlertDialogRootProps, DialogClosePropsWithoutHTML as AlertDialogActionPropsWithoutHTML, DialogCloseProps as AlertDialogActionProps, DialogClosePropsWithoutHTML as AlertDialogCancelPropsWithoutHTML, DialogCloseProps as AlertDialogCancelProps, DialogPortalPropsWithoutHTML as AlertDialogPortalPropsWithoutHTML, DialogPortalProps as AlertDialogPortalProps, DialogOverlayPropsWithoutHTML as AlertDialogOverlayPropsWithoutHTML, DialogOverlayProps as AlertDialogOverlayProps, DialogTitlePropsWithoutHTML as AlertDialogTitlePropsWithoutHTML, DialogTitleProps as AlertDialogTitleProps, DialogDescriptionPropsWithoutHTML as AlertDialogDescriptionPropsWithoutHTML, DialogDescriptionProps as AlertDialogDescriptionProps, DialogTriggerPropsWithoutHTML as AlertDialogTriggerPropsWithoutHTML, DialogTriggerProps as AlertDialogTriggerProps, } from "../dialog/types.js";
export type AlertDialogContentPropsWithoutHTML = Omit<DialogContentPropsWithoutHTML, "onInteractOutside">;
export type AlertDialogContentProps = DialogContentProps;
+1
View File
@@ -0,0 +1 @@
export {};