melt
Version:
The next generation of Melt UI. Built for Svelte 5.
77 lines (76 loc) • 2.41 kB
TypeScript
import type { MaybeGetter } from "../types";
import { type Attachment } from "svelte/attachments";
export type DialogProps = {
/**
* If the Dialog is open.
*
* When passing a getter, it will be used as source of truth,
* meaning that the value only changes when the getter returns a new value.
*
* Otherwise, if passing a static value, it'll serve as the default value.
*
* @default false
*/
open?: MaybeGetter<boolean | undefined>;
/**
* Called when the value is supposed to change.
*/
onOpenChange?: (value: boolean) => void;
/**
* If the dialog should close when clicking escape.
*
* @default true
*/
closeOnEscape?: MaybeGetter<boolean | undefined>;
/**
* If the dialog should close when clicking outside.
* Alternatively, accepts a function that receives the clicked element,
* and returns if the dialog should close.
*
* @default true
*/
closeOnOutsideClick?: MaybeGetter<boolean | undefined>;
/**
* If the dialog should lock the document scroll when open.
*
* @default true
*/
scrollLock?: MaybeGetter<boolean | undefined>;
};
export declare class Dialog {
#private;
closeOnEscape: boolean;
closeOnOutsideClick: boolean;
scrollLock: boolean;
constructor(props?: DialogProps);
refs: {
get: (key: "trigger" | "content" | "overlay") => HTMLElement | undefined;
attach: (key: "trigger" | "content" | "overlay") => Attachment<HTMLElement>;
key: any;
};
get open(): boolean;
set open(v: boolean);
get sharedProps(): {
"data-open": "" | undefined;
};
/** The trigger element. */
get trigger(): {
readonly "data-open": "" | undefined;
readonly "data-melt-dialog-trigger": "";
readonly onclick: () => void;
readonly type: "button";
};
/** The element for the dialog itself. */
get content(): {
readonly "data-open": "" | undefined;
readonly "data-melt-dialog-content": "";
readonly onclose: () => void;
};
/** Optional overlay element, to replace dialog::backdrop for animation support */
get overlay(): {
readonly "data-open": "" | undefined;
readonly "data-melt-dialog-overlay": "";
readonly popover: "manual";
readonly "aria-hidden": true;
};
}