dialog

Source

<div class="mb-4">
    <drab-dialog
        click-outside-close
        animation-keyframe-from-transform="translateX(100%)"
        animation-keyframe-to-transform="translateX(0)"
    >
        <button data-trigger type="button" class="button button-primary">
            Right
        </button>
        <dialog
            data-content
            class="card my-0 mr-0 h-full max-h-dvh w-full max-w-[100vw] rounded-none border-none backdrop:backdrop-blur sm:max-w-96"
        >
            <div class="mb-4 flex items-center justify-between">
                <h2 class="my-0">Dialog</h2>
                <button
                    data-trigger
                    type="button"
                    class="button button-ghost"
                    title="Close"
                >
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="currentColor"
                        class="size-6"
                    >
                        <path
                            fill-rule="evenodd"
                            d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z"
                            clip-rule="evenodd"
                        />
                    </svg>
                </button>
            </div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                velit esse cillum dolore eu fugiat nulla pariatur.
            </p>
        </dialog>
    </drab-dialog>
</div>

<drab-dialog
    remove-body-scroll
    animation-keyframe-from-transform="scale(.95) translateY(3%)"
    animation-keyframe-from-opacity="0"
    animation-keyframe-to-transform="scale(1) translateY(0)"
    animation-keyframe-to-opacity="1"
>
    <button data-trigger type="button" class="button button-primary">
        Center
    </button>
    <dialog data-content class="card backdrop:backdrop-blur sm:max-w-96">
        <div class="mb-4 flex items-center justify-between">
            <h2 class="my-0">Dialog</h2>
            <button
                data-trigger
                type="button"
                class="button button-ghost"
                title="Close"
            >
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="size-6"
                >
                    <path
                        fill-rule="evenodd"
                        d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z"
                        clip-rule="evenodd"
                    />
                </svg>
            </button>
        </div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
            velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
    </dialog>
</drab-dialog>

Overview

Provides triggers and animations for the HTMLDialogElement.

click-outside-close

By default, the HTMLDialogElement doesn’t close if the user clicks outside of it. Add a click-outside-close attribute to close when the user clicks outside.

remove-body-scroll

Add the remove-body-scroll attribute to remove the scroll from document.body when the dialog is open.

Constructors

new Dialog()

new Dialog(): Dialog

Properties

#initialBodyMarginRight

private #initialBodyMarginRight: number

The initial margin-right value of the body element.

Source

src/package/dialog/index.ts:23

#listenerController

private #listenerController: AbortController

To clean up event listeners added to document when the element is removed.

Inherited from

Animate.#listenerController

Source

src/package/base/index.ts:17

Accessors

animationOptions

get animationOptions(): KeyframeAnimationOptions

Returns

KeyframeAnimationOptions

An object containing the values of each animation-option attribute

Source

src/package/animate/index.ts:46

dialog

get dialog(): HTMLDialogElement

The HTMLDialogElement within the element.

Returns

HTMLDialogElement

Source

src/package/dialog/index.ts:32

event

get event(): keyof HTMLElementEventMap

Event for the trigger to execute.

For example, set to "mouseover" to execute the event when the user hovers the mouse over the trigger, instead of when they click it.

Default

"click";

set event(value): void

Parameters

• value: keyof HTMLElementEventMap

Returns

keyof HTMLElementEventMap

Source

src/package/base/index.ts:30

keyframes

get keyframes(): Keyframe[]

Returns

Keyframe[]

Source

src/package/animate/index.ts:128

Methods

#toggleBodyScroll()

private #toggleBodyScroll(show): void

Remove scroll from the body when open with the remove-body-scroll attribute.

Parameters

• show: boolean

Returns

void

Source

src/package/dialog/index.ts:37

animateElement()

animateElement(animateOptions): Promise<void>

Parameters

• animateOptions= undefined

animates this.content() by default

• animateOptions.element?: HTMLElement

• animateOptions.options?: KeyframeAnimationOptions

Returns

Promise<void>

Inherited from

Animate.animateElement

Description

Animates a particular element using the web animations API.

Disables animation if the user prefers reduced motion.
Sets default options
Uses the keyframes provided from this.keyframes
Waits for the animation to complete
Sets the start and end styles based on the first and last keyframe

Source

src/package/animate/index.ts:76

close()

close(): Promise<void>

HTMLDialogElement.close() with animation.

Returns

Promise<void>

Source

src/package/dialog/index.ts:59

connectedCallback()

connectedCallback(): void

Called when custom element is added to the page.

Returns

void

Inherited from

Animate.connectedCallback

Source

src/package/base/index.ts:155

destroy()

destroy(): void

Passed into disconnectedCallback, since Base needs to run disconnectedCallback as well. It is overridden in each element that needs to run disconnectedCallback.

Returns

void

Inherited from

Animate.destroy

Source

src/package/base/index.ts:162

disconnectedCallback()

disconnectedCallback(): void

Called when custom element is removed from the page.

Returns

void

Inherited from

Animate.disconnectedCallback

Source

src/package/base/index.ts:167

mount()

mount(): void

Passed into queueMicrotask in connectedCallback. It is overridden in each component that needs to run connectedCallback.

The reason for this is to make these elements work better with frameworks like Svelte. For SSR this isn’t necessary, but when client side rendering, the HTML within the custom element isn’t available before connectedCallback is called. By waiting until the next microtask, the HTML content is available—then for example, listeners can be attached to elements inside.