[Feature Request] Vuetify alert(), confirm() and prompt()

[lukas-tr]

Problem to solve

The standard JavaScript popups look different for every browser and often don't fit Material Design. Also, adding a popup to the template of every component where you want to have a confirm dialog is annoying.

Proposed solution

-      <v-btn @click="deleteDialog = true">Delete</v-btn>
+      <v-btn @click="deleteItem">Delete</v-btn>
-        <v-dialog v-model="deleteDialog" max-width="500px">
-            <v-card>
-                <v-card-title>Delete item?</v-card-title>
-                <v-card-actions>
-                    <v-spacer></v-spacer>
-                    <v-btn color="primary" flat @click.native="deleteDialog = false">Cancel</v-btn>
-                    <v-btn color="primary" flat @click.native="deleteItem">Delete</v-btn>
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
...
// deleteItem function
+ if(await this.$vuetify.confirm("Delete item?")){
+     // original deleteItem code
+ }

Even if you put the delete dialog above inside it's own file, you still need a local variable that controls the dialog's visibility. With $vuetify.<popup name>, you can handle the whole logic within a single method.

- if(window.confirm("Do you want to continue")){
+ if(await this.$vuetify.confirm("Do you want to continue")){
     doSomething();
 }

- const input = prompt("What is your name")
+ const input = await this.$vuetify.prompt("What is your name")

Alert, confirm and prompt should be implemented by Vuetify, but users should have the ability to define their own popups by

• passing components to the Vuetify constructor
• using scoped slots inside VApp
• or like this this.$vuetify.customPopup(MyCustomPopup, "Do you want to continue")

Components get all data passed to $vuetify.<popup name> using the vuetify-popup prop or scoped slots and can return data using $emit("update:vuetifyPopup", <data to return>). Emitting update:vuetifyPopup also causes components to be unmounted.

[BehindTheMath]

This is similar to #2602.

[johnleider]

I have plans of moving my promise based dialog into the framework somehow in v2

[yariksav]

I've made https://www.npmjs.com/package/vuetify-dialog For example, by command this.$dialog.confirm(options) - it will dynamically create registered 'confirm' component and add to DOM, after user choosing - it will destroy self and remove from dom.

Also it provide users ability to define their own popups by replace implemented

this.$dialog.component('confirm', YourConfirmDialog)
this.$dialog.component('error', YourErrorDialog)

and you can add different dialogs

this.$dialog.component('myconfrim', MyConfirm)
// will execute as
this.$dialog.myconfrim({...})

[johnleider]

While this is still something I'd like to implement, it will not be part of the core framework. Transferring this request to the vuex modules.

[alamhubb]

Is this really a very important feature, or is there any other option when using vuetify?