vue-display-dialog v1.0.7

Vue Display Dialog

vue display dialog is component for vue.

Mount component to Main App -

<template>
<div id="app">
    <router-view/>
    <vueDisplayDialog/>
</div>
</template>

<script>
import vueDisplayDialog from "vue-display-dialog";
export default {
    name: "Core",
    components: { vueDisplayDialog }
};
</script>

Open dialog with global key "Dialog"

Dialog.open("Title", "Content", ["Button 1", "Button 2"]);

Text Content

Dialog.open("Title", "Content", ["Cancel", "Button 2"])
    .then(e => {
        e.state.code // Cancel == 1
        e.state.code // Button 2 == 2
        e.state.text // Text of button
        
        e.preventDefault() // Prevent close dialog
    });

Component

Dialog.open("Title", import("component/path/index.vue"), ["Accept"])
.onLoadComponent(component => {
    component.getValueCustomMethod();
})

Component V2 (WITH ERRORs)

var dialog = Dialog.open("Title", import("component/path/index.vue"));
var component = dialog.getComponent();

Disable button

Dialog.open("Title", import("component/path/index.vue"), ["Accept"])
    .setActiveButton(1, false);

Custom theme all dialog

//Name of style
Dialog.setTheme("black"/"default");
or Custom
//Class of stylesheet and path of stylesheet
Dialog.setTheme("class-stylesheet", "@/styles/dialog_theme.scss");

Custom theme for dialog

Dialog.open("Title", "content", ["btn1"]).setTheme("black");
Dialog.open("Title", "content", ["btn1"]).setTheme("class-stylesheet", "@/styles/dialog_theme.scss");

#default
{
    > section
    {
        border: 2px solid var(--color-1);        

        > .title
        {            
            text-align: left;
            background-color: var(--color-1);
            color: var(--color-white);
            padding-left: 5px;
        }

        > .content 
        {
            margin: 10px 5px;
            text-align: center;
            padding: 2px;
        }

        > .actions 
        {
            justify-content: flex-end;
        }
    }
}