@duskmoon-dev/el-dialog

A modal dialog component built with Web Components.

Installation

bun add @duskmoon-dev/el-dialog

Usage

Auto-Register

import '@duskmoon-dev/el-dialog/register';

<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
`full`	Full-screen dialog

Attributes

Attribute	Type	Default	Description
`open`	`boolean`	`false`	Whether the dialog is open
`size`	`string`	`'md'`	Size: `sm`, `md`, `lg`, `full`
`dismissible`	`boolean`	`true`	Allow closing via backdrop/escape
`no-backdrop`	`boolean`	`false`	Hide the backdrop

Slots

Slot	Description
(default)	Dialog body content
`header`	Dialog header/title
`footer`	Dialog footer with actions

CSS Parts

Part	Description
`dialog`	The dialog element
`backdrop`	The backdrop overlay
`content`	The content wrapper
`header`	The header section
`body`	The body section
`footer`	The footer section
`close`	The close button

Events

Event	Detail	Description
`open`	-	Fired when dialog opens
`close`	-	Fired when dialog closes

Examples

Basic Dialog

<el-dm-button onclick="document.querySelector('#dialog').open = true">
  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').open = false">
      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="full">Full-screen dialog</el-dm-dialog>

Non-Dismissible

<el-dm-dialog dismissible="false">
  <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');

// Open
dialog.open = true;

// Close
dialog.open = false;

// Listen for events
dialog.addEventListener('close', () => {
  console.log('Dialog closed');
});

License

MIT