Feaure request: return promise from dialogs

[Christilut]

Description

As a heavy Buefy user, I would really like it when the confirm dialog would return a Promise.

My workaround now is simple but not very pretty:

    const confirmed = await new Promise((resolve, reject) => {
      this.$buefy.dialog.confirm({
        message: `Are you sure?`,
        onCancel: () => reject(false),
        onConfirm: () => resolve(true)
      })
    })

Perhaps for a non-API breaking method we could do it like this (AWS SDK added promises to their library in the same way):

    const confirmed = await this.$buefy.dialog.confirm({
        message: `Are you sure?`
      }).promise()

Why Buefy need this feature

This is quite common nowadays. SWAL uses this method and it's very nice to work with. I ditched SWAL when I found out Buefy now has similar programmatic dialog/modal functionality.

[jtommy]

@Christilut sure, it's a good idea

[travisfisher]

Just ran into this issue today. I agree that returning a Promise would be a nice addition.

[jtommy]

#2539

[Christilut]

@jtommy I think this issue is not related to #2539

This one is specifically about this.$buefy.dialog returning a Promise so that you can await it. You can achieve the same behavior with closeOnConfirm but that was already possible by wrapping it in a Promise as in the first post.

This issue is more for a convenience so that you can do simple stuff like

const isConfirmed = await this.$buefy.dialog.confirm({
        message: `Are you sure?`
})
// isConfirmed = true if OK pressed. False if canceled by button or Escape key

without all the extra boilerplate code in onConfirm

[jtommy]

@Christilut i'm working on a similar way for the next version 0.9.0 , for example:

const dialog = this.$buefy.dialog.confirm({
        message: `Are you sure?`,
        closeOnConfirm: false
});
dialog.result.then(({value, dialog}) => ...).catch(...)

https://github.com/buefy/buefy/blob/promise-programmatic/src/components/dialog/index.js#L16

what do you think ?

[Christilut]

I think the following will be possible with 0.9.0 then?

const isConfirmed = (await this.$buefy.dialog.confirm({
        message: `Are you sure?`,
        closeOnConfirm: false
}).result).value

Is closeOnConfirm: false needed for this? Doesn't it always return the promise then? I'd like it as simple and intuitive as possible. The above is okay but would be even better if the promise only returned a boolean but I understand that might not be ideal for other situations.

Personally I wouldn't mind extending the API with something like this (same as in the first post):

    const confirmed = await this.$buefy.dialog.confirm({
        message: `Are you sure?`
      }).promise()

Because it's just super simple and understandable for new users and isn't in the way for older users who are used to how it is now.

[jtommy]

You can write my previous code in this way:

const { confirmed, dialog } = await this.$buefy.dialog.confirm({
        message: 'Are you sure?',
        closeOnConfirm: false
}).result;

closeOnConfirm is only for disable autoclose :)

[Christilut]

Ah okay, looks good then! Put the last snippet (without closeOnConfirm) in an example, I think that will help users a lot :)

[jtommy]

@Christilut sure!

[jtommy]

@Christilut i don't want to add an other breaking so it will be available by defaultProgrammaticPromise in the constructor options (default false); setting it to true value you can use a syntax like:

const { result, dialog } = await this.$buefy.dialog.confirm({
        message: 'Are you sure?',
        closeOnConfirm: false
});

[Christilut]

Very cool, thanks!