Simple Confirm Dialog

[mubaidr]

First of all, thanks for this awesome library! Easy to use, excellent documentation!

Request: Can we get a simplest confirm dialog API?

How:

const ok = await push.confirm({
             message: 'delete record?'
           })

Reason: I think this can be achieved by the existing (Promise-based notifications) API but right now we have to add boiler plate every where we need this confirm dialog. Having a single uniform replacement of browser confirm dialog with this awesome interface and animation is a big plus.

[smastrom]

Hi @mubaidr, thank you for your kind words, I'm glad you're enjoying it.

Regarding the request, I'm afraid that:

Having a single uniform replacement of browser confirm dialog with this awesome interface and animation is a big plus.

It is not applicabe to Notivue or any notification library. A dialog is a dialog, a notification is a notification. Like a banana is a banana and an apple is an apple. When a dialog is displayed, the user should only to be able to interact within it. When creating a notification instead, the user should not. They also have completely different semantics and ARIA implementation.

Adapting Notivue to do something like that is not feasible since it's not in its nature to be both a notification and dialog library. I mean, it shouldn't for any other package as well.

You can check a proper dialog implementation here. You will notice that when clicking on the "Add delivery address" button, you cannot get outside of the modal unless confirming or canceling. Same for the browser's native one.

I understand that creating some utilies to display dialogs requires a lot of boilerplate, I also have to do that.

What I can suggest, is to create your own dialog using the Headless UI Dialog Component, which in my opinion, is the best one on earth, it's free and it has a first-party package for Vue. This is the one I use in my professional work.

A very basic implementation to have something re-utilisable across your app would be to have a store like this in a Vue/Nuxt plugin:

const initialState = {
   isOpen: false,
   onConfirm: () => {},
   onClose: () => {},
   title: 'Confirm',
   subtitle: 'Do you want to confirm?'
}

const dialogStore = reactive(initialState)

function setDialog(newOptions) {
  Object.assign(dialogStore, newOptions)
}

function resetDialog() {
  Object.assign(dialogStore, initialState)
}

app.provide('dialog', { dialogStore, setDialog, resetDialog })

Then use the utilities in both your dialog component and in any component where you trigger it.

[mubaidr]

I understand you point. Thanks for the clarification. But I am not asking for dailog element, which you are right that does not belong to this library.

I am asking for simple extension to promise based notifications? No need to add content, just the message and simple OK, yes, no button, cancel button. Which should be already possible because we have promise based notifications (as in demo with buttons).

[smastrom]

I'm sorry @mubaidr, but there won't be any API changes nor additions towards this direction.

Notivue already supports Custom Components and custom props which is all you need in order to create you own API on top of push that does whatever you want to.

[mubaidr]

Cool, thanks for your clarification!