<template>
<div id="app" data-app>
    <v-btn @click="alert1">simple alert</v-btn>
    <v-btn @click="alert2">custom buttons</v-btn>
    <v-btn @click="alert3">custom buttons 02</v-btn>
    <v-btn @click="alert4">with callback</v-btn>
    <v-btn @click="input1">simple input</v-btn>
    <v-btn @click="input2">input with buttons</v-btn>
    <v-btn @click="snackbar1">simple snackbar</v-btn>    
    <v-btn @click="snackbar2">snackbar options</v-btn>
    <v-btn @click="confirm">confirm</v-btn>
    <router-view/>
</div>
</template>
 
<script>
import message from 'fln-vuetify-message'
 
// for close in back event suport, in main.js use(https://www.npmjs.com/package/fln-vue-router-monitor):
// import monitor from 'fln-vue-router-monitor'
// monitor.use(router) // router is instance of vue-router
 
export default {
    methods: {
        alert1(){
            message.alert('simple alert')
        },
        alert2(){
            message.alert({
                text: 'Do you want to continue?',
                btOk: 'Yes',
                btCancel: {text:'No', color:'red'}
            })
        },
        alert3(){
            message.alert({
                title: 'Alert',
                text: 'this information is important',
                btOk: {text: 'Ok', color:'blue'}
            })
        },
        alert4(){
            message.alert({
                text: 'continue with deletion?',
                btOk: 'Yes',
                btCancel: 'Cancelar',
                callback(bt){
                    message.alert(bt=='ok' ? 'deletion success' : 'action canceled')
                }
            })
        },
        input1(){
            message.input('write something').then((event) => {
                console.log(event)
            })
        },
        input2(){
            message.input({
                btOk:'Confirm',
                btCancel: 'Cancel',
                text: 'write something'
            }).then((event) => {
                console.log(event)
            })
        },
        confirm(){
            message.confirm('confirm action').then((bt)=>{
                console.log(bt)
            })
        },
        snackbar1(){
            message.snackbar('simple snackbar')
        },
        snackbar2(){
            message.snackbar({
                text: 'snackbar text content 3000ms timeout',
                btClose: '',
                timeout: 3000,
                color: 'error'
            })
        }
    }
}
</script>