dialog

<tosi-dialog> is a simple wrapper around the standard HTML <dialog> element designed to make creating dialogs as convenient as possible.

<button>Show Dialog</button>
<tosi-dialog>
  <h3 slot='header'>A Dialog</h3>
  <p>
    Here is some text
  </p>
  <button slot="footer">Custom Button</button>
</tosi-dialog>

import { on } from 'tosijs'
import { postNotification } from 'tosijs-ui'

on(
  preview.querySelector('button'),
  'click',
  async () => {
    const response = await preview.querySelector('tosi-dialog').showModal()
    postNotification({
      message: `user clicked ${response}`,
      duration: 2
    })
  }
)

const dialog = preview.querySelector('tosi-dialog')
test('dialog renders', () => {
  expect(dialog).toBeTruthy()
  expect(dialog.tagName.toLowerCase()).toBe('tosi-dialog')
})
test('dialog has header slot content', () => {
  const header = dialog.querySelector('[slot="header"]')
  expect(header).toBeTruthy()
  expect(header.textContent).toBe('A Dialog')
})

Static Functions

TosiDialog provides static async functions to replace the built-in dialogs provided by the browser.

• alert(message: string, title = 'Alert'): Promise<undefined>
• confirm(message: string, title = 'Confirm'): Promise<boolean>
• prompt(message: string, title = 'Prompt', currentValue = ''): Promise<string | null>

You can look at the code that implements them to see how to leverage TosiDialog to build more complex, bespoke dialogs that can be used just as conveniently.

import { elements } from 'tosijs'
import { TosiDialog, postNotification } from 'tosijs-ui'

const { button, div } = elements

preview.append(
  div(
    {
      style: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'flex-start',
        gap: 10
      }
    },
    button(
      {
        async onClick() {
          await TosiDialog.alert('This is an alert')
          postNotification({
            message: 'alert dismissed',
            duration: 2
          })
        }
      },
      'TosiDialog.alert',
    ),
    button(
      {
        async onClick() {
          const confirmed = await TosiDialog.confirm('Can you confirm?')
          postNotification({
            message: `user ${confirmed ? 'confirmed' : 'cancelled'}`,
            duration: 2
          })
        }
      },
      'TosiDialog.confirm',
    ),
    button(
      {
        async onClick() {
          const text = await TosiDialog.prompt('Enter some text please')
          postNotification({
            message: text !== null ? `user entered "${text}"`: 'user cancelled',
            duration: 2
          })
        }
      },
      'TosiDialog.prompt',
    ),
  ),
)

.preview {
  padding: 10px;
}