Created
November 28, 2020 10:18
-
-
Save vollyimnetz/2d8176ea87605413095a730a367e683d to your computer and use it in GitHub Desktop.
vuetify - global callable alert and confirm dialogs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
HOW TO USE | |
add MessageAlert once anywhere inside your vuetify app. | |
On a place where it always get loaded, i.e. before the closing "v-app" | |
<MessageAlert entrypoint="my_entrypoint"></MessageAlert> | |
Now you can use it anywhere in your code: | |
### promise based | |
document.my_entrypoint.openAlert({ message:"Thats the text" }).then(() => { | |
console.log('Alert closed'); | |
}); | |
OR | |
### syncron | |
async test() { | |
await document.my_entrypoint.openAlert({ title: "Thats the title", message:"thats the text" }); | |
console.log('Alert closed'); | |
} | |
### Parameters | |
- title (optional) | |
- message | |
- btn_accept (optional) | |
--> | |
<template> | |
<v-dialog v-model="dialog" class="messageAlertWrap" persistent max-width="400"> | |
<v-card> | |
<v-card-title class="d-block text-center" v-if="title">{{title}}</v-card-title> | |
<v-card-text v-html="message" class="text-center"></v-card-text> | |
<v-card-actions> | |
<v-spacer></v-spacer> | |
<v-btn primary @click="accept">{{btn_accept}}</v-btn> | |
<v-spacer></v-spacer> | |
</v-card-actions> | |
</v-card> | |
</v-dialog> | |
</template> | |
<script> | |
export default { | |
props:{ | |
entrypoint: {//the EntryPoint defines where the functions should be available | |
required:true, | |
type:String | |
} | |
}, | |
data:() => ({ | |
dialog:false, | |
message:"", | |
title:"", | |
btn_accept: "", | |
}), | |
mounted() { | |
document.addEventListener(this.entrypoint+'_open_message_alert', this.handleOpenEvent, { once:false /* handle listener only once*/ }); | |
if(document[this.entrypoint]===undefined) document[this.entrypoint] = {}; | |
document[this.entrypoint].openAlert = this.publicFunction; | |
}, | |
beforeDestroy() { | |
document.removeEventListener(this.entrypoint+'_open_message_alert', this.handleCloseEvent); | |
document[this.entrypoint].openAlert = undefined; | |
}, | |
methods:{ | |
reset() { | |
this.dialog = false; | |
this.message = ""; | |
this.title = ""; | |
this.btn_accept = "OK"; | |
}, | |
handleOpenEvent(event) { | |
console.log('alert',event); | |
this.dialog = true; | |
this.message = event.detail.message; | |
this.title = event.detail.title; | |
if(event.detail.btn_accept) this.btn_accept = event.detail.btn_accept; | |
}, | |
accept() { | |
var event = new CustomEvent(this.entrypoint+'_message_alert_close', { detail: { 'type': 'accept' }}); | |
document.dispatchEvent(event); | |
this.reset(); | |
}, | |
/** | |
* This function will be available via document.<your-entrypoint>.openAlert | |
*/ | |
publicFunction(data) { | |
//send open event to MessageAlert-component | |
document.dispatchEvent( | |
new CustomEvent(this.entrypoint+'_open_message_alert', { detail: data }) | |
); | |
return new Promise((resolve) => {//return promise so the caller can wait for it | |
//wait for close event from MessageAlert-component | |
document.addEventListener(this.entrypoint+'_message_alert_close', (eventData) => { | |
console.log('alert close',eventData); | |
resolve(); | |
}, { once: true /* handle listener only once*/ }); | |
}); | |
} | |
} | |
} | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
HOW TO USE | |
add MessageConfirm once anywhere inside your vuetify app. | |
On a place where it always get loaded, i.e. before the closing "v-app" | |
<MessageConfirm entrypoint="my_entrypoint"></MessageConfirm> | |
Now you can use it anywhere in your code: | |
### promise based | |
document.my_entrypoint.openConfirm({ message:"Thats the text" }).then(() => { | |
console.log('Alert closed'); | |
}); | |
OR | |
### syncron | |
async test() { | |
let result = await document.my_entrypoint.openConfirm({ title: "Thats the title", message:"thats the text" }); | |
console.log('Confirm closed',result); | |
} | |
### Parameters | |
title (optional) | |
message | |
btn_accept (optional) | |
btn_dismiss (optional) | |
--> | |
<template> | |
<v-dialog v-model="dialog" class="messageConfirmWrap" persistent max-width="400"> | |
<v-card> | |
<v-card-title class="d-block text-center pa-3 pb-0" v-if="title">{{title}}</v-card-title> | |
<v-card-text v-html="message" class="pa-3 text-center"></v-card-text> | |
<v-card-actions> | |
<v-spacer></v-spacer> | |
<v-btn primary text @click="dismiss">{{btn_dismiss}}</v-btn> | |
<v-btn primary @click="accept">{{btn_accept}}</v-btn> | |
<v-spacer></v-spacer> | |
</v-card-actions> | |
</v-card> | |
</v-dialog> | |
</template> | |
<script> | |
export default { | |
props:{ | |
entrypoint: { | |
required:true, | |
type:String | |
} | |
}, | |
data:() => ({ | |
dialog:false, | |
message:"", | |
title:"", | |
btn_accept: "", | |
btn_dismiss: "", | |
}), | |
mounted() { | |
this.reset(); | |
document.addEventListener(this.entrypoint+'_open_message_confirm', this.handleOpenEvent, { once:false /* handle listener only once*/ }); | |
if(document[this.entrypoint]===undefined) document[this.entrypoint] = {}; | |
document[this.entrypoint].openConfirm = this.publicFunction; | |
}, | |
beforeDestroy() { | |
document.removeEventListener(this.entrypoint+'_open_message_confirm', this.handleCloseEvent); | |
document[this.entrypoint].openConfirm = undefined; | |
}, | |
methods:{ | |
reset() { | |
this.dialog = false; | |
this.message = ""; | |
this.title = ""; | |
this.btn_accept = "OK"; | |
this.btn_dismiss = "Abbrechen"; | |
}, | |
handleOpenEvent(event) { | |
this.dialog = true; | |
this.message = event.detail.message; | |
this.title = event.detail.title; | |
if(event.detail.btn_accept) this.btn_accept = event.detail.btn_accept; | |
if(event.detail.btn_dismiss) this.btn_dismiss = event.detail.btn_dismiss; | |
}, | |
dismiss() { | |
/** | |
* This function triggers an event on the dom-document. | |
* How to listen to: | |
document.addEventListener(this.entrypoint+'_message_confirm_close', function(e) { | |
console.log(this.entrypoint+'_message_confirm_close', e.detail); // Prints "Example of an event" | |
}); | |
*/ | |
var event = new CustomEvent(this.entrypoint+'_message_confirm_close', { detail: { 'type': 'dismiss' }}); | |
document.dispatchEvent(event); | |
this.reset(); | |
}, | |
accept() { | |
var event = new CustomEvent(this.entrypoint+'_message_confirm_close',{ detail: { 'type': 'accept' }}); | |
document.dispatchEvent(event); | |
this.reset(); | |
}, | |
/** | |
* This function will be available via document.<your-entrypoint>.openConfirm | |
*/ | |
publicFunction(data) { | |
//send open event to MessageConfirm-component | |
document.dispatchEvent( | |
new CustomEvent(this.entrypoint+'_open_message_confirm', { detail: data }) | |
); | |
return new Promise((resolve) => {//return promise so the caller can wait for it | |
//wait for close event from MessageConfirm-component | |
document.addEventListener(this.entrypoint+'_message_confirm_close', (eventData) => { | |
console.log('confirm close',eventData); | |
if(eventData.detail.type === 'accept') { | |
resolve(true); | |
} else { | |
resolve(false); | |
} | |
}, { once: true /* handle listener only once*/ }); | |
}); | |
} | |
} | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This components are intended to be added only once in your app, to have a styleable alternative to window.alert and window.confirm.
If you need different styles for different dialogs, you may use the original vuetify dialogs the old fashion way or add additional parameters in the reset and openEvent functions.