@duskmoon-dev/el-dialog
A modal dialog custom element built on the native HTML <dialog> element, styled with @duskmoon-dev/core. HTML Invoker Commands are forwarded to the inner native dialog.
Installation
bun add @duskmoon-dev/el-dialog
Usage
Auto-Register
import '@duskmoon-dev/el-dialog/register';
<button command="show-modal" commandfor="myDialog">Open Dialog</button>
<el-dm-dialog id="myDialog">
<span slot="header">Dialog Title</span>
<p>Dialog content goes here.</p>
<div slot="footer">
<el-dm-button variant="ghost">Cancel</el-dm-button>
<el-dm-button variant="primary">Confirm</el-dm-button>
</div>
</el-dm-dialog>
Manual Registration
import { ElDmDialog, register } from '@duskmoon-dev/el-dialog';
// Register with default tag name
register();
// Or register with custom tag name
customElements.define('my-dialog', ElDmDialog);
Sizes
| Size | Description |
|---|
sm | Small dialog |
md | Medium dialog (default) |
lg | Large dialog |
xl | Extra large dialog |
full | Full-screen dialog |
Attributes
| Attribute | Type | Default | Description |
|---|
open | boolean | false | Whether the dialog is open |
size | string | 'md' | Size: sm, md, lg, xl, full |
dismissible | boolean | true | Allow closing via backdrop/Escape |
no-dismiss | boolean | false | Prevent closing via backdrop or Escape |
no-backdrop | boolean | false | Open as non-modal (show() instead of showModal()) |
Methods
| Method | Description |
|---|
show() | Opens the dialog as a modal |
showModal() | Alias for show() |
close() | Closes the dialog |
toggle() | Toggles the dialog state |
Slots
| Slot | Description |
|---|
| (default) | Dialog body content |
header | Dialog header/title |
footer | Dialog footer with actions |
CSS Parts
| Part | Description |
|---|
dialog | The native <dialog> element |
box | Inner dialog-box container |
header | The header section |
title | The title wrapper |
body | The body section |
footer | The footer section |
close | The close button |
The backdrop is the native ::backdrop pseudo-element. Tune it with --color-scrim.
Events
| Event | Detail | Description |
|---|
open | - | Fired when dialog opens |
close | - | Fired when dialog closes |
Examples
Basic Dialog
<el-dm-button onclick="document.querySelector('#dialog').show()">
Open Dialog
</el-dm-button>
<el-dm-dialog id="dialog">
<span slot="header">Confirmation</span>
<p>Are you sure you want to proceed?</p>
<div slot="footer">
<el-dm-button variant="ghost" onclick="this.closest('el-dm-dialog').close()">
Cancel
</el-dm-button>
<el-dm-button variant="primary">
Confirm
</el-dm-button>
</div>
</el-dm-dialog>
Sizes
<el-dm-dialog size="sm">Small dialog</el-dm-dialog>
<el-dm-dialog size="md">Medium dialog</el-dm-dialog>
<el-dm-dialog size="lg">Large dialog</el-dm-dialog>
<el-dm-dialog size="xl">Extra large dialog</el-dm-dialog>
<el-dm-dialog size="full">Full-screen dialog</el-dm-dialog>
Non-Dismissible
<el-dm-dialog no-dismiss>
<span slot="header">Required Action</span>
<p>You must complete this action.</p>
<div slot="footer">
<el-dm-button variant="primary">Continue</el-dm-button>
</div>
</el-dm-dialog>
Programmatic Control
const dialog = document.querySelector('el-dm-dialog');
dialog.show();
dialog.close();
dialog.addEventListener('close', () => {
console.log('Dialog closed');
});
License
MIT