INIT
This commit is contained in:
Generated
Vendored
+34
@@ -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}
|
||||
Generated
Vendored
+3
@@ -0,0 +1,3 @@
|
||||
declare const AlertDialogAction: import("svelte").Component<import("../types.js").AlertDialogTriggerProps, {}, "ref">;
|
||||
type AlertDialogAction = ReturnType<typeof AlertDialogAction>;
|
||||
export default AlertDialogAction;
|
||||
Generated
Vendored
+36
@@ -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}
|
||||
Generated
Vendored
+3
@@ -0,0 +1,3 @@
|
||||
declare const AlertDialogCancel: import("svelte").Component<import("../types.js").AlertDialogTriggerProps, {}, "ref">;
|
||||
type AlertDialogCancel = ReturnType<typeof AlertDialogCancel>;
|
||||
export default AlertDialogCancel;
|
||||
Generated
Vendored
+103
@@ -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}
|
||||
Generated
Vendored
+3
@@ -0,0 +1,3 @@
|
||||
declare const AlertDialogContent: import("svelte").Component<import("../../dialog/types.js").DialogContentProps, {}, "ref">;
|
||||
type AlertDialogContent = ReturnType<typeof AlertDialogContent>;
|
||||
export default AlertDialogContent;
|
||||
+27
@@ -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?.()}
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
declare const AlertDialog: import("svelte").Component<import("../types.js").AlertDialogRootPropsWithoutHTML, {}, "open">;
|
||||
type AlertDialog = ReturnType<typeof AlertDialog>;
|
||||
export default AlertDialog;
|
||||
+10
@@ -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
@@ -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
@@ -0,0 +1 @@
|
||||
export * as AlertDialog from "./exports.js";
|
||||
+1
@@ -0,0 +1 @@
|
||||
export * as AlertDialog from "./exports.js";
|
||||
+4
@@ -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
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Reference in New Issue
Block a user