Promise-based programmatic dialogs. No HTML boilerplate — created on-demand via JavaScript.
Basic Usage
All dialog functions return Promises, so you can use async/await for clean, synchronous-looking code:
javascript
// Confirm dialog
const confirmed = await PureAdmin.confirm({
title: 'Delete Item?',
message: 'This action cannot be undone.',
variant: 'danger'
});
if (confirmed) {
// User clicked OK
}
// Alert dialog
await PureAdmin.alert({
title: 'Success!',
message: 'Your changes have been saved.',
variant: 'success'
});
// Prompt dialog
const name = await PureAdmin.prompt({
title: 'Enter Name',
message: 'Please enter your name:',
defaultValue: 'John Doe'
});
if (name !== null) {
console.log('User entered:', name);
}
Confirm Dialogs
Two-button dialogs that return true (confirmed) or false (cancelled).
Position Options
Dialogs can be positioned in the center (default) or at the top of the viewport.
javascript
// Center position (default)
await PureAdmin.alert({
title: 'Centered',
message: 'This dialog is centered.',
position: 'center' // default
});
// Top position
await PureAdmin.prompt({
title: 'Top Position',
message: 'This dialog appears near the top.',
position: 'top'
});
Alert Dialogs
Single-button dialogs for notifications. Just wait for the user to acknowledge.
Prompt Dialogs
Text input dialogs that return the entered value (or null if cancelled).
Sequential Dialogs
Chain multiple dialogs together using async/await:
javascript
async function sequentialDialogs() {
const name = await PureAdmin.prompt({
title: 'Step 1 of 3',
message: 'Enter your name:'
});
if (name === null) return;
const email = await PureAdmin.prompt({
title: 'Step 2 of 3',
message: 'Enter your email:'
});
if (email === null) return;
const confirmed = await PureAdmin.confirm({
title: 'Step 3 of 3',
message: `Confirm: ${name} <${email}>`,
variant: 'success'
});
if (confirmed) {
await PureAdmin.alert({
title: 'Complete!',
message: 'Registration successful.',
variant: 'success'
});
}
}
LiveView Integration
Use onclick with liveSocket to push results back to the server:
javascript
// Push dialog result to LiveView
async function confirmAndPush(action) {
const confirmed = await PureAdmin.confirm({
title: 'Delete Item?',
message: 'This action cannot be undone.',
variant: 'danger'
});
if (confirmed) {
// Push event to LiveView server
const el = document.querySelector('[data-phx-main]');
const hook = window.liveSocket.getViewByEl(el);
hook.pushEvent('dialog_result', { action, result: 'confirmed' });
}
}
API Reference
PureAdmin.confirm(options)
Returns Promise<boolean>
| Option | Type | Default | Description |
|---|---|---|---|
title
| string | 'Confirm' | Dialog title |
message
| string | 'Are you sure?' | Dialog message |
confirmText
| string | 'OK' | Confirm button text |
cancelText
| string | 'Cancel' | Cancel button text |
variant
| string | 'primary' | Header theme: primary, success, warning, danger |
confirmVariant
| string | (same as variant) | Confirm button style |
size
| string | 'sm' | Modal size: sm, md, lg, xl |
position
| string | 'center' | Vertical position: center, top |
closeOnBackdrop
| boolean | true | Close when clicking outside |
PureAdmin.alert(options)
Returns Promise<void>
| Option | Type | Default | Description |
|---|---|---|---|
title
| string | 'Alert' | Dialog title |
message
| string | '' | Dialog message |
okText
| string | 'OK' | Button text |
variant
| string | 'primary' | Header and button theme |
size
| string | 'sm' | Modal size |
position
| string | 'center' | Vertical position: center, top |
PureAdmin.prompt(options)
Returns Promise<string | null>
| Option | Type | Default | Description |
|---|---|---|---|
title
| string | 'Input' | Dialog title |
message
| string | 'Enter value:' | Dialog message |
defaultValue
| string | '' | Initial input value |
placeholder
| string | '' | Input placeholder |
confirmText
| string | 'OK' | Confirm button text |
cancelText
| string | 'Cancel' | Cancel button text |
validator
| function | null | Validation: (value) => true | string |
variant
| string | 'primary' | Header theme |
size
| string | 'sm' | Modal size |
position
| string | 'center' | Vertical position: center, top |