Initiated Dialog Component

src/AppMenu.vue

@@ -76,7 +76,7 @@
             </a>
             <div :class="{'submenuhide': activeMenuIndex !== 4, 'submenushow': activeMenuIndex === 4}">
                 <div>
-                    <router-link to="/">&#9679; Link</router-link>
+                    <router-link to="/dialog">&#9679; Dialog</router-link>
                 </div>
             </div>
 

src/assets/styles/primevue.css

@@ -5,6 +5,7 @@
 @import '../../components/card/Card.css';
 @import '../../components/checkbox/Checkbox.css';
 @import '../../components/chips/Chips.css';
+@import '../../components/dialog/Dialog.css';
 @import '../../components/dropdown/Dropdown.css';
 @import '../../components/fieldset/Fieldset.css';
 @import '../../components/inputtext/InputText.css';

src/components/common/Common.css

@@ -86,7 +86,7 @@ button {
 
 .p-link {
 	text-align: left;
-	background: transparent;
+	background-color: transparent;
 	margin: 0;
 	padding: 0;
 	border: none;

src/components/dialog/Dialog.css

@@ -0,0 +1,134 @@
+.p-dialog {
+    position: fixed;
+    padding: 0;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+}
+.p-dialog-visible {
+    display: block;
+}
+.p-dialog .p-dialog-titlebar {
+	padding: .5em .75em;
+    position: relative;
+    border: 0;
+}
+.p-dialog .p-dialog-content {
+    position: relative;
+    border: 0;
+    padding: .5em .75em;
+    background: none;
+    zoom: 1;
+}
+.p-dialog-resizable .p-dialog-content {
+    overflow: auto;
+}
+.p-dialog .p-resizable-handle {
+    width: 14px;
+    height: 14px;
+    right: 3px;
+    bottom: 3px;
+    position: absolute;
+    font-size: .1px;
+    display: block;
+    cursor: se-resize;
+}
+.p-draggable .p-dialog-titlebar {
+    cursor: move;
+}
+.p-dialog .p-dialog-titlebar-icons {
+    float: right;
+}
+.p-dialog .p-dialog-titlebar-icons:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+.p-dialog .p-dialog-titlebar-icon {
+    text-decoration: none;
+    padding: .125em;
+    cursor: pointer;
+    display: inline-block;
+    vertical-align: middle;
+    border: 1px solid transparent;
+}
+
+.p-dialog .p-dialog-titlebar-icon span {
+    display: block;
+    margin: 0;
+}
+.p-dialog-footer {
+    padding: 1em;
+    text-align: right;
+}
+
+.p-dialog-mask {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+}
+
+/* ConfirmDialog */
+.p-confirmdialog {
+    width: 30em;
+}
+
+.p-confirmdialog.p-dialog .p-dialog-content {
+    padding: 1em 2em;
+}
+.p-confirmdialog .p-dialog-content .p-confirmdialog-icon {
+    font-size: 1.5em;
+    vertical-align: middle;
+    margin-right: .5em;
+}
+.p-confirmdialog .p-dialog-content .p-confirmdialog-message {
+    vertical-align: middle;
+}
+
+/* Fluid */
+.p-fluid .p-dialog-footer .p-button {
+    width: auto;
+}
+
+/* RTL */
+.p-rtl .p-dialog .p-dialog-titlebar-close  {
+    float: left;
+}
+
+.p-rtl .p-dialog .p-dialog-footer {
+    text-align: left;
+}
+
+@media screen and (max-width: 40em) {
+    .p-confirmdialog {
+        width: 90%;
+    }
+}
+
+/* Animation */
+.p-dialog-enter,
+.p-dialog-leave-to {
+    opacity: 0;
+    transform: translate3d(-50%, -25%, 0) scale(0.9);
+}
+
+.p-dialog-enter-active,
+.p-dialog-leave-active {
+
+    transition: all 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+/* Maximize */
+.p-dialog-maximized {
+    -webkit-transition: none;
+    transition: none;
+    transform: none;
+    width: 100vw !important;
+    top: 0;
+    left: 0;
+}
+
+.p-dialog-maximized .p-dialog-content {
+    -webkit-transition: height .3s;
+    transition: height .3s;
+}

src/components/dialog/Dialog.vue

@@ -0,0 +1,110 @@
+<template>
+    <transition name="p-dialog" @enter="onEnter" @leave="onLeave">
+        <div ref="container" :class="containerClass" v-if="visible">
+            <div class="p-dialog-titlebar" v-if="showHeader">
+                <slot name="header">
+                    <span class="p-panel-title" v-if="header">{{header}}</span>
+                </slot>
+                <div class="p-dialog-titlebar-icons">
+                    <button class="p-dialog-titlebar-icon p-dialog-titlebar-close p-link" @click="close" v-if="closable">
+                        <span class="p-dialog-titlebar-close-icon pi pi-times"></span>
+                    </button>
+                </div>
+            </div>
+            <div class="p-dialog-content" :style="contentStyle">
+                <slot></slot>
+            </div>
+            <div class="p-dialog-footer" v-if="footer || $slots.footer">
+                <slot name="footer">{{footer}}</slot>
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script>
+import DomHandler from '../utils/DomHandler';
+
+export default {
+    props: {
+        visible: Boolean,
+        header: null,
+        footer: null,
+        modal: Boolean,
+        rtl: Boolean,
+        contentStyle: null,
+        closable: {
+            type: Boolean,
+            default: true
+        },
+        showHeader: {
+            type: Boolean,
+            default: true
+        },
+        baseZIndex: {
+            type: Number,
+            default: 0
+        },
+        autoZIndex: {
+            type: Boolean,
+            default: true
+        },
+    },
+    mask: null,
+    methods: {
+        close(event) {
+            this.$emit('update:visible', false);
+        },
+        onEnter() {
+            this.$emit('show');
+
+            if (this.autoZIndex) {
+                this.$refs.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
+            }
+            this.focus();
+            if (this.modal) {
+                this.enableModality();
+            }
+        },
+        onLeave() {
+            this.$emit('hide');
+
+            if (this.modal) {
+                this.disableModality();
+            }
+        },
+        focus() {
+            let focusable = DomHandler.findSingle(this.$refs.container, 'input,button');
+            if (focusable) {
+                focusable.focus();
+            }
+        },
+        enableModality() {
+            if (!this.mask) {
+                this.mask = document.createElement('div');
+                this.mask.style.zIndex = String(parseInt(this.$refs.container.style.zIndex, 10) - 1);
+                DomHandler.addMultipleClasses(this.mask, 'p-component-overlay p-dialog-mask p-fadein');
+                document.body.appendChild(this.mask);
+                DomHandler.addClass(document.body, 'p-overflow-hidden');
+            }
+        },
+        disableModality() {
+            if (this.mask) {
+                document.body.removeChild(this.mask);
+                DomHandler.removeClass(document.body, 'p-overflow-hidden');
+                this.mask = null;
+            }
+        }
+    },
+    computed: {
+        containerClass() {
+            return ['p-dialog p-component', {
+                'p-dialog-rtl': this.rtl
+            }];
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>

src/main.js

@@ -9,6 +9,7 @@ import Card from './components/card/Card';
 import Chart from './components/chart/Chart';
 import Checkbox from './components/checkbox/Checkbox';
 import Chips from './components/chips/Chips';
+import Dialog from './components/dialog/Dialog';
 import Dropdown from './components/dropdown/Dropdown';
 import Editor from './components/editor/Editor';
 import FullCalendar from './components/fullcalendar/FullCalendar';
@@ -46,6 +47,7 @@ Vue.component('Card', Card);
 Vue.component('Chart', Chart);
 Vue.component('Checkbox', Checkbox);
 Vue.component('Chips', Chips);
+Vue.component('Dialog', Dialog);
 Vue.component('Dropdown', Dropdown);
 Vue.component('Editor', Editor);
 Vue.component('FullCalendar', FullCalendar);

src/router.js

@@ -81,6 +81,11 @@ export default new Router({
         name: 'chips',
         component: () => import('./views/chips/ChipsDemo.vue')
     },
+    {
+        path: '/dialog',
+        name: 'dialog',
+        component: () => import('./views/dialog/DialogDemo.vue')
+    },
     {
         path: '/dropdown',
         name: 'dropdown',

src/views/dialog/DialogDemo.vue

@@ -0,0 +1,42 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Dialog</h1>
+                <p>Dialog is a container to display content in an overlay window.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <Button label="Show" icon="pi pi-external-link" @click="open" />
+            <Dialog header="Godfather I" :visible.sync="display" :style="{width: '50vw'}" :modal="true">
+                The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. 
+                    His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. 
+                    Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, 
+                    kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
+                <template slot="footer">
+                    <Button label="Yes" icon="pi pi-check" @click="close" />
+                    <Button label="No" icon="pi pi-times" @click="close" class="p-button-secondary"/>
+                </template>
+            </Dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            display: false
+        }
+    },
+    methods: {
+        open() {
+            this.display = true;
+        },
+        close() {
+            this.display = false;
+        }
+    }
+}
+</script>