Advanced

Dialogs from JavaScript

PLF.Dialog.fire() confirms an action or reports a result with SweetAlert's options, on dialogs the script creates.

PLF.Dialog.fire() opens an Alert Dialog to confirm or a Result Dialog to report, from SweetAlert’s options. The script creates the two dialogs in the page’s first root the first time it runs, so you write no markup for them, and they follow your theme, tokens and CSS mode.

Example

The preview’s server answers after a second and refuses the second file’s first delete.

<div class="flex flex-wrap gap-2">
  <button class="btn btn-error" id="delete-file">Delete file</button>
  <button class="btn btn-outline" id="delete-file-error">Delete, failing once</button>
  <button class="btn btn-outline" id="show-result">Show a result</button>
</div>
<script>
  // A refused request keeps the confirmation open with its message, and Delete tries again.
  const remove = url => async () => {
    const result = await PLF.Dialog.fire({
      title: 'Delete this file?',
      text: 'It moves to the trash for 30 days.',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Delete',
      confirmButtonColor: 'error',
      retryOnError: true,
      preConfirm: () => fetch(url, { method: 'DELETE' }).then(response => {
        if (!response.ok) throw new Error('The server refused the request. Try again.');
      }),
    });
    if (result.isConfirmed) PLF.Dialog.fire({ title: 'File deleted', icon: 'success', timer: 3000 });
  };
  document.getElementById('delete-file').addEventListener('click', remove('/files/42'));
  document.getElementById('delete-file-error').addEventListener('click', remove('/files/43'));
  document.getElementById('show-result').addEventListener('click', () => {
    PLF.Dialog.fire('Changes saved', 'Your profile is up to date.', 'success');
  });
</script>

<div class="plf:flex plf:flex-wrap plf:gap-2">
  <button class="plf:btn plf:btn-error" id="delete-file">Delete file</button>
  <button class="plf:btn plf:btn-outline" id="delete-file-error">Delete, failing once</button>
  <button class="plf:btn plf:btn-outline" id="show-result">Show a result</button>
</div>
<script>
  // A refused request keeps the confirmation open with its message, and Delete tries again.
  const remove = url => async () => {
    const result = await PLF.Dialog.fire({
      title: 'Delete this file?',
      text: 'It moves to the trash for 30 days.',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Delete',
      confirmButtonColor: 'error',
      retryOnError: true,
      preConfirm: () => fetch(url, { method: 'DELETE' }).then(response => {
        if (!response.ok) throw new Error('The server refused the request. Try again.');
      }),
    });
    if (result.isConfirmed) PLF.Dialog.fire({ title: 'File deleted', icon: 'success', timer: 3000 });
  };
  document.getElementById('delete-file').addEventListener('click', remove('/files/42'));
  document.getElementById('delete-file-error').addEventListener('click', remove('/files/43'));
  document.getElementById('show-result').addEventListener('click', () => {
    PLF.Dialog.fire('Changes saved', 'Your profile is up to date.', 'success');
  });
</script>

'use client';

import { Button, useDialog } from '@pelatform/react';

export function Example() {
  const [fire, dialog] = useDialog();

  // A refused request keeps the confirmation open with its message, and Delete tries again.
  async function remove(url: string) {
    const result = await fire({
      title: 'Delete this file?',
      text: 'It moves to the trash for 30 days.',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Delete',
      confirmButtonColor: 'error',
      retryOnError: true,
      preConfirm: () => fetch(url, { method: 'DELETE' }).then(response => {
        if (!response.ok) throw new Error('The server refused the request. Try again.');
      }),
    });
    if (result.isConfirmed) fire({ title: 'File deleted', icon: 'success', timer: 3000 });
  }

  return (
    <>
      <div className="flex flex-wrap gap-2">
        <Button color="error" onClick={() => remove('/files/42')}>Delete file</Button>
        <Button variant="outline" onClick={() => remove('/files/43')}>Delete, failing once</Button>
        <Button variant="outline" onClick={() => fire('Changes saved', 'Your profile is up to date.', 'success')}>Show a result</Button>
      </div>
      {dialog}
    </>
  );
}

'use client';

import { Button, useDialog } from '@pelatform/react/prefixed';

export function Example() {
  const [fire, dialog] = useDialog();

  // A refused request keeps the confirmation open with its message, and Delete tries again.
  async function remove(url: string) {
    const result = await fire({
      title: 'Delete this file?',
      text: 'It moves to the trash for 30 days.',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Delete',
      confirmButtonColor: 'error',
      retryOnError: true,
      preConfirm: () => fetch(url, { method: 'DELETE' }).then(response => {
        if (!response.ok) throw new Error('The server refused the request. Try again.');
      }),
    });
    if (result.isConfirmed) fire({ title: 'File deleted', icon: 'success', timer: 3000 });
  }

  return (
    <>
      <div className="plf:flex plf:flex-wrap plf:gap-2">
        <Button color="error" onClick={() => remove('/files/42')}>Delete file</Button>
        <Button variant="outline" onClick={() => remove('/files/43')}>Delete, failing once</Button>
        <Button variant="outline" onClick={() => fire('Changes saved', 'Your profile is up to date.', 'success')}>Show a result</Button>
      </div>
      {dialog}
    </>
  );
}

Options

Option	Effect
`title`	The heading, which names the dialog; without it, the text names it. A call needs a title, a text or both
`text`	The text under it; empty text is left out
`icon`	`success`, `error`, `warning` or `info`: the icon and its color; none without it
`showCancelButton`	`true` asks to confirm, with Cancel and a confirm button; otherwise the result has one OK button
`confirmButtonText`, `cancelButtonText`	The button labels; `Confirm` or `OK`, and `Cancel`, by default
`confirmButtonColor`	The confirm button’s color: `primary` (default), `neutral`, `success`, `warning`, `error` or `info`
`preConfirm`	Runs on confirm while the dialog stays open and the busy button keeps focus; its value becomes `result.value`, `false` keeps the dialog open, and an error closes it for an error result
`retryOnError`	With `preConfirm`, an error keeps the confirmation open with its message, and the confirm button tries again
`errorTitle`	The error result’s title; `Something went wrong` by default
`timer`	Results only: closes after this many milliseconds, at least `1000`; hover and focus pause it
`root`	An element in the root that holds the dialogs; the page’s first root by default

PLF.Dialog.fire(title, text, icon) is the short form. A new call replaces an open dialog; while another Modal is open, a call ends at once as dismissed, and the console says why.

Result

PLF.Dialog.fire() returns a promise for the outcome:

Property	Value
`isConfirmed`	`true` after the confirm or OK button
`isDismissed`	`true` otherwise
`dismiss`	`cancel`, `esc`, `timer`, `close` (replaced, or another Modal was open) or `error` (`preConfirm` failed without `retryOnError`)
`value`	The value `preConfirm` returned, or `true`
`error`	The error `preConfirm` threw

Your labels

PLF.Dialog.mixin(options) returns a Dialog whose calls start from those options, so a page in another language sets its labels once; a call’s own options still win.

JavaScript

const Dialog = PLF.Dialog.mixin({ confirmButtonText: 'Aceptar', cancelButtonText: 'Cancelar', errorTitle: 'Algo salió mal' });
Dialog.fire({ title: '¿Eliminar este archivo?', showCancelButton: true, confirmButtonText: 'Eliminar' });

React

useDialog() from @pelatform/react brings PLF.Dialog.fire() to a client component: const [fire, dialog] = useDialog(), with {dialog} rendered once, where each call opens an Alert Dialog or a Result Dialog in the markup the script creates.

Returns	Value
`fire`	`fire(options)` or `fire(title, text, icon)`, with the options but `root`; it resolves to the result when the dialog closes
`dialog`	The dialog of the last call, which `{dialog}` renders

A new call replaces its open dialog; while another Modal is open, a call ends at once as dismissed. useDialog(defaults) takes the place of mixin(): each call starts from those options, and its own options win.

React

const [fire, dialog] = useDialog({ confirmButtonText: 'Aceptar', cancelButtonText: 'Cancelar', errorTitle: 'Algo salió mal' });

Files

The Full files hold everything a Dialog needs. With Modular files, load the Modal script with the Modal, Alert Dialog, Result Dialog and Button stylesheets (Component assets).

From SweetAlert

SweetAlert	`PLF.Dialog`
`Swal.fire({…})`, `Swal.fire(title, text, icon)`	The same calls and options
`Swal.mixin({…})`	`PLF.Dialog.mixin({…})`
`showLoaderOnConfirm`	Automatic with `preConfirm`
`Swal.showValidationMessage()` in `preConfirm`	Throw an error with `retryOnError: true`: its message shows in the confirmation
`confirmButtonColor: '#d33'`	A color name: `confirmButtonColor: 'error'`
`icon: 'question'`	Not available; use `info`
`allowOutsideClick`	Outside clicks never close these dialogs
`html`, `input`, `showDenyButton`, `toast`	Not available: write a Modal, or use `PLF.Toast.show()`

#Example

#Options

#Result

#Your labels

#React

#Files

#From SweetAlert

Example

Options

Result

Your labels

React

Files

From SweetAlert