Confirm, alert, prompt

<div class="demo">
  <div class="demo-row">
    <button class="demo-btn" id="confirm">confirm()</button>
    <button class="demo-btn" id="alert">alert()</button>
    <button class="demo-btn" id="prompt">prompt()</button>
  </div>
  <p class="demo-out" id="out">The answer shows up here</p>
  <p class="demo-hint">Try Escape, Tab, and clicking outside.</p>
</div>

import { confirm, alert, prompt } from 'https://www.devix.pk/cdn/oss/confirm-dialog@1.0.0/index.js';

const out = document.getElementById('out');
const show = (value) => (out.textContent = `resolved with ${JSON.stringify(value)}`);

document.getElementById('confirm').addEventListener('click', async () => {
  show(await confirm('Publish this article?', { description: 'It appears on the site immediately.', confirmText: 'Publish', tone: 'info' }));
});

document.getElementById('alert').addEventListener('click', async () => {
  await alert('Your export is ready', { description: 'We emailed the link to you.', tone: 'success' });
  show('dismissed');
});

document.getElementById('prompt').addEventListener('click', async () => {
  show(await prompt('Rename the file', { defaultValue: 'q4-report', validate: (value) => (String(value).includes(' ') ? 'No spaces, please' : undefined) }));
});

@import url('https://www.devix.pk/cdn/oss/confirm-dialog@1.0.0/confirm-dialog.min.css');