Initated OverlayPanel

src/AppMenu.vue

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

src/assets/styles/primevue.css

@@ -12,6 +12,7 @@
 @import '../../components/inputswitch/InputSwitch.css';
 @import '../../components/listbox/Listbox.css';
 @import '../../components/multiselect/MultiSelect.css';
+@import '../../components/overlaypanel/OverlayPanel.css';
 @import '../../components/panel/Panel.css';
 @import '../../components/password/Password.css';
 @import '../../components/progressbar/ProgressBar.css';

src/components/dialog/Dialog.vue

@@ -47,11 +47,11 @@ export default {
         autoZIndex: {
             type: Boolean,
             default: true
-        },
+        }
     },
     mask: null,
     methods: {
-        close(event) {
+        close() {
             this.$emit('update:visible', false);
         },
         onEnter() {

src/components/overlaypanel/OverlayPanel.css

@@ -0,0 +1,52 @@
+.p-overlaypanel {
+    padding: 0;
+    margin: 0;
+    position: absolute;
+}
+
+.p-overlaypanel-content {
+    padding: 0.5em 1em;
+}
+
+.p-overlaypanel-close {
+    position: absolute;
+    top: -1em;
+    right: -1em;
+    width: 2em;
+    height: 2em;
+    line-height: 2em;
+    text-align: center;
+    -moz-border-radius: 100%;
+    -webkit-border-radius: 100%;
+    border-radius: 100%;
+}
+
+.p-overlaypanel-close-icon {
+    line-height: inherit;
+}
+
+/* Animation */
+.p-overlaypanel-enter,
+.p-overlaypanel-leave-to {
+    opacity: 0;
+    transform: translate3d(-50%, -25%, 0) scale(0.9);
+}
+
+.p-overlaypanel-enter-active,
+.p-overlaypanel-leave-active {
+    transition: all 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.p-overlaypanel-enter,
+.p-overlaypanel-leave-to {
+    opacity: 0;
+    -webkit-transform: translateY(5%);
+    -ms-transform: translateY(5%);
+    transform: translateY(5%);
+}
+
+.p-overlaypanel-enter-active,
+.p-overlaypanel-leave-active {
+    -webkit-transition: transform .3s, opacity .15s;
+    transition: transform .3s, opacity .15s;
+}

src/components/overlaypanel/OverlayPanel.vue

@@ -0,0 +1,85 @@
+<template>
+    <transition name="p-overlaypanel" @enter="onEnter" @leave="onLeave">
+        <div class="p-overlaypanel p-component" v-if="visible" ref="container">
+            <div class="p-overlaypanel-content">
+                <slot></slot>
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script>
+import DomHandler from '../utils/DomHandler';
+
+export default {
+    props: {
+        baseZIndex: {
+            type: Number,
+            default: 0
+        },
+        autoZIndex: {
+            type: Boolean,
+            default: true
+        }
+    },
+    data() {
+        return {
+            visible: false
+        }
+    },
+    target: null,
+    outsideClickListener: null,
+    beforeDestroy() {
+        this.unbindOutsideClickListener();
+        this.target = null;
+    },
+    methods: {
+        toggle(event) {
+            if (this.visible)
+                this.hide();
+            else
+                this.show(event);
+        },
+        show(event) {
+            this.visible = true;
+            this.target = event.target;
+        },
+        hide() {
+            this.visible = false;
+        },
+        onEnter() {
+            this.alignOverlay();
+            this.bindOutsideClickListener();
+
+            if (this.autoZIndex) {
+                this.$refs.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
+            }
+        },
+        onLeave() {
+            this.unbindOutsideClickListener();
+        },
+        alignOverlay() {
+            DomHandler.absolutePosition(this.$refs.container, this.target);
+        },
+        bindOutsideClickListener() {
+            if (!this.outsideClickListener) {
+                this.outsideClickListener = (event) => {
+                    if (this.visible && this.$refs.container && !this.$refs.container.contains(event.target) && !this.isTargetClicked(event)) {
+                        this.visible = false;
+                    }
+                };
+                document.addEventListener('click', this.outsideClickListener);
+            }
+        },
+        unbindOutsideClickListener() {
+            if (this.outsideClickListener) {
+                document.removeEventListener('click', this.outsideClickListener);
+                this.outsideClickListener = null;
+            }
+        },
+        isTargetClicked() {
+            return this.target && (this.target === event.target || this.target.contains(event.target));
+        }
+    } 
+}
+</script>

src/main.js

@@ -18,6 +18,7 @@ import InputText from './components/inputtext/InputText';
 import Fieldset from './components/fieldset/Fieldset';
 import MultiSelect from './components/multiselect/MultiSelect';
 import Listbox from './components/listbox/Listbox';
+import OverlayPanel from './components/overlaypanel/OverlayPanel';
 import Panel from './components/panel/Panel';
 import Password from './components/password/Password';
 import ProgressBar from './components/progressbar/ProgressBar';
@@ -56,6 +57,7 @@ Vue.component('InputText', InputText);
 Vue.component('Listbox', Listbox);
 Vue.component('Fieldset', Fieldset);
 Vue.component('MultiSelect', MultiSelect);
+Vue.component('OverlayPanel', OverlayPanel);
 Vue.component('Panel', Panel);
 Vue.component('Password', Password);
 Vue.component('ProgressBar', ProgressBar);

src/router.js

@@ -136,6 +136,11 @@ export default new Router({
         name: 'multiselect',
         component: () => import('./views/multiselect/MultiSelectDemo.vue')
     },
+    {
+        path: '/overlaypanel',
+        name: 'overlaypanel',
+        component: () => import('./views/overlaypanel/OverlayPanelDemo.vue')
+    },
     {
         path: '/panel',
         name: 'panel',

src/views/overlaypanel/OverlayPanelDemo.vue

@@ -0,0 +1,28 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>OverlayPanel</h1>
+                <p>OverlayPanel is a container component that can overlay other components on page.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <Button type="button" label="Toggle" @click="toggle" />
+
+            <OverlayPanel ref="op">
+                <img src="/demo/images/nature/nature1.jpg" alt="Nature Image">
+            </OverlayPanel>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    methods: {
+        toggle(event) {
+            this.$refs.op.toggle(event);
+        }
+    }
+}
+</script>