Dialog

<template>
    <section>
        <button class="button is-medium is-primary" @click="alert">
            Launch alert (default)
        </button>
        <button class="button is-medium is-primary" @click="alertCustom">
            Launch alert (custom)
        </button>
        <button class="button is-medium is-danger" @click="alertCustomError">
            Launch alert (custom)
        </button>
    </section>
</template>

<script>
    export default {
        methods: {
            alert() {
                this.$buefy.dialog.alert('Everything looks fine!')
            },
            alertCustom() {
                this.$buefy.dialog.alert({
                    title: 'Title Alert',
                    message: 'I have a title, a custom button and <b>HTML</b>!',
                    confirmText: 'Cool!'
                })
            },
            alertCustomError() {
                this.$buefy.dialog.alert({
                    title: 'Error',
                    message: 'Something\'s not good but I have a custom <b>icon</b> and <b>type</b>',
                    type: 'is-danger',
                    hasIcon: true,
                    icon: 'times-circle',
                    iconPack: 'fa',
                    ariaRole: 'alertdialog',
                    ariaModal: true
                })
            }
        }
    }
</script>

<template>
    <section>
        <button class="button is-medium is-info" @click="confirm">
            Launch confirm (default)
        </button>

        <button class="button is-medium is-info" @click="confirmCustom">
            Launch confirm (custom)
        </button>

        <button class="button is-medium is-danger" @click="confirmCustomDelete">
            Launch confirm (custom)
        </button>
    </section>
</template>

<script>
    export default {
        methods: {
            confirm() {
                this.$buefy.dialog.confirm({
                    message: 'Continue on this task?',
                    onConfirm: () => this.$buefy.toast.open('User confirmed')
                })
            },
            confirmCustom() {
                this.$buefy.dialog.confirm({
                    title: 'Privacy Politics',
                    message: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Fusce id fermentum quam. Proin sagittis,
                        nibh id hendrerit imperdiet, elit sapien laoreet elit,
                        ac scelerisque diam velit in nisl. Nunc maximus ex non
                        laoreet semper. Nunc scelerisque, libero sit amet pretium dignissim,
                        augue purus placerat justo,
                        sit amet porttitor dui metus in nisl.
                        Nulla non leo placerat, porta metus eu, laoreet risus.
                        Etiam lacinia, purus eu luctus maximus, elit ex viverra tellus,
                        sit amet sodales quam dui nec odio.
                        Nullam porta mollis est. Quisque aliquet malesuada fringilla.
                        Pellentesque volutpat lacus at ante posuere,
                        non pulvinar ante porta. Proin viverra eu massa nec porta.
                        Aliquam rhoncus velit quis sem hendrerit,
                        ut dictum nisl accumsan. Maecenas erat enim, scelerisque non ligula ac,
                        eleifend venenatis ligula.
                        Praesent molestie mauris sed elit posuere, non malesuada libero gravida.
                        In hac habitasse platea dictumst.
                        Pellentesque habitant morbi tristique senectus
                        et netus et malesuada fames ac turpis egestas.`,
                    cancelText: 'Disagree',
                    confirmText: 'Agree',
                    type: 'is-success',
                    onConfirm: () => this.$buefy.toast.open('User agreed')
                })
            },
            confirmCustomDelete() {
                this.$buefy.dialog.confirm({
                    title: 'Deleting account',
                    message: 'Are you sure you want to <b>delete</b> your account? This action cannot be undone.',
                    confirmText: 'Delete Account',
                    type: 'is-danger',
                    hasIcon: true,
                    onConfirm: () => this.$buefy.toast.open('Account deleted!')
                })
            }
        }
    }
</script>

<template>
    <section>
        <button class="button is-medium is-dark" @click="prompt">
            Launch prompt (default)
        </button>

        <button class="button is-medium is-dark" @click="promptNumber">
            Launch prompt (number)
        </button>
    </section>
</template>

<script>
    export default {
        methods: {
            prompt() {
                this.$buefy.dialog.prompt({
                    message: `What's your name?`,
                    inputAttrs: {
                        placeholder: 'e.g. Walter',
                        maxlength: 10
                    },
                    trapFocus: true,
                    onConfirm: (value) => this.$buefy.toast.open(`Your name is: ${value}`)
                })
            },
            promptNumber() {
                this.$buefy.dialog.prompt({
                    message: `What's your age?`,
                    inputAttrs: {
                        type: 'number',
                        placeholder: 'Type your age',
                        value: '18',
                        maxlength: 2,
                        min: 18
                    },
                    trapFocus: true,
                    onConfirm: (value) => this.$buefy.toast.open(`Your age is: ${value}`)
                })
            }
        }
    }
</script>