ropbla9/vue-absolute-components

Util components for Vue 2. Modals, dialogs etc

Simple usage

import halfModal from "vue-aboslute-compoents/modal-half.vue";
import vacAlert from "vue-aboslute-compoents/dialog-alert.vue";

new Vue({
    template: `
        <div>
            <modal-half v-model="boolean">
                put anything you want on default slot,
                there are no predefined styles
            </modal-half>
            <vac-alert title="title text"
                       message="message text..."
                       button-ok="ok button label",
                       callback="v-bind here a function"></vac-alert>
        </div>
    `,
    components: { halfModal, vacAlert }
})

remm v-model is an alias for v-bind:value + v-on:input, that means this modal will emit input when you close it by the black layer, syncronyzing with your boolean, in other hand you may define a button to close it directly from the current component

Use with API (dialog components only)

import vac from "vue-absolute-components";

Vue.use(vac) // Insert core styles and dialogs API

new Vue({
    mounted() { // now you can acess dialogs API

        this.alert({
            title: "titulo",
            message: "mensagem...",
            buttonOk: "Ok",
            callback: function() {
                console.log();
            }
        })

        this.confirm({
            title: "titulo",
            message: "mensagem...",
            buttonOk: "Ok",
            buttonCancel: "Cancelar",
            callback: function() {
                console.log();
            }
        })

        this.prompt({
            title: "titulo",
            message: "mensagem...",
            buttonOk: "Ok",
            buttonCancel: "cancelar",
            placeHolder: "anything...",
            callback: function(text) {
                console.log(text);
            }
        })

        this.choose({
            title: "titulo",
            message: "mensagem...",
            buttons: ["button0", "button1"],
            buttonCancel: "cancelar",
            callback: function(btnIndex) {
                console.log(btnIndex);
            }
        })
    }
})